/* ============================================================================
   KIEFERORTHOPÄDIE AM HOCHBORD — theme.css
   Dr. med. dent. Amir Kanawati · Ringstrasse 18a · 8600 Dübendorf
   ----------------------------------------------------------------------------
   Base: Bootstrap 5.3.8, shipped locally. This file adds and overrides only
   what is needed. Where possible it sets Bootstrap's own CSS variables
   (--bs-*) so Bootstrap components inherit the brand automatically.

   Section names stay German: they name German page sections and mirror the
   banners in index.html one to one.

   STRUCTURE — same order as the HTML
     00 · TOKENS
     01 · BASE
     02 · TYPOGRAPHY
     03 · BOOTSTRAP BRIDGE
     04 · BUILDING BLOCKS
     S01 · HEADER / NAVIGATION
     S02 · HERO
     S03 · VERTRAUENSLEISTE
     S04 · PRAXIS / DR. KANAWATI
     S05 · BEHANDLUNGSSPEKTRUM
     S06 · FÜR JEDES ALTER
     S07 · ABLAUF
     S08 · KOSTEN & VERSICHERUNG
     S09 · PRAXISIMPRESSIONEN
     S10 · HÄUFIGE FRAGEN
     S11 · KONTAKT & ANFAHRT
     S12 · FOOTER
     S13 · MODALS (Impressum / Datenschutz)
     99 · PRINT
============================================================================ */


/* ============================================================================
   00 · TOKENS
   Every brand and layout value in one place. For the later Sass migration it
   is enough to replace this block with Sass variables.
============================================================================ */
:root {

  /* --- Brand colours, unchanged from the CI ------------------------------ */
  --kah-blue:        #00A0E1;   /* highlight, use sparingly                */
  --kah-anthracite:  #646464;   /* text colour                             */
  --kah-white:       #FFFFFF;   /* ground                                  */

  /* --- PROPOSAL, not active ----------------------------------------------
     #00A0E1 reaches only ~2.95:1 on white. As a text colour, or as a button
     fill with white text, that misses WCAG AA (4.5:1). Brand Blue is
     therefore used graphically only — bars, rules, icons. If a blue button
     is wanted, --kah-blue-aa is a darker tone derived from Brand Blue at
     5.45:1 on white.
     → To switch: --kah-cta-bg: var(--kah-blue-aa);                        */
  --kah-blue-aa:      #00719E;
  --kah-blue-aa-dark: #005D82;

  /* --- Derived neutrals: transparencies of Brand Anthracite only --------- */
  --kah-line:        rgba(100, 100, 100, .18);  /* hairlines               */
  --kah-line-strong: rgba(100, 100, 100, .34);  /* borders                 */
  --kah-surface:     rgba(100, 100, 100, .045); /* faint surfaces          */
  --kah-surface-2:   rgba(100, 100, 100, .085); /* placeholder surfaces    */

  /* --- Call-to-Action ----------------------------------------------------- */
  --kah-cta-bg:        var(--kah-anthracite);
  --kah-cta-bg-hover:  #4F4F4F;
  --kah-cta-fg:        var(--kah-white);

  /* --- Typography --------------------------------------------------------- */
  --kah-font: "acumin-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --kah-fw-light:   300;
  --kah-fw-regular: 400;
  --kah-fw-medium:  500;

  --kah-fs-body:    1.0625rem;                                  /* 17px      */
  --kah-fs-small:   .9375rem;                                   /* 15px      */
  --kah-fs-eyebrow: .8125rem;                                   /* 13px      */
  --kah-fs-lead:    clamp(1.0625rem, 1rem + .45vw, 1.25rem);
  --kah-fs-h1:      clamp(2rem,     1.30rem + 2.6vw, 3.25rem);
  --kah-fs-h2:      clamp(1.6rem,   1.20rem + 1.4vw, 2.35rem);
  --kah-fs-h3:      1.1875rem;
  --kah-lh-body:    1.65;
  --kah-lh-tight:   1.14;

  /* --- Grid and spacing ---------------------------------------------------- */
  --kah-section-y:  clamp(3.5rem, 2rem + 5vw, 7rem);
  --kah-gap:        clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  --kah-measure:    64ch;
  --kah-radius:     .125rem;
  --kah-header-h:   78px;
}


