/* ==========================================================================
   marcnilsson.com · Bausteine
   Struktur und Proportionen 1:1 nach leanability.com (gemessen 18.08.2026),
   Farben und Schriften nach Bauplan Teil 7.
   Gemessene Referenzwerte Klaus: H1 73px/0.99, H2 40px/1.08, H3 21px/1.16,
   Eyebrow 11.5px/700/0.12em mit Strich, Textspalte 900px, Abschnitt 94px,
   Karten 8px Radius, Knoepfe als Pillen.
   Jede .b-Klasse ist ein Baustein und wird spaeter eine Astro-Komponente.
   ========================================================================== */

@font-face{font-family:'Archivo';src:url('../fonts/archivo-var.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('../fonts/instrument-sans-var.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --bg:#ffffff;
  --band:#f3f7f8;
  --ink:#0f1417;
  --ink-2:#2c3438;
  --muted:#5b6a70;
  --line:#dfe7ea;
  --accent:#0e5566;
  --accent-hover:#0a414e;
  --on-accent:#ffffff;

  --dark:#0b3540;
  --dark-ink:#f2f8f9;
  --dark-ink-2:#c9dfe2;
  --dark-muted:#8fb2b8;
  --dark-line:#1d4b57;
  --dark-accent:#7bbfb2;

  --wrap:1160px;
  --col:900px;
  --pad:clamp(20px, 5vw, 40px);
  --sec:clamp(54px, 8vw, 94px);

  --f-head:'Archivo', ui-sans-serif, system-ui, sans-serif;
  --f-body:'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b1013; --band:#121a1e; --ink:#e9f0f1; --ink-2:#c4d2d5; --muted:#8b9ca1;
    --line:#223037; --accent:#7bbfb2; --accent-hover:#9ad3c7; --on-accent:#08191d;
    --dark:#0a2c35;
  }
}
:root[data-theme="dark"]{
  --bg:#0b1013; --band:#121a1e; --ink:#e9f0f1; --ink-2:#c4d2d5; --muted:#8b9ca1;
  --line:#223037; --accent:#7bbfb2; --accent-hover:#9ad3c7; --on-accent:#08191d;
  --dark:#0a2c35;
}

/* --- Grundlagen ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink-2);
  font-family:var(--f-body);font-size:1.05rem;line-height:1.62;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:600;color:var(--ink);margin:0;text-wrap:balance}
h1{font-size:clamp(2.9rem,6.2vw,4.6rem);line-height:0.99;letter-spacing:-0.028em}
h2{font-size:clamp(1.95rem,3.4vw,2.5rem);line-height:1.08;letter-spacing:-0.022em}
h3{font-size:clamp(1.2rem,1.7vw,1.32rem);line-height:1.16;letter-spacing:-0.012em}
h4{font-size:1.06rem;line-height:1.25;letter-spacing:-0.008em}
p{margin:0}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent-hover)}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.col{max-width:var(--col)}
.flow > * + *{margin-top:1.05em}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:12px;z-index:99;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:999px}

/* --- Eyebrow mit Strich, wie bei Klaus ----------------------------------- */
.eyebrow{
  font-family:var(--f-mono);font-size:0.88rem;font-weight:500;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--ink);margin:0;
  display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:56px;height:12px;background:var(--accent);flex:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 8'%3E%3Cpath d='M2.4 3.5 Q15.5 4.4 27.3 5.3 M2.1 3.8 Q12.8 5.4 28 3.8' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 8'%3E%3Cpath d='M2.4 3.5 Q15.5 4.4 27.3 5.3 M2.1 3.8 Q12.8 5.4 28 3.8' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain}
.eyebrow--plain{color:var(--muted)}
.eyebrow--plain::before{display:none}

/* --- Kopf ---------------------------------------------------------------- */
.site-head{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:20}
.site-head__in{
  max-width:var(--wrap);margin:0 auto;padding:16px var(--pad);
  display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;
}
.brand{
  font-family:var(--f-head);font-weight:700;font-size:1.16rem;color:var(--ink);
  text-decoration:none;letter-spacing:-0.02em;margin-right:auto;
}
.brand em{font-style:normal;font-weight:400;color:var(--muted)}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;font-size:0.92rem;font-weight:500}
.nav a{color:var(--ink);text-decoration:none}
.nav a:hover{color:var(--accent)}
.nav a[aria-current="page"]{color:var(--accent)}

