/* ===========================================================================
   IS-Design — Spanndecken & Beleuchtung · hell, mobile-first
   Weißer Grund, fast schwarze Schrift (maximale Lesbarkeit). Warmweiße
   LED-Akzente als Leitmotiv; Gold nur als Fläche/Leuchten, als Text das
   dunklere Bernstein (--accent), damit es auf Weiß lesbar bleibt.
   ========================================================================= */

:root{
  color-scheme: light;
  --bg:        #ffffff;
  --bg-soft:   #f7f6f3;   /* ruhige Wechselfläche */
  --surface:   #ffffff;
  --surface-2: #f7f6f3;

  --fg:    #141310;       /* fast schwarz — Fließtext/Überschriften */
  --muted: #514c44;       /* Nebentext, ~8:1 auf Weiß */
  --faint: #6b665c;       /* kleine Labels, ~5.5:1 auf Weiß */
  --line:   rgba(20,19,16,.10);
  --line-2: rgba(20,19,16,.20);
  --shadow: 0 1px 2px rgba(20,19,16,.04), 0 14px 34px -22px rgba(20,19,16,.22);

  --led:  #f7cf8a;                 /* warmes Gold — nur als Fläche/Leuchten */
  --glow: 247, 207, 138;           /* rgb für Glow */
  --accent: #8a5a14;               /* Bernstein als Text-/Linkfarbe auf Weiß (~6:1) */

  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --wrap: 1200px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:16px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  position:relative;
}
main{ position:relative; z-index:1; }
.foot{ position:relative; z-index:1; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
em{ font-style:italic; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:22px; }
@media(min-width:768px){ .wrap{ padding-inline:40px; } }

h1,h2,h3{ font-family:var(--font-display); font-weight:400; line-height:1.05; letter-spacing:-.015em; text-wrap:balance; }
.dim{ color:var(--muted); }

/* Ambient */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 60% at 80% -5%, rgba(var(--glow),.05), transparent 60%);
}

/* ---------- Feines Korn für Atmosphäre (statt Seiten-Lichter) ---------- */
body::after{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.02;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Navigation ---------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:100; transition:background .2s var(--ease); }
.nav.is-stuck{ background:color-mix(in oklab, var(--bg), transparent 10%); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.nav__row{ display:flex; align-items:center; justify-content:space-between; height:84px; }
.brand__logo{ height:46px; width:auto; }
@media(min-width:768px){ .nav__row{ height:92px; } .brand__logo{ height:52px; } }
.nav__toggle{ display:flex; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center; }
.nav__toggle span{ width:22px; height:2px; background:var(--fg); transition:.3s var(--ease); }
.nav.is-open .nav__toggle span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav.is-open .nav__toggle span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }
.nav__links{ position:fixed; inset:84px 0 auto 0; flex-direction:column; align-items:stretch;
  display:flex; gap:2px; padding:14px 22px 26px; background:color-mix(in oklab, var(--bg), transparent 2%); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-12px);
  transition:opacity .3s var(--ease), transform .35s var(--ease), visibility 0s .35s; }
.nav__links.is-open{ opacity:1; visibility:visible; pointer-events:auto; transform:none;
  transition:opacity .3s var(--ease), transform .35s var(--ease); }
@media(min-width:768px){ .nav__links{ inset:92px 0 auto 0; } }
.nav__links a{ padding:14px 6px; font-size:1.05rem; font-weight:500; color:var(--muted); }
.nav__links a:hover,.nav__links a:active,.nav__links a[aria-current="page"]{ color:var(--fg); }
.nav__cta{ margin-top:10px; text-align:center; color:#1a150c !important; background:var(--led); border-radius:100px; font-weight:600; }
@media(min-width:900px){
  .nav__toggle{ display:none; }
  .nav__links{ position:static; flex-direction:row; align-items:center; gap:4px; padding:0;
    background:none; backdrop-filter:none; border:none; transform:none;
    opacity:1; visibility:visible; pointer-events:auto; transition:none; }
  .nav__links a{ padding:9px 14px; font-size:.94rem; border-radius:100px; }
  .nav__cta{ margin:0 0 0 8px; padding:9px 18px; }
}

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; text-align:center; white-space:nowrap;
  padding:14px 24px; border-radius:100px; font-weight:600; font-size:.95rem;
  transition:transform .2s var(--ease), box-shadow .3s, background .2s, border-color .2s; }
