/* ═══════════════════════════════════════════════════════════════
   baufi-tepe.de · Toolbox
   Gemeinsames Stylesheet aller Tool-Seiten (Stil nach DESIGN.md)
   ═══════════════════════════════════════════════════════════════ */

:root{
  --blue: #0018A8;
  --blue-deep: #000B57;
  --paper: #EEF1FA;
  --line: rgba(0,24,168,0.16);
  --line-faint: rgba(0,24,168,0.10);
  --white: #FFFFFF;
  --ink: #0A1130;
  --ink-soft: #4A5184;
  --gold: #C9A227;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --maxw: 900px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ overflow-x:clip; }
body{ font-family:var(--font-body); color:var(--ink); background:var(--white); line-height:1.7; }
a{ color:var(--blue); }
img{ display:block; max-width:100%; height:auto; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 1.5rem; }

header{ border-bottom:1px solid var(--line); padding:1.25rem 0; }
header .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.logo{ font-family:var(--font-display); font-weight:600; font-size:1.2rem; color:var(--blue); text-decoration:none; }
.back-link{ font-size:0.9rem; }

main{ padding:3.5rem 0 4.5rem; }
.eyebrow{
  font-family:var(--font-mono); font-weight:600; font-size:0.72rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft);
}
.eyebrow b{ color:var(--blue); font-weight:600; }
h1{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.9rem,5vw,2.9rem);
    line-height:1.12; margin:0.75rem 0 0.75rem; overflow-wrap:break-word; hyphens:manual; }
.lede{ color:var(--ink-soft); max-width:640px; }
.rule{ width:72px; height:3px; background:var(--gold); margin:1.75rem 0 2.25rem; }

h2{ font-family:var(--font-display); font-weight:600; font-size:1.45rem; line-height:1.25; margin:2.25rem 0 0.75rem; }
p{ margin-bottom:1rem; max-width:62ch; }
.soft{ color:var(--ink-soft); }

/* ── Kachel-Übersicht ── */
.card-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:720px){ .card-grid{ grid-template-columns:1fr 1fr; } }
.card{
  border:1px solid var(--line); background:var(--white);
  padding:1.75rem 1.75rem 1.5rem; display:flex; flex-direction:column;
  transition:border-color 150ms cubic-bezier(.4,0,.2,1), background 150ms cubic-bezier(.4,0,.2,1);
}
.card:hover{ border-color:var(--blue); background:var(--paper); }
.card.is-soon{ background:var(--paper); }
.card.is-soon:hover{ border-color:var(--line); }
.card-meta{
  font-family:var(--font-mono); font-weight:600; font-size:0.68rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft);
  display:flex; gap:0.75rem; flex-wrap:wrap; margin-bottom:0.9rem;
}
.card-meta .cat{ color:var(--blue); }
.card-meta .soon{ color:var(--gold); }
.card h2{ font-size:1.35rem; margin:0 0 0.6rem; }
.card h2 a{ color:var(--ink); text-decoration:none; }
.card h2 a:hover{ color:var(--blue); }
.card p{ color:var(--ink-soft); font-size:0.95rem; margin-bottom:1.25rem; }
.card .more{
  margin-top:auto; font-family:var(--font-mono); font-weight:600; font-size:0.75rem;
  letter-spacing:0.08em; text-transform:uppercase; text-decoration:none;
}
.card .more:hover{ text-decoration:underline; text-underline-offset:4px; }
.card-ikon{ width:44px; height:44px; margin-bottom:1rem; color:var(--blue); }
.card-ikon svg{ width:100%; height:100%; display:block; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.card-ikon .gold{ stroke:var(--gold); }

.hint{
  margin-top:3rem; border:1px solid var(--line); background:var(--paper);
  padding:1.5rem 1.75rem; font-size:0.95rem; color:var(--ink-soft);
}
.hint strong{ color:var(--ink); }

/* ── Rechner-Bausteine ── */
.tool-grid{ display:grid; grid-template-columns:1fr; gap:2rem; align-items:start; }
@media (min-width:820px){ .tool-grid{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:2.5rem; } }

.feld{ margin-bottom:1.75rem; }
.feld-kopf{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:0.5rem; }
.feld-kopf label{
  font-family:var(--font-mono); font-weight:600; font-size:0.72rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft);
}
.feld-wert{
  font-family:var(--font-mono); font-weight:600; font-size:1rem; color:var(--blue);
  border:none; border-bottom:1px solid var(--line); background:transparent;
  text-align:right; width:9.5rem; padding:0.15rem 0.25rem;
}
.feld-wert:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.feld-einheit{ font-family:var(--font-mono); font-weight:600; color:var(--blue); }

