/* ============================================================
   HAUSBUCH — Kopf, Fuss und Startseite

   Farben ausschliesslich ueber die Palette (--wp--preset--color--*),
   damit hell und dunkel stimmen. Keine festen Farbwerte hier.
   Alle Klassen tragen die Vorsilbe hb-, damit sie mit nichts aus
   WordPress oder den Plugins zusammenstossen.
   ============================================================ */

:root {
  --hb-rand: clamp(1rem, 4vw, 3rem);
  --hb-radius: 18px;
  --hb-titel: var(--wp--preset--font-family--titel);
}

/* Kopf, Inhalt und Fuss stossen ohne den Standard-Abstand aneinander. */
.wp-site-blocks > .hb-kopf,
.wp-site-blocks > header:has(.hb-kopf),
.wp-site-blocks > .hb-start,
.wp-site-blocks > footer:has(.hb-fuss) { margin-block-start: 0; }

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

/* ---- Kopfzeile ------------------------------------------------- */
.hb-kopf {
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.hb-kopf__zeile {
  gap: 1.5rem;
  min-height: 84px;
}
.hb-kopf__rechts { gap: 1.25rem; }
.hb-marke {
  align-items: center;
  color: var(--wp--preset--color--ink);
  display: inline-flex;
  font-family: var(--hb-titel);
  font-size: 1.4rem;
  font-weight: 600;
  gap: 0.7rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.hb-marke svg { color: var(--wp--preset--color--accent-text); flex: 0 0 auto; }
.hb-marke:hover { color: var(--wp--preset--color--ink); }

.hb-nav { font-size: 1.0625rem; font-weight: 500; gap: 2rem; }
.hb-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--ink); text-decoration: none; }
.hb-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--accent-text); }

.hb-konto--an {
  align-items: center;
  border-left: 1px solid var(--wp--preset--color--line);
  display: flex;
  gap: 0.6rem;
  padding-left: 1.25rem;
  white-space: nowrap;
}
.hb-konto__initial {
  align-items: center;
  background: var(--wp--preset--color--salbei);
  border-radius: 999px;
  color: var(--wp--preset--color--paper);
  display: inline-flex;
  font-weight: 600;
  height: 38px;
  justify-content: center;
  width: 38px;
}
.hb-konto__name { font-weight: 600; }
.hb-konto__ab { font-size: 0.9375rem; margin-left: 0.35rem; }

@media (max-width: 781px) {
  .hb-konto__name { display: none; }
  .hb-kopf__rechts { gap: 0.6rem; }
  .hb-konto--an { border-left: 0; padding-left: 0; }
  .hb-knopf.hb-konto { padding-inline: 1rem; }
}
@media (max-width: 420px) {
  .hb-marke span { font-size: 1.15rem; }
  .hb-konto__ab { display: none; }
}

/* ---- Knoepfe und Verweise --------------------------------------- */
.hb-knopf {
  align-items: center;
  background: var(--wp--preset--color--accent);
  border-radius: 999px;
  color: var(--wp--preset--color--auf-akzent);
  display: inline-flex;
  font-size: 1.0625rem;
  font-weight: 600;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.5rem;
  text-decoration: none;
  white-space: nowrap;
}
.hb-knopf:hover { background: var(--wp--preset--color--accent-strong); color: var(--wp--preset--color--auf-akzent); }
.hb-knopf--dunkel { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); min-height: 44px; }
.hb-knopf--dunkel:hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--auf-akzent); }
.hb-knopf--hell { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); }
.hb-knopf--hell:hover { background: var(--wp--preset--color--sand); color: var(--wp--preset--color--ink); }
.hb-textlink { font-weight: 500; text-underline-offset: 0.25em; }

/* ---- Wiederkehrende Textbausteine ------------------------------- */
.hb-ueber {
  color: var(--wp--preset--color--muted);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}
