/* =========================================================================
   Energiesparen leicht gemacht, Runde 2
   Gestaltung nach dem Auftritt der Stadt Paderborn.

   Grundlage: die angewandte Designsprache von paderborn.de und der
   Klima-Microsite paderborn.de/klima, dort insbesondere die bestehende
   Kampagnenseite „Energiesparen leicht gemacht". Gemessen am 06.08.2026.

   Übernommen: Source Sans als einzige Schrift, H2 in Versalien und Blau
   mit Linie darunter, H1 gemischt und ohne Versalien, Fließtext 16/28 in
   #444, durchgehend eckige Kanten, weiße Inhaltsplatte auf farbigem Grund,
   Navigation als rechte Spalte, Bildunterschriften auf grauer Leiste.
   ========================================================================= */

/* ---------- Schrift: Source Sans, lokal, keine fremde Anfrage ---------- */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(../fonts/SourceSans-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(../fonts/SourceSans-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Farben der Stadt, gemessen an paderborn.de */
  --blau:        #1874cd;   /* Akzent: Überschriften zweiter Ordnung, Links */
  --blau-dunkel: #134d88;   /* Flächen, Fußzeile */
  --blau-tief:   #0d5387;   /* Text auf hell, wenn Blau tragen muss */
  --blau-hell:   #cce7fa;   /* helle Fläche, Hinweiskasten */
  --gruen:       #699429;   /* Klimaschutz */
  --gruen-dunkel:#4f7020;
  --braun:       #bc540f;   /* Warnung, Vorsicht */
  --violett:     #8d0073;   /* selten, für Besonderes */
  --ink:         #333333;   /* Überschriften, aktive Navigation */
  --text:        #444444;   /* Fließtext */
  --grau:        #f0f0f0;   /* Bildunterschrift, ruhige Fläche */
  --grau-tief:   #e4e4e4;
  --linie:       #d5d5d5;
  --weiss:       #ffffff;

  --bahn: 78rem;
  --rand: clamp(1.25rem, 4vw, 3rem);

  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2.25rem; --s7: 3.5rem; --s8: 5rem;

  --schrift: 'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kurz: 160ms ease;

  color-scheme: light;
  accent-color: var(--blau);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
  -webkit-text-size-adjust: 100%;
}
/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt hier auch
   wirklich keine: weder weiches Scrollen noch Übergänge an Knöpfen, Links
   und Klappelementen. Genau das sagt die Barrierefreiheitserklärung zu. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  background: var(--blau);
  background-image: linear-gradient(160deg, #2f86dd 0%, #1874cd 45%, #134d88 100%);
  background-attachment: fixed;
}

::selection { background: var(--blau-hell); color: var(--ink); }
:root { scrollbar-color: var(--blau) var(--grau); }
input, textarea, select { caret-color: var(--blau); }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.auf-blau :focus-visible, .fuss :focus-visible { outline-color: var(--weiss); }

/* ---------- Typografie nach Stadtvorbild ---------- */
h1, h2, h3, h4 { font-family: var(--schrift); margin: 0 0 var(--s4); text-wrap: balance; }

h1 {
  font-size: clamp(1.75rem, 3.4vw, 2.25rem);   /* Stadt: 36 px */
  line-height: 1.06;
  font-weight: 400;
  color: var(--ink);
  padding-block: var(--s6) var(--s5);
  margin-bottom: var(--s5);
}

h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);    /* Stadt: 24 px */
  line-height: 1.25;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--blau);
  border-bottom: 1px solid var(--ink);
  padding-bottom: var(--s2);
  margin-bottom: var(--s5);
}
h2.gruen { color: var(--gruen-dunkel); }

h3 {
  font-size: 1.125rem;                          /* Stadt: 18 px */
  line-height: 1.35;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--s3);
}

h4 { font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: var(--s2); }

* + h2 { margin-top: var(--s7); }
* + h3 { margin-top: var(--s6); }

/* Lange deutsche Komposita wie „Berufs-Haftpflichtversicherung" sprengen auf
   320 Bildpunkten die Spalte. Trennen statt überlaufen lassen. */
p, li, td, th, dd, dt, h1, h2, h3, h4, figcaption, label, summary { overflow-wrap: break-word; hyphens: auto; }
p { margin: 0 0 var(--s5); max-width: 68ch; }
.gross { font-size: 1.125rem; line-height: 1.7; }
.klein { font-size: .9375rem; }
.gedaempft { color: #5c5c5c; }

a { color: var(--blau); text-underline-offset: .17em; }
a:hover { color: var(--blau-dunkel); }

ul, ol { margin: 0 0 var(--s5); padding-left: 1.35rem; }
li { margin-bottom: var(--s2); }
li:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; color: var(--ink); }
abbr[title] { text-decoration: underline dotted; cursor: help; }
hr { border: 0; border-top: 1px solid var(--linie); margin: var(--s6) 0; }

/* ---------- Gerüst: weiße Platte auf farbigem Grund ---------- */
.bahn { width: min(100% - 2 * var(--rand), var(--bahn)); margin-inline: auto; }

.platte {
  background: var(--weiss);
  width: min(100% - 2 * var(--rand), var(--bahn));
  margin-inline: auto;
}
.platte__innen { padding: 0 clamp(1.25rem, 3.5vw, 3.25rem) var(--s7); }

.springlink {
  position: absolute; left: 1rem; top: .5rem; z-index: 60;
  background: var(--ink); color: var(--weiss);
  padding: .7rem 1.1rem; text-decoration: none; font-weight: 600;
  transform: translateY(-160%); transition: transform var(--kurz);
}
.springlink:focus-visible { transform: translateY(0); }