input[type=range]{
  width:100%; appearance:none; -webkit-appearance:none; height:2px;
  background:var(--line); outline-offset:6px; margin:0.9rem 0 0;
}
input[type=range]::-webkit-slider-thumb{
  appearance:none; -webkit-appearance:none; width:22px; height:22px;
  background:var(--blue); border:none; border-radius:0; cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:22px; height:22px; background:var(--blue); border:none; border-radius:0; cursor:pointer;
}

.wahl{ display:flex; gap:0.5rem; flex-wrap:wrap; }
.wahl button{
  flex:1 1 120px; min-height:48px; padding:0.5rem 0.9rem;
  border:1px solid var(--line); background:var(--white); border-radius:0;
  font-family:var(--font-body); font-weight:600; font-size:0.9rem; color:var(--ink);
  cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  transition:border-color 150ms, background 150ms, color 150ms;
}
.wahl button span{ font-family:var(--font-mono); font-weight:500; font-size:0.7rem; color:var(--ink-soft); }
.wahl button.is-active{ background:var(--blue); border-color:var(--blue); color:#fff; }
.wahl button.is-active span{ color:rgba(255,255,255,0.75); }

.ergebnis{
  border:1px solid var(--line); background:var(--paper);
  padding:1.6rem 1.75rem;
}
.erg-zeile{
  display:flex; justify-content:space-between; gap:1rem;
  padding:0.5rem 0; font-size:0.95rem; color:var(--ink-soft);
  border-bottom:1px solid var(--line-faint);
}
.erg-zeile span:last-child{ font-family:var(--font-mono); color:var(--ink); white-space:nowrap; }
.erg-summe{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:0.2rem 1rem; flex-wrap:wrap;
  padding:1rem 0 0.25rem; margin-top:0.5rem;
}
.erg-summe .label{
  font-family:var(--font-mono); font-weight:600; font-size:0.72rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft);
}
.erg-summe .wert{
  font-family:var(--font-mono); font-weight:600; font-size:1.9rem; color:var(--blue); white-space:nowrap;
}
@media (max-width:480px){
  .erg-summe .wert{ font-size:1.6rem; }
  .ergebnis{ padding:1.3rem 1.2rem; }
  .feld-wert{ width:7rem; }
  .feld-kopf{ gap:0.5rem; }
  .feld-kopf > span{ white-space:nowrap; }
}
.erg-sub{ font-size:0.85rem; color:var(--ink-soft); }
.disclaimer{ margin-top:1rem; font-size:0.78rem; color:var(--ink-soft); max-width:none; }

/* ── CTA-Stufen ── */
.cta-weich{
  margin-top:2.5rem; border:1px solid var(--line); background:var(--paper);
  padding:1.5rem 1.75rem;
}
.cta-weich p{ color:var(--ink-soft); font-size:0.95rem; margin-bottom:1rem; }
.cta-weich p strong{ color:var(--ink); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  min-height:48px; padding:0.7rem 1.4rem; text-decoration:none;
  font-weight:600; font-size:0.95rem; border-radius:0; cursor:pointer;
}
.btn-primary{ background:var(--blue); color:#fff; border:none; }
.btn-primary:hover{ background:var(--blue-deep); }
.btn-ghost{ border:1px solid var(--blue); color:var(--blue); background:transparent; }
.btn-ghost:hover{ background:var(--white); }

footer{ border-top:1px solid var(--line); padding:2rem 0; font-size:0.85rem; color:var(--ink-soft); margin-top:3rem; }
footer .container{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-links{ display:flex; flex-wrap:wrap; gap:1.5rem; }