/* ============================================================================
   01 · BASE
============================================================================ */
html { scroll-behavior: smooth; }

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

body {
  font-family: var(--kah-font);
  font-size: var(--kah-fs-body);
  font-weight: var(--kah-fw-regular);
  line-height: var(--kah-lh-body);
  color: var(--kah-anthracite);
  background: var(--kah-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* keep anchor targets clear of the sticky header */
section[id] { scroll-margin-top: calc(var(--kah-header-h) + 1rem); }

/* visible focus for keyboard use */
:focus-visible {
  outline: 2px solid var(--kah-anthracite);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(0, 160, 225, .32);
  border-radius: var(--kah-radius);
}

/* skip link */
.kah-skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 2000;
  padding: .75rem 1.25rem;
  background: var(--kah-anthracite); color: var(--kah-white);
  text-decoration: none; border-radius: var(--kah-radius);
  transition: top .15s ease-in-out;
}
.kah-skip:focus { top: 1rem; color: var(--kah-white); }

img, svg { max-width: 100%; height: auto; }


/* ============================================================================
   02 · TYPOGRAFIE
============================================================================ */
h1, .kah-h1, h2, .kah-h2 {
  font-weight: var(--kah-fw-light);
  line-height: var(--kah-lh-tight);
  letter-spacing: -.015em;
  color: var(--kah-anthracite);
  text-wrap: balance;
}
h1, .kah-h1 { font-size: var(--kah-fs-h1); }
h2, .kah-h2 { font-size: var(--kah-fs-h2); }

h3, .kah-h3, h4 {
  font-size: var(--kah-fs-h3);
  font-weight: var(--kah-fw-medium);
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--kah-anthracite);
}

p { margin-bottom: 1.15rem; }
p:last-child { margin-bottom: 0; }

.kah-lead {
  font-size: var(--kah-fs-lead);
  font-weight: var(--kah-fw-light);
  line-height: 1.5;
}

.kah-measure    { max-width: var(--kah-measure); }
.kah-measure-sm { max-width: 52ch; }

.kah-small { font-size: var(--kah-fs-small); }

a { color: var(--kah-anthracite); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--kah-anthracite); text-decoration-color: var(--kah-blue); text-decoration-thickness: 2px; }


/* ============================================================================
   03 · BOOTSTRAP BRIDGE
   Push the brand into Bootstrap instead of overriding each component.
============================================================================ */
:root,
[data-bs-theme="light"] {
  --bs-font-sans-serif: var(--kah-font);
  --bs-body-font-family: var(--kah-font);
  --bs-body-font-size: var(--kah-fs-body);
  --bs-body-color: var(--kah-anthracite);
  --bs-body-color-rgb: 100, 100, 100;
  --bs-body-bg: var(--kah-white);
  --bs-emphasis-color: var(--kah-anthracite);
  --bs-border-color: var(--kah-line);
  --bs-border-radius: var(--kah-radius);
  --bs-border-radius-sm: var(--kah-radius);
  --bs-border-radius-lg: var(--kah-radius);
  --bs-link-color: var(--kah-anthracite);
  --bs-link-hover-color: var(--kah-anthracite);
  --bs-primary: var(--kah-blue);
  --bs-primary-rgb: 0, 160, 225;
  --bs-focus-ring-color: rgba(0, 160, 225, .32);
  --bs-heading-color: var(--kah-anthracite);
}


/* ============================================================================
   04 · BAUSTEINE
============================================================================ */

/* --- Grid -----------------------------------------------------------------
   Bootstrap rows pull negative margins of half the gutter. With g-5 (3rem)
   that is 24px per side — more than the container's default padding (12px),
   so the page scrolls sideways on mobile. The container therefore gets the
   same gutter as the largest row in use. Side effect: nicer margins on small
   screens.                                                                  */
