/* Theme NETZ — marcel-hardrath.de
   Einbinden: <link href="<?= url('assets/css/theme.css') ?>" rel="stylesheet">
   Schriften produktiv selbst hosten, @font-face hier ergaenzen. */

/* ==================================================================
   THEME "NETZ" — marcel-hardrath.de
   ================================================================== */

:root{
  /* Flächen */
  --ink:#0B1113; --ink-2:#121A1D; --ink-3:#1B262A;
  --paper:#F1F4F3; --paper-2:#FFFFFF;
  --line:#D2DAD8; --line-dark:rgba(255,255,255,.13);
  --muted:#5E6E71; --muted-dark:rgba(255,255,255,.56);

  /* Felder — die Farben kodieren den Inhalt */
  --a:#0E6E6B;  --a-lo:#E2EFEE;   /* Kommunale Unternehmen */
  --b:#C98214;  --b-lo:#F7EEDC;   /* Nahverkehr & Governance */
  --c:#4A6FA5;  --c-lo:#E6ECF4;   /* Bewertung & Methodik */

  --sans:"Archivo",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --wide:1240px; --measure:64ch;
  --ease:cubic-bezier(.22,.8,.28,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  font-variation-settings:'wdth' 100;-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--a);color:#fff}
:focus-visible{outline:3px solid var(--b);outline-offset:3px;border-radius:2px}

/* ---------- Typo ---------- */
.display{font-family:var(--sans);font-weight:700;
  font-variation-settings:'wdth' 122,'wght' 700;
  letter-spacing:-.028em;line-height:1.02;text-transform:none;
  text-wrap:balance;margin:0}
.d-xl{font-size:clamp(2.6rem,1.3rem + 5.4vw,6.2rem)}
.d-l{font-size:clamp(2rem,1.2rem + 3vw,3.6rem)}
.d-m{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.15rem);
  font-variation-settings:'wdth' 112,'wght' 700}
.d-s{font-size:1.22rem;font-variation-settings:'wdth' 108,'wght' 700;
  letter-spacing:-.015em;line-height:1.24}

.kicker{font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;margin:0}
p{margin:0 0 1.05em} p:last-child{margin-bottom:0}
.lede{font-size:clamp(1.02rem,.95rem + .3vw,1.2rem);color:var(--muted);
  max-width:52ch}
.prose{max-width:var(--measure)}
strong{font-weight:600}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wide);margin:0 auto;padding:0 28px}
section{position:relative}
.pad{padding:clamp(72px,9vw,146px) 0}
.dark{background:var(--ink);color:#fff}
.dark .lede,.dark .muted{color:var(--muted-dark)}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;
  gap:40px;margin-bottom:clamp(38px,4vw,64px);flex-wrap:wrap}
.sechead .kicker{color:var(--muted);margin-bottom:14px}
.dark .sechead .kicker{color:var(--muted-dark)}

/* ---------- Streckenband (fixe Navigation links) ---------- */
.rail{position:fixed;left:34px;top:0;height:100vh;width:2px;z-index:60;
  display:none;pointer-events:none}
@media(min-width:1280px){.rail{display:block}}
.rail__track{position:absolute;inset:0;background:var(--line)}
.dark-zone .rail__track{background:var(--line-dark)}
.rail__fill{position:absolute;top:0;left:0;width:2px;height:0;
  background:linear-gradient(180deg,var(--a),var(--b));
  transition:height .12s linear}
.rail__stops{position:absolute;top:0;left:0;height:100%;
  display:flex;flex-direction:column;justify-content:center;gap:22px;
  pointer-events:auto}
.stop{display:flex;align-items:center;gap:12px;background:none;border:0;
  padding:4px 0;cursor:pointer;margin-left:-7px;color:inherit}
.stop i{width:16px;height:16px;border-radius:50%;flex:none;
  border:2px solid var(--line);background:var(--paper);
  transition:transform .3s var(--ease),border-color .3s,background .3s}
