/* Wohlgang · Werkzeugwand
   Farben, Schriften und Abstände als Variablen. Werte zum späteren Verschieben stehen im Block „Regler“. */

@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Farbpalette 14.10.2026 (vorher Palette B2, siehe archiv/farben-b2_2026-10-14_1615) */
  --marine: #1E4D8B;          /* Überschriften, Navigation, Fuß, dunkle Flächen */
  --marine-tief: #173d70;
  --marine-dunkel: #11305a;
  --hellblau: #6BA7E8;        /* Freundliches Blau: Linien, Nebenelemente, Infoboxen */
  --hellblau-hell: #9cc5f0;   /* Hellblau auf dunklem Grund */
  --hellblau-text: #2a6cb8;   /* Hellblau als Schrift auf hellem Grund, AA */
  --hellblau-flaeche: #e1edfb;/* Infobox */
  --auf-marine-text: #d4e3f5;
  --lime: #2DEB27;            /* Electric Lime: Hauptknöpfe, Kennzahlen */
  --lime-tief: #22c41d;
  --gold: #E5A83B;            /* Signal-Gold: sparsame Akzente */
  --gold-text: #8f5f0f;       /* Gold als Schrift auf hellem Grund, AA */
  --gold-flaeche: #fbefd9;
  --anthrazit: #2D3748;       /* Fließtext, dunkle Holzfläche */
  --anthrazit-text: #f1f3f7;
  --anthrazit-leise: #cfd5df;
  --grund: #FAFAF8;           /* Off-White */
  --grund-2: #eceef3;         /* Greige, aufgehellt */
  --greige: #D6D9E2;          /* Karten, Trennlinien */
  --linie: #D6D9E2;
  --text: #2D3748;
  --text-leise: #5a6478;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Regler */
  --seite-max: 1200px;
  --rand: clamp(16px, 4vw, 40px);
  --abschnitt: clamp(64px, 9vw, 120px);
  --h1: clamp(2.5rem, 1.6rem + 3.6vw, 4.4rem);
  --h2: clamp(1.9rem, 1.4rem + 1.9vw, 2.9rem);
  --h3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --text-gross: clamp(1.08rem, 1rem + .3vw, 1.22rem);
  --hero-oben: clamp(32px, 6vw, 80px);
  --hero-brett: 46%;
  --loch: 18px;
  --ecke: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--hellblau) var(--grund-2); }
body { margin: 0; background: var(--grund); color: var(--text); font: 400 1.0625rem/1.6 var(--sans); text-rendering: optimizeLegibility; }
::selection { background: var(--lime); color: var(--text); }
img, svg { display: block; max-width: 100%; }
a { color: var(--marine); text-decoration-color: var(--hellblau); text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
a:hover { text-decoration-color: var(--marine); }
:focus-visible { outline: 3px solid var(--hellblau-text); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--marine); line-height: 1.08; letter-spacing: -.012em; text-wrap: balance; margin: 0; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); margin-bottom: .55em; }
h3 { font-size: var(--h3); line-height: 1.2; }
p { margin: 0 0 1em; text-wrap: pretty; }
.leise { color: var(--text-leise); }
.huelle { width: min(100% - 2 * var(--rand), var(--seite-max)); margin-inline: auto; }
.zum-inhalt { position: absolute; left: -9999px; }
.zum-inhalt:focus { left: var(--rand); top: 8px; z-index: 50; background: var(--grund); padding: 8px 12px; }

