/* anfragenhersteller.de · Das Lot · Designsystem v0.2 (19.10.2026) · Bühne Salbei mit Körnung
   Eine Datei, keine Abhängigkeiten. Schriften selbst gehostet (../fonts). */

/* ---------- Schriften ---------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-variable.woff2") format("woff2-variations"), url("../fonts/archivo-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  /* Flächen: Papier ist die Bühne, Nacht sind die Objekte */
  --buehne: #cdd7c8;
  --papier: #f3f6f0;
  --nacht: #0e1716;
  --nacht-2: #182320;
  /* Text */
  --tinte: #141a18;
  --tinte-2: #4b5651;
  --kreide: #edf1e8;
  --kreide-2: #aab6ae;
  /* Akzent: Lotrot – nur auf dem Anfrageweg */
  --lot: #d6391c;
  --lot-dunkel: #b52e14;
  /* Bedeutungsfarben (Ohne/Mit, Grundbuch) – nie Akzent */
  --gruen: #1f5a3a;
  --gruen-hell: #dbe8d4;
  --grau: #b5ada2;
  --grau-hell: #e7e3da;
  /* Linien */
  --linie: rgba(20, 26, 24, 0.14);
  --linie-dunkel: rgba(237, 241, 232, 0.16);
  /* Form */
  --radius: 20px;
  --radius-s: 10px;
  --pill: 999px;
  --ecke: 28px; /* Flurstück-Ecke: oben rechts abgeschnitten */
  --rand: 16px;
  --wrap: 1180px;
  /* Schrift */
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --f-h1: clamp(2.5rem, 1.1rem + 6.2vw, 5.6rem);
  --f-h2: clamp(1.9rem, 1rem + 3.4vw, 3.4rem);
  --f-h3: clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
  --f-zahl: clamp(2.6rem, 1.4rem + 4vw, 4.6rem);
  --f-lead: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --f-text: 1.0625rem;
  --f-klein: 0.9rem;
  --f-eyebrow: 0.78rem;
}
@media (min-width: 900px) { :root { --rand: 24px; } }

