/*
Theme Name: Kodaro
Theme URI: https://kodaro.at/
Author: Elitech e.U.
Author URI: https://kodaro.at/
Description: Schlankes Theme für kodaro.at. Keine externen Schriften, keine Skripte, keine Cookies.
Version: 3.5.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kodaro
*/

*,*::before,*::after{box-sizing:border-box}

/* ------------------------------------------------------------------ System

   Typografie: Basis 17 px. Nach oben wächst die Skala im Verhältnis 1,2
   (kleine Terz): 17 · 20,4 · 24,5 · 29,4 · 35,2 · 42,3 · 50,8. Nach unten
   sind die Schritte enger (÷1,13): 17 · 15 · 13 · 12 — kleine Grade brauchen
   feinere Abstufung, eine alte Satzregel. Jede Schriftgröße der Seite ist
   ein Ton dieser Reihe, nichts liegt dazwischen.

   Rhythmus: Abstände sind Vielfache von 4 px.

   Zwei Stimmen: Die Systemschrift trägt den Text, die System-Monospace die
   Meta-Ebene (Nummern, Etiketten, Tags, Definitionen) — mit Tabellenziffern
   und durchgestrichener Null.

   Eine Akzentfarbe, an Bedeutungsstellen — nirgendwo sonst:
   Markenlinie am oberen Rand, Stamm des K-Zeichens, Modulnummern,
   Prüfstriche, aktiver Ort in der Navigation, Fokusring, Textauswahl,
   CTA-Hover, Unterstreichung beim Überfahren, der Shortcode-Chip.

   Linienregel: Trennlinien über die volle Breite sind Haarlinien
   (0,5 px auf HiDPI); Konturen von Modulen — Raster, Karten, Chips —
   bleiben konstant 1 px, gleiche Stärke wie die Fugen im Raster.

   Kontraste (nachgerechnet, nicht geschätzt), alle >= 4,5:1 (AA):
   Licht auf #fff: ink 19,8:1 · ink2 10,9:1 · mut 5,3:1 · Akzent 8,3:1.
   Dunkel auf #0f0f0e: ink 16,2:1 · ink2 9,2:1 · mut 6,4:1 · Akzent 8,2:1. */

:root{
  color-scheme:light dark;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Consolas,"Liberation Mono",Menlo,monospace;

  /* Skala */
  --t-lbl:.75rem;    /* 12   — Etiketten, Nummern, Kicker */
  --t-tag:.8125rem;  /* 13   — Tags, Definitionsbegriffe, Fußnote */
  --t-meta:.875rem;  /* 14   — Meta, Rollen, Fußzeile */
  --t-side:.9375rem; /* 15   — Nebentext in Zellen und Karten */
  --t-0:1.0625rem;   /* 17   — Fließtext, h3 in Zellen */
  --t-1:1.275rem;    /* 20,4 — h3 in Karten, Pitch, Wortmarke */
  --t-2:1.53rem;     /* 24,5 — h2 klein */
  --t-3:1.836rem;    /* 29,4 — h2 groß */
  --t-4:2.203rem;    /* 35,2 — h1 klein */
  --t-6:3.172rem;    /* 50,8 — h1 groß */

  /* Licht */
  --bg:#fff; --soft:#f6f6f5; --panel:#fff;
  --ink:#0a0a0a; --ink2:#3d3d3d; --mut:#6b6b6b;
  --line:#e4e4e4;
  --acc:#2743b3; --acc-fg:#fff;        /* Kobalt — 8,3:1 auf Weiß */
  --inv-bg:#0c0c0c; --inv-ink:#fff; --inv-ink2:#c9c9c6;
  --acc-i:#8fa8f0; --acc-i-fg:#0c0c0c; /* Akzent auf dunklen Flächen — 8,4:1 */

  --rad:3px;   /* eine Rundung für alles */
  --hair:1px;

  /* Die Bühne im Einstieg ist in beiden Schemata dunkel. */
  --stage:#0b0b0d; --stage-ink:#f4f4f2; --stage-ink2:#a8a8a4;
  --stage-line:#2a2a30; --stage-raster:#1b1b21;

  /* Tiefe: zwei abgestufte Schatten, warm getönt statt reinem Schwarz. */
  --schatten-1:0 1px 2px rgba(16,16,22,.06), 0 2px 6px rgba(16,16,22,.04);
  --schatten-2:0 2px 4px rgba(16,16,22,.07), 0 12px 28px -12px rgba(16,16,22,.18);
}

/* Haarlinien, wo der Bildschirm sie darstellen kann. */
@media (min-resolution:1.5dppx){
  :root{--hair:.5px}
}

/* Dunkel — kein invertiertes Weiß, sondern ein eigener Farbsatz. */
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0f0f0e; --soft:#141413; --panel:#161615;
    --ink:#ececea; --ink2:#b4b4b0; --mut:#96968f;
    --line:#262624;
    --acc:#8fa8f0; --acc-fg:#0f0f0e;
    --inv-bg:#1c1c1b; --inv-ink:#f2f2ef; --inv-ink2:#b4b4b0;
    --acc-i:#8fa8f0; --acc-i-fg:#0f0f0e;

    /* Im dunklen Schema sitzt die Bühne eine Stufe unter dem Seitengrund,
       damit der Übergang nicht als Kante wirkt. */
    --stage:#08080a; --stage-line:#26262c; --stage-raster:#17171c;

    /* Auf dunklem Grund tragen Schatten nicht — die Abstufung übernimmt
       die Fläche selbst. */
    --schatten-1:0 0 0 1px rgba(255,255,255,.02);
    --schatten-2:0 0 0 1px rgba(255,255,255,.05), 0 16px 32px -18px #000;
  }
}

/* ------------------------------------------------------------------ Basis */

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
@media (min-width:721px){html{scroll-padding-top:84px}}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);
  font-size:var(--t-0);line-height:1.6;-webkit-font-smoothing:antialiased}

::selection{background:var(--acc);color:var(--acc-fg)}

.wrap{max-width:960px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}

/* Verweise: Ruhelage mit halbtransparenter Unterstreichung; beim Überfahren
   zieht nur die Farbe nach — der Text selbst bleibt stehen. */
a{color:var(--ink);text-decoration:underline;text-underline-offset:.22em;
  text-decoration-thickness:1px;
  text-decoration-color:currentColor;
  text-decoration-color:color-mix(in srgb,currentColor 36%,transparent);
  transition:text-decoration-color .15s ease,color .15s ease}
a:hover{text-decoration-color:var(--acc)}

img{max-width:100%;height:auto}
code,kbd,samp{font-family:var(--mono);font-size:.92em}

/* Sprungziel für Tastaturbedienung — nur sichtbar, wenn angesprungen. */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bg);
  padding:12px 20px;z-index:100;text-decoration:none;border-radius:0 0 var(--rad) 0}
.skip:focus{left:0}

/* Das Sprungziel selbst wird nur programmatisch fokussiert — kein Ring. */
#inhalt:focus{outline:none}

/* Fokus muss sichtbar bleiben — sonst ist die Seite ohne Maus unbedienbar. */
a:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}

/* ---------- Kopf ----------
   Unter 721 px steht der Kopf still: Eine umbrechende Navigation darf
   keinen halben Bildschirm dauerhaft besetzen — und die Anker-Sprungziele
   bleiben ohne Rechnerei frei. */
/* Der Kopf ist ein durchgehendes Markenband — in beiden Schemata dunkel,
   auf jeder Seite gleich. Das gibt der Marke einen festen Ort und macht den
   Übergang in die Bühne zu einer Fläche statt zu einer Kante. */
.site-head{border-top:2px solid var(--acc-i);border-bottom:1px solid var(--stage-line);
  background:var(--stage);color:var(--stage-ink)}
@media (min-width:721px){
  .site-head{position:sticky;top:0;z-index:50;
    background:var(--stage);
    background:color-mix(in srgb,var(--stage) 88%,transparent);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 0}

/* Wortmarke: konstruiertes K-Zeichen (dieselbe Pfadgeometrie wie das
   Favicon) plus gesetzter Schriftzug. Das Zeichen erbt currentColor,
   nur der Stamm trägt den Akzent. */
.mark{display:inline-flex;align-items:center;color:var(--stage-ink);
  font-size:var(--t-1);font-weight:700;letter-spacing:-.02em;
  text-decoration:none;white-space:nowrap}
.mark svg{display:block;width:19px;height:19px;margin-right:10px;flex:none}
.mark .lgA{stroke:var(--acc-i)}
.mark span{opacity:.35;font-weight:400} /* Fallback für altes Markup */
.mark .mark-tld{opacity:1;font-family:var(--mono);font-size:var(--t-tag);
  font-weight:400;letter-spacing:0;color:var(--stage-ink2);margin-left:2px;
  transform:translateY(1px)}

.nav{display:flex;gap:24px;font-size:var(--t-side);flex-wrap:wrap}
.nav a{text-decoration:none;color:var(--stage-ink2);transition:color .15s ease}
.nav a:hover{color:var(--stage-ink);text-decoration:underline;text-underline-offset:.35em;
  text-decoration-color:var(--acc-i)}
.nav a[aria-current]{color:var(--stage-ink);font-weight:600;text-decoration:underline;
  text-underline-offset:.35em;text-decoration-thickness:2px;text-decoration-color:var(--acc-i)}
.site-head a:focus-visible{outline-color:var(--acc-i)}

/* ---------- Hero ----------

   Die Bühne ist in beiden Schemata dunkel. Das ist Absicht: Der Einstieg
   soll einen eigenen Raum aufmachen, nicht die Fortsetzung des Kopfes sein.
   Darunter kehrt die Seite ins jeweilige Schema zurück. */

.hero{padding:96px 0 72px;border-bottom:var(--hair) solid var(--line)}

.buehne{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--stage);color:var(--stage-ink);
  border-bottom:1px solid var(--stage-line);
  padding:104px 0 96px;
}

