/* ============================================================
   Gemeinsames Stylesheet der Unterseiten.
   Die Startseite und die Webdesign-Seite tragen ihre Gestaltung noch
   im Dokument; alles Neue laedt diese Datei. Reihenfolge:
   Grundlagen — Kopf — Bausteine — Fusszeile.
   ============================================================ */

/* Schriften direkt hier statt per @import: spart eine Ladestufe vor dem ersten Text.
   Quelle: teile/schriften.css (Pfade auf das Wurzelverzeichnis umgestellt). */
/* Schriften: aus der Startseite uebernommen, damit alle Seiten dieselben
   Dateien laden. Pfade sind relativ zum Wurzelverzeichnis. */
/*
 * The Typekit service used to deliver this font or fonts for use on websites
 * is provided by Adobe and is subject to these Terms of Use
 * http://www.adobe.com/products/eulas/tou_typekit. For font license
 * information, see the list below.
 *
 * gravesend-sans:
 *   - http://typekit.com/eulas/00000000000000007735cbb1
 *   - http://typekit.com/eulas/00000000000000007735cbb2
 *
 * © 2009-2026 Adobe Systems Incorporated. All Rights Reserved.
 */
/*{"last_published":"2026-09-14 13:30:01 UTC"}*/

/**/


@font-face {
font-family:"gravesend-sans";
src:url("assets/fonts/font-01.woff2") format("woff2"),url("assets/fonts/font-02.woff") format("woff"),url("assets/fonts/font-03.otf") format("opentype");
font-display:auto;font-style:normal;font-weight:300;font-stretch:normal;
}

@font-face {
font-family:"gravesend-sans";
src:url("assets/fonts/font-04.woff2") format("woff2"),url("assets/fonts/font-05.woff") format("woff"),url("assets/fonts/font-06.otf") format("opentype");
font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
}

.tk-gravesend-sans { font-family: "gravesend-sans",sans-serif; }

/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/font-07.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/font-08.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/font-09.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/font-10.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/font-11.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/font-07.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/font-08.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/font-09.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/font-10.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/font-11.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/font-07.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/font-08.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/font-09.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/font-10.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/font-11.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Ersatzschrift mit den Massen von Montserrat: solange die echte Schrift
   noch laedt, bricht der Text schon gleich um und nichts verrutscht */
@font-face{
  font-family:'Montserrat Ersatz';
  src:local('Arial'), local('ArialMT'), local('Helvetica'), local('Roboto');
  size-adjust:113.4%; ascent-override:85.4%; descent-override:22.2%; line-gap-override:0%;
}

*, *::before, *::after{ box-sizing:border-box; }

:root{
  /* Eine Stelle fuer beide Schriften — Ueberschriften und Fliesstext */
  --schrift-anzeige:'gravesend-sans','Montserrat','Montserrat Ersatz',system-ui,sans-serif;
  --schrift-text:'Montserrat','Montserrat Ersatz',system-ui,sans-serif;
  --rot:#a30c25;
  --rot-hell:#be1621;
  /* Markenrot fuer kleine Schrift: #a30c25 erreicht auf Schwarz nur 2,6:1,
     dieser Ton 5:1. Flaechen und Linien bleiben im dunklen Markenrot. */
  --rot-text:#e0404f;
  --text:rgba(255,255,255,.78);
  --text-leise:rgba(255,255,255,.66);
  --fliess:clamp(16px, .25vw + 12.5px, 17.5px);
  --ease:cubic-bezier(.22,.68,.24,1);
  --spur:1420px;          /* Breite der Scroll-Sequenzen und Bildbuehnen */
  --inhalt:1122px;        /* Textspalte wie tauro.at: 1170 px Rahmen, 24 px Innenrand */
  --rand:clamp(18px,4vw,60px);
}

html{ scroll-behavior:smooth; }
body{
  margin:0; background:#000; color:#fff; overflow-x:hidden;
  font-family:var(--schrift-text); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:#fff; text-decoration:none; }
a:hover{ color:var(--rot-text); }
::selection{ background:var(--rot); color:#fff; }
img{ max-width:100%; }

/* Keine Umrandungen. Wer mit der Tastatur bedient, braucht trotzdem eine
   sichtbare Markierung — Unterstreichung beim Text, heller Ring beim Rest. */
:focus-visible{ outline:none; }
a:focus-visible{ text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
button:focus-visible, [tabindex]:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible{
  box-shadow:0 0 0 2px rgba(255,255,255,.55); border-radius:4px;
}

/* Einblenden beim Scrollen; ohne Skript bleibt alles sichtbar */
.rv-on .rv{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.rv-on .rv.in{ opacity:1; transform:none; }

/* Dieselben Stufen wie auf der Startseite — Groesse, Zeilenabstand und
   Laufweite sind von dort uebernommen, damit alle Seiten gleich klingen. */
h1, h2, h3, .gross{
  font-family:var(--schrift-anzeige); font-weight:700;
  line-height:.94; letter-spacing:-.025em; margin:0;
  text-wrap:balance;
}
h1{ font-size:clamp(32px,5.4vw,84px); }
/* Handy: lange Woerter wie Fahrzeugbeschriftung trennen statt die Seite zu verbreitern */
@media (max-width:1024px){
  h1, h2, h3{ hyphens:auto; -webkit-hyphens:auto; hyphenate-limit-chars:15 7 6; overflow-wrap:break-word; }
}
@media (max-width:600px){
  h1{ font-size:clamp(27px,8vw,34px); }
}
h2{ font-size:clamp(26px,4vw,60px); }
h3{ font-size:clamp(22px,3vw,34px); line-height:.98; letter-spacing:-.03em; }

.kicker{
  display:block; font-size:12px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--rot-text);
}
.spur{ max-width:var(--inhalt); margin:0 auto; }
/* Sequenzen und das Plattenregal behalten ihre breite Buehne. */
.ks-buehne .spur, .pk .spur{ max-width:var(--spur); }
/* Fuer Abschnitte mit eigenem Innenrand: der Inhalt steht mittig in der
   Textspalte, Hintergrund und Linien laufen weiter ueber die volle Breite. */
.mitte{
  padding-left:max(var(--rand), calc((100% - var(--inhalt)) / 2)) !important;
  padding-right:max(var(--rand), calc((100% - var(--inhalt)) / 2)) !important;
}
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.feld{ padding:clamp(72px,8vw,136px) var(--rand); border-top:1px solid rgba(255,255,255,.14); }
.blass{ color:rgba(255,255,255,.62); }
.lang{ max-width:46ch; }

/* ---------- Kopfzeile ----------
   Das Logo steckt als Vektor drin, damit sich Zeichen, Wortmarke und Zeile
   einzeln bewegen lassen. Beim Laden baut es sich auf, beim Ueberfahren
   laeuft ein Lichtstreifen darueber. */
header[data-nav]{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(16px,3vw,40px); padding:clamp(14px,2vh,22px) var(--rand);
  mix-blend-mode:difference;
  transition:background-color .4s var(--ease), backdrop-filter .4s var(--ease), padding .4s var(--ease);
}
header[data-nav].fest{
  background:rgba(0,0,0,.72); backdrop-filter:blur(14px); mix-blend-mode:normal;
  padding-top:clamp(10px,1.4vh,15px); padding-bottom:clamp(10px,1.4vh,15px);
}

.kl{ position:relative; display:block; flex:0 0 auto; line-height:0; }
.kl-svg{
  display:block; width:auto; height:clamp(52px,7.4vh,82px);
  transition:height .4s var(--ease);
}
header[data-nav].fest .kl-svg{ height:clamp(42px,5.8vh,62px); }
.kl-svg .cls-2{ fill:#fff; }
.kl-svg .cls-3{ fill:var(--rot-hell); }

/* Aufbau beim Laden */
.kl-marke{ transform-origin:50% 50%; animation:kl-zeichen .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes kl-zeichen{
  0%{ opacity:0; transform:scale(.55) rotate(-9deg); }
  60%{ opacity:1; transform:scale(1.06) rotate(1.5deg); }
  100%{ opacity:1; transform:none; }
}

/* Lichtstreifen beim Ueberfahren — auf die Form des Logos beschnitten */
.kl-glanz{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%);
  background-size:260% 100%; background-position:120% 0;
  -webkit-mask-image:url("assets/logo-t.svg");
  mask-image:url("assets/logo-t.svg");
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:left center; mask-position:left center;
}
.kl:hover .kl-glanz, .kl:focus-visible .kl-glanz{ animation:kl-glanz 1s var(--ease); }
@keyframes kl-glanz{
  0%{ opacity:0; background-position:120% 0; }
  20%{ opacity:1; }
  100%{ opacity:0; background-position:-40% 0; }
}
.kl:hover .kl-marke{ animation:kl-kippen .7s var(--ease); }
@keyframes kl-kippen{
  0%{ transform:none; }
  40%{ transform:rotate(-4deg) scale(1.05); }
  100%{ transform:none; }
}

/* Navigation */
.kn{ display:flex; flex-wrap:wrap; gap:clamp(18px,2.4vw,38px); }
.kn a, .kn-anfrage{
  position:relative; color:#fff;
  font-size:clamp(14px,1.15vw,17px); font-weight:500;
  text-transform:uppercase; letter-spacing:.1em; padding-bottom:4px;
}
.kn a::after, .kn-anfrage::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .45s var(--ease);
}
.kn a:hover::after, .kn-anfrage:hover::after{ transform:scaleX(1); transform-origin:0 50%; }
.kn-anfrage{ flex:0 0 auto; font-weight:600; }
.kn-anfrage span{ display:inline-block; transition:transform .4s var(--ease); }
.kn-anfrage:hover span{ transform:translateX(5px); }

.kn-recht{ display:flex; align-items:center; gap:clamp(16px,3vw,32px); flex:0 0 auto; }
.kn-schalter{
  display:flex; align-items:center; gap:14px; height:44px; margin:-6px; padding:0 6px;
  background:none; border:0; cursor:pointer; color:#fff; flex:0 0 auto;
  transition:transform .16s var(--ease);
}
.kn-wort{
  display:none; font-size:clamp(14px,1.15vw,17px); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
}
.kn-striche{ display:flex; flex-direction:column; justify-content:center; gap:6px; width:26px; }
/* Zwei Striche, der untere kuerzer: beim Hovern wird er lang, beim Oeffnen wird ein X daraus */
.kn-striche i{
  display:block; width:26px; height:1.5px; background:#fff;
  transition:transform .45s var(--ease);
}
.kn-striche i:nth-child(2){ transform:translateX(5.5px) scaleX(.58); }
@media (hover:hover) and (pointer:fine){
  .kn-schalter:hover .kn-striche i:nth-child(2){ transform:none; }
}
.kn-schalter:active{ transform:scale(.96); }
/* Desktop: kraeftigere Striche und das Wort MENUE daneben */
@media (min-width:861px){
  .kn-wort{ display:inline-block; }
  .kn-striche{ width:32px; gap:8px; }
  .kn-striche i{ width:32px; height:2.5px; }
  .kn-striche i:nth-child(2){ transform:translateX(7px) scaleX(.56); }
  header[data-nav].offen .kn-striche i:nth-child(1){ transform:translateY(5.25px) rotate(-45deg) !important; }
  header[data-nav].offen .kn-striche i:nth-child(2){ transform:translateY(-5.25px) rotate(45deg) !important; }
}

/* Menue: auf allen Geraeten eine Vollbild-Flaeche hinter dem Knopf */
.kn{
  position:fixed; top:0; left:0; right:0; height:100vh; height:100dvh; z-index:70; display:flex;
  flex-direction:column; align-items:flex-start; justify-content:center;
  gap:clamp(16px,3.2vh,30px); padding:clamp(90px,14vh,140px) max(var(--rand), calc((100vw - 1420px) / 2)) clamp(40px,7vh,70px);
  background:#000; overflow-y:auto; counter-reset:kn;
  /* zu: von rechts weggewischt; clip-path statt Verschieben, sonst verbreitert die Flaeche die Seite */
  clip-path:inset(0 0 0 100%); visibility:hidden;
  transition:clip-path .6s var(--ease), visibility 0s linear .6s;
}
.kn a{
  font-family:var(--schrift-anzeige); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(30px,6vw,88px); line-height:1; counter-increment:kn;
  display:flex; align-items:baseline; gap:clamp(14px,1.6vw,26px);
}
.kn a::before{
  content:counter(kn, decimal-leading-zero); order:-1; font-family:var(--schrift-text); font-weight:500;
  font-size:13px; letter-spacing:.16em; color:var(--rot-text);
}
.kn a::after{ bottom:-4px; height:2px; background:var(--rot-hell); }
/* Eintraege fahren gestaffelt herein */
header[data-nav] .kn a{ opacity:0; transform:translateX(40px); transition:opacity .5s var(--ease), transform .6s var(--ease); }
header[data-nav].offen .kn a{ opacity:1; transform:none; }
header[data-nav].offen .kn a:nth-child(2){ transition-delay:.06s; }
header[data-nav].offen .kn a:nth-child(3){ transition-delay:.12s; }
header[data-nav].offen .kn a:nth-child(4){ transition-delay:.18s; }
header[data-nav].offen .kn a:nth-child(5){ transition-delay:.24s; }
/* Logo und Knopf liegen ueber der Flaeche, damit das X bedienbar bleibt */
.kl, .kn-recht{ position:relative; z-index:71; }
header[data-nav].offen, header[data-nav].schliesst{ mix-blend-mode:normal; }
header[data-nav].offen .kn{
  clip-path:inset(0 0 0 0); visibility:visible;
  transition:clip-path .6s var(--ease), visibility 0s;
}
header[data-nav].offen .kn-striche i:nth-child(1){ transform:translateY(3.75px) rotate(-45deg); }
header[data-nav].offen .kn-striche i:nth-child(2){ transform:translateY(-3.75px) rotate(45deg); }
@media (max-width:860px){
  .kn a{ font-size:clamp(28px,8vw,44px); }
}

@media (prefers-reduced-motion:reduce){
  .kl-marke, .kl-glanz{ animation:none !important; opacity:1 !important; transform:none !important; }
  .kn, .kn a, .kn-striche i{ transition:none !important; }
}

/* ---------- Auftakt ---------- */
.sk-auftakt{
  position:relative; min-height:min(76svh,760px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(120px,20vh,220px) var(--rand) clamp(40px,7vh,80px);
  overflow:hidden;
}
.sk-auftakt-bild{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  filter:grayscale(.55) brightness(.42);
}
.sk-auftakt::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 42%, #000 100%);
}
.sk-auftakt > .spur{ position:relative; z-index:2; width:100%; }
.sk-auftakt h1{ margin:22px 0 0; max-width:17ch; }
.sk-auftakt p{ margin:24px 0 0; font-size:clamp(16px,1.5vw,20px); line-height:1.55; color:rgba(255,255,255,.74); max-width:52ch; }
.sk-tasten{ display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,34px); align-items:center; margin-top:clamp(26px,4vh,40px); }
.sk-taste{ font-size:14.5px; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:4px; }
.sk-taste.still{ border-color:transparent; color:rgba(255,255,255,.7); }

/* ---------- Zahlen ---------- */
.sk-zahlen{ display:grid; gap:clamp(26px,4vw,60px); grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); }
.sk-zahlen .zt-zahl{
  display:block; font-family:var(--schrift-anzeige); font-weight:700;
  font-size:clamp(36px,5.2vw,74px); line-height:.85; letter-spacing:-.03em;
}
.sk-zahlen span{ display:block; margin-top:15px; font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--text-leise); }

