/* Bausteine: Kopfzeile, Navigation, Titelbereich, Schaltflächen, Karten,
 * Bilder, Tabellen, Fußzeile. Farbwerte ausschließlich aus tokens.css. */

/* ================================================================ Kopfzeile */

.kopfzeile {
  position: sticky;
  top: 0;
  z-index: var(--ebene-kopf);
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--linie);
}

.kopfzeile__innen {
  display: flex;
  align-items: center;
  gap: var(--ab-5);
  min-height: 4.5rem;
}

.marke {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18rem;
  font-family: var(--schrift-titel);
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  /* Beide Teile blau, auf Wunsch des Auftraggebers: "Das Wort Schalsteine
     neben dem 24 auch in blau bitte." Damit das Paar trotzdem gegliedert
     bleibt, steht "Schalsteine" im Leitton und "24" eine Stufe tiefer -
     zwei Blautöne statt Schwarz-Blau. */
  color: var(--leitton);
  text-decoration: none;
  white-space: nowrap;
}

.marke__zusatz { color: var(--leitton-tief); }

/* Die Telefonnummer ist auf dieser Seite der wichtigste Handlungsweg. Sie steht
 * deshalb in der Kopfzeile und nicht erst im Fuß. */
.kopfzeile__ruf {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--ab-2);
  font-weight: 600;
  font-size: var(--grad-klein);
  color: var(--tinte);
  text-decoration: none;
  white-space: nowrap;
}

.kopfzeile__ruf:hover { color: var(--leitton); }
.kopfzeile__ruf svg { width: 1.05em; height: 1.05em; flex: none; }

/* --------------------------------------------------------------- Navigation */

.hauptmenue { display: none; }

.hauptmenue__liste {
  display: flex;
  align-items: center;
  gap: var(--ab-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.hauptmenue__liste li { margin: 0; }

.hauptmenue__verweis {
  display: block;
  padding: var(--ab-2) var(--ab-3);
  border-radius: var(--radius-klein);
  font-size: var(--grad-klein);
  font-weight: 600;
  color: var(--tinte-gedaempft);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dauer-kurz) var(--kurve),
              background-color var(--dauer-kurz) var(--kurve);
}

.hauptmenue__verweis:hover {
  color: var(--tinte-kraeftig);
  background: var(--leitton-hauch);
}

/* Die aktuelle Seite wird gekennzeichnet, nicht nur eingefärbt: Farbe allein
 * ist kein zulässiges Unterscheidungsmerkmal. */
.hauptmenue__verweis[aria-current="page"] {
  color: var(--leitton-tief);
  background: var(--leitton-hauch);
  box-shadow: inset 0 -2px 0 var(--leitton);
}

.menueschalter {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--ab-2);
  background: var(--flaeche);
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--radius);
  padding: var(--ab-2) var(--ab-4);
  font: inherit;
  font-size: var(--grad-klein);
  font-weight: 600;
  color: var(--tinte);
  cursor: pointer;
}

.menueschalter svg { width: 1.1em; height: 1.1em; }

/* Fingerziel. Gemessen war der Schalter 35 px hoch; darunter trifft man auf
   dem Handy daneben. 44 px ist das uebliche Mindestmass. */
.menueschalter { min-height: 44px; min-width: 44px; justify-content: center; }

/* Schmale Schirme: Markenzug, Rufnummer und Menüschalter passen zusammen nicht
 * in 390 px, wenn alle drei ihre volle Breite behalten. Gemessen lief die
 * Kopfzeile auf einem 390-px-Schirm über den rechten Rand hinaus und die ganze
 * Seite wurde waagerecht scrollbar. Deshalb schrumpfen hier der Abstand und der
 * Markenzug, und unter 26 rem trägt der Schalter nur noch sein Sinnbild. */
@media (max-width: 30rem) {
  .kopfzeile__innen { gap: var(--ab-3); }
  .marke { font-size: 1.125rem; }
  .kopfzeile__ruf { font-size: var(--grad-mini); }
  .menueschalter { padding: var(--ab-2) var(--ab-3); }
}

