/* ==========================================================================
   AllDent Zahnzentrum Bremen — Utility-Ebene
   --------------------------------------------------------------------------
   Wird als LETZTES Stylesheet geladen, nach assets/theme.css und styles.css.
   Die Reihenfolge ist Absicht: Utilities duerfen Komponenten-Defaults
   ueberschreiben (z. B. h2 + .text-[22px]).

   Der :root-Block unten wiederholt die Tokens aus styles.css. Das ist
   Absicht und kein Versehen: sollte styles.css einmal fehlen oder auf einen
   aelteren Stand zurueckfallen, behalten Radien, Schatten und der
   Sektionsrhythmus trotzdem gueltige Werte — sonst faellt var() aus und
   ganze Abschnitte haetten schlagartig kein Polster mehr.
   ========================================================================== */

:root {
  /* Marke */
  --c-primary:       #0E3A5B;
  --c-primary-deep:  #092A43;
  --c-primary-light: #1B5E8C;
  --c-primary-pale:  #E7EFF5;
  --c-cta:           #0B7A76;
  --c-cta-hover:     #095F5C;
  --c-cta-pale:      #E3F1F0;
  --c-emergency:     #B3261E;
  --c-emergency-pale:#FBEAE9;
  --c-success:       #2E9E5B;
  --c-star:          #E8A33D;

  /* Flaechen */
  --c-bg:         #F4F8FB;
  --c-surface:    #FFFFFF;
  --c-surface-2:  #FAFCFD;
  --c-text:       #14212B;
  --c-text-muted: #52646F;
  --c-border:     #E4EBF0;
  --c-border-str: #C9D6DF;

  /* Radien — grosszuegig. Karten, Bilder und Felder sollen sichtbar weich
     sein, ohne ins Verspielte zu kippen. */
  --radius-sm:   10px;
  --radius:      14px;
  --radius-lg:   20px;
  --radius-xl:   26px;
  --radius-2xl:  34px;
  --radius-pill: 999px;

  /* Schatten — navy getoent, weit gestreut und schwach: die Tiefe entsteht
     ueber die Flaeche, nicht ueber eine harte Kante. */
  --shadow-xs: 0 1px 2px rgba(14, 58, 91, 0.05);
  --shadow-sm: 0 2px 4px rgba(14, 58, 91, 0.04), 0 8px 20px -12px rgba(14, 58, 91, 0.16);
  --shadow-md: 0 2px 4px rgba(14, 58, 91, 0.04), 0 14px 32px -12px rgba(14, 58, 91, 0.18);
  --shadow-lg: 0 4px 10px rgba(14, 58, 91, 0.05), 0 30px 64px -20px rgba(14, 58, 91, 0.26);
  --shadow-xl: 0 6px 14px rgba(14, 58, 91, 0.06), 0 44px 90px -28px rgba(14, 58, 91, 0.30);

  --ring: 0 0 0 4px rgba(11, 122, 118, 0.16);

  /* Vertikaler Rhythmus. Saemtliche Sektionsabstaende laufen hierueber —
     auch die py-Utilities —, damit alle Seiten gleich atmen. */
  --space-section: 4.5rem;
  --space-block:   2.5rem;

  /* Seitliches Polster von .container-page und der unteren Aktionsleiste. */
  --gutter: 1.375rem;

  --font-display: "Outfit", "Poppins", "Plus Jakarta Sans", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Sans 3", "Open Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Unterhalb von 1024px klebt nur die Navigationszeile, nicht der ganze
     Kopf — Sprungziele brauchen dort weniger Vorlauf. */
  --header-h: 5rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 768px) {
  :root { --space-section: 7rem; --space-block: 3.5rem; --gutter: 2rem; }

  /* Zwischen 768px und 1024px waechst die klebende Navigationszeile auf
     5,25rem (--nav-h in styles.css), der Vorlauf fuer Sprungziele stand aber
     weiter auf 5rem — ein angesprungener Abschnitt lag damit knapp unter der
     Leiste. Der Wert muss hier stehen und nicht in styles.css: diese Datei
     wird spaeter geladen und setzt --header-h oben ohne Breitenabfrage. */
  :root { --header-h: 5.75rem; }
}

@media (min-width: 1024px) {
  :root { --header-h: 8rem; --gutter: 2.5rem; }
}

@media (min-width: 1280px) {
  :root { --space-section: 8rem; }
}

/* Diese Datei wird als letzte geladen und wuerde den Landschafts-Rhythmus aus
   styles.css sonst wieder ueberschreiben — deshalb steht er hier ein zweites
   Mal, hinter den Breiten-Abfragen. */
