/* =============================================================
   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}
/* Claim IMMER exakt und voll (Single Source: _Brand-Assets/README.md):
   "Design. Web. Fotografie. Das macht ein Bild." (wird per uppercase gerendert).
   Keine Kurzform, keine eigene Variante. */
.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)}
/* Aktive Seite bei Seiten-Navigation (Mehrseiten-Dokumente): aria-current="page" setzen */
.doc-nav a[aria-current="page"]{color:#fff; border-bottom-color:var(--green)}
/* Trenner zwischen Seiten-Links und Anker-Links der aktuellen Seite */
.doc-sep{flex:0 0 auto; width:1px; height:18px; background:rgba(255,255,255,0.22); margin:0 8px}
.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)}
  .doc-sep{width:auto; height:auto; background:none; border-top:2px solid rgba(44,254,153,0.35); margin:8px 0 4px}
}

/* ---- Freistehende Sticky-Sidebar (side-nav) fuer Mehrseiten-Dokument-Sets ----
   Hauptpunkte = Seiten (aria-current="page" markiert die aktive), Unterpunkte = Anker.
   Desktop: schwebende Karte, sticky, innen scrollbar. Unter 1100px: Burger-Bar mit Vollbild-Panel.
   JS toggelt .open auf .side-nav (Burger) und .open auf .sn-group (Untermenues). */
