@charset "UTF-8";
/* ===================================================================
   Juwelier Otto Parr, Gießen — Stylesheet
   Farben, Abstände und Rastermaße stammen aus DESIGN.md.
   Typografie: Marcellus (Überschriften) + Inter (alles andere),
   Größen nach schriften.html, Variante 2.
   =================================================================== */

/* -------------------------------------------------------------------
   1. Schriften — lokal, kein Google-Server
   Inter wird als Variable Font ausgeliefert: eine Datei deckt 300–500 ab.
   ------------------------------------------------------------------- */
@font-face{
  font-family:'Marcellus';
  src:url('../fonts/marcellus-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Marcellus';
  src:url('../fonts/marcellus-latin-ext.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,
    U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,
    U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-var-latin.woff2') format('woff2');
  font-weight:300 500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-var-latin-ext.woff2') format('woff2');
  font-weight:300 500; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,
    U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,
    U+2C60-2C7F,U+A720-A7FF;
}

/* -------------------------------------------------------------------
   2. Design-Tokens — 1:1 aus DESIGN.md, Abschnitt 1
   ------------------------------------------------------------------- */
:root{
  /* Farben */
  --creme:        #F9F6F2;   /* Seitenhintergrund, Kopfbereich          */
  --creme-dunkel: #F3EEE8;   /* Copyright-Leiste                        */
  --heading:      #1C1C1C;   /* Überschriften, Buttons, Fußbereich      */
  --heading-alt:  #3D3D3D;   /* große Sektionsüberschriften             */
  --text:         #666666;   /* Fließtext                               */
  --navy:         #19267B;   /* Logo-Blau                               */
  --navy-hell:    #4E609B;   /* Navigation aktiv/Hover                  */
  --rose:         #CE967E;   /* Akzent, ausschließlich Hover            */
  --weiss:        #FFFFFF;
  --nav:          #4A4A4A;   /* Navigationslinks                        */
  --social:       #69727D;   /* Social-Icons                            */
  --linie:        rgba(28,28,28,.09);
  --beige:        #EDE4D8;   /* Aufruf-Block, wärmer als der Seitenton  */
  --text-dunkel:  #4A4A4A;   /* Fließtext auf Beige, 7,04:1             */

  /* Maße — siehe DESIGN.md 3.1
     Die Seite hat bewusst KEINEN zentrierten Container: jede Sektion läuft
     über die volle Fensterbreite, der Weißraum entsteht allein über das
     Padding der Sektion. Häufigster Einzug im Original: 45px.
     --deckel greift erst oberhalb sehr breiter Fenster. */
  --rand:         45px;      /* Standard-Einzug der Sektionen           */
  --deckel:       1920px;    /* Obergrenze, darüber zentriert           */
  /* Nur die Trauringseite ab „Warum Trauringe": ein mittig gesetzter
     Bereich statt der vollen Fensterbreite. 1360px außen, 48px Rand,
     also 1264px Inhalt — vorher waren es 1110px, und der Text stand
     dadurch in zu kurzen Zeilen. Die gewonnene Breite geht an die
     Bilder und die Abstände, NICHT an die Textzeilen: dafür sorgen die
     ch-Deckel weiter unten. */
  --tr-deckel:    1360px;
  --tr-rand:      48px;      /* Tablet 32px, Handy 20px — siehe unten   */
  /* Lesbarkeitsgrenze für Fließtext: rund 75 Zeichen je Zeile.
     ACHTUNG bei ch: 1ch ist die Breite der Ziffer 0, bei Inter 15,5px
     sind das 9,78px. Ein durchschnittliches Zeichen im deutschen
     Fließtext misst hier aber nur 7,4px. 68ch wären deshalb rund 90
     Zeichen, nicht 75. Nachgemessen: 57ch ergaben 76 Zeichen, 55ch je
     nach Absatz bis zu 76 (Text mit vielen schmalen Buchstaben läuft
     weiter). 54ch bleibt über alle Seiten und Bildschirmbreiten unter
     der Grenze — gemessen bei 375, 764, 1024 und 1440px. */
  --zeile:        54ch;
  /* Die Kurve des Hauses. Sie gilt für alle Einblendungen und wird auch
     vom Ratgeber und vom Preisband benutzt — vorher stand sie nur im
     Ratgeber-Block, und außerhalb davon fiel die ganze
     transition-Deklaration aus: transition-duration wurde 0s, die
     Elemente blieben auf opacity 0 hängen. */
  --kurve-auf:    cubic-bezier(.22,1,.36,1);

  /* Rhythmus. Vorher standen diese Abstände als feste 76px in rund
     zwanzig Regeln — jede Änderung hätte man zwanzigmal machen müssen.
     Jetzt gibt es vier Werte, und sie gelten für ALLE Seiten.

     Umgesetzt als margin, nicht als padding: Zwei benachbarte Abstände
     fallen dann zusammen und der größere gewinnt. Nach einem farbigen
     Band stehen so 200px, obwohl der folgende Abschnitt nur 140px
     mitbringt — ohne dass irgendwo gerechnet werden muss. */
  --luft-s:       24px;      /* innerhalb einer Gruppe, H2 zu Einleitung */
  --luft-m:       48px;      /* kleinere Sprünge                        */
  --luft-inhalt:  64px;      /* Einleitung zum eigentlichen Inhalt      */
  --luft-l:      140px;      /* zwischen Abschnitten                    */
  --luft-xl:     200px;      /* vor und nach farbigen Bändern           */
  /* Das Original misst hier 672px bei 900px Fensterhöhe, also rund 75vh.
     85vh ist die Vorgabe aus dem Auftrag — für Pixelgleichheit mit der
     Altseite diesen einen Wert auf 75vh setzen. */
  --hero-hoehe:   85vh;
  --radius-bild:  0;         /* Inhaltsbilder sind eckig (DESIGN.md 5.1)*/
  --radius-pille: 55px;      /* Buttons — einziges gerundetes Element   */
  /* Milchglas der Bewertungskarten. Bewusst nur dort eingesetzt.
     Der kleine Radius ist die einzige Rundung neben den Buttons —
     mit harten 90°-Ecken wirkt Glas hart statt weich. Auf 0 setzen,
     wenn die Karten wieder eckig sein sollen. */
  --radius-glas:  14px;
  --glas-hell:    rgba(255,255,255,.80);
  --glas-tief:    rgba(255,255,255,.60);
  --glas-kante:   rgba(255,255,255,.72);
  --logo-w:       180px;
  --logo-w-sticky:100px;
  --logo-faktor:  .5556;     /* 100 / 180 — Sticky-Verkleinerung per transform */

  /* Bewegung */
  --ease:      cubic-bezier(0.25,0.8,0.25,1);
  --t-schnell: .2s;
  --t-normal:  .3s;
  --t-zoom:    .5s;
}

/* -------------------------------------------------------------------
   3. Grundlagen
   ------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Sobald Lenis übernommen hat, setzt es die Scrollposition selbst. Bliebe
   das weiche Scrollen des Browsers daneben aktiv, liefen zwei Bewegungen
   auf derselben Position — sichtbar als Ruckeln kurz vor dem Ziel.
   Die Regel oben bleibt als Rückfall stehen: ohne JavaScript, bei
   blockiertem Skript und auf Berührungsgeräten scrollt der Browser weich.
   Die vier Zeilen darunter stammen aus lenis.css. */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}
body{
  margin:0;
  background:var(--creme);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15.5px;
  line-height:24px;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;   /* nicht hidden: das bricht position:sticky */
}
img{max-width:100%;height:auto;display:block}
a{color:var(--heading);text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:400;font-family:'Marcellus',Georgia,'Times New Roman',serif;color:var(--heading)}
p{margin:0 0 12px}
/* Browser-Standardränder, die sonst Bilder und Karten einschnüren */
figure,blockquote,address{margin:0}
/* Marcellus hat keinen kursiven Schnitt — sonst stellt der Browser
   ihn künstlich schräg, was unsauber aussieht */
cite,address{font-style:normal}

/* Sichtbarer Fokus für Tastaturbedienung */
:focus-visible{outline:2px solid var(--navy-hell);outline-offset:3px;border-radius:2px}

.visuell-versteckt{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:8px;top:-60px;z-index:10000;
  background:var(--heading);color:var(--weiss);
  padding:12px 22px;border-radius:0 0 6px 6px;font-size:14px;
  transition:top var(--t-schnell) ease;
}
.skip-link:focus{top:0}

/* -------------------------------------------------------------------
   4. Typografie — Variante 2 (Marcellus + Inter)
   ------------------------------------------------------------------- */
h1,.h1{font-size:44px;line-height:60px;color:var(--heading)}
h2,.h2{font-size:40px;line-height:56px;color:var(--heading)}
.h2--alt{color:var(--heading-alt)}

.eyebrow{
  font-family:'Inter',sans-serif;
  font-size:12px;line-height:24px;font-weight:400;
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--heading);margin:0 0 16px;
}
.lead{font-size:15.5px;line-height:24px}
strong,b{color:var(--heading);font-weight:500}

/* Textlinks im Fließtext: Unterstreichung wächst von links nach rechts */
.textlink{
  position:relative;color:var(--heading);
  background-image:linear-gradient(var(--rose),var(--rose));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 1px;
  transition:background-size var(--t-normal) var(--ease),color var(--t-normal) linear;
}
.textlink:hover,.textlink:focus-visible{background-size:100% 1px;color:var(--rose)}

/* -------------------------------------------------------------------
   5. Layout-Hilfen
   ------------------------------------------------------------------- */
/* Kein zentrierter Inhaltskasten: volle Breite. Die Obergrenze wirkt erst
   oberhalb von 1920px, damit der Text auf sehr breiten Bildschirmen nicht
   unlesbar auseinanderläuft. */
.inner{width:100%;max-width:var(--deckel);margin-inline:auto}
.sektion{position:relative}

/* Zweispaltige Inhaltssektion: Text links, Bild rechts */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split__text{max-width:520px}
.split__bild img{
  width:100%;border-radius:var(--radius-bild);
  aspect-ratio:4/3;object-fit:cover;
}
.split--hoch .split__bild img{aspect-ratio:4/5}

/* -------------------------------------------------------------------
   6. Buttons
   Werte aus DESIGN.md 4.1: #1C1C1C, radius 55px, padding 17px 40px,
   14px/24px, transition .3s linear, Hover #CE967E
   ------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--heading);color:var(--weiss);
  font-family:'Inter',sans-serif;
  font-size:14px;line-height:24px;font-weight:400;
  padding:17px 40px;border-radius:var(--radius-pille);
  transition:background-color var(--t-normal) linear,transform .1s var(--ease);
  will-change:transform;
}
.btn:hover,.btn:focus-visible{background:var(--rose);color:var(--weiss)}
.btn:active{transform:scale(.97)}
.btn__pfeil{
  display:inline-block;
  transition:transform var(--t-normal) var(--ease);
}
.btn:hover .btn__pfeil,.btn:focus-visible .btn__pfeil{transform:translateX(4px)}

.btn--hell{background:var(--weiss);color:var(--heading)}
.btn--hell:hover,.btn--hell:focus-visible{background:var(--rose);color:var(--weiss)}

/* -------------------------------------------------------------------
   7. Kopfbereich
   Desktop 172px zweizeilig, mobil 60px einzeilig — DESIGN.md 6
   ------------------------------------------------------------------- */
.kopf{position:relative;z-index:20;background:var(--creme)}

/* --- Mobile Leiste (< 1024px) --- */
.kopf__mobil{
  display:flex;align-items:center;justify-content:space-between;
  height:60px;padding:0 15px;
  background:var(--weiss);
  box-shadow:0 2px 6px rgba(28,28,28,.09);
}
.kopf__mobil .logo img{width:78px;height:auto}
.burger{
  width:60px;height:60px;
  display:flex;align-items:center;justify-content:flex-end;
}
.burger__strich{
  position:relative;display:block;width:18px;height:2px;
  background:var(--heading);
}
.burger__strich::before,.burger__strich::after{
  content:'';position:absolute;left:0;width:18px;height:2px;background:var(--heading);
  transition:transform var(--t-schnell) var(--ease);
}
.burger__strich::before{top:-6px}
.burger__strich::after{top:6px}
.kopf__mobil-rechts{width:60px}

/* --- Desktop (>= 1024px) --- */
.kopf__desktop{display:none}
/* minmax(0,1fr) statt 1fr: Ein blankes 1fr hat einen Mindestwert von
   min-content. Die Siegelreihe ist umbruchfrei, also wuchs die linke
   Spalte auf ihre volle Breite und die rechte bekam den Rest — das Logo
   stand dadurch 54px rechts der Mitte, während die Navigation darunter
   mittig blieb. Mit minmax(0,…) sind beide Außenspalten wirklich gleich. */
.kopf__oben{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  padding:0 45px;height:102px;
}
.kopf__logo{justify-self:center}

/* --- Siegel links, Netzwerke rechts ---------------------------------
   Beide sitzen in den 1fr-Spalten neben dem Logo, die vorher leer waren.
   Nur im Schreibtischkopf — auf dem Handy bleibt die Leiste so, wie sie
   ist, und die Netzwerke stehen dort unten im Menü.
   -------------------------------------------------------------------- */
/* Die Spalten sind ausdrücklich zugewiesen. Ohne das rutschen Logo und
   Netzwerke je eine Spalte nach links, sobald die Siegelreihe per
   display:none verschwindet — sie ist dann kein Rasterelement mehr, und
   das Raster füllt von vorn auf. Gemessen bei 1100px: Das Logo stand
   dann in der ersten Spalte statt in der Mitte. */
.kopf-siegel-reihe{grid-column:1}
.kopf__logo{grid-column:2}
.kopf-sozial{grid-column:3}

.kopf-siegel-reihe{
  justify-self:start;
  display:flex;align-items:center;gap:7px;flex-wrap:nowrap;
  padding-right:24px;   /* stieß sonst ohne Abstand ans Logo */
}
/* Das <a> ist 44px hoch, sichtbar sind davon 32px. 44px ist die
   Untergrenze für ein Berührungsziel; 44px hohe Pillen nebeneinander
   würden die Zeile aber erschlagen. */
.kopf-siegel{
  display:inline-flex;align-items:center;
  min-height:44px;color:var(--heading-alt);
}
.kopf-siegel__feld{
  display:inline-flex;align-items:center;gap:7px;
  height:32px;padding:0 11px;
  border:1px solid var(--linie);border-radius:999px;
  white-space:nowrap;
  transition:border-color var(--t-normal) linear,color var(--t-normal) linear;
}
.kopf-siegel__wort{
  font-family:'Inter',sans-serif;font-size:10px;line-height:1;
  letter-spacing:.09em;text-transform:uppercase;
}
/* Navy auf Creme ergibt 12,1:1 — die Jahreszahl darf deshalb die
   Akzentfarbe tragen, ohne unter die Hausgrenze von 4,5:1 zu fallen. */
.kopf-siegel__zusatz{
  font-family:'Inter',sans-serif;font-size:10px;line-height:1;
  letter-spacing:.06em;color:var(--navy);
}
.kopf-siegel:hover .kopf-siegel__feld,
.kopf-siegel:focus-visible .kopf-siegel__feld{
  border-color:var(--navy);color:var(--heading);
}
.kopf-siegel:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:999px}

.kopf-sozial{justify-self:end;display:flex;gap:8px}
.kopf-sozial a{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--social);
  transition:background-color var(--t-normal) linear,color var(--t-normal) linear;
}
.kopf-sozial a:hover,.kopf-sozial a:focus-visible{background:var(--heading);color:var(--weiss)}
.kopf-sozial svg{width:19px;height:19px}
/* Das Verkleinern läuft über transform, nicht über width: eine Breiten-
   Animation löst in jedem Einzelbild ein neues Layout aus und ruckelt.
   --logo-faktor ist das Verhältnis 100/180 aus DESIGN.md 6.2. */
.kopf__logo img{
  width:var(--logo-w);height:auto;
  transform-origin:center center;
  transition:transform var(--t-normal) var(--ease);
}
.kopf__unten{border-top:1px solid var(--linie);height:70px}

/* Kontakt steht als letzter Punkt IN der Navigationsliste — dadurch
   bleibt die ganze Reihe mittig unter dem Logo. Hervorgehoben als
   Rechteck im Logo-Blau, keine Pille: Das Logo ist eckig gesetzt, und
   die Pillenform gehört im Haus zu den großen Handlungsknöpfen (.btn).

   Höhe 44px — Untergrenze für ein Berührungsziel und zugleich die
   Grenze, ab der die 70px hohe Reihe eng würde. .btn wäre mit 58px zu
   hoch. Weiß auf Navy ergibt 13,08:1. */
.nav__punkt--knopf{margin-left:16px}
.nav__knopf{
  display:inline-flex;align-items:center;min-height:44px;padding:0 24px;
  background:var(--navy);color:var(--weiss);
  border-radius:0;
  font-family:'Inter',sans-serif;font-size:15px;line-height:1;
  transition:background-color var(--t-normal) linear;
}
.nav__knopf:hover,.nav__knopf:focus-visible{background:var(--heading);color:var(--weiss)}
.nav__knopf:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

/* Sticky: Hintergrund bleibt Creme (siehe DESIGN.md 6.2), Logo 100px */
.kopf.is-sticky .kopf__desktop{
  position:fixed;top:0;left:0;right:0;z-index:900;
  background:var(--creme);
  box-shadow:0 2px 10px rgba(28,28,28,.07);
}
.kopf.is-sticky .kopf__oben{height:74px}
.kopf.is-sticky .kopf__logo img{transform:scale(var(--logo-faktor))}

/* --- Hauptnavigation --- */
.nav{height:100%}
.nav__liste{display:flex;justify-content:center;align-items:center;height:100%}
.nav__punkt{position:relative;height:100%;display:flex;align-items:center}
.nav__link{
  position:relative;display:flex;align-items:center;height:100%;
  margin:0 24px;padding:0;
  font-family:'Inter',sans-serif;font-size:16px;font-weight:400;
  color:var(--nav);
  transition:color var(--t-schnell) linear;
}
/* Unterstreichung wächst von der Mitte nach außen */
.nav__link::after{
  content:'';position:absolute;left:0;right:0;bottom:22px;height:1px;
  background:var(--navy-hell);
  transform:scaleX(0);transform-origin:center;
  transition:transform .25s var(--ease);
}
.nav__link:hover,.nav__link:focus-visible,
.nav__punkt--aktiv > .nav__link{color:var(--navy-hell)}
.nav__link:hover::after,.nav__link:focus-visible::after,
.nav__punkt--aktiv > .nav__link::after{transform:scaleX(1)}

/* Der Auslöser ist ein <button> und bringt Browservorgaben mit:
   Systemschrift, grauer Grund, eigener Rahmen. Die müssen weg, sonst
   sieht „Leistungen" anders aus als die Punkte daneben. */
.nav__link--ausloeser{
  appearance:none;-webkit-appearance:none;
  background:none;border:0;cursor:pointer;
}

.nav__pfeil{
  margin-left:7px;width:8px;height:8px;flex:none;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}

/* Untermenü: blendet mit 0.2s ein */
.untermenue{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  min-width:230px;padding:10px 0;
  background:var(--weiss);
  box-shadow:0 8px 26px rgba(28,28,28,.11);
  border-radius:var(--radius-bild);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t-schnell) var(--ease),
             transform var(--t-schnell) var(--ease),
             visibility 0s linear var(--t-schnell);
}
/* Das letzte Untermenü öffnet nach links statt mittig.

   Das ist heute eine Vorsichtsregel: Der einzige Punkt mit Untermenü ist
   „Leistungen" an zweiter Stelle. Sie bleibt trotzdem stehen, weil der
   Fehler, den sie verhindert, unsichtbar ist — mittig unter dem letzten
   Punkt ragte das 230px breite Feld bei rund 1024px Fensterbreite über
   den rechten Rand hinaus, und weil es `visibility: hidden` ist und
   nicht `display: none`, zählte es zur Dokumentbreite. Ergebnis war ein
   waagerechter Scrollbalken auf JEDER Seite, ohne dass etwas zu sehen
   war. */
.nav__punkt:last-child .untermenue{
  left:auto;right:0;transform:translateY(6px);
}
.nav__punkt:last-child:hover .untermenue,
.nav__punkt:last-child:focus-within .untermenue{transform:translateY(0)}

.nav__punkt:hover .untermenue,
.nav__punkt:focus-within .untermenue,
.nav__punkt .untermenue.is-offen{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
  transition:opacity var(--t-schnell) var(--ease),
             transform var(--t-schnell) var(--ease),
             visibility 0s;
}
.untermenue a{
  display:block;padding:9px 24px;
  font-family:'Inter',sans-serif;font-size:15px;color:var(--nav);
  transition:color var(--t-schnell) linear,background-color var(--t-schnell) linear;
}
.untermenue a:hover,.untermenue a:focus-visible{color:var(--navy-hell);background:var(--creme)}

/* Klappfeld als Karten — nur dort, wo Bilder hinterlegt sind.

   ANKER LINKS, NICHT MITTIG: Die Liste war 230px breit und durfte mittig
   unter ihrem Punkt hängen. Das Kartenfeld ist rund 540px breit. Mittig
   unter „Leistungen" — dem zweiten von sieben Punkten in einer zentrierten
   Reihe — ragte es bei 1024px über die linke Fensterkante hinaus. Weil das
   Feld `visibility:hidden` ist und nicht `display:none`, zählt es auch
   geschlossen zur Dokumentbreite: ein waagerechter Scrollbalken auf jeder
   Seite, ohne dass etwas zu sehen wäre. Von der linken Kante des Punktes
   nach rechts aufzuklappen ist ausserdem die Richtung, in der man liest. */
.untermenue--karten{
  left:0;transform:translateY(6px);
  /* GERECHNETE BREITE, NICHT max-content.

     `width:max-content` sah in Chromium richtig aus und war in WebKit
     falsch: Dort misst max-content den UNGEBROCHENEN Text der Karten,
     nicht deren Flexbreite — das Feld wurde bei 1025px Fensterbreite
     390px zu breit und stand halb ausserhalb des Fensters.

     Die Zahl der Karten steht als `--anzahl` im Markup und wird beim
     Bauen gesetzt. Damit stimmt die Rechnung von selbst, wenn eine
     Leistung dazukommt oder wegfaellt. */
  --karte:190px; --luecke:16px; --innen:20px;
  min-width:0;
  width:calc(var(--anzahl,4) * var(--karte)
             + (var(--anzahl,4) - 1) * var(--luecke)
             + 2 * var(--innen));
  padding:var(--innen);
  /* FLEX MIT nowrap, NICHT GRID.

     Erst stand hier eine feste Spaltenzahl; beim Hinzufuegen der
     vierten Karte blieb sie auf drei stehen, und die vierte fiel in
     eine zweite Zeile. Der Ersatz `grid-auto-flow:column` rechnete in
     Chromium und im Playwright-WebKit richtig, im echten Safari aber
     nicht — dort brach die Reihe weiter um.

     `flex-wrap:nowrap` ist die einzige Zusage, die keine Engine
     auslegen muss: Eine Flexzeile ohne Umbruch KANN nicht umbrechen.
     Die Kartenbreite steht am Kind, nicht am Behaelter — damit ist die
     Anzahl der Leistungen fuer diese Regel gleichgueltig. */
  display:flex;flex-wrap:nowrap;gap:var(--luecke);
  /* Reines Weiss stiess sich mit dem cremefarbenen Seitengrund: Die
     Kante zwischen #FFFFFF und #F9F6F2 ist kalt und faellt staerker auf
     als das Feld selbst. Der Kasten liegt jetzt eine Stufe TIEFER als
     die Seite - dieselbe Farbe wie die Copyright-Leiste im Fuss. Damit
     liest er sich als vertiefte Flaeche statt als aufgesetztes Blatt,
     und die Bilder stehen ruhiger darauf. */
  background:var(--creme-dunkel);
}
/* Bei knapper Fensterbreite schmalere Spalten, sonst raegt das Feld mit
   drei Karten rechts hinaus. Gemessen, nicht geschaetzt: siehe unten. */
/* Schmalere Karten, sobald der Platz rechts knapp wird. Gemessen an
   der Stelle, an der „Leistungen" in der zentrierten Reihe steht:
   bei 1025px beginnt das Feld bei 311px, es bleiben also rund 714px. */
@media (max-width:1280px){
  .untermenue--karten{--karte:156px; --luecke:12px; --innen:14px}
}
.nav__punkt:hover .untermenue--karten,
.nav__punkt:focus-within .untermenue--karten,
.nav__punkt .untermenue--karten.is-offen{transform:translateY(0)}

/* Der Listenzustand setzt padding und Blockdarstellung auf die
   Verweise. Beides muss hier zurückgenommen werden. */
.untermenue__karte{flex:0 0 var(--karte);min-width:0}
.untermenue--karten a{
  display:block;padding:0;background:none;
}
.untermenue--karten a:hover,
.untermenue--karten a:focus-visible{background:none}

.untermenue__bild{
  display:block;overflow:hidden;border-radius:var(--radius-bild);
  margin-bottom:12px;background:var(--creme);
}
.untermenue__bild picture{display:block}
.untermenue__bild img{
  display:block;width:100%;height:auto;
  transition:transform var(--t-zoom) var(--ease);
}
.untermenue--karten a:hover .untermenue__bild img,
.untermenue--karten a:focus-visible .untermenue__bild img{transform:scale(1.04)}

.untermenue__name{
  display:block;
  font-family:'Marcellus',Georgia,'Times New Roman',serif;
  font-size:17px;line-height:1.3;color:var(--heading);
  transition:color var(--t-schnell) linear;
}
.untermenue--karten a:hover .untermenue__name,
.untermenue--karten a:focus-visible .untermenue__name{color:var(--navy-hell)}

.untermenue__zeile{
  display:block;margin-top:3px;
  font-family:'Inter',sans-serif;font-size:13px;line-height:1.5;
  color:var(--text-dunkel);
}

@media (prefers-reduced-motion:reduce){
  .untermenue__bild img{transition:none}
  .untermenue--karten a:hover .untermenue__bild img,
  .untermenue--karten a:focus-visible .untermenue__bild img{transform:none}
}

/* -------------------------------------------------------------------
   8. Off-Canvas-Menü — DESIGN.md 6.4
   ------------------------------------------------------------------- */
/* Vollflächiges Menü, nur auf schmalen Schirmen sichtbar.

   BEWEGUNG: Einblenden plus 24px von oben. Nur opacity und transform —
   ein `height`- oder `clip-path`-Aufklappen sähe hübscher aus, löst
   aber in jedem Einzelbild ein neues Layout aus. Auf einem Mittelklasse-
   Handy ruckelt das sichtbar, und ein ruckelndes Menü ist schlimmer als
   ein schlichtes.

   `visibility` schaltet erst NACH der Blende zurück, sonst verschwände
   das Menü hart, bevor es ausgeblendet ist. */
.menue{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;
  padding:0 24px;overflow:hidden;
  background:var(--weiss);
  opacity:0;visibility:hidden;transform:translateY(-24px);
  transition:opacity .34s var(--kurve-auf),
             transform .34s var(--kurve-auf),
             visibility 0s linear .34s;
}
.menue.is-offen{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .34s var(--kurve-auf),
             transform .34s var(--kurve-auf),
             visibility 0s;
}

/* Gerollt wird NUR der Rumpf, nicht das ganze Feld. Auf kleinen Geräten
   sind neun Punkte plus Kontaktblock höher als der Bildschirm; würde das
   Feld als Ganzes rollen, wanderte das Schließen-Kreuz mit nach oben aus
   dem Bild.

   Ein `position:sticky` an der Kopfzeile täte dasselbe. Zwei Kästen sind
   trotzdem die bessere Wahl: Das Kreuz liegt dann bauartbedingt außerhalb
   des Rollbereichs, statt über eine Positionierungsregel dorthin gehalten
   zu werden, die in einem Flex-Rollcontainer je nach Browser wackelt. */
.menue__kopf{
  display:flex;align-items:center;justify-content:space-between;
  height:60px;flex:none;
}
.menue__rumpf{
  flex:1;min-height:0;
  display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
  padding-bottom:32px;
}
.menue__logo{display:flex;align-items:center;min-height:44px}
.menue__logo img{width:78px;height:auto;display:block}
.menue__zu{
  width:44px;height:44px;margin-right:-10px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--heading);
}
.menue__zu:focus-visible{outline:2px solid var(--heading);outline-offset:2px}

/* Die Punkte stehen mittig und nehmen den freien Platz ein: `margin:auto`
   schiebt sie zwischen Kopf und Fuß in die Mitte, solange die Höhe
   reicht, und lässt beides zusammenrücken, wenn nicht. */
.menue__punkte{
  list-style:none;margin:auto 0;padding:clamp(14px,3.5vh,40px) 0;
  text-align:center;flex:none;
}
/* Marcellus statt Inter: Das ist die Schrift der Überschriften, und ein
   Menü, das den ganzen Bildschirm füllt, ist eine Überschriftenfläche
   und keine Werkzeugleiste. Großbuchstaben brauchen Laufweite, sonst
   kleben sie. */
.menue__punkte a{
  display:block;padding:9px 0;
  font-family:'Marcellus',Georgia,'Times New Roman',serif;
  font-size:clamp(21px,5.6vw,27px);line-height:1.25;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--heading);
  transition:color var(--t-schnell) linear;
}
.menue__punkte a:hover,.menue__punkte a:focus-visible{color:var(--navy)}
.menue__punkte a[aria-current="page"]{color:var(--navy)}

.menue__fuss{
  flex:none;text-align:center;
  border-top:1px solid var(--linie);padding-top:clamp(22px,4vh,32px);
}
.menue__adresse{
  font-style:normal;font-size:15px;line-height:1.7;color:var(--text);margin:0;
}
.menue__draht{margin:8px 0 0;display:flex;flex-direction:column}
/* Telefon und E-Mail sind auf dem Handy die meistgetippten Ziele der
   ganzen Seite. Als reine Textzeilen waren sie 24px hoch — die Hausregel
   sind 44px. Das Polster steckt im Link, nicht im Abstand darum. */