@media (max-width: 26rem) {
  .menueschalter__wort {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.schublade {
  display: none;
  border-top: 1px solid var(--linie);
  background: var(--flaeche);
  max-height: min(70vh, 34rem);
  overflow-y: auto;
}

.schublade.ist-offen { display: block; }

.schublade__liste {
  list-style: none;
  margin: 0;
  padding: var(--ab-3) 0 var(--ab-5);
}

.schublade__liste li { margin: 0; }

.schublade__verweis {
  display: block;
  min-height: 44px;
  padding: var(--ab-3) var(--rand-seite);
  color: var(--tinte);
  text-decoration: none;
  font-weight: 600;
  border-left: 3px solid transparent;
}

.schublade__verweis:hover { background: var(--papier-tief); }

.schublade__verweis[aria-current="page"] {
  border-left-color: var(--leitton);
  color: var(--leitton-tief);
  background: var(--leitton-hauch);
}

/* Umschaltpunkt zur waagerechten Navigation.
 *
 * Vorher stand hier 62 rem (992 px). Gemessen bei 1009 px Fensterbreite:
 * Markenzug 143 px + Menue 806 px + Rufnummer 104 px + Abstaende ergeben rund
 * 1.100 px, dazu 96 px Satzrand. Das Menue lief 149 px ueber den rechten Rand
 * hinaus und die ganze Seite wurde waagerecht scrollbar - auf einem ganz
 * gewoehnlichen Laptop-Bildschirm.
 *
 * Jetzt greift die waagerechte Fassung erst ab 75 rem (1200 px), und die
 * Menuepunkte sind etwas enger gesetzt. Darunter uebernimmt die Schublade. */
@media (min-width: 75rem) {
  .hauptmenue { display: block; margin-left: var(--ab-3); }
  .menueschalter, .schublade { display: none !important; }
  .hauptmenue__verweis { padding-inline: var(--ab-2); letter-spacing: -0.005em; }
}

/* =============================================================== Titelbereich */

/* Der Titelbereich jeder Unterseite trägt den Leitton als Fläche.
 *
 * Der Auftraggeber am 23.08.2026: "Es fehlt auf jeden Fall Farbe" und "Blau
 * wie die anderen Seiten". Vorher war dieses Band weiß auf hellgrauem Grund -
 * auf 48 Unterseiten kam Blau damit nur als Verweisfarbe vor, in Strichstärke.
 * Als Fläche gibt es der Seite eine Farbe, ohne dass irgendwo etwas blinkt.
 *
 * Der Verlauf geht von der tiefsten Stufe nach oben leicht auf, damit die
 * Fläche nicht wie ein aufgeklebter Balken wirkt. */
.titelblock {
  padding-block: var(--ab-8) var(--ab-7);
  background:
    linear-gradient(160deg, var(--leitton-dunkel) 0%, var(--leitton-nacht) 100%);
  color: var(--tinte-auf-dunkel);
  border-bottom: 0;
}

.titelblock h1 { color: var(--tinte-auf-dunkel); }

/* Die Beschriftung über der Überschrift steht sonst im Leitton selbst - auf
   dunkelblauem Grund wäre das Blau auf Blau. Hier die helle Stufe. */
.titelblock .beschriftung { color: var(--leitton-schleier); }

.titelblock__vorspann {
  font-size: var(--grad-vorspann);
  line-height: 1.5;
  color: var(--leitton-schleier);
  max-width: var(--breite-satz);
  margin-top: var(--ab-4);
}

.titelblock a { color: var(--tinte-auf-dunkel); }

/* Beschriftung über der Überschrift. Rationiert eingesetzt, nicht auf jeder
 * zweiten Sektion. */
.beschriftung {
  display: block;
  font-family: var(--schrift-text);
  font-size: var(--grad-mini);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--leitton);
  margin-bottom: var(--ab-3);
}

/* Der Titelbereich der Startseite: Text links, Bild rechts, bewusst
 * asymmetrisch geteilt statt halbe-halbe. */
.schau {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ab-7);
  align-items: center;
  /* Unten deutlich weniger: Darunter folgt sofort der Hauptbereich mit
     eigenem Abstand. Beides zusammen ergab rund 10 rem Leere zwischen
     Titelbild und erster Ueberschrift. */
  padding-block: var(--ab-7) var(--ab-6);
}

