/* ============================================================
   B&B Entwicklung — gemeinsames Aussehen
   Wird von index.html und 3d-druck.html geladen.
   Änderungen hier wirken auf beide Seiten.
   ============================================================ */

/* ---------- Schriften: lokal, keine fremden Server ---------- */
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/poppins-300.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/poppins-400.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/poppins-500.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/poppins-600.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/poppins-700.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:italic;font-weight:300;font-display:swap;src:url('fonts/poppins-300italic.woff2') format('woff2')}

/* ---------- Farbwelten ---------- */
:root{
  --c1:#60A5FA; --c2:#A78BFA; --c3:#F87171;
  --grad:linear-gradient(135deg,#60A5FA 0%,#A78BFA 50%,#F87171 100%);
  --r:12px; --r-lg:18px; --r-sm:8px;
  --max:1140px;
  --ease:cubic-bezier(.19,1,.22,1);
}
[data-theme="hell"]{
  --bg:#FAFAF7; --bg-2:#F4F3EE; --surface:#FFFFFF; --surface-2:#F7F6F2;
  --border:#E8E6DF; --border-2:#D8D5CA;
  --text:#1C1B17; --text-2:#57544C; --text-3:#8B887F;
  --shadow:0 2px 10px rgba(28,27,23,.05);
  --shadow-lg:0 18px 50px rgba(28,27,23,.10);
  --glow:.13; --aura:.30; --hair:rgba(28,27,23,.07);
  --inv-bg:#1C1B17; --inv-text:#FAFAF7;
  --head-bg:rgba(250,250,247,.72);
}
[data-theme="dunkel"]{
  --bg:#0F0F0E; --bg-2:#141413; --surface:#1A1A18; --surface-2:#201F1D;
  --border:#2D2D2A; --border-2:#3A3A37;
  --text:#F0EEE8; --text-2:#A8A59C; --text-3:#75726A;
  --shadow:0 2px 10px rgba(0,0,0,.35);
  --shadow-lg:0 18px 50px rgba(0,0,0,.50);
  --glow:.22; --aura:.42; --hair:rgba(240,238,232,.08);
  --inv-bg:#F0EEE8; --inv-text:#14131A;
  --head-bg:rgba(15,15,14,.70);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--text);
  font-weight:400; line-height:1.65; font-size:16px;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background .45s var(--ease), color .45s var(--ease);
}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:rgba(167,139,250,.28)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
@media(max-width:600px){.wrap{padding:0 20px}}

/* ---------- Kopfleiste ---------- */
header.top{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
header.top.gescrollt{
  background:var(--head-bg);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:var(--border);
}
/* Fortschritt der ganzen Seite als feiner Strich unter der Kopfleiste */
.fortschritt-strich{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:var(--grad);transform:scaleX(var(--seite,0));transform-origin:left center;
  opacity:0;transition:opacity .4s var(--ease);pointer-events:none;
}
header.top.gescrollt .fortschritt-strich{opacity:1}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.marke{display:flex;align-items:center;gap:11px;flex-shrink:0}
.marke svg{width:34px;height:34px;display:block}
.top .marke svg{width:46px;height:46px}
.marke-txt{display:flex;flex-direction:column;line-height:1.1}
.marke-txt b{font-weight:600;font-size:16.5px;letter-spacing:-.015em}
.marke-txt span{font-weight:300;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}

nav.menu{display:flex;align-items:center;gap:4px;margin-left:auto}
nav.menu a{
  font-size:14px;font-weight:400;color:var(--text-2);
  padding:8px 13px;border-radius:var(--r-sm);position:relative;
  transition:color .25s, background .25s;
}
nav.menu a:hover{color:var(--text);background:var(--surface-2)}

.top-akt{display:flex;align-items:center;gap:10px;flex-shrink:0}
.schalter{
  width:38px;height:38px;border:1px solid var(--border);background:var(--surface);
  border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--text-2);
  transition:color .25s,border-color .25s,transform .25s var(--ease),background .25s;
}
.schalter:hover{color:var(--text);border-color:var(--border-2);transform:rotate(18deg)}
.schalter svg{width:17px;height:17px}
/* WhatsApp in der Kopfleiste — dreht sich nicht wie der Hell/Dunkel-Schalter */
.wa-oben{text-decoration:none}
.wa-oben:hover{color:#25D366;border-color:#25D366;transform:none}
.wa-oben svg{width:18px;height:18px}
/* Auf dem Handy ist WhatsApp der wichtigste Draht — er bleibt sichtbar.
   Erst auf sehr schmalen Geräten weicht er dem Menüknopf. */
.ig-oben{text-decoration:none}
.ig-oben:hover{color:#E1306C;border-color:#E1306C;transform:none}
.ig-oben svg{width:18px;height:18px}
/* Weicht früher als WhatsApp: der Draht zum Schreiben wiegt schwerer als das Schaufenster. */
/* Vier runde Knöpfe neben der Marke sprengen schmale Handys. Marke und
   Knopfgruppe dürfen beide nicht schrumpfen, deshalb ragt die Leiste sonst
   hinaus. Lösung in zwei Stufen statt Instagram wegzulassen. */
@media(max-width:430px){
  .top .wrap{padding:0 14px}
  .top-akt{gap:5px}
  .schalter,.burger{width:32px;height:32px}
  .schalter svg,.wa-oben svg,.ig-oben svg{width:16px;height:16px}
  .top .marke svg{width:38px;height:38px}
  .marke{gap:8px}
  .marke-txt b{font-size:15px}
  .marke-txt span{font-size:9.5px;letter-spacing:.13em}
}
/* Unter 366px trägt das Signet den Namen allein — im Zeichen steht "B&B". */
@media(max-width:366px){
  .top .marke-txt{display:none}
  .top .marke svg{width:40px;height:40px}
}
[data-theme="hell"] .ic-mond{display:block}
[data-theme="hell"] .ic-sonne{display:none}
[data-theme="dunkel"] .ic-mond{display:none}
[data-theme="dunkel"] .ic-sonne{display:block}

.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-size:14.5px;font-weight:500;letter-spacing:.005em;
  padding:12px 22px;border-radius:100px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s, border-color .3s;
}
/* Glanz läuft beim Überfahren einmal durch */
.btn::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.30),transparent);
  transform:skewX(-18deg);opacity:0;
}
.btn:hover::after{animation:glanz .85s var(--ease) forwards}
@keyframes glanz{0%{left:-60%;opacity:1}100%{left:120%;opacity:1}}
.btn > *{position:relative;z-index:1}
.btn-voll{background:var(--inv-bg);color:var(--inv-text)}
.btn-voll:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-voll:active{transform:translateY(0) scale(.985)}
.btn-rand{background:transparent;color:var(--text);border-color:var(--border-2)}
.btn-rand:hover{border-color:var(--text-3);transform:translateY(-2px)}
.btn-farbe{background:var(--grad);color:#fff;background-size:170% 170%;animation:wandern 9s ease infinite}
.btn-farbe:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(167,139,250,.34)}
.btn-klein{padding:10px 18px;font-size:14px}
@keyframes wandern{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.burger{display:none;width:38px;height:38px;border:1px solid var(--border);background:var(--surface);border-radius:50%;place-items:center;cursor:pointer;color:var(--text)}
.burger svg{width:18px;height:18px}

/* Fünf Menüpunkte brauchen mehr Platz als vier. Zwischen Burger-Grenze und
   breitem Schirm rücken die Punkte enger zusammen, sonst bricht die Leiste um. */
@media(min-width:941px) and (max-width:1200px){
  nav.menu{gap:1px}
  nav.menu a{padding:8px 9px;font-size:13.5px}
}
@media(max-width:940px){
  nav.menu{
    position:fixed;top:72px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--border);
    padding:8px 20px 20px;
    transform:translateY(-14px);opacity:0;pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease);
    box-shadow:var(--shadow-lg);
  }
  nav.menu.offen{transform:translateY(0);opacity:1;pointer-events:auto}
  nav.menu a{padding:13px 6px;font-size:16px;border-bottom:1px solid var(--hair)}
  nav.menu a:last-child{border-bottom:0}
  .burger{display:grid}
  .top-akt .btn{display:none}
}

/* ---------- Bühne ---------- */
/* Abstand oben passt sich der Fensterhöhe an, damit der Claim ohne Scrollen sichtbar bleibt */
/* Die vh-Werte sorgen dafür, dass "Forged for you" auch auf flachen
   Bildschirmen ohne Scrollen sichtbar bleibt. 78px ist das Minimum,
   sonst schiebt sich das Signet hinter die feste Kopfleiste. */