.menue__draht a{
  display:block;padding:10px 0;
  font-size:15px;line-height:24px;color:var(--heading);
  text-decoration:underline;text-underline-offset:3px;
}
.menue__zeiten{
  margin:14px auto 0;border-collapse:collapse;
  font-size:14.5px;line-height:1.7;color:var(--text);
}
.menue__zeiten th{
  font-weight:400;text-align:right;padding-right:14px;color:var(--heading-alt);
}
.menue__zeiten td{text-align:left}
.menue__knopf{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;margin-top:18px;padding:0 28px;
  background:var(--navy);color:var(--weiss);
  font-family:'Inter',sans-serif;font-size:15px;line-height:1;
  transition:background-color var(--t-normal) linear;
}
.menue__knopf:hover,.menue__knopf:focus-visible{background:var(--heading);color:var(--weiss)}

/* Die Netzwerke gibt es auf dem Handy nur hier — die Leiste oben bleibt
   unverändert bei Logo und Menüknopf. */
.menue__sozial{display:flex;justify-content:center;gap:12px;margin-top:22px}
.menue__sozial a{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--creme-dunkel);color:var(--heading);
}
.menue__sozial svg{width:20px;height:20px}

/* -------------------------------------------------------------------
   9. Hero — lädt ohne Animation, sofort sichtbar
   Padding 0 30px nach DESIGN.md 3.2
   ------------------------------------------------------------------- */
/* Maße 1:1 aus DESIGN.md 3.2 "Hero im Detail":
   Textspalte 425px, Abstand 30px, Bildbereich 880px — zusammen 1335px,
   das ist die volle Breite abzüglich 45px auf jeder Seite.
   Kein oberer Abstand: der Text beginnt direkt unter der Navigation. */
.hero{
  padding:0 var(--rand) 44px;
  min-height:var(--hero-hoehe);
  display:flex;align-items:stretch;
}
.hero__grid{
  flex:1;
  width:100%;max-width:var(--deckel);margin-inline:auto;
  display:grid;grid-template-columns:425fr 880fr;gap:30px;
  align-items:stretch;          /* Bilder auf volle Hero-Höhe */
}
/* Der Text steht mittig neben dem Bildblock, beginnt aber ohne Vorlauf:
   im Original sitzt er direkt unter der Navigation (DESIGN.md 3.2). */
.hero__text{align-self:center}
.hero__text{max-width:520px}
.hero h1{margin:0 0 20px}
.hero p{margin-bottom:12px}
.hero .btn{margin-top:28px}

/* Bildbereich: großes Bild links über beide Zeilen, rechts zwei gestapelt.
   Das Seitenverhältnis 880:580 hält die Proportion des Originals auf jeder
   Fensterbreite; max-height fängt sehr flache Fenster ab. */
.hero__collage{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:10px;
  height:100%;
  min-height:520px;   /* Untergrenze für sehr flache Fenster */
}
.hero__bild-gross{grid-row:1 / span 2;min-height:0}
.hero__bild-klein{min-height:0}
.hero__collage img{
  width:100%;height:100%;object-fit:cover;
  border-radius:var(--radius-bild);
}

/* -------------------------------------------------------------------
   10. Sortiment-Karussell
   Kachel 302x436 (Verhältnis 900:1300), Radius 5px, Abstand 10px
   Ohne JavaScript: horizontal scrollbar mit Scroll-Snap
   ------------------------------------------------------------------- */
.sortiment{padding:var(--rand)}   /* Original: 45px rundum */
.sortiment__kopf{text-align:center;margin-bottom:36px}

.karussell{position:relative}
.karussell__spur{
  display:flex;gap:10px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:4px;
}
.karussell__spur::-webkit-scrollbar{display:none}

.kachel{
  flex:0 0 calc((100% - 30px) / 4);
  scroll-snap-align:start;
  min-width:0;
}
.kachel__bild{
  position:relative;overflow:hidden;
  border-radius:var(--radius-bild);
  aspect-ratio:900/1300;
}
.kachel__bild img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1);
  transition:transform var(--t-zoom) var(--ease);
}
.kachel:hover .kachel__bild img,
.kachel:focus-within .kachel__bild img{transform:scale(1.05)}

.kachel__titel{
  font-size:30px;line-height:36px;margin:18px 0 6px;
  color:var(--heading);
  transition:transform var(--t-zoom) var(--ease);
}
.kachel__text{
  font-size:14px;line-height:22px;color:var(--text);margin:0;
  transition:transform var(--t-zoom) var(--ease);
}
/* Bildunterschrift wandert beim Hover 3px nach oben */
.kachel:hover .kachel__titel,.kachel:focus-within .kachel__titel,
.kachel:hover .kachel__text,.kachel:focus-within .kachel__text{
  transform:translateY(-3px);
}
.kachel__link{display:block;color:inherit}

/* Bedienelemente */
.karussell__steuerung{
  display:flex;align-items:center;justify-content:center;gap:20px;margin-top:28px;
}
/* 44x44 ist die Mindestgröße für ein Bedienelement am Finger.
   Vorher standen hier 42px — zwei Pixel, die niemand sieht und die
   trotzdem die Prüfung reißen. */
.karussell__pfeil{
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(28,28,28,.22);
  display:flex;align-items:center;justify-content:center;
  transition:background-color var(--t-normal) linear,
             border-color var(--t-normal) linear,color var(--t-normal) linear;
}
.karussell__pfeil:hover,.karussell__pfeil:focus-visible{
  background:var(--heading);border-color:var(--heading);color:var(--weiss);
}
.karussell__punkte{display:flex;gap:9px}
.karussell__punkt{
  width:10px;height:10px;border-radius:50%;
  border:1px solid var(--heading);background:transparent;
  transition:background-color var(--t-normal) ease-in-out;
}
.karussell__punkt[aria-current="true"]{background:var(--heading)}
/* Ohne JavaScript sind Pfeile und Punkte wirkungslos — deshalb ausblenden */
.karussell__steuerung{display:none}
.js .karussell__steuerung{display:flex}

/* -------------------------------------------------------------------
   11. Inhaltssektionen
   ------------------------------------------------------------------- */
/* -------------------------------------------------------------------
   Schmuck — mittiger Textblock, Aufnahmen erscheinen nacheinander

   WICHTIG: Der ruhige Zustand ist die Voreinstellung, nicht die Ausnahme.
   Er gilt auf dem Handy (< 768px), bei "Bewegung reduzieren" und ohne
   JavaScript: normale Höhe, kein sticky, Text mittig, Aufnahmen im
   zweispaltigen Raster darunter — alle sofort sichtbar.
   Erst wenn die Bühne wirklich laufen kann, setzt das Skript die Klasse
   schmuck--buehne. Umgekehrt wären die Aufnahmen unsichtbar, sobald der
   Effekt aus irgendeinem Grund nicht anläuft.
   ------------------------------------------------------------------- */
.schmuck{padding:86px 0 96px;position:relative}
.schmuck__buehne{display:block}

.schmuck__ruhend{
  position:relative;z-index:2;
  max-width:var(--deckel);margin-inline:auto;width:100%;
  padding:0 var(--rand);
  text-align:center;
}
.schmuck__marke{
  font-family:'Inter',sans-serif;font-size:13px;line-height:22px;
  color:var(--text);margin:0 0 26px;
}
.schmuck__schlagzeile{
  font-size:clamp(46px,8.4vw,132px);line-height:.94;
  color:var(--heading);margin:0;letter-spacing:-.01em;
}
.schmuck__text{max-width:520px;margin:44px auto 0}
.schmuck__text p{font-size:15.5px;line-height:24px;margin:0 0 22px}

/* Ruhezustand: zweispaltiges Raster unter dem Text */
.schmuck__zug{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin:44px auto 0;padding:0 var(--rand);
  max-width:var(--deckel);
}
.schmuckbild{
  position:relative;
  aspect-ratio:3/4;overflow:hidden;
  border-radius:var(--radius-bild);
}
.schmuckbild__innen{position:absolute;inset:0;display:block}
.schmuckbild img{width:100%;height:100%;object-fit:cover;display:block}

/* Marker für den Fortschritt. Sie werden vom Skript erzeugt, messen
   nichts selbst und sind unsichtbar — der IntersectionObserver meldet
   nur, wann sie die Mitte des Fensters erreichen. */
.schmuck__punkt{
  position:absolute;left:0;width:1px;height:1px;
  pointer-events:none;visibility:hidden;
}

/* --- Bühnenzustand: 200vh Strecke, Text bleibt mittig stehen ---------
   EINE klebende Bühne von genau einer Fensterhöhe, darin Text und
   Aufnahmen absolut. Der Text wird per top:50% + translateY(-50%) auf
   die Mittellinie gesetzt, die Aufnahmen hängen mit --y vom Bühnenkopf.

   WICHTIG — warum nicht zwei getrennte sticky-Elemente:
   Ein sticky-Element löst sich, sobald seine Unterkante die Unterkante
   des Elternelements erreicht. Diese Grenze hängt an der EIGENEN Höhe.
   Ein 441px hoher Textblock und ein 0px hoher Bildhalter lösen sich
   deshalb an verschiedenen Stellen — gemessen 909px gegen 1350px. Der
   Text wanderte dann nach oben, während die Aufnahmen stehen blieben,
   und die untere Aufnahme ragte in die nächste Sektion. Mit einer
   gemeinsamen Bühne von 100vh löst sich alles zugleich, und zwar genau
   am Ende der Strecke.

   Die Plätze liegen links und rechts am Text vorbei: eine Aufnahme über
   der Schlagzeile macht sie unlesbar. Unter 768px gilt deshalb das
   Raster, dort ist seitlich kein Platz. */
/* Die vier Kacheln starten um 64px nach aussen versetzt und fahren beim
   Scrollen in ihre Ruhelage. Zwei von ihnen ragen im Startzustand ueber
   die rechte Fensterkante. Links faellt das nicht auf, weil `body` dort
   abschneidet - rechts wuchs dafuer das Dokument, und die Startseite
   liess sich waagerecht schieben (23px bei 1025px Fensterbreite).

   Frueher war das fluechtig: Die Kacheln liefen einmal ein und blieben.
   Seit die Bewegung umkehrbar ist, kehren sie beim Hochscrollen in die
   versetzte Lage zurueck - der Ueberstand ist damit dauerhaft.

   `clip` statt `hidden`: `hidden` machte die Buehne zum Scrollbehaelter
   und haette die 200vh-Hoehe mit einer eigenen Bildlaufleiste versehen.
   `clip` schneidet nur ab. Die Achse bleibt einzeln benannt, damit
   senkrecht nichts beschnitten wird. */
.schmuck--buehne{padding:0;height:200vh;overflow-x:clip}
.schmuck--buehne .schmuck__buehne{
  position:sticky;top:0;height:100vh;
}
.schmuck--buehne .schmuck__ruhend{
  position:absolute;top:50%;left:0;right:0;z-index:2;
  transform:translateY(-50%);
}
.schmuck--buehne .schmuck__schlagzeile{font-size:clamp(46px,6.4vw,104px)}
.schmuck--buehne .schmuck__text{max-width:min(440px,42vw)}
.schmuck--buehne .schmuck__zug{
  position:absolute;inset:0;z-index:1;
  display:block;margin:0 auto;padding:0;
  max-width:var(--deckel);
}
.schmuck--buehne .schmuckbild{
  position:absolute;left:var(--x);top:var(--y);width:var(--b);
  opacity:0;
  transform:translate3d(var(--her),14px,0);
  transition:opacity 550ms cubic-bezier(0.22,1,0.36,1),
             transform 550ms cubic-bezier(0.22,1,0.36,1);
}
/* Umkehrbar: Die Übergänge stehen an der Grundregel darüber, nicht
   hier — dadurch laufen sie in beide Richtungen. Beim Zurückscrollen
   nimmt das Skript `is-da` wieder weg, und die Aufnahme fährt auf
   demselben Weg zurück, auf dem sie gekommen ist. */
.schmuck--buehne .schmuckbild.is-da{
  opacity:1;transform:translate3d(0,0,0);
}

.goldankauf{padding:80px var(--rand)}

/* Vertrauenspunkte — als typografisches Band statt als Icon-Reihe.
   Die vier Aussagen laufen auf der Größe der Kachel-Titel (28px Marcellus)
   und werden durch Haarlinien gegliedert. Die Haarlinie ist kein neues
   Gestaltungsmittel: sie trennt schon die beiden Kopfzeilen und rahmt die
   Kundenstimmen. Keine Icons, keine Kästen, keine zusätzliche Farbe. */
.vertrauen{padding:92px var(--rand) 96px}
.vertrauen__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  grid-template-rows:auto auto;
  border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie);
}
/* Subgrid hält Überschriften und Absätze spaltenübergreifend auf einer
   Linie — sonst starten die Absätze je nach Zeilenzahl der Überschrift
   auf vier verschiedenen Höhen und der Block wirkt zufällig. */
.vertrauen__punkt{
  position:relative;
  display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:14px;
  padding:38px 30px 42px;      /* über der Überschrift mehr Luft als darunter */
}
.vertrauen__punkt:first-child{padding-left:0}
.vertrauen__punkt:last-child{padding-right:0}

/* Senkrechte Trennlinie als eigenes Element, damit sie sich zeichnen lässt */
.vertrauen__punkt::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:1px;
  background:var(--linie);
  transform:scaleY(1);transform-origin:top center;
  transition:transform .8s var(--ease);
  transition-delay:var(--verzug,0ms);
}
.vertrauen__punkt:first-child::before{content:none}
/* Mit JavaScript wächst die Linie beim Hereinscrollen nach unten */
html.js-anim .vertrauen__punkt::before{transform:scaleY(0)}
html.js-anim .vertrauen__punkt.is-drin::before{transform:scaleY(1)}
html.js-anim .vertrauen__punkt.sofort::before{transform:scaleY(1);transition:none}

/* 24px statt 28px: bei 28px passt "Goldschmiede-Werkstatt" nicht in die
   Spalte und bricht dreizeilig mit hängendem Bindestrich.
   hyphens bleibt aus — die automatische Trennung zerlegt das Wort zu
   "Goldschmie-de"; der Bindestrich im Kompositum ist die bessere Stelle. */
.vertrauen__titel{
  font-size:24px;line-height:31px;margin:0;
  color:var(--heading);text-wrap:balance;hyphens:none;
}
.vertrauen__text{font-size:14px;line-height:23px;margin:0;max-width:32ch}
/* Die Breite wird per JavaScript exakt auf die Endzahl festgelegt, bevor
   der Zähler startet. Die Einheit "ch" wäre hier zu breit — bei Marcellus
   ist die Null merklich breiter als die Ziffern der Endzahl. */
.zaehler{
  font-variant-numeric:tabular-nums;
  display:inline-block;text-align:right;
}

/* -------------------------------------------------------------------
   11b. Partner — endlos laufendes Logoband
   Abstände in der Senkrechten wie bei den Nachbarsektionen:
   Goldankauf endet mit 80px, hier 76px oben -> 156px Lücke, das ist
   derselbe Rhythmus wie Vertrauenspunkte -> Goldankauf (96 + 80).
   ------------------------------------------------------------------- */
.partner{padding:76px var(--rand) 80px;overflow:hidden}
.partner__kopf{text-align:center;max-width:620px;margin:0 auto 46px}
.partner__text{font-size:15.5px;line-height:24px;margin:16px 0 0}

/* Das Band läuft über das Seitenpadding hinaus bis an den Fensterrand —
   sonst würden die Verläufe an den Rändern ins Leere greifen. */
.partner__band{position:relative;margin-inline:calc(var(--rand) * -1)}

.partner__spur{
  display:flex;align-items:center;width:max-content;
  animation:partnerlauf 40s linear infinite;
  will-change:transform;
}
/* Abstand als margin-right, NICHT als gap — Begründung siehe index.html */
.partner__punkt{margin-right:90px}
.partner__band:hover .partner__spur,
.partner__band:focus-within .partner__spur{animation-play-state:paused}

@keyframes partnerlauf{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

.partner__link{display:block}
/* Feste Box statt reiner Höhenvorgabe: Zwei der vier Logos sind breite
   Wortmarken, zwei gestapelte Bildmarken. Bei fester Höhe von 60px wäre
   Schaffrath 311px breit und Tantalum 39px — Flächenverhältnis 8:1.
   Mit der Breitenbegrenzung sind es 3:1. --k gleicht optisch nach. */
.partner__logo{
  display:block;
  height:calc(60px * var(--k,1));
  width:auto;max-width:calc(150px * var(--k,1));
  object-fit:contain;
  filter:grayscale(1);opacity:.55;
  transition:filter 350ms var(--ease),
             opacity 350ms var(--ease),
             transform 350ms var(--ease);
}
.partner__link:hover .partner__logo,
.partner__link:focus-visible .partner__logo{
  filter:grayscale(0);opacity:1;transform:scale(1.08);
}

/* Optischer Ausgleich. Ohne ihn stehen die Flächen 3:1 zueinander, weil
   Breuning und Schaffrath breite Wortmarken sind. --k verkleinert nur,
   nie vergrößern — 60px bleibt so die Obergrenze der Höhe.
   Gemessene Flächen danach: 4674 / 3200 / 2820 / 2340 px², also 2:1. */
.partner__logo[src*="breuning"]{--k:.82}
.partner__logo[src*="schaffrath"]{--k:.85}
/* Das nagigraphy-Zeichen ist mit 1913:825 deutlich breiter als die
   uebrigen. Bei vollen 150px waere es 65px hoch und ueberragte die
   Reihe; .85 bringt es auf rund 55px und damit auf dieselbe Hoehe. */
.partner__logo[src*="nagigraphy"]{--k:.85}

/* Weiche Ränder, damit die Logos nicht hart abgeschnitten werden.
   Bewusst rgba(...,0) statt transparent: transparent ist in einigen
   Browsern rgba(0,0,0,0) und ergibt im Verlauf einen Grauschleier. */
.partner__band::before,
.partner__band::after{
  content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;
  pointer-events:none;
}
.partner__band::before{left:0;
  background:linear-gradient(90deg,var(--creme) 0%,rgba(249,246,242,0) 100%)}
.partner__band::after{right:0;
  background:linear-gradient(270deg,var(--creme) 0%,rgba(249,246,242,0) 100%)}

/* -------------------------------------------------------------------
   11c. Für den schönsten Moment — versetzte Bildkarten
   ------------------------------------------------------------------- */
/* Unten bewusst 120px statt 86px: Die tiefste Karte (Versatz 90px) endet
   als letzte, und während des Einblendens steht sie kurz 40px tiefer.
   Ohne diesen Puffer klebte ihr Text am Rand zur nächsten Sektion.
   Die Sektion bekommt KEINE feste Höhe und KEIN overflow:hidden — der
   Versatz läuft über margin-top im Grid, damit wächst die Zeile mit. */
.moment{padding:76px var(--rand) 120px}
.moment__kopf{text-align:center;max-width:620px;margin:0 auto 54px}
.moment__text{font-size:15.5px;line-height:24px;margin:16px 0 0}

.moment__karten{
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
  align-items:start;max-width:var(--deckel);margin-inline:auto;
}
/* Versatz und Bildhöhen sind Gestaltung, keine Reihenfolge — deshalb
   hier und nicht im HTML. */
.moment__karte:nth-child(2){margin-top:90px}
.moment__karte:nth-child(3){margin-top:45px}
/* Staffelung des Einblendens — bewusst hier und nicht als style-Angabe
   im HTML: inline ließe sie sich im Handy-Breakpoint nicht überschreiben. */
.moment__karte:nth-child(1){--verzug:0ms}
.moment__karte:nth-child(2){--verzug:130ms}
.moment__karte:nth-child(3){--verzug:260ms}

.moment__bild{overflow:hidden;position:relative}
.moment__karte:nth-child(1) .moment__bild{height:520px}
.moment__karte:nth-child(2) .moment__bild{height:640px}
.moment__karte:nth-child(3) .moment__bild{height:560px}
.moment__bild img{width:100%;height:100%;object-fit:cover;display:block}

.moment__titel{
  font-size:26px;line-height:33px;margin:24px 0 0;color:var(--heading);
}
.moment__linie{
  display:block;width:40px;height:1px;background:var(--rose);margin:16px 0 14px;
}
.moment__satz{font-size:15.5px;line-height:24px;margin:0;max-width:34ch}

/* Einblenden: Karte von unten, Aufnahme darin leicht heraus aus dem
   Zoom. Beides nur transform und opacity. */
html.js-anim .moment__karte{
  opacity:0;transform:translate3d(0,40px,0);
  transition:opacity 650ms cubic-bezier(0.22,1,0.36,1),
             transform 650ms cubic-bezier(0.22,1,0.36,1);
  transition-delay:var(--verzug,0ms);
}
html.js-anim .moment__karte.is-drin{opacity:1;transform:translate3d(0,0,0)}

html.js-anim .moment__bild img{
  transform:scale(1.08);
  transition:transform 900ms cubic-bezier(0.22,1,0.36,1);
  transition-delay:var(--verzug,0ms);
}
html.js-anim .moment__karte.is-drin .moment__bild img{transform:scale(1)}
/* Hover übersteuert die Dauer des Einblendens */
.moment__karte:hover .moment__bild img,
.moment__karte:focus-within .moment__bild img{
  transform:scale(1.05);transition-duration:600ms;transition-delay:0ms;
}

/* -------------------------------------------------------------------
   12. Kundenstimmen — Padding 44px 65px
   ------------------------------------------------------------------- */
/* Waagerechtes Band statt Raster: die Karten laufen über den rechten Rand
   hinaus, damit sichtbar ist, dass es weitergeht. Überschrift links,
   Pfeile rechts. Ohne JavaScript bleibt das Band mit Wischen bedienbar,
   die Pfeile werden dann ausgeblendet. */
.stimmen{padding:44px 0 64px}
.stimmen__kopf{
  display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
  padding:0 var(--rand);max-width:var(--deckel);margin:0 auto 34px;
}
.stimmen__titelblock{max-width:620px}
.stimmen__bewertung{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:18px 0 0;font-size:14px;color:var(--text);
}
.stimmen__bewertung img{flex:none}
.sterne{color:var(--rose);letter-spacing:.12em;font-size:15px}
.stimmen__steuerung{margin-top:0;flex:none}
.karussell__stand{
  font-size:13px;color:var(--text);
  font-variant-numeric:tabular-nums;
  min-width:52px;text-align:center;
}
.stimmen__steuerung .karussell__pfeil{
  background:linear-gradient(158deg, var(--glas-hell), var(--glas-tief));
  border-color:var(--glas-kante);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 8px 20px -12px rgba(28,28,28,.28);
}
.stimmen__steuerung .karussell__pfeil:hover,
.stimmen__steuerung .karussell__pfeil:focus-visible{
  background:var(--heading);border-color:var(--heading);color:var(--weiss);
}

/* Das Band selbst.

   Der Innenabstand oben und unten ist kein Weißraum, sondern Platz für
   den Schatten. overflow-x:auto zwingt den Browser auch senkrecht auf
   auto — overflow-y:visible wird dabei ignoriert, das ist so
   spezifiziert. Der Schatten der Karten (0 14px 34px -16px, beim
   Überfahren 0 20px 42px -16px) reicht rund 22px unter die Karte und
   wurde vom Rand des Wischbereichs gekappt. 32px unten fangen ihn ab,
   8px oben den Versatz von 3px beim Anheben.

   Beide Beträge sind an anderer Stelle wieder abgezogen, damit die
   Sektion optisch gleich hoch bleibt: unten an .stimmen (90 -> 64),
   oben am Abstand unter der Überschrift (40 -> 34). */
.stimmen__spur{
  gap:20px;
  padding:8px var(--rand) 32px;
  scroll-padding-inline:var(--rand);
  align-items:stretch;
}
/* Sehr weicher Schimmer hinter dem Band. Ohne ihn hätte das Milchglas
   nichts zu brechen — backdrop-filter über einer einfarbigen Fläche
   ist wirkungslos. Farben ausschließlich aus der Palette. */
.stimmen{isolation:isolate}
.stimmen::before{
  content:'';position:absolute;left:0;right:0;top:14%;bottom:6%;
  z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 78% at 16% 42%, rgba(206,150,126,.20), transparent 72%),
    radial-gradient(52% 72% at 82% 58%, rgba(78,96,155,.11), transparent 72%);
}

.stimme{
  /* Genau vier Karten je Folie — die Pfeile blättern um eine ganze Folie.
     20px ist der Abstand aus .stimmen__spur. */
  flex:0 0 calc((100% - 60px) / 4);
  scroll-snap-align:start;
  position:relative;display:flex;flex-direction:column;
  padding:30px 32px 26px;
  border-radius:var(--radius-glas);
  background:linear-gradient(158deg, var(--glas-hell), var(--glas-tief));
  border:1px solid var(--glas-kante);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),   /* Lichtkante oben  */
    0 14px 34px -16px rgba(28,28,28,.26);  /* Schatten mit Versatz und weichem Verlauf */
  transition:border-color var(--t-normal) linear,
             box-shadow var(--t-normal) var(--ease),
             transform var(--t-normal) var(--ease);
}
.stimme:hover,.stimme:focus-within{
  border-color:var(--rose);
  transform:translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 20px 42px -16px rgba(28,28,28,.30);
}

/* Ohne backdrop-filter (ältere Browser): schlicht deckend weiß,
   damit der Text auf jeden Fall lesbar bleibt. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .stimme{background:var(--weiss);border-color:var(--linie)}
}

.stimme__kopf{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.stimme__logo{width:26px;height:26px;flex:none}
.stimme__meta{display:flex;flex-direction:column;line-height:1.25}
.stimme__autor{font-family:'Marcellus',serif;font-size:16px;color:var(--heading)}
.stimme__quelle{font-size:12px;color:var(--text);margin-top:3px}

.stimme__sterne{color:var(--rose);letter-spacing:.14em;font-size:15px;margin:0 0 12px}
.stimme__zitat{margin:0 0 20px}
/* Auf dem Tablet zeigt das Band zwei Karten je Folie; die Zitate liefen
   dort auf rund 82 Zeichen je Zeile. --zeile deckelt sie auf 75. */
.stimme__zitat p{font-size:14.5px;line-height:23px;margin:0;color:var(--text);max-width:var(--zeile)}

/* Der Link liegt sichtbar unten und macht zugleich die ganze Karte
   anklickbar — so bleibt der Vorlesetext kurz, statt das ganze Zitat
   als Linktext auszugeben. */
.stimme__link{
  margin-top:auto;align-self:flex-start;
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;color:var(--heading);
  transition:color var(--t-normal) linear;
}
.stimme__link::after{content:'';position:absolute;inset:0}
.stimme__link:hover,.stimme__link:focus-visible{color:var(--rose)}
.stimme__pfeil{transition:transform var(--t-normal) var(--ease)}
.stimme__link:hover .stimme__pfeil,
.stimme__link:focus-visible .stimme__pfeil{transform:translate(2px,-2px)}

/* -------------------------------------------------------------------
   13. Instagram — Padding 5px 35px 110px 45px
   ------------------------------------------------------------------- */
.instagram{padding:5px 35px 110px 45px}
.instagram__kopf{text-align:center;max-width:720px;margin:0 auto 40px}
.instagram__kopf .eyebrow{margin-bottom:10px}
.instagram__grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:38px;
}
.instagram__bild{
  overflow:hidden;border-radius:var(--radius-bild);aspect-ratio:2/3;
}
.instagram__bild img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1);transition:transform var(--t-zoom) var(--ease);
}
.instagram__bild:hover img,.instagram__bild:focus-within img{transform:scale(1.05)}
.instagram__cta{text-align:center}

/* -------------------------------------------------------------------
   14. Fußbereich — DESIGN.md 7
   Spalte "Links" ist auf Kundenwunsch entfallen, daher drei Spalten.
   ------------------------------------------------------------------- */
/* -------------------------------------------------------------------
   Fußbereich

   Abgesetzte Fläche mit runden Ecken INNERHALB der Seite, nicht als
   Balken am Boden. Das Rechtliche steht außerhalb der Fläche — kleiner
   und ruhiger, wie es sich gehört.

   Die Spaltenüberschriften stehen in der Akzentfarbe. Rosé (--rose)
   wäre die naheliegende Wahl gewesen, ergibt auf der hellen Fläche aber
   nur 2,45:1 und reißt damit jede Kontrastgrenze. Das Logo-Blau ist die
   zweite Akzentfarbe des Hauses und liefert 12,67:1.
   ------------------------------------------------------------------- */
/* Luft vor dem Fußbereich.

   Gemessen war der Abstand zwischen dem letzten Abschnitt und dem Fuß
   exakt 0px — die weißen Verweiskarten stießen unmittelbar an die
   cremefarbene Fußfläche. Aufgefallen ist es lange nicht, weil beide
   Töne fast gleich sind (#FFFFFF gegen #FDFBF8); die Kante war da, nur
   kaum zu sehen.

   Der Abstand sitzt bewusst am Seitenende und nicht an `.tr-weiter`:
   Nicht jede Seite hört mit den Verweiskarten auf. Über das Zusammen-
   fallen von Rändern gewinnt der größere Wert, ein Abschnitt mit
   eigenem Fußabstand addiert also nicht dazu.

   --luft-xl ist im Haus der Wert vor und nach farbigen Bändern. Der
   Fußbereich ist genau das. */
#inhalt{margin-bottom:var(--luft-xl)}

.fuss{padding:0 40px}
.fuss__flaeche{
  max-width:1280px;margin-inline:auto;
  background:#FDFBF8;border-radius:20px;
  padding:64px;
  box-shadow:0 2px 24px rgba(0,0,0,.04);
}

