/* ══════════════════════════════════════════════════════════════════════════
   Stylesheet für die programmatischen Seiten (dist-seo/).
   Eine Datei für alle ~2.000 Seiten: sie wird einmal geladen und danach aus
   dem Browser-Cache bedient. Die Farb- und Typo-Variablen sind dieselben wie
   in feature.css, damit generierte und handgebaute Seiten identisch wirken.
   Budget laut Plan: unter 25 KB unkomprimiert.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#0C0C0E; --surface:#141416; --surface-2:#18181B;
  --hair:#232326; --hair-soft:#1C1C1F;
  --ink:#F4F4F5; --ink-dim:#AEAEB6; --ink-mute:#8E8E97;
  --emerald:#34D399; --emerald-solid:#10B981; --emerald-hover:#6EE7B7;
  --emerald-ink:#022C22; --emerald-bg:rgba(52,211,153,.10); --emerald-edge:rgba(52,211,153,.30);
  --serif:"Baskerville","Baskerville Old Face","Hoefler Text",Garamond,Georgia,"Times New Roman",serif;
  --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"Geist Mono","SF Mono",ui-monospace,Menlo,monospace;
  --nav-h:66px; --maxw:1180px; --maxw-read:720px;
  --radius-lg:16px; --radius-md:14px; --radius-sm:10px;

  /* Der gemeinsame Header aus partials/ bringt seine Styles selbst mit, setzt
     dabei aber Variablen voraus, die bisher nur feature.css kannte. Ohne sie
     fiel der Sprachwähler auf die Standard-Textfarbe zurück, sein Aufklappmenü
     bekam keinen z-index (und verschwand hinter dem Inhalt) und die Schatten
     fehlten. Werte identisch zu feature.css — beide Seitenwelten müssen
     denselben Header ergeben. */
  --ink-2:#AEAEB6; --ink-3:#8E8E97; --bg-2:#0E0E10;
  --inner-glow:inset 0 1px 0 rgba(255,255,255,.04);
  --shadow-soft:0 16px 40px -24px rgba(0,0,0,.75);
  --z-nav:100; --z-menu:200;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Basis-Reset für Buttons wie in feature.css. Fehlte er, bekamen die Elemente
   aus dem gemeinsamen Header (Sprachwähler-Optionen, Burger) die hellen
   Browser-Standardstile — heller Kasten, unlesbarer Text, eigene Schrift. Die
   Rechner-Buttons setzen ihre Optik weiter unten selbst. */
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
body{
  margin:0; background:var(--bg); color:var(--ink-dim);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--emerald);text-decoration:none}