@media (max-height: 480px) and (orientation: landscape) {
  :root { --space-section: 2.75rem; --space-block: 1.75rem; }
}

/* Aufgeklappte Geraete im geschlossenen Zustand (280px und aehnlich). Aus
   derselben Ursache wie oben steht der schmalere Rand hier und nicht in
   styles.css: dort verliert er gegen das --gutter des :root-Blocks weiter
   oben in dieser Datei. 0,9rem statt 1,375rem geben dem Inhalt rund 16px
   zurueck — auf 280px ist das der Unterschied zwischen zwei und drei Woertern
   je Zeile. Ab 360px bleibt alles wie gehabt. */
@media (max-width: 359.98px) {
  :root { --gutter: 0.9rem; }

  /* Der Notfallkasten der Startseite. Volles Kartenpolster kostet dort 64px
     der 251px, die ueberhaupt zur Verfuegung stehen. */
  .p-6 { padding: 1.25rem; }
}

/* ==========================================================================
   Utility-Ebene
   --------------------------------------------------------------------------
   Das Markup ist in einer Tailwind-artigen Utility-Sprache ausgezeichnet
   (grid, gap-4, lg:flex, hidden, text-[15px] …), ein Tailwind-Build war aber
   nie eingebunden. Ohne diese Regeln gibt es kein Raster, keine Spalten,
   keine Farben in der Kopfleiste und keine Umschaltung zwischen mobiler und
   Desktop-Navigation — beide Menues waeren gleichzeitig sichtbar.

   Hier stehen genau die Klassen, die im Markup vorkommen: handgeschrieben,
   ohne Build-Schritt, ohne CDN. Die Abstandswerte sind gegenueber einer
   reinen Tailwind-Skala angehoben, weil der Entwurf vom Weissraum lebt.

   Breakpoints wie Tailwind: sm 640px · md 768px · lg 1024px
   ========================================================================== */

/* Anzeige & Position */
.block { display: block; }
.hidden { display: none; }
.flex { display: flex; }
.grid { display: grid; }
.inline-flex { display: inline-flex; }

.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }

.top-0 { top: 0; }
.inset-0 { inset: 0; }
.z-50 { z-index: 50; }

.overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Flexbox */
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-none { flex: none; }

.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.self-start { align-self: flex-start; }

/* Grid */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.col-span-2 { grid-column: span 2 / span 2; }