/* ---------- Grund ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  position: relative;
  isolation: isolate;
  background: var(--buehne);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: var(--f-text);
  line-height: 1.6;
  font-feature-settings: "kern", "liga", "tnum";
  -webkit-font-smoothing: antialiased;
}
/* Haptik: Körnung und zwei langsam wandernde Farbwolken, nur auf der Bühne. Reines CSS, kein Bild, kein JS. */
body::before {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 300px 300px; opacity: 0.28; mix-blend-mode: multiply;
  animation: korn 1.2s steps(6) infinite;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(120% 90% at 20% 10%, rgba(201, 214, 170, 0.9), transparent 60%), radial-gradient(90% 80% at 85% 90%, rgba(166, 190, 178, 0.9), transparent 60%);
  animation: drift 14s ease-in-out infinite alternate;
}
@keyframes korn { 0% { transform: translate(0, 0); } 100% { transform: translate(-60px, 40px); } }
@keyframes drift { 0% { filter: hue-rotate(0deg); transform: translate(0, 0); } 100% { filter: hue-rotate(-14deg); transform: translate(-4%, 3%); } }
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
/* Umbruch: keine Silbentrennung, Zeilenfall über text-wrap: pretty/balance und Satzbreiten (ch) */
p, li, address, dd { overflow-wrap: break-word; text-wrap: pretty; }
* { -webkit-hyphens: manual; hyphens: manual; }
a[href^="mailto:"], a[href^="tel:"] { hyphens: none; white-space: nowrap; }
@media (max-width: 480px) { h1, h2 { overflow-wrap: anywhere; } }
.seite-recht h1 { font-size: var(--f-h2); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; border-radius: 4px; }
.dunkel :focus-visible, .kopf :focus-visible { outline-color: var(--kreide); }
.nw { white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--nacht); color: var(--kreide); padding: 8px 14px; border-radius: var(--pill); z-index: 100; }
.skip:focus { left: 12px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--rand); }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 300; letter-spacing: -0.03em; text-wrap: balance; }
h1 { font-size: var(--f-h1); line-height: 1.02; font-stretch: 118%; letter-spacing: -0.035em; }
h2 { font-size: var(--f-h2); line-height: 1.08; font-stretch: 118%; }
h3 { font-size: var(--f-h3); line-height: 1.25; font-weight: 400; font-stretch: 108%; letter-spacing: -0.015em; }
h1 em, h2 em, .akzent { font-family: var(--serif); font-style: italic; font-weight: 400; font-stretch: 100%; letter-spacing: 0; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
.lead { font-size: var(--f-lead); line-height: 1.45; font-weight: 300; }
.eyebrow { font-size: var(--f-eyebrow); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; font-stretch: 105%; color: var(--tinte-2); margin: 0 0 1rem; }
.dunkel .eyebrow { color: var(--kreide-2); }
.klein { font-size: var(--f-klein); color: var(--tinte-2); }
.dunkel .klein { color: var(--kreide-2); }
.zahl { font-size: var(--f-zahl); line-height: 1; font-weight: 300; font-stretch: 118%; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

/* ---------- Flächen ---------- */
.karte { background: var(--papier); border-radius: var(--radius); padding: clamp(20px, 2vw + 12px, 36px); }
.dunkel { background: var(--nacht); color: var(--kreide); }
.dunkel.karte { padding: clamp(24px, 3vw + 12px, 56px); }
/* Flurstück: eine Ecke abgeschnitten – das Signaturdetail */
.flur, .karte, .kachel, .schritt, .spalte, .beweis > div, .nein li, .spalte li, .zusage, .err, .bild { clip-path: polygon(0 0, calc(100% - var(--ecke)) 0, 100% var(--ecke), 100% 100%, 0 100%); }
.kachel, .schritt, .spalte, .beweis > div { --ecke: 20px; }
.nein li, .spalte li, .zusage, .err { --ecke: 12px; }
.kontrast { color: var(--kreide-2); }
.dunkel a { color: var(--kreide); }

/* ---------- Lotlinie (Dekor, erzählt den Namen) ---------- */
.lotlinie { position: relative; display: inline-block; width: 1px; height: 64px; background: currentColor; opacity: 0.55; vertical-align: top; }
.lotlinie::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 9px; height: 9px; transform: translateX(-50%) rotate(45deg); background: currentColor; }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 12px; z-index: 50; margin: 12px var(--rand) 0; }
.kopf .innen { max-width: var(--wrap); margin: 0 auto; background: var(--nacht); color: var(--kreide); border-radius: var(--radius); padding: 12px 16px 12px 22px; display: flex; align-items: center; gap: 20px; }
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; font-stretch: 112%; letter-spacing: -0.02em; font-size: 1.15rem; }
.marke .lotlinie { height: 22px; opacity: 1; color: var(--kreide); }
.marke small { font-weight: 300; font-stretch: 100%; color: var(--kreide-2); letter-spacing: 0; }
.kopf nav { margin-left: auto; display: flex; gap: 22px; }
.kopf nav a { text-decoration: none; font-size: 0.95rem; color: var(--kreide-2); }
.kopf nav a:hover, .kopf nav a[aria-current] { color: var(--kreide); }
.kopf .btn { margin-left: 4px; }
.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid var(--linie-dunkel); color: var(--kreide); border-radius: var(--pill); padding: 8px 14px; font: inherit; font-size: 0.9rem; }
@media (max-width: 860px) {
  .marke small { display: none; }
  .kopf nav { display: none; }
  .menu-btn { display: inline-block; }
  .kopf .btn { display: none; }
  .kopf.offen nav { display: flex; flex-direction: column; gap: 8px; position: absolute; left: 0; right: 0; top: calc(100% + 8px); background: var(--nacht); border-radius: var(--radius); padding: 18px 22px; }
  .kopf.offen .btn { display: inline-flex; }
}

