/* ============================================================
   SSM Stickservice Markranstädt
   Richtung: Filmbuehne, Gold auf Tannengruen
   Entscheidung Benny 2026-08-04 nach Ausflug ueber Silber/Rot/Anthrazit:
   zurueck zu Gold und Gruen. Hinweis: Katjas eigenes Logo ist rot auf
   schwarz (Google-Profil, gemessen #6C1414 im Schatten). Falls Katja
   die Seite an ihr Logo anlehnen will, liegt die Rot-Fassung im
   Verlauf der Kundenakte dokumentiert.
   Schriften lokal, keine externen Anfragen, kein Cookie noetig
   ============================================================ */
@font-face{font-family:'Sora';src:url('assets/fonts/sora-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Sora';src:url('assets/fonts/sora-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Sora';src:url('assets/fonts/sora-800.woff2') format('woff2');font-weight:800;font-display:swap}

:root{
  --grund:#0B2019;        /* Tannengruen */
  --karte:rgba(212,175,55,.10);
  --rand:rgba(212,175,55,.44);
  --titel:#FFFBF0;        /* warmes Weiss */
  --text:#D2C7A9;         /* Fliesstext mit Goldstich */
  --leise:#B6A98A;
      /* Sattes Metallgold. Drei Stufen, damit Flaechen einen echten
     Verlauf bekommen und nicht flach wirken. */
  --akz:#D4AF37;          /* Gold, die tragende Farbe */
  --akz2:#A87F1E;         /* Schattenseite */
  --akz3:#F7E9AE;         /* Lichtkante */
  --akzHell:#F2DFA0;      /* Goldton fuer Schrift auf dunklem Grund */
  --aufAkz:#1A1204;       /* Schrift auf Goldflaechen */
  --band:rgba(212,175,55,.30);
  --breite:1180px;
  --rundung:24px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--grund);color:var(--text);
  font-family:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:var(--akz)}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{list-style:none;padding:0}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 26px}
.nurlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Leinenraster als ruhige Grundtextur */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(240,221,176,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(240,221,176,.05) 1px,transparent 1px);
  background-size:64px 64px}
/* Goldwolken, damit die Flaeche unter der Buehne nicht tot wirkt.
   Fest im Blickfeld, dadurch wandern sie beim Scrollen ueber den Inhalt
   und kosten keine Rechenzeit. */
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(48% 38% at 12% 28%,rgba(217,190,126,.13),transparent 70%),
             radial-gradient(44% 36% at 88% 62%,rgba(147,197,160,.11),transparent 70%),
             radial-gradient(40% 34% at 40% 88%,rgba(217,190,126,.09),transparent 72%)}
body>*{position:relative;z-index:1}

/* ---------- Zeichnungen im Hintergrund ----------
   Nadeln, Garnrollen und Faeden als feine Linien. Sie liegen hinter dem
   Inhalt, nehmen keine Klicks an und sind so blass, dass sie den Text
   nicht stoeren. Ohne sie waere die Flaeche unter der Buehne leer. */
/* 🚨 overflow-x:clip, nicht hidden. Die gedrehten Zeichnungen ragen ueber
   den Rand und machten die Seite 10 px breiter. "hidden" wuerde zugleich
   die Schatten der Bilder nach unten abschneiden, "clip" beschneidet nur
   waagerecht und laesst senkrechte Ueberhaenge stehen. */
section{position:relative;overflow-x:clip}
/* 🚨 Deckkraft ruhig hoch: Die Zeichnungen liegen zwar hinter dem Text,
   aber selbst bei 26 % bleibt eine Goldlinie auf dem dunklen Grund so
   dunkel, dass weisser Text darueber noch 9:1 erreicht. Zu blass gesetzt
   sieht man sie gar nicht, und dann kann man sie auch weglassen. */
.deko{position:absolute;z-index:0;pointer-events:none;
  fill:none;stroke:var(--akz);stroke-width:1.5;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round;opacity:.26}
section > .wrap{position:relative;z-index:1}
/* 🚨 Muss über der Regel darüber stehen bleiben. "section > .wrap" hat die
   höhere Spezifität und hatte den Bühnentext auf z-index 1 gezogen. Bei
   gleichem Wert wird ein ::after nach den Kindern gemalt, der Schleier lag
   also über der Schrift und machte sie fast unlesbar. Zwei Klassen im
   Selektor schlagen Klasse plus Typ. */
.buehne > .buehne__wrap{z-index:2}

.deko--nadel-1{right:2%;top:4%;width:48px;height:240px;transform:rotate(18deg)}
.deko--nadel-2{left:1%;bottom:6%;width:40px;height:200px;transform:rotate(-24deg)}
.deko--rolle-1{left:1%;top:9%;width:112px;height:168px;transform:rotate(-9deg)}
.deko--rolle-2{right:3%;bottom:7%;width:96px;height:144px;transform:rotate(11deg)}
.deko--rolle-3{right:6%;top:10%;width:104px;height:156px;transform:rotate(6deg)}
.deko--faden-1{left:0;bottom:3%;width:min(52%,600px);opacity:.24}
.deko--faden-2{right:0;top:6%;width:min(46%,540px);transform:scaleX(-1);opacity:.22}

