/* ===========================================================================
   Ergaenzungen zum uebernommenen Bundle
   ---------------------------------------------------------------------------
   styles.css stammt unveraendert aus dem Lovable-Build und enthaelt NUR die
   dort benutzten Tailwind-Klassen. Selbst dazugeschriebene Klassen wirken
   darin nicht. Alles, was danach noch noetig wurde, steht deshalb hier -
   als gewoehnliches CSS, das immer greift.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Markenorange auf dunklem Grund
   --kto-orange (#b04000) ist auf hellem Grund korrekt (5,45:1 auf #fbf6ee),
   auf dunklem Grund aber nicht lesbar genug: 2,70:1 auf --kto-ink (#2e1f16).
   Auf dunklen Flaechen wird deshalb ein aufgehellter Ton gleicher Farbfamilie
   verwendet: #ff7033 ergibt 5,75:1 auf #2e1f16 und 5,00:1 auf #382a22.
   --------------------------------------------------------------------------- */
:root { --kto-orange-auf-dunkel: #ff7033; }

footer .text-\[var\(--kto-orange\)\],
[class*="bg-[var(--kto-ink)]"] .text-\[var\(--kto-orange\)\],
[class*="bg-[var(--kto-ink)]"] strong {
  color: var(--kto-orange-auf-dunkel);
}

/* ---------------------------------------------------------------------------
   2. Sichtbarer Fokus in Markenfarbe
   Der Kartenlink ist genauso gross wie sein Elternteil mit overflow:hidden -
   eine aussen liegende Umrandung wird restlos weggeschnitten. Ein negativer
   Versatz zeichnet sie deshalb nach innen.
   --------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--kto-btn, #c24600);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Beim Kartenlink liegt das Bild ueber dem Rahmen des Links - eine gewoehnliche
   Umrandung waere unsichtbar. Der Ring wird deshalb als eigene Ebene darueber
   gezeichnet, nach innen versetzt, damit overflow:hidden ihn nicht wegschneidet. */
.ktpo-karte > a:focus-visible { outline: none; }
.ktpo-karte > a:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 0 4px var(--kto-btn, #c24600), inset 0 0 0 7px #ffffff;
}

/* Auf dunklem Grund braucht die Umrandung einen hellen Ton. */
footer a:focus-visible,
footer button:focus-visible,
[class*="bg-[var(--kto-ink)]"] a:focus-visible,
[class*="bg-[var(--kto-ink)]"] button:focus-visible {
  outline-color: #ffffff;
}

/* ---------------------------------------------------------------------------
   3. Tap-Ziele
   Allein stehende Verweise brauchen mindestens 24 px Hoehe (WCAG 2.5.8).
   Verweise im Fliesstext sind ausgenommen und bleiben unberuehrt.
   --------------------------------------------------------------------------- */
.ktpo-karte .ktpo-quelle { padding-top: 5px; padding-bottom: 5px; }
/* Fuer besonders wichtige Nummern: mindestens 44px hoch, damit sie auch in
   einer Ausnahmesituation mit dem Daumen sicher zu treffen sind. Der Wert muss
   ueber der bereits gesetzten Polsterung liegen, sonst aendert sich nichts. */
.ktpo-tapziel {
  display: inline-block;
  padding-top: 11px;
  padding-bottom: 11px;
}

/* ---------------------------------------------------------------------------
   4. Oeffnungszeiten auf schmalen Geraeten
   Beschriftung und Uhrzeit standen nebeneinander in einer halben Spalte.
   "NACHMITTAG: 15:00-18:00" passte dort nicht hinein, die Schlusszeit wurde
   weggeschnitten. Unterhalb von 640px steht die Beschriftung deshalb darueber.
   --------------------------------------------------------------------------- */
.ktpo-zeit-label {
  display: block;
  margin: 0 0 2px 0;
}
@media (min-width: 640px) {
  .ktpo-zeit-label { display: none; }
}

/* Kompakte Zeiten (Kontakt- und Notfallseite): Vormittag und Nachmittag in
   festen Spalten. Sonst rutscht eine reine Vormittagszeit an die Stelle, an
   der bei anderen Tagen die Nachmittagszeit steht - und wird als solche gelesen. */
.ktpo-zeit-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  column-gap: 10px;
  align-items: baseline;
}
.ktpo-zeit-vm,
.ktpo-zeit-nm {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 5.9em;
}
/* Auf schmalen Geraeten reicht die Breite nicht fuer Tag + zwei Zeitspalten -
   der Wochentag wuerde abgeschnitten. Dann steht der Tag ueber den Zeiten.
   Die beiden Zeitspalten bleiben dabei bestehen, damit eine reine
   Vormittagszeit weiterhin links steht. */
