/*
Theme Name: Hörfeld
Theme URI: https://example.com/hoerfeld
Author: Ihre Agentur
Description: Block-Theme für Hörakustiker. 25 Module als Block-Vorlagen (Patterns): Terminbuchung, Hör-Selbstcheck, Kostenrechner, Hörverlust-Simulator, Bewertungen, Standorte und Rechtspaket. Barrierearm nach WCAG 2.1 AA, Schriften lokal eingebunden.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hoerfeld
Tags: block-patterns, full-site-editing, accessibility-ready, style-variations
*/

/* ---------- Grundlagen ---------- */
html { scroll-padding-top: 140px; }
body { -webkit-font-smoothing: antialiased; }
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}
.wp-element-button, .wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.hf-skip { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); padding: 12px 18px; }
.hf-skip:focus { left: 12px; top: 12px; }
.screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; }

.hf-eyebrow { font-size: var(--wp--preset--font-size--small); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--primary); }
.hf-note { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.hf-muted { color: var(--wp--preset--color--muted); }
.hf-stars { color: var(--wp--preset--color--accent); letter-spacing: 2px; }

/* ---------- Kopfbereich ---------- */
.hf-header { position: sticky; top: 0; z-index: 50; background: var(--wp--preset--color--base); border-bottom: 1px solid var(--wp--preset--color--line); }
.admin-bar .hf-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .hf-header { top: 0; position: relative; } }
.hf-utility { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); font-size: var(--wp--preset--font-size--small); }
.hf-utility a { color: var(--wp--preset--color--base); }
.hf-utility p { margin: 0; }