/* Sanftes Schweben, damit der Hintergrund lebt statt zu stehen.
   "translate" statt "transform", sonst wuerde die Drehung ueberschrieben. */
@media (prefers-reduced-motion:no-preference){
  .deko--nadel-1,.deko--rolle-2{animation:schweben 13s ease-in-out infinite}
  .deko--rolle-1,.deko--nadel-2{animation:schweben 17s ease-in-out infinite reverse}
  .deko--rolle-3{animation:schweben 15s ease-in-out infinite 1.5s}
}
@keyframes schweben{
  0%,100%{translate:0 0}
  50%{translate:0 -14px}
}

@media (max-width:900px){
  /* Auf schmalen Bildschirmen nur wenige, sonst wird es unruhig */
  .deko--nadel-2,.deko--rolle-3,.deko--faden-2{display:none}
  .deko--rolle-1{width:52px;height:78px;left:-2%}
  .deko--nadel-1{width:24px;height:120px;right:-1%}
}

/* ---------- Naht als Abschnittstrenner ----------
   Wird beim Einscrollen gezeichnet, so wie eine Naht entsteht. Der
   Trenner ist ein SVG, damit sich der Strich wirklich aufbauen kann. */
.naht{display:block;width:100%;height:16px;overflow:visible}
.naht path{fill:none;stroke:var(--akz);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:14 11;stroke-dashoffset:var(--laenge,1400);opacity:.8}
.naht.genaeht path{transition:stroke-dashoffset 1.5s cubic-bezier(.22,1,.36,1);stroke-dashoffset:0}

/* ---------- Einfahren beim Einscrollen ----------
   Die Klasse wird erst per Skript vergeben. Ohne JavaScript ist
   deshalb alles sofort sichtbar, nichts bleibt unsichtbar liegen. */
.js .einfahren{opacity:0;transform:translateY(20px)}
.js .einfahren.da{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}

/* ---------- Naht unter den Abschnittsueberschriften ---------- */
h2{position:relative;padding-bottom:14px}
h2::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:0;border-radius:3px;
  background:linear-gradient(90deg,#F7E9AE,#D4AF37 45%,transparent);
  transition:width .8s cubic-bezier(.22,1,.36,1) .1s}
.kopfzeile.mitte h2::after{left:50%;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,#D4AF37 30%,#F7E9AE 50%,#D4AF37 70%,transparent)}
h2.da::after{width:78px}
.kopfzeile.mitte h2.da::after{width:120px}

/* ---------- Glanzstreifen ueber Bildern ---------- */
.leistungen article,.faecher figure{position:relative;overflow:hidden}
.leistungen article::after,.faecher figure::after{content:'';position:absolute;inset:0;
  pointer-events:none;opacity:0;transform:translateX(-120%);
  background:linear-gradient(104deg,transparent 38%,rgba(255,248,230,.16) 50%,transparent 62%)}
@media (hover:hover){
  .leistungen article:hover::after,.faecher figure:hover::after{
    opacity:1;transform:translateX(120%);transition:transform 1.1s ease,opacity .2s}
  .leistungen article:hover img,.faecher figure:hover img{transform:scale(1.045)}
}
.leistungen img,.faecher img{transition:transform .7s cubic-bezier(.22,1,.36,1)}

/* ---------- Ziffern zaehlen mit ---------- */
.zahlen strong{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .js .einfahren,.js .einfahren.da{opacity:1;transform:none;transition:none}
  .naht.genaeht path{transition:none;stroke-dashoffset:0}
  h2::after{transition:none}
  .leistungen article::after,.faecher figure::after{display:none}
  .leistungen img,.faecher img{transition:none}
}

/* ---------- Knoepfe ---------- */
.tel,.zweit,.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;border-radius:100px;font-weight:800;transition:.2s;white-space:nowrap}
/* Metallverlauf: Lichtkante, Gold, Schatten, wieder Licht. Genau diese
   Abfolge laesst eine Flaeche nach poliertem Metall aussehen, ein
   zweistufiger Verlauf wirkt dagegen wie eingefaerbtes Papier. */