.fuss__logo{display:inline-block;margin-bottom:64px}
.fuss__logo img{width:180px;height:auto;display:block}

/* --- Schnelle Auskunft: Adresse, Zeiten, Telefon ------------------- */
.fuss__schnell{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  margin:0 0 28px;padding:0 0 28px;
  border-bottom:1px solid var(--linie);
  font-size:14px;line-height:1.5;color:var(--text-dunkel);
}
.fuss__schnell a{color:var(--text-dunkel);display:inline-flex;align-items:center;gap:8px;min-height:44px}
.fuss__schnell a:hover,.fuss__schnell a:focus-visible{color:var(--heading)}
.fuss__etikett{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy);
}
/* Ziffern in gleicher Laufweite — sonst zappeln Uhrzeiten und Nummern. */
.fuss__zahlen{font-variant-numeric:tabular-nums}
.fuss__punkt{color:var(--linie);color:rgba(28,28,28,.28)}

/* --- Drei Linkspalten plus Standortblock --------------------------- */
.fuss__raster{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.3fr);
  gap:48px;
}
.fuss__titel{
  font-family:'Inter',sans-serif;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy);margin:0 0 20px;
}
.fuss__spalte ul{list-style:none;margin:0;padding:0}
.fuss__spalte li{margin-bottom:14px}
.fuss__spalte a{
  font-size:15px;line-height:1.4;color:var(--text-dunkel);
  /* Unterstreichung wächst von links — kein Farbwechsel, wie in der
     Vorlage. background-size lässt sich weich überblenden, text-decoration
     nicht. */
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;
  background-size:0 1px;
  transition:background-size .3s var(--ease);
  padding-bottom:2px;
}
.fuss__spalte a:hover,.fuss__spalte a:focus-visible{background-size:100% 1px}

/* --- Standortblock ------------------------------------------------- */
.fuss__standort-titel{
  font-family:'Marcellus',Georgia,serif;font-size:26px;line-height:1.24;
  color:var(--heading);margin:0 0 18px;
}
.fuss__standort address{
  font-style:normal;font-size:15px;line-height:1.7;color:var(--text-dunkel);
  margin:0 0 18px;
}
.fuss__standort address a{color:var(--text-dunkel)}
.fuss__standort address a:hover{color:var(--heading)}
.fuss__zeiten{border-collapse:collapse;margin:0 0 26px}
.fuss__zeiten th,.fuss__zeiten td{
  text-align:left;font-weight:400;font-size:15px;line-height:1.7;
  color:var(--text-dunkel);padding:0 24px 0 0;
}
.fuss__knopf{
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding:12px 26px;
  border:1px solid rgba(28,28,28,.28);border-radius:var(--radius-pille);
  font-size:15px;color:var(--heading);background:none;
  transition:background-color var(--t-normal) linear,
             border-color var(--t-normal) linear,color var(--t-normal) linear;
}
.fuss__knopf:hover,.fuss__knopf:focus-visible{
  background:var(--heading);border-color:var(--heading);color:var(--weiss);
}

/* --- Untere Zeile innerhalb der Fläche ----------------------------- */
.fuss__unten{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px;margin-top:56px;padding-top:28px;
  border-top:1px solid var(--linie);
}
.fuss__bewertung{
  display:inline-flex;align-items:center;gap:12px;min-height:44px;
  font-size:14.5px;color:var(--text-dunkel);
}
.fuss__bewertung strong{color:var(--heading);font-weight:400}
.fuss__bewertung:hover strong{color:var(--rose)}
.fuss__sterne{color:#E8B44A;letter-spacing:2px;font-size:15px}

.fuss__social{display:flex;gap:12px}
.fuss__social a{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--creme-dunkel);color:var(--heading);
  transition:background-color var(--t-normal) linear,color var(--t-normal) linear;
}
.fuss__social a:hover,.fuss__social a:focus-visible{background:var(--heading);color:var(--weiss)}
.fuss__social svg{width:20px;height:20px}

/* --- Rechtliches: außerhalb der Fläche ----------------------------- */
.fuss__recht{
  max-width:1280px;margin-inline:auto;
  padding:32px 0 40px;
}
.fuss__recht ul{
  list-style:none;margin:0 0 10px;padding:0;
  display:flex;flex-wrap:wrap;gap:6px 24px;
}
.fuss__recht a{
  font-size:13px;line-height:1.6;color:var(--text-dunkel);
  display:inline-flex;align-items:center;min-height:34px;
}
.fuss__recht a:hover,.fuss__recht a:focus-visible{color:var(--heading)}
.fuss__copy{font-size:13px;line-height:1.6;color:var(--text-dunkel);margin:0}

/* -------------------------------------------------------------------
   15. Nach-oben-Button — blendet nach 400px ein
   ------------------------------------------------------------------- */
/* Rosé auf Weiß ergibt 2,54:1 — für ein Bedienelement zu wenig; die
   Grenze im Haus sind 4,5:1. Der Pfeil steht deshalb in der
   Schriftfarbe (17:1), und beim Überfahren dreht sich das Verhältnis
   um, wie bei den Netzwerk-Zeichen im Kopf- und Fußbereich. */
.nach-oben{
  position:fixed;right:22px;bottom:22px;z-index:800;
  width:46px;height:46px;border-radius:50%;
  background:var(--weiss);color:var(--heading);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(28,28,28,.16);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--t-normal) var(--ease),
             transform var(--t-normal) var(--ease),
             visibility 0s linear var(--t-normal);
}
.nach-oben.is-sichtbar{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity var(--t-normal) var(--ease),transform var(--t-normal) var(--ease),visibility 0s;
}
.nach-oben:hover,.nach-oben:focus-visible{background:var(--heading);color:var(--weiss)}
.nach-oben:focus-visible{outline:2px solid var(--heading);outline-offset:3px}
.nach-oben svg{width:20px;height:20px}

/* -------------------------------------------------------------------
   16. Cookie-Hinweis — in den Seitenfarben, schlichter Balken unten
   ------------------------------------------------------------------- */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:9500;
  background:var(--weiss);
  border-top:1px solid var(--linie);
  box-shadow:0 -4px 22px rgba(28,28,28,.09);
  padding:20px 26px;
  transform:translateY(100%);
  transition:transform var(--t-normal) var(--ease);
}
.cookie.is-sichtbar{transform:translateY(0)}
.cookie__inner{
  max-width:var(--deckel);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.cookie__text{font-size:14px;line-height:22px;margin:0;max-width:640px;color:var(--text)}
.cookie__text a{color:var(--heading);text-decoration:underline;text-underline-offset:2px}
.cookie__knoepfe{display:flex;gap:10px;flex-wrap:wrap}
.cookie .btn{padding:12px 30px;font-size:14px}
.cookie__ablehnen{
  background:var(--creme);color:var(--heading);
  border:1px solid rgba(28,28,28,.16);
}
.cookie__ablehnen:hover,.cookie__ablehnen:focus-visible{background:var(--rose);color:var(--weiss);border-color:var(--rose)}

/* -------------------------------------------------------------------
   17. Formular (für die Kontaktseite; Stile hier zentral)
   ------------------------------------------------------------------- */
.feld{position:relative;margin-bottom:22px}
.feld input,.feld textarea,.feld select{
  width:100%;padding:20px 16px 8px;
  font-family:'Inter',sans-serif;font-size:15px;color:var(--heading);
  background:var(--weiss);
  border:1px solid rgba(28,28,28,.16);border-radius:6px;
  transition:border-color var(--t-schnell) linear,box-shadow var(--t-schnell) linear;
}
.feld textarea{min-height:150px;resize:vertical}
.feld input:focus,.feld textarea:focus,.feld select:focus{
  outline:none;border-color:var(--rose);box-shadow:0 0 0 1px var(--rose);
}
/* Beschriftung wandert beim Ausfüllen nach oben */
.feld label{
  position:absolute;left:17px;top:15px;
  font-size:15px;color:var(--text);pointer-events:none;
  transform-origin:left top;
  transition:transform var(--t-schnell) var(--ease),color var(--t-schnell) linear;
}
.feld input:focus + label,
.feld textarea:focus + label,
.feld input:not(:placeholder-shown) + label,
.feld textarea:not(:placeholder-shown) + label,
.feld select:valid + label,
.feld select:focus + label{
  transform:translateY(-9px) scale(.74);color:var(--rose);
}
.feld--haken{display:flex;gap:12px;align-items:flex-start}
/* Das Kästchen selbst bleibt klein; die Bedienfläche entsteht über die
   Beschriftung daneben, die vollständig anklickbar ist. 20px statt der
   Browservorgabe von 13px trifft es trotzdem leichter. */
.feld--haken input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--navy)}
/* Die Regel für die schwebende Beschriftung greift auch hier: Ein
   Ankreuzfeld hat keinen Platzhalter, also trifft
   :not(:placeholder-shown) zu und färbt den Text rosé — nachgemessen
   2,35:1 auf dem Seitenton. Deshalb hier ausdrücklich zurücksetzen. */
.feld--haken label{
  position:static;font-size:14px;line-height:21px;pointer-events:auto;
  transform:none;
}
/* Gewicht: Die schwebende Regel wiegt (0,2,2). Eine einfache Klasse
   reicht deshalb nicht, um sie zu überstimmen — die Farbe stünde weiter
   auf rosé. Mit zwei Klassen plus Attribut wiegt diese Regel (0,3,2). */
.feld.feld--haken input[type="checkbox"] + label{color:var(--text)}
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fehler{
  background:#FBECE8;border:1px solid var(--rose);border-radius:6px;
  padding:16px 20px;margin-bottom:24px;font-size:14px;color:var(--heading);
}
.fehler ul{margin:8px 0 0;padding-left:18px;list-style:disc}

/* -------------------------------------------------------------------
   18. Einblend-Animation — fadeInUp 1s, gestaffelt 80ms
   Der Hero ist bewusst ausgenommen.
   ------------------------------------------------------------------- */
html.js-anim .anim{opacity:0;transform:translateY(28px)}
html.js-anim .anim.is-drin{
  opacity:1;transform:none;
  transition:opacity 1s var(--ease),transform 1s var(--ease);
  transition-delay:var(--verzug,0ms);
}
/* Rückfallebene: ohne Übergang einblenden. Ein Übergang, der aus welchem
   Grund auch immer nicht anläuft, würde den Inhalt sonst unsichtbar lassen. */
html.js-anim .anim.sofort{opacity:1;transform:none;transition:none}

/* ===================================================================
   18b. Unterseite Trauringe
   Eigener Abschnitt, damit die Startseite unberührt bleibt. Alle
   Klassen mit tr- vorangestellt.
   =================================================================== */
.tr-kopf{padding:34px var(--rand) 26px;text-align:center;max-width:940px;margin-inline:auto}
.tr-h1{font-size:clamp(28px,3.1vw,44px);line-height:1.22;margin:0}
.tr-einleitung{font-size:15.5px;line-height:25px;margin:18px auto 0;max-width:var(--zeile)}

/* --- Hero: 72/28 nebeneinander, 8px Lücke ------------------------- */
.tr-hero{
  display:grid;grid-template-columns:72% 28%;gap:8px;
  height:clamp(480px,62vh,720px);
  padding:0 var(--rand);max-width:var(--deckel);margin-inline:auto;
}
.tr-hero figure{position:relative;margin:0;overflow:hidden;height:100%}
.tr-hero img{width:100%;height:100%;object-fit:cover;display:block}

/* Weiße Pille unten links. 44px Mindesthöhe für Fingerbedienung. */
.tr-hero__knopf{
  position:absolute;left:24px;bottom:24px;
  display:inline-flex;align-items:center;gap:10px;min-height:44px;
  padding:13px 26px;border-radius:999px;
  background:var(--weiss);color:var(--heading);
  font-family:'Inter',sans-serif;font-size:14px;
  box-shadow:0 6px 20px -8px rgba(28,28,28,.34);
  transition:transform var(--t-normal) var(--ease),
             box-shadow var(--t-normal) var(--ease),
             color var(--t-normal) linear;
}
.tr-hero__knopf:hover,.tr-hero__knopf:focus-visible{
  transform:translateY(-3px);color:var(--rose);
  box-shadow:0 12px 26px -8px rgba(28,28,28,.40);
}
/* Beschriftung unten rechts. Der Verlauf sichert den Kontrast auf
   hellen Bildstellen — ohne ihn steht weiße Schrift auf Haut. */
.tr-hero__schmal::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:52%;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(28,28,28,0) 0%,rgba(28,28,28,.62) 100%);
}
.tr-hero__label{
  position:absolute;right:24px;bottom:24px;z-index:1;
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  min-height:44px;justify-content:flex-end;color:var(--weiss);
  text-shadow:0 1px 8px rgba(28,28,28,.45);
}
.tr-hero__label-gross{font-family:'Marcellus',Georgia,serif;font-size:22px;line-height:27px}
.tr-hero__label-klein{
  font-family:'Inter',sans-serif;font-size:13px;line-height:19px;
  transition:color var(--t-normal) linear;
}
.tr-hero__label:hover .tr-hero__label-klein,
.tr-hero__label:focus-visible .tr-hero__label-klein{color:var(--rose)}
.tr-pfeil{display:inline-block;transition:transform var(--t-normal) var(--ease)}
.tr-hero__knopf:hover .tr-pfeil,.tr-hero__label:hover .tr-pfeil{transform:translate(3px,-3px)}

.tr-bildunterschrift{
  text-align:center;font-size:13.5px;line-height:22px;color:var(--text);
  margin:18px auto 0;max-width:var(--zeile);padding:0 var(--rand);
  box-sizing:content-box;   /* --zeile meint die Textbreite, nicht mit Rand */
}

/* --- Zickzack: Text 40%, Bildpaar 55%, im zweiten Block gespiegelt --
   Kein gap: 40% + 55% lassen 5% übrig, und space-between macht daraus
   den Zwischenraum. Mit zusätzlichem gap liefe die Zeile über 100%.

   Die Spalten des Bildpaars stehen 15fr : 11fr — das ist 300 : 220 und
   ergibt zusammen mit aspect-ratio 4/5 genau die vorgegebenen
   Seitenverhältnisse.

   36% : 58% statt vorher 42% : 52%: der breitere Bereich soll den
   Bildern zugutekommen. Die Textspalte bleibt dadurch fast gleich breit
   (455px statt 466px), der Bildblock wächst von 577px auf 733px. */
.tr-block{
  /* Der Bildblock ist jetzt so breit, wie die Höhengrenze zulässt (566px,
     siehe .tr-block__bilder) — deshalb `auto` statt eines Prozentwerts.
     Die Textspalte nimmt den Rest; minmax(0,…) verhindert, dass ein
     langes Wort sie über ihren Anteil hinaus aufbläht. */
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:72px;
  align-items:center;          /* Text mittig zum Bildblock, nicht oben */
  margin-top:var(--luft-l);padding:0 var(--tr-rand);
  /* Schmaler als die volle Fensterbreite: sonst stünden Text und Bilder
     rund 300px auseinander und der Block fiele auseinander. */
  max-width:var(--tr-deckel);margin-inline:auto;
}
.tr-block--gespiegelt{grid-template-columns:auto minmax(0,1fr)}
.tr-block--gespiegelt .tr-block__text{grid-column:2;grid-row:1}
.tr-block--gespiegelt .tr-block__bilder{grid-column:1;grid-row:1}

.tr-block__text h2{font-size:clamp(24px,2.1vw,30px);line-height:1.3;margin:0 0 20px}
.tr-block__text p{font-size:15.5px;line-height:25px;margin:0 0 16px;max-width:52ch}

.tr-block__bilder{
  display:grid;grid-template-columns:15fr 11fr;gap:20px;
  align-items:start;
  /* Höhengrenze 420px, umgerechnet auf die Breite: Bei 3:4 ist das
     große Bild 315px breit (315 x 4/3 = 420). Mit 15fr : 11fr wird das
     kleine 231px breit, dazu 20px Lücke — zusammen 566px. Die Grenze
     steht bewusst hier als Breite und nicht als max-height am Bild:
     max-height würde das Seitenverhältnis überschreiben und den
     Ausschnitt beschneiden, statt den Rahmen kleiner zu machen.

     width, NICHT nur max-width: justify-self macht den Kasten
     schrumpfend, und ohne definite Breite kollabieren die fr-Spalten
     auf die Inhaltsbreite der noch nicht geladenen Bilder — dann sind
     die Bilder 0px breit. */
  width:min(566px,100%);
}
.tr-block--gespiegelt .tr-block__bilder{
  grid-template-columns:11fr 15fr;   /* großes Bild rechts */
}
.tr-block__bilder img{
  width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block;
  border-radius:var(--radius-bild);
  /* Die Aufnahmen sind selbst 3:4 (1013x1350), im Rahmen wird also
     nichts beschnitten — Hand, Ring und Kopfhaltung bleiben so, wie
     fotografiert. object-position deshalb bewusst mittig. */
  object-position:center;
}

/* Einblenden beim Scrollen. Der Kasten selbst bewegt sich nicht — sonst
   käme das Paar als Klotz. Stattdessen kommen die beiden Aufnahmen
   einzeln, die zweite 150ms später. Gleiche Dauer und Kurve wie auf der
   Startseite. */
html.js-anim .tr-block__bilder.anim{opacity:1;transform:none}
html.js-anim .tr-block__bilder img{
  opacity:0;transform:translateY(30px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}
html.js-anim .tr-block__bilder.is-drin img{opacity:1;transform:none}
html.js-anim .tr-block__bilder.is-drin img:nth-child(2){transition-delay:150ms}
/* Rückfallebene wie bei .anim: läuft der Übergang nicht an, sofort zeigen */
html.js-anim .tr-block__bilder.sofort img{opacity:1;transform:none;transition:none}
/* Das jeweils kleinere Bild sitzt 40px tiefer */
.tr-block__bilder img:nth-child(2){margin-top:40px}
.tr-block--gespiegelt .tr-block__bilder img:nth-child(2){margin-top:0}
.tr-block--gespiegelt .tr-block__bilder img:nth-child(1){margin-top:40px}

/* --- Beratungsablauf: vier Schritte nebeneinander ------------------ */
.tr-ablauf{margin:var(--luft-l) auto 0;padding:0 var(--tr-rand);max-width:var(--tr-deckel)}
.tr-ablauf__kopf{max-width:640px;margin:0 0 var(--luft-inhalt)}
.tr-ablauf__kopf h2{font-size:clamp(26px,2.4vw,34px);line-height:1.24;margin:0 0 var(--luft-s)}
.tr-ablauf__kopf p{max-width:var(--zeile)}
.tr-ablauf__kopf p{font-size:15.5px;line-height:25px;margin:0}

.tr-stufen{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;list-style:none;margin:0;padding:0}
.tr-stufe{position:relative;padding-top:26px}
/* Waagerechte Linie mit Punkt — verbindet die Schritte optisch */
.tr-stufe__linie{
  position:absolute;top:0;left:0;right:0;height:1px;background:var(--linie);
}
.tr-stufe__linie::after{
  content:'';position:absolute;left:0;top:-2.5px;
  width:6px;height:6px;border-radius:50%;background:var(--rose);
}
/* Ohne Bild trägt die Ziffer den Blick — deshalb größer und mit mehr
   Luft zur Überschrift. Der Abschnitt soll ruhig wirken. */
.tr-stufe__ziffer{
  display:block;font-family:'Marcellus',Georgia,serif;
  font-size:56px;line-height:1;color:rgba(28,28,28,.26);margin:0 0 20px;
}
.tr-stufe h3{font-size:19px;line-height:26px;margin:0 0 12px;color:var(--heading)}
.tr-stufe p{font-size:14.5px;line-height:23px;margin:0;max-width:var(--zeile)}
.tr-ablauf__fuss{margin-top:44px}

/* --- Materialien im Vergleich -------------------------------------- */
.tr-material{margin:var(--luft-l) auto 0;padding:0 var(--tr-rand);max-width:var(--tr-deckel)}

/* Links fester Textblock, rechts das Band.
   40fr : 60fr statt 40% : 60% — mit festem gap von 56px würden feste
   Prozentwerte zusammen über 100% laufen. Die fr-Einheiten teilen den
   Rest NACH dem Abstand, das Verhältnis 40:60 bleibt exakt erhalten. */
.tr-material__raster{
  display:grid;grid-template-columns:40fr 60fr;gap:56px;
  align-items:center;          /* linke Spalte mittig zum Band */
}
.tr-material__kopf h2{font-size:clamp(26px,2.4vw,34px);line-height:1.24;margin:0 0 var(--luft-s)}
.tr-material__kopf p{font-size:15.5px;line-height:25px;margin:0;max-width:var(--zeile)}

/* Rechte Spalte: Schaltflächenzeile über dem Band. */
.tr-material__rechts{min-width:0}

/* Benannte Navigation. Ohne Skript kann sie nichts bewirken — das Band
   selbst bleibt aber nativ scrollbar, deshalb ist das Ausblenden hier
   eine Frage der Fähigkeit (.js), nicht der Animation. */
.tr-material__nav{display:none;justify-content:space-between;align-items:center;gap:16px}
.js .tr-material__nav{display:flex}

.tr-matknopf{
  display:flex;align-items:center;gap:12px;
  min-height:44px;padding:9px 16px;
  border:1px solid rgba(28,28,28,.18);border-radius:2px;
  background:none;text-align:left;cursor:pointer;
  transition:border-color var(--t-normal) linear,
             background-color var(--t-normal) linear;
}
.tr-matknopf__text{display:flex;flex-direction:column;line-height:1}
.tr-matknopf__wort{font-size:12px;letter-spacing:.04em;color:var(--text-dunkel)}
.tr-matknopf__wort:not(:empty){margin-bottom:4px}
.tr-matknopf__name{font-size:17px;color:var(--heading)}
.tr-matknopf__pfeil{
  font-size:15px;color:var(--heading);
  transition:transform var(--t-normal) linear;
}
.tr-matknopf:hover:not([disabled]),
.tr-matknopf:focus-visible:not([disabled]){
  border-color:rgba(28,28,28,.55);background:rgba(28,28,28,.035);
}
/* Der Pfeil geht in seine eigene Richtung — beim Zurück-Knopf nach
   links, sonst liefe er dem Text davon. */
.tr-matknopf:hover:not([disabled]) .tr-matknopf__pfeil{transform:translateX(4px)}
.tr-matknopf:hover:not([disabled]) .tr-matknopf__pfeil--links{transform:translateX(-4px)}
.tr-matknopf[disabled]{opacity:.38;cursor:default}
/* Am Ende der Reihe steht kein Ziel mehr — dann auch kein Pfeil. */
.tr-matknopf.ist-ende .tr-matknopf__pfeil{display:none}

/* Das Band. Zwei Karten sichtbar, die dritte zu 8% angeschnitten:
   Breite = (100% - 2 x Lücke) / 2.08 — dann bleibt genau 0.08 einer
   Karte übrig. Ohne diesen Rest sähe es aus, als wäre hier Schluss.
   Unten 30px Luft, weil die Karten beim Einblenden 24px von unten
   kommen und ein Scrollbereich sie sonst abschneidet. */
.tr-materialien{
  --kartenluecke:20px;
  /* Luft = Innenabstand oben UND unten, außen wieder abgezogen: Ein
     Scrollbereich schneidet senkrecht ab, die Karten kommen beim
     Einblenden aber 24px von unten. Die 24px Abstand zur Schaltflächen-
     zeile stehen deshalb NICHT als gap im Elter — der würde gegen die
     negativen Ränder gerechnet und ginge daneben. Stattdessen hier:
     oben -30 + 24, unten -30. */
  --luft:30px;
  --abstand-oben:24px;
  display:flex;gap:var(--kartenluecke);list-style:none;
  margin:calc(var(--abstand-oben) - var(--luft)) 0 calc(var(--luft) * -1);
  padding:var(--luft) 0;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;
}
.tr-materialien::-webkit-scrollbar{display:none}
.tr-karte{
  flex:0 0 calc((100% - 2 * var(--kartenluecke)) / 2.08);
  scroll-snap-align:start;
  display:flex;flex-direction:column;
}
.tr-karte__bild{overflow:hidden;margin:0 0 18px}
.tr-karte__bild img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block}
.tr-karte h3{font-size:21px;line-height:28px;margin:0 0 10px;color:var(--heading)}
.tr-karte p{font-size:14.5px;line-height:23px;margin:0}

/* --- Galerie mit Vergrößerung -------------------------------------- */
.tr-galerie{margin:var(--luft-l) auto 0;padding:0 var(--tr-rand);max-width:var(--tr-deckel)}
.tr-galerie__kopf{max-width:640px;margin:0 0 var(--luft-inhalt)}
.tr-galerie__kopf h2{font-size:clamp(24px,2.1vw,30px);line-height:1.26;margin:0 0 var(--luft-s)}
.tr-galerie__kopf p{font-size:15.5px;line-height:25px;margin:0;max-width:var(--zeile)}
.tr-galerie__raster{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;list-style:none;margin:0;padding:0}
.tr-lupe{
  display:block;overflow:hidden;cursor:zoom-in;
  background:none;border:0;padding:0;width:100%;
}
.tr-lupe img{
  width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block;
  transform:scale(1);transition:transform var(--t-zoom) var(--ease);
}
.tr-lupe:hover img,.tr-lupe:focus-visible img{transform:scale(1.05)}

.tr-lupe__fenster{
  border:0;padding:0;background:none;max-width:92vw;max-height:92vh;
}
.tr-lupe__fenster::backdrop{background:rgba(28,28,28,.86)}
.tr-lupe__fenster img{display:block;max-width:100%;max-height:92vh;width:auto;height:auto}
.tr-lupe__zu{
  position:absolute;top:8px;right:8px;
  width:44px;height:44px;border-radius:50%;
  background:var(--weiss);color:var(--heading);
  font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(28,28,28,.24);
}
.tr-lupe__zu:hover,.tr-lupe__zu:focus-visible{background:var(--rose);color:var(--weiss)}

/* --- Region --------------------------------------------------------- */
/* --- Region, mittig ------------------------------------------------
   Nachgemessen liefen hier 94 Zeichen je Zeile, nicht die im Kommentar
   behaupteten 75 — der Wert stammte aus einer Schätzung, nicht aus einer
   Messung. Jetzt --zeile (57ch = rund 75 Zeichen). Zentrierter Text
   wird darüber hinaus schnell mühsam zu lesen. */
.tr-region{margin:var(--luft-l) auto 0;padding:0 var(--tr-rand);max-width:var(--tr-deckel)}
.tr-region__inner{max-width:var(--zeile);margin-inline:auto;text-align:center}
.tr-region h2{font-size:clamp(22px,1.9vw,27px);line-height:1.3;margin:0 0 16px}
.tr-region p{font-size:15.5px;line-height:26px;margin:0 0 14px}

/* --- Einblenden beim Scrollen --------------------------------------
   Ein einziger Beobachter setzt .ist-sichtbar auf den Abschnitt; die
   Staffelung steht hier im Stylesheet, damit das Skript klein bleibt.
   Bewegt werden ausschließlich transform und opacity. */
html.js-anim [data-stufen] .tr-stufe,
html.js-anim [data-stufen] .tr-karte,
html.js-anim [data-stufen] .tr-galerie__raster > li{
  opacity:0;transform:translateY(24px);
  transition:opacity 600ms cubic-bezier(0.22,1,0.36,1),
             transform 600ms cubic-bezier(0.22,1,0.36,1);
}
html.js-anim [data-stufen].ist-sichtbar .tr-stufe,
html.js-anim [data-stufen].ist-sichtbar .tr-karte,
html.js-anim [data-stufen].ist-sichtbar .tr-galerie__raster > li{opacity:1;transform:none}
html.js-anim [data-stufen].ist-sichtbar .tr-stufe:nth-child(2){transition-delay:120ms}
html.js-anim [data-stufen].ist-sichtbar .tr-stufe:nth-child(3){transition-delay:240ms}
html.js-anim [data-stufen].ist-sichtbar .tr-stufe:nth-child(4){transition-delay:360ms}
html.js-anim [data-stufen].ist-sichtbar .tr-karte:nth-child(2){transition-delay:80ms}
html.js-anim [data-stufen].ist-sichtbar .tr-karte:nth-child(3){transition-delay:160ms}
html.js-anim [data-stufen].ist-sichtbar .tr-karte:nth-child(4){transition-delay:240ms}
html.js-anim [data-stufen].ist-sichtbar .tr-karte:nth-child(5){transition-delay:320ms}
html.js-anim [data-stufen].ist-sichtbar .tr-galerie__raster > li:nth-child(2){transition-delay:80ms}
html.js-anim [data-stufen].ist-sichtbar .tr-galerie__raster > li:nth-child(3){transition-delay:160ms}
html.js-anim [data-stufen].ist-sichtbar .tr-galerie__raster > li:nth-child(4){transition-delay:240ms}
html.js-anim [data-stufen].ist-sichtbar .tr-galerie__raster > li:nth-child(5){transition-delay:320ms}
html.js-anim [data-stufen].ist-sichtbar .tr-galerie__raster > li:nth-child(6){transition-delay:400ms}
html.js-anim [data-stufen].ist-sichtbar .tr-galerie__raster > li:nth-child(7){transition-delay:480ms}
html.js-anim [data-stufen].ist-sichtbar .tr-galerie__raster > li:nth-child(8){transition-delay:560ms}
html.js-anim [data-stufen].ist-sichtbar .tr-galerie__raster > li:nth-child(9){transition-delay:640ms}
html.js-anim [data-stufen].ist-sichtbar .tr-galerie__raster > li:nth-child(10){transition-delay:640ms}
html.js-anim [data-stufen].ist-sichtbar .tr-galerie__raster > li:nth-child(11){transition-delay:640ms}
html.js-anim [data-stufen].ist-sichtbar .tr-galerie__raster > li:nth-child(12){transition-delay:640ms}
html.js-anim [data-stufen].ist-sichtbar .tr-galerie__raster > li:nth-child(13){transition-delay:640ms}
/* Die Verbindungslinie zeichnet sich von links nach rechts */
html.js-anim .tr-stufe__linie{transform:scaleX(0);transform-origin:left center;
  transition:transform 900ms cubic-bezier(0.22,1,0.36,1)}