/* Bedienhilfen */
.hf-a11y { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.hf-a11y button { font: inherit; font-weight: 700; min-width: 40px; min-height: 36px; border-radius: 6px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.hf-a11y button[aria-pressed="true"] { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }
html.hf-fs-1 { font-size: 112.5%; }
html.hf-fs-2 { font-size: 125%; }
html.hf-contrast body,
html.hf-contrast .hf-header,
html.hf-contrast [class*="has-soft-background-color"],
html.hf-contrast [class*="has-base-background-color"] { background: #fff !important; color: #000 !important; }
html.hf-contrast :is(h1,h2,h3,h4,p,li,dt,dd,span,label,summary,td,th) { color: #000 !important; }
html.hf-contrast a { color: #0000C8 !important; text-decoration: underline !important; }
html.hf-contrast .wp-element-button, html.hf-contrast .wp-block-button__link, html.hf-contrast .hf-btn { background: #000 !important; color: #fff !important; border-color: #000 !important; }
html.hf-contrast .hf-utility { background: #000 !important; }
html.hf-contrast .hf-utility * { color: #fff !important; }

/* ---------- Karten und Stufen ---------- */
.is-style-hf-karte { border: 1px solid var(--wp--preset--color--line); border-radius: 12px; padding: clamp(18px, 3vw, 28px); background: var(--wp--preset--color--base); }
.is-style-hf-karte-betont { border: 2px solid var(--wp--preset--color--primary); border-radius: 12px; padding: clamp(18px, 3vw, 28px); background: var(--wp--preset--color--base); }
.hf-price { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-large); font-weight: 700; font-variant-numeric: tabular-nums; margin: 0; }
.hf-situations { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; font-size: var(--wp--preset--font-size--small); }
.hf-situations li { display: flex; justify-content: space-between; gap: 8px; color: var(--wp--preset--color--muted); }
.hf-situations strong { color: var(--wp--preset--color--accent); letter-spacing: 1px; font-weight: 400; }

ol.hf-steps { list-style: none; counter-reset: hf; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
ol.hf-steps > li { counter-increment: hf; background: var(--wp--preset--color--soft); border-top: 4px solid var(--wp--preset--color--primary); border-radius: 8px; padding: 14px 16px; margin: 0; }
ol.hf-steps > li::before { content: counter(hf) "."; display: block; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--primary); }

.hf-logos { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.hf-logos li { border: 1px solid var(--wp--preset--color--line); border-radius: 8px; padding: 10px 16px; font-weight: 700; color: var(--wp--preset--color--muted); margin: 0; }

.hf-figure { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--xx-large); font-weight: 700; line-height: 1; margin: 0; font-variant-numeric: tabular-nums; }

.hf-date { display: inline-block; text-align: center; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); border-radius: 10px; padding: 10px 14px; font-weight: 700; line-height: 1.1; }
.hf-date span { display: block; font-family: var(--wp--preset--font-family--heading); font-size: 1.8em; }

/* ---------- Gemeinsame Formularelemente ---------- */
.hf-widget { display: grid; gap: 14px; }
.hf-widget label { display: grid; gap: 6px; font-weight: 700; }
.hf-widget :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) {
	font: inherit; min-height: 48px; padding: 8px 12px; border: 1px solid var(--wp--preset--color--muted); border-radius: 8px;
	background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); width: 100%;
}
.hf-widget .hf-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; align-items: end; }
.hf-widget .hf-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.hf-widget .hf-check input { margin-top: 5px; width: 20px; height: 20px; flex: none; }
.hf-btn { font: inherit; font-weight: 700; min-height: 48px; padding: 0 22px; border-radius: 8px; border: 2px solid var(--wp--preset--color--primary); background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.hf-btn.is-ghost { background: transparent; color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--line); }
.hf-hp { position: absolute !important; left: -9999px !important; }
.hf-msg { padding: 14px 16px; border-radius: 8px; background: var(--wp--preset--color--soft); border-left: 4px solid var(--wp--preset--color--primary); }
.hf-msg.is-error { border-left-color: #B42318; }

.hf-choices { display: grid; gap: 8px; }
.hf-choice { font: inherit; text-align: left; display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 52px; padding: 10px 16px; border: 1px solid var(--wp--preset--color--line); border-radius: 10px; background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); cursor: pointer; }
.hf-choice small { color: var(--wp--preset--color--muted); }
.hf-choice[aria-pressed="true"] { border-color: var(--wp--preset--color--primary); box-shadow: inset 5px 0 0 var(--wp--preset--color--primary); }
.hf-progress { height: 8px; border-radius: 4px; background: var(--wp--preset--color--soft); overflow: hidden; }
.hf-progress i { display: block; height: 100%; background: var(--wp--preset--color--primary); transition: width .3s; }

/* Rechner */
.hf-result { background: var(--wp--preset--color--soft); border-radius: 10px; padding: 16px 18px; display: grid; gap: 2px; }
.hf-result output { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-large); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Simulator */
.hf-sim { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: center; }
@media (max-width: 700px) { .hf-sim { grid-template-columns: 1fr; } }
.hf-sim svg { width: 100%; height: auto; display: block; }
.hf-sim svg text { font-family: ui-monospace, Menlo, monospace; fill: var(--wp--preset--color--muted); }
.hf-sim svg .hf-snd { fill: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--body); font-weight: 700; transition: opacity .3s; }
.hf-sim svg .hf-grid { stroke: var(--wp--preset--color--line); }
.hf-sim svg .hf-banana { fill: var(--wp--preset--color--accent); fill-opacity: .18; }
.hf-sim svg .hf-thr { stroke: #C8372D; fill: none; stroke-width: 2.5; }
.hf-sentence { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--x-large); line-height: 1.35; margin: 0; }
.hf-sentence .is-gone { opacity: .12; transition: opacity .3s; }
.hf-sim input[type=range] { width: 100%; accent-color: var(--wp--preset--color--primary); min-height: 32px; }

/* Buchung (Zwei-Klick) */
.hf-booking-gate { border: 1px dashed var(--wp--preset--color--muted); border-radius: 12px; padding: 22px; display: grid; gap: 12px; background: var(--wp--preset--color--soft); }
.hf-booking-frame iframe { width: 100%; min-height: 720px; border: 0; border-radius: 12px; background: #fff; }

/* Öffnungszeiten */
.hf-hours { border-collapse: collapse; width: 100%; max-width: 420px; font-variant-numeric: tabular-nums; }
.hf-hours th, .hf-hours td { text-align: left; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.hf-hours tr.is-today { font-weight: 700; }
.hf-open { display: inline-block; border-radius: 999px; padding: 2px 12px; font-weight: 700; font-size: var(--wp--preset--font-size--small); background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); }
.hf-open.is-closed { background: var(--wp--preset--color--line); color: var(--wp--preset--color--contrast); }
.hf-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.hf-dl dt { font-weight: 700; }
.hf-dl dd { margin: 0; color: var(--wp--preset--color--muted); }

/* Bewertungen */
.hf-rating { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.hf-rating b { font-size: var(--wp--preset--font-size--large); }
.hf-reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.hf-review { border: 1px solid var(--wp--preset--color--line); border-radius: 12px; padding: 18px; display: grid; gap: 8px; align-content: start; margin: 0; }
.hf-review blockquote { margin: 0; }
.hf-review figcaption { font-weight: 700; font-size: var(--wp--preset--font-size--small); }

/* Filialfinder */
.hf-branches { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; }
.hf-branch { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; align-items: center; border: 1px solid var(--wp--preset--color--line); border-radius: 10px; padding: 14px 16px; margin: 0; }
.hf-branch h3 { margin: 0; font-size: var(--wp--preset--font-size--medium); }
.hf-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.hf-filter label { display: inline-flex !important; gap: 6px; align-items: center; font-weight: 400 !important; border: 1px solid var(--wp--preset--color--line); border-radius: 999px; padding: 6px 12px; }

/* Abschnitte mit Ablaufdatum: im Editor markieren */
.editor-styles-wrapper [class*="hf-bis-"] { outline: 2px dashed var(--wp--preset--color--accent); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Bereiche ---------- */
.hf-utility { padding: 6px clamp(16px, 4vw, 40px); gap: 8px 24px; }
.hf-mainbar { padding: 14px clamp(16px, 4vw, 40px); gap: 12px 28px; align-items: center; }
.hf-mainbar .wp-block-site-tagline { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.hf-brand { gap: 0 !important; }
.hf-section { padding-top: clamp(40px, 7vw, 88px); padding-bottom: clamp(40px, 7vw, 88px); }
.hf-section + .hf-section:not(.has-background) { padding-top: 0; }
.hf-footer { padding-top: 56px; padding-bottom: 40px; font-size: var(--wp--preset--font-size--small); }
.hf-footer, .hf-footer :is(h2, h3, p, a, th, td, li) { color: var(--wp--preset--color--base); }
.hf-footer .hf-hours th, .hf-footer .hf-hours td { border-color: color-mix(in srgb, var(--wp--preset--color--base) 25%, transparent); }
.hf-photo img { border-radius: 14px; width: 100%; height: auto; }
.hf-team .wp-block-image img { border-radius: 12px; aspect-ratio: 6 / 7; object-fit: cover; }
.hf-trustline { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.wp-block-columns.hf-cards { gap: 16px; }
main.wp-block-group { margin-top: 0; }
main > .alignfull:first-child.hf-section { margin-top: 0; }
ul.hf-plain, ul.hf-dl-list { list-style: none; padding: 0; display: grid; gap: 8px; }
ul.hf-dl-list li { padding: 10px 14px; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--line); border-radius: 8px; margin: 0; }

/* Auf dem Handy nimmt ein fester Kopfbereich zu viel Platz weg. */
@media (max-width: 781px) {
	.hf-header { position: relative; }
	.hf-utility .hf-open { font-size: .85em; padding: 1px 10px; }
}