/* Ankauf Edelmetalle, Theme-Stylesheet. Übernommen aus dem Entwurf 38
   (mockup/_quelle: site.css, site-elemente.css, site-funktionen.css), ohne Entwurfsleiste und Notizen;
   unten die Ergänzungen für WordPress. Die Schriften stehen in schriften.css. */
/* Auftritt für Ankauf Edelmetalle, Allschwil. Abgeleitet vom Geschäft selbst: Zinn und Besteck zuerst,
   echte Fotos des Kunden, Stempel (Punzen) als wiederkehrendes Detail, Preise nach Börsenkurs und Feingehalt.
   Mitternachtsblau mit Champagner, Montserrat nah am Logo, Source Sans 3 für Text.
   Farbvarianten (z. B. site-petrol.css) überschreiben nur die Werte in diesem Block. */
:root {
  --dark: #0C1522;            /* Mitternachtsblau */
  --dark-rgb: 12, 21, 34;
  --dark-2: #152032;
  --dark-3: #070C16;
  --line-dark: rgba(255, 255, 255, .11);
  --on-dark: #EEF0F3;
  --on-dark-soft: #B4BAC4;
  --on-dark-2: #8A92A0;
  --photo-tint: rgba(12, 21, 34, .14);   /* leichter Farbschimmer auf den Fotos im Einstieg */

  --gold: #C8A97A;            /* Champagner, Hauptknopf */
  --gold-rgb: 200, 169, 122;
  --gold-hover: #D5B98E;
  --gold-2: #E4D2B2;          /* helles Champagner auf Dunkel */
  --gold-deep: #7A5F33;       /* Champagner als Text auf Hell */
  --paper: #FFFFFF;
  --silver: #EEF0F3;          /* kühles Hellgrau */
  --ink: #141A24;
  --ink-2: #4C5462;
  --muted: #778090;
  --line: #DDE1E7;
  --field: #C5CBD4;
  --row-on: #F7F2E8;          /* Zeile mit Gewicht im Rechner */
  --zero: #BEC4CC;
  --up: #6CBF8E;
  --down: #E8968B;
  --note: #F3DF74;

  --display: "Montserrat", system-ui, sans-serif;
  --font: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  /* Sechs Schriftgrössen, sonst keine */
  --fs-xs: .875rem;                           /* 14: Beschriftungen */
  --fs-s: 1rem;                               /* 16: Nebentexte, Knöpfe */
  --fs-m: 1.125rem;                           /* 18: Fliesstext */
  --fs-l: 1.3125rem;                          /* 21: Einleitungen, Zwischentitel */
  --fs-xl: clamp(1.75rem, 3vw, 2.5rem);       /* Abschnittstitel, Gesamtpreis */
  --fs-h1: clamp(2.25rem, 4.6vw, 3.625rem);

  --radius: 8px;
  --radius-s: 6px;

  --gap: 32px;
  --section: clamp(80px, 9vw, 120px);
  --head-gap: clamp(40px, 5vw, 56px);
  --control: 50px;            /* Höhe von Knöpfen und Feldern */
  --gutter-l: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  color-scheme: light;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--dark); color: var(--ink); font: 400 var(--fs-m)/1.6 var(--font); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-family: var(--display); font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.i { width: 1.2em; height: 1.2em; flex: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1200px; margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

/* Schrift: Montserrat für Titel (nah am Logo), Source Sans 3 für Text */
h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -.025em; }
h2 { font-size: var(--fs-xl); line-height: 1.12; letter-spacing: -.02em; }
h3 { font-size: var(--fs-l); line-height: 1.3; letter-spacing: -.01em; }
.lead { font-size: var(--fs-l); line-height: 1.5; color: var(--ink-2); }
.dark .lead { color: var(--on-dark-soft); }
/* Jeder Satz eine Zeile, auf dem Handy fliessend */
.lines > span { display: block; }
.label { font-size: var(--fs-s); color: var(--gold-2); }
.prose { display: grid; gap: 18px; max-width: 680px; }
.prose p { color: var(--ink-2); }
.dark .prose p { color: var(--on-dark-soft); }
/* Kurze Absätze mit gleich langen Zeilen statt einem Wort allein auf der letzten Zeile */
.sec-head .lead, .phero .lead, .cta .lead, .prose p, .items dd, .split__side p, .help p, .fine { text-wrap: balance; }

/* Titelblock, in jedem Abschnitt gleich: Titel und Einleitung */
.sec-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: var(--head-gap); }

/* Zwei Knopfarten: Altgold für die Hauptaktion, Linie für alles andere. Gleiche Höhe, Schrift und Ecken. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  height: var(--control); padding: 0 24px; border: 1px solid transparent; border-radius: var(--radius-s);
  font: 600 var(--fs-s)/1 var(--font); letter-spacing: .01em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn--gold { background: var(--gold); color: var(--dark); }
.btn--gold:hover { background: var(--gold-hover); }
.btn--line { background: transparent; border-color: rgba(22, 24, 29, .28); color: var(--ink); }
.btn--line:hover { border-color: var(--dark); background: var(--dark); color: var(--paper); }
.dark .btn--line, .btn--line.on-dark { border-color: rgba(255, 255, 255, .3); color: var(--paper); }
.dark .btn--line:hover, .btn--line.on-dark:hover { border-color: var(--gold); color: var(--gold-2); background: transparent; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
/* Anrufen und WhatsApp: zwei gleiche Felder mit Zeichen, Wort und Nummer, auf Hell und auf Dunkel */
.direkt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.direkt--kontakt { display: none; }
.direkt__weg { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); text-decoration: none; transition: border-color .2s, background-color .2s; }
.direkt__weg .i { width: 22px; height: 22px; color: var(--gold-deep); }
.direkt__weg > span { display: grid; gap: 1px; min-width: 0; }
.direkt__weg b { font: 600 var(--fs-s)/1.25 var(--font); }
.direkt__weg small { font-size: var(--fs-xs); line-height: 1.3; color: var(--ink-2); white-space: nowrap; }
.direkt__weg:hover { border-color: var(--dark); }
.dark .direkt__weg { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: var(--paper); }
.dark .direkt__weg .i { color: var(--gold-2); }
.dark .direkt__weg small { color: var(--on-dark-2); }
.dark .direkt__weg:hover { border-color: var(--gold); background: rgba(255, 255, 255, .06); }
.link { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.link:hover { color: var(--gold-deep); }
.dark .link { color: var(--paper); }
.dark .link:hover { color: var(--gold-2); }

.dark { background: var(--dark); color: var(--on-dark); }
.light { background: var(--silver); color: var(--ink); }
.white { background: var(--paper); color: var(--ink); }
.band { padding-block: var(--section); position: relative; }

/* ---------- Entwurfsleiste (gehört nicht zur fertigen Seite) ---------- */
/* In der Responsive-Ansicht (Seite im Rahmen) ohne Entwurfsleiste */

/* ---------- Kopf: Infoleiste und Navigation ---------- */
.topbar { background: var(--dark-3); color: var(--on-dark-2); font-size: var(--fs-xs); }
.topbar__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; min-height: 38px; padding-block: 6px; }
.topbar a { text-decoration: none; color: var(--on-dark-soft); }
.topbar a:hover { color: var(--gold-2); }
.topbar__reg a { color: var(--gold-2); white-space: nowrap; }
.topbar__right { display: flex; align-items: center; gap: 22px; position: relative; }
.lang { display: flex; gap: 10px; }
.lang a { color: var(--on-dark-2); }
.lang a[aria-current] { color: var(--gold-2); }

/* Eine Seite zum Scrollen: der Kopf bleibt oben, damit das Menü jederzeit zu den Abschnitten springt */
.head { background: var(--dark); border-bottom: 1px solid var(--line-dark); position: sticky; top: 0; z-index: 20; }
main > section[id] { scroll-margin-top: 32px; }
/* «Termin vereinbaren» springt zum Formular: seine Oberkante steht knapp unter dem Kopf (89 px) */
#termin { scroll-margin-top: 104px; }
.head__in { display: flex; align-items: center; gap: 32px; padding-block: 14px; }
.logo { display: block; width: 124px; height: 60px; flex: none; }
.logo span {
  display: block; width: 100%; height: 100%;
  background: url("https://storage.e.jimdo.com/cdn-cgi/image/quality=90,fit=scale-down,format=auto,width=600,height=600/image/492720405/e44e4294-2b1b-4ecc-bc52-cfc3a240d4f7.jpg") no-repeat;
  background-size: 171px auto; background-position: -20px -53px;
  filter: contrast(1.4); mix-blend-mode: screen;
}
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a { display: block; padding: 10px 12px; font: 500 .9375rem/1.2 var(--display); text-decoration: none; color: var(--on-dark-soft); }
.nav a:hover { color: var(--gold-2); }
.nav > a[aria-current] { color: var(--paper); box-shadow: inset 0 -2px 0 var(--gold); }
.nav__item { position: relative; }
.nav__item > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.sub { display: none; position: absolute; top: 100%; left: 0; z-index: 30; min-width: 250px; padding: 6px 0; background: var(--dark-2); border: 1px solid var(--line-dark); border-top: 2px solid var(--gold); }
.sub a { padding: 10px 18px; box-shadow: none; }
.sub a:hover { background: rgba(255, 255, 255, .04); }
.sub a[aria-current="page"] { color: var(--gold-2); box-shadow: none; }
.nav__item:hover .sub, .nav__item:focus-within .sub { display: block; }
.nav__lang, .nav__nur-mobil, .nav__kontakt, .nur-handy, .checks__umbruch, .foot__kontakt { display: none; }
/* «Kontakt» im Menü nur auf dem Handy; auf dem Laptop steht daneben der Knopf. Muss stärker sein als «.nav a». */
.nav .nav__nur-mobil { display: none; }
.head__cta { flex: none; }
.menu-btn { display: none; }