@media (max-width: 389px) {
  .ktpo-zeit-zeile {
    grid-template-columns: 1fr 1fr;
    column-gap: 8px;
  }
  .ktpo-zeit-zeile > dt { grid-column: 1 / -1; }
  .ktpo-zeit-vm,
  .ktpo-zeit-nm { min-width: 0; text-align: left; }
  .ktpo-zeit-nm { text-align: right; }
}

/* ---------------------------------------------------------------------------
   4b. Sehr schmale Geraete (bis 359px, z. B. iPhone SE der ersten Reihe)
   Drei Fundstellen liefen dort aus dem Bild:
     - Im Fuss blieben der Tages-Spalte nur 44px, "Donnerstag" braucht 68px und
       legte sich ueber die Uhrzeit.
     - Die Ueberschriften von AGB und Datenschutz sind laenger als der Schirm
       und hatten keine Umbruchregel.
     - Die Teamkarte ist ein flex-Element ohne min-width:0 und kann deshalb
       nicht unter ihre Inhaltsbreite schrumpfen.
   --------------------------------------------------------------------------- */
@media (max-width: 359px) {
  /* Tagesname ueber die volle Breite, Uhrzeiten darunter nebeneinander. */
  .ktpo-fusszeiten { grid-template-columns: 1fr 1fr !important; }
  .ktpo-fusszeiten > div:nth-child(3n+1) { grid-column: 1 / -1; }

  /* Gesperrte Grossbuchstaben brauchen mehr Platz, als hier vorhanden ist.
     Die Sperrung wird enger, und die Zeile darf umbrechen. */
  article [class*="tracking-"],
  article [class*="uppercase"] {
    letter-spacing: 0.04em;
    overflow-wrap: break-word;
  }
  /* Lange Fachwoerter duerfen in der schmalen Textspalte der Teamkarten
     umbrechen, statt seitlich herauszulaufen. */
  article p,
  article li,
  article div { overflow-wrap: break-word; }
}

/* Lange Woerter duerfen umbrechen statt aus dem Bild zu laufen. */
h1, h2, h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Flex-Kinder duerfen unter ihre Inhaltsbreite schrumpfen. */
article.flex > div,
article.flex { min-width: 0; }

/* ---------------------------------------------------------------------------
   5. Feste Leiste am unteren Rand
   Sie traegt jetzt drei Wege: Termin, Anrufen, Notfall. Auf sehr schmalen
   Geraeten wird der Innenabstand kleiner und die Symbole entfallen, damit die
   Beschriftungen vollstaendig lesbar bleiben.
   --------------------------------------------------------------------------- */
@media (max-width: 379px) {
  .ktpo-leiste > a { padding-left: 8px; padding-right: 8px; gap: 4px; }
  .ktpo-leiste > a > svg { display: none; }
}