/* Die Bühne füllt immer genau den sichtbaren Bildschirm — auf dem MacBook
   wie auf dem großen Schirm. min-height statt height: passt der Inhalt bei
   sehr flachen Fenstern nicht, wächst sie mit, statt abzuschneiden.
   svh = die Höhe ohne die ein-/ausfahrende Adressleiste am Handy. */
.buehne{
  position:relative;overflow:hidden;
  min-height:100vh;          /* Rückfallwert für ältere Browser */
  min-height:100svh;
  display:flex;align-items:center;
  padding:clamp(96px,12vh,150px) 0 clamp(88px,10vh,130px);
}
.buehne > .wrap{width:100%}
.aura{
  position:absolute;top:-180px;left:50%;transform:translateX(-50%);
  width:min(1000px,140vw);height:820px;pointer-events:none;z-index:0;
  background:
    radial-gradient(closest-side, rgba(96,165,250,var(--aura)), transparent 72%) 22% 30%/58% 62% no-repeat,
    radial-gradient(closest-side, rgba(167,139,250,var(--aura)), transparent 72%) 62% 18%/56% 60% no-repeat,
    radial-gradient(closest-side, rgba(248,113,113,calc(var(--aura)*.75)), transparent 72%) 48% 62%/62% 55% no-repeat;
  filter:blur(30px);
  animation:atmen 15s ease-in-out infinite;
}
/* Die Wolke der Startseite ist fixiert: sie bleibt beim Scrollen im Bild
   und läuft dadurch mit, statt oben in der Bühne zurückzubleiben.
   Sie hängt an ".buehne >" — die 3D-Seite hat ihre Wolke in
   ".druck-buehne" und bleibt davon unberührt. */
.buehne > .aura{
  position:fixed;
  width:min(1150px,152vw);
}
[data-theme="hell"]   .buehne > .aura{--aura:.22}
[data-theme="dunkel"] .buehne > .aura{--aura:.31}

/* --py wird beim Scrollen gesetzt, damit die Aura langsamer mitzieht.
   --fort läuft dabei von 0 auf 1 und blendet die Wolke aus, sodass sie
   ab dem nächsten Abschnitt weg ist. Der Wert muss hier in die
   Keyframes: Die Animation setzt die Deckkraft selbst und würde jede
   feste Angabe an anderer Stelle überschreiben.
   Außerhalb der Bühne ist --fort nicht gesetzt — der Schein im
   Über-Bereich und das Band im Ablauf atmen deshalb unverändert. */
@keyframes atmen{
  0%,100%{transform:translateX(-50%) translateY(var(--py,0px)) scale(1);
          opacity:calc(.9 * (1 - var(--fort,0)))}
  50%    {transform:translateX(-50%) translateY(var(--py,0px)) scale(1.09);
          opacity:calc(1 - var(--fort,0))}
}
.buehne-in{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center}

.signet-feld{position:relative;width:clamp(158px,26.5vh,236px);height:clamp(158px,26.5vh,236px);margin-bottom:clamp(4px,1.2vh,18px)}
.signet-feld svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(141px,23.6vh,210px);height:clamp(141px,23.6vh,210px)}
/* Gegenläufige Ringe */
.signet-feld .ring-a,.signet-feld .ring-b{transform-box:view-box;transform-origin:100px 100px}
.signet-feld .ring-a{animation:ringDreh 9s linear infinite}
.signet-feld .ring-b{animation:ringDreh 6.5s linear infinite reverse}
@keyframes ringDreh{to{transform:rotate(360deg)}}
@media(max-width:600px){
  .signet-feld{width:212px;height:212px;margin-bottom:13px}
  .signet-feld svg{width:170px;height:170px}
}

h1{
  font-size:clamp(33px,min(6.1vw,8.4vh),68px);font-weight:600;line-height:1.08;
  letter-spacing:-.032em;max-width:24ch;
}
h1 .leuchtet{
  background:var(--grad);background-size:200% 200%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:wandern 8s ease infinite;
}
.buehne .unterzeile{
  margin-top:clamp(12px,2.2vh,22px);max-width:60ch;font-size:clamp(16px,2.1vw,19px);
  font-weight:300;color:var(--text-2);line-height:1.72;
}
/* Betonter Schlusssatz der Unterzeile. Etwas kräftiger als der umgebende
   Text — bei Strichstärke 300 zerfällt der Farbverlauf und wirkt wie ein Fehler. */
.buehne .unterzeile .leuchtet{
  font-weight:500;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.buehne .ortzeile{
  margin-top:clamp(7px,1.3vh,14px);max-width:68ch;font-size:clamp(13.5px,1.6vw,15px);
  font-weight:300;color:var(--text-3);line-height:1.6;
}
.buehne .knoepfe{display:flex;gap:13px;margin-top:clamp(14px,2.5vh,30px);flex-wrap:wrap;justify-content:center}
.buehne .gratis{
  margin-top:clamp(8px,1.4vh,13px);font-size:13px;font-weight:400;color:var(--text-3);
}
.claim{
  margin-top:clamp(12px,2.1vh,28px);font-style:italic;font-weight:300;
  font-size:clamp(13.5px,1.8vw,15.5px);color:var(--text-3);letter-spacing:.02em;
}
.merkmale{
  display:flex;gap:10px 30px;flex-wrap:wrap;justify-content:center;
  margin-top:clamp(8px,1.4vh,18px);font-size:13px;color:var(--text-3);font-weight:400;
}
.merkmale span{display:inline-flex;align-items:center;gap:7px}
.punkt{width:6px;height:6px;border-radius:50%;background:var(--c2);flex-shrink:0;box-shadow:0 0 0 0 rgba(167,139,250,.5);animation:pulsen 2.6s ease-out infinite}
@keyframes pulsen{0%{box-shadow:0 0 0 0 rgba(167,139,250,.45)}70%{box-shadow:0 0 0 8px rgba(167,139,250,0)}100%{box-shadow:0 0 0 0 rgba(167,139,250,0)}}

/* ---------- "Mehr" am unteren Rand der Bühne ---------- */
.weiter{
  position:absolute;left:50%;bottom:clamp(20px,3vh,34px);
  transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-size:11px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;
  color:var(--text-3);cursor:pointer;
  /* --fort läuft beim Scrollen von 0 auf 1 — der Hinweis blendet dabei weg */
  opacity:calc(1 - var(--fort,0));
  transition:color .3s;
}
.weiter:hover{color:var(--text-2)}
.weiter-pfeil{
  width:30px;height:30px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface);
  display:grid;place-items:center;
  animation:winken 2.6s var(--ease) infinite;
  transition:border-color .3s, transform .3s var(--ease);
}
.weiter:hover .weiter-pfeil{border-color:var(--border-2);transform:translateY(3px)}
.weiter-pfeil svg{width:15px;height:15px}
@keyframes winken{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(5px)}
}
/* Der Hinweis lohnt nur, wo die Bühne den Schirm auch wirklich füllt.
   Auf flachen Fenstern und auf dem Handy ist der Inhalt länger als der
   Schirm — dort würde er über dem Claim liegen. */
@media(max-height:620px){.weiter{display:none}}
@media(max-width:700px){
  .weiter{display:none}
  /* Abstände zurück auf die vorherigen Werte: auf dem Handy bringt das
     Strecken nichts, es drückt nur "Forged for you" weiter nach unten. */
  .buehne{padding:clamp(78px,10vh,104px) 0 110px}
}

/* Der Bühnentext bleibt beim Scrollen stehen und sichtbar — nur der
   sanfte Versatz (--mit) bleibt. Ein Wegblenden gab es hier schon
   einmal; es wurde bewusst wieder entfernt, weil der Text dabei
   verschwand. */
.buehne-in{
  transform:translateY(var(--mit,0px));
  will-change:transform;
}

/* Flache Fenster (kleine Notebooks, viel Browserleiste): Signet und
   Zeilenabstände rücken weiter zusammen, damit "Forged for you"
   auch dort noch ohne Scrollen zu sehen ist. */
@media(max-height:700px){
  .buehne{padding-top:clamp(76px,9vh,104px);padding-bottom:clamp(70px,8vh,110px)}
  .signet-feld{width:clamp(122px,21.5vh,236px);height:clamp(122px,21.5vh,236px);margin-bottom:clamp(2px,1vh,18px)}
  .signet-feld svg{width:clamp(109px,19.2vh,210px);height:clamp(109px,19.2vh,210px)}
  .buehne .unterzeile{line-height:1.55}
  .buehne .knoepfe{margin-top:clamp(12px,2.2vh,30px)}
  .merkmale{margin-top:clamp(6px,1.2vh,18px)}
  .claim{margin-top:clamp(10px,1.8vh,28px)}
}