html.js-anim .ist-sichtbar .tr-stufe__linie{transform:scaleX(1)}
/* Auf dem Handy läuft sie senkrecht — dann von oben nach unten */
@media (max-width:767px){

  html.js-anim .tr-stufe__linie{transform:scaleY(0);transform-origin:center top}
  html.js-anim .ist-sichtbar .tr-stufe__linie{transform:scaleY(1)}
}
/* -------------------------------------------------------------------
   Unbedingtes Sicherheitsnetz
   Das Skript setzt nach 2,5 Sekunden anim-fertig auf <html>. Ab dann
   ist alles sichtbar — unabhängig davon, ob ein Beobachter gemeldet
   hat oder nicht. Das ist die letzte Instanz gegen leere Bereiche.
   ------------------------------------------------------------------- */
html.anim-fertig .anim,
html.anim-fertig .moment__karte,
html.anim-fertig .moment__bild img,
html.anim-fertig .tr-block__bilder img,
html.anim-fertig [data-stufen] .tr-stufe,
html.anim-fertig [data-stufen] .tr-karte,
html.anim-fertig [data-stufen] .tr-galerie__raster > li,
html.anim-fertig .vr-wege li,
html.anim-fertig .vr-c__block,
html.anim-fertig .vr-c__stein,
html.anim-fertig .schmuck--buehne .schmuckbild{
  opacity:1!important;transform:none!important;
  /* ohne Übergang: ein Sicherheitsnetz soll zeigen, nicht animieren.
     Sonst bliebe der Wert am Startpunkt hängen, falls Übergänge aus
     irgendeinem Grund nicht anlaufen. */
  transition:none!important;
}
html.anim-fertig .tr-stufe__linie{transform:scaleX(1)!important;transition:none!important}
html.anim-fertig .vr-wege__ziffer{opacity:.2!important;transition:none!important}
html.anim-fertig .vr-wege__wichtig .vr-wege__ziffer{opacity:1!important}
html.anim-fertig .vertrauen__punkt::before{transform:scaleY(1)!important;transition:none!important}
@media (max-width:767px){
  html.anim-fertig .tr-stufe__linie{transform:scaleY(1)!important}
}

/* Rückfallebene: springt der Beobachter nicht an, ist alles sichtbar */
html.js-anim [data-stufen].sofort .tr-stufe,
html.js-anim [data-stufen].sofort .tr-karte,
html.js-anim [data-stufen].sofort .tr-galerie__raster > li{opacity:1;transform:none;transition:none}
html.js-anim [data-stufen].sofort .tr-stufe__linie{transform:scaleX(1);transition:none}

/* --- Aufruf: warmes Beige statt Vollflächenblau --------------------
   Das kräftige Blau brach die zurückhaltende Farbwelt der Seite. Jetzt
   trägt der Block einen wärmeren Ton als der Seitenhintergrund, und das
   Markenblau bleibt der Schaltfläche vorbehalten — dem einzigen
   farbigen Element weit und breit.
   Gemessene Kontraste: Überschrift 13,54:1, Fließtext 7,04:1,
   Weiß auf Markenblau 13,09:1. */
.tr-aufruf{
  background:var(--beige);color:var(--heading);
  margin-block:var(--luft-xl);padding:64px var(--rand) 68px;
}
.tr-aufruf__inner{max-width:900px;margin-inline:auto;text-align:center}
.tr-aufruf h2{color:var(--heading);font-size:clamp(21px,2vw,28px);line-height:1.34;margin:0 0 22px}
.tr-aufruf p{
  font-size:15.5px;line-height:25px;margin:0 auto 16px;
  color:var(--text-dunkel);max-width:var(--zeile);
}
.btn--marke{background:var(--navy);color:var(--weiss);margin-top:14px}
.btn--marke:hover,.btn--marke:focus-visible{background:var(--heading);color:var(--weiss)}

/* --- Verweise: zwei Karten statt Fließtext -------------------------
   Das sind die beiden wichtigsten internen Verweise der Seite; als
   Satz im Fließtext gingen sie unter. */
.tr-weiter{margin:var(--luft-l) auto 0;padding:0 var(--tr-rand);max-width:var(--tr-deckel)}
.tr-weiter__karten{
  display:grid;grid-template-columns:1fr 1fr;gap:32px;list-style:none;margin:0;padding:0;
}
.tr-weiterkarte{
  background:var(--weiss);border:1px solid rgba(28,28,28,.12);border-radius:4px;
  overflow:hidden;                 /* Rundung greift auch am Bild */
  transition:transform var(--t-normal) var(--ease),
             box-shadow var(--t-normal) var(--ease);
}
.tr-weiterkarte:hover,.tr-weiterkarte:focus-within{
  transform:translateY(-2px);
  box-shadow:0 12px 30px -14px rgba(28,28,28,.34);
}
/* Die Fläche ist der Verweis, nicht nur die Schaltfläche. */
.tr-weiterkarte__flaeche{display:flex;flex-direction:column;height:100%;color:inherit}
/* Der Fokusrahmen muss nach INNEN zeichnen: die Karte schneidet mit
   overflow:hidden ab, der globale Versatz von 3px läge außerhalb und
   wäre unsichtbar. */
.tr-weiterkarte__flaeche:focus-visible{outline-offset:-4px;border-radius:4px}
.tr-weiterkarte__bild{display:block;overflow:hidden}
.tr-weiterkarte__bild img{
  width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;
  transform:scale(1);
  transition:transform 500ms var(--ease);
}
.tr-weiterkarte:hover .tr-weiterkarte__bild img,
.tr-weiterkarte:focus-within .tr-weiterkarte__bild img{transform:scale(1.03)}

.tr-weiterkarte__text{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:32px;flex:1;
}
/* Kein opacity auf Kleinschrift: 11px bei 66% ergaben nachgemessen
   2,81:1 und lagen damit unter der Grenze von 4,5:1. Jetzt volle
   Deckkraft in --text-dunkel, gemessen 8,59:1 auf Weiß. */
.tr-weiterkarte__label{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dunkel);margin-bottom:10px;
}
.tr-weiterkarte h3{font-size:23px;line-height:30px;margin:0 0 12px;color:var(--heading)}
/* display:block, sonst greift max-width an einem span nicht. */
.tr-weiterkarte__satz{display:block;font-size:15.5px;line-height:25px;margin:0 0 24px;max-width:42ch}
.tr-weiterkarte .btn{margin-top:auto}
.btn--rand{background:none;color:var(--heading);border:1px solid rgba(28,28,28,.20)}
.btn--rand:hover,.btn--rand:focus-visible{background:var(--heading);color:var(--weiss);border-color:var(--heading)}

/* --- Bewertungsblock auf den Themenseiten ausrichten ----------------
   Das Band bleibt randlos (die Karten sollen seitlich hinauslaufen),
   aber sein Inhalt beginnt an derselben Kante wie alle Überschriften.
   Die Rechnung ist dieselbe wie bei `max-width + margin-inline:auto`:
   halber Überschuss plus Rand. max() hält den Wert auf schmalen
   Fenstern beim einfachen Rand. */
/* Der Bewertungsblock bringt für die Startseite einen eigenen Innenabstand
   mit (44/64px). Auf den Themenseiten regelt den Abstand die Luft-Skala —
   sonst stünden vor dem Block 140+44 und dahinter 140+64px. */
body.themenseite .stimmen{padding-block:0}
body.themenseite .stimmen__kopf{
  max-width:var(--tr-deckel);
  padding-inline:var(--tr-rand);
}
body.themenseite .stimmen__spur{
  padding-left:max(var(--tr-rand), calc((100% - var(--tr-deckel)) / 2 + var(--tr-rand)));
  padding-right:max(var(--tr-rand), calc((100% - var(--tr-deckel)) / 2 + var(--tr-rand)));
  scroll-padding-inline:max(var(--tr-rand), calc((100% - var(--tr-deckel)) / 2 + var(--tr-rand)));
}

/* ===================================================================
   Goldankauf — Hero mit Bildslider

   Weicht bewusst von den übrigen Seiten ab. Wer Gold verkaufen will, ist
   misstrauisch: Die Frage lautet nicht „was gefällt mir", sondern „werde
   ich hier über den Tisch gezogen". Links steht deshalb die Zusage,
   rechts eine echte Bewertung im Bild — Vertrauen vor Stimmung.
   =================================================================== */
.ga-hero{
  display:grid;grid-template-columns:45fr 55fr;gap:64px;align-items:center;
  max-width:var(--tr-deckel);margin:var(--luft-m) auto 0;
  padding:0 var(--tr-rand);
}

/* --- Linke Spalte --------------------------------------------------- */
.ga-kennzeichen{
  display:inline-flex;align-items:center;gap:10px;
  margin:0 0 32px;padding:9px 18px;
  background:var(--creme-dunkel);border-radius:var(--radius-pille);
  font-size:14px;line-height:1.4;color:var(--text-dunkel);
}
.ga-kennzeichen__punkt{
  width:8px;height:8px;border-radius:50%;background:var(--navy);flex:none;
}
.ga-h1{
  font-family:'Marcellus',Georgia,serif;
  font-size:52px;line-height:1.12;margin:0 0 24px;color:var(--heading);
  text-align:left;
}
.ga-vorspann{
  font-size:18px;line-height:1.65;margin:0 0 32px;max-width:44ch;
}
.ga-knoepfe{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin:0 0 32px;
}
.ga-zweitlink{
  font-size:16px;color:var(--heading);min-height:44px;
  display:inline-flex;align-items:center;
  /* Unterstreichung wächst beim Überfahren, kein Farbwechsel. */
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 calc(50% + 12px);
  background-size:100% 1px;
  transition:background-size .3s var(--ease);
}
.ga-zweitlink:hover,.ga-zweitlink:focus-visible{background-size:0 1px}
.ga-vertrauen{
  display:inline-flex;align-items:center;gap:12px;min-height:44px;
  font-size:14px;color:var(--text-dunkel);
}
.ga-vertrauen strong{color:var(--heading);font-weight:400}
.ga-vertrauen:hover strong{color:var(--rose)}
.ga-sterne{color:#E8B44A;letter-spacing:2px;font-size:15px}

/* --- Rechte Spalte: die randlos auslaufende Bildkarte -----------------
   Die Karte durchbricht das Raster nach rechts und endet erst am
   Fensterrand. Der Weg dorthin ist ein negativer rechter Aussenabstand in
   der Breite des rechten Seitenrandes:

     bis 1360px Fensterbreite   = der Innenabstand des Deckels
     darüber                    = zusätzlich die halbe Überbreite

   `max()` fasst beide Fälle zusammen; unterhalb von 1360px wird der zweite
   Ausdruck kleiner als der erste und fällt damit von selbst weg. */
.ga-hero-aussen{overflow-x:clip}
.ga-hero__bild{display:flex;flex-direction:column;align-items:stretch;min-width:0}
.ga-slider{
  width:auto;
  margin-right:calc(-1 * max(var(--tr-rand),
                    (100vw - var(--tr-deckel)) / 2 + var(--tr-rand)));
}
/* Bezugsrahmen für die Bewertungskarte. Nicht die Bildkarte selbst: die
   schneidet ab, und auf Mobil steht die Bewertung unter dem Bild. */
.ga-buehne{position:relative}
/* 4:3 — dasselbe Verhältnis, in dem die Bilddateien zugeschnitten sind.
   Damit nimmt `object-fit: cover` im Browser nichts mehr weg: Zu sehen ist
   genau der Ausschnitt, der beim Erzeugen der Dateien gewählt wurde. */
.ga-slider__karte{
  position:relative;aspect-ratio:4/3;
  border-radius:24px 0 0 24px;overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,.06);
  background:var(--creme-dunkel);
}
.ga-bild{
  position:absolute;inset:0;display:block;opacity:0;
}
.ga-bild img{width:100%;height:100%;object-fit:cover;display:block}
/* Ohne Skript bleibt das erste Bild stehen. Die Klasse `laeuft` setzt das
   Skript erst, wenn es übernommen hat — dadurch entsteht auch bei spät
   ausgeführtem Skript keine leere Fläche. */
.ga-bild:first-child{opacity:1}
.js .ga-slider.laeuft .ga-bild{transition:opacity .9s ease-in-out}
.js .ga-slider.laeuft .ga-bild:first-child{opacity:0}
.js .ga-slider.laeuft .ga-bild.ist-da{opacity:1}

/* --- Blätterpfeile ---------------------------------------------------
   Dauerhaft sichtbar, nicht erst beim Überfahren: Auf Berührungsgeräten
   gibt es kein Überfahren, und ein Hinweis, den man erst findet, wenn man
   ihn schon gefunden hat, ist keiner. */
.ga-pfeil{
  position:absolute;top:50%;margin-top:-24px;
  width:48px;height:48px;padding:0;border:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.85);color:var(--heading);cursor:pointer;
  box-shadow:0 2px 12px rgba(28,28,28,.18);
  transition:background-color var(--t-normal) var(--ease);
}
.ga-pfeil--zurueck{left:24px}
.ga-pfeil--vor{right:24px}
.ga-pfeil__zeichen{
  font-size:19px;line-height:1;display:block;
  transition:transform var(--t-normal) var(--ease);
}
.ga-pfeil:hover,.ga-pfeil:focus-visible{background:rgba(255,255,255,1)}
.ga-pfeil--zurueck:hover .ga-pfeil__zeichen{transform:translateX(-2px)}
.ga-pfeil--vor:hover .ga-pfeil__zeichen{transform:translateX(2px)}
/* Ohne Skript blättert nichts — dann gehören die Pfeile auch nicht hin. */
.ga-pfeil{display:none}
.js .ga-pfeil{display:flex}

/* --- Die schwebende Bewertungskarte ----------------------------------
   Alle fünf liegen übereinander im selben Kasten. Der Kasten trägt die
   Höhe, damit beim Wechsel nichts springt. */
.ga-stimmen{
  position:absolute;left:24px;bottom:24px;width:300px;max-width:calc(100% - 48px);
}
.ga-stimme{
  margin:0;padding:24px;
  background:var(--weiss);border-radius:16px;
  box-shadow:0 6px 24px rgba(28,28,28,.14);
}
/* Ohne Skript steht die erste Bewertung, die übrigen sind ausgeblendet. */
.ga-stimme + .ga-stimme{display:none}
.js .ga-stimmen{display:grid}
.js .ga-stimme{grid-area:1/1;display:block;opacity:0;transform:translateY(8px)}
.js .ga-stimme:first-child{opacity:1;transform:none}
.js .ga-slider.laeuft .ga-stimme{
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  pointer-events:none;
}
.js .ga-slider.laeuft .ga-stimme:first-child{opacity:0;transform:translateY(8px)}
.js .ga-slider.laeuft .ga-stimme.ist-da{opacity:1;transform:none;pointer-events:auto}
.ga-stimme__sterne{display:block;color:#E8B44A;letter-spacing:2px;font-size:14px;margin-bottom:10px}
/* Drei Zeilen à 22px sind reserviert, auch wenn das Zitat kürzer ist.
   Sonst zuckt die Karte bei jedem Wechsel. */
.ga-stimme blockquote{margin:0 0 14px;min-height:66px}
.ga-stimme blockquote p{font-size:14.5px;line-height:22px;margin:0;color:var(--heading)}
.ga-stimme figcaption{display:flex;flex-direction:column;gap:2px}
.ga-stimme__name{font-size:14px;color:var(--heading)}
.ga-stimme__quelle{font-size:12px;color:var(--text-dunkel)}

/* --- Punktanzeige ----------------------------------------------------
   Die Trefferfläche ist 44x44 gross, sichtbar ist nur der Punkt darin —
   deshalb padding statt eines grösseren Punktes. */
.ga-punkte{display:none;justify-content:center;margin-top:20px}
.js .ga-punkte{display:flex}
.ga-punkt{
  width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.ga-punkt::before{
  content:'';width:8px;height:8px;border-radius:50%;
  background:rgba(28,28,28,.24);
  transition:background-color var(--t-normal) linear;
}
.ga-punkt:hover::before{background:rgba(28,28,28,.45)}
.ga-punkt[aria-current="true"]::before{background:var(--heading)}

/* ===================================================================
   Verlobungsringe — eigene Bausteine

   Diese Seite folgt bewusst NICHT dem Aufbau der Trauringseite. Ein
   Verlobungsring wird von einer Person allein gekauft, ohne Anprobe,
   ohne bekannte Ringgröße und meist aufgeregt. Ein durchgeplantes
   Vier-Schritte-Schema wäre hier die falsche Erzählung.
   Übernommen sind nur Hero, Verweis-Karten, Bewertungsblock und das
   Aufklappmuster der Fragen — alles andere entsteht hier neu.
   =================================================================== */

/* --- Einstieg: drei Sätze, zentriert, direkt unter dem Hero -------- */
.vr-einstieg{
  max-width:var(--tr-deckel);margin:var(--luft-m) auto 0;
  padding:0 var(--tr-rand);text-align:center;
}
/* --zeile ist in ch angegeben und wächst deshalb mit der Schriftgröße
   mit — 55ch ergeben hier dieselben rund 75 Zeichen wie im Fließtext. */
.vr-einstieg p{
  font-size:clamp(18px,1.7vw,21px);line-height:1.6;
  max-width:var(--zeile);margin:0 auto;color:var(--heading);
}

/* --- Die drei Sorgen: warm gefüllte Karten, kein Aufklappen -------
   Bewusst offen statt <details>: Wer diese Fragen hat, soll die Antwort
   sehen, ohne erst klicken zu müssen. */
.vr-sorgen{margin:var(--luft-l) auto 0;padding:0 var(--tr-rand);max-width:var(--tr-deckel)}
.vr-sorgen__kopf{max-width:var(--zeile);margin:0 0 var(--luft-inhalt)}
.vr-sorgen__kopf h2{font-size:clamp(26px,2.4vw,34px);line-height:1.24;margin:0 0 var(--luft-s)}
.vr-sorgen__kopf p{font-size:15.5px;line-height:25px;margin:0}
.vr-sorgen__karten{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  list-style:none;margin:0;padding:0;
}
.vr-sorge{
  background:var(--beige);border-radius:4px;padding:32px 30px 34px;
  display:flex;flex-direction:column;
}
.vr-sorge h3{
  font-size:21px;line-height:29px;margin:0 0 14px;color:var(--heading);
}
.vr-sorge p{font-size:15px;line-height:25px;margin:0 0 16px;color:var(--text-dunkel);max-width:var(--zeile)}
.vr-sorge__mehr{
  margin-top:auto;font-size:14.5px;color:var(--heading);
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  border-bottom:1px solid rgba(28,28,28,.28);align-self:flex-start;
}
.vr-sorge__mehr:hover,.vr-sorge__mehr:focus-visible{color:var(--rose);border-color:var(--rose)}
.vr-sorge__mehr:hover .btn__pfeil{transform:translateX(4px)}

/* --- Preisskala: waagerecht, drei Bereiche ------------------------
   Der Balken ist reine Dekoration und für Vorlesewerkzeuge versteckt.
   Die Aussage steckt in der Liste darunter, die auch ohne Grafik
   vollständig lesbar ist. */
.vr-preis{margin:var(--luft-l) auto 0;padding:0 var(--tr-rand);max-width:var(--tr-deckel)}
.vr-preis__kopf{max-width:60ch;margin:0 0 var(--luft-m)}
/* Redaktioneller Kopf statt Überschrift plus Zeile: Sektionsmarke, dann
   die Frage groß gesetzt. Dieselbe Marke wie im Ratgeber. */
.vr-preis__kopf h2{
  font-family:'Marcellus',Georgia,serif;
  font-size:clamp(34px,4.2vw,58px);line-height:1.05;letter-spacing:-.015em;
  margin:0 0 var(--luft-s);text-wrap:balance;
}
.vr-preis__vorspann{font-size:17px;line-height:1.7;margin:0;max-width:52ch}

.vr-skala__achse{
  position:relative;height:2px;background:rgba(28,28,28,.16);
  margin:0 0 14px;
}
.vr-skala__marke{
  position:absolute;top:-6px;width:1px;height:14px;background:rgba(28,28,28,.34);
}
.vr-skala__marke:nth-child(1){left:0}
.vr-skala__marke:nth-child(2){left:33.333%}
.vr-skala__marke:nth-child(3){left:66.666%}
.vr-skala__marke:nth-child(4){right:0}

/* Drei Schaltpunkte, je einer in der Mitte eines Bereichs. Die Fläche ist
   44x44 und damit fingertauglich; sichtbar ist nur der Punkt darin. */
/* Ohne Skript können die Punkte nichts bewirken — dann sind sie weg.
   Die Bereiche darunter stehen ohnehin vollständig da; das Hervorheben
   ist eine Zugabe, kein Zugang zum Inhalt. */
.vr-skala__punkt{display:none}
.js .vr-skala__punkt{
  display:block;position:absolute;top:50%;width:44px;height:44px;
  transform:translate(-50%,-50%);background:none;border:0;padding:0;
  cursor:pointer;
}
.vr-skala__punkt::before{
  content:'';position:absolute;left:50%;top:50%;
  width:6px;height:6px;border-radius:50%;background:var(--heading);
  transform:translate(-50%,-50%);
  /* 6px auf 10px als Massstab, nicht als Breite und Höhe: Ein Wechsel von
     width/height löst bei jedem Zwischenschritt ein neues Layout aus. */
  transition:transform var(--t-normal) var(--ease),
             background-color var(--t-normal) linear;
}
.vr-skala__punkt:hover::before,.vr-skala__punkt:focus-visible::before{
  transform:translate(-50%,-50%) scale(1.6667);
}
.vr-skala__punkt[aria-pressed="true"]::before{
  transform:translate(-50%,-50%) scale(1.6667);background:var(--rose);
}
.vr-skala__punkt:nth-of-type(1){left:16.667%}
.vr-skala__punkt:nth-of-type(2){left:50%}
.vr-skala__punkt:nth-of-type(3){left:83.333%}
.vr-bereich{transition:background-color .3s linear}
.vr-bereich.ist-gewaehlt{background:var(--beige)}
.vr-skala__enden{
  display:flex;justify-content:space-between;
  font-size:13px;letter-spacing:.06em;color:var(--text-dunkel);margin:0 0 30px;
}
.vr-skala__bereiche{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  list-style:none;margin:0;padding:0;
}
/* Haarlinie oben statt Trennstrich zwischen den Spalten: Drei senkrechte
   Linien schneiden den Abschnitt in Streifen und waren der Hauptgrund für
   die Unruhe. Eine waagerechte Linie je Bereich ordnet stattdessen. */
.vr-bereich{padding:20px 26px 0 0;border-top:1px solid var(--linie)}
.vr-bereich__index{
  display:block;font-size:12px;letter-spacing:.12em;color:var(--text);
  margin-bottom:14px;font-variant-numeric:tabular-nums;
}
.vr-bereich h3{
  font-family:'Marcellus',Georgia,serif;
  font-size:24px;line-height:1.2;margin:0 0 8px;color:var(--heading);
}
.vr-bereich__spanne{
  display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-dunkel);margin:0 0 12px;
}
.vr-bereich p{font-size:14.5px;line-height:24px;margin:0;max-width:var(--zeile)}
/* Zwölfspaltiges Raster: Text auf 1–6, Bildanker auf 8–12. Der Anker ist
   ein gestrecktes Rasterfeld, in dem das Bild klebt — ein sticky Element
   braucht einen Elter, der höher ist als es selbst, sonst hat es keinen
   Weg zum Kleben. Deshalb hier KEIN align-items:start. */
.vr-preis__raster{
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;
  margin-top:44px;
}
/* Bild links, Text rechts — umgedreht gegenüber vorher. Die Aufnahme
   zeigt drei Steingrößen und ist damit die Fortsetzung der Skala
   darüber; sie gehört an deren Anfang, nicht ans Ende des Textes. */
.vr-preis__text{grid-column:7 / span 6;max-width:64ch}
.vr-preis__text p{font-size:17px;line-height:1.75;margin:0 0 22px}
.vr-preis__text p:last-child{margin-bottom:0}
.vr-preis__weiter{font-size:15.5px!important;line-height:1.7!important;color:var(--text)}
.vr-preis__anker{grid-column:1 / span 5}
.vr-preis__ankerinner{position:sticky;top:120px}
.vr-preis__anker img{
  width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block;
  border-radius:var(--radius-bild);
}
.vr-preis__bildtext{
  font-size:13px;line-height:21px;color:var(--text-dunkel);
  margin:14px 0 0;max-width:var(--zeile);
}

/* Der zitierfähige Satz als eigener Moment im Satzbild.

   Vorher stand er als hervorgehobener Absatz mit 3px-Akzentlinie mitten
   im Fließtext. Damit liefen an derselben Stelle drei Systeme
   nebeneinander — Fließtext, fette Hervorhebungen und ein farbiger
   Balken. Genau das las sich unruhig. Jetzt trägt die Typografie die
   Betonung: gross, Marcellus, viel Luft davor und danach, keine Linie.
   Die fetten Hervorhebungen im umgebenden Text sind ebenfalls raus. */
.vr-satz{
  margin:var(--luft-m) 0;padding:0;border:0;
  max-width:22ch;
}
.vr-satz p{
  font-family:'Marcellus',Georgia,serif;
  font-size:clamp(24px,2.6vw,34px)!important;
  line-height:1.25!important;letter-spacing:-.01em;
  color:var(--heading);margin:0!important;
}
/* Ohne Skript ist die Linie einfach da. Erst js-anim zeichnet sie. */

/* --- Drei Wege zur Ringgröße: nummeriert, der dritte hervorgehoben - */
.vr-groesse{margin:var(--luft-l) auto 0;padding:0 var(--tr-rand);max-width:var(--tr-deckel)}
.vr-groesse__kopf{max-width:var(--zeile);margin:0 0 var(--luft-inhalt)}
.vr-groesse__kopf h2{font-size:clamp(26px,2.4vw,34px);line-height:1.24;margin:0 0 var(--luft-s)}
.vr-groesse__kopf p{font-size:15.5px;line-height:25px;margin:0}
/* Drei Spalten über die volle Breite, ungleich breit: die dritte trägt
   die eigentliche Botschaft und bekommt deshalb 1.4fr und als einzige
   eine Fläche. Getrennt wird mit Haarlinien, nicht mit Kästen. */
/* Die Schaltfläche steht über den drei Wegen — wer die Größe wirklich
   messen will, soll nicht erst drei Absätze lesen müssen. */
.vr-groesse__knopf{margin:0 0 34px}

.vr-wege{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr 1.4fr;
}
.vr-wege li{
  position:relative;
  padding:0 34px 0 0;
}
.vr-wege li + li{border-left:1px solid var(--linie);padding-left:34px}
/* Die Ziffer ist reiner Schmuck: 64px bei 20% Deckkraft ergeben 1,3:1 und
   reißen jede Kontrastgrenze. Deshalb steht sie in einem eigenen Element
   mit aria-hidden und nicht in einem ::before — Pseudo-Elemente werden
   von manchen Vorlesewerkzeugen doch vorgelesen. Die Reihenfolge trägt
   das <ol> selbst, es geht also nichts verloren. */
.vr-wege__ziffer{
  display:block;margin-bottom:6px;
  font-family:'Marcellus',Georgia,serif;font-size:64px;line-height:1;
  color:var(--text);opacity:.2;
  transition:opacity .4s linear;
}
.vr-wege li:hover .vr-wege__ziffer{opacity:.45}
.vr-wege h3{font-size:19px;line-height:27px;margin:0 0 8px;color:var(--heading)}
.vr-wege p{font-size:15px;line-height:25px;margin:0;max-width:var(--zeile)}
.vr-wege .vr-wege__wichtig{
  background:var(--beige);border-left:0;border-radius:4px;
  padding:40px;
}
.vr-wege__wichtig .vr-wege__ziffer{color:var(--navy);opacity:1}
.vr-wege__wichtig h3{font-size:21px;line-height:29px}
.vr-wege__wichtig p{color:var(--text-dunkel)}

/* Einflug: Spalten nacheinander, 120ms Versatz. Die Ziffer kommt 200ms
   NACH ihrem Text — der Blick fängt zuerst den Inhalt. */
html.js-anim .vr-wege li{opacity:0;transform:translateY(20px)}
html.js-anim .vr-wege__ziffer{opacity:0}
html.js-anim [data-stufen].ist-sichtbar .vr-wege li,
html.js-anim [data-stufen].sofort .vr-wege li{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
html.js-anim [data-stufen].ist-sichtbar .vr-wege li:nth-child(2){transition-delay:.12s}
html.js-anim [data-stufen].ist-sichtbar .vr-wege li:nth-child(3){transition-delay:.24s}
html.js-anim [data-stufen].ist-sichtbar .vr-wege__ziffer,
html.js-anim [data-stufen].sofort .vr-wege__ziffer{
  opacity:.2;transition:opacity .5s linear .2s;
}
html.js-anim [data-stufen].ist-sichtbar li:nth-child(2) .vr-wege__ziffer{transition-delay:.32s}
html.js-anim [data-stufen].ist-sichtbar li:nth-child(3) .vr-wege__ziffer{transition-delay:.44s}
html.js-anim [data-stufen].ist-sichtbar .vr-wege__wichtig .vr-wege__ziffer{opacity:1}
html.js-anim .vr-wege li:hover .vr-wege__ziffer{opacity:.45}
html.js-anim .vr-wege__wichtig:hover .vr-wege__ziffer{opacity:1}

/* --- Die vier C: Begriff links, Erklärung rechts ------------------- */
/* Die vier C-Bloecke fahren beim Erreichen um 40px seitlich ein. Bis
   dahin stehen sie versetzt - und die beiden rechten ragten damit ueber
   die Fensterkante, was das Dokument um 8px verbreiterte. Wie bei der
   Schmuckbuehne wird nur waagerecht beschnitten. */
.vr-stein{margin:var(--luft-l) auto 0;padding:0 var(--tr-rand);
  max-width:var(--tr-deckel);overflow-x:clip}
.vr-stein__kopf{max-width:var(--zeile);margin:0 0 var(--luft-inhalt)}
.vr-stein__kopf h2{font-size:clamp(26px,2.4vw,34px);line-height:1.24;margin:0 0 var(--luft-s)}
.vr-stein__kopf p{font-size:15.5px;line-height:25px;margin:0}
/* Der Stein steht mittig, die vier Begriffe stehen um ihn herum. Die
   linken Blöcke sind rechtsbündig, die rechten linksbündig — dadurch
   entsteht eine sichtbare Achse zum Stein hin. */
/* minmax(0,1fr) statt 1fr: Eine 1fr-Spur hat einen min-content-Boden.
   Die Beschreibungen darin sind auf 34ch begrenzt, aber ihr laengstes
   Wort kann schmaler nicht werden - und schob das Zwoelferraster damit
   ueber den Behaelter hinaus. Bei 1025px Fensterbreite waren das 8px,
   genug fuer einen waagerechten Schiebeweg auf der ganzen Seite. */
.vr-c{
  margin:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:24px;row-gap:64px;align-items:center;
}
.vr-c__block{margin:0}
.vr-c__block--carat  {grid-column:1 / span 4;grid-row:1;text-align:right}
.vr-c__block--colour {grid-column:9 / span 4;grid-row:1}
.vr-c__block--clarity{grid-column:1 / span 4;grid-row:2;text-align:right}
.vr-c__block--cut    {grid-column:9 / span 4;grid-row:2}
.vr-c__block--carat dd,.vr-c__block--clarity dd{margin-left:auto}

.vr-c dt{margin:0 0 10px}
.vr-c__wort{
  display:block;font-family:'Marcellus',Georgia,serif;font-size:26px;
  line-height:34px;color:var(--heading);
  transition:color .3s linear;
}
.vr-c__block:hover .vr-c__wort{color:var(--rose)}
.vr-c__deutsch{
  display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dunkel);margin-top:2px;
}
/* 34ch entsprechen rund 46 Zeichen — schmale Spalten, damit der Stein
   Luft behält. */
.vr-c dd{margin:0;font-size:16px;line-height:27px;max-width:34ch}
.vr-c__hinweis{
  display:block;margin-top:10px;font-size:15px;line-height:25px;
  color:var(--heading);
}

.vr-c__stein{
  grid-column:5 / span 4;grid-row:1 / span 2;
  justify-self:center;align-self:center;
  width:320px;max-width:100%;
}
.vr-c__stein img{width:100%;height:auto;display:block}

/* --- Der drehbare Stein ---------------------------------------------
   Solange keine Bildfolge vorliegt, greift diese Regel nirgends — der
   Generator setzt dann den gestrichelten Platzhalter darunter. */
.vr-dreh{
  position:relative;width:100%;aspect-ratio:1;
  /* KEIN overflow:hidden — der Hinweis steht ausserhalb des Quadrats.
     Zum Beschneiden ist auch nichts mehr da: Die Bilder tragen ihren
     runden Rand als Transparenz mit. */
  /* Senkrecht scrollen bleibt beim Browser, waagerecht ziehen gehört
     dem Stein. Ohne diese Zeile verschluckt die Seite die Geste. */
  touch-action:pan-y;
  cursor:grab;
  -webkit-tap-highlight-color:transparent;
}
.vr-dreh.zieht{cursor:grabbing}

.vr-dreh__bild{width:100%;height:100%;display:block;object-fit:contain;user-select:none;-webkit-user-drag:none}
/* Der Hinweis erscheint erst, wenn alle Stellungen geladen sind — vorher
   wäre er ein Versprechen, das die Seite noch nicht halten kann. */
/* Unterhalb des Rahmens, nicht im Rahmen: Der Stein reicht bis rund 78%
   der Kante, ein Hinweis bei 4% saß ihm förmlich auf der Kalette. */
.vr-dreh__griff{
  position:absolute;left:50%;top:calc(100% + 20px);transform:translateX(-50%);
  white-space:nowrap;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-dunkel);opacity:0;pointer-events:none;
  transition:opacity var(--t-normal) linear;
}
.vr-dreh.ist-bereit .vr-dreh__griff{opacity:1}
.vr-dreh.zieht .vr-dreh__griff{opacity:0}
/* Platzhalterfläche, solange das freigestellte Steinbild fehlt. Bewusst
   KEIN leeres <img> — das lieferte ein kaputtes Bildsymbol aus. */