a:hover{color:var(--emerald-hover);text-decoration:underline;text-underline-offset:3px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.read{max-width:var(--maxw-read)}

/* ── Kopfbereich ─────────────────────────────────────────────────────── */
.pshero{padding:calc(var(--nav-h) + clamp(48px,8vh,88px)) 0 clamp(32px,5vh,56px)}
.pshero h1{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(2rem,4.4vw,3.1rem); line-height:1.12; letter-spacing:-.015em;
  margin:0 0 20px;
}
.pshero .lede{font-size:clamp(1.05rem,1.7vw,1.2rem);line-height:1.6;margin:0;color:var(--ink-dim)}

/* Brotkrumen */
.crumbs{font-size:.82rem;color:var(--ink-mute);margin:0 0 18px;display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{color:var(--ink-mute)}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{opacity:.5}

/* ── Fließtext ───────────────────────────────────────────────────────── */
.psbody{padding-bottom:clamp(56px,8vh,96px)}
.psbody section{margin:0 0 clamp(40px,6vh,64px)}
.psbody h2{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(1.5rem,2.6vw,1.9rem); line-height:1.25; letter-spacing:-.01em;
  margin:0 0 16px;
}
.psbody h3{font-size:1.1rem;font-weight:600;color:var(--ink);margin:28px 0 10px}
.psbody p{margin:0 0 16px}
.psbody ul,.psbody ol{margin:0 0 16px;padding-left:22px}
.psbody li{margin:0 0 9px}
.psbody ol.steps{counter-reset:s;list-style:none;padding-left:0}
.psbody ol.steps li{
  counter-increment:s;position:relative;padding-left:44px;margin-bottom:18px;
}
.psbody ol.steps li::before{
  content:counter(s);position:absolute;left:0;top:1px;
  width:28px;height:28px;border-radius:50%;
  background:var(--emerald-bg);border:1px solid var(--emerald-edge);
  color:var(--emerald);font-size:.85rem;font-weight:600;
  display:grid;place-items:center;
}

/* ── Tabellen (Sonnenzeiten, Klima, Preise) ──────────────────────────── */
.tablewrap{overflow-x:auto;margin:0 0 14px;border:1px solid var(--hair);border-radius:var(--radius-md);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:460px}
caption{caption-side:bottom;text-align:left;font-size:.8rem;color:var(--ink-mute);padding:10px 16px 0}
th,td{padding:10px 16px;text-align:left;border-bottom:1px solid var(--hair-soft)}
th{color:var(--ink);font-weight:600;font-size:.82rem;letter-spacing:.02em;text-transform:uppercase;background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
td:not(:first-child){font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:.86rem}

/* ── Rechner-Widget ──────────────────────────────────────────────────── */
.calc{
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius-lg);
  padding:clamp(20px,3vw,28px);margin:0 0 32px;
}
.calc h2{margin-top:0;font-size:1.15rem!important;font-family:var(--sans)!important;font-weight:600!important}
.calc .fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:18px}
.calc label{display:block;font-size:.8rem;color:var(--ink-mute);margin-bottom:5px}
.calc input,.calc select{
  width:100%;background:var(--bg);border:1px solid var(--hair);border-radius:var(--radius-sm);
  color:var(--ink);font-family:var(--sans);font-size:.95rem;padding:10px 12px;
}
.calc input:focus,.calc select:focus{outline:none;border-color:var(--emerald-solid);box-shadow:0 0 0 3px var(--emerald-glow,rgba(52,211,153,.12))}
.calc .out{
  border-top:1px solid var(--hair);padding-top:16px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;
}
.calc .out div{background:var(--bg);border:1px solid var(--hair-soft);border-radius:var(--radius-sm);padding:12px 14px}
.calc .out dt{font-size:.75rem;color:var(--ink-mute);margin:0 0 4px}
.calc .out dd{margin:0;font-family:var(--mono);font-size:1.15rem;color:var(--emerald);font-variant-numeric:tabular-nums}
.calc .note{font-size:.8rem;color:var(--ink-mute);margin:14px 0 0}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq details{
  border:1px solid var(--hair);border-radius:var(--radius-md);background:var(--surface);
  padding:0;margin:0 0 10px;
}
.faq summary{
  cursor:pointer;padding:16px 20px;color:var(--ink);font-weight:600;font-size:1rem;
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--emerald);font-size:1.3rem;line-height:1;flex-shrink:0}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 20px 18px;margin:0}

/* ── Quellen- und Stand-Hinweis ──────────────────────────────────────── */
.srcnote{
  font-size:.8rem;color:var(--ink-mute);border-left:2px solid var(--hair);
  padding:2px 0 2px 14px;margin:0 0 16px;
}

/* ── CTA ─────────────────────────────────────────────────────────────── */
.pscta{
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius-lg);
  padding:clamp(24px,4vw,36px);margin:clamp(40px,6vh,64px) 0;text-align:center;
}
.pscta h2{margin:0 0 10px;font-size:clamp(1.3rem,2.4vw,1.7rem)!important}
.pscta p{margin:0 0 22px;color:var(--ink-dim)}
.btn{
  display:inline-block;background:var(--emerald-solid);color:var(--emerald-ink);
  font-weight:600;font-size:.95rem;padding:13px 28px;border-radius:999px;text-decoration:none;
}
.btn:hover{background:var(--emerald-hover);color:var(--emerald-ink);text-decoration:none}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--hair);margin-left:10px}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink);border-color:#34343A}