.tel{background:linear-gradient(101deg,#F7E9AE 0%,#D4AF37 24%,#A87F1E 52%,#E4C65C 76%,#F7E9AE 100%);
  color:var(--aufAkz);font-size:20px;padding:17px 32px;position:relative;overflow:hidden;
  box-shadow:0 12px 30px rgba(212,175,55,.30),inset 0 1px 0 rgba(255,250,225,.75),
             inset 0 -1px 0 rgba(120,88,16,.45)}
.tel:hover,.tel:focus-visible{transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(212,175,55,.42),inset 0 1px 0 rgba(255,250,225,.9),
             inset 0 -1px 0 rgba(120,88,16,.5)}
/* Streiflicht wandert beim Ueberfahren ueber das Metall */
.tel::after{content:'';position:absolute;inset:0;transform:translateX(-130%);
  background:linear-gradient(104deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%)}
@media (hover:hover){
  .tel:hover::after{transform:translateX(130%);transition:transform .85s ease}
}
.zweit{background:var(--karte);border:1px solid var(--akz);color:var(--akzHell);
  font-size:15.5px;padding:16px 28px;
  box-shadow:inset 0 1px 0 rgba(247,233,174,.18)}
.zweit:hover,.zweit:focus-visible{border-color:var(--akz3);color:var(--akz3);
  background:rgba(212,175,55,.16)}
.knopf{background:linear-gradient(101deg,#F7E9AE,#D4AF37 42%,#B98F22);color:var(--aufAkz);
  font-size:13px;padding:10px 20px;
  box-shadow:inset 0 1px 0 rgba(255,250,225,.7),inset 0 -1px 0 rgba(120,88,16,.4)}
.knopf:hover,.knopf:focus-visible{background:linear-gradient(101deg,#FFFFFF,#E4C65C 42%,#C79A26)}
:focus-visible{outline:2px solid var(--akz);outline-offset:3px}

/* ---------- Kopfleiste ---------- */
.kopf{position:absolute;top:0;left:0;right:0;z-index:20;padding-top:18px}
.kopf__in{display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:var(--karte);border:1px solid var(--rand);border-radius:100px;
  padding:11px 12px 11px 24px;backdrop-filter:blur(14px)}
/* Marke: Schloss Altranstaedt plus Schriftzug. Das Schloss ist Katjas
   Logo fuer BEIDE Betriebe (Benny, 2026-08-04), dieselbe Stickzeichnung
   wie auf der Taxi-Seite, hier in Gold eingefaerbt. */
.marke{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.marke__schloss{width:60px;height:34px;object-fit:contain;flex:none}
.marke__text{font-size:17px;font-weight:800;letter-spacing:-.3px;line-height:1.2;
  background:linear-gradient(101deg,#FFFBF0,#F2DFA0 60%,#D4AF37);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* 🚨 Nicht ".marke span": .marke__text ist selbst ein span und wuerde
   von der Ortszeile auf 11px geschrumpft. */
.marke__text span{display:block;font-size:11px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:var(--akz);-webkit-text-fill-color:var(--akz)}
.navi{display:flex;gap:22px}
.navi a{font-size:13.5px;color:var(--akzHell);text-decoration:none;font-weight:400;
  transition:color .2s}
.navi a:hover,.navi a:focus-visible{color:var(--akz3)}
@media (max-width:900px){.navi{display:none}}
/* 🚨 Seit dem Schloss ist die Kopfleiste voller: Logo + Schriftzug +
   Knopf passten bei 375 px nicht mehr nebeneinander, der Knopf ragte
   29 px ueber den Rand und machte die ganze Seite breiter. */
@media (max-width:520px){
  .kopf__in{padding:8px 8px 8px 14px;gap:10px}
  .marke__schloss{width:42px;height:24px}
  .marke__text{font-size:14.5px}
  .knopf{font-size:12px;padding:8px 13px;white-space:nowrap}
}

/* ---------- Buehne mit Video ---------- */
.buehne{position:relative;min-height:clamp(520px,64vw,660px);display:flex;align-items:flex-end;
  overflow:hidden;border-bottom:1px solid var(--akz)}
.buehne video,.buehne__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* 🚨 Der Schleier traegt die Lesbarkeit. Der deckende Teil muss so weit
   reichen wie der laengste Textblock, sonst faellt die Ueberschrift
   rechts in den offenen Bereich. Gemessen, nicht geschaetzt. */
.buehne::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(9,32,25,.95) 0%,rgba(9,32,25,.91) 54%,rgba(9,32,25,.55) 74%,rgba(9,32,25,.24) 100%),
             linear-gradient(0deg,rgba(9,32,25,.84) 0%,transparent 44%)}
/* 🚨 Der Textblock muss auf derselben Kante stehen wie alles darunter.
   Vorher trug ein Element beide Klassen, ".buehne__in" ueberschrieb die
   Breite von ".wrap" und das "margin:0 auto" zentrierte den schmalen
   Block. Jetzt sitzt der Text als Kind im Raster, die Kante stimmt.
   Oben Luft fuer die Kopfleiste, unten fuer die Kennzahlen. */
/* 🚨 flex:1 1 100% ist Pflicht, nicht nur width:100%. Die Buehne ist ein
   Flex-Container. Ein Flex-Item ohne feste Breite schrumpft auf seinen
   Inhalt, und das "margin:0 auto" aus .wrap zentriert den geschrumpften
   Block dann in der vollen Breite. Genau so stand der Text zu weit rechts. */
.buehne__wrap{position:relative;z-index:2;flex:1 1 100%;min-width:0;
  padding-top:124px;padding-bottom:96px}
.buehne__in{max-width:660px;margin-right:auto}
.kicker{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--akzHell);
  background:rgba(217,190,126,.12);border:1px solid rgba(217,190,126,.34);
  padding:8px 18px;border-radius:100px;margin-bottom:22px}
.kicker i{width:7px;height:7px;border-radius:50%;background:var(--akz);display:block;
  box-shadow:0 0 0 0 rgba(217,190,126,.7);animation:puls 2.6s infinite}
@keyframes puls{70%{box-shadow:0 0 0 12px rgba(217,190,126,0)}100%{box-shadow:0 0 0 0 rgba(217,190,126,0)}}
.buehne h1{font-size:clamp(34px,5.4vw,62px);line-height:1.04;font-weight:800;color:var(--titel);
  letter-spacing:-2.4px;margin-bottom:20px}
/* Konturschrift: beim Sticken ist der Umrandungsstich das Gegenstueck
   zur Fuellung. Auf hellem Grund traegt sie nicht, hier ist der Grund dunkel. */
.buehne h1 span{display:block;color:var(--akzHell);
  text-shadow:0 0 26px rgba(217,190,126,.45)}
@supports ((-webkit-text-stroke:2px #000) or (text-stroke:2px #000)){
  .buehne h1 span{color:transparent;-webkit-text-stroke:2px var(--akzHell)}
}
.buehne .lead{font-size:17px;line-height:1.66;color:var(--text);max-width:540px;margin-bottom:26px}
.cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
/* 🚨 NICHT in die untere Bildecke: dort liegen die Kennzahlen darueber,
   je nach Fensterbreite unterschiedlich weit. */
/* 🚨 Dr.-Falk-Lehre von der Taxi-Pruefung: Die Kennzeichnung muss auf
   JEDEM Geraet dauerhaft erkennbar sein (Art. 50 Abs. 4 KI-VO). Deshalb
   dunkler Chip statt halbtransparenter Schrift, kein Hover-Trick. */
.kikennung{position:absolute;right:16px;top:88px;z-index:5;font-size:10.5px;letter-spacing:.6px;
  color:#fff;background:rgba(10,14,12,.62);padding:4px 9px;border-radius:7px;
  border:1px solid rgba(255,255,255,.25)}
/* Pause/Play fuers Hero-Video – Pflicht nach WCAG 2.2.2 fuer Autoplay-Bewegtbild */
.videostopp{position:absolute;right:16px;bottom:16px;z-index:6;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;
  background:rgba(10,14,12,.55);border:1px solid rgba(255,255,255,.28);color:#fff;
  transition:background .2s}
.videostopp:hover{background:rgba(10,14,12,.78)}
.videostopp:focus-visible{outline:2px solid var(--akz);outline-offset:2px}
.videostopp svg{width:18px;height:18px;fill:currentColor}
.videostopp__play{display:none}
.videostopp.pausiert .videostopp__pause{display:none}
.videostopp.pausiert .videostopp__play{display:block}


/* ---------- Kennzahlen ---------- */
.zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
  margin-top:-52px;position:relative;z-index:4}
.zahlen li{border:1px solid var(--rand);border-radius:22px;
  padding:20px 18px;backdrop-filter:blur(16px);min-width:0;
  background:linear-gradient(168deg,rgba(217,190,126,.16),rgba(17,44,35,.88) 58%)}
/* Die Ziffern bekommen den Metallverlauf, nicht nur eine Goldfarbe */
.zahlen strong{display:block;font-size:clamp(26px,3.2vw,38px);font-weight:800;line-height:1;
  letter-spacing:-1.6px;margin-bottom:8px;font-variant-numeric:tabular-nums;
  background:linear-gradient(101deg,#F7E9AE,#D4AF37 46%,#E4C65C);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.zahlen b{display:block;font-size:14.5px;font-weight:700;color:var(--akzHell);margin-bottom:3px}
.zahlen span{display:block;font-size:12.5px;color:var(--leise);line-height:1.45}

/* ---------- Abschnitte ---------- */
section{padding:74px 0}
.kopfzeile{max-width:660px;margin-bottom:34px}
.kopfzeile.mitte{margin-left:auto;margin-right:auto;text-align:center}
.kopfzeile .ueber{display:block;font-size:12px;font-weight:700;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--akz);margin-bottom:12px}
/* Gold traegt hier die Ueberschriften, nicht nur die Akzente.
   Champagner statt Vollgold, weil es auf dem dunklen Gruen ruhiger
   liegt und in grossen Schriftgraden nicht flirrt. */
h2{font-size:clamp(26px,3.4vw,40px);line-height:1.12;font-weight:800;color:var(--akzHell);
  letter-spacing:-1.4px;margin-bottom:12px}
.kopfzeile p{font-size:16.5px;color:var(--leise)}

/* ---------- Leistungen ---------- */
.leistungen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.leistungen article{position:relative;border:1px solid var(--rand);
  border-radius:26px;overflow:hidden;min-width:0;
  background:linear-gradient(168deg,rgba(240,221,176,.14),rgba(240,221,176,.05) 46%,transparent)}
.leistungen article::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:1;
  background:linear-gradient(90deg,transparent,var(--akz),transparent)}
.leistungen img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  border-bottom:1px solid var(--rand)}
.leistungen div{padding:20px 22px 24px}
.leistungen .marker{display:inline-block;font-size:11px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--akz);margin-bottom:9px}
.leistungen h3{font-size:18px;font-weight:800;color:var(--akzHell);margin-bottom:7px;letter-spacing:-.3px}
.leistungen p{font-size:14.5px;color:var(--leise);line-height:1.6}

/* ---------- Aus der Werkstatt, Bildfaecher ---------- */
.faecher{display:flex;justify-content:center;align-items:center}
.faecher figure{margin:0;width:38%;border-radius:var(--rundung);overflow:hidden;
  border:2px solid var(--rand);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.faecher img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.faecher .l{transform:rotate(-7deg) translateY(26px) scale(.86);margin-right:-5%}
/* Die Schuerze haengt im Bild rechts, der Zuschnitt soll das Logo zeigen */
.faecher .l img{object-position:72% 40%}
.faecher .m{width:44%;transform:translateY(-10px);z-index:2;border-color:rgba(217,190,126,.45)}
.faecher .m img{aspect-ratio:16/11}
.faecher .r{transform:rotate(7deg) translateY(26px) scale(.86);margin-left:-5%}

/* ---------- Beispielraster unter dem Faecher ---------- */
.beispiele{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:14px;margin-top:44px}
.beispiele li{position:relative;border-radius:16px;overflow:hidden;
  border:1px solid var(--rand);min-width:0}
/* 🚨 height:auto ist Pflicht: ohne CSS-Hoehe gilt das height-Attribut
   aus dem HTML (663px) weiter, waehrend width auf Spaltenbreite
   schrumpft. Ergebnis waren hochkant gestreckte Streifen. */
.beispiele img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
.beispiele span{position:absolute;left:10px;bottom:10px;font-size:12.5px;font-weight:700;
  letter-spacing:.6px;color:var(--akzHell);background:rgba(10,20,16,.72);
  padding:5px 12px;border-radius:100px;backdrop-filter:blur(8px)}
@media (hover:hover){.beispiele li:hover img{transform:scale(1.05)}}

/* ---------- Ablauf ---------- */
/* 🚨 list-style aus: die Regel weiter oben gilt nur fuer ul, hier ist es
   eine ol. Sonst steht neben der gestalteten Ziffer noch der Listenmarker. */
.ablauf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  counter-reset:schritt;list-style:none;padding-left:0}
.ablauf li{position:relative;border:1px solid var(--rand);border-radius:var(--rundung);
  padding:26px 24px 28px;min-width:0;
  background:linear-gradient(168deg,rgba(240,221,176,.13),rgba(240,221,176,.04) 52%,transparent)}
/* Nummer im Metallkreis statt nackter Ziffer */
.ablauf li::before{counter-increment:schritt;content:counter(schritt);
  display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:50%;font-size:19px;font-weight:800;color:var(--aufAkz);margin-bottom:16px;
  background:linear-gradient(135deg,var(--akz3),var(--akz) 55%,var(--akz2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 12px rgba(0,0,0,.3);
  font-variant-numeric:tabular-nums}
/* Gestrichelter Faden verbindet die Schritte, das Motiv der Naht */
.ablauf li::after{content:'';position:absolute;top:48px;
  left:calc(24px + 46px + 10px);right:-8px;border-top:2px dashed var(--band)}
@media (max-width:900px){.ablauf li::after{display:none}}

/* ---------- Familienbetrieb ---------- */
.wer{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;
  align-items:center;border:1px solid var(--rand);border-radius:26px;padding:34px 42px;
  background:linear-gradient(168deg,rgba(226,232,240,.12),rgba(226,232,240,.04) 50%,transparent)}
.wer img{width:216px;height:216px;object-fit:cover;object-position:50% 12%;border-radius:50%;
  border:3px solid #0F1B16;box-shadow:0 0 0 2px var(--akz),0 14px 34px rgba(0,0,0,.35)}
.wer__name{position:relative;padding-left:38px}
.wer__name::before{content:"";position:absolute;left:0;top:50%;width:26px;height:2px;
  background:linear-gradient(90deg,var(--akz),transparent)}
.wer .ueber{display:block;font-size:12px;font-weight:700;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--akz);margin-bottom:12px}
.wer h2{margin-bottom:12px}
.wer p{font-size:15.5px;color:var(--leise);margin-bottom:12px;max-width:56ch}
.wer__name{font-weight:700;color:var(--akzHell);margin-top:6px}
@media (max-width:900px){.wer{grid-template-columns:1fr;gap:22px;padding:24px;justify-items:start}
  .wer img{width:150px;height:150px}}

/* ---------- Referenzen als Raster ---------- */
.referenzen{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.referenzen li{border:1px solid var(--rand);border-radius:16px;padding:14px 18px;min-width:0;
  background:linear-gradient(168deg,rgba(226,232,240,.10),transparent 60%)}
.referenzen b{display:block;font-size:14.5px;font-weight:700;color:var(--akzHell)}
.referenzen span{display:block;font-size:12.5px;color:var(--leise);margin-top:2px}
/* Logos brauchen eine helle Kachel: die meisten sind fuer weissen Grund
   gezeichnet und wuerden auf dem dunklen Gruen absaufen. Femperial ist
   fuer dunklen Grund gemacht und bekommt eine dunkle Kachel. */
.referenzen .logokachel{display:flex;align-items:center;justify-content:center;
  background:#FBF9F4;border-radius:10px;height:150px;padding:12px 16px;margin-bottom:12px}
.referenzen .logokachel--dunkel{background:#101B16}
.referenzen .logokachel img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* Vollflaechige Kachel fuer Logos mit eigenem Grund (rotes Singing-Club-
   Emblem, Foto der RN-blades-Stickerei). 🚨 Muss NACH der Basisregel
   stehen: gleiche Spezifitaet, die spaetere gewinnt. Stand sie davor,
   blieben weisse Flanken neben dem Bild. */
.referenzen .logokachel--voll{background:#101B16;padding:10px 12px;overflow:hidden}
.referenzen .logokachel--voll img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.ablauf h3{font-size:17.5px;font-weight:800;color:var(--akzHell);margin-bottom:8px}
.ablauf p{font-size:14.5px;color:var(--leise);line-height:1.6}

/* ---------- Referenzband ---------- */
.laufband{border-top:1px solid var(--band);border-bottom:1px solid var(--band);padding:18px 0;
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.laufband ul{display:flex;width:max-content;animation:fahrt 32s linear infinite}

/* Kundenband gleich unter den Kennzahlen. Vertrauen gehoert nach oben,
   nicht ans Seitenende. Es laeuft gegen die Richtung des unteren Bandes,
   sonst wirken die beiden wie zweimal dasselbe Element. */
.kundenband{padding:34px 0 8px}
.kundenband__titel{font-size:12px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--akz);margin-bottom:14px}
.laufband--oben{border-top:1px solid var(--band);border-bottom:1px solid var(--band);padding:16px 0}
.laufband--oben ul{animation-duration:44s;animation-direction:reverse}
.laufband--oben li{font-size:15.5px;letter-spacing:1.2px;padding:0 24px;gap:22px;color:var(--text)}
.laufband--oben li::after{width:4px;height:4px}
/* Logos wandern im Band mit: kleine Kachel vor dem Namen. Helle Kachel
   fuer Logos auf weissem Grund, dunkle fuer helle Logos, voll fuer
   Bilder mit eigenem Grund. */
.bandlogo{display:inline-flex;align-items:center;justify-content:center;
  width:104px;height:62px;padding:7px 10px;margin-right:14px;
  background:#FBF9F4;border-radius:8px;flex:none}
.bandlogo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.bandlogo--dunkel{background:#101B16;border:1px solid var(--band)}
.bandlogo--voll{padding:0;overflow:hidden}
.bandlogo--voll img{width:100%;height:100%;object-fit:cover}
.laufband li{font-size:14px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--akzHell);padding:0 26px;white-space:nowrap;display:flex;align-items:center;gap:26px}
.laufband li::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--akz);display:block}
@keyframes fahrt{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.laufband ul{animation:none}.kicker i{animation:none}}

/* ---------- Fragen ---------- */
.fragen{max-width:820px;margin:0 auto}
.fragen details{border-bottom:1px solid var(--band)}
.fragen summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-size:17px;font-weight:700;color:var(--akzHell);transition:color .2s}
.fragen summary:hover{color:var(--akz)}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:'';position:absolute;right:8px;top:50%;width:11px;height:11px;
  margin-top:-7px;border-right:2px solid var(--akz);border-bottom:2px solid var(--akz);
  transform:rotate(45deg);transition:transform .25s}
.fragen details[open] summary::after{transform:rotate(-135deg)}
.fragen .antwort{padding:0 0 20px;font-size:15.5px;color:var(--leise);max-width:70ch}

/* ---------- Kontakt ---------- */
.kontakt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:start}
.daten li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--band);font-size:15.5px}
.daten b{color:var(--akzHell);min-width:104px;font-weight:700}
.daten a{text-decoration:none}
.daten a:hover{text-decoration:underline}
.formular{border:1px solid var(--rand);border-radius:var(--rundung);padding:26px;
  background:linear-gradient(168deg,rgba(240,221,176,.12),rgba(240,221,176,.04) 50%,transparent)}
.feld{margin-bottom:16px}
.feld label{display:block;font-size:13.5px;font-weight:700;color:var(--titel);margin-bottom:7px}
.feld input,.feld textarea{width:100%;background:rgba(9,32,25,.6);border:1px solid var(--rand);
  border-radius:12px;padding:13px 15px;color:var(--titel);font:inherit;font-size:15px}
.feld input:focus,.feld textarea:focus{outline:2px solid var(--akz);outline-offset:1px;border-color:var(--akz)}
.feld textarea{min-height:130px;resize:vertical}
.pflichthinweis{font-size:12.5px;color:var(--leise);margin-top:10px}
/* 🚨 Der Honigtopf darf nicht per display:none versteckt werden, manche
   Bots erkennen das. Aus dem Blickfeld schieben und aus der Tabreihenfolge
   nehmen ist unauffaelliger und stoert Screenreader nicht, weil das
   Feld zusaetzlich aria-hidden traegt. */
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.einwilligung{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--leise);margin-bottom:18px}
.einwilligung input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--akz)}