/* ---------- Abschnitte ---------- */
section{padding:84px 0;position:relative}
section.getoent{background:var(--bg-2)}
@media(max-width:700px){section{padding:60px 0}}
.kopf{max-width:64ch;margin-bottom:60px}
.kopf.mitte{margin-left:auto;margin-right:auto;text-align:center}
.marker{
  display:inline-flex;align-items:center;gap:11px;
  font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:18px;
}
/* Der Strich zeichnet sich, sobald der Kopf ins Bild kommt */
.marker::before{
  content:"";width:22px;height:2px;border-radius:2px;background:var(--grad);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .8s var(--ease) .1s;
}
.zeig.da .marker::before,.da .marker::before,.marker.da::before{transform:scaleX(1)}
h2{font-size:clamp(27px,4.2vw,42px);font-weight:600;letter-spacing:-.028em;line-height:1.18}
.kopf p{margin-top:18px;font-size:17px;font-weight:300;color:var(--text-2);line-height:1.72}

/* ---------- Überschriften wortweise aufsteigen ---------- */
.wort{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.wort > i{
  display:inline-block;font-style:inherit;
  transform:translateY(105%);opacity:0;
  transition:transform .85s var(--ease),opacity .6s ease;
}
.da .wort > i,.wort.da > i{transform:translateY(0);opacity:1}
/* Wo Wörter einzeln aufsteigen, blendet das Feld selbst nicht zusätzlich ein */
.zeig.wortfeld{opacity:1;transform:none;filter:none;transition:none}

/* ---------- Leistungen ---------- */
.gitter{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:940px){.gitter{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.gitter{grid-template-columns:1fr}}
/* Vier Karten: zwei Reihen zu zwei — sonst stünde die vierte allein */
.gitter.vier{grid-template-columns:repeat(2,1fr)}
@media(max-width:620px){.gitter.vier{grid-template-columns:1fr}}

.karte{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:30px 28px 32px;overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}
.karte::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:var(--grad);opacity:0;transition:opacity .45s var(--ease);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px;
  z-index:2;
}
/* Licht, das der Maus folgt */
.karte::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),
    rgba(167,139,250,.16), rgba(96,165,250,.09) 40%, transparent 68%);
  opacity:0;transition:opacity .45s var(--ease);
}
.karte > *{position:relative;z-index:1}
.karte:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.karte:hover::before{opacity:.85}
.karte:hover::after{opacity:1}
.karte-ic{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  margin-bottom:20px;color:#fff;background:var(--grad);
  background-size:180% 180%;
  box-shadow:0 8px 22px rgba(167,139,250,var(--glow));
  transition:transform .55s var(--ease), box-shadow .5s var(--ease);
}
/* Solange der Zeiger auf der Karte steht, hüpft das Symbol leicht weiter.
   Die Neigung und die Vergrößerung stehen mit in den Bildern — eine laufende
   Animation überschreibt sonst den Wert aus der Regel darunter. */
@keyframes huepfen{
  0%,100%{transform:translateY(-2px) rotate(-6deg) scale(1.07)}
  50%    {transform:translateY(-9px) rotate(-6deg) scale(1.07)}
}
.karte:hover .karte-ic{
  animation:huepfen 1.1s ease-in-out .3s infinite;
  transform:translateY(-2px) rotate(-6deg) scale(1.07);
  box-shadow:0 14px 30px rgba(167,139,250,calc(var(--glow) + .12));
}
.karte-ic svg{width:22px;height:22px;transition:transform .55s var(--ease)}
.karte:hover .karte-ic svg{transform:rotate(6deg)}
.karte h3{font-size:18px;font-weight:600;letter-spacing:-.012em;margin-bottom:11px}
.karte p{font-size:14.6px;font-weight:300;color:var(--text-2);line-height:1.72}

/* ---------- Arbeitsweise ---------- */
.staerken{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media(max-width:800px){.staerken{grid-template-columns:1fr}}
.staerke{
  display:flex;gap:20px;padding:28px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.staerke:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.staerke-nr{
  flex-shrink:0;font-size:30px;font-weight:700;line-height:1;letter-spacing:-.04em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;padding-top:2px;
}
.staerke h3{font-size:17px;font-weight:600;margin-bottom:9px;letter-spacing:-.01em}
.staerke p{font-size:14.6px;font-weight:300;color:var(--text-2);line-height:1.72}

/* ---------- Ablauf ---------- */
.pfad{position:relative;max-width:800px;margin:0 auto;padding-left:56px}
.pfad::before{
  content:"";position:absolute;left:19px;top:12px;bottom:12px;width:2px;
  background:var(--border);border-radius:2px;
}
.pfad::after{
  content:"";position:absolute;left:19px;top:12px;width:2px;border-radius:2px;
  background:var(--grad);height:var(--fortschritt,0%);
  transition:height .16s linear;
}
.schritt{position:relative;padding-bottom:42px}
.schritt:last-child{padding-bottom:0}
.schritt-pkt{
  position:absolute;left:-56px;top:0;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;font-size:15.5px;font-weight:700;
  background:var(--surface);border:2px solid var(--border);color:var(--text-3);
  transition:border-color .5s var(--ease), color .5s, background .5s, box-shadow .5s;
  z-index:1;
}
.schritt.an .schritt-pkt{
  border-color:transparent;color:#fff;background:var(--grad);
  box-shadow:0 6px 20px rgba(167,139,250,.32);
  text-shadow:0 1px 3px rgba(28,27,23,.42);
  transform:scale(1.06);
}
/* Ring, der einmal aufgeht, sobald der Schritt erreicht ist */
.schritt-pkt::after{
  content:"";position:absolute;inset:-2px;border-radius:50%;pointer-events:none;
  border:2px solid var(--c2);opacity:0;
}
.schritt.an .schritt-pkt::after{animation:ringauf 1.1s var(--ease) forwards}
@keyframes ringauf{
  0%{transform:scale(.85);opacity:.75}
  100%{transform:scale(1.85);opacity:0}
}
.schritt h3,.schritt p{transition:opacity .6s var(--ease),transform .6s var(--ease)}
.schritt:not(.an) h3,.schritt:not(.an) p{opacity:.55}
.schritt h3{font-size:18px;font-weight:600;margin-bottom:8px;padding-top:7px;letter-spacing:-.012em}
.schritt p{font-size:15px;font-weight:300;color:var(--text-2);line-height:1.72;max-width:58ch}
@media(max-width:600px){
  .pfad{padding-left:48px}
  .pfad::before,.pfad::after{left:15px}
  .schritt-pkt{left:-48px;width:32px;height:32px;font-size:13px}
}

/* ---------- Über ---------- */
.ueber{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media(max-width:880px){.ueber{grid-template-columns:1fr;gap:44px}}
.ueber p{font-size:16.4px;font-weight:300;color:var(--text-2);line-height:1.82;margin-bottom:18px}
.ueber p strong{font-weight:500;color:var(--text)}
.ueber-bild{
  position:relative;aspect-ratio:1/1;max-width:400px;width:100%;margin:0 auto;
  border-radius:26px;display:grid;place-items:center;overflow:hidden;
  background:var(--surface);border:1px solid var(--border);
}
.ueber-bild .schein{
  position:absolute;inset:-25%;
  background:radial-gradient(closest-side,rgba(167,139,250,.5),transparent 70%);
  filter:blur(38px);animation:atmen 13s ease-in-out infinite;
}
.ueber-bild svg{position:relative;width:60%;height:auto}
.fakten{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.fakt{
  border:1px solid var(--border);background:var(--surface);
  border-radius:100px;padding:8px 17px;font-size:13.2px;color:var(--text-2);font-weight:400;
}

/* ---------- Kontakt ---------- */
.kontakt-gitter{display:grid;grid-template-columns:1fr 1.25fr;gap:52px;align-items:start}
@media(max-width:940px){.kontakt-gitter{grid-template-columns:1fr;gap:40px}}
.wege{display:flex;flex-direction:column;gap:14px;margin-top:32px}
.weg{
  display:flex;align-items:center;gap:16px;padding:17px 20px;
  border:1px solid var(--border);border-radius:var(--r);background:var(--surface);
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.weg:hover{transform:translateX(4px);border-color:var(--border-2);box-shadow:var(--shadow)}
.weg-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);color:var(--text-2);flex-shrink:0}
.weg-ic svg{width:18px;height:18px}
.weg small{display:block;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);margin-bottom:3px}
.weg b{font-weight:500;font-size:15.4px;letter-spacing:-.005em;word-break:break-word}

form{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow)}
@media(max-width:600px){form{padding:24px 20px}}
.zeile{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.zeile{grid-template-columns:1fr}}
.feld{margin-bottom:16px}
.feld label{display:block;font-size:13px;font-weight:500;margin-bottom:7px;color:var(--text-2)}
.feld label .pflicht{color:var(--c3)}
.feld input,.feld select,.feld textarea{
  width:100%;font-family:inherit;font-size:15px;font-weight:300;color:var(--text);
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:12px 14px;transition:border-color .25s, box-shadow .25s, background .25s;
  -webkit-appearance:none;appearance:none;
}
.feld select{
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 19px) center,calc(100% - 14px) center;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px;color:var(--text);
}
.feld textarea{resize:vertical;min-height:128px;line-height:1.66}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none;border-color:var(--c2);box-shadow:0 0 0 3px rgba(167,139,250,.16);
}
.feld input::placeholder,.feld textarea::placeholder{color:var(--text-3)}
.haken{display:flex;gap:11px;align-items:flex-start;font-size:13.4px;color:var(--text-2);font-weight:300;line-height:1.6}
.haken input{width:17px;height:17px;margin-top:2px;flex-shrink:0;accent-color:var(--c2);-webkit-appearance:auto;appearance:auto}
.haken a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.falle{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.rechnen{display:none}
.rechnen.zeigen{display:block}
.rechnen input{max-width:130px}
form .btn{width:100%;margin-top:8px;padding:14px 22px;font-size:15px}
.meldung{
  display:none;margin-top:18px;padding:15px 17px;border-radius:var(--r-sm);
  font-size:14.2px;font-weight:300;line-height:1.62;
}
.meldung.zeigen{display:block}
.meldung.gut{background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.4);color:var(--text)}
.meldung.schlecht{background:rgba(248,113,113,.11);border:1px solid rgba(248,113,113,.4);color:var(--text)}
.meldung a{color:var(--text);font-weight:500;text-decoration:underline;text-underline-offset:2px}
.hinweis{font-size:12.4px;color:var(--text-3);margin-top:14px;text-align:center;font-weight:300}

