:root{
  --ink:#1f2125;
  --black:#0d0f11;
  --surface:#15181b;
  --surface-2:#1b1f23;
  --paper:#f2f1ee;
  --white:#fff;
  --red-deep:#9c0d22;
  --red:#d91433;
  --red-bright:#ef373e;
  --line:rgba(242,241,238,.10);
  --line-2:rgba(242,241,238,.18);
  --line-dark:rgba(31,33,37,.12);
  --txt:rgba(242,241,238,.72);
  --txt-dim:rgba(242,241,238,.52);
  --ff:'Helvetica Neue',Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:var(--ff);background:var(--black);color:var(--paper);overflow-x:hidden;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.02em;line-height:1.06;}
::selection{background:var(--red);color:#fff;}

/* ---------- Kopfzeile ---------- */
.cf-logo{height:19px;width:auto;display:block;color:var(--paper);}
#progress{position:fixed;top:0;left:0;height:2px;width:100%;background:linear-gradient(90deg,var(--red-deep),var(--red),var(--red-bright));transform:scaleX(0);transform-origin:0 50%;will-change:transform;z-index:1000;}
header{position:fixed;top:0;left:0;width:100%;z-index:900;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 5%;border-bottom:1px solid transparent;transition:background .4s ease,border-color .4s ease,padding .4s ease;}
header.scrolled,header.solid{background:rgba(13,15,17,.94);border-bottom-color:var(--line);padding:14px 5%;}
nav{display:flex;gap:30px;margin-left:auto;margin-right:8px;}
nav a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt);position:relative;padding:4px 0;transition:color .25s;}
nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--red-bright);transition:width .3s cubic-bezier(.16,.8,.3,1);}
nav a:hover,nav a.aktiv{color:var(--paper);}
nav a.aktiv::after,nav a:hover::after{width:100%;}
.nav-cta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;border:1px solid var(--line-2);padding:11px 20px;transition:border-color .3s,background .3s,color .3s;white-space:nowrap;}
.nav-cta:hover{border-color:var(--red-bright);background:var(--red-bright);color:#fff;}
.burger{display:none;width:38px;height:38px;border:1px solid var(--line-2);background:none;cursor:pointer;position:relative;}
.burger span{position:absolute;left:11px;width:16px;height:1px;background:var(--paper);transition:transform .3s,opacity .3s;}
.burger span:nth-child(1){top:14px;} .burger span:nth-child(2){top:19px;} .burger span:nth-child(3){top:24px;}
header.menu-open .burger span:nth-child(1){transform:translateY(5px) rotate(45deg);}
header.menu-open .burger span:nth-child(2){opacity:0;}
header.menu-open .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}
.mobile-menu{position:fixed;inset:0;z-index:890;background:rgba(13,15,17,.985);display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 8%;opacity:0;pointer-events:none;transition:opacity .35s ease;}
.mobile-menu.open{opacity:1;pointer-events:auto;}
.mobile-menu a{font-size:26px;font-weight:700;letter-spacing:-.02em;padding:12px 0;border-bottom:1px solid var(--line);}
.mobile-menu a:last-child{border-bottom:0;color:var(--red-bright);font-size:18px;margin-top:16px;}

/* ---------- Bausteine ---------- */
section{position:relative;}
.inner{max-width:1200px;margin:0 auto;padding:120px 5%;}
.inner.eng{max-width:900px;}
.tag{font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:700;color:var(--red-bright);margin-bottom:20px;display:flex;align-items:center;gap:14px;}
.tag::before{content:'';width:26px;height:1px;background:var(--red-bright);}
h2{font-size:clamp(26px,3.6vw,44px);margin-bottom:22px;}
h3{font-size:clamp(19px,2vw,24px);margin-bottom:14px;}
.lede{font-size:clamp(15px,1.5vw,17px);line-height:1.75;color:var(--txt);max-width:680px;}
.lede+.lede{margin-top:18px;}
.lede strong{color:var(--paper);font-weight:700;}
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.16,.8,.3,1),transform .9s cubic-bezier(.16,.8,.3,1);}
.rv.in{opacity:1;transform:none;}
.d1{transition-delay:.09s;} .d2{transition-delay:.18s;} .d3{transition-delay:.27s;}