/* ---------- Fuss ---------- */
.fuss{border-top:2px solid var(--rand);padding:44px 0 108px;
  background:linear-gradient(0deg,rgba(217,190,126,.09),transparent)}
.fuss__in{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;align-items:center}
.fuss a{color:var(--akzHell);text-decoration:none;font-size:14.5px;transition:color .2s}
.fuss a:hover,.fuss a:focus-visible{color:var(--akz3)}
.fuss .klein{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--leise)}
.fuss__schloss{width:52px;height:30px;object-fit:contain;opacity:.85}
.fussnavi{display:flex;gap:22px;flex-wrap:wrap}

/* ---------- Anrufbalken auf schmalen Bildschirmen ---------- */
.anrufbalken{display:none}
@media (max-width:900px){
  .anrufbalken{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    align-items:center;justify-content:center;gap:10px;
    background:linear-gradient(96deg,var(--akz3),var(--akz),var(--akz2));color:var(--aufAkz);
    font-weight:800;font-size:17px;text-decoration:none;padding:15px 18px;
    box-shadow:0 -8px 26px rgba(0,0,0,.34)}
}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:900px){
  section{padding:54px 0}
  .buehne__wrap{padding-top:104px;padding-bottom:84px}
  .zahlen{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:-40px}
  .leistungen,.ablauf{grid-template-columns:1fr}
  .kontakt{grid-template-columns:1fr;gap:28px}
  /* Auf dem Handy wuerde der Faecher unlesbar klein, deshalb untereinander.
     🚨 Die drei Klassen einzeln nennen: ".faecher figure" hat eine geringere
     Spezifitaet als ".faecher .l" und setzt Drehung und negativen Rand
     nicht zurueck. Folge waere eine um 21 px zu breite Seite. */
  .faecher{flex-direction:column;gap:14px}
  .faecher .l,.faecher .m,.faecher .r{width:100%;transform:none;margin:0}
  .faecher img,.faecher .m img{aspect-ratio:16/10}
  .fuss{padding:34px 0 96px}
}

