/* Wenn ein Haus frei wird · Seite. Farben, Schrift und Radius nur aus /marke/farben/tokens.css (Richtung C · Leitsystem-Klarheit).
   Lesbar ab 60: Fließtext 19 px, Zeilen höchstens ~68 Zeichen, Klickflächen ab 48 px. Ruhig: keine Animation außer Fokus und Hover. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--marke-grund); color: var(--marke-text); font: 400 19px/1.6 var(--marke-lauf); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--marke-haupt); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--marke-haupt-800); }
:focus-visible { outline: 3px solid var(--marke-haupt); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--marke-kopf); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 3.6vw + .8rem, 3.1rem); }
h2 { font-size: clamp(1.55rem, 1.6vw + 1rem, 2rem); }
h3 { font-size: 1.3rem; }
p { margin: 0; }
.leise { color: var(--marke-text-2); }
.sprung { position: absolute; left: -9999px; }
.sprung:focus { left: 16px; top: 12px; z-index: 20; background: var(--marke-grund); padding: 8px 12px; }

/* Rahmen */
.kopf { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--marke-grund) 94%, transparent); border-bottom: 1px solid var(--marke-linie); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.kopf-innen, .fuss-innen { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.kopf-innen { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo img { height: 43px; width: auto; }
.kopf nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.kopf nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; font-weight: 600; font-size: 17px; color: var(--marke-text); text-decoration: none; border-radius: var(--marke-radius); }
.kopf nav a:hover { background: var(--marke-flaeche); }
.kopf nav a[aria-current="page"] { color: var(--marke-haupt); box-shadow: inset 0 -3px 0 var(--marke-haupt); border-radius: 0; }
main { display: block; }

.fuss { margin-top: 96px; background: var(--marke-dunkel); color: var(--marke-auf-dunkel); padding: 56px 0 40px; }
.fuss a { color: var(--marke-auf-dunkel); }
.fuss-innen { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px 64px; }
.offenlegung h2 { font-size: 1.3rem; margin-bottom: 12px; }
.offenlegung p + p { margin-top: 12px; }
.fuss nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fuss nav a { display: inline-flex; min-height: 44px; align-items: center; }
.fuss-hinweis { grid-column: 1 / -1; font-size: 16px; color: #C9D0CC; border-top: 1px solid rgba(247, 248, 245, .18); padding-top: 20px; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: var(--marke-radius); background: var(--marke-haupt); color: var(--marke-auf-haupt); font: 700 19px/1 var(--marke-lauf); text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; }
.knopf:hover { background: var(--marke-haupt-700); color: var(--marke-auf-haupt); }
.knopf-hell { background: var(--marke-grund); color: var(--marke-haupt); }
.knopf-hell:hover { background: var(--marke-akzent); color: var(--marke-haupt-800); }
.knopf[disabled] { opacity: .55; cursor: not-allowed; }

/* Schild-Elemente (Leitsystem) */
.frist { display: inline-block; font: 600 15px/1 var(--marke-mono); border: 2px solid var(--marke-text); padding: 6px 9px; border-radius: var(--marke-radius); white-space: nowrap; background: var(--marke-grund); }

/* Start: Hero */
.held { max-width: 1200px; margin: 0 auto; padding: 56px 24px 48px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.held-text { display: grid; gap: 20px; justify-items: start; }
.held-unter { font-size: 21px; color: var(--marke-text-2); max-width: 34ch; }
.held-bild { margin: 0; }
.held-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--marke-radius); }

/* Start: Wegweiser als Schilder */
.wegweiser, .fristen, .artikel-reihe, .bank { max-width: 1200px; margin: 0 auto; padding: 48px 24px; }
.wegweiser h2, .fristen h2, .artikel-reihe h2 { margin-bottom: 24px; }
.schilder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.schild { position: relative; display: grid; gap: 4px; min-height: 96px; padding: 18px 64px 18px 22px; background: var(--marke-haupt); color: var(--marke-auf-haupt); text-decoration: none; border-radius: var(--marke-radius);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%); }
.schild:hover { background: var(--marke-haupt-700); color: var(--marke-auf-haupt); }
.schild:focus-visible { outline-offset: 4px; }
.schild-ziel { font: 700 22px/1.2 var(--marke-kopf); }
.schild-unter { font-size: 17px; color: #E3EDE7; }

/* Start: Fristen als Leiste */
.fristen-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; border-top: 3px solid var(--marke-text); padding-top: 24px; }
.fristen-liste li { display: grid; gap: 12px; align-content: start; }
.fristen-liste p { font-size: 18px; }
.fristen > .leise { margin-top: 28px; max-width: 62ch; }