/* ---------- Seitenkopf Unterseiten ---------- */
.subhead{position:relative;min-height:52vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--surface);}
.subhead-bg{position:absolute;inset:0;z-index:0;}
.subhead-bg img{width:100%;height:100%;object-fit:cover;opacity:.5;}
.subhead-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,15,17,.86) 0%,rgba(13,15,17,.42) 40%,rgba(13,15,17,.94) 100%);}
.subhead .inner{position:relative;z-index:1;padding:180px 5% 64px;width:100%;}
.subhead h1{font-size:clamp(32px,5vw,62px);margin-bottom:18px;}
.krumen{font-size:12px;letter-spacing:.1em;color:var(--txt-dim);margin-bottom:22px;}
.krumen a:hover{color:var(--paper);}

/* ---------- Bildraster ---------- */
.raster{display:grid;gap:18px;}
.r2{grid-template-columns:repeat(2,1fr);}
.r3{grid-template-columns:repeat(3,1fr);}
.r-gross{grid-template-columns:1.5fr 1fr;}
.bild{position:relative;overflow:hidden;background:var(--surface-2);}
.bild img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,.8,.3,1);}
.bild.hoch{aspect-ratio:3/4;} .bild.quer{aspect-ratio:4/3;} .bild.breit{aspect-ratio:16/9;} .bild.panorama{aspect-ratio:21/9;}
.bild:hover img{transform:scale(1.05);}
.bild figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 22px 18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;background:linear-gradient(180deg,transparent,rgba(13,15,17,.92));}
.bild figcaption span{display:block;margin-top:6px;font-size:12px;letter-spacing:.01em;text-transform:none;font-weight:400;color:var(--txt-dim);}

/* Der Rechtehinweis sitzt grundsaetzlich oben rechts. Unten laeuft ueber die
   ganze Bildbreite das Band mit der Bildunterschrift, dort wuerden sich beide
   je nach Bildschirmbreite und Laenge der Unterschrift ins Gehege kommen. */
.bild .credit{position:absolute;right:14px;top:14px;z-index:2;font-size:10px;letter-spacing:.06em;color:rgba(242,241,238,.6);background:rgba(13,15,17,.6);padding:5px 9px;pointer-events:none;}

/* ---------- Prozess mit Bildern ---------- */
.schritte{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:52px;}
.schritt{position:relative;overflow:hidden;background:var(--surface-2);}
.schritt .ph{aspect-ratio:16/10;overflow:hidden;}
.schritt .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,.8,.3,1);}
.schritt:hover .ph img{transform:scale(1.06);}
.schritt .bd{padding:26px 28px 30px;}
.schritt .n{font-size:11px;letter-spacing:.24em;color:var(--red-bright);font-weight:700;margin-bottom:14px;}
.schritt h3{font-size:20px;margin-bottom:10px;}
.schritt p{font-size:14px;line-height:1.7;color:var(--txt-dim);}

/* ---------- Listen ---------- */
.liste{list-style:none;margin-top:26px;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);}
.liste li{background:var(--surface-2);padding:16px 20px;font-size:15px;display:flex;align-items:center;gap:14px;}
.liste li::before{content:'';width:6px;height:6px;background:var(--red-bright);flex:none;}
.liste.zwei{grid-template-columns:1fr 1fr;}
.chips{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px;}
.chips span{font-size:12px;letter-spacing:.06em;color:var(--txt);border:1px solid var(--line);padding:9px 16px;}