/* Zwei Lichtquellen über dem Raster, damit die Fläche nicht tot wirkt. */
.buehne::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:150%;z-index:-2;
  background:
    radial-gradient(48rem 34rem at 18% 6%, color-mix(in srgb,var(--acc-i) 26%,transparent), transparent 62%),
    radial-gradient(38rem 30rem at 88% 82%, color-mix(in srgb,var(--acc-i) 14%,transparent), transparent 60%);
}

/* Das Raster: Millimeterpapier, das zu den Rändern hin verschwindet. */
.buehne::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:
    linear-gradient(to right, var(--stage-raster) 1px, transparent 1px),
    linear-gradient(to bottom, var(--stage-raster) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(78% 78% at 50% 42%, #000 30%, transparent 100%);
  mask-image:radial-gradient(78% 78% at 50% 42%, #000 30%, transparent 100%);
}

.hero-raster{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:56px;align-items:center}
@media (max-width:900px){
  .hero-raster{grid-template-columns:1fr;gap:40px}
  .hero-bild{order:-1;max-width:280px}
}

.hero-kicker{font-family:var(--mono);font-size:var(--t-lbl);letter-spacing:.12em;
  text-transform:uppercase;color:var(--acc-i);margin:0 0 20px}

h1{font-size:clamp(var(--t-4),5.4vw,var(--t-6));line-height:1.06;letter-spacing:-.033em;
  font-weight:700;margin:0 0 24px;max-width:20ch;text-wrap:balance}
.buehne h1{color:var(--stage-ink);max-width:16ch}

/* Ein einziges Wort trägt den Akzent — mehr wäre Dekoration. */
.buehne h1 em{font-style:normal;color:var(--acc-i)}

.lead{font-size:clamp(var(--t-0),2.2vw,var(--t-1));line-height:1.55;color:var(--ink2);
  max-width:58ch;margin:0 0 36px;text-wrap:pretty}
.buehne .lead{color:var(--stage-ink2);max-width:52ch}

.cta{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--bg);
  text-decoration:none;padding:14px 28px;border-radius:var(--rad);font-weight:600;
  font-size:var(--t-0);transition:background-color .15s ease,color .15s ease,
  box-shadow .15s ease,transform .15s ease}
.cta:hover{background:var(--acc);color:var(--acc-fg);text-decoration:none}
.cta:active{transform:translateY(1px)}

/* Auf der Bühne führt der Akzent, nicht Schwarz. */
.buehne .cta{background:var(--acc-i);color:var(--acc-i-fg);
  box-shadow:0 1px 0 color-mix(in srgb,#fff 22%,transparent) inset}
.buehne .cta:hover{background:#fff;color:#0b0b0d;transform:translateY(-1px);
  box-shadow:0 8px 24px -10px color-mix(in srgb,var(--acc-i) 70%,transparent)}

.cta-line{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
.cta-2{display:inline-flex;align-items:center;padding:14px 0;font-weight:600;
  font-size:var(--t-0);color:var(--ink2);text-decoration:none}
.cta-2:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.3em;
  text-decoration-color:var(--acc)}
.buehne .cta-2{color:var(--stage-ink2)}
.buehne .cta-2:hover{color:#fff;text-decoration-color:var(--acc-i)}
.cta-note{display:block;margin-top:16px;font-size:var(--t-meta);color:var(--mut)}

/* ---------- Das Systembild ----------

   Sechs Systeme, die an einer Stelle zusammenlaufen — dieselbe Aussage wie
   der Text daneben, nur ohne Worte. Die Impulse sind gestrichelte Linien,
   deren Versatz wandert; das kostet nichts und braucht kein Skript. */

.hero-bild{justify-self:center;width:100%;max-width:340px}
.hero-bild svg{display:block;width:100%;height:auto}

.kd-ringe circle{fill:none;stroke:var(--stage-raster);stroke-width:1}
.kd-draehte path{fill:none;stroke:color-mix(in srgb,var(--acc-i) 30%,var(--stage-line));
  stroke-width:1.5}
.kd-knoten circle{fill:var(--stage);stroke:var(--acc-i);stroke-width:2}
.kd-kern circle{fill:var(--stage);stroke:var(--acc-i);stroke-width:2}
.kd-kern path{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:square}
.kd-kern .kd-kern-stamm{stroke:var(--acc-i)}

.kd-impulse path{
  fill:none;stroke:var(--acc-i);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:14 104;
  animation:kd-fliessen 3.2s linear infinite;
}
.kd-impulse path:nth-child(2){animation-delay:-1.1s}
.kd-impulse path:nth-child(3){animation-delay:-2.2s}

@keyframes kd-fliessen{
  from{stroke-dashoffset:118}
  to{stroke-dashoffset:-14}
}

/* Die Knoten atmen kaum sichtbar — gerade genug, dass die Grafik lebt. */
.kd-knoten circle{animation:kd-atmen 4.5s ease-in-out infinite}
.kd-knoten circle:nth-child(2){animation-delay:-.7s}
.kd-knoten circle:nth-child(3){animation-delay:-1.4s}
.kd-knoten circle:nth-child(4){animation-delay:-2.1s}
.kd-knoten circle:nth-child(5){animation-delay:-2.8s}
.kd-knoten circle:nth-child(6){animation-delay:-3.5s}

@keyframes kd-atmen{
  0%,100%{opacity:.55}
  50%{opacity:1}
}

/* ---------- Abschnitte ---------- */
section{padding:72px 0;border-bottom:var(--hair) solid var(--line)}
h2{font-size:clamp(var(--t-2),3vw,var(--t-3));line-height:1.15;letter-spacing:-.022em;
  font-weight:700;margin:0 0 16px;text-wrap:balance}
.sub{color:var(--mut);max-width:62ch;margin:0 0 40px;text-wrap:pretty}
/* Nachsatz unter einem Raster — steht näher an ihm als ein neuer Abschnitt. */
.after-grid{margin:28px 0 0}
p{margin:0 0 16px}
.soft{background:var(--soft)}

/* ---------- Raster ----------
   Ein-Pixel-Fugen: die Trennlinien sind der Fugenhintergrund, keine
   Rahmen — dadurch stoßen die Linien exakt. Der Außenrahmen bleibt
   bewusst 1 px wie die Fugen (Linienregel), keine Haarlinie. */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--rad);
  overflow:hidden;box-shadow:var(--schatten-1)}
.cell{background:var(--panel);padding:28px 26px 30px;position:relative;
  transition:background-color .18s ease}
.cell:hover{background:var(--soft)}

/* Beim Überfahren wandert eine Akzentkante an den linken Rand — sie wächst
   aus der Fläche heraus, statt hineingeschaltet zu werden. */
.cell::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--acc);transform:scaleY(0);transform-origin:top;
  transition:transform .22s ease}
.cell:hover::before{transform:scaleY(1)}

.cell h3{font-size:var(--t-0);font-weight:700;margin:0 0 8px;letter-spacing:-.01em}
.cell p{font-size:var(--t-side);color:var(--ink2);margin:0}

/* Nummern: Monospace, Tabellenziffern, durchgestrichene Null — und eine
   Messlinie, die bis zum Zeichen läuft. */
.num{display:flex;align-items:center;gap:12px;font-family:var(--mono);
  font-size:var(--t-lbl);font-weight:400;color:var(--acc);letter-spacing:.08em;
  margin-bottom:14px;font-variant-numeric:tabular-nums slashed-zero}
.num::after{content:"";height:1px;flex:1;min-width:24px;background:var(--line)}

/* Die Zeichen: 24er-Raster, Strichstärke 2, eckige Enden — dieselbe
   Strichsprache wie das K im Seitenkopf. */
.zeichen{display:block;margin:0 0 16px}
.zeichen svg{display:block;width:26px;height:26px;
  fill:none;stroke:var(--acc);stroke-width:2;
  stroke-linecap:square;stroke-linejoin:miter;
  transition:stroke .18s ease,transform .18s ease}
.cell:hover .zeichen svg{transform:translateY(-1px)}

.two{display:grid;grid-template-columns:1fr 1fr;gap:44px}
@media (max-width:720px){.two{grid-template-columns:1fr;gap:32px}}
.two h3{font-size:var(--t-0);margin:0 0 10px}
.two p{font-size:var(--t-side);color:var(--ink2)}

/* ---------- Arbeiten / Referenzen ---------- */
.work{display:grid;gap:20px}
.card{border:1px solid var(--line);border-radius:var(--rad);
  padding:30px 28px;background:var(--panel);box-shadow:var(--schatten-1);
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.card:hover{box-shadow:var(--schatten-2);transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--acc) 30%,var(--line))}