.page-grid{max-width:1460px; margin:0 auto; padding:0 clamp(18px,3vw,36px); display:grid; grid-template-columns:250px minmax(0,1fr); gap:clamp(24px,3vw,44px); align-items:start}
.page-grid > .wrap{margin:0; padding-left:0; padding-right:0}
.side-nav{position:sticky; top:20px; margin-top:26px; background:var(--surface); border:1px solid var(--border-light); border-radius:12px; padding:12px 12px 14px; max-height:calc(100vh - 40px); overflow-y:auto; scrollbar-width:thin}
.sn-title{font-size:10.5px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--text-tri); padding:6px 10px 10px}
.sn-group{border-top:1px solid var(--border-light)}
.sn-head{display:flex; align-items:center; gap:2px}
.sn-head a{flex:1 1 auto; padding:10px 4px 10px 10px; font-size:14px; font-weight:700; color:var(--text-sec); text-decoration:none; border-radius:8px; line-height:1.3}
.sn-head a:hover{color:var(--accent)}
.sn-head a[aria-current="page"]{color:var(--accent)}
.sn-head a[aria-current="page"]::before{content:''; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--green); margin-right:8px}
.sn-group.muted{opacity:.55}
.sn-group.muted:hover{opacity:1}
.sn-done{display:inline-block; font-size:9px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; background:var(--surface-2); border:1px solid var(--border-light); color:var(--text-tri); border-radius:10px; padding:2px 7px; margin-left:7px; vertical-align:middle}
.sn-toggle{flex:0 0 auto; width:30px; height:30px; border:0; background:none; cursor:pointer; color:var(--text-tri); font-size:12px; line-height:1; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; transition:transform .2s ease}
.sn-toggle:hover{background:var(--surface-2); color:var(--accent)}
.sn-group.open .sn-toggle{transform:rotate(180deg)}
.sn-sub{display:none; padding:0 0 10px}
.sn-group.open .sn-sub{display:block}
.sn-sub a{display:block; margin-left:14px; padding:7px 10px 7px 12px; font-size:13px; color:var(--text-sec); text-decoration:none; border-left:2px solid var(--border-light); border-radius:0 8px 8px 0; line-height:1.35}
.sn-sub a:hover{color:var(--accent); background:var(--green-dim); border-left-color:var(--green)}
.sn-sub a.active{color:var(--accent); background:var(--green-dim); border-left-color:var(--green); font-weight:600}  /* Scroll-Spy: Section im Viewport (side-nav.js) */
@media (max-width:1100px){
  .page-grid{display:block; padding:0}
  .page-grid > .wrap{margin:0 auto; padding:0 clamp(18px,4vw,32px) 80px}
  .side-nav{position:sticky; top:0; z-index:50; margin:0; padding:0; background:rgba(5,25,34,0.97); border:0; border-bottom:1px solid rgba(255,255,255,0.08); border-radius:0; max-height:none; overflow:visible}
  .side-nav .sn-title{display:none}
  .side-nav .doc-burger{display:flex}
  .side-nav.open .doc-burger{position:fixed; top:0; left:0; right:0; z-index:61; background:rgba(5,25,34,0.99)}
  .side-nav-inner{position:fixed; inset:0; z-index:60; background:rgba(5,25,34,0.99); overflow-y:auto; overscroll-behavior:contain; padding:58px 0 28px; transform:translateY(-100%); opacity:0; pointer-events:none; transition:transform .28s ease, opacity .2s}
  .side-nav.open .side-nav-inner{transform:translateY(0); opacity:1; pointer-events:auto}
  .side-nav .sn-group{border-top:1px solid rgba(255,255,255,0.08)}
  .side-nav .sn-head a{color:#fff; font-size:16px; padding:14px 20px 14px 24px}
  .side-nav .sn-head a[aria-current="page"]{color:var(--green)}
  .side-nav .sn-toggle{width:48px; height:48px; color:var(--green); font-size:14px}
  .side-nav .sn-sub{padding:0 0 12px}
  .side-nav .sn-sub a{color:rgba(255,255,255,0.72); border-left-color:rgba(255,255,255,0.16); margin-left:32px; padding:10px 16px 10px 14px; font-size:14.5px}
  .side-nav .sn-sub a:hover{color:#fff; background:rgba(44,254,153,0.08); border-left-color:var(--green)}
  .side-nav .sn-sub a.active{color:#fff; background:rgba(44,254,153,0.10); border-left-color:var(--green); font-weight:600}
  .side-nav .sn-done{background:transparent; border-color:rgba(255,255,255,0.22); color:rgba(255,255,255,0.55)}
}

/* ---- 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 ist der EINE Dokument-Kopf (SSOT): Eyebrow, grosse H1, Lead. In den Seiten
   KEINE lokalen h1/.eyebrow/.lead-Overrides setzen, sonst driftet der Look. */
.page-head{padding-top:34px; margin-bottom:54px}
.page-head .eyebrow{margin-bottom:14px}
.page-head h1{font-size:clamp(34px,4.4vw,56px); font-weight:900; letter-spacing:-0.03em; line-height:1.05; margin:0 0 18px}
.page-head .lead{font-size:18px; line-height:1.65; max-width:1000px}
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; margin:0 0 36px}
.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{padding-top:22px; margin-bottom:40px}
  .page-head h1{font-size:32px}
  .hero{padding:30px 22px}
  .hero h2{font-size:22px}
  .card, .cta, .note-box, .intro-note{padding:24px 22px}
}

/* ---- Glossar-Tooltips (Begriffserklärungen; Engine: designsystem/glossar-tooltips.js) ----
   Dezente Markierung erklärungsbedürftiger Begriffe plus schwebendes Erklärkärtchen.
   Daten pro Projekt als glossar-<projekt>.js (window.GLOSSAR), Daten VOR Engine einbinden. */
.gl-term{text-decoration:underline dotted rgba(107,138,150,.55); text-decoration-thickness:1px; text-underline-offset:3px; cursor:help; border-radius:3px}
.gl-term:hover,.gl-term:focus-visible{background:var(--green-dim); text-decoration-color:var(--accent); outline:none}
#gl-tip{position:fixed; z-index:400; max-width:340px; background:var(--surface); border:1px solid var(--border-light); border-left:3px solid var(--green); border-radius:10px; box-shadow:0 10px 30px rgba(5,25,34,.14); padding:12px 14px; font-size:13.5px; line-height:1.5; color:var(--text-sec); display:none}
#gl-tip .gl-tt{display:block; font-weight:800; color:var(--text); font-size:13px; margin-bottom:3px}

/* ---- Slim-Header: flaches Markenband fuer Partner-Unterlagen ----
   Logo links (fluchtet mit der side-nav-Spalte des page-grid), Claim rechts
   (fluchtet mit der rechten Layout-Kante). Steht bewusst NACH allen Media-Blöcken,
   damit es die zentrierte 720px-Basisregel der brand-bar überschreibt. */
.brand-band.slim{padding:22px 0 18px}
.brand-band.slim .brand-bar{max-width:1460px; margin:0 auto; padding:0 clamp(18px,3vw,36px); display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; text-align:left}
.brand-band.slim .brand-logo{height:34px; margin:0}
.brand-band.slim .brand-claim{font-size:10px; letter-spacing:2.4px; padding-bottom:0}
@media (max-width:720px){
  .brand-band.slim{padding:14px 0 12px}
  .brand-band.slim .brand-logo{height:24px}
  .brand-band.slim .brand-claim{font-size:8px; letter-spacing:1.6px}
}