/* Idealstelle | ideal-stelle.de | Fassung 3 vom 06.10.2026, hell
   Moritz: „mehr hell und grün als Akzent, das sieht immer einladender aus“. Grund ist Weiß und Nebel, Tannengrün trägt
   Schrift und Akzente, Koralle ist nur noch ein kleiner warmer Funke (Mitte im Zeichen, einzelne Punkte).
   Bewegung läuft nur über transform und opacity und schaltet sich bei prefers-reduced-motion ab.
   Ohne Skript ist alles sichtbar: Einblenden greift erst, wenn html die Klasse js trägt. */
@font-face { font-family: "Rubik"; src: url("/assets/schrift/rubik-var.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "IS Text"; src: url("/assets/schrift/atkinson-var.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
/* Atkinson setzt die Null durchgestrichen und hat keine Alternative. Ziffern kommen deshalb aus Rubik (unicode-range, später deklariert gewinnt). */
@font-face { font-family: "IS Text"; src: url("/assets/schrift/rubik-var.woff2") format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0030-0039; }

:root {
  --gruen: #0B3A27; --gruen-tief: #042316; --gruen-mittel: #235941; --akzent: #1B7D51; --akzent-hell: #3E8C68; --minze: #8FE0B9; --minze-hell: #DDF3E8;
  --koralle: #FB8371; --glut: #B94739;
  --nebel: #ECF6F1; --papier: #F6FAF8; --schiefer: #56645E; --tinte: #10241B; --fehler: #B42318;
  --fokus: #0B3A27; --feldrand: rgba(11, 58, 39, 0.5);
  --linie: rgba(11, 58, 39, 0.1); --linie-stark: rgba(11, 58, 39, 0.18);
  --titel: "Rubik", system-ui, sans-serif; --text: "IS Text", system-ui, sans-serif;
  --r: 26px; --r-gross: 34px;
  --rand: clamp(18px, 4.6vw, 72px); --breite: 1240px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1); --federn: cubic-bezier(0.34, 1.45, 0.64, 1);
  --schatten: 0 40px 80px -44px rgba(11, 58, 39, 0.38), 0 2px 10px rgba(11, 58, 39, 0.05);
  --schatten-weich: 0 22px 44px -28px rgba(11, 58, 39, 0.32);
  --schatten-karte: 0 1px 2px rgba(11, 58, 39, 0.05), 0 12px 32px -18px rgba(11, 58, 39, 0.22);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font: 400 1.0625rem/1.62 var(--text); color: var(--tinte); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--titel); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; margin: 0; text-wrap: balance; color: var(--gruen); }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 10px; }