/* Der Kicker bekommt eine Marke davor — wie eine Beschriftung auf einer
   technischen Zeichnung. */
.card .kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:var(--t-lbl);font-weight:400;letter-spacing:.08em;color:var(--mut);
  margin-bottom:12px}
.card .kicker::before{content:"";width:14px;height:2px;background:var(--acc)}
.card h3{font-size:var(--t-1);letter-spacing:-.018em;margin:0 0 4px;font-weight:700}
.card .role{font-size:var(--t-meta);color:var(--mut);margin:0 0 16px}
.card p{font-size:var(--t-side);color:var(--ink2);margin:0 0 16px}
.card p:last-child{margin-bottom:0}
.tags{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{font-family:var(--mono);font-size:var(--t-tag);color:var(--ink2);
  background:var(--soft);border:1px solid var(--line);border-radius:var(--rad);
  padding:3px 10px;font-variant-numeric:tabular-nums slashed-zero}

/* ---------- Listen ---------- */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:12px;max-width:62ch}
.checks li{position:relative;padding-left:28px;color:var(--ink2)}
.checks li::before{content:"";position:absolute;left:0;top:.62em;width:13px;height:2px;background:var(--acc)}

/* ---------- Dunkler Abschnitt ----------
   Im hellen Schema die Umkehrung; im dunklen Schema keine zweite
   Umkehrung, sondern eine leicht angehobene Fläche — die Hierarchie
   bleibt gleich. Fokus und Auswahl tragen hier den hellen Akzent. */
.dark{background:var(--inv-bg);color:var(--inv-ink)}
.dark h2{color:var(--inv-ink)}
.dark p{color:var(--inv-ink2)}
.dark a{color:var(--inv-ink)}
.dark a:focus-visible,.dark button:focus-visible{outline-color:var(--acc-i)}
.dark .cta{background:var(--inv-ink);color:var(--inv-bg)}
.dark .cta:hover{background:var(--acc-i);color:var(--acc-i-fg)}
.dark ::selection{background:var(--acc-i);color:var(--acc-i-fg)}

/* ---------- Kontakt ---------- */
.field{display:block;font-family:var(--mono);font-size:var(--t-lbl);letter-spacing:.08em;
  color:var(--mut);font-weight:400;margin-bottom:6px}
.big{font-size:clamp(var(--t-1),3vw,var(--t-2));font-weight:600;letter-spacing:-.015em;
  margin:0 0 26px;word-break:break-word}

/* ---------- Das eine Code-Artefakt ----------
   Der echte Shortcode des Plugins (add_shortcode in kodaro-booking.php),
   als einziges Stück Code auf der ganzen Seite. Der Cursor steht —
   er blinkt nicht. */
.sc-line{margin:14px 0 0}
.sc{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:var(--t-tag);font-variant-numeric:slashed-zero;color:var(--acc);
  background:var(--soft);border:1px solid var(--line);border-radius:var(--rad);
  padding:5px 12px}
.sc::after{content:"";width:7px;height:14px;background:var(--acc);opacity:.9}

/* ---------- Kontakt ----------

   Der Abschluss der Seite: Formular links, Erreichbarkeit rechts. Auf
   schmalen Bildschirmen stapelt sich beides. */
#kontakt .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  column-gap:56px;row-gap:0;align-items:start;max-width:960px}
@media (max-width:800px){
  #kontakt .wrap{grid-template-columns:1fr;row-gap:36px}
}
/* Überschrift und Vorspann laufen über beide Spalten; die Abstände kommen
   von ihnen selbst, damit der Spaltenabstand die Zeilen nicht aufreißt. */
#kontakt h2,#kontakt .sub{grid-column:1/-1}
#kontakt h2{margin-bottom:16px}
#kontakt .sub{margin-bottom:44px}

/* Die Nebenspalte: kein zweites Formular, sondern die Antwort auf die Frage
   „was passiert, wenn ich hier absende?" */
.kontakt-neben{border:1px solid var(--line);border-radius:var(--rad);
  background:var(--soft);padding:26px 24px;box-shadow:var(--schatten-1)}
.kontakt-neben h3{font-size:var(--t-0);margin:0 0 14px;font-weight:700}
.kontakt-neben ul{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:11px}
.kontakt-neben li{position:relative;padding-left:26px;font-size:var(--t-side);
  color:var(--ink2)}
.kontakt-neben li::before{content:"";position:absolute;left:0;top:.6em;
  width:12px;height:2px;background:var(--acc)}
.kontakt-neben .direkt{font-family:var(--mono);font-size:var(--t-tag);
  color:var(--mut);margin:0;padding-top:18px;border-top:1px solid var(--line)}
.kontakt-neben .direkt a{color:var(--ink);text-decoration-color:var(--acc)}

/* ---------- Kontaktformular ----------
   Ohne JavaScript. Der Rahmen wird beim Hineinklicken zum Akzent, sonst
   passiert nichts — Formulare sind Werkzeug, keine Bühne. */
.formular{max-width:34rem;margin:0}
.feld{display:block;margin:0 0 18px}
.feld label{display:block;font-family:var(--mono);font-size:var(--t-lbl);
  letter-spacing:.08em;color:var(--mut);margin-bottom:6px}
.feld input,.feld textarea{
  display:block;width:100%;font:inherit;font-size:var(--t-0);color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--rad);
  padding:11px 13px;transition:border-color .15s ease}
.feld textarea{resize:vertical;min-height:8em;line-height:1.5}
.feld input:hover,.feld textarea:hover{border-color:var(--mut)}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent)}
.formular button.cta{border:0;cursor:pointer;font-family:inherit}

/* Das Feld für die Maschinen: nimmt keinen Platz und ist nicht erreichbar. */
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.formular-fuss{font-size:var(--t-meta);color:var(--mut);margin:16px 0 0;max-width:44ch}
.formular-alt{font-size:var(--t-meta);color:var(--mut);margin:24px 0 0}

.hinweis{border-left:3px solid var(--line);padding:12px 16px;margin:0 0 24px;
  max-width:44ch;background:var(--soft);border-radius:0 var(--rad) var(--rad) 0}
.hinweis.gut{border-left-color:var(--acc);color:var(--ink)}
.hinweis.schlecht{border-left-color:#b32727;color:var(--ink)}
@media (prefers-color-scheme:dark){
  .hinweis.schlecht{border-left-color:#f09090}
}

/* ---------- Rechtstexte ---------- */
.legal h1{font-size:clamp(var(--t-3),4.4vw,var(--t-4));margin-bottom:8px;max-width:none}
.legal .since{color:var(--mut);font-size:var(--t-side);margin:0 0 44px}
.legal h2{font-size:var(--t-0);font-weight:700;letter-spacing:-.012em;margin:40px 0 12px;
  padding-top:24px;border-top:var(--hair) solid var(--line)}
.legal h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.legal p{color:var(--ink2)}
.legal ul{margin:0 0 14px;padding-left:22px;color:var(--ink2)}
.legal li{margin-bottom:6px}
.legal li::marker{color:var(--mut)}
.legal section{padding:0;border-bottom:0}
dl{margin:0 0 14px;display:grid;grid-template-columns:190px 1fr;gap:8px 20px}
@media (max-width:600px){dl{grid-template-columns:1fr;gap:2px 0}dt{margin-top:12px}}
dt{font-family:var(--mono);font-size:var(--t-tag);color:var(--mut);letter-spacing:.01em;
  padding-top:2px}
dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums}
.box{background:var(--soft);border:1px solid var(--line);border-radius:var(--rad);
  padding:20px 22px;margin:0 0 14px}
.box p:last-child{margin-bottom:0}

/* ---------- Kleine Helfer ----------
   Statt Inline-Styles, damit die Content-Security-Policy ohne
   'unsafe-inline' auskommt. Inline-style-Attribute wären sonst blockiert. */
.mb0{margin-bottom:0}
.wrap > p:last-child,
.wrap > *:last-child > p:last-child{margin-bottom:0}
.kicker-top{margin-bottom:16px}
.pitch{font-size:var(--t-1);line-height:1.5;color:var(--ink2);text-wrap:pretty}
.pitch strong{color:var(--ink)}
.legal .wrap{padding-top:64px;padding-bottom:88px}

/* ---------- Redaktionelle Seiten aus dem WP-Editor ---------- */
.entry .wrap{padding-top:64px;padding-bottom:88px}
.entry h2{margin-top:36px}
.entry h3{font-size:var(--t-0);margin:28px 0 10px}
.entry ul,.entry ol{color:var(--ink2);padding-left:22px;margin:0 0 16px}
.entry li{margin-bottom:6px}
.entry blockquote{margin:0 0 20px;padding-left:20px;border-left:3px solid var(--line);color:var(--ink2)}
.entry figure{margin:0 0 20px}
.entry table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:var(--t-side);
  font-variant-numeric:tabular-nums}
.entry th,.entry td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.entry th{background:var(--soft);font-weight:700}
.entry .alignwide,.entry .alignfull{max-width:100%}
.wp-block-image img{border-radius:var(--rad)}

/* Barrierefreiheit: Text nur für Screenreader (WordPress-Konvention). */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;
  margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal}

/* ---------- Fuß ---------- */
/* Die Fußzeile schließt die Seite mit derselben Fläche, mit der der Kopf sie
   öffnet. Dazwischen liegt der helle Inhalt wie ein Blatt in einer Mappe. */