.dark-zone .stop i{border-color:rgba(255,255,255,.28);background:var(--ink)}
.stop b{font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  opacity:0;transform:translateX(-6px);color:var(--ink);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.dark-zone .stop b{color:#fff}
.stop:hover b,.stop.on b{opacity:1;transform:none}
.stop.on i{border-color:var(--b);background:var(--b);transform:scale(1.22)}

/* ---------- Kopfzeile ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:70;
  transition:background .4s var(--ease),border-color .4s,backdrop-filter .4s;
  border-bottom:1px solid transparent}
.top.solid{background:rgba(241,244,243,.86);backdrop-filter:blur(14px) saturate(1.5);
  border-bottom-color:var(--line)}
.top.solid.on-dark{background:rgba(11,17,19,.82);border-bottom-color:var(--line-dark)}
.top__in{max-width:var(--wide);margin:0 auto;padding:18px 28px;
  display:flex;align-items:center;gap:30px}
.brand{font-variation-settings:'wdth' 118,'wght' 700;font-size:1.02rem;
  letter-spacing:-.02em;text-decoration:none;color:#fff;
  transition:color .4s;white-space:nowrap}
.top.light-txt .brand,.top.light-txt .menu a{color:var(--ink)}
.menu{display:flex;gap:26px;margin-left:auto;list-style:none;padding:0;margin-block:0}
.menu a{font-family:var(--mono);font-size:.73rem;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:#fff;opacity:.72;
  padding:6px 0;position:relative;transition:opacity .25s,color .4s}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--b);transition:right .3s var(--ease)}
.menu a:hover{opacity:1}
.menu a:hover::after{right:0}
@media(max-width:900px){.menu{display:none}}

/* ---------- Hero ---------- */
.hero{min-height:100svh;display:flex;align-items:center;
  background:var(--ink);color:#fff;overflow:hidden;padding:120px 0 70px}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;
  align-items:center;width:100%}
@media(max-width:1000px){.hero__grid{grid-template-columns:1fr;gap:44px}}
.hero .kicker{color:var(--b);margin-bottom:26px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hero .kicker span{opacity:.5}
.hero h1{margin-bottom:30px}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.hero h1 .w>i{display:inline-block;font-style:normal;
  transform:translateY(105%);opacity:0;
  animation:rise .9s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{transform:none;opacity:1}}
.hero h1 em{font-style:normal;color:var(--b)}
.hero .lede{margin-bottom:36px}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;
  opacity:0;animation:fade .8s var(--ease) 1.05s forwards}
@keyframes fade{to{opacity:1}}

/* Netzdiagramm */
.net{position:relative;width:100%}
.net svg{width:100%;height:auto;overflow:visible}
.net .edge{fill:none;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:draw 1.5s var(--ease) forwards;animation-delay:var(--d,.2s)}
@keyframes draw{to{stroke-dashoffset:0}}
.net .node{opacity:0;animation:pop .5s var(--ease) forwards;
  animation-delay:var(--d,1s);transform-box:fill-box;transform-origin:center}
@keyframes pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
.net .tick{stroke:rgba(255,255,255,.4);stroke-width:2;stroke-linecap:round;
  opacity:0;animation:fade .5s var(--ease) forwards;animation-delay:1.2s}
.net .grid{stroke:rgba(255,255,255,.055);stroke-width:1}
.net .pulse{fill:#fff}
.net__cap{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.35);margin-top:20px;
  opacity:0;animation:fade .8s 1.6s forwards}
@media(max-width:1000px){
  .net{position:absolute;inset:0;opacity:.16;pointer-events:none;
    display:grid;place-items:center;padding:0 20px}
  .net__cap{display:none}
  .hero__grid>div:first-child{position:relative;z-index:2}
}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:0 26px;
  line-height:52px;border-radius:2px;text-decoration:none;font-size:.94rem;
  font-variation-settings:'wdth' 104,'wght' 600;border:1px solid transparent;
  transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.btn svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--fill{background:var(--b);color:var(--ink)}
.btn--fill:hover{background:#fff}
.btn--ghost{border-color:rgba(255,255,255,.26);color:#fff}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--a)}

/* ---------- Kennzahlen ---------- */
.figs{display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-dark)}
@media(max-width:860px){.figs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.figs{grid-template-columns:1fr}}
.fig{padding:34px 26px 34px 0;border-right:1px solid var(--line-dark)}
.fig:last-child{border-right:0}
.fig b{display:block;font-family:var(--mono);font-weight:500;
  font-size:clamp(2rem,1.3rem + 2.2vw,3.1rem);line-height:1;
  font-variant-numeric:tabular-nums;color:#fff;margin-bottom:12px}
.fig b .u{font-size:.44em;margin-left:.18em;color:var(--b)}
.fig span{font-size:.9rem;color:var(--muted-dark);display:block;max-width:24ch}

/* ---------- Venn / Zwei Felder ---------- */
.venn{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:center}
@media(max-width:940px){.venn{grid-template-columns:1fr;gap:40px}}
.venn svg{width:100%;height:auto;overflow:visible}
.venn__c{cursor:pointer;transition:opacity .35s var(--ease)}
.venn__c circle{transition:fill-opacity .35s var(--ease),stroke-width .35s}
.venn__c text{font-family:var(--mono);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;fill:var(--ink);transition:fill .3s}
.venn__c.dim{opacity:.32}
.venn__panel{border-left:3px solid var(--line);padding-left:30px;min-height:290px}
.venn__panel .kicker{margin-bottom:14px;transition:color .3s}
.venn__panel h3{margin:0 0 16px}
.venn__panel ul{list-style:none;padding:0;margin:20px 0 0}
.venn__panel li{display:flex;gap:13px;align-items:flex-start;
  padding:11px 0;border-top:1px solid var(--line);font-size:.96rem}
.venn__panel li svg{width:17px;height:17px;flex:none;margin-top:4px}
.venn__body{animation:panel .4s var(--ease)}
@keyframes panel{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.venn__tabs{display:none;gap:8px;margin-bottom:22px;flex-wrap:wrap}
@media(max-width:940px){.venn__tabs{display:flex}.venn>svg{display:none}}
.venn__tabs button{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;padding:9px 14px;border:1px solid var(--line);
  background:none;border-radius:2px;cursor:pointer}
.venn__tabs button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- Leistungen ---------- */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
@media(max-width:900px){.caps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.caps{grid-template-columns:1fr}}
.cap{background:var(--paper);padding:34px 30px;position:relative;
  transition:background .3s var(--ease)}
.cap:hover{background:var(--paper-2)}
.cap::before{content:"";position:absolute;left:0;top:0;width:3px;height:0;
  background:var(--k,var(--a));transition:height .4s var(--ease)}
.cap:hover::before{height:100%}
.cap__ico{width:40px;height:40px;margin-bottom:20px;color:var(--k,var(--a))}
.cap__ico svg{width:100%;height:100%}
.cap h3{margin:0 0 10px}
.cap p{font-size:.94rem;color:var(--muted);margin:0}
.cap .no{position:absolute;top:24px;right:26px;font-family:var(--mono);
  font-size:.68rem;color:var(--muted);opacity:.5}

/* ---------- Projekte ---------- */
.proj{display:grid;grid-template-columns:repeat(2,1fr);gap:52px 44px}
@media(max-width:820px){.proj{grid-template-columns:1fr;gap:44px}}
.pcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  position:relative}
.pcard__media{position:relative;overflow:hidden;background:var(--ink-3);
  aspect-ratio:16/10;margin-bottom:20px;border-radius:2px}
.pcard__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease),filter .6s;filter:saturate(.72) contrast(1.04)}
.pcard:hover .pcard__media img{transform:scale(1.045);filter:saturate(1) contrast(1.04)}
.pcard__badge{position:absolute;left:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:9px;
  background:var(--k,var(--a));color:#fff;padding:9px 15px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}
.pcard__badge svg{width:14px;height:14px}
.pcard__meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.pcard h3{margin:0 0 12px;transition:color .25s}
.pcard:hover h3{color:var(--k,var(--a))}
.pcard p{font-size:.95rem;color:var(--muted);margin:0 0 18px;max-width:48ch}
.pcard__go{margin-top:auto;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--k,var(--a))}
.pcard__go svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.pcard:hover .pcard__go svg{transform:translateX(5px)}

/* ---------- Tabelle ---------- */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:.94rem;
  font-variant-numeric:tabular-nums;margin-top:12px}
.tbl th,.tbl td{padding:16px 18px;text-align:left;
  border-bottom:1px solid var(--line-dark);vertical-align:top}
.tbl thead th{font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark);
  border-bottom-color:rgba(255,255,255,.24)}