/* ---------- Siegel im Auftakt ----------
   Oben rechts im Bild, damit die Auszeichnungen beim ersten Blick da sind. */
.sk-siegelbox{
  position:absolute; z-index:3;
  /* Unten rechts, auf Höhe der Aktionszeile */
  bottom:clamp(40px,7vh,80px); right:var(--rand);
  display:grid; align-items:center; gap:8px 20px;
  grid-template-columns:auto auto;
  grid-template-areas:"haupt band1" "haupt band2";
  padding:16px 22px; border-radius:9px; background:#fff;
  box-shadow:0 24px 50px -30px rgba(0,0,0,.9);
}
.sk-siegelbox figure{ margin:0; }
.sk-siegelbox figure:nth-of-type(1){ grid-area:haupt; }
.sk-siegelbox figure:nth-of-type(2){ grid-area:band1; }
.sk-siegelbox figure:nth-of-type(3){ grid-area:band2; }
.sk-siegelbox img{ display:block; width:auto; height:clamp(32px,4vh,44px); }
.sk-siegelbox figure:nth-of-type(1) img{ height:clamp(68px,8.6vh,106px); }
@media (max-width:719px){
  .sk-siegelbox{
    position:static; margin:0 0 22px; width:max-content; max-width:100%;
    background:#fff;
  }
}

/* ---------- Kopf eines Abschnitts ---------- */
.sk-kopf{ display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:flex-end; margin-bottom:clamp(34px,6vh,64px); }
.sk-kopf h2{ max-width:18ch; }
.sk-kopf .kicker{ margin-bottom:20px; }
.sk-kopf p{ margin:0; font-size:var(--fliess); line-height:1.65; color:var(--text-leise); max-width:40ch; text-wrap:pretty; }

/* ---------- Leistungsliste mit Vorschau am Zeiger ---------- */
.lst{ position:relative; margin-top:clamp(30px,5vh,60px); border-top:1px solid rgba(255,255,255,.14); }
.lst-zeile{
  position:relative; display:grid; align-items:center;
  grid-template-columns:44px minmax(0,1fr) 34px;
  gap:clamp(14px,2.4vw,34px); padding:clamp(18px,2.4vh,28px) 0;
  border-bottom:1px solid rgba(255,255,255,.14);
  color:inherit; overflow:hidden;
}
@media (min-width:900px){ .lst-zeile{ grid-template-columns:54px minmax(0,1.05fr) minmax(0,1fr) 34px; } }
.lst-zeile::before{
  content:''; position:absolute; inset:0 -100vw 0 -100vw; z-index:0;
  background:linear-gradient(90deg, rgba(163,12,37,.26), rgba(163,12,37,.05) 58%, transparent 82%);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--ease);
}
.lst-zeile:hover::before, .lst-zeile:focus-within::before{ transform:scaleX(1); }
.lst-zeile > *{ position:relative; z-index:1; min-width:0; }
.lst-nr{ font-size:12px; letter-spacing:.2em; color:var(--rot-text); }
.lst-kopf{ display:block; transition:transform .5s var(--ease); }
.lst-kopf b{ display:block; font-family:var(--schrift-anzeige); font-weight:700; font-size:clamp(22px,3vw,34px); line-height:.98; letter-spacing:-.03em; }
.lst-kopf i{ display:block; margin-top:7px; font-style:normal; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.58); }
.lst-text{ font-size:14.5px; line-height:1.7; color:rgba(255,255,255,.6); }
@media (max-width:899px){ .lst-text{ display:none; } }
.lst-pfeil{ justify-self:end; font-size:17px; color:rgba(255,255,255,.5); transition:transform .5s var(--ease), color .4s var(--ease); }
.lst-zeile:hover .lst-kopf, .lst-zeile:focus-within .lst-kopf{ transform:translateX(12px); }
.lst-zeile:hover .lst-pfeil, .lst-zeile:focus-within .lst-pfeil{ transform:translateX(8px); color:#fff; }
.lst-vorschau{
  position:fixed; left:0; top:0; z-index:60; margin:0;
  width:clamp(170px,17vw,280px); aspect-ratio:3/2; overflow:hidden;
  border-radius:10px; pointer-events:none; opacity:0;
  transform:translate3d(-50%,-50%,0) scale(.9);
  transition:opacity .3s var(--ease), transform .5s var(--ease);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.08);
  will-change:transform;
}
.lst-vorschau img{ width:100%; height:100%; object-fit:cover; display:block; }
.lst.an .lst-vorschau{ opacity:1; }
@media (hover:none), (max-width:719px){ .lst-vorschau{ display:none; } }

/* ---------- Fotobuehne ----------
   Die Bilder liegen wie hingelegt uebereinander. Beim Scrollen zieht eines
   nach dem anderen weg; ist der Stapel leer, wechselt das Thema und der Text
   daneben mit. Ohne Skript stehen Text und Bilder untereinander. */
.fb{ position:relative; height:calc((var(--fb-schritte,4) + .8) * 90vh); border-top:1px solid rgba(255,255,255,.14); }
.fb-kleber{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column; gap:clamp(14px,2.4vh,30px);
  padding:clamp(84px,12vh,124px) var(--rand) clamp(22px,3.4vh,40px);
}
.fb-kopf{ width:100%; max-width:var(--spur); margin:0 auto; }
.fb-kopf .kicker{ margin-bottom:14px; }
.fb-kopf h2{ max-width:20ch; }
.fb-raum{
  flex:1; min-height:0; width:100%; max-width:var(--spur); margin:0 auto;
  display:grid; gap:clamp(18px,3vw,54px); grid-template-columns:1fr; align-items:center;
}
@media (min-width:900px){ .fb-raum{ grid-template-columns:.78fr 1.22fr; } }

.fb-texte{ position:relative; display:grid; }
.fb-text{
  grid-area:1 / 1; align-self:center; opacity:0; transform:translateY(16px);
  transition:opacity .45s var(--ease), transform .55s var(--ease); pointer-events:none;
}
.fb-text.an{ opacity:1; transform:none; pointer-events:auto; }
.fb-nr{ display:block; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--rot-text); margin-bottom:14px; }
.fb-text h3{ margin:0 0 16px; }
.fb-text p{ margin:0 0 22px; font-size:15.5px; line-height:1.8; color:rgba(255,255,255,.68); max-width:44ch; }

/* Alle Abzuege eines Themas liegen verstreut auf dem Tisch. Beim Wechsel
   fallen sie nacheinander hin; beim Ueberfahren wird einer aufgenommen. */
.fb-tisch{ position:relative; height:100%; min-height:220px; container-type:size; }
.fb-gruppe{ position:absolute; inset:0; pointer-events:none; }
.fb-gruppe.an{ pointer-events:auto; }
.fb-foto{
  position:absolute; left:var(--x,50%); top:var(--y,50%); margin:0;
  /* Abzug richtet sich nach dem Foto: kein Beschnitt, Hoch- und Querformat */
  width:max-content; z-index:calc(10 + var(--i,0));
  padding:clamp(5px,.7vw,9px) clamp(5px,.7vw,9px) clamp(22px,2.4vw,34px);   /* weisser Rand wie bei einem Abzug */
  background:#f6f4f1; border-radius:3px;
  box-shadow:0 30px 50px -30px rgba(0,0,0,.95), 0 2px 6px rgba(0,0,0,.4);
  opacity:0;
  transform:translate(-50%,-50%) translateY(-38px) rotate(calc(var(--dreh) * 2.4)) scale(1.1);
  transition:opacity .35s var(--ease), transform .7s cubic-bezier(.2,.9,.25,1.12), box-shadow .45s var(--ease);
  transition-delay:0s;
}
.fb-gruppe.an .fb-foto{
  opacity:1;
  transform:translate(-50%,-50%) rotate(var(--dreh));
  transition-delay:calc(var(--i,0) * 90ms);
}
/* In die Hand genommen: groesser, gerade, obenauf, tieferer Schatten */
@media (hover:hover) and (pointer:fine){
  .fb-gruppe.an .fb-foto{ cursor:zoom-in; }
  .fb-gruppe.an .fb-foto:hover{
    z-index:60; transition-delay:0s;
    transform:translate(-50%,-50%) translateY(-14px) rotate(calc(var(--dreh) * .15)) scale(1.55);
    box-shadow:0 60px 90px -30px rgba(0,0,0,.95), 0 10px 24px rgba(0,0,0,.45);
  }
}
.fb-foto img{
  display:block; width:auto; height:auto; border-radius:1px;
  max-width:calc(var(--fb-b,50) * 1cqw); max-height:calc(var(--fb-h,50) * 1cqh);
}
/* Die Beschriftung steht im weissen Rand unter dem Bild */
.fb-foto figcaption{
  position:absolute; left:14px; right:14px; bottom:9px;
  font-size:11.5px; line-height:1.3; letter-spacing:.02em; color:#2a2a2a;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fb-schiene{ width:100%; max-width:var(--spur); margin:0 auto; height:1px; background:rgba(255,255,255,.16); }
.fb-schiene i{ display:block; height:1px; width:0; background:var(--rot); }

@media (prefers-reduced-motion:reduce){
  .fb{ height:auto; }
  .fb-kleber{ position:static; height:auto; }
  .fb-raum{ display:block; }
  .fb-text{ position:static; opacity:1; transform:none; margin-bottom:30px; }
  .fb-texte{ display:block; }
  .fb-tisch{ height:auto; }
  .fb-gruppe{ position:static; opacity:1; display:grid; gap:12px; margin-bottom:30px; }
  .fb-foto{ position:static; transform:none !important; opacity:1; width:auto; aspect-ratio:16/10; }
}

/* ---------- Kartenstapel ----------
   Die Karten kleben untereinander fest und schieben sich beim Scrollen
   uebereinander. Die darunterliegende schrumpft und tritt zurueck.
   Ohne Skript stimmt das Stapeln trotzdem — das ist reines CSS. */
.ks{ padding:0 var(--rand); max-width:var(--spur); margin:clamp(30px,5vh,60px) auto 0; }
.ks-karte{
  position:sticky;
  top:calc(clamp(84px,11vh,120px) + var(--i) * clamp(10px,1.4vh,18px));
  margin-bottom:clamp(90px,26vh,260px);
  border:1px solid rgba(255,255,255,.16); border-radius:14px;
  background:#050505; overflow:hidden;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95);
  will-change:transform;
}
.ks-karte:last-child{ margin-bottom:0; }
.ks-inhalt{ display:grid; grid-template-columns:1fr; align-items:stretch; }
@media (min-width:860px){ .ks-inhalt{ grid-template-columns:1fr 1fr; } }
.ks-text{ padding:clamp(26px,3.4vw,54px); display:flex; flex-direction:column; justify-content:center; gap:16px; }
.ks-nr{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--rot-text); }
.ks-text h3{ margin:0; }
.ks-text p{ margin:0; font-size:15.5px; line-height:1.8; color:rgba(255,255,255,.68); max-width:42ch; }
.ks-text .sk-taste{ align-self:flex-start; margin-top:6px; }
.ks-bild{ position:relative; margin:0; overflow:hidden; min-height:clamp(230px,40vh,430px); }
.ks-bild img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.4) brightness(.84); transition:filter .6s var(--ease);
}
.ks-karte:hover .ks-bild img{ filter:none; }