/* ---------- Fußzeile ---------- */
footer{border-top:1px solid var(--border);background:var(--bg-2);padding:52px 0 34px}
.fuss-oben{display:flex;justify-content:space-between;align-items:flex-start;gap:34px;flex-wrap:wrap;margin-bottom:36px}
.fuss-marke{max-width:330px}
.fuss-marke .marke{margin-bottom:14px}
.fuss-marke p{font-size:13.8px;font-weight:300;color:var(--text-3);line-height:1.7}
.fuss-spalten{display:flex;gap:56px;flex-wrap:wrap}
.fuss-spalte b{display:block;font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--text-3);margin-bottom:14px}
.fuss-spalte a{display:block;font-size:14.2px;color:var(--text-2);font-weight:300;padding:5px 0;transition:color .25s}
.fuss-spalte a:hover{color:var(--text)}
.fuss-unten{
  border-top:1px solid var(--border);padding-top:22px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12.8px;color:var(--text-3);font-weight:300;
}

/* ---------- Referenzen ---------- */
.arbeiten{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:880px){.arbeiten{grid-template-columns:1fr}}
.arbeit{
  position:relative;overflow:hidden;border-radius:24px;padding:38px 34px 34px;
  background:var(--surface);border:1px solid var(--border);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .4s;
}
.arbeit::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),
    rgba(167,139,250,.14), rgba(96,165,250,.08) 42%, transparent 70%);
  opacity:0;transition:opacity .5s var(--ease);
}
.arbeit:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--border-2)}
.arbeit:hover::after{opacity:1}
.arbeit > *{position:relative;z-index:1}
/* Der Verlauf sitzt als schmale Kante oben auf der Karte */
.arbeit-kante{position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);background-size:200% 100%;animation:wandern 11s ease infinite;z-index:2}
.arbeit-typ{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:16px;
}
.arbeit h3{font-size:21px;font-weight:600;letter-spacing:-.018em;line-height:1.3;margin-bottom:13px}
.arbeit p{font-size:15px;font-weight:300;color:var(--text-2);line-height:1.75}
.marken{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.marke-chip{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--border);background:var(--surface-2);border-radius:100px;
  padding:7px 14px;font-size:12.6px;color:var(--text-2);font-weight:400;
  transition:border-color .3s, transform .3s var(--ease), color .3s;
}
.arbeit:hover .marke-chip{border-color:var(--border-2)}
.marke-chip svg{width:13px;height:13px;flex-shrink:0;color:var(--c2)}
/* Mehrere Absätze je Karte brauchen Luft dazwischen */
.arbeit p + p{margin-top:13px}
.arbeit-fuss{
  margin-top:24px;padding-top:18px;border-top:1px solid var(--hair);
  font-size:13px;color:var(--text-3);font-weight:300;line-height:1.6;
}

/* ---------- CTA-Band zwischen den Abschnitten ---------- */
.band{
  position:relative;overflow:hidden;border-radius:24px;
  padding:46px 44px;margin:0 auto;
  background:var(--surface);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
}
.band::before{
  content:"";position:absolute;inset:-40%;pointer-events:none;z-index:0;
  background:
    radial-gradient(closest-side,rgba(96,165,250,calc(var(--aura)*.55)),transparent 70%) 18% 40%/54% 90% no-repeat,
    radial-gradient(closest-side,rgba(167,139,250,calc(var(--aura)*.55)),transparent 70%) 74% 55%/52% 88% no-repeat;
  filter:blur(34px);animation:atmen 17s ease-in-out infinite;
}
.band > *{position:relative;z-index:1}
/* Auffangsatz über dem Formular — deckt die ganze Breite der Anmeldung ab,
   ohne dass ein einziger Bauchladen-Posten sichtbar wird */
.auffang{
  margin:0 0 18px;padding:13px 16px;border-radius:var(--r-sm);
  background:var(--surface);border:1px dashed var(--border);
  font-size:14.4px;font-weight:300;color:var(--text-2);
}

/* 3D-Druck: eigener Charakter, damit es nicht wie eine fünfte Leistung wirkt */
#druck{min-height:calc(100svh - 72px);display:flex;align-items:center}
#druck > .wrap{width:100%}
/* Drei Wege — bewusst ohne Kasten, damit es nicht wie eine Leistungskarte wirkt */
.druck-wege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,2.8vw,40px);margin-top:clamp(30px,3.6vw,46px)}
.druck-weg{position:relative;padding-top:20px}
.druck-weg::before{content:"";position:absolute;top:0;left:0;
  width:46px;height:3px;border-radius:2px;background:var(--grad)}
.druck-weg h3{font-size:17.5px;font-weight:600;letter-spacing:-.015em}
.druck-weg p{margin-top:10px;font-size:15.2px;font-weight:300;
  color:var(--text-2);line-height:1.72}