.tbl thead th:nth-child(2){color:var(--c)}
.tbl thead th:nth-child(3){color:var(--b)}
.tbl td:first-child{font-variation-settings:'wdth' 106,'wght' 600}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl-scroll{overflow-x:auto}

/* ---------- Beiträge ---------- */
.post{display:grid;grid-template-columns:120px 1fr auto;gap:28px;
  align-items:start;padding:26px 0;border-top:1px solid var(--line);
  text-decoration:none;color:inherit;transition:padding-left .35s var(--ease)}
.post:last-of-type{border-bottom:1px solid var(--line)}
.post:hover{padding-left:14px}
.post__date{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--muted);padding-top:5px}
.post h3{margin:0 0 8px;transition:color .25s}
.post:hover h3{color:var(--a)}
.post p{font-size:.94rem;color:var(--muted);margin:0;max-width:60ch}
.post__arrow{width:18px;height:18px;color:var(--muted);margin-top:6px;
  transition:transform .3s var(--ease),color .3s}
.post:hover .post__arrow{transform:translateX(5px);color:var(--a)}
@media(max-width:720px){.post{grid-template-columns:1fr;gap:8px}
  .post__arrow{display:none}}

/* ---------- Kontakt ---------- */
.contact{display:grid;grid-template-columns:1.15fr .85fr;gap:60px}
@media(max-width:900px){.contact{grid-template-columns:1fr;gap:36px}}
.note{border-left:2px solid var(--b);padding:4px 0 4px 22px;
  font-size:.92rem;color:var(--muted-dark)}