/* Fenster: jede Karte ist ein Programmfenster mit Titelleiste. Mit Skript
   liegen sie uebereinander; X oder Pfeil schliesst das vordere, das
   naechste kommt nach vorne. Ohne Skript bleibt das Untereinander oben. */
.ks-leiste{
  display:flex; align-items:center; gap:8px; min-height:46px; padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,.1); background:#0d0d0d;
}
.ks-knopf{
  all:unset; box-sizing:border-box; cursor:pointer; display:none; place-items:center;
  width:30px; height:30px; border-radius:50%; font-size:17px; line-height:1; color:#fff;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.ks-zu{ background:var(--rot); font-size:19px; }
.ks-zu:hover{ background:var(--rot-hell); transform:scale(1.08); }
.ks-vor{ border:1px solid rgba(255,255,255,.3); }
.ks-vor:hover{ border-color:#fff; background:rgba(255,255,255,.08); transform:translateX(2px); }
.ks-knopf:focus-visible{ box-shadow:0 0 0 2px #fff; }
.ks-fenstername{ flex:1; text-align:center; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ks-zaehler{ font-size:11.5px; letter-spacing:.1em; color:rgba(255,255,255,.58); }

.ks.fenster{ display:grid; padding-top:clamp(28px,3vw,44px); padding-right:calc(var(--rand) + clamp(28px,3vw,44px)); }
.ks.fenster .ks-knopf{ display:grid; }
.ks.fenster .ks-karte{
  grid-area:1 / 1; position:relative; top:auto; margin:0;
  z-index:calc(20 - var(--ebene,0));
  transform:translate(calc(var(--ebene,0) * clamp(10px,1.1vw,16px)), calc(var(--ebene,0) * clamp(-10px,-1.1vw,-16px)));
  filter:brightness(calc(1 - var(--ebene,0) * .22));
  transition:transform .55s cubic-bezier(.2,.9,.25,1), filter .55s var(--ease), opacity .35s var(--ease);
}
.ks.fenster .ks-karte:not(.vorne){ pointer-events:none; }
/* Schliessen: das vordere Fenster klappt weg wie am Desktop */
.ks.fenster .ks-karte.schliesst{ opacity:0; transform:translateY(24px) scale(.94); }
@media (prefers-reduced-motion:reduce){ .ks.fenster .ks-karte{ transition:none; } }

/* Sequenz: der Abschnitt klebt fest, jeder Scrollschritt schliesst ein
   Fenster. Erst nach dem letzten geht die Seite weiter. */
.ks-buehne.sequenz{ height:calc(100vh + var(--ks-n,4) * 62vh); padding-top:0; padding-bottom:0; }
.ks-buehne.sequenz .ks-kleber{
  position:sticky; top:0; height:100vh; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(78px,10vh,104px) 0 clamp(18px,3vh,34px);
}
.ks-buehne.sequenz .sk-kopf{ margin-bottom:clamp(10px,2vh,24px); align-items:flex-end; }
.ks-buehne.sequenz .sk-kopf h2{ font-size:clamp(26px,3vw,46px); max-width:none; }
.ks-buehne.sequenz .ks{ margin-top:0; width:100%; }
.ks-buehne.sequenz .ks-bild{ min-height:clamp(220px,36vh,420px); }
/* das geschlossene Fenster klappt nach vorne-unten weg und liegt dabei obenauf */
.ks.fenster .ks-karte.weg{ z-index:30; opacity:0; transform:translateY(30px) scale(.94); pointer-events:none; }

/* Mehrere Fotos liegen wie abgelegte Abzuege uebereinander. Das oberste
   laesst sich mit Maus oder Finger wegziehen, dann kommt das naechste. */
.ks-bild.haufen{ overflow:visible; padding:clamp(14px,2vw,26px); background:#070707; touch-action:pan-y; }
.ks-bild.haufen .ks-foto{
  position:absolute; inset:clamp(14px,2vw,26px);
  width:auto; height:auto; border-radius:8px;
  box-shadow:0 26px 50px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.08);
  transform-origin:50% 60%; user-select:none; cursor:grab;
  transition:transform .55s var(--ease), opacity .4s var(--ease);
}
.ks-bild.haufen .ks-foto.faellt{ transition:transform .45s cubic-bezier(.4,0,.6,1), opacity .45s linear; }
.ks-bild.haufen .ks-foto.zieht{ transition:none; cursor:grabbing; }
.ks-griff{
  position:absolute; left:clamp(18px,2.2vw,30px); bottom:clamp(16px,2vw,28px); z-index:6;
  display:inline-flex; align-items:center; gap:8px; pointer-events:none;
  padding:6px 12px; border-radius:100px; background:rgba(4,4,4,.62); backdrop-filter:blur(6px);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.7);
  opacity:0; transition:opacity .4s var(--ease);
}
.ks-griff i{ width:16px; height:1px; background:var(--rot); display:block; }
.ks-bild.haufen:hover .ks-griff{ opacity:1; }
.ks-punkte{ position:absolute; right:clamp(18px,2.2vw,30px); bottom:clamp(16px,2vw,28px); z-index:6; display:flex; gap:6px; }
.ks-punkte i{ display:block; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.3); transition:background-color .35s var(--ease), transform .35s var(--ease); }
.ks-punkte i.an{ background:var(--rot); transform:scale(1.35); }
@media (prefers-reduced-motion:reduce){
  .ks-bild.haufen{ display:grid; gap:10px; position:static; }
  .ks-bild.haufen .ks-foto{ position:static; inset:auto; width:100%; }
  .ks-griff, .ks-punkte{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .ks-karte{ position:static; margin-bottom:22px; transform:none !important; }
}

/* ---------- Gewerke-Buehne: eine Leistung nach der anderen am Scrollweg ----------
   Die Flaeche bleibt stehen, waehrend Bild und Text durchwechseln. Ohne Skript
   oder bei "weniger Bewegung" steht alles untereinander und bleibt lesbar. */
.gw{ position:relative; height:calc((var(--gw-schritte,4) + 0.6) * 100vh); border-top:1px solid rgba(255,255,255,.14); }
.gw-kleber{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column; gap:clamp(16px,3vh,34px);
  padding:clamp(86px,13vh,130px) var(--rand) clamp(26px,4vh,44px);
}
.gw-kopf{ max-width:var(--spur); margin:0 auto; width:100%; }
.gw-kopf .kicker{ margin-bottom:14px; }
.gw-kopf h2{ max-width:20ch; }
.gw-raum{
  flex:1; min-height:0; width:100%; max-width:var(--spur); margin:0 auto;
  display:grid; gap:clamp(20px,3vw,52px); grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:900px){ .gw-raum{ grid-template-columns:1.05fr .95fr; } }

.gw-bilder{ position:relative; height:100%; min-height:200px; border-radius:12px; overflow:hidden; }
.gw-bild{
  position:absolute; inset:0; margin:0; opacity:0;
  transition:opacity .7s var(--ease);
}
.gw-bild.an{ opacity:1; }
.gw-bild img{ width:100%; height:100%; object-fit:cover; display:block; will-change:transform; }
.gw-bilder::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.1) 46%, rgba(163,12,37,.22) 100%);
}
.gw-ziffer{
  position:absolute; left:clamp(14px,2vw,26px); bottom:clamp(6px,1vh,14px); z-index:2;
  font-family:var(--schrift-anzeige); font-weight:700; line-height:.8;
  font-size:clamp(56px,9vw,130px); letter-spacing:-.04em; color:rgba(255,255,255,.14);
}