/* ── Verwandte Seiten ────────────────────────────────────────────────── */
.related{border-top:1px solid var(--hair);padding-top:clamp(32px,5vh,48px);margin-top:clamp(40px,6vh,64px)}
.related h2{font-size:1.15rem!important;font-family:var(--sans)!important;font-weight:600!important;margin-bottom:16px}
.relgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;list-style:none;padding:0;margin:0}
.relgrid li{margin:0}
.relgrid a{
  display:block;padding:14px 16px;background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--radius-md);color:var(--ink);font-size:.92rem;line-height:1.4;
}
.relgrid a:hover{border-color:var(--emerald-edge);text-decoration:none}
.relgrid .k{display:block;font-size:.72rem;color:var(--ink-mute);margin-bottom:3px;text-transform:uppercase;letter-spacing:.04em}

/* ── Hub-Seiten ──────────────────────────────────────────────────────── */
.hubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;list-style:none;padding:0;margin:0 0 40px}
.hubgrid a{display:block;padding:18px 20px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius-md)}
.hubgrid a:hover{border-color:var(--emerald-edge);text-decoration:none}
.hubgrid strong{display:block;color:var(--ink);font-size:1rem;margin-bottom:5px;font-weight:600}
.hubgrid span{display:block;color:var(--ink-mute);font-size:.85rem;line-height:1.45}
.hubgroup{margin:0 0 40px}
.hubgroup > h2{font-size:1.15rem!important;font-family:var(--sans)!important;font-weight:600!important}

/* ── Sprachhinweis ───────────────────────────────────────────────────── */
.langhint{
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius-sm);
  padding:10px 16px;font-size:.85rem;color:var(--ink-mute);margin:0 0 24px;
}

/* ── Tool-Suiten: Werkzeugleiste, Zeilen-Editoren, Grafiken ──────────────── */
.calcbar{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;border-top:1px solid var(--hair);padding-top:14px}
.calcbar button,.addrow,.fieldbtns button{
  background:var(--surface-2);border:1px solid var(--hair);border-radius:999px;
  color:var(--ink);font-size:.82rem;padding:7px 14px;cursor:pointer;font-family:var(--sans);
}
.calcbar button:hover,.addrow:hover,.fieldbtns button:hover{border-color:var(--emerald-edge);color:var(--emerald)}
.calc .fields .span2{grid-column:span 2}
.calc textarea{
  width:100%;background:var(--bg);border:1px solid var(--hair);border-radius:var(--radius-sm);
  color:var(--ink);font-family:var(--mono);font-size:.9rem;padding:10px 12px;resize:vertical;
}
.calc .fieldbtns{display:flex;align-items:flex-end;padding-bottom:2px}
.calc .check{display:flex;gap:8px;align-items:center;font-size:.85rem;color:var(--ink-dim)}
.calc details.coords{margin:0 0 14px}
.calc details.coords summary{cursor:pointer;font-size:.82rem;color:var(--ink-mute)}
.calc details.coords .fields{margin-top:10px}