/* ---------- Fuß ---------- */
.foot{background:var(--ink);color:#fff;border-top:1px solid var(--line-dark)}
.foot__in{max-width:var(--wide);margin:0 auto;padding:64px 28px 30px;
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
@media(max-width:760px){.foot__in{grid-template-columns:1fr;gap:30px}}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:10px}
.foot a{text-decoration:none;color:rgba(255,255,255,.72);transition:color .25s}
.foot a:hover{color:var(--b)}
.foot .kicker{color:rgba(255,255,255,.35);margin-bottom:18px}
.soc{display:flex;gap:12px;margin-top:6px}
.soc a{width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--line-dark);border-radius:2px;
  transition:border-color .25s,background .25s,transform .25s var(--ease)}
.soc a:hover{border-color:var(--b);background:var(--b);color:var(--ink);transform:translateY(-2px)}
.soc svg{width:17px;height:17px}
.foot__bot{border-top:1px solid var(--line-dark);
  font-family:var(--mono);font-size:.7rem;color:rgba(255,255,255,.38)}
.foot__bot div{max-width:var(--wide);margin:0 auto;padding:18px 28px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ---------- Scroll-Reveal ---------- */
[data-rise]{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:var(--rd,0s)}
[data-rise].in{opacity:1;transform:none}

/* ---------- Reduzierte Bewegung ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;
    transition-duration:.01ms!important}
  .net .edge{stroke-dashoffset:0}
  .net .node,.net .tick,.hero h1 .w>i,.hero__cta,.net__cap{opacity:1;transform:none}
  [data-rise]{opacity:1;transform:none}
}

/* ---------- Platzhalter falls Bild blockiert ---------- */
.ph{width:100%;height:100%;display:grid;place-items:center;background:var(--ink-3);
  color:rgba(255,255,255,.4);font-family:var(--mono);font-size:.7rem;
  text-align:center;padding:24px;line-height:1.6}