.container { --bs-gutter-x: 3rem; }

/* --- Section frames -------------------------------------------------------- */
.kah-section        { padding-block: var(--kah-section-y); }
.kah-section--tight { padding-block: calc(var(--kah-section-y) * .62); }
.kah-section--tinted{ background: var(--kah-surface); }
.kah-section--ruled { border-top: 1px solid var(--kah-line); }

/* --- Eyebrow with blue bar: the one recurring use of Brand Blue ------------ */
.kah-eyebrow {
  display: inline-flex; align-items: center; gap: .85rem;
  margin-bottom: 1.1rem;
  font-size: var(--kah-fs-eyebrow);
  font-weight: var(--kah-fw-medium);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--kah-anthracite);
}
.kah-eyebrow::before {
  content: ""; flex: none;
  width: 2.25rem; height: 3px;
  background: var(--kah-blue);
}

/* --- Blue accent rule ------------------------------------------------------ */
.kah-rule { width: 3.5rem; height: 3px; background: var(--kah-blue); border: 0; opacity: 1; margin: 0 0 1.5rem; }

/* --- Buttons --------------------------------------------------------------- */
.btn { --bs-btn-font-weight: var(--kah-fw-medium); --bs-btn-padding-y: .72rem; --bs-btn-padding-x: 1.5rem; letter-spacing: .01em; }

.btn-kah {
  --bs-btn-color: var(--kah-cta-fg);
  --bs-btn-bg: var(--kah-cta-bg);
  --bs-btn-border-color: var(--kah-cta-bg);
  --bs-btn-hover-color: var(--kah-cta-fg);
  --bs-btn-hover-bg: var(--kah-cta-bg-hover);
  --bs-btn-hover-border-color: var(--kah-cta-bg-hover);
  --bs-btn-active-color: var(--kah-cta-fg);
  --bs-btn-active-bg: var(--kah-cta-bg-hover);
  --bs-btn-active-border-color: var(--kah-cta-bg-hover);
}
.btn-kah-outline {
  --bs-btn-color: var(--kah-anthracite);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--kah-line-strong);
  --bs-btn-hover-color: var(--kah-anthracite);
  --bs-btn-hover-bg: var(--kah-surface);
  --bs-btn-hover-border-color: var(--kah-anthracite);
  --bs-btn-active-color: var(--kah-anthracite);
  --bs-btn-active-bg: var(--kah-surface-2);
  --bs-btn-active-border-color: var(--kah-anthracite);
}

/* --- Cards ----------------------------------------------------------------- */
.kah-card {
  height: 100%;
  padding: clamp(1.5rem, 1rem + 1.2vw, 2.25rem);
  background: var(--kah-white);
  border: 1px solid var(--kah-line);
  border-top: 3px solid var(--kah-blue);
  border-radius: var(--kah-radius);
}
.kah-card h3 { margin-bottom: .85rem; }

/* --- Definition list for treatments ---------------------------------------- */
.kah-deflist { margin: 0; }
.kah-deflist dt { font-weight: var(--kah-fw-medium); margin-top: 1.4rem; }
.kah-deflist dt:first-child { margin-top: 0; }
.kah-deflist dd { margin: .3rem 0 0; }

/* --- Image placeholders, until the practice photos arrive ------------------ */
.kah-ph {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--kah-surface-2);
  border-radius: var(--kah-radius);
  color: var(--kah-anthracite);
  font-size: var(--kah-fs-eyebrow);
  letter-spacing: .12em; text-transform: uppercase;
  text-align: center; padding: 1rem;
}
.kah-ph--wide     { aspect-ratio: 16 / 9; }
.kah-ph--portrait { aspect-ratio: 3 / 4; }
.kah-ph--square   { aspect-ratio: 1 / 1; }
.kah-ph--room     { aspect-ratio: 4 / 3; }   /* room shots need width         */