.druck-stoffe{font-size:15.2px;font-weight:300;color:var(--text-2);line-height:1.95}
.druck-stoffe b{font-weight:600;color:var(--text)}
@media(max-width:860px){.druck-wege{grid-template-columns:1fr;gap:26px}}
#druck > .wrap{width:100%}
.druck-band{
  display:block;margin-top:clamp(30px,3.6vw,46px);
  border-radius:28px;padding:clamp(28px,3vw,42px);border:1px solid var(--border);
  background:var(--surface);
}
.druck-text{flex:1 1 420px;max-width:62ch}
.druck-text h2{font-size:clamp(27px,3.7vw,39px);font-weight:600;letter-spacing:-.025em;margin-top:12px}
.druck-text p{margin-top:16px;font-size:16.6px;font-weight:300;color:var(--text-2);line-height:1.72}
.druck-text .btn{margin-top:22px}
.druck-zahlen{display:flex;gap:38px;flex-wrap:wrap}
.druck-zahlen div{text-align:center}
.druck-zahlen b{display:block;font-size:40px;font-weight:600;letter-spacing:-.03em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.druck-zahlen span{display:block;margin-top:4px;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3)}
@media(max-width:700px){.druck-band{padding:32px 24px;gap:26px}.druck-zahlen{gap:22px}
  #druck{min-height:0;display:block}}

/* "Was wir nicht machen" — Abschluss der Arbeitsweise */
.nichtmachen{
  margin-top:22px;padding:26px 30px;border-radius:var(--r-lg);
  border:1px dashed var(--border-2);background:var(--surface);max-width:70ch;
}
#arbeitsweise .nichtmachen{max-width:none}
.nichtmachen h3{font-size:17px;font-weight:600;letter-spacing:-.015em}
.nichtmachen p{margin-top:9px;font-size:15px;font-weight:300;color:var(--text-2);line-height:1.7}

/* Betreuungs-Band unter den Leistungskarten: einspaltig, Text mittig */
.betreuband{margin-top:26px;justify-content:center;text-align:center;padding:40px 44px}
.betreuband .band-in{max-width:64ch}
.betreuband .band-zusatz{
  margin-top:16px;padding-top:15px;border-top:1px solid var(--border);
  font-size:14.4px;color:var(--text-3);
}
@media(max-width:600px){.betreuband{padding:30px 22px}}
.band-txt{max-width:56ch}
.band h3{font-size:clamp(20px,2.8vw,27px);font-weight:600;letter-spacing:-.022em;line-height:1.28}
.band p{margin-top:11px;font-size:15.4px;font-weight:300;color:var(--text-2);line-height:1.7}
@media(max-width:700px){.band{padding:34px 26px}.band .btn{width:100%}}

/* ---------- Häufige Fragen ---------- */
.fragen{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.frage{
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  overflow:hidden;transition:border-color .35s, box-shadow .4s var(--ease);
}
.frage:hover{border-color:var(--border-2)}
.frage.offen{box-shadow:var(--shadow)}
.frage-kopf{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:21px 24px;background:none;border:0;cursor:pointer;text-align:left;
  font-family:inherit;font-size:16.4px;font-weight:500;color:var(--text);letter-spacing:-.008em;
  transition:color .3s;
}
.frage-kopf:hover{color:var(--text)}
.frage-zeichen{
  position:relative;width:22px;height:22px;flex-shrink:0;
  transition:transform .45s var(--ease);
}
.frage-zeichen::before,.frage-zeichen::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--text-3);border-radius:2px;
  transform:translate(-50%,-50%);transition:transform .45s var(--ease),background .3s;
}
.frage-zeichen::before{width:13px;height:1.8px}
.frage-zeichen::after{width:1.8px;height:13px}
.frage.offen .frage-zeichen{transform:rotate(180deg)}
.frage.offen .frage-zeichen::after{transform:translate(-50%,-50%) scaleY(0)}
.frage.offen .frage-zeichen::before{background:var(--c2)}
.frage-koerper{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--ease);
}
.frage.offen .frage-koerper{grid-template-rows:1fr}
.frage-inhalt{overflow:hidden}
.frage-inhalt p{
  padding:0 24px 22px;font-size:15px;font-weight:300;color:var(--text-2);line-height:1.78;
  opacity:0;transform:translateY(-6px);transition:opacity .45s var(--ease) .05s,transform .45s var(--ease) .05s;
}
.frage.offen .frage-inhalt p{opacity:1;transform:none}

/* ---------- Über: erweitert ---------- */
.ueber-mehr{margin-top:78px}
.werte{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:880px){.werte{grid-template-columns:1fr}}
.wert{
  position:relative;padding:28px 26px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.wert:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.wert-ic{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  margin-bottom:17px;color:var(--c2);background:var(--surface-2);border:1px solid var(--border);
  transition:transform .5s var(--ease);
}
@keyframes huepfen2{
  0%,100%{transform:translateY(0) rotate(-8deg) scale(1.06)}
  50%    {transform:translateY(-7px) rotate(-8deg) scale(1.06)}
}
.wert:hover .wert-ic{
  transform:rotate(-8deg) scale(1.06);
  animation:huepfen2 1.1s ease-in-out .3s infinite;
}
.wert-ic svg{width:19px;height:19px}
.wert h3{font-size:16.5px;font-weight:600;margin-bottom:9px;letter-spacing:-.012em}
.wert p{font-size:14.4px;font-weight:300;color:var(--text-2);line-height:1.74}

/* ---------- WhatsApp-Weg ---------- */
.weg.wa .weg-ic{background:rgba(37,211,102,.12);color:#25D366}
[data-theme="dunkel"] .weg.wa .weg-ic{background:rgba(37,211,102,.16)}

/* ---------- Einblenden beim Scrollen ---------- */
.zeig{opacity:0;transform:translateY(26px);filter:blur(9px);transition:opacity .95s var(--ease),transform .95s var(--ease),filter .95s var(--ease)}
.zeig.da{opacity:1;transform:none;filter:blur(0)}
/* Varianten, damit nicht alles gleich hereinkommt */
.zeig.von-links{transform:translateX(-34px) translateY(14px)}
.zeig.von-rechts{transform:translateX(34px) translateY(14px)}
.zeig.von-links.da,.zeig.von-rechts.da{transform:none}
.zeig.wuchs{transform:translateY(22px) scale(.965)}
.zeig.wuchs.da{transform:none}

/* ---------- Bewegung reduzieren ---------- */
@media(prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .zeig{opacity:1!important;transform:none!important;filter:none!important}
  .aura,.band::before,.ueber-bild .schein{animation:none}
  .wort > i{transform:none!important;opacity:1!important}
  .marker::before{transform:scaleX(1)!important}
  .karte::after,.arbeit::after,.staerke::after,.wert::after,
  .weg::after,.band::after,.frage::after,form::after{display:none}
  .schritt:not(.an) h3,.schritt:not(.an) p{opacity:1}
  /* Kein Wippen, kein Mitziehen. Die Wolke steht wieder fest in der
     Bühne: ohne laufende Animation greift das Ausblenden über --fort
     nicht, eine fixierte Wolke bliebe sonst dauerhaft über der Seite. */
  .weiter-pfeil{animation:none}
  .bandsym span{animation:none}
  .buehne-in{transform:none!important;opacity:1!important}
  .buehne > .aura{position:absolute}
}

/* ---------- Zum-Anfang-Knopf ---------- */
.hoch{
  position:fixed;right:22px;bottom:22px;width:44px;height:44px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);color:var(--text-2);
  display:grid;place-items:center;cursor:pointer;z-index:50;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transform:translateY(12px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),color .25s,border-color .25s;
}
.hoch.da{opacity:1;pointer-events:auto;transform:none}
.hoch:hover{color:var(--text);border-color:var(--border-2)}
.hoch svg{width:17px;height:17px}

/* ══════════════════════════════════════════════════════════════
   SCROLL-ÜBERGÄNGE (13.09.2026)
   Jeder Abschnitt kommt beim Scrollen unscharf und in Bewegung
   herein — in beide Richtungen. Welcher Abschnitt welche Bewegung
   bekommt, steht als Klasse m0/m1/m2/m7 im HTML.
     m0  nur Unschärfe      m1  von rechts
     m2  von links          m7  aus der Tiefe
   Ohne Klasse = gar kein Übergang (so steht „Häufige Fragen").

   --un  1 = Abschnitt noch weit weg, 0 = ganz da   (Bewegung)
   --unw daraus quadratisch abgeleitet              (Unschärfe)
   Beides setzt skript.js bei jedem Bild.
   ══════════════════════════════════════════════════════════════ */
/* Referenzen-Hinweis am Ende der Projekte — Ziel gibt es noch nicht */
.referenz-weg{display:flex;flex-direction:column;align-items:center;gap:7px;
  margin-top:clamp(28px,3.2vw,42px);text-align:center}
.referenz-link{display:inline-flex;align-items:center;gap:12px;
  font-size:16.5px;font-weight:600;letter-spacing:-.012em;color:var(--text);
  font-family:inherit;background:none;border:0;padding:0;cursor:pointer}
.referenz-pfeil{width:36px;height:36px;border-radius:50%;background:var(--grad);
  display:grid;place-items:center;flex-shrink:0;color:#fff;
  transition:transform .25s var(--ease)}
.referenz-pfeil svg{width:17px;height:17px}
.referenz-link:hover .referenz-pfeil{transform:translateX(4px)}
.referenz-link[aria-expanded="true"] .referenz-pfeil{transform:rotate(90deg)}
/* Der Hinweis erscheint erst auf Klick — weich, nicht springend */
.referenz-hinweis{font-size:13.5px;font-weight:300;color:var(--text-3);
  margin:0;opacity:0;max-height:0;overflow:hidden;transform:translateY(-4px);
  transition:opacity .3s var(--ease),max-height .3s var(--ease),transform .3s var(--ease)}
.referenz-weg.offen .referenz-hinweis{opacity:1;max-height:4em;transform:none}
/* auch auf dem Handy mittig — sonst springt der Knopf an den Rand */

/* ---------- Zeigerlicht in den weißen Feldern ----------
   Am 17.08. von Frank so gewählt: nur innerhalb der Felder, nicht über der
   ganzen Seite. .karte und .arbeit hatten es schon, hier kommen die sechs
   übrigen dazu. Die Maus-Position setzt skript.js als --mx/--my. */
.staerke,.wert,.weg,.band,.frage,form{position:relative;overflow:hidden}
.staerke::after,.wert::after,.weg::after,.band::after,.frage::after,form::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),
    rgba(167,139,250,.15), rgba(96,165,250,.085) 42%, transparent 70%);
  opacity:0;transition:opacity .5s var(--ease);
}
.staerke:hover::after,.wert:hover::after,.weg:hover::after,
.band:hover::after,.frage:hover::after,form:hover::after{opacity:1}
.staerke > *,.wert > *,.weg > *,.band > *,.frage > *,form > *{position:relative;z-index:1}