/* ---------- Kopfleiste: Marken links und rechts, Navigation in der Mitte ---------- */
.kopf { padding-top: var(--s5); }
.kopf__innen {
  width: min(100% - 2 * var(--rand), var(--bahn));
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas:
    "klima stadt schrift"
    "nav   nav   nav";
  align-items: stretch;
  gap: var(--s4);
  row-gap: var(--s3);
}
.marke--klima, .marke--kampagne { grid-area: klima; }
.marke--stadt { grid-area: stadt; }
.wegweiser { grid-area: nav; }
.schriftgroesse { grid-area: schrift; justify-self: end; align-self: start; }
.marke {
  display: flex; align-items: center; justify-content: center;
  background: var(--weiss); padding: .6rem 1rem; text-decoration: none;
}
.marke img { display: block; }
.marke--klima img { height: 3.5rem; width: auto; }
/* Eigenes Kampagnenzeichen. Steht hier, bis die Stadt das Logo
   „Klimamanagement Paderborn" schriftlich freigibt. */
.marke--kampagne { padding: .5rem .9rem; }
.marke__zeichen { height: 3.25rem; width: auto; display: block; }
@media (max-width: 64rem) { .marke__zeichen { height: 2.75rem; } }
.marke--stadt img { height: 4.4rem; width: auto; }

.wegweiser {
  background: rgba(255, 255, 255, .88);
  display: flex; align-items: stretch; justify-content: space-evenly; flex-wrap: wrap;
}
.wegweiser a {
  display: flex; align-items: center; padding: .85rem 1.1rem;
  font-size: 1.125rem; color: var(--ink); text-decoration: none;
  transition: background-color var(--kurz), color var(--kurz);
}
.wegweiser a:hover { background: var(--grau); }
.wegweiser a[aria-current="page"] { background: var(--ink); color: var(--weiss); }

.menue-schalter { display: none; }
@media (max-width: 64rem) {
  .kopf__innen {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "klima stadt" "schrift schrift" "menue menue" "nav nav";
    gap: var(--s3);
  }
  .marke--klima, .marke--kampagne { grid-area: klima; justify-self: start; }
  .marke--stadt { justify-self: start; }
  .schriftgroesse { justify-self: stretch; justify-content: flex-start; }
  .marke--klima img { height: 2.75rem; }
  .menue-schalter {
    grid-area: menue;
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    background: var(--weiss); border: 0; cursor: pointer;
    font-family: var(--schrift); font-size: 1.0625rem; color: var(--ink);
    padding: .85rem 1rem; min-height: 3rem; width: 100%;
  }
  .menue-schalter svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
  .wegweiser { grid-area: nav; flex-direction: column; background: var(--weiss); }
  .wegweiser[hidden] { display: none; }
  .wegweiser a { border-top: 1px solid var(--linie); padding: .95rem 1.1rem; }
}

/* ---------- Bühne über der Platte ---------- */
/* Die Bühne muss dieselbe Breite haben wie Kopfleiste und Inhaltsplatte.
   Ohne die Begrenzung lief sie auf großen Bildschirmen über die ganze
   Fensterbreite, und die Überschrift stand weit links neben der Spalte. */
.buehne {
  position: relative; margin-top: var(--s5);
  width: min(100% - 2 * var(--rand), var(--bahn)); margin-inline: auto;
}
.buehne__bild { display: block; width: 100%; height: clamp(12rem, 26vw, 20rem); object-fit: cover; }
.buehne__band {
  background: var(--gruen-dunkel); color: var(--weiss);
  padding: var(--s5) clamp(1.25rem, 3.5vw, 3.25rem);
}
.buehne__band .kicker { font-size: 1rem; margin: 0 0 var(--s2); opacity: .92; }
/* Der Knopf steht hier auf grünem Grund und muss sich deshalb umdrehen,
   sonst verschwindet er in der Fläche. */
.buehne__band .knopf { background: var(--weiss); color: var(--gruen-dunkel); border-color: var(--weiss); }
.buehne__band .knopf:hover { background: var(--grau); color: var(--gruen-dunkel); border-color: var(--grau); }
.buehne__band h1 { color: var(--weiss); padding: 0; margin: 0; }
.buehne__band p { color: var(--weiss); margin: var(--s3) 0 0; max-width: 62ch; }

/* Wärmestreifen als Bühne, das Motiv der Klima-Microsite der Stadt */
.streifen { display: block; width: 100%; height: clamp(6rem, 12vw, 10rem); }

/* ---------- Inhalt und rechte Spalte ---------- */
.gespann { display: grid; gap: var(--s6); align-items: start; }
.gespann > * { min-width: 0; }
@media (min-width: 60rem) {
  .gespann { grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--s7); }
}
.nebenspalte { font-size: 1rem; }
.nebenspalte h2 { font-size: 1.125rem; border-bottom-color: var(--linie); }
.unterwegweiser { list-style: none; margin: 0 0 var(--s6); padding: 0; }
.unterwegweiser li { margin: 0; }
.unterwegweiser a {
  display: block; padding: .6rem .9rem; text-decoration: none;
  color: var(--ink); border-bottom: 1px solid var(--linie);
}
.unterwegweiser a:hover { background: var(--grau); }
.unterwegweiser a[aria-current="page"] { background: var(--ink); color: var(--weiss); }