/* --- Images ----------------------------------------------------------------
   Shipped files keep the aspect ratio of the original. The crop happens here.
   If a subject sits badly, override object-position for that one image — no
   re-export needed.                                                        */
.kah-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: var(--kah-radius);
}
.kah-hero-figure .kah-img { aspect-ratio: 5 / 4; }
@media (min-width: 992px) {
  .kah-hero-figure .kah-img { aspect-ratio: auto; height: clamp(24rem, 52vh, 30rem); }
}
.kah-impressionen .kah-img  { aspect-ratio: 4 / 3; }
.kah-praxis-figure .kah-img { aspect-ratio: 3 / 4; }

/* --- Editorial blocks ------------------------------------------------------
   Three photo blocks break the long text runs. Two crops on the page, one
   per orientation, and nothing else:

     .kah-editorial--h   horizontal, 3 / 2
     .kah-editorial--v   vertical,   4 / 5

   Full-bleed bands were tried first and dropped: at 21:9 across 1440px a
   portrait subject becomes a wall-sized face, which is the opposite of the
   restraint the rest of the page keeps. In a column the same photo sits at
   about 640px and reads as an aside.

   The claim sits beside the photo, never on it. The palette gives text one
   colour -- Anthracite on white at 5.92:1 -- and no photograph can
   guarantee that behind it.                                              */
.kah-editorial { padding-block: calc(var(--kah-section-y) * .7); }
.kah-editorial--h .kah-img { aspect-ratio: 3 / 2; }
.kah-editorial--v .kah-img { aspect-ratio: 4 / 5; }
.kah-editorial picture { display: block; }
.kah-editorial-claim {
  font-weight: var(--kah-fw-light);
  font-size: clamp(1.25rem, .95rem + 1.2vw, 1.75rem);
  line-height: var(--kah-lh-tight);
  max-width: 26ch;
  margin-bottom: 0;
}


/* ============================================================================
   S01 · HEADER / NAVIGATION
============================================================================ */
.kah-header {
  background: var(--kah-white);
  border-bottom: 1px solid var(--kah-line);
}
.kah-header .navbar { --bs-navbar-padding-y: .9rem; }

.kah-logo { display: block; height: 46px; width: auto; }
@media (max-width: 575.98px) { .kah-logo { height: 38px; } }

.kah-nav .nav-link {
  --bs-nav-link-color: var(--kah-anthracite);
  --bs-nav-link-hover-color: var(--kah-anthracite);
  font-size: var(--kah-fs-small);
  font-weight: var(--kah-fw-regular);
  padding-inline: .9rem;
  position: relative;
}
.kah-nav .nav-link::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .2rem;
  height: 2px; background: var(--kah-blue);
  transform: scaleX(0); transform-origin: left; transition: transform .18s ease-in-out;
}
.kah-nav .nav-link:hover::after,
.kah-nav .nav-link.active::after { transform: scaleX(1); }
.kah-nav .nav-link.active { font-weight: var(--kah-fw-medium); }

.kah-header-phone {
  font-weight: var(--kah-fw-medium);
  text-decoration: none;
  white-space: nowrap;
}
.kah-header-phone:hover { text-decoration: underline; text-decoration-color: var(--kah-blue); }

.navbar-toggler { border-color: var(--kah-line-strong); border-radius: var(--kah-radius); }
.navbar-toggler:focus { box-shadow: none; }

/* phone icon, visible below lg only */
.kah-phone-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  color: var(--kah-anthracite);
  border: 1px solid var(--kah-line-strong); border-radius: var(--kah-radius);
}
.kah-phone-icon:hover { background: var(--kah-surface); color: var(--kah-anthracite); }


/* ============================================================================
   S02 · HERO
============================================================================ */
.kah-hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0; }
.kah-hero h1 { margin-bottom: 1.25rem; }
/* The eyebrow sits inside the h1 so the heading carries the title and the
   town ("Fachzahnarzt für Kieferorthopädie · Dübendorf") without changing the
   client's headline. Here it must look exactly as the standalone eyebrow
   did: its own line, body line-height, no balanced wrapping from the h1. */