/* ---------- Einstieg: Foto wie in einer Vitrine, auf allen Seiten ---------- */
.hero, .phero { position: relative; overflow: hidden; isolation: isolate; }
.hero__photo, .phero__photo { position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; width: 58%; }
.phero__photo { width: 52%; }
.hero__photo img, .phero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; filter: brightness(.9) contrast(1.06); }
.hero__photo::after, .phero__photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--dark) 0%, rgba(var(--dark-rgb), .85) 18%, rgba(var(--dark-rgb), 0) 52%),
    linear-gradient(0deg, var(--dark) 0%, rgba(var(--dark-rgb), 0) 26%),
    var(--photo-tint);
}
.hero__copy { max-width: 580px; padding-block: clamp(80px, 11vw, 150px) clamp(64px, 8vw, 112px); display: grid; gap: 28px; justify-items: start; position: relative; }
.hero__meta { font-size: var(--fs-s); color: var(--on-dark-2); }
.hero__meta b { color: var(--paper); font-weight: 600; }
.hero__meta a { white-space: nowrap; }
.phero__in { position: relative; }
.phero__copy { max-width: 560px; padding-block: clamp(48px, 6vw, 88px) clamp(56px, 7vw, 96px); display: grid; gap: 24px; justify-items: start; }
.phero--text .phero__copy { max-width: 780px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-s); color: var(--on-dark-2); }
.crumbs a { text-decoration: none; color: var(--on-dark-soft); }
.crumbs a:hover { color: var(--gold-2); }
.phero__price { font-size: var(--fs-s); color: var(--on-dark-2); }
.phero__price b { color: var(--gold-2); font-weight: 600; }

.rates { background: var(--dark); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.rates__in { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 40px; padding-block: 18px; font-size: var(--fs-s); color: var(--on-dark-2); }
.rates ul { display: flex; flex-wrap: wrap; gap: 8px 32px; list-style: none; margin: 0; padding: 0; }
.rates li { color: var(--on-dark-soft); }
.rates li b { color: var(--paper); font: 600 .9375rem/1 var(--display); margin-right: 8px; }
.rates .chg { margin-left: 8px; }
.rates .chg.up { color: var(--up); }
.rates .chg.down { color: var(--down); }
.rates__time { margin-left: auto; }

/* ---------- Ankauf: Fotos mit Schrift darauf ---------- */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; position: relative; }
.tile { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; background: var(--dark); color: var(--paper); text-decoration: none; }
.tile::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .08); border-radius: inherit; transition: border-color .3s; pointer-events: none; }
.tile:hover::after { border-color: var(--gold); }
.tile__img { position: absolute; inset: 0; }
.tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.tile__img--detail img { scale: 1.5; transform-origin: 58% 42%; }
.tile:hover .tile__img img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .tile__img img, .tile::after { transition: none; } }
.tile__cap { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: 64px 20px 20px; background: linear-gradient(0deg, rgba(var(--dark-rgb), .94) 0%, rgba(var(--dark-rgb), .7) 55%, rgba(var(--dark-rgb), 0) 100%); }
.tile__cap h3 { color: var(--paper); margin-bottom: 2px; }
.tile__cap p { font-size: var(--fs-s); color: var(--on-dark-soft); }
.tile__cap p.price { color: var(--gold-2); font-weight: 600; }
.tile__cap .k::after { content: " ·"; }
.tile__cap .nw { white-space: nowrap; }
.also { margin-top: 32px; color: var(--ink-2); }

/* ---------- Inhalt: Liste und dunkler Auslagekasten ---------- */
.split { align-items: start; row-gap: 48px; }
.split__main { grid-column: 1 / span 7; }
.split__side { grid-column: 9 / -1; display: grid; gap: 16px; align-content: start; padding: 28px; background: var(--dark); color: var(--on-dark); border-radius: var(--radius); position: relative; }
.split__side h3 { color: var(--paper); }
.split__side p { color: var(--on-dark-soft); }
.split__side .link { color: var(--paper); }
.split__side .link:hover { color: var(--gold-2); }
.split__side blockquote p { color: var(--paper); }
.split__side cite { color: var(--on-dark-2); }
.split__side .contact div + div { border-color: var(--line-dark); }
.split__side .contact dt { color: var(--on-dark-2); }
.split__side .contact dd { color: var(--paper); }
.split__side.fig { padding: 0; background: none; overflow: hidden; }
.items { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
.items div { display: grid; gap: 4px; align-content: start; padding: 18px 0 20px; border-top: 1px solid var(--line); }
.items dt { font: 600 var(--fs-m)/1.3 var(--display); }
.items dd { margin: 0; color: var(--ink-2); }
.stamps { margin: 8px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); }
.stamps dt, .stamps dd { margin: 0; padding: 11px 0; border-top: 1px solid var(--line-dark); }
.stamps dt { font: 600 var(--fs-m)/1.4 var(--display); padding-right: 20px; color: var(--gold-2); }
.stamps dd { color: var(--on-dark-soft); }

/* Spalten mit feinen Trennlinien: Schritte, Wege */
.cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols > li { display: grid; gap: 12px; align-content: start; padding: 4px 32px 8px; border-left: 1px solid var(--line); }
.cols > li:first-child { padding-left: 0; border-left: 0; }
.cols h3 { display: grid; gap: 12px; justify-items: start; }
.cols .n { font: 600 var(--fs-xs)/1 var(--display); letter-spacing: .08em; color: var(--gold-deep); }
.cols p { color: var(--ink-2); text-wrap: balance; }
.dark .cols > li { border-color: var(--line-dark); }
.dark .cols p { color: var(--on-dark-soft); }

/* ---------- Rechner ---------- */
.calc { align-items: start; }
.card { grid-column: 1 / span 8; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); position: relative; overflow: hidden; }
.help { grid-column: 9 / -1; margin-left: 8px; padding: 28px; background: var(--dark); color: var(--on-dark); border-radius: var(--radius); display: grid; gap: 16px; align-content: start; }
.help h3 { color: var(--paper); }
.help p { color: var(--on-dark-soft); }
.ptabs { display: flex; flex-wrap: wrap; gap: 0 28px; padding: 0 24px; border-bottom: 1px solid var(--line); }
.ptabs button { border: 0; background: none; padding: 18px 0 15px; cursor: pointer; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; font: 500 .9375rem/1.2 var(--display); }
.ptabs button:hover { color: var(--ink); }
.ptabs button[aria-selected="true"] { color: var(--ink); border-color: var(--gold); font-weight: 600; }
.ptabs button i { font-style: normal; font-size: var(--fs-xs); margin-left: 6px; color: var(--gold-deep); }
.ctable { width: 100%; border-collapse: collapse; }
.ctable th { text-align: left; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); padding: 16px 12px 10px; }
.ctable td { padding: 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.ctable th:first-child, .ctable td:first-child { padding-left: 24px; }
.ctable th:last-child, .ctable td:last-child { padding-right: 24px; text-align: right; }
.ctable .pr { text-align: right; white-space: nowrap; }
.ctable .fg b { font: 600 var(--fs-m)/1.3 var(--display); margin-right: 10px; }
.ctable .fg span { color: var(--ink-2); }
.ctable td.wt { width: 1%; }
.ctable .val { white-space: nowrap; font-weight: 600; min-width: 120px; }
.ctable .val.zero { color: var(--zero); font-weight: 400; }
.ctable tr.on td { background: var(--row-on); }
.inp { display: flex; align-items: center; width: 124px; height: 44px; margin-left: auto; border: 1px solid var(--field); border-radius: var(--radius-s); background: var(--paper); }
.inp:focus-within { border-color: var(--dark); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .3); }
.inp input { width: 100%; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; padding: 0 10px; text-align: right; font-weight: 600; }
.inp span { padding-right: 12px; color: var(--muted); }
.total { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 24px; background: var(--dark); color: var(--paper); }
.total > div { display: grid; gap: 2px; }
.total small { font-size: var(--fs-xs); color: var(--on-dark-2); }
.total output { font: 600 var(--fs-xl)/1 var(--display); letter-spacing: -.02em; white-space: nowrap; margin-left: auto; }
.fine { padding: 14px 24px 20px; font-size: var(--fs-xs); color: var(--muted); }

/* ---------- Über uns (Startseite) ---------- */
.about { align-items: start; }
.about__pic { grid-column: 1 / span 4; margin: 0; position: relative; }
.about__pic img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 70%; border-radius: var(--radius); }
.about__pic figcaption { margin-top: 12px; font-size: var(--fs-xs); color: var(--on-dark-2); }
.about__text { grid-column: 5 / -1; padding-left: 32px; display: grid; gap: 28px; max-width: 680px; }
.about__text p { color: var(--on-dark-soft); text-wrap: balance; }
blockquote { margin: 0; padding: 0 0 0 24px; border-left: 1px solid var(--gold); display: grid; gap: 10px; }
blockquote p { font: 500 var(--fs-l)/1.5 var(--display); text-wrap: balance; }
.dark blockquote p { color: var(--paper); }
cite { font-style: normal; font-size: var(--fs-s); color: var(--ink-2); }
.dark cite { color: var(--on-dark-2); }

/* ---------- Fragen: Liste mit Linien ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 20px 44px 20px 0; font: 600 var(--fs-m)/1.35 var(--display); text-wrap: balance; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-52%); font: 400 1.5rem/1 var(--font); color: var(--gold-deep); }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--gold-deep); }
.faq details > p { padding: 0 44px 22px 0; color: var(--ink-2); max-width: 720px; text-wrap: balance; }
.faq-group { align-items: start; row-gap: 20px; }
.faq-group + .faq-group { margin-top: 56px; }
.faq-group > h2 { grid-column: 1 / span 4; font-size: var(--fs-l); letter-spacing: -.01em; padding-top: 18px; }
.faq-group > .faq { grid-column: 5 / -1; }
.more { margin-top: 32px; }

/* ---------- Märkte ---------- */
.tablecard { border-top: 1px solid var(--line); }
.mtable { width: 100%; border-collapse: collapse; }
.mtable th { text-align: left; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); padding: 16px 16px 10px 0; }
.mtable td { padding: 18px 16px 18px 0; border-top: 1px solid var(--line); vertical-align: top; }
.mtable td:first-child { font: 600 var(--fs-m)/1.4 var(--display); white-space: nowrap; }
.mtable td.muted { color: var(--ink-2); }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }

