/* ============================================================
   WERKBANK — Kopf, Fuss und Startseite (0.2.0)

   Vorbild ist eine Werkstattzeichnung: feine Linien, Masslinien mit
   Pfeilen als Abschnittsmarken, Werkzeuge als Stueckliste, ein
   Schriftfeld unten, Blattrand aussen. Die Farben stammen aus dem
   akmaker-Zeichen (siehe style.css) — Holz, Karamell, Creme und das
   dunkle Sechseck.

   Farben ausschliesslich ueber die Palette (--wp--preset--color--*),
   damit hell und dunkel stimmen. Keine festen Farbwerte hier.
   Alle Klassen tragen die Vorsilbe wb-.
   ============================================================ */

:root {
  --wb-rand: clamp(1rem, 4.5vw, 4.5rem);
  --wb-linie: 1px solid var(--wp--preset--color--ink);
  --wb-dick: 2px solid var(--wp--preset--color--ink);
  --wb-fein: 1px solid var(--wp--preset--color--line);
  --wb-mono: var(--wp--preset--font-family--mono);
  --wb-raster: color-mix(in srgb, var(--wp--preset--color--line) 55%, transparent);
}

.wp-site-blocks > header:has(.wb-kopf),
.wp-site-blocks > .wb-start,
.wp-site-blocks > footer:has(.wb-fuss) { margin-block-start: 0; }

/* ---- Blattrand ----------------------------------------------------
   Auf breiten Bildschirmen steht die ganze Seite in einem doppelten
   Rahmen wie ein Zeichenblatt. Auf dem Handy entfaellt er. */
@media (min-width: 900px) {
  body { padding: 18px; }
  .wp-site-blocks {
    border: var(--wb-linie);
    min-height: calc(100vh - 36px);
    outline: 1px solid var(--wp--preset--color--line);
    outline-offset: 6px;
  }
}

.wb-breit {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: calc(1200px + 2 * var(--wb-rand));
  padding-inline: var(--wb-rand);
  width: 100%;
}

/* Ueberschriften: Archivo schmal gestellt und in Grossbuchstaben —
   die kraeftigen Buchstaben „AK" im Zeichen sind das Vorbild. */
.wb-titel, .wb-h2, .wb-marke span, .wb-sf__benennung strong,
.wp-site-blocks > main h1.wp-block-heading {
  font-stretch: 75%;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.wb-mono {
  color: var(--wp--preset--color--muted);
  font-family: var(--wb-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
}
.wb-klein { color: var(--wp--preset--color--muted); font-size: 0.9375rem; margin: 0; }
.wb-lead { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--lead); line-height: 1.5; margin: 0; max-width: 38rem; }
.wb-h2 { font-size: var(--wp--preset--font-size--h-2); font-weight: 700; line-height: 1.05; margin: 0; }
.wb-weiter { color: var(--wp--preset--color--accent-text); font-weight: 600; text-underline-offset: 0.2em; }
.wb-holz { color: var(--wp--preset--color--holz); }

/* ---- Kopfzeile --------------------------------------------------- */
.wb-kopf { border-bottom: var(--wb-linie); }
.wb-kopf__zeile { gap: 1.25rem; min-height: 76px; }
.wb-kopf__rechts { align-items: center; gap: 1.5rem; }
.wb-marke {
  align-items: center;
  color: var(--wp--preset--color--ink);
  display: inline-flex;
  gap: 0.7rem;
  text-decoration: none;
  white-space: nowrap;
}
.wb-marke img { display: block; height: 44px; width: 44px; }
.wb-marke span { font-size: 1.6rem; font-weight: 800; }
.wb-marke:hover { color: var(--wp--preset--color--ink); }
.wb-nav {
  font-size: 1.125rem;
  font-stretch: 75%;
  font-weight: 600;
  gap: 1.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.wb-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--ink); text-decoration: none; }
.wb-nav .wp-block-navigation-item__content:hover,
.wb-nav .ist-aktuelle-seite { color: var(--wp--preset--color--accent-text); text-decoration: underline; text-underline-offset: 0.3em; }
/* Aufgeklapptes Handy-Menue: WordPress setzt dafuer fest Weiss und Schwarz —
   in der dunklen Ansicht stand das Menue sonst als weisse Flaeche da. */