/* --- Knoepfe als Pillen -------------------------------------------------- */
.btn{
  display:inline-block;font-family:var(--f-body);font-size:0.9rem;font-weight:600;
  padding:12px 24px;border-radius:999px;text-decoration:none;border:1.5px solid var(--accent);
  transition:background .18s ease,color .18s ease;white-space:nowrap;
}
.btn--solid{background:var(--accent);color:var(--on-accent)}
.btn--solid:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--bg)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* --- Baustein: Hero ------------------------------------------------------ */
.b-hero{padding:clamp(34px,5vw,52px) 0 clamp(56px,7vw,88px)}
.b-hero__grid{display:grid;gap:clamp(30px,4vw,56px);grid-template-columns:1fr;align-items:center}
@media(min-width:940px){.b-hero__grid{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}}
.b-hero h1{margin-top:20px;max-width:11ch}
.b-hero__lead{margin-top:26px;max-width:48ch;font-size:1.12rem;color:var(--ink-2)}
.b-hero .btn-row{margin-top:32px}
.b-hero__focus{margin-top:26px;display:flex;align-items:center;gap:10px;font-size:0.9rem;font-weight:600}
.b-hero__focus::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.b-hero__focus a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:5px}
.b-hero__art{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--band)}
.b-hero__art img{filter:grayscale(1) contrast(1.05);width:100%}

/* --- Baustein: Abschnitt ------------------------------------------------- */
.b-sec{padding-block:var(--sec)}
.b-sec + .b-sec{padding-top:0}
.b-sec__head{max-width:var(--col)}
.b-sec__head h2{margin-top:18px}
.b-sec__head p{margin-top:20px;max-width:62ch;color:var(--ink-2)}

