/* =============================================================================
   components.css — wiederverwendbare Bausteine (Buttons, Cards, Forms, Links)
   ============================================================================= */

/* --- Textlinks --------------------------------------------------------------
   Unterstreichung IMMER behalten (nicht nur Farbe), Hover dunkler statt auf
   accent (#c5583a ist mit 4.1:1 zu schwach für Text). */
.main a:hover,
.main a:focus-visible { color: var(--color-accent-text-dark); text-decoration: underline; }

/* --- Buttons ---------------------------------------------------------------- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: 48px;                 /* Touch-Target Hausstandard */
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-button);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background-color 0.3s ease-out, border-color 0.3s ease-out, color 0.3s ease-out;
}

.button--primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.button--primary:hover,
.button--primary:focus-visible { background-color: var(--color-primary-dark); }

.button--secondary {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.button--secondary:hover,
.button--secondary:focus-visible {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Auf grünen CTA-Flächen invertieren — sonst grün-auf-grün unsichtbar
   (Fund der Spec-04/06-Agents; #2a6b5a auf Weiss = 5.9:1, WCAG AA). */
.section--cta .button--primary {
    background-color: var(--color-white);
    color: var(--color-primary);
}
.section--cta .button--primary:hover,
.section--cta .button--primary:focus-visible {
    background-color: var(--color-bg);
    color: var(--color-primary-dark);
}
.section--cta .button--primary:focus-visible { outline-color: var(--color-white); }

/* --- Cards ------------------------------------------------------------------
   Bild-Zoom bei Hover (scale 1.06) — dezent. Braucht overflow:hidden am
   Bild-Container. */
.card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.card__media {
    overflow: hidden;               /* für den Zoom */
    aspect-ratio: 3 / 2;
}
.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-out;
}
.card:hover .card__media img,
.card:focus-within .card__media img { transform: scale(1.06); }

.card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.card__title { font-family: var(--font-serif); font-size: 1.3rem; }

/* --- Formulare -------------------------------------------------------------- */
.form__group { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }

.form__label { font-weight: 500; }

.form__input,
.form__textarea {
    min-height: 48px;
    padding: var(--space-1) var(--space-2);
    font-family: var(--font-sans);
    /* 18px statt 16px (Mobil-Audit 07.08.2026, KLEIN): der eingetippte Text
       ist damit so gross wie der Fliesstext ringsum — Zielgruppe 50+.
       Nebeneffekt: iOS zoomt bei >= 16px ohnehin nicht mehr in das Feld. */
    font-size: var(--body-size);
    color: var(--color-text);
    background: var(--color-white);
    border: 1px solid var(--color-border-input);   /* 3:1 Non-text Contrast */
    border-radius: var(--radius-input);
}
.form__textarea { min-height: 8rem; resize: vertical; }

.form__input:focus-visible,
.form__textarea:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
    border-color: var(--color-primary);
}

/* Fehler in Klartext neben dem Feld (nicht nur farbig) */
.form__error {
    color: var(--color-accent-text);
    font-size: 0.95rem;
    font-weight: 500;
}
.form__error::before { content: '⚠ '; }

/* =============================================================================
   Landing Page (Spec 01)
   ============================================================================= */

/* --- Section-Köpfe ---------------------------------------------------------- */
.section__title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); margin-bottom: var(--space-3); }
.section__lead { font-size: 1.15rem; color: var(--color-muted); margin-bottom: var(--space-3); }

/* --- Hero -------------------------------------------------------------------- */
.hero__badge {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-accent-text);
    background: rgba(197, 88, 58, 0.10);
    padding: var(--space-1) var(--space-2);
    border-radius: 999px;
    margin-bottom: var(--space-3);
}
.hero__title { font-size: clamp(2.25rem, 1.6rem + 3vw, 3.5rem); margin-bottom: var(--space-3); }
.hero__lead { font-size: 1.25rem; max-width: 620px; margin-bottom: var(--space-4); }

/* --- Statistik-Tiles -------------------------------------------------------- */
.stat-tile { display: flex; flex-direction: column; }
.stat-tile__value { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; color: var(--color-primary); }
.stat-tile__label { font-size: 0.95rem; color: var(--color-muted); }