/* Dunkler Button, dessen Schrift warm leuchtet — wie ein Lichtelement */
.btn--solid{ background:#17130d; color:var(--led); border:1px solid #17130d;
  box-shadow:0 10px 26px -14px rgba(20,19,16,.55), inset 0 0 22px -14px rgba(var(--glow),.9); }
.btn--solid:hover{ background:#26201a; transform:translateY(-2px);
  box-shadow:0 16px 34px -16px rgba(20,19,16,.6), inset 0 0 26px -12px rgba(var(--glow),1); }
.btn--ghost{ border:1px solid var(--line-2); color:var(--fg); background:var(--surface); }
.btn--ghost:hover{ border-color:var(--fg); }
.btn--block{ width:100%; }

.eyebrow{ font-family:var(--font-mono); font-size:.72rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  display:inline-flex; align-items:center; gap:9px; }
.eyebrow::before{ content:''; width:26px; height:1px; background:linear-gradient(90deg, rgb(var(--glow)), rgba(var(--glow),0)); box-shadow:0 0 8px rgba(var(--glow),.7); }

/* ---------- Section-Header ---------- */
.section{ position:relative; padding:78px 0; }
@media(min-width:768px){ .section{ padding:120px 0; } }
/* Sektion leuchtet beim Reinscrollen auf */
.section::before{ content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(94%,1000px); height:160px; pointer-events:none; opacity:0; transition:opacity 1.2s var(--ease);
  background:radial-gradient(58% 100% at 50% 0%, rgba(var(--glow),.10), transparent 72%); }
.section.is-lit::before{ opacity:1; }
.shead{ margin-bottom:38px; }
.shead__k{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:.74rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:16px; }
.shead__k::before{ content:''; width:8px; height:8px; border-radius:50%; background:rgb(var(--glow)); box-shadow:0 0 10px 1px rgba(var(--glow),.9); }
.shead h2{ font-size:clamp(2rem,7vw,3.4rem); }
.shead__sub{ color:var(--muted); margin-top:12px; font-size:1.05rem; max-width:46ch; }

/* ===========================================================================
   HERO
   ========================================================================= */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; }
.hero__bloom{ position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(80% 55% at 78% 8%, rgba(var(--glow),.16), transparent 62%),
    radial-gradient(60% 40% at 12% 96%, rgba(var(--glow),.06), transparent 60%); }
.hero__inner{ position:relative; padding-block:120px 70px; display:grid; grid-template-columns:1fr; gap:34px; align-items:center; }
@media(min-width:900px){ .hero__inner{ grid-template-columns:1.05fr .92fr; gap:54px; padding-block:132px 96px; } }
.hero__media{ position:relative; margin:0; }
.hero__media-img{ width:100%; aspect-ratio:16/11; border-radius:18px; background:#1a1611 center/cover no-repeat;
  background-image:url('../assets/hero.jpg'); border:1px solid var(--line);
  box-shadow:0 40px 80px -50px rgba(20,19,16,.55); }