/* --- Baustein: Kartenraster ---------------------------------------------- */
.b-cards{display:grid;gap:20px;grid-template-columns:1fr;margin-top:44px}
@media(min-width:620px){.b-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){
  .b-cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .b-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.card{
  background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:24px;
  display:flex;flex-direction:column;gap:12px;
}
.card .eyebrow{font-size:0.78rem}
.card .eyebrow::before{width:30px;height:7px}
.card h3{margin-top:2px}
.card p{font-size:0.96rem;color:var(--ink-2)}
.card__more{margin-top:auto;padding-top:8px;font-size:0.9rem;font-weight:600;color:var(--accent);text-decoration:none}
.card__more:hover{text-decoration:underline}

/* --- Baustein: Band, volle Breite ---------------------------------------- */
.b-band{padding-block:var(--sec);background:var(--band)}
.b-band--dark{background:var(--dark);color:var(--dark-ink-2)}
.b-band--dark h2,.b-band--dark h3,.b-band--dark h4{color:var(--dark-ink)}
.b-band--dark .eyebrow{color:var(--dark-ink)}
.b-band--dark .eyebrow::before{background:var(--dark-accent)}
.b-band--dark p{color:var(--dark-ink-2)}
.b-band--dark a{color:var(--dark-accent)}
.b-band--dark .btn--solid{background:var(--dark-accent);border-color:var(--dark-accent);color:#08222a}
.b-band--dark .btn--ghost{color:var(--dark-ink);border-color:var(--dark-line)}
.b-band--dark .btn--ghost:hover{background:var(--dark-ink);color:var(--dark)}
.b-split{display:grid;gap:clamp(26px,4vw,54px);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.b-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.b-split h2{margin-top:18px}

/* --- Baustein: Herkunft (Text plus Foto) --------------------------------- */
.b-origin{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.b-origin{grid-template-columns:minmax(0,1.25fr) minmax(0,0.75fr)}}
.b-origin__photo img{border-radius:10px;filter:grayscale(1) contrast(1.05);width:100%;border:1px solid var(--line)}
.b-proof{list-style:none;padding:0;margin:26px 0 0;border-top:1px solid var(--line)}
.b-split .b-proof li{font-size:0.78rem}
.b-proof li{font-family:var(--f-mono);font-size:0.82rem;color:var(--ink-2);padding:13px 0;border-bottom:1px solid var(--line)}

/* --- Baustein: Liste mit Trennlinien (Wege, Punkte) ---------------------- */
.b-list{margin-top:44px;border-top:1px solid var(--line)}
.b-row{display:grid;grid-template-columns:auto 1fr;gap:16px 22px;padding:26px 0;border-bottom:1px solid var(--line);align-items:start}
@media(min-width:780px){.b-row{grid-template-columns:60px minmax(0,1fr) auto;align-items:start}}
.b-row__n{font-family:var(--f-mono);font-size:0.82rem;font-weight:500;color:var(--accent);padding-top:6px}
.b-row__body p{margin-top:8px;max-width:62ch;color:var(--ink-2);font-size:0.98rem}
.b-row .btn{justify-self:end}

/* --- Baustein: Hinweiskasten --------------------------------------------- */
.b-note{border-left:3px solid var(--accent);background:var(--band);padding:22px 24px;border-radius:0 8px 8px 0;margin-top:34px;max-width:66ch}
.b-note > * + *{margin-top:12px}

/* --- Baustein: Tabelle --------------------------------------------------- */
.b-table{overflow-x:auto;margin-top:40px;border:1px solid var(--line);border-radius:8px}
.b-table table{border-collapse:collapse;width:100%;min-width:620px;font-size:0.95rem}
.b-table th{font-family:var(--f-mono);font-size:0.68rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:15px 18px;border-bottom:1px solid var(--line);background:var(--band)}
.b-table td{padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.b-table tr:last-child td{border-bottom:0}
.b-table td:first-child{color:var(--ink);font-weight:600}

/* --- Fuss ---------------------------------------------------------------- */
.site-foot{border-top:1px solid var(--line);padding-block:clamp(40px,5vw,60px) 30px;margin-top:0}
.site-foot__grid{display:grid;gap:30px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:860px){.site-foot__grid{grid-template-columns:1.4fr repeat(4,minmax(0,1fr))}}
.site-foot h4{font-family:var(--f-mono);font-size:0.68rem;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted)}
.site-foot ul{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:10px;font-size:0.93rem}
.site-foot a{color:var(--ink-2);text-decoration:none}
.site-foot a:hover{color:var(--accent)}
.site-foot__base{margin-top:38px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:0.84rem}

/* --- Schmale Bildschirme -------------------------------------------------- */
@media(max-width:760px){
  .site-head__in{gap:10px 16px}
  .brand{font-size:1.05rem}
  .nav{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:18px;padding-bottom:4px;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap}
  .site-head__in > .btn{font-size:0.82rem;padding:9px 16px}
  .b-hero{padding-top:28px}
  .b-hero__art{order:-1}
  .site-foot__grid{gap:26px}
}

/* ---- Zeitstrahl (Seite Mein Weg, ueberarbeitet 04.09.2026) ---- */
.b-time{list-style:none;margin:44px 0 0;padding:0;position:relative;max-width:var(--col)}
.b-time::before{content:"";position:absolute;left:104px;top:14px;bottom:14px;width:1px;background:var(--line)}
.b-time li{display:grid;grid-template-columns:88px 1fr;gap:44px;padding:26px 0;position:relative}
.b-time li::after{content:"";position:absolute;left:100px;top:34px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.b-time__y{font-family:var(--f-mono);font-size:0.82rem;font-weight:500;color:var(--accent);padding-top:6px;text-align:right;white-space:nowrap;text-transform:uppercase;letter-spacing:0.04em}
.b-time h2,.b-time h3{font-size:1.08rem;line-height:1.16;letter-spacing:-0.012em;margin-bottom:10px}
.b-time p{color:var(--ink-2);font-size:0.98rem;margin:0;max-width:60ch}
.b-time p + p{margin-top:14px}
@media(max-width:640px){
  .b-time::before{left:4px;top:10px;bottom:10px}
  .b-time li{display:block;padding:22px 0 22px 26px}
  .b-time li::after{left:0;top:26px}
  .b-time__y{display:block;text-align:left;padding-top:0;margin-bottom:6px}
}

/* ---- Qualifikationen (Seite Mein Weg, 04.09.2026) ---- */
.b-quali{list-style:none;margin:26px 0 0;padding:0;max-width:var(--col);
  display:grid;grid-template-columns:1fr;gap:10px 48px;color:var(--ink-2);font-size:0.98rem}
@media(min-width:620px){.b-quali{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- Weiterfuehrender Textlink im Fliesstext ---- */
.b-weiter{margin-top:22px;font-size:0.98rem}
.b-weiter a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* ---- Einblick-Bilder (Einseiter, 27.08.2026) ---- */
.b-shots{display:grid;gap:20px;grid-template-columns:1fr;margin-top:44px}
@media(min-width:700px){.b-shots{grid-template-columns:1fr 1fr;align-items:start}.b-shots figure:first-child{grid-column:1/-1}}
.b-shots figure{margin:0}
.b-shots img{width:100%;border:1px solid var(--line);border-radius:8px;filter:grayscale(1);background:var(--band)}
.b-shots figcaption{font-family:var(--f-mono);font-size:0.76rem;line-height:1.5;color:var(--muted);margin-top:12px}