.vr-c__platzhalter{
  aspect-ratio:1;border:1px dashed rgba(28,28,28,.28);border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:12px;letter-spacing:.1em;color:var(--text-dunkel);padding:24px;
}

/* Schweben: zwei Bewegungen mit verschiedenen Dauern, damit es nicht
   mechanisch wirkt. Rein per CSS, nicht per Skript. */
@keyframes vr-schweben{
  0%,100%{transform:translateY(-6px)}
  50%    {transform:translateY(6px)}
}
@keyframes vr-neigen{
  0%,100%{transform:rotate(-1.5deg)}
  50%    {transform:rotate(1.5deg)}
}
.vr-c__steininner{animation:vr-schweben 6s ease-in-out infinite}
.vr-c__steininner > *{animation:vr-neigen 9s ease-in-out infinite}

/* Einflug: der Stein zuerst, danach die vier Blöcke — jeder aus seiner
   Ecke auf den Stein zu. */
html.js-anim .vr-c__stein{opacity:0;transform:scale(.92)}
html.js-anim .vr-c__block{opacity:0}
html.js-anim .vr-c__block--carat  {transform:translate(-40px,-30px)}
html.js-anim .vr-c__block--colour {transform:translate(40px,-30px)}
html.js-anim .vr-c__block--clarity{transform:translate(-40px,30px)}
html.js-anim .vr-c__block--cut    {transform:translate(40px,30px)}

html.js-anim [data-stufen].ist-sichtbar .vr-c__stein,
html.js-anim [data-stufen].sofort .vr-c__stein{
  opacity:1;transform:none;
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
html.js-anim [data-stufen].ist-sichtbar .vr-c__block,
html.js-anim [data-stufen].sofort .vr-c__block{
  opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(0.22,1,0.36,1),
             transform .7s cubic-bezier(0.22,1,0.36,1);
}
/* 200ms nach dem Stein beginnt Carat, danach je 140ms Versatz. */
html.js-anim [data-stufen].ist-sichtbar .vr-c__block--carat  {transition-delay:.2s}
html.js-anim [data-stufen].ist-sichtbar .vr-c__block--colour {transition-delay:.34s}
html.js-anim [data-stufen].ist-sichtbar .vr-c__block--clarity{transition-delay:.48s}
html.js-anim [data-stufen].ist-sichtbar .vr-c__block--cut    {transition-delay:.62s}

/* --- Formen und Fassungen: Galerie mit Bildunterschrift -----------
   Das Vergrößern nutzt dieselbe Bedienung wie die Trauringgalerie
   (Klasse .tr-lupe) — geteiltes Verhalten, eigenes Aussehen: hier steht
   unter jedem Bild ein Satz zur Alltagstauglichkeit. */
.vr-formen{margin:var(--luft-l) auto 0;padding:0 var(--tr-rand);max-width:var(--tr-deckel)}
.vr-formen__kopf{max-width:var(--zeile);margin:0 0 var(--luft-inhalt)}
.vr-formen__kopf h2{font-size:clamp(26px,2.4vw,34px);line-height:1.24;margin:0 0 var(--luft-s)}
.vr-formen__kopf p{font-size:15.5px;line-height:25px;margin:0}
.vr-formen__raster{
  display:grid;grid-template-columns:repeat(5,1fr);gap:22px;
  list-style:none;margin:0;padding:0;
}
.vr-form{margin:0}
.vr-form .tr-lupe{display:block;overflow:hidden}
.vr-form img{
  width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block;
  transform:scale(1);transition:transform var(--t-zoom) var(--ease);
}
.vr-form .tr-lupe:hover img,.vr-form .tr-lupe:focus-visible img{transform:scale(1.05)}
.vr-form figcaption{padding-top:14px}
.vr-form h3{font-size:17px;line-height:24px;margin:0 0 6px;color:var(--heading)}
.vr-form p{font-size:14px;line-height:22px;margin:0;max-width:var(--zeile)}

/* --- Diskretion: warmer Abschnitt, kein Schema -------------------- */
/* Die Fläche läuft über die volle Breite, der Inhalt aber im selben
   Bereich wie alle anderen Abschnitte — sonst flüchtet die H2 gegenüber
   den übrigen um gut 30px nach links. Deshalb sitzt der Rand am inneren
   Kasten, nicht am Band. */
.vr-diskret{
  background:var(--beige);margin-block:var(--luft-xl);padding:64px 0 68px;
}
.vr-diskret__inner{
  max-width:var(--tr-deckel);margin-inline:auto;padding-inline:var(--tr-rand);
  display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:56px;
  align-items:start;
}
.vr-diskret h2{font-size:clamp(24px,2.2vw,32px);line-height:1.26;margin:0;color:var(--heading)}
.vr-diskret p{font-size:16px;line-height:27px;margin:0 0 16px;color:var(--text-dunkel);max-width:var(--zeile)}
.vr-diskret p:last-child{margin-bottom:0}
.vr-diskret__punkte{list-style:none;margin:22px 0 0;padding:0}
.vr-diskret__punkte li{
  position:relative;padding-left:26px;margin-bottom:10px;
  font-size:15.5px;line-height:25px;color:var(--text-dunkel);
  max-width:var(--zeile);
}
.vr-diskret__punkte li::before{
  content:'';position:absolute;left:0;top:11px;
  width:10px;height:1px;background:var(--navy);
}

/* ===================================================================
   Ringgrößen-Seite: Rechner und Tabelle

   Der Rechner ist der Signaturteil dieser Seite und darf als einziges
   Element eine deutliche Fläche haben. Alles andere bleibt Fließtext.
   =================================================================== */

/* Ohne Skript: Werkzeug weg, Hinweis da. Rein über die .js-Klasse, die
   das Kopfskript setzt — es wird nichts nachgeladen und nichts blinkt. */
.rg-rechner{display:none}
.js .rg-rechner{display:block}
.rg-ohne-js{font-size:15.5px;line-height:26px;margin:0;max-width:var(--zeile)}
.js .rg-ohne-js{display:none}

.rg-werkzeug{
  margin:var(--luft-l) auto 0;padding:0 var(--tr-rand);
  max-width:var(--tr-deckel);
}
.rg-werkzeug__inner{
  background:var(--beige);border-radius:4px;
  padding:44px 44px 48px;
}
.rg-werkzeug > h2{
  font-size:clamp(26px,2.4vw,34px);line-height:1.24;
  margin:0 0 var(--luft-s);color:var(--heading);
}

.rg-rechner__wahl{display:flex;gap:26px;margin-bottom:32px}
.rg-wahl{
  background:none;border:0;padding:10px 0;min-height:44px;cursor:pointer;
  font-size:15.5px;color:var(--text-dunkel);
  border-bottom:2px solid transparent;
  transition:color var(--t-normal) linear,border-color var(--t-normal) linear;
}
.rg-wahl:hover{color:var(--heading)}
.rg-wahl[aria-pressed="true"]{color:var(--heading);border-bottom-color:var(--navy)}

.rg-rechner__raster{
  display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);
  gap:48px;align-items:center;
}
.rg-eingabefeld > label{
  display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-dunkel);margin-bottom:10px;
}
.rg-eingabe{
  display:flex;align-items:center;gap:10px;
  background:var(--weiss);border:1px solid rgba(28,28,28,.20);border-radius:2px;
  padding:0 18px;max-width:280px;
  transition:border-color var(--t-normal) linear;
}
.rg-eingabe:focus-within{border-color:var(--navy)}
.rg-eingabe input{
  flex:1;min-width:0;border:0;background:none;padding:16px 0;
  font-family:'Marcellus',Georgia,serif;font-size:30px;line-height:1.2;
  color:var(--heading);
}
.rg-eingabe input:focus{outline:none}
.rg-einheit{font-size:15px;color:var(--text-dunkel)}
.rg-tipp{font-size:14px;line-height:23px;margin:16px 0 0;color:var(--text-dunkel);max-width:var(--zeile)}

.rg-ergebnis{display:block;text-align:center}
.rg-ergebnis__label{
  display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-dunkel);margin-bottom:6px;
}
.rg-ergebnis__zahl{
  display:block;font-family:'Marcellus',Georgia,serif;
  font-size:64px;line-height:1.05;color:var(--heading);
}
.rg-ergebnis__um{
  display:block;font-size:14px;line-height:23px;margin:12px auto 0;
  color:var(--text-dunkel);max-width:34ch;
  min-height:23px;                       /* kein Springen beim Tippen */
}

/* --- Die vier Wege: Fließtext mit Haarlinien ----------------------- */
.rg-schritte{
  list-style:none;counter-reset:rg;margin:22px 0 26px;padding:0;
}
.rg-schritte li{
  counter-increment:rg;position:relative;
  padding:16px 0 16px 42px;border-top:1px solid var(--linie);
}
.rg-schritte li::before{
  content:counter(rg);position:absolute;left:0;top:15px;
  font-family:'Marcellus',Georgia,serif;font-size:20px;line-height:1;
  color:var(--rose);
}
.rg-schritte h3{font-size:17px;line-height:25px;margin:0 0 4px;color:var(--heading)}
.rg-schritte p{font-size:15.5px;line-height:26px;margin:0;max-width:var(--zeile)}
.rg-liste{list-style:none;margin:18px 0 22px;padding:0}
.rg-liste li{
  position:relative;padding-left:24px;margin-bottom:10px;
  font-size:16px;line-height:27px;max-width:var(--zeile);
}
.rg-liste li::before{
  content:'';position:absolute;left:0;top:12px;width:10px;height:1px;
  background:var(--navy);
}
.rg-download{margin:26px 0 0}

/* --- Größentabelle -------------------------------------------------
   Volle Bereichsbreite. Auf dem Handy waagerecht rollbar, erste Spalte
   bleibt stehen — sonst weiß man nach zwei Wischern nicht mehr, welche
   Zeile man liest. */
.rg-tabelle{
  margin:var(--luft-l) auto 0;padding:0 var(--tr-rand);
  max-width:var(--tr-deckel);
}
.rg-tabelle h2{
  font-size:clamp(26px,2.4vw,34px);line-height:1.24;
  margin:0 0 var(--luft-s);color:var(--heading);
}
.rg-tabelle > p{font-size:15.5px;line-height:26px;margin:0 0 var(--luft-inhalt);max-width:var(--zeile)}
.rg-tabelle__rollbereich{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rg-tabelle__rollbereich:focus-visible{outline-offset:2px}
.rg-tabelle table{border-collapse:collapse;width:100%;min-width:520px}
.rg-tabelle th,.rg-tabelle td{
  text-align:left;font-weight:400;font-size:15.5px;line-height:24px;
  padding:12px 20px 12px 0;border-bottom:1px solid var(--linie);
  white-space:nowrap;
}
.rg-tabelle thead th{
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-dunkel);border-bottom:1px solid rgba(28,28,28,.28);
}
.rg-tabelle tbody th{
  font-family:'Marcellus',Georgia,serif;font-size:19px;color:var(--heading);
  position:sticky;left:0;background:var(--creme);
}
.rg-tabelle tbody tr{transition:background-color var(--t-normal) linear}
.rg-tabelle tbody tr:hover{background:var(--beige)}
.rg-tabelle tbody tr:hover th{background:var(--beige)}
.rg-tabelle__fuss{
  font-size:14px;line-height:23px;margin:20px 0 0;
  color:var(--text-dunkel);max-width:var(--zeile);
}

/* --- Ratgeber: Lesebereich im redaktionellen Charakter --------------
   Der Ratgeber darf anders aussehen als die Leistungsseiten: Dort wird
   beraten, hier wird gelesen. Zwei Maße gelten deshalb nur hier — ein
   schmalerer Deckel und eine längere Textzeile.
   -------------------------------------------------------------------- */
.rat-deckel,
.rat-artikel{
  --rat-deckel:1280px;
}
/* Die Übersicht ist kein Lesebereich, sondern ein Register — sie darf
   breiter laufen als der Beitrag. 1560px, weil bei zwei Spalten und
   64px Fuge jede Karte dann rund 640px misst: genug, dass die Aufnahme
   trägt, und wenig genug, dass zwei Karten nebeneinander stehen.

   `.rat-hero` bekommt denselben Deckel — die Schlagzeile steht sonst
   72px weiter rechts als die erste Karte darunter, und das sieht nicht
   nach Absicht aus, sondern nach Versehen. Der Vorspann bleibt über
   seinen eigenen 56ch-Deckel trotzdem lesbar schmal. */
.rat-eintraege,
.rat-hero{--rat-deckel:1560px}

/* --- Kopf: Marke, Schlagzeile, Vorspann ----------------------------- */
.rat-hero{
  max-width:var(--rat-deckel);margin:var(--luft-m) auto 0;
  padding:0 var(--tr-rand);
}
.rat-marke{
  display:flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dunkel);margin:0 0 28px;
}
.rat-marke a{color:inherit}
.rat-marke a:hover{color:var(--rose)}
.rat-marke__punkt{
  width:6px;height:6px;border-radius:50%;background:var(--navy);
  flex:none;
}
/* Der Punkt am Ende gehört zur Schlagzeile — er macht aus der Überschrift
   eine Feststellung. Deshalb steht er im Text, nicht im Stylesheet. */
.rat-schlagzeile{
  font-family:'Marcellus',Georgia,serif;
  font-size:clamp(48px,7vw,96px);
  line-height:.92;letter-spacing:-.02em;
  color:var(--heading);margin:0;
  text-wrap:balance;
}
.rat-vorspann{
  font-size:18px;line-height:1.75;color:var(--text);
  max-width:56ch;margin:32px 0 0;
}

/* --- Übersicht: Beiträge als Liste ---------------------------------- */
.rat-eintraege{
  max-width:var(--rat-deckel);margin:var(--luft-l) auto 0;
  padding:0 var(--tr-rand);
}
/* Zwei Spalten statt einer. Untereinander waren zwölf Beiträge eine
   Seite von über zehn Bildschirmhöhen, und rechts stand die halbe
   Fensterbreite leer.

   Der Versatz der zweiten Spalte ist kein Zierrat: Ohne ihn stehen die
   Bildkanten paarweise auf einer Linie und das Raster wirkt wie eine
   Tabelle. Mit ihm liest sich die Seite als Magazin. */
.rat-eintraege__liste{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(32px,4vw,64px);row-gap:clamp(56px,6vw,104px);
  align-items:start;
}
.rat-eintrag:nth-child(even){margin-top:clamp(40px,7vw,120px)}
.rat-eintrag{padding:0}
.rat-eintrag__flaeche{display:block;color:inherit}
.rat-eintrag__flaeche:focus-visible{outline-offset:6px;border-radius:4px}

/* Die Haarlinie sitzt oben an jeder Zeile: So trennt sie die Einträge
   und schließt die Liste zugleich nach oben ab — ohne Sonderregel für
   den ersten oder letzten Eintrag. */
.rat-eintrag__kopf{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  border-top:1px solid var(--linie);
  padding:20px 0 26px;
}
.rat-eintrag__titel{
  font-family:'Marcellus',Georgia,serif;
  font-size:clamp(22px,2.4vw,32px);line-height:1.2;
  color:var(--heading);
  transition:transform .5s var(--kurve-auf);
}
.rat-eintrag__index{
  font-size:13px;letter-spacing:.08em;color:var(--text);
  flex:none;font-variant-numeric:tabular-nums;
}
.rat-eintrag__bild{display:block;overflow:hidden;border-radius:4px}
/* 4:3 — das Verhältnis, in dem die Bilddateien auch gebaut werden, also
   kein zweiter Beschnitt im Browser. Bei einspaltiger Liste stand hier
   21:9, weil eine Zeile sonst 1050px hoch geworden wäre. Bei rund 700px
   Spaltenbreite ist das kein Thema mehr, und die Aufnahmen behalten die
   Ruhe, für die sie gemacht sind. */
.rat-eintrag__bild img{
  width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover;
  transition:transform .7s var(--kurve-auf);
}
.rat-eintrag__fuss{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:14px;margin-top:20px;
}
.rat-eintrag__vorschau{
  display:block;font-size:16px;line-height:1.7;color:var(--text);
  max-width:60ch;
}
.rat-eintrag__mehr{
  display:inline-flex;align-items:center;gap:10px;flex:none;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--heading);min-height:44px;
}
.rat-eintrag__mehr .pfeil{transition:transform .5s var(--kurve-auf)}
.rat-eintrag:hover .rat-eintrag__bild img,
.rat-eintrag:focus-within .rat-eintrag__bild img{transform:scale(1.03)}
.rat-eintrag:hover .rat-eintrag__titel,
.rat-eintrag:focus-within .rat-eintrag__titel{transform:translateX(4px)}
.rat-eintrag:hover .rat-eintrag__mehr .pfeil,
.rat-eintrag:focus-within .rat-eintrag__mehr .pfeil{transform:translateX(4px)}

.rat-geplant{list-style:none;margin:14px 0 18px;padding:0;font-size:15px;line-height:28px}
.rat-geplant li{padding-left:18px;position:relative}
.rat-geplant li::before{content:'';position:absolute;left:0;top:13px;width:8px;height:1px;background:var(--rose)}

/* --- Beitrag -------------------------------------------------------- */
.rat-artikel{max-width:var(--rat-deckel);margin-inline:auto;padding:var(--luft-m) var(--tr-rand) 0}
.rat-kopf{max-width:68ch}
.rat-kopf .rat-schlagzeile{font-size:clamp(38px,5.2vw,72px)}
.rat-meta{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-dunkel);margin:26px 0 0;
}
.rat-antwort{
  font-size:20px;line-height:1.65;color:var(--heading);
  margin:30px 0 0;max-width:60ch;
}

/* Fließtext: 68ch bei 18px — die Vorgabe des Lesebereichs. Auf den
   Leistungsseiten gilt weiterhin die engere --zeile. */
.rat-text{padding-top:var(--luft-m);max-width:68ch}
.rat-abschnitt{margin:0 0 44px}
.rat-abschnitt:last-child{margin-bottom:0}
.rat-text h2{
  font-family:'Marcellus',Georgia,serif;
  font-size:clamp(26px,2.6vw,34px);line-height:1.25;
  margin:0 0 20px;color:var(--heading);
}
/* Der Index steht als eigene Zeile über der Überschrift, nicht davor:
   Damit bleibt die linke Kante aller H2 identisch — auch bei (10). */
.rat-index{
  display:block;font-family:'Inter',system-ui,sans-serif;
  font-size:12px;letter-spacing:.12em;color:var(--text);
  margin-bottom:12px;font-variant-numeric:tabular-nums;
}
.rat-text p{font-size:18px;line-height:1.75;margin:0 0 20px;color:var(--text)}
.rat-text p:last-child{margin-bottom:0}
.rat-text a{color:var(--heading);text-decoration:underline;text-underline-offset:3px}
.rat-text a:hover{color:var(--rose)}

/* Breite Beiträge: Werkzeug und Tabelle dürfen über die Textspalte
   hinaus, der Text bleibt bei 68ch — linksbündig, damit alle
   Überschriften auf einer Kante stehen. */
.rat-artikel--breit .rat-kopf,
.rat-artikel--breit .rat-text{max-width:68ch;margin-inline:0}
.rat-artikel--breit .rg-werkzeug,
.rat-artikel--breit .rg-tabelle,
.rat-artikel--breit .tr-faq{max-width:none;padding-inline:0;margin-inline:0}

/* --- Dunkler Abschluss ---------------------------------------------- */
.rat-schluss{margin:var(--luft-l) 0 0}
/* Die dunkle Fläche zieht sich um genau den Seitenrand nach außen und
   polstert innen um denselben Betrag. Ergebnis: Der Block reicht bis an
   den Papierrand, seine Überschrift steht aber auf derselben linken
   Kante wie jede andere H2 des Artikels. Ohne das säße sie um die
   Polsterung eingerückt — gemessen 193px statt 121px.
   Waagerecht deshalb --tr-rand statt clamp(): So kann der Block auf
   keiner Fensterbreite über den Rand hinauslaufen. */
.rat-schluss__innen{
  background:var(--heading);color:var(--creme);
  border-radius:24px;
  padding:clamp(36px,5vw,72px) var(--tr-rand);
  margin-inline:calc(-1 * var(--tr-rand));
}
.rat-schluss h2{
  font-family:'Marcellus',Georgia,serif;
  font-size:clamp(26px,3.2vw,42px);line-height:1.15;
  margin:0;color:var(--creme);
}
.rat-schluss p{
  font-size:17px;line-height:1.7;margin:18px 0 0;
  max-width:52ch;color:rgba(249,246,242,.78);
}
.rat-schluss__weg{
  display:inline-flex;align-items:center;gap:12px;margin-top:32px;
  min-height:44px;color:var(--creme);
  font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid rgba(249,246,242,.4);
  transition:border-color var(--t-normal) linear;
}
.rat-schluss__weg .pfeil{transition:transform .5s var(--kurve-auf)}
.rat-schluss__weg:hover{border-color:var(--creme)}
.rat-schluss__weg:hover .pfeil{transform:translateX(4px)}

/* --- Einblenden beim Scrollen ---------------------------------------
   Ausgangszustand ist SICHTBAR. Versteckt wird erst, wenn das Skript die
   Klasse gesetzt hat — ohne JavaScript steht der ganze Ratgeber da.

   Kein pauschaler Zeitgeber: Jedes Element wartet auf den Beobachter,
   und nur was beim Aufbau schon im Bild steht, bekommt ein eigenes Netz.
   -------------------------------------------------------------------- */
/* Das Verstecken geschieht OHNE Übergang, nur das Aufdecken mit.

   Lag der Übergang auch auf dem Versteck-Zustand, sah man beim Laden
   zuerst den fertigen Abschnitt: Das Skript setzt `anim-js` erst nach
   dem ersten Aufbau, und von da an lief eine Sekunde lang eine
   Blende von sichtbar nach unsichtbar — der Abschnitt wäre also
   weggeblendet worden, um gleich darauf wieder zu erscheinen. */
html.anim-js [data-auf]{opacity:0;transform:translateY(40px)}
html.anim-js [data-auf] picture{transform:scale(1.05)}
html.anim-js [data-auf].ist-auf,
html.anim-js [data-auf].ist-auf picture{
  transition:opacity 1s var(--kurve-auf) var(--verzug,0ms),
             transform 1s var(--kurve-auf) var(--verzug,0ms);
}
html.anim-js [data-auf].ist-auf{opacity:1;transform:none}
/* Die Aufblende sitzt auf <picture>, das Überfahren auf <img>: zwei
   Elemente, damit sich die beiden Maßstäbe nicht gegenseitig aufheben. */
html.anim-js [data-auf].ist-auf picture{transform:none}

/* --- Ratgeber auf schmalen Schirmen ---------------------------------
   MUSS hinter den Grundregeln oben stehen: Ein Medienabfrage-Block
   erhöht die Spezifität nicht, es entscheidet allein die Reihenfolge.
   Weiter oben eingesetzt wären diese Zeilen wirkungslos gewesen —
   gemessen, nicht vermutet.
   -------------------------------------------------------------------- */
@media (max-width:767px){
  .siegel__raster{grid-template-columns:1fr;gap:32px}
  .siegel__urkunden li{grid-template-columns:auto 1fr;gap:14px}
  .siegel__ort{grid-column:2;font-size:12px}
  /* Zurück zu 16:10: 21:9 misst bei 350px Breite nur noch 150px Höhe und
     liest sich als Briefschlitz. Das Platzargument von oben gilt hier
     ohnehin nicht — bei dieser Breite passt keine zweite Zeile ins Bild,
     egal wie flach das Bild ist. */
  .rat-eintrag__bild img{aspect-ratio:16/10}
  .rat-eintrag{padding-bottom:var(--luft-m)}
  .rat-eintrag__kopf{padding:16px 0 20px}
  .rat-eintrag__fuss{margin-top:18px;gap:14px}
  .rat-eintraege{margin-top:var(--luft-m)}
  .rat-schluss__innen{border-radius:16px}
}

/* --- Auszeichnung auf der Startseite -------------------------------
   Bild links, Beleg rechts. Kein Siegel-Grafik-Kitsch: Was überzeugt,
   ist die Inhaberin mit den echten Urkunden in der Hand, nicht ein
   nachgebautes Abzeichen.
   -------------------------------------------------------------------- */
.siegel{max-width:var(--tr-deckel);margin:var(--luft-l) auto 0;padding:0 var(--tr-rand)}
.siegel__raster{
  display:grid;grid-template-columns:440px 1fr;gap:clamp(40px,5vw,80px);
  align-items:center;
}
.siegel__bild{margin:0}
.siegel__bild img{width:100%;height:auto;display:block;border-radius:20px}
.siegel__marke{
  display:flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dunkel);margin:0 0 24px;
}
.siegel__punkt{width:6px;height:6px;border-radius:50%;background:var(--navy);flex:none}
.siegel__titel{
  font-family:'Marcellus',Georgia,serif;
  font-size:clamp(30px,3.6vw,50px);line-height:1.08;letter-spacing:-.015em;
  color:var(--heading);margin:0 0 24px;text-wrap:balance;
}
.siegel__vorspann{font-size:17px;line-height:1.7;color:var(--text);margin:0;max-width:54ch}
.siegel__vorspann strong{color:var(--heading);font-weight:500}