/* Ohne min-width: 0 bestimmt der laengste unteilbare Textteil die Spaltenbreite
 * und sprengt den Satzspiegel. Siehe Anmerkung zur Silbentrennung in base.css. */
.schau > * { min-width: 0; }

.schau__titel {
  font-size: var(--grad-schau);
  letter-spacing: -0.03em;
  margin-bottom: var(--ab-5);
}

.schau__text {
  font-size: var(--grad-vorspann);
  line-height: 1.55;
  color: var(--tinte-gedaempft);
  max-width: 38ch;
}

.schau__bild {
  border-radius: var(--radius-gross);
  overflow: hidden;
  box-shadow: var(--schatten-hoch);
  aspect-ratio: 4 / 3;
  position: relative;
}

/* display: contents nimmt das <picture> aus dem Layout heraus, damit das
   <img> direkt im Kasten sitzt. Siehe Anmerkung in bausteine.css. */
.schau__bild picture { display: contents; }
.schau__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 56rem) {
  /* Die rechte Spalte ist die breitere.
     Vorher 1,05 zu 0,95 zugunsten des Textes. Seit dort der Materialkreis
     steht, bremste die Spaltenbreite ihn ab 1440 px auf 547 px aus, obwohl
     Fenster und Höhe mehr hergegeben hätten. Der Auftraggeber will den Stein
     groß sehen, also bekommt er die breitere Hälfte. */
  .schau { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: var(--ab-8); }
}

/* ============================================================= Schaltflächen */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ab-2);
  padding: 0.8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--schrift-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dauer-kurz) var(--kurve),
              border-color var(--dauer-kurz) var(--kurve),
              transform var(--dauer-kurz) var(--kurve);
}

.knopf--haupt {
  background: var(--leitton);
  color: var(--tinte-auf-dunkel);
}

.knopf--haupt:hover { background: var(--leitton-tief); color: var(--tinte-auf-dunkel); }
.knopf:active { transform: translateY(1px); }

.knopf--rand {
  background: var(--flaeche);
  border-color: var(--linie-kraeftig);
  color: var(--tinte);
}

.knopf--rand:hover { border-color: var(--leitton); color: var(--leitton-tief); }

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ab-3);
  margin-top: var(--ab-6);
}

/* ==================================================================== Karten */

/* Karten gibt es nur dort, wo die Absetzung eine Rangfolge ausdrückt, nicht als
 * Standardverpackung für jeden Absatz. */
.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: var(--ab-6);
  transition: border-color var(--dauer) var(--kurve),
              box-shadow var(--dauer) var(--kurve),
              transform var(--dauer) var(--kurve);
}

a.karte { display: block; text-decoration: none; color: inherit; }

a.karte:hover {
  border-color: var(--linie-kraeftig);
  box-shadow: var(--schatten-karte);
  transform: translateY(-2px);
}

.karte__titel {
  font-size: var(--grad-h4);
  margin: 0 0 var(--ab-2);
}

.karte__text { color: var(--tinte-gedaempft); font-size: var(--grad-klein); margin: 0; }

.karte__bild {
  margin: calc(var(--ab-6) * -1) calc(var(--ab-6) * -1) var(--ab-5);
  border-radius: var(--radius-gross) var(--radius-gross) 0 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.karte__bild img { width: 100%; height: 100%; object-fit: cover; }

/* Raster für Kartengruppen. Bewusst zwei- und vierspaltig statt der üblichen
 * drei gleichen Kacheln. */
.raster {
  display: grid;
  gap: var(--ab-5);
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
}

.raster--zwei {
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}

/* =================================================================== Bilder */

.bildblock {
  margin: var(--ab-7) 0;
}

.bildblock img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--linie);
}

