/* Site-spezifische Overrides
   (vorher inline <style>-Blöcke; ausgelagert, damit
   CSP style-src 'unsafe-inline' weg kann) */

/* Visually-hidden (sr-only) für Screenreader- und SEO-
   relevante Überschriften, die das Layout nicht stören sollen.
   Auf den Leistungen-Unterseiten trägt das sichtbare <h3>-Titel-
   Feld die Typo3-Optik; zusätzlich gibt's oben im <main> ein
   unsichtbares <h1> mit dem sauberen Seitentitel, damit Google
   & Screenreader eine echte Hauptüberschrift finden. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;      /* Legacy, für alte Browser */
  clip-path: inset(50%) !important;        /* Modern (Safari ≥ 9.1) */
  white-space: nowrap !important;
  border: 0 !important;
  /* font-size auf 1px, falls clip/clip-path mal ignoriert werden —
     Fallback gegen Lesbarkeit bei exotischen Rendering-Pfaden: */
  font-size: 1px !important;
}

/* Leistungen-Unterseiten: Titel-Kasten (farbige Box mit h3 + Icon
   nebeneinander). Bei starkem Text-Zoom oder sehr schmalem Display
   kann der Titel aus seiner Spalte laufen; in der DOM-Reihenfolge
   wird das Icon-Bild NACH dem Titel gemalt und würde den Text
   überdecken. Titel-Spalte in eigenen Stacking-Kontext heben,
   damit sie immer über dem Icon liegt. Analog zur
   .grid .item-box h4-Regel bei den Kacheln auf der Startseite. */
.col-md-6 > [class*="clbg-"] > .row > [class*="col-"]:first-child {
  position: relative;
  z-index: 1;
}
/* Terminvergabe-CTA auf der Startseite
   ------------------------------------
   Zwei gleichwertige CTA-Buttons untereinander: oben online (Jameda),
   unten telefonisch. Dazwischen der Info-Hinweis zu den zwei Standorten —
   der liest sich als Brücke ("oder, wenn Sie lieber persönlich…").
   Beide Buttons blau und gleich groß: Patienten sollen nicht das Gefühl
   haben, der telefonische Weg sei die "zweite Wahl". */
.cta-termin-intro {
  font-size: 1.15rem;
  max-width: 700px;
  margin: 0 auto 1.5rem;
}
/* Beide Buttons sitzen in einem zentrierten Wrapper mit fester max-width.
   Zusammen mit w-100 am Button ergibt das zwei exakt gleich breite,
   untereinander gestapelte CTAs. min-height sichert auch bei unter-
   schiedlichem Text identische Höhe. */