/* ---------- Marken-Laufband ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;margin:44px 0 52px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.track{display:flex;gap:56px;white-space:nowrap;width:max-content;animation:mv 46s linear infinite;will-change:transform;}
.track span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-dim);font-weight:700;}
@keyframes mv{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}

/* ---------- Produktkarten ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.gcard{background:var(--paper);overflow:hidden;transition:transform .45s cubic-bezier(.16,.8,.3,1);cursor:pointer;}
.gcard:hover{transform:translateY(-4px);}
.gcard:focus-visible{outline:2px solid var(--red-bright);outline-offset:3px;}
.gcard .ph{aspect-ratio:3/2;overflow:hidden;position:relative;}
.gcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,.8,.3,1);}
.gcard:hover .ph img{transform:scale(1.05);}
.gcard .cap{padding:16px 18px 18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink);border-top:1px solid var(--line-dark);}
.gcard .cap span{display:block;margin-top:6px;font-size:12px;letter-spacing:.02em;text-transform:none;font-weight:400;color:rgba(31,33,37,.6);}
.gcard .zoom{position:absolute;right:12px;top:12px;display:flex;align-items:center;gap:7px;padding:7px 12px;background:rgba(13,15,17,.78);color:var(--paper);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .3s ease;}
.gcard:hover .zoom,.gcard:focus-visible .zoom{opacity:1;transform:none;}
.gcard .zoom i{width:13px;height:13px;border:1.5px solid currentColor;border-radius:50%;position:relative;display:block;}
.gcard .zoom i::after{content:'';position:absolute;right:-5px;bottom:-5px;width:6px;height:1.5px;background:currentColor;transform:rotate(45deg);}
.gal-src{display:none;}
.gal-hinweis{margin-top:20px;font-size:13px;color:var(--txt-dim);}

/* ---------- Bildbetrachter ---------- */
.lb{position:fixed;inset:0;z-index:1200;background:rgba(9,10,12,.97);display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .32s ease;}
.lb.auf{opacity:1;pointer-events:auto;}
.lb-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:70px 76px 12px;min-height:0;}
.lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;opacity:0;transition:opacity .25s ease;}
.lb-stage img.da{opacity:1;}
.lb-close,.lb-prev,.lb-next{position:absolute;border:1px solid var(--line-2);background:rgba(13,15,17,.7);width:46px;height:46px;cursor:pointer;transition:background .25s,border-color .25s;}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:var(--red);border-color:var(--red);}
.lb-close{top:22px;right:22px;}
.lb-close::before,.lb-close::after{content:'';position:absolute;left:50%;top:50%;width:17px;height:1.5px;background:var(--paper);margin:-1px 0 0 -8.5px;}
.lb-close::before{transform:rotate(45deg);} .lb-close::after{transform:rotate(-45deg);}
.lb-prev{left:18px;top:50%;margin-top:-23px;} .lb-next{right:18px;top:50%;margin-top:-23px;}
.lb-prev::before,.lb-next::before{content:'';position:absolute;left:50%;top:50%;width:10px;height:10px;border-left:1.5px solid var(--paper);border-bottom:1.5px solid var(--paper);}
.lb-prev::before{transform:translate(-30%,-50%) rotate(45deg);} .lb-next::before{transform:translate(-70%,-50%) rotate(-135deg);}
.lb-bar{padding:0 5% 26px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.lb-info b{display:block;font-size:16px;font-weight:700;}
.lb-info span{display:block;font-size:13px;color:var(--txt-dim);margin-top:4px;}
.lb-thumbs{display:flex;gap:9px;flex-wrap:wrap;}
.lb-thumbs button{width:74px;height:50px;padding:0;border:1px solid var(--line);background:#000;cursor:pointer;overflow:hidden;opacity:.5;transition:opacity .25s,border-color .25s;}
.lb-thumbs button.on{opacity:1;border-color:var(--red-bright);}
.lb-thumbs img{width:100%;height:100%;object-fit:cover;}
.lb-count{font-size:12px;letter-spacing:.14em;color:var(--txt-dim);}

/* ---------- Film ---------- */
.film{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;border:1px solid var(--line);margin-top:44px;}
.film video{width:100%;height:100%;display:block;object-fit:cover;background:#000;}
.film-play{position:absolute;inset:0;border:0;padding:0;background:rgba(13,15,17,.28);cursor:pointer;transition:background .35s ease;}
.film-play::before{content:'';position:absolute;left:50%;top:50%;width:82px;height:82px;margin:-41px 0 0 -41px;border-radius:50%;background:var(--red);box-shadow:0 0 0 1px rgba(242,241,238,.16);transition:transform .35s cubic-bezier(.16,.8,.3,1),background .3s;}
.film-play::after{content:'';position:absolute;left:50%;top:50%;width:0;height:0;transform:translate(-38%,-50%);border-left:23px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent;}
.film-play:hover{background:rgba(13,15,17,.14);}
.film-play:hover::before{transform:scale(1.09);background:var(--red-bright);}
.film.ab .film-play{display:none;}
.film-note{margin-top:18px;font-size:13px;line-height:1.7;color:var(--txt-dim);max-width:640px;}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;transition:background .3s,border-color .3s,color .3s,transform .3s;}
.btn-primary{background:var(--red);color:#fff;}
.btn-primary:hover{background:var(--red-bright);transform:translateY(-2px);}
.btn-ghost{border:1px solid var(--line-2);color:var(--paper);}
.btn-ghost:hover{border-color:var(--paper);background:rgba(242,241,238,.06);}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px;}

/* ---------- Weiterführende Kacheln ---------- */
.weiter{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;}
.wkachel{position:relative;overflow:hidden;aspect-ratio:4/3;display:block;}
.wkachel img{width:100%;height:100%;object-fit:cover;opacity:.62;transition:transform 1s cubic-bezier(.16,.8,.3,1),opacity .4s;}
.wkachel:hover img{transform:scale(1.06);opacity:.8;}
.wkachel::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,15,17,.2),rgba(13,15,17,.88));}
.wkachel b{position:absolute;left:24px;bottom:22px;z-index:2;font-size:19px;font-weight:700;}
.wkachel i{position:absolute;left:24px;bottom:0;z-index:2;font-style:normal;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--red-bright);opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s;}
.wkachel:hover i{opacity:1;transform:translateY(-4px);}
.wkachel:hover b{transform:translateY(-16px);transition:transform .35s;}

