/*
 * Gemeinsame UI-Komponenten der Arztpunkt-Seiten (Breadcrumb, Kicker, Titel,
 * Listen, Schritte, FAQ-Akkordeon, Buchungskarte, Knöpfe).
 *
 * EINE Quelle für alle handgebauten Seiten: behandlung, behandlungen,
 * telemedizin, hausarzt-online. Wer hier etwas ändert, ändert es überall —
 * genau das ist der Zweck. Die Regeln stammen unverändert aus behandlung.html
 * (Stand 2026-09-20), damit die bestehenden Seiten exakt gleich aussehen.
 *
 * Farben/Schrift kommen aus den Tokens, die jede Seite selbst setzt
 * (--ink, --soft, --border, --white, --off, --accent) — hier nur Komponenten.
 */
.bh-wrap{ max-width:1180px; margin:0 auto; padding:var(--page-top, 40px) 5% 24px; }
    .bh-crumb{ font-size:13px; color:var(--soft); margin:8px 0 22px; }
    .bh-crumb a:hover{ color:var(--accent); }
    .bh-kicker{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
    .bh-h1{ font-size:clamp(30px,4.6vw,46px); font-weight:500; letter-spacing:normal; line-height:1.06; margin:0 0 16px; max-width:760px; }
    .bh-intro{ font-size:18px; line-height:1.6; color:var(--soft); margin:0; max-width:720px; }
    .bh-grid{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:56px; margin-top:44px; align-items:start; }
    @media(max-width:920px){ .bh-grid{ grid-template-columns:1fr; gap:36px; } }
    .bh-h2{ font-size:clamp(21px,2.6vw,27px); font-weight:500; letter-spacing:normal; margin:0 0 18px; }
    .bh-sec{ margin-bottom:46px; }
    .bh-sec:last-child{ margin-bottom:0; }
    /* Liste */
    .bh-list{ list-style:none; margin:0; padding:0; }
    .bh-list li{ position:relative; padding:0 0 14px 26px; font-size:16px; line-height:1.5; }
    .bh-list li::before{ content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--accent); }
    /* Schritte */
    .bh-steps{ display:grid; gap:22px; }
    .bh-step{ display:flex; gap:16px; align-items:flex-start; }
    .bh-num{ flex:0 0 32px; width:32px; height:32px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; }
    .bh-step h3{ font-size:17px; font-weight:600; margin:3px 0 5px; }
    .bh-step p{ margin:0; font-size:15px; line-height:1.55; color:var(--soft); }
    .bh-bill{ font-size:13.5px; color:var(--soft); background:var(--off); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-top:26px; }
    .bh-bill strong{ color:var(--ink); }
    /* FAQ */
    .bh-faq-item{ border:1px solid var(--border); border-radius:14px; margin-bottom:12px; overflow:hidden; background:var(--white); }
    .bh-faq-q{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; cursor:pointer; font-size:16px; font-weight:600; list-style:none; }
    .bh-faq-q::-webkit-details-marker{ display:none; }
    .bh-faq-q .chev{ flex:0 0 auto; transition:transform .2s; color:var(--soft); }
    .bh-faq-item[open] .bh-faq-q .chev{ transform:rotate(180deg); }
    .bh-faq-a{ padding:0 20px 18px; font-size:15px; line-height:1.6; color:var(--soft); }
    /* Buchungskarte: rechte Spalte bleibt beim Scrollen im Bild (sticky),
       die linke Spalte (Text + häufige Fragen) scrollt normal. Wichtig: sticky
       gehört auf das GRID-ITEM (aside) – dessen Containing-Block ist das hohe
       Grid; läge sticky auf der Karte selbst, hätte sie in ihrem gleich hohen
       aside keinen Spielraum und würde mitscrollen. */
    .bh-grid > aside{ position:sticky; top:96px; align-self:start; }
    @media(max-width:920px){ .bh-grid > aside{ position:static; } }
    .bh-card{ border:1px solid var(--border); border-radius:20px; padding:18px; box-shadow:0 10px 34px rgba(27,29,30,.06); background:var(--white); }
    .bh-card img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:14px; display:block; background:var(--off); margin-bottom:16px; }
    .bh-card .ct{ font-size:21px; font-weight:600; letter-spacing:-.01em; margin:0 4px 6px; }
    .bh-card .cd{ font-size:14.5px; color:var(--soft); line-height:1.5; margin:0 4px 16px; }
    .bh-book{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--ink); color:#fff; font-weight:600; font-size:16px; padding:14px 16px 14px 22px; border-radius:999px; }
    .bh-book:hover{ opacity:.92; }
    .bh-book .ar{ width:34px; height:34px; border-radius:50%; background:#fff; color:var(--ink); display:flex; align-items:center; justify-content:center; }
    .bh-book .ar svg{ width:15px; height:15px; }
    .bh-note{ font-size:12.5px; color:var(--soft); text-align:center; margin:14px 6px 4px; line-height:1.5; }
    .bh-empty{ color:var(--soft); padding:60px 0; }

/* --- Ergänzungen 2026-09-20: Bausteine, die es vorher nur seitenlokal gab --- */

/* Kanonische klickbare Fläche: gleicher Look wie die Behandlungskarten, ohne Bild */
.ap-tiles{ display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:14px; align-items:stretch; }
@media(max-width:620px){ .ap-tiles{ grid-template-columns:1fr; } }
.ap-tile{ display:flex; flex-direction:column; height:100%; border:1px solid var(--border); border-radius:18px; padding:16px 18px; background:var(--white); transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.ap-tile:hover{ transform:translateY(-3px); border-color:var(--ink); box-shadow:0 12px 30px rgba(27,29,30,.08); }
.ap-tile .tt{ font-weight:600; font-size:16px; }
.ap-tile .td{ font-size:14px; color:var(--soft); line-height:1.5; margin-top:3px; }

/* Fliesstext in den Inhaltsspalten – gleiche Grössen wie .bh-step p / .bh-list */
.bh-sec p{ font-size:16px; line-height:1.62; margin:0 0 13px; }
.bh-sec p:last-child{ margin-bottom:0; }
.bh-sec h3{ font-size:17px; font-weight:600; margin:22px 0 7px; }
.ap-link{ text-decoration:underline; text-underline-offset:3px; }
.ap-link:hover{ color:var(--accent); }

/* Hinweis mit Akzent (z.B. Notfall) – baut auf .bh-bill auf */
.bh-bill.warn{ background:#fff6f4; border-color:#f1432733; }
.bh-bill p{ margin:0 0 9px; font-size:14px; line-height:1.6; }
.bh-bill p:last-child{ margin-bottom:0; }

/* Vergleichstabelle */
.bh-scroll{ overflow-x:auto; }
.bh-table{ width:100%; border-collapse:collapse; font-size:15px; }
.bh-table th,.bh-table td{ text-align:left; padding:11px 12px; border-bottom:1px solid var(--border); vertical-align:top; line-height:1.5; }
.bh-table th{ font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--soft); }

/* --- Lesebreite und Abschluss-Kasten (User-Vorgabe 2026-09-20) ---
   Wissensseiten laufen einspaltig über die volle Lesebreite (wie die
   Ratgeber-Artikel, .rg-wrap); der Konsultations-Kasten steht am Schluss.
   Die Regeln entsprechen .rg-cta-box in templates/ratgeber.html. */
.ap-lesen{ max-width:920px; }
.ap-cta{ margin-top:48px; padding:28px; border-radius:18px; background:var(--off); border:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.ap-cta .t{ font-size:19px; font-weight:700; letter-spacing:-.01em; margin:0 0 4px; }
.ap-cta .s{ font-size:15px; color:var(--soft); margin:0; max-width:520px; line-height:1.55; }
.ap-cta-btn{ display:inline-flex; align-items:center; gap:10px; background:var(--ink); color:#fff; font-weight:600; font-size:15.5px; padding:14px 24px; border-radius:999px; white-space:nowrap; }
.ap-cta-btn:hover{ background:var(--accent); }
.ap-cta-btn svg{ width:14px; height:14px; }
.ap-cta-note{ font-size:12.5px; color:var(--soft); margin:12px 0 0; }

/* --- Angebot-Kopf: gleiche Darstellung wie die Terminbuchung (User-Vorgabe 2026-09-20) ---
   Werte 1:1 aus terminbuchen.html (.hero), damit «Angebot» und «Termin buchen»
   identisch wirken: kleine Grossbuchstaben-Zeile, grosse zentrierte Überschrift,
   zentrierter Untertitel. */
.ap-hero{ margin:0 auto 40px; text-align:center; padding:0 16px; }
.ap-hero .label{ display:block; text-transform:uppercase; letter-spacing:1.68px; font-weight:600; font-size:12px; line-height:12px; color:#333; margin:0 auto 30px; }
.ap-hero h1{ font-family:"Inter Tight",sans-serif; font-weight:600; font-size:clamp(40px,7.5vw,68px); line-height:1.08; letter-spacing:normal; color:#000; margin:0 auto 24px; max-width:720px; }
.ap-hero h1 .punkt{ color:var(--accent); }
.ap-hero p{ font-size:17px; line-height:1.6; color:var(--soft); margin:0 auto; max-width:620px; }
/* Erklärkasten über den Kacheln: gleiche Breite wie die Kachelliste darunter */
.ap-mehr{ width:100%; max-width:none; margin:0 0 34px; text-align:left; }