/* ---------------------------------------------------------------------------
   6. Fokus darf nicht hinter festen Leisten verschwinden
   (WCAG 2.2, Kriterium 2.4.11 "Fokus nicht verdeckt")
   Beim Tabben scrollt der Browser das Ziel an den Rand des Sichtbereichs -
   also genau unter die feste Kopfzeile bzw. hinter die feste Leiste am
   unteren Rand. scroll-padding haelt diesen Bereich frei.
   --------------------------------------------------------------------------- */
html {
  /* --kto-kopf wird beim Laden aus der echten Kopfhoehe gesetzt (app.js).
     96px ist nur der Rueckfallwert, falls JavaScript nicht laeuft. */
  scroll-padding-top: calc(var(--kto-kopf, 96px) + 12px);
  scroll-padding-bottom: 104px;
}
@media (min-width: 640px) {
  /* Oberhalb 640px gibt es die untere Leiste nicht mehr. */
  html { scroll-padding-bottom: 24px; }
}

/* Der schwebende Knopf unten rechts lag ueber den Rechtslinks im Fuss.
   Der Fuss bekommt dort unten Luft, damit sich beides nicht mehr trifft. */
@media (min-width: 640px) {
  footer { padding-bottom: 96px; }
}

/* ---------------------------------------------------------------------------
   7. Tap-Ziele im Menue
   (WCAG 2.2, Kriterium 2.5.8 "Zielgroesse", Mindestmass 24x24 px)
   Die Menueeintraege massen 342x23 px - ein Pixel zu wenig. Etwas Luft nach
   oben und unten macht sie regelkonform und mit dem Daumen besser treffbar.
   --------------------------------------------------------------------------- */
/* Die vier grossen Aktionsknoepfe oben im Menue bringen ihre Hoehe schon mit
   und werden deshalb ausgenommen. Wichtig: sie NICHT nachtraeglich mit
   "revert" zuruecksetzen - das loescht auch ihre eigene Polsterung. */
[role="dialog"] a:not([class*="rounded-full"]),
[role="dialog"] button:not([class*="rounded-full"]) {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* ---------------------------------------------------------------------------
   8. Fehlerzusammenfassung des Kontaktformulars
   --------------------------------------------------------------------------- */
.ktpo-fehleruebersicht {
  margin: 0 0 24px 0;
  padding: 16px 20px;
  border: 2px solid #b3261e;
  border-radius: 12px;
  background: #fff5f4;
}
.ktpo-fehleruebersicht h2 { margin: 0 0 8px 0; font-size: 17px; font-weight: 700; color: #8c1d18; }
.ktpo-fehleruebersicht ul { margin: 0; padding-left: 20px; list-style: disc outside; }
.ktpo-fehleruebersicht li { margin: 4px 0; }
.ktpo-fehleruebersicht a { color: #8c1d18; }
.ktpo-fehleruebersicht:focus { outline: 3px solid #b3261e; outline-offset: 3px; }

/* Anker frei halten, damit das Formular nicht unter der Kopfzeile landet. */
#kontaktformular, #fehleruebersicht { scroll-margin-top: 0; }

/* Beim Sprung aus der Fehleruebersicht in ein Feld muss auch die Beschriftung
   DARUEBER sichtbar bleiben - sonst steht man vor einem Feld ohne Bezeichnung.
   scroll-margin-bottom haelt zusaetzlich die feste Leiste am unteren Rand frei:
   ohne sie lag die Unterkante des Nachrichtenfelds mobil dahinter. */
#kontaktformular input,
#kontaktformular select,
#kontaktformular textarea {
  /* Kopfzeile ist ueber scroll-padding schon frei - hier geht es NUR noch
     um die Beschriftung ueber dem Feld. Ein hoeherer Wert addiert sich. */
  scroll-margin-top: 56px;
  scroll-margin-bottom: 96px;
}

/* Eingabefelder mindestens 16px: Safari auf dem iPhone zoomt sonst bei jedem
   Antippen automatisch in die Seite hinein und der Halter muss danach von Hand
   wieder herauszoomen. Betrifft nur schmale Geraete. */
@media (max-width: 767px) {
  #kontaktformular input,
  #kontaktformular select,
  #kontaktformular textarea { font-size: 16px; }
}

/* main ist das Ziel des Sprunglinks und traegt dafuer tabindex="-1".
   Der Fokusring waere hier eine seitenbreite Umrandung - nicht hilfreich,
   und der Sprung ist durch den Seitenwechsel ohnehin erkennbar. */
main#inhalt {
  /* Kopfzeile ist ueber scroll-padding schon beruecksichtigt. */
  scroll-margin-top: 0;
}
main#inhalt:focus { outline: none; }
main#inhalt:focus-visible { outline: none; }

/* Fehlerhafte Felder auch am Rand erkennbar machen - bisher unterschied sich
   der Rand nicht vom Normalzustand, der einzige Hinweis war der rote Text. */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: #b3261e !important;
  box-shadow: 0 0 0 1px #b3261e;
}
/* Das Einwilligungs-Haekchen hat keinen eigenen Rahmen - dort wirkt nur eine
   Umrandung. Ohne sie war es das einzige Pflichtfeld ohne sichtbare Markierung. */
input[type="checkbox"][aria-invalid="true"] {
  outline: 2px solid #b3261e;
  outline-offset: 2px;
}
input[aria-invalid="true"]:focus-visible,
select[aria-invalid="true"]:focus-visible,
textarea[aria-invalid="true"]:focus-visible {
  outline-color: #b3261e;
}

/* ---------------------------------------------------------------------------
   5. Weniger Bewegung, wenn das Betriebssystem es verlangt
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Oeffnungszeiten, kompakte Fassung (Kontakt + Notfall) ------------------
   Auf breiten Geraeten eine Kopfzeile ueber den Spalten, auf schmalen
   stattdessen die Beschriftung direkt vor der Uhrzeit. Beides gleichzeitig
   waere doppelt. */
.ktpo-zeit-kopf {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kto-muted);
  padding-bottom: 2px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--kto-rule);
}
/* "geschlossen" gilt fuer den ganzen Tag - es laeuft ueber beide Wertspalten
   und wird nicht in die Vormittagsspalte gequetscht. */