/* --- Service-Karten --------------------------------------------------------- */
.service-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.service-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(42, 107, 90, 0.10);   /* Praxis-Grün, dezent hinterlegt */
    color: var(--color-primary);
}
.service-card__icon svg { width: 26px; height: 26px; }
.service-card__title { font-family: var(--font-serif); font-size: 1.3rem; }
.service-card p { color: var(--color-text); }

/* --- Zitat ------------------------------------------------------------------ */
.quote { border-left: 4px solid var(--color-accent); padding-left: var(--space-3); margin-bottom: var(--space-4); }
.quote__text { font-family: var(--font-serif); font-style: italic; font-size: 1.4rem; line-height: 1.4; margin-bottom: var(--space-2); }
.quote__cite { color: var(--color-muted); font-style: normal; }

/* Standort-Karten (Netzwerk-Übersicht, Spec 07) */
.standort-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--space-3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.standort-card:hover,
.standort-card:focus-within { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); }
.standort-card__icon { color: var(--color-primary); line-height: 0; }
/* Pin als Google-Maps-Link: 48px-Klickfläche ohne Layout-Verschiebung,
   Hover/Fokus signalisiert Klickbarkeit. */
a.standort-card__icon--link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: -12px;
    align-self: flex-start;
    border-radius: 50%;
    transition: color 0.2s ease-out, background-color 0.2s ease-out;
}
a.standort-card__icon--link:hover,
a.standort-card__icon--link:focus-visible {
    color: var(--color-primary-dark);
    background: rgba(42, 107, 90, 0.10);
}
.standort-card__name { font-family: var(--font-serif); font-size: 1.2rem; }
.standort-card__place { color: var(--color-muted); font-weight: 600; }
/* Telefonnummer direkt auf der Karte (Wunsch Peter 06.08.2026) — Textlink
   mit Touch-Target-Höhe, ohne die Karte optisch aufzublähen. */
.standort-card__tel {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    margin-block: calc(-1 * var(--space-1));
    align-self: flex-start;
    color: var(--color-text);
    text-decoration: none;
}
.standort-card__tel:hover,
.standort-card__tel:focus-visible { color: var(--color-primary); text-decoration: underline; }
.standort-card__note { font-size: 0.9rem; color: var(--color-muted); }
.standort-card__actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-1); }
.standort-card__actions .button { flex: 1 1 auto; justify-content: center; }
.standort-card--partner {
    border-color: var(--color-primary);
    background: rgba(42, 107, 90, 0.06);
}

/* Gleiche Höhen über die Karten-Reihe hinweg (Wunsch Peter 07.08.2026):
   Subgrid — Icon/Name/Adresse/Telefon/Hinweis/Buttons der nebeneinander-
   liegenden Karten teilen sich dieselben Zeilen-Tracks; ein zweizeiliger
   Name (Biel-Bienne) schiebt die Nachbarn nicht mehr aus der Flucht.
   Explizite grid-row je Element, weil Hinweis/Telefon nicht überall
   vorkommen (Auto-Platzierung würde sonst verrutschen). Browser ohne
   Subgrid: Name reserviert zwei Zeilen (guter Näherungs-Fallback). */
@supports (grid-template-rows: subgrid) {
    .standort-card {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 6;
        row-gap: var(--space-2);
    }
    .standort-card__icon { grid-row: 1; }
    .standort-card__name { grid-row: 2; }
    .standort-card__place { grid-row: 3; }
    .standort-card__tel { grid-row: 4; }
    .standort-card__note { grid-row: 5; }
    .standort-card__actions { grid-row: 6; }
}
@supports not (grid-template-rows: subgrid) {
    @media (min-width: 640px) {
        .standort-card__name { min-height: 2.6em; }
    }
}

/* Kartenname als Link zur Detailseite. Sichtbare Affordanz (Mobil-Audit
   07.08.2026: Titel sahen nicht wie Links aus, Detailseiten waren mobil
   kaum auffindbar — Pins sind dort inert): dezente Dauer-Unterstreichung
   + Pfeil, auf Hover/Fokus voll ausgeprägt. */