/* ---------- Kontakt / Fuß ---------- */
.contact{background:var(--surface);text-align:center;}
.contact .inner{padding:120px 5%;display:flex;flex-direction:column;align-items:center;}
.contact .tag{justify-content:center;}
.contact h2{max-width:800px;}
.contact p{font-size:clamp(15px,1.5vw,17px);line-height:1.75;color:var(--txt);max-width:620px;margin:0 0 34px;}
.mailbtn{font-size:clamp(15px,2.2vw,22px);letter-spacing:.01em;text-transform:none;padding:20px 40px;}
.cmeta{margin-top:32px;display:flex;gap:14px 40px;flex-wrap:wrap;justify-content:center;font-size:14px;color:var(--txt-dim);}
.cmeta a:hover{color:var(--paper);}
footer{background:var(--black);border-top:1px solid var(--line);padding:56px 5% 40px;}
.fin{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:44px;}
.fin .cf-logo{height:17px;margin-bottom:18px;}
.fcol h5{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--txt-dim);margin-bottom:16px;font-weight:700;}
.fcol p,.fcol a{display:block;font-size:14px;line-height:1.8;color:var(--txt);}
.fcol a:hover{color:var(--paper);}
.fbot{max-width:1200px;margin:44px auto 0;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--txt-dim);}
.fbot .lk{display:flex;gap:24px;}

/* ---------- Rechtstexte ---------- */
.recht h2{font-size:clamp(20px,2.2vw,26px);margin:44px 0 14px;}
.recht h3{font-size:17px;margin:28px 0 10px;}
.recht p,.recht li{font-size:15px;line-height:1.8;color:var(--txt);}
.recht ul{margin:12px 0 12px 20px;}
.recht a{color:var(--red-bright);}
.recht a:hover{text-decoration:underline;}
.recht ul li{list-style:disc;margin-bottom:4px;}
/* Der Wortlaut der Kanzlei, unveraendert uebernommen. Nur die Darstellung
   wird hier an das uebrige Erscheinungsbild angepasst. */
.recht .kanzlei b{color:var(--paper);font-weight:700;}
.recht .kanzlei > div{font-size:15px;line-height:1.9;color:var(--txt);}
.recht .kanzlei h2:first-child{margin-top:0;}
.recht .quelle{margin-top:52px;padding-top:18px;border-top:1px solid var(--line);
  font-size:12px;color:var(--txt-dim);}