.ktpo-zeit-ganz { grid-column: 2 / -1; }

@media (max-width: 639px) {
  /* Schmal ist die halbe Spalte 139 px breit - "Vormittag 08:00-12:00"
     braucht 163 px und wurde abgeschnitten. Deshalb hier EINE Spalte pro
     Zeile: Tag oben, darunter je eine volle Zeile Beschriftung/Uhrzeit. */
  .ktpo-zeit-kopf { display: none; }
  .ktpo-zeit-label { display: inline; margin-right: 0; }
  .ktpo-zeit-zeile { grid-template-columns: 1fr; row-gap: 1px; }
  .ktpo-zeit-zeile > dt { grid-column: 1; font-weight: 600; margin-top: 8px; }
  .ktpo-zeit-vm,
  .ktpo-zeit-nm {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
    text-align: left;
  }
  .ktpo-zeit-wert { white-space: nowrap; }
  /* Leere Zelle nimmt keinen Platz mehr weg. */
  .ktpo-zeit-vm:empty,
  .ktpo-zeit-nm:empty { display: none; }
  .ktpo-zeit-ganz { grid-column: 1; }
}
@media (min-width: 640px) {
  /* Breit: die Kopfzeile erklaert die Spalten, Labels waeren Wiederholung. */
  .ktpo-zeit-label { display: none; }
}

/* ===========================================================================
   Menue und Schriftgroessen auf dem Handy   (Rueckmeldung 08.09.2026)
   ---------------------------------------------------------------------------
   Drei gemessene Befunde:
   1. "Leistungen" war die EINZIGE Rubrik, die ein Link war - 11 px, orange,
      88x27 px Tippflaeche. Die anderen Rubriken sind keine Links. Deshalb
      wirkte das Menue "mal klickbar, mal nicht".
   2. Die eigentlichen Eintraege trugen dieselbe Farbe wie Fliesstext, ohne
      Unterstreichung und ohne Trenner - nicht als Link erkennbar.
   3. Die kleinen Schriftstufen (10-15 px) machen den Gesamteindruck klein.
   =========================================================================== */

