/* ══════════════════════════════════════════════════════════════════════════
   Werkzeug-Seiten (/tools, /de/werkzeuge) — ergänzt pseo.css.
   Grundsatz: Das Werkzeug ist die Seite. Es steht in voller Breite oberhalb
   der Falz, die Antwort kommt zuerst als Satz, dann als Zahlen, dann als Bild.
   Farben aus pseo.css; dazu eine kleine Himmels- und Diagrammpalette, die nur
   in Visualisierungen vorkommt.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --t-night:#151c2e; --t-nautical:#1f2c4d; --t-blue:#3657a8; --t-golden:#e9a94b; --t-day:#2a2a22;
  --t-sun:#f6c453; --t-warn:#f59e0b; --t-bad:#f87171; --t-ok:#34d399;
  --t-c1:#34d399; --t-c2:#60a5fa; --t-c3:#f6c453; --t-c4:#c084fc; --t-c5:#f87171; --t-c6:#94a3b8;
  --t-grid:#26262a; --t-axis:#5b5b63;
  --t-field:#101012; --t-field-edge:#2a2a2e;
}

/* ── Kopf ───────────────────────────────────────────────────────────────── */
.tl-hero{padding:calc(var(--nav-h) + clamp(28px,5vh,56px)) 0 clamp(20px,3vh,32px)}
.tl-eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--emerald);margin:0 0 12px}
.tl-hero h1{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:clamp(2rem,4.2vw,3rem);line-height:1.1;letter-spacing:-.015em;margin:0 0 14px;max-width:22ch}
.tl-hero .lede{font-size:clamp(1.02rem,1.5vw,1.14rem);line-height:1.6;margin:0;color:var(--ink-dim);max-width:62ch}

/* ── Werkzeug-Rahmen ───────────────────────────────────────────────────── */
.tl-tool{padding-bottom:clamp(40px,6vh,72px)}
.tool{
  position:relative;background:var(--surface);border:1px solid var(--hair);border-radius:18px;
  padding:clamp(16px,2.4vw,28px);box-shadow:0 30px 60px -40px rgba(0,0,0,.8);
}
.tool__say{
  font-size:clamp(1.08rem,1.8vw,1.32rem);line-height:1.5;color:var(--ink);margin:0 0 20px;
  min-height:1.5em;max-width:68ch;
}
.tool__say b,.tool__say strong{color:var(--ink);font-weight:600}
.tool__say .n{font-family:var(--mono);font-size:.94em;color:var(--emerald);white-space:nowrap}
.tool__say .warn{color:var(--t-warn)}
.tool__say .bad{color:var(--t-bad)}
.tool__say small{display:block;font-size:.8rem;color:var(--ink-mute);margin-top:6px;line-height:1.5}

.tool__grid{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:clamp(18px,2.6vw,32px);align-items:start}
.tool__in{display:flex;flex-direction:column;gap:14px}
.tool__out{min-width:0;display:flex;flex-direction:column;gap:18px}
.tool__grid--wide{grid-template-columns:minmax(0,1fr)}
.tool [hidden]{display:none!important}
.tool__in>[data-panel],.tool__out>[data-panel]{display:flex;flex-direction:column;gap:14px}
.tool__out>[data-panel]{gap:18px}

/* Felder */
.f{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0;padding:0;border:0}
.f label,.f legend,.tlabel{font-size:.78rem;color:var(--ink-mute);letter-spacing:.01em;padding:0}
.f__hint{font-size:.74rem;color:var(--ink-mute);line-height:1.45}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.frow3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tool input[type=text],.tool input[type=number],.tool input[type=date],.tool input[type=time],.tool input[type=search],.tool input[type=email],.tool input[type=tel],.tool select,.tool textarea{
  width:100%;background:var(--t-field);border:1px solid var(--t-field-edge);border-radius:10px;
  color:var(--ink);font:inherit;font-size:.95rem;padding:9px 11px;min-height:40px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.tool textarea{font-family:var(--mono);font-size:.9rem;line-height:1.55;resize:vertical}
.tool input:focus,.tool select:focus,.tool textarea:focus{outline:none;border-color:var(--emerald-edge);box-shadow:0 0 0 3px var(--emerald-bg)}
.tool input[type=number]{font-family:var(--mono)}
.tool input[type=range]{width:100%;accent-color:var(--emerald-solid)}
.tool select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-mute) 50%),linear-gradient(135deg,var(--ink-mute) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px}
.tool input::placeholder{color:#5c5c64}
.tool .check{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--ink-dim);cursor:pointer}
.tool .check input{accent-color:var(--emerald-solid);width:16px;height:16px}