/* ---------- Rechtsseiten ---------- */
.rechtstext{max-width:820px;margin:0 auto;padding-top:126px}
.rechtstext h1{font-size:clamp(28px,4vw,42px);font-weight:800;color:var(--titel);
  letter-spacing:-1.4px;margin-bottom:26px}
.rechtstext h2{font-size:21px;margin:34px 0 10px}
.rechtstext p,.rechtstext li{font-size:15.5px;color:var(--text);margin-bottom:12px}
.rechtstext ul{list-style:disc;padding-left:22px;margin-bottom:16px}
.rechtstext .offen{background:rgba(217,190,126,.12);border:1px dashed var(--akz);
  border-radius:12px;padding:14px 16px;color:var(--akzHell);font-size:14.5px}

/* ---------- Dateifeld im Formular ---------- */
.feldhinweis{font-size:12.5px;color:var(--leise);margin-top:7px;line-height:1.5}
.feld input[type=file]{padding:10px 12px;cursor:pointer}
.feld input[type=file]::file-selector-button{margin-right:12px;border:1px solid var(--band);
  border-radius:100px;background:transparent;color:var(--akzHell);font-weight:700;
  padding:7px 14px;cursor:pointer}
/* ---------- Kontakt: Bild fuellt die linke Spalte ---------- */
.kontakt__bild{margin-top:28px}
.kontakt__bild img{width:100%;height:auto;aspect-ratio:16/11;object-fit:cover;
  border-radius:18px;border:1px solid var(--rand)}