.site-foot{padding:48px 0 56px;font-size:var(--t-meta);
  background:var(--stage);color:var(--stage-ink2);
  border-top:1px solid var(--stage-line)}
.fl{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
.fl a{color:var(--stage-ink2);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .15s ease,border-color .15s ease}
.fl a:hover{color:var(--stage-ink);border-bottom-color:var(--acc-i)}
.site-foot a:focus-visible{outline-color:var(--acc-i)}
/* Voll deckend: Das ist eine Pflichtangabe und muss lesbar sein, nicht
   dezent. Abgestuft wird über die Schriftgröße, nicht über die Deckkraft. */
.owner{margin-top:20px;font-family:var(--mono);font-size:var(--t-tag);
  color:var(--stage-ink2)}

@media (max-width:600px){
  body{font-size:1rem}
  .hero{padding:64px 0 52px}
  .buehne{padding:72px 0 64px}
  .buehne::after{background-size:44px 44px}
  section{padding:52px 0}
  .nav{gap:16px;font-size:var(--t-meta)}
  .cell{padding:24px 22px 26px}
  .card{padding:26px 22px}
  .hero-bild{max-width:220px}
}

/* Wer Bewegung reduziert haben will, bekommt keine — auch keine Übergänge.
   Die Impulse im Systembild bleiben dann als ruhende Striche stehen; die
   Grafik verliert nichts an Aussage. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .cta:active,.card:hover,.zeichen svg{transform:none}
  .kd-impulse path{stroke-dasharray:none;opacity:.5}
  .kd-knoten circle{opacity:.85}
  .cell::before{transform:scaleY(1);opacity:0}
  .cell:hover::before{opacity:1}
}
/* ---------- Druck ----------
   Wer die Seite druckt, bekommt Text, keine Bühne. Dunkle Flächen werden hell,
   die Grafik verschwindet, Links zeigen ihr Ziel. */
@media print{
  .site-head,.site-foot,.buehne{background:#fff!important;color:#000!important;
    border:0!important;box-shadow:none!important}
  .buehne::before,.buehne::after,.hero-bild,.skip,.formular,.kontakt-neben,
  .cta,.cta-2,.nav{display:none!important}
  .buehne h1,.buehne .lead,.hero-kicker,.mark{color:#000!important}
  body{font-size:11pt;line-height:1.45;color:#000;background:#fff}
  .wrap{max-width:none;padding:0}
  section{padding:18pt 0;border-bottom:1px solid #999;break-inside:avoid}
  .grid{display:block;background:none;border:0;box-shadow:none}
  .cell{padding:8pt 0;border-bottom:1px solid #ddd;break-inside:avoid}
  .cell::before{display:none}
  .card{box-shadow:none;break-inside:avoid;page-break-inside:avoid}
  a{color:#000;text-decoration:underline}
  a[href^="http"]:not([href*="kodaro.at"])::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  details{display:block}
  details summary{list-style:none}
  details:not([open])>*:not(summary){display:block}
  h1{font-size:22pt}h2{font-size:15pt;margin-top:14pt}h3{font-size:12pt}
}

/* ---------- Der Nachweis ----------
   Eine Zeile in der Fußzeile, die sagt, woraus diese Seite besteht — mit
   Werten, die sie selbst misst. Monospace, weil es Messwerte sind. */
.nachweis{margin:24px 0 0;padding:16px 0 0;border-top:1px solid var(--stage-line);
  font-family:var(--mono);font-size:var(--t-lbl);letter-spacing:.04em;
  color:var(--stage-ink2);display:flex;flex-wrap:wrap;gap:6px 0;align-items:center}
.nachweis span{white-space:nowrap}
.nachweis span+span::before{content:"·";margin:0 10px;color:var(--acc-i);opacity:.6}
.nachweis strong{font-weight:400;color:var(--stage-ink)}



/* ================================================================== 3.1
   Leistungsseiten und Tiefe. Alles ab hier ERWEITERT das System oben —
   dieselben Variablen, Skala und Stimmen. Nichts wird umbenannt oder
   gelöscht; der Block lässt sich als Ganzes wieder abschneiden.

   Kontraste, nachgerechnet (WCAG 2, Text auf Fläche), alle >= 4,5:1:
   Licht   ink2 #3d3d3d auf soft #f6f6f5 10,0 · Akzent #2743b3 auf soft 7,6
           · Akzent auf panel #fff 8,3
   Dunkel  ink2 #b4b4b0 auf soft #141413 8,9 · Akzent #8fa8f0 auf soft 7,9
           · Akzent auf panel #161615 7,8
   Kopf/Fuß (immer dunkel)  stage-ink2 #a8a8a4 auf stage #0b0b0d 8,2
           · acc-i #8fa8f0 auf stage 8,5 · Menü-Hover #1b1e28 (acc-i 12 %
           über stage): stage-ink #f4f4f2 15,1 · acc-i 7,1 · stage-ink2 7,0
   Deko-Ebenen (Kachelziffer, K, Rasterspur, Strich; < 10 %) sind kein Text. */

/* ---------- Kopf: Leistungsmenü ----------
   Breit: öffnet per :hover und :focus-within, ohne Skript. Schmal: zweite
   Zeile unter der Hauptnavigation — der Kopf klebt dort nicht. */
.nav-gruppe>a::after{content:"";display:inline-block;width:5px;height:5px;margin-left:8px;
  border:solid currentColor;border-width:0 1px 1px 0;opacity:.7;
  transform:translateY(-3px) rotate(45deg);transition:transform .2s ease}
.nav-gruppe:hover>a::after,.nav-gruppe:focus-within>a::after{transform:rotate(225deg)}
.nav-menu{counter-reset:leistung}
.nav-menu a::before{counter-increment:leistung;content:counter(leistung,decimal-leading-zero) / "";
  font-family:var(--mono);font-size:var(--t-lbl);letter-spacing:.08em;color:var(--acc-i);
  font-variant-numeric:tabular-nums slashed-zero;margin-right:10px}
.nav-menu a[aria-current]{color:var(--stage-ink);font-weight:600;text-decoration:none}

@media (min-width:721px){
  .nav-gruppe{position:relative}
  .nav-menu{position:absolute;top:calc(100% + 14px);left:-14px;min-width:16rem;padding:6px;
    display:grid;background:var(--stage);border:1px solid var(--stage-line);border-radius:var(--rad);
    box-shadow:0 20px 40px -16px #000,0 0 0 1px color-mix(in srgb,#fff 3%,transparent);
    opacity:0;visibility:hidden;translate:0 6px;
    transition:opacity .18s ease,translate .18s ease,visibility 0s linear .18s}
  .nav-menu::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:16px}
  .nav-gruppe:hover .nav-menu,.nav-gruppe:focus-within .nav-menu{
    opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
  .nav-menu a{display:block;padding:9px 12px;border-radius:var(--rad);
    white-space:nowrap;transition:color .15s ease,background-color .15s ease}
  .nav-menu a:hover,.nav-menu a:focus-visible{color:var(--stage-ink);text-decoration:none;
    background:color-mix(in srgb,var(--acc-i) 12%,transparent)}
  .nav-menu a[aria-current]{box-shadow:inset 2px 0 var(--acc-i)}
}
@media (max-width:720px){
  .bar{flex-wrap:wrap;row-gap:14px;padding:16px 24px}
  .nav{flex-basis:100%}
  .nav-gruppe{display:contents}
  .nav-gruppe>a::after,.nav-menu a::before{display:none}
  .nav-menu{order:10;flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px 16px;
    padding-top:10px;border-top:1px solid var(--stage-line);font-size:var(--t-tag)}
}

/* ---------- Bühne ohne Systembild (Unterseiten) ----------
   Licht nach rechts, Raster dichter, dahinter das K aus dem Kopf — dieselbe
   Pfadgeometrie, groß, fast unsichtbar; der Stamm trägt den Akzent. */
.buehne .wrap:not(.hero-raster){position:relative}
.buehne .wrap:not(.hero-raster)::after{content:"";position:absolute;z-index:-1;pointer-events:none;
  right:-4%;top:50%;width:clamp(240px,50vw,540px);aspect-ratio:1;transform:translateY(-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M11 8v16' stroke='%238fa8f0' stroke-opacity='.12'/%3E%3Cpath d='M22 8 11 16.6M15.4 13.2 22 24' stroke='%23f4f4f2' stroke-opacity='.05'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask-image:radial-gradient(48% 48% at 55% 48%,#000,transparent);
  mask-image:radial-gradient(48% 48% at 55% 48%,#000,transparent)}
.buehne:has(.wrap:not(.hero-raster))::before{background:
  radial-gradient(44rem 32rem at 82% 42%,color-mix(in srgb,var(--acc-i) 24%,transparent),transparent 62%),
  radial-gradient(34rem 26rem at 6% 96%,color-mix(in srgb,var(--acc-i) 12%,transparent),transparent 60%)}
@media (min-width:601px){
  .buehne:has(.wrap:not(.hero-raster))::after{background-size:48px 48px;
    -webkit-mask-image:radial-gradient(70% 85% at 62% 50%,#000 20%,transparent 100%);
    mask-image:radial-gradient(70% 85% at 62% 50%,#000 20%,transparent 100%)}
}

/* ---------- Übergang Bühne → Inhalt ----------
   Keine Kante: das Raster läuft in den ersten Abschnitt aus, und ein
   1-px-Strich zieht an der linken Textkante aus der Bühne heraus. */
.buehne+section{position:relative;isolation:isolate}
.buehne+section::after{content:"";position:absolute;inset:0 0 auto 0;height:200px;z-index:-1;
  pointer-events:none;
  background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(50% 100% at 50% 0,#000,transparent);
  mask-image:radial-gradient(50% 100% at 50% 0,#000,transparent)}
/* Der 1-px-Strich an der Textkante ist gestrichen: Auf Aufnahmen der Seite
   las er sich als Darstellungsfehler, nicht als Absicht. Der Raster-Auslauf
   oben reicht als Übergang. */
.buehne+section::before{content:none}

/* ---------- Kacheln: Tiefe und Verweis ----------
   Die Nummer noch einmal groß im Grund; der Verweis macht die ganze Kachel
   zum Ziel (::after spannt ihn auf), Pfeil und Unterstreichung ziehen nach. */
.grid{counter-reset:zelle}
.cell{counter-increment:zelle;overflow:hidden}
.cell::after{content:counter(zelle,decimal-leading-zero) / "";position:absolute;right:10px;bottom:-16px;
  font-family:var(--mono);font-size:5.5rem;font-weight:700;line-height:1;letter-spacing:-.06em;
  font-variant-numeric:tabular-nums slashed-zero;color:var(--ink);opacity:.045;pointer-events:none;
  transition:opacity .25s ease,translate .25s ease}
.cell:hover::after{opacity:.08;translate:0 -6px}
@media (prefers-color-scheme:dark){.cell::after{opacity:.06}.cell:hover::after{opacity:.1}}

.cell-link{display:inline-flex;align-items:center;gap:7px;margin-top:18px;
  font-size:var(--t-meta);font-weight:600;color:var(--ink);text-decoration:none;padding-bottom:2px;
  background:linear-gradient(var(--acc),var(--acc)) no-repeat 0 100%/0 1px;
  transition:background-size .25s ease,color .15s ease}
.cell-link span{display:inline-block;color:var(--acc);transition:transform .2s ease}
.cell-link::after{content:"";position:absolute;inset:0}
.cell:hover .cell-link,.cell-link:focus-visible{color:var(--acc);background-size:100% 1px}
.cell:hover .cell-link span{transform:translateX(4px)}
.cell:has(.cell-link:focus-visible){background:var(--soft)}
.cell:has(.cell-link:focus-visible)::before{transform:scaleY(1)}

/* Karten: Kicker-Marke wächst mit. */
.card .kicker::before{transition:width .25s ease}
.card:hover .kicker::before{width:26px}

/* ---------- Ablauf: vier Schritte an einer Messlinie ----------
   Zählernummern; die Linie ist die von .num, läuft aber bis zum nächsten
   Schritt und füllt sich beim Überfahren mit Akzent. Schmal: senkrecht. */
.ablauf{list-style:none;margin:0;padding:0;counter-reset:schritt;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 24px}
.ablauf li{counter-increment:schritt;position:relative;padding-top:30px}
.ablauf li::before{content:counter(schritt,decimal-leading-zero);position:absolute;left:0;top:0;
  font-family:var(--mono);font-size:var(--t-lbl);letter-spacing:.08em;line-height:16px;
  color:var(--acc);font-variant-numeric:tabular-nums slashed-zero}
.ablauf li::after{content:"";position:absolute;top:8px;left:32px;right:-14px;height:1px;
  background:linear-gradient(var(--acc),var(--acc)) no-repeat 0 0/0 100%,var(--line);
  transition:background-size .4s ease}
.ablauf li:last-child::after{right:0}
.ablauf li:hover::after{background-size:100% 100%}
.ablauf strong{display:block;font-size:var(--t-0);font-weight:700;letter-spacing:-.01em;margin:0 0 8px}
.ablauf span{display:block;font-size:var(--t-side);color:var(--ink2);text-wrap:pretty}
@media (max-width:840px){.ablauf{grid-template-columns:1fr 1fr}}
@media (max-width:560px){
  .ablauf{grid-template-columns:1fr;gap:0}
  .ablauf li{padding:0 0 28px 36px}
  .ablauf li::after{top:22px;bottom:2px;left:7px;right:auto;width:1px;height:auto;background-size:100% 0}
  .ablauf li:hover::after{background-size:100% 100%}
  .ablauf li:last-child::after{display:none}
}

/* ---------- Fragen: Akkordeon ohne Skript ----------
   Das Plus sind zwei 2-px-Striche; beim Öffnen dreht es sich, der senkrechte
   zieht sich zurück — übrig bleibt Minus. Inhalt blendet weich ein. */
.fragen{border-top:1px solid var(--line);max-width:760px}
.fragen details{border-bottom:1px solid var(--line)}
.fragen summary{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px 0;cursor:pointer;list-style:none;font-weight:600;font-size:var(--t-0);
  letter-spacing:-.01em;line-height:1.4}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"";flex:none;width:28px;height:28px;color:var(--acc);
  border:1px solid var(--line);border-radius:var(--rad);
  background:linear-gradient(currentColor,currentColor) center/13px 2px no-repeat,
    linear-gradient(currentColor,currentColor) center/2px 13px no-repeat;
  transition:transform .3s ease,background-size .3s ease,border-color .15s ease}
.fragen summary:hover::after{border-color:var(--acc)}
.fragen details[open] summary::after{transform:rotate(180deg);background-size:13px 2px,2px 0}
.fragen summary:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:2px}
.fragen details>:not(summary){color:var(--ink2);font-size:var(--t-side);max-width:62ch;margin:0 0 20px}
.fragen details[open]>:not(summary){animation:kd-auf .3s ease both}
@keyframes kd-auf{from{opacity:0;translate:0 -4px}}
@supports (interpolate-size:allow-keywords){
  .fragen{interpolate-size:allow-keywords}
  .fragen details::details-content{block-size:0;overflow:clip;
    transition:block-size .3s ease,content-visibility .3s allow-discrete}
  .fragen details[open]::details-content{block-size:auto}
}

/* ---------- Fuß: die sechs Seiten ---------- */
.fl-leistungen{margin:0 0 18px;padding:0 0 18px;border-bottom:1px solid var(--stage-line)}
.fl-leistungen span{font-family:var(--mono);font-size:var(--t-lbl);letter-spacing:.1em;
  text-transform:uppercase;color:var(--acc-i);margin-right:4px}

/* ---------- Erscheinen beim Scrollen ----------
   Zeitachse ist die Sichtbarkeit; ohne Unterstützung greift der Block nicht.
   `translate` statt `transform`, damit der Karten-Hover bleibt. Das Raster
   braucht overflow:clip statt hidden, sonst wäre es selbst die Scrollfläche. */
@supports (animation-timeline:view()){
  .grid{overflow:clip}
  section>.wrap>h2,section>.wrap>.sub,section>.wrap>p,.cell,.card,.two>*,
  .ablauf li,.fragen,.kontakt-neben{
    animation:kd-erscheinen linear both;animation-timeline:view();
    animation-range:entry 0 entry 200px}
  .cell:nth-child(3n+2),.ablauf li:nth-child(2){animation-range:entry 50px entry 250px}
  .cell:nth-child(3n),.ablauf li:nth-child(3){animation-range:entry 100px entry 300px}
  .ablauf li:nth-child(4){animation-range:entry 150px entry 350px}
}
@keyframes kd-erscheinen{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}

@media (max-width:600px){
  .buehne+section::after{background-size:44px 44px;height:140px}
  .buehne+section::before{top:-40px;height:88px}
  .cell::after{font-size:4.5rem;bottom:-12px}
}
/* Bewegung abbestellt: der Block oben schaltet alles ab, was er erreicht. */
@media (prefers-reduced-motion:reduce){
  .fragen details::details-content{transition:none}
}
@media print{
  *{animation:none!important}
  .cell::after,.buehne+section::before,.buehne+section::after,.buehne .wrap::after,
  .fragen summary::after{display:none}
}

/* ================================================================ 3.2
   Eigene Schrift, größere Typografie, Referenzen mit Bild.

   Geist und Geist Mono liegen im Theme unter fonts/ — selbst gehostet, kein
   Aufruf zu fremden Servern. Vier Dateien: je Familie ein lateinischer
   Grundsatz und die Erweiterung für Sonderzeichen; der Browser lädt nur,
   was der Text braucht. Bis die Schrift da ist, steht die Systemschrift.
   ============================================================ */

@font-face{font-family:'Geist';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('fonts/geist-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('fonts/geist-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Ersatzschrift für die Ladezeit: Arial, auf die Maße von Geist gebracht.
   Bis Geist da ist, steht sonst die Systemschrift mit anderer Laufweite und
   anderer Zeilenhöhe — beim Wechsel springt die Kopfzeile (Layout-Shift).
   Die Werte sind gemessen (Chrome, canvas.measureText, 100 px): Geist hat
   Oberlänge 1,01 em und Unterlänge 0,30 em, Arial 0,91 und 0,21; die
   Laufweite hängt vom Schnitt ab, deshalb je Gewicht eine Angabe. Die
   Überschreibungen sind auf die angepasste Größe bezogen (Wert ÷ size-adjust).
   Ohne Arial (Android) fällt der Browser auf die nächste Familie zurück. */
@font-face{font-family:'Geist Ersatz';font-style:normal;font-weight:300 400;
  src:local('Arial'),local('ArialMT');
  size-adjust:102.5%;ascent-override:98.5%;descent-override:29.3%;line-gap-override:0%}
@font-face{font-family:'Geist Ersatz';font-style:normal;font-weight:500;
  src:local('Arial'),local('ArialMT');
  size-adjust:104.5%;ascent-override:96.7%;descent-override:28.7%;line-gap-override:0%}
@font-face{font-family:'Geist Ersatz';font-style:normal;font-weight:600;
  src:local('Arial Bold'),local('Arial-BoldMT');
  size-adjust:96.5%;ascent-override:104.7%;descent-override:31.1%;line-gap-override:0%}
@font-face{font-family:'Geist Ersatz';font-style:normal;font-weight:700 800;
  src:local('Arial Bold'),local('Arial-BoldMT');
  size-adjust:102%;ascent-override:99%;descent-override:29.4%;line-gap-override:0%}

:root{
  --sans:'Geist','Geist Ersatz',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,"Cascadia Code","SF Mono",Consolas,"Liberation Mono",Menlo,monospace;
  /* Die Skala rückt nach oben: Überschriften bekommen Gewicht, Fließtext bleibt. */
  --t-3:2rem;      /* 32   — h2 groß */
  --t-4:2.5rem;    /* 40   — h1 klein */
  --t-6:3.9rem;    /* 62,4 — h1 groß */
}

/* Geist läuft etwas weiter als Segoe; die Überschriften ziehen wir dichter. */
h1{letter-spacing:-.042em;font-weight:700;max-width:18ch}
.buehne h1{font-size:clamp(var(--t-4),6.6vw,var(--t-6));line-height:1.02;max-width:15ch}
h2{font-size:clamp(1.7rem,3.4vw,var(--t-3));letter-spacing:-.03em}
.lead{font-size:clamp(1.0625rem,2.3vw,1.375rem)}
.buehne .lead{max-width:50ch}
.hero-kicker{letter-spacing:.14em}
/* Der Kicker darf eine Brotkrume tragen (Leistungen · IT-Betreuung); der
   Link erbt die Kickerfarbe. */
.hero-kicker a{color:inherit}
.mark{font-weight:600;letter-spacing:-.025em;font-size:1.35rem}
.hero-bild{max-width:400px}
.buehne{padding:120px 0 112px}

/* ---------- Referenzen mit Bild ----------
   Zwei Arbeiten, je als Doppelblock: links das Bild in einem angedeuteten
   Browserfenster, rechts der Text. Der zweite Block ist gespiegelt, damit
   die Seite nicht in eine Spalte kippt. Die Bilder sind echte Aufnahmen
   der laufenden Seiten, oberer Ausschnitt, 1440 × 540. */
.work{gap:40px}
.card.showcase{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:40px;align-items:center;padding:0;overflow:hidden;border-color:var(--line)}
.card.showcase:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.card.showcase:nth-child(even) .shot{order:2}
@media (max-width:820px){
  .card.showcase,.card.showcase:nth-child(even){grid-template-columns:1fr;gap:0}
  .card.showcase:nth-child(even) .shot{order:0}
}
.card.showcase .text{padding:32px 34px 34px}
@media (max-width:600px){.card.showcase .text{padding:24px 22px 26px}}

/* Das Browserfenster: Titelleiste mit drei Punkten, darunter das Bild. */
.shot{margin:0;background:var(--soft);border-right:1px solid var(--line);
  padding:28px 0 28px 28px;min-width:0}
.card.showcase:nth-child(even) .shot{border-right:0;border-left:1px solid var(--line);
  padding:28px 28px 28px 0}
@media (max-width:820px){
  .shot,.card.showcase:nth-child(even) .shot{border:0;border-bottom:1px solid var(--line);
    padding:24px 0 0 24px}
}
.shot .fenster{position:relative;border-radius:8px 0 0 0;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);border-right:0;border-bottom:0;
  box-shadow:0 24px 48px -28px rgba(16,16,22,.35),0 2px 6px rgba(16,16,22,.06);
  transform:translateY(0);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.card.showcase:nth-child(even) .shot .fenster{border-radius:0 8px 0 0;border-left:0;border-right:1px solid var(--line)}
@media (max-width:820px){
  .shot .fenster,.card.showcase:nth-child(even) .shot .fenster{border-radius:8px 0 0 0;
    border-left:1px solid var(--line);border-right:0}
}
.card.showcase:hover .shot .fenster{transform:translateY(-4px)}
.shot .leiste{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);
  background:var(--soft)}
.shot .leiste i{display:block;width:9px;height:9px;border-radius:50%;background:var(--line)}
.shot .leiste i:first-child{background:color-mix(in srgb,var(--acc) 55%,var(--line))}
.shot img{display:block;width:100%;height:auto;aspect-ratio:1440/540;object-fit:cover;
  object-position:top left;filter:saturate(.96)}
@media (prefers-color-scheme:dark){
  .shot .fenster{box-shadow:0 24px 48px -28px #000,0 0 0 1px rgba(255,255,255,.04)}
  .shot img{filter:saturate(.92) brightness(.94)}
}

/* Der Text neben dem Bild: die Rolle rückt über den Titel, wie eine
   Beschriftung, der Verweis auf die Seite steht als Zeile darunter. */
.card.showcase .kicker{margin-bottom:14px}
.card.showcase h3{font-size:clamp(1.35rem,2.4vw,1.7rem);letter-spacing:-.025em;margin:0 0 6px}
.card.showcase h3 a{text-decoration:none;color:var(--ink)}
.card.showcase h3 a:hover{text-decoration:underline;text-decoration-color:var(--acc);text-underline-offset:.2em}
.card.showcase .role{margin-bottom:18px}
.card.showcase .besuch{display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-family:var(--mono);font-size:var(--t-tag);color:var(--acc);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .15s ease}
.card.showcase .besuch:hover{border-bottom-color:var(--acc)}
.card.showcase .besuch+.besuch{margin-left:22px}
.card.showcase .besuch span{transition:transform .2s ease}
.card.showcase .besuch:hover span{transform:translateX(3px)}

@media (prefers-reduced-motion:reduce){
  .card.showcase:hover .shot .fenster,.card.showcase .besuch:hover span{transform:none}
}

/* ================================================================ 3.4 Arbeitsplatz
   Startseite „Eigene Arbeit im Film“ (vom Inhaber gewählt am 13.09.2026).
   Gilt nur mit .home, außer Aufklappmenü und Kopfabständen. Film selbst
   gerendert (design/kino/d-arbeitsplatz/quelle/), liegt als assets/arbeitsplatz-*.
   ============================================================ */

/* kino.css – Variante „Arbeitsplatz bei Tageslicht“
   Ergänzt style.css, ändert sie nicht. Alles mit .home gilt nur für die
   Startseite. Ohne .home stehen nur die Regeln für das Aufklappmenü im Kopf
   (details/summary, gehört zu header.php und damit zu allen Seiten).
   Hell in beiden Farbschemata. Eine Akzentfarbe (Tiefgrün) nur für Handlungen,
   ein dunkles Band am Schluss (Anfrage und Fuß). */

/* ---------- Farben und Maße ---------- */
.home{--bg:#f7f7f4;--soft:#efeee9;--panel:#fff;--ink:#10191a;--ink2:#343d3e;--mut:#5b615e;
  --line:#e3e3de;--acc:#0e6b4f;--acc-fg:#fff;
  --band:#10191a;--band-ink:#f2f2ee;--band-ink2:#b7bdb9;--band-line:#2a3637;--band-acc:#7fd1b0;
  --buehne:#ebe5da;--breit:1240px;--rand:max(24px,calc(50vw - 596px));
  color-scheme:light;background:var(--bg);color:var(--ink)}
.home .wrap,.home .wrap.narrow{max-width:var(--breit)}
.home a:hover{text-decoration-color:var(--acc)}
.home a:focus-visible,.home button:focus-visible,.home summary:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* Einblenden beim Scrollen aus style.css: auf der Startseite aus */
@supports (animation-timeline:view()){
  .home :is(section>.wrap>h2,section>.wrap>.sub,section>.wrap>p,.cell,.card,.two>*,.kontakt-neben){animation:none}
}

/* ---------- Kopf: hell ---------- */
.home .site-head{background:var(--bg);color:var(--ink);border-top:0;border-bottom:1px solid var(--line)}
@media (min-width:721px){
  .home .site-head{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  .home .bar{padding:15px 0}
}
.home .mark{color:var(--ink)}
.home .mark .lgA{stroke:currentColor}
.home .mark .mark-tld{color:var(--mut)}
.home .nav a{color:var(--ink2)}
.home .nav a:hover{color:var(--ink);text-decoration-color:var(--acc)}
.home .nav-menu{background:var(--panel);border-color:var(--line);box-shadow:0 18px 40px -18px rgba(16,25,26,.28)}
.home .nav-menu a{color:var(--ink2)}
.home .nav-menu a::before{color:var(--mut)}
.home .nav-menu a:hover,.home .nav-menu a:focus-visible{color:var(--ink);background:var(--soft)}
/* keine Zählnummern im Menü, keine Pfeile an Verweistexten (Markup bleibt) */
.home .nav-menu a::before{content:none}
.home :is(.cell-link,.besuch)>span[aria-hidden]{display:none}
.home .cell-link{font-family:var(--sans);font-size:var(--t-side);font-weight:600;color:var(--acc);
  text-decoration:underline;text-underline-offset:.25em;text-decoration-color:color-mix(in srgb,var(--acc) 35%,transparent)}

/* ---------- Aufklappmenü (alle Seiten) ----------
   Die Unterliste steckt in <details>. Breit: öffnet wie bisher beim
   Überfahren und bei Tastaturfokus, der Pfeil ersetzt den bisherigen.
   Schmal: eingeklappt, der Pfeil öffnet eine Tafel unter dem Kopf. */
.nav-klapp summary{list-style:none;cursor:pointer;display:inline-grid;place-items:center;
  width:18px;height:28px;margin:-4px 0;color:inherit;border-radius:2px}
.nav-klapp summary::-webkit-details-marker{display:none}
.nav-klapp summary::after{content:"";width:5px;height:5px;border:solid currentColor;
  border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.nav-klapp[open] summary::after{transform:translateY(1px) rotate(225deg)}
.nav-klapp-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.nav-gruppe>a::after{content:none}
@media (min-width:721px){
  .nav-gruppe{display:flex;align-items:center;gap:2px}
  .nav-gruppe:hover .nav-klapp::details-content,
  .nav-gruppe:focus-within .nav-klapp::details-content{content-visibility:visible}
  .nav-gruppe:hover .nav-klapp summary::after,
  .nav-gruppe:focus-within .nav-klapp summary::after{transform:translateY(1px) rotate(225deg)}
  .nav-klapp[open] .nav-menu{opacity:1;visibility:visible;translate:0 0}
}
@media (max-width:720px){
  .site-head{position:relative}
  .bar{row-gap:10px;padding:14px 20px}
  .nav{flex-wrap:nowrap;gap:13px;font-size:var(--t-tag);white-space:nowrap}
  .nav-gruppe{display:flex;align-items:center;gap:0}
  .nav-klapp .nav-menu{position:absolute;left:0;right:0;top:100%;z-index:60;display:grid;gap:0;
    padding:6px 20px 14px;border-top:1px solid var(--stage-line);background:var(--stage);
    font-size:var(--t-side);box-shadow:0 20px 30px -20px rgba(0,0,0,.4)}
  .nav-klapp .nav-menu a{padding:10px 0;border-bottom:1px solid var(--stage-line)}
  .nav-klapp .nav-menu a:last-child{border-bottom:0}
  .home .nav-klapp .nav-menu{background:var(--panel);border-top-color:var(--line)}
  .home .nav-klapp .nav-menu a{border-bottom-color:var(--line)}
}

/* ---------- Bühne: Text auf hellem Grund, Film groß daneben ---------- */
.home .buehne{background:var(--bg);color:var(--ink);padding:0;border-bottom:0;overflow:clip}
.home .buehne::before,.home .buehne::after,.home .buehne+section::after{content:none}
/* Textspalte = Seitenrand + feste Satzbreite; so bricht die Überschrift auf
   jeder Breite gleich in drei Zeilen (max-width 5.8em), der Film nimmt den Rest. */
.home .hero-raster{--tcol:clamp(380px,34vw,540px);max-width:none;padding:0;display:grid;gap:0;align-items:stretch;
  grid-template-columns:minmax(0,calc(var(--rand) + var(--tcol))) minmax(0,1fr)}
.home .hero-text{align-self:center;padding:56px 40px 64px var(--rand)}
.home .hero-kicker{color:var(--ink2);font-family:var(--sans);font-size:var(--t-0);font-weight:500;
  letter-spacing:-.005em;text-transform:none;margin:0 0 24px}
.home .buehne h1{color:var(--ink);font-size:clamp(2.6rem,5.6vw,5.6rem);line-height:.95;
  letter-spacing:-.05em;font-weight:650;max-width:5.8em;margin:0 0 30px}
.home .buehne h1 em{font-style:normal;color:inherit}
.home .buehne .lead{color:var(--ink2);font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.55;
  max-width:36ch;margin:0 0 36px}
.home .cta{background:var(--acc);color:var(--acc-fg);border-radius:4px;padding:15px 26px;box-shadow:none}
.home .cta:hover{background:var(--ink);color:#fff;transform:none;box-shadow:none}
.home .buehne .cta-2{color:var(--ink);text-decoration:underline;text-underline-offset:.3em;
  text-decoration-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.home .buehne .cta-2:hover{color:var(--ink);text-decoration-color:var(--acc)}

/* Filmhöhe: füllt den ersten Bildschirm bis auf die Bildunterschrift, höchstens so
   hoch, dass Bildschirmkante und Telefon (Quelle x 140–1258 von 1320) in die
   Spaltenbreite passen (1100/1198 der Filmspalte). */
.home .hero-film{--film-h:max(500px,min(calc(100svh - 66px - 42px),818px,calc((100vw - var(--rand) - var(--tcol)) * .918)));
  position:relative;margin:0;background:var(--bg)}
.home .hero-film picture{display:block;height:var(--film-h);background:var(--buehne)}
.home .hero-film img,.home .film-lauf{display:block;width:100%;height:100%;
  object-fit:cover;object-position:78% 50%}
.home .film-lauf{position:absolute;z-index:1;left:0;top:0;height:var(--film-h)}
.home .hero-film figcaption{padding:12px 24px 0 0;min-height:42px;
  font-size:.875rem;line-height:1.45;color:var(--mut)}
@media (prefers-reduced-motion:reduce){.home .film-lauf{display:none}}

@media (max-width:900px){
  .home .hero-raster{grid-template-columns:1fr}
  .home .hero-text{padding:48px 24px 40px}
  .home .hero-film{--film-h:calc(100vw / 1.2)}
  .home .hero-film img,.home .film-lauf{object-position:50% 50%}
  .home .hero-film figcaption{padding:12px 24px 0}
}
@media (max-width:720px){
  .home .hero-film{--film-h:100vw}
}
@media (max-width:600px){
  .home .hero-text{padding:30px 20px 32px}
  .home .hero-kicker{margin-bottom:14px;font-size:.9375rem}
  .home .buehne h1{font-size:2.6rem;line-height:.97;max-width:none;margin-bottom:18px}
  .home .buehne .lead{font-size:1rem;line-height:1.5;margin-bottom:24px}
  .home .cta-line{gap:4px 20px}
  .home .hero-film figcaption{padding:10px 20px 0;min-height:0;font-size:.8125rem}
}

/* ---------- Abschnitte ---------- */
.home section{padding:96px 0;border-bottom:0}
.home h2{font-size:clamp(2rem,3.6vw,3.4rem);line-height:1.02;letter-spacing:-.04em;font-weight:650;margin:0 0 20px}
.home .sub{color:var(--mut);font-size:var(--t-0)}
@media (max-width:600px){.home section{padding:64px 0}}

/* ---------- Unsere Arbeit: groß und früh ---------- */
.home #arbeit{padding-top:88px}
.home #arbeit .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:64px}
.home #arbeit h2{font-size:clamp(2.4rem,5vw,4.6rem);margin:0}
.home #arbeit .sub{align-self:end;margin:0 0 6px;max-width:48ch}
.home .work{grid-column:1/-1;margin-top:56px;gap:96px}
.home .card.showcase{display:grid;grid-template-columns:minmax(0,2.35fr) minmax(0,1fr);gap:52px;align-items:center;
  padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.home .card.showcase:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,2.35fr)}
.home .card.showcase:hover{transform:none;box-shadow:none}
.home .card.showcase .text{padding:0}
.home .shot,.home .card.showcase:nth-child(even) .shot{position:relative;margin:0;border:0;
  padding:40px 64px 48px 40px;background:#e6e2da;border-radius:6px}
.home .card.showcase:nth-child(even) .shot{padding:40px 40px 48px 64px;background:#dfe2dd}
/* breit: die Tafel läuft bis an den Bildrand, das Bild wächst in den Rand hinein */
@media (min-width:901px){
  .home .card.showcase .shot{margin-left:calc(-1 * var(--rand));padding:44px 72px 52px 40px;border-radius:0 6px 6px 0}
  .home .card.showcase:nth-child(even) .shot{margin:0 calc(-1 * var(--rand)) 0 0;padding:44px 40px 52px 72px;border-radius:6px 0 0 6px}
}
.home .shot .fenster,.home .card.showcase:nth-child(even) .shot .fenster{border:1px solid rgba(16,25,26,.14);
  border-radius:8px;overflow:clip;background:#fff;
  box-shadow:0 34px 60px -34px rgba(16,25,26,.55),0 2px 5px rgba(16,25,26,.08)}
.home .card.showcase:hover .shot .fenster{transform:none}
.home .shot .fenster img{aspect-ratio:1440/900;object-position:top center;filter:none}
.home .shot .shot-mobil{position:absolute;right:22px;bottom:-34px;width:23%;height:auto;
  aspect-ratio:540/1168;object-fit:cover;border-radius:16px;border:1px solid rgba(16,25,26,.2);
  background:#fff;filter:none;box-shadow:0 26px 44px -22px rgba(16,25,26,.6)}
.home .card.showcase:nth-child(even) .shot-mobil{right:auto;left:22px}
.home .card .kicker{font-family:var(--sans);font-size:var(--t-side);letter-spacing:0;color:var(--mut)}
.home .card .kicker::before{content:none}
.home .card.showcase h3{font-size:clamp(1.9rem,3vw,2.75rem);font-weight:650;letter-spacing:-.04em;line-height:1;margin:0 0 10px}
.home .card .role{font-size:var(--t-0);color:var(--ink);margin:0 0 20px}
.home .card p{color:var(--ink2)}
.home .tags li{font-family:var(--sans);font-size:.8125rem;background:var(--panel);border-color:var(--line);color:var(--ink2)}
.home .card.showcase .besuch{font-family:var(--sans);font-size:var(--t-0);font-weight:600;color:var(--acc);
  margin-top:24px;border-bottom:1px solid color-mix(in srgb,var(--acc) 40%,transparent)}
.home .card.showcase .besuch:hover{border-bottom-color:var(--acc)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .home .shot .shot-mobil{animation:hebt linear both;animation-timeline:view();animation-range:entry 20% exit 20%}
  }
}
@keyframes hebt{from{translate:0 44px}to{translate:0 -24px}}
@media (max-width:900px){
  .home #arbeit .wrap{grid-template-columns:1fr}
  .home #arbeit .sub{margin-top:16px}
  .home .work{margin-top:40px;gap:80px}
  .home .card.showcase,.home .card.showcase:nth-child(even){grid-template-columns:1fr;gap:56px}
  .home .card.showcase:nth-child(even) .shot{order:0}
}
@media (max-width:600px){
  .home .shot,.home .card.showcase:nth-child(even) .shot{padding:22px 40px 30px 16px;margin:0 -8px}
  .home .card.showcase:nth-child(even) .shot{padding:22px 16px 30px 40px}
  .home .shot .shot-mobil{width:30%;right:10px;bottom:-30px;border-radius:12px}
  .home .card.showcase:nth-child(even) .shot-mobil{left:10px}
}

/* ---------- Leistungen: Verzeichnis statt Kachelraster ---------- */
/* Kopfzeile (Titel links, Vorspann rechts), darunter drei Spalten mit Linien –
   ohne Karten, ohne Symbole, ohne Schatten. */
.home #leistungen{background:var(--panel);border-block:1px solid var(--line)}
.home #sichtbarkeit .wrap{grid-template-rows:auto auto 1fr}
.home #leistungen .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);column-gap:72px;align-items:end}
.home #leistungen h2{grid-column:1;margin:0}
.home #leistungen>.wrap>.sub{grid-column:2;margin:0 0 6px;max-width:54ch}
.home #leistungen .grid{grid-column:1/-1;margin-top:52px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:40px;row-gap:0;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.home #leistungen>.wrap>.after-grid{grid-column:1/-1;color:var(--ink2);margin:8px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.home .cell{display:flex;flex-direction:column;align-items:flex-start;padding:20px 0 36px;background:none;
  border:0;border-top:1px solid var(--ink);border-radius:0;overflow:visible}
.home .cell:hover,.home .cell:has(.cell-link:focus-visible){background:none}
.home .cell::before,.home .cell::after{content:none}
/* Die sechs Leistungen sind keine Abfolge: keine Nummern, keine Symbole. */
.home .cell .num,.home .zeichen{display:none}
.home .cell h3{font-size:clamp(1.35rem,1.95vw,1.8rem);overflow-wrap:break-word;font-weight:620;
  letter-spacing:-.035em;line-height:1.08;margin:0 0 14px;transition:color .15s ease}
.home .cell p{color:var(--ink2);font-size:var(--t-side);margin:0}
.home .cell-link{margin-top:auto;padding-top:20px}
.home .cell:hover h3,.home .cell:has(.cell-link:focus-visible) h3{color:var(--acc)}
@media (max-width:900px){
  .home #leistungen .wrap{grid-template-columns:1fr}
  .home #leistungen>.wrap>.sub{grid-column:1;margin-top:16px}
  .home #leistungen .grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;margin-top:36px}
}
@media (max-width:600px){
  .home #leistungen .grid{grid-template-columns:1fr}
  .home .cell{padding:18px 0 28px}
}

/* ---------- Wie wir arbeiten: ein großer Satz, zwei Spalten ---------- */
.home .soft{background:var(--soft);padding:88px 0}
.home .soft .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.07fr) minmax(0,1.07fr);column-gap:48px;row-gap:32px}
.home .soft h2{grid-column:1;grid-row:1/span 2}
.home .soft .wrap>p{margin:0;color:var(--ink2)}
.home .soft .wrap>p:nth-of-type(1){grid-column:2/4;font-size:clamp(1.3rem,2.1vw,1.85rem);line-height:1.3;
  letter-spacing:-.02em;color:var(--ink);text-wrap:pretty}
.home .soft .wrap>p:nth-of-type(2),.home .soft .wrap>p:nth-of-type(3){padding-top:18px;border-top:1px solid var(--ink)}
@media (max-width:900px){
  .home .soft .wrap{grid-template-columns:1fr 1fr;row-gap:24px}
  .home .soft h2,.home .soft .wrap>p:nth-of-type(1){grid-column:1/-1;grid-row:auto}
}
@media (max-width:600px){
  .home .soft .wrap{grid-template-columns:1fr}
  .home .soft .wrap>p{grid-column:1!important}
}

/* ---------- Sichtbarkeit ---------- */
.home #sichtbarkeit{border-top:0}
.home #sichtbarkeit .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.15fr);column-gap:72px;align-items:start}
.home #sichtbarkeit h2,.home #sichtbarkeit>.wrap>.sub{grid-column:1}
.home #sichtbarkeit>.wrap>.sub{margin:0}
.home #sichtbarkeit .two{grid-column:2;grid-row:1/span 3;gap:48px;padding-top:22px;border-top:1px solid var(--ink)}
.home .two h3{font-size:var(--t-1);letter-spacing:-.02em;font-weight:600}
.home .checks li{color:var(--ink2)}
.home .checks li::before{background:var(--ink)}
@media (max-width:900px){
  .home #sichtbarkeit .wrap{grid-template-columns:1fr}
  .home #sichtbarkeit .two{grid-column:1;grid-row:auto;margin-top:36px}
}

/* ---------- Anfrage und Fuß: das eine dunkle Band ---------- */
.home #kontakt{background:var(--band);color:var(--band-ink);padding:112px 0 104px}
@media (min-width:801px){.home #kontakt .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:88px}}
.home #kontakt h2{color:#fff;font-size:clamp(2.4rem,5vw,4.6rem)}
.home #kontakt .sub{color:var(--band-ink2);max-width:54ch}
.home #kontakt a{color:var(--band-ink);text-decoration-color:color-mix(in srgb,var(--band-ink) 45%,transparent)}
.home #kontakt a:hover{text-decoration-color:var(--band-acc)}
.home #kontakt :focus-visible{outline-color:var(--band-acc)}
.home #kontakt ::selection{background:var(--band-acc);color:var(--band)}
.home .formular{max-width:none}
.home .feld label{font-family:var(--sans);font-size:var(--t-side);letter-spacing:0;color:var(--band-ink2)}
.home .feld input,.home .feld textarea{background:#172224;border-color:#3a4849;color:var(--band-ink);color-scheme:dark}
.home .feld input:hover,.home .feld textarea:hover{border-color:#6b7a7a}
.home .feld input:focus,.home .feld textarea:focus{border-color:var(--band-acc);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--band-acc) 22%,transparent)}
.home .formular button.cta{background:var(--band-acc);color:var(--band)}
.home .formular button.cta:hover{background:#fff;color:var(--band)}
.home .formular-fuss{color:var(--band-ink2)}
.home .kontakt-neben{background:none;border-color:var(--band-line);box-shadow:none;padding:30px 28px}
.home .kontakt-neben h3{color:#fff}
.home .kontakt-neben li{color:var(--band-ink2)}
.home .kontakt-neben li::before{background:var(--band-ink2)}
.home .kontakt-neben .direkt{font-family:var(--sans);font-size:var(--t-side);color:var(--band-ink2);border-top-color:var(--band-line)}
.home .kontakt-neben .direkt a{color:#fff;text-decoration-color:var(--band-acc)}
@media (max-width:600px){.home #kontakt{padding:64px 0}}

.home .site-foot{background:var(--band);color:var(--band-ink2);border-top:1px solid var(--band-line)}
.home .site-foot .wrap{max-width:var(--breit)}
.home .fl a,.home .owner,.home .nachweis{color:var(--band-ink2)}
.home .fl a:hover{color:#fff;border-bottom-color:var(--band-acc)}
.home .fl-leistungen,.home .nachweis{border-color:var(--band-line)}
.home .fl>span{font-family:var(--sans);font-size:var(--t-side);font-weight:600;letter-spacing:0;text-transform:none;color:var(--band-ink)}
.home .owner,.home .nachweis{font-family:var(--sans);letter-spacing:0}
.home .nachweis span+span::before{color:var(--band-ink2)}
.home .site-foot a:focus-visible{outline-color:var(--band-acc)}

@media print{
  .home .film-lauf,.home .hero-film figcaption{display:none}
  .home #kontakt,.home .site-foot{background:#fff;color:#000}
}