/* ============================================================
   HandwerkStart — Design-System
   Eine Datei, ein System. Änderungen hier wirken auf allen Seiten.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Farbe — Tiefe statt Fläche */
  --ink:#0A0F1E;         --ink-2:#111A30;      --ink-3:#1A2745;
  --gold:#C9A227;        --gold-hell:#E3C463;  --gold-tief:#A8861B;
  --gold-schimmer:#FDF8EA;
  --ivory:#FBF9F4;       --paper:#FFFFFF;      --nebel:#F5F2EA;
  --text:#1A2233;        --muted:#5A6577;      --faint:#98A1AE;
  --line:#E9E4D8;        --line-fein:#F1EDE3;  --line-dark:rgba(255,255,255,.09);
  --gruen:#1E8E5A;       --gruen-hell:#E7F5EE;
  --rot:#C0392B;         --rot-hell:#FBEAE7;

  /* Typografie — modulare Skala 1.25 */
  --display:'Fraunces',Georgia,serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --t-xs:.78rem; --t-s:.88rem; --t-m:1rem; --t-l:1.15rem;
  --t-xl:1.45rem; --t-2xl:1.85rem; --t-3xl:2.4rem; --t-4xl:3.2rem; --t-5xl:4rem;

  /* Raum — 8pt-Raster */
  --r-1:4px;  --r-2:8px;  --r-3:16px; --r-4:24px; --r-5:32px;
  --r-6:48px; --r-7:64px; --r-8:96px; --r-9:128px;

  /* Form */
  --rad-s:10px; --rad-m:16px; --rad-l:24px; --rad-xl:32px;
  --sh-1:0 1px 2px rgba(10,15,30,.04);
  --sh-2:0 4px 16px -4px rgba(10,15,30,.08);
  --sh-3:0 14px 40px -16px rgba(10,15,30,.16);
  --sh-4:0 34px 80px -26px rgba(10,15,30,.28);
  --sh-dunkel:0 34px 90px -24px rgba(0,0,0,.6);

  /* Bewegung */
  --ease:cubic-bezier(.22,1,.36,1);
  --schnell:.16s var(--ease); --normal:.28s var(--ease); --ruhig:.6s var(--ease);
}

/* ---------- 2. FUNDAMENT ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);background:var(--ivory);color:var(--text);
  font-size:var(--t-m);line-height:1.7;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--display);color:var(--ink);
  letter-spacing:-.022em;line-height:1.12;font-weight:600;
  text-wrap:balance;
}
h1{font-size:clamp(2.1rem,5.2vw,var(--t-5xl));letter-spacing:-.03em;line-height:1.06}
h2{font-size:clamp(1.5rem,3.2vw,var(--t-2xl))}
h3{font-size:var(--t-l)}
p{text-wrap:pretty}
a{color:var(--gold-tief);text-decoration:none}
a:hover{color:var(--gold)}
/* Unterstreichung nur dort, wo sie Lesbarkeit stiftet: im Fließtext */
.inhalt p a,.inhalt li a,.merk a,.faq-b a,.rechts p a,.rechts li a{
  text-decoration:underline;text-decoration-thickness:1px;
  text-decoration-color:rgba(168,134,27,.35);text-underline-offset:.18em;
  transition:text-decoration-color var(--schnell);
}
.inhalt p a:hover,.inhalt li a:hover,.merk a:hover,.faq-b a:hover{text-decoration-color:var(--gold)}
strong,b{font-weight:650;color:var(--ink)}
em{font-style:italic}
::selection{background:var(--gold-hell);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r-1)}
img{max-width:100%;height:auto;display:block}

.wrap{max-width:1140px;margin:0 auto;padding:0 var(--r-4)}

/* ---------- 3. NAVIGATION ---------- */
.nav{
  background:var(--ink);padding:var(--r-3) 0;position:sticky;top:0;z-index:60;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--r-3)}
.logo{
  font-family:var(--display);font-weight:700;font-size:1.2rem;color:#fff;
  text-decoration:none;letter-spacing:-.02em;flex-shrink:0;
}
.logo i{font-style:normal;color:var(--gold-hell)}
.logo small{
  display:block;font-family:var(--body);font-size:.58rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-top:3px;
}
.nav-links{display:flex;align-items:center;gap:var(--r-4)}
.nav-links a{
  color:rgba(255,255,255,.68);text-decoration:none;font-size:var(--t-s);
  font-weight:500;transition:color var(--schnell);white-space:nowrap;position:relative;
}
.nav-links a:hover{color:var(--gold-hell)}
.nav-links a.aktiv{color:#fff}
.nav-links a.aktiv::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--gold);border-radius:2px;
}