.bildblock figcaption {
  margin-top: var(--ab-3);
  font-size: var(--grad-klein);
  line-height: 1.5;
  color: var(--tinte-leise);
  padding-left: var(--ab-4);
  border-left: 2px solid var(--leitton-schleier);
}

/* Bildstrecke, wechselnde Formate statt gleichförmiger Kacheln. */
/* Bildstrecke. Die Spaltenzahl kommt aus dem Generator, nicht aus auto-fill:
   Bei fuenf Motiven und vier Spalten haengt das fuenfte allein in der letzten
   Reihe. Siehe spalten_fuer() in build/seiten-bauen.py. */
.bildstrecke {
  display: grid;
  gap: var(--ab-5) var(--ab-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: var(--ab-7) 0;
}

@media (min-width: 48rem) {
  .bildstrecke--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bildstrecke--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bildstrecke--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.bildstrecke figure { margin: 0; }

.bildstrecke picture { display: contents; }

.bildstrecke img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--linie);
}

.bildstrecke figcaption {
  margin-top: var(--ab-2);
  font-size: var(--grad-mini);
  line-height: 1.45;
  color: var(--tinte-leise);
  /* Die Bildunterschriften aus dem Bautagebuch sind ganze Saetze mit langen
     Komposita ("Deckenrandschalung", "Passivhausschalsteine"). In einer 162 px
     breiten Kachel passt so ein Wort nicht - gemessen lief eine Unterschrift
     225 px breit und machte die ganze Seite um 45 px waagerecht scrollbar. */
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ================================================================= Tabellen */

.tabellenhuelle {
  overflow-x: auto;
  margin: var(--ab-6) 0;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--grad-klein);
}

thead th {
  text-align: left;
  font-weight: 700;
  color: var(--tinte-kraeftig);
  background: var(--papier-tief);
  padding: var(--ab-3) var(--ab-4);
  border-bottom: 1px solid var(--linie-kraeftig);
  white-space: nowrap;
}

tbody td, tbody th {
  padding: var(--ab-3) var(--ab-4);
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
  text-align: left;
}

tbody tr:last-child :is(td, th) { border-bottom: 0; }
tbody tr:nth-child(even) :is(td, th) { background: var(--flaeche-tief); }

/* ================================================================== Hinweise */

.hinweis {
  background: var(--leitton-hauch);
  border-left: 3px solid var(--leitton);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--ab-5);
  margin: var(--ab-6) 0;
}

.hinweis p:last-child { margin-bottom: 0; }

/* Fehlender Inhalt, der noch nachgetragen werden muss. Sichtbar, aber nicht
 * schreiend, und im Prüfskript erfassbar. */
.nachtrag {
  border: 1px dashed var(--linie-kraeftig);
  border-radius: var(--radius);
  padding: var(--ab-5);
  margin: var(--ab-5) 0;
  color: var(--tinte-leise);
  font-size: var(--grad-klein);
  background: var(--papier-tief);
}

/* =============================================================== Brotkrumen */

.brotkrumen {
  font-size: var(--grad-klein);
  color: var(--tinte-leise);
  padding-block: var(--ab-4);
}

.brotkrumen ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ab-2);
  margin: 0;
  padding: 0;
}

.brotkrumen li { margin: 0; display: inline-flex; align-items: center; gap: var(--ab-2); }
.brotkrumen li + li::before { content: "/"; color: var(--linie-kraeftig); }
.brotkrumen a { color: var(--tinte-gedaempft); text-decoration: none; }
.brotkrumen a:hover { color: var(--leitton); text-decoration: underline; }

/* Brotkrumen, die unmittelbar vor dem farbigen Titelband stehen, gehören
   optisch dazu.
 *
 * Gemessen auf /schalungssteine/: Kopfzeile 73 px, dann ein 57 px hoher
 * heller Streifen, dann das dunkelblaue Band. Der Streifen las sich als Naht,
 * nicht als Gestaltung. Die Fläche ist hier das reine Dunkelblau - genau die
 * Farbe, mit der der Verlauf des Bandes oben anfängt. Damit gehen beide
 * ineinander über, ohne dass eine Kante sichtbar wird.
 *
 * :has() kennt jeder aktuelle Browser. Wo nicht, bleiben die Brotkrumen hell -
 * dann sieht es aus wie vorher und nichts ist kaputt. */