/* ---------- Schlussband in Altgold ---------- */
.cta { background: var(--gold); color: var(--dark); padding-block: clamp(48px, 6vw, 72px); }
.cta__in { align-items: center; row-gap: 24px; }
.cta__copy { grid-column: 1 / span 7; display: grid; gap: 12px; }
.cta .lead { color: rgba(var(--dark-rgb), .78); }
.cta__act { grid-column: 9 / -1; display: grid; gap: 12px; justify-items: stretch; }
.cta .btn--gold { background: var(--dark); color: var(--paper); }
.cta .btn--gold:hover { background: var(--dark-2); }
.cta .btn--line { border-color: rgba(var(--dark-rgb), .4); color: var(--dark); }
.cta .btn--line:hover { background: var(--dark); color: var(--paper); border-color: var(--dark); }
.cta__tel { font-size: var(--fs-s); color: rgba(var(--dark-rgb), .75); text-align: center; }
.cta__tel a { color: var(--dark); text-decoration: none; font-weight: 600; }

/* ---------- Anfrage ---------- */
.anfrage { align-items: start; }
/* Anfrage: links Titel und Kontakt als ruhiger Text, rechts das Formular */
.anfrage__info { grid-column: 1 / span 5; display: grid; align-content: start; gap: 32px; padding-right: clamp(0px, 3vw, 40px); }
.anfrage__info .sec-head { margin: 0; }
.anfrage__info .contact { border-top: 1px solid var(--line); }
.anfrage__info .contact dd { font-size: var(--fs-m); }
.contact { margin: 0; }
.contact div { padding: 14px 0; }
.contact div + div { border-top: 1px solid var(--line); }
.contact dt { font-size: var(--fs-xs); color: var(--muted); }
.contact dd { margin: 2px 0 0; font: 600 var(--fs-l)/1.35 var(--display); letter-spacing: -.01em; }
.contact dd.s { font: 400 var(--fs-m)/1.4 var(--font); letter-spacing: 0; }
.contact a { text-decoration: none; }
.contact a:hover { color: var(--gold-deep); }
.form { grid-column: 6 / -1; display: grid; gap: 28px; position: relative; padding: clamp(24px, 3vw, 36px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form legend, .form .lbl { display: block; padding: 0; margin-bottom: 12px; font: 600 var(--fs-m)/1.3 var(--display); }
/* Ein Kästchen-Stil für Auswahl und Einverständnis */
.box { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; flex: none; border: 1.5px solid var(--field); border-radius: 3px; background: var(--paper); cursor: pointer; }
.box:checked { background: var(--dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='m3 7.2 2.6 2.6L11 4.4' fill='none' stroke='%23E5CD95' stroke-width='2'/%3E%3C/svg%3E") center/12px no-repeat; border-color: var(--dark); }
.checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.check { display: flex; align-items: center; gap: 10px; height: var(--control); padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--paper); cursor: pointer; font-size: var(--fs-s); }
.check:has(:checked) { border-color: var(--dark); box-shadow: 0 0 0 1px var(--dark); }
.way input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.way input:focus-visible + span { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.drop { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 20px; border: 1px dashed var(--field); border-radius: var(--radius); background: var(--silver); }
.drop.is-over { border-color: var(--gold-deep); }
.drop p { flex: 1 1 220px; font-size: var(--fs-s); color: var(--ink-2); }
.drop p b { display: block; color: var(--ink); font-weight: 600; }
.drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.drop input:focus-visible + label { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-top: 10px; }
.thumbs img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; border-radius: 4px; }
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.way span { display: grid; gap: 2px; height: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--paper); cursor: pointer; font-size: var(--fs-s); }
.way span b { font: 600 var(--fs-s)/1.3 var(--display); }
.way span small { color: var(--muted); font-size: var(--fs-s); }
.way input:checked + span { border-color: var(--dark); box-shadow: inset 0 0 0 1px var(--dark); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.field { display: grid; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: var(--fs-s); }
.field input, .field textarea { width: 100%; height: var(--control); padding: 0 14px; border: 1px solid var(--field); border-radius: var(--radius-s); background: var(--paper); }
.field textarea { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus { border-color: var(--dark); outline: none; box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .3); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-s); color: var(--ink-2); cursor: pointer; }
.consent .box { margin-top: 3px; }
.consent a { color: var(--ink); }
.form__status { padding: 12px 14px; background: var(--silver); border-left: 2px solid var(--gold); font-size: var(--fs-s); }

/* ---------- Fuss ---------- */
.foot { padding-block: 72px 28px; color: var(--on-dark-2); font-size: var(--fs-s); position: relative; }
.foot__grid { row-gap: 36px; }
.foot h4 { color: var(--paper); font-size: .9375rem; margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--gold-2); }
/* Laptop und Tablet: oben das Logo zwischen zwei Goldlinien wie auf dem Handy, darunter gleich breite Spalten:
   Übersicht | Adresse | Telefon | E-Mail und Termine (Tablet zwei mal zwei) */
@media (min-width: 721px) {
  .foot__grid > .foot__brand { grid-column: 1 / -1; display: flex; align-items: center; gap: 28px; }
  .foot__brand::before, .foot__brand::after { content: ""; flex: 1 1 0; height: 1px; background: rgba(var(--gold-rgb), .4); }
  .foot__kontakt { display: contents; }
  .foot__uebersicht, .foot__kontakt > div, .foot__sprachen { grid-column: span 3; }
  .foot ul a, .foot__kontakt p { color: var(--on-dark-soft); }
  .foot ul { gap: 0; }
  .foot li, .foot__kontakt p { line-height: 34px; } /* alle Spalten im gleichen Takt */
  .foot h4 { margin-bottom: 6px; }
  .foot__kontakt p { margin: 0 0 22px; }
  .foot__kontakt p:last-child { margin-bottom: 0; }
  .foot__hinweis { color: var(--on-dark-2); font-size: var(--fs-xs); }
}
@media (min-width: 721px) and (max-width: 980px) {
  /* stärker als «.grid» und «.grid > *» weiter unten (dort eine Spalte für Tablet und Handy) */
  .foot .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__grid > .foot__uebersicht, .foot__grid > .foot__sprachen, .foot__kontakt > div { grid-column: auto; }
  .foot__grid > .foot__brand { grid-column: 1 / -1; }
}
.foot__copy { margin: 0; }
.foot__copy a { white-space: nowrap; }
.foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line-dark); font-size: var(--fs-xs); }
.foot__bottom nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* Mobilleiste */
.mbar { display: none; }
.toast { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); max-width: min(440px, calc(100% - 32px)); padding: 12px 18px; background: var(--dark-2); color: #fff; border-left: 2px solid var(--gold); font-size: var(--fs-s); }

