/* nebenkostenabrechnung.novahausverwaltung.de - eigenständiges Design, keine externen Ressourcen */

:root {
  --ink: #0b1220;
  --ink-2: #101a30;
  --paper: #f7f8fb;
  --card: #ffffff;
  --text: #1a2439;
  --muted: #5b6478;
  --line: #e5e9f2;
  --accent: #10c98f;
  --accent-2: #38bdf8;
  --accent-ink: #065f46;
  --danger: #f43f5e;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(11, 18, 32, 0.08);
  --maxw: 1120px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

/* Zwei Textfassungen für dieselbe Aussage. Auf dem Handy entscheidet die Zahl
   der Zeilen darüber, ob Knopf und Hochladefeld noch sichtbar sind, also gibt
   es dort die kurze Fassung. Nur für Inline-Elemente gedacht. */
.nur-schmal { display: none; }
@media (max-width: 620px) {
  .nur-breit { display: none; }
  .nur-schmal { display: inline; }
}

body {
  margin: 0;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 18, 32, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.brand {
  display: flex; align-items: baseline; gap: 2px;
  color: #fff; text-decoration: none; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em;
}
.brand .dot { color: var(--accent); }
.brand small { color: #8d99b2; font-weight: 500; font-size: 0.72rem; margin-left: 8px; letter-spacing: 0; }
.nav a {
  color: #c6cede; text-decoration: none; font-size: 0.92rem; margin-left: 22px; font-weight: 500;
}
.nav a:hover { color: #fff; }
.nav .cta {
  background: var(--accent); color: #04281c; padding: 8px 16px; border-radius: 999px; font-weight: 700;
}
.nav .cta:hover { filter: brightness(1.08); color: #04281c; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    radial-gradient(800px 400px at 15% -10%, rgba(16, 201, 143, 0.22), transparent 60%),
    radial-gradient(700px 420px at 85% 0%, rgba(56, 189, 248, 0.18), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #fff;
  padding: 44px 0 88px;
  overflow: hidden;
}
.hero .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(16, 201, 143, 0.14); color: #7ff0cf;
  border: 1px solid rgba(16, 201, 143, 0.35);
  font-size: 0.8rem; font-weight: 600; padding: 6px 14px; border-radius: 999px; margin-bottom: 14px;
}
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(16, 201, 143, 0.2); }
.hero h1 {
  font-size: clamp(2rem, 3.9vw, 2.85rem);
  line-height: 1.06; letter-spacing: -0.03em; margin: 0 0 14px; font-weight: 800;
}
.hero h1 .grad {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.claim-zeile { color: #7ff0cf; font-weight: 700; font-size: 1rem; max-width: 46ch; margin: 0 0 12px; }
.hero p.sub { color: #aeb9cf; font-size: 1.13rem; max-width: 46ch; margin: 26px 0 0; }
.hero-ctas { display: flex; gap: 18px; flex-wrap: wrap; margin: 18px 0 0; }

/* Unter dem Hochladefeld ist "Wie funktioniert das?" keine Handlungsalternative
   mehr, sondern eine Nebenauskunft. Als umrandeter Knopf sass er direkt unter
   dem hellen Feld und las sich wie ein zweiter, gleichrangiger Aufruf - genau
   die geteilte Aufmerksamkeit, wegen der er auf schmalen Schirmen schon vorher
   ausgeblendet wurde. Als Textlink ordnet er sich unter. */
.hero-ctas .btn-ghost {
  border: 0; padding: 0; border-radius: 0; background: none;
  color: #9fb0c9; font-weight: 600; font-size: 0.95rem;
  text-decoration: underline; text-underline-offset: 5px;
  text-decoration-color: rgba(159, 176, 201, 0.4);
}
.hero-ctas .btn-ghost:hover { color: #dbe3f0; text-decoration-color: currentColor; }

/* Hochladefeld im Hero. Die Regeln stehen hier und nicht in tool.css, weil die
   Startseite nur style.css laedt: tool.css wiegt 45 KB und besteht fast
   vollstaendig aus Schritten, die es hier nicht gibt.

   Hell auf dunklem Hero, weil das Feld die einzige Handlung der Seite ist und
   sich vom Verlauf abheben muss - derselbe Grund, aus dem es im Werkzeug
   Akzentfarbe und einen Knopf im Feld traegt statt eines leeren Rahmens. */
.start-dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 2px dashed var(--accent); border-radius: var(--radius);
  background: linear-gradient(180deg, #f1fdf8, #ffffff 70%);
  color: var(--text);
  padding: 20px 22px; margin: 16px 0 0; cursor: pointer; text-align: center;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 10px 30px rgba(4, 12, 24, 0.35);
  max-width: 46ch;
}
.start-dropzone:hover { border-color: #0d9d70; box-shadow: 0 14px 36px rgba(16, 201, 143, 0.28); }
.start-dropzone.drag { border-style: solid; background: #ecfdf6; }
.start-dropzone strong { font-size: 1.1rem; }
.start-dropzone .dz-sub { color: var(--muted); font-size: 0.86rem; max-width: 40ch; }
.start-dropzone .dz-icon {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: #d9f7ec; color: #0d9d70; margin-bottom: 4px;
}
.start-dropzone .dz-icon svg { width: 21px; height: 21px; }
.start-dropzone .dz-knopf {
  margin-top: 10px; padding: 11px 22px; border-radius: 12px; font-weight: 700; font-size: 0.98rem;
  background: linear-gradient(90deg, var(--accent), #0ea5e9); color: #04281c;
}
.start-dropzone:hover .dz-knopf { filter: brightness(1.07); }

/* Zwischen Auswahl und Seitenwechsel liegt ein Schreibvorgang in IndexedDB.
   Kurz, aber nicht null - ohne Rueckmeldung sieht das Feld in dieser Zeit aus,
   als haette der Klick nichts bewirkt. */
.start-dropzone .dz-laedt { display: none; margin-top: 12px; font-weight: 600; color: var(--accent-ink); }
.start-dropzone.laedt .dz-knopf { display: none; }
.start-dropzone.laedt .dz-laedt { display: block; }
.btn {
  display: inline-block; text-decoration: none; font-weight: 700; border-radius: 12px;
  padding: 14px 24px; font-size: 1rem; transition: transform 0.15s ease, filter 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(90deg, var(--accent), #0ea5e9); color: #04281c; }
.btn-primary:hover { filter: brightness(1.07); }
.btn-ghost { color: #dbe3f0; border: 1px solid rgba(255, 255, 255, 0.25); }
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.5); }
.hero-note { color: #7f8ba3; font-size: 0.85rem; margin-top: 18px; }

/* Ergebnis-Vorschau-Karte */
.preview {
  position: relative;
  background: var(--card); color: var(--text);
  border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  padding: 26px; transform: rotate(1.2deg);
  border: 1px solid var(--line);
}
/* Die Karte zeigt erfundene Zahlen. Auf dem Handy steht sie weit oben und darf
   nicht mit einem echten Ergebnis verwechselt werden. */
.preview-label {
  position: absolute; top: 14px; right: 16px;
  background: #eef1f7; color: var(--muted);
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 3px 9px; border-radius: 999px;
}
.preview h3 { margin: 0 0 4px; font-size: 1rem; padding-right: 76px; }
.preview .meta { color: var(--muted); font-size: 0.78rem; margin-bottom: 16px; }
.preview table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.preview td { padding: 7px 4px; border-bottom: 1px solid var(--line); }
.preview td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.tag { display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.tag.ok { background: #d9f7ec; color: var(--accent-ink); }
.tag.raus { background: #ffe4ea; color: #9f1239; text-decoration: line-through; }
.preview .saldo td { border-bottom: none; font-weight: 800; padding-top: 12px; font-size: 0.95rem; }
.preview .saldo .betrag { color: var(--accent-ink); }

/* ---------- Sections ---------- */
section { padding: 84px 0; }
.section-head { max-width: 640px; margin-bottom: 48px; }
/* Eigene Zeilenhöhe: Die 1.6 des Fließtextes zieht eine zweizeilige
   Abschnitts-Überschrift sichtbar auseinander. */
.section-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.02em; margin: 0 0 12px; line-height: 1.2; }
.section-head p { color: var(--muted); margin: 0; font-size: 1.05rem; }
.kicker { color: #0d9d70; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; display: block; margin-bottom: 10px; }

/* Schritte */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow);
}
.step .num {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #06281e; font-weight: 800; font-size: 1.05rem; margin-bottom: 18px;
}
.step h3 { margin: 0 0 8px; font-size: 1.08rem; }
.step p { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* Raus-Chips */
.raus-section { background: var(--ink); color: #fff; }
.raus-section .section-head p { color: #aeb9cf; }
/* Gegenüberstellung "fliegt raus" / "bleibt drin".
   Als Pillen-Wolke belegte jeder Eintrag praktisch eine eigene Zeile, weil die
   Bezeichnungen lang sind; zwei Listen brauchen dieselbe Aussage in einem
   Bruchteil der Höhe und tragen ihre Bedeutung in der Überschrift. */
/* `auto-fit` statt fester Spaltenzahl: nebeneinander, solange jede Spalte
   mindestens 260 px bekommt, sonst untereinander. Spart einen Haltepunkt und
   trifft auch Tablet-Zwischenbreiten richtig. */
.gegenueber { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: start; }
.gg-karte { border: 1px solid; border-radius: var(--radius); padding: 22px 24px; }
.gg-raus { border-color: rgba(244, 63, 94, 0.4); background: rgba(244, 63, 94, 0.08); }
.gg-rein { border-color: rgba(16, 201, 143, 0.4); background: rgba(16, 201, 143, 0.08); }
.gg-karte h3 {
  margin: 0 0 14px; font-size: 1.05rem; letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.gg-raus h3 { color: #fecdd3; }
.gg-rein h3 { color: #a7f3d0; }
.gg-karte h3 span { font-size: 0.74rem; font-weight: 600; color: #8d99b2; letter-spacing: 0.04em; }
.gg-karte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.gg-karte li { position: relative; padding-left: 26px; font-size: 0.93rem; color: #dbe3f0; line-height: 1.35; }
.gg-karte li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
/* Fachlicher Zusatz, der die Kurzbezeichnung präzisiert (etwa der Stichtag bei
   Kabel-TV). Gedämpft, damit die Liste beim Überfliegen ruhig bleibt. */
.gg-karte small { display: block; color: #8d99b2; font-size: 0.76rem; }
.gg-raus li::before { content: "✕"; color: var(--danger); }
.gg-rein li::before { content: "✓"; color: var(--accent); }
.raus-note { color: #7f8ba3; font-size: 0.85rem; margin-top: 26px; max-width: 70ch; }

/* Feature-Grid */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.feature .ico { font-size: 1.5rem; margin-bottom: 12px; display: block; }
.feature h3 { margin: 0 0 6px; font-size: 1rem; }
.feature p { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* Nova-Weiche */
.nova {
  background: linear-gradient(120deg, rgba(16, 201, 143, 0.1), rgba(56, 189, 248, 0.1));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 44px; display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.nova h2 { margin: 0 0 8px; font-size: 1.4rem; letter-spacing: -0.02em; }
.nova p { margin: 0; color: var(--muted); max-width: 56ch; }
.nova .btn-primary { white-space: nowrap; }

/* FAQ */
.faq details {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 24px; margin-bottom: 12px;
}
.faq summary { cursor: pointer; font-weight: 700; font-size: 1rem; list-style: none; position: relative; padding-right: 30px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 0; color: #0d9d70; font-size: 1.3rem; font-weight: 600; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); margin: 12px 0 0; font-size: 0.95rem; }

/* Footer */
.site-footer { background: var(--ink); color: #8d99b2; padding: 48px 0; font-size: 0.85rem; }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.site-footer a { color: #c6cede; text-decoration: none; margin-right: 18px; }
.site-footer a:hover { color: #fff; }
.disclaimer { max-width: 62ch; }

/* Rechtsseiten */
/* Wie bei `.tool`: nur oben/unten setzen, sonst fällt der seitliche Rand von
   `.wrap` weg und der Text steht auf dem Handy am Displayrand. */
.legal { padding-top: 64px; padding-bottom: 64px; max-width: 760px; margin: 0 auto; }
.legal h1 { letter-spacing: -0.02em; }
.legal h2 { margin-top: 40px; font-size: 1.2rem; }
.legal p, .legal li { color: #33415e; font-size: 0.97rem; }

@media (max-width: 900px) {
  /* `minmax(0, 1fr)` statt `1fr`: Eine Rasterspalte wird sonst nie schmaler als
     der breiteste unteilbare Inhalt ihrer Elemente. Die Tabelle der
     Vorschau-Karte liegt dicht an dieser Grenze; auf sehr schmalen Geräten
     bekäme die Seite sonst einen seitlichen Überstand. */
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .preview { transform: none; }
  .steps, .features { grid-template-columns: 1fr; }
  .nova { flex-direction: column; align-items: flex-start; }
  .nav a:not(.cta) { display: none; }
}

/* Vertrauenssignale direkt unter dem Haupt-CTA. Wer sensible Abrechnungs-
   unterlagen hochlädt, will vor dem Klick wissen, was damit passiert. */
.hero-trust { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 7px; max-width: 46ch; }
.hero-trust li { color: #aeb9cf; font-size: 0.88rem; padding-left: 22px; position: relative; }
.hero-trust li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* Abschluss-Aufruf am Seitenende, vor dem Nova-Angebot. */
.abschluss-cta { text-align: center; padding: 56px 0 8px; }
.abschluss-cta h2 { margin: 0 0 10px; letter-spacing: -0.02em; }
.abschluss-cta p { color: var(--muted, #55607a); margin: 0 0 24px; }

/* Schmale Schirme: Die Marke trägt den Zusatz "von Nova Hausverwaltung", der
   zusammen mit dem CTA nicht in eine 64-px-Zeile passt. Er brach um und lief
   unter den Knopf. Zusatz weg, Höhe flexibel, fester Abstand zum CTA. */
@media (max-width: 620px) {
  .site-header .wrap { height: auto; min-height: 56px; padding-top: 8px; padding-bottom: 8px; gap: 12px; }
  .brand { font-size: 1.05rem; flex-shrink: 0; }
  .brand small { display: none; }
  .nav { flex-shrink: 0; }
  .nav a { margin-left: 0; }
  .nav .cta { padding: 7px 14px; font-size: 0.85rem; white-space: nowrap; }
}

/* ---------- Handy: Knopf und Ergebnis-Vorschau nach oben ----------
   Vorher standen Anspruch, Claim und zwei Erklärabsätze über dem Knopf; auf
   einem 390er-Schirm war damit weder der Knopf noch die Vorschau im ersten
   Bild. `display: contents` löst den Text-Container auf, sodass alle Teile
   Geschwister im Hero-Raster sind und per `order` neu sortiert werden können:
   Anspruch → Kurz-Claim → Knopf → Vorschau → Erklärtexte. */
@media (max-width: 620px) {
  .hero { padding: 26px 0 40px; }
  .hero .wrap { gap: 20px; }
  .hero-text { display: contents; }

  /* Reihenfolge im aufgelösten Raster. */
  .badge { order: 1; justify-self: start; margin-bottom: 0; font-size: 0.74rem; padding: 5px 12px; }
  .hero h1 { order: 2; font-size: 1.72rem; margin-bottom: 0; }
  .hero p.claim-zeile { order: 3; margin: 0; font-size: 0.95rem; }
  .start-dropzone { order: 4; margin: 0; max-width: none; padding: 22px 16px; }
  .start-dropzone strong { font-size: 1.02rem; }
  .start-dropzone .dz-sub { font-size: 0.8rem; }
  .start-dropzone .dz-knopf { width: 100%; padding: 13px 18px; }
  .preview { order: 5; }
  .hero p.sub { order: 6; margin: 0; font-size: 1rem; }
  .hero-trust { order: 7; margin: 0; }

  /* Ein Knopf, volle Breite. Der zweite Knopf führte nur zum nächsten
     Abschnitt, den man durch Weiterscrollen ohnehin erreicht; auf dem Handy
     hätte er dem eigentlichen Aufruf nur die Aufmerksamkeit geteilt. */
  .hero-ctas { display: none; }

  .preview { padding: 18px 16px; }
  .preview .meta { font-size: 0.72rem; margin-bottom: 12px; }
  .preview table { font-size: 0.78rem; }
  .preview td { padding: 6px 2px; }
  .preview .saldo td { padding-top: 10px; font-size: 0.9rem; }

  /* Die Abschnittsabstände von 84 px sind für den Schreibtisch gedacht; auf dem
     Handy addieren sie sich zu langen leeren Strecken zwischen den Inhalten. */
  section { padding: 48px 0; }
  .section-head { margin-bottom: 28px; }
  .wrap { padding: 0 18px; }
  .step, .feature { padding: 22px; }
  .nova { padding: 26px; }
  /* Beide Spalten nebeneinander statt untereinander: Untereinander summierten
     sich die 15 Einträge zu über einer Bildschirmhöhe, obwohl die Aussage eine
     Gegenüberstellung ist - und die liest man nebeneinander ohnehin besser. */
  /* `minmax(0, …)`, weil eine Spalte sonst nicht unter die Breite ihres
     längsten Wortes geht ("Eigentümerversammlung") und die Karte auf sehr
     schmalen Geräten aus dem Bild läuft; die Worttrennung fängt das ab. */
  .gegenueber { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .gg-karte li { hyphens: auto; }
  .gg-karte { padding: 16px 14px; }
  .gg-karte h3 { font-size: 0.95rem; margin-bottom: 12px; gap: 0; }
  .gg-karte h3 span { font-size: 0.68rem; }
  .gg-karte ul { gap: 8px; }
  .gg-karte li { font-size: 0.82rem; padding-left: 19px; }
  .gg-karte small { font-size: 0.7rem; }
  .raus-note { margin-top: 20px; }
  .abschluss-cta { padding: 40px 0 8px; }
}

/* ---------- Cookie-Banner ----------
   Band am unteren Rand statt Vollbild-Overlay. Ein Overlay mit inset:0 legt
   sich über die ganze Seite, fängt Mausrad und Klicks ab und macht die Seite
   damit unbedienbar, bis jemand entscheidet. Die Einwilligung ist ohnehin
   erst nötig, wenn Analyse geladen wird; bis dahin darf man lesen. */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  display: flex; justify-content: center; padding: 16px 20px 20px;
  background: linear-gradient(180deg, transparent, rgba(6,10,20,0.75) 40%);
}
.cookie-karte {
  background: #131c2f; border: 1px solid #24304a; border-radius: 18px;
  padding: 26px 30px; max-width: 620px; width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.cookie-karte h2 { margin: 0 0 10px; font-size: 1.15rem; letter-spacing: -0.01em; }
.cookie-karte p { color: #aeb9cf; font-size: 0.9rem; line-height: 1.6; margin: 0 0 18px; }
/* Ein Kästchen je Zweck (Analyse, Werbung). Beide starten leer: Vorangekreuzt
   wäre keine Einwilligung, sondern ein Widerspruch dagegen. */
.cookie-zwecke { display: grid; gap: 12px; margin: 0 0 20px; }
.cookie-zweck {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  color: #aeb9cf; font-size: 0.86rem; line-height: 1.5;
}
.cookie-zweck input {
  flex: none; width: 17px; height: 17px; margin: 2px 0 0;
  accent-color: var(--accent); cursor: pointer;
}
.cookie-zweck strong { color: #e6edfa; font-weight: 600; }
.cookie-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }
.cookie-knoepfe .btn { flex: 1 1 160px; text-align: center; cursor: pointer; font-family: inherit; }
.cookie-fuss { font-size: 0.78rem; margin: 16px 0 0 !important; }
.cookie-fuss a { color: #7ff0cf; }
/* Bewusst KEIN `body.consent-offen { overflow: hidden }`: Das sperrte das
   Scrollen der gesamten Seite, solange der Banner offen war. */
/* Platz, damit das Banner-Band den Seitenfuß nicht dauerhaft verdeckt. */
body.consent-offen { padding-bottom: 190px; }
@media (min-width: 700px) { body.consent-offen { padding-bottom: 150px; } }

/* Für Screenreader da, für Augen nicht. Gebraucht dort, wo eine Beschriftung
   auf schmalen Schirmen keinen Platz hat, aber vorgelesen werden soll
   (Kopfzeile der Prüftabelle). */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}