/*
 * Holzbuddys · Gestaltung der Seite
 *
 * Farben, Schriften und Abstände kommen aus theme.json. Hier stehen Aufbau, Bauteile und Bewegung.
 * Reihenfolge: 1 Grundlagen · 2 Flächen und Raster · 3 Knöpfe und Felder · 4 Kopf · 5 Figur · 6 Start
 * 7 Abschnitte · 8 Bestellstrecke · 9 Kontakt und Fuß · 10 Schwebendes · 11 Bewegung · 12 Druck
 */

/* Ersatzschriften mit angepasster Laufweite: Beim Nachladen der Hausschriften springt so keine Zeile. */
@font-face { font-family: "Holzbuddys Ersatz Text"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("Roboto"); size-adjust: 99.4%; }
@font-face { font-family: "Holzbuddys Ersatz Titel"; font-weight: 400; src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"), local("Helvetica Neue Condensed Bold"), local("Liberation Sans Narrow Bold"), local("Roboto Condensed Bold"), local("Arial Bold"); size-adjust: 112%; }

/* 1 · Grundlagen ------------------------------------------------------------------------------ */

:root {
	--hb-tanne: var(--wp--preset--color--tanne, #0F5640);
	--hb-tanne-hell: var(--wp--preset--color--tanne-hell, #17694F);
	--hb-nacht: var(--wp--preset--color--tannennacht, #0A2E24);
	--hb-honig: var(--wp--preset--color--honig, #FFC24D);
	--hb-honig-kraeftig: var(--wp--preset--color--honig-kraeftig, #FFB01F);
	--hb-honig-hell: var(--wp--preset--color--honig-hell, #FFE7AE);
	--hb-glut: var(--wp--preset--color--glut, #C43B0B);
	--hb-glut-dunkel: #A8320A;
	--hb-birke: var(--wp--preset--color--birke, #F5F6F2);
	--hb-weiss: var(--wp--preset--color--weiss, #FFFFFF);
	--hb-grau: var(--wp--preset--color--grau, #4A4F48);
	--hb-kohle: var(--wp--preset--color--kohle, #1A1D1A);
	--hb-linie: #C9CEC6;

	--hb-titel: var(--wp--preset--font-family--titel, "Lilita One", "Arial Narrow", sans-serif);
	--hb-text: var(--wp--preset--font-family--text, "Fira Sans", Arial, sans-serif);

	--hb-umriss: 3px solid var(--hb-kohle);
	--hb-radius: 14px;
	--hb-radius-gross: 20px;
	--hb-schatten: 0 5px 0 var(--hb-kohle);
	--hb-schatten-gedrueckt: 0 2px 0 var(--hb-kohle);
	--hb-kurz: 140ms;
	--hb-mittel: 260ms;
	--hb-kurve: cubic-bezier(0.23, 1, 0.32, 1);

	--hb-rand: clamp(1.125rem, 0.4rem + 3.2vw, 3rem);
	--hb-breit: 75rem;
	--hb-touch: 3.5rem;
	--hb-leiste: 3.25rem;
	--hb-fokus: var(--hb-glut);
	--hb-e-kopf: 100;
	--hb-e-schwebend: 110;
	--hb-e-preisleiste: 120;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
@media (min-width: 56.25em) { html { scroll-padding-top: calc(var(--hb-leiste) + 1.5rem); } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img, video, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { text-wrap: balance; margin-block: 0; }
p { text-wrap: pretty; }
[hidden] { display: none !important; }

a { text-decoration-thickness: 0.12em; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 0.2em; }
:focus-visible { outline: 4px solid var(--hb-fokus); outline-offset: 3px; border-radius: 4px; }
:target { scroll-margin-top: 1.5rem; }

.screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; }
.hb-klein { font-size: 1rem; line-height: 1.5; color: var(--hb-grau); }
.hb-icon { width: 1.5rem; height: 1.5rem; flex: none; }

/* WordPress setzt zwischen Blöcke einen Abstand. Zwischen vollflächigen Abschnitten wäre das ein weißer Streifen. */
.wp-site-blocks > *, .hb-haupt:not(.hb-haupt--seite) > *, .hb-haupt:not(.hb-haupt--seite) > .wp-block-post-content > * { margin-block: 0; }
.wp-site-blocks { padding: 0; }

/* Prüfhinweise: nur für Angemeldete, gelb und unübersehbar. */
.is-style-pruefhinweis { background: #FFF3B0; color: var(--hb-kohle); border: 3px dashed var(--hb-kohle); border-radius: var(--hb-radius); padding: 0.75rem 1rem; font-size: 1rem; line-height: 1.5; }
.is-style-pruefhinweis::before { content: "Nur für euch sichtbar. "; font-weight: 700; }
.hb-nur-angemeldet { border: 3px dashed currentColor; border-radius: var(--hb-radius); padding: 0.5rem 0.75rem; font-size: 1rem; display: flex; gap: 0.5rem; align-items: center; }

/* 2 · Flächen und Raster ---------------------------------------------------------------------- */

.is-style-flaeche-tanne { background: var(--hb-tanne); color: var(--hb-birke); --hb-fokus: var(--hb-honig); }
.is-style-flaeche-tannennacht { background: var(--hb-nacht); color: var(--hb-birke); --hb-fokus: var(--hb-honig); }
.is-style-flaeche-honig-hell { background: var(--hb-honig-hell); color: var(--hb-kohle); }
.is-style-flaeche-weiss { background: var(--hb-weiss); color: var(--hb-kohle); }
.is-style-flaeche-tanne .hb-klein, .is-style-flaeche-tannennacht .hb-klein { color: #D7E2DC; }

.hb-abschnitt { padding: var(--wp--preset--spacing--80) var(--hb-rand); position: relative; }
.hb-innen { max-width: var(--hb-breit); margin-inline: auto; }
.hb-innen > * + * { margin-block-start: var(--wp--preset--spacing--60); }

.hb-kopfteil { display: grid; gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60); align-items: end; }
.hb-kopfteil__text { max-width: 44rem; }
.hb-kopfteil__text > * { margin-block: 0; }
.hb-kopfteil__text > * + * { margin-block-start: 0.75rem; }
.hb-kopfteil__einleitung { font-size: var(--wp--preset--font-size--gross); line-height: 1.4; }
.hb-kopfteil--mit-figur { grid-template-columns: minmax(0, 1fr) clamp(7rem, 26vw, 15rem); }
.hb-kopfteil--mit-figur .hb-buddy { position: relative; z-index: 1; }
@media (max-width: 39.99em) {
	/* Mit Sprechblase braucht die Figur am Handy eine eigene Zeile, sonst liegt die Blase auf dem Text. */
	.hb-kopfteil--mit-figur:has(.hb-buddy__blase) { grid-template-columns: minmax(0, 1fr); }
	.hb-kopfteil--mit-figur:has(.hb-buddy__blase) .hb-buddy { justify-self: end; width: 9.5rem; margin-block-start: 1.25rem; }
	/* Ohne Sprechblase steht die Figur neben der Überschrift. Die Einleitung läuft darunter über die ganze Breite. */
	.hb-kopfteil--mit-figur:not(:has(.hb-buddy__blase)) { grid-template-columns: minmax(0, 1fr) clamp(6.5rem, 30vw, 9rem); gap: 0.75rem 1rem; }
	.hb-kopfteil--mit-figur:not(:has(.hb-buddy__blase)) .hb-kopfteil__text { display: contents; }
	.hb-kopfteil--mit-figur:not(:has(.hb-buddy__blase)) .hb-kopfteil__text > :first-child { grid-column: 1; grid-row: 1; align-self: end; margin: 0; }
	.hb-kopfteil--mit-figur:not(:has(.hb-buddy__blase)) .hb-buddy { grid-column: 2; grid-row: 1; align-self: end; }
	.hb-kopfteil--mit-figur:not(:has(.hb-buddy__blase)) .hb-kopfteil__einleitung { grid-column: 1 / -1; grid-row: 2; margin: 0; }
}
/* Am Rechner klebt die Figur wie ein Aufkleber über der Kante zum Abschnitt davor. */
@media (min-width: 56.25em) {
	.hb-kopfteil--mit-figur { align-items: start; }
	.hb-kopfteil--mit-figur .hb-buddy { margin-block-start: calc(-1 * (var(--wp--preset--spacing--80) + 3.5rem)); }
}

.hb-haupt--seite { padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80); }
.hb-haupt--seite h1 { font-size: var(--wp--preset--font-size--titel-mittel); margin-block-end: var(--wp--preset--spacing--50); }
/* Lesetext: Absätze mit ruhigem Abstand, Überschriften rücken an den Text heran, der zu ihnen gehört. */
.hb-haupt--seite .wp-block-post-content > * { margin-block: 0; }
.hb-haupt--seite .wp-block-post-content > * + * { margin-block-start: 1rem; }
.hb-haupt--seite .wp-block-post-content > * + h2 { margin-block-start: var(--wp--preset--spacing--60); }
.hb-haupt--seite .wp-block-post-content > * + h3 { margin-block-start: var(--wp--preset--spacing--50); }
.hb-haupt--seite .wp-block-post-content > :is(h2, h3) + * { margin-block-start: 0.5rem; }
.hb-haupt--recht h2 { font-size: var(--wp--preset--font-size--titel-klein); }
.hb-haupt--recht h3 { font-size: var(--wp--preset--font-size--gross); }
.hb-haupt--recht a { overflow-wrap: anywhere; }
.hb-haupt--fehlt { text-align: left; }
.hb-haupt--fehlt .hb-buddy { max-width: 14rem; }

/* Pfad über dem Titel: Startseite › Holz-Tipps › Titel */
.hb-pfad { margin: 0 auto 1rem; font-size: 1rem; line-height: 1.4; }
.hb-pfad ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0; margin: 0; padding: 0; list-style: none; }
.hb-pfad li { display: inline-flex; align-items: center; min-height: 2.5rem; }
.hb-pfad li + li::before { content: "›"; margin-inline: 0.5rem; opacity: 0.6; }
.hb-pfad a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.hb-pfad [aria-current] { color: var(--hb-grau); }
@media (max-width: 39.99em) { .hb-pfad [aria-current] { display: none; } }

/* Holz-Tipp: Einleitung größer, Fotos mit Legende, am Ende der grüne Kasten mit den Knöpfen. */
.hb-artikel__einleitung { font-size: var(--wp--preset--font-size--gross); line-height: 1.4; }
.hb-haupt--seite .wp-block-post-content > .hb-rechner { grid-template-columns: minmax(0, 1fr); }
.hb-haupt--seite .wp-block-post-content > .hb-artikel__bild { margin-block: var(--wp--preset--spacing--60); }
.hb-artikel__bild img { width: 100%; height: auto; border-radius: var(--hb-radius); border: var(--hb-umriss); }
.hb-artikel__bild figcaption { margin: 0.5rem 0 0; font-size: 1rem; line-height: 1.4; color: inherit; text-align: left; }
.hb-haupt--seite .wp-block-post-content > .hb-rechner, .hb-haupt--seite .wp-block-post-content > .hb-liefergebiet { margin-block: var(--wp--preset--spacing--50); }
.hb-haupt--seite .wp-block-post-content > * + .hb-frage { margin-block-start: 0; }
.hb-haupt--seite .wp-block-post-content > h2 + .hb-frage { border-top: var(--hb-umriss); }
.hb-artikel__schluss { margin-block-start: var(--wp--preset--spacing--70) !important; padding: clamp(1.5rem, 1rem + 2.4vw, 2.5rem); border-radius: var(--hb-radius-gross); }
.hb-artikel__schluss > * { margin-block: 0; }
.hb-artikel__schluss > * + * { margin-block-start: 0.75rem; }
.hb-artikel__schluss .wp-block-buttons { margin-block-start: 1.25rem; }
.hb-artikel__schluss .hb-telefon { margin-block-start: 0.5rem; }

/* Liefergebiet: Tabelle mit Orten, Entfernung und Anfahrt. */
.hb-liefergebiet { margin: 0; }
.hb-liefergebiet__titel { margin: 0 0 0.5rem; font-size: 1rem; line-height: 1.4; color: inherit; text-align: left; }
.hb-liefergebiet__rahmen { overflow-x: auto; background: var(--hb-weiss); border: var(--hb-umriss); border-radius: var(--hb-radius); }
.hb-liefergebiet table { width: 100%; margin: 0; border-collapse: collapse; font-size: 1.0625rem; line-height: 1.3; }
.hb-liefergebiet th, .hb-liefergebiet td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid var(--hb-linie); }
.hb-liefergebiet thead th { background: var(--hb-honig-hell); font-weight: 700; }
.hb-liefergebiet tbody th { font-weight: 500; }
.hb-liefergebiet tbody tr:last-child > * { border-bottom: 0; }
.hb-liefergebiet td:last-child { white-space: nowrap; }
.hb-liefergebiet__hinweis { margin: 0.5rem 0 0; }
@media (max-width: 39.99em) { .hb-liefergebiet th, .hb-liefergebiet td { padding: 0.5rem; font-size: 0.9375rem; } }

/* Liste der Holz-Tipps: Kacheln mit Foto, Titel und Kurztext. */
.hb-tippliste { display: grid; gap: 1.25rem; margin: var(--wp--preset--spacing--50) 0 0 !important; padding: 0 !important; list-style: none; }
.hb-tippliste__eintrag { display: grid; }
.hb-tippliste__link { display: grid; grid-template-rows: auto 1fr; overflow: hidden; color: var(--hb-kohle); text-decoration: none; background: var(--hb-weiss); border: var(--hb-umriss); border-radius: var(--hb-radius); box-shadow: var(--hb-schatten); transition: transform var(--hb-kurz) var(--hb-kurve), box-shadow var(--hb-kurz) var(--hb-kurve); }
.hb-tippliste__link:active { transform: translateY(3px); box-shadow: var(--hb-schatten-gedrueckt); }
.hb-tippliste__foto { display: block; aspect-ratio: 3 / 2; background: var(--hb-linie); border-bottom: var(--hb-umriss); overflow: hidden; }
.hb-tippliste__bild { width: 100%; height: 100%; object-fit: cover; }
.hb-tippliste__text { display: grid; gap: 0.5rem; align-content: start; padding: 1rem 1.125rem 1.25rem; }
.hb-tippliste__titel { font-family: var(--hb-titel); font-size: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem); line-height: 1.1; text-wrap: balance; }
.hb-tippliste__kurz { font-size: 1.0625rem; line-height: 1.45; }
.hb-tippliste__weiter { justify-self: start; font-weight: 700; color: var(--hb-tanne); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
@media (hover: hover) and (pointer: fine) { .hb-tippliste__link:hover { background: var(--hb-honig-hell); } }
@media (min-width: 40em) { .hb-tippliste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
@media (min-width: 64em) { .hb-tippliste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 3 · Knöpfe und Felder ----------------------------------------------------------------------- */

.wp-block-button__link, .hb-knopf {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
	min-height: var(--hb-touch); padding: 0.875rem 1.5rem;
	font-family: var(--hb-titel); font-size: 1.3125rem; font-weight: 400; line-height: 1.1; text-align: center; text-decoration: none;
	color: var(--hb-kohle); background: var(--hb-honig);
	border: var(--hb-umriss); border-radius: var(--hb-radius); box-shadow: var(--hb-schatten);
	cursor: pointer; -webkit-tap-highlight-color: transparent;
	transition: transform var(--hb-kurz) var(--hb-kurve), box-shadow var(--hb-kurz) var(--hb-kurve), background-color var(--hb-kurz) ease;
}
.wp-block-button__link:active, .hb-knopf:active { transform: translateY(3px); box-shadow: var(--hb-schatten-gedrueckt); }
@media (hover: hover) and (pointer: fine) {
	.wp-block-button__link:hover, .hb-knopf:hover { background: var(--hb-honig-kraeftig); }
	.is-style-hell .wp-block-button__link:hover, .hb-knopf--hell:hover { background: var(--hb-honig-hell); }
	/* Schlichte Knöpfe sehen aus wie Links und verhalten sich unter der Maus auch so. */
	.hb-knopf--schlicht:hover { background: none; text-decoration-thickness: 0.2em; }
}
.is-style-hell .wp-block-button__link, .hb-knopf--hell { background: var(--hb-birke); }
.hb-knopf--breit { display: flex; width: 100%; }
.hb-knopf--schlicht { background: none; border-color: transparent; box-shadow: none; text-decoration: underline; text-decoration-thickness: 0.12em; text-underline-offset: 0.2em; font-family: var(--hb-text); font-weight: 500; font-size: 1.125rem; padding-inline: 0.5rem; }
.hb-knopf--schlicht:active { transform: none; box-shadow: none; }
.hb-knopf[disabled], .hb-knopf[aria-disabled="true"] { background: #E4E7E0; color: var(--hb-grau); cursor: default; box-shadow: var(--hb-schatten-gedrueckt); transform: translateY(3px); }
.hb-knopf--laeuft { cursor: progress; }

.hb-felder { display: grid; gap: 1.25rem; }
.hb-feld { display: grid; gap: 0.375rem; }
.hb-feld label, .hb-feld legend { font-weight: 700; font-size: 1.125rem; line-height: 1.3; }
.hb-feld__zusatz { font-weight: 400; color: var(--hb-grau); }
.hb-feld input, .hb-feld textarea {
	width: 100%; min-height: var(--hb-touch); padding: 0.75rem 1rem;
	font: inherit; font-size: 1.1875rem; line-height: 1.4; color: var(--hb-kohle); background: var(--hb-weiss);
	border: var(--hb-umriss); border-radius: 12px; appearance: none;
}
.hb-feld textarea { min-height: 8rem; resize: vertical; }
.hb-feld input:focus-visible, .hb-feld textarea:focus-visible { outline: 4px solid var(--hb-glut); outline-offset: 2px; border-radius: 12px; }
.hb-feld input[aria-invalid="true"], .hb-feld textarea[aria-invalid="true"] { border-color: var(--hb-glut); background: #FFF5F0; }
.hb-feld__hilfe { font-size: 1rem; line-height: 1.45; color: var(--hb-grau); margin: 0; }
.hb-feld__fehler { margin: 0; font-size: 1.0625rem; font-weight: 500; line-height: 1.4; color: var(--hb-glut-dunkel); display: flex; gap: 0.5rem; align-items: flex-start; }
.hb-feld__fehler::before { content: "!"; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--hb-glut); color: #fff; font-family: var(--hb-titel); font-size: 1rem; line-height: 1.5rem; text-align: center; }
.hb-feld--leer { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }
.hb-feld--kurz input { max-width: 11rem; }
.hb-feldpaar { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); }

.hb-meldung { margin: 0; padding: 1rem 1.125rem; border: var(--hb-umriss); border-radius: var(--hb-radius); background: var(--hb-honig-hell); color: var(--hb-kohle); font-size: 1.125rem; line-height: 1.5; }
.hb-meldung > * { margin: 0; }
.hb-meldung > * + * { margin-block-start: 0.5rem; }
.hb-meldung--fehler { background: #FFF5F0; border-color: var(--hb-glut); }
.hb-meldung--gut { background: #E6F2EC; }
/* Achtung: gleiche Fläche, dazu ein Ausrufezeichen. Kein Fehler, nur ein Hinweis, den man lesen sollte. */
.hb-meldung--achtung { position: relative; padding-left: 3.625rem; }
.hb-meldung--achtung::before { content: "!"; position: absolute; left: 1rem; top: 0.9375rem; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--hb-kohle); color: #fff; font-family: var(--hb-titel); font-size: 1.25rem; line-height: 1.875rem; text-align: center; }
.hb-meldung a { color: inherit; font-weight: 700; }
.hb-meldung__knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 0.875rem; }
.hb-meldung__knoepfe .hb-knopf { font-size: 1.1875rem; min-height: 3.25rem; padding: 0.625rem 1.125rem; }

.hb-plakette { display: inline-grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--hb-honig); color: var(--hb-kohle); border: var(--hb-umriss); font-family: var(--hb-titel); font-size: 1.375rem; line-height: 1; }

/* 4 · Kopf ------------------------------------------------------------------------------------ */

.hb-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 1.5rem; min-height: var(--hb-leiste); padding: 0.125rem var(--hb-rand); background: var(--hb-honig); color: var(--hb-kohle); }
.hb-leiste__anruf { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 3rem; padding-inline: 0.5rem; font-family: var(--hb-titel); font-size: 1.25rem; line-height: 1; color: inherit; text-decoration: none; }
.hb-leiste__anruf:hover { text-decoration: underline; }
.hb-leiste__zeiten { display: none; font-size: 1rem; font-weight: 500; }
@media (min-width: 40em) {
	.hb-leiste { justify-content: space-between; }
	.hb-leiste__zeiten { display: block; }
}
@media (min-width: 56.25em) {
	.wp-block-template-part.hb-leiste-teil { position: sticky; top: 0; z-index: var(--hb-e-kopf); }
	/* Angemeldet liegt oben die Leiste von WordPress. Die Telefonleiste rückt darunter. */
	.admin-bar .wp-block-template-part.hb-leiste-teil { top: var(--wp-admin--admin-bar--height, 32px); }
}

.hb-kopf { background: var(--hb-tanne); color: var(--hb-birke); --hb-fokus: var(--hb-honig); }
.hb-kopf__innen { max-width: calc(var(--hb-breit) + 2 * var(--hb-rand)); margin-inline: auto; padding: 0.5rem var(--hb-rand) 0.5rem; gap: 1rem; align-items: center; }
.hb-kopf__marke { min-width: 0; flex: 0 1 auto; }
.hb-kopf__marke > * { margin: 0; }
.hb-wortmarke { display: inline-flex; align-items: center; min-height: 3rem; color: inherit; text-decoration: none; font-family: var(--hb-titel); font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem); line-height: 1; }
.hb-wortmarke__schrift { display: inline-flex; align-items: baseline; }
/* Die Stammscheibe ist das o: so hoch wie die kleinen Buchstaben, unten ein Hauch über die Grundlinie hinaus. */
.hb-wortmarke__scheibe { flex: none; width: 0.8em; height: 0.8em; margin-inline: -0.03em; transform: translateY(0.13em); stroke: var(--hb-nacht); }
.hb-wortmarke__holz { fill: var(--hb-honig); }
.hb-wortmarke__kern { fill: var(--hb-nacht); }
.hb-absender--zeile { display: none; margin: -0.125rem 0 0; max-width: 30rem; font-size: 1rem; font-weight: 500; line-height: 1.3; text-wrap: balance; }
@media (min-width: 40em) { .hb-absender--zeile { display: block; } }
.hb-absender__orte { white-space: nowrap; }

/* Menü: am Handy ein Knopf mit dem Wort „Menü“, ab 880 px die fünf Punkte nebeneinander. */
.hb-kopf__nav { font-weight: 500; flex: none; }
.hb-kopf__nav .wp-block-navigation__container { gap: 0.25rem; flex-wrap: nowrap; }
.hb-kopf__nav .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: 3rem; padding: 0.25rem 0.75rem; border-radius: 10px; white-space: nowrap; }
@media (min-width: 55em) and (max-width: 66em) { .hb-kopf__nav .wp-block-navigation-item__content { padding-inline: 0.5rem; } }
@media (hover: hover) and (pointer: fine) { .hb-kopf__nav .wp-block-navigation-item__content:hover { background: var(--hb-tanne-hell); } }
.hb-kopf__nav .wp-block-navigation__responsive-container-open, .hb-kopf__nav .wp-block-navigation__responsive-container-close {
	align-items: center; justify-content: center; min-height: 3rem; padding: 0.5rem 1rem; font: 700 1.125rem/1 var(--hb-text); color: inherit; border: 3px solid currentColor; border-radius: 12px;
}
@media (max-width: 54.99em) {
	.hb-kopf__nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.hb-kopf__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
.hb-kopf__nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--hb-tanne); color: var(--hb-birke); padding: 1.25rem var(--hb-rand) 2rem; }
.hb-kopf__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0.5rem; align-items: stretch; width: 100%; }
.hb-kopf__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; }
.hb-kopf__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { width: 100%; min-height: var(--hb-touch); font-family: var(--hb-titel); font-size: 1.75rem; font-weight: 400; border-bottom: 3px solid var(--hb-tanne-hell); border-radius: 0; padding-inline: 0; }
.hb-kopf__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 4.5rem; align-items: stretch; }

/* 5 · Figur ----------------------------------------------------------------------------------- */

.hb-buddy { position: relative; margin: 0; }
.hb-buddy__figur { display: block; }
.hb-buddy__bild { width: 100%; height: auto; filter: drop-shadow(0 5px 0 rgba(10, 46, 36, 0.28)); }
.hb-buddy--klein { max-width: 9rem; }
.hb-buddy--mittel { max-width: 15rem; }
.hb-buddy--gross { max-width: 26rem; }
.hb-buddy__platzhalter { display: grid; place-items: center; width: 100%; padding: 1rem; text-align: center; font-size: 0.9375rem; font-weight: 500; line-height: 1.35; color: #33382F; background: #CFD3CB; border: 6px solid #fff; border-radius: 46% 54% 40% 60% / 38% 42% 58% 62%; box-shadow: 0 5px 0 rgba(10, 46, 36, 0.28); }
.hb-buddy__blase { position: absolute; z-index: 2; top: -0.5rem; max-width: 12rem; padding: 0.625rem 0.875rem 0.6875rem; font-family: var(--hb-titel); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.05; color: var(--hb-kohle); background: var(--hb-weiss); border: var(--hb-umriss); border-radius: 18px; }
.hb-buddy__blase::after { content: ""; position: absolute; bottom: 0.5rem; width: 1.25rem; height: 1.25rem; background: var(--hb-weiss); border-right: var(--hb-umriss); border-bottom: var(--hb-umriss); }
.hb-buddy--blase-rechts .hb-buddy__blase { left: 100%; margin-left: -1.5rem; transform: rotate(3deg); }
.hb-buddy--blase-rechts .hb-buddy__blase::after { left: -0.8125rem; transform: rotate(135deg) skew(8deg, 8deg); }
.hb-buddy--blase-links .hb-buddy__blase { right: 100%; margin-right: -1.5rem; transform: rotate(-3deg); }
.hb-buddy--blase-links .hb-buddy__blase::after { right: -0.8125rem; transform: rotate(-45deg) skew(8deg, 8deg); }

/* 6 · Start ----------------------------------------------------------------------------------- */

/* Alles an den beiden Figuren rechnet sich aus einer Größe: --hb-duo ist die Höhe von Yannick.
   Yannick (697 x 1054) ist links und unten am Bogenrand abgeschnitten und steht deshalb in der linken unteren Ecke.
   Papa (1277 x 1113) steht rechts neben ihm und ein Stück davor. Beide stehen auf der Unterkante der Fläche.
   Am Handy füllen beide zusammen die Breite: 1,238 mal --hb-duo ergibt bei 80,7vw genau 100vw. */
.hb-start { position: relative; overflow: hidden; isolation: isolate; --hb-duo: min(80.7vw, 30rem); }
.hb-start::before {
	/* Jahresringe hinter den Figuren */
	content: ""; position: absolute; z-index: -1; left: -14rem; bottom: -16rem; width: 42rem; height: 42rem; border-radius: 50%;
	background: repeating-radial-gradient(circle at 50% 50%, transparent 0 2.125rem, var(--hb-tanne-hell) 2.125rem 2.5rem);
}
.hb-start__innen { display: grid; }
.hb-start__innen > * { margin: 0; }
.hb-start__text { padding: var(--wp--preset--spacing--60) var(--hb-rand) 0; max-width: 46rem; }
.hb-start__text > * { margin-block: 0; }
.hb-start__titel { font-size: clamp(2.5rem, 1rem + 3.7vw, 5.25rem); line-height: 1; }
.hb-start__titel mark { background: none !important; color: var(--hb-honig); }
.hb-start__lead { margin-block-start: 1rem !important; font-size: var(--wp--preset--font-size--gross); line-height: 1.4; max-width: 34ch; }
.hb-start__knoepfe { margin-block-start: 1.5rem !important; gap: 0.875rem 1rem; align-items: stretch; }
.hb-start__knoepfe > * { margin: 0; }
.hb-start .wp-block-button__link { box-shadow: 0 5px 0 var(--hb-nacht); }
.hb-start .wp-block-button__link:active { box-shadow: 0 2px 0 var(--hb-nacht); }
@media (max-width: 29.99em) {
	.hb-start__knoepfe, .hb-start__knoepfe .wp-block-buttons, .hb-start__knoepfe .wp-block-button { display: grid; width: 100%; }
	.hb-start__knoepfe .wp-block-button__link { width: 100%; }
}

.hb-start__duo { position: relative; width: calc(var(--hb-duo) * 1.238); height: var(--hb-duo); margin-block-start: 3.75rem; }
.hb-start__duo > * { margin: 0; }
.hb-start__figur { position: absolute; bottom: 0; max-width: none; margin: 0; }
.hb-start__figur .hb-buddy__figur { display: block; height: 100%; }
.hb-start__figur .hb-buddy__bild { width: 100%; height: 100%; object-fit: cover; object-position: left top; filter: none; }
.hb-start__figur--yannick { left: 0; width: calc(var(--hb-duo) * 0.6613); height: var(--hb-duo); z-index: 1; }
.hb-start__figur--papa { left: calc(var(--hb-duo) * 0.46); width: calc(var(--hb-duo) * 0.778); height: calc(var(--hb-duo) * 0.6784); z-index: 2; }
/* Beide sagen Moin. Die Blasen stehen rechts über dem Kopf, damit keine das Gesicht des anderen verdeckt. */
.hb-start__figur .hb-buddy__blase { z-index: 3; margin: 0; }
.hb-start__figur--yannick.hb-buddy--blase-rechts .hb-buddy__blase { left: 68%; top: 1%; }
/* Papas Blase hängt am rechten Rand seiner Figur, so bleibt sie auch am schmalsten Handy im Bild. */
.hb-start__figur--papa.hb-buddy--blase-rechts .hb-buddy__blase { left: auto; right: 0.5rem; top: -14%; }

@media (min-width: 64em) {
	.hb-start { --hb-start-hoehe: clamp(30rem, 46vw, 45rem); --hb-duo: calc(var(--hb-start-hoehe) * 0.94); min-height: var(--hb-start-hoehe); }
	.hb-start::before { left: calc(var(--hb-duo) * 0.45 - 27rem); bottom: -22rem; width: 54rem; height: 54rem; }
	.hb-start__innen { min-height: var(--hb-start-hoehe); align-items: center; }
	/* Links die beiden mit den Jahresringen, rechts daneben der Text. */
	.hb-start__text { margin-left: calc(var(--hb-duo) * 1.238 + clamp(1.5rem, 3vw, 3rem)); padding: 3rem var(--hb-rand) 3.5rem 0; max-width: none; }
	.hb-start__duo { position: absolute; left: 0; bottom: 0; margin: 0; }
	.hb-start__figur--papa.hb-buddy--blase-rechts .hb-buddy__blase { right: 14%; }
}

/* 7 · Abschnitte ------------------------------------------------------------------------------ */

/* So läuft’s: drei Schritte an einer Strecke, der Anhänger fährt mit. */
.hb-ablauf { position: relative; display: grid; gap: 1.75rem; counter-reset: schritt; --hb-fahrt: 0; }
.hb-ablauf > * { margin: 0; }
/* Die Strecke: am Handy von Plakette zu Plakette nach unten, am Rechner quer bis zum Haus am Ende. */
.hb-ablauf__schritt:not(:last-child)::after { content: ""; position: absolute; left: 1.625rem; top: 3.5rem; bottom: -1.75rem; width: 0; border-left: 4px dashed var(--hb-kohle); opacity: 0.55; }
.hb-ablauf__schritt { position: relative; counter-increment: schritt; padding-left: 4.75rem; min-height: 3.5rem; }
.hb-ablauf__schritt > * { margin-block: 0; }
.hb-ablauf__schritt > * + * { margin-block-start: 0.375rem; }
.hb-ablauf__schritt::before {
	content: counter(schritt); position: absolute; left: 0; top: -0.125rem; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%;
	background: var(--hb-honig); border: var(--hb-umriss); font-family: var(--hb-titel); font-size: 1.75rem; line-height: 1;
	transition: background-color var(--hb-mittel) ease, transform var(--hb-mittel) var(--hb-kurve);
}
.hb-ablauf__schritt h3 { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem); }
.hb-ablauf__schritt.ist-durch::before { background: var(--hb-tanne); color: #fff; }
.hb-ablauf__schritt.ist-dran::before { background: var(--hb-glut); color: #fff; }
.hb-ablauf__haenger { display: none; }
@media (min-width: 56.25em) {
	.hb-ablauf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding-top: 2.25rem; }
	.hb-ablauf::before { content: ""; position: absolute; left: 1.75rem; right: 3.25rem; top: calc(2.25rem + 1.625rem); border-top: 4px dashed var(--hb-kohle); opacity: 0.55; }
	/* Das Haus am Ende der Strecke: Dort kommt das Holz an. */
	.hb-ablauf::after {
		content: ""; position: absolute; right: 0; top: calc(2.25rem + 0.125rem); width: 3.25rem; height: 3.25rem;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52' fill='none' stroke='%231A1D1A' stroke-width='3.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M6 25 26 7l20 18v21H6z' fill='%23fff'/%3E%3Cpath d='M21 46V32h10v14' fill='%23FFC24D'/%3E%3Cpath d='M35 12V7h5v10' fill='%23C43B0B'/%3E%3C/svg%3E") center / contain no-repeat;
	}
	.hb-ablauf__schritt:not(:last-child)::after { display: none; }
	.hb-ablauf__schritt { padding: 4.75rem 0 0; }
	.hb-ablauf__schritt::before { top: 0; }
	/* Den Anhänger setzt assets/js/site.js ein. Er rollt auf der Strecke und fährt hinter den Plaketten durch,
	   damit keine Nummer verdeckt wird. Die Deichsel zeigt nach rechts, dorthin fährt er. */
	.hb-ablauf__haenger { display: block; position: absolute; top: 0.55rem; left: 0; width: 8.25rem; will-change: transform; }
	.hb-ablauf__haenger svg { width: 100%; height: auto; transform: scaleX(-1); }
}

/* Wer wir sind */
.hb-wir { display: grid; gap: var(--wp--preset--spacing--60); align-items: start; }
.hb-wir > * { margin: 0; }
.hb-wir__text > * { margin-block: 0; }
.hb-wir__text > * + * { margin-block-start: 1rem; }
.hb-wir__text { max-width: 40rem; }
.hb-wir__bild > * { margin: 0; }
.hb-wir__bild > * + * { margin-block-start: 1.5rem; }
/* Papa und Mama als gerahmte Porträts, leicht gegeneinander gedreht. Davor klebt Yannick: „Und ich!“ */
.hb-wir__leute { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; align-items: start; max-width: 30rem; padding-bottom: 4.5rem; }
.hb-wir__leute > * { margin: 0 !important; }
.hb-wir__portraet { transform: rotate(-2deg); }
.hb-wir__portraet--mama { transform: rotate(2.5deg); margin-top: 2.5rem !important; }
.hb-wir__portraet img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-color: #fff; border-width: 6px; box-shadow: 0 6px 0 rgba(10, 46, 36, 0.5); border-radius: var(--hb-radius-gross); }
.hb-wir__portraet figcaption { margin: 0.625rem 0 0; font-family: var(--hb-titel); font-size: 1.5rem; line-height: 1.1; color: inherit; text-align: left; }
.hb-wir__portraet--mama figcaption { text-align: right; }
.hb-wir__ich { position: absolute; z-index: 2; left: 50%; bottom: 0; width: 46%; max-width: none; transform: translateX(-50%); }
.hb-wir__ich.hb-buddy--blase-rechts .hb-buddy__blase { top: 8%; margin-left: -1.75rem; white-space: nowrap; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); }
@media (min-width: 56.25em) { .hb-wir { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } .hb-wir__bild { justify-self: end; } }

.hb-fotos { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hb-fotos > * { margin: 0; }
.hb-fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hb-fotos figcaption { margin-block-start: 0.5rem; font-size: 1rem; line-height: 1.4; color: inherit; text-align: left; }
@media (min-width: 56.25em) { .hb-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }

/* Holz-Tipps: Foto links, Text rechts, untereinander. Die Figur beim Sägen steht in der rechten unteren Ecke. */
.hb-tipps-abschnitt { overflow: hidden; }
.hb-tipps { display: grid; gap: var(--wp--preset--spacing--60); max-width: 50rem; }
.hb-tipps > * { margin: 0; }
.hb-tipp { display: grid; gap: 1rem 2rem; align-items: center; }
.hb-tipp > * { margin: 0; }
.hb-tipp__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hb-tipp__text > * { margin-block: 0; }
.hb-tipp__text > * + * { margin-block-start: 0.625rem; }
@media (min-width: 40em) { .hb-tipp { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); } }
.hb-tipp__mehr a { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.hb-tipps__mehr { margin-block-start: 0.5rem !important; }
.hb-tipps__figur { max-width: none; width: min(74vw, 22rem); margin: var(--wp--preset--spacing--60) calc(-1 * var(--hb-rand)) calc(-1 * var(--wp--preset--spacing--80)) auto !important; }
.hb-tipps__figur .hb-buddy__bild { filter: none; }
@media (min-width: 80em) {
	.hb-tipps__figur { position: absolute; right: 0; bottom: 0; width: clamp(20rem, 29vw, 27rem); margin: 0 !important; }
}

/* Häufige Fragen: am Rechner links die Überschrift mit der Figur, rechts die Fragen. */
@media (min-width: 64em) {
	.hb-fragen-abschnitt .hb-innen { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 0 clamp(2.5rem, 5vw, 5rem); align-items: start; }
	.hb-fragen-abschnitt .hb-innen > * { margin-block-start: 0; }
	.hb-fragen-abschnitt .hb-kopfteil { display: block; position: sticky; top: calc(var(--hb-leiste) + 2rem); }
	.hb-fragen-abschnitt .hb-kopfteil .hb-buddy { margin: 2rem 0 0; max-width: 15rem; }
}
.hb-fragen { max-width: 52rem; border-top: var(--hb-umriss); }
.hb-fragen > * { margin: 0; }
.hb-frage { border-bottom: var(--hb-umriss); }
.hb-frage summary { position: relative; display: block; min-height: var(--hb-touch); padding: 1.125rem 3.75rem 1.125rem 0; font-family: var(--hb-titel); font-size: clamp(1.3125rem, 1.2rem + 0.6vw, 1.625rem); line-height: 1.2; cursor: pointer; list-style: none; }
.hb-frage summary::-webkit-details-marker { display: none; }
.hb-frage summary::before, .hb-frage summary::after { content: ""; position: absolute; right: 0.625rem; top: 50%; width: 1.5rem; height: 0.3125rem; margin-top: -0.15625rem; border-radius: 3px; background: currentColor; transition: transform var(--hb-mittel) var(--hb-kurve); }
.hb-frage summary::after { transform: rotate(90deg); }
.hb-frage[open] summary::after { transform: rotate(0deg); }
.hb-frage > :not(summary) { margin: 0 0 1rem; max-width: 44rem; }
.hb-frage > :last-child { margin-block-end: 1.5rem; }

/* 8 · Bestellstrecke -------------------------------------------------------------------------- */

.hb-bestellung { --hb-fokus: var(--hb-glut); }
.hb-bestellung__raster { display: grid; gap: var(--wp--preset--spacing--60); align-items: start; }
.hb-bestellung__strecke { display: grid; gap: 1.25rem; min-width: 0; }
@media (min-width: 64em) { .hb-bestellung__raster.hat-zettel { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22.5rem); } }

/* Die vier Schritte sind Knöpfe. Erreichbare Schritte sind unterstrichen wie ein Link, gesperrte gestrichelt. */
.hb-fortschritt { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 0 0 0 -0.375rem; padding: 0; list-style: none; }
.hb-fortschritt li { display: flex; margin: 0; }
.hb-fortschritt__knopf {
	display: inline-flex; align-items: center; gap: 0.5rem; min-width: 3rem; min-height: 3rem; padding: 0.25rem 0.75rem 0.25rem 0.375rem;
	font: inherit; font-weight: 500; line-height: 1.2; color: var(--hb-kohle); background: none; border: 0; border-radius: 999px; cursor: pointer;
	-webkit-tap-highlight-color: transparent; transition: background-color var(--hb-kurz) ease;
}
.hb-fortschritt__knopf .hb-plakette { width: 2.25rem; height: 2.25rem; font-size: 1.125rem; background: var(--hb-weiss); }
.hb-fortschritt__wort { text-decoration: underline; text-decoration-thickness: 0.12em; text-underline-offset: 0.2em; }
@media (hover: hover) and (pointer: fine) { .hb-fortschritt__knopf:not(:disabled):not([aria-current]):hover { background: var(--hb-honig-hell); } }
.hb-fortschritt__knopf[aria-current="step"] { font-weight: 700; cursor: default; }
.hb-fortschritt__knopf[aria-current="step"] .hb-fortschritt__wort { text-decoration: none; }
.hb-fortschritt__knopf[aria-current="step"] .hb-plakette { background: var(--hb-honig); }
.hb-fortschritt li.ist-erledigt .hb-plakette { background: var(--hb-tanne); color: #fff; }
.hb-fortschritt__knopf:disabled { color: var(--hb-grau); cursor: default; }
.hb-fortschritt__knopf:disabled .hb-fortschritt__wort { text-decoration: none; }
.hb-fortschritt__knopf:disabled .hb-plakette { border-style: dashed; color: var(--hb-grau); border-color: var(--hb-grau); }
/* Am Handy steht nur beim aktuellen Schritt das Wort dabei, sonst bräuchte die Leiste zwei Zeilen. */
@media (max-width: 39.99em) {
	.hb-fortschritt { gap: 0.25rem; }
	.hb-fortschritt__knopf { padding-inline: 0.375rem; justify-content: center; }
	.hb-fortschritt__knopf[aria-current="step"] { padding-right: 0.75rem; }
	.hb-fortschritt__knopf:not([aria-current="step"]) .hb-fortschritt__wort { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; }
}

.hb-schritt { min-width: 0; }
.hb-schritt__titel { font-size: var(--wp--preset--font-size--titel-klein); margin: 0 0 1rem; }
.hb-schritt__titel:focus-visible { outline-offset: 6px; }
.hb-schritt__inhalt { display: grid; gap: 1.25rem; }
.hb-schritt__inhalt > * { margin: 0; }
.hb-schritt__knoepfe { display: flex; flex-wrap: wrap; gap: 0.875rem; align-items: center; }

/* Erledigter Schritt: eine Zeile mit „Ändern“ */
.hb-erledigt { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; padding: 0.875rem 1.125rem; background: var(--hb-weiss); border: var(--hb-umriss); border-radius: var(--hb-radius); }
.hb-erledigt__text { display: flex; gap: 0.75rem; align-items: center; min-width: 0; }
.hb-erledigt__text .hb-plakette { width: 2.25rem; height: 2.25rem; font-size: 1.125rem; background: var(--hb-tanne); color: #fff; }
.hb-erledigt strong { font-family: var(--hb-titel); font-weight: 400; font-size: 1.25rem; line-height: 1.2; display: block; }
.hb-erledigt span { line-height: 1.35; }

/* Holz-Kacheln */
.hb-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.25rem, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .hb-kacheln { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1.25rem; } }
@media (min-width: 64em) {
	.hb-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
	.hat-zettel .hb-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hb-kacheln > li { display: grid; position: relative; }
.hb-kachel {
	display: grid; grid-template-rows: auto 1fr; padding: 0; overflow: hidden; text-align: left; font: inherit; color: var(--hb-kohle);
	background: var(--hb-weiss); border: var(--hb-umriss); border-radius: var(--hb-radius); box-shadow: var(--hb-schatten); cursor: pointer;
	-webkit-tap-highlight-color: transparent; transition: transform var(--hb-kurz) var(--hb-kurve), box-shadow var(--hb-kurz) var(--hb-kurve);
}
.hb-kachel:active { transform: translateY(3px); box-shadow: var(--hb-schatten-gedrueckt); }
.hb-kachel__bild { display: block; aspect-ratio: 4 / 3; background: var(--hb-linie); border-bottom: var(--hb-umriss); overflow: hidden; }
.hb-kachel__foto { width: 100%; height: 100%; object-fit: cover; }
.hb-kachel__text { display: grid; gap: 0.125rem; align-content: start; padding: 0.75rem 0.875rem 0.9375rem; }
.hb-kachel__name { font-family: var(--hb-titel); font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); line-height: 1.1; }
.hb-kachel__preis { font-size: 1.0625rem; font-weight: 500; }
.hb-kachel__stand { font-size: 1rem; font-weight: 700; color: var(--hb-glut-dunkel); }
.hb-kachel--aus .hb-kachel__foto { filter: grayscale(1) contrast(0.9); opacity: 0.7; }
.hb-kachel[aria-pressed="true"] { outline: 5px solid var(--hb-glut); outline-offset: -1px; }
@media (hover: hover) and (pointer: fine) { .hb-kachel:hover { background: var(--hb-honig-hell); } }

/* Auswahl eines Holzes */
.hb-tafel { background: var(--hb-weiss); border: var(--hb-umriss); border-radius: var(--hb-radius-gross); padding: clamp(1.125rem, 0.8rem + 1.6vw, 2rem); display: grid; gap: 1.75rem; max-width: 58rem; }
.hb-tafel > * { margin: 0; min-width: 0; }
.hb-tafel__kopf { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; align-items: center; }
.hb-tafel__kopf img { width: 5.5rem; height: 5.5rem; object-fit: cover; border: var(--hb-umriss); border-radius: 12px; }
.hb-tafel__kopf h4 { font-family: var(--hb-titel); font-weight: 400; font-size: clamp(1.625rem, 1.4rem + 1vw, 2.125rem); line-height: 1.05; margin: 0; }
.hb-tafel__kopf p { margin: 0.25rem 0 0; line-height: 1.45; }
@media (max-width: 29.99em) { .hb-tafel__kopf { grid-template-columns: 1fr; } .hb-tafel__kopf img { display: none; } }

.hb-gruppe { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 0.75rem; }
.hb-gruppe legend, .hb-gruppe__titel { padding: 0; font-family: var(--hb-titel); font-weight: 400; font-size: 1.375rem; line-height: 1.2; margin: 0 0 0.125rem; }
.hb-gruppe__hilfe { margin: 0; font-size: 1.0625rem; line-height: 1.45; color: var(--hb-grau); }

/* Am Rechner stehen die Trocknungsgrade nebeneinander, so lassen sich die Preise vergleichen. */
.hb-wahlen { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.hb-wahlen--reihe { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); }
.hb-wahlen--paar { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.hb-wahl { position: relative; display: grid; }
.hb-wahl input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.hb-wahl__flaeche { display: grid; gap: 0.125rem; align-content: center; min-height: var(--hb-touch); padding: 0.75rem 1rem 0.8125rem 3.25rem; background: var(--hb-birke); border: var(--hb-umriss); border-radius: var(--hb-radius); position: relative; line-height: 1.35; }
.hb-wahl__flaeche::before { content: ""; position: absolute; left: 0.875rem; top: 50%; width: 1.625rem; height: 1.625rem; margin-top: -0.8125rem; border-radius: 50%; background: var(--hb-weiss); border: var(--hb-umriss); }
.hb-wahl__flaeche::after { content: ""; position: absolute; left: 1.3125rem; top: 50%; width: 0.75rem; height: 0.75rem; margin-top: -0.375rem; border-radius: 50%; background: var(--hb-glut); transform: scale(0); transition: transform var(--hb-kurz) var(--hb-kurve); }
.hb-wahl input:checked + .hb-wahl__flaeche { background: var(--hb-honig-hell); outline: 3px solid var(--hb-glut); outline-offset: -3px; border-color: var(--hb-glut); }
.hb-wahl input:checked + .hb-wahl__flaeche::after { transform: scale(1); }
.hb-wahl input:focus-visible + .hb-wahl__flaeche { outline: 4px solid var(--hb-glut); outline-offset: 3px; }
.hb-wahl input:disabled + .hb-wahl__flaeche { color: var(--hb-grau); background: #E9EBE6; border-style: dashed; }
.hb-wahl input:disabled { cursor: default; }
.hb-wahl__name { font-family: var(--hb-titel); font-size: 1.3125rem; line-height: 1.15; }
.hb-wahl__preis { font-weight: 700; }
.hb-wahl__zusatz { font-size: 1.0625rem; color: var(--hb-grau); }
.hb-wahl input:checked + .hb-wahl__flaeche .hb-wahl__zusatz { color: var(--hb-kohle); }
.hb-wahlen--reihe .hb-wahl__flaeche { padding: 0.625rem 0.5rem; text-align: center; justify-items: center; }
.hb-wahlen--reihe .hb-wahl__flaeche::before { display: none; }
/* In der Reihe (Scheitlängen) ist kein Platz für den Kreis. Die Wahl zeigt ein Haken-Aufkleber an der Ecke. */
.hb-wahlen--reihe .hb-wahl__flaeche::after {
	left: auto; right: -0.5rem; top: -0.5rem; width: 1.75rem; height: 1.75rem; margin: 0; border: 3px solid #fff;
	background: var(--hb-glut) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 72% no-repeat;
}
.hb-wahl--gross .hb-wahl__flaeche { padding-block: 1rem; }

.hb-auskunft { display: grid; gap: 0.875rem; }
.hb-auskunft > * { margin: 0; }
/* Leer nimmt die Auskunft keinen Platz weg. Sie bleibt trotzdem im Baum, damit Vorleseprogramme neue Meldungen ansagen. */
.hb-schritt__inhalt > .hb-auskunft:empty { margin-top: -1.25rem; }

/* Menge mit Plus und Minus */
.hb-menge { display: grid; grid-template-columns: var(--hb-touch) minmax(0, 1fr) var(--hb-touch); gap: 0.75rem; align-items: center; max-width: 24rem; }
.hb-menge__knopf { width: var(--hb-touch); height: var(--hb-touch); min-height: 0; padding: 0; font-size: 2rem; border-radius: var(--hb-radius); }
.hb-menge__knopf .hb-icon { width: 1.75rem; height: 1.75rem; stroke-width: 3.4; }
.hb-menge__wert { text-align: center; }
.hb-menge__zahl { display: block; font-family: var(--hb-titel); font-size: 2rem; line-height: 1; }
.hb-menge__klartext { display: block; margin-top: 0.25rem; font-size: 1.0625rem; font-weight: 500; color: var(--hb-grau); }

.hb-haenger { display: block; width: 100%; max-width: 21rem; height: auto; overflow: visible; }
.hb-haenger__scheit { transform-box: fill-box; transform-origin: center; }
.hb-haenger__umriss { fill: none; stroke: var(--hb-kohle); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.hb-haenger__reihe { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: flex-end; margin-top: 0.5rem; }
.hb-haenger__reihe--mehrere .hb-haenger { max-width: 11.5rem; flex: 1 1 8rem; }

.hb-zwischensumme { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; justify-content: space-between; align-items: baseline; padding-top: 1rem; border-top: var(--hb-umriss); }
.hb-zwischensumme__betrag { font-family: var(--hb-titel); font-size: clamp(2rem, 1.7rem + 1.4vw, 2.75rem); line-height: 1; }
.hb-zwischensumme__wort { font-weight: 500; }

/* Zubehör: keine Holzsorte, sondern eine Zeile mit Plus und Minus. Steht unter den Kacheln und in der Bestellung. */
.hb-zubehoer { display: grid; gap: 0.75rem; margin-top: 0.75rem !important; }
.hb-zubehoer > * { margin: 0; }
.hb-zubehoer__titel { font-family: var(--hb-titel); font-weight: 400; font-size: 1.375rem; line-height: 1.2; }
.hb-zubehoer__liste { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.hb-zubehoer__zeile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.875rem 1rem; align-items: center; padding: 0.875rem 1rem; background: var(--hb-weiss); border: var(--hb-umriss); border-radius: var(--hb-radius); }
.hb-zubehoer__zeile.ist-dabei { background: var(--hb-honig-hell); border-color: var(--hb-glut); outline: 3px solid var(--hb-glut); outline-offset: -3px; }
.hb-zubehoer__bild { width: 6rem; height: 4.5rem; object-fit: cover; border: var(--hb-umriss); border-radius: 10px; }
.hb-zubehoer__text { display: grid; gap: 0.125rem; line-height: 1.35; }
.hb-zubehoer__name { font-family: var(--hb-titel); font-weight: 400; font-size: 1.3125rem; line-height: 1.15; }
.hb-zubehoer__preis { font-weight: 700; }
.hb-zubehoer__kurz { font-size: 1.0625rem; color: var(--hb-grau); }
.hb-zubehoer__zeile.ist-dabei .hb-zubehoer__kurz { color: var(--hb-kohle); }
.hb-zubehoer__zeile .hb-menge { grid-column: 1 / -1; max-width: 20rem; }
.hb-menge--klein .hb-menge__zahl { font-size: 1.625rem; }
@media (min-width: 48em) {
	.hb-zubehoer__zeile { grid-template-columns: auto minmax(0, 1fr) 17rem; }
	.hb-zubehoer__zeile .hb-menge { grid-column: auto; }
}
.hb-mehr { display: flex; flex-wrap: wrap; gap: 0.625rem 1.25rem; align-items: center; }
.hb-mehr__frage { margin: 0; font-family: var(--hb-titel); font-size: 1.375rem; line-height: 1.2; }

/* Ersparnis: Aufkleber in Glut */
.hb-spar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; }
.hb-spar__stern { width: 6.75rem; height: 6.75rem; transform: rotate(-7deg); filter: drop-shadow(0 4px 0 rgba(26, 29, 26, 0.25)); }
.hb-spar__stern text { font-family: var(--hb-titel); fill: #fff; }
.hb-spar p { margin: 0; line-height: 1.45; }
.hb-spar p + p { margin-top: 0.25rem; }
@media (max-width: 24.99em) { .hb-spar__stern { width: 5.75rem; height: 5.75rem; } }

/* Posten in der Bestellung */
.hb-posten { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.hb-posten__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; align-items: start; padding: 1rem 1.125rem; background: var(--hb-weiss); border: var(--hb-umriss); border-radius: var(--hb-radius); }
.hb-posten__name { font-family: var(--hb-titel); font-size: 1.375rem; line-height: 1.15; }
.hb-posten__wie { display: block; line-height: 1.4; }
.hb-posten__preis { font-family: var(--hb-titel); font-size: 1.375rem; line-height: 1.15; white-space: nowrap; text-align: right; }
.hb-posten__knoepfe { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.25rem; }
.hb-posten__knoepfe .hb-knopf--schlicht { min-height: 3rem; }
/* Zubehör in der Bestellung: Plus und Minus stehen gleich am Posten. */
.hb-posten__zeile--zubehoer .hb-posten__knoepfe { align-items: center; gap: 0.5rem 1.5rem; margin-top: 0.625rem; }
.hb-posten__zeile--zubehoer .hb-menge { flex: 1 1 14rem; max-width: 18rem; }

/* Bestellzettel (am Rechner rechts, bleibt stehen) */
.hb-zettel { display: none; }
@media (min-width: 64em) {
	.hb-zettel { display: block; position: sticky; top: calc(var(--hb-leiste) + 1.25rem); padding: 1.5rem; background: var(--hb-weiss); border: var(--hb-umriss); border-radius: var(--hb-radius-gross); box-shadow: 0 7px 0 var(--hb-kohle); transform: rotate(0.6deg); }
}
.hb-zettel__titel { font-size: 1.625rem; margin: 0 0 1rem; }
.hb-zettel__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.hb-zettel__liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 0.75rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--hb-linie); line-height: 1.35; }
.hb-zettel__liste strong { font-weight: 700; }
.hb-zettel__liste span { color: var(--hb-grau); font-size: 1.0625rem; }
.hb-zettel__liste b { font-weight: 700; white-space: nowrap; }
.hb-zettel__summe { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 1rem 0 0; }
.hb-zettel__summe strong { font-family: var(--hb-titel); font-weight: 400; font-size: 2.125rem; line-height: 1; white-space: nowrap; }
.hb-zettel__spar { margin: 0.75rem 0 0; padding: 0.5rem 0.75rem; background: var(--hb-glut); color: #fff; border-radius: 10px; font-weight: 700; line-height: 1.35; }
.hb-zettel .hb-klein { margin: 0.75rem 0 0; }

/* Übersicht vor dem Abschicken und Bestätigung */
.hb-uebersicht { display: grid; gap: 1rem; }
.hb-uebersicht > * { margin: 0; }
.hb-uebersicht__block { padding: 1.125rem 1.25rem; background: var(--hb-weiss); border: var(--hb-umriss); border-radius: var(--hb-radius); }
.hb-uebersicht__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.25rem 1rem; margin-bottom: 0.5rem; }
.hb-uebersicht__kopf h4 { font-family: var(--hb-titel); font-weight: 400; font-size: 1.375rem; margin: 0; }
.hb-uebersicht__block p { margin: 0; line-height: 1.5; }
.hb-uebersicht__block ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.625rem; }
.hb-uebersicht__block li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 1rem; line-height: 1.4; }
.hb-uebersicht__block li span { color: var(--hb-grau); }
.hb-uebersicht__block li b { white-space: nowrap; }
.hb-uebersicht__gesamt { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 0.875rem; padding-top: 0.875rem; border-top: var(--hb-umriss); }
.hb-uebersicht__gesamt strong { font-family: var(--hb-titel); font-weight: 400; font-size: clamp(2rem, 1.7rem + 1.4vw, 2.75rem); line-height: 1; white-space: nowrap; }
.hb-uebersicht__block .hb-uebersicht__fuss { margin-top: 0.75rem; }
.hb-uebersicht__block .hb-zettel__spar { margin-top: 0.875rem; }
.hb-nummer { white-space: nowrap; }
.hb-uebersicht__block p + p { margin-top: 0.5rem; }
.hb-abschluss { display: grid; gap: 0.875rem; justify-items: start; }
.hb-abschluss > * { margin: 0; }
.hb-abschluss .hb-knopf { font-size: 1.5rem; min-height: 4rem; padding-inline: 2rem; }

.hb-fertig { display: grid; gap: 1.5rem; align-items: center; padding: clamp(1.25rem, 0.9rem + 1.8vw, 2.25rem); background: var(--hb-tanne); color: var(--hb-birke); border: var(--hb-umriss); border-radius: var(--hb-radius-gross); --hb-fokus: var(--hb-honig); }
.hb-fertig > * { margin: 0; }
.hb-fertig__figur { max-width: min(60vw, 15rem); }
.hb-fertig__text > *, .hb-fertig__text > div > * { margin-block: 0; }
.hb-fertig__text > * + *, .hb-fertig__text > div > * + * { margin-block-start: 0.875rem; }
.hb-fertig .hb-meldung { color: var(--hb-kohle); }
.hb-fertig__text h3 { font-size: var(--wp--preset--font-size--titel-klein); }
.hb-fertig .hb-uebersicht__block { color: var(--hb-kohle); }
.hb-fertig a { color: inherit; font-weight: 700; }
.hb-fertig .hb-knopf { color: var(--hb-kohle); }
@media (min-width: 48em) { .hb-fertig { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); align-items: start; } }
.hb-fertig--kontakt { background: var(--hb-tanne); }

.hb-bestellung__fussnote { max-width: 46rem; }

/* 9 · Kontakt und Fuß ------------------------------------------------------------------------- */

.hb-kontakt { display: grid; gap: var(--wp--preset--spacing--60); align-items: start; }
.hb-kontakt > * { margin: 0; min-width: 0; }
.hb-kontakt__daten > * { margin: 0; }
.hb-kontakt__daten > * + * { margin-block-start: var(--wp--preset--spacing--50); }
.hb-kontakt__formular { padding: clamp(1.25rem, 0.9rem + 1.8vw, 2.25rem); background: var(--hb-birke); color: var(--hb-kohle); border: var(--hb-umriss); border-radius: var(--hb-radius-gross); --hb-fokus: var(--hb-glut); }
.hb-kontakt__formular > * { margin: 0; }
.hb-kontakt__formular > h3 { font-size: var(--wp--preset--font-size--titel-klein); margin-bottom: 1.25rem; }
.hb-kontakt__formular .hb-klein { color: var(--hb-grau); }
@media (min-width: 56.25em) { .hb-kontakt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.hb-kontaktdaten { display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.hb-kontaktdaten__teil { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0 0.75rem; align-content: start; }
.hb-kontaktdaten__teil--breit { grid-column: 1 / -1; }
.hb-kontaktdaten__teil .hb-icon { width: 2rem; height: 2rem; margin-top: 0.125rem; color: var(--hb-honig); grid-row: span 2; }
.hb-kontaktdaten__teil h3 { font-size: 1.375rem; margin: 0; }
.hb-kontaktdaten__teil p { margin: 0.25rem 0 0; line-height: 1.5; }
.hb-kontaktdaten__teil a { color: inherit; }
.hb-kontaktdaten__gross { font-family: var(--hb-titel); font-size: 1.625rem; line-height: 1.2; text-decoration: none; }
.hb-kontaktdaten__gross:hover { text-decoration: underline; }

/* Am Handy stehen die Knöpfe unter der Skizze, ab 640 px liegen sie unten links auf ihr. */
.hb-karte__flaeche { position: relative; overflow: hidden; border: var(--hb-umriss); border-radius: var(--hb-radius-gross); background: var(--hb-tanne-hell); }
.hb-karte__skizze { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; }
.hb-karte__knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; padding: 0.25rem 1rem 1.125rem; }
.hb-karte--geladen .hb-karte__flaeche { aspect-ratio: 1 / 1; }
@media (min-width: 40em) {
	.hb-karte__flaeche, .hb-karte--geladen .hb-karte__flaeche { aspect-ratio: 5 / 3; }
	.hb-karte__skizze { position: absolute; top: 0; left: 0; height: 100%; }
	.hb-karte__flaeche > .hb-karte__knoepfe { position: absolute; left: 0; bottom: 0; padding: 1rem; }
}
.hb-karte__knoepfe .wp-block-button__link { font-size: 1.1875rem; min-height: 3.25rem; padding-inline: 1.125rem; box-shadow: 0 5px 0 var(--hb-nacht); }
.hb-karte__flaeche iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; background: var(--hb-birke); }
.hb-karte--geladen > .hb-karte__knoepfe { padding: 0.875rem 0 0; }
.hb-karte__adresse { margin: 0.875rem 0 0; }
.hb-karte__hinweis { margin: 0.375rem 0 0; }

.hb-fuss { padding: var(--wp--preset--spacing--70) var(--hb-rand) var(--wp--preset--spacing--60); border-top: 4px solid var(--hb-tanne-hell); }
.hb-fuss__raster { display: grid; gap: var(--wp--preset--spacing--60); }
.hb-fuss__raster > * { margin: 0; }
.hb-fuss__raster > * > * { margin-block: 0; }
.hb-fuss__raster > * > * + * { margin-block-start: 0.875rem; }
.hb-fuss__titel { font-size: 1.375rem; }
.hb-fuss .hb-wortmarke { font-size: 2.25rem; }
.hb-fuss__links { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: 0.25rem; }
.hb-fuss__links a, .hb-absender__links a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 3rem; color: inherit; }
.hb-absender__satz { margin: 0; max-width: 32rem; line-height: 1.5; }
.hb-absender__links { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.25rem; }
.hb-fuss .wp-block-button__link { box-shadow: 0 5px 0 #000; }
.hb-fuss__ende { margin-block-start: var(--wp--preset--spacing--60) !important; padding-top: 0.5rem; border-top: 2px solid var(--hb-tanne-hell); }
.hb-fuss__schluss { margin: 0; font-size: 1rem; color: #D7E2DC; }
.hb-fuss__schluss a { display: inline-flex; align-items: center; min-height: 3rem; color: inherit; }
@media (min-width: 40em) and (max-width: 63.99em) { .hb-fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hb-fuss__marke { grid-column: 1 / -1; } }
@media (min-width: 64em) { .hb-fuss__raster { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.8fr); } }
.hb-tipps-links a { line-height: 1.3; }
@media (max-width: 56.24em) { .hb-fuss { padding-bottom: 6.5rem; } }

/* 10 · Schwebendes: Anruf-Knopf und Preisleiste (am Handy unten fest) -------------------------- */

.hb-anrufknopf {
	position: fixed; z-index: var(--hb-e-schwebend); right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
	display: inline-flex; align-items: center; gap: 0.5rem; min-height: 3.75rem; padding: 0 1.25rem 0 1rem;
	font-family: var(--hb-titel); font-size: 1.25rem; line-height: 1; color: var(--hb-kohle); text-decoration: none;
	background: var(--hb-honig); border: var(--hb-umriss); border-radius: 999px; box-shadow: var(--hb-schatten);
	transition: transform var(--hb-mittel) var(--hb-kurve), opacity var(--hb-mittel) ease, visibility 0s;
}
.hb-anrufknopf:active { transform: translateY(3px); box-shadow: var(--hb-schatten-gedrueckt); }
.hb-anrufknopf__zeichen .hb-icon { width: 1.75rem; height: 1.75rem; }
/* Mit JavaScript zeigt sich der Knopf nur, wenn keine andere Telefonnummer im Bild ist (assets/js/site.js setzt
   ist-da). Ohne JavaScript steht er immer da. Versteckt ist er auch für die Tastatur nicht erreichbar. */
.js .hb-anrufknopf:not(.ist-da), .hat-preisleiste .hb-anrufknopf {
	transform: translateY(160%); opacity: 0; visibility: hidden; pointer-events: none;
	transition: transform var(--hb-mittel) var(--hb-kurve), opacity var(--hb-mittel) ease, visibility 0s linear var(--hb-mittel);
}
@media (min-width: 56.25em) { .hb-anrufknopf { display: none; } }

.hb-preisleiste {
	position: fixed; z-index: var(--hb-e-preisleiste); left: 0; right: 0; bottom: 0;
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; align-items: center;
	padding: 0.625rem max(1rem, env(safe-area-inset-right)) max(0.625rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
	background: var(--hb-weiss); color: var(--hb-kohle); border-top: var(--hb-umriss); box-shadow: 0 -4px 0 rgba(26, 29, 26, 0.12);
}
.hb-preisleiste__anruf { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; color: var(--hb-kohle); background: var(--hb-birke); border: var(--hb-umriss); border-radius: 50%; }
.hb-preisleiste__anruf .hb-icon { width: 1.625rem; height: 1.625rem; }
.hb-preisleiste__summe { display: grid; line-height: 1.1; min-width: 0; }
.hb-preisleiste__wort { font-size: 1rem; font-weight: 500; line-height: 1.15; color: var(--hb-grau); }
.hb-preisleiste__betrag { font-family: var(--hb-titel); font-weight: 400; font-size: clamp(1.375rem, 0.6rem + 3.6vw, 1.75rem); white-space: nowrap; }
.hb-preisleiste .hb-knopf { min-height: 3.25rem; max-width: 10.5rem; padding: 0.375rem 1rem; font-size: 1.125rem; box-shadow: 0 4px 0 var(--hb-kohle); }
@media (max-width: 23.49em) { .hb-preisleiste { grid-template-columns: minmax(0, 1fr) auto; } .hb-preisleiste__anruf { display: none; } }
@media (min-width: 64em) { .hb-preisleiste { display: none !important; } }

/* Lieferkosten-Rechner: ein Zettel mit einem Feld. Links die Regel, rechts das Rechnen. */
.hb-rechner { display: grid; gap: 1.25rem 3rem; padding: clamp(1.25rem, 0.9rem + 1.8vw, 2.25rem); background: var(--hb-weiss); color: var(--hb-kohle); border: var(--hb-umriss); border-radius: var(--hb-radius-gross); box-shadow: 0 6px 0 var(--hb-kohle); scroll-margin-top: calc(var(--hb-leiste) + 2rem); --hb-fokus: var(--hb-glut); }
.hb-rechner > * { min-width: 0; }
.hb-rechner__text > *, .hb-rechner__rechnen > * { margin: 0; }
.hb-rechner__text > * + * { margin-block-start: 0.625rem; }
.hb-rechner__titel { font-size: var(--wp--preset--font-size--titel-klein); }
.hb-rechner__rechnen { display: grid; gap: 0.875rem; }
.hb-rechner__formular { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; }
.hb-rechner__formular .hb-feld { flex: 1 1 9rem; max-width: 13rem; }
.hb-rechner__formular .hb-feld__fehler { flex: 1 0 100%; }
.hb-rechner__ergebnis:empty { margin-top: -0.875rem; }
.hb-rechner .hb-meldung .hb-knopf { color: var(--hb-kohle); text-decoration: none; }
@media (min-width: 56.25em) { .hb-rechner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; } }

/* Cookie-Banner: unten fest, bis eine Antwort gegeben ist. Beide Knöpfe sehen gleich aus. */
.hb-banner {
	position: fixed; z-index: 200; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow: auto;
	padding: 1.125rem var(--hb-rand) max(1.125rem, env(safe-area-inset-bottom));
	background: var(--hb-weiss); color: var(--hb-kohle); border-top: var(--hb-umriss); box-shadow: 0 -5px 0 rgba(26, 29, 26, 0.14); --hb-fokus: var(--hb-glut);
}
.hb-banner__innen { max-width: var(--hb-breit); margin-inline: auto; display: grid; gap: 1rem 2.5rem; align-items: center; }
.hb-banner__text > * { margin: 0; font-size: 1.125rem; line-height: 1.5; }
.hb-banner__text > * + * { margin-block-start: 0.5rem; }
.hb-banner__text .hb-banner__titel { font-family: var(--hb-titel); font-size: 1.5rem; line-height: 1.15; }
.hb-banner__text a { color: inherit; font-weight: 700; }
.hb-banner__knoepfe { display: grid; gap: 0.75rem; }
@media (min-width: 40em) and (max-width: 56.24em) { .hb-banner__knoepfe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 56.25em) { .hb-banner__innen { grid-template-columns: minmax(0, 1fr) minmax(15rem, auto); } }
.hat-banner .hb-anrufknopf, .hat-banner .hb-preisleiste { transform: translateY(160%); opacity: 0; visibility: hidden; pointer-events: none; }

/* 11 · Bewegung ------------------------------------------------------------------------------- */
/* Alles steht ohne Bewegung fertig an seinem Platz. Bewegt wird nur, wenn JavaScript läuft und das Gerät
   keine reduzierte Bewegung verlangt (Klasse js-bewegung am html-Element). */

.js-bewegung .hb-start::before { animation: hb-wachsen 800ms var(--hb-kurve) both; }
/* Yannick kommt von links ins Bild, Papa taucht daneben auf. Dann sagt erst der eine Moin, dann der andere. */
.js-bewegung .hb-start__figur--yannick .hb-buddy__figur { animation: hb-kommen 900ms var(--hb-kurve) both; }
.js-bewegung .hb-start__figur--papa .hb-buddy__figur { animation: hb-hoch 700ms var(--hb-kurve) 300ms both; }
.js-bewegung .hb-start__figur--yannick .hb-buddy__blase { animation: hb-plopp 280ms var(--hb-kurve) 900ms both; }
.js-bewegung .hb-start__figur--papa .hb-buddy__blase { animation: hb-plopp 280ms var(--hb-kurve) 1300ms both; }
@keyframes hb-hoch { from { transform: translateY(104%); } to { transform: none; } }
.js-bewegung .hb-banner:not([hidden]) { animation: hb-banner 320ms var(--hb-kurve) both; }
@keyframes hb-banner { from { transform: translateY(100%); } to { transform: none; } }
@keyframes hb-wachsen { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes hb-kommen {
	0% { transform: translate(-105%, 0) rotate(-6deg); }
	24% { transform: translate(-74%, -12px) rotate(-2deg); }
	46% { transform: translate(-46%, 0) rotate(-5deg); }
	68% { transform: translate(-20%, -8px) rotate(-1deg); }
	88% { transform: translate(-4%, 0) rotate(-2deg); }
	100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes hb-plopp { from { opacity: 0; scale: 0.85; } to { opacity: 1; scale: 1; } }

/* Nur neue Scheite fallen. Was schon auf dem Anhänger lag, bleibt liegen. */
.js-bewegung .hb-haenger__scheit:not(.hb-haenger__scheit--liegt) { animation: hb-scheit 300ms var(--hb-kurve) both; animation-delay: calc(var(--i, 0) * 24ms); }
@keyframes hb-scheit { from { opacity: 0; transform: translateY(-22px) rotate(-20deg); } to { opacity: 1; transform: none; } }

.js-bewegung .hb-kachel__haken, .js-bewegung .hb-spar__stern { animation: hb-kleben 240ms var(--hb-kurve) both; }
@keyframes hb-kleben { from { opacity: 0; scale: 1.25; } to { opacity: 1; scale: 1; } }
.hb-kachel__haken { position: absolute; z-index: 1; top: -0.75rem; right: -0.625rem; width: 3.5rem; height: 3.5rem; rotate: 9deg; pointer-events: none; }

.js-bewegung .hb-fertig:not([hidden]) .hb-buddy__figur, .js-bewegung .hb-schritt--fertig:not([hidden]) .hb-buddy__figur { animation: hb-aufkleben 380ms var(--hb-kurve) both; }
@keyframes hb-aufkleben { from { opacity: 0; scale: 1.3; rotate: -10deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }

.js-bewegung .hb-tafel, .js-bewegung .hb-schritt.is-aktiv > .hb-schritt__inhalt { animation: hb-auf 220ms ease both; }
@keyframes hb-auf { from { opacity: 0; } to { opacity: 1; } }

/* Der Anhänger folgt dem Blättern. Die kurze Überblendung glättet das Rucken eines Mausrads. */
.js-bewegung .hb-ablauf__haenger { transition: transform 140ms linear; }
.js-bewegung .hb-ablauf__schritt.ist-dran::before { transform: scale(1.1); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* 12 · Druck ---------------------------------------------------------------------------------- */
@media print {
	.hb-leiste-teil, .hb-kopf__nav, .hb-anrufknopf, .hb-preisleiste, .hb-karte__knoepfe, .hb-banner { display: none !important; }
	.is-style-flaeche-tanne, .is-style-flaeche-tannennacht, .hb-kopf { background: #fff !important; color: #000 !important; }
	.hb-abschnitt { padding-block: 1.5rem; }
}