/* Zeilen-Editoren (Budget, Drehplan, Shotlist, Storage, Call Sheet) */
.edhead,.edrows > .edrow{display:grid;gap:8px;align-items:center}
.ed4,.edrows.ed4 > .edrow{grid-template-columns:2fr 2fr 1fr 34px}
.ed5,.edrows.ed5 > .edrow{grid-template-columns:2.4fr 1fr 1fr 1.2fr 34px}
.ed6,.edrows.ed6 > .edrow{grid-template-columns:34px 1fr 1fr 2.4fr 64px 34px}
.edhead{font-size:.72rem;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.04em;margin:14px 0 6px}
.edrows .edrow{margin-bottom:8px}
.edrows input,.edrows select{
  width:100%;background:var(--bg);border:1px solid var(--hair);border-radius:var(--radius-sm);
  color:var(--ink);font-size:.88rem;padding:8px 10px;font-family:var(--sans);min-width:0;
}
.edrows output{font-family:var(--mono);font-size:.82rem;color:var(--emerald);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.edrows output.warn{color:#F87171}
.edrows [data-r="del"]{
  background:none;border:1px solid var(--hair);border-radius:8px;color:var(--ink-mute);
  cursor:pointer;height:32px;font-size:.9rem;
}
.edrows [data-r="del"]:hover{color:#F87171;border-color:#F87171}
.addrow{margin:2px 0 16px}

/* Budget-Verteilungsbalken */
.budgetbar{display:flex;height:10px;border-radius:6px;overflow:hidden;margin:6px 0 14px;background:var(--surface-2)}
.budgetbar span{display:block;background:var(--emerald-solid);min-width:2px}

/* Wetter-Heatmap */
.heatmap{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin:14px 0 6px}
.heatcell{
  background:color-mix(in srgb, var(--emerald-solid) calc(12% + var(--h) * .55%), var(--surface));
  border:1px solid var(--hair-soft);border-radius:8px;padding:8px 2px;text-align:center;
}
.heatcell span{display:block;font-size:.62rem;color:var(--ink);opacity:.85;text-transform:uppercase}
.heatcell strong{display:block;font-family:var(--mono);font-size:.82rem;color:var(--ink);font-weight:600}

/* Jahreskurve + DoF-Visualisierung */
.curve,.dofviz{margin:14px 0;background:var(--bg);border:1px solid var(--hair-soft);border-radius:var(--radius-md);padding:10px}

/* Call-Sheet-Vorschau (und Druckbild) */
.cs-sheet{background:#fff;color:#111;border-radius:var(--radius-md);padding:22px;margin:18px 0 6px;font-size:.9rem;line-height:1.5}
.cs-sheet:empty{display:none}
.cs-head{display:flex;justify-content:space-between;border-bottom:2px solid #111;padding-bottom:8px;margin-bottom:12px}
.cs-head strong{font-size:1.1rem}
.cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-bottom:14px}
.cs-grid em{display:block;font-style:normal;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:#666;margin-bottom:2px}
.cs-crew{width:100%;border-collapse:collapse;min-width:0;font-size:.85rem}
.cs-crew th,.cs-crew td{border-bottom:1px solid #ddd;padding:6px 8px;text-align:left;color:#111;background:none;font-family:var(--sans);text-transform:none;letter-spacing:0}
.cs-crew th{font-size:.7rem;text-transform:uppercase;color:#666}
.cs-notes{margin:12px 0 0}
.cs-foot{margin:14px 0 0;font-size:.7rem;color:#999}

/* Embed-Modus: ?embed=1 zeigt nur den Rechner */
html.embed .site-header,html.embed header.pshero,html.embed .psbody section,
html.embed .pscta,html.embed .related,html.embed footer,html.embed .faq,
html.embed .crumbs,html.embed nav{display:none!important}
html.embed .psbody{padding:0}
html.embed .calc{margin:0}
html.embed body{padding:12px;background:var(--bg)}

/* Druck: nur das Werkzeug-Ergebnis, ohne Chrome. Call Sheet druckt als Dokument. */
@media print{
  body{background:#fff;color:#111}
  .site-header,footer,.pscta,.related,.calcbar,.addrow,.crumbs,nav,.faq{display:none!important}
  .pshero{padding:0}
  .pshero h1{color:#111;font-size:1.6rem}
  .psbody section{display:none}
  .calc{border:none;background:#fff;color:#111;padding:0}
  .calc label,.calc .note,.edhead{color:#444}
  .calc input,.calc select,.calc textarea,.edrows input,.edrows select{background:#fff;color:#111;border-color:#bbb}
  .calc .out div{background:#fff;border-color:#ccc}
  .calc .out dd{color:#111}
  .cs-sheet{border:none;padding:0}
  /* Auf der Call-Sheet-Seite verschwindet sogar das Formular — nur das Sheet bleibt. */
  [data-calc="callsheet"] .fields,[data-calc="callsheet"] .edhead,
  [data-calc="callsheet"] .edrows,[data-calc="callsheet"] h2,[data-calc="callsheet"] .note{display:none}
}

@media (max-width:640px){
  body{font-size:16px}
  .calc .fields{grid-template-columns:1fr 1fr}
  .calc .fields .span2{grid-column:span 2}
  .heatmap{grid-template-columns:repeat(6,1fr)}
  .ed5,.edrows.ed5 > .edrow{grid-template-columns:1.6fr .8fr .9fr 1fr 30px}
  .ed6,.edrows.ed6 > .edrow{grid-template-columns:26px .9fr .9fr 1.6fr 52px 30px}
}

/* ── Vollständiger Unterseiten-Index auf Tool-Seiten ─────────────────────── */
.linkindex .lig{margin:0 0 20px}
.linkindex h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-mute);margin:18px 0 8px;font-weight:600}
.linkindex ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 10px}
.linkindex li{margin:0}
.linkindex li a{font-size:.9rem;color:var(--ink-dim);border-bottom:1px solid transparent}
.linkindex li a:hover{color:var(--emerald);text-decoration:none;border-bottom-color:var(--emerald-edge)}

/* ── Objektivsatz-Schnellauswahl (Schärfentiefe) ─────────────────────────── */
.focalpicks{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 14px}
.focalpicks:empty{display:none}
.fp-label{font-size:.72rem;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.04em;margin-right:4px}
.focalpicks button{
  background:var(--surface-2);border:1px solid var(--hair);border-radius:8px;color:var(--ink-dim);
  font-family:var(--mono);font-size:.8rem;padding:5px 9px;cursor:pointer;
}
.focalpicks button:hover{border-color:var(--emerald-edge);color:var(--emerald)}
.focalpicks button.on{background:var(--emerald-bg);border-color:var(--emerald-edge);color:var(--emerald)}

/* Beste Option im Förder-Standortvergleich */
tr.best td{background:var(--emerald-bg)}
tr.best td:first-child{font-weight:600;color:var(--ink)}

/* ── Footer ───────────────────────────────────────────────────────────────
   Derselbe Partial wie auf der Startseite (partials/footer.html), aber das
   CSS lag bisher nur inline in index.html — auf den generierten Seiten stand
   der Footer deshalb ungestylt da: kein Grid, keine Trennlinien, Links in
   Emerald statt gedimmt. Werte 1:1 aus index.html, damit beide Seitenwelten
   denselben Footer ergeben. Das Spike-Tape und das App-Store-Badge bringt
   der Partial selbst mit. */
.footer{border-top:1px solid var(--hair);padding:clamp(44px,7vh,72px) 0 36px;background:var(--bg-2)}
.footer__top{
  display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;
  padding-bottom:36px;border-bottom:1px solid var(--hair-soft);margin-bottom:26px;
}
.footer__brand{max-width:340px}
.footer__brand .brand{display:inline-flex;margin-bottom:16px}
.footer__brand p{font-size:.95rem;color:var(--ink-3);max-width:34ch}
.footer__links{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:flex-start;max-width:520px}
.footer__links a{font-size:.92rem;color:var(--ink-3);transition:color .18s ease;min-height:44px;display:inline-flex;align-items:center}
/* text-decoration muss hier explizit zurückgesetzt werden: pseo.css
   unterstreicht global jeden a:hover, index.html tut das nicht. */
.footer__links a:hover{color:var(--ink);text-decoration:none}
.footer__bottom{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-3);
}
.footer__bottom a{color:inherit;text-decoration:none}
.footer__bottom a:hover{text-decoration:underline}