.gw-texte{ position:relative; display:grid; }
.gw-index{ list-style:none; margin:0 0 clamp(18px,3vh,32px); padding:0; display:flex; flex-wrap:wrap; gap:8px 10px; }
.gw-index button{
  display:inline-flex; align-items:baseline; gap:8px; cursor:pointer;
  padding:8px 15px; border-radius:100px; background:transparent;
  border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.6);
  font:inherit; font-size:12.5px;
  transition:border-color .35s var(--ease), color .35s var(--ease), background-color .35s var(--ease);
}
.gw-index button i{ font-style:normal; font-size:10px; letter-spacing:.14em; color:var(--rot-text); }
.gw-index button:hover{ border-color:rgba(255,255,255,.45); color:#fff; }
.gw-index li.an button{ border-color:var(--rot); background:rgba(163,12,37,.18); color:#fff; }
@media (max-width:719px){ .gw-index button span{ display:none; } }

.gw-text{
  grid-area:1 / 1; align-self:start; opacity:0; transform:translateY(18px);
  transition:opacity .5s var(--ease), transform .6s var(--ease);
  pointer-events:none;
}
.gw-text.an{ opacity:1; transform:none; pointer-events:auto; }
.gw-texte > .gw-text{ grid-row:2; }
.gw-sparte{ display:block; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--rot-text); margin-bottom:14px; }
.gw-text h3{ margin:0 0 16px; }
.gw-text p{ margin:0 0 22px; font-size:15.5px; line-height:1.8; color:rgba(255,255,255,.68); max-width:42ch; }
.gw-schiene{ max-width:var(--spur); width:100%; margin:0 auto; height:1px; background:rgba(255,255,255,.16); }
.gw-schiene i{ display:block; height:1px; width:0; background:var(--rot); }

@media (prefers-reduced-motion:reduce){
  .gw{ height:auto; }
  .gw-kleber{ position:static; height:auto; }
  .gw-raum{ display:block; }
  .gw-bilder{ height:auto; aspect-ratio:16/10; margin-bottom:24px; }
  .gw-bild{ position:relative; opacity:1; }
  .gw-bild + .gw-bild{ margin-top:14px; }
  .gw-text{ position:static; opacity:1; transform:none; margin-bottom:34px; }
  .gw-texte{ display:block; }
  .gw-index{ display:none; }
}

/* ---------- Leistungen: Zeile mit Bild, das schon im Ruhezustand traegt ---------- */
.lg{ border-top:1px solid rgba(255,255,255,.14); }
.lg-zeile{
  position:relative; display:grid; align-items:center; color:inherit;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:'nr kopf pfeil' 'bild bild bild' 'text text text';
  gap:14px clamp(16px,2.4vw,34px);
  padding:clamp(20px,2.6vh,30px) 0;
  border-bottom:1px solid rgba(255,255,255,.14);
}
@media (min-width:760px){
  .lg-zeile{
    grid-template-columns:52px clamp(130px,13vw,190px) minmax(0,1.1fr) 34px;
    grid-template-areas:'nr bild kopf pfeil';
  }
  .lg-zeile.mit-text{ grid-template-columns:52px clamp(130px,13vw,190px) minmax(0,1fr) minmax(0,.9fr) 34px;
    grid-template-areas:'nr bild kopf text pfeil'; }
}
@media (min-width:1100px){
  .lg-zeile{ grid-template-columns:52px clamp(150px,14vw,210px) minmax(0,1fr) minmax(0,.95fr) 34px;
    grid-template-areas:'nr bild kopf text pfeil'; }
}
.lg-zeile::before{
  content:''; position:absolute; inset:0 -100vw; z-index:0;
  background:linear-gradient(90deg, rgba(163,12,37,.24), rgba(163,12,37,.04) 62%, transparent 86%);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .6s var(--ease);
}
.lg-zeile:hover::before, .lg-zeile:focus-visible::before{ transform:scaleX(1); }
.lg-zeile > *{ position:relative; z-index:1; min-width:0; }
.lg-nr{ grid-area:nr; font-size:12px; letter-spacing:.2em; color:var(--rot-text); }
.lg-bild{ grid-area:bild; display:block; overflow:hidden; border-radius:7px; }
.lg-bild img{
  width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; display:block;
  filter:grayscale(.85) brightness(.62);
  transform:scale(1.01);
  transition:filter .5s var(--ease), transform .7s var(--ease);
}
.lg-zeile:hover .lg-bild img, .lg-zeile:focus-visible .lg-bild img{ filter:none; transform:scale(1.06); }
.lg-kopf{ grid-area:kopf; display:block; transition:transform .5s var(--ease); }
.lg-kopf b{ display:block; font-family:var(--schrift-anzeige); font-weight:700; font-size:clamp(22px,3vw,34px); line-height:.98; letter-spacing:-.03em; }
.lg-kopf i{ display:block; margin-top:8px; font-style:normal; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.58); }
.lg-text{ grid-area:text; font-size:14.5px; line-height:1.7; color:rgba(255,255,255,.6); }
.lg-pfeil{ grid-area:pfeil; justify-self:end; font-size:17px; color:rgba(255,255,255,.5); transition:transform .5s var(--ease), color .4s var(--ease); }
.lg-zeile:hover .lg-kopf, .lg-zeile:focus-visible .lg-kopf{ transform:translateX(10px); }
.lg-zeile:hover .lg-pfeil, .lg-zeile:focus-visible .lg-pfeil{ transform:translateX(8px); color:#fff; }

/* ---------- Text neben Bild ---------- */
.sk-duo{ display:grid; gap:clamp(26px,4vw,64px); align-items:center; grid-template-columns:1fr; }
@media (min-width:900px){
  .sk-duo{ grid-template-columns:1fr 1fr; }
  .sk-duo.gedreht .sk-duo-text{ order:2; }
}
.sk-duo-bild{ position:relative; }
/* Hochformat-Video aus der Werkstatt: nicht auf Querformat beschneiden */
/* Video fuellt die rechte Spalte; am Desktop so hoch wie der Text daneben */
.sk-duo-bild.hoch{ width:100%; max-width:460px; }
.sk-duo-bild.hoch video{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 45%;
  display:block; border-radius:10px; background:#111;
}
@media (min-width:900px){
  /* Textspalte breiter, damit die Ueberschrift in zwei Zeilen passt;
     das Video wird schmaler und durch die kuerzere Textspalte auch niedriger */
  .sk-duo.mit-video{ align-items:stretch; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); }
  .sk-duo.mit-video h2{ max-width:none; font-size:clamp(26px,2.9vw,42px); }
  .sk-duo.mit-video p{ font-size:14.5px; line-height:1.75; }
  .sk-duo.mit-video .sk-merk li{ font-size:14px; }
  .sk-duo.mit-video .sk-duo-text{ padding-left:clamp(0px,3.5vw,56px); align-self:center; }
  /* absolut, damit der Text die Hoehe vorgibt und nicht das Video */
  .sk-duo.mit-video .sk-duo-bild.hoch{ min-height:520px; max-width:none; }
  .sk-duo.mit-video .sk-duo-bild.hoch video{ position:absolute; inset:0; height:100%; aspect-ratio:auto; }
}
.sk-duo-bild img{ width:100%; height:auto; display:block; filter:grayscale(.35) brightness(.86); }
.sk-duo-bild::before{
  content:''; position:absolute; left:-1px; top:-6%; bottom:-6%; width:1px;
  background:rgba(163,12,37,.55);
}
.sk-duo h2{ margin:18px 0 0; max-width:16ch; }
.sk-duo p{ margin:20px 0 0; font-size:var(--fliess); line-height:1.7; color:var(--text); max-width:50ch; text-wrap:pretty; }
.sk-merk{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:11px; }
.sk-merk li{ position:relative; padding-left:20px; font-size:15.5px; color:var(--text-leise); }
.sk-merk li::before{ content:''; position:absolute; left:0; top:.62em; width:8px; height:1px; background:var(--rot); }