.hb-titel {
  font-family: var(--hb-titel);
  font-size: var(--wp--preset--font-size--display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0;
}
.hb-titel--mittel { font-size: var(--wp--preset--font-size--h-1); }
.hb-h2 {
  font-size: var(--wp--preset--font-size--h-2);
  line-height: 1.08;
  margin: 0 0 0.75rem;
}
.hb-lead {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.55;
  margin: 0;
  max-width: 38rem;
}
.hb-randnotiz { color: var(--wp--preset--color--muted); font-size: 0.9375rem; margin: 0; max-width: 20rem; }
.hb-rubrik {
  color: var(--wp--preset--color--salbei);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hb-leer { color: var(--wp--preset--color--muted); }

/* ---- Abschnitte --------------------------------------------------- */
.hb-abschnitt { padding-block: clamp(3.5rem, 7vw, 6rem); }
.hb-abschnitt--sand { background: var(--wp--preset--color--sand); }
.hb-abschnitt--eng { padding-block: clamp(2rem, 4vw, 3.5rem); }
.hb-abschnitt--oben { padding-top: 1rem; }
.hb-abschnitt__kopf {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
  justify-content: space-between;
  margin-bottom: 2.25rem;
}
.hb-zweispaltig {
  display: grid;
  gap: 2rem 5rem;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
}
@media (max-width: 900px) { .hb-zweispaltig { grid-template-columns: minmax(0, 1fr); } }

/* ---- Held (Gastansicht) ------------------------------------------ */
.hb-held { padding-block: clamp(3rem, 8vw, 6.5rem); }
.hb-held__raster {
  align-items: center;
  display: grid;
  gap: 3rem 5rem;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
@media (max-width: 900px) { .hb-held__raster { grid-template-columns: minmax(0, 1fr); } }
.hb-held__text { display: flex; flex-direction: column; gap: 1.5rem; }
.hb-knopfzeile { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; margin-top: 0.5rem; }

.hb-brett { position: relative; padding: 0 1.5rem 1.5rem 0; }
.hb-brett::before {
  background: var(--wp--preset--color--sand);
  border-radius: var(--hb-radius);
  content: "";
  inset: 1.25rem 0 0 1.75rem;
  position: absolute;
  transform: rotate(2.5deg);
}
.hb-brett__karte {
  background: var(--wp--preset--color--flaeche);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--hb-radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  position: relative;
}
.hb-brett__kopf { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: space-between; }
.hb-brett__titel { font-size: 1.75rem; margin: 0; }
.hb-brett__karte > p { color: var(--wp--preset--color--muted); margin: 0.75rem 0 1.25rem; }
.hb-schloss {
  align-items: center;
  color: var(--wp--preset--color--muted);
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 600;
  gap: 0.4rem;
}
.hb-brett__zeilen { border-top: 1px solid var(--wp--preset--color--line); margin: 0; }
.hb-brett__zeilen > div {
  border-bottom: 1px solid var(--wp--preset--color--line);
  display: flex;
  font-size: 1.0625rem;
  justify-content: space-between;
  padding: 0.9rem 0;
}
.hb-brett__zeilen > div:last-child { border-bottom: 0; }
.hb-brett__zeilen dt { margin: 0; }
.hb-brett__zeilen dd { font-family: var(--hb-titel); font-weight: 600; margin: 0; }

/* ---- Rezeptkarten -------------------------------------------------- */
.hb-rezepte {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.hb-rezept {
  background: var(--wp--preset--color--flaeche);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 16px;
  color: var(--wp--preset--color--ink);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: space-between;
  overflow: hidden;
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}
.hb-rezept:hover { border-color: var(--wp--preset--color--accent-text); color: var(--wp--preset--color--ink); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .hb-rezept, .hb-kachel { transition: none; } .hb-rezept:hover, .hb-kachel:hover { transform: none; } }
.hb-rezept__bild { aspect-ratio: 4 / 3; display: block; object-fit: cover; width: 100%; }
.hb-rezept__innen { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.4rem 1.4rem 0; }
.hb-rezept__titel { font-family: var(--hb-titel); font-size: 1.4rem; font-weight: 600; line-height: 1.2; }
.hb-rezept__unter { color: var(--wp--preset--color--muted); font-size: 0.9375rem; line-height: 1.45; }
.hb-rezept__angaben { color: var(--wp--preset--color--muted); font-size: 0.875rem; font-weight: 500; padding: 0 1.4rem 1.3rem; }

.hb-rubriken {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.hb-rubriken li {
  background: var(--wp--preset--color--flaeche);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem 1.4rem;
}
.hb-rubriken__name { font-family: var(--hb-titel); font-size: 1.3rem; font-weight: 600; }
.hb-rubriken__zahl { color: var(--wp--preset--color--muted); font-size: 0.9375rem; }

/* ---- Liste der anderen Webseiten ----------------------------------- */
.hb-seitenliste { border-top: 2px solid var(--wp--preset--color--ink); list-style: none; margin: 0; padding: 0; }
.hb-seitenliste a {
  align-items: center;
  border-bottom: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--ink);
  display: grid;
  gap: 0.5rem 2rem;
  grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr) auto;
  padding: 1.5rem 0;
  text-decoration: none;
}
.hb-seitenliste a:hover .hb-seitenliste__name { color: var(--wp--preset--color--accent-text); }
.hb-seitenliste__name { font-family: var(--hb-titel); font-size: 1.6rem; font-weight: 600; }
.hb-seitenliste__text { color: var(--wp--preset--color--muted); }
.hb-pfeil { color: var(--wp--preset--color--accent-text); }
@media (max-width: 640px) {
  .hb-seitenliste a { grid-template-columns: minmax(0, 1fr) auto; }
  .hb-seitenliste__text { grid-column: 1; grid-row: 2; }
  .hb-pfeil { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---- Aufruf „kein Konto?" ------------------------------------------- */
.hb-ruf {
  align-items: center;
  background: var(--wp--preset--color--ink);
  border-radius: 24px;
  color: var(--wp--preset--color--paper);
  display: grid;
  gap: 1.5rem 3rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: clamp(1.75rem, 4vw, 3.5rem);
}
@media (max-width: 781px) { .hb-ruf { grid-template-columns: minmax(0, 1fr); } }
.hb-ruf__titel { color: var(--wp--preset--color--paper); font-size: var(--wp--preset--font-size--h-2); margin: 0 0 0.75rem; }
.hb-ruf p { margin: 0; max-width: 44rem; opacity: 0.85; }

/* ---- Angemeldete Ansicht --------------------------------------------- */
.hb-gruss { padding-block: clamp(2.5rem, 5vw, 4.5rem) 1.5rem; }
.hb-gruss__zeile { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 1rem 3rem; justify-content: space-between; }
.hb-datum { color: var(--wp--preset--color--muted); font-weight: 500; margin: 0 0 0.4rem; }

.hb-gruppe + .hb-gruppe { margin-top: 2.75rem; }
.hb-gruppe__kopf { align-items: baseline; display: flex; gap: 1rem; margin-bottom: 1.25rem; }
.hb-gruppe__titel { font-size: 1.9rem; margin: 0; }
.hb-gruppe__zahl { color: var(--wp--preset--color--muted); font-size: 0.9375rem; }

.hb-kacheln {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}
.hb-kachel {
  background: var(--wp--preset--color--flaeche);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 16px;
  color: var(--wp--preset--color--ink);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 9rem;
  padding: 1.3rem;
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}
a.hb-kachel:hover { border-color: var(--wp--preset--color--accent-text); color: var(--wp--preset--color--ink); transform: translateY(-2px); }
.hb-kachel__symbol {
  align-items: center;
  background: var(--wp--preset--color--sand);
  border-radius: 12px;
  color: var(--wp--preset--color--accent-text);
  display: inline-flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}
.hb-kachel__text { display: flex; flex-direction: column; gap: 0.25rem; }
.hb-kachel__titel { font-size: 1.15rem; font-weight: 600; }
.hb-kachel__zeile { color: var(--wp--preset--color--muted); font-size: 0.875rem; line-height: 1.4; overflow-wrap: anywhere; }
.hb-kachel__zeile--adresse { font-family: var(--wp--preset--font-family--mono); font-size: 0.8125rem; }
.hb-marke-klein {
  align-self: flex-start;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 999px;
  color: var(--wp--preset--color--muted);
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: auto;
  padding: 0.2rem 0.6rem;
}

.hb-seitenleiste {
  align-items: center;
  border: 1px dashed var(--wp--preset--color--input-border);
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  margin-top: 2.5rem;
  padding: 1.25rem 1.5rem;
}
.hb-seitenleiste a { font-weight: 600; }

/* ---- Fusszeile ------------------------------------------------------- */
.hb-fuss {
  border-top: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--muted);
  font-size: 0.9375rem;
  margin-top: clamp(2rem, 5vw, 4rem);
}
.hb-fuss__zeile { gap: 0.75rem 2rem; padding-block: 2rem; }
.hb-fuss p { margin: 0; }
.hb-fuss__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }

/* ---- Schmale Bildschirme -----------------------------------------
   Marke, Menue, „Anmelden" und der Hell/Dunkel-Knopf brauchen zusammen
   rund 420 px — auf einem 390-px-Handy liess sich die Seite dadurch
   seitlich verschieben (gemessen 23.09.2026). Unter 480 px entfaellt
   der Knopf; die Seite folgt dort der Einstellung des Geraets. */
@media (max-width: 480px) {
  .theme-toggle { display: none; }
  .hb-kopf__zeile { gap: 0.75rem; }
}

/* Formularfelder: Mehrere Felder waren breiter als ihr Platz
   (width 100 % plus Rahmen und Innenabstand) — das Nachrichtenfeld des
   Kontaktformulars um 2 px auf dem Handy, die Felder des Pool-Rechners
   deutlich. Ursache steckt in bausteine.css (alle vier Themes) und im
   Rechner-Plugin; beides bestand schon im bisherigen Theme
   (gemessen 23.09.2026). Hier fuer dieses Theme 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 (so auch im bisherigen Theme, gesehen 23.09.2026).
   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.hb-start,
.wp-site-blocks > main.wb-start { padding-top: 0; }

/* Schlichte Gastansicht (seit 24.09.2026) und kleiner Anmelde-Link unten. */
.hb-held--schlicht { padding-block: clamp(4rem, 12vw, 9rem); }
.hb-held--schlicht .hb-held__text { max-width: 36rem; }
.hb-fuss__anmelden { font-size: .8125rem; color: var(--wp--preset--color--muted); text-decoration: none; }
.hb-fuss__anmelden:hover, .hb-fuss__anmelden:focus-visible { text-decoration: underline; color: var(--wp--preset--color--ink); }