/* DigitaleVergabe: Aufbau und Gestaltung nach chatgpt.com, Akzent Markenviolett */

:root {
  color-scheme: light;
  --grund: #FCFCFC;
  --weiss: #FFFFFF;
  --grau-1: #F3F3F3;
  --grau-2: #ECECEC;
  --linie: rgba(13, 13, 13, .10);
  --linie-2: rgba(13, 13, 13, .18);
  --tinte: #0D0D0D;
  --tinte-2: #4A4A4A;
  --tinte-3: #6E6E6E;
  --violett: #6A2CF0;
  --violett-hauch: #F1EBFF;
  --frist: #B8321D;
  --frist-hauch: #FDECE8;
  --ok: #0A7650;

  --m-planung: #1F5FD6;   --m-planung-hauch: #EAF1FF;
  --m-unterlagen: #6A2CF0; --m-unterlagen-hauch: #F1EBFF;
  --m-bieter: #0A7650;    --m-bieter-hauch: #E5F4ED;
  --m-vertrag: #9E5800;   --m-vertrag-hauch: #FFF2DC;
  --m-archiv: #0D6B7C;    --m-archiv-hauch: #E2F2F4;
  --m-nerd: #A0149B;      --m-nerd-hauch: #FBE8FA;
  --m-bob: #BF3F0B;       --m-bob-hauch: #FFEDE3;

  /* Pastellflächen wie hinter den Produktansichten von ChatGPT */
  --pastell-a: radial-gradient(70% 90% at 0% 0%, #F6C9E6 0%, transparent 60%), radial-gradient(70% 80% at 100% 100%, #B9C6FF 0%, transparent 62%), radial-gradient(60% 60% at 80% 10%, #E2D3FF 0%, transparent 65%), linear-gradient(135deg, #F4E6FF 0%, #DCD6FF 55%, #C9D8FF 100%);
  --pastell-b: radial-gradient(70% 80% at 100% 0%, #FFD9C2 0%, transparent 60%), radial-gradient(70% 90% at 0% 100%, #D6C8FF 0%, transparent 62%), linear-gradient(160deg, #FCE7F3 0%, #E6DEFF 100%);
  --pastell-c: radial-gradient(70% 80% at 0% 100%, #C4E3FF 0%, transparent 62%), radial-gradient(60% 70% at 100% 0%, #E9D2FF 0%, transparent 62%), linear-gradient(200deg, #EEF0FF 0%, #E3DBFF 100%);
  --unterstrich: linear-gradient(90deg, #8B7CFF 0%, #6A2CF0 35%, #C26BFF 65%, #FF9BB8 100%);

  --f: "Geist", "Segoe UI", system-ui, sans-serif;
  --breite: 1200px;
  --rand: clamp(16px, 4vw, 40px);
  --weich: cubic-bezier(.16, 1, .3, 1);
  --schatten-panel: 0 8px 28px rgba(13, 13, 13, .10), 0 1px 3px rgba(13, 13, 13, .06);
  --schatten-fenster: 0 0 0 1px rgba(13, 13, 13, .06), 0 24px 60px -24px rgba(13, 13, 13, .28);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; scrollbar-color: var(--linie-2) transparent; scrollbar-width: thin; }
body { margin: 0; background: var(--grund); color: var(--tinte); font: 400 1.0625rem/1.65 var(--f); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; caret-color: var(--violett); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; text-wrap: balance; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
::selection { background: var(--violett); color: #fff; }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.springen { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--tinte); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 600; }
.springen:focus, .springen:hover { top: 12px; color: #fff; }
.huelle { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
.mitte { text-align: center; margin-inline: auto; }
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Typografie ---------- */
.titel-1, .preiskopf__titel { font: 500 clamp(2.4rem, 4.6vw, 4rem)/1.02 var(--f); letter-spacing: -.03em; }
.titel-2 { font: 500 clamp(1.9rem, 3.4vw, 3rem)/1.16 var(--f); letter-spacing: -.03em; }
.titel-3 { font: 500 1.375rem/1.26 var(--f); letter-spacing: -.02em; }
.vorspann { font-size: 1.0625rem; line-height: 1.65; color: var(--tinte); max-width: 60ch; }
.titel-1 + .vorspann, .titel-2 + .vorspann, .preiskopf__titel + .vorspann { margin-top: 18px; }
.klein { font-size: .875rem; color: var(--tinte-3); }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 42px; padding: 0 20px; border: 0; border-radius: 999px; font: 500 .9375rem/1 var(--f); letter-spacing: -.01em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s, box-shadow .15s, opacity .15s; }
.knopf .ic { width: .95em; height: .95em; stroke-width: 2; }
.knopf--stempel, .knopf--primaer, .knopf--tinte { background: var(--tinte); color: #fff; }
.knopf--stempel:hover, .knopf--primaer:hover, .knopf--tinte:hover { background: #2B2B2B; color: #fff; }
.knopf--linie, .knopf--zweit { background: var(--weiss); color: var(--tinte); box-shadow: inset 0 0 0 1px var(--linie-2); }
.knopf--linie:hover, .knopf--zweit:hover { background: var(--grau-1); color: var(--tinte); }
.knopf--klein { min-height: 36px; padding: 0 16px; font-size: .875rem; }
.knopf--breit { width: 100%; }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.textlink { display: inline-flex; align-items: center; gap: .3em; font-weight: 500; color: var(--tinte); text-decoration: none; }
.textlink:hover { text-decoration: underline; }
.textlink .ic { width: .95em; height: .95em; stroke-width: 2; }
.knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.knoepfe.mitte { justify-content: center; }

/* ---------- Status-Pille ---------- */
.stempel { --c: var(--violett); display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--c); font: 500 .8rem/1.3 var(--f); white-space: nowrap; }
.stempel::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.stempel__d { color: color-mix(in srgb, var(--c) 70%, #333); }
.stempel__d::before { content: "· "; }
.stempel--planung { --c: var(--m-planung); } .stempel--unterlagen { --c: var(--m-unterlagen); } .stempel--bieter { --c: var(--m-bieter); }
.stempel--vertrag { --c: var(--m-vertrag); } .stempel--archiv { --c: var(--m-archiv); } .stempel--nerd { --c: var(--m-nerd); }
.stempel--bob { --c: var(--m-bob); } .stempel--frist { --c: var(--frist); } .stempel--tinte { --c: var(--tinte-2); }
.ist-geschlagen { animation: pop .38s var(--weich) both; }
@keyframes pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: rgba(252, 252, 252, .96); }
.kopf__zeile { position: relative; display: flex; align-items: center; height: 64px; }
.marke { display: inline-flex; align-items: center; text-decoration: none; color: var(--tinte); }
.marke__logo { display: block; height: 40px; width: auto; }   /* zweizeilige Wortmarke seit 06.10.2026 abends */
.fuss .marke__logo { height: 52px; }
.nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; }
.nav__punkt { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--tinte-2); font: 400 .9375rem/1 var(--f); text-decoration: none; cursor: pointer; }
.nav__punkt:hover, .nav__punkt[aria-expanded="true"] { color: var(--tinte); background: var(--grau-1); }
.nav__punkt[aria-current="page"] { color: var(--tinte); }
.nav__punkt .ic { width: .9rem; height: .9rem; stroke-width: 2; transition: transform .2s var(--weich); }
.nav__punkt[aria-expanded="true"] .ic { transform: rotate(180deg); }
.kopf__rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.kopf__anmelden { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; white-space: nowrap; border-radius: 999px; background: var(--tinte); color: #fff; font: 500 .9375rem/1 var(--f); text-decoration: none; }
.kopf__anmelden:hover { background: #2B2B2B; color: #fff; }
.kopf__rechts .knopf { min-height: 36px; padding: 0 16px; background: var(--weiss); color: var(--tinte); box-shadow: inset 0 0 0 1px var(--linie-2); }
.kopf__rechts .knopf:hover { background: var(--grau-1); }
.kopf__menue { display: none; width: 40px; height: 40px; border: 0; border-radius: 999px; background: none; color: var(--tinte); cursor: pointer; place-items: center; }
.kopf__menue .ic { width: 1.4rem; height: 1.4rem; }
/* Funktionen: schlichte Liste wie bei ChatGPT */
.mega { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 64px); overflow-y: auto; overscroll-behavior: contain; background: var(--weiss); border-top: 1px solid var(--linie); box-shadow: 0 28px 48px -28px rgba(13, 13, 13, .28); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s, transform .22s var(--weich), visibility 0s linear .22s; }
.mega.ist-offen { opacity: 1; visibility: visible; transform: none; transition: opacity .16s, transform .22s var(--weich), visibility 0s; }
.mega__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.2fr); gap: 8px 16px; padding-block: 24px 16px; }
.mega__kopf { margin: 6px 0 8px 10px; font: 500 .8125rem/1 var(--f); color: var(--tinte-3); }
.mega__liste { list-style: none; margin: 0; padding: 0; }
.mega__eintrag { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 1px 12px; align-items: start; padding: 9px 10px; border-radius: 12px; color: var(--tinte); text-decoration: none; }
.mega__eintrag:hover { background: var(--grau-1); color: var(--tinte); }
.mega__eintrag .ic { grid-row: span 2; width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--hauch, var(--grau-1)); color: var(--farbe, var(--tinte)); stroke-width: 1.8; }
.mega__titel { font-size: .9375rem; font-weight: 500; line-height: 1.3; }
.mega__satz { font-size: .8125rem; line-height: 1.35; color: var(--tinte-3); }
.mega__ki { padding: 14px 8px 8px; border-radius: 16px; background: var(--grau-1); }
.mega__ki .mega__eintrag:hover { background: var(--weiss); }
.mega__fuss { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 14px 18px; border-top: 1px solid var(--linie); font-size: .875rem; color: var(--tinte-3); }
.mega__fuss a { display: inline-flex; align-items: center; gap: 6px; color: var(--tinte); font-weight: 500; text-decoration: none; }
.mega__fuss a:hover { text-decoration: underline; }
.mega__fuss .ic { width: 1rem; height: 1rem; stroke-width: 2; }
.blende { position: fixed; inset: 64px 0 0; z-index: 40; background: rgba(13, 13, 13, .14); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s linear .2s; }
.blende.ist-offen { opacity: 1; visibility: visible; transition: opacity .2s; }
.blatt-menue { position: fixed; inset: 64px 0 0; z-index: 60; background: var(--grund); overflow-y: auto; padding: 8px var(--rand) 32px; opacity: 0; transform: translateY(-8px); visibility: hidden; transition: opacity .2s, transform .28s var(--weich), visibility 0s linear .28s; }
.blatt-menue.ist-offen { opacity: 1; transform: none; visibility: visible; transition: opacity .2s, transform .28s var(--weich); }
.blatt-menue details { border-bottom: 1px solid var(--linie); }
.blatt-menue summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font: 500 1.125rem/1 var(--f); cursor: pointer; }
.blatt-menue summary::-webkit-details-marker { display: none; }
.blatt-menue details[open] summary .ic { transform: rotate(180deg); }
.blatt-menue .mega__liste { padding-bottom: 10px; }
.blatt-menue .mega__eintrag { padding: 8px 0; }
.blatt-menue .mega__eintrag:hover { background: none; }
.blatt-menue__link { display: block; padding: 16px 0; border-bottom: 1px solid var(--linie); font: 500 1.125rem/1 var(--f); text-decoration: none; }
.blatt-menue__knoepfe { display: grid; gap: 10px; margin-top: 24px; }
.blatt-menue__knoepfe .knopf { min-height: 46px; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: clamp(72px, 9vw, 128px); }
.abschnitt--eng { padding-block: clamp(40px, 5vw, 72px); }
.abschnitt--blatt { background: var(--grund); }
.kopfzeile { text-align: center; max-width: 820px; margin: 0 auto clamp(32px, 4vw, 48px); }
.kopfzeile .vorspann { margin: 16px auto 0; }
.kopfzeile .knoepfe { justify-content: center; margin-top: 24px; }

/* ---------- Held ---------- */
.held { position: relative; padding-block: clamp(56px, 7vw, 96px) 0; text-align: center; overflow: hidden; }
.held__titel { font: 700 clamp(3rem, 7vw, 6.25rem)/1 var(--f); letter-spacing: -.047em; max-width: 13ch; margin-inline: auto; hyphens: manual; -webkit-hyphens: manual; }
.held__titel--breit { max-width: 15ch; }   /* Startseite: drei Zeilen am Desktop */
.held__strich { position: relative; display: inline-block; }
.held__strich::after { content: ""; position: absolute; left: 2%; right: 2%; bottom: -.06em; height: .045em; min-height: 3px; border-radius: 3px; background: var(--unterstrich); }
.held__unter { margin: 26px auto 0; max-width: 52ch; font-size: 1.0625rem; color: var(--tinte-2); }
.held .knoepfe { justify-content: center; margin-top: 30px; }
/* Produktvideo im Held, Aufbau wie bei GovRadar: Akte auf Pastellfläche, großer Startknopf in der Mitte */
.video { position: relative; padding: clamp(14px, 3vw, 40px); border-radius: 24px; background: var(--pastell-a); }
.video__start { position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; place-items: center; width: clamp(72px, 9vw, 104px); height: clamp(72px, 9vw, 104px); padding: 0; border: 0; border-radius: 999px; background: rgba(13, 13, 13, .78); color: #fff; cursor: pointer; transform: translate(-50%, -50%); box-shadow: 0 18px 40px -16px rgba(13, 13, 13, .55); transition: transform .25s var(--weich), background .2s; }
.video__start:hover { background: var(--tinte); transform: translate(-50%, -50%) scale(1.05); }
.video__start:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.video__start .ic { width: 42%; height: 42%; margin-left: 6%; fill: currentColor; stroke: currentColor; stroke-width: 1.5; }
.video__film { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; background: #0D0D0D; box-shadow: var(--schatten-fenster); }
.video.ist-film > .fenster, .video.ist-film .video__start { display: none; }
.video__hinweis { margin: 14px 0 0; text-align: center; font-size: .8125rem; color: var(--tinte-3); }
.held__buehne { position: relative; max-width: 1060px; margin: clamp(48px, 6vw, 72px) auto 0; padding-bottom: clamp(56px, 7vw, 96px); text-align: left; }
.deko { position: absolute; z-index: 2; pointer-events: none; color: var(--tinte); }
.deko--stern { width: clamp(40px, 5vw, 64px); height: auto; }
.deko--stern .ic { width: 100%; height: auto; stroke-width: 2.6; }
.deko--etikett { display: inline-flex; flex-direction: column; padding: 12px 18px; border-radius: 14px; background: #E9E9E9; box-shadow: 0 10px 24px -12px rgba(13, 13, 13, .35); font: 500 1.05rem/1.15 var(--f); letter-spacing: -.02em; color: #3F3F3F; transform: rotate(-14deg); }
.deko--etikett small { font-size: .82rem; font-weight: 400; color: #4F4F4F; }
.wechsel { display: inline-grid; vertical-align: top; }
.wechsel > * { grid-area: 1 / 1; opacity: 0; transition: opacity .35s, transform .45s var(--weich); transform: translateY(.15em); }
.wechsel > .ist-aktiv { opacity: 1; transform: none; }

/* Browserfenster mit Akte */
.fenster { position: relative; background: #fff; border-radius: 14px; box-shadow: var(--schatten-fenster); overflow: hidden; }
.fenster__leiste { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px 0 14px; background: #fff; border-bottom: 1px solid var(--linie); }
.fenster__punkte { display: flex; gap: 6px; }
.fenster__punkte i { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; }
.fenster__punkte i:nth-child(2) { background: #FEBC2E; } .fenster__punkte i:nth-child(3) { background: #28C840; }
.fenster__adresse { flex: 1; min-width: 0; height: 26px; display: block; line-height: 26px; padding: 0 12px; font-size: .8125rem; color: var(--tinte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fenster__adresse .ic { display: inline-block; width: .85rem; height: .85rem; margin-right: 6px; vertical-align: -2px; color: var(--tinte-3); }
.fenster__halt { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--tinte-2); font: 500 .8rem/1 var(--f); cursor: pointer; }
.fenster__halt:hover { background: var(--grau-1); color: var(--tinte); }
.fenster__halt .ic { width: .85rem; height: .85rem; stroke-width: 2.2; }
.akte__kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px 0; }
.akte__titel { font: 600 1.2rem/1.2 var(--f); letter-spacing: -.02em; }
.akte__az { display: block; margin-top: 4px; font-size: .8125rem; color: var(--tinte-3); font-variant-numeric: tabular-nums; }
.marke-stand { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--m-planung-hauch); color: var(--m-planung); font: 500 .8rem/1 var(--f); white-space: nowrap; }
.marke-stand::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.akte__reiter { position: relative; display: flex; gap: 2px; margin-top: 14px; padding: 0 14px; border-bottom: 1px solid var(--linie); overflow: hidden; }
.akte__reiter.ist-ueberlang { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent); }
.akte__reiter span { position: relative; padding: 10px 10px 12px; font: 500 .875rem/1 var(--f); color: var(--tinte-3); white-space: nowrap; transition: color .25s; }
.akte__reiter span::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--tinte); transform: scaleX(0); transition: transform .3s var(--weich); }
.akte__reiter span.ist-aktiv { color: var(--tinte); }
.akte__reiter span.ist-aktiv::after { transform: scaleX(1); }
.eingang { --zeile: 62px; }
.eingang__kopf, .eingang__zeile { display: grid; grid-template-columns: 44px 92px minmax(0, 1fr) 190px; align-items: center; gap: 0 14px; padding: 0 22px; }
.eingang__kopf { height: 34px; font: 500 .78rem/1 var(--f); color: var(--tinte-3); border-bottom: 1px solid var(--linie); }
.eingang__liste { list-style: none; margin: 0; padding: 0; height: calc(var(--zeile) * 5); overflow: hidden; }
.eingang__zeile { height: var(--zeile); border-bottom: 1px solid var(--linie); }
.eingang__zeile.ist-neu { animation: einlauf .5s var(--weich) both, druck 1.6s ease-out .3s both; }
@keyframes einlauf { from { margin-top: calc(var(--zeile) * -1); opacity: 0; } to { margin-top: 0; opacity: 1; } }
@keyframes druck { from { background: var(--hauch, var(--violett-hauch)); } to { background: transparent; } }
.eingang__nr { font: 500 .875rem/1 var(--f); color: var(--tinte-3); font-variant-numeric: tabular-nums; }
.eingang__zeit { font-size: .78rem; line-height: 1.3; color: var(--tinte-3); font-variant-numeric: tabular-nums; }
.eingang__vorgang { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 12px; align-items: center; min-width: 0; }
.eingang__vorgang .ic { width: 28px; height: 28px; padding: 6px; border-radius: 8px; background: var(--hauch); color: var(--farbe); stroke-width: 2; grid-row: span 2; }
.eingang__titel { font-weight: 500; font-size: .9rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eingang__von { font-size: .78rem; line-height: 1.3; color: var(--tinte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eingang__stempel { justify-self: end; }
.fenster__fuss { display: flex; justify-content: space-between; gap: 12px; padding: 10px 22px 12px; font-size: .78rem; color: var(--tinte-3); background: #FAFAFA; }

/* ---------- Mitlaufender Bereich: Akkordeon links, Ansicht rechts ---------- */
.lauf { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.lauf__liste { position: sticky; top: 110px; list-style: none; margin: 0; padding: 0; }
.lauf__punkt { border-top: 1px solid var(--linie); }
.lauf__punkt:last-child { border-bottom: 1px solid var(--linie); }
.lauf__punkt button { width: 100%; display: block; padding: 18px 0; border: 0; background: none; color: var(--tinte-2); font: 400 1.0625rem/1.3 var(--f); text-align: left; cursor: pointer; }
.lauf__punkt button:hover { color: var(--tinte); }
.lauf__punkt.ist-aktiv button { color: var(--tinte); font-size: 1.375rem; font-weight: 500; letter-spacing: -.02em; padding-bottom: 10px; }
.lauf__text { display: none; padding-bottom: 20px; color: var(--tinte-2); font-size: .95rem; line-height: 1.6; }
.lauf__text b { display: block; margin-bottom: 8px; color: var(--tinte); font-weight: 600; font-size: .95rem; }
.lauf__punkt.ist-aktiv .lauf__text { display: block; }
.lauf__buehne { position: sticky; top: 96px; }
.lauf__ansicht { display: none; }
.lauf__ansicht.ist-aktiv { display: block; animation: auftauchen .4s var(--weich) both; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lauf__ansicht .fenster { display: flex; flex-direction: column; min-height: 420px; }
.lauf__ansicht .fenster .ansicht { flex: 1; }
.ansicht { padding: 22px; }
.ansicht__kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.ansicht__kopf h3, .ansicht__titel { margin: 0; font: 600 1.05rem/1.3 var(--f); }
.ansicht__zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linie); font-size: .92rem; }
.ansicht__zeile span:first-child { display: inline-flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; white-space: nowrap; }
.ansicht__zeile span:last-child { flex-shrink: 0; white-space: nowrap; }
.ansicht__zeile .ic { width: 18px; height: 18px; color: var(--tinte-3); }
.ansicht__balken { height: 6px; margin-top: 14px; border-radius: 6px; background: var(--grau-2); overflow: hidden; }
.ansicht__balken i { display: block; height: 100%; width: 38%; border-radius: 6px; background: var(--tinte); }
.ansicht__klein { margin-top: 8px; font-size: .8rem; color: var(--tinte-3); }

/* ---------- Karussell mit grauen Karten ---------- */
.karussell__kopf { display: flex; justify-content: center; gap: 8px; margin: 18px 0 28px; }
.karussell__kopf button { width: 40px; height: 40px; border: 0; border-radius: 999px; background: var(--grau-1); color: var(--tinte); cursor: pointer; display: grid; place-items: center; }
.karussell__kopf button:hover { background: var(--grau-2); }
.karussell__kopf button[disabled] { color: #9A9A9A; cursor: default; background: var(--grau-1); opacity: .6; }
.karussell__kopf .ic { width: 1.1rem; height: 1.1rem; }
.karussell__spur { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, calc((100% - 32px) / 3)); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.karussell__spur::-webkit-scrollbar { display: none; }
.graukarte { scroll-snap-align: start; display: flex; flex-direction: column; min-height: 470px; padding: 26px 26px 0; border-radius: 16px; background: var(--grau-1); overflow: hidden; }
.graukarte h3 { font: 500 1.375rem/1.25 var(--f); letter-spacing: -.02em; }
.graukarte p { margin: 10px 0 0; font-size: .9375rem; line-height: 1.6; color: var(--tinte); }
.graukarte__bild { margin-top: auto; padding-top: 24px; display: flex; justify-content: center; align-items: flex-end; }
.graukarte__bild .mini { width: 100%; max-width: 300px; margin-bottom: -10px; }
.mini { padding: 14px 16px; border-radius: 14px 14px 0 0; background: #fff; box-shadow: 0 -2px 18px rgba(13, 13, 13, .07); font-size: .8125rem; line-height: 1.45; }
.mini__kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 600; font-size: .85rem; }
.mini__zeile { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--linie); color: var(--tinte-2); }
.mini__zeile span:first-child { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; }
.mini__zeile span:last-child { flex-shrink: 0; white-space: nowrap; }
.mini__zeile .ic { width: 15px; height: 15px; color: var(--tinte-3); }
.mini__blase { margin: 6px 0; padding: 9px 12px; border-radius: 14px; background: var(--grau-1); }
.mini__blase--rechts { margin-left: 24px; }
.mini__eingabe { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding: 8px 10px 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linie-2); color: var(--tinte-3); }
.mini__eingabe i { width: 24px; height: 24px; border-radius: 50%; background: var(--tinte); }

/* ---------- Bänder und Karten ---------- */
.band { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(28px, 4vw, 52px) clamp(24px, 6vw, 96px); border-radius: 20px; background: var(--grau-1); }
.band h2 { font: 500 clamp(1.5rem, 2.4vw, 1.9rem)/1.2 var(--f); letter-spacing: -.02em; }
.band p { margin: 6px 0 0; color: var(--tinte); font-size: .9375rem; max-width: 60ch; }
.rahmenkarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rahmenkarten--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rahmenkarte { display: flex; flex-direction: column; align-items: flex-start; padding: 22px 24px 24px; border-radius: 16px; background: var(--weiss); box-shadow: inset 0 0 0 1px var(--linie); }
.rahmenkarte h3 { font: 500 1.0625rem/1.35 var(--f); letter-spacing: -.01em; }
.rahmenkarte p { margin: 10px 0 0; font-size: .9375rem; color: var(--tinte-2); }
.rahmenkarte .knopf { margin-top: auto; }
.rahmenkarte p + .knopf, .rahmenkarte ul + .knopf { margin-top: 20px; }
.rahmenkarte ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; font-size: .9375rem; color: var(--tinte-2); }
.rahmenkarte li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; line-height: 1.45; }
.rahmenkarte li .ic { width: 1rem; height: 1rem; margin-top: 3px; stroke-width: 2.2; }
.bildkarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bildkarte { display: flex; flex-direction: column; text-decoration: none; color: var(--tinte); }
.bildkarte__bild { aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 22px; border-radius: 16px; background: var(--pastell-a); overflow: hidden; }
.bildkarte:nth-child(2) .bildkarte__bild { background: var(--pastell-b); }
.bildkarte:nth-child(3) .bildkarte__bild { background: var(--pastell-c); }
.bildkarte h3 { margin-top: 16px; font: 400 1.0625rem/1.4 var(--f); }
.bildkarte h3 .ic { display: inline-block; width: .9em; height: .9em; vertical-align: -1px; stroke-width: 2; }
.bildkarte:hover h3 { text-decoration: underline; }
.fussnote { margin-top: 32px; text-align: center; font-size: .8125rem; color: var(--tinte-3); }

/* Business-Aufbau: Text links, Pastellfläche rechts */
.zweier { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.zweier--umgekehrt > :first-child { order: 2; }
.pastell { position: relative; display: grid; place-items: center; min-height: 420px; padding: clamp(24px, 4vw, 48px); border-radius: 20px; background: var(--pastell-a); overflow: hidden; }
.pastell--b { background: var(--pastell-b); } .pastell--c { background: var(--pastell-c); }
.pastell .fenster, .pastell .gespraech { width: 100%; max-width: 520px; }
.aufklapp { border-top: 1px solid var(--linie); }
.aufklapp details { border-bottom: 1px solid var(--linie); }
.aufklapp summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font: 400 1.0625rem/1.4 var(--f); cursor: pointer; }
.aufklapp summary::-webkit-details-marker { display: none; }
.aufklapp summary .ic { width: 1.05rem; height: 1.05rem; transition: transform .25s var(--weich); }
.aufklapp details[open] summary .ic { transform: rotate(45deg); }
.aufklapp details > div { padding: 0 32px 18px 0; color: var(--tinte-2); font-size: .9375rem; }
.aufklapp details > div ul { margin: 8px 0 0; padding-left: 1.1em; }

/* ---------- KI-Gespräch ---------- */
.gespraech { background: #fff; color: var(--tinte); border-radius: 16px; box-shadow: var(--schatten-fenster); overflow: hidden; text-align: left; }
.gespraech__kopf { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--linie); font: 600 .9375rem/1 var(--f); }
.gespraech__kopf .ic { width: 26px; height: 26px; padding: 5px; border-radius: 8px; background: var(--hauch); color: var(--farbe); stroke-width: 2; }
.gespraech__kopf small { margin-left: auto; font: 400 .8rem/1 var(--f); color: var(--tinte-3); }
.gespraech__verlauf { padding: 20px; display: grid; gap: 16px; }
.blase { max-width: 86%; line-height: 1.55; font-size: .9375rem; }
.blase--frage { justify-self: end; padding: 10px 16px; border-radius: 20px; background: var(--grau-1); }
.blase--antwort { justify-self: stretch; max-width: none; padding: 0; }
.blase__wer { display: block; margin-bottom: 4px; font: 500 .78rem/1 var(--f); color: var(--tinte-3); }
.treffer { list-style: none; margin: 12px 0 6px; padding: 0; border-top: 1px solid var(--linie); }
.treffer li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 9px 0; border-bottom: 1px solid var(--linie); font-size: .875rem; }
.treffer li b { font-weight: 500; }
.treffer li span { color: var(--tinte-3); font-size: .8125rem; }
.treffer .marke-dok { align-self: center; font: 500 .8rem/1 var(--f); padding: 5px 8px; border-radius: 999px; background: var(--grau-1); color: var(--tinte-2); }
.blase .stempel { margin-top: 12px; }
.gespraech__fuss { padding: 10px 20px 12px; font-size: .78rem; color: var(--tinte-3); border-top: 1px solid var(--linie); background: #FAFAFA; }

/* ---------- Fuß ---------- */
.fuss { padding: 56px 0 28px; background: var(--tinte); color: rgba(255, 255, 255, .72); font-size: .875rem; }
.fuss__raster { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px; margin-bottom: 36px; }
.fuss h2 { margin: 0 0 14px; font: 500 .875rem/1 var(--f); color: #fff; }
.fuss ul + h2 { margin-top: 26px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fuss a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.fuss a:hover { color: #fff; }
.fuss__marke p { margin-top: 16px; max-width: 36ch; line-height: 1.6; color: rgba(255, 255, 255, .6); }
.fuss__vertrauen { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px 24px; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.fuss__merkmale { display: flex; flex-wrap: wrap; gap: 10px; }
.fuss__merkmal { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8); font-size: .8125rem; font-weight: 500; }
.fuss__merkmal .ic { width: 15px; height: 15px; }
.fuss__flagge { width: 20px; height: auto; border-radius: 3px; }
.fuss__mitglied { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.fuss__mitglied-text { margin-right: 4px; font-size: .75rem; color: rgba(255, 255, 255, .5); }
.fuss__verband { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 6px 12px; border-radius: 8px; background: #fff; transition: transform .15s var(--weich); }
.fuss__verband:hover { transform: translateY(-1px); }
.fuss__verband img { width: auto; max-height: 26px; }
.fuss__unten { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .8125rem; color: rgba(255, 255, 255, .55); }
.fuss__b2b { max-width: 110ch; margin: 0 0 12px; line-height: 1.55; }
.fuss__zeile { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 24px; }
.fuss__zeile p { margin: 0; }
.fuss__recht { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.fuss__recht a { color: rgba(255, 255, 255, .55); }
.fuss :focus-visible { outline-color: #fff; }

/* ---------- Unterseiten ---------- */
.seitenkopf { padding-block: clamp(56px, 7vw, 104px) clamp(32px, 4vw, 56px); text-align: center; }
.seitenkopf .vorspann { margin: 18px auto 0; }
.seitenkopf .held__knoepfe, .seitenkopf .knoepfe { justify-content: center; }
.held__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.seitenkopf--beispiel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; text-align: left; }
.seitenkopf--beispiel .vorspann { margin-left: 0; }
.seitenkopf--beispiel .held__knoepfe { justify-content: flex-start; }
.seitenkopf--beispiel .titel-1 { font-size: clamp(2.4rem, 4.4vw, 4rem); letter-spacing: -.03em; }
.seitenkopf--beispiel .pastell { min-height: 460px; }
.pfad { display: flex; gap: 8px; font-size: .875rem; color: var(--tinte-3); margin-bottom: 18px; }
.seitenkopf:not(.seitenkopf--beispiel) .pfad { justify-content: center; }
.pfad a { text-decoration: none; }
.pfad a:hover { text-decoration: underline; }
.funktionsbuch { max-width: 860px; margin-inline: auto; }
.funktion { padding: 0; }
.funktion__nr { display: none; }
.quelle { margin-top: 18px; font-size: .8125rem; color: var(--tinte-3); text-align: center; }
.grenze { max-width: 860px; margin: 32px auto 0; padding: 22px 24px; border-radius: 16px; background: var(--grau-1); }
.grenze h2 { font: 500 1.0625rem/1.3 var(--f); }
.grenze p { margin: 6px 0 0; color: var(--tinte-2); font-size: .9375rem; }
.gruppenbuch { display: grid; gap: clamp(48px, 6vw, 80px); }
.gruppe__kopf { text-align: center; margin-bottom: 24px; }
.gruppe__kopf > .ic { display: none; }
.gruppe__kopf h2 { font: 500 clamp(1.75rem, 3vw, 2.5rem)/1.15 var(--f); letter-spacing: -.03em; }
.gruppe__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gruppe__liste a, .gruppe__liste .gruppe__eintrag { display: flex; flex-direction: column; height: 100%; min-height: 180px; padding: 22px 24px; border-radius: 16px; background: var(--grau-1); text-decoration: none; color: var(--tinte); }
.gruppe__liste a:hover { background: var(--grau-2); }
.gruppe__liste .ic { width: 22px; height: 22px; color: var(--tinte); margin-bottom: auto; }
.gruppe__liste b { margin-top: 28px; font-weight: 500; font-size: 1.125rem; letter-spacing: -.01em; }
.gruppe__liste span { margin-top: 6px; color: var(--tinte-2); font-size: .9375rem; line-height: 1.5; }
.weiter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; max-width: 1000px; margin-inline: auto; }
.weiter a { display: block; text-decoration: none; }
.weiter a b { display: block; font: 500 1.375rem/1.25 var(--f); letter-spacing: -.02em; }
.weiter a span { display: block; margin-top: 8px; color: var(--tinte-2); font-size: .9375rem; }
.weiter a:hover b { text-decoration: underline; }
.f-planung { --farbe: var(--m-planung); --hauch: var(--m-planung-hauch); }
.f-unterlagen { --farbe: var(--m-unterlagen); --hauch: var(--m-unterlagen-hauch); }
.f-bieter { --farbe: var(--m-bieter); --hauch: var(--m-bieter-hauch); }
.f-vertrag { --farbe: var(--m-vertrag); --hauch: var(--m-vertrag-hauch); }
.f-archiv { --farbe: var(--m-archiv); --hauch: var(--m-archiv-hauch); }
.f-nerd { --farbe: var(--m-nerd); --hauch: var(--m-nerd-hauch); }
.f-bob { --farbe: var(--m-bob); --hauch: var(--m-bob-hauch); }
.f-team { --farbe: var(--tinte-2); --hauch: #EDEDED; }

/* ---------- Preise ---------- */
.preiskopf { padding-block: clamp(56px, 7vw, 104px) clamp(64px, 7vw, 96px); text-align: center; }
.preiskopf__titel { font-size: clamp(3rem, 6vw, 4.5rem); }
.preiskopf .vorspann { margin: 22px auto 0; max-width: 60ch; }
.umschalter, .module__schalter { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--grau-1); }
.preiskopf .umschalter { margin-top: 44px; }
.umschalter button, .module__schalter button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; min-width: 200px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--tinte-3); font: 500 .9375rem/1 var(--f); cursor: pointer; transition: background-color .2s, color .2s; }
.umschalter button:hover, .module__schalter button:hover { color: var(--tinte); }
.umschalter button .ic, .module__schalter button .ic { width: 1rem; height: 1rem; }
.umschalter button[aria-selected="true"], .module__schalter button[aria-selected="true"] { background: #fff; color: var(--tinte); box-shadow: 0 1px 2px rgba(13, 13, 13, .08), 0 4px 12px -4px rgba(13, 13, 13, .16); }
.preiskarten { display: grid; gap: 16px; margin: 32px auto 0; text-align: left; }
.preiskarten--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1080px; }
.preiskarten--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.karte { display: flex; flex-direction: column; padding: 22px 22px 24px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); }
.karte--betont { box-shadow: inset 0 0 0 1px var(--linie-2); }
.karte__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
.karte__kopf h2 { font: 500 1.375rem/1.2 var(--f); letter-spacing: -.02em; }
.karte__kopf h2 span { color: var(--tinte-3); }
.karte__satz { margin: 8px 0 0; color: var(--tinte-2); font-size: .9375rem; line-height: 1.5; min-height: 4.5em; }
.karte__preis { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; margin-top: 18px; padding-top: 18px; min-height: 3.9rem; border-top: 1px solid var(--linie); }
.karte__preis b { font: 500 2.5rem/1 var(--f); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.karte__preis span { color: var(--tinte-3); font-size: .9375rem; }
.karte__preis--text { align-items: center; }
.karte__preis--text b { font-size: 1.375rem; letter-spacing: -.02em; }
.karte__jahr { margin: 6px 0 0; min-height: 2.6em; font-size: .875rem; color: var(--tinte-3); }
.karte > .knopf { width: 100%; margin-top: 20px; }
.karte__inhalt { margin-top: 24px; }
.karte__inhalt > p { margin: 0 0 12px; font-weight: 500; }
.karte__fuss { margin: 0; align-self: end; padding-top: 22px; font-size: .8125rem; line-height: 1.5; color: var(--tinte-3); }
.karte__fuss a { color: var(--tinte); }
.tarif__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: .9375rem; }
.tarif__liste li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; line-height: 1.45; }
.tarif__liste .ic { width: 1.05rem; height: 1.05rem; margin-top: 2px; stroke-width: 2; }
.rechner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); max-width: 1080px; margin-inline: auto; }
.rechner__eingabe { padding: clamp(24px, 3.5vw, 40px); }
.rechner__ergebnis { position: relative; padding: clamp(24px, 3.5vw, 40px); background: var(--grau-1); display: flex; flex-direction: column; }
.regler { padding: 20px 0; border-bottom: 1px solid var(--linie); }
.regler:first-of-type { border-top: 1px solid var(--linie); }
.regler__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.regler label { font-weight: 500; }
.regler__wert input { width: 4.4rem; height: 40px; padding: 0 8px; border: 1px solid var(--linie-2); border-radius: 10px; font: 500 1.1rem/1 var(--f); text-align: center; color: var(--tinte); font-variant-numeric: tabular-nums; background: #fff; }
.regler__wert input:focus { border-color: var(--tinte); outline: none; }
.regler p { margin: 4px 0 12px; font-size: .875rem; color: var(--tinte-3); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(to right, var(--tinte) 0 var(--anteil, 0%), var(--grau-2) var(--anteil, 0%) 100%); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: var(--grau-2); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--tinte); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; border: 1px solid var(--linie-2); box-shadow: 0 2px 6px rgba(13, 13, 13, .2); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1px solid var(--linie-2); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--tinte); }
.rechner__summe { font: 500 clamp(2.4rem, 4vw, 3.25rem)/1 var(--f); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rechner__monat { margin-top: 8px; color: var(--tinte-2); }
.rechner__weg { margin-top: 16px; }
.rechner__posten { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--linie-2); font-size: .9375rem; }
.rechner__posten li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linie); }
.rechner__posten li span:last-child { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.rechner__hinweis { margin-top: auto; padding-top: 18px; font-size: .8125rem; color: var(--tinte-3); }
.rechner__ergebnis .knopf { margin-top: 18px; }
.tabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .9375rem; }
.tabelle caption { text-align: left; font-size: .875rem; color: var(--tinte-3); caption-side: bottom; padding-top: 12px; }
.tabelle th, .tabelle td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.tabelle thead th { font: 500 .8125rem/1.2 var(--f); color: var(--tinte-3); border-bottom: 1px solid var(--linie-2); }
.tabelle td.r, .tabelle th.r { text-align: right; }
.tabelle tbody th { font-weight: 500; }
.tabelle .ist-markiert td, .tabelle .ist-markiert th { background: var(--grau-1); }
.staffel-wrap { position: relative; overflow-x: auto; }
.staffel-auf { max-width: 880px; margin: 32px auto 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.staffel-auf summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font: 500 1rem/1.3 var(--f); cursor: pointer; }
.staffel-auf summary::-webkit-details-marker { display: none; }
.staffel-auf summary .ic { transition: transform .25s var(--weich); }
.staffel-auf[open] summary .ic { transform: rotate(45deg); }
.staffel-auf .staffel-wrap { padding-bottom: 20px; }
.vergleich-wrap { position: relative; margin: 32px auto 0; max-width: 820px; }
.vergleich { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
.vergleich thead th, .vergleich thead td { position: sticky; top: 64px; z-index: 2; padding: 14px 8px 16px; background: var(--grund); vertical-align: bottom; }
.vergleich thead th { width: 16%; text-align: center; font-weight: 400; }
.vergleich thead th span { display: block; margin-bottom: 10px; font: 400 1.0625rem/1 var(--f); color: var(--tinte); }
.vergleich thead .knopf { min-height: 32px; padding: 0 14px; font-size: .8125rem; }
.vergleich tbody th { padding: 16px 16px 16px 0; text-align: left; font-weight: 500; color: var(--tinte); border-bottom: 1px solid var(--linie); }
.vergleich tbody td { padding: 16px 8px; text-align: center; color: var(--tinte); border-bottom: 1px solid var(--linie); }
.vergleich tbody td.links { text-align: left; }
.vergleich tbody td .ic { display: inline-block; width: 1.05rem; height: 1.05rem; stroke-width: 2; vertical-align: -3px; }
.vergleich__gruppe th { padding: 44px 0 16px !important; border-bottom: 0 !important; font: 400 1.375rem/1.1 var(--f) !important; letter-spacing: -.02em; }
.mit-ic { display: none; }
.faq { max-width: 820px; border-top: 1px solid var(--linie); }
.faq--mitte { margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary { list-style: none; display: grid; grid-template-columns: 1fr 28px; gap: 16px; align-items: center; padding: 20px 0; font: 500 1.0625rem/1.4 var(--f); cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { width: 1.1rem; height: 1.1rem; transition: transform .25s var(--weich); justify-self: end; }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq details > div { padding: 0 44px 22px 0; color: var(--tinte-2); max-width: 70ch; }

/* ---------- Formulare ---------- */
.kontakt { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; align-items: start; max-width: 1080px; margin-inline: auto; }
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.feld { display: grid; gap: 6px; align-self: start; align-content: start; }
.feld--breit { grid-column: 1 / -1; }
.feld label, .feld legend { font-weight: 500; font-size: .875rem; }
.feld .pflicht { color: var(--frist); }
.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld input[type="url"], .feld input[type="password"], .feld input[type="number"], .feld select, .feld textarea { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--linie-2); border-radius: 12px; background: #fff; color: var(--tinte); font: 400 1rem/1.4 var(--f); transition: border-color .15s, box-shadow .15s; }
.feld textarea { min-height: 150px; resize: vertical; }
.feld input::placeholder, .feld textarea::placeholder { color: #8A8A8A; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: rgba(13, 13, 13, .35); }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--tinte); box-shadow: 0 0 0 3px rgba(13, 13, 13, .08); }
.feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"], .feld select[aria-invalid="true"] { border-color: var(--frist); }
.feld input[aria-invalid="true"]:focus, .feld textarea[aria-invalid="true"]:focus { border-color: var(--frist); box-shadow: 0 0 0 3px var(--frist-hauch); }
.feld__fehler { font-size: .8125rem; color: var(--frist); }
.kasten { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: .9375rem; line-height: 1.45; cursor: pointer; }
.kasten input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--tinte); }
.rueckruf { display: none; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 18px 16px; padding: 18px; border-radius: 14px; background: var(--grau-1); }
.rueckruf.ist-offen { display: grid; }
.formular__fuss { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.formular__meldung { font-size: .9375rem; margin: 0; }
.formular__meldung.ist-fehler { color: var(--frist); }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.eingangsbeleg { display: none; padding: clamp(28px, 4vw, 48px); border-radius: 20px; background: var(--grau-1); text-align: center; }
.eingangsbeleg.ist-offen { display: block; }
.eingangsbeleg .stempel { margin-bottom: 18px; }
.direkt { padding: 8px 24px; border-radius: 16px; background: var(--grau-1); }
.direkt > div { padding: 16px 0; border-bottom: 1px solid var(--linie); }
.direkt > div:last-child { border-bottom: 0; }
.direkt__k { font: 400 .8125rem/1 var(--f); color: var(--tinte-3); margin: 0 0 8px; }
.direkt p { margin: 0; }
.direkt a { font-weight: 500; }
.ablauf { display: grid; gap: 8px; margin: 0; padding-left: 1.3em; }
.ablauf li::marker { color: var(--tinte-3); font-variant-numeric: tabular-nums; }

/* ---------- Rechtstexte ---------- */
.recht { max-width: 72ch; margin-inline: auto; overflow-wrap: anywhere; }
.recht h2 { font: 500 1.375rem/1.25 var(--f); letter-spacing: -.02em; margin: 44px 0 12px; padding-top: 20px; border-top: 1px solid var(--linie); }
.recht h3 { font: 500 1.0625rem/1.3 var(--f); margin: 26px 0 8px; }
.recht p, .recht li { color: var(--tinte-2); }
.recht address { font-style: normal; color: var(--tinte-2); margin-bottom: 1em; }

/* ---------- Anmeldung ---------- */
.anmeldung { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(32px, 5vw, 72px); min-height: calc(100svh - 64px); padding-block: clamp(12px, 2vw, 24px) clamp(40px, 5vw, 64px); }
.anmeldung__links { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-block: 32px; }
.anmeldung__titel { font: 700 clamp(2.4rem, 4.2vw, 3.6rem)/1.02 var(--f); letter-spacing: -.045em; max-width: 12ch; hyphens: manual; -webkit-hyphens: manual; }
.anmeldung__unter { margin: 16px 0 0; font-size: 1.0625rem; color: var(--tinte-2); }
.anmeldekarte { width: 100%; max-width: 420px; margin-top: 32px; padding: 26px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie), 0 12px 32px -18px rgba(13, 13, 13, .2); text-align: left; }
.anmeldekarte form { display: grid; gap: 14px; }
.anmeldekarte .knopf { width: 100%; min-height: 46px; }
.anmeldekarte__oder { display: flex; align-items: center; gap: 12px; margin: 16px 0; font-size: .8125rem; color: var(--tinte-3); }
.anmeldekarte__oder::before, .anmeldekarte__oder::after { content: ""; flex: 1; height: 1px; background: var(--linie); }
.pw { position: relative; }
.pw input { padding-right: 48px !important; }
.pw button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 999px; background: none; color: var(--tinte-3); cursor: pointer; display: grid; place-items: center; }
.pw button:hover { background: var(--grau-1); color: var(--tinte); }
.anmeldekarte__zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .875rem; }
.anmeldekarte__zeile a, .anmeldekarte__zeile button { color: var(--tinte-2); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: .25em; }
.anmeldekarte__zeile a:hover, .anmeldekarte__zeile button:hover { color: var(--tinte); }
.anmeldekarte__fehler { display: none; padding: 10px 14px; border-radius: 12px; background: var(--frist-hauch); color: var(--frist); font-size: .9rem; }
.anmeldekarte__fehler.ist-offen { display: block; }
.anmeldekarte__info { font-size: .9rem; color: var(--tinte-2); margin: 0; }
.anmeldekarte__klein { margin-top: 16px; font-size: .78rem; color: var(--tinte-3); text-align: center; }
.anmeldung__neu { margin-top: 22px; font-size: .9375rem; color: var(--tinte-2); }
.anmeldung__neu a { font-weight: 500; color: var(--tinte); }
.anmeldung__rechts { position: relative; border-radius: 20px; overflow: hidden; background: var(--pastell-a); display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 3.4vw, 48px); }
.anmeldung__rechts .eingang__kopf, .anmeldung__rechts .eingang__zeile { grid-template-columns: 40px minmax(0, 1fr) auto; }
.anmeldung__rechts .eingang__zeit, .anmeldung__rechts .eingang__kopf span:nth-child(2), .anmeldung__rechts .stempel__d { display: none; }
.anmeldung__zitat { margin-top: 26px; color: var(--tinte); font: 500 1.25rem/1.4 var(--f); letter-spacing: -.02em; max-width: 34ch; }
.anmeldung__zitat small { display: block; margin-top: 6px; font-size: .8125rem; font-weight: 400; color: var(--tinte-2); }

/* ---------- Angebotsgenerator ---------- */
.angebot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.angebot__formular { position: sticky; top: 88px; padding: 26px; border-radius: 20px; background: var(--grau-1); }
.angebot__formular h2 { font: 500 1.25rem/1.2 var(--f); letter-spacing: -.02em; margin-bottom: 18px; }
.angebot__aktionen { display: grid; gap: 10px; margin-top: 22px; }
.angebot__blatt-wrap { min-width: 0; padding-bottom: 8px; }
.angebot__kurz { display: none; margin: 0 0 14px; padding: 14px 16px; border-radius: 14px; background: var(--grau-1); font-size: 1rem; line-height: 1.45; }
.angebot__kurz b { font-weight: 600; }
.angebot__erfolg { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--m-bieter-hauch); color: var(--m-bieter); font-size: .9rem; }
.angebot__erfolg.ist-offen { display: block; }
.angebot__erfolg a { color: inherit; font-weight: 600; }
.angebot__gross { display: none; padding: 16px; border-radius: 12px; background: #fff; color: var(--tinte); font-size: .9375rem; }
.angebot__gross.ist-offen { display: block; }
.blatt-a4 { width: 794px; max-width: none; min-width: 0; margin-inline: auto; padding: 56px 60px 48px; background: #fff; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--linie), 0 24px 60px -30px rgba(13, 13, 13, .3); font-size: 13.5px; line-height: 1.5; color: #1a1a1a; }
.blatt-a4 .marke__logo { height: 38px; }
/* Vorschau Seite 1 im Aufbau des IT-LV-Angebots (Server-PDF: website/angebot/dvs_angebot.py) */
.blatt-a4 { font-size: 12.6px; line-height: 1.42; color: #1D1A24; }
.bl-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.bl-absender { font-size: 11.2px; color: #4A4A4A; text-align: right; line-height: 1.4; }
.bl-absender b { color: #0D0D0D; font-size: 12.4px; font-weight: 600; }
.bl-strich { height: 5px; margin: 16px 0 18px; border-radius: 4px; background: var(--unterstrich); }
.bl-ruecksende { display: inline-block; padding-bottom: 3px; margin-bottom: 8px; border-bottom: 1px solid #e2e2e2; font-size: 9.4px; color: #8a8a8a; }
.bl-empf { font-size: 13.6px; line-height: 1.5; min-height: 82px; }
.bl-empf b { font-weight: 600; }
.bl-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0 18px; font-size: 12px; }
.bl-meta span { display: block; font-size: 10.6px; color: #8a8a8a; }
.bl-meta b { font-weight: 400; font-variant-numeric: tabular-nums; }
.bl-titel { margin: 0 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: #0D0D0D; }
.blatt-a4 p { margin: 0 0 8px; }
.bl-det { width: 100%; margin: 6px 0 10px; border-collapse: collapse; }
.bl-det td { padding: 3px 10px 3px 0; vertical-align: top; font-size: 11.8px; border-bottom: 1px solid #efedf5; }
.bl-det td.dk { width: 118px; color: #0D0D0D; font-weight: 600; }
.bl-preis { margin: 8px 0 8px; padding: 12px 16px; border: 1px solid #E7E1F7; border-radius: 10px; background: #F6F3FF; }
.bl-preis table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.bl-preis td { padding: 2px 0; }
.bl-preis td.r { text-align: right; white-space: nowrap; }
.bl-preis tr.rab td { font-size: 11.6px; color: #6E6E6E; }
.bl-preis tr.sum td { padding-top: 8px; border-top: 1px solid #D8D0F0; font-size: 16.5px; font-weight: 700; color: #0D0D0D; }
.blatt-a4 .bl-ps { margin: 10px 0 0; font-size: 11.2px; color: #6E6E6E; }
.blatt-a4 .bl-klein { font-size: 11.2px; color: #4A4A4A; }
.blatt-a4 .bl-name { margin: 8px 0 0; font-size: 14.5px; font-weight: 600; color: #0D0D0D; }
.blatt-a4 .bl-rolle { font-size: 12px; color: #6E6E6E; }
.blatt-a4 .bl-fein { font-size: 10px; color: #8a8a8a; }
.blatt-a4 .bl-seite2 { margin: 16px 0 0; padding: 10px 14px; border: 1px dashed #D8D0F0; border-radius: 10px; font-size: 11.6px; color: #6A2CF0; text-align: center; }
.bl-fuss { margin-top: 22px; padding-top: 10px; border-top: 1px solid #ececec; font-size: 8.6px; line-height: 1.55; color: #8a8a8a; text-align: center; }


/* ---------- Über uns und Karriere (Aufbau nach govradar.net, 06.10.2026) ---------- */
.foto { margin: 0; }
.foto img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 20px; }
.foto figcaption { margin-top: 10px; font-size: .8125rem; color: var(--tinte-3); }
.erzaehlung { max-width: 820px; margin-inline: auto; text-align: center; }
.erzaehlung .vorspann { margin: 18px auto 0; }
.anspruch { max-width: 900px; margin-inline: auto; text-align: center; }
.anspruch .titel-2 { margin-bottom: 18px; }
.anspruch__satz { margin: 0 auto 18px; max-width: 24ch; font: 600 clamp(1.8rem, 3.6vw, 2.9rem)/1.12 var(--f); letter-spacing: -.035em; text-wrap: balance; }
.anspruch .vorspann { margin: 0 auto 18px; }
.anspruch--band { padding: clamp(32px, 5vw, 64px) clamp(20px, 5vw, 64px); border-radius: 20px; background: var(--pastell-a); }
.anspruch--band .anspruch__satz { margin-bottom: 0; }
.gruender { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: start; max-width: 1040px; margin-inline: auto; }
.gruender__fotos { display: grid; gap: 14px; }   /* zwei Fotos wie auf IT-LV (06.10.2026) */
.gruender__bild { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 25%; border-radius: 20px; }
.gruender__rolle { margin: 4px 0 16px; color: var(--tinte-3); }
.gruender__text p { color: var(--tinte); }
.gruender__zertifikate { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; padding: 0; list-style: none; }
.gruender__zertifikate li { padding: 6px 12px; border-radius: 999px; background: var(--grau-1); font-size: .8125rem; font-weight: 500; }
.werte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.werte li, .vorteile li { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 16px; background: var(--grau-1); }
.werte .ic, .vorteile .ic { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--weiss); color: var(--violett); stroke-width: 1.8; margin-bottom: 6px; }
.werte b, .vorteile b { font: 500 1.0625rem/1.3 var(--f); letter-spacing: -.01em; }
.werte span, .vorteile span { font-size: .9375rem; line-height: 1.5; color: var(--tinte-2); }
.vorteile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.mitglieder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.mitglieder a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 20px; border-radius: 16px; background: var(--weiss); box-shadow: inset 0 0 0 1px var(--linie); color: var(--tinte); text-decoration: none; transition: box-shadow .2s; }
.mitglieder a:hover { box-shadow: inset 0 0 0 1px var(--linie-2), 0 10px 24px -16px rgba(13, 13, 13, .3); }
.mitglieder__logo { display: flex; align-items: center; height: 48px; margin-bottom: 12px; }
.mitglieder__logo img { width: auto; max-width: 100%; max-height: 40px; }
.mitglieder b { font-weight: 500; }
.mitglieder span:last-child { font-size: .875rem; color: var(--tinte-3); }
.eckdaten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.eckdaten li { padding: 26px; border-radius: 16px; background: var(--grau-1); }
.eckdaten b { display: block; font: 600 clamp(1.8rem, 3vw, 2.4rem)/1.05 var(--f); letter-spacing: -.035em; }
.eckdaten span { display: block; margin-top: 8px; font-size: .9375rem; color: var(--tinte-2); }
.stellen { max-width: 900px; margin: 0 auto; padding: 0; list-style: none; border-top: 1px solid var(--linie); }
.stellen a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 4px 16px; align-items: center; padding: 18px 8px; border-bottom: 1px solid var(--linie); color: var(--tinte); text-decoration: none; }
.stellen a:hover { background: var(--grau-1); }
.stellen__titel { font: 500 1.125rem/1.3 var(--f); letter-spacing: -.01em; }
.stellen__daten { grid-row: 2; font-size: .875rem; color: var(--tinte-3); }
.stellen .ic { grid-column: 2; grid-row: 1 / span 2; width: 1.1rem; height: 1.1rem; stroke-width: 2; color: var(--tinte-3); }
.schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.schritte li { counter-increment: schritt; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 16px; background: var(--weiss); box-shadow: inset 0 0 0 1px var(--linie); }
.schritte li::before { content: counter(schritt); display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 6px; border-radius: 999px; background: var(--tinte); color: #fff; font: 600 .875rem/1 var(--f); font-variant-numeric: tabular-nums; }
.schritte b { font: 500 1.0625rem/1.3 var(--f); }
.schritte span { font-size: .9375rem; line-height: 1.5; color: var(--tinte-2); }
.ansprech { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 28px; align-items: center; max-width: 760px; margin-inline: auto; padding: 24px; border-radius: 20px; background: var(--grau-1); }
.ansprech img { width: 160px; height: 200px; object-fit: cover; border-radius: 14px; }
.ansprech .titel-3 { margin-bottom: 10px; }
.ansprech p { margin: 0 0 8px; }
@media (max-width: 1100px) {
  .werte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mitglieder, .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .gruender { grid-template-columns: minmax(0, 1fr); }
  .gruender__fotos { grid-template-columns: 1fr 1fr; max-width: 560px; }
  .vorteile, .eckdaten { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .werte, .mitglieder, .schritte { grid-template-columns: minmax(0, 1fr); }
  .ansprech { grid-template-columns: minmax(0, 1fr); }
}

/* Stellenanzeige */
.stelle__meta { margin: 0 0 10px; font-size: .9375rem; color: var(--tinte-3); }
.stelle__pitch { max-width: 62ch; margin: 18px auto 0; font: 400 clamp(1.125rem, 1.6vw, 1.3rem)/1.5 var(--f); letter-spacing: -.01em; color: var(--tinte-2); }
.stelle__antwort { margin: 12px 0 0; font-size: .8125rem; color: var(--tinte-3); }
.stelle__unter { margin: 20px 0 10px; font: 500 .9375rem/1.3 var(--f); color: var(--tinte-2); }
.stelle__text p { margin: 0 0 12px; }
.stelle__liste--vorteile b { font-weight: 500; }
.stelle__daten { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.stelle__daten li { padding: 6px 12px; border-radius: 999px; background: var(--grau-1); font-size: .875rem; font-weight: 500; }
.stelle { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 64px); align-items: start; max-width: 1080px; margin-inline: auto; }
.stelle__text h2 { margin: 36px 0 14px; }
.stelle__text h2:first-child { margin-top: 0; }
.stelle__liste { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.stelle__liste li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; line-height: 1.55; }
.stelle__liste .ic { width: 1.1rem; height: 1.1rem; margin-top: 4px; stroke-width: 2.2; color: var(--violett); }
.stelle__karte { position: sticky; top: 88px; padding: 24px; border-radius: 20px; background: var(--grau-1); }
.stelle__karte dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0 0 20px; font-size: .9375rem; }
.stelle__karte dt { color: var(--tinte-3); }
.stelle__karte dd { margin: 0; font-weight: 500; }
.stelle__karte .knopf { width: 100%; }
.stelle__person { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--linie); font-size: .875rem; color: var(--tinte-2); }
.stelle__person img { width: 56px; height: 56px; object-fit: cover; object-position: top; border-radius: 999px; }
.stelle__person p { margin: 0; }
.stelle__person b { color: var(--tinte); font-weight: 500; }
@media (max-width: 860px) {
  .stelle { grid-template-columns: minmax(0, 1fr); }
  .stelle__karte { position: static; }
}

/* Bewerbungsformular (06.10.2026, Vorbild karriere.govradar.net, auf der Seite statt im Overlay) */
.bewerben { max-width: 860px; margin-inline: auto; padding: clamp(24px, 4vw, 44px); border-radius: 20px; background: var(--grau-1); }
.bewerben > .titel-2 { margin-bottom: 10px; }
.bewerben > .vorspann { margin: 0 0 24px; color: var(--tinte-2); }
.bewerben .formular input:not([type="checkbox"]):not([type="file"]), .bewerben .formular textarea { background: var(--weiss); }
.datei label .klein { display: block; margin-top: 2px; font-weight: 400; color: var(--tinte-3); }
.datei input[type="file"] { width: 100%; padding: 10px; border: 1px dashed var(--linie-2); border-radius: 12px; background: var(--weiss); font: inherit; font-size: .9375rem; color: var(--tinte-2); cursor: pointer; }
.datei input[type="file"]:hover { border-color: var(--tinte-3); }
.datei input[type="file"][aria-invalid="true"] { border-color: var(--frist); }
.datei input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--tinte); color: #fff; font: 500 .875rem/1 var(--f); cursor: pointer; }
.bewerben .eingangsbeleg { background: var(--weiss); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Breiten ---------- */
@media (max-width: 1100px) {
  .mega__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 8px; padding-block: 18px 12px; }
  .mega__eintrag { padding: 7px 8px; }
  .mega__ki { grid-column: 1 / -1; }
  .mega__ki .mega__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; }
  .nav { position: static; transform: none; margin-left: 24px; }
  .preiskarten--3 { grid-template-columns: 1fr; max-width: 560px; }
  .preiskarten--2 { grid-template-columns: 1fr; max-width: 560px; }
  .karte__satz { min-height: 0; }
}
@media (max-width: 1000px) {
  .lauf { grid-template-columns: minmax(0, 1fr); }
  .lauf__liste, .lauf__buehne { position: static; }
  .zweier, .seitenkopf--beispiel { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .zweier--umgekehrt > :first-child { order: 0; }
  .rahmenkarten--3, .bildkarten, .gruppe__liste, .weiter { grid-template-columns: 1fr 1fr; }
  .kontakt, .angebot { grid-template-columns: 1fr; gap: 40px; }
  .angebot__formular { position: static; }
  .rechner { grid-template-columns: 1fr; }
  .fuss__raster { grid-template-columns: 1fr 1fr; }
  .fuss__marke { grid-column: 1 / -1; }
  .anmeldung { grid-template-columns: 1fr; }
  .anmeldung__rechts { display: none; }
  .deko { display: none; }
}
@media (max-width: 860px) {
  .nav, .kopf__rechts .knopf, .mega, .blende { display: none; }
  .kopf__menue { display: grid; }
  .vergleich-wrap { overflow-x: auto; }
  .vergleich { min-width: 680px; }
  .vergleich thead th, .vergleich thead td { top: 0; }
  .vergleich tbody th, .vergleich thead td { position: sticky; left: 0; z-index: 1; background: var(--grund); }
  .vergleich thead td { z-index: 3; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .kopf__anmelden { height: 34px; padding: 0 14px; font-size: .875rem; }
  .held__titel { font-size: clamp(2.2rem, 10.2vw, 2.75rem); letter-spacing: -.04em; }
  .rahmenkarten, .rahmenkarten--3, .bildkarten, .gruppe__liste, .weiter { grid-template-columns: 1fr; }
  .band { flex-direction: column; align-items: flex-start; }
  .karussell__spur { grid-auto-columns: 86%; }
  .graukarte { min-height: 420px; }
  .eingang { --zeile: 68px; }
  .eingang__kopf, .eingang__zeile { grid-template-columns: 34px minmax(0, 1fr) auto; padding: 0 14px; gap: 0 10px; }
  .eingang__zeit, .eingang__kopf span:nth-child(2) { display: none; }
  .eingang__vorgang { grid-template-columns: minmax(0, 1fr); }
  .eingang__vorgang .ic, .eingang__stempel .stempel__d { display: none; }
  .akte__kopf { padding: 14px 14px 0; }
  .akte__titel { font-size: 1.05rem; }
  .fenster__fuss { padding: 10px 14px; flex-direction: column; gap: 2px; }
  .lauf__ansicht .fenster { min-height: 0; }
  .formular, .rueckruf { grid-template-columns: 1fr; }
  .fuss__raster { grid-template-columns: 1fr; }
  .umschalter, .module__schalter { display: flex; width: 100%; }
  .umschalter button, .module__schalter button { flex: 1; min-width: 0 !important; padding: 0 10px; }
  .blase { max-width: 100%; }
  .anmeldekarte { padding: 22px 18px; }
  .pastell { min-height: 0; padding: 20px; }
}
@media (max-width: 600px) { .angebot__kurz { display: block; } }
@media (min-width: 1001px) { .lauf { min-height: calc(100vh + 120vh); } }
@media (max-width: 860px) { .marke__logo { height: 36px; } }
.seitenkopf .seitenkopf--beispiel .pfad { justify-content: flex-start; }
.deko--links { left: -40px; top: 118px; }
.deko--rechts { right: -36px; top: 270px; transform: rotate(11deg); }
/* Deko nur, wo sie ganz neben das Fenster passt: Sterne ab 1240 px, schräge Etiketten ab 1380 px */
@media (min-width: 1380px) { .deko--links { left: -150px; top: 150px; } .deko--rechts { right: -140px; top: 300px; } }
@media (max-width: 1379px) { .deko--etikett { display: none; } }
@media (max-width: 1239px) { .deko { display: none; } }

/* Landingpage digitale-vergabestelle.de (06.10.2026): Module als Kacheln, schlichter Fuß */
.lp-module { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.lp-module a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 24px; border-radius: 16px; background: var(--grau-1); color: var(--tinte); text-decoration: none; transition: background .2s var(--weich); }
.lp-module a:hover, .lp-module a:focus-visible { background: var(--grau-2); }
.lp-module .ic { width: 24px; height: 24px; color: var(--violett); }
.lp-module b { font: 500 1.125rem/1.3 var(--f); letter-spacing: -.01em; }
.lp-module span { font-size: .9375rem; line-height: 1.55; color: var(--tinte-2); }
.lp-rolle { max-width: 640px; margin: 32px auto 0; text-align: center; font-size: .9375rem; line-height: 1.6; color: var(--tinte-2); }
.lp-fuss { padding: 28px 0 40px; border-top: 1px solid var(--linie); font-size: .875rem; color: var(--tinte-2); }
.lp-fuss .huelle { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.lp-fuss a { color: inherit; }

/* ---------- Bestellung (Checkout wie bei IT-LV, 06.10.2026) ---------- */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kasse-abschnitt { padding-top: 0; }
.kasse { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.kasse__haupt { display: grid; gap: 16px; min-width: 0; }
.kasse__schritte { display: flex; gap: 8px; margin: 0 0 4px; padding: 0; list-style: none; flex-wrap: wrap; }
.kasse__schritte li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--grau-1); color: var(--tinte-3); font-size: .875rem; font-weight: 500; }
.kasse__schritte li span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--weiss); font-size: .8rem; }
.kasse__schritte li.ist-aktiv { background: var(--tinte); color: #fff; }
.kasse__schritte li.ist-aktiv span { color: var(--tinte); }
.kasse__schritte li.ist-fertig { color: var(--tinte); }
.kasse__schritte li.ist-fertig span { background: var(--m-bieter); color: #fff; }
.kasse__karte { padding: clamp(20px, 3vw, 28px); border-radius: 20px; background: var(--grau-1); }
.kasse__karte h2 { font: 500 1.25rem/1.2 var(--f); letter-spacing: -.02em; margin-bottom: 18px; }
.kasse__karte .kasse__zwischen { margin-top: 28px; }
.kasse__karte.ist-zu { opacity: .55; }
.kasse__text { margin: 0 0 16px; line-height: 1.55; }
.feld__zusatz { font-weight: 400; color: var(--tinte-3); }
.feld__hilfe { font-size: .8125rem; color: var(--tinte-3); }
.kasse__aktion { margin-top: 22px; }
.kasse__code { display: flex; gap: 10px; flex-wrap: wrap; }
.kasse__code input { width: 11ch; min-height: 46px; padding: 0 14px; border: 1px solid var(--linie-2); border-radius: 12px; background: #fff; font: 600 1.25rem/1 var(--f); letter-spacing: .25em; }
.kasse__code input:focus { outline: none; border-color: var(--tinte); box-shadow: 0 0 0 3px rgba(13, 13, 13, .08); }
.kasse__nebenwege { display: flex; gap: 18px; margin: 14px 0 0; }
.kasse__link { padding: 0; border: 0; background: none; color: var(--tinte); font: 500 .875rem var(--f); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kasse__zahlarten { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; border: 0; }
.kasse__zahlart { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie-2); cursor: pointer; }
.kasse__zahlart:has(input:checked) { box-shadow: inset 0 0 0 2px var(--tinte); }
.kasse__zahlart input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--tinte); }
.kasse__zahlart b { display: block; font-weight: 600; }
.kasse__zahlart small { display: block; margin-top: 2px; font-size: .875rem; color: var(--tinte-3); line-height: 1.45; }
.kasse__zahlart.ist-aus { opacity: .5; cursor: not-allowed; }
.kasse__zustimmung { display: grid; gap: 12px; margin-bottom: 16px; }
.kasse__recht { margin: 0 0 16px; font-size: .875rem; line-height: 1.5; color: var(--tinte-3); }
.kasse__paypal { margin-top: 4px; }
.kasse__fertig .stempel { margin-bottom: 14px; }
.kasse__weiter { margin: 0 0 16px; padding-left: 20px; line-height: 1.6; }
.kasse__summe { position: sticky; top: 88px; padding: 26px; border-radius: 20px; background: #fff; box-shadow: var(--schatten-fenster); }
.kasse__summe h2 { font: 500 1.125rem/1.2 var(--f); letter-spacing: -.01em; margin-bottom: 14px; color: var(--tinte-3); }
.kasse__tarif { margin: 0; font: 600 1.375rem/1.25 var(--f); letter-spacing: -.02em; }
.kasse__unter { margin: 4px 0 16px; font-size: .9375rem; color: var(--tinte-3); }
.kasse__tabelle { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: .9375rem; }
.kasse__tabelle td { padding: 8px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.kasse__tabelle td + td { text-align: right; white-space: nowrap; padding-left: 12px; }
.kasse__tabelle tr.ist-summe td { border-bottom: 0; padding-top: 12px; font-weight: 700; font-size: 1.0625rem; }
.kasse__tabelle tr.ist-klein td { color: var(--tinte-3); font-size: .875rem; }
/* Staffel-Ersparnis bei mehreren Lizenzen (gruen, dezent hervorgehoben). */
.kasse__tabelle tr.ist-spar td { color: var(--ok); font-weight: 600; padding-top: 10px; }
.kasse__tabelle tr.ist-spar td:first-child { position: relative; }
.kasse__gross { padding: 14px; border-radius: 12px; background: var(--grau-1); margin-bottom: 16px; font-size: .9375rem; }
.kasse__inkl { margin-bottom: 16px; }
.kasse__fein { margin: 0 0 8px; font-size: .8125rem; line-height: 1.5; color: var(--tinte-3); }
@media (max-width: 900px) {
  .kasse { grid-template-columns: 1fr; }
  .kasse__summe { position: static; order: -1; }
  .kasse__inkl, .kasse__summe .kasse__fein:first-of-type { display: none; }
}

/* ---------- AGB und AVV (06.10.2026) ---------- */
.recht__laden { margin-top: 22px; }
.recht__stand { margin-top: 36px; color: var(--tinte-3); }
.recht ul { padding-left: 20px; }
.recht__tabelle { overflow-x: auto; margin: 6px 0 18px; }
.recht__tabelle table { width: 100%; border-collapse: collapse; font-size: .9rem; line-height: 1.5; }
.recht__tabelle th, .recht__tabelle td { padding: 10px 12px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.recht__tabelle th { font-weight: 600; background: var(--grau-1); }
.recht__tabelle th, .recht__tabelle td { overflow-wrap: normal; word-break: normal; hyphens: auto; }
.recht__tabelle td:first-child, .recht__tabelle th:first-child { width: 24%; min-width: 9em; font-weight: 500; }
@media (max-width: 640px) {
  .recht__tabelle thead { display: none; }
  .recht__tabelle tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--linie); }
  .recht__tabelle td { display: block; width: auto; min-width: 0; padding: 2px 0; border: 0; }
  .recht__tabelle td:first-child { width: auto; font-weight: 600; padding-bottom: 4px; }
  .recht__tabelle td + td::before { content: attr(data-label) ": "; color: var(--tinte-3); font-weight: 500; }
}

/* ---------- Preise: alle Tarife nebeneinander (06.10.2026) ---------- */
.preiskarten--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--breite);
  grid-template-rows: auto auto auto auto auto auto 1fr; align-items: stretch; }
.preiskarten--4 > .karte { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; }
.preiskarten--4 .karte__preis:not(.karte__preis--text) b { font-size: clamp(2.2rem, 3vw, 2.75rem); }
.preis-demo { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; max-width: var(--breite); margin: 16px auto 0; padding: 18px 22px; border-radius: 16px; background: var(--grau-1); text-align: left; }
.preis-demo p { margin: 0; }
@media (max-width: 1100px) { .preiskarten--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; } .preis-demo { max-width: 820px; } }
@media (max-width: 700px) { .preiskarten--4 { grid-template-columns: 1fr; max-width: 560px; } .preis-demo { max-width: 560px; } }
.preiskarten--4 .karte__kopf h2 span { display: block; }
.preiskarten--4 .karte__kopf { align-items: flex-start; min-height: 4.6rem; }

/* Kanaele im Fuss (08.10.2026) */
.fuss__sozial{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px}
.fuss__sozial a{display:inline-flex;align-items:center;gap:8px;color:inherit;opacity:.75;text-decoration:none;font-size:14px}
.fuss__sozial a:hover,.fuss__sozial a:focus-visible{opacity:1}
.fuss__sozial a[href*="youtube"]:hover svg{color:#ff0000}
.fuss__sozial a[href*="linkedin"]:hover svg{color:#0a66c2}

/* Zahlungsmöglichkeiten im Fuß (10.10.2026) */
.fuss__zahlung{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.fuss__zahlung .zb{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;min-width:52px;padding:0 10px;border-radius:5px;font:700 13px/1 Arial,Helvetica,sans-serif;letter-spacing:.02em;box-sizing:border-box}
.zb-paypal{background:#fff}.zb-pp1{color:#003087;font-style:italic}.zb-pp2{color:#009cde;font-style:italic}
.zb-visa{background:#1a1f71;color:#fff;font-style:italic;letter-spacing:.06em}
.zb-mc{background:#fff;position:relative;min-width:52px}.zb-mc1,.zb-mc2{width:18px;height:18px;border-radius:50%;display:block}.zb-mc1{background:#eb001b}.zb-mc2{background:#f79e1b;margin-left:-8px;mix-blend-mode:multiply}
.zb-amex{background:#2e77bc;color:#fff}
.zb-rechnung{background:transparent;color:inherit;border:1px solid currentColor;font-weight:600;opacity:.85}
.zb-unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:600px){.fuss__zahlung{justify-content:flex-start}}

.fuss .fuss__zahlung{display:flex!important;flex-direction:row;grid-template-columns:none;width:auto}
.fuss .fuss__zahlung li{width:auto;margin:0;flex:0 0 auto}
.fuss .fuss__zahlung .zb-paypal{gap:0}
.fuss .fuss__zahlung .zb-rechnung{opacity:1;color:#e6e6ee;border-color:rgba(255,255,255,.45)}

/* 29.10.2026 (Menü v2): Bildspalte mit Foto-Karten im Mega-Menü. Neutrale Themen, keine Erfolgszahlen. */
.mega__bildspalte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; align-content: start; padding-top: 20px; }
.mega__bildspalte--eins { grid-template-columns: minmax(0, 1fr); }
.mega__fotokarte { display: grid; gap: 2px; padding: 6px; border-radius: 14px; color: var(--tinte); text-decoration: none; }
.mega__fotokarte:hover { background: var(--grau-1); color: var(--tinte); }
.mega__fotokarte img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; margin-bottom: 8px; }
.mega__fototitel { font-size: .9375rem; font-weight: 500; line-height: 1.3; }
.mega__fotosatz { font-size: .8125rem; line-height: 1.35; color: var(--tinte-3); }
.mega__ctakachel { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--grau-1); color: var(--tinte); font-size: .9375rem; font-weight: 500; text-decoration: none; }
.mega__ctakachel:hover { text-decoration: underline; }
.mega__ctakachel .ic { width: 1rem; height: 1rem; stroke-width: 2; }
@media (max-width: 1100px) { .mega__bildspalte { display: none; } }
/* ---------- Registrieren (Selbst-Registrierung) ---------- */
.formular__schritt { display: contents; }
.formular__schritt[hidden] { display: none; }
.feld__hinweis { font-size: .8125rem; color: var(--tinte-2); }
.formular__klein { grid-column: 1 / -1; margin: 4px 0 0; font-size: .8125rem; line-height: 1.5; color: var(--tinte-2); }
.formular__meldung.ist-ok { color: var(--m-planung); }

/* 29.10.2026: Webinar-Termine */
.termine { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.termin { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 20px; align-items: start; padding: 20px 22px; border-radius: 16px; background: var(--weiss); box-shadow: inset 0 0 0 1px var(--linie); }
.termin__datum { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; background: var(--grau-1); text-align: center; }
.termin__monat { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-3); }
.termin__tag { font: 600 1.75rem/1.1 var(--f); color: var(--tinte); font-variant-numeric: tabular-nums; }
.termin__zeit { font-size: .75rem; color: var(--tinte-3); }
.termin h3 { margin: 0; font: 500 1.0625rem/1.35 var(--f); letter-spacing: -.01em; text-wrap: balance; }
.termin p { margin: 6px 0 0; font-size: .9375rem; color: var(--tinte-2); max-width: 62ch; }
.termin .termin__wann { margin-top: 4px; font-size: .875rem; color: var(--tinte-3); }
.termin .termin__info { margin-top: 8px; font-size: .8125rem; color: var(--tinte-3); }
.termin__knoepfe { display: grid; gap: 10px; justify-items: end; }
.termine__fuss { margin-top: 20px; font-size: .9375rem; color: var(--tinte-2); }
@media (max-width: 720px) {
  .termin { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 18px; }
  .termin__zeit { display: none; }
  .termin__knoepfe { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; align-items: center; gap: 18px; }
}
/* ---------- Siegel (Vertrauen durch Sicherheit) ---------- */
.siegel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.siegel__eintrag { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 26px 18px; border-radius: 16px; background: var(--grau-1); }
.siegel__ic { width: 40px; height: 40px; color: var(--tinte); }
.siegel__eintrag b { font: 600 1.0625rem/1.25 var(--f); letter-spacing: -.01em; }
.siegel__eintrag span { font-size: .85rem; line-height: 1.4; color: var(--tinte-2); }
@media (max-width: 860px) { .siegel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .siegel { grid-template-columns: minmax(0, 1fr); } }
.siegel--sechs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .siegel--sechs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .siegel--sechs { grid-template-columns: minmax(0, 1fr); } }

/* 01.11.2026: Kopf mit sechs Menüpunkten (Preise neu). Kein Umbruch ab 921 px, engere Abstände, bis 1240 px Menü neben dem Logo
   statt mittig, sonst berührt es die Knöpfe rechts. Gemessen 870 bis 1920 px. */
.nav { gap: 2px; }
.nav__punkt { padding: 0 8px; }
@media (min-width: 921px) { .nav__punkt { white-space: nowrap; } }
@media (max-width: 1240px) { .nav { position: static; transform: none; margin-left: 24px; } }
/* 01.11.2026: Service als Klappmenü (sechs Punkte mit Pfeil). Unter 961 px Handy-Menü statt Leiste, sonst läuft der Kopf über. */
@media (max-width: 960px) { .nav, .kopf__rechts .knopf, .mega, .blende { display: none; } .kopf__menue { display: grid; } }

/* 01.11.2026 (AF-7): acht Menüpunkte (Für wen, Plattform neu). Menü immer neben dem Logo statt mittig, Reiter enger,
   Kopfzeile bis 1320 px breit (Seiteninhalt bleibt 1200 px), unter 1220 px Handy-Menü. Gemessen 1220 bis 1920 px. */
.nav { position: static; transform: none; margin-left: 20px; gap: 0; }
.nav__punkt { padding: 0 6px; }
.kopf__zeile { max-width: 1320px; }
@media (max-width: 1219px) { .nav, .kopf__rechts .knopf, .mega, .blende { display: none; } .kopf__menue { display: grid; } }
.mega__aufgaben { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block: 20px 0; }
.mega__aufgaben > span { margin: 0 6px 0 10px; font: 500 .8125rem/1 var(--f); color: var(--tinte-3); }
.mega__aufgaben a { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--grau-1); color: var(--tinte); font: 500 .875rem/1 var(--f); text-decoration: none; }
.mega__aufgaben a:hover { background: var(--grau-2); color: var(--tinte); }
.mega__aufgaben .ic { width: 1rem; height: 1rem; stroke-width: 2; }
.mega__aufgaben + .mega__raster { padding-top: 12px; }
/* 01.11.2026 (AF-7): Klappmenüs so breit wie die Kopfzeile, Inhalt bündig mit dem Logo. */
.kopf .mega > .huelle { max-width: 1320px; }

/* 02.11.2026 (Ruben, Vorbild bidfix.ai): Kopf über die ganze Breite. Logo am linken Rand, Menü mit Abstand dahinter,
   Login und Registrieren am rechten Rand; mit der Fensterbreite bekommen die Reiter mehr Luft. Klappmenüs bleiben 1320. */
.kopf__zeile { max-width: none; padding-inline: clamp(16px, 2.2vw, 32px); }
@media (min-width: 1360px) { .nav { margin-left: 40px; } .nav__punkt { padding: 0 10px; } .kopf__rechts { gap: 10px; } }
@media (min-width: 1600px) { .nav { margin-left: 64px; } .nav__punkt { padding: 0 14px; } .kopf__rechts { gap: 12px; } }

/* 02.11.2026 (Ruben, Vorbild IT-LV): schmale dunkle Leiste über dem Kopf, Links rechtsbündig mit Trennpunkten.
   Sie sitzt im Kopf; der Kopf klebt 32 px höher, so wandert die Leiste beim Scrollen weg und die Kopfzeile bleibt.
   Unter 769 px ausgeblendet (dort führt das Handy-Menü). */
.oberleiste { background: #17171f; }
.oberleiste__innen { display: flex; justify-content: flex-end; align-items: center; min-height: 32px;
  padding-inline: clamp(16px, 2.2vw, 32px); }
.oberleiste a { color: rgba(255, 255, 255, .66); font-size: .75rem; font-weight: 500; line-height: 1; text-decoration: none;
  white-space: nowrap; }
.oberleiste a:hover, .oberleiste a:focus-visible { color: #fff; }
.oberleiste a:not(:first-child)::before { content: "·"; margin: 0 12px; color: rgba(255, 255, 255, .4); font-weight: 700; }
@media (min-width: 769px) {
  .kopf:has(> .oberleiste) { top: -32px; }
  /* 04.11.2026: Menue 32px tiefer ansetzen, sonst ueberlappt es die Oberleiste. */
  .kopf:has(> .oberleiste) .mega { top: 100%; max-height: calc(100vh - 96px); }   /* 05.11.2026 (Ruben): keine Luecke zum Mega-Menue (vorher +32px zu tief) */
}
@media (max-width: 768px) { .oberleiste { display: none; } }