/* Verlinkte Logokacheln reagieren sichtbar auf Maus und Tastatur */
a.logokachel{transition:transform .2s ease,box-shadow .2s ease}
a.logokachel:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.3)}
a.logokachel:focus-visible{outline:2px solid var(--akz);outline-offset:3px}
/* ============================================================
   Mehr Effekte (Benny, 6.8.) – alles compositor-freundlich
   (transform/opacity) und hinter prefers-reduced-motion.
   Regeln stehen bewusst am Dateiende: gleiche Spezifitaet,
   die spaetere Regel gewinnt.
   ============================================================ */

/* Goldfaden oben zeigt den Scrollfortschritt, wie ein ablaufender Faden */
.scrollfaden{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,var(--akz2),var(--akz) 60%,var(--akz3))}

/* Buehne: Kicker, Titel, Text und Knoepfe treten nacheinander auf */
@media (prefers-reduced-motion:no-preference){
  .js .buehne__in>*{animation:aufgehen .85s cubic-bezier(.22,1,.36,1) backwards}
  .js .buehne__in>:nth-child(1){animation-delay:.1s}
  .js .buehne__in>:nth-child(2){animation-delay:.26s}
  .js .buehne__in>:nth-child(3){animation-delay:.46s}
  .js .buehne__in>:nth-child(4){animation-delay:.64s}
}
@keyframes aufgehen{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* Goldknoepfe werfen alle paar Sekunden einen Lichtreflex */
.tel{position:relative;overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .tel::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%);
    transform:translateX(-130%);animation:schimmer 6.5s ease-in-out infinite}
}
@keyframes schimmer{0%,72%{transform:translateX(-130%)}84%,100%{transform:translateX(130%)}}