.brotkrumen:has(+ .titelblock) {
  background: var(--leitton-dunkel);
  color: var(--leitton-schleier);
  padding-block: var(--ab-5) var(--ab-3);
}

.brotkrumen:has(+ .titelblock) a { color: var(--leitton-schleier); }
.brotkrumen:has(+ .titelblock) a:hover { color: var(--tinte-auf-dunkel); }
.brotkrumen:has(+ .titelblock) li + li::before { color: var(--linie-kraeftig); }
.brotkrumen:has(+ .titelblock) [aria-current] { color: var(--tinte-auf-dunkel); }

/* Das Band schließt oben direkt an, deshalb dort weniger Luft. */
.brotkrumen:has(+ .titelblock) + .titelblock { padding-block: var(--ab-6) var(--ab-7); }

/* ============================================================== Kontaktband */

.kontaktband {
  background: var(--leitton-nacht);
  color: var(--tinte-auf-dunkel);
  padding-block: var(--ab-8);
}

.kontaktband h2 { color: var(--tinte-auf-dunkel); margin-top: 0; }
.kontaktband p { color: var(--leitton-schleier); }

.kontaktband .knopf--haupt { background: var(--leitton); }
.kontaktband .knopf--haupt:hover { background: var(--leitton-tief); }

.kontaktband .knopf--rand {
  background: transparent;
  border-color: var(--linie-auf-dunkel);
  color: var(--tinte-auf-dunkel);
}

.kontaktband .knopf--rand:hover { border-color: var(--leitton-schleier); color: var(--tinte-auf-dunkel); }

/* ================================================================= Fußzeile */

.fusszeile {
  background: var(--leitton-dunkel);
  color: var(--leitton-schleier);
  padding-block: var(--ab-8) var(--ab-6);
  font-size: var(--grad-klein);
}

.fusszeile__raster {
  display: grid;
  gap: var(--ab-6);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}

.fusszeile h2 {
  font-family: var(--schrift-text);
  font-size: var(--grad-mini);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinte-auf-dunkel);
  margin: 0 0 var(--ab-4);
}

.fusszeile ul { list-style: none; margin: 0; padding: 0; }
.fusszeile li { margin-bottom: var(--ab-2); }
.fusszeile a { color: var(--leitton-schleier); text-decoration: none; }
.fusszeile a:hover { color: var(--tinte-auf-dunkel); text-decoration: underline; }

.fusszeile__schluss {
  margin-top: var(--ab-7);
  padding-top: var(--ab-5);
  border-top: 1px solid var(--linie-auf-dunkel);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-4);
  justify-content: space-between;
  font-size: var(--grad-mini);
}

/* ========================================================== Seitenverweise */

/* Weiterführende Seiten am Fuß eines Artikels. Kein Karussell, keine Punkte,
 * einfach eine Liste mit klarer Rangfolge. */
.weiterlesen {
  border-top: 1px solid var(--linie);
  margin-top: var(--ab-8);
  padding-top: var(--ab-6);
}

.weiterlesen__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ab-3);
}

.weiterlesen__liste a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ab-4);
  padding: var(--ab-3) var(--ab-4);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  text-decoration: none;
  color: var(--tinte);
  font-weight: 600;
  transition: border-color var(--dauer-kurz) var(--kurve),
              transform var(--dauer-kurz) var(--kurve);
}

.weiterlesen__liste a:hover {
  border-color: var(--leitton);
  color: var(--leitton-tief);
  transform: translateX(2px);
}

.weiterlesen__liste span { color: var(--tinte-leise); font-weight: 400; font-size: var(--grad-mini); }

/* ================================================================ Rufnummer */

/* Auf mehreren Seiten stand die Telefonnummer als Überschrift im Quelltext.
 * Der Wortlaut bleibt, die Auszeichnung wird richtiggestellt: kein h3, sondern
 * ein wählbarer Verweis mit dem Gewicht, das ihm inhaltlich zusteht. */
