/* =========================================================
   Gemeinsame Seiten-Chrome. Ergänzt brand.css.
   ========================================================= */

/* ---------- Kopfzeile ----------
   Zwei Zustände: über dem Hero transparent mit heller
   Schrift, ab dem Scrollen fest auf Papier.              */
header.site{
  position:sticky;top:0;z-index:60;
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease),
             color .35s var(--ease), backdrop-filter .35s var(--ease);
}
.hrow{display:flex;align-items:center;justify-content:space-between;gap:clamp(1rem,2vw,1.8rem);padding:1.05rem 0}
.hrow > .btn{white-space:nowrap;flex:none}
.brand{flex:none}

/* Standard: helle Seiten */
header.site{background:rgba(243,241,236,.88);backdrop-filter:blur(16px);border-bottom-color:var(--line)}

/* Über dem Hero */
header.site.over{background:transparent;backdrop-filter:none;border-bottom-color:transparent;color:#fff;margin-bottom:-84px}
header.site.over .brand-word{color:#fff}
header.site.over .brand-word small{color:rgba(255,255,255,.6)}
header.site.over .hnav a{color:rgba(255,255,255,.78)}
header.site.over .hnav a:hover{color:#fff}
header.site.over .btn-primary{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3);backdrop-filter:blur(8px)}
header.site.over .btn-primary:hover{background:#fff;color:var(--ink);border-color:#fff}

/* Nach dem Scrollen */
header.site.over.stuck{
  background:rgba(243,241,236,.9);backdrop-filter:blur(16px);
  border-bottom-color:var(--line);color:var(--ink);margin-bottom:0;
}
header.site.over.stuck .brand-word{color:var(--ink)}
header.site.over.stuck .brand-word small{color:var(--muted)}
header.site.over.stuck .hnav a{color:var(--muted)}
header.site.over.stuck .hnav a:hover{color:var(--ink)}
header.site.over.stuck .btn-primary{background:var(--ink);color:#fff;border-color:transparent;backdrop-filter:none}
header.site.over.stuck .btn-primary:hover{background:var(--ink-2)}

/* clamp beim Abstand: bei 1100px sitzen sechs Einträge eng, bei 1500px
   dürfen sie atmen. nowrap ist Pflicht, sonst brechen "So funktioniert es"
   und "7 University" mitten im Wort um. Genau das war der Fehler. */
.hnav{display:flex;align-items:center;gap:clamp(1.1rem,1.9vw,2rem);font-size:.88rem;font-weight:500}
.hnav a{text-decoration:none;color:var(--muted);padding:.22rem 0;border-bottom:1px solid transparent;
  white-space:nowrap;
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.hnav a:hover{color:var(--ink)}
.hnav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--signal)}
header.site.over .hnav a[aria-current="page"]{color:#fff;border-bottom-color:var(--signal-up)}
@media(max-width:1100px){.hnav{display:none}}

/* ---------- Menü für schmale Geräte ----------
   Unter 980px verschwindet die Zeilennavigation. Statt sie ersatzlos
   zu streichen, wird dieselbe Navigation zur aufklappbaren Tafel.
   Der Knopf bringt sein Aussehen komplett selbst mit, damit er auf
   keinem Kopf-Zustand und über keinem Bild verschwinden kann. */
.menue-knopf{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;padding:0;margin-left:auto;
  border-radius:12px;cursor:pointer;position:relative;z-index:56;
  background:var(--paper-2);border:1px solid var(--line);
  box-shadow:0 2px 10px rgba(14,11,12,.14);
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.menue-knopf:hover{background:#fff;border-color:#D2CABA}
.menue-knopf svg{width:20px;height:20px;display:block}

/* Abdunklung hinter der Tafel */
.menue-schatten{
  position:fixed;inset:0;z-index:54;background:rgba(14,11,12,.5);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
  border:0;padding:0;cursor:pointer;
}

@media(max-width:1100px){
  .menue-knopf{display:flex}
  /* Der Kopf-CTA wandert in die Tafel, damit oben Platz bleibt */
  .hrow > .btn{display:none}

  .hnav{
    display:flex;flex-direction:column;gap:0;
    position:fixed;left:0;right:0;top:0;
    padding:calc(74px + 1.4rem) clamp(1.25rem,5vw,2rem) 2rem;
    background:var(--paper-2);
    max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;
    transform:translateY(-102%);
    transition:transform .34s var(--ease),visibility .34s;
    visibility:hidden;z-index:55;
    box-shadow:0 30px 70px rgba(14,11,12,.22);
  }
  html.menue-offen .hnav{transform:translateY(0);visibility:visible}

  /* In der Tafel immer dunkle Schrift, auch über dem Hero */
  header.site.over .hnav a,
  header.site.over.stuck .hnav a,
  .hnav a{
    color:var(--ink);font-family:var(--ui);font-size:1.12rem;font-weight:600;
    letter-spacing:-.015em;padding:1rem 0;border-bottom:1px solid var(--line-2);
    border-top:0;min-height:52px;display:flex;align-items:center;
  }
  .hnav a:last-of-type{border-bottom:0}
  .hnav a[aria-current="page"],
  header.site.over .hnav a[aria-current="page"]{
    color:var(--signal-ink);border-bottom-color:var(--line-2);
  }
  .hnav a[aria-current="page"]::after{
    content:"";width:7px;height:7px;border-radius:50%;background:var(--signal);margin-left:.7rem;
  }
  .menue-cta{display:flex;width:100%;margin-top:1.4rem}

  /* Marke bleibt über der Tafel sichtbar */
  html.menue-offen .brand{position:relative;z-index:56}
  html.menue-offen header.site.over .brand-word{color:var(--ink)}
  html.menue-offen header.site.over .brand-word small{color:var(--muted)}

  /* Sperre nur hier drin, sonst bliebe die Seite am Desktop gesperrt */
  html.menue-offen body{overflow:hidden}
  html.menue-offen .menue-schatten{opacity:1;visibility:visible}
}
@media(min-width:1101px){
  .menue-cta{display:none}
  .menue-schatten{display:none}
}
@media(max-width:520px){
  .hrow .btn{padding:.76rem 1.1rem;font-size:.88rem}
  .brand-word{font-size:.88rem}
}

/* ---------- Seitenkopf für Unterseiten ---------- */
.pagehead{
  position:relative;background:var(--ink);color:var(--white);
  padding:clamp(4.5rem,11vw,7.5rem) 0 clamp(3rem,7vw,5rem);overflow:hidden;isolation:isolate;
}
.pagehead::after{
  content:"";position:absolute;inset:auto -14% -62% auto;width:min(680px,80vw);aspect-ratio:1;
  background:radial-gradient(circle, rgba(110,20,40,.16), transparent 68%);pointer-events:none;z-index:-1;
}
.pagehead.with-img::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(10,8,9,.95) 0%,rgba(10,8,9,.8) 52%,rgba(10,8,9,.45) 100%);
}
.pagehead .bg{position:absolute;inset:0;z-index:-2}
.pagehead .bg img{width:100%;height:100%;object-fit:cover}
.pagehead .wrap,.pagehead .wrap-narrow{position:relative;z-index:1}
.pagehead h1{color:var(--white);max-width:18ch}
.pagehead .lead{color:rgba(255,255,255,.74);margin-top:1.6rem}
.pagehead .meta{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-family:var(--ui);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.5);margin-top:1.8rem}

/* ---------- Fließtext ---------- */
.prose{max-width:68ch}
.prose h2{margin:3.2rem 0 1rem;font-size:clamp(1.6rem,3vw,2.15rem)}
.prose h2:first-child{margin-top:0}
.prose h3{margin:2.2rem 0 .65rem}
.prose p{color:#3E3936;line-height:1.82}
.prose ul,.prose ol{padding-left:1.35rem;margin:0 0 1.2rem;color:#3E3936;line-height:1.82}
.prose li{margin-bottom:.6rem}
.prose li::marker{color:var(--signal)}
.prose a{color:var(--signal-ink)}
.prose strong{font-weight:700;color:var(--ink)}
.prose hr{border:0;border-top:1px solid var(--line);margin:3rem 0}
.prose .intro{font-family:var(--serif);font-size:clamp(1.25rem,2.3vw,1.6rem);line-height:1.38;
  color:var(--ink);letter-spacing:-.012em;margin-bottom:2.4rem}

/* ---------- Hinweiskasten ---------- */
.note{
  background:var(--paper);border:1px solid var(--line);border-left:2px solid var(--signal);
  border-radius:0 var(--radius) var(--radius) 0;padding:1.45rem 1.6rem;margin:2rem 0;
}
.note p{margin-bottom:.6rem;font-size:.94rem;line-height:1.72}
.note p:last-child{margin-bottom:0}
.note b{font-family:var(--ui);font-weight:600;letter-spacing:-.012em;font-size:.95rem}
.note.warn{border-left-color:var(--warn);background:rgba(168,132,44,.055)}

/* ---------- Tabelle ---------- */
.tbl-scroll{overflow-x:auto;margin:1.6rem 0;-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:collapse;font-size:.92rem;min-width:420px}
table.data th,table.data td{padding:.75rem .9rem;text-align:left;border-bottom:1px solid var(--line)}
table.data th{font-family:var(--ui);font-weight:600;font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);border-bottom-color:var(--ink)}
table.data td:last-child,table.data th:last-child{text-align:right;white-space:nowrap}
table.data tr:last-child td{border-bottom:0}
table.data tr.sum td{font-weight:700;background:rgba(14,11,12,.035);border-top:1px solid var(--signal)}

/* ---------- Wissens-Karten ---------- */
.artgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem}
.art{
  display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:1.9rem 1.75rem;text-decoration:none;color:inherit;
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.art:hover{border-color:#D2CABA;transform:translateY(-3px);box-shadow:var(--shadow-md)}
.art .tag{font-family:var(--ui);font-size:.64rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--signal-ink);margin-bottom:1rem}
.art h3{margin-bottom:.6rem}
.art p{font-size:.92rem;color:var(--muted);line-height:1.66;margin:0;flex:1}
.art .more{font-family:var(--ui);font-size:.84rem;font-weight:600;color:var(--ink);margin-top:1.3rem}
.art.soon{opacity:.55;pointer-events:none}
.art.soon .more{color:var(--muted)}

/* ---------- Sticky Beikasten ---------- */
.split{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
/* Rasterkinder duerfen schrumpfen. Ohne das erzwingt der breiteste
   Inhalt die Spaltenbreite und ragt auf Telefonen ueber den Rand. */
.split > *{min-width:0}
@media(max-width:960px){.split{grid-template-columns:1fr;gap:2.4rem}}
.sticky{position:sticky;top:104px}
@media(max-width:960px){.sticky{position:static}}

/* ---------- Abschluss-CTA ---------- */
.endcta{text-align:center;max-width:660px;margin:0 auto}
.endcta .btn{margin-top:1.9rem}
.endcta .trust{justify-content:center}

/* ---------- Rückverweis ---------- */
.backlink{display:inline-block;font-family:var(--ui);font-size:.83rem;font-weight:600;
  color:var(--muted);text-decoration:none;margin-bottom:1.8rem}
.backlink:hover{color:var(--ink)}

/* ---------- Rechtsdokumente ---------- */
.doc{max-width:760px;margin:0 auto;padding:3rem 26px 5rem}
.doc h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:1.8rem}
.doc h2{font-size:1.2rem;font-family:var(--ui);font-weight:600;margin:2.6rem 0 .8rem;letter-spacing:-.015em}
.doc p,.doc li{font-size:.94rem;line-height:1.78;color:#3E3936}
.doc ul{padding-left:1.3rem}
.doc a{color:var(--signal-ink)}
.todo{
  background:rgba(168,132,44,.08);border:1px solid rgba(168,132,44,.28);
  border-left:2px solid var(--warn);border-radius:0 var(--radius) var(--radius) 0;
  padding:1.15rem 1.35rem;margin:1rem 0 1.6rem;font-size:.9rem;line-height:1.7;color:#5A4A1C;
}
.todo b{color:#3C310E}

/* Links mitten im Satz bleiben inline. Ein inline-block würde den
   Zeilenumbruch innerhalb des Linktextes verhindern und auf schmalen
   Geräten über den Rand laufen. Die Mindestgröße für Tap-Ziele gilt
   für Links im Fließtext ohnehin nicht. */