@media(min-width:900px){ .hero__media-img{ aspect-ratio:4/5; max-height:72vh; } }
.hero__title{ font-size:clamp(2.6rem,9vw,5.4rem); line-height:1; letter-spacing:-.03em; margin-top:20px; }
.hero__title em{ color:color-mix(in oklab, var(--fg), var(--muted)); }
.rotator{ display:inline-block; transition:opacity .4s var(--ease), transform .4s var(--ease); }
.rotator.swap{ opacity:0; transform:translateY(10px); filter:blur(4px); }
.hero__sub{ font-size:clamp(1rem,4.5vw,1.28rem); color:var(--muted); max-width:34ch; margin-top:22px; }
.hero__actions{ display:flex; flex-direction:column; gap:12px; margin-top:34px; }
.hero__actions .btn{ width:100%; }
@media(min-width:560px){ .hero__actions{ flex-direction:row; } .hero__actions .btn{ width:auto; } }
/* Mobil: Hero-Text zentriert */
@media(max-width:760px){
  .hero__text{ text-align:center; }
  .eyebrow{ justify-content:center; }
  .hero__sub{ margin-inline:auto; }
  .hero__actions{ align-items:center; }
}

/* ===========================================================================
   STATEMENT
   ========================================================================= */
.statement{ padding:60px 0; }
@media(min-width:768px){ .statement{ padding:90px 0; } }
.ledline{ height:2px; width:100%; max-width:340px; margin-bottom:34px; position:relative;
  background:linear-gradient(90deg, rgba(var(--glow),1), transparent); }
.ledline span{ position:absolute; left:0; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%;
  background:var(--led); box-shadow:0 0 12px 3px rgba(var(--glow),.9); }
.ledline--c{ margin-inline:auto; background:linear-gradient(90deg, transparent, rgba(var(--glow),1), transparent); }
.ledline--c span{ left:50%; margin-left:-4.5px; }
.statement h2{ font-size:clamp(1.7rem,5.4vw,2.8rem); line-height:1.12; }
.stats{ display:flex; flex-wrap:wrap; gap:26px 42px; margin-top:40px; }
.stat b{ display:block; font-family:var(--font-display); font-size:clamp(1.5rem,6vw,2.2rem); color:var(--fg); }
.stat span{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.02em; color:var(--muted); }

/* ===========================================================================
   LEISTUNGEN
   ========================================================================= */
.cards{ display:grid; grid-template-columns:1fr; gap:14px; }
@media(min-width:760px){ .cards{ grid-template-columns:repeat(3,1fr); gap:20px; } }
/* Mobil: Karten nehmen mehr Fahrt auf (jede geht einzeln an, wenn man sie erreicht) */
@media(max-width:760px){ .card.reveal:not(.is-in){ transform:translateY(38px) scale(.965); } }
.card{ position:relative; padding:34px 26px 32px; border-radius:16px; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s; }
/* Aufleuchtende LED-Linie oben — zeichnet sich beim Sichtbarwerden */
.card__led{ position:absolute; top:0; left:26px; right:26px; height:2px; transform-origin:left; transform:scaleX(0);
  background:linear-gradient(90deg, rgb(var(--glow)), rgba(var(--glow),0));
  box-shadow:0 0 12px rgba(var(--glow),.6); border-radius:2px; }
.card::after{ content:''; position:absolute; top:-34%; left:0; right:0; height:70%; pointer-events:none; opacity:0;
  background:radial-gradient(62% 100% at 32% 0%, rgba(var(--glow),.13), transparent 72%); transition:opacity 1s var(--ease) .1s; }
.card.is-in::after{ opacity:.5; }
.card.is-in .card__led{ transform:scaleX(1); transition:transform 1s var(--ease) .12s; }
.card:hover{ transform:translateY(-5px); border-color:var(--line-2); box-shadow:0 1px 2px rgba(20,19,16,.05), 0 22px 44px -24px rgba(20,19,16,.3); }
.card:hover .card__led{ box-shadow:0 0 22px rgba(var(--glow),.9); }
.card__no{ display:block; font-family:var(--font-display); font-size:.92rem; letter-spacing:.06em;
  color:var(--accent); margin-bottom:12px; }
.card h3{ font-size:1.5rem; margin-bottom:10px; }
.card p{ color:var(--muted); font-size:.98rem; }