.kah-hero h1 .kah-eyebrow {
  display: flex; width: fit-content;
  line-height: var(--kah-lh-body);
  text-wrap: wrap;
}
.kah-hero .kah-lead { margin-bottom: 2rem; }
.kah-hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; }
.kah-hero-figure { margin: 0; }
.kah-hero-figure picture { display: block; }
.kah-hero-figure .kah-ph { aspect-ratio: 5 / 4; }

@media (min-width: 992px) {
  /* cap the height so the hero is not stretched */
  .kah-hero-figure .kah-ph { aspect-ratio: auto; height: clamp(24rem, 52vh, 30rem); }
}


/* ============================================================================
   S03 · VERTRAUENSLEISTE
============================================================================ */
.kah-trust { border-top: 1px solid var(--kah-line); border-bottom: 1px solid var(--kah-line); }
.kah-trust ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
@media (min-width: 768px)  { .kah-trust ul { grid-template-columns: repeat(2, 1fr); } }

/* Six items since 20260907, in two rows of three. Six is the point: five
   divides into nothing, and the 2 + 3 it forced gave the top row a rule
   620px long against 400px below -- at which the blue rule stops reading as
   a card marker and starts reading as a section divider. Equal columns are
   what make that device work. The fallback lives on the tag
   trustbar-2plus3-20260907 if it is ever wanted back.                     */
@media (min-width: 992px)  { .kah-trust ul { grid-template-columns: repeat(3, 1fr); gap: 2.25rem; } }

.kah-trust li { padding-top: 1rem; border-top: 3px solid var(--kah-blue); }
.kah-trust strong { display: block; font-weight: var(--kah-fw-medium); margin-bottom: .3rem; }
.kah-trust span   { display: block; font-size: var(--kah-fs-small); }
/* Cards may carry more than one line since 20260906. Without this the second
   sentence reads as a continuation of the first, because both wrap.        */
.kah-trust span + span { margin-top: .5rem; }

/* The languages card is the exception. Its three lines are one greeting in
   three languages, not three separate statements, so the paragraph spacing
   made the card run a third taller than its neighbours for no reason. They
   stack tight and read as a block.                                        */
.kah-trust-langs span + span { margin-top: 0; }


/* ============================================================================
   S03b · LOGOLEISTE
   Two groups, not one row. The SSO brand regulation of 20230413 permits the
   mark only "zwecks Auskuendung der Mitgliedschaft" and forbids any use that
   creates a false impression about the origin of services (Art. 4). A flat
   strip mixing a membership with two appliance manufacturers would read as
   certification, so each group carries its own label and they are separated
   by a hairline.

   Logos keep their own colours: three blues meet here, none of them ours.
   They are held small and on the tinted ground so the strip reads as a
   credential line rather than decoration.
============================================================================ */
.kah-logos { border-bottom: 1px solid var(--kah-line); }
.kah-logos .container {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 2rem 3.5rem;
  padding-block: 2.25rem;
}
/* Centred from md up: the one centred block on a page that is otherwise
   left-aligned to the container edge. A credential strip reads as a band
   rather than as body content, so it carries the exception.

   Below md the groups wrap to their own lines and centring leaves each
   label and logo on a different optical axis, which reads as ragged rather
   than as a band. There it stays on the page's left edge with everything
   else.                                                                  */