/* ---------- Responsiv ---------- */
@media (max-width: 1100px) {
  .nav a { padding-inline: 9px; }
  .head__in { gap: 20px; }
}
@media (max-width: 980px) {
  .hero__photo, .phero__photo { position: relative; width: 100%; height: 320px; }
  .phero__photo { height: 260px; }
  .hero__photo::after, .phero__photo::after { background: linear-gradient(0deg, var(--dark) 0%, rgba(var(--dark-rgb), 0) 42%), var(--photo-tint); }
  .hero__copy { padding-block: 8px 64px; }
  .phero__copy { padding-block: 32px 56px; }
  .phero--text .phero__copy { padding-top: 48px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rates__time { margin-left: 0; width: 100%; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .grid > * { grid-column: 1 / -1; }
  .calc, .about, .anfrage { row-gap: 32px; }
  .help, .about__text, .anfrage__info { margin: 0; padding-left: 0; padding-right: 0; }
  .help { padding: 24px; }
  .about__pic { max-width: 520px; }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .cols > li, .cols > li:first-child { padding: 20px 0; border-left: 0; border-top: 1px solid var(--line); }
  .dark .cols > li { border-color: var(--line-dark); }
  .faq-group > h2 { padding-top: 0; }
  .foot__grid > div:not(.foot__brand) { grid-column: auto; }
  .topbar__right .lang { display: none; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 4px var(--gutter-r) 16px var(--gutter-l); background: var(--dark); border-bottom: 1px solid var(--line-dark); max-height: calc(100vh - 120px); overflow: auto; }
  .nav.is-open { display: flex; }
  /* Menü auf Tablet und Handy: grosse Zeilen zum Tippen, «Kontakt» zuletzt, weil der Knopf im Kopf fehlt */
  .nav > a { padding: 14px 0; border-bottom: 1px solid var(--line-dark); font: 500 var(--fs-m)/1.25 var(--display); }
  .nav .nav__nur-mobil { display: block; }
  .nav__kontakt { display: block; padding-top: 16px; }
  .nav .direkt__weg { display: flex; padding: 10px 14px; font: 400 var(--fs-s)/1.3 var(--font); color: var(--paper); }
  .nav > a[aria-current] { box-shadow: none; color: var(--gold-2); }
  .nav__item > a::after { display: none; }
  .sub { display: block; position: static; min-width: 0; padding: 0 0 0 16px; background: none; border: 0; }
  .sub a { padding: 11px 0; font-size: var(--fs-s); }
  .nav__lang { display: flex; gap: 18px; padding-top: 14px; }
  .nav__lang a { border: 0; padding: 4px 0; font-size: var(--fs-s); }
  .menu-btn { display: inline-flex; margin-left: auto; }
  .head__cta { display: none; }
}
@media (max-width: 720px) {
  /* Handy: eine eigene Schriftreihe mit sechs Grössen (34, 28, 19, 17, 15 und 13 px); jede Schrift auf dem Handy
     kommt aus diesen Werten. 64 px zwischen den Abschnitten, 24 px unter dem Titel, Knöpfe und Felder 48 px. */
  :root { --fs-h1: 2.125rem; --fs-xl: 1.75rem; --fs-l: 1.1875rem; --fs-m: 1.0625rem; --fs-s: .9375rem; --fs-xs: .8125rem;
    --section: 64px; --head-gap: 24px; --control: 48px; }
  body { font-size: var(--fs-m); }
  .lines > span { display: inline; }
  .sec-head { gap: 12px; }
  .lead { font-size: var(--fs-m); line-height: 1.55; }
  /* Text bricht natürlich um, ohne künstlich gekürzte Zeilen; nur kein Wort allein auf der letzten Zeile */
  .sec-head .lead, .prose p, .items dd, .cols p { text-wrap: pretty; }
  .topbar { display: none; }
  .items { grid-template-columns: minmax(0, 1fr); }

  /* Kopf: Logo links, rechts «Menü» in der Schrift des Menüs, mittlere Stärke, ohne Kasten; bleibt oben (65 px) */
  .head__in { gap: 16px; padding-block: 8px; }
  .logo { width: 100px; height: 48px; }
  .logo span { background-size: 138px auto; background-position: -16px -43px; }
  .head .menu-btn { height: 44px; gap: 8px; padding: 0 0 0 12px; border: 0; background: none; color: var(--on-dark); font: 500 var(--fs-s)/1 var(--display); letter-spacing: 0; }
  .head .menu-btn:hover { background: none; color: var(--gold-2); }
  .head .menu-btn .i { width: 20px; height: 20px; }
  /* das Menü klappt nur auf, so hoch wie seine Einträge; ein weicher Schatten setzt es vom Inhalt darunter ab */
  .nav { box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .7); }
  .nav > a { padding: 13px 0; }
  #termin { scroll-margin-top: 64px; }

  /* Einstieg: das Foto liegt hinter dem Text und dunkelt nach unten ab, ein Bild statt zwei Teile */
  .hero__photo, .phero__photo { position: absolute; inset: 0 0 auto; width: 100%; height: 420px; }
  .phero__photo { height: 330px; }
  .hero__photo img { object-position: 55% 82%; }
  .phero__photo img { object-position: 50% 50%; }
  .hero__photo::after, .phero__photo::after {
    background: linear-gradient(180deg, rgba(var(--dark-rgb), 0) 0%, rgba(var(--dark-rgb), .15) 38%, rgba(var(--dark-rgb), .78) 72%, var(--dark) 100%); }
  .hero__copy { gap: 18px; padding-block: 250px 40px; }
  .phero__copy { gap: 16px; padding-block: 190px 32px; }
  .hero .btns, .phero .btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
  .hero .lead, .phero .lead { text-wrap: balance; }

  /* keine Leiste unten: Anrufen und WhatsApp stehen im Menü und im Kontakt */
  .mbar { display: none; }

  /* Kontakt: zwei Knöpfe, darüber die Angaben knapp */
  .anfrage__info { gap: 22px; }
  .anfrage__info .btns { display: none; }
  .direkt--kontakt { display: grid; }
  .nur-handy { display: inline-flex; }
  .anfrage__info .contact { border-top: 0; }
  .anfrage__info .contact div:nth-child(-n+2) { display: none; }
  .contact div, .contact div + div { padding: 10px 0; border-top: 1px solid var(--line); }
  .anfrage__info .contact dd { font-size: var(--fs-s); }

  /* Formular: ein ruhiges Blatt bis an den Rand, oben sein Titel; «Termin vereinbaren» landet genau hier.
     Alle Bedienelemente in derselben hellen Fläche ohne Rahmen: das Material als Pillen in zwei Reihen zu vier und
     «Anderes» in einer eigenen Reihe, der Weg als Umschalter in einer Schiene, die Felder paarweise. Dunkel ist nur,
     was gewählt ist. */
  #kontakt { padding-bottom: 0; }
  .form { gap: 24px; margin-inline: calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r)); padding: 28px var(--gutter-r) 36px var(--gutter-l); border-inline: 0; border-bottom: 0; border-radius: 0; }
  .form__titel { font-size: var(--fs-l); }
  .form legend, .form .lbl { margin-bottom: 12px; font: 600 var(--fs-s)/1.3 var(--font); }
  .checks { display: flex; flex-wrap: wrap; gap: 8px 6px; }
  .checks__umbruch { display: block; flex-basis: 100%; height: 0; }
  .check { position: relative; height: 38px; gap: 0; padding: 0 12px; border: 0; border-radius: 19px; background: var(--silver); font-size: var(--fs-s); }
  .check .box { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; border-radius: inherit; background: none; opacity: 0; cursor: pointer; }
  .check:has(:checked) { background: var(--dark); color: var(--paper); box-shadow: none; }
  .check:has(:focus-visible) { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
  .ways { gap: 0; padding: 3px; border-radius: 10px; background: var(--silver); }
  .way span { place-content: center; height: 40px; padding: 0 2px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); text-align: center; }
  .way span b { font: 600 var(--fs-s)/1.2 var(--font); }
  .way span small { display: none; }
  .way input:checked + span { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(var(--dark-rgb), .18); }
  .fields { gap: 16px 12px; }
  .field label { font: 600 var(--fs-s)/1.3 var(--font); }
  .field input, .field textarea { border-color: var(--silver); background: var(--silver); font-size: 1rem; }
  .field input:focus, .field textarea:focus { background: var(--paper); }
  .field textarea { min-height: 96px; line-height: 1.55; }
  .consent { font-size: var(--fs-s); }

  /* Fuss: oben die Marke als Schlusszeichen der Seite, mittig und etwas grösser, zwischen zwei feinen Linien in
     Champagner bis an den Rand (das Logo ist ein gestapeltes Zeichen und steht nur auf der Mittelachse ruhig).
     Darunter zwei gleich hohe Spalten mit Titel: die fünf Unterseiten | Adresse und Telefon; unten klein das Rechtliche.
     Die Übersicht und die Sprachen stehen im Menü. */
  .foot { padding-block: 40px 28px; }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 32px; }
  .foot__grid > .foot__brand { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; }
  .foot__brand::before, .foot__brand::after { content: ""; flex: 1 1 0; height: 1px; background: rgba(var(--gold-rgb), .4); }
  .foot .logo { width: 124px; height: 60px; }
  .foot .logo span { background-size: 171px auto; background-position: -20px -53px; }
  .foot__sprachen, .foot__mail, .foot__hinweis { display: none; } /* Handy: wie bisher nur Adresse und Telefon */
  .foot__kontakt { display: grid; gap: 18px; align-content: start; }
  .foot h4 { margin-bottom: 4px; font-size: var(--fs-s); }
  .foot ul { gap: 0; }
  .foot li, .foot__kontakt p { line-height: 30px; }
  .foot ul a, .foot__kontakt p { color: var(--on-dark-soft); }
  .foot__bottom { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 30px; padding-top: 20px; }
  .foot__copy > * { display: block; }
  .foot__copy .foot__punkt { display: none; }
  .foot__bottom nav { gap: 4px 20px; }
}
@media (max-width: 520px) {
  .tiles { gap: 10px; }
  .tile__cap { padding: 48px 14px 14px; }
  .tile__cap h3 { font-size: var(--fs-m); }
  .tile__cap p:not(.price) { display: none; }
  .tile__cap p > span { display: block; }
  .tile__cap .k::after { content: none; }
}
@media (max-height: 500px) and (orientation: landscape) {
  /* Handy quer: wenig Höhe, der Kopf scrollt mit */
  .head { position: relative; }
  #termin { scroll-margin-top: 16px; }
}