.cta-termin-button-wrap {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.btn-termin-buchen {
  padding: 1rem 1.5rem;
  font-size: 1.15rem;
  min-height: 4rem;
}
/* Slogan-Zeile unter den Buttons. Dezent, damit die Buttons visuell
   vorn stehen. Interpunkte (·) trennen die drei Statements. */
.cta-termin-slogan {
  color: #43474c;
  font-size: 0.95rem;
}
/* Zwei-Standorte-Tipp direkt unter den Termin-Buttons: viele Patienten
   übersehen im Jameda-Kalender, dass dort immer der Standort mit dem
   frühesten freien Termin zuerst erscheint — nicht unbedingt der, den
   sie wollen. Positiv als Wahlfreiheit formuliert, nicht als Warnung.
   Kompakt gehalten (kleinere Schrift, enger Zeilenabstand), damit die
   Zeile als visueller Zusatz zu den Buttons wirkt — nicht als eigener
   Textblock. */
.cta-termin-tipp {
  color: #43474c;
  font-size: 0.8rem;
  line-height: 1.4;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* Rechtlicher Hinweis ganz unten: dass der Klick auf Jameda führt.
   Dezent grau, nicht im Rampenlicht, aber lesbar. */
.cta-termin-disclaimer {
  color: #6c757d;
}

/* Englische Einladungs-Zeile im Footer: signalisiert internationalen
   Patienten (Uni-Siegen-Austauschstudenten etc.), dass sie gerne
   anrufen/buchen dürfen — ohne eigene EN-Version der Site. Browser-
   Translate reicht für den Rest. Dezent kursiv, leicht transparent,
   damit sie die deutsche Haupt-Navigation nicht konkurriert. */
.footer-english-note {
  font-style: italic;
  opacity: 0.8;
}

.col-md-6 > [class*="clbg-"] > .row > [class*="col-"]:first-child h3 {
  /* KEINE automatische Silbentrennung im Titel-Kasten — Wörter
     sollen ganz auf die nächste Zeile rutschen (bei mehreren
     Wörtern) oder lieber aus dem Kasten herausragen (bei einem
     sehr langen Wort). z-index:1 auf der Titel-Spalte (oben)
     sorgt dafür, dass so ein überlaufender Text immer lesbar
     über dem Icon liegt, nicht dahinter. */
  hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
}

/* Nav-Höhe ab xl, damit Header beim Scrollen nicht springt */
@media (min-width: 1200px) {
  header.header #navwrap { min-height: 155px; }
}

/* Scroll-Offset für Anker-Links (#terminvergabe, #leistungen, #faq …).
   Ohne diese Regel landet das Anker-Ziel am oberen Fensterrand und
   liegt damit UNTER dem fixed Header — d.h. die eigentliche
   Überschrift ist verdeckt, im Blickfeld erscheint der Abschnitt
   darunter. scroll-margin-top gibt dem Browser einen Puffer, den er
   beim Hash-Scroll abzieht. Werte grob an Header-Höhe orientiert:
   mobil kleiner, ab xl voller Wert. */
[id] { scroll-margin-top: 90px; }
@media (min-width: 1200px) { [id] { scroll-margin-top: 170px; } }

/* Kontakt-Block (Startseite): Foto füllt Spalte vertikal,
   sonst wäre unten Weißraum. Nur ab md (≥768px), wo Foto
   und graue Box nebeneinander stehen; auf Mobil
   natürliches Seitenverhältnis beibehalten. */
@media (min-width: 768px) {
  .contact { height: 100%; }
  .contact img { height: 100%; width: 100%; object-fit: cover; }
}

/* Öffnungszeiten-Tabelle: 90 % der Spaltenbreite, zentriert
   (vorher inline style="width:90%" + align="center") */
.contenttable { width: 90%; margin-left: auto; margin-right: auto; }

/* Leistungen-Filter (Startseite)
   Ersetzt Isotope.js durch CSS-Grid + minimalen Vanilla-JS-Filter.
   Items haben Klassen wie "element-item erwachsene fest jugendliche …";
   .grid bekommt per JS data-active-filter="<tag>"; das CSS unten
   blendet Items aus, deren Klassen den Filter nicht enthalten. */
/* Breakpoints orientiert am Original-Isotope-Layout (sonst überlappen
   auf sehr kleinen Displays die absolut-positionierten Icons den
   Titeltext bei längeren Begriffen wie "Bracketumfeldversiegelung"):
     ≤  575 px → 1 Spalte
     576–991  → 2 Spalten
     992–1199 → 3 Spalten
     ≥ 1200   → 4 Spalten */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 576px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}
/* Legacy aus der Isotope-Ära im merged CSS: `.filter .element-item`
   hatte `width: 25%; float: left; border: 2px solid transparent;` plus
   max-width-Media-Queries (33.333% / 50% / 100%). Im Grid-Kontext werden
   Prozente gegen die Track-Breite gerechnet — 25% × 268px = 67px breite
   Kacheln in einer 268px-Zelle. Hier explizit zurücksetzen. */
.grid .element-item {
  min-width: 0;
  width: auto;
  float: none;
  border: 0;
}
/* Inneres <a> ist per Default inline → schrumpft auf Inhaltsbreite und
   das farbige .item-box wird zur schmalen Säule. Auf block-level setzen,
   damit es die Grid-Zelle füllt (zu Isotope-Zeiten via inline-Style
   width:25% gelöst). Höhe gleich, damit Items in einer Reihe gleich
   hoch sind. */
.grid .element-item > a { display: block; height: 100%; }
/* Höhe: 100% (= Grid-Zelle füllen) MIT min-height 250px, weil das
   Icon im .item-box `position: absolute` ist und sonst nichts zur
   Höhe beiträgt — nur die h4-Überschrift. Original-Wert aus dem
   merged CSS (`.filter .element-item .item-box { height: 250px }`),
   das wir hier explizit überschreiben (sonst wäre die Box exakt
   250 hoch und ignorierte längere Inhalte). */
.grid .element-item .item-box { height: 100%; min-height: 250px; }
/* Stacking-Defensive: das Icon ist `position: absolute` und liegt damit
   im Default-Stacking ÜBER der statisch positionierten h4. Falls Titel
   und Icon doch mal überlappen (sehr lange Begriffe in schmalen
   Spalten oder Accessibility-Text-Zoom 150%+), soll der Text lesbar
   bleiben → h4 in eigenen Stacking-Kontext heben und über das Icon legen.
   Ein Hintergrund am h4 wird bewusst NICHT gesetzt — würde im Normalfall
   (kein Overlap) als sichtbarer Streifen über der farbigen Box wirken. */
.grid .element-item .item-box h4 { position: relative; z-index: 1; }

/* Filter aktiv: alle Items, die NICHT die aktive Tag-Klasse tragen,
   ausblenden. Eine Regel pro Tag — bewusst statisch enumeriert,
   damit kein 'unsafe-inline'/dynamisches CSS nötig ist. */
.grid[data-active-filter="erwachsene"]  .element-item:not(.erwachsene)  { display: none; }
.grid[data-active-filter="jugendliche"] .element-item:not(.jugendliche) { display: none; }
.grid[data-active-filter="kinder"]      .element-item:not(.kinder)      { display: none; }
.grid[data-active-filter="fest"]        .element-item:not(.fest)        { display: none; }
.grid[data-active-filter="lose"]        .element-item:not(.lose)        { display: none; }
.grid[data-active-filter="unsichtbar"]  .element-item:not(.unsichtbar)  { display: none; }
.grid[data-active-filter="3d-planung"]  .element-item:not(.\33 d-planung) { display: none; }

/* "alle"-Button (data-active-filter="*" oder unset): nichts ausblenden — Default */