/* Menue-Eintraege als Tippliste: volle Breite, klare Trennlinie, Winkel als
   Hinweis "hier geht es weiter", Tippflaeche mindestens 44 px. */
.ktpo-menue-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 6px 22px 6px 0;
  border-bottom: 1px solid var(--kto-rule);
  line-height: 1.35;
}
.ktpo-menue-link::after {
  content: "›";
  position: absolute;
  right: 2px;
  font-size: 20px;
  line-height: 1;
  color: var(--kto-orange-deep);
}
.ktpo-menue-link:hover,
.ktpo-menue-link:focus-visible { color: var(--kto-orange-deep); }
.ktpo-menue-link:active { background: var(--kto-orange-soft); }
/* Der letzte Eintrag einer Rubrik braucht keine Trennlinie nach unten. */
#hauptmenue li:last-child .ktpo-menue-link { border-bottom: 0; }

@media (max-width: 767px) {
  /* Die kleinen Stufen eine Groesse hoeher. Fliesstext (16-18 px) bleibt
     unveraendert - klein wirkten Beschriftungen, Karten und Menue. */
  #hauptmenue .ktpo-menue-link { font-size: 17px; }
  .text-\[15px\] { font-size: 16px; }
  .text-\[14px\] { font-size: 15px; }
  .text-\[13px\] { font-size: 14px; }
  .text-\[12px\] { font-size: 13px; }
  .text-\[11px\] { font-size: 12px; }
  .text-\[10px\] { font-size: 11px; }
  #hauptmenue .text-sm { font-size: 15px; }
}

/* Nur EIN Abstands-Mechanismus: scroll-padding am Dokument. Ein zusaetzliches
   scroll-margin am Ziel wuerde sich dazu ADDIEREN - genau daran landeten die
   Spruenge doppelt so tief (162px bei 69px Kopfhoehe). */
:target, #inhalt {
  scroll-margin-top: 0;
}

/* Die Abschnitte tragen innen 80px Abstand (py-20). Wer auf sie springt, sieht
   sonst zuerst 80px Leerraum und die Ueberschrift erst weit unten. Ein Teil
   dieses Abstands wird beim Springen verrechnet - der Abschnitt beginnt dann
   knapp unter der Kopfzeile statt darunter zu "haengen". */
#philosophie, #ausstattung, #anfahrt, #termin {
  scroll-margin-top: -64px;
}

/* Die eigene Oeffnungszeiten-Seite stellt Tag / Vormittag / Nachmittag in zwei
   Spalten dar. Mit der groesseren Schrift passt "Vormittag: 08:00-12:00" dort
   nicht mehr hinein (419px Inhalt bei 333px Platz). Auf schmalen Geraeten
   deshalb eine Spalte pro Zeile, Beschriftung links, Uhrzeit rechts. */
@media (max-width: 639px) {
  li.grid.grid-cols-\[1fr_1fr\] { grid-template-columns: 1fr; }
  /* col-span-2 wuerde in einem EINspaltigen Raster eine zweite Spalte
     erzeugen und die Zeile ueber den Bildschirmrand schieben. */
  li.grid.grid-cols-\[1fr_1fr\] > .col-span-2 { grid-column: 1 / -1; }
  .ktpo-zeit-paar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
  }
  .ktpo-zeit-paar .ktpo-zeit-wert { white-space: nowrap; }
}