@media (min-width: 768px) {
  .kah-logos .container { justify-content: center; }
}
.kah-logos-group { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.kah-logos-group + .kah-logos-group { position: relative; }
@media (min-width: 992px) {
  .kah-logos-group + .kah-logos-group::before {
    content: ""; position: absolute; left: -1.5rem; top: 50%;
    width: 1px; height: 2.25rem; transform: translateY(-50%);
    background: var(--kah-line);
  }
}
.kah-logos-label {
  margin: 0; flex: none;
  font-size: var(--kah-fs-eyebrow);
  font-weight: var(--kah-fw-medium);
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--kah-text-soft, inherit); opacity: .7;
}
.kah-logos ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.kah-logos img { display: block; width: auto; height: 2rem; }
/* Size is a rule, not taste. The SSO members' manual, p8: in digital use the
   logo must be large enough that "der Zusatz gut lesbar ist" -- the Zusatz
   being the four lines of society names beside the mark. At 2rem those lines
   render around 5px and fail that. 3.5rem is the smallest height at which
   they hold up.

   The gaps above are the Schutzzone from p5: half the logo height clear on
   every side, and no typography or graphic inside it. At 3.5rem that is
   28px, so the 2rem gaps clear it.                                        */
.kah-logos .kah-logo--sso { height: 3.5rem; }


/* ============================================================================
   S04 · PRAXIS / DR. KANAWATI
============================================================================ */
.kah-praxis-figure { margin: 0; }
.kah-praxis-figure figcaption { margin-top: .9rem; font-size: var(--kah-fs-small); }
.kah-praxis-facts { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .7rem; }
.kah-praxis-facts li { position: relative; padding-left: 1.6rem; }
.kah-praxis-facts li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .7rem; height: 2px; background: var(--kah-blue);
}


/* ============================================================================
   S05 · BEHANDLUNGSSPEKTRUM
============================================================================ */
.kah-leistungen .accordion {
  --bs-accordion-border-color: var(--kah-line);
  --bs-accordion-btn-color: var(--kah-anthracite);
  --bs-accordion-active-color: var(--kah-anthracite);
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-border-radius: var(--kah-radius);
  --bs-accordion-btn-padding-y: 1.25rem;
  --bs-accordion-body-padding-y: .5rem;
}
.kah-leistungen .accordion-button {
  font-size: 1.0625rem;
  font-weight: var(--kah-fw-medium);
  letter-spacing: .01em;
}
.kah-leistungen .accordion-button:not(.collapsed) { box-shadow: none; }
.kah-leistungen .accordion-item { border-left: 0; border-right: 0; }
.kah-leistungen .accordion-item:first-of-type { border-top: 1px solid var(--kah-line); }

/* blue bar marks the open item */
.kah-leistungen .accordion-button::before {
  content: ""; flex: none;
  width: 0; height: 3px; margin-right: 0;
  background: var(--kah-blue);
  transition: width .18s ease-in-out, margin-right .18s ease-in-out;
}
.kah-leistungen .accordion-button:not(.collapsed)::before { width: 1.75rem; margin-right: .9rem; }

.kah-leistungen .accordion-body { padding-bottom: 2rem; }


/* ============================================================================
   S06 · FÜR JEDES ALTER
============================================================================ */
.kah-altersgruppen .kah-card p:last-of-type { margin-bottom: 0; }


/* ============================================================================
   S07 · ABLAUF
============================================================================ */
.kah-ablauf ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kah-gap); counter-reset: kah-step; }
@media (min-width: 768px) { .kah-ablauf ol { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px){ .kah-ablauf ol { grid-template-columns: repeat(4, 1fr); } }

.kah-ablauf li { counter-increment: kah-step; padding-top: 1.1rem; border-top: 1px solid var(--kah-line); }
.kah-ablauf li::before {
  content: counter(kah-step, decimal-leading-zero);
  display: block; margin-bottom: .75rem;
  font-size: var(--kah-fs-eyebrow); font-weight: var(--kah-fw-medium);
  letter-spacing: .12em; color: var(--kah-anthracite);
}
.kah-ablauf li h3 { margin-bottom: .5rem; }
.kah-ablauf li p  { font-size: var(--kah-fs-small); }


/* ============================================================================
   S08 · KOSTEN & VERSICHERUNG
============================================================================ */
.kah-kosten .kah-card { border-top-color: var(--kah-blue); }
.kah-kosten .kah-note {
  margin-top: var(--kah-gap);
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--kah-blue);
  background: var(--kah-surface);
  font-size: var(--kah-fs-small);
}