/* =====================================================================
   Elemente mit mehr Gestaltung (Entwurf 11)
   ===================================================================== */
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid rgba(var(--gold-rgb), .5); color: var(--gold-deep); }
.dark .ico, .contactcard .ico, .split__side .ico { color: var(--gold-2); border-color: rgba(var(--gold-rgb), .4); }
.live { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #5CC08A; box-shadow: 0 0 0 0 rgba(92, 192, 138, .55); animation: puls 2.4s infinite; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(92, 192, 138, .55); } 70% { box-shadow: 0 0 0 7px rgba(92, 192, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(92, 192, 138, 0); } }
@media (prefers-reduced-motion: reduce) { .live { animation: none; } }
.topbar__right a { display: inline-flex; align-items: center; gap: 6px; }
.topbar__right .i { width: 14px; height: 14px; color: var(--gold-2); }
.btn .i { width: 18px; height: 18px; }

.hero__wrap { position: relative; }

/* Metallpunkte in Börsenleiste und Rechner */
.mdot { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; }
.mdot--gold { background: linear-gradient(135deg, #F1D48A, #B88A35); }
.mdot--silber { background: linear-gradient(135deg, #F4F5F7, #A9AEB6); }
.mdot--platin, .mdot--pp { background: linear-gradient(135deg, #ECEDEF, #8E949C); }
.mdot--palladium { background: linear-gradient(135deg, #E2E3E6, #7D838B); }
.mdot--fix { background: linear-gradient(135deg, #C9CCD0, #6F757C); }

/* Kacheln: Preisschild und Pfeil */
.tile__chip { position: absolute; top: 14px; left: 14px; z-index: 1; display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; max-width: calc(100% - 28px); padding: 7px 12px; border-radius: 100px; background: rgba(var(--dark-rgb), .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .14); color: var(--on-dark-soft); font-size: var(--fs-xs); }
.tile__chip b { color: var(--gold-2); font-weight: 600; }
.tile__go { position: absolute; right: 16px; bottom: 18px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); color: var(--paper); transition: background-color .25s, border-color .25s, color .25s, transform .25s; }
.tile:hover .tile__go { background: var(--gold); border-color: var(--gold); color: var(--dark); transform: translateX(2px); }
.tile__cap { padding-right: 68px; }

/* Ausserdem: Leiste mit Links */
.morelinks { display: flex; flex-wrap: wrap; align-items: stretch; margin-top: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--silver); overflow: hidden; }
.morelinks > * { display: flex; align-items: center; gap: 12px; padding: 16px 22px; }
.morelinks > * + * { border-left: 1px solid var(--line); }
.morelinks__title { font: 600 .9375rem/1.2 var(--display); color: var(--ink); }
.morelinks a { flex: 1 1 0; justify-content: space-between; text-decoration: none; font-weight: 600; color: var(--ink); transition: background-color .2s; }
.morelinks a .i { color: var(--gold-deep); transition: transform .2s; }
.morelinks a:hover { background: var(--paper); }
.morelinks a:hover .i { transform: translateX(3px); }
.morelinks__extra { color: var(--muted); font-size: var(--fs-s); }

/* Rechner: Kopfzeile, Ring mit Stempel */
.card__head { display: flex; align-items: center; gap: 10px; padding: 14px 24px; background: var(--silver); border-bottom: 1px solid var(--line); font-size: var(--fs-s); color: var(--ink-2); }
.card__head b { color: var(--ink); font-weight: 600; }
.card__head small { margin-left: auto; color: var(--muted); font-size: var(--fs-xs); }
.ringart { width: 100%; max-width: 260px; height: auto; margin: 4px auto 6px; display: block; }

/* Ablauf: kleine Szenen */
.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.process > li { display: grid; gap: 12px; align-content: start; }
.process h3 { display: grid; gap: 10px; justify-items: start; margin-top: 10px; }
.process .n { font: 600 var(--fs-xs)/1 var(--display); letter-spacing: .08em; color: var(--gold-deep); }
.process p { color: var(--ink-2); text-wrap: balance; }
.scene { position: relative; height: 216px; padding: 20px; display: grid; align-content: center; gap: 8px; overflow: hidden; background: var(--silver); border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--fs-xs); line-height: 1.35; }
.scene .bubble { color: var(--ink); text-wrap: pretty; }
.scene .bubble--out { color: var(--on-dark); }
.bubble { max-width: 86%; padding: 9px 12px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.bubble--in { justify-self: start; border-bottom-left-radius: 3px; }
.bubble--out { justify-self: end; background: var(--dark); border-color: var(--dark); color: var(--on-dark); border-bottom-right-radius: 3px; }
.bubble--photos { justify-self: start; display: flex; gap: 6px; padding: 6px; border-bottom-left-radius: 3px; }
.bubble--photos img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.scene--date { grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; }
.cal { display: grid; justify-items: center; width: 78px; padding: 0 0 10px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.cal__m { justify-self: stretch; text-align: center; margin-bottom: 6px; padding: 4px 0; background: var(--dark); color: var(--gold-2); font: 600 .75rem/1.2 var(--display); letter-spacing: .06em; }
.cal__d { font: 600 2rem/1 var(--display); color: var(--ink); }
.cal__w { font-size: .75rem; color: var(--muted); }
.slot { display: grid; gap: 2px; }
.slot b { font: 600 var(--fs-s)/1.3 var(--display); color: var(--ink); }
.slot span { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.slot .i { width: 15px; height: 15px; color: var(--gold-deep); }
.waysmini { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.waysmini span { padding: 6px 10px; border-radius: 100px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); }
.waysmini span.on { background: var(--dark); border-color: var(--dark); color: var(--paper); }
.receipt { position: relative; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 10px 24px -14px rgba(var(--dark-rgb), .35); }
.receipt__head { display: flex; justify-content: space-between; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px dashed var(--field); }
.receipt__head b { font: 600 var(--fs-s)/1.2 var(--display); }
.receipt__head span { color: var(--muted); }
.receipt__row { display: flex; justify-content: space-between; padding: 5px 0; color: var(--ink-2); }
.receipt__sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.receipt__sum b { font: 600 1rem/1 var(--display); color: var(--ink); }
.receipt__stamp { position: absolute; right: 12px; top: 10px; padding: 3px 10px; border: 2px solid #3E8F63; border-radius: 4px; color: #3E8F63; font: 600 .75rem/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-8deg); opacity: .85; }

/* Versprechen: vier Grundsätze und Siegel */
.pledge { align-items: start; row-gap: 40px; }
.pledge__copy { grid-column: 1 / span 4; display: grid; gap: 28px; justify-items: start; }
.pledge__copy .sec-head { margin-bottom: 0; }
.seal { width: 132px; height: 132px; color: var(--gold); }
.seal text { font: 600 9.2px var(--display); letter-spacing: 1.6px; fill: currentColor; }
.pledge__list { grid-column: 6 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
.pledge__list li { display: grid; gap: 12px; align-content: start; padding: 28px; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.pledge__list h3 { color: var(--paper); font-size: var(--fs-m); }
.pledge__list p { color: var(--on-dark-soft); text-wrap: balance; }

/* Über uns: Fakten und Bildschild */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 0; border-top: 1px solid var(--line-dark); }
.facts div { padding: 18px 16px 0 0; }
.facts div + div { padding-left: 16px; border-left: 1px solid var(--line-dark); }
.facts dt { font: 600 1.75rem/1.1 var(--display); color: var(--gold-2); letter-spacing: -.02em; }
.facts dd { margin: 6px 0 0; font-size: var(--fs-s); color: var(--on-dark-soft); }
.about__pic .tag { position: absolute; left: 14px; top: 14px; padding: 7px 12px; border-radius: 100px; background: rgba(var(--dark-rgb), .75); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .14); color: var(--on-dark); font-size: var(--fs-xs); }

/* Anfrage: Kontaktkarte und Formular mit Symbolen */
.contactcard { display: grid; gap: 4px; padding: 24px; background: var(--dark); color: var(--on-dark); border-radius: var(--radius); }
.contactcard__status { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line-dark); font-size: var(--fs-s); color: var(--on-dark-soft); }
.cline { display: flex; align-items: center; gap: 14px; padding: 10px 0; text-decoration: none; color: var(--on-dark); }
.cline small { display: block; font-size: var(--fs-xs); color: var(--on-dark-2); }
.cline b { display: block; font: 600 1rem/1.3 var(--display); color: var(--paper); overflow-wrap: break-word; }
a.cline:hover b { color: var(--gold-2); }
.contactcard .btns { margin-top: 14px; }
.contactcard .btns .btn { flex: 1 1 auto; }
.way span .i { width: 22px; height: 22px; color: var(--gold-deep); margin-bottom: 6px; }
.drop__ico { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); color: var(--gold-deep); }
.drop__ico .i { width: 22px; height: 22px; }

/* Einstieg Unterseiten: Preis als Schild */
.phero__price { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 100px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-dark); }

/* Fragen mit Beratungskasten */
.advice .ico { width: 48px; height: 48px; }
.advice .btns .btn { flex: 1 1 auto; }
.split__side .btn--line { border-color: rgba(255, 255, 255, .3); color: var(--paper); }
.split__side .btn--line:hover { border-color: var(--gold); color: var(--gold-2); background: transparent; }

.items .ico { margin-bottom: 8px; }

/* Schlussband und Ablaufseite */
.cta__act .btn { gap: 10px; }
.cols .ico { margin-bottom: 4px; }

@media (max-width: 980px) {
  .hero__copy { padding-bottom: 40px; }
  .process { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .scene { height: auto; min-height: 200px; }
  .pledge__list { grid-template-columns: minmax(0, 1fr); }
  .morelinks { flex-direction: column; }
  .morelinks > * + * { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts div, .facts div + div { padding: 14px 0 0; border-left: 0; }
  .facts div + div { border-top: 1px solid var(--line-dark); margin-top: 14px; }
  .pledge__list li { padding: 22px 20px; }
}
@media (max-width: 520px) {
  .tile__chip { top: 10px; left: 10px; padding: 5px 9px; }
  .tile__go { width: 34px; height: 34px; right: 10px; bottom: 12px; }
  .tile__cap { padding-right: 50px; }
  .tile__chip .k { display: none; }
}


/* =====================================================================
   Verfeinerungen (Entwurf 12)
   ===================================================================== */
/* Guilloche: feine Rosette wie auf Wertpapieren und Zertifikaten */
.has-guil { position: relative; overflow: hidden; isolation: isolate; }
.has-guil > :not(.guil) { position: relative; z-index: 1; }
.seal .guil-in { fill: none; stroke: currentColor; stroke-width: .5; opacity: .55; }

/* Börsenleiste: Pfeil vor der Veränderung */
.rates .chg.up::before { content: "▲ "; font-size: .7em; }
.rates .chg.down::before { content: "▼ "; font-size: .7em; }

/* Märkte: Termine mit Kalenderblatt */
.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; position: relative; }
.event { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 18px 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.event .cal { width: 86px; }
.event .cal__d { font-size: 1.375rem; line-height: 1.2; }
.event h3 { font-size: var(--fs-m); }
.event p { color: var(--ink-2); font-size: var(--fs-s); }
.event__meta { display: grid; gap: 6px; justify-items: end; text-align: right; font-size: var(--fs-s); color: var(--ink-2); }
.event__meta span { display: inline-flex; align-items: center; gap: 6px; }
.event__meta .i { width: 16px; height: 16px; color: var(--gold-deep); }
.event__tag { padding: 4px 10px; border-radius: 100px; background: var(--silver); color: var(--gold-deep); font: 600 .8125rem/1.2 var(--display); }

@media (max-width: 720px) {
  .event { grid-template-columns: auto minmax(0, 1fr); gap: 14px 18px; padding: 16px; }
  .event__meta { grid-column: 1 / -1; justify-items: start; text-align: left; }
}

/* =====================================================================
   Eigene Teile der Seite (seit Entwurf 27 eine Seite zum Scrollen):
   Punzen · Ankaufspreise mit Rechner · Mosaik · drei Wege mit Schweizkarte · über uns · Vertrauensleiste
   · Unterseiten. Seit Entwurf 29 ohne Waage, auf Wunsch des Kunden.
   ===================================================================== */

/* Punze: nur für echte Stempel (Feingehalt), doppelter Rand wie eingeschlagen */
.punze { display: inline-grid; place-items: center; min-width: 40px; height: 24px; padding: 0 7px; border: 1px solid rgba(var(--gold-rgb), .95); border-radius: 6px;
  outline: 1px solid rgba(var(--gold-rgb), .4); outline-offset: -4px; color: var(--gold-deep);
  font: 600 .75rem/1 var(--display); letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.dark .punze { color: var(--gold-2); }
.punzen { display: flex; flex-wrap: wrap; gap: 6px; }

/* Ankaufspreise von heute, gleich als Rechner wie die Abrechnung des Kunden: ein Blatt, links die Tafel (Gewicht in die
   Zeile, Betrag daneben, unten das Total mit einem feinen Strich darüber), rechts wie wir rechnen. */
.beleg { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); border: 1px solid var(--line-dark); border-radius: var(--radius); }
.tafel { display: flex; flex-direction: column; gap: 24px; min-width: 0; padding: 30px 34px 26px; }
.tafel__gruppen { display: grid; gap: 30px; }
.tafel__kopf, .tafel__zeile { display: grid; grid-template-columns: minmax(0, 1fr) 128px 100px 120px; column-gap: 16px; align-items: center; }
.tafel__kopf { padding-bottom: 10px; border-bottom: 1px solid rgba(var(--gold-rgb), .55); }
.tafel__kopf h3 { font: 600 var(--fs-m)/1.3 var(--display); color: var(--paper); }
.tafel__kopf span { font-size: var(--fs-xs); color: var(--on-dark-2); text-align: right; }
.tafel__zeile { padding-top: 10px; }
.tafel__name { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--fs-s); color: var(--on-dark-soft); }
.tafel__name > i { flex: 1 1 auto; min-width: 12px; height: 2px; margin-top: 8px; background: radial-gradient(circle, rgba(255, 255, 255, .28) .9px, transparent 1.1px) 0 0 / 5px 2px repeat-x; }
.tafel__name .punze { min-width: 38px; height: 23px; }
.tafel .inp { width: 100%; height: 42px; margin: 0; background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .2); }
.tafel .inp:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .22); }
.tafel .inp input { color: var(--paper); font-size: var(--fs-s); }
.tafel .inp input::placeholder { color: rgba(255, 255, 255, .3); }
.tafel .inp span { color: var(--on-dark-2); }
.tafel__preis { text-align: right; font: 600 var(--fs-m)/1.3 var(--display); color: var(--paper); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tafel__betrag { text-align: right; font: 600 var(--fs-s)/1.3 var(--display); color: var(--on-dark-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tafel__zeile.is-voll .tafel__name, .tafel__zeile:focus-within .tafel__name { color: var(--paper); }
.tafel__zeile.is-voll .tafel__betrag { color: var(--gold-2); }
/* Unten beim Total der Rechenweg wie auf der Abrechnung: je ausgefüllte Zeile Metall, Feingehalt und
   «200 g × CHF 1.065 = CHF 213.00», die Beträge rechts über dem Total. */
.tafel__summe { margin-top: auto; display: grid; gap: 14px; }
.tafel__rechenweg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 6px 16px;
  font-size: var(--fs-xs); line-height: 1.4; font-variant-numeric: tabular-nums; }
.tafel__rechenweg:empty { display: none; }
.tafel__rechenweg li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; }
.tafel__rechenweg b { grid-column: 1; font-weight: 600; color: var(--on-dark); }
.tafel__rechenweg small { grid-column: 2; font-size: inherit; color: var(--on-dark-2); }
.tafel__rechenweg span { grid-column: 3; text-align: right; color: var(--on-dark-soft); }
.tafel__total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 20px; padding: 16px 0 0; border-top: 1px solid rgba(255, 255, 255, .32); }
.tafel__total span { font: 600 var(--fs-m)/1.3 var(--display); color: var(--paper); }
.tafel__total output { font: 600 var(--fs-xl)/1.15 var(--display); letter-spacing: -.02em; color: var(--paper); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tafel__fein { margin-top: -8px; font-size: var(--fs-xs); color: var(--on-dark-2); text-wrap: balance; }
/* Rechte Spalte des Blatts: so rechnen wir, unten der Knopf auf der Höhe des Totals */
.beleg__seite { display: flex; flex-direction: column; gap: 20px; padding: 30px 30px 26px; border-left: 1px solid var(--line-dark); background: rgba(255, 255, 255, .025); }
.beleg__seite h3 { padding-bottom: 10px; border-bottom: 1px solid rgba(var(--gold-rgb), .55); font: 600 var(--fs-m)/1.3 var(--display); color: var(--paper); }
.regeln { margin: 0; display: grid; gap: 18px; }
.regeln dt { font: 600 var(--fs-s)/1.3 var(--display); color: var(--paper); }
.regeln dd { margin: 4px 0 0; font-size: var(--fs-s); color: var(--on-dark-soft); text-wrap: balance; }
.beleg__aktion { margin-top: auto; display: grid; gap: 12px; }
.beleg__aktion .btn { width: 100%; }

/* Was wir ankaufen: echte Fotos als Mosaik, Zinn und Besteck am grössten; Name und Preis auf dem Foto */
.kacheln { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(190px, 17vw, 236px); gap: 12px;
  grid-template-areas: "zinn zinn besteck besteck" "zinn zinn silber gold" "muenzen schmuck nachlass nachlass"; }
.kachel { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; border-radius: var(--radius); background: var(--dark); color: var(--paper); text-decoration: none; }
.kachel--zinn { grid-area: zinn; }
.kachel--besteck { grid-area: besteck; }
.kachel--silber { grid-area: silber; }
.kachel--gold { grid-area: gold; }
.kachel--muenzen { grid-area: muenzen; }
.kachel--schmuck { grid-area: schmuck; }
.kachel--nachlass { grid-area: nachlass; }
.kachel img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.kachel img.zoom { transform-origin: 30% 78%; scale: 1.75; }
.kachel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--dark-rgb), 0) 38%, rgba(var(--dark-rgb), .86) 100%); }
.kachel__text { display: grid; gap: 6px; justify-items: start; padding: 0 20px 18px; }
.kachel__name { font: 600 var(--fs-l)/1.2 var(--display); letter-spacing: -.01em; text-decoration: underline 1px transparent; text-underline-offset: 6px; transition: text-decoration-color .3s; }
.kachel:hover .kachel__name, .kachel:focus-visible .kachel__name { text-decoration-color: var(--gold); }
.kachel--zinn .kachel__name { font-size: var(--fs-xl); }
.kachel--zinn .kachel__text { padding: 0 28px 26px; gap: 8px; }
.kachel__info { max-width: 30em; font-size: var(--fs-s); line-height: 1.45; color: rgba(255, 255, 255, .85); text-wrap: balance; }
.kachel__preis { font-size: var(--fs-xs); color: var(--on-dark-soft); }
.kachel__preis b { font: 600 var(--fs-s)/1.2 var(--display); color: var(--gold-2); }
.kachel .punze { color: var(--gold-2); background: rgba(var(--dark-rgb), .55); }
.kachel:hover img { transform: scale(1.04); }
.kachel:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.kacheln__fuss { margin-top: 20px; font-size: var(--fs-s); color: var(--ink-2); text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .kachel img { transition: none; } }

/* Drei Wege mit der Schweizkarte */
.wege-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 88px); align-items: center; }
.wege__text .sec-head { margin-bottom: 36px; }
.wege { list-style: none; margin: 0; padding: 0; display: grid; }
.wege li { display: grid; gap: 6px; padding: 20px 0; border-top: 1px solid var(--line-dark); }
.wege li:last-child { border-bottom: 1px solid var(--line-dark); }
.wege h3 { color: var(--paper); }
.wege p { color: var(--on-dark-soft); text-wrap: balance; }
.wege .wege__wann { font-size: var(--fs-s); font-weight: 600; color: var(--gold-2); }
.wege__karte { position: relative; }
.chmap { display: block; width: 100%; height: auto; overflow: visible; }
.chmap pattern circle { fill: var(--on-dark-2); opacity: .55; }
.chmap .land { fill: url(#chdots); }
.chmap .rand { fill: none; stroke: rgba(var(--gold-rgb), .28); stroke-width: .8; }
.chmap .nachbar { font: 500 8px var(--font); fill: var(--on-dark-2); opacity: .6; }
.chmap .route-bg { fill: none; stroke: rgba(var(--gold-rgb), .22); stroke-width: .9; stroke-dasharray: 2 3; }
.chmap .route { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: zeichnen 1.6s ease forwards; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
.chmap .stadt circle { fill: var(--gold-2); }
.chmap .stadt text { font: 500 8.5px var(--font); fill: var(--on-dark-soft); }
.chmap .fahrer { fill: var(--paper); filter: drop-shadow(0 0 3px rgba(var(--gold-rgb), .9)); }
.chmap .sitz .kern { fill: var(--gold); stroke: var(--dark); stroke-width: 1.5; }
.chmap .sitz .puls { fill: none; stroke: var(--gold); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: puls-ring 2.4s ease-out infinite; }
@keyframes puls-ring { from { transform: scale(.5); opacity: .9; } to { transform: scale(2.8); opacity: 0; } }
.chmap .sitz text { font: 600 10px var(--display); fill: var(--paper); }
.chmap .sitz text.unter { font: 400 8px var(--font); fill: var(--on-dark-soft); }
@media (prefers-reduced-motion: reduce) {
  .chmap .route, .chmap .sitz .puls { animation: none; }
  .chmap .route { stroke-dashoffset: 0; }
  .chmap .fahrer { display: none; }
}
.wege__fuss { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line-dark); }
.wege__fuss p { color: var(--on-dark-soft); max-width: 46em; }

/* Unterseiten: was wir ankaufen links als Liste, rechts was man über das Material wissen sollte, ohne Kästen */
.stoff__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(40px, 6vw, 88px); align-items: start; }
.stoff__wissen { display: grid; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.stoff__wissen h3 { font-size: var(--fs-m); }
.stoff__wissen p { color: var(--ink-2); text-wrap: balance; }
.marken { margin: 4px 0; display: grid; gap: 10px; }
.marken div { display: flex; align-items: center; gap: 14px; }
.marken dd { margin: 0; color: var(--ink-2); }
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.schritte li { display: grid; gap: 2px; }
.schritte b { font: 600 var(--fs-s)/1.3 var(--display); }
.schritte span { color: var(--ink-2); text-wrap: balance; }

/* Über uns: Text links, Zitat und Eintrag beim Bund rechts */
.uns__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(40px, 6vw, 88px); align-items: start; }
.uns__text .sec-head { margin-bottom: 28px; }
.uns__seite { position: relative; display: grid; gap: 28px; }
.uns blockquote p { color: var(--ink); }
.register { display: grid; gap: 8px; justify-items: start; padding-top: 28px; border-top: 1px solid var(--line); }
.register h3 { font-size: var(--fs-m); }
.register p { font-size: var(--fs-s); color: var(--ink-2); text-wrap: pretty; }
.register .link { white-space: nowrap; }

/* Vertrauensleiste unter dem Einstieg: im selben Dunkel, oben und unten nur durch eine Haarlinie abgesetzt, weil gleich
   die dunklen Preise folgen; so bleibt der Hauptknopf im Einstieg vorne. Zusagen und WhatsApp stehen gleich weit auseinander. */
.vertrauen { background: var(--dark); color: var(--on-dark); border-block: 1px solid var(--line-dark); }
.vertrauen__in { position: relative; }
.vertrauen__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; column-gap: 24px; }
.vertrauen__liste > li { display: grid; align-content: center; gap: 4px; padding-block: 20px; }
.vertrauen__liste > .vertrauen__linie { flex: none; align-self: center; width: 1px; height: 40px; padding: 0; background: var(--line-dark); }
.vertrauen__liste b { font: 600 var(--fs-s)/1.3 var(--display); letter-spacing: -.01em; }
.vertrauen__liste > li > span { font-size: var(--fs-xs); color: var(--on-dark-2); }
.vertrauen__kurz { display: none; }
.vertrauen__liste > li > span a { color: var(--on-dark-soft); text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .3); }

@media (max-width: 1100px) {
  /* Blatt untereinander: Tafel, darunter die Regeln nebeneinander und der Knopf */
  .beleg { grid-template-columns: minmax(0, 1fr); }
  .beleg__seite { border-left: 0; border-top: 1px solid var(--line-dark); }
  .regeln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
  .beleg__aktion { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
  .beleg__aktion .btn { width: auto; }
  .beleg__aktion .direkt { flex: 0 1 380px; }
  .wege-raster { grid-template-columns: minmax(0, 1fr); }
  .wege__karte { max-width: 640px; }
  .uns__raster { grid-template-columns: minmax(0, 1fr); }
  .uns__seite { max-width: 680px; }
  /* Vertrauensleiste noch auf einer Zeile: Knopf nur «WhatsApp» */
  .vertrauen__liste { column-gap: 20px; }
  .vertrauen__verb { display: none; }
}
@media (max-width: 980px) {
  /* Mosaik zweispaltig wie auf dem Handy, sonst brechen Namen und Preise in den kleinen Feldern um */
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(190px, 27vw, 250px);
    grid-template-areas: "zinn zinn" "zinn zinn" "besteck besteck" "silber gold" "muenzen schmuck" "nachlass nachlass"; }
  .stoff__raster { grid-template-columns: minmax(0, 1fr); }
  .stoff__wissen { max-width: 680px; }
  /* drei Zusagen nebeneinander, WhatsApp darunter */
  .vertrauen__verb { display: inline; }
  .vertrauen__liste > .vertrauen__linie:nth-last-child(2) { display: none; }
  .vertrauen__liste > .vertrauen__kontakt { flex-basis: 100%; padding-top: 0; }
  .vertrauen .btn { width: 100%; }
}
@media (max-width: 720px) {
  /* Vertrauensleiste wie auf dem Desktop, nur schmaler: drei Zusagen nebeneinander, je ein zweizeiliger Titel und eine
     kurze Angabe darunter, getrennt durch kurze feine Linien. WhatsApp steht im Menü und im Kontakt. */
  .vertrauen__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; padding-block: 18px; }
  .vertrauen__liste > li { position: relative; justify-items: center; align-content: start; gap: 5px; padding: 0 4px; text-align: center; }
  .vertrauen__linie + li::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 40px; translate: 0 -50%; background: var(--line-dark); }
  .vertrauen__liste > .vertrauen__linie, .vertrauen__liste > .vertrauen__kontakt, .vertrauen__liste > li > span { display: none; }
  .vertrauen__liste > li > .vertrauen__kurz { display: block; font-size: var(--fs-xs); line-height: 1.3; color: var(--on-dark-2); }
  .vertrauen__liste b { font: 600 var(--fs-s)/1.3 var(--font); letter-spacing: 0; }
  .vertrauen__liste b > span { display: block; }

  /* Mosaik: niedrigere Felder, Text nur im grossen Zinnfeld, Preis und Einheit je auf einer Zeile */
  .kacheln { grid-auto-rows: 156px; gap: 10px; }
  .kachel__text, .kachel--zinn .kachel__text { gap: 3px; padding: 0 14px 12px; }
  .kachel__name { font-size: var(--fs-m); }
  .kachel--zinn .kachel__name { font-size: var(--fs-l); }
  .kachel:not(.kachel--zinn) .kachel__info { display: none; }
  .kachel__preis span { display: block; }
  .kacheln__fuss { margin-top: 16px; font-size: var(--fs-s); text-wrap: pretty; }

  /* Ankaufspreise: auf dem Handy dieselbe Tabelle wie auf dem Computer und auf dem Beleg, nur enger. Vier Spalten:
     Metall, Gewicht, Preis, Betrag; über jeder Gruppe die Spaltenköpfe. Das Feld ist eine ruhige Fläche ohne Rahmen,
     «CHF» steht nur beim Total; leere Zeilen zeigen einen leisen Strich wie auf dem Computer. */
  .preise .sec-head .lead span + span { display: none; }
  .beleg { display: block; border: 0; border-radius: 0; }
  .tafel { gap: 18px; margin-inline: calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r)); padding: 20px var(--gutter-r) 20px var(--gutter-l);
    background: var(--dark-2); border-block: 1px solid var(--line-dark); }
  .tafel__gruppen { gap: 26px; }
  .tafel__kopf, .tafel__zeile { grid-template-columns: minmax(0, 1fr) 60px 56px 72px; column-gap: 8px; }
  .tafel__kopf { align-items: end; padding-bottom: 8px; border-bottom-color: rgba(255, 255, 255, .16); }
  .tafel__kopf h3 { font-size: var(--fs-s); }
  .tafel__kopf span { font-size: var(--fs-xs); }
  .tafel__lang, .tafel .w, .tafel .inp > span, .tafel__name > i { display: none; }
  .tafel__zeile { min-height: 52px; padding-block: 8px; }
  .tafel__zeile + .tafel__zeile { border-top: 1px solid rgba(255, 255, 255, .06); }
  .tafel__name { gap: 0; font-size: var(--fs-s); line-height: 1.3; color: var(--on-dark); }
  .tafel__name .punze { justify-items: start; width: 34px; min-width: 0; height: auto; padding: 0; border: 0; outline: 0; border-radius: 0; background: none;
    font: 600 var(--fs-xs)/1.3 var(--display); letter-spacing: .02em; color: var(--gold-2); }
  .tafel .inp { width: 100%; height: 36px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .07); }
  .tafel .inp:focus-within { box-shadow: inset 0 0 0 1px var(--gold); }
  .tafel .inp input { padding: 0 8px; font-size: 1rem; font-weight: 400; }
  .tafel .inp input::placeholder { color: rgba(255, 255, 255, .22); }
  .tafel__preis { font: 600 var(--fs-s)/1.3 var(--font); }
  .tafel__betrag { font: 600 var(--fs-s)/1.3 var(--font); }
  /* Rechenweg: Metall links, Rechnung rechts, der Feingehalt darunter */
  .tafel__summe { gap: 12px; }
  .tafel__rechenweg { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; }
  .tafel__rechenweg li { row-gap: 1px; }
  .tafel__rechenweg b { grid-row: 1; }
  .tafel__rechenweg span { grid-column: 2; grid-row: 1; }
  .tafel__rechenweg small { grid-column: 1 / -1; grid-row: 2; }
  .tafel__total { padding-top: 14px; }
  .tafel__total span { font-size: var(--fs-m); }
  .tafel__total output { font-size: var(--fs-xl); }
  .tafel__fein { margin-top: -6px; font-size: var(--fs-xs); }
  /* So rechnen wir: ruhiger Text unter dem Blatt, dann der Knopf */
  .beleg__seite { gap: 14px; padding: 28px 0 0; background: none; border: 0; }
  .beleg__seite h3 { padding: 0; border: 0; font-size: var(--fs-l); }
  .regeln { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .regeln dd { margin-top: 2px; }
  .beleg__aktion { display: grid; gap: 10px; margin-top: 8px; }
  .beleg__aktion .btn { width: 100%; }

  /* Drei Wege: Einleitung nur mit dem ersten Satz, drei gleich gebaute, kurze Einträge, darunter Karte und Knopf */
  .wege-band .sec-head .lead span + span { display: none; }
  .wege-raster { gap: 28px; }
  .wege__text .sec-head { margin-bottom: var(--head-gap); }
  .wege li { gap: 2px; padding: 14px 0; }
  .wege h3 { font-size: var(--fs-m); }
  .wege p { text-wrap: pretty; }
  .wege .wege__wann { margin-top: 2px; font-size: var(--fs-s); }
  .wege__fuss { gap: 16px; margin-top: 28px; padding-top: 24px; }
  .wege__fuss p { text-wrap: pretty; }
  .wege__fuss .btn, .form .btn--gold { width: 100%; }

  /* Familienbetrieb: Titel und Einleitung, dann das Zitat, dann der Text, zuletzt der Eintrag beim Bund klein und
     abgesetzt. Einleitung und Text in derselben Grösse, das Zitat eine Stufe grösser. */
  .uns__raster { display: flex; flex-direction: column; gap: 28px; }
  .uns__text, .uns__seite { display: contents; }
  .uns .sec-head { order: 1; margin: 0; }
  .uns blockquote { order: 2; gap: 10px; padding-left: 18px; }
  .uns .prose { order: 3; }
  .uns .register { order: 4; }
  .uns blockquote p { font-size: var(--fs-l); line-height: 1.4; }

  /* Unterseiten */
  .stoff__raster { gap: 28px; }
  .stoff .items div { padding: 14px 0 16px; }
  .stoff__wissen { gap: 12px; padding-top: 16px; }
  .stoff__wissen p { text-wrap: pretty; }
}
@media (max-width: 520px) {
  .kachel .punzen { display: none; }
}