/* ===========================================================================
   BEWEGUNG   (08.09.2026)
   ---------------------------------------------------------------------------
   Tonalitaet: Tierhalter kommen oft mit einem kranken Tier auf diese Seite.
   Bewegung soll entlasten, nicht unterhalten - ruhig, abbremsend, kurz.
   Kein Federn, kein Parallax, kein Zoom. Wege hoechstens 8px.

   Alles haengt an drei Variablen, damit die Seite EINE Bewegungssprache
   spricht. prefers-reduced-motion (weiter oben) schaltet alles ab.
   =========================================================================== */
:root {
  --kto-zeit-kurz:   180ms;   /* Farbe, Rahmen, Deckkraft */
  --kto-zeit-mittel: 260ms;   /* Menue, Aufklappen */
  --kto-kurve: cubic-bezier(0.22, 0.61, 0.36, 1);  /* bremst weich ab */
}

/* --- 1. Zustaende ---------------------------------------------------------
   Im Markup stehen 149 Hover-Zustaende, aber nur 77 davon tragen eine
   transition-Klasse - der Rest schaltete hart um. Diese Regel holt sie nach.

   NUR fuer Geraete mit echtem Zeiger: auf dem iPhone bleibt ein Hover-Zustand
   nach dem Antippen sonst kleben, bis man woanders hintippt. */
@media (hover: hover) and (pointer: fine) {
  a, button, summary,
  [class*="hover:"] {
    transition:
      color var(--kto-zeit-kurz) var(--kto-kurve),
      background-color var(--kto-zeit-kurz) var(--kto-kurve),
      border-color var(--kto-zeit-kurz) var(--kto-kurve),
      opacity var(--kto-zeit-kurz) var(--kto-kurve),
      box-shadow var(--kto-zeit-kurz) var(--kto-kurve);
  }
}

/* Der Fokusring soll SOFORT da sein - wer mit der Tastatur navigiert, darf
   nicht auf eine Einblendung warten. Deshalb ausdruecklich ohne Uebergang. */
:focus-visible { transition: none !important; }

/* Antippen gibt eine kurze Rueckmeldung, auch ohne Hover. */
@media (hover: none) {
  a:active, button:active, summary:active { opacity: .72; }
}

/* --- 2. Sanftes Scrollen --------------------------------------------------
   Betrifft die Sprungziele im Menue und die Anker auf /praxis. */
html { scroll-behavior: smooth; }

/* --- 3. Menue -------------------------------------------------------------
   Hintergrund blendet auf, das Panel faehrt von rechts ein. Die Zustaende
   haengen an [data-offen], das JavaScript setzt - "hidden" bleibt fuer das
   echte Ausblenden zustaendig, damit das geschlossene Menue keinen Fokus und
   keine Klicks abfaengt. */
[data-ktpo-menue] > [data-ktpo-menue-backdrop] {
  opacity: 0;
  transition: opacity var(--kto-zeit-mittel) var(--kto-kurve);
}
[data-ktpo-menue] > #hauptmenue {
  transform: translateX(100%);
  transition: transform var(--kto-zeit-mittel) var(--kto-kurve);
  will-change: transform;
}
[data-ktpo-menue][data-offen] > [data-ktpo-menue-backdrop] { opacity: 1; }
[data-ktpo-menue][data-offen] > #hauptmenue { transform: translateX(0); }

/* Die Eintraege kommen ganz leicht nachgestaffelt - so wirkt die Liste
   geordnet statt schlagartig. Sichtbar sind sie IMMER: nur der Weg ist
   animiert, nie die Deckkraft auf null. */