/* ============================================================================
   S09 · PRAXISIMPRESSIONEN
============================================================================ */
.kah-impressionen .row > [class*="col"] { margin-bottom: var(--kah-gap); }
.kah-impressionen picture { display: block; }

/* Tile 3 was the entrance board and needed a shifted crop. praxis-gang
   replaced it 20260907; it is natively 4:3, so it needs no override.      */


/* ============================================================================
   S10 · HÄUFIGE FRAGEN
============================================================================ */
.kah-faq .accordion {
  --bs-accordion-border-color: var(--kah-line);
  --bs-accordion-btn-color: var(--kah-anthracite);
  --bs-accordion-active-color: var(--kah-anthracite);
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-padding-y: 1.15rem;
}
.kah-faq .accordion-item { border-left: 0; border-right: 0; }
.kah-faq .accordion-item:first-of-type { border-top: 1px solid var(--kah-line); }
.kah-faq .accordion-button { font-weight: var(--kah-fw-medium); }
.kah-faq .accordion-button:not(.collapsed) { box-shadow: none; }
.kah-faq .accordion-body { padding-bottom: 1.75rem; max-width: var(--kah-measure); }


/* ============================================================================
   S11 · KONTAKT & ANFAHRT
============================================================================ */
.kah-kontakt address { font-style: normal; margin: 0; }

.kah-kontakt-list { list-style: none; margin: 0; padding: 0; }
.kah-kontakt-list li { padding: .85rem 0; border-bottom: 1px solid var(--kah-line); }
.kah-kontakt-list li:first-child { border-top: 1px solid var(--kah-line); }
.kah-kontakt-list a { font-weight: var(--kah-fw-medium); text-decoration: none; }
.kah-kontakt-list a:hover { text-decoration: underline; text-decoration-color: var(--kah-blue); }
.kah-kontakt-label { display: block; font-size: var(--kah-fs-eyebrow); letter-spacing: .12em; text-transform: uppercase; margin-bottom: .15rem; }

/* opening hours */
.kah-hours { width: 100%; border-collapse: collapse; }
.kah-hours th, .kah-hours td { padding: .7rem 0; border-bottom: 1px solid var(--kah-line); text-align: left; vertical-align: top; }
.kah-hours th { font-weight: var(--kah-fw-regular); width: 9.5rem; }
.kah-hours tr:first-child th, .kah-hours tr:first-child td { border-top: 1px solid var(--kah-line); }
.kah-hours td { font-weight: var(--kah-fw-medium); }
.kah-hours .kah-closed { font-weight: var(--kah-fw-regular); }

/* map: embedded directly; Usercentrics will block it before consent */
.kah-map { position: relative; aspect-ratio: 16 / 10; background: var(--kah-surface-2); border-radius: var(--kah-radius); overflow: hidden; }
.kah-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* The 16/10 box is deliberate and confirmed 20260907. The consent panel that
   used to overflow it is gone; an iframe fills the box exactly.           */


/* ============================================================================
   S12 · FOOTER
============================================================================ */
.kah-footer { border-top: 3px solid var(--kah-blue); padding-block: 2.75rem; font-size: var(--kah-fs-small); }

/* The one decorative use of the signet. No fixed-height box here, so it needs
   no container query -- it simply sits beside the copyright line. flex: none
   keeps it from being squeezed when the line wraps on a narrow screen.     */
.kah-footer-brand { display: flex; align-items: center; gap: .9rem; }
.kah-footer-signet { flex: none; height: 2.25rem; width: auto; }
.kah-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; }
.kah-footer .btn-link { padding: 0; text-decoration: none; color: var(--kah-anthracite); font-size: inherit; }
.kah-footer .btn-link:hover { text-decoration: underline; text-decoration-color: var(--kah-blue); }


