/* ki-innendienst.de · Fassung 2, 21.09.2026
   Nacht, Beton, Warngelb. Barlow Condensed als Katalog-Schrift, Barlow fuer den Text.
   Bildwelt aus der eigenen Werkstatt-Strecke, Handy-Mockup, Preisschilder wie im Baumarkt. */

@font-face { font-family: "BarlowC"; font-weight: 600; font-display: swap; src: url("/assets/fonts/BarlowCondensed-600.woff2") format("woff2"); }
@font-face { font-family: "BarlowC"; font-weight: 700; font-display: swap; src: url("/assets/fonts/BarlowCondensed-700.woff2") format("woff2"); }
@font-face { font-family: "BarlowC"; font-weight: 800; font-display: swap; src: url("/assets/fonts/BarlowCondensed-800.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("/assets/fonts/Barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("/assets/fonts/Barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("/assets/fonts/Barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url("/assets/fonts/Barlow-700.woff2") format("woff2"); }

:root {
  --nacht: #0e1116;
  --nacht-2: #171c24;
  --nacht-3: #222a35;
  --beton: #eceef0;
  --beton-2: #dfe3e7;
  --weiss: #ffffff;
  --tinte: #141920;
  --tinte-leise: #4c5661;
  --linie: #cfd5db;
  --gelb: #f5b400;
  --gelb-dunkel: #d99c00;
  --rot: #d64545;
  --gruen: #2f9e6b;
  --display: "BarlowC", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --grund: "Barlow", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --breite: 1180px;
  --rand: clamp(18px, 4vw, 48px);
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--beton); color: var(--tinte); font-family: var(--grund); font-size: 17.5px; line-height: 1.6; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--gelb-dunkel); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--tinte); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: .98; letter-spacing: -.005em; margin: 0 0 .45em; text-wrap: balance; }
h1 { font-size: clamp(46px, 7.2vw, 96px); }
h2 { font-size: clamp(34px, 4.6vw, 60px); }
h3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; }
p, ul, ol { margin: 0 0 1.1em; }
li { margin-bottom: .35em; }
strong { font-weight: 600; }
.sprung { position: absolute; left: -999px; top: 0; background: var(--nacht); color: #fff; padding: .5rem 1rem; }
.sprung:focus { left: 8px; top: 8px; z-index: 60; }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 40; background: rgba(14,17,22,.92); color: #fff; backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.08); }
.kopf__innen { max-width: var(--breite); margin: 0 auto; padding: .55rem var(--rand); display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.marke { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 1.55rem; line-height: 1; letter-spacing: .01em; }
.marke__zeichen { width: 26px; height: 26px; background: var(--gelb); clip-path: polygon(0 0, 100% 0, 100% 62%, 62% 100%, 0 100%); flex: none; }
.marke__wort small { display: block; font-family: var(--grund); font-weight: 400; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: #b8c0c9; margin-top: .3rem; }
@media (max-width: 560px) { .marke__wort small { display: none; } .marke { font-size: 1.4rem; } }
.menue-knopf { margin-left: auto; background: none; color: #fff; border: 1px solid rgba(255,255,255,.35); padding: .45rem .9rem; font: inherit; font-size: .95rem; cursor: pointer; }
.menue { flex-basis: 100%; display: none; }
.menue--offen { display: block; }
.menue ul { list-style: none; margin: 0; padding: .6rem 0 .4rem; display: flex; flex-direction: column; gap: .1rem; }
.menue a { text-decoration: none; padding: .6rem 0; display: block; font-weight: 500; color: #e6eaee; border-bottom: 2px solid transparent; }
.menue a:hover, .menue a[aria-current="page"] { color: #fff; border-bottom-color: var(--gelb); }
.menue__cta { margin-top: .5rem; }
@media (min-width: 960px) {
  .menue-knopf { display: none; }
  .menue { display: block; flex-basis: auto; margin-left: auto; }
  .menue ul { flex-direction: row; align-items: center; gap: 1.5rem; padding: 0; }
  .menue a { padding: .35rem 0; font-size: 1.02rem; }
  .menue__cta { margin: 0 0 0 .8rem; }
}
.knopf { display: inline-flex; align-items: center; gap: .5rem; background: var(--gelb); color: var(--nacht) !important; text-decoration: none; padding: .95rem 1.5rem; font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: .01em; line-height: 1; border: 2px solid var(--gelb); cursor: pointer; border-radius: var(--radius); transition: transform .15s ease, background .15s ease; }
.knopf:hover { background: #ffc61a; border-color: #ffc61a; transform: translateY(-1px); }
.knopf--leise { background: transparent; color: inherit !important; border-color: currentColor; }
.knopf--leise:hover { background: rgba(0,0,0,.06); transform: none; border-color: currentColor; }
.knopf--dunkel { background: var(--nacht); border-color: var(--nacht); color: #fff !important; }
.knopf--dunkel:hover { background: var(--nacht-3); border-color: var(--nacht-3); }
.menue .knopf { padding: .65rem 1.1rem; font-size: 1.05rem; }

/* ---------- Raster ---------- */
main { display: block; }
.abschnitt { padding: clamp(3rem, 7vw, 6.5rem) var(--rand); position: relative; }
.abschnitt--eng { padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.abschnitt--dunkel { background: var(--nacht); color: #e9edf1; }
.abschnitt--dunkel a { text-decoration-color: var(--gelb); }
.abschnitt--dunkel .knopf--leise { color: #fff !important; border-color: rgba(255,255,255,.5); }
.abschnitt--dunkel .knopf--leise:hover { background: rgba(255,255,255,.08); }
.abschnitt--karton { background: var(--weiss); }
.innen { max-width: var(--breite); margin: 0 auto; }
.innen--schmal { max-width: 800px; }
.innen--lesen { max-width: 740px; }
.pfad { max-width: var(--breite); margin: 0 auto; padding: 1rem var(--rand) 0; font-size: .92rem; color: var(--tinte-leise); }
.pfad a { text-decoration: none; }
.pfad a:hover { text-decoration: underline; }
.vorzeile { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gelb-dunkel); margin-bottom: .9rem; display: flex; align-items: center; gap: .7rem; }
.vorzeile::before { content: ""; width: 2.2rem; height: 3px; background: var(--gelb); flex: none; }
.abschnitt--dunkel .vorzeile, .held .vorzeile { color: var(--gelb); }
.lead { font-size: clamp(19px, 2.1vw, 23px); line-height: 1.5; color: var(--tinte-leise); max-width: 640px; }
.abschnitt--dunkel .lead { color: #c3cad2; }
.mark { background: linear-gradient(transparent 58%, var(--gelb) 58%); padding: 0 .06em; }
.held .mark, .abschnitt--dunkel .mark { color: var(--gelb); background: none; }

/* ---------- Hero mit Foto ---------- */
.held { position: relative; isolation: isolate; color: #fff; background: var(--nacht); overflow: hidden; }
.held__foto { position: absolute; inset: 0; z-index: -2; }
.held__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.held__schleier { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14,17,22,.93) 0%, rgba(14,17,22,.78) 45%, rgba(14,17,22,.4) 100%), linear-gradient(0deg, rgba(14,17,22,1) 0%, rgba(14,17,22,0) 40%); }
.held__innen { max-width: var(--breite); margin: 0 auto; padding: clamp(3.5rem, 9vw, 8rem) var(--rand) clamp(3rem, 6vw, 5rem); display: grid; gap: 3rem; align-items: end; }
@media (min-width: 960px) { .held__innen { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 4rem; min-height: min(88vh, 860px); } }
.held h1 { max-width: 760px; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.held .lead { color: #d5dbe2; max-width: 600px; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.held__aktionen { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 1.8rem; }
.held__hinweis { font-size: .95rem; color: #b8c0c9; margin-top: 1.2rem; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.held__hinweis span::before { content: "✓"; color: var(--gelb); margin-right: .4rem; font-weight: 700; }
.held--flach .held__innen { min-height: 0; padding-top: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.held--flach .held__schleier { background: linear-gradient(90deg, rgba(14,17,22,.95) 0%, rgba(14,17,22,.82) 50%, rgba(14,17,22,.5) 100%); }
.held .pfad { padding: 0; color: #b8c0c9; margin: 0 0 1.5rem; max-width: none; }
.held .preis-tafel { background: rgba(23,28,36,.85); backdrop-filter: blur(6px); }

/* ---------- Handy-Mockup mit tippendem Protokoll ---------- */
.handy { width: min(100%, 380px); margin: 0 auto; background: #0b0d11; border: 10px solid #1f242c; border-radius: 42px; box-shadow: 0 30px 60px rgba(0,0,0,.55), inset 0 0 0 2px #0b0d11; padding: 1.1rem .9rem 1.2rem; position: relative; color: #e9edf1; }
.handy::before { content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 34%; height: 22px; background: #1f242c; border-radius: 12px; }
.handy__kopf { display: flex; justify-content: space-between; align-items: baseline; font-size: .8rem; color: #8f99a4; padding: 1.6rem .3rem .6rem; border-bottom: 1px solid #222a35; }
.handy__kopf strong { color: #fff; font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; }
.handy__liste { list-style: none; margin: 0; padding: .4rem 0 0; min-height: 21rem; }
.handy__liste li { display: grid; grid-template-columns: 3rem minmax(0,1fr); gap: .5rem .6rem; padding: .55rem .3rem; border-bottom: 1px solid #1a2029; font-size: .88rem; line-height: 1.35; margin: 0; }
.js .handy__liste li { opacity: 0; transform: translateY(6px); animation: tippen .4s ease forwards; }
.handy__liste li:nth-child(1) { animation-delay: .3s } .handy__liste li:nth-child(2) { animation-delay: 1.1s } .handy__liste li:nth-child(3) { animation-delay: 1.9s } .handy__liste li:nth-child(4) { animation-delay: 2.7s } .handy__liste li:nth-child(5) { animation-delay: 3.5s } .handy__liste li:nth-child(6) { animation-delay: 4.3s } .handy__liste li:nth-child(7) { animation-delay: 5.1s }
@keyframes tippen { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .handy__liste li { animation: none; opacity: 1; transform: none; } }
.handy time { color: #8f99a4; font-variant-numeric: tabular-nums; font-size: .8rem; padding-top: .1rem; }
.handy .status { display: inline-block; margin-top: .25rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gruen); }
.handy .status--chef { color: #ff7a7a; }
.handy__fuss { margin-top: .8rem; padding: .7rem .3rem 0; border-top: 1px solid #222a35; color: #8f99a4; font-size: .78rem; }
.handy__leiste { display: flex; justify-content: center; margin-top: .9rem; }
.handy__leiste span { width: 38%; height: 5px; border-radius: 5px; background: #2a323d; }

/* ---------- Preisschild ---------- */
.schild { display: inline-block; background: var(--gelb); color: var(--nacht); font-family: var(--display); font-weight: 800; line-height: 1; padding: .6rem .95rem .55rem; border-radius: 3px; transform: rotate(-2deg); box-shadow: 0 6px 14px rgba(0,0,0,.25); position: relative; }
.schild::before { content: ""; position: absolute; left: .55rem; top: -.3rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--nacht); opacity: .35; }
.schild .zahl { font-size: 2.6rem; display: block; }
.schild small { font-family: var(--grund); font-weight: 600; font-size: .78rem; letter-spacing: .02em; display: block; margin-top: .2rem; }

/* ---------- Leistungen als Foto-Bloecke ---------- */
.foto-block { display: grid; gap: 1.6rem; align-items: center; margin-top: 3.5rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 900px) { .foto-block { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 3.5rem; } .foto-block--rechts .foto-block__bild { order: 2; } }
.foto-block__bild { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--nacht-2); box-shadow: 0 20px 50px rgba(0,0,0,.18); }
.foto-block__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.foto-block:hover .foto-block__bild img { transform: scale(1.03); }
.foto-block__bild .schild { position: absolute; left: 1.2rem; bottom: 1.2rem; }
.foto-block h3 { font-size: clamp(32px, 3.6vw, 48px); font-weight: 800; }
.foto-block ul { padding-left: 0; list-style: none; margin: 1.2rem 0 1.5rem; }
.foto-block li { padding: .5rem 0 .5rem 1.7rem; position: relative; border-bottom: 1px solid var(--linie); }
.foto-block li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: .75rem; height: .4rem; border-left: 3px solid var(--gelb-dunkel); border-bottom: 3px solid var(--gelb-dunkel); transform: rotate(-45deg); }
.foto-block .aktionen { display: flex; gap: .8rem; flex-wrap: wrap; }

/* ---------- Zahlenband ---------- */
.band { display: grid; gap: 2rem; margin-top: 2.5rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 720px) { .band { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2.5rem; } }
.band__zahl { border-top: 3px solid var(--gelb); padding-top: .9rem; }
.band__zahl strong { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(44px, 5vw, 64px); line-height: 1; color: #fff; margin-bottom: .4rem; }
.band__zahl p { margin: 0; font-size: 1rem; color: #d5dbe2; }
.band__zahl small { display: block; color: #8f99a4; font-size: .82rem; margin-top: .3rem; }
.quellen { font-size: .88rem; color: var(--tinte-leise); margin-top: 1.6rem; }
.abschnitt--dunkel .quellen { color: #8f99a4; }
.quellen ol { padding-left: 1.2rem; }

/* ---------- Schritte ---------- */
.schritte { counter-reset: schritt; list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1.5rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 820px) { .schritte { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.schritte li { counter-increment: schritt; background: var(--weiss); padding: 1.4rem 1.4rem 1.3rem; border-radius: var(--radius); border-top: 4px solid var(--nacht); }
.abschnitt--dunkel .schritte li { background: var(--nacht-2); border-top-color: var(--gelb); }
.schritte li::before { content: counter(schritt, decimal-leading-zero); font-family: var(--display); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--gelb-dunkel); display: block; margin-bottom: .4rem; }
.abschnitt--dunkel .schritte li::before { color: var(--gelb); }
.schritte h3 { font-size: 1.5rem; }
.schritte p { font-size: 1rem; margin: 0; }

/* ---------- Zweispaltig, Kasten, Merksatz ---------- */
.zwei { display: grid; gap: 2rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 900px) { .zwei { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 4rem; } }
@media (min-width: 900px) { .zwei--gleich { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.kasten { background: var(--weiss); border-radius: var(--radius); padding: 1.6rem 1.7rem; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.kasten--dunkel { background: var(--nacht-2); color: #e9edf1; box-shadow: none; }
.kasten h3 { font-size: 1.5rem; }
.kasten ul { padding-left: 1.1rem; }
.abschnitt--dunkel .kasten { background: var(--nacht-2); color: #e9edf1; box-shadow: none; }
.merk { border-left: 5px solid var(--gelb); padding: .9rem 1.3rem; background: var(--weiss); margin: 1.8rem 0; font-family: var(--display); font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; line-height: 1.15; }
.abschnitt--dunkel .merk { background: var(--nacht-2); }

/* ---------- Leistungsseiten ---------- */
.enthalten { list-style: none; padding: 0; margin: 1.5rem 0; }
.enthalten li { padding: .75rem 0 .75rem 1.9rem; border-bottom: 1px solid var(--linie); position: relative; }
.enthalten li::before { content: ""; position: absolute; left: .2rem; top: 1.2rem; width: .8rem; height: .45rem; border-left: 3px solid var(--gruen); border-bottom: 3px solid var(--gruen); transform: rotate(-45deg); }
.nicht { list-style: none; padding: 0; margin: 1.5rem 0; }
.nicht li { padding: .6rem 0 .6rem 1.9rem; position: relative; color: var(--tinte-leise); }
.nicht li::before { content: "×"; position: absolute; left: .3rem; top: .45rem; color: var(--rot); font-weight: 700; font-size: 1.2rem; }
.preis-tafel { background: var(--nacht-2); color: #e9edf1; padding: 1.8rem 1.9rem; border-radius: var(--radius); border-top: 5px solid var(--gelb); }
.preis-tafel .preis { font-family: var(--display); font-size: clamp(48px, 5vw, 68px); font-weight: 800; line-height: 1; }
.preis-tafel .preis small { display: block; font-family: var(--grund); font-size: 1rem; font-weight: 400; color: #b8c0c9; margin: .35rem 0 0; }
.preis-tafel p { margin: .8rem 0 0; color: #c3cad2; font-size: 1rem; }
.stufen { display: grid; gap: 1.2rem; margin: 1.8rem 0; grid-template-columns: minmax(0,1fr); }
@media (min-width: 760px) { .stufen { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.stufe { background: var(--weiss); border-radius: var(--radius); padding: 1.5rem 1.5rem 1.4rem; box-shadow: 0 10px 30px rgba(0,0,0,.06); display: flex; flex-direction: column; }
.stufe h3 { font-size: 1.6rem; margin-bottom: .2rem; }
.stufe .preis { font-family: var(--display); font-size: 2.4rem; font-weight: 800; margin: .2rem 0 .7rem; line-height: 1; }
.stufe .preis small { font-family: var(--grund); font-size: .85rem; font-weight: 500; color: var(--tinte-leise); margin-left: .3rem; }
.stufe p { flex: 1; }
.stufe .knopf { align-self: flex-start; }
.stufe--betont { outline: 3px solid var(--gelb); }
.vergleich { width: 100%; border-collapse: collapse; font-size: .98rem; margin: 1.5rem 0; background: var(--weiss); }
.vergleich th, .vergleich td { text-align: left; padding: .7rem .7rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.vergleich th { font-family: var(--display); font-size: 1.1rem; font-weight: 700; background: var(--nacht); color: #fff; }
.vergleich tr.eigen td { background: #fff7d6; font-weight: 600; }
.tabelle-scroll { overflow-x: auto; }

/* ---------- Audio ---------- */
.audio-raster { display: grid; gap: 1.2rem; margin-top: 2rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 760px) { .audio-raster { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.audio { background: var(--nacht-2); color: #e9edf1; border-radius: var(--radius); padding: 1.3rem 1.4rem 1.2rem; border-left: 5px solid var(--gelb); }
.audio h3 { font-size: 1.4rem; margin-bottom: .2rem; }
.audio .meta { color: #8f99a4; font-size: .85rem; margin-bottom: .8rem; }
.audio audio { width: 100%; margin: .4rem 0 .8rem; }
.audio p { margin: 0; font-size: .95rem; color: #c3cad2; }
.audio .urteil { margin-top: .6rem; font-size: .9rem; color: #fff; }
.audio .urteil b { color: var(--gelb); }
.abschnitt--dunkel .audio { background: var(--nacht-3); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--linie); }
.faq:last-of-type { border-bottom: 1px solid var(--linie); }
.abschnitt--dunkel .faq { border-color: #2a323d; }
.faq summary { cursor: pointer; padding: 1rem 2.4rem 1rem 0; font-family: var(--display); font-size: 1.45rem; font-weight: 700; list-style: none; position: relative; line-height: 1.15; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .2rem; top: .7rem; font-size: 1.8rem; color: var(--gelb-dunkel); font-weight: 400; }
.faq[open] summary::after { content: "–"; }
.faq > div { padding: 0 0 1.1rem; color: var(--tinte-leise); max-width: 70ch; }
.abschnitt--dunkel .faq > div { color: #c3cad2; }
.faq > div p:last-child { margin-bottom: 0; }

/* ---------- Formulare ---------- */
.formular { display: grid; gap: 1rem; }
.formular label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .3rem; }
.formular label small { font-weight: 400; color: var(--tinte-leise); }
.formular input, .formular select, .formular textarea { width: 100%; font: inherit; padding: .8rem .9rem; border: 2px solid var(--linie); background: #fff; color: var(--tinte); border-radius: var(--radius); }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: none; border-color: var(--gelb-dunkel); box-shadow: 0 0 0 3px rgba(245,180,0,.25); }
.formular textarea { min-height: 140px; resize: vertical; }
.formular .reihe { display: grid; gap: 1rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 640px) { .formular .reihe { grid-template-columns: 1fr 1fr; } }
.formular .honig { position: absolute; left: -9999px; }
.form-meldung { color: var(--rot); font-weight: 600; min-height: 1.2em; }
.form-danke { background: #fff; border-left: 5px solid var(--gruen); padding: 1rem 1.2rem; border-radius: var(--radius); }
.wahl { display: grid; gap: .6rem; }
.wahl label { display: flex; gap: .7rem; align-items: flex-start; font-weight: 500; padding: .8rem 1rem; border: 2px solid var(--linie); background: #fff; cursor: pointer; border-radius: var(--radius); }
.wahl label:has(input:checked) { border-color: var(--gelb-dunkel); background: #fff7d6; }
.wahl input { width: auto; margin-top: .3rem; }

/* ---------- Ratgeber ---------- */
.artikel-liste { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1.2rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 760px) { .artikel-liste { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1100px) { .artikel-liste { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.artikel-liste li { background: var(--weiss); border-radius: var(--radius); padding: 1.4rem 1.5rem 1.3rem; border-top: 4px solid var(--nacht); display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,.05); transition: transform .2s ease; margin: 0; }
.artikel-liste li:hover { transform: translateY(-3px); }
.artikel-liste h3 { font-size: 1.5rem; margin-bottom: .4rem; }
.artikel-liste h3 a { text-decoration: none; }
.artikel-liste h3 a:hover { text-decoration: underline; }
.artikel-liste p { margin: 0; font-size: .98rem; color: var(--tinte-leise); flex: 1; }
.artikel-liste small { display: block; margin-top: .8rem; color: var(--gelb-dunkel); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.seite--artikel .abschnitt h2 { margin-top: 2.4rem; font-size: clamp(30px, 3.4vw, 42px); }
.seite--artikel .abschnitt h3 { margin-top: 1.8rem; }
.seite--artikel .innen--lesen p, .seite--artikel .innen--lesen li { font-size: 18px; }
.artikel-kopf { margin-bottom: 1.5rem; }
.artikel-kopf .meta { color: var(--tinte-leise); font-size: .92rem; }
.kernaussage { background: var(--nacht); color: #fff; border-left: 6px solid var(--gelb); padding: 1.2rem 1.5rem; margin: 1.8rem 0; border-radius: var(--radius); font-size: 1.1rem; }
.kernaussage p:last-child { margin-bottom: 0; }
.quelle { font-size: .88rem; color: var(--tinte-leise); }
.weiter { border-top: 1px solid var(--linie); margin-top: 2rem; padding-top: 1.2rem; }
.weiter ul { padding-left: 1.1rem; }
.checkliste { counter-reset: punkt; list-style: none; padding: 0; margin: 1.5rem 0; }
.checkliste li { counter-increment: punkt; padding: .65rem 0 .65rem 2.6rem; border-bottom: 1px solid var(--linie); position: relative; }
.checkliste li::before { content: counter(punkt); position: absolute; left: 0; top: .55rem; width: 1.8rem; height: 1.8rem; background: var(--nacht); color: var(--gelb); font-family: var(--display); font-weight: 800; font-size: 1.05rem; display: grid; place-items: center; border-radius: 3px; }
.abc { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1.5rem 0 2.5rem; }
.abc a { display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; background: var(--nacht); color: #fff; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 1.1rem; border-radius: 3px; }
.abc a:hover { background: var(--gelb); color: var(--nacht); }
.seite--glossar h3 { margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--linie); }

/* ---------- Rechner ---------- */
.rechner { background: var(--nacht); color: #fff; border-radius: var(--radius); padding: 1.6rem 1.7rem; margin: 1.8rem 0; border-top: 5px solid var(--gelb); }
.rechner .reihe { display: grid; gap: 1rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 640px) { .rechner .reihe { grid-template-columns: 1fr 1fr; } }
.rechner label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; color: #d5dbe2; }
.rechner input { width: 100%; font: inherit; font-size: 1.2rem; font-family: var(--display); font-weight: 700; padding: .6rem .8rem; border: 2px solid #2a323d; background: var(--nacht-2); color: #fff; border-radius: var(--radius); }
.rechner input:focus { outline: none; border-color: var(--gelb); }
.rechner__ergebnis { margin-top: 1.3rem; border-top: 1px solid #2a323d; padding-top: 1rem; }
.rechner__ergebnis p { margin: .25rem 0; color: #c3cad2; }
.rechner__ergebnis strong { color: #fff; }
.rechner__summe { font-family: var(--display); font-size: 1.6rem; font-weight: 700; margin-top: .8rem !important; line-height: 1.2; }
.rechner__summe strong { color: var(--gelb); }
.rechner .quelle { color: #8f99a4; margin: .8rem 0 0; }

/* ---------- Sticky-Leiste mobil ---------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--nacht); padding: .6rem var(--rand) calc(.6rem + env(safe-area-inset-bottom, 0px)); display: flex; gap: .6rem; align-items: center; justify-content: space-between; box-shadow: 0 -8px 24px rgba(0,0,0,.3); transform: translateY(110%); transition: transform .25s ease; }
.sticky-cta--an { transform: none; }
.sticky-cta span { color: #d5dbe2; font-size: .9rem; }
.sticky-cta .knopf { padding: .7rem 1.1rem; font-size: 1.05rem; white-space: nowrap; }
@media (min-width: 960px) { .sticky-cta { display: none; } }

/* ---------- Reveal ---------- */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .rv--sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } }

/* ---------- Fuss ---------- */
.fuss { background: var(--nacht); color: #b8c0c9; padding: 3.5rem var(--rand) 2.5rem; font-size: .95rem; border-top: 5px solid var(--gelb); }
.fuss__innen { max-width: var(--breite); margin: 0 auto; }
.fuss__gruppen { display: grid; gap: 2rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 760px) { .fuss__gruppen { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.fuss h2 { font-family: var(--display); font-size: 1.15rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: .9rem; font-weight: 700; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss a { color: #e6eaee; text-decoration: none; }
.fuss a:hover { color: var(--gelb); }
.fuss__zeile { border-top: 1px solid #2a323d; margin-top: 2.5rem; padding-top: 1.2rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.fuss__zeile p { margin: 0; }

/* ---------- Sonstiges ---------- */
.seite--recht .abschnitt h2 { font-size: 1.7rem; margin-top: 2rem; }
.seite--recht address { font-style: normal; }
.seite--recht p, .seite--recht address { overflow-wrap: anywhere; }
.leise { color: var(--tinte-leise); }
.abschnitt--dunkel .leise { color: #8f99a4; }
.abstand { margin-top: 2rem; }
.zitat { font-family: var(--display); font-size: clamp(28px, 3.2vw, 42px); font-weight: 700; line-height: 1.1; margin: 2rem 0; padding-left: 1.4rem; border-left: 5px solid var(--gelb); }
.zitat footer { font-family: var(--grund); font-size: 1rem; font-weight: 400; color: var(--tinte-leise); margin-top: .8rem; }
.hinweis-ki { font-size: .88rem; color: var(--tinte-leise); border: 1px dashed var(--linie); padding: .8rem 1rem; margin: 1.5rem 0; border-radius: var(--radius); }
.bild-rand { border-radius: var(--radius); overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.18); aspect-ratio: 4 / 3; }
.bild-rand img { width: 100%; height: 100%; object-fit: cover; }
.zettel { background: var(--weiss); border-radius: var(--radius); box-shadow: 0 20px 50px rgba(0,0,0,.14); padding: 1.3rem 1.5rem 1.1rem; font-size: .95rem; min-width: 0; overflow-wrap: anywhere; color: var(--tinte); }
.zettel__kopf { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 2px solid var(--nacht); padding-bottom: .6rem; margin-bottom: .6rem; font-family: var(--display); font-weight: 700; font-size: 1.2rem; }
.zettel__kopf span:last-child { font-family: var(--grund); font-weight: 400; font-size: .9rem; color: var(--tinte-leise); }
.zettel ol { list-style: none; margin: 0; padding: 0; }
.zettel li { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--beton-2); align-items: baseline; }
.zettel li:last-child { border-bottom: 0; }
.zettel time { color: var(--tinte-leise); font-variant-numeric: tabular-nums; min-width: 3.4rem; }
.zettel .status { font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gruen); }
.zettel .status--chef { color: var(--rot); }
.zettel__fuss { margin-top: .8rem; padding-top: .6rem; border-top: 1px dashed var(--linie); color: var(--tinte-leise); font-size: .88rem; }
@media print { .kopf, .fuss, .menue-knopf, .sticky-cta { display: none; } body { background: #fff; } }