/* Die beiden Urkunden als Liste mit Haarlinie — dieselbe Ordnung wie im
   Ratgeber, keine zweite Formensprache für denselben Zweck. */
.siegel__urkunden{list-style:none;margin:36px 0 0;padding:0}
.siegel__urkunden li{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:20px;padding:18px 0;border-top:1px solid var(--linie);
}
.siegel__jahr{
  font-size:13px;color:var(--text);font-variant-numeric:tabular-nums;
  letter-spacing:.06em;
}
.siegel__name{
  font-family:'Marcellus',Georgia,serif;font-size:21px;color:var(--heading);
}
.siegel__ort{font-size:13px;color:var(--text);letter-spacing:.06em}
.siegel__nachsatz{font-size:15.5px;line-height:1.7;color:var(--text);margin:28px 0 0;max-width:48ch}
.siegel__weg{
  display:inline-flex;align-items:center;gap:10px;margin-top:28px;min-height:44px;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--heading);
  border-bottom:1px solid var(--linie);
  transition:border-color var(--t-normal) linear;
}
.siegel__weg .pfeil{transition:transform .5s var(--kurve-auf)}
.siegel__weg:hover{border-color:var(--heading)}
.siegel__weg:hover .pfeil{transform:translate(3px,-3px)}

/* ====================================================================
   GOLDANKAUF — eigene Formensprache

   Die Seite bestand bis auf den Hero aus Bausteinen der Trauringseite:
   zweimal dasselbe Kartenraster, dazu das Stufenraster. Drei Abschnitte
   hintereinander in derselben Form, nur mit anderem Text.

   Die drei Formen hier kommen aus der Sache selbst:
     Register  — der Feingehaltsstempel ordnet die Warenkunde
     Protokoll — der Ablauf ist eine Folge, keine Spaltenreihe
     Prüfliste — Kriterien hakt man ab, man liest sie nicht als Werbung
   ==================================================================== */
.ga-register,.ga-ablauf,.ga-pruefliste{
  max-width:var(--tr-deckel);margin:var(--luft-l) auto 0;padding:0 var(--tr-rand);
}
.ga-marke{
  display:flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dunkel);margin:0 0 22px;
}
.ga-marke__punkt{width:6px;height:6px;border-radius:50%;background:var(--navy);flex:none}
.ga-register h2,.ga-ablauf h2,.ga-pruefliste h2{
  font-family:'Marcellus',Georgia,serif;
  font-size:clamp(30px,3.6vw,50px);line-height:1.08;letter-spacing:-.015em;
  color:var(--heading);margin:0 0 22px;text-wrap:balance;
}
.ga-vorspann{font-size:17px;line-height:1.7;color:var(--text);margin:0;max-width:58ch}

/* --- Register: der Stempel IST der Abschnitt ------------------------
   Er stand zuerst so groß wie der Gruppenname daneben — also flüsterte
   genau das Element, das die Ordnung trägt. Jetzt ist er Displaygröße
   und rechtsbündig: Die Ziffern bilden eine Kante, an der das Auge die
   Liste hinunterläuft, und die Zeile nutzt die ganze Breite statt
   linksbündig zu versanden.

   Drei Spalten, wie in einem Warenverzeichnis: Stempel · Gruppe · Text. */
.ga-register__kopf{max-width:64ch;margin-bottom:var(--luft-m)}
.ga-register__liste{list-style:none;margin:0;padding:0}
.ga-register__zeile{
  display:grid;
  /* Erste Spalte breit genug für die längste Zahlenreihe: „800 · 835 · 925"
     misst bei 46px 305px. Bei 253px liefen alle fünf Stempel über den Rand
     hinaus — „je nach Prägung" um 73px, mitten in den Gruppennamen hinein. */
  grid-template-columns:minmax(200px,330px) minmax(180px,18%) minmax(0,1fr);
  gap:clamp(20px,3vw,56px);
  align-items:baseline;
  padding:38px 0;border-top:1px solid var(--linie);
}
.ga-register__zeile:last-child{border-bottom:1px solid var(--linie)}
/* Tabellenziffern, damit die Stempel untereinander auf einer Kante
   stehen — sonst tanzt die 1 aus der Reihe. */
.ga-register__stempel{
  font-family:'Marcellus',Georgia,serif;
  font-size:clamp(28px,3.2vw,46px);line-height:1.05;
  /* 0,62 statt 0,32: Bei 0,32 kam der Stempel auf 2,01:1 gegen den
     Seitenton. Er ist keine Zierde — ein sehender Besucher liest dort
     „333 · 585 · 750". Gemessen 4,58:1. */
  color:rgba(28,28,28,.62);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  text-align:right;
  /* KEIN nowrap: Die beiden Wortangaben brauchen zwei Zeilen, genauso wie
     „Altgold und Bruchgold" daneben. Die Zahlenreihen passen dank der
     Spaltenbreite ohnehin in eine Zeile. */
  text-wrap:balance;
}
.ga-register__gruppe{
  font-family:'Marcellus',Georgia,serif;
  font-size:clamp(20px,1.8vw,25px);line-height:1.2;margin:0;color:var(--heading);
}
.ga-register__text{font-size:16px;line-height:1.75;margin:0;color:var(--text);max-width:68ch}
.ga-register__fuss{
  font-size:15.5px;line-height:1.7;color:var(--text);
  margin:var(--luft-inhalt) 0 0;max-width:52ch;
}

/* --- Protokoll: untereinander, der zweite Schritt hervorgehoben ----- */
.ga-ablauf__kopf{max-width:60ch;margin-bottom:var(--luft-m)}
/* Schritte links, der Beleg zu Schritt 02 rechts. Die Liste allein ließ
   die halbe Seitenbreite leer stehen. */
.ga-ablauf__raster{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);
  gap:clamp(40px,5vw,88px);
}
/* Senkrecht mittig statt klebend. Klebend war es zuerst — die Rechnung
   danach war ernüchternd: Liste 849px, Karte 586px, also 263px Weg. Ein
   Element, das über ein Viertel Bildschirmhöhe „steht" und dann doch
   mitwandert, liest sich als Fehler, nicht als Absicht. Mittig gesetzt
   steht der Beleg auf Höhe der Schritte 02 und 03 — genau dort, wo die
   Behauptung steht, die er belegt. */
.ga-ablauf__beleg{margin:0;align-self:center}
.ga-ablauf__belegkarte{position:static}
.ga-ablauf__belegkarte img{width:100%;height:auto;display:block;border-radius:20px}
.ga-ablauf__belegkarte figcaption{
  font-size:14px;line-height:1.6;color:var(--text-dunkel);
  margin-top:16px;max-width:34ch;
}
.ga-ablauf__liste{list-style:none;margin:0;padding:0}
.ga-schritt{
  position:relative;
  display:grid;grid-template-columns:64px 1fr;gap:clamp(18px,2.4vw,32px);
  align-items:start;padding:34px 0;border-top:1px solid var(--linie);
}
.ga-schritt:last-child{border-bottom:1px solid var(--linie)}
/* Klein und lesbar statt groß und blass. Bei 68px und 1,38:1 war die
   Ziffer ein Ornament, das sich als Information ausgab — und sie stahl
   der Überschrift den Rang. Den Halt gibt jetzt der Beleg daneben. */
.ga-schritt__zahl{
  font-family:'Marcellus',Georgia,serif;
  font-size:22px;line-height:1.5;
  color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
.ga-schritt__text h3{
  font-family:'Marcellus',Georgia,serif;
  font-size:26px;line-height:1.2;margin:0 0 12px;color:var(--heading);
}
.ga-schritt__text p{font-size:16.5px;line-height:1.75;margin:0;color:var(--text);max-width:52ch}
/* Der zweite Schritt trägt die ganze Aussage der Seite — im Spaltenraster
   ging er zwischen den anderen dreien unter. */
/* Rosé ist im System die Hover-Farbe, nicht eine Textfarbe — als Ziffer
   kam sie auf 2,35:1. Schritt 02 hebt sich über Größe und die
   Kennzeichnung darunter hervor, nicht über Farbe. */
.ga-schritt.ist-kern .ga-schritt__zahl{color:var(--heading)}
.ga-schritt.ist-kern .ga-schritt__text h3{font-size:30px}
.ga-schritt__kern{
  grid-column:2;justify-self:start;margin-top:16px;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-dunkel);
  border-bottom:1px solid var(--rose);padding-bottom:4px;
}

/* --- Prüfliste: als Merkzettel, nicht als Werbefläche -------------- */
/* Die Fläche zieht sich um den Seitenrand nach aussen und polstert innen
   um denselben Betrag. Dadurch steht ihre Überschrift auf derselben
   linken Kante wie alle anderen H2 der Seite — sonst säße sie um die
   Polsterung eingerückt, gemessen 146px statt 81px. Waagerecht deshalb
   --tr-rand statt clamp(): So kann die Karte auf keiner Fensterbreite
   über den Rand hinauslaufen. */
.ga-pruefliste__karte{
  border:1px solid var(--linie);border-radius:24px;
  /* Der 1px-Rahmen zählt im Border-Box mit und schöbe den Inhalt sonst um
     genau diesen Pixel nach rechts — die Überschrift stünde auf 82 statt
     81. Ausgeglichen wird das an der Polsterung, NICHT am Aussenabstand:
     Über den Aussenabstand wurde die Karte zwei Pixel breiter als das
     Fenster, und auf 390px lief die Seite waagerecht über. */
  padding:clamp(32px,4.5vw,64px) calc(var(--tr-rand) - 1px);
  margin-inline:calc(-1 * var(--tr-rand));
  background:var(--creme-dunkel);
}
.ga-pruefliste__kopf{max-width:60ch;margin-bottom:var(--luft-inhalt)}
.ga-pruefliste__punkte{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(24px,3vw,44px) clamp(32px,4vw,72px);
}
.ga-pruefliste__punkte li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.ga-haken{color:var(--navy);margin-top:4px;font-size:18px;flex:none}
.ga-pruefliste__punkte h3{
  font-size:17px;line-height:1.35;margin:0 0 8px;color:var(--heading);font-weight:500;
}
.ga-pruefliste__punkte p{font-size:15.5px;line-height:1.7;margin:0;color:var(--text-dunkel)}

/* --- Goldankauf auf schmalen Schirmen -------------------------------
   MUSS hinter den Grundregeln oben stehen. Ein Medienabfrage-Block erhöht
   die Spezifität nicht, es entscheidet allein die Reihenfolge — weiter
   oben eingesetzt blieb die 220px-Spalte des Stempels stehen und drückte
   den Text auf 143px, mit Querlauf als Folge. Gemessen, nicht vermutet.
   -------------------------------------------------------------------- */
@media (max-width:767px){
  .ga-register__zeile,.ga-schritt{grid-template-columns:1fr;gap:10px;padding:26px 0}
  /* Auf schmalem Schirm steht der Stempel als Zeile über der Gruppe —
     rechtsbündig hätte er dort nichts, woran er sich ausrichten könnte. */
  .ga-register__stempel{font-size:24px;text-align:left}
  .ga-ablauf__raster{grid-template-columns:1fr;gap:var(--luft-m)}
  .ga-ablauf__belegkarte{position:static}
  .ga-schritt.ist-kern .ga-schritt__text h3{font-size:24px}
  .ga-schritt__kern{grid-column:1;margin-top:12px}
  .ga-pruefliste__punkte{grid-template-columns:1fr}
  .ga-pruefliste__karte{border-radius:16px}
  .ga-register,.ga-ablauf,.ga-pruefliste{margin-top:var(--luft-m)}
}

/* ====================================================================
   GOLDSCHMIEDEARBEITEN — eigene Formensprache

   Die Seite hieß einmal „Unsere Werkstatt" und war aus Trauringe-Bausteinen
   zusammengesetzt. Beides ist weg: Otto Parr hat keine eigene Werkstatt,
   und die Seite handelt jetzt von dem, was hier tatsächlich passiert —
   annehmen, ansehen, sagen was geht.

   Die Form kommt aus dem Gespräch am Tresen: erst der Satz, mit dem
   jemand hereinkommt, dann die Antwort.
   ==================================================================== */
.gs-hero,.gs-sprechstunde,.gs-termin,.gs-frei{
  max-width:var(--tr-deckel);margin:var(--luft-l) auto 0;padding:0 var(--tr-rand);
}
.gs-marke{
  display:flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dunkel);margin:0 0 22px;
}
.gs-marke__punkt{width:6px;height:6px;border-radius:50%;background:var(--navy);flex:none}
.gs-vorspann{font-size:17px;line-height:1.7;color:var(--text);margin:0;max-width:56ch}

/* --- Hero: die Frage trägt, die Überschrift steht darunter ---------
   Für die Suche muss das Schlagwort ins H1, für den Leser zählt die
   Frage. Beides ist sichtbar, nichts versteckt — die Frage ist nur
   grösser gesetzt. */
.gs-hero{margin-top:var(--luft-m);max-width:var(--tr-deckel)}
.gs-hero__frage{
  font-family:'Marcellus',Georgia,serif;
  font-size:clamp(42px,7vw,96px);line-height:1;letter-spacing:-.025em;
  color:var(--heading);margin:0;max-width:14ch;text-wrap:balance;
}
.gs-hero__titel{
  font-size:clamp(19px,1.7vw,23px);line-height:1.35;font-weight:400;
  color:var(--text-dunkel);margin:26px 0 0;
  letter-spacing:.02em;
}
.gs-hero__antwort{
  font-size:clamp(18px,1.7vw,21px);line-height:1.65;color:var(--text);
  margin:32px 0 0;max-width:46ch;
}
.gs-hero__zusatz{
  display:flex;flex-wrap:wrap;gap:10px 28px;margin:40px 0 0;
  font-size:13px;letter-spacing:.06em;color:var(--text-dunkel);
}
.gs-hero__zusatz span{display:inline-flex;align-items:center;gap:10px}
.gs-hero__zusatz span + span::before{
  content:'';width:4px;height:4px;border-radius:50%;
  background:var(--linie);flex:none;margin-right:18px;
}

/* --- Sprechstunde: Satz links, Antwort rechts ---------------------- */
.gs-sprechstunde__kopf{max-width:62ch;margin-bottom:var(--luft-m)}
.gs-sprechstunde h2{
  font-family:'Marcellus',Georgia,serif;
  font-size:clamp(30px,3.6vw,50px);line-height:1.08;letter-spacing:-.015em;
  color:var(--heading);margin:0 0 22px;text-wrap:balance;
}
.gs-sprechstunde__liste{display:block}
.gs-fall{
  display:grid;grid-template-columns:minmax(280px,38%) minmax(0,1fr);
  gap:clamp(28px,4vw,72px);
  align-items:baseline;
  padding:36px 0;border-top:1px solid var(--linie);
}
.gs-fall:last-child{border-bottom:1px solid var(--linie)}
/* Der Satz ist ein Zitat, kein Etikett — deshalb Marcellus und
   Anführungszeichen, nicht Versalien und Sperrung. */
.gs-fall__satz{
  font-family:'Marcellus',Georgia,serif;
  font-size:clamp(21px,2.1vw,28px);line-height:1.25;
  color:var(--heading);margin:0;text-wrap:balance;
}
.gs-fall__antwort{font-size:16.5px;line-height:1.75;color:var(--text);margin:0;max-width:66ch}

/* --- Warum keine Dauer: schmal gesetzt, damit es ankommt ----------- */
/* Überschrift links, Begründung rechts. Zuerst stand hier ein einge-
   rückter Block mit linker Linie — der schob die Überschrift auf 125px,
   während jede andere H2 der Seite auf 81 steht. Zweispaltig bleibt die
   Kante erhalten UND die Breite wird genutzt. */
.gs-termin__innen{
  display:grid;grid-template-columns:minmax(260px,32%) minmax(0,1fr);
  gap:clamp(32px,4vw,72px);
  align-items:start;
  border-top:1px solid var(--linie);padding-top:40px;
}
.gs-termin h2{
  font-family:'Marcellus',Georgia,serif;
  font-size:clamp(24px,2.6vw,34px);line-height:1.15;
  color:var(--heading);margin:0;text-wrap:balance;
}
.gs-termin__text{max-width:62ch}
.gs-termin p{font-size:17px;line-height:1.75;color:var(--text);margin:0 0 18px}
.gs-termin p:last-child{margin-bottom:0}
.gs-termin strong{color:var(--heading);font-weight:500}

/* --- Was nichts kostet -------------------------------------------- */
.gs-frei__kopf{margin-bottom:var(--luft-inhalt)}
.gs-frei h2{
  font-family:'Marcellus',Georgia,serif;
  font-size:clamp(26px,2.8vw,38px);line-height:1.1;
  color:var(--heading);margin:0;
}
.gs-frei__liste{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.5vw,64px);
}
.gs-frei__liste li{border-top:1px solid var(--linie);padding-top:22px}
.gs-frei__liste h3{
  font-family:'Marcellus',Georgia,serif;
  font-size:20px;line-height:1.25;margin:0 0 10px;color:var(--heading);
}
.gs-frei__liste p{font-size:15.5px;line-height:1.7;color:var(--text);margin:0}

/* --- Goldschmiede auf schmalen Schirmen -----------------------------
   Hinter den Grundregeln, sonst wirkungslos — dieselbe Falle wie zweimal
   zuvor: Medienabfragen erhöhen die Spezifität nicht.
   -------------------------------------------------------------------- */
@media (max-width:900px){
  .gs-frei__liste{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .gs-fall{grid-template-columns:1fr;gap:12px;padding:26px 0}
  .gs-frei__liste{grid-template-columns:1fr;gap:26px}
  .gs-hero,.gs-sprechstunde,.gs-termin,.gs-frei{margin-top:var(--luft-m)}
  .gs-hero__zusatz{flex-direction:column;gap:8px}
  .gs-hero__zusatz span + span::before{display:none}
  .gs-termin__innen{grid-template-columns:1fr;gap:16px;padding-top:26px}
}

/* --- Kontakt: Eindrücke, Standort, Formular ------------------------
   Die Seite, auf der jemand entscheidet, ob er herkommt. Adresse und
   Formular beantworten das Wie, nicht das Wohin — deshalb zuerst drei
   Aufnahmen vom Ort.
   -------------------------------------------------------------------- */
.ko-eindruecke{
  max-width:var(--tr-deckel);margin:var(--luft-m) auto 0;padding:0 var(--tr-rand);
}
.ko-eindruecke__liste{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px);
}
.ko-eindruecke__liste img{
  width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover;
  border-radius:16px;
}

/* --- Standort: ein Schild, kein Stadtplan ------------------------- */
.ko-standort{
  display:block;margin-top:var(--luft-inhalt);
  border:1px solid var(--linie);border-radius:20px;overflow:hidden;
  background:var(--weiss);color:inherit;
  transition:border-color var(--t-normal) linear;
}
.ko-standort:hover{border-color:rgba(28,28,28,.24)}
/* Waagerecht statt hochkant. Als 16:9-Feld mit Text darunter war die
   Karte 480px hoch — die linke Spalte wurde dadurch so viel länger als
   das Formular, dass rechts daneben 450px Nichts standen. */
.ko-standort{display:grid;grid-template-columns:minmax(150px,38%) 1fr;align-items:stretch}
.ko-standort__feld{
  position:relative;display:flex;align-items:center;justify-content:center;
  background:var(--creme-dunkel);overflow:hidden;min-height:170px;
}
/* Zwei Ringe um die Marke — sie zeigen „hier", ohne eine Karte zu
   behaupten, die es nicht gibt. */
.ko-standort__ring{
  position:absolute;width:96px;height:96px;border-radius:50%;
  border:1px solid rgba(28,28,28,.14);
}
.ko-standort__ring--aussen{width:152px;height:152px;border-color:rgba(28,28,28,.08)}
.ko-standort__marke{
  position:relative;width:104px;height:auto;display:block;
}
.ko-standort__text{display:block;padding:22px 24px}
.ko-standort__adresse{
  display:block;font-family:'Marcellus',Georgia,serif;
  font-size:18px;line-height:1.3;color:var(--heading);
}
.ko-standort__wege{
  display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:10px;
  font-size:14px;color:var(--text);
}
.ko-standort__wege span{display:inline-flex;align-items:center;gap:10px}
.ko-standort__wege span + span::before{
  content:'';width:3px;height:3px;border-radius:50%;background:var(--linie);
  flex:none;margin-right:12px;
}
.ko-standort__knopf{
  display:inline-flex;align-items:center;gap:10px;margin-top:14px;min-height:44px;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--heading);
  border-bottom:1px solid var(--linie);
}
.ko-standort__knopf svg{transition:transform .5s var(--kurve-auf)}
.ko-standort:hover .ko-standort__knopf svg{transform:translate(3px,-3px)}

/* --- Formular ------------------------------------------------------ */
.ko-paar{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.ko-anliegen{border:0;margin:0 0 var(--luft-s);padding:0;min-width:0}
.ko-anliegen legend{
  padding:0;margin-bottom:14px;
  font-size:13px;letter-spacing:.06em;color:var(--text-dunkel);
}
.ko-anliegen__chips{display:flex;flex-wrap:wrap;gap:10px}
.ko-chip{position:relative;display:inline-flex}
/* Das Auswahlfeld bleibt bedienbar und anspringbar, es liegt nur
   unsichtbar über der Schaltfläche — sonst verlöre die Tastatur den
   Zugriff. */
.ko-chip input{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:pointer;
}
.ko-chip span{
  display:inline-flex;align-items:center;min-height:44px;padding:0 20px;
  border:1px solid var(--linie);border-radius:999px;
  font-size:15px;color:var(--text-dunkel);background:var(--weiss);
  transition:border-color var(--t-normal) linear,
             background-color var(--t-normal) linear,
             color var(--t-normal) linear;
}
.ko-chip:hover span{border-color:rgba(28,28,28,.28)}
.ko-chip input:focus-visible + span{outline:2px solid var(--heading);outline-offset:2px}
.ko-chip input:checked + span{
  background:var(--heading);border-color:var(--heading);color:var(--creme);
}

/* --- Herkommen: eine Sektion, zwei Spalten ------------------------
   Ersetzt „So finden Sie uns" plus „Anfahrt aus der Region" plus das
   grosse Ladenbild dazwischen. Die Fassade stand damit dreimal auf einer
   Seite; die drei Aufnahmen ganz oben genügen.
   -------------------------------------------------------------------- */
.ko-weg{max-width:var(--tr-deckel);margin:var(--luft-l) auto 0;padding:0 var(--tr-rand)}
.ko-weg__kopf{max-width:60ch;margin-bottom:var(--luft-m)}
.ko-weg h2{
  font-family:'Marcellus',Georgia,serif;
  font-size:clamp(28px,3.2vw,44px);line-height:1.1;letter-spacing:-.015em;
  color:var(--heading);margin:0 0 18px;
}
.ko-weg__vorspann{font-size:17px;line-height:1.7;color:var(--text);margin:0;max-width:54ch}
.ko-weg__raster{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,88px);
  align-items:start;
}
.ko-weg__titel{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dunkel);margin:0 0 6px;font-weight:400;
}
.ko-weg__liste{list-style:none;margin:0;padding:0}
.ko-weg__liste li{
  display:grid;grid-template-columns:minmax(120px,32%) minmax(0,1fr);
  gap:clamp(16px,2vw,32px);align-items:baseline;
  padding:22px 0;border-top:1px solid var(--linie);
}
.ko-weg__liste li:last-child{border-bottom:1px solid var(--linie)}
.ko-weg__von{
  font-family:'Marcellus',Georgia,serif;
  font-size:18px;line-height:1.3;color:var(--heading);
}
.ko-weg__wie{font-size:15.5px;line-height:1.7;color:var(--text)}
.ko-weg__wie strong{color:var(--heading);font-weight:500}

/* --- Kontaktseite -------------------------------------------------- */
.ko-raster{
  display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:56px;
  align-items:start;
  margin:var(--luft-m) auto 0;padding:0 var(--tr-rand);max-width:var(--tr-deckel);
}
.ko-daten h2{
  font-family:'Marcellus',Georgia,serif;
  font-size:clamp(26px,2.4vw,34px);line-height:1.2;margin:0 0 28px;
}
.ko-adresse{
  font-family:'Inter',sans-serif;font-style:normal;
  font-size:17px;line-height:30px;color:var(--heading);margin:0 0 32px;
}
.ko-zeile{display:flex;gap:12px;align-items:baseline;font-size:15.5px;line-height:26px;margin:0 0 12px}
.ko-etikett{flex:0 0 74px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dunkel)}
/* Deutlich mehr Luft: Adressblock und Öffnungszeiten klebten aneinander
   und lasen sich wie ein einziger Absatz. */
.ko-untertitel{
  font-family:'Marcellus',Georgia,serif;
  font-size:21px;line-height:1.3;margin:var(--luft-inhalt) 0 18px;color:var(--heading);
}
.ko-zeiten{border-collapse:collapse;width:100%;max-width:420px}
.ko-zeiten th,.ko-zeiten td{
  text-align:left;font-weight:400;font-size:15px;line-height:24px;
  padding:13px 0;border-bottom:1px solid var(--linie);
}
.ko-zeiten th{color:var(--heading)}
.ko-zeiten td{text-align:right;color:var(--text)}
.ko-hinweis{font-size:15px;line-height:26px;margin:var(--luft-s) 0 0;max-width:var(--zeile)}

.ko-formular h2{
  font-family:'Marcellus',Georgia,serif;
  font-size:clamp(26px,2.4vw,34px);line-height:1.2;margin:0 0 12px;
}
.ko-vorspann{font-size:15px;line-height:25px;margin:0 0 26px;max-width:var(--zeile)}
/* Das Auswahlfeld hat keinen schwebenden Beschriftungstext — ein select ist
   nie „leer", die Beschriftung müsste also dauerhaft oben stehen. */
.feld--auswahl > label{
  position:static;transform:none;font-size:13px;display:block;margin-bottom:6px;
  color:var(--text);
}
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Karte: Bild mit Verweis statt eingebetteter Google-Karte ------- */
.ko-karte{margin:var(--luft-l) auto 0;padding:0 var(--tr-rand);max-width:var(--tr-deckel)}
.ko-karte__inner h2{font-size:clamp(22px,1.9vw,26px);line-height:1.3;margin:0 0 var(--luft-s)}
.ko-karte__flaeche{
  display:block;position:relative;overflow:hidden;border-radius:4px;
  border:1px solid rgba(28,28,28,.12);
}
.ko-karte__flaeche img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  transform:scale(1);transition:transform 500ms var(--ease);
}
.ko-karte__flaeche:hover img,.ko-karte__flaeche:focus-visible img{transform:scale(1.03)}
.ko-karte__flaeche:focus-visible{outline-offset:-4px}
.ko-karte__knopf{
  position:absolute;left:20px;bottom:20px;
  display:inline-flex;align-items:center;gap:9px;min-height:44px;
  padding:12px 22px;border-radius:var(--radius-pille);
  background:var(--weiss);color:var(--heading);font-size:15px;
  box-shadow:0 8px 22px -12px rgba(28,28,28,.42);
}
.ko-karte__flaeche:hover .ko-karte__knopf{background:var(--navy);color:var(--weiss)}

/* --- Sachkarten: Aufzählungen, die einzeln lesbar bleiben müssen ----
   Kein Bild, keine Nummer — jede Karte beantwortet für sich eine Frage.
   Genau so zitieren KI-Systeme einzelne Absätze, deshalb steht in jeder
   Karte auch der Zusammenhang und kein „siehe oben". */
.tr-sachen{margin:var(--luft-l) auto 0;padding:0 var(--tr-rand);max-width:var(--tr-deckel)}
.tr-sachen__kopf{max-width:var(--zeile);margin:0 0 var(--luft-inhalt)}
.tr-sachen__kopf h2{font-size:clamp(26px,2.4vw,34px);line-height:1.24;margin:0 0 var(--luft-s)}
.tr-sachen__kopf p{font-size:15.5px;line-height:25px;margin:0}
.tr-sachen__raster{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px 32px;
  list-style:none;margin:0;padding:0;
}
.tr-sachkarte{
  border-top:1px solid var(--linie);padding-top:20px;
}
.tr-sachkarte h3{font-size:19px;line-height:26px;margin:0 0 10px;color:var(--heading)}
.tr-sachkarte p{font-size:14.5px;line-height:24px;margin:0;max-width:var(--zeile)}

/* --- Häufige Fragen ------------------------------------------------ */
.tr-faq{margin:var(--luft-l) auto 0;padding:0 var(--tr-rand) 96px;max-width:var(--tr-deckel)}
.tr-faq h2{text-align:center;font-size:clamp(24px,2.1vw,32px);line-height:1.28;margin:0 0 var(--luft-inhalt)}
.tr-faq__raster{
  display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;align-items:start;
}
.tr-frage{background:var(--weiss);border:1px solid var(--linie)}
.tr-frage summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:44px;padding:18px 22px;
  font-family:'Marcellus',Georgia,serif;font-size:17px;line-height:24px;color:var(--heading);
  transition:color var(--t-normal) linear;
}
.tr-frage summary::-webkit-details-marker{display:none}
.tr-frage summary::after{
  content:'+';flex:none;font-family:'Inter',sans-serif;font-size:19px;line-height:1;
  color:var(--rose);transition:transform var(--t-normal) var(--ease);
}
.tr-frage[open] summary::after{content:'−'}
.tr-frage summary:hover{color:var(--rose)}
.tr-frage__antwort{padding:0 22px 20px}
.tr-frage__antwort p{font-size:14.5px;line-height:24px;margin:0;max-width:var(--zeile)}

/* -------------------------------------------------------------------
   19. Breakpoints
   ------------------------------------------------------------------- */