/* ---------- Buttons: Pill = Handlung ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--pill); padding: 14px 26px; font: inherit; font-weight: 500; font-size: 1rem; line-height: 1.2; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.btn.lot { background: var(--lot); color: #fff; border-color: var(--lot); }
.btn.lot:hover { background: var(--lot-dunkel); border-color: var(--lot-dunkel); }
.btn.rand { background: transparent; color: var(--tinte); border-color: var(--tinte); }
.btn.rand:hover { background: var(--tinte); color: var(--buehne); }
.dunkel .btn.rand, .kopf .btn.rand { color: var(--kreide); border-color: var(--kreide); }
.dunkel .btn.rand:hover, .kopf .btn.rand:hover { background: var(--kreide); color: var(--nacht); }
.btn:disabled { opacity: 0.55; cursor: wait; }
.tel { text-decoration: none; font-weight: 500; }

/* ---------- Abschnitte ---------- */
.sec { padding: clamp(40px, 6vw, 88px) 0; }
.sec-kopf { max-width: 760px; margin-bottom: clamp(24px, 3vw, 44px); }
.sec-kopf p { margin-top: 1rem; }
.sek { margin: 0 var(--rand); }
.raster { display: grid; gap: 14px; }
.raster.zwei { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.raster.drei { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (min-width: 900px) { .raster.drei { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Hero ---------- */
.hero { margin: 14px var(--rand) 0; }
.hero .innen { max-width: var(--wrap); margin: 0 auto; }
.hero .lotlinie { height: 96px; margin-bottom: 20px; }
.hero h1 { max-width: 14ch; }
.hero .lead { max-width: 52ch; margin: 1.3rem 0 2rem; color: var(--kreide-2); }
.hero .neben { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: baseline; margin-top: 1.5rem; color: var(--kreide-2); font-size: var(--f-klein); }
.hero .neben span { max-width: 58ch; }

/* Befund-Feld: ein Angebot, eine Handlung */
.befund { display: grid; gap: 10px; max-width: 720px; padding: 10px; background: var(--nacht-2); border-radius: 16px; }
.befund label { position: absolute; left: -999px; }
.befund input { width: 100%; font: inherit; font-size: 1.05rem; padding: 14px 16px; border-radius: var(--radius-s); border: 1px solid var(--linie-dunkel); background: var(--nacht); color: var(--kreide); }
.befund input::placeholder { color: var(--kreide-2); }
.befund .btn { width: 100%; padding: 15px 22px; }
@media (min-width: 720px) {
  .befund { grid-template-columns: 1.1fr 1fr auto; }
  .befund .btn { width: auto; }
}

/* ---------- Beweis-Leiste ---------- */
.beweis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.beweis > div { padding: 24px 26px 22px; background: var(--nacht-2); border-radius: 16px; border: 1px solid var(--linie-dunkel); }
.beweis .zahl { margin-bottom: 8px; }
.beweis .was { font-size: 1rem; color: var(--kreide); }
.beweis .quelle { font-size: var(--f-klein); color: var(--kreide-2); margin-top: 6px; }
.beweis-text { margin-top: 18px; font-size: var(--f-klein); color: var(--kreide-2); max-width: 80ch; }

/* ---------- Kacheln (Pain-Points) ---------- */
.kachel { background: var(--papier); border-radius: var(--radius); padding: 26px 26px 24px; display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: start; }
.kachel .punkt { width: 36px; height: 36px; border-radius: 50%; background: var(--nacht); color: var(--kreide); display: grid; place-items: center; font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1; padding-bottom: 2px; }
.kachel p { margin-top: 0.4rem; color: var(--tinte-2); }

/* ---------- Drei Schritte ---------- */
.schritte { counter-reset: s; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.schritt { background: var(--papier); border-radius: var(--radius); padding: 28px 26px; position: relative; }
.schritt::before { counter-increment: s; content: counter(s, decimal-leading-zero); display: block; font-family: var(--serif); font-style: italic; font-size: 2.8rem; line-height: 1; margin-bottom: 18px; color: var(--tinte-2); }
.schritt h3 { margin-bottom: 0.5rem; }

/* ---------- Grundbuch (echte Tabelle, eckig = Information) ---------- */
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.tabelle th, .tabelle td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { font-size: var(--f-eyebrow); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; color: var(--tinte-2); border-bottom-color: var(--tinte); }
.tabelle td:first-child { font-weight: 500; }
.tabelle caption { text-align: left; caption-side: bottom; font-size: var(--f-klein); color: var(--tinte-2); padding-top: 12px; }
.dunkel .tabelle th, .dunkel .tabelle td { border-bottom-color: var(--linie-dunkel); }
.dunkel .tabelle th { color: var(--kreide-2); border-bottom-color: var(--kreide); }
.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 720px) { .tabelle { min-width: 640px; } }

/* Stempel: das zweite Signaturdetail */
.stempel { display: inline-block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; padding: 4px 9px 3px; border: 1.5px solid currentColor; border-radius: 3px; transform: rotate(-4deg); line-height: 1.2; }
.stempel.vergeben { color: var(--tinte); }
.dunkel .stempel.vergeben { color: var(--kreide); }
.stempel.frei { color: var(--gruen); border-style: dashed; }
.dunkel .stempel.frei { color: #8fc9a6; }
.frist { font-size: var(--f-klein); color: var(--tinte-2); }
.dunkel .frist { color: var(--kreide-2); }

/* ---------- Preis ---------- */
.preis { display: grid; gap: 24px; align-items: end; }
@media (min-width: 820px) { .preis { grid-template-columns: 1.2fr 1fr; } }
.preis .zahl { font-size: clamp(3rem, 2rem + 5vw, 6rem); }
.preis .zahl small { display: block; font-size: 0.28em; font-stretch: 100%; letter-spacing: 0; color: var(--kreide-2); margin-top: 0.5em; }
.preis ul { list-style: none; margin: 0; padding: 0; }
.preis li { padding: 10px 0; border-top: 1px solid var(--linie-dunkel); }
.preis li:last-child { border-bottom: 1px solid var(--linie-dunkel); }

/* ---------- Ohne / Mit ---------- */
.ohnemit { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.spalte { border-radius: var(--radius); padding: 24px; }
.spalte.ohne { background: var(--grau-hell); }
.spalte.mit { background: var(--gruen-hell); }
.spalte h3 { margin-bottom: 14px; }
.spalte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.spalte li { background: var(--papier); border-radius: 12px; padding: 12px 14px 12px 44px; position: relative; }
.spalte li::before { position: absolute; left: 13px; top: 11px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; font-weight: 500; }
.spalte.ohne li::before { content: "×"; background: var(--grau); color: var(--tinte); }
.spalte.mit li::before { content: "✓"; background: var(--gruen); color: #fff; }

/* ---------- Ausschluss ---------- */
.nein { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nein li { padding: 14px 16px 14px 46px; position: relative; background: var(--papier); border-radius: 12px; }
.nein li::before { content: "×"; position: absolute; left: 14px; top: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--nacht); color: var(--kreide); display: grid; place-items: center; font-size: 0.8rem; }
.satz { font-size: var(--f-lead); font-weight: 300; margin-top: 1.5rem; }

/* ---------- FAQ: eckig, offen, kein Akkordeon ---------- */
.faq { display: grid; gap: 0; border-top: 1px solid var(--tinte); }
.faq > div { padding: 22px 0; border-bottom: 1px solid var(--linie); display: grid; gap: 8px; }
@media (min-width: 820px) { .faq > div { grid-template-columns: 1fr 1.3fr; gap: 32px; } }
.faq h3 { font-size: 1.15rem; }
.faq p { color: var(--tinte-2); }
.dunkel .faq { border-top-color: var(--kreide); }
.dunkel .faq > div { border-bottom-color: var(--linie-dunkel); }
.dunkel .faq p { color: var(--kreide-2); }

/* ---------- Formular ---------- */
.form { display: grid; gap: 16px; }
.form .felder { display: grid; gap: 14px; }
@media (min-width: 720px) { .form .felder { grid-template-columns: 1fr 1fr; } .form .voll { grid-column: 1 / -1; } }
.feld { display: grid; gap: 6px; }
.feld label { font-size: var(--f-klein); font-weight: 500; }
.feld label em { font-style: normal; font-weight: 400; color: var(--tinte-2); }
.feld input, .feld select, .feld textarea { width: 100%; font: inherit; font-size: 1rem; padding: 12px 14px; border-radius: var(--radius-s); border: 1px solid var(--linie); background: #fff; color: var(--tinte); }
.feld textarea { min-height: 140px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--tinte); outline-offset: 0; border-color: var(--tinte); }
.feld [aria-invalid="true"] { border-color: var(--lot); outline-color: var(--lot); }
.hp { position: absolute; left: -9999px; }
.zustimmung { display: flex; gap: 10px; align-items: flex-start; font-size: var(--f-klein); }
.zustimmung input { margin-top: 4px; width: 18px; height: 18px; }
.err { padding: 12px 14px; border-radius: var(--radius-s); background: #fbe9e4; color: #7a1f0d; font-size: var(--f-klein); }
.form-fuss { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.zusage { padding: 16px 18px; border-radius: var(--radius-s); background: var(--grau-hell); font-size: var(--f-klein); }

/* ---------- Brotkrumen ---------- */
.krumen { font-size: var(--f-klein); color: var(--tinte-2); margin-bottom: 1rem; }
.krumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.krumen li + li::before { content: "›"; margin-right: 6px; }
.krumen a { text-decoration: none; }
.krumen a:hover { text-decoration: underline; }

/* ---------- Fuß ---------- */
.fuss { margin: 40px var(--rand) 16px; }
.fuss .innen { max-width: var(--wrap); margin: 0 auto; background: var(--nacht); color: var(--kreide); border-radius: var(--radius); padding: clamp(28px, 4vw, 48px); }
.fuss .spalten { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.fuss address { font-style: normal; color: var(--kreide-2); font-size: var(--f-klein); line-height: 1.7; }
.fuss .label { font-size: var(--f-eyebrow); text-transform: uppercase; letter-spacing: 0.12em; color: var(--kreide-2); margin-bottom: 10px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fuss a { color: var(--kreide); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss .legal { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--linie-dunkel); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; font-size: var(--f-klein); color: var(--kreide-2); }
.fuss .legal a { color: var(--kreide-2); }

/* ---------- Seitenanfang, Textabschnitte, Band ---------- */
.anfang { padding-bottom: 0; }
.anfang h1 { max-width: 18ch; }
.anfang .lead { max-width: 62ch; margin-top: 1.2rem; }
.sec-text { max-width: 68ch; }
.sec-text.breit { max-width: 80ch; }
.sec-text ul { padding-left: 1.2em; }
.sec-text li { margin-bottom: 0.4em; }
@media (min-width: 900px) { .sec .wrap:has(> .sec-kopf + .sec-text) { display: grid; grid-template-columns: 4fr 7fr; gap: 40px; align-items: start; } .sec .wrap:has(> .sec-kopf + .sec-text) .sec-kopf { margin-bottom: 0; } }
.versteckt { position: absolute; left: -999px; width: 1px; height: 1px; overflow: hidden; }
.band { display: grid; gap: 24px; align-items: center; }
@media (min-width: 820px) { .band { grid-template-columns: 1.4fr 1fr; } }
.band h2 { max-width: 16ch; }
.band-cta { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
@media (min-width: 820px) { .band-cta { justify-content: flex-end; } }
.recht .sec-text { max-width: 72ch; }
.recht address { font-style: normal; }
mark.ph { background: #fde68a; color: #4a3a00; padding: 0 4px; border-radius: 3px; }
.seite-recht .anfang h1, .seite-danke .anfang h1 { max-width: none; }
.befund .ts { grid-column: 1 / -1; }
.befund .err { grid-column: 1 / -1; }
.seite-start .hero .befund { max-width: 760px; }

/* ---------- Störer (sticky, unten rechts) und Aktionskarte ---------- */
.sticker { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 128px; height: 128px; border-radius: 50%; background: var(--lot); color: #fff; display: grid; place-items: center; text-decoration: none; transform: rotate(-10deg); box-shadow: 0 10px 30px rgba(14, 23, 22, 0.28); transition: transform 0.2s; }
.sticker:hover { transform: rotate(-4deg) scale(1.04); }
.sticker svg { position: absolute; inset: 0; animation: sticker-dreh 28s linear infinite; }
.sticker svg text { font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; fill: #fff; }
.sticker b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 2.2rem; line-height: 1; }
@keyframes sticker-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sticker svg { animation: none; } }
@media (max-width: 720px) { .sticker { width: 92px; height: 92px; right: 12px; bottom: 12px; } .sticker b { font-size: 1.6rem; } .sticker svg text { font-size: 12.5px; } }
.aktion { background: var(--lot); color: #fff; }
.aktion .eyebrow, .aktion .klein { color: rgba(255, 255, 255, 0.78); }
.aktion h2 { font-family: var(--serif); font-style: italic; font-stretch: 100%; letter-spacing: 0; font-size: clamp(2.4rem, 1.4rem + 4vw, 4.2rem); }
.aktion p { max-width: 58ch; }
.aktion .btn.nacht { background: var(--nacht); color: var(--kreide); border-color: var(--nacht); }
.aktion .btn.nacht:hover { background: var(--nacht-2); }
.aktion a { color: #fff; }
.aktion-hinweis { display: inline-block; margin-top: 14px; font-size: var(--f-klein); color: var(--kreide-2); }
.aktion-hinweis b { color: var(--kreide); font-weight: 500; }

/* ---------- Musterbogen-Hilfen (nicht auf der Live-Seite) ---------- */
.mb-nummer { font-size: var(--f-eyebrow); text-transform: uppercase; letter-spacing: 0.12em; color: var(--tinte-2); border-top: 1px dashed var(--tinte-2); padding-top: 10px; margin: 56px var(--rand) 14px; }
.mb-nummer .wrap { padding: 0; }
.mb-farben { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.mb-farbe { border-radius: 12px; padding: 14px; min-height: 110px; display: flex; flex-direction: column; justify-content: flex-end; font-size: var(--f-klein); border: 1px solid var(--linie); }
.mb-farbe b { display: block; font-weight: 500; }
.mb-skala > div { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.mb-skala .k { font-size: var(--f-klein); color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.mb-reihe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (min-width: 720px) { .mb-skala > div { grid-template-columns: 120px 1fr; gap: 20px; } }