[data-ktpo-menue] #hauptmenue nav > div { transform: translateX(10px); }
[data-ktpo-menue][data-offen] #hauptmenue nav > div {
  transform: translateX(0);
  transition: transform var(--kto-zeit-mittel) var(--kto-kurve);
}
[data-ktpo-menue][data-offen] #hauptmenue nav > div:nth-child(2) { transition-delay: 30ms; }
[data-ktpo-menue][data-offen] #hauptmenue nav > div:nth-child(3) { transition-delay: 60ms; }
[data-ktpo-menue][data-offen] #hauptmenue nav > div:nth-child(4) { transition-delay: 90ms; }
[data-ktpo-menue][data-offen] #hauptmenue nav > div:nth-child(5) { transition-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  [data-ktpo-menue] > #hauptmenue,
  [data-ktpo-menue] #hauptmenue nav > div { transform: none; }
  [data-ktpo-menue] > [data-ktpo-menue-backdrop] { opacity: 1; }
}

/* --- 4. FAQ ---------------------------------------------------------------
   Die Huelle traegt die Hoehe, das Skript steuert sie. Ohne JavaScript hat
   sie keine Hoehenangabe und verhaelt sich wie zuvor. */
.ktpo-faq-inhalt {
  overflow: hidden;
  transition: height var(--kto-zeit-mittel) var(--kto-kurve);
}
/* Das Pluszeichen dreht sich bereits ueber die Bundle-Klasse group-open.
   Hier nur die gemeinsame Kurve, damit es zum Rest passt. */
.ktpo-faq summary span {
  transition: transform var(--kto-zeit-mittel) var(--kto-kurve),
              color var(--kto-zeit-kurz) var(--kto-kurve),
              border-color var(--kto-zeit-kurz) var(--kto-kurve);
}
/* Der Kopf soll als anklickbar erkennbar sein - auch ohne Zeiger. */
.ktpo-faq summary { -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  .ktpo-faq-inhalt { height: auto !important; transition: none; }
}

/* --- 5. Abschnitte beim Erscheinen ---------------------------------------
   Streng additiv: Ohne JavaScript ist ALLES sichtbar. Erst wenn das Skript
   die Klasse setzt, wird ueberhaupt etwas versteckt - und auch dann nur fuer
   den Moment vor dem Erscheinen. Ein Effekt, der Inhalt dauerhaft verbergen
   kann, hat auf einer Praxisseite nichts verloren. */
.ktpo-auftritt-an .ktpo-auftritt {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 320ms var(--kto-kurve), transform 320ms var(--kto-kurve);
}
.ktpo-auftritt-an .ktpo-auftritt.ktpo-da {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .ktpo-auftritt-an .ktpo-auftritt { opacity: 1 !important; transform: none !important; }
}

/* --- Praxishinweis ---------------------------------------------------------
   Band unter der Kopfzeile fuer Schliesszeiten und kurzfristige Meldungen.
   Bewusst kein Rot: das ist eine Information, keine Warnung. */
.ktpo-hinweis {
  background: var(--kto-orange-soft);
  border-bottom: 1px solid var(--kto-rule);
}
.ktpo-hinweis-innen {
  margin: 0 auto;
  max-width: 1280px;
  padding: 10px 20px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--kto-ink);
}
.ktpo-hinweis-marke {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--kto-orange-deep);
  transform: translateY(-1px);
}
@media (min-width: 640px) { .ktpo-hinweis-innen { padding-left: 32px; padding-right: 32px; } }

/* --- Sprachumschalter -----------------------------------------------------
   Bewusst zurueckhaltend: ein Kuerzel, kein Flaggensymbol. Flaggen stehen fuer
   Laender, nicht fuer Sprachen - und die Praxis behandelt Tiere aus aller Welt,
   nicht nur britische. */
.ktpo-sprache {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--kto-rule-strong);
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--kto-ink);
  text-decoration: none;
}
.ktpo-sprache:hover,
.ktpo-sprache:focus-visible {
  border-color: var(--kto-orange);
  color: var(--kto-orange-deep);
}
/* Im Menue darf er breiter sein und traegt die Beschriftung im Klartext. */
.ktpo-sprache-menue {
  width: 100%;
  justify-content: flex-start;
  gap: 10px;
}
.ktpo-sprache-menue .sr-only {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--kto-muted);
}