/* ---------- Schwebende Symbole im Betreuungsband ----------
   Links und rechts vom Text, jedes mit eigenem Takt und eigener Richtung,
   damit es durcheinander wirkt statt wie eine Reihe. Unter 900px weg,
   dort braucht der Text die volle Breite. Rein schmückend, aria-hidden. */
.bandsym{position:absolute;inset:0;z-index:0;pointer-events:none}
.bandsym span{position:absolute;display:block;opacity:0;transition:opacity .55s var(--ease)}
/* Erst wenn der Zeiger auf dem Kasten steht */
.betreuband:hover .bandsym span{opacity:var(--o)}
.bandsym svg{width:100%;height:100%}
.betreuband .band-in{position:relative;z-index:2}
@media(max-width:900px){.bandsym{display:none}}
.bandsym .s0{left:4.9%;top:47.2%;width:19px;height:19px;--o:0.43;transition-delay:0ms;color:var(--c1);animation:schweben0 6.9s ease-in-out 2.2s infinite}
@keyframes schweben0{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-15px) rotate(2deg)}}
.bandsym .s1{left:94.7%;top:50.9%;width:25px;height:25px;--o:0.39;transition-delay:45ms;color:var(--c2);animation:schweben1 7.4s ease-in-out 4.0s infinite}
@keyframes schweben1{0%,100%{transform:translateY(0) rotate(8deg)}50%{transform:translateY(-10px) rotate(-8deg)}}
.bandsym .s2{left:1.9%;top:27.2%;width:23px;height:23px;--o:0.43;transition-delay:90ms;color:var(--c3);animation:schweben2 6.7s ease-in-out 2.5s infinite}
@keyframes schweben2{0%,100%{transform:translateY(0) rotate(5deg)}50%{transform:translateY(-10px) rotate(-5deg)}}
.bandsym .s3{left:87.2%;top:68.3%;width:22px;height:22px;--o:0.43;transition-delay:135ms;color:var(--c1);animation:schweben3 7.9s ease-in-out 3.6s infinite}
@keyframes schweben3{0%,100%{transform:translateY(0) rotate(5deg)}50%{transform:translateY(-16px) rotate(-5deg)}}
.bandsym .s4{left:13.0%;top:54.6%;width:19px;height:19px;--o:0.46;transition-delay:180ms;color:var(--c2);animation:schweben4 7.9s ease-in-out 0.1s infinite}
@keyframes schweben4{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}
.bandsym .s5{left:98.2%;top:36.3%;width:23px;height:23px;--o:0.45;transition-delay:225ms;color:var(--c3);animation:schweben5 9.1s ease-in-out 2.4s infinite}
@keyframes schweben5{0%,100%{transform:translateY(0) rotate(-0deg)}50%{transform:translateY(-16px) rotate(0deg)}}
.bandsym .s6{left:12.2%;top:59.4%;width:29px;height:29px;--o:0.43;transition-delay:270ms;color:var(--c1);animation:schweben6 9.1s ease-in-out 4.0s infinite}
@keyframes schweben6{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-15px) rotate(-2deg)}}
.bandsym .s7{left:85.9%;top:72.3%;width:21px;height:21px;--o:0.38;transition-delay:315ms;color:var(--c2);animation:schweben7 7.8s ease-in-out 2.7s infinite}
@keyframes schweben7{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-9px) rotate(-0deg)}}
.bandsym .s8{left:13.6%;top:39.5%;width:28px;height:28px;--o:0.33;transition-delay:360ms;color:var(--c3);animation:schweben8 9.6s ease-in-out 1.9s infinite}
@keyframes schweben8{0%,100%{transform:translateY(0) rotate(5deg)}50%{transform:translateY(-11px) rotate(-5deg)}}
.bandsym .s9{left:85.2%;top:44.1%;width:23px;height:23px;--o:0.39;transition-delay:405ms;color:var(--c1);animation:schweben9 9.9s ease-in-out 2.2s infinite}
@keyframes schweben9{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-15px) rotate(3deg)}}


/* ---------- Attrappen und Schaufenster ----------
   Bewusst ohne Inhalt: keine echten Daten, keine Kundennamen. Sie zeigen den
   Aufbau, nicht die Füllung. Mehrere Varianten je Anwendung, damit sichtbar
   wird, dass sich das anpassen lässt. */

/* Karten, hinter denen ein Schaufenster liegt */
.karte[data-schau],.arbeit[data-schau]{cursor:pointer}
.schau-hinweis{display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:13px;font-weight:500;color:var(--c2)}
.schau-hinweis svg{width:15px;height:15px}

/* Das Fenster selbst */
.schau{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;
  background:rgba(12,12,14,.62);opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease)}
.schau.offen{opacity:1;pointer-events:auto}
.schau-kasten{width:min(1100px,100%);max-height:90vh;overflow:auto;background:var(--surface);
  border:1px solid var(--border);border-radius:22px;padding:34px 34px 30px;
  transform:translateY(14px) scale(.985);transition:transform .35s var(--ease)}
.schau.offen .schau-kasten{transform:none}
.schau-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:6px}
.schau-kopf h3{font-size:clamp(19px,2.4vw,25px);font-weight:600;letter-spacing:-.02em}
.schau-kopf p{margin-top:8px;font-size:14.6px;font-weight:300;color:var(--text-2);line-height:1.6;max-width:78ch}
.schau-zu{flex-shrink:0;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);
  background:var(--bg);color:var(--text-2);display:grid;place-items:center;cursor:pointer}
.schau-zu:hover{border-color:var(--c2);color:var(--text)}
.schau-zu svg{width:17px;height:17px}
.schau-fuss{margin-top:16px;padding-top:13px;border-top:1px solid var(--hair);
  font-size:13.6px;font-weight:300;color:var(--text-3)}

html{--staerke:3px}   /* Spitzenwert der Unschärfe — hier an einer Stelle einstellbar */
main{overflow-x:clip}
main > section{position:relative}

/* Die eingebaute Einblendung würde sich mit den Übergängen überlagern.
   Sie wird nur abgeschaltet, wenn skript.js läuft — ohne JavaScript
   bleibt die alte Einblendung erhalten. */
html.uebergaenge .zeig{opacity:1!important;transform:none!important;filter:none!important}

/* Grundlage für alle Abschnitte mit Übergang */
main > section.m0 > .wrap,
main > section.m1 > .wrap,
main > section.m2 > .wrap,
main > section.m7 > .wrap{
  filter:blur(calc(var(--unw,0) * var(--staerke,3px)));
  opacity:calc(1 - var(--un,0) * .35);
  transform:scale(calc(1 + var(--un,0) * .12));}

/* m1 — von rechts */
main > section.m1 > .wrap{
  transform:translateX(calc(var(--un,0) * 22vw)) scale(calc(1 + var(--un,0) * .12));}

/* m2 — von links */
main > section.m2 > .wrap{
  transform:translateX(calc(var(--un,0) * -22vw)) scale(calc(1 + var(--un,0) * .12));}

/* m7 — aus der Tiefe */
main > section.m7 > .wrap{
  transform:scale(calc(1 - var(--un,0) * .26));
  filter:blur(calc(var(--unw,0) * var(--staerke,3px) * 1.1));
  opacity:calc(1 - var(--un,0) * .55);}

/* ── Fokus: Klick im Menü zeigt einen Abschnitt allein ──
   An der Seite wird nichts verändert — gescrollt wird durchgehend
   normal. Über die Nachbarn legt sich nur eine Fläche, die sich
   beim Hinausscrollen stufenlos auflöst. */
#fokusgrund{
  position:fixed;inset:0;z-index:30;pointer-events:none;
  opacity:0;visibility:hidden;}