@media (min-width:1024px){
  .kopf__mobil{display:none}
  .kopf__desktop{display:block}
  /* Auf dem Schreibtisch gibt es keinen Menüknopf mehr, also darf das
     Menü dort auch nicht im Weg stehen — auch nicht unsichtbar. */
  .menue{display:none}
  /* Platzhalter, damit der fixierte Kopf keinen Sprung erzeugt */
  .kopf.is-sticky{padding-top:172px}
}

@media (max-width:1200px){
  :root{--rand:30px;--tr-rand:32px}
  /* Der Bildblock ist durch die Höhengrenze fest 566px breit. Darunter
     bliebe für die Textspalte nur noch rund 320px, also gut 43 Zeichen
     je Zeile. Deshalb ab hier untereinander. */
  .tr-block,
  .tr-block--gespiegelt{grid-template-columns:1fr;row-gap:30px}
  .tr-block--gespiegelt .tr-block__text{grid-column:1;grid-row:1}
  .tr-block--gespiegelt .tr-block__bilder{grid-column:1;grid-row:2}
  .kachel{flex:0 0 calc((100% - 30px) / 4)}
}
@media (max-width:1024px){
  h1,.h1{font-size:36px;line-height:46px}
  h2,.h2{font-size:34px;line-height:44px}
  .kachel{flex:0 0 calc((100% - 20px) / 3)}
  /* Textspalte bekommt mehr Anteil, sonst wird sie unlesbar schmal */
  .hero__grid{grid-template-columns:40fr 60fr;gap:24px}
  .vertrauen__grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,auto)}
  .vertrauen__titel{font-size:22px;line-height:29px}
  .vertrauen__punkt{padding:32px 26px 36px}
  .vertrauen__punkt:nth-child(2n+1){padding-left:0}
  .vertrauen__punkt:nth-child(2n){padding-right:0}
  .vertrauen__punkt:nth-child(2n+1)::before{content:none}
  .vertrauen__punkt:nth-child(n+3){border-top:1px solid var(--linie)}
  .instagram__grid{grid-template-columns:repeat(3,1fr)}
  .stimme{flex:0 0 calc((100% - 20px) / 2)}   /* zwei je Folie */
  .split{gap:40px}
  /* Unterseite Trauringe */
  .tr-ablauf__kopf{margin-bottom:38px}
  .tr-faq__raster{gap:12px 16px}
  .fuss{padding:0 24px}
  .fuss__flaeche{padding:44px}
  /* Drei Spalten oben, der Standortblock darunter über die volle Breite. */
  .fuss__raster{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
  .fuss__standort{grid-column:1 / -1;border-top:1px solid var(--linie);padding-top:32px}
  .rg-rechner__raster{grid-template-columns:1fr;gap:34px}
  .rg-ergebnis{text-align:left}
  .vr-sorgen__karten{grid-template-columns:1fr;gap:18px}
  /* Unter 1024px hat der Bildanker keinen Platz mehr neben dem Text. */
  .vr-preis__raster{grid-template-columns:1fr;row-gap:32px}
  .vr-preis__text{grid-column:1}
  .vr-preis__anker{grid-column:1;order:-1;max-width:420px}
  .vr-preis__ankerinner{position:static}
  .vr-wege{grid-template-columns:1fr;row-gap:0}
  .vr-wege li{padding:22px 0}
  .vr-wege li + li{border-left:0;border-top:1px solid var(--linie);padding-left:0}
  .vr-wege .vr-wege__wichtig{padding:28px 30px;margin-top:14px;border-top:0}
  .vr-formen__raster{grid-template-columns:repeat(3,1fr);gap:18px}
  .vr-diskret__inner{grid-template-columns:1fr;gap:26px}
  .vr-c__zeile{grid-template-columns:1fr;gap:8px}
  .tr-sachen__raster{grid-template-columns:1fr 1fr;gap:24px 28px}

  /* Unter 1024px reicht die Breite für zwei Spalten nicht mehr: das
     Materialband käme auf 172px breite Karten. Untereinander. */
  .tr-material__raster{grid-template-columns:1fr;gap:30px}

  .moment__karten{gap:26px}
  .moment__karte:nth-child(1) .moment__bild{height:400px}
  .moment__karte:nth-child(2) .moment__bild{height:490px}
  .moment__karte:nth-child(3) .moment__bild{height:430px}
  /* Versatz halbiert, sonst wird die Sektion auf schmalen Fenstern zu hoch */
  .moment__karte:nth-child(2){margin-top:45px}
  .moment__karte:nth-child(3){margin-top:22px}
  .moment__titel{font-size:23px;line-height:30px}
}
/* Unter 900px trägt die Anordnung um den Stein herum nicht mehr: der
   Stein oben, die vier Blöcke darunter, alle linksbündig. Der Einflug
   wird vereinfacht — alle vier kommen von unten. */
@media (max-width:900px){
  .ga-ablauf__raster{grid-template-columns:1fr;gap:var(--luft-m)}
  .ga-ablauf__belegkarte{position:static;max-width:420px}

  .siegel__raster{grid-template-columns:360px 1fr;gap:40px}

  /* Einspaltig. Die Bewertungskarte rutscht unter das Bild — auf einem
     schmalen Schirm würde sie sonst das halbe Motiv verdecken. */
  .ga-hero{grid-template-columns:1fr;gap:40px}
  .ga-h1{font-size:34px}
  .ga-vorspann{font-size:16.5px}
  /* Randlos über die volle Breite: Der Hero hat links wie rechts den
     Seitenrand als Innenabstand, den holt die Karte auf beiden Seiten
     zurück. Oben bleibt die Rundung, unten läuft sie aus. */
  .ga-slider{
    width:auto;
    margin-left:calc(-1 * var(--tr-rand));
    margin-right:calc(-1 * var(--tr-rand));
  }
  .ga-slider__karte{height:auto;aspect-ratio:4/5;border-radius:0}
  .ga-pfeil--zurueck{left:16px}
  .ga-pfeil--vor{right:16px}
  .ga-stimmen{
    position:static;width:auto;max-width:none;margin:16px var(--tr-rand) 0;
  }
  .ga-stimme{
    box-shadow:0 2px 14px rgba(28,28,28,.08);
    border:1px solid var(--linie);
  }
  /* Auf der breiteren Karte passen die Zitate in zwei Zeilen. */
  .ga-stimme blockquote{min-height:44px}

  .vr-c{grid-template-columns:1fr;row-gap:34px}
  .vr-c__block--carat,.vr-c__block--colour,
  .vr-c__block--clarity,.vr-c__block--cut{
    grid-column:1;grid-row:auto;text-align:left;
  }
  .vr-c__block--carat dd,.vr-c__block--clarity dd{margin-left:0}
  .vr-c__stein{grid-column:1;grid-row:1;width:200px;justify-self:center}
  html.js-anim .vr-c__block--carat,html.js-anim .vr-c__block--colour,
  html.js-anim .vr-c__block--clarity,html.js-anim .vr-c__block--cut{
    transform:translateY(20px);
  }
  html.js-anim [data-stufen].ist-sichtbar .vr-c__block--carat  {transition-delay:.1s}
  html.js-anim [data-stufen].ist-sichtbar .vr-c__block--colour {transition-delay:.2s}
  html.js-anim [data-stufen].ist-sichtbar .vr-c__block--clarity{transition-delay:.3s}
  html.js-anim [data-stufen].ist-sichtbar .vr-c__block--cut    {transition-delay:.4s}
}
@media (max-width:880px){
  .kachel{flex:0 0 calc((100% - 10px) / 2)}
  /* Ab hier untereinander: nebeneinander wäre beides zu schmal.
     Der Bildblock wird umsortiert — ein breites Bild oben, zwei darunter.
     Drei schmale Spalten nebeneinander wären auf dem Handy zu klein. */
  .hero{min-height:0;padding:28px var(--rand) 48px;display:block}
  .hero__grid{grid-template-columns:1fr;gap:30px}
  .hero__text{max-width:none}
  .hero__collage{
    height:auto;min-height:0;aspect-ratio:auto;
    grid-template-columns:1fr 1fr;grid-template-rows:auto auto;
  }
  .hero__bild-gross{grid-column:1 / -1;grid-row:1}
  .hero__bild-gross img{aspect-ratio:4/3}
  .hero__bild-klein img{aspect-ratio:1/1}
}
@media (max-width:767px){
  /* 140px wirken auf einem 375px-Schirm wie eine leere Seite. */
  :root{--rand:15px;--tr-rand:20px;--luft-l:96px;--luft-xl:128px}
  body{font-size:14px}
  h1,.h1{font-size:27px;line-height:34px}
  h2,.h2{font-size:34px;line-height:42px}

  .hero{padding:24px var(--rand) 40px}

  .split{grid-template-columns:1fr;gap:26px}
  .split__text{max-width:none}
  /* Bild auf kleinen Geräten unter den Text */
  .split__bild{order:2}

  .sortiment{padding:10px var(--rand) 40px}
  .kachel{flex:0 0 88%}
  .kachel__titel{font-size:24px;line-height:30px}

  .goldankauf{padding:50px var(--rand)}

  /* --- Unterseite Trauringe, Handy --- */
  .tr-kopf{padding:22px var(--rand) 20px}
  .tr-einleitung{font-size:14.5px;line-height:23px}
  /* Hero einspaltig: großes Bild oben, schmales darunter. Feste Höhen
     statt einer Gesamthöhe, sonst würden beide zu flach. */
  .tr-hero{grid-template-columns:1fr;height:auto;gap:8px}
  .tr-hero__gross{height:56vw;min-height:230px}
  .tr-hero__schmal{height:74vw;min-height:300px}
  .tr-hero__knopf{left:15px;bottom:15px;padding:12px 22px;font-size:13.5px}
  .tr-hero__label{right:15px;bottom:15px}
  .tr-hero__label-gross{font-size:19px;line-height:24px}

  .tr-block,
  .tr-block--gespiegelt{grid-template-columns:1fr;gap:26px}
  .tr-block--gespiegelt .tr-block__text{grid-column:1;grid-row:1}
  .tr-block--gespiegelt .tr-block__bilder{grid-column:1;grid-row:2}
  /* NICHT max-width:none. Diese Regel gilt bis 767px — bei 340px Breite
     wirkt kein Deckel, bei 760px (großes Handy quer, kleines Tablet) lief
     der Text ohne ihn auf über 90 Zeichen je Zeile. --zeile bindet nur
     dort, wo es nötig ist. */
  .tr-block__text p{max-width:var(--zeile)}
  /* Bildpaar bleibt nebeneinander, füllt aber die volle Breite */
  /* Kein width:100% mehr — die 566px aus der Höhengrenze gelten auch
     hier, sonst liefe das große Bild bei 767px auf 544px Höhe. */
  .tr-block__bilder img:nth-child(2){margin-top:24px}
  .tr-block--gespiegelt .tr-block__bilder img:nth-child(1){margin-top:24px}
  /* --- Beratungsschritte untereinander, Linie senkrecht links --- */
  .tr-ablauf__kopf{margin-bottom:32px}
  .tr-stufen{grid-template-columns:1fr;gap:0}   /* senkrecht: Abstand über padding */
  .tr-stufe{padding:0 0 34px 30px}
  .tr-stufe:last-child{padding-bottom:0}
  .tr-stufe__linie{top:6px;bottom:0;left:0;right:auto;width:1px;height:auto}
  .tr-stufe__linie::after{left:-2.5px;top:0}
  .tr-stufe__ziffer{font-size:40px;margin-bottom:14px}
  .tr-ablauf__fuss{margin-top:32px;padding-left:30px}

  .tr-material__raster{grid-template-columns:1fr;gap:26px}
  /* Gewischt wird trotzdem — die benannten Knöpfe bleiben aber stehen,
     weil sie ansagen, was als nächstes kommt. Je zur Hälfte, damit die
     Zeile auch bei langen Materialnamen nicht umbricht. */
  .js .tr-material__nav{gap:12px}
  .tr-matknopf{flex:1 1 0;min-width:0;padding:8px 12px;gap:8px}
  .tr-matknopf__text{min-width:0}
  .tr-matknopf__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tr-matknopf__name{font-size:15.5px}
  .tr-materialien{--kartenluecke:14px}
  .tr-karte{flex:0 0 84%}

  .tr-galerie__kopf{margin-bottom:26px}
  .tr-galerie__raster{grid-template-columns:1fr 1fr;gap:10px}


  /* Streifen als 2x2 */

  .tr-aufruf{padding:44px var(--rand) 48px}
  .tr-weiter__karten{grid-template-columns:1fr;gap:20px}
  /* Untereinander wirkt 16:10 zu hoch — flacher schneiden. */
  .tr-weiterkarte__bild img{aspect-ratio:16/9}
  .tr-weiterkarte__text{padding:26px 22px 24px}
  .tr-weiterkarte .btn{width:100%;justify-content:center}
  /* Fußbereich: Fläche näher an den Rand, alles untereinander. */
  .fuss{padding:0 16px}
  .fuss__flaeche{border-radius:16px;padding:32px}
  .fuss__logo{margin-bottom:36px}
  .fuss__logo img{width:140px}
  .fuss__schnell{flex-direction:column;align-items:flex-start;gap:2px}
  .fuss__punkt{display:none}
  .fuss__raster{grid-template-columns:1fr;gap:34px}
  .fuss__standort-titel{font-size:23px}
  .fuss__unten{flex-direction:column;align-items:center;text-align:center;margin-top:36px}
  .fuss__bewertung{flex-direction:column;gap:6px}
  .fuss__recht{padding:24px 4px 32px;text-align:center}
  .fuss__recht ul{justify-content:center;gap:4px 18px}
  .rg-werkzeug__inner{padding:28px 22px 32px}
  .rg-rechner__wahl{gap:18px;margin-bottom:24px}
  .rg-eingabe input{font-size:26px}
  .rg-ergebnis__zahl{font-size:52px}
  .rg-tabelle th,.rg-tabelle td{padding:11px 16px 11px 0;font-size:15px}
  .rg-tabelle tbody th{font-size:17px;padding-right:14px}
  .vr-preis__anker{max-width:none}
  /* Ziffer links neben der Überschrift statt darüber. */
  /* Gewicht: `.vr-wege li + li` aus der 1024er Regel wiegt (0,1,2) und
     setzt padding-left auf 0. Eine einfache `li`-Regel (0,1,1) käme
     dagegen nicht an — der zweite und dritte Weg stünden ohne Einzug
     unter ihrer Ziffer. Deshalb hier beide Selektoren. */
  .vr-wege li,
  .vr-wege li + li{position:relative;padding:20px 0 20px 56px}
  .vr-wege__ziffer{position:absolute;left:0;top:18px;font-size:40px;margin:0}
  .vr-wege .vr-wege__wichtig{padding:24px 22px 26px 56px}
  .vr-wege__wichtig .vr-wege__ziffer{left:18px;top:24px}
  .vr-sorge{padding:24px 22px 26px}
  /* Waagerecht nebeneinander wären die drei Preisbereiche auf dem Handy
     je 100px breit — untereinander, mit Linie statt Spaltentrennung. */
  .vr-skala__bereiche{grid-template-columns:1fr}
  .vr-bereich{padding:18px 0 0}
  .vr-bereich + .vr-bereich{border-left:0;border-top:1px solid var(--linie);padding-left:0}
  .vr-preis__text{margin-top:32px}
  .vr-wege li{padding:18px 0 18px 46px}
  .vr-wege li::before{font-size:22px;top:17px}
  .vr-wege .vr-wege__wichtig{padding:24px 22px 26px 46px}
  .vr-wege .vr-wege__wichtig::before{left:20px;top:24px}
  .vr-formen__raster{grid-template-columns:1fr 1fr;gap:12px}
  .vr-diskret{padding:44px 0 48px}
  .ko-raster{grid-template-columns:1fr;gap:36px}
  .ko-karte__knopf{left:12px;bottom:12px;padding:11px 16px;font-size:14px}
  .tr-sachen__kopf{margin-bottom:28px}
  .tr-sachen__raster{grid-template-columns:1fr;gap:22px}
  .tr-faq{padding:0 var(--tr-rand) 60px}
  .tr-faq h2{margin-bottom:24px}
  .tr-faq__raster{grid-template-columns:1fr}
  .tr-frage summary{font-size:16px;padding:16px 18px}
  .tr-frage__antwort{padding:0 18px 18px}

  .partner{padding:48px var(--rand) 54px}
  .partner__kopf{margin-bottom:34px}
  .partner__logo{height:calc(42px * var(--k,1));max-width:calc(110px * var(--k,1))}
  .partner__punkt{margin-right:55px}
  .partner__spur{animation-duration:28s}
  .partner__band::before,.partner__band::after{width:70px}

  /* Karten untereinander, kein Versatz, einheitliche Bildhöhe.
     Der Zoom entfällt — auf kleinen Flächen wirkt er unruhig. */
  .moment{padding:48px var(--rand) 58px}
  .moment__kopf{margin-bottom:34px}
  .moment__karten{grid-template-columns:1fr;gap:34px}
  .moment__karte:nth-child(2),
  .moment__karte:nth-child(3){margin-top:0}
  .moment__karte:nth-child(1) .moment__bild,
  .moment__karte:nth-child(2) .moment__bild,
  .moment__karte:nth-child(3) .moment__bild{height:420px}
  .moment__karte:nth-child(2){--verzug:100ms}
  .moment__karte:nth-child(3){--verzug:200ms}
  html.js-anim .moment__karte{transform:translate3d(0,20px,0)}
  html.js-anim .moment__bild img,
  html.js-anim .moment__karte.is-drin .moment__bild img{transform:none;transition:none}
  .moment__titel{font-size:23px;line-height:30px}

  /* Schmuck: auf dem Handy bleibt es beim ruhigen Band — die Laufstrecke
     ist ab 900px aufwärts geschaltet. Eine Aufnahme je Blick, die nächste
     schaut am Rand herein, damit das Wischen erkennbar ist. */
  .schmuck{padding:48px 0 60px}
  .schmuck__schlagzeile{font-size:clamp(34px,10vw,54px)}
  .schmuck__text{margin-top:26px}
  .schmuck__zug{margin-top:34px}

  /* Vertrauenspunkte einspaltig: zwei Spalten wären hier je 172px breit,
     darin bricht "Goldschmiede-Werkstatt" unbrauchbar um. Die senkrechten
     Linien entfallen, waagerechte gliedern stattdessen. */
  .vertrauen{padding:56px var(--rand) 60px}
  .vertrauen__grid{grid-template-columns:1fr;grid-template-rows:repeat(8,auto)}
  .vertrauen__punkt{padding:26px 0 30px}
  .vertrauen__punkt::before{content:none}
  .vertrauen__punkt:nth-child(n+2){border-top:1px solid var(--linie)}
  .vertrauen__titel{font-size:21px;line-height:28px}

  .stimmen{padding:34px 0 38px}
  .stimmen__kopf{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:22px}
  .stimme{flex:0 0 88%;padding:24px 24px 22px}

  .instagram{padding:5px var(--rand) 70px}
  .instagram__grid{grid-template-columns:repeat(2,1fr);margin-bottom:30px}

  .fuss{padding:48px var(--rand) 34px}
  .fuss__grid{grid-template-columns:1fr;gap:32px}

  .cookie{padding:18px var(--rand)}
  .cookie__inner{gap:16px}
}

/* -------------------------------------------------------------------
   20. Ohne JavaScript: Navigation muss erreichbar bleiben
   ------------------------------------------------------------------- */
.keine-js .menue{
  position:static;transform:none;visibility:visible;opacity:1;
  height:auto;overflow:visible;
  background:var(--weiss);border-bottom:1px solid var(--linie);
}
.keine-js .menue__punkte{margin:0;padding:12px 0}
.keine-js .menue__zu,.keine-js .burger{display:none}
.keine-js .nach-oben,.keine-js .cookie{display:none}

/* -------------------------------------------------------------------
   21. Bewegung reduzieren — schaltet alle Animationen ab
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    transition-delay:0ms!important;
    scroll-behavior:auto!important;
  }
  html.js-anim .anim{opacity:1!important;transform:none!important}
  /* Kein Überblenden im Goldankauf-Slider — der Wechsel erfolgt hart.
     Das automatische Weiterschalten unterbindet das Skript selbst. */
  .js .ga-slider.laeuft .ga-bild,
  .js .ga-slider.laeuft .ga-stimme,
  .ga-pfeil,.ga-pfeil__zeichen{transition:none!important}
  /* Auch das Schweben des Steins steht still. */
  .vr-c__steininner,.vr-c__steininner > *{animation:none!important}
  html.js-anim .vr-c__block,html.js-anim .vr-c__stein,
  html.js-anim .vr-wege li{opacity:1!important;transform:none!important}
  html.js-anim .vr-wege__ziffer{opacity:.2!important}
  html.js-anim .vr-wege__wichtig .vr-wege__ziffer{opacity:1!important}
  /* Die Bühne wird bei reduzierter Bewegung gar nicht erst gesetzt.
     Diese Regel ist das zweite Netz, falls die Klasse doch am Element
     hängt: Aufnahmen sofort sichtbar, kein Einfliegen. */
  .schmuck--buehne .schmuckbild{opacity:1!important;transform:none!important}

  /* Partnerband steht still und wird zum ruhigen Raster */
  .partner__spur{
    animation:none;width:auto;
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:40px;justify-items:center;align-items:center;
  }
  .partner__punkt{margin-right:0}
  .partner__punkt[aria-hidden]{display:none}   /* nur der eine echte Satz */
  .partner__band{margin-inline:0}
  .partner__band::before,.partner__band::after{content:none}
  .partner__logo{filter:none;opacity:1}

  html.js-anim .tr-block__bilder img{opacity:1!important;transform:none!important}
  /* Neue Abschnitte: keine Bewegung, alles sofort da */
  html.js-anim [data-stufen] .tr-stufe,
  html.js-anim [data-stufen] .tr-karte,
  html.js-anim [data-stufen] .tr-galerie__raster > li{opacity:1!important;transform:none!important}
  html.js-anim .tr-stufe__linie{transform:none!important}
  .tr-lupe:hover img{transform:none}
  .tr-hero__knopf:hover{transform:none}
  .tr-pfeil{transition:none}

  html.js-anim .moment__karte{opacity:1!important;transform:none!important}
  html.js-anim .moment__bild img,
  html.js-anim .moment__karte.is-drin .moment__bild img{transform:none!important}
  .vertrauen__punkt::before{transform:scaleY(1)!important}
  .stimme:hover,.stimme:focus-within{transform:none}
  .karussell__spur{scroll-behavior:auto}
  .kachel:hover .kachel__bild img,
  .instagram__bild:hover img{transform:none}
}

/* Ruhendes Partnerraster auf dem Handy: zwei Spalten statt drei.
   Als kombinierte Abfrage statt verschachtelt — das versteht auch ein
   älterer Parser zuverlässig. */
@media (prefers-reduced-motion:reduce) and (max-width:767px){
  .partner__spur{grid-template-columns:repeat(2,1fr);gap:30px}
}

/* --- Kontakt auf schmalen Schirmen ----------------------------------
   Hinter den Grundregeln — Medienabfragen erhöhen die Spezifität nicht.
   -------------------------------------------------------------------- */
@media (max-width:900px){
  .ko-eindruecke__liste{grid-template-columns:1fr 1fr}
  .ko-eindruecke__liste li:last-child{display:none}
}
@media (max-width:900px){
  .ko-weg__raster{grid-template-columns:1fr;gap:var(--luft-m)}
}
@media (max-width:767px){
  .ko-weg__liste li{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .ko-standort{grid-template-columns:1fr}
  .ko-eindruecke__liste{grid-template-columns:1fr;gap:12px}
  .ko-eindruecke__liste li:last-child{display:block}
  .ko-paar{grid-template-columns:1fr;gap:0}
  .ko-standort__feld{aspect-ratio:3/2}
  .ko-standort__ring{width:104px;height:104px}
  .ko-standort__ring--aussen{width:168px;height:168px}
  .ko-standort__marke{width:108px}
  .ko-chip span{padding:0 16px;font-size:14.5px}
}

/* ====================================================================
   ÜBER UNS  —  eigene Ordnung, nichts geliehen
   --------------------------------------------------------------------
   Das Thema der Seite ist Zeit und Nachweis. Deshalb trägt sie zwei
   Dinge, die auf keiner anderen Unterseite vorkommen: eine Jahreszahl
   in Plakatgröße und ein dunkles Band. Beides gibt es genau einmal.

   Die Häuser stehen in einem Register mit Zellenlinien statt in Karten.
   Zwei Kartenraster hintereinander waren der Fehler der alten Fassung —
   und derselbe, den die Goldankaufseite hatte.

   REIHENFOLGE: Alle Medienabfragen stehen am Ende dieses Blocks, hinter
   ihren Grundregeln. Eine Medienabfrage erhöht die Spezifität nicht;
   stünde sie davor, gewänne die Grundregel auf jeder Fensterbreite.
   `werkzeuge/css_reihenfolge.py` prüft das bei jedem Bau.
   ==================================================================== */

/* --- 1. Auftakt --------------------------------------------------- */
.uu-auftakt{
  max-width:var(--tr-deckel);margin:var(--luft-m) auto 0;
  padding:0 var(--tr-rand);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.58fr);
  column-gap:clamp(32px,5vw,88px);row-gap:clamp(44px,5vw,76px);
  align-items:center;
}
.uu-auftakt__satz{grid-column:1;grid-row:1}
.uu-auftakt__bild{grid-column:2;grid-row:1;margin:0}
.uu-auftakt__bild img{display:block;width:100%;height:auto}
.uu-auftakt__zahlen{grid-column:1/-1;grid-row:2}

.uu-marke{
  font-family:'Inter',sans-serif;font-size:12px;line-height:1;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--heading-alt);margin:0 0 clamp(20px,2.4vw,30px);
}

.uu-auftakt__titel{display:block;margin:0}
.uu-auftakt__haus{
  display:block;font-size:clamp(19px,1.9vw,25px);line-height:1.25;
  color:var(--heading-alt);
}
/* Die Zahl ist das Bild dieser Seite. Sie steht in Marcellus wie jede
   Überschrift, nur eben in einer Größe, in der die Schrift ihre
   Serifen zeigt. Unter 78px wirkt sie nur groß, nicht gesetzt. */
.uu-auftakt__jahr{
  display:block;font-size:clamp(96px,12.5vw,168px);line-height:.9;
  letter-spacing:-.02em;color:var(--heading);
  margin:clamp(18px,2vw,26px) 0 clamp(14px,1.6vw,22px);
}
.uu-auftakt__seit{
  display:block;font-family:'Inter',sans-serif;
  font-size:12px;line-height:1;letter-spacing:.18em;text-transform:uppercase;
  color:var(--heading-alt);margin-bottom:clamp(14px,1.6vw,20px);
}
.uu-auftakt__ort{
  display:block;font-size:clamp(19px,1.9vw,25px);line-height:1.3;
  color:var(--heading-alt);
}
.uu-auftakt__vorspann{
  font-size:16px;line-height:1.75;color:var(--text);
  margin:clamp(24px,2.6vw,34px) 0 0;max-width:var(--zeile);
}

.uu-auftakt__zahlen{
  list-style:none;margin:0;padding:clamp(28px,3vw,44px) 0 0;
  border-top:1px solid var(--linie);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px);
}
.uu-auftakt__zahlen li{display:flex;flex-direction:column;gap:10px}
.uu-zahl{
  font-family:'Marcellus',Georgia,'Times New Roman',serif;
  font-size:clamp(30px,3.4vw,46px);line-height:1;color:var(--heading);
}
.uu-zahl__wort{font-size:14px;line-height:1.55;color:var(--text);max-width:24ch}

/* --- 2. Die beiden Urkunden --------------------------------------- */
.uu-urkunden{
  max-width:var(--tr-deckel);margin:var(--luft-l) auto 0;
  padding:0 var(--tr-rand);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(32px,5vw,80px);align-items:start;
}
.uu-urkunden__kopf h2{font-size:clamp(26px,2.6vw,38px);line-height:1.2;margin:0 0 var(--luft-s)}
.uu-urkunden__kopf p{font-size:16px;line-height:1.75;color:var(--text);margin:0 0 18px;max-width:var(--zeile)}
/* Vier zitierte Zeilen. Sie stehen in der Überschriftenschrift, weil
   sie nicht unser Text sind, sondern der der Urkunde — der Wechsel der
   Schrift ist hier das Anführungszeichen. */
.uu-urkunden__punkte{
  list-style:none;margin:clamp(26px,3vw,38px) 0 0;padding:0;
  border-top:1px solid var(--linie);
}
.uu-urkunden__punkte li{
  display:flex;gap:16px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--linie);
  font-family:'Marcellus',Georgia,'Times New Roman',serif;
  font-size:clamp(17px,1.5vw,21px);line-height:1.35;color:var(--heading);
}
.uu-urkunde__nr{
  font-family:'Inter',sans-serif;font-size:12px;line-height:1.6;
  letter-spacing:.1em;color:var(--heading-alt);flex:0 0 auto;width:26px;
}
.uu-urkunden__quelle{font-size:13.5px;line-height:1.7;color:var(--text);margin:22px 0 0}
.uu-urkunden__bild{margin:0}
.uu-urkunden__bild img{display:block;width:100%;height:auto}
.uu-urkunden__bild figcaption{font-size:13px;line-height:1.6;color:var(--text);margin-top:12px}

/* --- 3. Wer berät --------------------------------------------------
   Zwei Reihen mit je zwei Feldern. Die Bilder stehen über Eck — oben
   rechts, unten links —, weil eine Reihe mit nur einem Bild und leerem
   Nachbarn aussieht, als sei dort etwas verlorengegangen. Genau das war
   der Zustand vorher.

   Kein Zickzack aus Text und Bild: Das ist das Muster der
   Leistungsseiten (.tr-block), und die Über-uns-Seite soll nicht
   aussehen wie die.
   -------------------------------------------------------------------- */