.wb-kopf .wb-nav:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open,
.wb-kopf .wb-nav:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
}
.wb-kopf .wb-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--wp--preset--color--ink); }
.wb-kopf .wb-nav .wp-block-navigation__responsive-container-open,
.wb-kopf .wb-nav .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--ink); }
.wb-konto--an { align-items: center; display: flex; gap: 0.9rem; white-space: nowrap; }
.wb-konto__name { font-weight: 700; }
@media (max-width: 781px) {
  .wb-kopf__rechts { gap: 0.6rem; }
  .wb-konto__name { display: none; }
  .wb-knopf.wb-konto { padding-inline: 0.9rem; }
}

/* ---- Knoepfe ----------------------------------------------------- */
.wb-knopf {
  align-items: center;
  background: var(--wp--preset--color--accent-strong);
  border: 1px solid var(--wp--preset--color--accent-strong);
  color: var(--wp--preset--color--paper);
  display: inline-flex;
  font-size: 1.125rem;
  font-stretch: 75%;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.04em;
  min-height: 46px;
  padding: 0 1.4rem;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.wb-knopf:hover { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
.wb-knopf--rahmen { background: transparent; border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--ink); }
.wb-knopf--rahmen:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
.wb-knopf--signal { background: var(--wp--preset--color--signal); border-color: var(--wp--preset--color--signal); color: var(--wp--preset--color--auf-akzent); }
.wb-knopf--signal:hover { background: var(--wp--preset--color--holz); border-color: var(--wp--preset--color--holz); color: var(--wp--preset--color--auf-akzent); }
.wb-knopfzeile { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 0.5rem; }

/* ---- Held -------------------------------------------------------- */
.wb-held {
  background-color: var(--wp--preset--color--paper);
  background-image:
    linear-gradient(var(--wb-raster) 1px, transparent 1px),
    linear-gradient(90deg, var(--wb-raster) 1px, transparent 1px);
  background-position: -1px -1px;
  background-size: 24px 24px;
  border-bottom: var(--wb-linie);
  padding-block: clamp(2.75rem, 6vw, 5rem);
}
.wb-held__raster {
  align-items: center;
  display: grid;
  gap: 2.5rem 4rem;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
@media (max-width: 900px) { .wb-held__raster { grid-template-columns: minmax(0, 1fr); } }
.wb-held__text { display: flex; flex-direction: column; gap: 1.4rem; }
.wb-titel {
  font-size: var(--wp--preset--font-size--display);
  font-weight: 800;
  line-height: 0.95;
  margin: 0;
}
.wb-held__figur { margin: 0; max-width: 460px; justify-self: center; width: 100%; }
/* Das Zeichen liegt auf einem kleinen Blatt mit Schnittmarken in den Ecken. */
.wb-held__blatt {
  background: var(--wp--preset--color--surface);
  border: var(--wb-linie);
  padding: clamp(1rem, 3vw, 1.75rem);
  position: relative;
}
.wb-held__blatt::before,
.wb-held__blatt::after {
  border: 0 solid var(--wp--preset--color--accent-text);
  content: "";
  height: 14px;
  position: absolute;
  width: 14px;
}
.wb-held__blatt::before { border-left-width: 2px; border-top-width: 2px; left: -7px; top: -7px; }
.wb-held__blatt::after { border-bottom-width: 2px; border-right-width: 2px; bottom: -7px; right: -7px; }
.wb-held__blatt img { display: block; height: auto; width: 100%; }
.wb-held__figur figcaption { border-top: var(--wb-fein); margin-top: 0.75rem; padding-top: 0.6rem; text-align: right; }

/* ---- Abschnitte -------------------------------------------------- */
.wb-abschnitt { padding-block: clamp(3rem, 6vw, 5rem); }
.wb-abschnitt + .wb-abschnitt { border-top: var(--wb-fein); }
.wb-abschnitt__text { display: flex; flex-direction: column; gap: 1.1rem; }
.wb-zweispaltig {
  align-items: start;
  display: grid;
  gap: 2.5rem 4rem;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}
@media (max-width: 900px) { .wb-zweispaltig { grid-template-columns: minmax(0, 1fr); } }

/* Masslinie als Abschnittsmarke:  |<——— POS. 1 · WERKZEUGE ———>| */
.wb-masslinie {
  align-items: center;
  border-inline: 1px solid var(--wp--preset--color--accent-text);
  color: var(--wp--preset--color--accent-text);
  display: flex;
  font-family: var(--wb-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  height: 22px;
  justify-content: center;
  letter-spacing: 0.06em;
  margin: 0 0 2rem;
  position: relative;
  text-transform: uppercase;
}
.wb-masslinie::before {
  background: currentColor;
  content: "";
  height: 1px;
  inset-inline: 0;
  position: absolute;
  top: 50%;
}
.wb-masslinie span { background: var(--wp--preset--color--paper); padding-inline: 0.9rem; position: relative; }
.wb-masslinie::after {
  background:
    conic-gradient(from 60deg at 0 50%, currentColor 0 60deg, transparent 0) left center / 10px 8px no-repeat,
    conic-gradient(from 240deg at 100% 50%, currentColor 0 60deg, transparent 0) right center / 10px 8px no-repeat;
  content: "";
  inset: 0;
  position: absolute;
}

/* ---- Vier Felder wie im Zeichen ----------------------------------
   Die Flaechen tragen feste Logofarben. Die Schrift darauf ist so
   gewaehlt, dass sie in BEIDEN Farbwelten traegt (auf-akzent auf holz
   und signal, nacht-text auf nacht, ink auf sand). */
.wb-felder {
  border: var(--wb-dick);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.wb-feld-kachel {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 9.5rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
}
.wb-feld-kachel:nth-child(1) { border-right: var(--wb-dick); border-bottom: var(--wb-dick); }
.wb-feld-kachel:nth-child(2) { border-bottom: var(--wb-dick); }
.wb-feld-kachel:nth-child(3) { border-right: var(--wb-dick); }
.wb-feld-kachel strong { font-size: 1.5rem; font-stretch: 75%; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.wb-feld-kachel .wb-mono { color: inherit; opacity: 0.8; }
.wb-feld-kachel--holz { background: var(--wp--preset--color--holz); color: var(--wp--preset--color--auf-akzent); }
.wb-feld-kachel--signal { background: var(--wp--preset--color--signal); color: var(--wp--preset--color--auf-akzent); }
.wb-feld-kachel--nacht { background: var(--wp--preset--color--nacht); color: var(--wp--preset--color--nacht-text); }
.wb-feld-kachel--sand { background: var(--wp--preset--color--sand); color: var(--wp--preset--color--ink); }
@media (max-width: 480px) {
  .wb-felder { grid-template-columns: minmax(0, 1fr); }
  .wb-feld-kachel { border-right: 0 !important; border-bottom: var(--wb-dick); min-height: 0; }
  .wb-feld-kachel:last-child { border-bottom: 0; }
}

/* ---- Stueckliste ------------------------------------------------- */
.wb-stueckliste { border: var(--wb-linie); border-collapse: collapse; font-size: 1rem; width: 100%; }
.wb-stueckliste th,
.wb-stueckliste td { border: var(--wb-fein); padding: 0.75rem 0.9rem; text-align: left; vertical-align: top; }
.wb-stueckliste thead th {
  border-bottom: var(--wb-linie);
  color: var(--wp--preset--color--muted);
  font-family: var(--wb-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wb-stueckliste td:first-child { width: 3.5rem; }
.wb-stueckliste td:nth-child(2) { white-space: nowrap; }
.wb-stueckliste a { color: var(--wp--preset--color--accent-text); font-weight: 700; }
.wb-stueckliste td:last-child { color: var(--wp--preset--color--muted); }
@media (max-width: 560px) {
  .wb-stueckliste th:nth-child(3), .wb-stueckliste td:nth-child(3) { display: none; }
  .wb-stueckliste td:nth-child(2) { white-space: normal; }
}

/* ---- Pruefung Browser (Flasher) ---------------------------------- */
.wb-pruefung {
  align-items: center;
  background: var(--wp--preset--color--sand);
  border: var(--wb-linie);
  display: flex;
  font-weight: 600;
  gap: 0.75rem;
  margin: 0;
  padding: 0.8rem 1rem;
}
.wb-pruefung svg { flex: 0 0 auto; }
.wb-pruefung__ja { display: none; }
.wb-pruefung[data-zustand="ja"] .wb-pruefung__ja { display: inline; }
.wb-pruefung[data-zustand="ja"] .wb-pruefung__nein { display: none; }
.wb-pruefung[data-zustand="nein"] svg { color: var(--wp--preset--color--accent-text); }

/* ---- Kurzrechner (Druckkosten, Pool) ----------------------------- */
.wb-rechner {
  background: var(--wp--preset--color--surface);
  border: var(--wb-linie);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.1rem, 3vw, 1.75rem);
  position: relative;
}
/* Eckmarken wie Schnittmarken auf einem Plan */
.wb-rechner::before,
.wb-rechner::after {
  border: 0 solid var(--wp--preset--color--accent-text);
  content: "";
  height: 14px;
  position: absolute;
  width: 14px;
}
.wb-rechner::before { border-left-width: 2px; border-top-width: 2px; left: -7px; top: -7px; }
.wb-rechner::after { border-bottom-width: 2px; border-right-width: 2px; bottom: -7px; right: -7px; }
.wb-rechner__felder { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wb-rechner__felder--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) {
  .wb-rechner__felder,
  .wb-rechner__felder--zwei { grid-template-columns: minmax(0, 1fr); }
}
.wb-feld { display: flex; flex-direction: column; font-size: 0.9375rem; font-weight: 600; gap: 0.4rem; justify-content: flex-end; }
.wb-feld--breit { grid-column: 1 / -1; }
.wb-feld__eingabe { align-items: center; display: flex; gap: 0.5rem; }
.wb-feld__eingabe span { color: var(--wp--preset--color--muted); font-family: var(--wb-mono); font-size: 0.875rem; white-space: nowrap; }
.wb-feld input {
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--input-border);
  border-radius: 0;
  box-sizing: border-box;
  color: var(--wp--preset--color--ink);
  font-family: var(--wb-mono);
  font-size: 1.0625rem;
  min-height: 44px;
  min-width: 0;
  padding: 0.35rem 0.6rem;
  width: 100%;
}
.wb-feld input:focus-visible { outline: 2px solid var(--wp--preset--color--focus); outline-offset: 2px; }
.wb-rechner__ergebnis { border-top: var(--wb-linie); margin: 0; }
.wb-rechner__ergebnis > div {
  align-items: baseline;
  border-bottom: var(--wb-fein);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.65rem 0;
}
.wb-rechner__ergebnis dt { color: var(--wp--preset--color--muted); margin: 0; }
.wb-rechner__ergebnis dd { font-family: var(--wb-mono); font-variant-numeric: tabular-nums; margin: 0; white-space: nowrap; }
.wb-rechner__ergebnis .wb-rechner__gesamt { border-bottom: var(--wb-linie); }
.wb-rechner__gesamt dt { color: var(--wp--preset--color--ink); font-weight: 600; }
.wb-rechner__gesamt dd { color: var(--wp--preset--color--accent-text); font-size: 1.5rem; font-weight: 600; }

/* ---- Firmware (dunkler Abschnitt in der Farbe des Sechsecks) -----
   Eigene Farben „nacht", „nacht-text" und „holz": bleiben in BEIDEN
   Farbwelten dunkel bzw. hell. Mit ink/paper wuerde der Abschnitt in
   der dunklen Ansicht hell. */
.wb-abschnitt--dunkel { background: var(--wp--preset--color--nacht); color: var(--wp--preset--color--nacht-text); }
.wb-abschnitt + .wb-abschnitt--dunkel { border-top-color: var(--wp--preset--color--nacht); }
.wb-abschnitt--dunkel .wb-h2 { color: var(--wp--preset--color--nacht-text); }
.wb-fw__text { display: flex; flex-direction: column; gap: 1.1rem; }
.wb-fw__text p { margin: 0; }
.wb-fw__text .wb-knopf { align-self: flex-start; }
.wb-fw__raster {
  align-self: start;
  border: 1px solid var(--wp--preset--color--holz);
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}
.wb-fw__raster > div { border: 1px solid color-mix(in srgb, var(--wp--preset--color--nacht-text) 30%, transparent); display: flex; flex-direction: column; gap: 0.4rem; padding: 1.4rem; }
.wb-fw__raster dt { color: var(--wp--preset--color--holz); font-family: var(--wb-mono); font-size: 0.8125rem; text-transform: uppercase; }
.wb-fw__raster dd { font-size: 1.4rem; font-weight: 700; margin: 0; }
.wb-fw__breit { grid-column: 1 / -1; }
.wb-fw__raster .wb-fw__liste { font-size: 1.0625rem; font-weight: 500; line-height: 1.6; }

/* ---- Liste (Mitglieder) ------------------------------------------ */
.wb-liste { border-top: var(--wb-linie); list-style: none; margin: 0; padding: 0; }
.wb-liste li { align-items: baseline; border-bottom: var(--wb-fein); display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; justify-content: space-between; padding: 0.9rem 0; }
.wb-liste a { color: var(--wp--preset--color--ink); font-size: 1.125rem; font-weight: 600; text-decoration: none; }
.wb-liste a:hover { color: var(--wp--preset--color--accent-text); }
.wb-knopfzeile + .wb-knopfzeile, .wb-liste + .wb-knopfzeile { margin-top: 1.5rem; }

/* ---- Band (Kontakt) ---------------------------------------------- */
.wb-abschnitt--band { background: var(--wp--preset--color--sand); }
.wb-abschnitt + .wb-abschnitt--band { border-top: var(--wb-linie); }
.wb-band { align-items: center; display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; justify-content: space-between; }

/* ---- Fusszeile: Schriftfeld ---------------------------------------
   Aufgebaut wie das Feld unten rechts auf einer Werkstattzeichnung:
   Kaestchen mit einer kleinen Kopfzeile und dem Eintrag darunter. */
.wb-fuss { border-top: var(--wb-linie); padding-block: 2rem; }
.wb-schriftfeld {
  border: var(--wb-linie);
  display: grid;
  font-size: 0.9375rem;
  grid-template-areas:
    "ben ben zeichen jahr"
    "seiten seiten mass blatt";
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 0.6fr) minmax(0, 0.6fr);
  margin-left: auto;
  max-width: 900px;
}
.wb-sf__feld { border: var(--wb-fein); display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; padding: 0.55rem 0.8rem 0.7rem; }
.wb-sf__kopf {
  color: var(--wp--preset--color--muted);
  font-family: var(--wb-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wb-sf__benennung { grid-area: ben; }
.wb-sf__benennung strong { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.wb-sf__benennung span:last-child { color: var(--wp--preset--color--muted); }
.wb-sf__zeichen { grid-area: zeichen; }
.wb-sf__zeichen img { display: block; height: 48px; width: 48px; }
.wb-sf__jahr { grid-area: jahr; }
.wb-sf__seiten { grid-area: seiten; }
.wb-sf__mass { grid-area: mass; }
.wb-sf__blatt { grid-area: blatt; }
.wb-sf__links { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; }
.wb-sf__links a { color: var(--wp--preset--color--accent-text); }
@media (max-width: 700px) {
  .wb-schriftfeld {
    grid-template-areas:
      "ben ben"
      "zeichen jahr"
      "seiten seiten"
      "mass blatt";
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ---- Druck-Kalkulator (Kurzbefehl [druck_kalkulator]) ------------- */
.kalkulator {
  background: var(--wp--preset--color--surface);
  border: var(--wb-linie);
  margin-top: 1.5rem;
  padding: clamp(1.1rem, 3vw, 1.75rem);
  position: relative;
}
.kalkulator::before,
.kalkulator::after {
  border: 0 solid var(--wp--preset--color--accent-text);
  content: "";
  height: 14px;
  position: absolute;
  width: 14px;
}
.kalkulator::before { border-left-width: 2px; border-top-width: 2px; left: -7px; top: -7px; }
.kalkulator::after { border-bottom-width: 2px; border-right-width: 2px; bottom: -7px; right: -7px; }
.kalkulator__raster { display: grid; gap: 2.5rem; }
@media (min-width: 720px) { .kalkulator__raster { grid-template-columns: 1fr 1fr; } }
.kalkulator .ueberzeile { color: var(--wp--preset--color--accent-text); font-family: var(--wb-mono); font-size: 0.8125rem; letter-spacing: 0.06em; margin: 0 0 1rem; text-transform: uppercase; }
.kalkulator__feld { display: block; margin-bottom: 1rem; }
.kalkulator .feldname {
  color: var(--wp--preset--color--muted);
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.kalkulator__eingabe { align-items: center; display: flex; gap: 0.5rem; }
.kalkulator input[type="number"] {
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--input-border);
  border-radius: 0;
  box-sizing: border-box;
  color: var(--wp--preset--color--ink);
  font-family: var(--wb-mono);
  font-size: 1.0625rem;
  min-height: 44px;
  min-width: 0;
  padding: 0.35rem 0.6rem;
  width: 100%;
}
.kalkulator input:focus-visible { outline: 2px solid var(--wp--preset--color--focus); outline-offset: 2px; }
.kalkulator__einheit { color: var(--wp--preset--color--muted); font-family: var(--wb-mono); font-size: 0.875rem; white-space: nowrap; }
.kalkulator__zuruecksetzen {
  background: transparent;
  border: var(--wb-linie);
  border-radius: 0;
  color: var(--wp--preset--color--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  margin-top: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
}
.kalkulator__zuruecksetzen:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
.kalkulator__liste { border-top: var(--wb-linie); margin: 0; }
.kalkulator__zeile { align-items: baseline; border-bottom: var(--wb-fein); display: flex; gap: 1rem; justify-content: space-between; padding: 0.6rem 0; }
.kalkulator__zeile dt { color: var(--wp--preset--color--muted); margin: 0; }
.kalkulator__zeile dd { font-family: var(--wb-mono); font-variant-numeric: tabular-nums; margin: 0; white-space: nowrap; }
.kalkulator__zeile--summe dt { color: var(--wp--preset--color--ink); }
.kalkulator__zeile--gesamt { border-bottom: var(--wb-linie); }
.kalkulator__zeile--gesamt dt { color: var(--wp--preset--color--ink); font-weight: 700; }
.kalkulator__zeile--gesamt dd { color: var(--wp--preset--color--accent-text); font-size: 1.5rem; font-weight: 600; }
.kalkulator__fussnote { color: var(--wp--preset--color--muted); font-size: 0.875rem; margin: 1.25rem 0 0; }

/* ---- Schmale Bildschirme -----------------------------------------
   Marke + Menueknopf + Anmelden + Hell/Dunkel-Knopf passen nicht
   nebeneinander. Unter 480 px entfaellt der Hell/Dunkel-Knopf; die
   Seite folgt dort der Einstellung des Geraets. */
@media (max-width: 480px) {
  .theme-toggle { display: none; }
  .wb-kopf__zeile { gap: 0.6rem; }
  .wb-marke { gap: 0.5rem; }
  .wb-marke img { height: 36px; width: 36px; }
  .wb-marke span { font-size: 1.3rem; }
}
@media (max-width: 380px) { .wb-marke span { display: none; } }

/* Formularfelder: width 100 % plus Rahmen und Innenabstand ragte frueher
   ueber. Hier von vornherein abgefangen. */
:where(input, select, textarea) { box-sizing: border-box; max-width: 100%; }

/* Unterseiten: Die Seitenvorlage des Eltern-Themes (page-no-title) setzt
   am <main> den oberen Abstand auf 0 — die erste Zeile klebte dadurch an
   der Kopfzeile. Vorlagen mit eigenem Abstand im style-Attribut (404,
   Suche) behalten ihren, weil das style-Attribut Vorrang hat. */
.wp-site-blocks > main.wp-block-group { padding-top: clamp(2.25rem, 5vw, 4.5rem); }
.wp-site-blocks > main.wb-start { padding-top: 0; }