/* ===========================================================================
   ABLAUF — Licht-Linien-Timeline: die LED-Linie zieht sich, Schritte gehen
   nacheinander an (wie ein LED-Streifen, der segmentweise einschaltet)
   ========================================================================= */
.flow{ position:relative; display:grid; grid-template-columns:1fr; gap:0; }
/* die durchgehende (dimme) Linie + der helle Fortschritt (scroll-gekoppelt) —
   Position/Länge zwischen erstem und letztem Node wird per JS exakt gesetzt */
.flow__line{ position:absolute; z-index:0; background:rgba(20,19,16,.08); border-radius:3px; overflow:hidden;
  left:31px; top:26px; width:2px; height:0; }
.flow__fill{ position:absolute; inset:0; transform-origin:top center; transform:scaleY(var(--p,0));
  background:linear-gradient(180deg, rgba(var(--glow),.4), rgb(var(--glow)));
  box-shadow:0 0 14px rgba(var(--glow),.75); transition:transform .12s linear; }

.flow__step{ position:relative; z-index:1; display:grid; grid-template-columns:64px 1fr; gap:20px;
  align-items:start; padding:14px 0 26px; opacity:.42; transition:opacity .5s var(--ease); }
.flow__step.is-on{ opacity:1; }
.flow__node{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--surface); border:1px solid var(--line-2); color:var(--faint);
  font-family:var(--font-mono); font-size:.9rem; letter-spacing:.01em;
  transition:color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease); }
.flow__step.is-on .flow__node{ color:var(--accent); border-color:rgb(var(--glow));
  box-shadow:0 0 0 5px rgba(var(--glow),.22), 0 0 22px -6px rgba(var(--glow),.9); }
.flow__step h3{ font-size:1.34rem; margin:12px 0 9px; }
.flow__step p{ color:var(--muted); font-size:.96rem; }

@media(min-width:820px){
  .flow{ grid-template-columns:repeat(4,1fr); column-gap:22px; padding-top:4px; }
  .flow__line{ top:38px; left:0; width:0; height:2px; }
  .flow__fill{ transform-origin:left center; transform:scaleX(var(--p,0));
    background:linear-gradient(90deg, rgba(var(--glow),.4), rgb(var(--glow))); }
  .flow__step{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:0; padding:0 8px; }
  .flow__node{ margin-bottom:22px; }
  .flow__step h3{ margin-top:0; }
  .flow__step p{ max-width:30ch; }
}

/* ===========================================================================
   GALERIE (editorial)
   ========================================================================= */
/* Kinoreife Referenzen: Bild im echten Format, Titel als Overlay, aufleuchtende Linie */
.gal{ display:flex; flex-direction:column; gap:26px; max-width:1000px; margin-inline:auto; }
.gal__item{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 30px 60px -40px rgba(20,19,16,.45); }
.gal__media{ width:100%; aspect-ratio:16/10; background:#17140e center/cover no-repeat;
  background-image:linear-gradient(160deg,#d6cfc2,#8c8373); transition:transform .7s var(--ease); }
.gal__item:hover .gal__media{ transform:scale(1.035); }
.gal__item::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 42%, rgba(6,5,4,.86)); }
.gal__no{ position:absolute; top:16px; left:20px; z-index:3; font-family:var(--font-display); font-size:1rem;
  letter-spacing:.16em; color:#fff; opacity:.78; text-shadow:0 1px 12px rgba(0,0,0,.9); }
.gal__led{ position:absolute; left:22px; bottom:82px; z-index:3; height:2px; width:70px; transform-origin:left; transform:scaleX(0);
  background:rgb(var(--glow)); box-shadow:0 0 14px rgba(var(--glow),.9); }
.gal__item.is-in .gal__led{ transform:scaleX(1); transition:transform 1.1s var(--ease) .25s; }
.gal figcaption{ position:absolute; left:22px; right:22px; bottom:22px; z-index:3; }
.gal figcaption b{ display:block; font-family:var(--font-display); font-size:clamp(1.5rem,3.6vw,2.1rem); font-weight:500;
  color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.7); }