/* Kennzahlen: einmaliger Glanzdurchlauf, sobald sie einscrollen */
.zahlen li{position:relative;overflow:hidden}
.zahlen li::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(247,233,174,.32) 50%,transparent 60%);
  transform:translateX(-140%)}
@media (prefers-reduced-motion:no-preference){
  .zahlen.da li::after{transition:transform 1.1s ease .35s;transform:translateX(140%)}
}

/* Beispielraster: Bild waechst, Label springt auf Gold um */
.beispiele li{overflow:hidden}
.beispiele img{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.beispiele span{transition:background .25s,color .25s}
@media (hover:hover){
  .beispiele li:hover img{transform:scale(1.06)}
  .beispiele li:hover span{background:var(--akz);color:var(--aufAkz)}
}

/* Referenzkarten heben sich unter der Maus leicht an */
.referenzen li{transition:transform .25s ease,border-color .25s ease}
@media (hover:hover){
  .referenzen li:hover{transform:translateY(-3px);border-color:var(--akz)}
}

/* Der Werkstatt-Faecher oeffnet sich weiter, wenn man ihn beruehrt */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .faecher .l,.faecher .m,.faecher .r{transition:transform .55s cubic-bezier(.22,1,.36,1)}
  .faecher:hover .l{transform:rotate(-9deg) translateY(20px) translateX(-14px) scale(.87)}
  .faecher:hover .r{transform:rotate(9deg) translateY(20px) translateX(14px) scale(.87)}
  .faecher:hover .m{transform:translateY(-16px)}
}