::selection { background: var(--minze); color: var(--gruen-tief); }
.sprung { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--gruen); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 600; text-decoration: none; }
.sprung:focus { top: 12px; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.innen { width: min(var(--breite), 100% - 2 * var(--rand)); margin-inline: auto; }
.abschnitt { padding-block: clamp(84px, 10vw, 144px); position: relative; }
.papier { background: var(--papier); }
.nebel-grund { background: var(--nebel); }
.buehne-hell { position: relative; isolation: isolate; overflow: hidden; }
.licht { position: absolute; z-index: -2; pointer-events: none; border-radius: 50%; filter: blur(60px); }
.licht--minze { background: radial-gradient(circle, rgba(143,224,185,.55), rgba(143,224,185,0) 68%); }
.licht--gruen { background: radial-gradient(circle, rgba(62,140,104,.22), rgba(62,140,104,0) 68%); }
.licht--warm { background: radial-gradient(circle, rgba(251,131,113,.16), rgba(251,131,113,0) 68%); }
.wandern { animation: wandern 18s ease-in-out infinite alternate; }
@keyframes wandern { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(5%, 4%, 0) scale(1.1); } }
.gitter { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(11,58,39,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(11,58,39,.05) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: radial-gradient(70% 60% at 60% 25%, #000 15%, transparent 75%); mask-image: radial-gradient(70% 60% at 60% 25%, #000 15%, transparent 75%); }

/* Typografie */
.pille { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px; font: 600 .92rem/1.25 var(--text);
  background: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1px var(--linie-stark), 0 6px 18px -12px rgba(11,58,39,.35); color: var(--gruen); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pille i { width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); flex: none; animation: punktpuls 2.2s ease-out infinite; }
@keyframes punktpuls { 0% { box-shadow: 0 0 0 0 rgba(27,125,81,.55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(27,125,81,0); } }
.vorzeile { display: inline-flex; align-items: center; gap: 10px; font: 600 .95rem/1.3 var(--text); color: var(--akzent); margin-bottom: 18px; }
.vorzeile::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.titel-2 { font-size: clamp(2.1rem, 1.15rem + 3.2vw, 3.8rem); letter-spacing: -0.038em; line-height: 1.03; }
.titel-2 em, .held h1 em { font-style: normal; color: var(--akzent); background: linear-gradient(95deg, #1B7D51 0%, #2F9466 55%, #1B7D51 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.einleitung { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: var(--schiefer); max-width: 58ch; margin-top: 20px; line-height: 1.62; }
.kopf-block { max-width: 820px; }
.kopf-block--mitte { margin-inline: auto; text-align: center; }
.kopf-block--mitte .einleitung { margin-inline: auto; }

/* Kopfzeile: schwebende Glasleiste mit Abstand zum Rand */
.kopf { position: fixed; inset: 12px 0 auto 0; z-index: 50; pointer-events: none; }
.kopf .innen { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 64px; padding: 0 8px 0 24px; border-radius: 999px;
  background: rgba(255,255,255,.72); backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 0 0 1px rgba(11,58,39,.08), 0 10px 30px -18px rgba(11,58,39,.35); transition: background-color 240ms var(--ease), box-shadow 240ms var(--ease); position: relative; }
.kopf.fest .innen { background: rgba(255,255,255,.9); box-shadow: inset 0 0 0 1px rgba(11,58,39,.1), 0 14px 34px -18px rgba(11,58,39,.42); }
.kopf__logo { display: block; flex: none; }
.kopf__logo img { height: 23px; width: auto; }
.kopf nav { display: flex; align-items: center; gap: 6px; font: 600 .95rem var(--titel); }
.kopf nav a { text-decoration: none; }
.kopf nav a:not(.knopf) { color: var(--gruen); }
.kopf nav a:not(.knopf) { padding: 9px 14px; border-radius: 999px; transition: background-color 160ms; }
.kopf nav a:not(.knopf):hover { background: var(--nebel); }
.kopf nav .knopf { margin-left: 8px; min-height: 48px; padding: 6px 6px 6px 20px; font-size: .95rem; }
.kopf nav .knopf .pfeil { width: 36px; height: 36px; }
.kopf .kurz { display: none; }
.menue-knopf { display: none; }
@media (max-width: 1079px) {
  .kopf { inset: 10px 0 auto 0; }
  .kopf .innen { height: 58px; padding: 0 6px 0 18px; width: calc(100% - 20px); }
  .kopf__logo img { height: 20px; }
  .kopf nav a:not(.knopf) { display: none; }
  .kopf nav .knopf { min-height: 44px; padding: 5px 5px 5px 16px; margin-left: 0; }
  .kopf nav .knopf .pfeil { width: 32px; height: 32px; }
  .kopf .lang { display: none; } .kopf .kurz { display: inline; }
  .menue-knopf { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 0; background: var(--nebel); color: var(--gruen); cursor: pointer; }
}
.menue { position: absolute; left: 0; right: 0; top: calc(100% + 8px); border-radius: 26px; background: rgba(255,255,255,.97); pointer-events: auto;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--schatten), inset 0 0 0 1px var(--linie); padding: 10px; }
.menue nav { display: grid; gap: 2px; }
.menue a { display: block; padding: 15px 18px; border-radius: 16px; text-decoration: none; color: var(--gruen); font: 600 1.06rem var(--titel); }
.menue a:hover { background: var(--nebel); }

/* Knöpfe */
.knopf { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .7em; min-height: 56px; border: 0; border-radius: 999px; padding: 8px 8px 8px 26px;
  font: 600 1.04rem var(--titel); letter-spacing: -0.005em; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform 160ms var(--ease), box-shadow 240ms var(--ease), background-color 160ms; }
.knopf:active { transform: scale(0.97); }
.knopf--ohne { padding: 8px 26px; }
.knopf--haupt { background: var(--gruen); color: #fff; box-shadow: 0 14px 30px -14px rgba(11,58,39,.7), inset 0 1px 0 rgba(255,255,255,.12); }
.knopf--haupt:hover { background: var(--gruen-mittel); box-shadow: 0 18px 36px -14px rgba(11,58,39,.75); }
.knopf--zweit { background: #fff; color: var(--gruen); box-shadow: inset 0 0 0 1.5px var(--linie-stark), 0 6px 16px -12px rgba(11,58,39,.4); }
.knopf--zweit:hover { box-shadow: inset 0 0 0 1.5px var(--gruen), 0 8px 20px -12px rgba(11,58,39,.45); }
.knopf .pfeil { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--minze); color: var(--gruen-tief); transition: transform 240ms var(--ease); flex: none; }
.knopf--zweit .pfeil { background: var(--nebel); }
.knopf:hover .pfeil { transform: translateX(3px); }
.knopf[disabled] { opacity: .6; cursor: progress; }

/* Held */
.held { padding-top: clamp(130px, 13vw, 176px); padding-bottom: clamp(64px, 7vw, 110px); background: linear-gradient(180deg, #F3FAF6 0%, #FFFFFF 78%); }
.held__raster { display: grid; gap: clamp(46px, 6vw, 84px); align-items: center; }
@media (min-width: 1080px) { .held__raster { grid-template-columns: 1.06fr .94fr; } }
.held h1 { font-size: clamp(2.8rem, 1rem + 5.8vw, 6rem); letter-spacing: -0.048em; line-height: .97; margin-top: 24px; }
.held--betriebe h1 { font-size: clamp(2.55rem, 1rem + 4.8vw, 5.1rem); }
.held .einleitung { font-size: clamp(1.1rem, 1rem + .4vw, 1.32rem); max-width: 52ch; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.schnellstart { margin-top: 32px; }
.schnellstart p { font: 600 .95rem var(--text); color: var(--schiefer); margin-bottom: 12px; }
.schnellstart div { display: flex; flex-wrap: wrap; gap: 8px; }
.schnellstart a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 9px 17px; border-radius: 999px; font: 600 .96rem var(--text); color: var(--gruen);
  background: #fff; box-shadow: inset 0 0 0 1px var(--linie-stark); transition: background-color 160ms, transform 200ms var(--ease), box-shadow 160ms; }
.schnellstart a:hover { background: var(--nebel); box-shadow: inset 0 0 0 1px var(--akzent); transform: translateY(-2px); }
.vertrauen { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; font: 600 .95rem var(--text); color: var(--gruen); }
.vertrauen span { display: inline-flex; align-items: center; gap: 8px; }
.vertrauen svg { flex: none; }

/* Bildbühne mit schwebenden Karten */
.buehne { position: relative; }
.buehne__bild { position: relative; border-radius: var(--r-gross); overflow: hidden; aspect-ratio: 4 / 4.5; box-shadow: var(--schatten); }
@media (max-width: 1079px) { .buehne__bild { aspect-ratio: 4 / 3.3; } }
.buehne__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.glas { background: rgba(255,255,255,.88); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), 0 18px 40px -20px rgba(11,58,39,.45); border-radius: 22px; color: var(--tinte); }
.schwebe { position: absolute; z-index: 2; padding: 13px 18px 13px 13px; display: flex; align-items: center; gap: 12px; font: 600 .97rem/1.25 var(--text); color: var(--gruen); max-width: 290px; }
.schwebe small { display: block; font-weight: 400; color: var(--schiefer); font-size: .85rem; margin-top: 3px; }
.schwebe .rund { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--nebel); color: var(--akzent); }
.schwebe .rund--gruen { background: var(--gruen); color: #fff; }
.schwebe .rund--warm { background: #FFE9E5; color: var(--glut); }
.schwebe .rund svg.team { width: 30px; }
.js .schwebe { animation: schweben 7s ease-in-out infinite; }
.schwebe--a { left: -34px; top: 9%; } .schwebe--b { right: -26px; top: 46%; animation-delay: -2.3s !important; } .schwebe--c { left: 7%; bottom: 7%; animation-delay: -4.6s !important; }
@media (max-width: 1240px) { .schwebe--a { left: 14px; } .schwebe--b { right: 14px; } }
@media (max-width: 600px) { .schwebe { font-size: .86rem; padding: 10px 12px 10px 10px; max-width: 230px; } .schwebe small { font-size: .78rem; } .schwebe .rund { width: 34px; height: 34px; border-radius: 11px; }
  .held .buehne .schwebe--b { display: none; } .schwebe--a { top: 5%; left: 10px; } .schwebe--c { left: auto; right: 10px; bottom: 7%; } }
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* Beispielprofil (Betriebe) */
.profil-buehne { position: relative; max-width: 520px; margin-inline: auto; width: 100%; padding-block: 46px 54px; }
.profil { padding: 26px; border-radius: 30px; position: relative; z-index: 1; background: #fff; box-shadow: var(--schatten), inset 0 0 0 1px var(--linie); }
.profil__kopf { display: flex; align-items: center; gap: 14px; }
.profil__bild { width: 58px; height: 58px; border-radius: 18px; background: var(--nebel); color: var(--gruen); display: grid; place-items: center; font: 600 1.15rem var(--titel); flex: none; }
.profil__kopf h3 { font-size: 1.2rem; letter-spacing: -.015em; }
.profil__kopf p { color: var(--schiefer); font-size: .92rem; }
.marke-beispiel { margin-left: auto; align-self: flex-start; font: 600 .75rem var(--text); color: var(--schiefer); padding: 5px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linie-stark); white-space: nowrap; }
.profil__zeilen { margin-top: 18px; display: grid; }
.profil__zeilen div { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-top: 1px solid var(--linie); font-weight: 600; font-size: .97rem; color: var(--gruen); }
.profil__zeilen em { margin-left: auto; font-style: normal; color: var(--akzent); font-size: .9rem; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.profil__zeilen span.leise { margin-left: auto; color: var(--schiefer); font-weight: 400; font-size: .92rem; }
.profil__fuss { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--gruen); color: #fff; font-weight: 600; }
.profil__fuss b { font-family: var(--titel); font-weight: 600; }
.profil__fuss span { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--minze); }
.js .profil__zeilen div { opacity: 0; transform: translateX(-8px); }
.js .profil.da .profil__zeilen div { opacity: 1; transform: none; transition: opacity 500ms var(--ease), transform 600ms var(--ease); }
.js .profil.da .profil__zeilen div:nth-child(2) { transition-delay: 120ms; } .js .profil.da .profil__zeilen div:nth-child(3) { transition-delay: 240ms; }
.js .profil.da .profil__zeilen div:nth-child(4) { transition-delay: 360ms; } .js .profil.da .profil__zeilen div:nth-child(5) { transition-delay: 480ms; }
.profil-buehne .schwebe--a { left: -28px; top: 0; } .profil-buehne .schwebe--b { right: -28px; top: auto; bottom: 0; }
@media (max-width: 1240px) { .profil-buehne .schwebe--a { left: 0; } .profil-buehne .schwebe--b { right: 0; } }
@media (max-width: 600px) { .profil { padding: 20px; } .profil-buehne { padding-block: 40px 48px; } }

/* Laufband */
.laufband { overflow: hidden; background: #fff; color: var(--gruen); padding-block: 22px; border-block: 1px solid var(--linie);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.laufband__spur { display: flex; width: max-content; }
.js .laufband__spur { animation: laufen 52s linear infinite; }
.laufband--rueck .laufband__spur { animation-direction: reverse; }
.laufband:hover .laufband__spur { animation-play-state: paused; }
.laufband span { font: 500 clamp(1.1rem, .95rem + .7vw, 1.55rem) var(--titel); letter-spacing: -.01em; padding-inline: 22px; display: inline-flex; align-items: center; gap: 22px; white-space: nowrap; }
.laufband span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--minze); box-shadow: 0 0 0 4px var(--nebel); }
@keyframes laufen { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Zahlen */
.zahlen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 54px; }
@media (min-width: 980px) { .zahlen { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.zahl { border-radius: var(--r); padding: 28px 26px 26px; background: #fff; box-shadow: var(--schatten-karte), inset 0 0 0 1px var(--linie); position: relative; overflow: hidden; }
.zahl b { display: block; font: 600 clamp(2.5rem, 1.7rem + 2.4vw, 3.9rem)/1 var(--titel); letter-spacing: -.045em; color: var(--gruen); font-variant-numeric: tabular-nums; }
.zahl b small { font-size: .45em; letter-spacing: -.02em; margin-left: 4px; color: var(--akzent); }
.zahl span { display: block; margin-top: 12px; color: var(--schiefer); font-weight: 600; line-height: 1.4; }
.zahl::after { content: ""; position: absolute; right: -36px; top: -36px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(143,224,185,.55), transparent 70%); }

/* Drei Säulen */
.saeulen { display: grid; gap: 16px; margin-top: 54px; }
@media (min-width: 900px) { .saeulen { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.saeule { position: relative; border-radius: var(--r); padding: 30px; background: #fff; box-shadow: var(--schatten-karte), inset 0 0 0 1px var(--linie); overflow: hidden; transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.saeule:hover { transform: translateY(-4px); box-shadow: var(--schatten-weich), inset 0 0 0 1px var(--linie-stark); }
.saeule .ic { width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; background: var(--nebel); color: var(--akzent); }
.saeule h3 { font-size: 1.45rem; margin-top: 24px; }
.saeule p { color: var(--schiefer); margin-top: 10px; }
.saeule .merkmal { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px; }
.saeule .merkmal span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); font: 600 .84rem var(--text); color: var(--gruen); }
.saeule .merkmal svg { color: var(--akzent); }

/* System: mitlaufende Erzählung */
.system { display: grid; gap: 22px; margin-top: 60px; }
@media (min-width: 1080px) { .system { grid-template-columns: 1.02fr .98fr; gap: 84px; } }
.system__buehne { display: none; }
@media (min-width: 1080px) { .system__buehne { display: block; position: sticky; top: 118px; height: min(640px, calc(100svh - 160px)); align-self: start; } }
.system__ebene { position: absolute; inset: 0; opacity: 0; transform: translateY(18px) scale(.975); transition: opacity 520ms var(--ease), transform 700ms var(--ease); pointer-events: none; }
.system__ebene.an { opacity: 1; transform: none; }
.system__zeiger { position: absolute; left: 22px; top: 22px; z-index: 3; display: flex; gap: 6px; padding: 7px 9px; border-radius: 999px; background: rgba(255,255,255,.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.system__zeiger i { width: 22px; height: 5px; border-radius: 5px; background: rgba(11,58,39,.18); transition: background-color 300ms, width 300ms var(--ease); }
.system__zeiger i.an { background: var(--akzent); width: 38px; }
.system__schritte { display: grid; gap: 16px; }
@media (min-width: 1080px) { .system__schritte { gap: 0; } }
.schritt-block { position: relative; padding: 28px; border-radius: var(--r); background: #fff; box-shadow: var(--schatten-karte), inset 0 0 0 1px var(--linie); }
.schritt-block .nr { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: #fff; color: var(--gruen); box-shadow: inset 0 0 0 2px var(--linie-stark); font: 600 1.2rem var(--titel); margin-bottom: 18px; position: relative; z-index: 1; transition: background-color 300ms, color 300ms, box-shadow 300ms; }
.schritt-block.an .nr { background: var(--gruen); color: #fff; box-shadow: 0 10px 22px -10px rgba(11,58,39,.6); }
@media (min-width: 1080px) {
  .schritt-block { min-height: 58vh; display: flex; flex-direction: column; justify-content: center; background: transparent; box-shadow: none; padding: 0 0 0 76px; }
  .schritt-block::before { content: ""; position: absolute; left: 24px; top: 0; bottom: 0; width: 2px; background: var(--linie-stark); }
  .schritt-block:first-child::before { top: 50%; } .schritt-block:last-child::before { bottom: 50%; }
  .system .schritt-block .nr { position: absolute; left: 0; top: 50%; transform: translateY(-50%); margin: 0; }
  .js .schritt-block > *:not(.nr) { opacity: .32; transition: opacity 400ms var(--ease); }
  .js .schritt-block.an > *:not(.nr) { opacity: 1; }
}
.schritt-block .marke { font: 600 .9rem var(--text); color: var(--akzent); }
.schritt-block h3 { font-size: clamp(1.55rem, 1.2rem + 1.05vw, 2.25rem); margin-top: 8px; letter-spacing: -.03em; }
.schritt-block p { color: var(--schiefer); margin-top: 14px; font-size: 1.07rem; max-width: 46ch; }
.schritt-block ul { list-style: none; display: grid; gap: 10px; margin-top: 20px; }
.schritt-block li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; color: var(--gruen); }
.schritt-block li svg { flex: none; margin-top: 2px; }
.schritt-block .mobil { margin-top: 24px; height: 380px; position: relative; }
@media (min-width: 1080px) { .schritt-block .mobil { display: none; } }
@media (max-width: 600px) { .schritt-block { padding: 22px; } .schritt-block .mobil { height: 340px; margin-inline: -8px; } }

/* Flächen mit gezeichneter Oberfläche */
.flaeche { position: absolute; inset: 0; border-radius: var(--r-gross); overflow: hidden; box-shadow: var(--schatten); background: var(--nebel); isolation: isolate; }
.flaeche > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.flaeche::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,58,39,0) 45%, rgba(11,58,39,.28)); z-index: 0; pointer-events: none; }
.flaeche--verlauf { background: radial-gradient(70% 60% at 15% 10%, rgba(143,224,185,.75), transparent 70%), radial-gradient(70% 70% at 95% 95%, rgba(62,140,104,.35), transparent 70%), linear-gradient(160deg, #F3FAF6, #E3F2EA); }
.flaeche--verlauf::after { display: none; }
.ui { position: absolute; left: 50%; bottom: 24px; z-index: 2; transform: translateX(-50%); width: min(430px, calc(100% - 36px)); padding: 22px; border-radius: 24px; }
.ui--mitte { top: 50%; bottom: auto; transform: translate(-50%, -50%); }
.ui__titel { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ui__titel h4 { font-size: 1.1rem; letter-spacing: -.01em; }
.ui__titel small { font: 600 .8rem var(--text); color: var(--schiefer); }
.ui .zeile { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linie); font-weight: 600; font-size: .96rem; color: var(--gruen); }
.ui .zeile:first-of-type { border-top: 0; }
.ui .zeile em { margin-left: auto; font-style: normal; font-weight: 600; color: var(--akzent); font-size: .88rem; display: inline-flex; align-items: center; gap: 6px; }
.ui .zeile .leise { margin-left: auto; font-weight: 400; color: var(--schiefer); font-size: .9rem; }
.ui .avatar { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font: 600 .95rem var(--titel); background: var(--nebel); color: var(--gruen); flex: none; }
.ui .avatar--gruen { background: var(--gruen); color: #fff; }
.ui .avatar svg.team { width: 30px; }
.ui .meta { font-weight: 400; color: var(--schiefer); font-size: .88rem; display: block; }
.ui .chips-mini { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.ui .chips-mini span { padding: 8px 13px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--linie-stark); font-weight: 600; font-size: .85rem; color: var(--gruen); background: #fff; }
.ui .chips-mini span.an { background: var(--gruen); color: #fff; box-shadow: none; }
.ui .balken { height: 6px; border-radius: 999px; background: var(--nebel); margin-top: 16px; overflow: hidden; }
.ui .balken i { display: block; height: 100%; width: 25%; background: linear-gradient(90deg, var(--akzent), var(--minze)); border-radius: 999px; }
.ui .ruf { display: flex; align-items: center; gap: 14px; }
.ui .puls { width: 48px; height: 48px; border-radius: 50%; background: var(--akzent); color: #fff; display: grid; place-items: center; position: relative; flex: none; }
.ui .puls::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(27,125,81,.45); animation: ringpuls 2s ease-out infinite; }
@keyframes ringpuls { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.ui .verbindung { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 6px; }
.ui .verbindung .linie { height: 2px; background: repeating-linear-gradient(90deg, var(--akzent) 0 8px, transparent 8px 14px); position: relative; }
.ui .verbindung .linie::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--akzent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 18px no-repeat; }
.ui .hinweis { margin-top: 14px; padding: 11px 14px; border-radius: 14px; background: var(--nebel); color: var(--gruen); font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: 10px; }
.ui .anzeige-mini { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; }
.ui .anzeige-mini img { width: 96px; height: 96px; object-fit: cover; border-radius: 14px; }
.ui .anzeige-mini b { font: 600 1.02rem/1.25 var(--titel); display: block; color: var(--gruen); }
.ui .anzeige-mini span { display: inline-flex; margin-top: 8px; padding: 6px 12px; border-radius: 999px; background: var(--gruen); color: #fff; font-weight: 600; font-size: .82rem; }

/* Qualitätsfilter */
.filter { margin-top: 56px; border-radius: var(--r-gross); padding: clamp(18px, 3.4vw, 46px); background: #fff; box-shadow: var(--schatten-karte), inset 0 0 0 1px var(--linie); }
.filter svg { width: 100%; height: auto; display: block; overflow: visible; }
.filter .tor { fill: var(--papier); stroke: rgba(11,58,39,.16); stroke-width: 1.2; }
.filter .tor-licht { fill: url(#torlicht); }
.filter .tor-nr { font: 600 15px var(--titel); fill: var(--akzent); }
.filter .tor-text { font: 600 17px var(--titel); fill: var(--gruen); }
.filter .quelle-text { font: 600 15px var(--titel); fill: var(--schiefer); }
.filter .ziel { fill: rgba(27,125,81,.07); stroke: var(--akzent); stroke-width: 1.4; }
.filter .ziel-text { font: 600 16px var(--titel); fill: var(--gruen); }
.filter .ausschuss { font: 400 13px var(--text); fill: #8A9A92; }
.filter .p { fill: #A9B8B0; }
.js .filter .p { opacity: 0; animation: var(--art) var(--d, 8s) linear infinite; animation-delay: var(--v, 0s); }
@keyframes raus1 { 0% { transform: translate(0,0); opacity: 0; } 5% { opacity: 1; } 31% { transform: translate(262px,0); opacity: 1; } 40% { transform: translate(282px,70px); opacity: 0; } 100% { transform: translate(282px,70px); opacity: 0; } }
@keyframes raus2 { 0% { transform: translate(0,0); opacity: 0; } 5% { opacity: 1; } 53% { transform: translate(482px,0); opacity: 1; } 62% { transform: translate(502px,70px); opacity: 0; } 100% { transform: translate(502px,70px); opacity: 0; } }
@keyframes raus3 { 0% { transform: translate(0,0); opacity: 0; } 5% { opacity: 1; } 75% { transform: translate(702px,0); opacity: 1; } 84% { transform: translate(722px,70px); opacity: 0; } 100% { transform: translate(722px,70px); opacity: 0; } }
@keyframes durch { 0% { transform: translate(0,0); opacity: 0; fill: #A9B8B0; } 5% { opacity: 1; } 76% { transform: translate(712px,0); fill: #A9B8B0; } 81% { fill: #1B7D51; } 95% { transform: translate(868px, var(--ty, 0px)); opacity: 1; fill: #1B7D51; } 100% { transform: translate(876px, var(--ty, 0px)); opacity: 0; fill: #1B7D51; } }
.filter__legende { display: grid; gap: 14px; margin-top: 30px; }
@media (min-width: 860px) { .filter__legende { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.filter__legende div { padding: 20px 22px; border-radius: 20px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); color: var(--schiefer); }
.filter__legende b { color: var(--gruen); display: flex; align-items: center; gap: 10px; font: 600 1.1rem var(--titel); margin-bottom: 6px; }
.filter__legende b i { font-style: normal; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--gruen); color: #fff; font-size: .9rem; }
.filter__satz { margin-top: 26px; text-align: center; font: 600 clamp(1.08rem, 1rem + .35vw, 1.25rem)/1.4 var(--titel); color: var(--gruen); }
.filter__satz span { color: var(--akzent); }
@media (max-width: 700px) { .filter .tor-text, .filter .quelle-text, .filter .ziel-text, .filter .ausschuss { display: none; } .filter .tor-nr { font-size: 54px; } .filter .p { r: 11px; } .filter { padding: 22px 16px; } }

/* Partnerbetriebe */
.partner { display: grid; gap: 60px; align-items: center; }
@media (min-width: 1000px) { .partner { grid-template-columns: 1fr 1fr; gap: 84px; } }
.partner__bild { position: relative; margin-bottom: 40px; }
@media (min-width: 1000px) { .partner__bild { margin-bottom: 0; } }
.partner__bild .foto { border-radius: var(--r-gross); overflow: hidden; aspect-ratio: 4 / 3.5; box-shadow: var(--schatten); }
.partner__bild .foto img { width: 100%; height: 100%; object-fit: cover; }
.siegel { position: absolute; right: -18px; bottom: -48px; width: 196px; height: 196px; border-radius: 50%; background: var(--gruen); color: #fff; display: grid; place-items: center; box-shadow: var(--schatten), 0 0 0 8px #fff; }
.siegel__innen { display: grid; justify-items: center; gap: 4px; text-align: center; }
.siegel svg.team { width: 76px; }
.siegel b { font: 600 .96rem/1.1 var(--titel); }
.siegel .ring-schrift { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
.siegel .ring-schrift text { font: 600 12.5px var(--titel); letter-spacing: .2em; fill: rgba(255,255,255,.75); text-transform: uppercase; }
.js .siegel .ring-schrift { animation: drehen 36s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
@media (max-width: 600px) { .siegel { width: 152px; height: 152px; right: 8px; bottom: -44px; } .siegel svg.team { width: 56px; } .siegel b { font-size: .84rem; } .siegel .ring-schrift text { font-size: 15px; } }
.kriterien { display: grid; gap: 12px; margin-top: 32px; }
.kriterium { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: 22px; background: #fff; box-shadow: var(--schatten-karte), inset 0 0 0 1px var(--linie); transition: transform 280ms var(--ease); }
.kriterium:hover { transform: translateX(4px); }
.kriterium .ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--nebel); color: var(--akzent); }
.kriterium b { display: block; font: 600 1.1rem var(--titel); color: var(--gruen); }
.kriterium p { color: var(--schiefer); margin-top: 4px; }
.nicht-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.nicht-liste span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); color: var(--gruen); font-weight: 600; font-size: .92rem; }
.nicht-liste span::before { content: ""; width: 14px; height: 14px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23B94739' stroke-width='3' stroke-linecap='round'/></svg>") center / contain no-repeat; }

/* Deutschlandkarte aus Punkten, hell */
.karte-bereich { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1000px) { .karte-bereich { grid-template-columns: .95fr 1.05fr; gap: 80px; } }
.karte { position: relative; width: min(540px, 100%); margin-inline: auto; }
.karte svg { width: 100%; height: auto; display: block; overflow: visible; }
.karte .land { fill: #fff; stroke: rgba(11,58,39,.22); stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 18px 30px rgba(11,58,39,.12)); }
.karte .pkt-linie { stroke: rgba(11,58,39,.17); }
.karte .aktiv { fill: var(--akzent); }
.karte .aktiv--warm { fill: var(--koralle); }
.karte .ping { fill: none; stroke: var(--akzent); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; opacity: 0; }
.js .karte .ping { animation: ping 4.8s ease-out infinite; animation-delay: var(--v, 0s); }
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 55% { opacity: 0; } 100% { transform: scale(5.2); opacity: 0; } }
.karte .stadt rect { fill: #fff; stroke: rgba(11,58,39,.16); filter: drop-shadow(0 4px 8px rgba(11,58,39,.12)); }
.karte .stadt text { font: 600 16px var(--titel); fill: var(--gruen); }
.karte .stadt circle { fill: var(--gruen); }
.karte .stadt--gross { display: none; }
@media (max-width: 600px) { .karte .stadt--fein { display: none; } .karte .stadt--gross { display: inline; } }
.punkte-liste { display: grid; gap: 14px; margin-top: 32px; }
.punkte-liste div { display: flex; gap: 14px; align-items: flex-start; color: var(--schiefer); }
.punkte-liste .ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); color: var(--akzent); }
.punkte-liste b { color: var(--gruen); display: block; font: 600 1.08rem var(--titel); }

/* Branchen */
.branchen { display: grid; gap: 14px; margin-top: 52px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .branchen { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.branche { margin: 0; position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 1 / 1.08; background: var(--nebel); isolation: isolate; }
.branche img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.branche:hover img { transform: scale(1.06); }
.branche::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,35,22,0) 45%, rgba(4,35,22,.78)); }
.branche figcaption { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; color: #fff; }
.branche figcaption b { display: block; font: 600 clamp(1.12rem, 1rem + .45vw, 1.4rem) var(--titel); letter-spacing: -.015em; }
.branche figcaption span { display: block; font-size: .88rem; color: rgba(255,255,255,.86); margin-top: 4px; line-height: 1.35; }
.branche--breit { grid-column: span 2; aspect-ratio: auto; min-height: 210px; }
.branche--mehr { background: linear-gradient(150deg, #F3FAF6, #E3F2EA); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 26px; color: var(--gruen); box-shadow: inset 0 0 0 1px var(--linie); }
.branche--mehr::after { display: none; }
.branche--mehr b { font: 600 clamp(1.25rem, 1.05rem + .6vw, 1.65rem)/1.15 var(--titel); letter-spacing: -.02em; }
.branche--mehr .liste { display: flex; flex-wrap: wrap; gap: 6px; }
.branche--mehr .liste span { padding: 6px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); font-size: .84rem; font-weight: 600; }

/* Bento */
.bento { display: grid; gap: 16px; margin-top: 54px; grid-template-columns: repeat(6, 1fr); }
.kachel { grid-column: span 6; position: relative; border-radius: var(--r); padding: 30px; background: #fff; box-shadow: var(--schatten-karte), inset 0 0 0 1px var(--linie); overflow: hidden; min-height: 236px; display: flex; flex-direction: column; isolation: isolate; transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.kachel:hover { transform: translateY(-4px); box-shadow: var(--schatten-weich), inset 0 0 0 1px var(--linie-stark); }
@media (min-width: 760px) { .kachel { grid-column: span 3; } }
@media (min-width: 1100px) { .kachel--2 { grid-column: span 2; } .kachel--3 { grid-column: span 3; } .kachel--4 { grid-column: span 4; } }
.kachel h3 { font-size: 1.4rem; margin-top: auto; padding-top: 28px; letter-spacing: -.02em; }
.kachel p { color: var(--schiefer); margin-top: 10px; }
.kachel .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--nebel); color: var(--akzent); }
.kachel .gross { font: 600 clamp(4rem, 3rem + 4vw, 6.4rem)/.9 var(--titel); letter-spacing: -.06em; }
.kachel--gruen { background: var(--gruen); color: #fff; box-shadow: 0 30px 60px -36px rgba(11,58,39,.8); }
.kachel--gruen h3 { color: #fff; } .kachel--gruen p { color: rgba(255,255,255,.8); } .kachel--gruen .ic { background: rgba(255,255,255,.1); color: var(--minze); }
.kachel--gruen .gross { color: var(--minze); }
.kachel--minze { background: radial-gradient(70% 90% at 90% 0%, rgba(143,224,185,.7), transparent 62%), linear-gradient(150deg, #F3FAF6, #E6F4EC); }
.kachel--bild { color: #fff; padding: 0; justify-content: flex-end; min-height: 320px; box-shadow: var(--schatten-weich); }
.kachel--bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 900ms var(--ease); }
.kachel--bild:hover img { transform: scale(1.05); }
.kachel--bild::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4,35,22,0) 30%, rgba(4,35,22,.82)); }
.kachel--bild .text { padding: 30px; }
.kachel--bild h3 { color: #fff; } .kachel--bild p { color: rgba(255,255,255,.86); }
.leucht::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 300ms; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(143,224,185,.35), transparent 60%); }
.leucht:hover::before { opacity: 1; }
.trio-gross { width: min(280px, 60%); }
.trio-gross svg { width: 100%; height: auto; display: block; overflow: visible; }
.js .kachel--minze .mitte { transform: translateY(70px); opacity: 0; }
.js .kachel--minze.da .mitte { transform: none; opacity: 1; transition: transform 1000ms var(--federn) 350ms, opacity 400ms var(--ease) 350ms; }

/* Anzeigenbeispiele im Telefon */
.telefone { display: flex; gap: 22px; margin-top: 58px; justify-content: center; }
@media (max-width: 1000px) { .telefone { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px var(--rand) 30px; margin-inline: calc(-1 * var(--rand)); scrollbar-width: none; } .telefone::-webkit-scrollbar { display: none; } }
.telefon { flex: none; width: 296px; scroll-snap-align: center; border-radius: 44px; padding: 10px; background: #fff; box-shadow: var(--schatten), inset 0 0 0 1px var(--linie-stark); }
.js .telefon { animation: schweben 8s ease-in-out infinite; }
.telefon:nth-child(2) { animation-delay: -2.7s !important; } .telefon:nth-child(3) { animation-delay: -5.3s !important; }
@media (min-width: 1001px) { .telefon:nth-child(2) { margin-top: 44px; } }
.telefon__schirm { border-radius: 35px; overflow: hidden; background: #fff; color: var(--tinte); box-shadow: inset 0 0 0 1px var(--linie); }
.telefon__kopf { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; }
.telefon__kopf .av { width: 34px; height: 34px; border-radius: 50%; background: var(--nebel); display: grid; place-items: center; flex: none; }
.telefon__kopf .av svg { width: 24px; }
.telefon__kopf b { font: 600 .9rem var(--titel); display: block; color: var(--gruen); }
.telefon__kopf small { font-size: .74rem; color: var(--schiefer); display: block; }
.telefon__bild { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.telefon__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.telefon__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,35,22,0) 45%, rgba(4,35,22,.82)); }
.telefon__bild p { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; color: #fff; font: 600 1.16rem/1.15 var(--titel); letter-spacing: -.02em; }
.telefon__bild p span { display: block; font: 600 .76rem var(--text); color: var(--minze); margin-bottom: 6px; letter-spacing: .02em; }
.telefon__leiste { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--nebel); font: 600 .88rem var(--titel); color: var(--gruen); }
.telefon__leiste span { padding: 7px 14px; border-radius: 999px; background: var(--gruen); color: #fff; font-size: .8rem; }
.telefon__text { padding: 12px 14px 16px; font-size: .84rem; color: var(--schiefer); line-height: 1.45; }
.zusatz { margin-top: 18px; color: var(--schiefer); font-size: .92rem; }

/* Fragen */
.fragen-raster { display: grid; gap: 40px; }
@media (min-width: 1000px) { .fragen-raster { grid-template-columns: .8fr 1.2fr; gap: 80px; } .fragen-raster > div:first-child { position: sticky; top: 120px; align-self: start; } }
.fragen { display: grid; gap: 10px; }
.fragen details { background: #fff; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--linie); transition: box-shadow 200ms; }
.fragen details[open] { box-shadow: inset 0 0 0 1.5px var(--akzent), var(--schatten-weich); }
.fragen summary { cursor: pointer; list-style: none; padding: 21px 66px 21px 24px; font: 600 1.1rem/1.35 var(--titel); position: relative; color: var(--gruen); letter-spacing: -.01em; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; background: var(--nebel) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 6v12M6 12h12' fill='none' stroke='%230B3A27' stroke-width='2.6' stroke-linecap='round'/></svg>") center / 16px no-repeat; transition: transform 260ms var(--ease), background-color 200ms; }
.fragen details[open] summary::after { transform: rotate(45deg); background-color: var(--minze); }
.fragen details > div { padding: 0 24px 24px; color: var(--schiefer); }
.fragen a { color: var(--gruen); font-weight: 600; }
.kontakt-kachel { margin-top: 30px; padding: 22px; border-radius: 22px; background: var(--nebel); display: grid; gap: 14px; }
.kontakt-kachel div { display: flex; align-items: center; gap: 14px; }
.kontakt-kachel .ic { width: 46px; height: 46px; border-radius: 15px; background: #fff; color: var(--akzent); display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px var(--linie); }
.kontakt-kachel b { font-family: var(--titel); color: var(--gruen); display: block; font-size: .9rem; }
.kontakt-kachel a { color: var(--gruen); font-weight: 600; text-decoration: none; }
.kontakt-kachel a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Formular */
.formular-bereich { display: grid; gap: 50px; align-items: start; }
@media (min-width: 1080px) { .formular-bereich { grid-template-columns: .82fr 1.18fr; gap: 80px; } }
.liste-check { display: grid; gap: 14px; margin-top: 30px; list-style: none; }
.liste-check li { display: flex; gap: 12px; align-items: flex-start; color: var(--gruen); font-weight: 600; }
.liste-check svg { flex: none; margin-top: 2px; }
.formkarte { background: #fff; color: var(--tinte); border-radius: 32px; box-shadow: var(--schatten), inset 0 0 0 1px var(--linie); padding: clamp(22px, 3.4vw, 44px); position: relative; }
.formkarte::before { content: ""; position: absolute; inset: -1px; border-radius: 33px; padding: 1.5px; pointer-events: none;
  background: linear-gradient(140deg, rgba(143,224,185,1), rgba(255,255,255,0) 40%, rgba(255,255,255,0) 64%, rgba(27,125,81,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.schritt-zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 600 .875rem var(--text); color: var(--schiefer); }
.schritt-zeile .frei { color: var(--akzent); display: inline-flex; align-items: center; gap: 6px; }
.fortschritt { height: 6px; border-radius: 999px; background: var(--nebel); margin: 12px 0 28px; overflow: hidden; }
.fortschritt i { display: block; height: 100%; width: 25%; background: linear-gradient(90deg, var(--akzent), var(--minze)); border-radius: 999px; transition: width 400ms var(--ease); }
.schritt { border: 0; margin: 0; padding: 0; min-width: 0; }
.schritt > legend { font: 600 clamp(1.4rem, 1.1rem + 1vw, 1.95rem)/1.15 var(--titel); letter-spacing: -0.025em; padding: 0; margin-bottom: 20px; color: var(--gruen); }
.js .schritt:not([hidden]) { animation: schritt-rein 420ms var(--ease); }
@keyframes schritt-rein { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.gruppe { border: 0; margin: 0; padding: 0; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 20px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--feldrand); background: #fff; font: 600 1rem var(--text); cursor: pointer; color: var(--gruen); transition: background-color 160ms, color 160ms, transform 200ms var(--federn), box-shadow 160ms; }
.chip span:hover { box-shadow: inset 0 0 0 1.5px var(--gruen); background: var(--papier); }
.chip input:checked + span { background: var(--gruen); color: #fff; box-shadow: none; transform: scale(1.03); }
.chip input:focus-visible + span { outline: 3px solid var(--fokus); outline-offset: 2px; }
.feld { display: grid; gap: 7px; margin-top: 16px; }
.feld label, .etikett { font: 600 .95rem var(--text); color: var(--gruen); }
.etikett { display: block; margin: 22px 0 10px; padding: 0; }
.schritt > .gruppe:first-of-type .etikett { margin-top: 0; }
.feld input, .feld select, .feld textarea { font: 400 1.0625rem var(--text); color: var(--tinte); padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--feldrand); background: #fff; min-height: 54px; width: 100%; transition: border-color 160ms, box-shadow 160ms; }
.feld textarea { min-height: 120px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--gruen); box-shadow: 0 0 0 4px rgba(143,224,185,.6); }
.hilfe { font-size: .875rem; color: var(--schiefer); font-weight: 400; }
.fehler-text { color: var(--fehler); font-weight: 600; font-size: .95rem; margin-top: 14px; }
.zwei { display: grid; gap: 0 16px; }
@media (min-width: 560px) { .zwei { grid-template-columns: 1fr 1fr; } }
.einwilligung { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; font-size: .92rem; color: var(--schiefer); cursor: pointer; }
.einwilligung input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--gruen); flex: none; }
.klein-hinweis { margin-top: 10px; font-size: .875rem; color: var(--schiefer); }
.klein-hinweis a { color: var(--gruen); font-weight: 600; }
.formular-fuss { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-top: 30px; flex-wrap: wrap; }
.zurueck { background: none; border: 0; font: 600 1rem var(--titel); color: var(--schiefer); cursor: pointer; padding: 12px 6px; min-height: 48px; }
.zurueck:hover { color: var(--gruen); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.erfolg { text-align: center; padding: 24px 0 8px; }
.erfolg svg { width: 220px; margin: 0 auto 26px; overflow: visible; display: block; }
.erfolg h3 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); }
.erfolg p { color: var(--schiefer); margin: 12px auto 0; max-width: 44ch; }
.erfolg .mitte { transform: translateY(46px); opacity: 0; }
.erfolg.an .mitte { transform: none; opacity: 1; transition: transform 700ms var(--federn), opacity 300ms var(--ease); }

/* Fuß */
.fuss { background: var(--gruen); color: rgba(255,255,255,.78); padding-block: 72px 40px; }
.fuss .innen { display: grid; gap: 36px; }
@media (min-width: 900px) { .fuss .innen { grid-template-columns: 1.4fr 1fr 1fr; } }
.fuss img { height: 26px; width: auto; }
.fuss p { margin-top: 18px; max-width: 40ch; }
.fuss h4 { font: 600 1rem var(--titel); color: #fff; margin-bottom: 14px; }
.fuss nav { display: grid; gap: 10px; align-content: start; }
.fuss nav a { color: rgba(255,255,255,.84); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.fuss nav a svg { color: var(--minze); flex: none; }
.fuss nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.fuss .klein { grid-column: 1 / -1; font-size: .875rem; color: rgba(255,255,255,.55); border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; margin: 0; max-width: none; }
.fuss .klein a { color: rgba(255,255,255,.7); }

/* Rechtstexte */
.recht { padding-top: 150px; padding-bottom: 110px; background: linear-gradient(180deg, #F3FAF6 0, #fff 340px); }
.recht h1 { font-size: clamp(2.3rem, 1.4rem + 3.2vw, 3.8rem); letter-spacing: -.035em; }
.recht .stand { color: var(--schiefer); margin-top: 12px; }
.recht h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); margin-top: 50px; }
.recht h3 { font-size: 1.12rem; margin-top: 26px; }
.recht p, .recht li { max-width: 76ch; color: #22362C; }
.recht p { margin-top: 12px; }
.recht ul { padding-left: 22px; margin: 12px 0 0; }
.recht li { margin-top: 6px; }
.recht a { color: var(--gruen); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.recht .inhalt { margin-top: 34px; padding: 24px 28px; background: var(--nebel); border-radius: 22px; max-width: 76ch; }
.recht .inhalt ol { margin: 10px 0 0; padding-left: 22px; columns: 2 280px; }
.recht .inhalt a { font-weight: 400; }
.recht .kasten { margin-top: 18px; padding: 18px 22px; border-radius: 18px; background: var(--nebel); border-left: 4px solid var(--gruen); }
.recht .einleitung { color: var(--schiefer); }
.recht svg.team { width: 200px; margin-inline: auto; display: block; }

/* Einblenden, nur mit Skript */
.js [data-einblenden] { opacity: 0; transform: translateY(24px); }
.js [data-einblenden].da { opacity: 1; transform: none; transition: opacity 800ms var(--ease), transform 900ms var(--ease); transition-delay: var(--verz, 0ms); }
.js .held [data-einblenden] { transform: translateY(16px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; }
  .js [data-einblenden], .js .profil__zeilen div { opacity: 1; transform: none; }
  .js .laufband__spur, .js .schwebe, .js .telefon, .js .siegel .ring-schrift, .wandern { animation: none; }
  .js .filter .p { animation: none; opacity: .9; transform: translate(var(--sx, 0px), var(--sy, 0px)); }
  .js .filter .p[style*="durch"] { fill: #1B7D51; }
  .js .karte .ping { animation: none; opacity: 0; }
  .js .kachel--minze .mitte, .erfolg .mitte { transform: none; opacity: 1; }
}

/* Kleine Kacheln: Überschrift direkt unter dem Symbol, damit die Reihe auf einer Linie steht */
.kachel .ic + h3 { margin-top: 26px; padding-top: 0; }

/* ------------------------------------------------------------ Formularseiten und Erstfrage */
.kopf--formular nav { gap: 0; }
.knopf--klein { min-height: 46px; padding: 6px 18px 6px 14px; font-size: .95rem; gap: .55em; }
.kopf--formular .knopf--klein { margin-left: 0; }
.kopf--formular .knopf--klein svg { color: var(--akzent); }
@media (max-width: 1079px) { .kopf--formular .knopf--klein { padding: 6px 16px 6px 12px; } }
.teaser { display: grid; gap: 44px; align-items: center; }
@media (min-width: 1080px) { .teaser { grid-template-columns: .9fr 1.1fr; gap: 80px; } }
.erstfrage__frage { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.95rem); letter-spacing: -.025em; margin-bottom: 20px; }
.chip-link { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 20px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--feldrand); background: #fff;
  font: 600 1rem var(--text); color: var(--gruen); text-decoration: none; transition: background-color 160ms, box-shadow 160ms, transform 200ms var(--federn); }
.chip-link:hover { background: var(--gruen); color: #fff; box-shadow: none; transform: translateY(-2px); }
.erstfrage .formular-fuss .hilfe { max-width: 26ch; }
.formularseite { padding-top: clamp(118px, 12vw, 160px); padding-bottom: clamp(56px, 7vw, 96px); background: linear-gradient(180deg, #F3FAF6 0%, #FFFFFF 85%); }
.formularseite__innen { width: min(780px, 100% - 2 * var(--rand)); }
.formularseite__kopf { text-align: center; margin-bottom: 30px; }
.formularseite__kopf h1 { font-size: clamp(2.3rem, 1.4rem + 3vw, 3.6rem); letter-spacing: -.045em; margin-top: 18px; }
.formularseite__kopf h1 em { font-style: normal; color: var(--akzent); }
.formularseite__kopf .einleitung { margin-inline: auto; margin-top: 14px; }
.formularseite__vertrauen { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 26px; font-size: .95rem; }
.abschnitt--kurz { padding-block: clamp(56px, 7vw, 96px); }
.formularseite__fragen { width: min(780px, 100% - 2 * var(--rand)); }
.titel-3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); letter-spacing: -.03em; margin-bottom: 22px; }
.formularseite__fragen .kontakt-kachel { margin-top: 22px; }
@media (min-width: 640px) { .formularseite__fragen .kontakt-kachel { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------ Handy: eigener Feinschliff
   Moritz 06.10.2026: „mobiloptimiert ist die Seite wirklich überhaupt gar nicht … das musst du extrem prüfen“.
   Grundsätze: kürzere Wege, nichts verdeckt Text, Tippflächen ab 44 px, Schrift ab 15 px, kein Glasfilter auf vielen Flächen. */
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .abschnitt { padding-block: 64px; }
  .titel-2 { font-size: clamp(1.95rem, 1.2rem + 3.6vw, 2.4rem); line-height: 1.06; }
  .einleitung { font-size: 1.04rem; margin-top: 14px; }
  .vorzeile { margin-bottom: 12px; font-size: .9rem; }

  /* Held */
  .held { padding-top: 96px; padding-bottom: 44px; }
  .held h1 { font-size: clamp(2.45rem, 1.2rem + 7vw, 3.1rem); margin-top: 18px; line-height: 1; }
  .held--betriebe h1 { font-size: clamp(2.15rem, 1.1rem + 6vw, 2.7rem); }
  .held .einleitung { font-size: 1.05rem; }
  .pille { font-size: .82rem; padding: 7px 13px 7px 10px; }
  .cta { flex-direction: column; align-items: stretch; margin-top: 24px; }
  .cta .knopf { width: 100%; justify-content: space-between; }
  .cta .knopf--ohne { justify-content: center; }
  .schnellstart { margin-top: 24px; }
  .schnellstart div { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(-1 * var(--rand)); padding: 2px var(--rand) 6px; scrollbar-width: none; }
  .schnellstart div::-webkit-scrollbar { display: none; }
  .schnellstart a { flex: none; scroll-snap-align: start; }
  .vertrauen { flex-direction: column; gap: 10px; margin-top: 22px; }
  .held__raster { gap: 34px; }
  .buehne__bild { aspect-ratio: 4 / 3.4; border-radius: 26px; }
  .glas, .schwebe { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .schwebe { background: rgba(255,255,255,.96); }
  .profil-buehne .schwebe--b { display: none; }
  .profil-buehne { padding-block: 40px 8px; }

  /* Laufband */
  .laufband { padding-block: 16px; }
  .laufband span { font-size: 1.05rem; padding-inline: 16px; gap: 16px; }

  /* Säulen und Zahlen kompakt */
  .saeulen { margin-top: 32px; gap: 12px; }
  .saeule { padding: 22px; }
  .saeule .ic { width: 46px; height: 46px; border-radius: 14px; }
  .saeule h3 { font-size: 1.25rem; margin-top: 16px; }
  .saeule .merkmal { margin-top: 16px; }
  .zahlen { margin-top: 28px; gap: 10px; }
  .zahl { padding: 18px 16px; border-radius: 20px; }
  .zahl b { font-size: 2.3rem; }
  .zahl span { font-size: .9rem; margin-top: 8px; }
  .zahl::after { width: 80px; height: 80px; right: -26px; top: -26px; }

  /* Ablauf: Zeitstrahl, die Oberfläche als schlanke Karte ohne Foto */
  .system { margin-top: 32px; gap: 0; }
  .system__schritte { gap: 0; }
  .schritt-block { background: transparent; box-shadow: none; border-radius: 0; padding: 0 0 30px 62px; }
  .schritt-block::before { content: ""; position: absolute; left: 21px; top: 0; bottom: 0; width: 2px; background: var(--linie-stark); }
  .schritt-block:first-child::before { top: 22px; } .schritt-block:last-child::before { bottom: auto; height: 22px; }
  .schritt-block .nr { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 14px; margin: 0; font-size: 1.05rem; background: var(--gruen); color: #fff; box-shadow: none; }
  .schritt-block .marke { font-size: .85rem; }
  .schritt-block h3 { font-size: 1.35rem; margin-top: 2px; }
  .schritt-block p { font-size: 1rem; margin-top: 8px; }
  .schritt-block ul { margin-top: 12px; gap: 8px; }
  .schritt-block li { font-size: .95rem; }
  .schritt-block .mobil { height: auto; margin: 16px 0 0; }
  .schritt-block .mobil .flaeche { position: static; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
  .schritt-block .mobil .flaeche::after, .schritt-block .mobil .flaeche > img { display: none; }
  .schritt-block .mobil .ui { position: static; transform: none; width: 100%; padding: 16px; border-radius: 18px; background: #fff; box-shadow: var(--schatten-karte), inset 0 0 0 1px var(--linie); }
  .ui .zeile { padding: 10px 0; font-size: .92rem; }
  .ui__titel h4 { font-size: 1rem; }

  /* Partner */
  .partner { gap: 44px; }
  .partner__bild .foto { aspect-ratio: 4 / 3.2; border-radius: 26px; }
  .siegel { width: 128px; height: 128px; right: 10px; bottom: -36px; box-shadow: var(--schatten), 0 0 0 6px #fff; }
  .siegel svg.team { width: 46px; } .siegel b { font-size: .76rem; } .siegel .ring-schrift text { font-size: 16px; letter-spacing: .14em; }
  .kriterien { margin-top: 22px; gap: 10px; }
  .kriterium { padding: 16px; gap: 14px; }
  .kriterium .ic { width: 40px; height: 40px; }
  .nicht-liste span { font-size: .86rem; padding: 7px 12px; }

  /* Karte */
  .karte-bereich { gap: 34px; }
  .punkte-liste { margin-top: 22px; }
  .karte { width: min(420px, 100%); }

  /* Branchen: wischen statt quetschen */
  .branchen { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 28px calc(-1 * var(--rand)) 0; padding: 4px var(--rand) 14px; scrollbar-width: none; }
  .branchen::-webkit-scrollbar { display: none; }
  .branche { flex: none; width: 74%; aspect-ratio: 4 / 4.6; scroll-snap-align: center; }
  .branche figcaption b { font-size: 1.25rem; }
  .branche figcaption span { font-size: .9rem; }
  .branche--breit { width: 84%; min-height: 0; }
  .branche--mehr { padding: 22px; }

  /* Bento */
  .bento { margin-top: 30px; gap: 12px; }
  .kachel { padding: 22px; min-height: 0; border-radius: 22px; }
  .kachel h3 { font-size: 1.2rem; padding-top: 18px; }
  .kachel .ic + h3 { margin-top: 16px; }
  .kachel .gross { font-size: 3.6rem; }
  .kachel--minze .trio-gross { width: 150px; }
  .kachel--bild { min-height: 280px; }
  .kachel--bild .text { padding: 22px; }

  /* Telefone */
  .telefone { margin-top: 30px; gap: 14px; }
  .telefon { width: 264px; }

  /* Fragen */
  .fragen-raster { gap: 26px; }
  .fragen summary { padding: 17px 58px 17px 18px; font-size: 1.02rem; }
  .fragen summary::after { right: 14px; width: 32px; height: 32px; margin-top: -16px; }
  .fragen details > div { padding: 0 18px 18px; font-size: .98rem; }
  .kontakt-kachel { margin-top: 18px; padding: 16px; }

  /* Erstfrage und Formulare */
  .teaser { gap: 28px; }
  .formkarte { border-radius: 26px; padding: 20px; }
  .formkarte::before { border-radius: 27px; }
  .erstfrage__frage, .schritt > legend { font-size: 1.35rem; margin-bottom: 16px; }
  .chips { gap: 8px; }
  .chip span, .chip-link { min-height: 46px; padding: 9px 16px; font-size: .97rem; }
  .formular-fuss { margin-top: 22px; }
  .erstfrage .formular-fuss { flex-direction: column-reverse; align-items: stretch; text-align: center; gap: 12px; }
  .erstfrage .formular-fuss .hilfe { max-width: none; }
  .erstfrage .formular-fuss .knopf, .formularseite .formular-fuss .knopf { flex: 1; justify-content: space-between; }
  .formularseite { padding-top: 92px; }
  .formularseite__kopf { margin-bottom: 20px; }
  .formularseite__kopf h1 { font-size: 2.2rem; margin-top: 14px; }
  .formularseite__kopf .einleitung { font-size: 1rem; }
  .formularseite__vertrauen { flex-direction: column; align-items: flex-start; gap: 10px; }
  .liste-check { margin-top: 20px; gap: 10px; }

  /* Fuß */
  .fuss { padding-block: 48px 30px; }
  .fuss .innen { gap: 26px; }
  .fuss nav a { min-height: 32px; }

  /* Rechtstexte */
  .recht { padding-top: 104px; padding-bottom: 72px; }
  .recht .inhalt { padding: 18px 20px; }
  .recht .inhalt ol { columns: 1; }
}
@media (max-width: 380px) {
  .held h1 { font-size: 2.25rem; }
  .kopf__logo img { height: 18px; }
  .kopf nav .knopf { padding-left: 13px; }
  .schnellstart a, .chip span, .chip-link { padding: 9px 14px; }
}

/* ------------------------------------------------------------ Befunde der Mobilprüfung (Runde 1) */
/* Rasterspalten dürfen nie breiter werden als der Bildschirm (min-width:auto sprengte die Heldspalte auf 535 px) */
.held__raster > *, .teaser > *, .formular-bereich > *, .karte-bereich > *, .partner > *, .fragen-raster > *, .system > *, .system__schritte > * { min-width: 0; }
.kopf__logo { min-height: 44px; display: flex; align-items: center; }
.recht p, .recht li, .recht a, .fragen details > div { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .pille { font-size: .875rem; }
  .schwebe small, .saeule .merkmal span, .schritt-block .marke, .ui__titel small, .ui .meta, .telefon__kopf small, .zusatz, .hilfe, .klein-hinweis { font-size: .875rem; }
  .fuss nav a { min-height: 44px; }
  .kontakt-kachel a { display: inline-flex; align-items: center; min-height: 44px; }
  .kontakt-kachel div { gap: 12px; }
}
/* Kopfleiste auf schmalen Telefonen: kleineres Logo, Knopf ohne Pfeilkreis, Menü bleibt voll tippbar */
@media (max-width: 440px) {
  .kopf .innen { gap: 8px; padding: 0 6px 0 14px; }
  .kopf__logo img { height: 17px; }
  .kopf nav { gap: 6px; }
  .kopf nav .knopf { padding: 5px 15px; }
  .kopf nav .knopf .pfeil { display: none; }
  .menue-knopf { width: 44px; height: 44px; }
}
/* Befunde der Mobilprüfung (Runde 2) */
.recht h1, .recht h2, .recht h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .recht h1 { font-size: 2rem; }
  .ui .chips-mini span, .ui .anzeige-mini span { font-size: .875rem; }
  .profil__kopf { flex-wrap: wrap; }
  .profil__kopf > div { flex: 1; min-width: 0; }
  .marke-beispiel { order: 3; margin: 2px 0 0 72px; }
}

/* Befunde der Sichtprüfung am Handy */
.gruppe > legend.etikett { font: 600 .95rem var(--text); color: var(--gruen); margin: 22px 0 10px; letter-spacing: 0; }
.schritt > .gruppe:first-of-type > legend.etikett { margin-top: 0; }
.schritt .feld + .gruppe > legend.etikett { margin-top: 22px; }
.profil__zeilen em, .ui .zeile em { white-space: nowrap; }
@media (max-width: 760px) {
  .nur-breit { display: none; }
  .profil { padding-top: 46px; }
  .marke-beispiel { position: absolute; top: 14px; right: 14px; margin: 0; order: 0; }
  .profil__kopf h3 { font-size: 1.12rem; }
  .fuss nav { gap: 0; }
  .fuss h4 { margin-bottom: 4px; }
}
@media (max-width: 760px) {
  .nicht-liste span { font-size: .875rem; }
  .siegel { width: 140px; height: 140px; }
  .siegel b { font-size: .875rem; }
}
/* Abstand vor einer Gruppe hängt am Fieldset, Legenden ignorieren Außenabstände im Rahmen */
.schritt .feld + .gruppe, .schritt .gruppe + .gruppe { margin-top: 22px; }
.gruppe > legend.etikett { margin-top: 0; }

.kopf nav a { white-space: nowrap; }
/* Tablet und kleines Notebook: Heldbild im Breitformat statt bildschirmhoch */
@media (min-width: 761px) and (max-width: 1079px) { .buehne__bild { aspect-ratio: 16 / 9; } .held__raster { gap: 40px; } }