.gal figcaption span{ display:block; font-size:.92rem; color:rgba(243,237,226,.82); margin-top:5px; }

/* Bento-Anordnung der Referenzen */
.gal[data-bento]{ display:grid; grid-template-columns:1fr; gap:14px; max-width:1080px; }
.gal[data-bento] .gal__media{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; }
.gal[data-bento] .gal__item{ min-height:230px; }
@media(min-width:720px){
  .gal[data-bento]{ grid-template-columns:repeat(6,1fr); grid-auto-rows:184px; gap:16px; }
  .gal[data-bento] .gal__item{ min-height:0; }
  .gal[data-bento] .gal__item:nth-child(1){ grid-column:span 4; grid-row:span 2; }
  .gal[data-bento] .gal__item:nth-child(2){ grid-column:span 2; grid-row:span 2; }
  .gal[data-bento] .gal__item:nth-child(3){ grid-column:span 3; }
  .gal[data-bento] .gal__item:nth-child(4){ grid-column:span 3; }
}
/* LED-Linie im Bento unter die Nummer setzen (nicht durch den Titel) */
.gal[data-bento] .gal__led{ top:50px; left:22px; bottom:auto; width:52px; }

/* ===========================================================================
   KONFIGURATOR — perspektivischer Raum (One-Point-3D)
   ========================================================================= */
#konfigurator .wrap{ max-width:1440px; }
.konf__grid{ display:grid; grid-template-columns:1fr; gap:20px; }
@media(min-width:940px){ .konf__grid{ grid-template-columns:2.1fr .8fr; gap:34px; align-items:stretch; } }