/* Antworten der Fragen gleiten sanft auf.
   🚨 Bewusst nur opacity/transform, kein Hoehen- oder Padding-Spiel:
   vertikales Padding auf zusammengeklappten Elementen war der
   Balken-Bug aus den House-of-Aladin-Learnings. */
@media (prefers-reduced-motion:no-preference){
  .fragen details[open] .antwort{animation:antwortauf .45s cubic-bezier(.22,1,.36,1)}
}
@keyframes antwortauf{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* ============================================================
   Effektrunde 2 (Benny, 6.8., „geht noch mehr?")
   ============================================================ */

/* Das Buehnenvideo zieht beim Rausscrollen langsamer mit (Parallax).
   Nur in Browsern mit Scroll-Animationen, sonst bleibt alles wie es ist. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference){
    .buehne video{animation:videozieht linear both;
      animation-timeline:view();animation-range:exit 0% exit 100%}
  }
}
@keyframes videozieht{from{transform:none}to{transform:translateY(14%) scale(1.12)}}

/* Das Kundenband haelt an, solange die Maus darauf liegt */
@media (hover:hover){
  .laufband:hover ul{animation-play-state:paused}
}

/* Bilder werden beim Einscrollen wie ein Vorhang von oben aufgedeckt */
@media (prefers-reduced-motion:no-preference){
  .js .leistungen article.einfahren img,
  .js .faecher figure.einfahren img{clip-path:inset(0 0 100% 0)}
  .js .leistungen article.einfahren.da img,
  .js .faecher figure.einfahren.da img{clip-path:inset(0 0 0 0);
    transition:clip-path 1s cubic-bezier(.22,1,.36,1) .15s}
}

/* Formularfelder gluehen beim Ausfuellen weich golden */
.feld input,.feld textarea{transition:border-color .2s,box-shadow .2s}
.feld input:focus,.feld textarea:focus{box-shadow:0 0 0 4px rgba(212,175,55,.18)}

/* Logos in den Referenzkacheln wachsen unter der Maus leicht mit */
.referenzen .logokachel img{transition:transform .35s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){
  .referenzen li:hover .logokachel img{transform:scale(1.06)}
}

/* Nach-oben-Knopf: goldener Kreis, erscheint nach dem ersten Stueck Weg.
   Auf schmalen Bildschirmen uebernimmt der Anrufbalken die untere Kante,
   dort bleibt der Knopf weg. */
.nachoben{position:fixed;right:24px;bottom:24px;z-index:55;width:52px;height:52px;
  display:none;align-items:center;justify-content:center;border-radius:50%;
  background:linear-gradient(160deg,#F7E9AE,#D4AF37 55%,#A87F1E);color:var(--aufAkz);
  box-shadow:0 12px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,250,225,.75);
  opacity:0;transform:translateY(14px);pointer-events:none;visibility:hidden;
  transition:opacity .3s,transform .3s,visibility 0s linear .3s}
@media (min-width:901px){.nachoben{display:flex}}
/* visibility:hidden nimmt den Knopf im Ruhezustand aus der Tab-Reihenfolge,
   sonst waere er als unsichtbares Fokusziel erreichbar (a11y-Fund). */
.nachoben.sichtbar{opacity:1;transform:none;pointer-events:auto;visibility:visible;
  transition:opacity .3s,transform .3s,visibility 0s}
.nachoben:hover{transform:translateY(-3px)}
.nachoben svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
/* ---------- Medienmaster-Credit im Fuss ---------- */
.fuss__credit{flex-basis:100%;text-align:center;font-size:12.5px;color:var(--leise);
  padding-top:14px;margin-top:6px;border-top:1px solid var(--band)}
.fuss__credit a{font-size:12.5px;color:var(--akzHell);text-decoration:none;font-weight:400;letter-spacing:.4px}
.fuss__credit a b{font-weight:800}
.fuss__credit a:hover{color:var(--akz3)}