/* ==========================================================================
   Seilnacht Hub – style.css   (Version im HTML: ?v=20260915p2)
   0. Schrift (Jost, variabel, selbst gehostet)
   1. Tokens
   2. Reset & Basis
   3. Kopf: Wortmarke, Tagline, Bereichs-Navigation
   4. Eyebrow, Headline, Lede
   5. Rows (Linkliste)
   6. Abschnitte, Karten, Chips, Leerzustand
   7. Fußzeile
   8. Fallbacks
   ========================================================================== */

/* 0. Schrift ------------------------------------------------------------ */
@font-face{
  font-family:'Jost';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/jost-variable.woff2') format('woff2');
}

/* 1. Tokens ------------------------------------------------------------- */
:root{
  --bg:#FBF8F1;
  --surface:#FFFFFF;
  --surface-2:#F1EADA;
  --ink:#23283A;
  --ink-soft:#5B6172;
  --accent:#77202F;
  --accent-ink:#FFFFFF;
  --line:rgba(35,40,58,0.16);
  --font:'Jost',-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --page-max:480px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#171A24;
    --surface:#1D2130;
    --surface-2:#242939;
    --ink:#F5F2EA;
    --ink-soft:#A9AFC2;
    --accent:#93283B;
    --accent-ink:#FFFFFF;
    --line:rgba(245,242,234,0.16);
  }
}

/* 2. Reset & Basis ------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-weight:300;
  line-height:1.45;
  padding-block:40px;
  padding-inline:16px;
  min-height:100vh;
}
a{ color:inherit; text-decoration:none; touch-action:manipulation; }
a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
svg{ display:block; }
[hidden]{ display:none !important; }
.page{ width:100%; max-width:var(--page-max); margin-inline:auto; }

/* 3. Kopf --------------------------------------------------------------- */
.masthead{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.brand{ display:inline-block; color:var(--accent); }
.wordmark{ width:168px; height:auto; }
.tagline{
  margin-top:14px;
  font-size:11.5px;
  font-weight:400;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.hubnav{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:22px; }
.hubnav a{
  padding:8px 15px;
  font-size:11.5px;
  font-weight:500;
  letter-spacing:0.12em;
  text-transform:uppercase;
  border:1px solid var(--line);
  color:var(--ink-soft);
  transition:border-color 0.15s ease, color 0.15s ease;
}
.hubnav a[aria-current="page"]{ border-color:var(--accent); color:var(--ink); background:var(--surface-2); }

/* 4. Eyebrow, Headline, Lede ------------------------------------------- */
.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:40px;
  font-size:11.5px;
  font-weight:500;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--ink-soft); }
.headline{
  margin-top:10px;
  font-size:clamp(38px, 11vw, 52px);
  line-height:0.98;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:0.01em;
  text-wrap:balance;
  overflow-wrap:break-word;
  hyphens:auto;
}
.headline em{ font-style:normal; color:var(--accent); }
.lede{
  margin-top:16px;
  font-size:15.5px;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:46ch;
  text-wrap:pretty;
}

/* 5. Rows --------------------------------------------------------------- */
.rows{ display:flex; flex-direction:column; gap:10px; margin-top:28px; }
.section-label + .rows{ margin-top:14px; }
.row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  background:var(--surface);
  border:1px solid var(--line);
  transition:border-color 0.15s ease;
}
.row:hover{ border-color:var(--accent); }
.row.primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.row.primary .row-icon{ color:var(--accent-ink); }
.row.primary .row-sub{ color:color-mix(in srgb, var(--accent-ink) 74%, transparent); }
.row-icon{ flex:none; width:21px; height:21px; color:var(--accent); }
.row-icon svg{ width:100%; height:100%; }
.row-text{ display:flex; flex-direction:column; min-width:0; }
.row-label{ font-size:15px; font-weight:400; letter-spacing:0.01em; }
.row-sub{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; letter-spacing:0.03em; line-height:1.4; }
.row-arrow{ margin-left:auto; flex:none; width:13px; height:13px; opacity:0.55; }

/* 6. Abschnitte, Karten, Chips ----------------------------------------- */
.section-label{
  margin-top:34px;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.cards{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.card{ border:1px solid var(--line); background:var(--surface); padding:18px; }
.card-meta{ font-size:12px; color:var(--accent); letter-spacing:0.04em; text-transform:uppercase; }
.card-title{ margin-top:4px; font-size:16px; font-weight:400; text-wrap:balance; }
.card-copy{ margin-top:8px; font-size:13.5px; line-height:1.55; color:var(--ink-soft); }
.card-facts{ margin-top:12px; display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:13px; line-height:1.45; }
.card-facts div{ display:contents; }
.card-facts dt{ color:var(--ink-soft); }
.card-facts dd{ min-width:0; }
.card-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:12px;
  padding-bottom:2px;
  font-size:12px;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-bottom:1px solid var(--accent);
}
.card-link svg{ width:12px; height:12px; }
.empty-state{
  margin-top:14px;
  padding:16px 18px;
  border:1px dashed var(--line);
  font-size:13.5px;
  line-height:1.55;
  color:var(--ink-soft);
}

.chip-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin-top:14px; }
.chip{
  display:block;
  min-width:0;
  padding:14px 16px;
  border:1px solid var(--line);
  background:var(--surface);
  font-size:13.5px;
  font-weight:400;
  transition:border-color 0.15s ease;
}
.chip:hover{ border-color:var(--accent); }
.chip.wide,
.chip-grid > .chip:last-child:nth-child(odd){ grid-column:1 / -1; }
.chip-eyebrow{
  display:block;
  margin-bottom:4px;
  font-size:11px;
  line-height:1.4;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.chip.more{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.chip.more svg{ flex:none; width:13px; height:13px; opacity:0.55; }

/* 7. Fußzeile ----------------------------------------------------------- */
.sitefoot{
  margin-top:46px;
  padding-top:26px;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
}
.sitefoot .addr{ font-size:13.5px; line-height:1.6; }
.sitefoot .meta{ font-size:12px; color:var(--ink-soft); }
.sitefoot .meta a{ border-bottom:1px solid transparent; }
.sitefoot .meta a:hover{ border-color:var(--ink-soft); }
.social{ display:flex; gap:14px; margin-top:4px; }
.social a{ width:20px; height:20px; color:var(--ink-soft); transition:color 0.15s ease; }
.social a:hover{ color:var(--accent); }
.social svg{ width:100%; height:100%; }
.legal{ font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); }
.legal a{ border-bottom:1px solid transparent; }
.legal a:hover{ border-color:var(--ink-soft); }

/* 8. Fallbacks ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .hubnav a, .row, .chip, .social a{ transition:none; }
}