/* Echter 3D-Raum (WebGL) — großer Bildschirm */
.stage{ position:relative; border-radius:18px; overflow:hidden; border:1px solid rgba(255,238,214,.14);
  background:#060504; box-shadow:0 36px 70px -44px rgba(20,19,16,.6); }
.room3d{ width:100%; aspect-ratio:16/10; display:block; touch-action:none; cursor:grab; }
@media(min-width:940px){ .ctrls{ justify-content:center; } }
.room3d:active{ cursor:grabbing; }
.room3d canvas{ display:block; width:100% !important; height:100% !important; }
.room3d--fallback{ background:#0b0a07 center/cover no-repeat; background-image:linear-gradient(160deg,#221d15,#0b0a07); }
.stage__tag{ position:absolute; left:14px; bottom:12px; z-index:2; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.02em;
  color:#ffd6a0; text-shadow:0 0 12px rgba(255,190,120,.6); pointer-events:none; }
.stage__hint{ position:absolute; right:14px; bottom:12px; z-index:2; font-size:.72rem; color:rgba(243,237,226,.6);
  pointer-events:none; opacity:.85; transition:opacity .4s; }
.room3d-ready .stage__hint{ animation:hintFade 4s var(--ease) forwards; }
@keyframes hintFade{ 0%,60%{opacity:.85} 100%{opacity:0} }

/* Steuerung */
.ctrls{ display:flex; flex-direction:column; gap:22px; }
.ctrl__lab{ display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-family:var(--font-mono); font-size:.72rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.ctrl__lab em{ font-family:var(--font-display); font-style:normal; font-size:.98rem; letter-spacing:0;
  text-transform:none; color:var(--accent); }
.seg{ display:flex; gap:6px; }
.seg__b{ flex:1; padding:11px 8px; border-radius:11px; border:1px solid var(--line-2); background:var(--surface); font-size:.85rem;
  font-weight:500; color:var(--muted); transition:.18s var(--ease); }
.seg__b:hover{ color:var(--fg); border-color:var(--line-2); }
.seg__b.is-on{ color:#1a150c; background:var(--led); border-color:transparent; }
.rng{ -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:4px; outline:none;
  background:linear-gradient(90deg, rgba(var(--glow),.9), var(--line-2)); }
.rng--temp{ background:linear-gradient(90deg,#ff9a3d,#ffd9a0 50%,#cfe0ff); }
.rng::-webkit-slider-thumb{ -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:#fff;
  cursor:pointer; box-shadow:0 0 0 4px rgba(var(--glow),.25), 0 0 16px rgba(var(--glow),.8); }
.rng::-moz-range-thumb{ width:24px; height:24px; border:none; border-radius:50%; background:#fff; cursor:pointer;
  box-shadow:0 0 0 4px rgba(var(--glow),.25), 0 0 16px rgba(var(--glow),.8); }

/* ===========================================================================
   KONTAKT + FOOTER
   ========================================================================= */
.kontakt{ text-align:center; }
.kontakt__inner{ max-width:640px; margin-inline:auto; }
.kontakt h2{ font-size:clamp(2rem,7vw,3.6rem); }
.kontakt p{ color:var(--muted); margin-top:16px; font-size:1.08rem; }
.kontakt__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px; }
.kontakt__actions .btn{ flex:1 1 auto; }
@media(min-width:560px){ .kontakt__actions .btn{ flex:0 0 auto; } }

.foot{ border-top:1px solid var(--line); padding:40px 0; }
.foot__row{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; }
.foot__logo{ height:30px; }
.foot__tag{ color:var(--muted); font-size:.9rem; }
.foot__links{ display:flex; flex-wrap:wrap; gap:10px 16px; }
.foot__links a{ color:var(--muted); font-size:.85rem; }
.foot__links a:hover{ color:var(--accent); }
.foot__legal{ color:var(--faint); font-size:.8rem; width:100%; }
@media(min-width:768px){ .foot__legal{ width:auto; margin-left:auto; } }

/* ---------- Rechtsseiten (Impressum / Datenschutz) ---------- */
.legal{ max-width:760px; margin-inline:auto; padding:130px 22px 90px; }
@media(min-width:768px){ .legal{ padding-top:160px; } }
.legal h1{ font-size:clamp(2rem,6vw,3rem); }
.legal__sub{ color:var(--muted); margin-bottom:34px; }
.legal h2{ font-family:var(--font-display); font-size:1.4rem; margin:32px 0 10px; color:var(--fg); }
.legal p,.legal li{ color:var(--muted); line-height:1.7; margin-bottom:12px; }
.legal ul{ padding-left:20px; margin-bottom:12px; }
.legal a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.legal .todo{ display:inline-block; background:rgba(var(--glow),.35); border:1px solid rgba(var(--glow),.8);
  color:var(--fg); padding:1px 8px; border-radius:5px; font-weight:500; }
.legal__note{ margin-top:34px; padding:16px 18px; border:1px dashed var(--line-2); border-radius:10px;
  font-size:.88rem; color:var(--muted); }

/* ===========================================================================
   TERMIN-SEITE (eigenes Formular)
   ========================================================================= */
.termin-page{ min-height:100svh; display:flex; flex-direction:column; }
.termin{ position:relative; padding:130px 0 90px; flex:1; }
@media(min-width:768px){ .termin{ padding:150px 0 110px; } }
.termin__grid{ display:grid; grid-template-columns:1fr; gap:34px; max-width:1020px; margin-inline:auto; }
@media(min-width:900px){ .termin__grid{ grid-template-columns:1.05fr .95fr; gap:56px; align-items:start; } }
.termin__intro .eyebrow{ margin-bottom:14px; }
.termin__intro h1{ font-size:clamp(2.4rem,7vw,3.9rem); line-height:1.02; letter-spacing:-.02em; }
.termin__intro p{ color:var(--muted); margin-top:18px; font-size:1.08rem; max-width:40ch; }
.termin__contact{ margin-top:30px; display:flex; flex-direction:column; gap:12px; }
.termin__contact a{ display:inline-flex; align-items:center; gap:11px; color:var(--fg); font-weight:500; }
.termin__contact a:hover{ color:var(--accent); }
.termin__contact .ic{ color:var(--accent); font-size:1.05rem; width:20px; text-align:center; }

.tform{ display:grid; gap:16px; padding:30px 24px 30px; border-radius:18px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); }
@media(min-width:768px){ .tform{ padding:34px 30px; } }
.field{ display:flex; flex-direction:column; gap:7px; }
.field > span{ font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.field input, .field select, .field textarea{ width:100%; padding:13px 14px; border-radius:11px; border:1px solid var(--line-2);
  background:var(--surface); color:var(--fg); font:inherit; font-size:.98rem; transition:border-color .2s, box-shadow .2s; }
.field input::placeholder, .field textarea::placeholder{ color:var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--glow),.35); }
.field textarea{ resize:vertical; min-height:120px; line-height:1.6; }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:520px){ .field--row{ grid-template-columns:1fr; } }
.tform .btn{ margin-top:4px; }
.tform__note{ font-size:.82rem; color:var(--faint); margin-top:8px; text-align:center; }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; } html{ scroll-behavior:auto; }
  .card.is-in, .card.is-in::after, .card.is-in .card__led{ animation:none; transition:none; }
  .card.is-in::after{ opacity:.55; } .card.is-in .card__led{ transform:scaleX(1); }
  .flow__step{ opacity:1; } .flow__fill{ transition:none; }
}

/* ============================================================
   Website-Ausbau (Startseite + Unterseiten) — neue Bausteine
   ============================================================ */

/* Karten als Links (Leistungen/Teaser) */
a.card{ text-decoration:none; color:inherit; }
.card--wide, .cards--wide .card{ }
@media(min-width:760px){ .cards--wide{ grid-template-columns:repeat(3,1fr); } }
.cards--duo{ grid-template-columns:1fr; }
@media(min-width:760px){ .cards--duo{ grid-template-columns:repeat(2,1fr); } }

/* Schlichte Karte ohne Nummer (Warum IS-Design) */
.card--plain{ padding:28px 24px; }
.card--plain h3{ font-size:1.25rem; margin-bottom:8px; }
.card--plain a{ color:var(--accent); border-bottom:1px solid rgba(138,90,20,.35); }

/* CTA-Karte (Partner/Schulungen) */
.card--cta{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.card--cta .btn{ margin-top:16px; }
.card__more{ display:inline-block; margin-top:14px; font-family:var(--font-mono); font-size:.78rem;
  letter-spacing:.04em; color:var(--accent); opacity:.9; }
a.card:hover .card__more{ opacity:1; }

/* Hero-Slogan (Design-Slogan bleibt als Zusatz) */
.hero__slogan{ display:inline-block; margin-top:6px; font-family:var(--font-display); font-style:italic; color:var(--muted); }

/* Teaser-Bereich (Ausstellung u.a.) */
.teaser__inner{ max-width:820px; }
.teaser__text h2{ font-size:clamp(1.8rem,5vw,2.8rem); margin:10px 0 14px; }
.teaser__text p{ color:var(--muted); font-size:1.05rem; max-width:60ch; }
.teaser__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }

/* Social-Media-Bereich */
.social__row{ display:flex; flex-wrap:wrap; gap:12px; }
.social__link{ display:inline-flex; align-items:center; padding:12px 22px; border-radius:100px;
  border:1px solid var(--line-2); font-family:var(--font-mono); font-size:.82rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--fg); transition:border-color .2s var(--ease), color .2s; }