/* =====================================================================
   WordPress
   ===================================================================== */
.wp-site-blocks { padding: 0; }
/* angemeldet: der Kopf bleibt unter der Admin-Leiste stehen */
.admin-bar .head { top: 32px; }
@media (max-width: 782px) { .admin-bar .head { top: 46px; } }
@media (max-width: 600px) { .admin-bar .head { top: 0; } }

/* Formular: verstecktes Feld gegen Spam, Meldungen */
.form__falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__status--fehler { border-left-color: #B4533A; background: #FBEFEC; color: var(--ink); }
.form button[disabled] { opacity: .6; cursor: progress; }

/* Textseiten: Impressum, Datenschutz */
.textseite .wp-block-post-title { max-width: 760px; margin-bottom: 28px; font-size: var(--fs-xl); line-height: 1.12; letter-spacing: -.02em; }
.textseite .wp-block-post-content { display: grid; gap: 16px; max-width: 760px; color: var(--ink-2); }
.textseite .wp-block-post-content h2 { margin-top: 20px; font-size: var(--fs-l); color: var(--ink); }
.textseite .wp-block-post-content h3 { margin-top: 8px; font-size: var(--fs-m); color: var(--ink); }
.textseite .wp-block-post-content a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.textseite .wp-block-post-content ul, .textseite .wp-block-post-content ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.textseite .offen { padding: 12px 14px; background: #FFF6D6; border-left: 2px solid var(--gold); color: var(--ink); }

/* Seite nicht gefunden */
.nicht-gefunden .sec-head h1 { font-size: var(--fs-xl); line-height: 1.12; letter-spacing: -.02em; }
.nicht-gefunden .btns { margin-bottom: 32px; }
.nicht-gefunden .direkt { max-width: 520px; }
@media (max-width: 720px) { .nicht-gefunden .btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* =====================================================================
   Kursdiagramm unter der Preistafel: aus Entwurf 26, gebaut wie das Blatt darüber
   (links der Verlauf, rechts Kurs und Umschalter). Veränderung neutral, ohne Rot und Grün.
   ===================================================================== */
.kurs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); margin-top: var(--gap); border: 1px solid var(--line-dark); border-radius: var(--radius); }
.kurs__flaeche { min-width: 0; padding: 30px 34px 22px; }
.kurs__chart { position: relative; height: 300px; touch-action: pan-y; cursor: crosshair; }
.kurs__chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kurs__seite { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 30px 30px 26px; border-left: 1px solid var(--line-dark); background: rgba(255, 255, 255, .025); }
.kurs__seite h3 { align-self: stretch; padding-bottom: 10px; border-bottom: 1px solid rgba(var(--gold-rgb), .55); font: 600 var(--fs-m)/1.3 var(--display); color: var(--paper); }
.kurs__stand { display: grid; gap: 2px; }
.kurs__stand b { font: 600 var(--fs-xl)/1.15 var(--display); letter-spacing: -.02em; color: var(--paper); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kurs__stand span { font-size: var(--fs-xs); color: var(--on-dark-2); }
.kurs__chg { font: 600 var(--fs-s)/1.3 var(--display); color: var(--on-dark-soft); font-variant-numeric: tabular-nums; }
.kurs__quelle { margin-top: auto; font-size: var(--fs-xs); color: var(--on-dark-2); text-wrap: pretty; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line-dark); border-radius: var(--radius); }
.seg button { border: 0; background: transparent; color: var(--on-dark-soft); padding: 7px 14px; border-radius: var(--radius-s); font: 600 var(--fs-xs)/1.2 var(--display); cursor: pointer; transition: background-color .2s, color .2s; }
.seg button:hover { color: var(--paper); }
.seg button[aria-pressed="true"] { background: rgba(255, 255, 255, .08); color: var(--paper); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .55); }
.seg button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.k-grid { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.k-achse { font: 400 12px var(--font); fill: var(--on-dark-2); font-variant-numeric: tabular-nums; }
.k-flaeche { fill: url(#kFill); }
.k-linie { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.k-ring { fill: none; stroke: var(--gold); stroke-width: 1; opacity: .4; }
.k-punkt { fill: var(--gold); stroke: var(--dark); stroke-width: 2; }
.k-kreuz { stroke: rgba(255, 255, 255, .3); stroke-width: 1; stroke-dasharray: 3 3; }
.k-hover { fill: var(--paper); stroke: var(--gold); stroke-width: 2; }
.kurs__tip { position: absolute; z-index: 2; top: 0; pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); padding: 7px 10px; border-radius: var(--radius-s); background: var(--dark-3); border: 1px solid var(--line-dark); font-size: var(--fs-xs); line-height: 1.35; color: var(--on-dark-2); white-space: nowrap; }
.kurs__tip b { display: block; font: 600 .9375rem/1.3 var(--display); color: var(--paper); font-variant-numeric: tabular-nums; }

/* Händlerseite: Gruss und Börsenkurs neben dem Titel; ohne Zugang nur der Hinweis */
.sec-head h1 { font-size: var(--fs-xl); line-height: 1.12; letter-spacing: -.02em; }
.haendler-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 56px; margin-bottom: var(--head-gap); }
.haendler-kopf .sec-head { margin-bottom: 0; }
.haendler-kopf__gruss a { margin-left: 8px; font-size: var(--fs-xs); color: var(--on-dark-2); text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .3); }
.markt { display: grid; gap: 10px; padding: 2px 0 6px 22px; border-left: 1px solid rgba(var(--gold-rgb), .55); }
.markt__titel { font: 600 var(--fs-s)/1.3 var(--display); color: var(--on-dark-soft); }
.markt dl { margin: 0; display: grid; gap: 4px; }
.markt dl > div { display: grid; grid-template-columns: 64px auto; align-items: baseline; }
.markt dt { font-size: var(--fs-s); color: var(--on-dark-soft); }
.markt dd { margin: 0; font-size: var(--fs-xs); color: var(--on-dark-2); }
.markt dd b { margin-right: 6px; font: 600 var(--fs-m)/1.3 var(--display); color: var(--paper); font-variant-numeric: tabular-nums; }
.markt__stand { font-size: var(--fs-xs); color: var(--on-dark-2); }
.haendler-zu .sec-head { margin-bottom: 32px; }
.haendler-zu__hinweis { max-width: 600px; margin-bottom: 28px; padding: 12px 16px; border-left: 2px solid var(--gold); background: rgba(255, 255, 255, .05); color: var(--on-dark); }
.haendler-zu__hinweis--ok { background: rgba(var(--gold-rgb), .12); }
/* Feld für die E-Mail-Adresse, wie die Felder im Rechner auf Dunkel */
.haendler-zu__form { display: grid; gap: 10px; max-width: 600px; margin-bottom: 44px; padding-bottom: 40px; border-bottom: 1px solid var(--line-dark); }
.haendler-zu__frage { margin-bottom: 10px; color: var(--on-dark); }
.haendler-zu__form > label { font-weight: 600; font-size: var(--fs-xs); color: var(--on-dark-soft); }
.haendler-zu__feld { display: flex; gap: 8px; }
.haendler-zu__feld input { flex: 1 1 auto; min-width: 0; height: var(--control); padding: 0 14px; border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--radius-s); background: rgba(255, 255, 255, .04); color: var(--paper); font-size: 1rem; }
.haendler-zu__feld input:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .22); }
.haendler-zu__feld .btn { flex: none; }
.haendler-zu__klein { font-size: var(--fs-xs); color: var(--on-dark-2); }
.haendler-zu__kontakt { display: grid; gap: 16px; max-width: 600px; }
.haendler-zu__kontakt p { color: var(--on-dark-soft); }
@media (max-width: 480px) {
  .haendler-zu__feld { flex-direction: column; }
}