/* ---------- 4. KNÖPFE ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--r-2);
  font-family:var(--body);font-weight:650;font-size:var(--t-s);
  padding:13px var(--r-4);border-radius:99px;border:none;cursor:pointer;
  text-decoration:none;transition:transform var(--schnell),box-shadow var(--schnell);
  white-space:nowrap;
}
.btn-gold{
  background:linear-gradient(135deg,var(--gold-hell),var(--gold-tief));
  color:var(--ink);box-shadow:0 2px 14px -4px rgba(201,162,39,.5);
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 26px -6px rgba(201,162,39,.55);color:var(--ink)}
.btn-linie{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn-linie:hover{border-color:var(--gold);color:var(--gold-tief)}
.btn-dunkel{background:var(--ink);color:#fff}
.btn-dunkel:hover{transform:translateY(-2px);color:#fff}
.btn:disabled{opacity:.55;cursor:wait;transform:none}
.btn-nav{padding:9px 20px;font-size:var(--t-xs)}

/* ---------- 5. SEITENKOPF ---------- */
.kopf{
  background:var(--ink);color:#fff;padding:var(--r-8) 0 var(--r-7);
  position:relative;overflow:hidden;
}
.kopf::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(680px 460px at 86% 6%,rgba(201,162,39,.16),transparent 62%),
    radial-gradient(520px 420px at 4% 96%,rgba(30,142,90,.07),transparent 62%);
}
.kopf .wrap{position:relative;z-index:1;max-width:920px}
.kopf .label{
  display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-hell);margin-bottom:var(--r-3);
}
.kopf h1{color:#fff;margin-bottom:var(--r-4);max-width:17ch}
.kopf h1 em{font-style:italic;color:var(--gold-hell)}
.kopf > .wrap > p{
  color:rgba(255,255,255,.68);font-size:var(--t-l);max-width:60ch;line-height:1.65;
}

/* ---------- 6. BROTKRUMEN ---------- */
.brot{
  background:var(--paper);border-bottom:1px solid var(--line);
  padding:var(--r-3) 0;font-size:var(--t-xs);color:var(--muted);
}
.brot a{color:var(--muted);text-decoration:none;transition:color var(--schnell)}
.brot a:hover{color:var(--gold-tief)}

/* ---------- 7. INHALTSFLÄCHE ---------- */
.inhalt{max-width:760px;margin:0 auto;padding:var(--r-8) var(--r-4) var(--r-6)}
.inhalt h2{margin:var(--r-7) 0 var(--r-3);scroll-margin-top:90px}
.inhalt h2:first-child{margin-top:0}
.inhalt h3{margin:var(--r-5) 0 var(--r-2)}
.inhalt p{margin-bottom:var(--r-3);font-size:1.04rem;line-height:1.78;max-width:68ch}
.inhalt ul,.inhalt ol{margin:0 0 var(--r-4) var(--r-4);max-width:66ch}
.inhalt li{margin-bottom:10px;line-height:1.72;padding-left:var(--r-1)}
.inhalt li::marker{color:var(--gold)}
.inhalt a{font-weight:600}

/* Kernaussage — die McKinsey-Box: Antwort zuerst */
.merk{
  background:var(--gold-schimmer);border-left:3px solid var(--gold);
  border-radius:0 var(--rad-m) var(--rad-m) 0;
  padding:var(--r-4) var(--r-5);margin:var(--r-5) 0;
  box-shadow:var(--sh-1);
}
.merk p{margin-bottom:10px;font-size:1.02rem}
.merk p:last-child{margin-bottom:0}

/* ---------- 8. TABELLEN — weniger Linien, mehr Raum ---------- */
.tab-umbruch{overflow-x:auto;margin:var(--r-5) 0;-webkit-overflow-scrolling:touch}
table.dt{width:100%;border-collapse:collapse;font-size:var(--t-s);min-width:440px}
table.dt th{
  background:transparent;color:var(--faint);text-align:left;
  padding:0 var(--r-3) 10px;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;border-bottom:2px solid var(--ink);
}
table.dt td{padding:13px var(--r-3);border-bottom:1px solid var(--line-fein)}
table.dt tr:last-child td{border-bottom:none}
table.dt td.z{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
table.dt tr.hebel td{background:var(--gold-schimmer);font-weight:650}
table.dt tr.hebel td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.quelle{font-size:var(--t-xs);color:var(--faint);margin-top:10px;font-style:italic;line-height:1.6}

/* ---------- 9. FAQ ---------- */
.faq-b{border-bottom:1px solid var(--line-fein);padding:var(--r-4) 0}
.faq-b:last-child{border-bottom:none}
.faq-b h3{margin:0 0 var(--r-2);font-size:1.06rem}
.faq-b p{margin:0;color:var(--muted);max-width:68ch}

/* ---------- 10. PERSON ---------- */
.person{display:grid;grid-template-columns:150px 1fr;gap:var(--r-5);align-items:start;margin:var(--r-4) 0 var(--r-6)}
.person .bild{
  width:150px;height:150px;border-radius:var(--rad-l);
  background:linear-gradient(140deg,var(--ink),var(--ink-3));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:2.6rem;color:var(--gold-hell);
  box-shadow:var(--sh-3);
}

/* ---------- 11. FUSSZEILE ---------- */
footer{background:var(--ink);color:rgba(255,255,255,.5);padding:var(--r-6) 0;margin-top:var(--r-8)}
footer .wrap{
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--r-4);flex-wrap:wrap;font-size:var(--t-xs);
}
footer a{color:rgba(255,255,255,.5);text-decoration:none;margin-left:var(--r-4);transition:color var(--schnell)}
footer a:first-child{margin-left:0}
footer a:hover{color:var(--gold-hell)}
footer > .wrap > span:last-child{display:flex;flex-wrap:wrap;gap:0 var(--r-1);justify-content:flex-end}

/* ---------- 12. MOBIL ---------- */
@media(max-width:900px){
  .nav-links a:not(.btn){display:none}
  .kopf{padding:var(--r-7) 0 var(--r-6)}
  .inhalt{padding:var(--r-6) var(--r-4) var(--r-5)}
  .inhalt h2{margin-top:var(--r-6)}
  .person{grid-template-columns:1fr;gap:var(--r-4)}
  .person .bild{width:104px;height:104px;font-size:2rem}
  .merk{padding:var(--r-4);margin:var(--r-4) 0}
  footer .wrap{flex-direction:column;align-items:flex-start;text-align:left}
  footer > .wrap > span:last-child{justify-content:flex-start;margin-left:0}
  footer a{margin-left:0;margin-right:var(--r-3)}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{
  .nav,footer,.brot{display:none}
  body{background:#fff}
  .kopf{background:#fff;color:#000;padding:0 0 var(--r-4)}
  .kopf h1,.kopf > .wrap > p{color:#000}
}