/* alexander-mueller.co · CI „Behavioral Forensics × Pressure Notebook" v1.0 */

/* ---------- Fonts (self-hosted, latin) ---------- */
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/newsreader-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/newsreader-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/newsreader-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-style:italic; font-weight:400; font-display:swap; src:url("fonts/newsreader-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Caveat"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/caveat-latin-500-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --petrol:#0E3438;
  --ink:#151719;
  --paper:#E8DDC8;
  --rust:#A6422A;
  --grey:#72746F;
  --ochre:#C89B3C;
  --paper-line:#D6C9B0;
  --paper-bright:#F0E8D8;
  --ink-line:#2A2D30;
  --text-on-dark:#E8DDC8;
  --muted-on-dark:#9BA09A;

  --serif:"Newsreader",Georgia,serif;
  --sans:"IBM Plex Sans",-apple-system,sans-serif;
  --mono:"IBM Plex Mono",monospace;
  --hand:"Newsreader",Georgia,serif; /* Interim statt Caveat: Marginalien in Serif-Kursive, bis echte Handschrift digitalisiert ist */

  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px;
  --wrap:1140px;
}

/* ---------- Basis ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
body { margin:0; background:var(--ink); color:var(--text-on-dark); font-family:var(--sans); font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 20px; }
.mono-label { font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--grey); }

/* ---------- Navigation ---------- */
.nav { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:24px 0 20px; border-bottom:1px solid var(--ink-line); }
.wortmarke { font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.28em; text-transform:uppercase; text-decoration:none; white-space:nowrap; color:var(--text-on-dark); }
.nav-links { display:flex; align-items:baseline; gap:22px; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; }
.nav-links a { text-decoration:none; color:var(--muted-on-dark); }
.nav-links a:hover { color:var(--paper); }
.nav-links a.nav-cta { color:var(--paper); border:1px solid var(--rust); padding:7px 14px; }
.nav-links a.nav-cta:hover { background:var(--rust); }