/* Abstaende zwischen Grid- und Flex-Kindern */
.gap-1    { gap: 0.25rem; }
.gap-2    { gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3    { gap: 0.75rem; }
.gap-4    { gap: 1rem; }
.gap-5    { gap: 1.25rem; }
.gap-6    { gap: 1.5rem; }
.gap-8    { gap: 2rem; }
.gap-10   { gap: 2.5rem; }

/* Raster brauchen mehr Luft als Flex-Zeilen: derselbe gap-Wert faellt in einer
   Buttonleiste zu gross aus und in einem Kartenraster zu knapp. Die
   zusammengesetzten Selektoren gewinnen ueber Spezifitaet. */
.grid.gap-4  { gap: 1.5rem; }
.grid.gap-5  { gap: 1.75rem; }
.grid.gap-6  { gap: 2.25rem; }
.grid.gap-8  { gap: 2.75rem; }
.grid.gap-10 { gap: 3rem; }

.gap-x-4 { column-gap: 1rem; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-y-1 { row-gap: 0.25rem; }
.gap-y-2 { row-gap: 0.5rem; }

.space-y-1 > * + * { margin-top: 0.45rem; }

/* Aussen- und Innenabstaende */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.875rem; }
.mt-4 { margin-top: 1.125rem; }
.mt-5 { margin-top: 1.375rem; }
.mt-6 { margin-top: 1.75rem; }
.mt-7 { margin-top: 2.25rem; }
.mt-8 { margin-top: 3rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.75rem; }
.my-8 { margin-block: 3rem; }

.p-0 { padding: 0; }
.p-2 { padding: 0.625rem; }
.p-3 { padding: 0.9rem 1rem; }
.p-4 { padding: 1.25rem; }
.p-6 { padding: 2rem; }

.px-2\.5 { padding-inline: 0.75rem; }
.pl-5 { padding-left: 1.25rem; }
.pt-2 { padding-top: 0.5rem; }

.py-1 { padding-block: 0.25rem; }
.py-2 { padding-block: 0.5rem; }
.py-3 { padding-block: 0.875rem; }
.py-4 { padding-block: 1rem; }
.py-8 { padding-block: 2.5rem; }

/* Die grossen py-Stufen sitzen im Markup ausschliesslich auf .container-page,
   also auf Sektionswrappern. Sie folgen deshalb demselben Rhythmus wie
   .section — sonst atmen die Seiten unterschiedlich, je nachdem welche
   Schreibweise ein Abschnitt zufaellig benutzt. */
.py-10 { padding-block: calc(var(--space-section) * 0.8); }
.py-12 { padding-block: var(--space-section); }
.py-14 { padding-block: var(--space-section); }

/* Groessen */
.w-full { width: 100%; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.h-full { height: 100%; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.object-cover { object-fit: cover; }

/* Typografie */
.font-normal   { font-weight: 400; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

.text-left   { text-align: left; }
.text-center { text-align: center; }

.uppercase { text-transform: uppercase; }
.not-italic { font-style: normal; }
.tracking-\[0\.14em\] { letter-spacing: 0.14em; }
.leading-tight { line-height: 1.25; }
.leading-none  { line-height: 1; }

.underline { text-decoration: underline; }
.underline-offset-2 { text-underline-offset: 2px; }
.hover\:no-underline:hover { text-decoration: none; }

.list-disc { list-style: disc; }

.text-\[11px\] { font-size: 11px; }
.text-\[15px\] { font-size: 15px; }
.text-\[16px\] { font-size: 16px; }
.text-\[17px\] { font-size: 17px; }
.text-\[19px\] { font-size: 19px; }
.text-\[20px\] { font-size: 20px; }
.text-\[22px\] { font-size: 22px; }
/* Ueberschriften, die bewusst kleiner laufen als die h2-Leiter (Teaser-Baender).
   Sie sind mit der Leiter in styles.css mitgewachsen — sonst faellt das
   Teaser-Band gegen die groesser gewordenen Sektionsueberschriften ab. Der
   Abstand nach unten bleibt gewahrt: kleiner als eine h2, groesser als h3. */
.text-\[24px\] { font-size: 26px; }
.text-\[32px\] { font-size: clamp(30px, 4.7vw, 41px); }
.text-\[64px\] { font-size: clamp(48px, 9vw, 76px); }

/* Farben */
.text-white     { color: #FFFFFF; }
.text-primary   { color: var(--c-primary); }
.text-cta       { color: var(--c-cta); }
.text-ink       { color: var(--c-text); }
.text-ink-muted { color: var(--c-text-muted); }
.text-\[\#C9DCEA\] { color: #C9DCEA; }
.hover\:text-white:hover { color: #FFFFFF; }

.bg-white        { background-color: var(--c-surface); }
.bg-primary      { background-color: var(--c-primary); }
.bg-primary-pale { background-color: var(--c-primary-pale); }
.bg-cta          { background-color: var(--c-cta); }
.bg-emergency    { background-color: var(--c-emergency); }

.accent-\[\#0B7A76\] { accent-color: var(--c-cta); }

/* Die Einwilligungs-Kaestchen der Formulare tragen .h-5.w-5 und waren damit
   20 x 20px gross. Die Mindestgroesse fuer ein Bedienelement liegt bei
   24 x 24px — mit dem Finger auf einem Telefon ist das der Unterschied
   zwischen treffen und danebentippen. Der Selektor nennt beide Klassen, damit
   er die generischen Groessen-Utilities schlaegt, ohne sie zu veraendern:
   .h-5 sitzt auch auf Symbolen, die 20px bleiben sollen. */
input[type="checkbox"].h-5.w-5 {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.2rem;
}

/* Rahmen & Radien */
.border   { border-width: 1px; border-style: solid; border-color: var(--c-border); }
.border-0 { border-width: 0; border-style: solid; }
.border-2 { border-width: 2px; border-style: solid; border-color: var(--c-border); }
.border-t { border-top-width: 1px; border-top-style: solid; border-top-color: var(--c-border); }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--c-border); }
.border-y { border-block-width: 1px; border-block-style: solid; border-block-color: var(--c-border); }

.border-line      { border-color: var(--c-border); }
.border-emergency { border-color: var(--c-emergency); }
.border-\[\#2A5678\] { border-color: #2A5678; }

/* Radien greifen auf die Tokens oben zu, damit Karten, Bilder, Kaesten und
   Tabellen dieselbe Rundung tragen. */
.rounded    { border-radius: var(--radius-pill); }
.rounded-lg { border-radius: var(--radius); }
.rounded-xl { border-radius: var(--radius-xl); }

/* ==========================================================================
   Responsive Varianten
   ========================================================================== */

@media (min-width: 640px) {
  .sm\:inline-flex { display: inline-flex; }

  /* Die Knopfreihen unter den Hauptueberschriften stehen ab 640px nebeneinander.
     Im zweispaltigen Hero ist die linke Spalte ab 1024px aber nur noch rund
     470px breit, waehrend "Termin online buchen" und "Anrufen: 0421 4918460"
     zusammen knapp 500px brauchen — ohne Umbruch liefe die Reihe dort aus der
     Spalte. Der Umbruch aendert nichts, solange beide Knoepfe passen. */
  .sm\:flex-row  { flex-direction: row; flex-wrap: wrap; }
  .sm\:flex-wrap { flex-wrap: wrap; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:col-span-2 { grid-column: span 2 / span 2; }
}

@media (min-width: 768px) {
  .md\:block { display: block; }
  .md\:flex-row { flex-direction: row; flex-wrap: wrap; }
  .md\:items-center { align-items: center; }
  .md\:justify-between { justify-content: space-between; }

  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-\[1fr_auto\] { grid-template-columns: minmax(0, 1fr) auto; }

  .md\:p-8 { padding: 2.5rem; }
  .md\:py-14 { padding-block: var(--space-section); }
  .md\:py-16 { padding-block: var(--space-section); }
  .md\:py-20 { padding-block: calc(var(--space-section) * 1.15); }

  /* Gegenstuecke zu .text-[24px]/.text-[32px] — wachsen mit der
     Ueberschriftenleiter mit. */
  .md\:text-\[26px\] { font-size: 28px; }
  .md\:text-\[29px\] { font-size: 32px; }
}

@media (min-width: 1024px) {
  .lg\:flex { display: flex; }
  .lg\:hidden { display: none; }

  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Fuenf Spalten stehen ausschliesslich in den Faktenkaesten der
     Leistungsseiten ("Festpreis", "Was zahlt die Kasse"). Bei 1024px blieben
     davon je Karte rund 120px Textbreite — "ab 300 € Eigenanteil" in 22px
     passt dort nicht. Deshalb dazwischen drei Spalten, die fuenfte Stufe
     erst, wenn der Container sie auch traegt. */
  .lg\:grid-cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Die Merkmalsliste im Hero der Startseite steht ab 640px zweispaltig. In
     der linken Heldenspalte bleiben ab 1024px aber nur rund 470px — zwei
     Spalten davon tragen "Alle Fachbereiche an einem Standort" nicht mehr in
     einer Zeile. Dort geht sie deshalb auf eine Spalte zurueck und wird ab
     1280px wieder zweispaltig, wenn der Container die Breite hergibt. */
  .lg\:grid-cols-1 { grid-template-columns: minmax(0, 1fr); }

  .lg\:grid-cols-\[auto_1fr\]        { grid-template-columns: auto minmax(0, 1fr); }
  .lg\:grid-cols-\[1fr_0\.9fr\]      { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
  .lg\:grid-cols-\[1\.1fr_0\.9fr\]   { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .lg\:grid-cols-\[1\.15fr_0\.85fr\] { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }

  .grid.gap-4 { gap: 1.75rem; }
  .grid.gap-8 { gap: 3.5rem; }
  /* Zweispaltige Hero-Raster duerfen weiter auseinanderstehen als die
     vierspaltige Fusszeile, die dieselbe Klasse benutzt. Die Regel gilt fuer
     alle zweispaltigen Varianten, nicht nur die gleich breite: die Heros der
     Leistungsseiten und der Startseite teilen ungleich (1.15/0.85 bzw.
     1.1/0.9), sollen aber denselben Abstand zwischen Text und Bild haben. */
  .grid.gap-10.lg\:grid-cols-2,
  .grid.gap-10.lg\:grid-cols-\[1fr_0\.9fr\],
  .grid.gap-10.lg\:grid-cols-\[1\.1fr_0\.9fr\],
  .grid.gap-10.lg\:grid-cols-\[1\.15fr_0\.85fr\] { gap: 3.75rem; }

  /* In vierspaltigen Rastern bliebe bei vollem Polster kaum Textbreite
     uebrig — dort faellt es zurueck, sobald die Spalten greifen. */
  .lg\:grid-cols-4 .card { padding: 1.5rem; }
}

@media (min-width: 1280px) {
  /* Ab hier traegt der Container die fuenfte Spalte: 1240px abzueglich
     Polster, geteilt durch fuenf, lassen je Karte gut 170px Textbreite. */
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:grid-cols-5 .card { padding: 1.5rem; }

  /* Gegenstueck zu .lg\:grid-cols-1 — siehe Kommentar dort. */
  .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}