/* Start: Artikel */
.reihe { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.artikel-gross, .artikel-klein a, .thema-artikel a { display: grid; gap: 8px; color: var(--marke-text); text-decoration: none; }
.artikel-gross img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--marke-radius); margin-bottom: 8px; }
.artikel-titel { font: 700 1.3rem/1.25 var(--marke-kopf); color: var(--marke-haupt); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.artikel-text { color: var(--marke-text-2); font-size: 18px; }
.artikel-klein { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.artikel-klein li { border-top: 1px solid var(--marke-linie); padding: 24px 0; }
.artikel-klein li:first-child { border-top: 0; padding-top: 0; }

/* Start: Druck-Band (einziger Farbwechsel der Seite) */
.druck { background: var(--marke-haupt); color: var(--marke-auf-haupt); margin: 48px 0; }
.druck { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; padding: 56px max(24px, calc((100vw - 1152px) / 2)); }
.druck-text { display: grid; gap: 16px; justify-items: start; max-width: 52ch; }
.druck-bild { width: 220px; transform: rotate(-2deg); box-shadow: 0 24px 48px -24px rgba(25, 28, 27, .55); border-radius: 2px; }

/* Start: Bank */
.bank { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.bank img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--marke-radius); }
.bank h2 { margin-bottom: 16px; }
.bank p { max-width: 52ch; }

/* Themen und Artikel */
.thema, .artikel, .vergleich { max-width: 1200px; margin: 0 auto; padding: 40px 24px 0; }
.pfad { font-size: 16px; color: var(--marke-text-2); margin-bottom: 12px; }
.pfad a { color: var(--marke-text-2); }
.thema-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 48px; align-items: center; margin-bottom: 40px; }
.thema-kopf figure { margin: 0; }
.thema-kopf img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--marke-radius); }
.thema-unter { font-size: 21px; color: var(--marke-text-2); margin-top: 16px; max-width: 40ch; }
.artikel-kopf { max-width: 760px; margin-bottom: 28px; }
.stand { font-size: 16px; color: var(--marke-text-2); margin-top: 12px; }
.artikel-bild { margin: 0 0 32px; max-width: 760px; }
.artikel-bild img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--marke-radius); }

.lesetext { max-width: 760px; }
.lesetext > * + * { margin-top: 20px; }
.lesetext h2 { margin-top: 48px; }
.lesetext h3 { margin-top: 32px; }
.lesetext ul, .lesetext ol { padding-left: 1.3em; }
.lesetext li + li { margin-top: 8px; }
.kasten { background: var(--marke-flaeche); border-left: 6px solid var(--marke-haupt); padding: 20px 24px; border-radius: var(--marke-radius); }
.tabelle { overflow-x: auto; }
.tabelle table { border-collapse: collapse; width: 100%; font-size: 18px; }
.tabelle th, .tabelle td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--marke-linie); }
.tabelle th { font-weight: 700; border-bottom: 2px solid var(--marke-text); }
.frist-kasten { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; border-top: 3px solid var(--marke-text); padding-top: 16px; }

.thema-artikel { max-width: 760px; margin-top: 56px; }
.thema-artikel h2 { margin-bottom: 16px; }
.thema-artikel ul { list-style: none; margin: 0; padding: 0; }
.thema-artikel li { border-top: 1px solid var(--marke-linie); padding: 20px 0; }

.weiter { max-width: 760px; margin-top: 56px; background: var(--marke-akzent); padding: 28px; border-radius: var(--marke-radius); display: grid; gap: 12px; justify-items: start; }
.weiter h2 { font-size: 1.45rem; }