.uu-beratung{
  max-width:var(--tr-deckel);margin:var(--luft-l) auto 0;
  padding:0 var(--tr-rand);
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:clamp(20px,2.6vw,40px);row-gap:clamp(36px,4vw,64px);
  align-items:center;
}
.uu-beratung__text{grid-column:1/7;grid-row:1}
.uu-beratung__ringpaar{grid-column:7/13;grid-row:1;margin:0}
.uu-beratung__auswahl{grid-column:1/9;grid-row:2;margin:0}
.uu-beratung__team{grid-column:9/13;grid-row:2}

.uu-beratung__ringpaar img,
.uu-beratung__auswahl img{display:block;width:100%;height:auto}
.uu-beratung__ringpaar figcaption,
.uu-beratung__auswahl figcaption{
  font-size:13px;line-height:1.6;color:var(--text);margin-top:12px;
}
.uu-beratung__text h2{font-size:clamp(26px,2.6vw,38px);line-height:1.2;margin:0 0 var(--luft-s)}
.uu-beratung__text p{font-size:16px;line-height:1.75;color:var(--text);margin:0 0 18px;max-width:var(--zeile)}
.uu-beratung__team h3{
  font-size:clamp(18px,1.6vw,22px);line-height:1.3;margin:0 0 14px;
}
/* Die Notiz an die Kundin. Zweiteiliger Selektor, damit sie den
   Absatzregeln gleichkommt und ohne !important gewinnt. */
.uu-beratung__team .uu-notiz{
  border-left:2px solid var(--linie);padding-left:18px;
  font-size:14.5px;line-height:1.7;color:var(--text);margin:0;
}

/* --- 4. Drei Zusagen: das einzige dunkle Feld der Seite ------------ */
.uu-zusagen{
  margin:var(--luft-xl) 0;background:var(--heading);
  padding:clamp(64px,8vw,120px) 0;
}
/* Der Rand sitzt INNEN, nicht am Band: Sonst begänne der Text bei 48px,
   während jede andere Überschrift der Seite bei 81px steht — das Band
   läuft über die volle Breite, sein Inhalt aber im selben Satzspiegel
   wie der Rest. Nachgemessen bei 1440px: beide Kanten bei 81px. */
.uu-zusagen__inner{
  max-width:var(--tr-deckel);margin:0 auto;padding:0 var(--tr-rand);
}
.uu-zusagen h2{
  color:var(--creme);font-size:clamp(28px,3.2vw,46px);line-height:1.18;
  margin:0 0 clamp(40px,5vw,72px);
}
.uu-zusagen__liste{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px);
}
.uu-zusagen__liste li{
  border-top:1px solid rgba(249,246,242,.26);
  padding-top:clamp(20px,2vw,28px);
}
.uu-zusagen__liste h3{
  color:var(--creme);font-size:clamp(19px,1.7vw,24px);line-height:1.3;margin:0 0 14px;
}
/* #CFC9C1 auf #1C1C1C ergibt 10,4:1 — die Regel des Hauses ist 4,5:1. */
.uu-zusagen__liste p{font-size:15.5px;line-height:1.75;color:#CFC9C1;margin:0}

/* --- 5. Register der Häuser ---------------------------------------- */
.uu-haeuser{max-width:var(--tr-deckel);margin:var(--luft-l) auto 0;padding:0 var(--tr-rand)}
.uu-haeuser__raster{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--linie);border-left:1px solid var(--linie);
}
.uu-haeuser__raster > li{
  border-right:1px solid var(--linie);border-bottom:1px solid var(--linie);
  padding:clamp(26px,2.6vw,40px);
}
.uu-haeuser__kopf h2{font-size:clamp(23px,2.2vw,30px);line-height:1.22;margin:0 0 16px}
.uu-haeuser__kopf p{font-size:15px;line-height:1.7;color:var(--text);margin:0}
.uu-haus{display:flex;flex-direction:column}
.uu-haus__nr{
  display:block;font-family:'Inter',sans-serif;font-size:12px;line-height:1;
  letter-spacing:.16em;color:var(--heading-alt);margin-bottom:clamp(26px,3vw,46px);
}
.uu-haus__name{font-size:clamp(19px,1.7vw,23px);line-height:1.25;margin:0 0 7px}
.uu-haus__rolle{
  font-family:'Inter',sans-serif;font-size:12px;line-height:1.4;
  letter-spacing:.12em;text-transform:uppercase;color:var(--heading-alt);margin:0 0 16px;
}
.uu-haus__text{font-size:15px;line-height:1.7;color:var(--text);margin:0}

/* --- Über uns auf schmalen Schirmen -------------------------------- */
@media (max-width:1100px){
  .uu-haeuser__raster{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .uu-auftakt{grid-template-columns:1fr}
  .uu-auftakt__satz{grid-column:1;grid-row:1}
  .uu-auftakt__bild{grid-column:1;grid-row:2}
  .uu-auftakt__zahlen{grid-column:1;grid-row:3;grid-template-columns:1fr 1fr}
  .uu-urkunden{grid-template-columns:1fr}
  .uu-beratung{grid-template-columns:1fr}
  .uu-beratung__text{grid-column:1;grid-row:1}
  .uu-beratung__ringpaar{grid-column:1;grid-row:2}
  .uu-beratung__auswahl{grid-column:1;grid-row:3}
  .uu-beratung__team{grid-column:1;grid-row:4}
  .uu-zusagen__liste{grid-template-columns:1fr;gap:0}
  .uu-zusagen__liste li{padding:clamp(22px,3vw,28px) 0}
}
@media (max-width:640px){
  .uu-haeuser__raster{grid-template-columns:1fr}
  .uu-haus__nr{margin-bottom:20px}
  .uu-auftakt__zahlen{gap:26px}
}

/* ====================================================================
   GALERIE  —  ein Bestand, ein Filter
   --------------------------------------------------------------------
   Das Raster ist ein SPALTENSATZ (columns), kein Gitter. Grund: Die 118
   Vorlagen haben drei verschiedene Formate — quadratische Produktbilder
   der Manufaktur, Hoch- und Querformat aus der Fotografie. In einem
   Gitter mit festem Verhältnis müsste jedes zweite Bild beschnitten
   werden, und beschnitten wird bei Ringen immer an der falschen Stelle.
   Im Spaltensatz behält jede Aufnahme ihre Höhe.

   OHNE JAVASCRIPT: `.keine-js` blendet Filterleiste und Zähler aus. Was
   bleibt, ist die vollständige Galerie — und jede Kachel ist ein <a>,
   das die große Bilddatei öffnet. Nichts hängt am Skript, außer der
   Bequemlichkeit.
   ==================================================================== */

/* Die Sektion hat KEINEN Deckel und KEINEN Rand — sonst könnte das
   Raster nicht bis an die Fensterkante laufen. Begrenzt wird nur der
   Kopfbereich, und zwar über `.gal-buehne`, damit die Überschrift im
   selben Satzspiegel steht wie auf jeder anderen Seite. */
.gal-schau{margin:var(--luft-m) 0 0}
.gal-buehne{
  max-width:var(--tr-deckel);margin:0 auto;
  padding:0 var(--tr-rand);
}
.gal-kopf{margin:0 0 clamp(32px,4vw,56px)}
.gal-marke{
  font-family:'Inter',sans-serif;font-size:12px;line-height:1;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--heading-alt);margin:0 0 clamp(18px,2.2vw,26px);
}
.gal-kopf h1{font-size:clamp(30px,4vw,56px);line-height:1.12;margin:0 0 var(--luft-s)}
.gal-vorspann{font-size:16px;line-height:1.75;color:var(--text);margin:0;max-width:var(--zeile)}

/* --- Filterleiste --------------------------------------------------- */
/* Ohne Skript gibt es keinen Filter — dann darf der Vorspann auch nicht
   auffordern, zu filtern. */
.keine-js .gal-filter,
.keine-js .gal-stand,
.keine-js .nur-mit-js{display:none}
.gal-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.gal-knopf{
  appearance:none;-webkit-appearance:none;
  background:none;border:1px solid var(--linie);border-radius:999px;
  min-height:44px;padding:0 22px;
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Inter',sans-serif;font-size:14.5px;line-height:1;
  color:var(--heading-alt);cursor:pointer;
  transition:color .35s var(--kurve-auf),
             border-color .35s var(--kurve-auf),
             background-color .35s var(--kurve-auf);
}
/* Rosé ist im Haus die Hover-Farbe, auf Creme aber nur 2,36:1 — als
   Schriftfarbe fällt sie hier deshalb aus. Der Zustand wird über die
   Linie und die Schriftschwärze gezeigt. */
.gal-knopf:hover{color:var(--heading);border-color:var(--heading)}
.gal-knopf:focus-visible{outline:2px solid var(--heading);outline-offset:2px}
.gal-knopf[aria-pressed="true"]{
  background:var(--heading);border-color:var(--heading);color:var(--creme);
}
.gal-knopf__zahl{font-size:12px;letter-spacing:.06em;color:var(--text)}
.gal-knopf[aria-pressed="true"] .gal-knopf__zahl{color:#CFC9C1}
.gal-stand{font-size:13.5px;line-height:1.6;color:var(--text);margin:0 0 clamp(24px,3vw,36px)}

/* --- Raster ---------------------------------------------------------
   Randlos und fugenlos über die ganze Fensterbreite. Das geht nur, weil
   alle Kacheln dasselbe Verhältnis haben: Die Bilddateien sind auf 3:4
   zugeschnitten (siehe bilder_seiten.py), damit die Reihen gleich hoch
   werden und keine Fuge nötig ist, um Höhenunterschiede zu kaschieren.

   `width:100%` statt `100vw`: 100vw enthält den Scrollbalken und würde
   die Seite waagerecht überlaufen lassen.
   -------------------------------------------------------------------- */
.gal-raster{
  list-style:none;margin:0;padding:0;width:100%;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
}
.gal-stueck{margin:0;min-width:0}
.gal-stueck[hidden]{display:none}
.gal-flaeche{
  display:block;position:relative;overflow:hidden;
  background:var(--creme-dunkel);
  aspect-ratio:3/4;
}
.gal-flaeche img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--kurve-auf);
}
.gal-flaeche:hover img{transform:scale(1.04)}
/* Der Fokusrahmen sitzt INNEN. Ohne Fuge zwischen den Kacheln läge ein
   Rahmen mit positivem Abstand unter den Nachbarn und wäre halb weg. */
.gal-flaeche:focus-visible{outline:2px solid var(--creme);outline-offset:-6px}

/* --- Leuchtkasten ---------------------------------------------------- */
.gal-kasten{
  position:fixed;inset:0;   /* explizit, damit das Schließen-Kreuz oben
                               rechts einen Bezugsrahmen hat */
  border:0;padding:0;margin:0;
  width:100%;height:100%;max-width:100vw;max-height:100vh;
  background:#1C1C1C;color:var(--creme);
}
.gal-kasten::backdrop{background:rgba(28,28,28,.92)}
.gal-kasten[open]{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(6px,2vw,24px);
  padding:clamp(56px,6vw,72px) clamp(12px,3vw,40px) clamp(20px,3vw,40px);
  box-sizing:border-box;
}
.gal-kasten__rahmen{
  margin:0;min-width:0;display:flex;flex-direction:column;
  align-items:center;gap:16px;
}
.gal-kasten__rahmen img{
  display:block;width:auto;height:auto;
  max-width:100%;max-height:76vh;object-fit:contain;
}
/* #CFC9C1 auf #1C1C1C ergibt 10,4:1. */
.gal-kasten__rahmen figcaption{
  font-size:14px;line-height:1.6;color:#CFC9C1;text-align:center;max-width:56ch;
}
.gal-kasten__zu,
.gal-kasten__schritt{
  appearance:none;-webkit-appearance:none;background:none;border:0;
  width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--creme);font-size:22px;cursor:pointer;
  transition:opacity .3s var(--kurve-auf);
}
.gal-kasten__zu{position:absolute;top:12px;right:12px}
.gal-kasten__zu:hover,
.gal-kasten__schritt:hover{opacity:.65}
.gal-kasten__zu:focus-visible,
.gal-kasten__schritt:focus-visible{outline:2px solid var(--creme);outline-offset:2px}
.gal-kasten__schritt[disabled]{opacity:.28;cursor:default}
.gal-kasten .symbol{width:1em;height:1em}

/* --- Galerie auf schmalen Schirmen ----------------------------------- */
@media (max-width:1000px){
  .gal-raster{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .gal-raster{grid-template-columns:repeat(2,1fr)}
  .gal-kasten[open]{
    grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;
    padding:56px 12px 16px;
  }
  /* Auf dem Handy stehen Vor und Zurück unter dem Bild nebeneinander,
     nicht links und rechts daneben — seitlich blieben für das Bild
     sonst keine 250px mehr. */
  .gal-kasten__rahmen{grid-row:1}
  .gal-kasten__schritt{grid-row:2;justify-self:center}
  .gal-kasten__schritt--zurueck{justify-self:start}
  .gal-kasten__schritt--vor{justify-self:end}
  .gal-kasten__rahmen img{max-height:66vh}
}
@media (prefers-reduced-motion:reduce){
  .gal-flaeche img,.gal-knopf,.gal-kasten__zu,.gal-kasten__schritt{transition:none}
  .gal-flaeche:hover img{transform:none}
}

/* --- Navigation auf schmalen Schreibtischen ---------------------------
   Gemessen bei 1024px: Navigation und Kontaktknopf stießen mit genau
   0px Abstand aneinander. Ein Zeichen mehr in einem Menüpunkt, und die
   Reihe wäre umgebrochen. Deshalb rücken die Punkte hier zusammen,
   bevor es eng wird — nicht erst, wenn es bricht.
   -------------------------------------------------------------------- */
@media (max-width:1200px){
  .nav__link{margin:0 15px}
  .nav__punkt--knopf{margin-left:8px}
  .nav__knopf{padding:0 18px;font-size:14.5px}
}

/* --- Ratgeber-Übersicht auf schmalen Schirmen ------------------------
   Unter 900px ist eine Spalte rund 380px breit — darin steht ein Titel
   wie „An welchem Finger trägt man den Verlobungsring?" in sechs Zeilen.
   Ab hier deshalb wieder einspaltig, und ohne Versatz.
   -------------------------------------------------------------------- */
@media (max-width:900px){
  .rat-eintraege__liste{grid-template-columns:1fr;row-gap:var(--luft-l)}
  .rat-eintrag:nth-child(even){margin-top:0}
}

/* --- Siegelreihe auf schmalen Schreibtischen -------------------------
   Gemessen bei 1024px: Die drei Siegel brauchen zusammen rund 430px,
   die freie Spalte neben dem Logo ist aber nur 370px breit. Statt sie
   zu quetschen fällt zuerst das dritte weg, dann die ganze Reihe. Die
   Netzwerke bleiben — sie brauchen nur 96px.
   -------------------------------------------------------------------- */
@media (max-width:1330px){
  .kopf-siegel-reihe .kopf-siegel:nth-child(3){display:none}
}
@media (max-width:1150px){
  .kopf-siegel-reihe{display:none}
}

/* ====================================================================
   SMARTPHONE — Durchsicht über alle Unterseiten
   --------------------------------------------------------------------
   Gemessen bei 390px und 320px auf allen elf Seitentypen. Was hier
   steht, sind die Stellen, an denen die Messung etwas gefunden hat —
   nicht vorsorgliche Kosmetik.

   REIHENFOLGE: Dieser Block steht am Ende der Datei und gewinnt damit
   gegen die früheren Medienabfragen gleicher Spezifität. Insbesondere
   gegen `@media (max-width:900px){.siegel__raster{...}}` weiter oben.
   ==================================================================== */

/* --- 1. Startseite lief 259px seitlich aus dem Bild ------------------
   `.siegel__raster` bekam unter 900px eine FESTE Spalte von 360px, dazu
   40px Fuge und die Textspalte. Bei 390px Fenster und 20px Rand stehen
   350px zur Verfügung — gebraucht wurden 650. Die Textspalte begann
   dadurch bei 420px, also außerhalb des Bildschirms, und die ganze
   Seite ließ sich seitlich schieben. Gemessen: 259px bei 390, 330px
   bei 320. Unter 700px deshalb einspaltig.
   -------------------------------------------------------------------- */
@media (max-width:700px){
  .siegel__raster{grid-template-columns:1fr;gap:28px}
}

/* --- 2. Ratgeber-Schlagzeile ragte 3px hinaus ------------------------
   „Wissenswertes." misst bei 48px rund 303px, der Satzspiegel bei
   320px Fenster aber nur 280px. Die Untergrenze war zu hoch gesetzt:
   clamp(48px,7vw,96px) fiel bei jedem Fenster unter 686px auf die 48
   zurück. Jetzt greift die vw-Stufe früher, und bei 390px ist die
   Schlagzeile mit 46,8px praktisch so groß wie vorher.
   -------------------------------------------------------------------- */
.rat-schlagzeile{font-size:clamp(40px,12vw,96px)}

/* --- 3. Berührungsziele unter 44px -----------------------------------
   Die Hausregel sind 44 × 44px. Gemessen wurde unter 1024px, also dort,
   wo mit dem Finger bedient wird.

   NICHT geändert: `.stimme__link` misst zwar 24px, trägt aber ein
   `::after{inset:0}` und deckt damit die ganze Bewertungskarte ab. Das
   Ziel ist also die Karte, nicht die Textzeile.
   -------------------------------------------------------------------- */
@media (max-width:1024px){
  /* Rechtliches im Fußbereich — steht auf JEDER Seite */
  .fuss__recht a{display:inline-flex;align-items:center;min-height:44px}

  /* Logo in der Handy-Leiste */
  .kopf__mobil .logo{display:flex;align-items:center;min-height:44px}

  /* Partnerlogos auf der Startseite */
  .partner__link{display:flex;align-items:center;justify-content:center;min-height:44px}

  /* Brotkrume über dem Ratgeber-Beitrag */
  .rat-marke a{display:inline-flex;align-items:center;min-height:44px}

  /* Telefon und E-Mail im Kontaktblock. Nur dort — `.textlink` steht
     sonst mitten im Fließtext, und ein 44px hoher Zeilenumbruch
     mittendrin würde den Absatz zerreißen. */
  .ko-zeile a{display:inline-flex;align-items:center;min-height:44px}

  /* Die Punkte unter dem Kachelstreifen sind 10px groß und sollen es
     bleiben — ein 44px großer Punkt wäre ein Klecks. Die Trefferfläche
     wächst deshalb über ein Pseudoelement, das nichts anzeigt. */
  .karussell__punkt{position:relative}
  .karussell__punkt::after{
    content:'';position:absolute;left:50%;top:50%;
    width:44px;height:44px;transform:translate(-50%,-50%);
  }

  /* Die Zustimmung im Formular. Das Kästchen war 20px; das Etikett
     daneben ist zwar auch anklickbar, aber wer auf das Kästchen zielt,
     soll es auch treffen. */
  .feld--haken input[type="checkbox"]{width:24px;height:24px;flex:none}
}

/* ====================================================================
   RECHTSSEITEN — Impressum, Datenschutz, Haftung, Cookies
   --------------------------------------------------------------------
   Diese Seiten werden gelesen, wenn jemand etwas sucht, nicht
   durchgeblättert. Deshalb: eine Textspalte, klare Überschriften,
   keine Bilder, keine Bewegung. Die Zeile ist mit 68ch etwas breiter
   als im Ratgeber — Rechtstexte haben lange Aufzählungen, und ein zu
   schmaler Satz macht daraus eine Treppe.
   ==================================================================== */
.recht{
  max-width:820px;margin:var(--luft-m) auto 0;
  padding:0 var(--tr-rand);
}
.recht__marke{
  font-family:'Inter',sans-serif;font-size:12px;line-height:1;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--heading-alt);margin:0 0 clamp(18px,2.2vw,26px);
}
.recht__titel{font-size:clamp(30px,4vw,52px);line-height:1.14;margin:0}
.recht__vorspann{
  font-size:17px;line-height:1.75;color:var(--text);
  margin:var(--luft-s) 0 0;max-width:68ch;
}
.recht__stand{
  font-size:13px;letter-spacing:.06em;color:var(--text);
  margin:22px 0 0;padding-bottom:clamp(28px,3vw,40px);
  border-bottom:1px solid var(--linie);
}
.recht__block{margin-top:clamp(34px,4vw,52px)}
.recht__block h2{
  font-size:clamp(20px,2vw,26px);line-height:1.28;margin:0 0 16px;
}
.recht__block h3{
  font-family:'Inter',sans-serif;font-size:15px;line-height:1.4;
  letter-spacing:.02em;color:var(--heading);margin:26px 0 10px;
}
.recht__block p{
  font-size:16px;line-height:1.75;color:var(--text);
  margin:0 0 14px;max-width:68ch;
}
.recht__block p:last-child{margin-bottom:0}
.recht__block strong{color:var(--heading);font-weight:500}
.recht__block ul,.recht__block ol{
  margin:0 0 14px;padding-left:22px;max-width:68ch;
  font-size:16px;line-height:1.75;color:var(--text);
}
.recht__block li{margin-bottom:7px}
.recht__block li::marker{color:var(--heading-alt)}
/* Anschriften und Zugangsdaten stehen als Block, nicht im Fließtext —
   sie werden abgeschrieben, nicht gelesen. */
.recht__karte{
  background:var(--creme-dunkel);border-radius:var(--radius-bild);
  padding:clamp(18px,2.4vw,26px);margin:0 0 16px;max-width:68ch;
  font-size:16px;line-height:1.8;color:var(--heading);
}
.recht__karte a{color:var(--heading);text-decoration:underline;text-underline-offset:3px}
/* Offene Angaben sichtbar machen, statt sie zu verstecken: Ein
   unvollständiges Impressum ist ein Rechtsrisiko und soll auffallen.
   Gleiches Notiz-Muster wie .uu-notiz – Haarlinie, kein Akzentbalken. */
.recht__offen{
  border-left:2px solid var(--linie);background:var(--creme-dunkel);
  padding:14px 18px;margin:0 0 16px;max-width:68ch;
  font-size:15px;line-height:1.7;color:var(--text-dunkel);
}

/* ===================================================================
   SCHMUCKSEITE — /schmuck-giessen/

   Die Gestaltung kommt aus dem Material: Alle elf Aufnahmen liegen im
   Hochformat 3:4 vor. Statt sie auf ein fremdes Raster zu beschneiden,
   übernimmt die Seite dieses Format als durchgehenden Takt. Jede Reihe
   ist eine Reihe stehender Bilder — das ist der Rhythmus einer Serie,
   nicht der eines Katalogs.

   Geordnet wird nach der STELLE am Körper (Hals, Ohr, Lagen), weil die
   Serie genau das dokumentiert. Eine Ordnung nach Warengruppen hätte
   Bilder gebraucht, die es nicht gibt.
   =================================================================== */

/* --- Auftakt: Text links, ein stehendes Bild rechts ---------------- */
.sm-auftakt{
  max-width:var(--tr-deckel);margin:0 auto;padding:var(--luft-l) var(--tr-rand) 0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(32px,5vw,80px);align-items:center;
}
.sm-marke{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-dunkel);margin:0 0 18px;
}
.sm-auftakt__h1{font-size:clamp(40px,5.6vw,86px);line-height:1.02;margin:0}
.sm-auftakt__satz{
  font-family:'Marcellus',Georgia,'Times New Roman',serif;
  font-size:clamp(20px,2.1vw,30px);line-height:1.34;
  color:var(--heading);margin:22px 0 0;
}
.sm-auftakt__lauf{
  max-width:var(--zeile);font-size:16px;line-height:1.75;
  color:var(--text-dunkel);margin:20px 0 0;
}
.sm-auftakt__knoepfe{
  display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin:32px 0 0;
}
.sm-textlink{
  font-size:15px;color:var(--heading);
  text-decoration:underline;text-underline-offset:4px;
  transition:color var(--t-schnell) linear;
}
.sm-textlink:hover,.sm-textlink:focus-visible{color:var(--navy-hell)}
.sm-auftakt__bild img{
  display:block;width:100%;height:auto;border-radius:var(--radius-bild);
}

/* --- Das Argument: Bild, Text, Bild ------------------------------- */
/* Die beiden Aufnahmen sind bewusst kleiner als der Auftakt und stehen
   versetzt: Sie belegen den Satz, sie illustrieren ihn nicht. */
.sm-nah{
  max-width:var(--tr-deckel);margin:var(--luft-xl) auto 0;
  padding:0 var(--tr-rand);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,44px);align-items:center;
}
.sm-nah__bild{margin:0}
.sm-nah__bild img{display:block;width:100%;height:auto;border-radius:var(--radius-bild)}
.sm-nah__bild--links{align-self:end}
.sm-nah__bild--rechts{align-self:start}
.sm-nah__text h2{font-size:clamp(24px,2.4vw,34px);line-height:1.24;margin:0 0 18px}
.sm-nah__text p{font-size:16px;line-height:1.75;color:var(--text-dunkel);margin:0 0 14px}
.sm-nah__text p:last-child{margin-bottom:0}

/* --- Die drei Stellen --------------------------------------------- */
.sm-stelle{
  max-width:var(--tr-deckel);margin:var(--luft-xl) auto 0;
  padding:0 var(--tr-rand);
}
.sm-stelle__kopf{max-width:var(--zeile);margin:0 0 var(--luft-inhalt)}
.sm-stelle__kopf h2{font-size:clamp(26px,2.6vw,38px);line-height:1.2;margin:0 0 16px}
.sm-stelle__text{font-size:16px;line-height:1.75;color:var(--text-dunkel);margin:0}
.sm-stelle__reihe{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.4vw,18px);
}
/* „Am Ohr" hat nur zwei Aufnahmen. Zwei Drittelspalten nebeneinander
   sähen wie eine unvollständige Dreierreihe aus — deshalb bekommen sie
   die halbe Breite und die Reihe bleibt geschlossen. */
.sm-stelle--ohr .sm-stelle__reihe{grid-template-columns:repeat(2,minmax(0,1fr))}
.sm-kachel{margin:0;overflow:hidden;border-radius:var(--radius-bild)}
.sm-kachel__bild{display:block}
.sm-kachel img{
  display:block;width:100%;height:auto;
  transition:transform var(--t-zoom) var(--ease);
}
.sm-kachel:hover img{transform:scale(1.03)}

/* --- Stempelkunde: dunkles Band ----------------------------------- */
/* Das einzige dunkle Feld der Seite. Es trägt den Teil, der nichts über
   den Laden aussagt, sondern über das Material — ein anderer Ton für
   einen anderen Gegenstand. */
.sm-stempel{margin:var(--luft-xl) 0 0;background:var(--heading);color:var(--creme)}
.sm-stempel__inner{
  max-width:var(--tr-deckel);margin:0 auto;
  padding:clamp(56px,7vw,104px) var(--tr-rand);
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);
}
.sm-stempel .sm-marke{color:rgba(249,246,242,.66)}
.sm-stempel__kopf h2{font-size:clamp(26px,2.6vw,38px);line-height:1.2;margin:0 0 18px;color:var(--creme)}
.sm-stempel__kopf p{font-size:16px;line-height:1.75;color:rgba(249,246,242,.82);margin:0}
.sm-stempel__liste{margin:0}
.sm-stempel__zeile{
  display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);
  gap:clamp(14px,2vw,32px);
  padding:20px 0;border-top:1px solid rgba(249,246,242,.17);
}
.sm-stempel__zeile:last-child{border-bottom:1px solid rgba(249,246,242,.17)}
.sm-stempel__zeile dt{
  margin:0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(249,246,242,.7);
}
.sm-stempel__zahl{
  display:block;
  font-family:'Marcellus',Georgia,'Times New Roman',serif;
  font-size:clamp(28px,3vw,42px);line-height:1.05;letter-spacing:0;
  text-transform:none;color:var(--creme);margin-bottom:2px;
}
.sm-stempel__zeile dd{margin:0;font-size:15.5px;line-height:1.7;color:rgba(249,246,242,.86)}

/* --- Umarbeiten ---------------------------------------------------- */
.sm-alt{max-width:var(--tr-deckel);margin:var(--luft-xl) auto 0;padding:0 var(--tr-rand)}
.sm-alt__inner{max-width:var(--zeile)}
.sm-alt__inner h2{font-size:clamp(26px,2.6vw,38px);line-height:1.2;margin:0 0 18px}
.sm-alt__inner p{font-size:16px;line-height:1.75;color:var(--text-dunkel);margin:0}
/* Zweiteiliger Selektor statt !important: `.sm-alt__inner p` setzt
   margin:0 und ist spezifischer als eine einzelne Klasse. */
.sm-alt__inner .sm-alt__knoepfe{
  display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin:30px 0 0;
}

/* --- Schmale Schirme ---------------------------------------------- */
@media (max-width:900px){
  .sm-auftakt{grid-template-columns:minmax(0,1fr);gap:32px}
  /* Das Bild zuerst: Auf dem Handy trägt die Aufnahme, nicht die
     Überschrift — und sie steht ohnehin sofort im Blick. */
  .sm-auftakt__bild{order:-1}
  .sm-nah{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm-nah__text{grid-column:1 / -1;order:-1}
  .sm-stempel__inner{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .sm-auftakt{padding-top:var(--luft-m)}
  .sm-stelle__reihe,
  .sm-stelle--ohr .sm-stelle__reihe{grid-template-columns:minmax(0,1fr)}
  .sm-nah{grid-template-columns:minmax(0,1fr)}
  .sm-stempel__zeile{grid-template-columns:minmax(0,1fr);gap:8px}
  /* Berührziele: Textlinks brauchen 44px Höhe, auch wenn die Schrift
     kleiner ist. */
  .sm-textlink{display:inline-flex;align-items:center;min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .sm-kachel img{transition:none}
  .sm-kachel:hover img{transform:none}
}