/* ---------- Schritte ---------- */
.sk-schritte{ display:grid; gap:1px; background:rgba(255,255,255,.14); grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); }
.sk-schritt{ background:#000; padding:clamp(22px,3vw,34px); }
.sk-schritt .zt-schritt{ display:block; font-size:12px; letter-spacing:.2em; color:var(--rot-text); margin-bottom:16px; }
.sk-schritt h3{ margin:0 0 10px; hyphens:auto; overflow-wrap:break-word; }
.sk-schritt p{ margin:0; font-size:15.5px; line-height:1.65; color:var(--text-leise); text-wrap:pretty; }

/* ---------- Kontakt ---------- */
.kt-liste{ margin:30px 0 0; display:grid; gap:2px 22px; grid-template-columns:auto 1fr; align-items:baseline; }
.kt-liste dt{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--rot-text); padding-top:6px; }
.kt-liste dd{ margin:0; font-size:15.5px; line-height:1.7; color:rgba(255,255,255,.78); }
.kt-form{ display:grid; gap:18px; border:1px solid rgba(255,255,255,.16); padding:clamp(22px,3vw,38px); }
.kt-paar{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:520px){ .kt-paar{ grid-template-columns:1fr 1fr; } }
.kt-zeile{ margin:0; display:grid; gap:8px; }
.kt-zeile label{ font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.kt-form input, .kt-form select, .kt-form textarea{
  width:100%; padding:13px 15px; background:rgba(255,255,255,.04); color:#fff;
  border:1px solid rgba(255,255,255,.18); border-radius:3px;
  font-family:inherit; font-size:16px; line-height:1.5;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.kt-form input::placeholder, .kt-form textarea::placeholder{ color:rgba(255,255,255,.34); }
.kt-form input:hover, .kt-form select:hover, .kt-form textarea:hover{ border-color:rgba(255,255,255,.38); }
.kt-form input:focus, .kt-form select:focus, .kt-form textarea:focus{ border-color:var(--rot); background:rgba(255,255,255,.06); }
.kt-form textarea{ resize:vertical; min-height:130px; }
.kt-form .fehler{ border-color:var(--rot); }
.kt-knopf{
  justify-self:start; margin-top:4px; padding:14px 26px; cursor:pointer;
  background:var(--rot); color:#fff; border:0; border-radius:3px;
  font-family:inherit; font-size:14.5px; font-weight:500; letter-spacing:.02em;
  transition:background-color .3s var(--ease), transform .3s var(--ease);
}
.kt-knopf:hover{ background:var(--rot-hell); transform:translateY(-1px); }
.kt-hinweis{ margin:0; font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.58); }
/* Fallenfeld gegen Bots: fuer Menschen unsichtbar */
.kt-falle{ position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden; }
.kt-knopf[disabled]{ opacity:.6; cursor:progress; transform:none; }
.kt-form .kt-senden-fehler{ margin:0; font-size:14px; line-height:1.5; color:#f0606e; }
.kt-form .kt-senden-fehler[hidden], .kt-form [hidden]{ display:none; }
/* Bestaetigung nach dem Senden: soll sofort ins Auge fallen */
.kt-form.gesendet{ border-color:var(--rot-hell); background:radial-gradient(ellipse at 50% 0%, rgba(190,22,33,.28), transparent 70%); transition:border-color .5s, background .5s; }
.kt-danke{ padding:clamp(12px,3vw,34px) 0; outline:none; text-align:left; }
.kt-danke-haken{ display:block; width:clamp(64px,8vw,88px); height:auto; margin-bottom:22px; }
.kt-danke-haken circle{ fill:var(--rot); stroke:var(--rot-hell); stroke-width:2; transform-origin:50% 50%; transform:scale(.6); opacity:0; transition:transform .6s cubic-bezier(.34,1.56,.64,1), opacity .3s; }
.kt-danke-haken path{ fill:none; stroke:#fff; stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40; transition:stroke-dashoffset .55s cubic-bezier(.65,0,.35,1) .35s; }
.kt-danke.zeigen .kt-danke-haken circle{ transform:none; opacity:1; }
.kt-danke.zeigen .kt-danke-haken path{ stroke-dashoffset:0; }
.kt-danke .kt-danke-titel{ margin:0 0 10px; font-size:clamp(40px,5.6vw,72px); line-height:.95; letter-spacing:-.02em; color:#fff; }
.kt-danke .kt-danke-text{ margin:0 0 26px; font-size:clamp(18px,1.6vw,21px); line-height:1.5; color:#fff; }
.kt-danke-schritte{ list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid rgba(255,255,255,.16); }
.kt-danke-schritte li{ display:grid; grid-template-columns:minmax(0,1fr); gap:4px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.16); font-size:15.5px; line-height:1.55; color:rgba(255,255,255,.78); }
.kt-danke-schritte b{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#f0606e; }
.kt-danke-schritte a{ white-space:nowrap; color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--rot); }
.kt-danke > *:not(.kt-danke-haken){ opacity:0; transform:translateY(10px); transition:opacity .5s ease-out, transform .5s cubic-bezier(.22,1,.36,1); }
.kt-danke.zeigen > *:not(.kt-danke-haken){ opacity:1; transform:none; }
.kt-danke.zeigen > .kt-danke-titel{ transition-delay:.5s; }
.kt-danke.zeigen > .kt-danke-text{ transition-delay:.62s; }
.kt-danke.zeigen > .kt-danke-schritte{ transition-delay:.74s; }
@media (prefers-reduced-motion:reduce){ .kt-danke *, .kt-danke-haken *{ transition:none !important; } }
/* Datenschutz-Einwilligung: Pflicht-Haekchen vor dem Senden */
.kt-zustimmung{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; align-items:start; }
.kt-form .kt-zustimmung input[type="checkbox"]{
  -webkit-appearance:none; appearance:none; width:22px; height:22px; padding:0; margin:2px 0 0; flex:none; cursor:pointer;
  border:1.5px solid rgba(255,255,255,.5); border-radius:0; background:transparent; display:grid; place-items:center;
}
.kt-form .kt-zustimmung input[type="checkbox"]::after{
  content:''; width:11px; height:6px; border:2px solid #fff; border-top:0; border-right:0; transform:translateY(-2px) rotate(-45deg) scale(0); transition:transform .18s ease-out;
}
.kt-form .kt-zustimmung input[type="checkbox"]:checked{ background:var(--rot); border-color:var(--rot); }
.kt-form .kt-zustimmung input[type="checkbox"]:checked::after{ transform:translateY(-2px) rotate(-45deg) scale(1); }
.kt-form .kt-zustimmung input[type="checkbox"]:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.kt-form .kt-zustimmung input.fehler{ border-color:var(--rot-hell); box-shadow:0 0 0 3px rgba(190,22,33,.35); }
.kt-zustimmung label{ font-size:14px; line-height:1.55; color:rgba(255,255,255,.78); cursor:pointer; }
.kt-zustimmung label a{ color:#fff; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--rot); }
.kt-form .kt-fehltext{ grid-column:2; margin:0; font-size:13px; line-height:1.4; color:#f0606e; }
.kt-form .kt-fehltext[hidden]{ display:none; }

/* ---------- Zertifikate: schmales Band unter dem Auftakt ----------
   Zurueckhaltend gehalten: die Siegel sind gedaempft und kommen erst beim
   Ueberfahren in Farbe. */
.zt{ padding:clamp(20px,3vh,32px) var(--rand); border-top:1px solid rgba(255,255,255,.14); }
.zt-band{ display:flex; justify-content:center; }
/* Im Zahlenband hat die Zelle nur die Breite einer Spalte — die Zeichen
   brechen dort um und werden kleiner, damit nichts über die Nachbarspalte läuft. */
.sk-siegelzelle{ display:grid; gap:14px; justify-items:start; align-content:center; min-width:0; }
.sk-siegelzelle .zt-siegel{
  width:100%; max-width:100%; box-sizing:border-box;
  flex-wrap:wrap; gap:8px 10px; padding:10px 12px;
}
.sk-siegelzelle .zt-siegel figure{ min-width:0; }
.sk-siegelzelle .zt-siegel img{ height:24px; max-width:100%; }
.sk-siegelzelle .zt-siegel figure:first-child img{ height:34px; }
/* Eine gemeinsame weisse Flaeche fuer alle drei Zeichen, Farben unangetastet */
.zt-siegel{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(14px,2vw,26px);
  padding:clamp(6px,0.8vw,9px) clamp(14px,1.8vw,22px);
  background:#fff; border-radius:8px;
}
.zt-siegel figure{ margin:0; }
.zt-siegel img{ display:block; width:auto; height:clamp(30px,3.8vh,40px); }
.zt-siegel figure:first-child img{ height:clamp(46px,5.6vh,60px); }

/* ---------- Referenzen aus der Region ---------- */

/* ---------- Plattenstaender ----------
   Die Huellen lehnen auf einem Brett, oben schaut die Scheibe heraus.
   Klick holt eine Platte nach vorne, ein Knopf dreht sie um. */
.pk-staender{ position:relative; margin-top:clamp(20px,4vh,40px); perspective:1600px; }
.pk-reihe{
  position:relative; z-index:1;
  display:flex; justify-content:center; align-items:flex-end; gap:clamp(12px,1.8vw,26px);
  padding:clamp(40px,6vw,70px) 4px 0;
}
.pk-platte{
  all:unset; box-sizing:border-box; position:relative; cursor:pointer;
  flex:0 0 auto; width:clamp(150px,16vw,250px); aspect-ratio:1;
  transform-origin:50% 100%;
  transform:rotateX(9deg) rotate(var(--dreh));
  transition:transform .5s cubic-bezier(.2,.9,.25,1.15);
}
.pk-platte img{
  position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:cover;
  border-radius:2px;
  box-shadow:0 26px 34px -22px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.06);
}
/* Die Scheibe steckt in der Huelle und schaut oben heraus */
.pk-scheibe{
  position:absolute; left:6%; right:6%; top:0; aspect-ratio:1; border-radius:50%; z-index:0;
  transform:translateY(-16%);
  background:
    radial-gradient(circle, #1c1c1c 0 13%, var(--rot) 13.5% 16%, #111 16.5% 17.5%, transparent 18%),
    repeating-radial-gradient(circle, #0b0b0b 0 2px, #1a1a1a 2px 3px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  transition:transform .5s cubic-bezier(.2,.9,.25,1.15);
}
.pk-platte:hover, .pk-platte:focus-visible{ transform:rotateX(0deg) rotate(0deg) translateY(-14px); }
.pk-platte:hover .pk-scheibe, .pk-platte:focus-visible .pk-scheibe{ transform:translateY(-30%); }
.pk-platte:focus-visible img{ box-shadow:0 0 0 2px #fff, 0 26px 34px -22px rgba(0,0,0,.95); }
/* Das Brett, auf dem sie stehen */
.pk-brett{
  position:relative; height:18px; margin:-4px clamp(-12px,-1vw,0px) 0; border-radius:3px;
  background:linear-gradient(180deg, #6b4a2f 0%, #4a3220 55%, #2b1c11 100%);
  box-shadow:0 22px 40px -18px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.18);
}
.pk-hinweis{ margin:18px 0 0; text-align:center; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.58); }

/* Buehne: die herausgenommene Platte */
.pk-buehne{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:clamp(16px,4vw,40px); }
.pk-buehne[hidden]{ display:none; }
.pk-hg{ position:absolute; inset:0; background:rgba(0,0,0,.86); backdrop-filter:blur(6px); opacity:0; transition:opacity .45s var(--ease); }
.pk-buehne.offen .pk-hg{ opacity:1; }
.pk-mitte{ position:relative; display:flex; flex-direction:column; align-items:center; gap:clamp(18px,3vh,28px); }
.pk-karte{
  position:relative; width:min(62vh, 78vw, 560px); aspect-ratio:1; perspective:1800px;
  transform-origin:0 0; will-change:transform;
}
.pk-vinyl{
  position:absolute; inset:3%; border-radius:50%; z-index:0;
  background:
    radial-gradient(circle, #1c1c1c 0 12%, var(--rot) 12.5% 15%, #111 15.5% 16.5%, transparent 17%),
    repeating-radial-gradient(circle, #0b0b0b 0 2px, #1b1b1b 2px 3px);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.9);
  transition:transform .8s cubic-bezier(.2,.9,.25,1), opacity .4s var(--ease);
}
.pk-buehne.offen .pk-vinyl{ transform:translateX(38%) rotate(200deg); }
.pk-buehne.umgedreht .pk-vinyl{ transform:translateX(0) rotate(0deg); opacity:0; }
.pk-dreher{
  position:relative; z-index:1; width:100%; height:100%;
  transform-style:preserve-3d; transition:transform .9s cubic-bezier(.3,.8,.25,1);
}
.pk-buehne.umgedreht .pk-dreher{ transform:rotateY(180deg); }
.pk-dreher img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:3px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.95);
}
.pk-dreher .pk-hinten{ transform:rotateY(180deg); }
.pk-info{
  width:min(62vh, 78vw, 560px); display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
  opacity:0; transform:translateY(12px); transition:opacity .45s var(--ease) .2s, transform .45s var(--ease) .2s;
}
.pk-buehne.offen .pk-info{ opacity:1; transform:none; }
.pk-info h3{ margin:8px 0 0; font-size:clamp(20px,2.2vw,28px); }
.pk-tasten{ display:flex; gap:10px; flex:0 0 auto; }
/* Markanter Knopf zum Umdrehen */
.pk-drehen{
  all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:10px;
  min-height:48px; padding:0 22px; border-radius:100px;
  background:var(--rot); color:#fff; font-family:var(--schrift-anzeige); font-weight:700;
  font-size:14px; letter-spacing:.12em; text-transform:uppercase;
  box-shadow:0 12px 30px -10px rgba(163,12,37,.9);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.pk-drehen:hover{ background:var(--rot-hell); transform:translateY(-2px); }
.pk-drehen:focus-visible{ box-shadow:0 0 0 2px #fff; }
.pk-drehen-zeichen{ font-size:20px; line-height:1; transition:transform .6s var(--ease); }
.pk-buehne.umgedreht .pk-drehen-zeichen{ transform:rotate(-180deg); }
.pk-schliessen{
  all:unset; box-sizing:border-box; cursor:pointer; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; font-size:26px; line-height:1; color:#fff;
  border:1px solid rgba(255,255,255,.35); transition:border-color .3s var(--ease), background .3s var(--ease);
}
.pk-schliessen:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.pk-schliessen:focus-visible{ box-shadow:0 0 0 2px #fff; }
@media (min-width:720px) and (max-width:959px){
  .pk-reihe{ justify-content:flex-start; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; margin:0 calc(-1 * var(--rand)); padding-left:var(--rand); padding-right:var(--rand); }
  .pk-platte{ width:34vw; scroll-snap-align:center; }
}
@media (max-width:719px){
  .pk-reihe{ justify-content:flex-start; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; margin:0 calc(-1 * var(--rand)); padding-left:var(--rand); padding-right:var(--rand); }
  .pk-platte{ width:56vw; scroll-snap-align:center; }
  .pk-info{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce){
  .pk-platte, .pk-scheibe, .pk-dreher, .pk-vinyl, .pk-hg, .pk-info{ transition:none !important; }
}

/* ---------- Werkband: echte Arbeiten, waagrecht am Scrollweg ---------- */
.wb{ position:relative; height:calc(100vh + var(--wb-weg,240vh)); border-top:1px solid rgba(255,255,255,.14); }
.wb-kleber{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; gap:clamp(20px,4vh,44px);
  padding:clamp(70px,12vh,120px) 0 clamp(40px,7vh,70px);
}
.wb-kopf{ padding:0 var(--rand); }
.wb-kopf .kicker{ margin-bottom:16px; }
.wb-kopf h2{ max-width:20ch; }
.wb-spur{
  display:flex; gap:clamp(14px,2vw,28px); padding:0 var(--rand);
  will-change:transform;
}
.wb-stueck{ margin:0; flex:0 0 auto; width:clamp(230px,32vw,440px); }
.wb-stueck img{
  /* height:auto, sonst gewinnt das height-Attribut und das 4:3 greift nicht */
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; border-radius:10px;
  filter:grayscale(.3) brightness(.9); transition:filter .5s var(--ease);
}
.wb-stueck:hover img{ filter:none; }
/* Cover sind quadratisch: ganz zeigen statt auf 4:3 zu beschneiden.
   Breite zusaetzlich an die Hoehe gebunden, damit es auf flachen Schirmen passt. */
.wb-quadrat .wb-stueck{ width:min(clamp(230px,32vw,440px), 50vh); }
.wb-quadrat .wb-stueck img{ aspect-ratio:1/1; }
.wb-stueck figcaption{ margin-top:13px; }
.wb-stueck .wb-naam{ display:block; font-family:var(--schrift-anzeige); font-weight:700; font-size:clamp(15px,1.4vw,20px); line-height:.98; letter-spacing:-.025em; }
.wb-stueck span{ display:block; margin-top:4px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.wb-stueck .wb-naam{ color:#fff; }
.wb-leiste{ margin:0 var(--rand); height:1px; background:rgba(255,255,255,.16); }
.wb-leiste i{ display:block; height:1px; width:0; background:var(--rot); }
@media (prefers-reduced-motion:reduce){
  .wb{ height:auto; }
  .wb-kleber{ position:static; height:auto; }
  .wb-spur{ overflow-x:auto; }
}

/* ---------- Ortsliste ---------- */
.sk-orte{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 12px; }
.sk-orte a{
  display:inline-block; padding:11px 19px; border-radius:100px;
  border:1px solid rgba(255,255,255,.2); font-size:13.5px;
  color:rgba(255,255,255,.82);
  transition:border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.sk-orte a:hover{ border-color:var(--rot); background:rgba(163,12,37,.16); color:#fff; }

/* Orte mit Bild: links Text und Orte, rechts das Bild; am Telefon untereinander */
.orte-zwei{ display:grid; grid-template-columns:1fr; gap:clamp(30px,5vw,72px); align-items:center; }
@media (min-width:900px){ .orte-zwei{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.orte-zwei .sk-kopf{ flex-direction:column; align-items:flex-start; margin-bottom:clamp(26px,4vh,40px); }
.orte-bild{ margin:0; aspect-ratio:4/3; border-radius:12px; overflow:hidden; background:#141414; }
.orte-bild img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Fragen ---------- */
.sk-fragen{ border-top:1px solid rgba(255,255,255,.14); }
.sk-frage{ border-bottom:1px solid rgba(255,255,255,.14); }
.sk-frage summary{
  display:flex; gap:20px; align-items:baseline; justify-content:space-between;
  padding:clamp(18px,2.4vh,26px) 0; cursor:pointer; list-style:none;
  font-family:var(--schrift-anzeige); font-weight:700;
  font-size:clamp(22px,3vw,34px); line-height:.98; letter-spacing:-.03em;
}
.sk-frage summary::-webkit-details-marker{ display:none; }
.sk-frage summary::after{ content:'+'; font-size:20px; color:var(--rot-text); transition:transform .4s var(--ease); }
.sk-frage[open] summary::after{ transform:rotate(45deg); }
.sk-frage p{ margin:0 0 clamp(20px,3vh,28px); font-size:var(--fliess); line-height:1.7; color:var(--text); max-width:64ch; text-wrap:pretty; }

/* ---------- Abschluss ---------- */
.sk-schluss{ display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,60px); justify-content:space-between; align-items:flex-end; }
.sk-schluss h2{ max-width:16ch; }
.sk-schluss .sk-tasten{ margin:0; }

/* ============ Fusszeile ============ */
.fuss{ border-top:1px solid rgba(255,255,255,.14); padding:clamp(40px,7vh,84px) var(--rand) clamp(20px,3vh,32px); }
.fuss-raster{ display:grid; gap:clamp(30px,4vw,56px); grid-template-columns:1fr; max-width:var(--inhalt); margin:0 auto; }
@media (min-width:680px){ .fuss-raster{ grid-template-columns:1fr 1fr; } }
@media (min-width:900px){ .fuss-raster{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .fuss-raster{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
/* Desktop: die Fusszeile nutzt die volle Seitenbreite, vier gleich breite Spalten */
@media (min-width:1100px){
  .fuss-raster, .fuss-siegelzeile, .fuss-schluss{ max-width:1420px; }
  .fuss-raster{ gap:clamp(40px,5vw,96px); }
  .fuss-raster > div{ max-width:280px; }
}
.fuss-marke{ display:grid; gap:20px; justify-items:center; }
.fuss-marke > a{ width:200px; max-width:100%; }
.fuss-marke img{ width:100%; height:auto; display:block; }
.fuss-titel{ display:block; margin:0 0 18px; font-size:11.5px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--rot-text); }
.fuss-liste{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.fuss-liste a, .fuss-zeile a{ color:rgba(255,255,255,.76); font-size:14.5px; transition:color .3s var(--ease); }
.fuss-liste a:hover, .fuss-zeile a:hover{ color:#fff; }
.fuss-zeile{ display:grid; gap:11px; font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.58); }
.fuss-zeile b{ display:block; font-weight:400; color:rgba(255,255,255,.76); }
.fuss-knopf{ display:inline-block; margin-top:6px; padding-bottom:4px; font-size:14.5px; color:#fff !important; border-bottom:1px solid rgba(255,255,255,.4); }
.fuss-siegel{ margin:18px 0 0; width:279px; zoom:.56; transform-origin:0 0; }
.fuss-siegel .siegel-feld{ display:block; }
.fuss-siegel .ti-widget{ margin:0 !important; }
.fuss-recht{ display:flex; flex-wrap:wrap; gap:10px 18px; }
.fuss-recht a{ color:rgba(255,255,255,.55); transition:color .3s var(--ease); }
.fuss-recht a:hover{ color:#fff; }
.fuss-recht a + a{ position:relative; padding-left:19px; }
.fuss-recht a + a::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:11px; background:rgba(255,255,255,.22); }
.fuss-regionen-alt{
  max-width:var(--inhalt); margin:clamp(30px,4.5vh,52px) auto 0;
  padding-top:22px; border-top:1px solid rgba(255,255,255,.1);
}
.fuss-regionen .fuss-titel{ margin-bottom:14px; }
.fuss-regionen ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 10px; }
.fuss-regionen a{
  display:inline-block; padding:7px 14px; border-radius:100px;
  border:1px solid rgba(255,255,255,.16); font-size:12.5px; color:rgba(255,255,255,.7);
  transition:border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
}
.fuss-regionen a:hover{ border-color:var(--rot); background:rgba(163,12,37,.16); color:#fff; }
/* Orte in der Fusszeile: ein Ort, darunter seine Seiten */
.fuss-orte{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.fuss-ort > summary{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:5px 0; cursor:pointer; list-style:none;
  font-size:14.5px; color:rgba(255,255,255,.76);
  transition:color .3s var(--ease);
}
.fuss-ort > summary::-webkit-details-marker{ display:none; }
.fuss-ort > summary span{
  width:7px; height:7px; border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); opacity:.5;
  transition:transform .35s var(--ease), opacity .3s var(--ease);
}
.fuss-ort[open] > summary span{ transform:rotate(225deg) translate(-2px,-2px); opacity:1; }
.fuss-ort > summary:hover{ color:#fff; }
.fuss-ort > ul{ list-style:none; margin:2px 0 8px; padding:0 0 0 14px; display:grid; gap:7px; border-left:1px solid rgba(163,12,37,.5); }
.fuss-ort > ul a{ font-size:13px; color:rgba(255,255,255,.58); }
.fuss-ort > ul a:hover{ color:#fff; }
.fuss-einzeln{ display:flex; align-items:baseline; gap:8px; padding:5px 0; font-size:14.5px; color:rgba(255,255,255,.76); }
.fuss-einzeln i{ font-style:normal; font-size:11px; color:rgba(255,255,255,.58); }
.fuss-einzeln:hover{ color:#fff; }
.fuss-alle{ display:inline-block; margin-top:14px; font-size:12.5px; color:var(--rot-text) !important; }
.fuss-alle:hover{ color:#fff !important; }

.fuss-siegelzeile{
  display:flex; flex-wrap:wrap; align-items:center; gap:20px;
  max-width:var(--inhalt); margin:clamp(34px,5vh,60px) auto 0;
  padding-top:clamp(28px,4vh,44px); border-top:1px solid rgba(255,255,255,.1);
}
.fuss-siegelzeile .fuss-strom{ margin:0; }
/* Siegel unter Kontakt: Naturstrom und Bewertung untereinander */
.fuss-siegelspalte{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-top:26px; }
.fuss-siegelspalte .fuss-strom, .fuss-siegelspalte .fuss-siegel{ margin:0; }

.fuss-schluss{
  display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between;
  max-width:var(--inhalt); margin:clamp(34px,5vh,60px) auto 0;
  padding-top:22px; border-top:1px solid rgba(255,255,255,.1);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.58);
}

@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
  .lst-zeile::before, .lst-kopf, .lst-pfeil{ transition:none !important; }
}

/* ---------- Ratgeber ----------
   Fliesstext braucht eine schmale Spalte. Die Seitenbreite --spur ist mit
   1420px fuer Kacheln gedacht; Text darin waere unlesbar. Der Kopf traegt
   bewusst kein .rv: er steht im ersten Bildschirm, und eine Einblendung
   dort verzoegert nur den Bildaufbau. */
.art-kopf{ padding:clamp(120px,18vh,190px) var(--rand) clamp(30px,5vh,54px); }
.art-weg{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.58); margin-bottom:22px; }
.art-weg a{ color:rgba(255,255,255,.6); }
.art-weg a:hover{ color:var(--rot-text); }
.art-weg span{ margin:0 7px; }
.art-kopf .kicker{ display:block; margin-bottom:18px; }
.art-kopf h1{ max-width:20ch; }
.art-lead{ margin:26px 0 0; max-width:60ch; font-size:clamp(17px,1.5vw,20px); line-height:1.62; color:rgba(255,255,255,.72); }
.art-zeile{ display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:30px;
  font-size:12px; letter-spacing:.06em; color:rgba(255,255,255,.58); }
.art-zeile b{ color:rgba(255,255,255,.8); font-weight:600; }
.art-bild{ margin:clamp(34px,6vh,60px) auto 0; }
.art-bild img{ width:100%; height:auto; display:block; border-radius:4px; }
.art-bild figcaption, .art-figur figcaption{ margin-top:11px; font-size:12.5px; color:rgba(255,255,255,.58); }

.art-text{ padding:clamp(40px,7vh,80px) var(--rand) clamp(56px,10vh,120px); }
.art-spalte{ max-width:740px; }
.art-spalte h2{ font-size:clamp(23px,2.6vw,34px); line-height:1.04; margin:clamp(44px,7vh,76px) 0 20px; }
.art-spalte h2:first-child{ margin-top:0; }
.art-spalte h3{ font-size:clamp(18px,1.8vw,22px); line-height:1.16; letter-spacing:-.015em; margin:36px 0 12px; }
.art-spalte p{ margin:0 0 22px; font-size:17px; line-height:1.72; color:var(--text); text-wrap:pretty; }
.art-spalte a{ color:#fff; text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:var(--rot); text-decoration-thickness:1.5px; }
.art-spalte a:hover{ color:var(--rot-text); }
.art-spalte ul, .art-spalte ol{ margin:0 0 22px; padding-left:20px; }
.art-spalte li{ margin-bottom:10px; font-size:17px; line-height:1.68; color:var(--text); }
.art-spalte li::marker{ color:var(--rot-text); }
.art-spalte strong, .art-spalte b{ color:#fff; font-weight:600; }

.art-kasten{ margin:34px 0; padding:24px 26px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.035); border-radius:10px; }
.art-kasten b{ display:block; margin-bottom:10px; font-family:var(--schrift-anzeige); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--rot-text); }
.art-kasten p{ margin:0; font-size:16px; line-height:1.68; }

.art-tabelle{ margin:30px 0; overflow-x:auto; }
.art-tabelle table{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:480px; }
.art-tabelle th{ text-align:left; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.28);
  font-family:var(--schrift-anzeige); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.art-tabelle td{ padding:13px 14px; border-bottom:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.72); vertical-align:top; }
.art-tabelle .art-erst{ color:#fff; font-weight:600; }
.art-tabelle tr:hover td{ background:rgba(255,255,255,.03); }

.art-figur{ margin:32px 0; }
.art-figur img{ width:100%; height:auto; display:block; border-radius:4px; }

/* Uebersichtsseite */
.rg-raster{ display:grid; gap:2px; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); background:rgba(255,255,255,.14); }
.rg-karte{ position:relative; display:flex; flex-direction:column; background:#000; transition:background .4s var(--ease); }
.rg-karte .karte-link{ position:absolute; inset:0; z-index:5; }
.lst-zeile .karte-link{ position:absolute; inset:0; z-index:5; }
.rg-karte:hover{ background:#0b0b0b; color:#fff; }
.rg-karte img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; display:block; }
.rg-inhalt{ padding:clamp(22px,3vw,32px); display:flex; flex-direction:column; flex:1; }
.rg-sparte{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--rot-text); margin-bottom:16px; }
.rg-karte h3{ margin:0 0 12px; font-size:clamp(19px,2vw,24px); }
.rg-karte p{ margin:0 0 22px; font-size:14.5px; line-height:1.7; color:rgba(255,255,255,.6); flex:1; }
.rg-mehr{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.rg-karte:hover .rg-mehr{ color:var(--rot-text); }

@media (max-width:640px){
  .art-kopf{ padding-top:clamp(96px,14vh,130px); }
  .art-tabelle table{ font-size:13.5px; }
}

/* ---------- Rechtsseiten (Impressum, Datenschutz, AGB) ---------- */
.rt-kopf{ padding:clamp(120px,18vh,190px) var(--rand) clamp(30px,5vh,54px); }
.rt-blatt{ padding:clamp(20px,3vh,32px) var(--rand) clamp(70px,10vh,120px); }
.rt-mitte{ max-width:760px; margin:0 auto; }
.rt-kopf .rt-mitte span{ display:block; margin-bottom:14px; }
.rt-kopf h1{ max-width:24ch; }
.rt-blatt h2{ font-size:clamp(23px,2.6vw,34px); line-height:1.04; margin:clamp(44px,7vh,76px) 0 20px; }
.rt-blatt h2:first-child{ margin-top:0; }
.rt-blatt p{ margin:0 0 20px; font-size:16.5px; line-height:1.72; color:var(--text); }
.rt-blatt a{ color:#fff; text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:var(--rot); text-decoration-thickness:1.5px; }
.rt-blatt a:hover{ color:var(--rot-text); }
.rt-blatt ul, .rt-blatt ol{ margin:0 0 22px; padding-left:20px; }
.rt-blatt li{ margin-bottom:10px; font-size:16px; line-height:1.72; color:rgba(255,255,255,.76); }
.rt-blatt li::marker{ color:var(--rot-text); }
.rt-blatt strong, .rt-blatt b{ color:#fff; font-weight:600; }
@media (max-width:640px){ .rt-kopf{ padding-top:clamp(96px,14vh,130px); } }

/* ---------- Bedienbarkeit am Telefon ----------
   Google und die Barrierefreiheitsrichtlinien verlangen 44×44 px als
   Mindestgröße für alles, was angetippt wird. Gemessen waren 60 Ziele
   darunter — die kleinsten 16 px hoch, darunter die Telefonnummer.

   Wo Innenabstand die Gestaltung nicht verändert, wird er echt vergeben.
   Wo er das Raster sprengen würde (Fußzeile, Rechtslinks), liegt die
   Tastfläche unsichtbar über dem Text. Sichtbar ändert sich nichts. */
@media (hover:none), (pointer:coarse){

  /* Schaltflächen dürfen wachsen */
  .sk-taste, .fuss-knopf, .kn-anfrage{
    min-height:44px; display:inline-flex; align-items:center;
  }
  .sk-tasten{ gap:clamp(14px,3vw,34px) clamp(18px,4vw,34px); }

  /* Aufklapper der Ortsliste */
  .fuss-ort > summary{ min-height:44px; display:flex; align-items:center; }

  /* Listenlinks: echter Abstand, das Raster verträgt es */
  .fuss-liste{ gap:2px; }
  .fuss-liste a{ display:flex; align-items:center; min-height:44px; }
  .fuss-ort > ul{ gap:2px; }
  .fuss-ort > ul a{ display:flex; align-items:center; min-height:44px; }
  .fuss-zeile a{ display:inline-flex; align-items:center; min-height:44px; }
  .sk-orte a{ min-height:44px; display:inline-flex; align-items:center; }

  /* Kopfnavigation und Logo */
  .kn a{ display:inline-flex; align-items:center; min-height:44px; }
  .kl{ min-width:44px; display:inline-flex; justify-content:center; }

  /* Schmale Einzellinks: unsichtbare Tastfläche statt Innenabstand,
     damit die Zeile nicht auseinanderfällt */
  /* Links mitten im Fliesstext bleiben unveraendert: WCAG nimmt sie
     ausdruecklich aus, weil eine groessere Flaeche den Satz zerreisst.
     Betroffen sind nur freistehende Verweise. */
  .fuss-recht a, .fuss-alle, .art-weg a{ position:relative; display:inline-block; }
  .fuss-recht a::after, .fuss-alle::after, .art-weg a::after{
    content:''; position:absolute; left:0; right:0;
    top:50%; transform:translateY(-50%); height:44px;
  }
  .fuss-recht{ gap:4px 18px; }
}

/* ---------- Einwilligung ----------
   Liegt fix am unteren Rand, damit nichts verschoben wird (CLS bleibt 0).
   Beide Schaltflächen sind gleich gewichtet: Ablehnen muss so leicht
   sein wie Zustimmen, sonst ist die Einwilligung nicht wirksam. */
.ew{
  position:fixed; left:0; right:0; bottom:0; z-index:9000;
  background:rgba(8,8,8,.97); border-top:1px solid rgba(255,255,255,.16);
  backdrop-filter:saturate(140%) blur(8px);
  transform:translateY(100%); transition:transform .5s var(--ease);
}
.ew.an{ transform:none; }
.ew-innen{
  max-width:var(--spur); margin:0 auto; padding:clamp(18px,3vw,26px) var(--rand);
  display:flex; flex-wrap:wrap; gap:16px 34px; align-items:center; justify-content:space-between;
}
.ew-wort{ flex:1 1 380px; min-width:0; }
.ew-wort b{
  display:block; margin-bottom:7px; font-family:var(--schrift-anzeige);
  font-size:15px; font-weight:700; letter-spacing:-.01em;
}
.ew-wort p{ margin:0; font-size:13.5px; line-height:1.62; color:rgba(255,255,255,.66); max-width:74ch; }
.ew-wort a{ color:#fff; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--rot); }
.ew-tasten{ display:flex; flex-wrap:wrap; gap:10px; flex:0 0 auto; }
.ew-tasten button{
  font-family:var(--schrift-text); font-size:13.5px; font-weight:500;
  letter-spacing:.02em; padding:0 20px; min-height:44px; border-radius:3px;
  cursor:pointer; transition:background .3s var(--ease), border-color .3s var(--ease);
}
.ew-tasten [data-ew="nein"]{ background:transparent; color:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.34); }
.ew-tasten [data-ew="nein"]:hover{ background:rgba(255,255,255,.08); color:#fff; }
.ew-tasten [data-ew="ja"]{ background:var(--rot); color:#fff; border:1px solid var(--rot); }
.ew-tasten [data-ew="ja"]:hover{ background:var(--rot-hell); border-color:var(--rot-hell); }

.ew-kurz{ display:none; }
@media (max-width:640px){
  /* am Handy eine schmale Leiste: Frage, ein Satz, zwei Knoepfe nebeneinander */
  .ew-innen{ flex-direction:column; align-items:stretch; gap:12px; padding:14px var(--rand) calc(14px + env(safe-area-inset-bottom)); }
  .ew-wort{ flex:0 0 auto; }
  .ew-wort b{ margin-bottom:4px; font-size:14px; }
  .ew-wort #ew-text{ display:none; }
  .ew-wort .ew-kurz{ display:block; margin:0; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.66); }
  .ew-tasten{ flex-wrap:nowrap; gap:8px; }
  .ew-tasten button{ flex:1 1 0; min-height:44px; padding:0 10px; font-size:13px; }
}
@media (prefers-reduced-motion:reduce){
  .ew{ transition:none; }
}

/* Platzhalter, solange die Bewertungen nicht geladen sind */
.siegel-feld:empty::after, .stimmen-feld:empty::after{
  content:'Bewertungen werden erst nach Zustimmung geladen.';
  display:block; font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.58);
}


}



/* ---------- Referenzen als Bildschirm ----------
   Ein Monitor, in dem die Projekte liegen. Beim Anklicken wächst eines
   auf die volle Fläche und zeigt die Geschichte; ein zweiter Klick
   verkleinert es wieder. Jeder Betrieb bringt eigene Farben mit, aus
   seinem Logo ausgelesen.

   Bewusst ruhig gehalten: ein Hintergrund, eine Rahmenstärke, ein
   Akzent. Zwölf Kacheln sind sichtbar, der Rest kommt auf Knopfdruck —
   neunundzwanzig auf einmal waren unübersichtlich.

   Ohne Skript liegen alle Angaben untereinander offen. */
.bs{ margin-top:clamp(6px,1vh,14px); }
.bs-rahmen{
  position:relative; border:1px solid rgba(255,255,255,.14); border-radius:10px;
  background:#0b0b0b; overflow:hidden;
  box-shadow:0 40px 90px -55px rgba(0,0,0,.9);
}

/* Kopfleiste */
.bs-leiste{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:12px clamp(14px,1.8vw,20px);
  border-bottom:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.025);
}
.bs-punkte{ display:flex; gap:6px; flex:0 0 auto; }
.bs-punkte i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.15); }
.bs-punkte i:first-child{ background:var(--rot); }
.bs-titel{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bs-filter{ display:flex; flex-wrap:wrap; gap:4px; margin-left:auto; }
.bs-filter button{
  font-family:var(--schrift-text); font-size:10.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  padding:0 12px; min-height:30px; border-radius:15px;
  background:transparent; color:rgba(255,255,255,.58); border:1px solid transparent;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.bs-filter button:hover{ color:#fff; background:rgba(255,255,255,.07); }
.bs-filter button.an{ color:#fff; background:var(--rot); }

/* Die Fläche */
.bs-flaeche{
  position:relative; display:grid; gap:clamp(12px,1.4vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,158px),1fr));
  padding:clamp(16px,2vw,24px);
  align-content:start;
  background:#0b0b0b;
}
.bs-kachel[hidden], .bs-kachel.spaet{ display:none; }
.bs.zeigt-alle .bs-kachel.spaet:not([hidden]){ display:block; }

/* Kachel */
.bs-oeffnen{
  all:unset; box-sizing:border-box; cursor:pointer; display:block; width:100%;
  border-radius:7px; overflow:hidden; background:#121212;
  outline:1px solid rgba(255,255,255,.07); outline-offset:-1px;
  transition:transform .3s var(--ease), outline-color .3s var(--ease);
}
.bs-oeffnen:hover{ transform:translateY(-3px); outline-color:var(--ci-1); }
.bs-oeffnen:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.bs-vorschau{ display:block; position:relative; aspect-ratio:4/3; overflow:hidden; background:#000; }
.bs-vorschau img{ width:100%; height:100%; object-fit:cover; display:block; }
.bs-ci{ position:absolute; inset:0; display:flex; }
.bs-ci i{ flex:1; }
.bs-ci i:nth-child(1){ background:var(--ci-1); }
.bs-ci i:nth-child(2){ background:var(--ci-2); }
.bs-ci i:nth-child(3){ background:var(--ci-3); }
.bs-logo{
  position:absolute; left:8px; bottom:8px; background:#fff; border-radius:3px;
  padding:4px 7px; max-width:66%; display:flex; align-items:center;
}
.bs-logo img{ max-height:18px; width:auto; max-width:100%; display:block; }
.bs-fuss{ display:block; padding:10px 11px 12px; }
.bs-fuss .bs-name{
  display:block; font-family:var(--schrift-anzeige); font-weight:700;
  font-size:12.5px; line-height:1.18; letter-spacing:-.01em; color:#fff;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.bs-fuss span{
  display:block; margin-top:5px; font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.58);
}

/* Das geöffnete Fenster */
.bs-fenster{
  position:absolute; inset:clamp(16px,2vw,24px); z-index:6;
  background:#0f0f0f; border-radius:8px; overflow:hidden;
  outline:1px solid rgba(255,255,255,.16); outline-offset:-1px;
  box-shadow:0 30px 70px -30px #000;
  transform-origin:top left; will-change:transform, opacity;
}
.bs-fenster[hidden]{ display:none; }
.bs.offen .bs-flaeche{ height:clamp(440px,74vh,700px); overflow:hidden; }
.bs-fenster-innen{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); height:100%; }
.bs-inhalt-bild{ position:relative; background:#000; overflow:hidden; }
.bs-inhalt-bild img{ width:100%; height:100%; object-fit:cover; display:block; }
.bs-ci.gross{ position:absolute; inset:0; flex-direction:column; }
.bs-inhalt-text{
  padding:clamp(22px,2.6vw,36px); overflow-y:auto;
  border-left:1px solid rgba(255,255,255,.09);
}
.bs-nr{ display:block; font-size:10px; letter-spacing:.2em; color:rgba(255,255,255,.32); }
.bs-inhalt-text h3{ margin:12px 0 0; font-size:clamp(19px,2vw,26px); line-height:1.06; }
.bs-inhalt-text .bs-ort{ display:block; margin-top:8px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ci-1); }
.bs-marken{ display:flex; flex-wrap:wrap; gap:5px; margin:16px 0 18px; }
.bs-marken i{
  font-style:normal; font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 9px; border-radius:11px; color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.07);
}
.bs-inhalt-text p{ margin:0 0 12px; font-size:14px; line-height:1.72; color:rgba(255,255,255,.68); }
.bs-web{
  display:inline-flex; align-items:center; gap:7px; min-height:44px; margin-top:4px;
  font-size:12.5px; color:#fff; border-bottom:1px solid var(--ci-1);
}
.bs-web:hover{ color:var(--ci-1); }
.bs-web i{ font-style:normal; transition:transform .3s var(--ease); }
.bs-web:hover i{ transform:translate(3px,-3px); }
.bs-web.still{ color:rgba(255,255,255,.32); border-bottom-color:rgba(255,255,255,.16); }

.bs-zu{
  position:absolute; top:12px; right:12px; z-index:2; width:34px; height:34px;
  border-radius:50%; cursor:pointer; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.22);
  transition:background .25s var(--ease), transform .3s var(--ease);
}
.bs-zu::before, .bs-zu::after{
  content:''; position:absolute; left:50%; top:50%; width:12px; height:1px; background:#fff;
}
.bs-zu::before{ transform:translate(-50%,-50%) rotate(45deg); }
.bs-zu::after{ transform:translate(-50%,-50%) rotate(-45deg); }
.bs-zu:hover{ background:var(--rot); border-color:var(--rot); transform:rotate(90deg); }

/* Unterhalb des Rahmens */
.bs-unten{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.bs-hinweis{ margin:0; font-size:12px; color:rgba(255,255,255,.58); }
.bs-mehr{
  font-family:var(--schrift-text); font-size:12px; font-weight:500; cursor:pointer;
  letter-spacing:.06em; padding:0 18px; min-height:42px; border-radius:21px;
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.26);
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.bs-mehr:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.5); }
.bs-leer{ grid-column:1 / -1; margin:18px 0 0; font-size:14px; color:rgba(255,255,255,.5); }

@media (max-width:820px){
  .bs-fenster-innen{ grid-template-columns:1fr; grid-template-rows:minmax(140px,32%) 1fr; }
  .bs-inhalt-text{ border-left:0; border-top:1px solid rgba(255,255,255,.09); }
  .bs-filter{ margin-left:0; width:100%; }
  .bs-flaeche{ grid-template-columns:repeat(auto-fill,minmax(min(100%,130px),1fr)); }
  .bs.offen .bs-flaeche{ height:76vh; }
}
@media (hover:none), (pointer:coarse){
  .bs-filter button{ min-height:44px; border-radius:22px; }
  .bs-zu{ width:44px; height:44px; }
}
.bs:not([data-bs-bereit]) .bs-flaeche{ display:block; height:auto; }
.bs:not([data-bs-bereit]) .bs-oeffnen{ display:none; }
.bs:not([data-bs-bereit]) .bs-kachel.spaet{ display:block; }
.bs:not([data-bs-bereit]) .bs-inhalt[hidden]{ display:block !important; }
.bs:not([data-bs-bereit]) .bs-inhalt-bild{ max-height:300px; }
.bs:not([data-bs-bereit]) .bs-kachel{ margin-bottom:28px; }
.bs:not([data-bs-bereit]) .bs-filter,
.bs:not([data-bs-bereit]) .bs-unten{ display:none; }
@media (prefers-reduced-motion:reduce){
  .bs-fenster{ transition:none !important; }
  .bs-oeffnen:hover{ transform:none; }
}
.bs-weiter{ margin-top:18px !important; }
.bs-weiter a{ font-size:12.5px; color:var(--ci-1); border-bottom:1px solid currentColor; }

/* Naturstrom-Hinweis des Hosters. Affiliate-Verweis, deshalb rel="sponsored". */
.fuss-strom{ display:block; margin:18px 0 0; max-width:190px; }
.fuss-strom img{ width:100%; height:auto; display:block; border-radius:4px; opacity:.9; transition:opacity .3s var(--ease); }
.fuss-strom:hover img{ opacity:1; }
@media (hover:none), (pointer:coarse){ .fuss-strom{ min-height:44px; } }

/* =====================================================================
   Werkstatt-Bewegung. Alles hier ist Zugabe: ohne Skript, ohne
   Scroll-Timeline oder mit "weniger Bewegung" steht jeder Inhalt fertig
   da. Bewegt werden nur transform, opacity und clip-path.
   ===================================================================== */
:root{ --ease-aus:cubic-bezier(.23,1,.32,1); }

/* ---- A · Schnittmarken: Ecken wie auf dem Druckbogen ---- */
.schnitt, .schnitt-innen{ position:relative; }
.schnitt::after, .schnitt-innen::after{
  content:''; position:absolute; pointer-events:none; z-index:2;
  --m:rgba(255,255,255,.5); --l:14px;
  background:
    linear-gradient(var(--m),var(--m)) 0 0 / var(--l) 1px,
    linear-gradient(var(--m),var(--m)) 0 0 / 1px var(--l),
    linear-gradient(var(--m),var(--m)) 100% 0 / var(--l) 1px,
    linear-gradient(var(--m),var(--m)) 100% 0 / 1px var(--l),
    linear-gradient(var(--m),var(--m)) 0 100% / var(--l) 1px,
    linear-gradient(var(--m),var(--m)) 0 100% / 1px var(--l),
    linear-gradient(var(--m),var(--m)) 100% 100% / var(--l) 1px,
    linear-gradient(var(--m),var(--m)) 100% 100% / 1px var(--l);
  background-repeat:no-repeat;
}
.schnitt::after{ inset:-12px; }
.schnitt-innen::after{ inset:12px; --m:rgba(255,255,255,.7); }
/* Die Marken ziehen sich beim Einblenden auf ihre Ecken zusammen */
.rv-on .rv.schnitt::after, .rv-on .rv.schnitt-innen::after,
.rv-on .rv .schnitt::after, .rv-on .rv .schnitt-innen::after{
  opacity:0; transform:scale(1.06);
  transition:opacity .5s var(--ease-aus) .25s, transform .7s var(--ease-aus) .25s;
}
.rv-on .rv.in.schnitt::after, .rv-on .rv.in.schnitt-innen::after,
.rv-on .rv.in .schnitt::after, .rv-on .rv.in .schnitt-innen::after{ opacity:1; transform:none; }

/* Schnittmarken auf Wunsch ausgeblendet (06.10.2026) */
.schnitt::after, .schnitt-innen::after{ display:none !important; }

/* ---- Sequenz 3 · Bild wird von unten aufgedeckt ---- */
.rv-on .rv.bild-auf, .rv-on .rv .bild-auf{
  clip-path:inset(0 0 100% 0);
  transition:clip-path .9s var(--ease-aus), opacity 1s var(--ease), transform 1s var(--ease);
}
.rv-on .rv.in.bild-auf, .rv-on .rv.in .bild-auf{ clip-path:inset(0 0 -40px 0); }

/* ---- Sequenz 4 · Plotter-Linie unter Abschnitts-Ueberschriften ---- */
.sk-kopf h2::after, .sk-duo-text h2::after, h2.linie::after, h1.linie::after{
  content:''; display:block; width:56px; height:2px; margin-top:.38em;
  background:var(--rot-hell); transform-origin:0 50%;
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sk-kopf h2::after, .sk-duo-text h2::after, h2.linie::after, h1.linie::after{
      animation:plotter-linie linear both;
      animation-timeline:view(); animation-range:entry 60% cover 40%;
    }
  }
}
@keyframes plotter-linie{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* ---- Sequenz 5 · Preiszeilen und "ab"-Etikett ---- */
.rv-on .rv .preis-zeile{
  opacity:0; transform:translateY(10px);
  transition:opacity .45s var(--ease-aus), transform .55s var(--ease-aus);
  transition-delay:calc(var(--z,0) * 60ms + 150ms);
}
.rv-on .rv .preis-betrag{
  display:inline-block; opacity:0; transform:scale(1.12) rotate(-3deg);
  transition:opacity .2s var(--ease-aus), transform .25s var(--ease-aus);
  transition-delay:calc(var(--z,0) * 60ms + 420ms);
}
.rv-on .rv.in .preis-zeile, .rv-on .rv.in .preis-betrag{ opacity:1; transform:none; }
.preis-zeile:nth-child(2){ --z:1 } .preis-zeile:nth-child(3){ --z:2 }
.preis-zeile:nth-child(4){ --z:3 } .preis-zeile:nth-child(5){ --z:4 }
.preis-zeile:nth-child(6){ --z:5 }

/* ---- Sequenz 1 · Folie wird beim Scrollen aufgezogen ---- */
.af{ position:relative; margin:0; overflow:clip; view-timeline:--af block; background:#111; }
.af{ aspect-ratio:16/9; }
.af img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 62%; }
@media (max-width:700px){ .af{ aspect-ratio:4/3; } }
.af-roh{ filter:grayscale(1) brightness(.55) contrast(1.1); }
/* Echtes Vorher-Foto: ohne Graufilter */
.af-roh.af-echt{ filter:none; }
.af-farbe{ position:absolute; inset:0; height:100% !important; object-fit:cover; }
.af-rakel{ position:absolute; inset:0; pointer-events:none; display:none; }
.af-rakel::before{
  content:''; position:absolute; top:0; bottom:0; right:0; width:2px;
  background:var(--rot-hell); box-shadow:-24px 0 40px rgba(255,255,255,.10);
}
.af-zeile{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:14px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-leise); }
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .af-farbe{ animation:af-auf linear both; animation-timeline:--af; animation-range:cover 22% cover 62%; }
    .af-rakel{ display:block; animation:af-rakel linear both; animation-timeline:--af; animation-range:cover 22% cover 62%; }
  }
}
/* Ersatz per Skript fuer Browser ohne Scroll-Timeline (bewegung.js) */
.af.js-lauf .af-rakel{ display:block; }
@keyframes af-auf{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes af-rakel{
  0%{ transform:translateX(-100%); opacity:0; } 4%{ opacity:1; }
  96%{ opacity:1; } 100%{ transform:translateX(0); opacity:0; }
}

/* ---- B · Passerkreuz und Farbkontrollstreifen vor dem Fuss ---- */
.druckstreifen{ display:flex; align-items:center; gap:18px; height:44px; margin:-28px 0 40px; border-bottom:1px solid rgba(255,255,255,.14); }
.druckstreifen svg{ display:block; height:18px; width:auto; }
.druckstreifen .ds-feld{ display:flex; height:10px; }
.druckstreifen .ds-feld i{ width:22px; height:10px; }
.druckstreifen .ds-text{ margin-left:auto; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.58); white-space:nowrap; }
@media (max-width:560px){ .druckstreifen .ds-text{ display:none; } }

/* ---- C · Links und Knoepfe: Folie zieht von links ein, Druck gibt nach ---- */
.sk-taste, .fuss-knopf, .fuss-alle{ position:relative; display:inline-block; }
.sk-taste::after, .fuss-knopf::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--rot-hell); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .35s var(--ease-aus);
}
@media (hover:hover) and (pointer:fine){
  .sk-taste:hover::after, .fuss-knopf:hover::after{ transform:scaleX(1); }
}
.sk-taste, .fuss-knopf, .fuss-alle, .kn-anfrage, .gz-cta{ transition:transform .16s var(--ease-aus); }
.sk-taste:active, .fuss-knopf:active, .fuss-alle:active, .kn-anfrage:active, .kt-knopf:active, .gz-cta:active{ transform:scale(.97); }

@media (prefers-reduced-motion:reduce){
  .rv-on .rv .preis-zeile, .rv-on .rv .preis-betrag{ opacity:1 !important; transform:none !important; transition:none !important; }
  .rv-on .rv.bild-auf, .rv-on .rv .bild-auf{ clip-path:none !important; }
  .rv-on .rv .schnitt::after, .rv-on .rv.schnitt::after, .rv-on .rv .schnitt-innen::after, .rv-on .rv.schnitt-innen::after{ opacity:1 !important; transform:none !important; }
  .sk-taste::after, .fuss-knopf::after{ transition:none; }
}

/* Touch: groessere Tippflaechen ohne sichtbare Aenderung */
@media (pointer:coarse){
  .kn-anfrage{ padding-top:10px; padding-bottom:10px; margin-top:-10px; margin-bottom:-10px; }
  .fuss-liste{ gap:2px; }
  .fuss-liste a, .fuss-zeile a, .fuss-alle, .fuss-knopf{ display:inline-block; padding-top:8px; padding-bottom:8px; }
  .fuss-recht a{ padding-top:10px; padding-bottom:10px; }
}

/* Wie koennen wir helfen? Weg weiter unter jeder Situation */
.sk-hilfe .sk-schritt h3{ font-size:clamp(19px,1.7vw,24px); line-height:1.15; text-transform:none; letter-spacing:-.01em; }
.sk-hilfe-weg{ display:inline-block; margin-top:16px; padding-bottom:3px; font-size:14px; color:#fff; border-bottom:1px solid rgba(255,255,255,.35); transition:border-color .3s var(--ease); }
.sk-hilfe-weg:hover{ border-color:var(--rot-hell); }
@media (pointer:coarse){ .sk-hilfe-weg{ padding-top:10px; padding-bottom:10px; } }
/* Antwortzeit unter den Knoepfen */
.sk-antwort{ flex-basis:100%; margin-top:-8px; font-size:13px; letter-spacing:.02em; color:rgba(255,255,255,.55); }

/* Kontakt: Ueberschrift "Ihre Agentur, Ihr Ansprechpartner." etwas kleiner,
   damit "Ihr" nicht allein in der Zeile steht */
#anfrage .sk-duo-text{ container-type:inline-size; }
#anfrage .sk-duo-text h2{ font-size:clamp(24px,8.2cqi,56px); text-wrap:wrap; max-width:none; }