/* ---------- Hero ---------- */
.hero { background:var(--petrol); }
.hero .wrap { display:grid; grid-template-columns:1fr; gap:44px; padding-top:64px; padding-bottom:64px; }
.hero h1 { font-family:var(--serif); font-weight:500; font-size:clamp(38px,7vw,64px); line-height:1.12; letter-spacing:-.005em; margin:0 0 22px; max-width:16ch; }
.hl-marker { background:linear-gradient(transparent 18%, rgba(200,155,60,.42) 18%, rgba(200,155,60,.42) 88%, transparent 88%); padding:0 .08em; }
.hero .subline { font-size:16.5px; line-height:1.65; color:#C6C9BF; max-width:52ch; margin:0 0 30px; }
.ctas { display:flex; flex-wrap:wrap; gap:14px; }
.cta { font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; padding:13px 22px; }
.cta-prim { background:var(--rust); color:var(--paper-bright); }
.cta-prim:hover { background:#8F361F; }
.cta-sek { border:1px solid #3E5A5D; color:var(--text-on-dark); }
.cta-sek:hover { border-color:var(--paper); }

/* Notizbuch-Karte rechts */
.notiz-karte { background-color:var(--paper);
  background-image:linear-gradient(var(--paper-line) 1px,transparent 1px),linear-gradient(90deg,var(--paper-line) 1px,transparent 1px);
  background-size:26px 26px; color:var(--ink); padding:34px 30px 30px; position:relative; align-self:start; }
.notiz-karte .hand { font-family:var(--hand); font-size:24px; line-height:1.15; color:var(--rust); transform:rotate(-2.5deg); max-width:15ch; }
.skizze { margin-top:20px; border:1.5px solid var(--ink); padding:12px 16px; width:fit-content; font-family:var(--mono); font-size:11px; letter-spacing:.1em; line-height:2.1; }
.polaroid { position:absolute; right:-14px; bottom:-26px; width:132px; background:#F6F0E2; padding:8px 8px 26px; box-shadow:0 5px 16px rgba(0,0,0,.3); transform:rotate(4deg); }
.polaroid img { display:block; width:100%; height:auto; filter:grayscale(.35) contrast(1.05); }
.polaroid::before { content:""; position:absolute; top:-9px; left:38px; width:54px; height:18px; background:rgba(214,201,176,.6); transform:rotate(-3deg); }

/* ---------- Proof-Leiste ---------- */
.proof { background:var(--ink); border-top:1px solid var(--ink-line); border-bottom:1px solid var(--ink-line); }
.proof .wrap { display:grid; grid-template-columns:repeat(2,1fr); }
.proof div { padding:20px 18px; border-right:1px solid var(--ink-line); }
.proof div:nth-child(2n) { border-right:none; }
.proof b { display:block; font-family:var(--serif); font-weight:600; font-size:21px; color:var(--paper); }
.proof span { font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); }

/* ---------- Sections allgemein ---------- */
section { padding:var(--s6) 0; }
.sec-kopf { margin-bottom:var(--s4); }
.sec-kopf h2 { font-family:var(--serif); font-weight:500; font-size:clamp(28px,4vw,40px); line-height:1.2; margin:14px 0 0; max-width:26ch; }

/* ---------- Angebot (Karten) ---------- */
.angebot { background:var(--ink); }
.karten { display:grid; grid-template-columns:1fr; gap:16px; }
.karte { border:1px solid var(--ink-line); padding:30px 28px; }
.karte .knr { font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--rust); }
.karte h3 { font-family:var(--serif); font-weight:500; font-size:23px; line-height:1.25; margin:14px 0 12px; }
.karte p { margin:0; font-size:14px; line-height:1.65; color:var(--muted-on-dark); }

/* ---------- Arbeitsweise ---------- */
.arbeitsweise { background-color:var(--paper);
  background-image:linear-gradient(var(--paper-line) 1px,transparent 1px),linear-gradient(90deg,var(--paper-line) 1px,transparent 1px);
  background-size:26px 26px; color:var(--ink); }
.arbeitsweise .mono-label { color:#8C8064; }
.arbeitsweise h2 { color:var(--ink); }
.aw-mark { position:relative; white-space:nowrap; padding:0 .06em; }
.aw-mark svg { position:absolute; left:-4%; right:-4%; bottom:-.08em; width:108%; height:.32em; overflow:visible; }
.aw-mark svg path { fill:none; stroke:var(--rust); stroke-width:3; stroke-linecap:round; }
.schritte { display:grid; grid-template-columns:1fr; gap:0; counter-reset:schritt; }
.schritt { display:grid; grid-template-columns:64px 1fr; gap:18px; padding:26px 0; border-bottom:1px solid var(--paper-line); }
.schritt:last-child { border-bottom:none; }
.schritt .nr { font-family:var(--mono); font-size:13px; color:var(--rust); padding-top:5px; }
.schritt h3 { font-family:var(--serif); font-weight:600; font-size:20px; margin:0 0 6px; }
.schritt p { margin:0; font-size:14.5px; line-height:1.6; color:#4A463D; max-width:62ch; }

/* ---------- Für wen ---------- */
.fuerwen { background:var(--petrol); }
.fuerwen p.gross { font-family:var(--serif); font-weight:400; font-size:clamp(20px,2.6vw,27px); line-height:1.5; max-width:34ch; margin:14px 0 26px; }
.kontexte { display:flex; flex-wrap:wrap; gap:10px; max-width:720px; }
.kontexte span { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#B9BEB4; border:1px solid #3E5A5D; padding:7px 13px; }

/* ---------- Über mich ---------- */
.ueber { background:var(--ink); }
.welten { display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:34px; }
.welt { border-left:2px solid var(--rust); padding:4px 0 4px 22px; }
.welt h3 { font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ochre); margin:0 0 8px; font-weight:500; }
.welt p { margin:0; font-size:14.5px; line-height:1.65; color:var(--muted-on-dark); }
.ueber .schluss { font-family:var(--serif); font-style:italic; font-size:21px; color:var(--paper); max-width:34ch; }

/* ---------- Kontakt ---------- */
.kontakt { background:var(--petrol); }
.kontakt h2 { max-width:24ch; }
.kontakt .fuer { color:#C6C9BF; max-width:52ch; margin:18px 0 30px; font-size:15.5px; }
.k-mail { display:inline-block; font-family:var(--mono); font-size:clamp(14px,2.4vw,19px); letter-spacing:.04em; color:var(--paper); text-decoration:none; padding-bottom:8px; background:url("assets/underline.png") no-repeat 0 100%/100% 7px; }
.k-meta { margin-top:22px; font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-on-dark); }
.k-meta a { color:var(--muted-on-dark); text-decoration:none; }
.k-meta a:hover { color:var(--paper); }

/* ---------- Footer ---------- */
.footer { background:var(--ink); border-top:1px solid var(--ink-line); padding:26px 0 44px; }
.footer .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 26px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); }
.footer a { color:var(--grey); text-decoration:none; }
.footer a:hover { color:var(--paper); }

/* ---------- Rechtsseiten (Bestand) ---------- */
.legal { padding:56px 0; max-width:62ch; color:var(--text-on-dark); }
.legal h1 { font-family:var(--serif); font-weight:500; font-size:clamp(34px,5vw,50px); line-height:1.1; margin:0 0 36px; }
.legal h2 { font-family:var(--serif); font-weight:500; font-size:22px; margin:36px 0 10px; }
.legal p { font-size:14.5px; margin:0 0 14px; color:#C6C9BF; }
.legal .platzhalter { color:var(--ochre); font-weight:600; }
.dot { color:var(--ink-line); }
/* Kompatibilität Rechtsseiten-Markup (Bestand) */
.footer-meta { display:flex; flex-wrap:wrap; gap:12px 22px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); padding:6px 0; }
.footer-meta a { color:var(--grey); text-decoration:none; }
.footer-meta .fm { color:var(--paper); }
body > .wrap > .footer, footer.footer { display:block; }

/* ---------- Desktop ≥ 760px ---------- */
@media (min-width:760px) {
  .wrap { padding:0 44px; }
  .hero .wrap { grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); gap:64px; padding-top:88px; padding-bottom:96px; align-items:start; }
  .proof .wrap { grid-template-columns:repeat(6,1fr); }
  .proof div { border-right:1px solid var(--ink-line); padding:22px 20px; }
  .proof div:nth-child(2n) { border-right:1px solid var(--ink-line); }
  .proof div:last-child { border-right:none; }
  .karten { grid-template-columns:repeat(3,1fr); }
  .schritte { grid-template-columns:1fr 1fr; gap:0 56px; }
  .welten { grid-template-columns:repeat(3,1fr); gap:32px; }
  .welt { border-left:none; border-top:2px solid var(--rust); padding:18px 0 0; }
}

/* ---------- Unterseiten (komplette Website) ---------- */
.p-hero { background:var(--petrol); padding:0 0 56px; }
.p-hero .krume { font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:#7FA0A3; margin:40px 0 14px; }
.p-hero .krume a { color:#7FA0A3; text-decoration:none; }
.p-hero .krume a:hover { color:var(--paper); }
.p-hero h1 { font-family:var(--serif); font-weight:500; font-size:clamp(30px,5vw,48px); line-height:1.15; margin:0 0 16px; max-width:22ch; }
.p-hero .lead { font-size:16px; line-height:1.65; color:#C6C9BF; max-width:56ch; margin:0; }
.p-sec { padding:64px 0; }
.p-sec.papier { background-color:var(--paper);
  background-image:linear-gradient(var(--paper-line) 1px,transparent 1px),linear-gradient(90deg,var(--paper-line) 1px,transparent 1px);
  background-size:26px 26px; color:var(--ink); }
.p-sec.papier .mono-label { color:#8C8064; }
.p-sec h2 { font-family:var(--serif); font-weight:500; font-size:clamp(22px,3vw,30px); line-height:1.25; margin:10px 0 20px; }
.p-liste { list-style:none; padding:0; margin:0; max-width:640px; }
.p-liste li { padding:14px 0 14px 30px; border-bottom:1px solid var(--ink-line); position:relative; font-size:14.5px; line-height:1.6; color:var(--muted-on-dark); }
.p-sec.papier .p-liste li { border-color:var(--paper-line); color:#4A463D; }
.p-liste li::before { content:"–"; position:absolute; left:0; color:var(--rust); font-family:var(--mono); }
.p-liste li:last-child { border-bottom:none; }
.p-liste b { color:var(--text-on-dark); font-weight:600; }
.p-sec.papier .p-liste b { color:var(--ink); }
.rahmen { display:grid; grid-template-columns:1fr; gap:14px; max-width:820px; }
.rahmen div { border:1px solid var(--ink-line); padding:18px 20px; }
.p-sec.papier .rahmen div { border-color:var(--paper-line); background:rgba(240,232,216,.5); }
.rahmen h3 { font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--rust); margin:0 0 8px; font-weight:500; }
.rahmen p { margin:0; font-size:13.5px; line-height:1.55; color:var(--muted-on-dark); }
.p-sec.papier .rahmen p { color:#4A463D; }
.p-cta { background:var(--ink); border-top:1px solid var(--ink-line); padding:56px 0; }
.p-cta h2 { font-family:var(--serif); font-weight:500; font-size:clamp(22px,3vw,30px); margin:0 0 20px; max-width:26ch; }
/* Modell klein (nur Transformation) */
.modell { position:relative; height:300px; max-width:560px; margin:24px 0 8px; }
.modell .feld { position:absolute; width:128px; height:82px; border:1px solid #4A5A5E; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:6px; }
.modell .feld b { font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:var(--paper); font-weight:500; }
.modell .feld span { font-size:9.5px; color:#9BA09A; margin-top:4px; line-height:1.3; }
.modell .kern { border:2px solid var(--rust); width:150px; height:92px; }
.modell .kern b { color:var(--paper); }
/* Leistungs-Karten verlinkt */
a.karte { display:block; text-decoration:none; color:inherit; transition:border-color .15s; }
a.karte:hover { border-color:var(--rust); }
a.karte .mehr { display:inline-block; margin-top:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--rust); }
/* Über mich Porträt */
.um-grid { display:grid; grid-template-columns:1fr; gap:40px; align-items:start; }
.um-grid img { width:100%; max-width:300px; filter:grayscale(.3) contrast(1.03); }
@media (min-width:760px) {
  .rahmen { grid-template-columns:repeat(3,1fr); }
  .um-grid { grid-template-columns:300px 1fr; }
  .p-hero .krume { margin-top:56px; }
}

/* ---------- Globaler Header (Monogramm + Burger, alle Seiten) ---------- */
.top { background:var(--ink); border-bottom:1px solid var(--ink-line); }
.top .wrap { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:16px; padding-bottom:16px; }
.marke { display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--paper); }
.am { width:42px; height:42px; border:1.5px solid var(--rust); display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:500; font-size:20px; color:var(--rust); flex:none; }
.marke .mz { line-height:1.3; }
.marke .mz b { display:block; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.26em; }
.marke .mz span { display:block; font-family:var(--mono); font-size:8px; letter-spacing:.2em; color:var(--grey); margin-top:3px; }
.top .nav-links { display:flex; align-items:baseline; gap:26px; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; }
.top .nav-links a { text-decoration:none; color:var(--muted-on-dark); }
.top .nav-links a:hover { color:var(--paper); }
.top .nav-links a.nav-cta { color:var(--paper); border:1px solid var(--rust); padding:7px 14px; }
.top .nav-links a.nav-cta:hover { background:var(--rust); }
.burger { display:none; background:none; border:0; padding:10px; cursor:pointer; flex-direction:column; gap:5px; }
.burger span { display:block; width:24px; height:2px; background:var(--rust); border-radius:1px; transition:transform .2s, opacity .2s; }
@media (max-width:1000px) {
  .top { position:relative; }
  .burger { display:flex; }
  .top .nav-links { display:none; position:absolute; top:100%; left:0; right:0; z-index:60;
    flex-direction:column; align-items:stretch; gap:0; background:var(--ink);
    border-bottom:1px solid var(--ink-line); padding:6px 20px 22px;
    box-shadow:0 18px 30px rgba(0,0,0,.35); }
  .top .nav-links a { font-family:var(--serif); font-size:21px; font-weight:500; text-transform:none;
    letter-spacing:0; color:var(--paper); padding:15px 2px; border-bottom:1px solid var(--ink-line); }
  .top .nav-links a.nav-cta { border:1px solid var(--rust); margin-top:16px; padding:13px 18px;
    font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; text-align:center; }
  body.nav-offen .top .nav-links { display:flex; }
  body.nav-offen .burger span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  body.nav-offen .burger span:nth-child(2) { opacity:0; }
  body.nav-offen .burger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
}
@media (max-width:599px) {
  .top .wrap { padding-top:12px; padding-bottom:12px; }
  .marke .mz span { display:none; }
  .marke .mz b { font-size:11.5px; letter-spacing:.22em; }
  .am { width:36px; height:36px; font-size:17px; }
}

/* ---------- Feinschliff: Typografie, Fokus, Motion, Kontrast ---------- */
:root { --dauer:.25s; --kurve:cubic-bezier(.4,0,.2,1); }
h1, h2, h3, .sec-kopf h2, .p-hero h1 { text-wrap:balance; }
p, .subline, .lead, blockquote, .karte p, .pj p, .schritt p, .welt p { text-wrap:pretty; }
:focus-visible { outline:3px solid var(--rust); outline-offset:3px; border-radius:1px; }
a, .cta, .karte, .burger, .nav-links a { transition:color var(--dauer) var(--kurve), background var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve), transform var(--dauer) var(--kurve); }
.mono-label { color:#8B8E87; }
.arbeitsweise .mono-label, .projekte .mono-label, .p-sec.papier .mono-label { color:#8C8064; }
.footer .wrap { color:#8B8E87; }
/* Monogramm: optischer Ausgleich + Mikrointeraktion */
.am { letter-spacing:-.02em; padding-bottom:2px; transition:background var(--dauer) var(--kurve), color var(--dauer) var(--kurve); }
.marke:hover .am { background:var(--rust); color:#F0E8D8; }
a.karte:hover { transform:translateY(-3px); }
.skip { position:absolute; left:-999px; top:8px; z-index:200; background:var(--rust); color:#F0E8D8; font-family:var(--mono); font-size:12px; letter-spacing:.1em; padding:10px 16px; text-decoration:none; }
.skip:focus { left:8px; }
/* Signatur-Moment: Rotstift zeichnet sich einmalig ein */
@media (prefers-reduced-motion: no-preference) {
  .zeichnet path { stroke-dasharray:1; stroke-dashoffset:1; animation:einzeichnen .7s var(--kurve) .4s forwards; }
  @keyframes einzeichnen { to { stroke-dashoffset:0; } }
  .reveal { opacity:0; transform:translateY(14px); transition:opacity .5s var(--kurve), transform .5s var(--kurve); }
  .reveal.sichtbar { opacity:1; transform:none; }
}

/* ================================================================
   V3.0 — Nacht-Audit 10./11.07.2026 (Benchmarks, A11y, SEO, Detail)
   ================================================================ */

/* Textmarker-Moment: Auswahlfarbe */
::selection { background:var(--rust); color:var(--paper-bright); }
.arbeitsweise ::selection, .projekte ::selection, .p-sec.papier ::selection { background:var(--ink); color:var(--paper); }

/* Klickflächen Desktop-Nav ≥24px (WCAG 2.5.8) */
.top .nav-links a { padding:6px 2px; }

/* Angebotskarten: Kopfzeile mit Zielgruppen-Pfad */
.karte .kopfz { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.karte .pfad { font-family:var(--mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:#8B8E87; text-align:right; }
.karte .mehr { transition:transform var(--dauer) var(--kurve); }
a.karte:hover .mehr, a.karte:focus-visible .mehr { transform:translateX(4px); }

/* Kontakt: Handnotiz, Copy-Button, Direkt-Zeile */
.k-hand { font-family:var(--hand); font-size:24px; color:#D8674A; transform:rotate(-1.5deg); margin:26px 0 10px; }
.kopier { display:block; margin-top:14px; background:none; border:1px solid #3E5A5D; color:var(--paper);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; padding:10px 16px; cursor:pointer;
  transition:border-color var(--dauer) var(--kurve); }
.kopier:hover, .kopier.ok { border-color:var(--rust); }
.k-direkt { font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#7FA0A3; margin:16px 0 0; }

/* Screenreader-only */
.vh { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Zitate-Raster (reaktivieren, sobald Freigaben da sind) */
.zitate { display:grid; grid-template-columns:1fr; gap:16px; }
.zitat { border:1px solid var(--ink-line); padding:26px; position:relative; }
.zitat .qz { font-family:var(--serif); font-size:44px; line-height:0; color:var(--rust); position:absolute; top:34px; left:22px; }
.zitat blockquote { margin:14px 0 0 28px; font-family:var(--serif); font-size:17px; line-height:1.5; color:var(--paper); }
.zitat .wer { margin:16px 0 0 28px; font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; color:#8B8E87; text-transform:uppercase; }
@media (min-width:860px) { .zitate { grid-template-columns:repeat(3,1fr); } }

/* Sanfte Seitenwechsel (Chrome/Safari; Firefox fällt hart zurück) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* ================================================================
   V3.2 — Marginalien, Raster, Kontraste
   ================================================================ */
/* Kleintext auf Papier: dunkleres Rust für AA-Kontrast */
.pj h3 { color:#8F3A24; font-size:10.5px; }
.schritt .nr { color:#8F3A24; }
.siegel span { font-size:9.5px; }
.statsX span, .proof span { font-size:9.5px; }

/* Marginalien: Serif-Kursive statt Handschrift-Font */
.k-hand, .anno, .fg-hand, .polaX figcaption, .map .handt, .notiz-karte .hand { font-style:italic; letter-spacing:.01em; }
.k-hand { font-size:19px; transform:rotate(-1deg); color:#D8674A; }

/* Notizraster: größer, leiser (kein Schulheft-Karo) */
.arbeitsweise, .p-sec.papier, .notiz-karte {
  background-image:linear-gradient(rgba(198,184,155,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(198,184,155,.5) 1px,transparent 1px);
  background-size:40px 40px;
}
/* Tape-Optik entfernen (Legacy-Selektoren) */
.polaroid::before { display:none; }

/* Karten: Zielgruppen-Pfad ohne Nummern */
.karte > .pfad { display:block; text-align:left; }

/* Siegel-Badges (Über mich) — aufrecht, nicht kursiv (CI-Regel) */
.siegel { display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 30px; }
.siegel span { font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-on-dark); border:1px solid var(--ink-line); padding:7px 11px; white-space:nowrap; }
.siegel span.s-rust { color:var(--ochre); border-color:#4A3A28; }
.p-sec .siegel span { color:#4A463D; border-color:var(--paper-line); background:rgba(240,232,216,.5); }
/* Feldnotiz „Aktuell" */
.aktuell { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:#8B8E87; border-left:2px solid var(--rust); padding:2px 0 2px 14px; line-height:1.9; max-width:70ch; }

/* Druck: die Seite als saubere Akte */
@media print {
  body { background:#fff; color:#111; }
  .top .nav-links, .burger, .ctas, .kopier, .skip, .anno, .grain::after { display:none !important; }
  .heroX, .kontakt, .fuerwen, .angebot, .ueber, .stimmen, .p-hero, .p-cta { background:#fff !important; color:#111 !important; }
  .heroX h1, .sec-kopf h2, .kontakt h2, .welt p, .karte p, .karte h3, .schluss, .subline, .fuer { color:#111 !important; }
  .k-mail { background:none; color:#111; }
  .k-mail::after { content:" (alexander@alexander-mueller.co)"; font-size:11px; }
  .footer { border-top:1px solid #999; }
  a { text-decoration:none; color:#111; }
}

/* ================================================================
   V3.3 — Vorbereitete Varianten (per Kommentar umschaltbar)
   ================================================================ */

/* V3.3: Erklärzeile Verhaltensökonomie (Hero) + Arbeitsweise-Leitsatz */
.erklaer { font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#7FA0A3; margin:-16px 0 30px; }
.aw-leitsatz { font-family:var(--serif); font-style:italic; font-size:20px; color:var(--ink); margin:34px 0 0; }

/* TOGGLE 5 · Sticky Navigation (Empfehlung Brand-Review; ruhig, ohne Blur/Schatten).
   Aktivieren: Zeile einkommentieren. */
/* .top { position:sticky; top:0; z-index:100; } */

/* Stile für Hero-Variante A (aktiv, ungenutzt bis Toggle in index.html) */
.usp { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ochre); max-width:52ch; line-height:1.9; margin:-10px 0 30px; }
.cta-mikro { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#7FA0A3; margin:12px 0 0; }

/* Stile für SEO-Sektion „Der Unterschied" (aktiv, ungenutzt bis Toggle in index.html) */
.unterschied { background:var(--ink); border-top:1px solid var(--ink-line); }
.unterschied .wrap { max-width:820px; }
.unterschied h2 { font-family:var(--serif); font-weight:500; font-size:clamp(26px,3.6vw,36px); line-height:1.2; margin:0 0 26px; }
.unterschied p { font-size:15px; line-height:1.75; color:#B9BEB4; margin:0 0 18px; max-width:66ch; }
.unterschied p b { color:var(--paper); font-weight:600; }

/* TOGGLE 1 · Stimmen-Sektion ausblenden, bis Testimonial-Freigaben vorliegen.
   Aktivieren: die folgende Zeile einkommentieren. */
/* #stimmen { display:none; } */

/* TOGGLE 4 · Kapitel-Index (Signature-Element aus „Die Akte"; gehört zu TOGGLE 4a/4b in index.html).
   Aktivieren: Block einkommentieren. */
/*
.index-knopf { position:fixed; right:22px; bottom:22px; z-index:40; background:var(--ink); color:var(--paper-bright);
  border:1px solid var(--rust); font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  padding:12px 16px; cursor:pointer; box-shadow:0 8px 22px rgba(0,0,0,.35); }
.index-knopf:hover { background:var(--rust); }
.index-lage { position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center; background:rgba(14,52,56,.6); }
.index-lage.offen { display:flex; }
.index-karte { background-color:var(--paper);
  background-image:linear-gradient(rgba(198,184,155,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(198,184,155,.5) 1px,transparent 1px);
  background-size:40px 40px; color:var(--ink); width:min(440px,92vw); padding:32px 34px 28px; position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.45); }
.index-karte .ik-titel { font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:#8C8064; margin:0 0 14px; }
.index-karte ol { list-style:none; margin:0; padding:0; }
.index-karte a { display:flex; gap:16px; align-items:baseline; text-decoration:none; color:var(--ink); padding:10px 2px;
  border-bottom:1px solid var(--paper-line); font-family:var(--serif); font-size:19px; }
.index-karte li:last-child a { border-bottom:none; }
.index-karte a b { font-family:var(--mono); font-size:11px; font-weight:500; color:#8F3A24; }
.index-karte a:hover { color:#8F3A24; }
.index-zu { position:absolute; top:10px; right:12px; background:none; border:0; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:#8C8064; }
.index-zu:hover { color:#8F3A24; }
*/

/* TOGGLE 3 · Petrol-Test #052229 (Brand-Review-Vorschlag „härteres Primärpetrol").
   Aktivieren: Block einkommentieren, Seite neu laden, auf 2 bis 3 Displays mit dem
   Standard vergleichen. Achtung: verringert den sichtbaren Abstand Petrol vs. Ink
   (Kapitel-Takt der Seite). Entscheidung dokumentieren in brand/tokens.css. */
/*
:root { --petrol:#052229; }
.home .heroX { background:radial-gradient(120% 130% at 20% 0%, #0A3238 0%, #052229 45%, #031A1F 100%); }
*/

/* TOGGLE 2 · Logo K2 „Rotstift-Signatur" statt Box (siehe brand/logo-k2/EINBAU-K2.md).
   Aktivieren: den folgenden Block einkommentieren + favicon tauschen. */
/*
.top .marke .am { border-color:transparent; color:var(--paper); position:relative; overflow:visible; }
.top .marke .am::after { content:""; position:absolute; left:-8%; bottom:1px; width:116%; height:6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M4 6 C 30 3, 62 8.5, 96 5' fill='none' stroke='%23A6422A' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%; }
.top .marke:hover .am { background:none; color:var(--rust); }
*/

/* ================================================================
   V3.4 — 21.09.2026: Stimmen live, drei Kontaktwege, Karten 2×2,
   Fall-Logos, Stats-Subline, Hero-Feinschliff
   ================================================================ */

/* Angebotskarten: vier Karten als 2×2 statt 3+1 (ab 760px) */
.karten-4 { grid-template-columns:1fr; }
@media (min-width:760px) { .karten-4 { grid-template-columns:repeat(2,1fr); gap:18px; } }

/* Stats: Labels dürfen umbrechen; Zertifizierungs-Subline unter ACC */
.statsX span { display:block; line-height:1.5; }
.statsX .z-sub { display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:#8F3A24; margin-top:5px; line-height:1.4; }

/* Fall-Logos (Bull Gemini, VEG'D) */
.pj .pj-logo img { width:auto; height:auto; max-height:60px; max-width:180px; }

/* Stimmen: Zitatkarten mit Quelle; Foto-Slot per Kommentar-Toggle in index.html */
figure.zitat { margin:0; display:flex; flex-direction:column; }
.zitat blockquote p { margin:0 0 10px; }
.zitat blockquote p:last-child { margin-bottom:0; }
.zitat .wer { margin-top:auto; padding-top:18px; line-height:1.7; }
.zitat .wer .quelle { display:block; margin-top:4px; color:#7FA0A3; text-decoration:none; letter-spacing:.12em; transition:color var(--dauer) var(--kurve); }
.zitat .wer .quelle:hover, .zitat .wer .quelle:focus-visible { color:var(--paper); }
.zitat-offen blockquote { color:var(--ochre); font-style:italic; }
.zitat-offen .qz { color:var(--ochre); }
.z-foto { display:block; width:56px; height:56px; object-fit:cover; border-radius:50%; margin:0 0 14px 28px; filter:grayscale(.35) contrast(1.06); }

/* Kontakt (V3.4e): Kicker + Headline, Ticket-Balken (Buchung), direkte Wege, Meta */
.u-rust { position:relative; white-space:nowrap; }
.u-rust svg { position:absolute; left:-2%; bottom:-.1em; width:104%; height:.3em; overflow:visible; }
.u-rust svg path { fill:none; stroke:var(--rust); stroke-width:4; stroke-linecap:round; }
.ks-kopf { display:grid; grid-template-columns:1fr; gap:28px; margin-bottom:44px; }
.ks-kicker { font-family:var(--hand); font-style:italic; font-size:19px; color:#D8674A; margin:0 0 14px; letter-spacing:.01em; }
.ks-kopf h2 { font-family:var(--serif); font-weight:500; font-size:clamp(34px,5vw,56px); line-height:1.12; margin:0; max-width:14ch; }
.ks-text { font-size:16px; line-height:1.7; color:#C6C9BF; max-width:44ch; margin:0; align-self:end; }
.ticket { display:grid; grid-template-columns:1fr; text-decoration:none; color:var(--ink); background:var(--paper); position:relative; transition:transform var(--dauer) var(--kurve); }
.ticket:hover, .ticket:focus-visible { transform:translateY(-2px); }
.t-links { display:block; padding:26px 28px 24px; }
.t-links b { display:block; font-family:var(--serif); font-weight:500; font-size:clamp(28px,3.6vw,40px); line-height:1.05; letter-spacing:-.005em; }
.t-links span { display:block; margin-top:10px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#6B6450; }
.t-rechts { display:flex; align-items:stretch; }
.t-label { display:flex; align-items:center; padding:0 28px; font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); }
.t-pfeil { display:flex; align-items:center; justify-content:center; width:112px; background:var(--rust); color:var(--paper-bright); transition:background var(--dauer) var(--kurve); }
.t-pfeil svg { width:34px; height:34px; transition:transform var(--dauer) var(--kurve); }
.t-pfeil svg path { fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.ticket:hover .t-pfeil, .ticket:focus-visible .t-pfeil { background:#8F361F; }
.ticket:hover .t-pfeil svg { transform:translate(3px,-3px); }
.ks-direkt { display:flex; flex-wrap:wrap; align-items:flex-start; gap:18px 0; margin-top:40px; }
.ks-direkt-label { font-family:var(--hand); font-style:italic; font-size:19px; color:#D8674A; padding-right:28px; }
.ks-direkt a { text-decoration:none; color:var(--paper); padding:0 28px; border-left:1px solid #2E4E52; }
.ks-direkt a b { display:block; font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.ks-direkt a b::after { content:" ↗"; color:#D8674A; }
.ks-direkt a span { display:block; margin-top:4px; font-family:var(--mono); font-size:11px; color:#9BB7B9; letter-spacing:.02em; overflow-wrap:anywhere; }
.ks-direkt a:hover b, .ks-direkt a:focus-visible b { color:#D8674A; }
.kontakt .k-meta { margin-top:44px; padding-top:22px; border-top:1px solid #2E4E52; }
@media (max-width:759px) {
  .t-rechts { border-top:1px solid #CDBFA4; }
  .t-label { flex:1; padding:18px 28px; }
  .t-pfeil { width:84px; }
  .ks-direkt a { border-left:none; padding:0; width:100%; }
  .ks-direkt-label { width:100%; }
}
@media (min-width:760px) {
  .ks-kopf { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:64px; align-items:end; }
  .ticket { grid-template-columns:1fr auto; }
}
@media print { .ticket { border:1px solid #999; background:#fff; } .t-pfeil { background:none; color:#111; } .ks-kopf h2, .t-links b { color:#111; } }

/* Sprachwahl DE/EN im Header (V3.7): SVG-Flaggen, Windows kennt keine Flaggen-Emoji */
.lang { display:flex; align-items:center; gap:4px; margin-left:auto; margin-right:18px; }
.lang a { display:inline-flex; align-items:center; gap:6px; padding:6px 8px; text-decoration:none; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--muted-on-dark); border:1px solid transparent; transition:color var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve); }
.lang a svg { width:18px; height:12.6px; display:block; opacity:.55; transition:opacity var(--dauer) var(--kurve); }
.lang a[aria-current="page"] { color:var(--paper); border-color:var(--ink-line); }
.lang a[aria-current="page"] svg, .lang a:hover svg, .lang a:focus-visible svg { opacity:1; }
.lang a:hover, .lang a:focus-visible { color:var(--paper); }
@media (min-width:600px) { .top .nav-links { margin-left:0; } .lang { order:2; margin:0 0 0 auto; } .top .nav-links { order:3; margin-left:22px; } }
@media (max-width:599px) { .lang { margin-right:4px; } .lang a span { display:none; } .lang a { padding:8px 6px; } }
.top .marke { flex:none; }
.top .marke .mz span { white-space:nowrap; }
@media (min-width:1001px) and (max-width:1120px) { .top .marke .mz span { display:none; } .top .nav-links { gap:16px; } .lang { margin-right:0; } }
@media (max-width:1000px) { .lang { order:0; margin:0 10px 0 auto; } .burger { order:1; } }