/* ============================================================================
   S13 · MODALS (Impressum / Datenschutz)
============================================================================ */
.kah-modal .modal-content { border: 0; border-top: 3px solid var(--kah-blue); border-radius: var(--kah-radius); }
.kah-modal .modal-header  { border-bottom: 1px solid var(--kah-line); padding: 1.5rem clamp(1.25rem, 3vw, 2.25rem); }
.kah-modal .modal-body    { padding: 1.75rem clamp(1.25rem, 3vw, 2.25rem) 2.25rem; font-size: var(--kah-fs-small); }
.kah-modal .modal-title   { font-size: 1.35rem; font-weight: var(--kah-fw-light); }
.kah-modal h3 { font-size: 1rem; margin: 1.9rem 0 .5rem; }
.kah-modal h3:first-of-type { margin-top: 0; }
.kah-modal dl { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: .35rem 1.25rem; margin: 0; }
.kah-modal dt { font-weight: var(--kah-fw-medium); }
.kah-modal dd { margin: 0; }
@media (max-width: 575.98px) { .kah-modal dl { grid-template-columns: 1fr; gap: 0 0; } .kah-modal dd { margin-bottom: .75rem; } }


/* --- Agency credit, in the Impressum ---------------------------------------
   The logo is the link's only content, so its alt carries the accessible
   name -- a screen reader announces "masslevel, Link". inline-block keeps
   the focus ring on the mark rather than on a full-width line box.      */
.kah-credit { display: inline-block; }
.kah-credit-logo { display: block; height: 1.25rem; width: auto; max-width: 150px; }
/* The width/height attributes on the <img> are the display size, 150x20, not
   the file's 628x84. Height drives the size; max-width is the backstop. If
   this stylesheet is ever stale or missing the mark still comes out at
   150px instead of filling the modal.                                    */


/* --- Language switch --------------------------------------------------------
   Both languages are shown, so it reads as a choice rather than as one
   unexplained link. The current one is a <span> with aria-current, not a
   link to the page you are already on.

   It borrows the nav's own active-link device: the short blue rule
   underneath, plus medium weight. That is the pattern the header already
   uses for "you are here", so it needs no learning, and it does not rely on
   colour alone -- which a muted-grey-versus-dark-grey pair would, at a
   contrast that failed AA into the bargain.                              */
.kah-lang {
  display: flex; align-items: center; gap: 1.1rem;
  margin: 0; flex: none;
  font-size: var(--kah-fs-small);
  letter-spacing: .08em;
}
/* The divider is positioned out of flow, in the middle of the gap. In flow
   it would sit inside the second item's box, and the underline below spans
   that box -- so EN's rule started before the separator while DE's stopped
   at its letters. Out of flow, both boxes are exactly their text.       */
.kah-lang > * + *::before {
  content: ""; position: absolute; left: -.55rem; top: 50%;
  width: 1px; height: .85em; transform: translateY(-50%);
  background: var(--kah-line-strong);
}
.kah-lang a,
.kah-lang-current {
  position: relative; padding-bottom: .25rem;
  color: var(--kah-anthracite); text-decoration: none;
  font-weight: var(--kah-fw-regular);
}
.kah-lang a::after,
.kah-lang-current::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--kah-blue);
  transform: scaleX(0); transform-origin: left; transition: transform .18s ease-in-out;
}
.kah-lang a:hover::after,
.kah-lang a:focus-visible::after,
.kah-lang-current::after { transform: scaleX(1); }
.kah-lang-current { font-weight: var(--kah-fw-medium); }

/* --- Note box, EN page ------------------------------------------------------
   Used once: above the German privacy policy on the English page, to say so
   before the reader hits a wall of German.                                */
.kah-note {
  margin-bottom: 1.5rem; padding: .9rem 1.1rem;
  border-left: 3px solid var(--kah-blue); background: var(--kah-surface);
  font-size: var(--kah-fs-small); line-height: 1.55;
}


/* ============================================================================
   99 · PRINT
============================================================================ */
@media print {
  .kah-header, .kah-hero-actions, .kah-map, .navbar-toggler, .kah-footer ul { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .kah-section { padding-block: 1.5rem; }
  .accordion-collapse { display: block !important; height: auto !important; }
}