/* =============================================================
   bildstelle Designsystem (Single Source)
   Extrahiert aus dem abgenommenen VIVONO-Angebot (2026-06).
   Prinzipien und harte Regeln stehen in rules/bildstelle-design.md,
   diese Datei ist die konkrete Umsetzung (Tokens plus Komponenten).

   Nutzung: diese CSS und die Fonts (fonts/BDOGrotesk-*.woff2) plus
   das Logo (bildstelle-wortmarke.svg) und optional welle.svg in den
   Deploy-Ordner kopieren, im HTML einbinden:
     <link rel="stylesheet" href="bildstelle-ds.css">
   Aendern immer HIER, dann in die Projekte nachkopieren.
   ============================================================= */

/* ---- Schrift (Dateien mitliefern) ---- */
@font-face { font-family:'BDO Grotesk'; src:url('fonts/BDOGrotesk-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'BDO Grotesk'; src:url('fonts/BDOGrotesk-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'BDO Grotesk'; src:url('fonts/BDOGrotesk-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'BDO Grotesk'; src:url('fonts/BDOGrotesk-Black.woff2') format('woff2'); font-weight:900; font-display:swap; }

/* ---- Tokens ---- */
:root{
  /* Farben (Single Source: _Brand-Assets/README.md) */
  --surface:#ffffff; --surface-2:#f6f6f4;
  --border-light:#e6e6e6;
  --text:#051922; --text-sec:#3a5a68; --text-tri:#6b8a96;
  --green:#2cfe99; --green-dim:rgba(44,254,153,0.08); --green-med:rgba(44,254,153,0.2);
  --accent:#051922;
  --amber:#c47d00; --amber-dim:rgba(196,125,0,0.08); /* nur Hinweis-/Achtung-Kaesten */

  /* Form und Mass */
  --radius:12px;
  --wrap:1280px;      /* Dokument-Breite (Angebote, Briefings). Volle Websites: 1440, siehe bildstelle-design.md */
  --nav-h:80px;       /* Offset fuer Sticky-Nav und Anker */

  /* Schrift-Fallback */
  --font:'BDO Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ---- Base ---- */
*{margin:0; padding:0; box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:var(--nav-h)}
body{font-family:var(--font); background:var(--surface-2); color:var(--text); line-height:1.65; -webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}

/* ---- Brand-Band (weisser Kopf mit Logo plus Claim) ---- */
.brand-band{background:#fff; padding:44px 0 40px; border-bottom:1px solid var(--border-light)}
.brand-bar{max-width:var(--wrap); margin:0 auto; padding:0 32px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.brand-logo{height:46px; display:block; width:auto}
.brand-claim{font-size:11px; font-weight:700; letter-spacing:2.5px; color:var(--text-tri); text-transform:uppercase; line-height:1; padding-bottom:4px}
/* Zentrierte Variante (Magix-Stil): grosses Logo mittig, Claim darunter, meist ohne Nav */
.brand-band.centered{padding:72px 32px 76px}
.brand-band.centered .brand-bar{flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:0}
.brand-band.centered .brand-logo{height:80px; margin:0 auto 18px}
.brand-band.centered .brand-claim{letter-spacing:3px; padding-bottom:0}
@media (max-width:720px){ .brand-band.centered{padding:44px 20px 40px} .brand-band.centered .brand-logo{height:56px} }

/* ---- Sticky Anker-Navigation (Desktop horizontal, Mobile Hamburger) ----
   Bewusst ohne backdrop-filter (erzeugt sonst Containing-Block und fesselt
   das fixed Mobile-Panel an die Bar). JS toggelt .open auf .doc-nav. */
.doc-nav{position:sticky; top:0; z-index:50; background:rgba(5,25,34,0.97); border-bottom:1px solid rgba(255,255,255,0.08)}
.doc-nav-inner{max-width:var(--wrap); margin:0 auto; padding:0 32px; display:flex; align-items:center; gap:2px; overflow-x:auto; scrollbar-width:thin}
.doc-nav a{flex:0 0 auto; padding:13px 13px; font-size:12.5px; font-weight:600; color:rgba(255,255,255,0.62); text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent; transition:color .15s, border-color .15s}
.doc-nav a:hover{color:#fff; border-bottom-color:var(--green)}
.doc-burger{display:none; width:100%; align-items:center; justify-content:space-between; gap:10px; padding:14px 20px; background:none; border:none; color:#fff; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer}
.doc-burger-icon{position:relative; width:22px; height:16px; flex-shrink:0}
.doc-burger-icon span{position:absolute; left:0; width:100%; height:2px; background:var(--green); border-radius:2px; transition:transform .25s ease, opacity .2s}
.doc-burger-icon span:nth-child(1){top:0}
.doc-burger-icon span:nth-child(2){top:7px}
.doc-burger-icon span:nth-child(3){top:14px}
.doc-nav.open .doc-burger-icon span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.doc-nav.open .doc-burger-icon span:nth-child(2){opacity:0}
.doc-nav.open .doc-burger-icon span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:720px){
  .doc-burger{display:flex}
  .doc-nav.open .doc-burger{position:fixed; top:0; left:0; right:0; z-index:61; background:rgba(5,25,34,0.99)}
  .doc-nav-inner{position:fixed; inset:0; z-index:60; flex-direction:column; align-items:stretch; gap:0; padding:58px 0 28px; max-width:none; background:rgba(5,25,34,0.99); overflow-y:auto; overscroll-behavior:contain; transform:translateY(-100%); opacity:0; pointer-events:none; transition:transform .28s ease, opacity .2s}
  .doc-nav.open .doc-nav-inner{transform:translateY(0); opacity:1; pointer-events:auto}
  .doc-nav a{width:100%; padding:16px 24px; font-size:16px; border-bottom:1px solid rgba(255,255,255,0.08)}
}

/* ---- Layout ---- */
.container{max-width:var(--wrap); margin:0 auto; padding:60px 32px}
.section{margin-bottom:48px; scroll-margin-top:var(--nav-h)}

/* ---- Kopf und Headlines ---- */
.eyebrow, .label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:3px; color:var(--text-tri); margin-bottom:12px}
.page-head{margin-bottom:44px}
.page-head h1{font-size:42px; font-weight:900; letter-spacing:-0.03em; line-height:1.05; margin-bottom:16px}
h1 .hl, h2 .hl, h3 .hl{color:var(--green)}     /* gruen hervorgehobenes Wort */
.lead{font-size:16px; color:var(--text-sec); line-height:1.7; max-width:66ch}
.section h2{font-size:24px; font-weight:900; letter-spacing:-0.02em; margin-bottom:6px}
.section-sub{font-size:14.5px; color:var(--text-sec); margin-bottom:22px; max-width:66ch}

/* Fliesstexte auf lesbarer Breite halten (harte Regel, siehe bildstelle-design.md) */
.lead, .section-sub, p.readable{max-width:66ch}

/* ---- Hero (dunkel, mit gruenem Glow) ---- */
.hero{background:var(--accent); color:#fff; border-radius:var(--radius); padding:42px 40px; margin-bottom:44px; position:relative; overflow:hidden}
.hero::before{content:''; position:absolute; top:-80px; right:-80px; width:300px; height:300px; background:radial-gradient(circle, rgba(44,254,153,0.18), transparent 70%)}
.hero-content{position:relative; z-index:1}
.hero .badge{display:inline-block; padding:6px 14px; background:var(--green); color:var(--accent); font-size:11px; font-weight:800; letter-spacing:1.5px; border-radius:20px; margin-bottom:18px}
.hero h2{font-size:28px; font-weight:900; letter-spacing:-0.02em; margin-bottom:12px}
.hero .sub{font-size:15px; opacity:0.82; margin-bottom:26px; line-height:1.7; max-width:66ch}

/* ---- Chips ---- */
.chip{display:inline-block; padding:6px 14px; background:var(--green-dim); color:var(--accent); font-size:12px; font-weight:600; border-radius:20px; border:1px solid var(--border-light)}

/* ---- Kaesten ---- */
/* Standard-Hinweis (gruener Balken links) */
.intro-note{background:var(--surface); border:1px solid var(--border-light); border-left:3px solid var(--green); border-radius:var(--radius); padding:22px 26px; font-size:14.5px; color:var(--text-sec); line-height:1.75}
.intro-note strong{color:var(--text)}
/* Achtung/Hinweis (amber Balken, Pfeil-Liste) */
.note-box{background:var(--surface); border:1px solid var(--border-light); border-left:3px solid var(--amber); border-radius:var(--radius); padding:24px 28px}
.note-box h3{font-size:16px; font-weight:800; margin-bottom:10px}
.note-box ul{list-style:none; padding:0; margin:0}
.note-box li{font-size:13px; color:var(--text-sec); padding:5px 0 5px 22px; position:relative; line-height:1.6}
.note-box li::before{content:'\2192'; position:absolute; left:0; color:var(--amber); font-weight:700}
.note-box li strong{color:var(--text)}

/* ---- Karten ---- */
.card{background:var(--surface); border:1px solid var(--border-light); border-radius:var(--radius); padding:32px}
.card.featured{border:1.5px solid var(--green)}
.card h3{font-size:21px; font-weight:900; letter-spacing:-0.02em; margin-bottom:6px}
.card .card-intro{font-size:14px; color:var(--text-sec); line-height:1.7; margin-bottom:18px; max-width:66ch}
/* Perk-Karte (kleiner, gruener Balken links) */
.perk{background:var(--surface); border:1px solid var(--border-light); border-left:3px solid var(--green); border-radius:var(--radius); padding:22px 24px}
.perk h4{font-size:15px; font-weight:800; margin-bottom:6px}
.perk p{font-size:13px; color:var(--text-sec); line-height:1.65; margin:0}

/* ---- Grid-Helfer (nach unten responsive) ---- */
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:900px){ .grid-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .grid-2, .grid-3{grid-template-columns:1fr} }

/* ---- Buttons ---- */
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 28px; border-radius:980px; font-size:15px; font-weight:700; text-decoration:none; background:var(--green); color:var(--accent); border:0; cursor:pointer; font-family:inherit; transition:filter .15s}
.btn:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.45)}
.btn-dark{background:var(--accent); color:#fff}

/* ---- CTA (dunkel, zentriert) ---- */
.cta{background:var(--accent); color:#fff; border-radius:var(--radius); padding:40px; text-align:center; position:relative; overflow:hidden}
.cta::before{content:''; position:absolute; top:-100px; left:-100px; width:320px; height:320px; background:radial-gradient(circle, rgba(44,254,153,0.14), transparent 70%)}
.cta h3{font-size:24px; font-weight:900; letter-spacing:-0.02em; margin-bottom:12px; position:relative; z-index:1}
.cta p{font-size:14.5px; opacity:0.85; max-width:600px; margin:0 auto 24px; line-height:1.7; position:relative; z-index:1}
.cta-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1}

/* ---- Footer (3-spaltig) ---- */
.footer-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:28px; margin-bottom:16px}
.footer-col{font-size:11px; line-height:1.75; color:var(--text-tri)}
.footer-col strong{color:var(--text); display:block; margin-bottom:6px; font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase}
.footer-col a{color:var(--text-sec); text-decoration:none}
.footer-bottom{padding-top:12px; border-top:1px solid var(--border-light); font-size:11px; color:var(--text-tri); text-align:center}
.footer-bottom .heart{color:var(--green)}   /* Herz in Akzentfarbe, NICHT rot */
@media (max-width:720px){ .footer-grid{grid-template-columns:1fr; gap:18px} }

/* ---- Welle (Marken-Element, dezenter Hintergrund) ----
   welle.svg mitliefern. Utility auf einen position:relative Wrapper legen.
   Achtung: inline eingebettete welle.svg-Klassen (.cls-1/.cls-2) vor dem
   Einbetten umbenennen, sonst faerbt das Logo die Welle gruen (siehe README). */
.has-welle{position:relative; overflow:hidden}
.has-welle::after{content:''; position:absolute; top:0; right:0; bottom:0; width:60%; background:url('welle.svg') no-repeat right center; background-size:contain; opacity:0.05; pointer-events:none; z-index:0}
.has-welle > *{position:relative; z-index:1}

/* ---- Mobile-Grundregeln (Detailregeln in bildstelle-design.md) ---- */
@media (max-width:720px){
  .container{padding:40px 18px}
  .brand-band{padding:28px 0 24px}
  .brand-bar{flex-direction:column; align-items:center; gap:10px; text-align:center; padding:0 18px}
  .brand-logo{height:32px}
  .page-head h1{font-size:30px}
  .hero{padding:30px 22px}
  .hero h2{font-size:22px}
  .card, .cta, .note-box, .intro-note{padding:24px 22px}
}