.social__link:hover{ border-color:var(--accent); color:var(--accent); }

/* Generischer Inhalts-Textblock für Unterseiten */
.prose{ max-width:70ch; color:var(--muted); font-size:1.05rem; line-height:1.75; }
.prose h3{ color:var(--fg); font-size:1.4rem; margin:1.6em 0 .5em; }
.prose ul{ margin:.6em 0 1.2em 1.1em; display:grid; gap:.4em; }
.prose li{ list-style:disc; }
.prose a{ color:var(--accent); border-bottom:1px solid rgba(138,90,20,.35); }

/* Einfacher Seiten-Kopf für Unterseiten */
.pagehead{ padding:130px 0 40px; }
@media(min-width:768px){ .pagehead{ padding:170px 0 56px; } }
.pagehead h1{ font-family:var(--font-display); font-weight:400; font-size:clamp(2.2rem,7vw,3.6rem); line-height:1.05; margin:12px 0 14px; }
.pagehead p{ color:var(--muted); font-size:1.1rem; max-width:62ch; }

/* Formular-Rückmeldung (js/forms.js) */
.cc-note{ margin-top:6px; font-size:.9rem; }
.cc-note[data-state="ok"]{ color:#2f7a3a; }
.cc-note[data-state="err"]{ color:#a4481b; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ============================================================
   Icon-Badges für Karten + etwas mehr Luft (Design-Politur)
   ============================================================ */
.card__icon{ width:46px; height:46px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center;
  background:color-mix(in oklab, var(--led), transparent 70%); border:1px solid rgba(var(--glow),.7);
  color:var(--accent); margin-bottom:18px;
  transition:transform .25s var(--ease), box-shadow .3s; }
.card__icon svg{ width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.card:hover .card__icon, a.card:hover .card__icon{ transform:translateY(-2px); box-shadow:inset 0 0 20px -8px rgba(var(--glow),1), 0 8px 22px -14px rgba(var(--glow),.9); }
.card--plain .card__icon{ margin-bottom:14px; }

/* kompaktere Zielgruppen-Kacheln (viele kleine Karten mit Icon) */
.tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media(min-width:640px){ .tiles{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:960px){ .tiles{ grid-template-columns:repeat(5,1fr); } }
.tile{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:20px 18px; border-radius:14px;
  background:var(--surface-2, color-mix(in oklab, var(--fg), transparent 95%)); border:1px solid var(--line);
  transition:transform .2s var(--ease), border-color .2s; }
.tile:hover{ transform:translateY(-3px); border-color:rgba(var(--glow),.9); }
.tile .card__icon{ margin-bottom:0; width:40px; height:40px; }
.tile span{ font-size:.92rem; font-weight:500; color:var(--fg); line-height:1.3; }

/* mehr Abstand: CTA-Reihen unter Fließtext */
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
@media(min-width:768px){ .cta-row{ margin-top:38px; } }
.card--cta .btn, .card--cta .cta-row{ margin-top:auto; }
.card--cta > p{ margin-bottom:6px; }

/* Seitenkopf: klarer Abstand zwischen Intro-Text und CTA-Button(s) — auf allen Unterseiten */
.pagehead .btn{ margin-top:28px; }
@media(min-width:768px){ .pagehead .btn{ margin-top:34px; } }
/* Partner nutzt bereits .cta-row → dort den Abstand über die Reihe geben, nicht doppelt je Button */
.pagehead .cta-row{ margin-top:28px; }
@media(min-width:768px){ .pagehead .cta-row{ margin-top:34px; } }
.pagehead .cta-row .btn{ margin-top:0; }
/* mehrere Buttons im Kopf: horizontaler Abstand, damit sie nicht kleben */
.pagehead .btn + .btn{ margin-left:12px; }
.pagehead .cta-row .btn + .btn{ margin-left:0; }

/* Abstand: Fließtext direkt nach einem Karten-Raster */
.cards + .prose{ margin-top:28px; }
@media(min-width:768px){ .cards + .prose{ margin-top:36px; } }