/* Knöpfe */
.knopf { white-space: nowrap; display: inline-flex; align-items: center; gap: .5em; background: var(--lime); color: var(--text); font: 600 1rem/1 var(--sans); padding: .95em 1.3em; border-radius: 7px; text-decoration: none; border: 0; cursor: pointer; box-shadow: 0 1px 0 #00000014, 0 6px 16px -8px #1E4D8B66; transition: background .2s, transform .2s cubic-bezier(.2,.8,.2,1); }
.knopf:hover { background: var(--lime-tief); transform: translateY(-1px); }
.knopf:active { transform: translateY(0); }
.knopf[disabled] { opacity: .6; cursor: progress; }
.knopf-klein { font-size: .92rem; padding: .7em 1em; }
.knopf-hinweis { display: block; font-size: .88rem; color: var(--text-leise); margin-top: .55em; }
.auf-dunkel .knopf-hinweis { color: var(--auf-marine-text); }
.pfeil-link { font-weight: 600; text-decoration: none; display: inline-flex; gap: .4em; align-items: center; border-bottom: 1.5px solid var(--hellblau); padding-bottom: 2px; }
.pfeil-link::after { content: ""; width: .9em; height: .9em; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform .2s; }
.pfeil-link:hover::after { transform: translateX(3px); }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--grund) 92%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.kopf.ist-gescrollt { border-bottom-color: var(--linie); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.marke img { height: 40px; width: auto; }
.nav ul { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); list-style: none; margin: 0; padding: 0; }
.nav a:not(.knopf) { color: var(--text); text-decoration: none; font-weight: 600; font-size: .97rem; padding: 6px 0; border-bottom: 1.5px solid transparent; }
.nav a:not(.knopf):hover, .nav a[aria-current="page"] { border-bottom-color: var(--hellblau); }
.nav-knopf { display: none; background: none; border: 1.5px solid var(--linie); border-radius: 7px; padding: 9px 12px; font: 600 .95rem var(--sans); color: var(--marine); cursor: pointer; }