/* Der Hinweis auf das Widerspruchsrecht muss laut Art. 21 Abs. 4 DSGVO
   getrennt von den uebrigen Angaben stehen. Die Kanzlei loest das mit
   Grossbuchstaben. Damit der Block lesbar bleibt und nicht wie ein Versehen
   aussieht, bekommt er einen eigenen Rahmen und etwas kleinere, luftigere
   Schrift. Am Wortlaut aendert sich nichts. */
.recht .hervor{font-size:13.5px;line-height:2;letter-spacing:.02em;
  color:var(--txt);background:var(--surface-2);border-left:2px solid var(--red);
  padding:16px 20px;margin:14px 0;}
.recht .hervor + .hervor{margin-top:-6px;}


/* ---------- Facebook-Knopf ---------- */
.fb-btn{position:fixed;right:22px;bottom:22px;z-index:700;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);background:rgba(13,15,17,.88);color:var(--txt);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:color .28s ease,border-color .28s ease,background .28s ease,transform .28s cubic-bezier(.16,.8,.3,1);}
.fb-btn:hover,.fb-btn:focus-visible{color:#fff;background:var(--red);border-color:var(--red);transform:translateY(-3px);}
.fb-btn:focus-visible{outline:2px solid var(--red-bright);outline-offset:3px;}

@media(max-width:1000px){
  .r3,.gallery,.weiter{grid-template-columns:1fr 1fr;}
  .r-gross{grid-template-columns:1fr;}
  .fin{grid-template-columns:1fr 1fr;}
}
@media(max-width:700px){
  .fb-btn{right:14px;bottom:14px;width:42px;height:42px;}
  nav,.nav-cta{display:none;}
  .burger{display:block;}
  header{padding:16px 5%;} header.scrolled,header.solid{padding:12px 5%;}
  .inner{padding:70px 6%;}
  .subhead .inner{padding:130px 6% 48px;}
  .subhead{min-height:44vh;}
  .r2,.r3,.gallery,.weiter,.schritte,.liste.zwei{grid-template-columns:1fr;}
  .lb-stage{padding:64px 12px 8px;}
  .lb-prev,.lb-next{width:40px;height:40px;top:auto;bottom:120px;margin-top:0;}
  .lb-bar{padding:0 5% 20px;justify-content:center;text-align:center;}
  .lb-thumbs{order:3;justify-content:center;} .lb-info{order:1;width:100%;} .lb-count{order:2;width:100%;}
  .fin{grid-template-columns:1fr;gap:32px;}
  .fbot{flex-direction:column;}
  /* Links in der Fusszeile sind mit dem Finger sonst schwer zu treffen.
     Mehr Hoehe, ohne dass sich am Aussehen etwas aendert. */
  .fbot .lk{gap:8px;}
  .fbot .lk a,.fcol a,.cmeta a{padding:9px 0;min-height:24px;}
  .fcol p,.fcol a{line-height:1.9;}
  .cmeta{flex-direction:column;gap:10px;}
  .track{gap:40px;}
  .bild .credit{top:10px;right:10px;font-size:9px;padding:4px 7px;}
}
/* Wer im Betriebssystem "Bewegung reduzieren" eingeschaltet hat, bekommt eine
   ruhige Seite. Wichtig: Endlosanimationen muessen angehalten und nicht nur
   verkuerzt werden. Eine Dauer von 0,001s bei unendlicher Wiederholung ergibt
   sonst tausend Durchlaeufe pro Sekunde, das Markenband raste dann durchs Bild. */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important;
    transition-duration:.001s!important;}
  .hero-bg img{animation:none!important;}
  .rv{opacity:1;transform:none;}
  /* Ausnahme auf Wunsch des Auftraggebers: Das Markenband soll auch dann
     laufen, wenn im Geraet "Bewegung reduzieren" eingeschaltet ist. Alle
     uebrigen Bewegungen der Seite bleiben in diesem Fall aus. */
  .track{animation:mv 46s linear infinite!important;}
}