.standort-card__name a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}
.standort-card__name a::after { content: ' \203A'; color: var(--color-accent-text); }
.standort-card__name a:hover,
.standort-card__name a:focus-visible { color: var(--color-primary); text-decoration-color: var(--color-primary); }

/* Standort-Detailseite */
.standort-detail__back { margin-bottom: var(--space-3); }
/* Trefferflächen auf der Detailseite (Mobil-Audit 07.08.2026, Befund 5.1):
   Zurück-Link und Telefonlink waren nur 21px hoch. Beide sind primäre
   Handlungswege (zurück zur Übersicht bzw. anrufen) und bekommen darum 40px
   statt der reinen Fliesstext-Zeilenhöhe. inline-flex hält die Fläche so
   breit wie der Text — kein klickbarer Leerraum daneben. */
.standort-detail__back a,
.standort-detail__facts a[href^="tel:"],
.standort-detail__booking a[href^="tel:"] {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
}
.standort-detail__head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.standort-detail__title { font-family: var(--font-serif); font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); }
.standort-detail__badge { display: inline-block; background: var(--color-primary); color: var(--color-white); border-radius: var(--radius-button); padding: 0.15em 0.7em; font-size: 0.85rem; }
.standort-detail__note { color: var(--color-muted); margin-bottom: var(--space-3); }
.standort-detail__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
@media (min-width: 640px) { .standort-detail__grid { grid-template-columns: 2fr 1fr; align-items: start; } }
/* Mobil einspaltig — max-content 1fr liess Telefon/E-Mail auf schmalen
   Geräten mitten im Wort brechen bzw. rechts abschneiden (Mobil-Audit
   07.08.2026); gleiches Muster wie beim Karriere-Block. */
.standort-detail__facts { display: grid; grid-template-columns: 1fr; gap: var(--space-1) var(--space-3); }
.standort-detail__facts dd { margin-bottom: var(--space-1); overflow-wrap: anywhere; }
@media (min-width: 480px) {
    .standort-detail__facts { grid-template-columns: max-content 1fr; }
    .standort-detail__facts dd { margin-bottom: 0; }
}
.standort-detail__facts dt { font-weight: 600; color: var(--color-muted); }
.standort-detail__facts dd { margin: 0; }
.standort-detail__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.standort-detail__features li { position: relative; padding-left: 1.4em; }
.standort-detail__features li::before { content: "✓"; position: absolute; left: 0; color: var(--color-primary); font-weight: 700; }
.standort-detail__booking { border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.standort-detail__booking h2 { font-family: var(--font-serif); margin-bottom: var(--space-2); }
.cdm-embed { margin-top: var(--space-3); }
.cdm-embed iframe { width: 100%; border: 0; border-radius: var(--radius-card); background: var(--color-white); }
/* Mobil braucht das CDM-Portal mehr Höhe (gemessen ~2720px Inhalt bei
   390px Breite) — sonst «Scrollen im Fenster im Fenster». Gleiches
   Vorgehen wie im Altsystem (dort 2700px mobil). */
@media (max-width: 767px) {
    .cdm-embed iframe { height: 2800px; }
}

/* Bestätigungsstufe vor der Buchung (Spec 19 §5) */
.cdm-confirm { margin-top: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); }
.cdm-confirm__text { font-weight: 600; margin-bottom: var(--space-1); }
.cdm-confirm__storno { font-size: 0.9rem; color: var(--color-muted); margin-bottom: var(--space-2); }
.cdm-confirm__actions { margin: 0; }

/* Sprachumschalter (Header) */
.langnav { display: flex; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
/* min 40×40px Touch-Ziel (Mobil-Audit: vorher ~38×30). */
.langnav__link { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0.25em 0.55em; font-size: 0.9rem; font-weight: 700; color: var(--color-muted); text-decoration: none; border-radius: var(--radius-button); }
.langnav__link:hover, .langnav__link:focus-visible { color: var(--color-primary); }
.langnav__link--active { color: var(--color-primary); background: rgba(42, 107, 90, 0.1); }

/* Anfahrt-Button (Detailseite) */
.standort-detail__directions { margin-bottom: var(--space-4); }

/* Team (Detailseite) */
.standort-detail__team { margin-bottom: var(--space-4); }
.standort-detail__team h2 { font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: var(--space-3); }
.team-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.team-card__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: var(--space-1); }
.team-card__photo--placeholder { display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-white); font-family: var(--font-serif); font-size: 2.4rem; font-weight: 700; text-transform: uppercase; }
.team-card__name { font-weight: 600; }
.team-card__role { font-size: 0.9rem; color: var(--color-muted); }