/* ---------- Bilder mit Unterschrift wie bei der Stadt ---------- */
figure { margin: 0 0 var(--s6); }
figure img { display: block; width: 100%; height: auto; }
figcaption {
  background: var(--grau); color: var(--text);
  padding: .7rem 1rem; font-size: .9375rem; line-height: 1.5;
}
figcaption b { display: block; font-weight: 600; color: var(--ink); }
figcaption .quelle { display: block; font-size: .875rem; color: #666; }

.bildreihe { display: grid; gap: var(--s5); }
@media (min-width: 46rem) { .bildreihe { grid-template-columns: repeat(3, 1fr); } }
.bildreihe figure { margin: 0; }
.bildreihe img { aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- Kästen ---------- */
.kasten { background: var(--grau); padding: var(--s5); margin-bottom: var(--s6); }
.kasten > :last-child { margin-bottom: 0; }
.kasten--blau { background: var(--blau-hell); }
.kasten--blau a { color: var(--blau-dunkel); }
.kasten a { color: var(--blau-dunkel); }
.kasten--gruen { background: #eaf2dd; }
.kasten--rand { background: var(--blau-hell); }
.kasten--warnung { background: #fbeee6; }

/* ---------- Schaltflächen ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: .55em;
  min-height: 3rem; padding: .7rem 1.4rem;
  font-family: var(--schrift); font-size: 1.0625rem; font-weight: 600; line-height: 1.2;
  color: var(--weiss); background: var(--gruen-dunkel); border: 2px solid var(--gruen-dunkel);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--kurz), border-color var(--kurz);
}
.knopf:hover { background: #3d5718; border-color: #3d5718; color: var(--weiss); }
.knopf--blau { background: var(--blau); border-color: var(--blau); }
.knopf--blau:hover { background: var(--blau-dunkel); border-color: var(--blau-dunkel); }
.knopf--leer { background: transparent; color: var(--blau); border-color: var(--blau); }
.knopf--leer:hover { background: var(--blau); color: var(--weiss); }
.knopf svg { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }
.knopf[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }

/* ---------- Listen mit Haken ---------- */
.liste { list-style: none; padding: 0; }
.liste li { position: relative; padding-left: 1.9rem; }
.liste li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 1.15rem; height: 1.15rem; background: var(--gruen);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.6l5 5L20 6.5l-2.1-2.1L9 13.3l-2.9-2.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.6l5 5L20 6.5l-2.1-2.1L9 13.3l-2.9-2.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.liste--kreuz li::before {
  background: var(--braun);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.3 5.7l-1.4-1.4L12 9.2 7.1 4.3 5.7 5.7l4.9 4.9-4.9 4.9 1.4 1.4 4.9-4.9 4.9 4.9 1.4-1.4-4.9-4.9z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.3 5.7l-1.4-1.4L12 9.2 7.1 4.3 5.7 5.7l4.9 4.9-4.9 4.9 1.4 1.4 4.9-4.9 4.9 4.9 1.4-1.4-4.9-4.9z'/%3E%3C/svg%3E");
}

/* ---------- Ablauf in vier Schritten ---------- */
.schritte { display: grid; gap: var(--s5); counter-reset: schritt; list-style: none; padding: 0; margin: 0 0 var(--s6); }
@media (min-width: 52rem) { .schritte { grid-template-columns: repeat(4, 1fr); } }
.schritt { margin: 0; border-top: 3px solid var(--gruen); padding-top: var(--s4); }
.schritt__nr {
  counter-increment: schritt;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; margin-bottom: var(--s2);
  background: var(--gruen-dunkel); color: var(--weiss); font-weight: 600; font-size: 1rem;
}
.schritt__nr::before { content: counter(schritt); }
/* Die Nummer muss näher an ihrer eigenen Überschrift sitzen als an der grünen
   Linie darüber, sonst liest sie sich als Anhängsel des vorigen Schrittes.
   Auf breiten Schirmen stehen die vier Schritte nebeneinander, dort fällt es
   nicht auf; untereinander gestapelt schon. */
.schritt h3 { margin-top: 0; margin-bottom: var(--s2); }
@media (max-width: 52rem) {
  .schritt { padding-top: var(--s3); }
  .schritt__nr { float: left; margin: 0 var(--s3) var(--s2) 0; }
  .schritt h3 { overflow: hidden; }
  .schritt p { clear: both; }
}
.schritt p { margin: 0; font-size: .9375rem; line-height: 1.6; }

/* ---------- Zahlen ---------- */
.zahlen { display: grid; gap: var(--s5); margin-bottom: var(--s6); }
/* Erst ab 56rem dreispaltig. Bei 46rem schrumpften die Kacheln auf rund
   200 Bildpunkte, dann rutschte die Einheit allein in die zweite Zeile
   („bis zu 71" / „t") und die Erklärtexte begannen auf drei Höhen. */
@media (min-width: 36rem) and (max-width: 56rem) { .zahlen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .zahlen { grid-template-columns: repeat(3, 1fr); } }
.zahl { background: var(--grau); padding: var(--s5); margin: 0; display: flex; flex-direction: column; }
.zahl b { display: block; font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.05; font-weight: 600; color: var(--gruen-dunkel); text-wrap: balance; hyphens: none; }
.zahl span { display: block; margin-top: var(--s3); font-size: .9375rem; line-height: 1.55; }

/* ---------- Fragen ---------- */
.fragen { margin-bottom: var(--s6); }
.frage { border-bottom: 1px solid var(--linie); }
.frage > summary {
  display: flex; gap: var(--s4); align-items: baseline; justify-content: space-between;
  cursor: pointer; list-style: none;
  padding: 1rem 0; font-size: 1.0625rem; font-weight: 600; color: var(--ink);
}
.frage > summary::-webkit-details-marker { display: none; }
.frage > summary:hover { color: var(--blau); }
.frage > summary::after {
  content: ""; flex: none; width: 1.1rem; height: 1.1rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v14h-2z'/%3E%3Cpath d='M5 11h14v2H5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v14h-2z'/%3E%3Cpath d='M5 11h14v2H5z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--kurz);
}
.frage[open] > summary { color: var(--blau); }
.frage[open] > summary::after { transform: rotate(45deg); }
.frage__antwort { padding: 0 0 var(--s5); }
.frage__antwort > :last-child { margin-bottom: 0; }

/* ---------- Tabelle ---------- */
.tabellen-rolle { overflow-x: auto; margin-bottom: var(--s6); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--ink); }

/* Auf schmalen Geräten stapeln sich die Zeilen, statt seitlich wegzurollen.
   Seitliches Schieben sieht man auf dem Telefon nicht, und abgeschnittene
   Zahlen wie „rund 291.000 k" sind schlimmer als eine längere Seite. */
@media (max-width: 40rem) {
  .tabellen-rolle { overflow-x: visible; }
  .tabellen-rolle table, .tabellen-rolle tbody, .tabellen-rolle tr, .tabellen-rolle td { display: block; width: 100%; }
  .tabellen-rolle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabellen-rolle tr { border-bottom: 2px solid var(--ink); padding: var(--s4) 0; }
  .tabellen-rolle tr:last-child { border-bottom: 0; }
  .tabellen-rolle td { border: 0; padding: 0 0 var(--s2); }
  .tabellen-rolle td:first-child { font-weight: 600; color: var(--ink); }
  .tabellen-rolle td:last-child { padding-bottom: 0; }
  .tabellen-rolle td[data-spalte]::before {
    content: attr(data-spalte) ": "; font-weight: 600; color: var(--ink);
  }
}

/* ---------- Formular ---------- */
.formular { max-width: 34rem; }
.feld { margin-bottom: var(--s5); }
.feld label { display: block; font-weight: 600; color: var(--ink); margin-bottom: var(--s2); }
/* Alle Eingabefelder gleich, auch Zahlenfelder. Vorher blieben type="number"
   ungestylt und standen als winzige Kästchen zwischen den großen Feldern. */
.feld input:not([type="checkbox"]):not([type="radio"]), .feld select, .feld textarea {
  width: 100%; min-height: 3rem; padding: .65rem .8rem;
  font-family: var(--schrift); font-size: 1.0625rem; color: var(--ink);
  background: var(--weiss); border: 1px solid #9a9a9a;
}
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; }
.feld__hinweis { display: block; font-size: .9375rem; color: #5c5c5c; margin-top: var(--s2); }
.zustimmung { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; margin-bottom: var(--s5); }
/* 1.5rem sind 24 Bildpunkte, das Mindestmaß für Tippziele nach WCAG 2.5.8 */
.zustimmung input[type="checkbox"] { width: 1.5rem; height: 1.5rem; margin: .15rem 0 0; accent-color: var(--gruen); }
.zustimmung label { font-weight: 400; margin: 0; }
.honigtopf { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fehlerkasten { background: #fbeee6; padding: var(--s4) var(--s5); margin-bottom: var(--s5); }

/* ---------- Abschlussband ---------- */
/* Abschlussband: schließt jede Inhaltsseite mit dem nächsten Schritt ab.
   Gleiche Breite wie die weiße Platte darüber, damit es wie deren Fuß wirkt. */
.aufruf {
  background: var(--gruen-dunkel); color: var(--weiss);
  width: min(100% - 2 * var(--rand), var(--bahn)); margin-inline: auto;
}
.aufruf__innen { padding: var(--s6) clamp(1.25rem, 3.5vw, 3.25rem); }
.aufruf h2 { color: var(--weiss); border-bottom-color: rgba(255,255,255,.55); margin-top: 0; }
.aufruf p { color: var(--weiss); max-width: 62ch; }
.aufruf .knopf { background: var(--weiss); color: var(--gruen-dunkel); border-color: var(--weiss); }
.aufruf .knopf:hover { background: var(--grau); color: var(--gruen-dunkel); }
.aufruf__telefon { font-size: 1rem; }
.aufruf__telefon a { color: var(--weiss); font-weight: 600; }

/* ---------- Fußzeile ---------- */
.fuss { background: var(--blau-dunkel); color: var(--weiss); margin-top: var(--s6); }
.fuss__innen {
  width: min(100% - 2 * var(--rand), var(--bahn)); margin-inline: auto;
  display: grid; gap: var(--s6); padding: var(--s7) 0 var(--s6);
}
@media (min-width: 34rem) and (max-width: 52rem) { .fuss__innen { grid-template-columns: 1fr 1fr; } }
@media (min-width: 52rem) { .fuss__innen { grid-template-columns: 1.5fr 1fr 1fr; } }
.fuss h2 { color: var(--weiss); font-size: 1rem; border-bottom-color: rgba(255,255,255,.4); }
.fuss a { color: var(--weiss); }
.fuss a:hover { color: var(--blau-hell); }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: .5rem; }
.fuss__unten {
  border-top: 1px solid rgba(255,255,255,.25);
  padding: var(--s5) 0 var(--s6);
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); font-size: .9375rem;
}
/* Der Verweis in der Fußzeile stand allein in seiner Zeile und war nur 21 px
   hoch. WCAG 2.2 verlangt 24 px, die Ausnahme für Links im Fließtext greift
   hier nicht. Zwei Millimeter Innenabstand reichen. */
.fuss__unten a { display: inline-block; padding-block: .2rem; }

.fuss .traeger { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; margin-bottom: var(--s4); }
.fuss .traeger img { background: var(--weiss); padding: .5rem .7rem; }
.fuss .traeger img.stadt { height: 3.5rem; width: auto; }
.fuss .traeger img.werke { height: 2.1rem; width: auto; }

/* ---------- Städtische Leiste ----------
   Vorgabe der Stadt vom 20.08.2026, „Hinweise für die Aufbereitung der
   Druckdaten im städtischen Corporate Design": die Kurzleiste misst auf
   DIN A1 mindestens 198 x 49,5 mm und sitzt unten rechts in der Ecke. Das
   sind 8,33 Prozent der Formatbreite in der Höhe, bei einem Verhältnis 4:1.

   Im Web gibt es kein festes Format, deshalb wird an der Fensterbreite
   gerechnet und nach unten begrenzt. Ohne die Untergrenze wäre die Leiste
   auf dem Telefon 31 Bildpunkte hoch, und die Zeile „Paderborn überzeugt."
   im Logo wäre nicht mehr lesbar. 56 Bildpunkte sind der Wert, ab dem sie
   auf einem 375 Punkte breiten Bildschirm noch zu entziffern ist,
   nachgemessen am 20.08.2026.

   Weißer Grund, so wie in der Vorlage der Stadt und auf allen Drucksachen.
   Auf dem dunklen Blau der Fußzeile stünde das helle Grün falsch. */
.stadtleiste {
  background: var(--weiss);
  display: flex;
  justify-content: flex-end;
}
.stadtleiste img {
  display: block;
  height: clamp(3.5rem, 8.33vw, 6.25rem);
  width: auto;
}

/* ---------- Brotkrume ---------- */
.brotkrume { font-size: .9375rem; padding-top: var(--s5); }
.brotkrume ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.brotkrume li { margin: 0; }
.brotkrume li + li::before { content: "›"; margin-right: .4rem; color: #777; }

/* ---------- Hilfen ---------- */
.nur-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.kein-abstand { margin-bottom: 0; }
.abstand-oben { margin-top: var(--s6); }
.mittig { text-align: center; }

/* Drucken: Browser drucken standardmäßig keine Hintergrundfarben. Alles, was
   auf Farbe steht, wird deshalb auf Papier umgedreht, sonst druckt die
   Startseite ohne sichtbare Überschrift und die Fußzeile ohne Telefonnummer. */
@media print {
  body { background: #fff; }
  .kopf, .wegweiser, .aufruf, .menue-schalter, .springlink, .nebenspalte, .streifen { display: none !important; }
  .platte { width: 100%; }
  .platte__innen { padding-inline: 0; }
  .buehne__band, .fuss, .fuss__unten { background: var(--weiss) !important; color: var(--ink) !important; }
  .buehne__band h1, .buehne__band p, .buehne__band .kicker,
  .fuss h2, .fuss p, .fuss li, .fuss a, .fuss__unten span, .fuss__unten a { color: var(--ink) !important; }
  .fuss { border-top: 1px solid #999; }
  a { color: var(--ink) !important; text-decoration: underline; }
  .frage[open] .frage__antwort, details .frage__antwort { display: block !important; }
  details > summary { list-style: none; font-weight: 600; }
  details:not([open]) > *:not(summary) { display: block !important; }
  .haus__text[hidden] { display: block !important; }
  figure, .kasten, .tipp, table { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
}

/* =========================================================================
   Sonderfunktion 1: begehbarer Hausschnitt
   Ohne JavaScript stehen alle fünf Texte untereinander, die Knöpfe fehlen.
   ========================================================================= */
.haus-modul { display: grid; gap: var(--s5); margin-bottom: var(--s6); }
/* Ohne min-width: 0 zwingt die Zeichnung die Spalte auf ihre Eigenbreite von
   300 Bildpunkten. Auf sehr schmalen Geräten lief die Seite dadurch über. */
.haus-modul > * { min-width: 0; }
.haus-modul__bild { width: 100%; max-width: 36rem; margin-inline: auto; }
.haus { max-width: 100%; }
@media (min-width: 54rem) {
  .haus-modul {
    grid-template-columns: 18rem minmax(0, 1fr);
    grid-template-areas: "bild bild" "seite text";
    column-gap: var(--s6); align-items: start;
  }
  .haus-modul__bild { grid-area: bild; }
  .haus-modul__seite { grid-area: seite; }
  .haus__texte { grid-area: text; }
}
.haus { display: block; width: 100%; height: auto; }
.haus__teil { fill: var(--gruen); transition: fill var(--kurz); }
.haus__teil[data-aktiv] { fill: var(--braun); }
.haus__punkte circle { fill: var(--ink); transition: fill var(--kurz); }
.haus__punkte text { fill: #fff; }
.haus__punkte g[data-aktiv] circle { fill: var(--braun); }
.haus__knoepfe { display: none; }
.haus-modul[data-bereit] .haus__knoepfe { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); margin-bottom: var(--s5); }
.haus__knopf {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .75rem 1rem; border: 0; cursor: pointer; text-align: left;
  font-family: var(--schrift); font-size: 1rem; color: var(--ink); background: var(--weiss);
}
.haus__knopf:hover { background: var(--grau); }
.haus__knopf[aria-pressed="true"] { background: var(--ink); color: var(--weiss); }
.haus__nr {
  flex: none; width: 1.7rem; height: 1.7rem; display: grid; place-items: center;
  background: var(--gruen-dunkel); color: var(--weiss); font-weight: 600; font-size: .9375rem;
}
.haus__knopf[aria-pressed="true"] .haus__nr { background: var(--braun); }
.haus__text { background: var(--grau); padding: var(--s4); margin-bottom: var(--s5); }
.haus-modul[data-bereit] .haus__text { margin-bottom: 0; }

/* =========================================================================
   Sonderfunktion 2: Filter für die Spartipps
   Ohne JavaScript bleibt der Filter verborgen und alle Tipps sind sichtbar.
   ========================================================================= */
.filter { background: var(--grau); padding: var(--s5); margin-bottom: var(--s6); }
.filter__frage { font-weight: 600; color: var(--ink); margin: 0 0 var(--s3); }
.filter__knoepfe { display: flex; flex-wrap: wrap; gap: var(--s3); }
.filter__knopf {
  font-family: var(--schrift); font-size: 1rem; cursor: pointer;
  padding: .55rem 1rem; min-height: 2.75rem;
  background: var(--weiss); color: var(--ink); border: 1px solid #9a9a9a;
}
.filter__knopf:hover { border-color: var(--ink); }
.filter__knopf[aria-pressed="true"] { background: var(--ink); color: var(--weiss); border-color: var(--ink); }
.filter__stand { margin: var(--s3) 0 0; font-size: .9375rem; color: #5c5c5c; }

.tipps { list-style: none; padding: 0; margin: 0 0 var(--s6); }
.tipp { border-top: 1px solid var(--linie); padding: var(--s5) 0; margin: 0; }
.tipp:last-child { border-bottom: 1px solid var(--linie); }
.tipp h3 { margin-bottom: var(--s2); }
.tipp p { margin-bottom: var(--s3); }
.tipp__marken { display: flex; flex-wrap: wrap; gap: var(--s3); }
.tipp__marken span {
  display: inline-block; padding: .2rem .6rem; font-size: .875rem; font-weight: 600;
  color: var(--weiss); background: var(--ink);
}
.marke-selbst { background: var(--gruen-dunkel) !important; }
.marke-fach { background: var(--blau-dunkel) !important; }
.marke-beides { background: var(--violett) !important; }
.marke-kosten { background: #5c5c5c !important; }

/* Kicker über der H1 nur in der farbigen Bühne, dort trägt er die Herkunft */
.buehne__band .kicker { font-weight: 600; letter-spacing: .02em; }

/* =========================================================================
   Quoten-Balken auf der Ergebnisseite
   ========================================================================= */
.quoten { list-style: none; padding: 0; margin: 0 0 var(--s6); }
.quoten li {
  display: grid; grid-template-columns: minmax(11rem, 16rem) 1fr auto;
  gap: var(--s3); align-items: center;
  padding: .45rem 0; border-bottom: 1px solid var(--linie); margin: 0;
}
.quoten .balken { height: 1.15rem; background: var(--grau); position: relative; }
.quoten .balken span { position: absolute; inset: 0 auto 0 0; background: var(--gruen-dunkel); }
.quoten b { font-variant-numeric: tabular-nums; color: var(--ink); min-width: 3.2rem; text-align: right; }
@media (max-width: 40rem) {
  .quoten li { grid-template-columns: 1fr auto; }
  .quoten .balken { grid-column: 1 / -1; order: 3; }
}

/* =========================================================================
   Das große Anmeldeformular (erscheint, sobald KAMPAGNE_LAEUFT gesetzt ist)
   Gleiche Formensprache wie der Rest: eckig, graue Flächen, blaue Akzente.
   ========================================================================= */
.formular--anmeldung { max-width: none; }
.formular--anmeldung fieldset {
  border: 0; border-top: 2px solid var(--linie);
  margin: 0 0 var(--s6); padding: var(--s5) 0 0;
}
.formular--anmeldung legend {
  font-family: var(--schrift); font-size: 1.25rem; font-weight: 600;
  color: var(--ink); padding: 0 .6rem 0 0;
}
.formular__gitter { display: grid; gap: var(--s4); }
@media (min-width: 40rem) { .formular__gitter { grid-template-columns: 1fr 1fr; } }
.formular__feld--breit { grid-column: 1 / -1; }
.formular__hinweis { font-size: .9375rem; color: #5c5c5c; margin: var(--s3) 0 0; }
.formular__pflicht { font-size: .9375rem; color: #5c5c5c; margin: 0 0 var(--s4); }
.formular__pflicht abbr, .formular__feld abbr { text-decoration: none; color: var(--braun); }

/* Auswahlkacheln: großflächig, damit sie auch mit unsicherer Hand treffbar sind */
.wahl { display: grid; gap: var(--s3); }
@media (min-width: 46rem) { .wahl { grid-template-columns: 1fr 1fr; } }
.wahl__feld { display: block; position: relative; cursor: pointer; }
.wahl__feld input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl__feld > span {
  display: block; min-height: 3rem; padding: .85rem 1rem;
  background: var(--weiss); border: 2px solid #9a9a9a; color: var(--ink); font-weight: 600;
}
.wahl__feld > span small { display: block; font-weight: 400; font-size: .9375rem; color: #5c5c5c; margin-top: .2rem; }
.wahl__feld:hover > span { border-color: var(--ink); }
.wahl__feld input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.wahl__feld input:checked + span { border-color: var(--gruen-dunkel); background: #eaf2dd; }
.wahl__feld input:checked + span small { color: var(--text); }

/* Die Terminweg-Frage im Anmeldeformular steht in einem fieldset, damit
   Screenreader die Frage zu beiden Kacheln vorlesen. Ein fieldset bringt von
   sich aus Rahmen und Innenabstand mit, beides muss hier weg, und die legend
   soll aussehen wie jedes andere Feld-Label. Einspaltig, weil die beiden
   Kacheln Fließtext tragen und im schmalen Formular sonst zu eng stehen. */
.formular--kontakt fieldset { border: 0; padding: 0; }
.formular--kontakt legend { display: block; font-weight: 600; color: var(--ink); margin-bottom: var(--s2); padding: 0; }
.formular--kontakt legend abbr { text-decoration: none; color: var(--braun); }
@media (min-width: 46rem) { .formular--kontakt .wahl { grid-template-columns: 1fr; } }

.formular__meldung { background: #fbeee6; border-left: 0; padding: var(--s5); margin-bottom: var(--s5); }
.formular__meldung a { color: var(--blau-dunkel); }
.formular__zeile { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; margin-top: var(--s5); }

/* =========================================================================
   Schriftgröße umstellen
   Drei Stufen, gemerkt im Browser. Ohne JavaScript ist die Leiste versteckt,
   dann bleibt der Zoom des Browsers der Weg. Für Menschen, die den Zoom
   nicht kennen, ist ein sichtbarer Knopf der Unterschied zwischen lesen
   und aufgeben.
   ========================================================================= */
.schriftgroesse {
  grid-area: schrift;
  display: flex; align-items: center; gap: .5rem;
  background: var(--weiss); padding: .35rem .7rem;
  font-size: .9375rem; color: var(--ink);
}
.schriftgroesse[hidden] { display: none; }
.schriftgroesse__knoepfe { display: flex; gap: .25rem; }
.schriftgroesse button {
  font-family: var(--schrift); line-height: 1; cursor: pointer;
  min-width: 2.5rem; min-height: 2.5rem; padding: .25rem .4rem;
  background: var(--weiss); color: var(--ink); border: 1px solid #9a9a9a;
  display: inline-flex; align-items: center; justify-content: center;
}
.schriftgroesse button:nth-child(1) { font-size: 1rem; }
.schriftgroesse button:nth-child(2) { font-size: 1.125rem; }
.schriftgroesse button:nth-child(3) { font-size: 1.5rem; }
.schriftgroesse button:hover { border-color: var(--ink); }
.schriftgroesse button[aria-pressed="true"] { background: var(--ink); color: var(--weiss); border-color: var(--ink); }

/* Kurzfassung: das Wichtigste in einfachen Worten, oben auf der Startseite */
.kurzfassung { background: var(--blau-hell); padding: var(--s5) var(--s5) var(--s5); margin-bottom: var(--s6); }
.kurzfassung h2 { margin-top: 0; color: var(--blau-dunkel); border-bottom-color: var(--blau-dunkel); }
.kurzfassung li { font-size: 1.0625rem; }
.kurzfassung a { color: var(--blau-dunkel); }

/* Hausschnitt: neue Schnittzeichnung und die Tafel daneben */
.haus__teil { transition: fill var(--kurz); }
.haus__teil--bau { fill: var(--grau-tief); }
.haus__teil--luft { fill: var(--weiss); }
.haus__teil[data-aktiv] { fill: var(--gruen); }
.haus-modul[data-bereit] .haus__teil { cursor: pointer; }
.haus__punkte circle { stroke: var(--weiss); stroke-width: 2.5; }
.haus .luke { pointer-events: none; }
.haus__text h4 { margin: var(--s4) 0 var(--s2); color: var(--ink); }
.haus__text h4:first-of-type { margin-top: 0; }
.haus__zahl {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: baseline;
  background: var(--weiss); padding: var(--s4); margin: var(--s4) 0 0;
}
.haus__zahl b {
  font-size: 1.5rem; font-weight: 600; line-height: 1.1;
  color: var(--gruen-dunkel); white-space: nowrap;
}
.haus__zahl span { font-size: .9375rem; line-height: 1.5; }

/* =========================================================================
   Nacharbeiten aus der Sichtprüfung über alle Bildschirmbreiten
   ========================================================================= */

/* Folgt die weiße Platte direkt auf ein Farbband, fehlte oben jeder Abstand.
   Die erste Überschrift klebte an der Kante des Bandes. */
.buehne + .platte > .platte__innen { padding-top: var(--s6); }

/* Der Absendeknopf saß ohne Luft auf dem Kasten darunter. */
.formular { margin-bottom: var(--s6); }

/* Telefonnummern nicht über zwei Zeilen zerreißen. */
a[href^="tel:"] { white-space: nowrap; }

/* Auf Seiten ohne Nebenspalte liefen die Listen über die ganze Plattenbreite
   und wurden bis zu 150 Zeichen lang, während die Absätze daneben bei 68
   Zeichen umbrachen. Gleiche Satzbreite für beide. */
.platte__innen .liste,
.platte__innen ul:not([class]), .platte__innen ol:not([class]) { max-width: 68ch; }

/* Die Nebenspalte bleibt auf langen Seiten mit, statt als leere Spalte
   über tausende Bildpunkte stehen zu bleiben. */
@media (min-width: 60rem) {
  .nebenspalte { position: sticky; top: var(--s5); }
}

/* Der Kennzahlenkasten im Hausschnitt blieb auf dem Telefon zweispaltig:
   große Zahl links, Text rechts in Zeilen von zwei Wörtern. */
@media (max-width: 40rem) {
  .haus__zahl { grid-template-columns: 1fr; gap: var(--s2); }
}

/* Bildunterschriften einer Reihe enden bündig, auch wenn eine zweizeilig
   und die nächste dreizeilig ist. */
.bildreihe figure { display: flex; flex-direction: column; height: 100%; }
.bildreihe figcaption { flex: 1; }

/* In der Balkenliste stand der Prozentwert bei zweizeiligen Bezeichnungen
   mittig zwischen den Zeilen und fluchtete nicht mit den einzeiligen. */
.quoten li { align-items: start; }
.quoten .balken { margin-top: .35rem; }

/* Im grünen Abschlussband lief die Linie unter der Überschrift über die
   ganze Breite, während der Text schon nach einem Drittel endete. */
.aufruf h2, .buehne__band h2 { max-width: 62ch; }

/* Zeichnungen stehen wie Fotos in einer figure, brauchen aber eine ruhige
   Fläche unter sich, damit sie nicht im Weiß der Platte schwimmen. */
.figur--zeichnung { background: var(--grau); }
.figur--zeichnung svg { display: block; width: 100%; height: auto; padding: var(--s5) var(--s4) var(--s3); }
.figur--zeichnung figcaption { background: var(--grau-tief); }

/* Ampel des Wärmepumpen-Checks: Bild und Erklärung nebeneinander.
   Die drei Lichtfarben sind dieselben Töne wie in den Wärmestreifen. */
.ampel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s5); align-items: center; margin-bottom: var(--s5); }
.ampel__bild { width: 3.75rem; height: auto; flex: none; }
.ampel__liste { list-style: none; padding: 0; margin: 0; }
.ampel__zeile { position: relative; padding-left: 1.9rem; margin-bottom: var(--s3); }
.ampel__zeile:last-child { margin-bottom: 0; }
.ampel__zeile::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
}
.ampel--gruen::before { background: #699429; }
.ampel--gelb::before  { background: #e08214; }
.ampel--rot::before   { background: #b2182b; }
@media (max-width: 34rem) { .ampel { grid-template-columns: 1fr; justify-items: start; gap: var(--s4); } }

/* Einordnung auf der Ergebnisseite: 15 Häuser machen die Zahl greifbar. */
.einordnung { background: var(--grau); padding: var(--s5); margin-bottom: var(--s6); }
.haeuserreihe { display: block; width: 100%; max-width: 30rem; height: auto; margin-bottom: var(--s4); }

/* Die vier Zielgruppen als Kachelreihe mit Piktogramm. */
/* auto-fit statt fester Spaltenzahl: Die Kacheln richten sich nach dem
   Platz in der Inhaltsspalte, nicht nach der Fensterbreite. Neben der
   Nebenspalte wurden vier Spalten sonst so schmal, dass „Sie vermieten in
   Paderborn" auf vier Zeilen zerfiel. */
.gruppen {
  list-style: none; padding: 0; margin: 0 0 var(--s6);
  display: grid; gap: var(--s4);
  /* min(18rem, 100%) statt 18rem: Sonst erzwingt die Mindestbreite die Spalte
     auch dann, wenn das Fenster schmaler ist, und die Seite läuft über. */
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}
.gruppe { background: var(--grau); padding: var(--s4); margin: 0; display: flex; flex-direction: column; }
.gruppe__bild { width: 3.5rem; height: 3.5rem; margin-bottom: var(--s3); }
.gruppe b { display: block; color: var(--ink); margin-bottom: var(--s2); }
.gruppe span { font-size: .9375rem; line-height: 1.5; color: #5c5c5c; }

/* Kontaktformular: etwas breiter als der Lesetext, damit das Nachrichtenfeld
   Platz hat, aber schmal genug, dass die Zeilen lesbar bleiben. */
.formular--kontakt { max-width: 42rem; }
.formular--kontakt textarea { min-height: 9rem; resize: vertical; }

/* ---------- Verweise in den Dämmatlas ----------
   Bewusst keine Kachelwand, sondern Zeilen im selben Rhythmus wie die Tipps
   darüber: Name links, Beschreibung rechts, Haarlinie dazwischen. Das Zeichen
   vor dem Namen sagt vorher, dass die Seite gewechselt wird. */
.atlas-verweis { display: inline-flex; align-items: baseline; gap: .5em; }
.atlas-verweis svg {
  width: .78em; height: .78em; flex: none;
  fill: currentColor; transform: translateY(.06em);
}
.atlas-verweis--gross { font-size: 1.125rem; font-weight: 600; }

.atlas__wege { margin: 0 0 var(--s6); }

.atlas__weg {
  display: grid; gap: var(--s1) var(--s5);
  border-top: 1px solid var(--linie);
  padding: var(--s4) var(--s3);
  margin-inline: calc(var(--s3) * -1);
  transition: background-color var(--kurz);
}

.atlas__weg:last-child { border-bottom: 1px solid var(--linie); }
.atlas__weg:has(a:hover), .atlas__weg:has(a:focus-visible) { background: var(--grau); }
/* Auf der getönten Zeile muss der Link mit, sonst fällt er beim Tastaturfokus
   auf 4,17:1 zurück. a:hover greift nur bei der Maus. Gleiche Lösung wie bei
   .kasten a weiter oben. */
.atlas__weg:has(a:hover) a, .atlas__weg:has(a:focus-visible) a { color: var(--blau-dunkel); }
.atlas__weg dt { margin: 0; }
.atlas__weg dd { margin: 0; color: var(--text); }

@media (min-width: 46rem) {
  .atlas__weg { grid-template-columns: minmax(13rem, 21rem) 1fr; align-items: baseline; }
}

.atlas__hinweis { font-size: .9375rem; }

.tipp__atlas { margin-bottom: var(--s3); }

/* Vorrat der Piktogramme. Er hängt am Anfang des Body, wird nie gezeigt und
   darf das Layout nicht anfassen. Steht hier statt als style-Attribut, damit
   die Sicherheitsrichtlinie ohne 'unsafe-inline' auskommt. */
.piktogramme { position: absolute; }

/* Fehlermeldung direkt am Feldpaar, in derselben Sprache wie die Warnkästen. */
/* Gleiche Fläche wie .kasten--warnung, damit die Seite eine Sprache spricht. */
.feldfehler {
  background: #fbeee6; padding: var(--s3) var(--s4); margin: 0 0 var(--s5);
  font-weight: 600; color: var(--ink);
}
.feld input[aria-invalid="true"] { border-color: var(--braun); }

/* Zeichen für einen Verweis nach draußen, wenn er im Fließtext steht. */
.extern-zeichen { width: .78em; height: .78em; fill: currentColor; vertical-align: -.05em; }

/* ---------- Schriftgrößen-Stufen ----------
   Wird vom Skript über data-schrift am <html> umgeschaltet. Früher setzte
   das Skript die Größe direkt am Element; das verbietet die Sicherheits-
   richtlinie (style-src 'self'), weil auch element.style als Inline-Stil gilt. */
:root[data-schrift="2"] { font-size: 118%; }
:root[data-schrift="3"] { font-size: 138%; }

/* Anklickbare Teile des Hausschnitts. Nur wenn das Skript den Schnitt
   übernommen hat, sonst führt der Zeigefinger in die Irre. */
[data-haus][data-bereit] .haus__punkte g[data-stelle],
[data-haus][data-bereit] .haus__teil[data-stelle] { cursor: pointer; }


/* ---------- Balkenbreiten der Ergebnisseite ----------
   Standen früher als style-Attribut im Markup. Die Sicherheitsrichtlinie
   erlaubt keine Inline-Stile, die Balken wären sonst unsichtbar geblieben.
   Eine Klasse je vorkommendem Wert ist hier die ehrlichste Lösung: Die Werte
   sind fest, sie kommen aus dem Abschlussbericht und ändern sich nicht. */
.balken--2 { width: 2%; }
.balken--9 { width: 9%; }
.balken--13 { width: 13%; }
.balken--16 { width: 16%; }
.balken--20 { width: 20%; }
.balken--26 { width: 26%; }
.balken--28 { width: 28%; }
.balken--35 { width: 35%; }
.balken--65 { width: 65%; }

/* ---------- Logo der Stadt Paderborn im Seitenkopf ----------
   Von der Stadt am 18.08.2026 schriftlich erbeten. Steht neben dem
   Kampagnenzeichen, nicht darin: zwei Absender, zwei Zeichen.
   Höhe an das Kampagnenzeichen angeglichen, die Datei ist hochformatig. */
.marke--stadt img { height: 4.5rem; width: auto; display: block; }

@media (max-width: 64rem) {
  .marke--stadt img { height: 3.25rem; }
}