/* Lochbrett: das Grundmaterial */
.brett { position: relative; background-color: var(--marine); background-image: radial-gradient(circle, var(--marine-tief) 2.3px, transparent 2.8px); background-size: var(--loch) var(--loch); background-position: calc(var(--loch) / 2) calc(var(--loch) / 2); color: #fff; }
.brett-kante { border-bottom: 10px solid var(--anthrazit); box-shadow: 0 1px 0 var(--gold) inset; }

/* Werkzeug an seinem Platz */
.platz { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 10px 18px; color: #fff; text-decoration: none; border-radius: var(--ecke); transition: background .25s; }
a.platz:hover { background: #ffffff0d; }
.platz .haken { position: absolute; top: 12px; left: 50%; width: 14px; height: 9px; margin-left: -7px; border: 2px solid var(--hellblau); border-bottom: 0; border-radius: 7px 7px 0 0; }
.werkzeug { width: 44px; height: 124px; fill: none; stroke: var(--hellblau-hell); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 0; }
.werkzeug .fein { stroke-width: 1.2; }
.platz-name { font-weight: 600; margin-top: 12px; font-size: 1rem; }
.platz-preis { color: var(--lime); font-size: .93rem; font-variant-numeric: tabular-nums; }
.platz-frei .werkzeug { stroke: var(--lime); stroke-dasharray: 5 5; stroke-width: 1.8; }
.platz-frei .platz-name { color: var(--lime); }
.platz-frei .haken { border-color: var(--lime); }

/* Einstieg */
.einstieg { padding: var(--hero-oben) 0 var(--abschnitt); }
.einstieg-raster { display: grid; grid-template-columns: 1fr var(--hero-brett); gap: clamp(28px, 5vw, 72px); align-items: center; }
.einstieg h1 { margin-bottom: .3em; }
.einstieg .zielgruppe { font-family: var(--serif); font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem); color: var(--gold-text); margin-bottom: 1.1em; }
.einstieg .einleitung { font-size: var(--text-gross); max-width: 34em; color: var(--text); }
.einstieg-aktion { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 32px; margin-top: 30px; }
.einstieg-aktion .pfeil-link { margin-top: .8em; }
.wand { border-radius: 10px; overflow: hidden; box-shadow: 0 30px 60px -36px #11305acc; }
.wand-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 14px; }
.wand-fuss { background: var(--anthrazit); color: var(--anthrazit-leise); font-size: .85rem; padding: 10px 18px; border-top: 2px solid var(--gold); }
.platz-frei .knopf { margin-top: 12px; }

/* Ladeanimation: Werkzeuge hängen sich nacheinander ein */
@media (prefers-reduced-motion: no-preference) {
  .js .wand .platz:not(.platz-frei) .werkzeug { animation: einhaengen 1s cubic-bezier(.16,1,.3,1) both; }
  .js .wand .platz:nth-child(2) .werkzeug { animation-delay: .15s; }
  .js .wand .platz:nth-child(3) .werkzeug { animation-delay: .3s; }
  .js .wand .platz-frei { animation: frei 1.4s .75s ease-out both; }
  @keyframes einhaengen { 0% { transform: translateY(-18px) rotate(-6deg); opacity: 0; } 45% { opacity: 1; } 70% { transform: translateY(0) rotate(2deg); } 100% { transform: none; } }
  @keyframes frei { 0%, 100% { box-shadow: 0 0 0 0 #2DEB2700; } 40% { box-shadow: 0 0 0 6px #2DEB2740; } }
}

/* Abschnitte */
.abschnitt { padding: var(--abschnitt) 0; }
.flaeche-2 { background: var(--grund-2); }
.flaeche-holz { background: var(--anthrazit); color: var(--anthrazit-text); }
.flaeche-holz h2, .flaeche-holz h3 { color: var(--anthrazit-text); }
.flaeche-holz a { color: var(--anthrazit-text); }
.auf-dunkel h2, .auf-dunkel h3 { color: #fff; }
.einleitung-2 { font-size: var(--text-gross); max-width: 38em; }

/* Zeitfresser: lose Anhänger, schief, unsortiert */
.zeitfresser { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.anhaenger { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.anhaenger li { position: relative; background: var(--grund); border: .75px solid color-mix(in srgb, var(--gold) 85%, transparent); border-radius: 6px 22px 22px 6px; padding: 14px 22px 14px 44px; box-shadow: 0 10px 20px -16px #1E4D8B80; transform: rotate(var(--schief, 0deg)); max-width: 30em; }
.anhaenger li::before { content: ""; position: absolute; left: 16px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; border: .75px solid color-mix(in srgb, var(--gold) 85%, transparent); background: var(--grund-2); }
.anhaenger li:nth-child(1) { --schief: -1.6deg; }
.anhaenger li:nth-child(2) { --schief: 1.2deg; margin-left: 28px; }
.anhaenger li:nth-child(3) { --schief: -.6deg; margin-left: 8px; }
.anhaenger li:nth-child(4) { --schief: 1.8deg; margin-left: 40px; }
.zeitfresser .frage { font-family: var(--serif); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); color: var(--marine); line-height: 1.25; margin-top: 1.2em; }

/* Leistungen als Werkzeugleiste */
.leiste { border-top: 1px solid #ffffff26; margin-top: 40px; }
.leiste-eintrag { display: grid; grid-template-columns: 90px 1fr minmax(150px, auto); gap: clamp(18px, 3vw, 44px); align-items: start; padding: 30px 0; border-bottom: 1px solid #ffffff26; }
.leiste-eintrag .werkzeug { width: 40px; height: 112px; margin: 0 auto; }
.leiste-eintrag h3 { color: #fff; margin-bottom: .35em; }
.leiste-eintrag p { color: var(--auf-marine-text); max-width: 40em; margin-bottom: .6em; }
.beispiele { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-top: 10px; font-size: .95rem; color: var(--auf-marine-text); max-width: 46em; }
.beispiele b { display: block; color: var(--hellblau-hell); font-weight: 600; font-size: .88rem; }
.preis-schild { text-align: right; }
.preis-schild .ab { display: block; color: var(--auf-marine-text); font-size: .9rem; }
.preis-schild .betrag { font-family: var(--serif); font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem); color: #fff; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.preis-schild .betrag::after { content: ""; display: block; height: 2px; background: var(--gold); margin-top: 4px; }
.leiste-fuss { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.auf-dunkel .pfeil-link { color: #fff; border-color: var(--hellblau-hell); }

/* Mit oder ohne KI */
.ki-frage { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.ki-frage .antwort { font-family: var(--serif); font-size: clamp(3rem, 2rem + 4.5vw, 6rem); line-height: .95; color: var(--marine); letter-spacing: -.02em; margin: .1em 0 0; }
.drei-wege { display: grid; gap: 0; margin: 26px 0 28px; border-top: 1px solid var(--linie); }
.drei-wege div { display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.drei-wege svg { width: 54px; height: 18px; }
.drei-wege span { font-weight: 600; }

/* Handwerk und Handel auf Holz */
.zwei-welten { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); margin-top: 34px; }
.zwei-welten article { border-top: 2px solid var(--hellblau-hell); padding-top: 22px; }
.zwei-welten h3 { margin-bottom: .5em; }
.zwei-welten p { color: var(--anthrazit-leise); }

/* Ablauf als Strecke */
.strecke { list-style: none; margin: 46px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 56px); position: relative; }
.strecke::before { content: ""; position: absolute; left: 28px; right: 28px; top: 27px; height: 2px; background: var(--linie); }
.strecke::after { content: ""; position: absolute; left: 28px; top: 27px; height: 2px; width: calc((100% - 56px) * var(--fortschritt, 1)); background: var(--hellblau); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.strecke li { position: relative; z-index: 1; }
.strecke .nr { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--grund); border: 2px solid var(--hellblau); font: 500 1.5rem var(--serif); color: var(--marine); margin-bottom: 18px; }
.strecke h3 { margin-bottom: .4em; }
.strecke p { color: var(--text-leise); }

/* Kurzporträt */
.portraet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.belege { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.belege li { display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.belege .jahr { font: 500 1.35rem var(--serif); color: #B07A15; font-variant-numeric: tabular-nums lining-nums; }
.belege b { display: block; }
.belege span { color: var(--text-leise); font-size: .95rem; }

/* Fragen */
.fragen { max-width: 52em; margin-top: 20px; border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 0; font: 500 var(--h3)/1.25 var(--serif); color: var(--marine); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--hellblau); background: linear-gradient(var(--hellblau), var(--hellblau)) center/10px 1.5px no-repeat, linear-gradient(var(--hellblau), var(--hellblau)) center/1.5px 10px no-repeat; transition: transform .25s; }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen details p { max-width: 44em; color: var(--text); padding-bottom: 14px; }

/* Schluss: der freie Platz */
.schluss { padding: var(--abschnitt) 0; }
.schluss-raster { display: grid; grid-template-columns: 1fr auto; gap: clamp(28px, 5vw, 72px); align-items: center; }
.schluss h2 { color: #fff; }
.schluss p { color: var(--auf-marine-text); font-size: var(--text-gross); max-width: 32em; }
.schluss .platz-frei { width: 300px; border: 1.5px dashed var(--lime); padding: 34px 20px 24px; }

/* Unterseiten */
.seitenkopf { padding: var(--hero-oben) 0 clamp(40px, 6vw, 72px); }
.seitenkopf .einleitung { font-size: var(--text-gross); max-width: 36em; color: var(--text); margin-top: 18px; }
.seitenkopf-raster { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.seitenkopf .mini-wand { display: flex; gap: 4px; padding: 10px 12px; border-radius: 10px; }
.mini-wand .platz { padding: 22px 8px 6px; }
.mini-wand .werkzeug { width: 30px; height: 84px; }
.staffel { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.staffel span { border: 1.5px solid var(--linie); border-radius: 999px; padding: 6px 14px; font-size: .93rem; background: var(--grund); }
.staffel b { color: var(--marine); }

/* Preistafel */
.gruppe { padding: clamp(44px, 6vw, 80px) 0; }
.gruppe + .gruppe { padding-top: 0; }
.angebot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 12px clamp(20px, 4vw, 56px); padding: 30px 0; border-top: 1px solid var(--linie); }
.angebot h3 { margin-bottom: .45em; }
.angebot p { color: var(--text); }
.preise { display: grid; grid-template-columns: repeat(3, 1fr); border: 1.5px solid var(--marine); border-radius: var(--ecke); overflow: hidden; align-self: start; background: var(--grund); }
.preise div { padding: 14px 14px 16px; border-left: 1px solid var(--linie); }
.preise div:first-child { border-left: 0; }
.preise dt { font-weight: 600; color: var(--marine); font-size: .9rem; }
.preise dt small { display: block; font-weight: 400; color: var(--text-leise); font-size: .8rem; }
.preise dd { margin: 8px 0 0; font: 500 clamp(1.15rem, 1rem + .5vw, 1.45rem)/1.15 var(--serif); color: var(--text); font-variant-numeric: tabular-nums lining-nums; }
.preise dd small { display: block; font: 400 .8rem/1.4 var(--sans); color: var(--text-leise); margin-top: 4px; }
.preis-notiz { grid-column: 2; font-size: .9rem; color: var(--text-leise); margin: -6px 0 0; }
.hinweise { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; max-width: 52em; }
.hinweise li { padding-left: 26px; position: relative; color: var(--anthrazit-leise); }
.hinweise li::before { content: ""; position: absolute; left: 0; top: .62em; width: 12px; height: 2px; background: var(--hellblau-hell); }

/* Entscheidungshilfe */
.entscheidung { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(24px, 4vw, 56px); counter-reset: e; }
.entscheidung li { counter-increment: e; display: grid; grid-template-columns: 46px 1fr; gap: 14px; padding: 20px 0; border-top: 1px solid #ffffff26; }
.entscheidung li::before { content: counter(e); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--hellblau-hell); color: var(--hellblau-hell); font: 500 1.05rem var(--serif); }
.entscheidung b { display: block; color: #fff; margin-bottom: 2px; }
.entscheidung span { color: var(--auf-marine-text); }
.entscheidung li.mit-ki b::after { content: " · mit KI"; color: var(--hellblau-hell); font-weight: 600; }

/* Textseiten */
.lesespalte { max-width: 44em; }
.lesespalte h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); margin: 1.8em 0 .5em; }
.lesespalte p, .lesespalte li { color: var(--text); }
.stand { color: var(--text-leise); font-size: .93rem; border-top: 1px solid var(--linie); padding-top: 14px; margin-top: 40px; }
.werkzeug-tafel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1.5px solid var(--marine); border-radius: var(--ecke); overflow: hidden; margin: 22px 0 8px; }
.werkzeug-tafel div { padding: 16px; border-left: 1px solid var(--linie); background: var(--grund); }
.werkzeug-tafel div:first-child { border-left: 0; }
.werkzeug-tafel b { display: block; color: var(--marine); }
.werkzeug-tafel span { display: block; font-size: .92rem; color: var(--text-leise); margin-top: 4px; }
.werkzeug-tafel .ort { display: inline-block; margin-top: 10px; font-size: .8rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--grund-2); color: var(--marine); }
.werkzeug-tafel .ort.lokal { background: var(--marine); color: #fff; }

/* Vorlagen */
.vorlagen { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); margin-top: 10px; }
.vorlage { position: relative; background: var(--grund); border: 1.5px solid var(--linie); border-radius: var(--ecke); padding: 30px 28px 28px; }
.vorlage .format { position: absolute; top: -13px; left: 24px; background: var(--anthrazit); color: var(--anthrazit-text); font-size: .8rem; font-weight: 600; padding: 4px 10px; border-radius: 4px; letter-spacing: .04em; }
.vorlage h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }
.vorlage p { color: var(--text); }

/* Kontakt */
.kontakt-raster { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.wege { list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid var(--linie); }
.wege li { padding: 16px 0; border-bottom: 1px solid var(--linie); }
.wege b { display: block; font-size: .88rem; color: var(--text-leise); font-weight: 600; }
.wege a { font: 500 1.25rem var(--serif); text-decoration: none; }
.formular { background: var(--grund); border: 1.5px solid var(--linie); border-radius: 10px; padding: clamp(22px, 3vw, 36px); }
.field { margin-bottom: 18px; }
.field label, .field legend { display: block; font-weight: 600; margin-bottom: 6px; font-size: .97rem; }
.field .opt { font-weight: 400; color: var(--text-leise); }
.field input, .field textarea, .field select { width: 100%; font: 400 1rem/1.4 var(--sans); color: var(--text); background: #fff; border: 1.5px solid #b8bdca; border-radius: 7px; padding: 12px 14px; transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--marine); box-shadow: 0 0 0 3px #1E4D8B26; }
.field ::placeholder { color: #6b7280; }
.field fieldset { border: 0; padding: 0; margin: 0; }
.wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl label { font-weight: 400; display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid #b8bdca; border-radius: 999px; padding: 8px 14px; cursor: pointer; margin: 0; background: #fff; }
.wahl input { width: auto; accent-color: var(--marine); margin: 0; }
.wahl label:has(input:checked) { border-color: var(--marine); background: var(--grund-2); }
.field .tipp { font-size: .9rem; color: var(--text-leise); margin: 6px 0 0; }
.field-error { display: none; color: #a3311b; font-size: .92rem; font-weight: 600; margin: 6px 0 0; }
.field.has-error .field-error { display: block; }
.field.has-error input, .field.has-error textarea, .field.has-error .wahl label { border-color: #a3311b; }
.zwei-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.datenschutz-hinweis { font-size: .92rem; color: var(--text-leise); }
.form-status.is-error { color: #a3311b; font-weight: 600; margin-top: 12px; }
.hp { position: absolute; left: -9999px; }
#form-wrap.is-sent form { display: none; }
#form-success h3 { margin-bottom: .4em; }

/* Platzhalterseiten */
.platzhalter { border: 1.5px dashed var(--hellblau); border-radius: var(--ecke); padding: 22px 24px; max-width: 40em; background: var(--grund); }

/* Fuß */
.fuss { background: var(--marine-dunkel); color: var(--auf-marine-text); padding: 64px 0 36px; border-top: 3px solid var(--gold); font-size: .97rem; }
.fuss a { color: #fff; }
.fuss-raster { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; }
.fuss img { height: 42px; width: auto; margin-bottom: 18px; }
.fuss h2 { font: 600 .95rem var(--sans); color: #fff; margin: 0 0 12px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fuss-unten { margin-top: 44px; padding-top: 20px; border-top: 1px solid #ffffff1f; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .9rem; }

/* Einblenden beim Scrollen: Inhalt bleibt ohne JS sichtbar */
@media (prefers-reduced-motion: no-preference) {
  .js .zeigen { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
  .js .zeigen.ist-da { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

/* Tablet und Handy */
@media (max-width: 980px) {
  .einstieg-raster, .zeitfresser, .ki-frage, .portraet, .kontakt-raster, .angebot { grid-template-columns: 1fr; }
  .preis-notiz { grid-column: 1; }
  .fuss-raster { grid-template-columns: 1fr 1fr; }
  .fuss-raster > :first-child { grid-column: 1 / -1; }
  .seitenkopf-raster { grid-template-columns: 1fr; }
  .seitenkopf .mini-wand { display: none; }
}
@media (max-width: 860px) {
  .nav-knopf { display: inline-flex; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--grund); border-bottom: 1px solid var(--linie); display: none; }
  .nav.ist-offen { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--rand) 20px; }
  .nav li a:not(.knopf) { display: block; padding: 14px 0; border-bottom: 1px solid var(--linie); }
  .nav li:last-child { margin-top: 16px; }
}
@media (max-width: 720px) {
  .leiste-eintrag { grid-template-columns: 56px 1fr; }
  .leiste-eintrag .werkzeug { width: 30px; height: 86px; }
  .preis-schild { grid-column: 2; text-align: left; }
  .beispiele, .zwei-welten, .entscheidung, .vorlagen, .zwei-felder, .werkzeug-tafel { grid-template-columns: 1fr; }
  .werkzeug-tafel div { border-left: 0; border-top: 1px solid var(--linie); }
  .werkzeug-tafel div:first-child { border-top: 0; }
  .strecke { grid-template-columns: 1fr; gap: 28px; }
  .strecke::before, .strecke::after { left: 27px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; }
  .strecke::after { height: calc((100% - 56px) * var(--fortschritt, 1)); }
  .strecke li { display: grid; grid-template-columns: 56px 1fr; gap: 0 18px; }
  .strecke .nr { grid-row: span 2; margin: 0; }
  .schluss-raster { grid-template-columns: 1fr; }
  .schluss .platz-frei { width: 100%; }
  .anhaenger li:nth-child(n) { margin-left: 0; }
  .fuss-raster { grid-template-columns: 1fr; }
  .marke img { height: 34px; }
  .preise dd { font-size: 1.1rem; }
}
@media (max-width: 420px) {
  .wand-raster { padding: 6px; gap: 0; }
  .platz { padding: 26px 4px 14px; }
  .werkzeug { width: 34px; height: 96px; }
  .platz-frei .knopf { font-size: .82rem; padding: .7em .8em; }
}

/* Werkzeuge in der großen Wand etwas größer */
.wand .werkzeug { width: 54px; height: 150px; }
@media (max-width: 420px) { .wand .werkzeug { width: 38px; height: 108px; } }
@media (max-width: 420px) { .preise div { padding: 12px 9px 14px; } .preise dd { font-size: 1rem; } }

/* Nach der Schlussprüfung */
.knopf-zweit { background: transparent; color: var(--marine); border: 1.5px solid var(--marine); box-shadow: none; }
.knopf-zweit:hover { background: var(--marine); color: #fff; }
.kopf .knopf { background: var(--marine); color: #fff; box-shadow: none; }
.kopf .knopf:hover { background: var(--marine-tief); }
h1 .satz { display: block; }
@media (min-width: 981px) { .einstieg-aktion > div { display: none; } }
.wand .knopf-hinweis { color: var(--auf-marine-text); margin-top: 8px; }
@media (max-width: 980px) { .wand .platz-frei .knopf-hinweis { display: none; } }
@media (max-width: 980px) { .wand #termin .knopf-hinweis, #termin.platz-frei .knopf-hinweis { display: block; font-size: .8rem; } }
.schluss .tafel { border-radius: 10px; background-color: var(--marine-tief); background-image: radial-gradient(circle, #11305a 2.3px, transparent 2.8px); background-size: var(--loch) var(--loch); border: 1px solid #ffffff1a; border-bottom: 10px solid var(--anthrazit); padding: 14px; box-shadow: 0 30px 60px -36px #000a; }
.schluss .tafel .platz-frei { border: 0; padding: 34px 20px 24px; }
.entscheidung li::before { content: none; }
.entscheidung .marke-e { width: 36px; height: 46px; display: grid; place-items: center; }
.entscheidung .marke-e svg { width: 20px; height: 46px; fill: none; stroke: var(--hellblau-hell); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.entscheidung .marke-e svg.welle { width: 36px; height: 14px; stroke: var(--hellblau); stroke-width: 2; }
.entscheidung li { grid-template-columns: 36px 1fr; }
.gruppe-kopf { display: flex; align-items: center; gap: 18px; }
.gruppe-kopf h2 { margin: 0; }
.gruppe-kopf .werkzeug { width: 22px; height: 62px; stroke: var(--hellblau); stroke-width: 2.4; flex: none; }
.gruppe-kopf + .angebot, .gruppe h2 + .angebot { margin-top: 22px; }
@media (max-width: 560px) {
  .wand-raster { grid-template-columns: repeat(3, 1fr); }
  .wand .platz-frei { grid-column: 1 / -1; }
  .wand .platz-frei .werkzeug { display: none; }
  .wand .platz-frei::before { content: ""; display: block; width: 72%; height: 30px; border: 1.8px dashed var(--lime); border-radius: 8px; margin: 4px auto 0; }
  .wand .platz-frei { padding-top: 22px; }
}

/* KI-Leitlinie: lokal und extern klar getrennt (12.10.2026) */
.ki-orte { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; margin: 22px 0 8px; }
.ki-ort { border-radius: var(--ecke); padding: 20px; }
.ki-ort-kopf { margin: 0 0 14px; }
.ki-ort-kopf b { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.25rem; line-height: 1.2; }
.ki-ort-kopf span { display: block; font-size: .9rem; margin-top: 4px; }
.ki-ort-werkzeuge { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ki-ort-werkzeuge div { background: none; border: 0; border-top: 1px solid var(--linie); border-radius: 0; padding: 12px 0 0; }
.ki-ort-werkzeuge b { display: block; }
.ki-ort-werkzeuge span { display: block; font-size: .92rem; margin-top: 4px; }
.ki-ort.extern { background: var(--hellblau-flaeche); border: 1.5px solid var(--marine); border-top: 6px solid var(--marine); color: var(--text); }
.ki-ort.extern .ki-ort-kopf b { color: var(--marine); }
.ki-ort.extern .ki-ort-kopf span { color: var(--text-leise); }
.ki-ort.extern .ki-ort-werkzeuge div { border-top-color: var(--hellblau); }
.ki-ort.extern .ki-ort-werkzeuge b { color: var(--marine); }
.ki-ort.extern .ki-ort-werkzeuge span { color: var(--text-leise); }
.ki-ort.lokal { background: var(--grund); border: 2px solid var(--gold); }
.ki-ort.lokal .ki-ort-kopf b { color: var(--gold-text); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ki-ort.lokal .ki-ort-kopf b::after { content: "Daten bleiben hier"; display: inline-block; vertical-align: middle; margin-left: 0; font-family: var(--sans); font-size: .75rem; font-weight: 600; line-height: 1; padding: 5px 10px; border-radius: 999px; background: var(--gold-text); color: #fff; }
.ki-ort.lokal .ki-ort-kopf span { color: var(--text-leise); }

.ki-ort.lokal .ki-ort-werkzeuge b { color: var(--marine); }
.ki-ort.lokal .ki-ort-werkzeuge span { color: var(--text-leise); }
@media (max-width: 760px) { .ki-orte { grid-template-columns: 1fr; } }

/* Offene Angaben in Rechtstexten, vor dem Livegang ersetzen */
mark.offen { background: var(--gold-flaeche); color: var(--gold-text); padding: 1px 4px; border-radius: 3px; font-weight: 600; }