@media (max-width: 1100px) {
  /* Kurs und Umschalter über dem Verlauf, der Hinweis darunter */
  .kurs { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titel titel" "wert metall" "chg zeit" "chart chart" "quelle quelle";
    column-gap: 24px; padding: 26px 30px 22px; }
  .kurs__seite { display: contents; }
  .kurs__seite h3 { grid-area: titel; margin-bottom: 16px; }
  .kurs__stand { grid-area: wert; }
  .kurs__chg { grid-area: chg; align-self: center; margin-top: 4px; }
  #kursMetall { grid-area: metall; justify-self: end; align-self: center; }
  #kursZeit { grid-area: zeit; justify-self: end; margin-top: 8px; }
  .kurs__flaeche { grid-area: chart; padding: 22px 0 6px; }
  .kurs__quelle { grid-area: quelle; margin-top: 10px; }
}
@media (max-width: 720px) {
  /* wie die Tafel: der Verlauf auf einer ruhigen Fläche über die ganze Breite */
  .kurs { margin-top: 44px; padding: 0; column-gap: 12px; border: 0; border-radius: 0; }
  .kurs__seite h3 { margin-bottom: 12px; padding: 0; border: 0; font-size: var(--fs-l); }
  .kurs__stand b { font-size: var(--fs-l); }
  .kurs__chg { font-size: var(--fs-xs); }
  .seg button { padding: 7px 11px; }
  .kurs__flaeche { margin: 16px calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter-l)); padding: 18px var(--gutter-r) 8px var(--gutter-l);
    background: var(--dark-2); border-block: 1px solid var(--line-dark); }
  .kurs__chart { height: 220px; }
  .k-punkt { stroke: var(--dark-2); }
  .kurs__quelle { margin-top: 12px; }
  .haendler-kopf { gap: 22px; }
  .markt { padding-left: 16px; }
}