.rufnummer {
  margin: var(--ab-6) 0;
}

.rufnummer a {
  display: inline-flex;
  align-items: center;
  gap: var(--ab-3);
  font-family: var(--schrift-titel);
  font-size: var(--grad-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tinte-kraeftig);
  text-decoration: none;
  padding: var(--ab-3) var(--ab-5);
  border: 1px solid var(--linie-kraeftig);
  border-left: 3px solid var(--leitton);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--flaeche);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dauer-kurz) var(--kurve),
              color var(--dauer-kurz) var(--kurve);
}

.rufnummer a:hover { color: var(--leitton-tief); border-color: var(--leitton); }

/* ================================================================ Formulare */

.formular {
  margin-top: var(--ab-7);
  padding: var(--ab-6);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
}

.feld { margin-bottom: var(--ab-5); }

.feld label,
.feld legend {
  display: block;
  font-size: var(--grad-klein);
  font-weight: 600;
  color: var(--tinte-kraeftig);
  margin-bottom: var(--ab-2);
}

/* Pflichtfelder werden benannt, nicht nur mit einem Sternchen markiert.
 * Ein Sternchen allein muss der Leser erst entschlüsseln. */
.pflicht {
  display: inline-block;
  margin-left: var(--ab-2);
  font-size: var(--grad-mini);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--leitton);
}

.feld input[type="text"],
.feld input[type="email"],
.feld textarea,
.feld select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 1rem;
  color: var(--tinte);
  background: var(--papier);
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--radius);
  transition: border-color var(--dauer-kurz) var(--kurve),
              box-shadow var(--dauer-kurz) var(--kurve);
}

.feld textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }

.feld :is(input, textarea, select):focus {
  border-color: var(--leitton);
  box-shadow: 0 0 0 3px var(--fokus-hof);
  outline: none;
}

.feld input[type="file"] {
  width: 100%;
  font-size: var(--grad-klein);
  padding: var(--ab-3);
  background: var(--papier);
  border: 1px dashed var(--linie-kraeftig);
  border-radius: var(--radius);
}

.feld--wahl { border: 0; padding: 0; margin-inline: 0; }
.feld--wahl .wahl { display: inline-flex; align-items: center; gap: var(--ab-2); margin-right: var(--ab-5); }
.feld--wahl .wahl label { margin: 0; font-weight: 400; }

.feld--zustimmung {
  display: flex;
  align-items: flex-start;
  gap: var(--ab-3);
  padding: var(--ab-4);
  background: var(--papier-tief);
  border-radius: var(--radius);
}

.feld--zustimmung input { margin-top: 0.35rem; flex: none; width: 1.1rem; height: 1.1rem; }
.feld--zustimmung label { font-weight: 400; font-size: var(--grad-klein); line-height: 1.5; margin: 0; }

.formular__hinweis {
  font-size: var(--grad-klein);
  color: var(--tinte-leise);
  margin-bottom: var(--ab-5);
}

.formular__meldung { margin-top: var(--ab-4); font-weight: 600; }
.formular__meldung:empty { display: none; }
.formular__meldung[data-art="fehler"] { color: var(--leitton-tief); }

.feld[data-fehler] :is(input, textarea, select) { border-color: var(--leitton-tief); }
.feld__fehler { display: block; margin-top: var(--ab-2); font-size: var(--grad-klein); color: var(--leitton-tief); }

/* Der Honigtopf muss für Menschen unsichtbar und für Vorleser übersprungen
 * sein, darf aber NICHT display:none haben - manche Ausfüllhelfer füllen
 * unsichtbare Felder trotzdem, und display:none faellt Bots sofort auf. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =================================================================== Videos */

.video {
  position: relative;
  margin: var(--ab-6) 0;
  border-radius: var(--radius-gross);
  overflow: hidden;
  background: var(--leitton-nacht);
  aspect-ratio: 16 / 9;
}

.video picture,
.video img,
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video img { object-fit: cover; }