/* --- Ausbildung: Häkchen-Liste (CB ausbildungsliste) --------------------- */
.ausb-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); max-width: 708px; }
.ausb-checklist li { position: relative; padding-left: 1.7em; font-size: 1.1rem; }
.ausb-checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--color-primary); font-weight: 700; }

/* --- Ausbildung: Übersichts-Tabelle, mobil als Cards (CB ausbildungstabelle) */
.ausb-facts { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); }
.ausb-facts__row { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-2) var(--space-3); }
.ausb-facts__row dt { font-weight: 600; color: var(--color-muted); font-size: 0.95rem; margin-bottom: 2px; }
.ausb-facts__row dd { margin: 0; }
@media (min-width: 640px) {
    .ausb-facts__row { display: grid; grid-template-columns: 240px 1fr; column-gap: var(--space-3); align-items: baseline; }
    .ausb-facts__row dt { font-size: 1rem; margin-bottom: 0; }
}
.ausb-facts__hinweis { border-left: 4px solid var(--color-accent); background: rgba(197, 88, 58, 0.07); border-radius: 0 var(--radius-card) var(--radius-card) 0; padding: var(--space-2) var(--space-3); }

/* --- Ausbildung: FAQ als natives details/summary (CB ausbildungsfaq) ----- */
.ausb-faq { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-card); margin-bottom: var(--space-2); }
.ausb-faq__q { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); min-height: 48px; padding: var(--space-2) var(--space-3); cursor: pointer; font-weight: 600; font-size: 1.05rem; list-style: none; border-radius: var(--radius-card); }
.ausb-faq__q::-webkit-details-marker { display: none; }
.ausb-faq__q::after { content: "+"; flex-shrink: 0; font-family: var(--font-serif); font-size: 1.8rem; line-height: 1; color: var(--color-primary); }
.ausb-faq[open] .ausb-faq__q::after { content: "−"; }
.ausb-faq__q:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ausb-faq__a { padding: 0 var(--space-3) var(--space-3); }
@media (prefers-reduced-motion: no-preference) {
    .ausb-faq__q::after { transition: transform 0.3s ease-out; }
}

/* =============================================================================
   Kontaktformular: Info-Zeile unter dem Praxis-Select (07.08.2026)
   =============================================================================
   Die Options-Labels tragen nur noch den Firmennamen (sonst schnitt das Handy
   bei 390px ALLE 12 Optionen ab, siehe docs/audit-mobil-flows.md Befund 4.1).
   PLZ/Ort und Telefon rendert form-empfaenger.js nach der Auswahl hierhin —
   umbruchfähig statt abgeschnitten, und die Nummer ist mobil direkt wählbar.
   Der Container steht dauerhaft im DOM (aria-live) und ist leer unsichtbar. */
/* Kein Flex-Container: die Zeile fliesst als normaler Text, damit das
   geschützte Leerzeichen im Trenner den Umbruch steuern kann (der Punkt
   wandert dann mit dem folgenden Teil in die nächste Zeile). */
.form__praxis-info { font-size: 0.95rem; line-height: 1.5; color: var(--color-muted); }
.form__praxis-info:empty { display: none; }
.form__praxis-info__name { font-weight: 500; color: var(--color-text); }
.form__praxis-info__sep { color: var(--color-border); }
/* Trennpunkt + zugehöriger Teil brechen nur GEMEINSAM um. */
.form__praxis-info__group { white-space: nowrap; }
/* Trefferfläche 44px (WCAG 2.2 SC 2.5.5) — auf dem Handy der eigentliche
   Gewinn: die Nummer, die vorher im Label wegfiel, ist jetzt antippbar. */
.form__praxis-info__tel { display: inline-flex; align-items: center; min-height: 44px; }