/* Formular */
.formular { margin-top: 32px; display: grid; gap: 20px; max-width: 620px; }
.formular-hinweis { background: var(--marke-flaeche); padding: 12px 16px; border-radius: var(--marke-radius); font-size: 17px; }
.feld { display: grid; gap: 6px; }
.feld label { font-weight: 700; }
.optional { font-weight: 400; color: var(--marke-text-2); }
input, select { font: inherit; font-size: 19px; min-height: 52px; padding: 10px 14px; border: 2px solid var(--marke-text-2); border-radius: var(--marke-radius); background: #FFFFFF; color: var(--marke-text); width: 100%; }
input:focus-visible, select:focus-visible { outline: 3px solid var(--marke-haupt); outline-offset: 2px; }
.einwilligungen { border: 2px solid var(--marke-linie); border-radius: var(--marke-radius); padding: 20px; display: grid; gap: 16px; margin: 0; }
.einwilligungen legend { font-weight: 700; padding: 0 8px; }
.haken { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; }
.haken input { width: 26px; height: 26px; min-height: 0; margin: 3px 0 0; accent-color: var(--marke-haupt); }
.spaeter { color: var(--marke-text-2); font-size: 18px; }
.offenlegung-klein { font-size: 17px; color: var(--marke-text-2); }
.nachweis { padding-left: 1.2em; }
.nachweis li { font-size: 17px; }

/* Handy */
@media (max-width: 1080px) {
  .kopf nav a { padding: 0 8px; font-size: 16px; }
}
@media (max-width: 920px) {
  .kopf-innen { height: auto; padding-top: 12px; padding-bottom: 4px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .kopf { position: static; }
  .kopf nav { width: 100%; }
  .kopf nav ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 4px; }
  .kopf nav a { width: 100%; padding: 0 6px; }
  .held, .reihe, .bank, .thema-kopf, .fuss-innen { grid-template-columns: minmax(0, 1fr); }
  .held { padding-top: 32px; gap: 28px; }
  .fristen-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .druck { grid-template-columns: minmax(0, 1fr); }
  .druck-bild { width: 180px; }
  .bank img { order: 2; }
}
@media (max-width: 600px) {
  body { font-size: 18px; }
  .schilder, .fristen-liste { grid-template-columns: minmax(0, 1fr); }
  .held-unter, .thema-unter { font-size: 19px; }
  .frist-kasten { grid-template-columns: minmax(0, 1fr); }
  .logo img { height: 36px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
@media print { .kopf, .fuss nav, .weiter { display: none; } body { background: #fff; } }

/* Hamburg-Vergleich */
.vergleich-oben { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: start; margin-top: 8px; }
.formular-eng { margin-top: 0; max-width: none; }
.formular-eng h2, .rechner h2 { font-size: 1.6rem; }
.rechner { background: var(--marke-flaeche); border-radius: var(--marke-radius); padding: 28px; display: grid; gap: 16px; position: sticky; top: 96px; }
.rechner-form { display: grid; gap: 16px; }
.rechner input[type="number"] { max-width: 180px; }
.rechner-ergebnis { font-size: 1.3rem; border-top: 2px solid var(--marke-text); padding-top: 16px; }
.rechner-ergebnis strong { display: block; font: 700 1.9rem/1.2 var(--marke-kopf); color: var(--marke-haupt); }
.betriebe-block { margin-top: 64px; max-width: 980px; display: grid; gap: 16px; }
.provision { border-left: 6px solid var(--marke-haupt); padding-left: 16px; }
.betriebe { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.betrieb { border: 2px solid var(--marke-linie); border-radius: var(--marke-radius); padding: 24px; display: grid; gap: 12px; align-content: start; }
.betrieb h3 { font-size: 1.35rem; }
.betrieb .eigener { background: var(--marke-akzent); padding: 6px 12px; border-radius: var(--marke-radius); justify-self: start; font-weight: 700; font-size: 17px; }
.betrieb dl { margin: 0; display: grid; gap: 8px; }
.betrieb dl div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; }
.betrieb dt { color: var(--marke-text-2); }
.betrieb dd { margin: 0; font-weight: 600; }
.vergleich .lesetext { margin-top: 64px; }
@media (max-width: 920px) {
  .vergleich-oben, .betriebe { grid-template-columns: minmax(0, 1fr); }
  .rechner { position: static; }
}
@media (max-width: 600px) {
  .kopf nav li:last-child { grid-column: 1 / -1; }
  .betrieb dl div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
.vergleich .artikel-kopf { max-width: 980px; }
.offen-zuerst { max-width: 980px; margin-bottom: 40px; }