.video__start {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ab-3);
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--tinte-auf-dunkel);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dauer) var(--kurve);
}

.video__start:hover { background: rgb(14 24 54 / 28%); }

.video__zeichen {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--leitton);
  box-shadow: var(--schatten-hoch);
  position: relative;
  transition: transform var(--dauer) var(--kurve);
}

/* Abspielzeichen als Dreieck aus Rahmenkanten, kein zusätzliches Bild. */
.video__zeichen::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.75rem 0 0.75rem 1.25rem;
  border-color: transparent transparent transparent var(--tinte-auf-dunkel);
}

.video__start:hover .video__zeichen { transform: scale(1.06); }

.video__wort {
  background: rgb(14 24 54 / 72%);
  padding: var(--ab-2) var(--ab-4);
  border-radius: var(--radius);
  font-size: var(--grad-klein);
}

.video__hinweis {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: var(--ab-3) var(--ab-4);
  background: rgb(14 24 54 / 78%);
  color: var(--leitton-schleier);
  font-size: var(--grad-mini);
  line-height: 1.4;
}

.video.ist-gestartet .video__start,
.video.ist-gestartet .video__hinweis { display: none; }

/* Sinnbilder, etwa die beiden Landesflaggen. In ihrer echten Größe. */
.sinnbildreihe {
  display: flex;
  align-items: center;
  gap: var(--ab-3);
  margin: var(--ab-5) 0;
}

.sinnbildreihe picture,
.sinnbildreihe img {
  width: 2.5rem;
  height: auto;
  border-radius: var(--radius-klein);
  border: 1px solid var(--linie);
}

/* Untermenüpunkte einrücken. Vorher stand der Einzug als style-Attribut im
   Markup; die Content-Security-Policy mit style-src 'self' verbietet das und
   der Browser hat ihn verworfen. */
.schublade__verweis--unter { padding-left: calc(var(--rand-seite) + 1rem); }

/* Hoechstbreiten fuer Bilder, deren Original klein ist.
 *
 * Gemessen: 41 Einbindungen wurden groesser dargestellt als das Motiv ist, im
 * schlimmsten Fall Faktor 0,36 (265 px echt, 734 px gezeigt). Auf dem Server
 * gibt es fuer diese Motive kein groesseres Original - Hochrechnen bringt keine
 * Schaerfe. Also wird die Darstellung begrenzt. Siehe breitenklasse() in
 * build/seiten-bauen.py. */
.bis-240 { max-width: 240px; }
.bis-280 { max-width: 280px; }
.bis-320 { max-width: 320px; }
.bis-380 { max-width: 380px; }
.bis-440 { max-width: 440px; }
.bis-500 { max-width: 500px; }
.bis-560 { max-width: 560px; }
.bis-640 { max-width: 640px; }
.bis-720 { max-width: 720px; }
.bis-820 { max-width: 820px; }
.bis-940 { max-width: 940px; }


/* Auf schmalen Schirmen steht der Materialkreis VOR der Überschrift.
   Der Auftraggeber will, dass man beim Betreten der Seite sofort Schalsteine
   sieht - auf dem Handy heißt das: als erstes Element, nicht nach einem
   Bildschirm Text. */
@media (max-width: 56rem) {
  .schau > .materialkreis--schau { order: -1; margin-bottom: var(--ab-2); }
}

/* Niedrige Fenster: Kreis oben ausrichten statt mittig.
 *
 * Bei 960x600 lag die Unterkante des Kreises 56 px unter der Falz - nicht,
 * weil er zu groß war (340 px), sondern weil die Textspalte höher ist und
 * "align-items: center" ihn mittig dazu setzt. Oben ausgerichtet beginnt er
 * direkt unter der Kopfzeile und bleibt im Blick. Auf hohen Schirmen bleibt
 * die mittige Ausrichtung, dort sieht sie ruhiger aus. */
@media (max-height: 720px) and (min-width: 56rem) {
  .schau {
    align-items: start;
    padding-block: var(--ab-6) var(--ab-5);
  }
}