html.fokus-an #fokusgrund{visibility:visible}
main > section.fokus{z-index:31}

@media(prefers-reduced-motion: reduce){
  main > section.m0 > .wrap,main > section.m1 > .wrap,
  main > section.m2 > .wrap,main > section.m7 > .wrap{
    filter:none!important;transform:none!important;opacity:1!important}
  #fokusgrund{display:none}
}

/* ——— Schaufenster: Galerie mit großer Bühne und Miniaturen ——— */
.schau-bilder{display:block;margin-top:24px}
.schau-buehne{border:1px solid var(--border);border-radius:16px;
  background:radial-gradient(130% 120% at 50% 0%,rgba(167,139,250,.085),rgba(96,165,250,.05) 45%,transparent 72%),var(--bg);
  height:min(58vh,560px);display:flex;align-items:center;justify-content:center;
  padding:20px;overflow:hidden}
.schau-gross{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 16px 32px rgba(12,12,14,.24));transition:opacity .22s var(--ease)}
.schau-gross.blende{opacity:0}
.schau-bu{margin-top:13px;font-size:14.2px;font-weight:500;text-align:center;color:var(--text-2)}
.schau-wahl{display:flex;gap:11px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.schau-mini{width:112px;height:74px;border-radius:11px;border:1px solid var(--border);
  background:var(--bg);padding:6px;cursor:pointer;overflow:hidden;display:grid;place-items:center;
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.schau-mini img{width:100%;height:100%;object-fit:contain}
.schau-mini:hover{transform:translateY(-2px);border-color:var(--c2)}
.schau-mini.an{border-color:var(--c2);box-shadow:0 0 0 2px rgba(96,165,250,.26)}
@media(max-width:620px){
  /* Auf dem Handy zählt die Breite. Die Bühne richtet sich nach dem Bild,
     statt eine feste Höhe vorzugeben, in der ein Querformat winzig bleibt. */
  .schau{padding:12px}
  .schau-kasten{padding:22px 16px 20px;border-radius:18px;max-height:92vh}
  .schau-kopf h3{font-size:20px}
  .schau-kopf p{font-size:13.6px;margin-top:6px}
  .schau-buehne{height:auto;min-height:0;padding:10px;display:block}
  .schau-gross{width:100%;height:auto;max-height:52vh;display:block;margin:0 auto}
  .schau-bu{margin-top:11px;font-size:13.4px}
  /* Die Vorschauen bleiben in einer Reihe, zum Wischen statt Umbrechen */
  .schau-wahl{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    gap:9px;margin-top:13px;padding-bottom:5px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .schau-wahl::-webkit-scrollbar{display:none}
  .schau-mini{flex:0 0 auto;width:80px;height:56px;padding:4px;border-radius:9px}
  .schau-fuss{font-size:12.6px;margin-top:13px;padding-top:11px}
}
/* Der Schließknopf soll keinen gelben Systemrahmen bekommen */
.schau-zu:focus{outline:none}
.schau-zu:focus-visible{outline:2px solid var(--c2);outline-offset:2px}
.schau-mini:focus{outline:none}
.schau-mini:focus-visible{outline:2px solid var(--c2);outline-offset:2px}


/* ——— Handy: Anfragen aus dem Menü heraus erreichbar ——— */
.menu-cta{display:none}
@media(max-width:940px){
  .menu .menu-cta{display:block;margin:16px 0 4px;text-align:center;
    background:linear-gradient(120deg,var(--c1),var(--c2),var(--c3));
    color:#fff;border-radius:999px;padding:15px 22px;font-weight:600;
    font-size:15.5px;letter-spacing:-.01em;border-bottom:0;box-shadow:none}
  .menu .menu-cta:hover{color:#fff}
  /* Der Pfeil nach oben sitzt tiefer, damit er keinen Kartentext überdeckt */
  .hoch{right:16px;bottom:16px;width:40px;height:40px}
}


/* ——— Handy: eingeklappte Projekttexte und etwas enger gesetzte Karten ——— */
.mehr-dazu{display:none}
@media(max-width:940px){
  .arbeit p.weiter{display:none}
  .arbeit.offen p.weiter{display:block}
  .mehr-dazu{display:inline-flex;align-items:center;gap:6px;margin:2px 0 4px;
    background:none;border:0;padding:6px 0;cursor:pointer;font:inherit;
    font-size:14.6px;font-weight:600;color:var(--c2);-webkit-tap-highlight-color:transparent}
  .mehr-dazu::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);
    transition:transform .25s var(--ease)}
  .arbeit.offen .mehr-dazu::after{transform:rotate(-135deg) translate(-2px,-2px)}
  /* Etwas enger gesetzt, spart über die ganze Seite eine halbe Bildschirmhöhe */
  .arbeit p, .karte p{line-height:1.66}
  .arbeit{padding-top:26px;padding-bottom:26px}
  .karte{padding:26px 24px 28px}
}

@media(max-width:940px){
  /* Neun Abschnitte mal 88 Punkte oben und unten ergeben fast zwei
     Bildschirmhöhen reine Luft. Auf dem Handy reichen 60. */
  section{padding-top:60px;padding-bottom:60px}
  .buehne{padding-top:56px;padding-bottom:72px}
}

/* ═══ Handy: kurze Startseite, Bereiche einzeln über das Menü ═══
   Am Rechner bleibt alles eine durchgehende Seite. Auf dem Handy sieht man
   zuerst nur die Bühne und einen Wegweiser, die Bereiche kommen auf Zuruf. */
.wegweiser{display:none}
.bereich-kopf{display:none}

@media(max-width:940px){
  .wegweiser{display:block;max-width:var(--max);margin:0 auto;
    padding:0 24px 64px}
  .wegweiser-hin{font-size:12.4px;font-weight:600;letter-spacing:.1em;
    text-transform:uppercase;color:var(--text-3);margin-bottom:14px;padding-left:2px}
  .wegweiser a{display:flex;align-items:center;gap:14px;
    background:var(--surface);border:1px solid var(--border);border-radius:16px;
    padding:15px 16px;margin-bottom:10px;text-decoration:none;color:inherit;
    -webkit-tap-highlight-color:transparent;
    transition:border-color .25s var(--ease),transform .2s var(--ease)}
  .wegweiser a:active{transform:scale(.985)}
  .wz-ic{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff}
  .wz-ic svg{width:21px;height:21px}
  .wz-tx{flex:1;min-width:0}
  .wz-tx b{display:block;font-size:15.6px;font-weight:600;letter-spacing:-.01em}
  .wz-tx span{display:block;font-size:13px;font-weight:300;color:var(--text-3);
    margin-top:3px;line-height:1.45}
  .wz-pf{width:8px;height:8px;flex:none;border-right:2px solid var(--text-3);
    border-bottom:2px solid var(--text-3);transform:rotate(-45deg);margin-right:4px}
  .wegweiser a.wz-haupt{border-color:transparent;
    background:linear-gradient(120deg,var(--c1),var(--c2),var(--c3));color:#fff}
  .wegweiser a.wz-haupt .wz-ic{background:rgba(255,255,255,.22)}
  .wegweiser a.wz-haupt .wz-tx span{color:rgba(255,255,255,.82)}
  .wegweiser a.wz-haupt .wz-pf{border-color:#fff}

  /* Startzustand: nur Bühne und Wegweiser */
  body.mit-bereichen:not(.bereich) main > section:not(.buehne){display:none}
  /* Ein Bereich ist aufgerufen: nur dieser, ohne Bühne und Wegweiser */
  body.mit-bereichen.bereich .buehne, body.mit-bereichen.bereich .wegweiser{display:none}
  body.mit-bereichen.bereich main > section:not(.aktiv),
  body.mit-bereichen.bereich main > section#druck:not(.aktiv),
  body.mit-bereichen:not(.bereich) main > section#druck{display:none}
  body.mit-bereichen.bereich main > section.aktiv{display:block;padding-top:14px}
  body.mit-bereichen.bereich main > section#druck.aktiv{display:block}

  /* Kopfzeile über dem aufgerufenen Bereich */
  /* Die Kopfleiste liegt fest über der Seite, der Zurückweg muss darunter */
  body.mit-bereichen.bereich .bereich-kopf{display:flex;align-items:center;gap:11px;
    max-width:var(--max);margin:0 auto;padding:88px 24px 0}
  .bereich-zurueck{display:inline-flex;align-items:center;gap:8px;
    background:var(--surface);border:1px solid var(--border);border-radius:999px;
    padding:9px 16px 9px 12px;font:inherit;font-size:14px;font-weight:600;
    color:var(--text-2);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .bereich-zurueck::before{content:"";width:7px;height:7px;
    border-left:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg)}
}

@media(max-width:600px){
  .wegweiser{padding-left:20px;padding-right:20px}
  body.mit-bereichen.bereich .bereich-kopf{padding-left:20px;padding-right:20px}
}

/* Zweiter Weg zurück am Ende eines Bereichs */
.bereich-fuss{display:none}
@media(max-width:940px){
  body.mit-bereichen.bereich .bereich-fuss{display:flex;justify-content:center;
    max-width:var(--max);margin:0 auto;padding:4px 24px 56px}
  body.mit-bereichen.bereich .bereich-fuss .bereich-zurueck{padding:12px 22px 12px 18px;font-size:14.4px}
}
@media(max-width:600px){
  body.mit-bereichen.bereich .bereich-fuss{padding-left:20px;padding-right:20px}
}

/* ——— 3D-Druck: Werkstoffe als farbige Kacheln ——— */
.stoffe-kopf{font-size:12.4px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:16px}
.stoffe{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:26px}
.stoff{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:16px 15px 15px;position:relative;overflow:hidden;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.stoff:hover{border-color:var(--c2);transform:translateY(-2px)}
/* Gleiche Machart wie die Symbole auf den Leistungskarten: Markenverlauf als
   Fläche, weißes Liniensymbol darin. Die Farbe steht damit für die Marke und
   nicht für den Werkstoff. */
.stoff .st-z{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  margin-top:0;margin-bottom:16px;color:#fff;font-size:0;
  background:var(--grad);background-size:180% 180%;
  box-shadow:0 8px 22px rgba(167,139,250,var(--glow));
  transition:transform .55s var(--ease),box-shadow .5s var(--ease)}
.stoff .st-z svg{width:21px;height:21px;transition:transform .55s var(--ease)}
.stoff:hover .st-z{transform:translateY(-2px) rotate(-5deg) scale(1.05)}
.stoff .st-z svg *{stroke:#fff}
.stoff:hover .st-z svg{transform:rotate(5deg)}
.stoff b{display:block;font-size:15.6px;font-weight:600;letter-spacing:-.01em}
.stoff span{display:block;font-size:12.8px;font-weight:300;color:var(--text-3);
  margin-top:5px;line-height:1.5}
@media(max-width:1000px){.stoffe{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){
  .stoffe{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:22px}

  .stoff{padding:14px 13px 13px}
  .stoff .st-z{width:40px;height:40px;border-radius:12px;margin-bottom:13px}
  .stoff .st-z svg{width:19px;height:19px}
  .stoff b{font-size:14.8px}
  .stoff span{font-size:12.2px}
}
@media(max-width:339px){.stoffe{grid-template-columns:1fr}}

/* Steht der Kasten als erstes im Abschnitt, addiert sich sein Abstand
   auf das Polster des Abschnitts. Dann braucht er keinen eigenen. */
#grenzen .nichtmachen, #arbeitsweise .nichtmachen:first-child{margin-top:0}

/* ===================================================================
   Bewertungen — Formular auf bewertung.html und Anzeige bei Referenzen
   =================================================================== */

/* nur für Vorleseprogramme sichtbar */
.vb{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Seite bewertung.html ---------- */
.bew-buehne{padding:132px 0 92px}
@media(max-width:700px){.bew-buehne{padding:108px 0 64px}}
.bew-kopfblock{max-width:62ch;margin-bottom:44px}
.bew-kopfblock h1{font-size:clamp(28px,4vw,40px);font-weight:500;letter-spacing:-.02em;
  margin:14px 0 18px;line-height:1.18}
.bew-kopfblock p{color:var(--text-2);font-weight:300;line-height:1.8;font-size:15.6px}
.bew-form{max-width:680px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:34px 32px 30px}
@media(max-width:560px){.bew-form{padding:26px 20px 24px}}

/* ---------- Sterne zum Anklicken ---------- */
.sterne-feld{border:0;padding:0;margin:0 0 26px}
.sterne-feld legend{font-size:13.2px;font-weight:400;color:var(--text-2);
  letter-spacing:.01em;margin-bottom:10px;padding:0}
.sterne-feld legend .pflicht{color:var(--c3)}
.sterne{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:5px;position:relative}
.sterne input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.sterne label{cursor:pointer;color:var(--border-2);line-height:0;
  transition:color .18s var(--ease), transform .18s var(--ease)}
.sterne label svg{width:36px;height:36px;fill:currentColor;display:block}
.sterne input:not(.stern-null):checked ~ label{color:var(--c2)}
.sterne:hover label{color:var(--border-2)}
.sterne label:hover, .sterne label:hover ~ label{color:var(--c1)}
.sterne label:hover{transform:translateY(-2px)}
.sterne input:focus-visible + label{outline:2px solid var(--c1);outline-offset:3px;border-radius:5px}
.sterne-wort{margin:11px 0 0;font-size:14px;color:var(--text);font-weight:400}
.sterne-tipp{margin:4px 0 0;font-size:12.2px;color:var(--text-3);font-weight:300}
.namensform[hidden]{display:none}

/* ---------- Anzeige bei den Referenzen ---------- */
.bewertungen{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:18px;margin-top:26px}
.bewertung{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:24px 24px 22px;display:flex;flex-direction:column;gap:13px}
.bew-zeile{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bew-sterne{display:flex;gap:3px;line-height:0;color:var(--border-2)}
.bew-sterne svg{width:17px;height:17px;fill:currentColor;display:block}
.bew-sterne svg.an{color:var(--c2)}
.bew-quelle{font-size:11.4px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);font-weight:400;white-space:nowrap}
.bewertung p{margin:0;color:var(--text-2);font-weight:300;line-height:1.78;font-size:15px}
.bew-fuss{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  padding-top:12px;border-top:1px solid var(--hair);margin-top:auto}
.bew-fuss b{font-weight:400;font-size:14.4px;color:var(--text)}
.bew-fuss span{font-size:12.6px;color:var(--text-3);font-weight:300}
.bew-pruef{margin:24px 0 0;font-size:12.8px;color:var(--text-3);font-weight:300;
  line-height:1.72;max-width:76ch}
.bew-leer{margin:20px 0 0;color:var(--text-2);font-weight:300;line-height:1.8;max-width:62ch}
.bew-aufruf{display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-size:14.2px;color:var(--text);text-decoration:none;font-weight:400;
  border-bottom:1px solid var(--border-2);padding-bottom:2px;
  transition:border-color .25s var(--ease), color .25s var(--ease)}
.bew-aufruf:hover{color:var(--c2);border-bottom-color:var(--c2)}
.bew-aufruf svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* Referenzen: geschlossener Zustand klappt weich auf, offener Block steht für sich */
.referenz-inhalt{display:grid;grid-template-rows:0fr;width:100%;
  transition:grid-template-rows .42s var(--ease),opacity .32s var(--ease);opacity:0}
.referenz-inhalt > div{overflow:hidden;display:flex;flex-direction:column;
  align-items:center;gap:4px}
.referenz-weg.offen .referenz-inhalt{grid-template-rows:1fr;opacity:1}
.referenzen-block{margin-top:clamp(40px,4.4vw,64px);
  padding-top:clamp(36px,4vw,54px);border-top:1px solid var(--hair)}
.referenzen-block .kopf{margin-bottom:0}
.referenzen-block h3{font-size:clamp(22px,2.6vw,30px);font-weight:500;
  letter-spacing:-.018em;margin:12px 0 12px;line-height:1.2}
.referenzen-block .kopf p{color:var(--text-2);font-weight:300;font-size:15px;margin:0}

/* Bewertungen im aufklappbaren Referenzbereich brauchen die volle Breite —
   der Aufklapper zentriert sonst alles auf Inhaltsbreite */
.referenz-inhalt .bewertungen,
.referenz-inhalt .bew-pruef{width:100%;align-self:stretch}
.referenz-inhalt .bew-pruef{text-align:center;margin-left:auto;margin-right:auto}
.bew-zusammen{margin:14px 0 0;font-size:14.6px;color:var(--text-2);font-weight:300}
.referenz-inhalt .bewertungen{margin-top:20px}
/* Bewertungskarten lesen sich linksbündig und in Buchbreite besser —
   der Aufklapper zentriert sonst alles, weil er für den Knopf gedacht war */
.referenz-inhalt .bewertungen{justify-items:center}
.referenz-inhalt .bewertung{text-align:left;width:100%;max-width:620px}