/* Segment-Schalter */
.seg__opts{display:flex;flex-wrap:wrap;gap:4px;background:var(--t-field);border:1px solid var(--t-field-edge);border-radius:10px;padding:3px}
.seg__opts label{flex:1 1 auto;position:relative;cursor:pointer}
.seg__opts input{position:absolute;opacity:0;pointer-events:none}
.seg__opts span{display:block;text-align:center;font-size:.84rem;padding:6px 10px;border-radius:7px;color:var(--ink-dim);white-space:nowrap}
.seg__opts input:checked+span{background:var(--surface-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
.seg__opts input:focus-visible+span{box-shadow:0 0 0 2px var(--emerald-edge)}

/* Knöpfe im Werkzeug */
.tbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--surface-2);border:1px solid var(--hair);color:var(--ink);border-radius:9px;padding:7px 12px;font-size:.84rem;line-height:1.3;cursor:pointer}
.tbtn:hover{border-color:#3a3a40}
.tbtn--ghost{background:transparent;color:var(--ink-dim)}
.tbtn--sm{padding:4px 9px;font-size:.78rem}
.tbtn[aria-pressed=true]{background:var(--emerald-bg);border-color:var(--emerald-edge);color:var(--emerald)}

/* Reiter */
.ttabs{display:flex;gap:2px;margin:-4px 0 18px;border-bottom:1px solid var(--hair);overflow-x:auto;scrollbar-width:none}
.ttabs::-webkit-scrollbar{display:none}
.ttabs [role=tab]{background:none;border:0;color:var(--ink-mute);font-size:.9rem;padding:8px 14px 11px;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;cursor:pointer}
.ttabs [role=tab][aria-selected=true]{color:var(--ink);border-bottom-color:var(--emerald)}
.ttabs [role=tab]:focus-visible{outline:2px solid var(--emerald-edge);outline-offset:-2px;border-radius:6px}

/* Kennzahlen */
.tstats{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1px;margin:0;background:var(--hair);border:1px solid var(--hair);border-radius:12px;overflow:hidden}
.tstats>div{background:var(--surface);padding:12px 14px;min-width:0}
.tstats dt{font-size:.74rem;color:var(--ink-mute);margin:0 0 4px}
.tstats dd{margin:0;font-family:var(--mono);font-size:1.12rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tstats dd.is-warn{color:var(--t-warn)} .tstats dd.is-bad{color:var(--t-bad)} .tstats dd.is-ok{color:var(--t-ok)}

/* Diagramm-Flächen */
.tviz{background:var(--t-field);border:1px solid var(--hair-soft);border-radius:12px;padding:12px;overflow:hidden}
.tviz svg{display:block;width:100%;height:auto}
.tviz text{fill:var(--ink-mute);font-family:var(--mono);font-size:10px}
.tviz .lbl-ink{fill:var(--ink)}
.tviz__cap{font-size:.76rem;color:var(--ink-mute);margin:8px 2px 0}
.tlegend{display:flex;flex-wrap:wrap;gap:12px;font-size:.76rem;color:var(--ink-mute);margin:8px 2px 0;padding:0;list-style:none}
.tlegend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* Tabellen im Werkzeug */
.ttable{width:100%;border-collapse:collapse;font-size:.86rem}
.ttable th{font-weight:500;text-align:left;color:var(--ink-mute);font-size:.74rem;padding:7px 8px;border-bottom:1px solid var(--hair)}
.ttable td{padding:7px 8px;border-bottom:1px solid var(--hair-soft);color:var(--ink-dim);font-family:var(--mono);font-size:.84rem;white-space:nowrap}
.ttable td:first-child{font-family:var(--sans);color:var(--ink)}
.ttable tr.is-cur td{background:var(--emerald-bg)}
.ttable-wrap{overflow-x:auto}

/* Zeilen-Editor (Drehtag, Budget, Datenmenge, Call Sheet) */
.trows{display:flex;flex-direction:column;gap:6px}
.trow{display:grid;gap:6px;align-items:center}
.trow input,.trow select{min-height:36px!important;padding:6px 9px!important;font-size:.88rem!important}
.trow__del{background:none;border:0;color:var(--ink-mute);font-size:1.1rem;width:30px;height:30px;border-radius:8px;cursor:pointer}
.trow__del:hover{background:var(--surface-2);color:var(--t-bad)}
.trow__handle{color:var(--ink-mute);cursor:grab;user-select:none;text-align:center}
.trows__head{display:grid;gap:6px;font-size:.72rem;color:var(--ink-mute);padding:0 2px}
.tadd{align-self:flex-start}

/* Ortssuche */
.tcity{position:relative}
.tcity__list{position:absolute;z-index:30;top:100%;left:0;right:0;margin:4px 0 0;padding:4px;list-style:none;background:var(--surface-2);border:1px solid var(--hair);border-radius:10px;box-shadow:0 18px 40px -16px rgba(0,0,0,.8);max-height:280px;overflow:auto}
.tcity__list li{display:flex;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:7px;cursor:pointer;font-size:.9rem;color:var(--ink)}
.tcity__list li small{color:var(--ink-mute);font-family:var(--mono);font-size:.72rem}
.tcity__list li:hover,.tcity__list li.is-active{background:var(--emerald-bg)}

/* Leiste unten */
.tool__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid var(--hair)}
.tool__acts{display:flex;flex-wrap:wrap;gap:6px}
.tool__acts button{background:transparent;border:1px solid var(--hair);color:var(--ink-dim);border-radius:9px;padding:7px 12px;font-size:.82rem;cursor:pointer}
.tool__acts button:hover{color:var(--ink);border-color:#3a3a40}
.tool__handoff{white-space:nowrap}
/* Tabellen im Werkzeug: globale Tabellen-Stile aus pseo.css zurücksetzen */
.tool table{min-width:0}
.tool th{text-transform:none;letter-spacing:0;background:none}
.tool caption{padding:6px 0 0}
.tool__note{font-size:.76rem;color:var(--ink-mute);margin:12px 0 0}

/* Hinweis-Kästen im Werkzeug */
.tnote{font-size:.82rem;line-height:1.55;color:var(--ink-dim);background:var(--t-field);border:1px solid var(--hair-soft);border-left:3px solid var(--t-warn);border-radius:8px;padding:10px 12px;margin:0}
.tnote--info{border-left-color:var(--t-c2)}
.tnote--ok{border-left-color:var(--t-ok)}

/* ── Inhalt unter dem Werkzeug ─────────────────────────────────────────── */
.tl-body{padding-bottom:clamp(56px,8vh,96px)}
.tl-body section{margin:0 0 clamp(40px,6vh,60px)}
.tl-body h2{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:clamp(1.45rem,2.4vw,1.8rem);line-height:1.25;margin:0 0 14px}
.tl-body h3{font-size:1.04rem;font-weight:600;color:var(--ink);margin:24px 0 8px}
.tl-body p{margin:0 0 14px}
.tl-body ul,.tl-body ol{margin:0 0 14px;padding-left:22px}
.tl-body li{margin:0 0 8px}
.tl-body td,.tl-body th{white-space:nowrap}
.tl-body code{font-family:var(--mono);font-size:.88em;background:var(--surface);border:1px solid var(--hair);border-radius:5px;padding:1px 5px;color:var(--ink)}
.tl-body .formula{font-family:var(--mono);font-size:.9rem;background:var(--surface);border:1px solid var(--hair);border-radius:10px;padding:12px 14px;color:var(--ink);overflow-x:auto;white-space:pre}

.tl-sources{background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:18px 20px;margin:0 0 clamp(40px,6vh,60px)}
.tl-sources h2{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 10px}
.tl-sources ul{margin:0;padding-left:18px;font-size:.9rem}
.tl-sources li{margin:0 0 6px}
.tl-sources p{font-size:.82rem;color:var(--ink-mute);margin:10px 0 0}

.tl-handoff{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;background:linear-gradient(180deg,var(--surface),var(--bg));border:1px solid var(--hair);border-radius:16px;padding:22px 24px;margin:0 0 clamp(40px,6vh,60px)}
.tl-handoff h2{font-size:1.25rem!important;margin:0 0 6px!important}
.tl-handoff p{margin:0;font-size:.95rem}

.tl-related{margin:0 0 20px}
.tl-related h2{font-family:var(--sans)!important;font-size:.78rem!important;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)!important;margin:0 0 12px!important}
.tl-cards{list-style:none;margin:0;padding:0!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.tl-cards li{margin:0!important}
.tl-cards a{display:block;height:100%;background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:14px 16px;color:var(--ink-dim);text-decoration:none;transition:border-color .15s ease}
.tl-cards a:hover{border-color:#3a3a40;text-decoration:none}
.tl-cards b{display:block;color:var(--ink);font-weight:600;font-size:.95rem;margin-bottom:4px}
.tl-cards span{font-size:.84rem;line-height:1.5}

.tl-places{margin:0 0 clamp(40px,6vh,60px)}
.tl-places ul{list-style:none;padding:0!important;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.tl-places li{margin:0!important}
.tl-places a{display:inline-block;font-size:.84rem;color:var(--ink-dim);background:var(--surface);border:1px solid var(--hair);border-radius:999px;padding:5px 12px}
.tl-places a:hover{color:var(--ink);border-color:#3a3a40;text-decoration:none}

.tl-meta{font-size:.8rem;color:var(--ink-mute);border-top:1px solid var(--hair);padding-top:14px;margin-top:8px}

/* ── Hub ──────────────────────────────────────────────────────────────── */
.th-group{margin:0 0 clamp(36px,5vh,56px)}
.th-group h2{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 14px}
.tl-body .th-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.th-card{display:flex;flex-direction:column;height:100%;background:var(--surface);border:1px solid var(--hair);border-radius:16px;overflow:hidden;color:var(--ink-dim);text-decoration:none;transition:border-color .15s ease, transform .15s ease}
.th-card:hover{border-color:#3a3a40;text-decoration:none;transform:translateY(-1px)}
.th-card__art{background:var(--t-field);border-bottom:1px solid var(--hair-soft);aspect-ratio:16/7;display:flex;align-items:center;justify-content:center}
.th-card__art svg{width:100%;height:100%}
.th-card__body{padding:16px 18px 18px}
.th-card__body b{display:block;color:var(--ink);font-size:1.05rem;font-weight:600;margin-bottom:6px}
.th-card__body span{display:block;font-size:.9rem;line-height:1.5}
.tl-body .th-grid li{margin:0}

/* ── Einbett-Kasten ───────────────────────────────────────────────────── */
.tl-embed{background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:18px 20px;margin:0 0 clamp(40px,6vh,60px)}
.tl-embed h2{font-size:1.2rem!important}
.tl-embed textarea{width:100%;background:var(--t-field);border:1px solid var(--t-field-edge);border-radius:10px;color:var(--ink-dim);font-family:var(--mono);font-size:.8rem;padding:10px;resize:vertical}
.tl-embed .row{display:flex;gap:12px;align-items:center;margin-top:10px;font-size:.88rem}

/* ── Cookie-Hinweis: auf Werkzeug-Seiten als schmale Leiste statt Kasten ─ */
html.tl-page .tgc .tgc__box{max-width:none;border-radius:0;border-left:0;border-right:0;border-bottom:0;padding:10px clamp(16px,4vw,32px)}

/* ── Mobil ────────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .tool__grid{grid-template-columns:minmax(0,1fr)}
  .tl-handoff{grid-template-columns:1fr}
}
@media (max-width:560px){
  .tool{border-radius:14px;padding:14px;margin-inline:-6px}
  .frow3{grid-template-columns:1fr 1fr}
  .tool__bar{flex-direction:column;align-items:stretch}
  .tool__handoff{text-align:center;white-space:normal}
  .tstats{grid-template-columns:1fr 1fr}
  .tstats dd{font-size:1rem}
}

/* ── Einbettung ───────────────────────────────────────────────────────── */
html.embed #nav,html.embed .skip,html.embed footer,html.embed .footer,html.embed .tl-hero,html.embed .tl-body,html.embed .tgc{display:none!important}
html.embed .tl-tool{padding:0}
html.embed body{padding:10px}

/* ── Druck ────────────────────────────────────────────────────────────── */
/* Alles außer dem Werkzeug fällt per display:none weg (nicht visibility —
   sonst belegt der Rest der Seite Platz und es entstehen leere Folgeseiten). */
@media print{
  html,body{background:#fff!important;color:#000!important}
  html.tl-page body>*:not(main),html.tl-page main>*:not(.tl-tool){display:none!important}
  .tl-tool,.tl-tool .wrap{padding:0!important;margin:0!important;max-width:none!important}
  .tool{border:0;box-shadow:none;background:#fff;color:#000;padding:0}
  .tool footer{display:block!important}
  .tool [data-noprint],.tool__bar,.tool__note,.ttabs,.tool__in{display:none!important}
  .tool__grid{display:block}
  .tool__say,.tool__say b,.tstats dd,.ttable td,.ttable td:first-child{color:#000!important}
  .tool__say .n{color:#000!important}
  .tstats,.tstats>div{background:#fff;border-color:#ccc}
  .tviz{background:#fff;border-color:#ccc}
  .tool [data-print-only]{display:block!important}
  html.tgt-print-sheet .tool>*:not(.tool__grid),html.tgt-print-sheet .tool__out>*:not([data-print]):not(:has([data-print])){display:none!important}
}
[data-print-only]{display:none}