/* Verweise im Fliesstext — nur fuer die selbst gesetzten [data-321med]-Links.
 *
 * WARUM DAS NOETIG IST. Die Links zur Online-Rezeption stehen in Textkaesten
 * mit farbigem Grund (Praxis-Rosa, Beige) und weisser Schrift. Ohne eigene
 * Regel greift Bootstraps Standard "a { color: #007bff }" — der Link erschien
 * KNALLBLAU auf Rosa. Gemessen: rgb(0, 123, 255) auf rgb(233, 150, 150) ergibt
 * 2,1:1 und ist auf dem Rosa kaum zu lesen.
 *
 * DIE LOESUNG IST NICHT EINE ANDERE FARBE, SONDERN GAR KEINE. "currentColor"
 * uebernimmt die Farbe des umgebenden Textes — der Link hat damit IMMER
 * denselben Kontrast wie der Text um ihn herum, auf jedem Grund, auch auf
 * kuenftigen. Erkennbar bleibt er durch die Unterstreichung; die ist ohnehin
 * das verlaesslichere Signal, weil sie nicht von Farbsehen abhaengt
 * (WCAG 1.4.1: Farbe darf nie das einzige Mittel sein).
 *
 * Bewusst eng gefasst auf [data-321med]: Diese Datei soll nicht unbemerkt das
 * Aussehen der ganzen Seite aendern. Weitere Links spaeter hier ergaenzen.
 *
 * ZWEIMAL AUSGENOMMEN:
 *
 *   .pk-dienste   die fuenf Dienste-Links auf kontakt.html. Sie sind bereits
 *                 als Knoepfe gestaltet — Rahmen, Innenabstand, #537c83 — und
 *                 brauchen weder currentColor noch Unterstreichung.
 *
 *   .btn          alles, was als KNOPF gestaltet ist — auch der neue
 *                 "ONLINE-REZEPTION" im Terminblock. Ein Knopf braucht keine
 *                 Unterstreichung, seine Flaeche ist das Signal. Auch diese
 *                 Ausnahme fehlte zuerst.
 *
 *   .kopf         die Menuelinks. Sie haben ihren eigenen Stil in
 *                 kopfbereich.css. Diese Ausnahme FEHLTE zuerst: Nachdem das
 *                 Untermenue "Online-Rezeption" dazukam, waren dessen fuenf
 *                 Eintraege ploetzlich unterstrichen — vom Nutzer am
 *                 2026-09-10 gemeldet. Der Fehler war leicht zu uebersehen,
 *                 weil ich den Kopf in der PRUEFUNG ausgenommen hatte, aber
 *                 nicht in der REGEL. Eine Pruefung, die den Fehlerfall gar
 *                 nicht ansieht, findet ihn auch nicht.
 */

/* ══════════════════════════════════════════════════════════════════════
   Hero-Modul: EIN Block fuer Startseite, Impressum, Datenschutz, Cookies
   ══════════════════════════════════════════════════════════════════════

   Bis zum 2026-09-10 trug die Startseite den Mobirise-Blocktyp "header19",
   die drei Rechtsseiten "header5" — verschiedene Bloecke mit verschiedenen
   Regeln. Der Inhalt war derselbe, das Bild nicht: auf der Startseite eine
   Abstufung (Praxisname klein, Namen gross, Zusatz klein), auf den
   Rechtsseiten alles gleich gross.

   ⚠ Beim Suchen danach habe ich dreimal das Falsche gemessen und dreimal
   "identisch" gemeldet: erst die Breite des <h1>, dann dessen font-size,
   dann die von .title/.name — alle vier Seiten lieferten 41,6 px. Gemessen
   wurde jedes Mal das Ueberschrift-Element der ARZT-KACHEL, nicht der Hero.
   Der Nutzer sah den Unterschied im Bild sofort. Vgl. die Regel in
   CLAUDE.md und docs/betrieb/im-bild-messen.md.

   Jetzt tragen alle vier Seiten dieselbe Section (header19,
   cid-uDmQKdz0OQ). Diese Regeln standen als <style> im <head> von
   index.html und liegen hier, damit es sie genau einmal gibt.
   Sie stehen bewusst GANZ OBEN: im <head> kamen sie vor verweise.css, also
   duerfen spaetere Regeln dieser Datei sie weiterhin ueberstimmen. */

    .cid-uDmQKdz0OQ {
      display: flex;
      padding-top: 9rem;
      padding-bottom: 0;
      /* ⚠ "../images/", nicht "assets/images/". Diese Regeln standen als
         <style> im <head> von index.html — dort ist ein Pfad relativ zur
         HTML-Datei. In einer CSS-Datei ist er relativ zur CSS-DATEI, also
         zu assets/css/. Unveraendert uebernommen ergab er
         "assets/css/assets/images/…", und das Gemaelde fehlte: der Hero
         stand grau. Der Nutzer sah es sofort, meine Pruefung nicht — sie
         verglich Hoehe, Schriftgroessen und Farben, aber kein
         background-image. */
      background-image: url("../images/isabel-praxis-web-1920x1080-optimized.webp");
      background-size: cover;
      background-position: center;
      color: white;
      will-change: transform;
      transform: translateZ(0);
      backface-visibility: hidden;
      perspective: 1000px;
      -webkit-font-smoothing: antialiased;
    }
    .cid-uDmQKdz0OQ .mbr-overlay {
      background-color: #1f6463;
      opacity: 0.8;
      will-change: opacity;
    }
    .cid-uDmQKdz0OQ .flo-headline-praxis {
      font-weight: 400;
      font-size: 1.2rem;
      line-height: 20px;
      text-shadow: 0 1px 2px rgba(0,0,0,0.2);
      transform: translateZ(0);
    }
    .cid-uDmQKdz0OQ h2.flo-headline-praxis,
    .cid-uDmQKdz0OQ h3.flo-headline-praxis {
      font-weight: 500;
      font-size: 1.3rem;
      line-height: 20px;
      transform: translateZ(0);
      will-change: transform;
      text-rendering: optimizeLegibility;
    }
    .cid-uDmQKdz0OQ h1.flo-headline-praxis {
      font-size: 2.6rem;
      font-weight: 600;
      line-height: 50px;
      transform: translateZ(0);
      will-change: transform;
      text-rendering: optimizeLegibility;
    }
    .cid-uDmQKdz0OQ .flo-headline,
    .cid-uDmQKdz0OQ .flo-headline-light {
      text-shadow: 0 1px 2px rgba(0,0,0,0.2);
      transform: translateZ(0);
      will-change: transform;
    }
    .cid-uDmQKdz0OQ .flo-headline-light {
      font-weight: normal;
      text-rendering: optimizeLegibility;
    }
    .cid-uDmQKdz0OQ .content-wrap {
      padding: 5rem 1rem;
    }
    @media (min-width: 992px) {
      .cid-uDmQKdz0OQ .content-wrap {
        padding: 5rem 3rem;
      }
    }
    @media (min-width: 768px) {
      .cid-uDmQKdz0OQ {
        align-items: center;
      }
      .cid-uDmQKdz0OQ .row {
        justify-content: center;
      }
    }
    @media (max-width: 991px) and (min-width: 768px) {
      .cid-uDmQKdz0OQ .content-wrap {
        min-width: 50%;
      }
    }
    @media (max-width: 767px) {
      .cid-uDmQKdz0OQ {
        -webkit-align-items: center;
        align-items: center;
      }
      .cid-uDmQKdz0OQ .mbr-row {
        -webkit-justify-content: center;
        justify-content: center;
      }
      .cid-uDmQKdz0OQ .content-wrap {
        width: 100%;
      }
    }
    .cid-uDmQKdz0OQ .mbr-section-title {
      text-align: center;
      color: #ffffff;
    }
    .cid-uDmQKdz0OQ .mbr-text,
    .cid-uDmQKdz0OQ .mbr-section-btn {
      text-align: center;
      color: #ffffff;
    }
    .cid-uDmQKdz0OQ .mbr-description {
      text-align: center;
      color: #ffffff;
    }
    .cid-uDmQKdz0OQ H1 {
      text-align: center;
    }
    .cid-uDmQKdz0OQ H2 {
      text-align: center;
    }
    .cid-uDmQKdz0OQ H3 {
      text-align: center;
    }
  


a[data-321med]:not(.pk-dienste a):not(.kopf a):not(.btn) {
  color: currentColor;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

a[data-321med]:not(.pk-dienste a):not(.kopf a):not(.btn):focus-visible {
  color: currentColor;
  text-decoration-thickness: 2px;
}

@media (hover: hover) {
  a[data-321med]:not(.pk-dienste a):not(.kopf a):not(.btn):hover {
  color: currentColor;
  text-decoration-thickness: 2px;
  }
}

/* Sichtbarer Fokusring — dieselbe Bedienfarbe wie im Kopfbereich (#537c83,
   4,59:1 auf Weiss). Auf farbigem Grund tritt zusaetzlich ein weisser Rand
   dahinter, damit der Ring auch dort zu sehen ist. */
a[data-321med]:not(.pk-dienste a):not(.kopf a):not(.btn):focus-visible {
  outline: 3px solid #537c83;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.9);
  border-radius: 2px;
}

/* ---------------------------------------------------------------------------
   Symbol im Knopf "ONLINE-REZEPTION"
--------------------------------------------------------------------------- */

/* WARUM INLINE-SVG UND KEIN ICON-FONT. Der erste Versuch nutzte
   <span class="mobi-mbri-edit">. Gemessen: content war "none", das Symbol
   erschien nicht — die Klasse ist in KEINEM Stylesheet des Projekts definiert
   (0 Treffer). Die Nachbarknoepfe nutzen "mdi-*" aus Material-Design-Icons,
   das aber kaum passende Symbole fuer ein Formular kennt (gesucht: create,
   assignment, edit, note, list, receipt — zwei Treffer, keiner passend).

   Das Inline-SVG kommt aus demselben Font wie die uebrigen eigenen Symbole,
   erzeugt mit tools/icons/aus-font-holen.py, und haengt an keiner
   Klassendefinition. 25 px, wie die Symbole der Nachbarknoepfe (gemessen). */
.flo-btn-symbol {
  display: inline-block;
  vertical-align: -0.35em;

  /* SYMBOL NACH RECHTS. Der Knopf ist ein Flex-Container; der Bestand schiebt
     sein Symbol mit "order: 1" hinter den Text (mbr-additional.css:604,
     ".btn .mbr-iconfont-btn"). Im Markup steht das Symbol VOR dem Text —
     ohne diese Zeile erscheint es deshalb links, anders als bei den
     Nachbarknoepfen. */
  order: 1;
  margin-left: 0.5rem;
}

/* ---------------------------------------------------------------------------
   Das Knopfpaar im Terminvereinbarungs-Block
--------------------------------------------------------------------------- */

/* WARUM DAS NOETIG WURDE. Vorher standen dort "ONLINE-TERMIN" und
   "089 1297332" nebeneinander. Seit die Telefonnummer durch
   "ONLINE-REZEPTION" ersetzt ist, sind die beiden Knoepfe zusammen 299 px
   breit — bei 300 px Containerbreite. Ein Pixel Rest, kein Platz fuer den
   Zwischenraum: der zweite Knopf brach in die naechste Zeile.

   Gemessen, nicht geschaetzt: 136 + 163 = 299 in 300 px.

   Flex mit umbruchfaehigem gap statt block: Auf breiten Spalten stehen sie
   nebeneinander, auf schmalen untereinander — ohne dass es aussieht wie ein
   Versehen. Dazu etwas weniger Innenabstand, damit sie in dieser Spalte
   tatsaechlich nebeneinander passen. */
.flo-knopfpaar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}

.flo-knopfpaar .flo-btn {
  padding-left: 0.55rem;
  padding-right: 0.55rem;
  margin: 0;
  flex: 1 1 auto;
  justify-content: center;
  white-space: nowrap;
}

/* Das Symbol im Knopfpaar kleiner als die 25 px der urspruenglichen
   Knopf-Symbole: Bei 300 px Spaltenbreite entscheidet jedes Pixel darueber,
   ob die beiden nebeneinander passen. Gemessen mit 25 px: 321 px Bedarf. */
.flo-knopfpaar .flo-btn-symbol,
.flo-knopfpaar .mbr-iconfont-btn {
  width: 17px;
  height: 17px;
  font-size: 17px;
  margin-left: 0.35rem;
  padding-left: 0 !important;   /* der Bestand setzt hier 0.8rem — zu breit fuer diese Spalte */
}

/* ---------------------------------------------------------------------------
   Knopfstapel im Hinweisband "Wie koennen wir Ihnen helfen?"
--------------------------------------------------------------------------- */

/* Dort stand bisher nur "ONLINE-TERMIN". Die Online-Rezeption deckt die
   uebrigen Anliegen ab (Rezept, AU, Befund, Ueberweisung) und gehoert
   daneben — der Nutzer wollte beide untereinander und etwas kleiner, damit
   das Band nicht in die Hoehe waechst.
 *
   "align-items: stretch" mit "width: fit-content" am Container: beide Knoepfe
   werden so breit wie der laengere, nicht so breit wie das Band. Ohne das
   zoege sich "ONLINE-TERMIN" ueber die ganze Spalte. */
.flo-knopfstapel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  width: fit-content;
}

.flo-knopfstapel .btn {
  margin: 0;
  font-size: 0.72rem;
  padding: 0.55rem 1.1rem;
  justify-content: center;
  white-space: nowrap;
}

.flo-knopfstapel .flo-btn-symbol,
.flo-knopfstapel .mbr-iconfont-btn {
  width: 15px;
  height: 15px;
  font-size: 15px;
  margin-left: 0.4rem;
  padding-left: 0 !important;
}

/* ---------------------------------------------------------------------------
   Platz fuer den 321-MED-Knopf am Seitenende
--------------------------------------------------------------------------- */

/* DAS PROBLEM. Der Knopf "Online-Rezeption" klebt fix am Fenster, nicht am
   Seitenende. Wer bis nach unten scrollt, hat ihn ueber der Fusszeile — und
   dort verdeckte er den Link "Cookies".

   AM ECHTEN WIDGET GEMESSEN (mit geladenem CDN, 2026-09-10, bei 1440, 768 und
   390 px jeweils identisch):

       #button_321med    220 x 50 px, 20 px vom unteren und rechten Rand
       #info_321med      220 x 286 px, 80 px vom unteren Rand (aufgeklappt)
       Fusszeile         padding-bottom: 15 px

   Der Knopf belegt also die untersten 70 px (20 Abstand + 50 Hoehe) und die
   rechten 240 px. Die 15 px Innenabstand der Fusszeile reichten dafuer nicht
   annaehernd.

   WARUM NICHT DAS WIDGET VERSCHIEBEN. 321 MED bietet dafuer
   "server_321med_button_custom_margin_bottom" (docs/betrieb/321med.md). Drei
   Gruende sprechen dagegen:
     1. Es loest das Problem nur an EINER Stelle — hoeher gesetzt verdeckt der
        Knopf dann Inhalt weiter oben, und das faellt spaeter auf.
     2. Die Einstellung liegt im 321-MED-Konto, nicht im Repo: nicht
        versioniert, nicht nachvollziehbar, beim naechsten Mal nicht auffindbar.
     3. Der Knopf SOLL sichtbar bleiben. Er ist der Zugang zur Rezeption.

   Platz zu schaffen wirkt dagegen ueberall gleich und steht hier im Repo.
   90 px = 20 Abstand + 50 Knopfhoehe + 20 Luft. */
/* ⚠ ZWEI FUSSBEREICHE. Der erste Versuch traf nur [role="contentinfo"] — das
   ist der Bereich mit Adresse und Seitenlinks. Die RECHTLICHEN Links
   (Impressum, Datenschutz, Cookies) stehen darunter in einem zweiten
   Abschnitt: <section class="extFooter">. Genau dort lag die Ueberdeckung,
   und meine Messung meldete trotzdem "nichts verdeckt" — sie sah den
   richtigen Abschnitt gar nicht an.

   Beide bekommen deshalb Platz, und der LETZTE bekommt mehr: er steht ganz
   unten, dort ist der Knopf immer. */
/* DIE LINKS WEICHEN, NICHT DER KNOPF.
 *
   Der 321-MED-Knopf sitzt fix unten rechts (gemessen: 220 x 50 px, je 20 px
   vom Rand) und ueberdeckt, was dort gerade liegt — bei jeder Scrollposition.
   Zwei Wege wurden verworfen:
 *
     Viel Innenabstand (90 bis 150 px unten, 260 px rechts) loeste es, liess
     aber grosse Leerflaechen zurueck — "fast zu viel platz".
 *
     Den Knopf per JavaScript hochzuschieben loeste es ebenfalls, sah aber
     kaputt aus: Er wanderte beim Scrollen sichtbar, und ein zweites Element
     des Widgets (#button_321med_animation) blieb als leerer Umriss zurueck.
 *
   Jetzt stehen die Fusszeilen-Links LINKSBUENDIG. Damit geraten sie gar nicht
   erst in die Ecke, in der der Knopf sitzt — ohne Bewegung, ohne grosse
   Leerflaeche. Dazu ein maessiger Abstand nach unten fuer die letzte Zeile. */
/* ⚠ HIER STAND: [role="contentinfo"] { padding-bottom: 24px !important; }
   Die Regel ist am 2026-09-10 ERSATZLOS ENTFALLEN, und zwar nachgezaehlt:
   "role=contentinfo" traegt seit dem Ausrollen des neuen Fussbereichs
   ausschliesslich <footer class="flo-fuss"> — auf genau den fuenf Seiten, die
   den Block haben. Die Regel haette also nur noch sich selbst ausgenommen.

   Eine tote Regel mit langem Kommentar ist schlimmer als keine: Der Naechste
   haelt sie fuer wirksam. Der Abstand nach unten steht jetzt dort, wo er
   hingehoert — an .flo-fuss selbst, ganz unten in dieser Datei.

   Kommt spaeter ein Fussbereich OHNE .flo-fuss dazu, braucht er einen eigenen
   Abstand nach unten; die Begruendung dafuer steht im Absatz darueber. */

/* 96 px WAREN ES BIS ZUM 2026-09-10 — Platz, den der 321-MED-Knopf brauchte,
   solange er auf dem grauen Bereich landete. Seit die rosa Abschlussleiste auf
   allen acht Seiten liegt (weiter unten), faengt SIE ihn ab, und die 96 px
   waren nur noch Leerflaeche unter den Links. Der Nutzer: "Entferne auch den
   unnoetigen Platz im grauen Futter unter dem Text ... ueber dem rosa Futter." */
.extFooter {
  padding-bottom: 24px !important;
  padding-right: 1rem !important;
}

/* Die Linksbuendigkeit muss die Bootstrap-Verteilung ueberstimmen. */
.extFooter .row,
.extFooter [class*="justify-content"] {
  justify-content: flex-start !important;
}

.extFooter .footer-links,
.extFooter .container > div {
  text-align: left !important;
}

/* ---------------------------------------------------------------------------
   Der Rezeptionsblock "NEU FUER SIE: UNSERE ONLINE-REZEPTION"
--------------------------------------------------------------------------- */

/* Symbol links, Text rechts daneben — wie im Bestand. Neu ist nur, dass der
   BLOCK ALS GANZES in seinem rosa Feld mittig sitzt statt linksbuendig.
 *
   Ein Zwischenstand stapelte Symbol und Text senkrecht und zentrierte beides.
   Der Nutzer hat das am 2026-09-10 zurueckgenommen: "text und icons koennen
   wie zuvor linksbuendig sein. es soll halt als linksbuendiger block in summe
   im rosa block zentriert sein."
 *
   Das ist der Unterschied zwischen "Inhalt zentrieren" und "Block zentrieren"
   — und der zweite ist hier der richtige: Fliesstext liest sich linksbuendig
   besser, weil jede Zeile an derselben Kante beginnt. */
.flo-rezeptionsblock {
  /* "fit-content" macht den Block nur so breit wie noetig; die beiden
     "margin: auto" setzen ihn dann mittig. Ohne fit-content fuellte er die
     ganze Spalte und "auto" haette nichts zu verteilen. */
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.flo-rezeptionsblock .wrap-text { align-items: flex-start; }

/* WARUM DIE LEERE NACHBARSPALTE WEG MUSS. Die Zeile enthaelt "col-md-8" und
   daneben eine LEERE "col-md-4" — zusammen zwoelf Spalten. Damit hat das
   "justify-content-md-center" der Zeile nichts mehr zu verteilen, und der
   Block sass links statt mittig. Gemessen auf sprechzeiten bei 1440 px:
   Blockmitte 530, Feldmitte 720.
   Die Spalte traegt keinen Inhalt; sie auszublenden nimmt der Seite nichts. */
.flo-leer { display: none; }

/* Ueberschrift und Absatz bleiben linksbuendig. !important, weil ein
   Zwischenstand hier "center !important" gesetzt hatte — und weil die
   Mobirise-Klassen ohnehin mit derselben Waffe arbeiten. */
.flo-rezeptionsblock h1,
.flo-rezeptionsblock h2,
.flo-rezeptionsblock h3,
.flo-rezeptionsblock h4,
.flo-rezeptionsblock p {
  text-align: left !important;
}

/* Auf schmalen Breiten wird es eng: Symbol und Text nebeneinander lassen dem
   Text zu wenig Platz. Dort untereinander, weiterhin linksbuendig. */
@media (max-width: 575.98px) {
  .flo-rezeptionsblock { flex-direction: column; }
  .flo-rezeptionsblock .wrap-text { margin-left: 0 !important; margin-top: 1rem; }
}

/* ---------------------------------------------------------------------------
   Leistungsseite: Kopfzeile ueber die Breite, Foto so hoch wie die Kacheln
--------------------------------------------------------------------------- */

/* VORHER standen "Leistungen" und "Unser Leistungsspektrum als Ihre
   Hausaerztinnen" INNERHALB der rechten Spalte, ueber den Kacheln. Auf halber
   Breite brach die Ueberschrift dort ueber zwei Zeilen um, und das Foto links
   endete deutlich frueher als der Kachelblock — darunter blieb eine grosse
   leere Flaeche.
 *
   Jetzt steht die Kopfzeile ueber der ganzen Breite (dadurch einzeilig), und
   Foto und Kacheln stehen darunter nebeneinander auf gleicher Hoehe.
   Die Ueberschriften wurden dafuer im Markup aus der Spalte herausgeloest —
   mit CSS allein geht das nicht, sie sind Kinder der Spalte. */
.flo-leistungen-kopf { text-align: left; }

.flo-leistungen-kopf h1,
.flo-leistungen-kopf h3 { text-align: left !important; }

/* Einzeilig erst ab der Breite, wo die Zeile auch wirklich passt. Darunter
   darf sie umbrechen — erzwungene Einzeiligkeit auf dem Telefon ergaebe
   entweder winzige Schrift oder waagerechtes Scrollen. */
@media (min-width: 992px) {
  .flo-leistungen-kopf h1 { white-space: nowrap; }
}

/* ---------------------------------------------------------------------------
   Leistungsseite: Foto links, Kacheln rechts, gleich hoch
---------------------------------------------------------------------------- */

/* DIE AUFGABE. Links das Doppelportraet, rechts sechs Kacheln. Beide sollen
   oben und unten buendig abschliessen — und das Foto soll ein Foto bleiben,
   also nicht so beschnitten werden, dass von den beiden Aerztinnen nur noch
   Bildstreifen uebrig sind.

   Das sind zwei Ziele, die sich ab einer gewissen Schmalheit widersprechen.
   Deshalb drei Bereiche, jede Grenze gemessen:

     ab 992 px    nebeneinander, gleich hoch, Kacheln zu dritt
     768-991 px   gestapelt (iPad hochkant), Kacheln zu dritt
     unter 768    gestapelt, Kacheln untereinander

   WARUM DIE GRENZE BEI 992 LIEGT. Bei gleicher Hoehe fuellt "object-fit:
   cover" die Spalte und schneidet dafuer links und rechts ab. Wieviel, haengt
   davon ab, wie hoch die Kachelspalte wird — und die haengt daran, wieviele
   Kacheln je Zeile stehen. Gemessener sichtbarer Anteil der Bildbreite:

     ab 1200 px   drei Kacheln je Zeile    91 %   beide Portraets ganz
     992-1199     drei Kacheln je Zeile    72 %   beide Portraets ganz
     768-991      ZWEI Kacheln je Zeile    32 %   nur die Innenkanten

   Bei 72 % steht noch beides im Bild — am Schirmbild angesehen, nicht nur
   gerechnet. Bei 32 % nicht mehr: Die Spalte ist dort 700 px hoch bei 330 px
   Breite. Der Nutzer dazu am 2026-09-10: "bei einer zwischenbreite dann halt
   nicht gleich hoch machen. hauptsache man sieht sie beide." Deshalb steht
   unter 992 px gar nichts mehr nebeneinander — siehe den iPad-Block. */

/* LUFT UNTER BEIDEM. Die Section endete buendig unter der letzten Kachelzeile
   (gemessen: Innenabstand unten 0 px, Abstand zwischen Reihenunterkante und
   Sectionunterkante 0 px) — die beige Flaeche brach direkt hinter dem Bild ab.
   Der Abstand gehoert an die REIHE, nicht an die Section: So liegt er innerhalb
   der beigen Flaeche und nicht hinter ihr. */
.flo-leistungen-reihe { padding-bottom: 2rem; }

@media (min-width: 768px) {
  .flo-leistungen-reihe { padding-bottom: 3rem; }
}

/* DER VORLAUF OBEN gilt nur, wo beide NEBENEINANDER stehen — ab 992 px. Die
   Kacheln stecken in einer inneren Reihe mit "pt-4"; ohne diesen Ausgleich
   begaenne das Foto 24 px weiter oben als die erste Kachel. Der Wert ist nicht
   geschaetzt: "pt-4" ist in Bootstrap 4 genau 1.5rem. */
@media (min-width: 992px) {
  .flo-leistungen-reihe > [class*="col-"]:first-child { padding-top: 1.5rem; }
}

/* 768 BIS 991 PX — DAS IST DAS IPAD IM HOCHFORMAT, und dort war es falsch.
   Bootstrap stellt die beiden Spalten ab 768 px nebeneinander (col-md-6), die
   Kacheln stehen dort aber erst zu zweit statt zu dritt (col-md-6 gegen
   col-lg-4). Gemessen bei 768 px: Kachelspalte 700 px hoch, Foto daneben
   225 px — darunter klaffte eine halbe Bildschirmhoehe leere beige Flaeche.
   Auf dem Schirmbild des Nutzers vom 2026-09-10 gut zu sehen.

   Gleich hoch machen hilft hier NICHT: Die Fotospalte ist dann 330 px breit
   und 700 px hoch, "cover" zeigt davon 32 % der Bildbreite — statt zweier
   Portraets zwei Innenkanten.

   Also nebeneinander aufgeben und stapeln: Foto oben, Kacheln darunter zu
   dritt. Kein Zuschnitt, keine Leerflaeche, und die Kachelreihe bekommt
   dieselbe Dreier-Ordnung wie auf dem Schreibtisch. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .flo-leistungen-reihe > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* ":not(:only-child)", weil auf der Startseite nur EINE Kachel in der Reihe
     steht. Ohne die Einschraenkung bekam sie dort ein Drittel der Breite —
     gemessen 200 px neben einem 660 px breiten Foto. */
  .flo-leistungen-reihe .row-item:not(:only-child) {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;

    /* Ohne das stehen die drei Kacheln einer Zeile verschieden hoch und
       versetzt: Die Titel brechen unterschiedlich um, und die weisse Flaeche
       endet dort, wo der Text endet. Ab 992 px gleicht der Bestand das aus,
       hier greift seine Regel nicht mehr. */
    display: flex;
  }

  .flo-leistungen-reihe .row-item:not(:only-child) > .wrapper { width: 100%; }

  /* BUENDIG HEISST: DIESELBE KANTE, NICHT NUR DIESELBE MITTE.
     Ein Deckel am Bild allein macht es schmaler als der Kachelblock — der
     Nutzer dazu: "Kacheln iPad vertikal schmaler oder Bild breiter. Es muss
     immer buendig sein." Also den Deckel an die REIHE haengen: Dann teilen
     sich Bild und Kacheln dieselbe Spaltenbreite und enden zwangslaeufig auf
     derselben Kante — ohne dass eine Zahl die andere nachfuehren muss.

     Warum 720 px und nicht die volle Breite: Die Bilddatei ist 600 px breit.
     Bei 720 px Reihenbreite wird sie auf 690 px hochgerechnet (Faktor 1,15,
     unauffaellig); ohne Deckel waeren es bei 991 px Fensterbreite 930 px
     (Faktor 1,55) und sichtbar weich. */
  .flo-leistungen-reihe {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  .flo-leistungen-reihe > [class*="col-"]:first-child img {
    width: 100%;
    height: auto;
    margin: 0;
  }
}

@media (min-width: 992px) {
  .flo-leistungen-reihe { align-items: stretch; }

  /* ⚠ GLEICH HOHE SPALTEN SIND NICHT GLEICH HOHE KACHELN.
     Das war der erste Anlauf, und er sah falsch aus. Gemessen bei 1200 bis
     1968 px: beide Spalten 461 px, das Foto fuellte sie von 0 bis 461 — die
     weissen Kacheln reichten aber nur von 24 bis 428. Der Unterschied ist Luft
     INNERHALB der rechten Spalte: 24 px "pt-4" oben, 32 px Aussenabstand unter
     der letzten Kachelzeile. Das Foto fuellte sie, die Kacheln nicht. Der
     Nutzer sah genau das: "bild ist zu hoch".

     Also nicht die Spalten aneinander binden, sondern das Foto an die
     sichtbaren Kacheln. Zwei Eingriffe: derselbe Vorlauf oben (siehe 768 px),
     und die Luft unten faellt weg. */
  .flo-leistungen-reihe > [class*="col-"]:last-child > .row {
    /* Der Zeilenabstand wandert vom Aussenabstand der Kacheln in die Reihe.
       "row-gap" wirkt NUR ZWISCHEN den Zeilen, nicht hinter der letzten —
       genau darin liegt der Unterschied. 2rem ist der bisherige Wert, der
       Abstand zwischen den beiden Kachelzeilen bleibt also gleich. */
    row-gap: 2rem;
  }

  .flo-leistungen-reihe .row-item { margin-bottom: 0 !important; }

  /* Das "mb-4" an der Foto-Spalte stammt aus dem Bestand und war fuer den
     Umbruch auf schmalen Breiten gedacht. Nebeneinander sind es 24 px zuviel. */
  .flo-leistungen-reihe > [class*="col-"]:first-child {
    display: flex;
    margin-bottom: 0 !important;
  }

  /* ⚠ AUF DER STARTSEITE STEHT IN DER RECHTEN SPALTE EINE EINZIGE KACHEL,
     und die war deutlich kuerzer als das Foto: Beide SPALTEN massen 392 px,
     die rosa Flaeche darin nur 257 px. Der Nutzer vergleicht die sichtbaren
     Flaechen, nicht die Spalten — dieselbe Verwechslung wie auf
     leistungen.html, nur andersherum.

     Die Kette vom Spaltenrand bis zur Kachel muss die Hoehe durchreichen:
     Spalte → role="region" → innere Reihe → Kachel. ".flo-wrapper" gibt es
     nur auf der Startseite, die Regeln stoeren leistungen.html also nicht. */
  .flo-leistungen-reihe > [class*="col-"]:last-child,
  .flo-leistungen-reihe > [class*="col-"]:last-child > [role="region"] {
    display: flex;
    flex-direction: column;
  }

  /* ⚠ "display: flex" allein reicht nicht. In einer Spalten-Flexbox ist die
     Hoehe die HAUPTachse — dort streckt nichts von selbst, dafuer braucht es
     "flex-grow". Gemessen ohne diese Zeile: Spalte 392 px, der Bereich darin
     blieb bei 261 px, und die Kachel erbte die falsche Hoehe. */
  .flo-leistungen-reihe > [class*="col-"]:last-child > [role="region"] {
    flex: 1;
  }

  .flo-leistungen-reihe > [class*="col-"]:last-child > [role="region"] > .row {
    flex: 1;
  }

  /* "!important", weil die Regel weiter unten fuer schmale Breiten
     "height: auto !important" setzt — sie muss dort den Bestandswert
     "height: 167px" schlagen. Gleiche Waffe, spaeterer Platz gewinnt nicht:
     Bei zwei !important entscheidet die Spezifitaet, und die ist hier hoeher
     (.flo-leistungen-reihe .flo-wrapper gegen .cid-… .flo-wrapper ist gleich —
     deshalb zaehlt die Reihenfolge, und dieser Block steht davor). Sicher ist
     nur der explizite Wert. */
  .flo-leistungen-reihe .flo-wrapper { height: 100% !important; }

  /* Der Bestand zieht die Kachelreihe mit "margin-top: -20px !important" nach
     oben — das war fuer die Ueberschrift gedacht, die frueher direkt darueber
     stand. Sie steht jetzt ueber der ganzen Reihe; der Zug versetzt die Kachel
     nur noch um 20 px gegen das Foto. Gemessen: Δ oben 20 px. */
  .flo-leistungen-reihe .flo-row { margin-top: 0 !important; }

  /* "height: 100%" mit "object-fit: cover" fuellt die Spalte — der Ausschnitt
     wird beschnitten, das Bild nicht verzerrt. "center top" haelt beide
     Gesichter im Bild; sie stehen im oberen Drittel. */
  .flo-leistungen-reihe > [class*="col-"]:first-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
}

/* ---------------------------------------------------------------------------
   Leistungskacheln: Schrift und Flaeche schlagen gemeinsam um
--------------------------------------------------------------------------- */

/* GEMESSEN AM BESTAND:
       .wrapper::before   transition: all 0.5s     (die rosa Flaeche)
       .mbr-card-title    transition: all 0s       (die Schrift — springt)
       .card-img span     transition: color 0.3s   (das Symbol)
 *
   Drei verschiedene Zeiten fuer einen Vorgang. Waehrend die Flaeche eine halbe
   Sekunde lang von Weiss nach Rosa laeuft, ist die Schrift laengst
   umgesprungen — es entsteht ein sichtbares Zwischenbild, in dem der Kontrast
   nicht stimmt. Genau das hat der Nutzer am 2026-09-10 als "on hover in der
   kachel sollte die schrift immer weiss sein nicht grau" gemeldet und mit
   einem Screenshot belegt: graue Schrift auf rosa Grund.
 *
   Jetzt laufen alle drei mit 0,5 s und derselben Kurve. Der Endzustand war
   schon vorher richtig (weisse Schrift, weisses Symbol, rosa Flaeche) — es
   ging allein um den Weg dorthin. */
/* ⚠ DER TITEL ENTHAELT EINEN LINK. Die Bestandsregel faerbt
   ".mbr-card-title" weiss — das ist das <h4>. Darin steckt aber ein
   <a class="flo-titel"> mit eigener Farbe, und Links erben "color" nicht.
   Sichtbar blieb deshalb die graue Schrift auf rosa Grund.

   Das war zugleich ein Fehler in meiner PRUEFUNG: Sie las die Farbe am <h4>
   und meldete Weiss — richtig gemessen, falsches Element. Der Nutzer sah den
   Link. Seither prueft sie den innersten Textknoten. */
@media (hover: hover) {
  .cid-sxj00Vp772 .row-item:hover .wrapper .mbr-card-title,
  .cid-sxj00Vp772 .row-item:hover .wrapper .mbr-card-title a,
  .cid-sxj00Vp772 .row-item:hover .wrapper .card-img span,
  .cid-sxj00Vp772 .row-item:hover .wrapper .card-img svg {
  color: #fff !important;
  }
}

.cid-sxj00Vp772 .row-item .wrapper .mbr-card-title,
.cid-sxj00Vp772 .row-item .wrapper .mbr-card-title a,
.cid-sxj00Vp772 .row-item .wrapper .card-img span,
.cid-sxj00Vp772 .row-item .wrapper .card-img svg {
  transition: color 0.5s ease !important;
}


/* ---------------------------------------------------------------------------
   Der Fussbereich auf dem Telefon
--------------------------------------------------------------------------- */

/* Gemessen bei 390 px: die graue Flaeche war 283 px hoch, davon 96 px leerer
   Innenabstand unten — Platz, den der 321-MED-Knopf brauchte, solange er noch
   dort sass. Unter dem grauen Bereich liegt aber eine rosa Flaeche, und die
   faengt den Knopf ohnehin ab ("rose unten finde ich gut als loesung").

   Also: kompakter Innenabstand und alles mittig. Linksbuendig ist die Loesung
   fuer breite Ansichten, wo der Knopf rechts neben den Links sitzt; auf dem
   Telefon steht er darunter, und dort wirkt Zentrierung ruhiger. */
@media (max-width: 767.98px) {
  .extFooter {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .extFooter .row,
  .extFooter [class*="justify-content"] { justify-content: center !important; }

  .extFooter,
  .extFooter .footer-links,
  .extFooter .container > div,
  .extFooter p { text-align: center !important; }

  /* Die Linkzeile mittig statt gestreckt, und die Zeilen enger. */
  .extFooter .footer-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
  }

  .extFooter .footer-links > * { margin: 0 !important; }
}


/* ---------------------------------------------------------------------------
   Rosa Abschlussleiste ganz unten
---------------------------------------------------------------------------- */

/* Sieben der acht Seiten haben sie als Mobirise-Block "extFooter9", jede mit
   eigener cid und identischen Regeln (z. B. .cid-sl2Z0felND, css:11374).
   index.html hatte sie als einzige nicht.

   SIE IST NICHT NUR ZIERDE. Der 321-MED-Knopf klebt 20 px ueber der Unterkante
   des Fensters. Auf den sieben Seiten faengt ihn diese Flaeche ab; auf
   index.html lag er auf den Fusszeilen-Links (Impressum, Datenschutz,
   Cookie-Erklaerung).

   Eigene Klasse statt einer geliehenen cid: Eine cid gehoert zu dem Block, aus
   dem Mobirise sie erzeugt hat. index.html eine fremde umzuhaengen sieht beim
   naechsten Blick wie ein Versehen aus. Die Hoehe kommt ohnehin aus den
   .extFooter-Regeln weiter oben, nicht aus der cid. */
.flo-fussleiste-rosa {
  padding-top: 0;
  padding-bottom: 0;
  background-color: #ff8a8f;
}

/* MINDESTHOEHE — DIE ZAHL IST GERECHNET, NICHT GEWAEHLT.
   Der 321-MED-Knopf ist 50 px hoch und haengt 20 px ueber der Fensterkante,
   belegt am Seitenende also die unteren 70 px. Ist die rosa Flaeche flacher,
   ragt er in den grauen Bereich und liegt auf den Fusszeilen-Links — gemessen
   bei 375 und 390 px, bevor diese Regel entstand: je ein verdeckter Link.
   78 px lassen 8 px Luft.

   OHNE BREITEN-BEDINGUNG, und das ist seit dem 2026-09-10 wichtig: Bis dahin
   trug .extFooter unten 96 px Innenabstand, davon lebte auch diese Leiste
   (gemessen 104 px). Der Innenabstand ist jetzt auf 24 px zurueck — die Leiste
   haette sonst nur noch 32 px, und der Knopf laege wieder auf den Links. Die
   Mindesthoehe traegt sie also selbst, unabhaengig vom Innenabstand. */
.flo-fussleiste-rosa { min-height: 78px; }

/* ---------------------------------------------------------------------------
   Die erste Section muss den festen Kopf freihalten
---------------------------------------------------------------------------- */

/* ⚠ AUF sprechzeiten.html TAT SIE ES NICHT. Gemessen am 2026-09-10: Der Kopf
   ist unter 1240 px 177 px hoch, die Section bringt 9rem = 144 px mit — das
   erste Symbol begann bei y=167 und lag damit 10 px HINTER dem Kopf. Auf dem
   iPad im Querformat gut zu sehen; der Nutzer: "Optimiere hier noch den
   Abstand oben zum Header Menue."

   WARUM NICHT EINFACH EINE GROESSERE ZAHL. Der Bestand kodiert die Kopfhoehe
   schon an elf Stellen mit fuenf verschiedenen Zahlen — eine zwoelfte waere
   dieselbe Falle. "max()" behaelt den Bestandswert als Untergrenze und legt
   die tatsaechliche, gemessene Kopfhoehe darueber. Aendert sich der Kopf,
   folgt der Abstand von selbst.

   Der Rueckfallwert 177px greift ohne JavaScript — das ist die Hoehe unter
   1240 px, wo der Kopf am hoechsten ist. */
.cid-tNuIhREGbM {
  padding-top: max(9rem, calc(var(--kopf-hoehe-ruhe, 177px) + 3rem)) !important;
}

/* ---------------------------------------------------------------------------
   Die drei Sprechstunden-Knoepfe: beige, erst beim Ueberfahren rosa
---------------------------------------------------------------------------- */

/* WARUM UMGEKEHRT. "Sprechstunde", "Telefonsprechstunde" und
   "Videosprechstunde" fuehren INNERHALB der Seite weiter; "Online-Termin
   vereinbaren" ist der eine Handlungsaufruf. Beide sahen gleich aus — dasselbe
   Rosa, dieselbe weisse Schrift. Der Nutzer: "die Buttons umkehren, also der
   normale State ist beige und dann Hover rosa."

   Die Umkehrung trennt die beiden Rollen, ohne eine neue Farbe einzufuehren:
   Der Handlungsaufruf ist rosa und bleibt es, die Wegweiser sind beige und
   werden rosa, wenn man sie anfasst.

   ⚠ WARUM NICHT DAS HELLE BEIGE #c5bcac AUS docs/farbraum.md.
   Der Nutzer wollte weisse Schrift. Auf #c5bcac hat Weiss 1,88:1 — schlechter
   als das ohnehin zu schwache Weiss auf Rosa (2,26:1) und schlicht nicht
   lesbar. Durchgerechnet, wie dunkel derselbe Farbton (38°, 13 % Saettigung)
   werden muss, damit Weiss die 4,5:1 erreicht:

     #c5bcac  1,88:1     #9e978a  2,90:1     #857f74  3,97:1
     #b3a894  2,35:1     #948d81  3,29:1     #807a6f  4,26:1
     #a79b85  2,74:1     #8c867a  3,62:1     #7a756b  4,58:1  ✓

   Deshalb #7a756b: derselbe warme Ton, nur so weit abgedunkelt, wie noetig.

     Ruhe    #ffffff auf #7a756b   4,58:1   ✓
     Hover   #ffffff auf #ff8a8f   2,26:1   — wie jeder andere rosa Knopf

   Der Hover-Zustand uebernimmt damit die bekannte Schwaeche des Bestands. Das
   ist bewusst: Er ist fluechtig, gelesen wird der Ruhezustand — und der ist
   jetzt zum ersten Mal normgerecht. Weiss auf Rosa steht ohnehin an 167
   Stellen in mbr-additional.css; das ist eine eigene Aufgabe, keine hier.

   "!important", weil die Bestandsregel .cid-tNuIhREGbM .flo-button in
   mbr-additional.css ebenfalls "!important" traegt. Gleiche Spezifitaet, und
   diese Datei wird auf allen acht Seiten spaeter geladen. */
.cid-tNuIhREGbM .flo-button {
  background-color: #7a756b !important;
  border-color: #7a756b !important;
  color: #ffffff !important;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.cid-tNuIhREGbM .flo-button:focus-visible {
  background-color: #ff8a8f !important;
  border-color: #ff8a8f !important;
  color: #ffffff !important;
}

@media (hover: hover) {
  .cid-tNuIhREGbM .flo-button:hover {
  background-color: #ff8a8f !important;
  border-color: #ff8a8f !important;
  color: #ffffff !important;
  }
}

/* ---------------------------------------------------------------------------
   Einblenden beim Hereinscrollen
---------------------------------------------------------------------------- */

/* Der Ausgangszustand haengt an "--bereit", und diese Klasse setzt erst
   assets/js/einblenden.js. Ohne JavaScript bleibt alles sichtbar — eine
   Animation darf nie zum Inhaltsverlust werden.

   Die Medienabfrage steht hier ZUSAETZLICH zur Pruefung im Skript: Wer die
   Systemeinstellung erst nach dem Laden aendert, bekommt sofort den ruhigen
   Zustand, ohne die Seite neu zu laden. */
@media (prefers-reduced-motion: no-preference) {
  .flo-einblenden--bereit {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  /* SEITLICHE VARIANTEN — abwechselnd von links und rechts, damit beim
     Scrollen etwas passiert, ohne dass es zappelt. 28 px reichen: Der Weg
     soll spuerbar sein, nicht auffaellig.

     ⚠ WAAGERECHTE BEWEGUNG ERZEUGT UEBERLAUF. Ein Element, das 28 px nach
     rechts steht, ragt auf 390 px Breite ueber den Rand hinaus und die Seite
     bekommt eine waagerechte Bildlaufleiste — genau das, was CLAUDE.md auf
     jeder Breite verbietet. Deshalb klemmt die Reihe darum ab
     ("overflow-x: clip" weiter unten). "clip" und nicht "hidden": hidden
     macht aus dem Element einen Scroll-Container und bricht damit
     "position: sticky" bei Nachbarn. */
  .flo-einblenden--links.flo-einblenden--bereit {
    transform: translateX(-28px);
  }

  .flo-einblenden--rechts.flo-einblenden--bereit {
    transform: translateX(28px);
  }

  .flo-einblenden--bereit.flo-einblenden--da {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   "Unser gesamtes Leistungsspektrum ansehen" — die Kachel darf wachsen
---------------------------------------------------------------------------- */

/* ⚠ EINE FESTE HOEHE IST EINE WETTE AUF DIE ZEILENZAHL. Der Bestand setzt
   ".cid-slr3SqVhK3 .flo-wrapper { height: 167px }". Der Titel passt auf breiten
   Schirmen in eine Zeile; sobald er in zwei bricht — auf dem Telefon, auf dem
   iPad, in einem schmalen Fenster — steht die zweite Zeile UNTERHALB der rosa
   Flaeche und wird vom Rand abgeschnitten. Auf dem Schirmbild des Nutzers gut
   zu sehen.

   "min-height" statt "height" haelt die Kachel dort, wo sie hingehoert, und
   laesst sie wachsen, wo der Text mehr Platz braucht. Der Text bleibt damit
   vollstaendig — auch wenn ihn jemand spaeter aendert.

   Der zusaetzliche Innenabstand unten gibt der zweiten Zeile Luft zum Rand;
   ohne ihn klebte sie an der Kante. */
.cid-slr3SqVhK3 .flo-wrapper {
  min-height: 167px;
  padding-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Unter 992 px steht die Kachel unter dem Foto und traegt keine fremde Hoehe
   mehr — dort muss der Bestandswert "height: 167px" weichen, damit zwei
   Textzeilen passen. Ab 992 px gilt stattdessen die 100-%-Regel weiter oben. */
@media (max-width: 991.98px) {
  .cid-slr3SqVhK3 .flo-wrapper { height: auto !important; }
}

/* Auf dem Telefon steht die Kachel allein untereinander, und dort ist die
   Mindesthoehe nur noch Leerraum: gemessen 261 px bei rund 100 px Inhalt
   (Symbol plus zwei Textzeilen). Die 167 px waren fuer die Reihe neben dem
   Foto gedacht, wo sie eine gemeinsame Hoehe sichern.

   Ohne Mindesthoehe und mit knapperem Innenabstand bleibt die Kachel so hoch,
   wie ihr Inhalt es verlangt. */
@media (max-width: 767.98px) {
  .cid-slr3SqVhK3 .flo-wrapper {
    min-height: 0;
  }

  /* Aufgeschluesselt, woraus die 261 px bestanden:
       40 px Innenabstand oben
       91 px Symbolkasten (Symbol plus "pb-3")
       25 px Ueberschrift
       75 px AUSSENABSTAND unter der Ueberschrift  ← der groesste Posten
       30 px Innenabstand unten
     Bei rund 100 px echtem Inhalt. Die 75 px stammen aus der Vorlage und
     haben nebeneinander eine Aufgabe (gemeinsame Kachelhoehe); allein
     untereinander sind sie Leerraum. */
  .cid-slr3SqVhK3 .flo-wrapper .card-img {
    padding-bottom: 0.5rem !important;
  }

  .cid-slr3SqVhK3 .flo-wrapper .card-img .mbr-iconfont {
    font-size: 44px !important;
  }

  .cid-slr3SqVhK3 .flo-wrapper .mbr-card-title {
    margin-bottom: 0 !important;
  }
}

/* ---------------------------------------------------------------------------
   Knoepfe blenden ueber, statt umzuspringen — wie die Kacheln
---------------------------------------------------------------------------- */

/* Der Nutzer wollte den Kachel-Effekt auch an den Knoepfen, "aber nutze die
   on Hover Farbe, die vorhanden ist". Also keine neue Farbe: Der Bestand geht
   beim Ueberfahren von #ff8a8f auf #94968e, und dabei bleibt es.

   GEAENDERT WIRD NUR DAS WIE. Der Bestand setzt "transition: 0.3s ease-in-out"
   ohne Eigenschaft — das ist "all" und schliesst Groesse und Position mit ein;
   jede Layout-Aenderung waehrend des Ueberfahrens wird dann mitanimiert. Hier
   stehen die drei Eigenschaften, um die es geht, und die 0,5 s der Kacheln
   (gemessen an ".wrapper::before { transition: all 0.5s }"), damit beide
   gleich schnell sind. */
.flo-button,
a.flo-button.btn {
  transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease;
}

/* Die drei Sprechstunden-Knoepfe standen auf 19,2 px und brachen um: Bei 768
   und 992 px ist ihre Spalte nur 218 px breit, "TELEFONSPRECHSTUNDE" braucht
   dort aber 237 px. Gemessen, ab welcher Groesse alle drei auf JEDER Breite
   einzeilig bleiben:

     19,2 px   Umbruch bei 768 und 992 px (zwei von drei Knoepfen)
     17 px     Umbruch bei 768 und 992 px (TELEFONSPRECHSTUNDE)
     16 px     Umbruch bei 768 und 992 px (TELEFONSPRECHSTUNDE)
     15 px     ✓ alle drei einzeilig, breitester 190 px
     14 px     ✓ — mehr Luft als noetig

   Gewaehlt: 15 px. Eine Groesse fuer alle Breiten statt eines Reigens von
   Umbruchpunkten; sie entspricht zugleich dem Fliesstext des Fussbereichs. */
.cid-tNuIhREGbM .flo-button {
  font-size: 0.9375rem !important;

  /* ALLE DREI GLEICH BREIT, aber nur so breit wie noetig — nicht ueber die
     ganze Spalte. Gerechnet auf die laengste Beschriftung: bei 15 px braucht
     "TELEFONSPRECHSTUNDE" 190 px, 13rem = 208 px lassen Luft fuer andere
     Schriftrenderings. Die beiden kuerzeren wachsen auf denselben Wert, der
     laengste bleibt darunter — drei gleiche Breiten ohne einen festen
     Pixelwert je Knopf.

     Vorher gemessen: 130 / 190 / 171 px. */
  min-width: 13rem;
  max-width: 100%;
}

/* Die Tastatur bekommt denselben Zustand wie die Maus — sonst zeigt der Knopf
   beim Durchtabben nicht, dass er dran ist. */
.flo-button:focus-visible {
  background-color: #94968e;
  border-color: #94968e;
}

/* Auf mittleren Breiten verschenkte der Block den halben Platz. Gemessen auf
   sprechzeiten.html:

     Fensterbreite   Feld    Block   ungenutzt
        1194         1194     610      584 px
         932          932     450      482 px
         768          768     450      318 px

   Ursache ist die Spalte: "col-md-8" gibt dem Block zwei Drittel der
   Containerbreite, und der Container ist ohnehin schon schmaler als das
   Fenster. Der Absatz brach dadurch auf zwei Zeilen um, waehrend daneben
   Platz frei blieb.

   Unter 1200 px bekommt die Spalte die volle Breite. "fit-content" bleibt: Der
   Block wird so breit, wie sein Text es braucht — nur eben nicht mehr durch
   eine Spalte gedeckelt, die fuer den Schreibtisch gedacht war. */
@media (max-width: 1199.98px) {
  [class*="col-"]:has(> .flo-rezeptionsblock) {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Gestapelt (unter 992 px) stehen Foto und Kachel untereinander — dann muessen
   sie dieselbe Breite haben. Gemessen ohne diese Regel bei 576 px: Foto
   459 px, Kachel 510 px. Das Bild ist 600 px breit, wird hier also nie
   hochgerechnet. */
@media (max-width: 991.98px) {
  .flo-leistungen-reihe > [class*="col-"]:first-child img {
    width: 100%;
    max-width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Fussbereich  (.flo-fuss)                                       2026-09-10
   ══════════════════════════════════════════════════════════════════════════

   Ersetzt den Mobirise-Block "footer1". Der Markup-Block traegt seine cid
   (.cid-slM70Fjz1H) nicht mehr, also greift KEINE der rund 60 alten Regeln aus
   mbr-additional.css mehr hinein — dieser Abschnitt hier ist vollstaendig
   zustaendig, inklusive Schrift und Zeilenabstand.

   WARUM SCHRIFT UND ZEILENABSTAND HIER STEHEN MUESSEN: index.html laedt
   bootstrap-reboot.min.css als 160. Zeile, die uebrigen sieben Seiten als 22.
   Ein Bauteil, das seine Typografie erbt, sieht auf index.html anders aus als
   ueberall sonst. Dieselbe Falle steckte schon im Kopfbereich
   (assets/css/kopfbereich.css) — siehe docs/betrieb/css-bereinigung.md.

   FARBEN — gemessen, nicht geschaetzt (WCAG-Formel, docs/farbraum.md):

     Flaeche       #f2eae2   "Flaeche warm", schon im Bestand
     Fliesstext    #1d1d1d   14,16:1  ✓
     Beschriftung  #6f6a5f    4,52:1  ✓  Rolle "Text ruhig, warmer Grund" aus
                   docs/farbraum.md. Sie stammt aus dem Gemaelde und ist WARM —
                   ein neutrales Grau wirkt auf dieser Flaeche kuehl. Der Wert
                   liegt knapp ueber 4,5:1: NICHT weiter aufhellen.
     Haarlinien    rgba(29,29,29,.16) unter den Ueberschriften,
                   rgba(29,29,29,.10) zwischen den Zeilen — nur Struktur,
                   kein Kontrastziel

   VORHER war die Flaeche #e1a8ad mit weisser Schrift: gemessene 2,02:1, der
   schlechteste Kontrast der ganzen Website — schlechter als die bekannten
   2,26:1 von Weiss auf #ff8a8f. Zwischenstand am selben Tag war dasselbe Rosa
   mit dunkler Schrift (8,35:1); der Nutzer hat sich fuer Beige entschieden.

   NUR DIESER BLOCK IST BEIGE. Der Logostreifen darunter (weiss) und die
   Rechtszeile (grau) bleiben, wie sie waren; ebenso die rosa Abschlussleiste
   ganz unten. Ein Versuch, alle drei zu einem Block zusammenzuziehen, wurde am
   2026-09-10 gebaut und verworfen: "Logo und restlichen footer so lassen wie
   davor. Nur bei beige optimieren."

   STRUKTUR STATT DEKO. Der Mobirise-Block setzte unter jede Ueberschrift einen
   rosa Balken von 135 x 2 px — feste Breite, kraeftige Farbe, endet mitten in
   der Spalte. Hier steht stattdessen eine Haarlinie ueber die VOLLE
   Spaltenbreite. Sie macht dieselbe Aufgabe (Ueberschrift vom Inhalt trennen)
   und richtet die vier Spalten zugleich sichtbar aneinander aus.

   REIHENFOLGE: Sprechzeiten, Kontakt, Seiten, Termine — in genau dieser Folge
   im Quelltext, im Bild und im Fokus, auf jeder Breite. Kein "order". Auf dem
   Telefon faellt "Termine" weg (beide Eintraege zeigen auf dieselbe
   Doctolib-Seite wie der Knopf im Kopf und der Eintrag im Menue). */

.flo-fuss {
  background-color: #f2eae2;
  color: #1d1d1d;
  font-family: "PT Sans", sans-serif;
  line-height: 1.5;
  padding-top: 2.5rem;
  padding-bottom: 2rem;

  /* Ein Wert fuer alle Haarlinien. Wer die Struktur staerker oder schwaecher
     will, aendert hier eine Zahl statt sechs Regeln. */
  --fuss-linie: rgba(29, 29, 29, 0.16);
  --fuss-linie-fein: rgba(29, 29, 29, 0.1);
}

/* Bricht die Mailadresse fuer Sammelroboter auf. Stand vorher als
   ".cid-slM70Fjz1H .hide" in mbr-additional.css — ohne diese Zeile stuende
   "kontakt@dr-baenischnull.de" auf der Seite. */
.flo-fuss .hide {
  display: none;
}

/* Ein Raster statt Bootstrap-Spalten: gleiche Spaltenbreiten heissen hier auch
   gleiche Kanten, ohne Innenabstand je Spalte, der sie wieder auseinander
   schiebt. Siehe die Designregel zur buendigen Ausrichtung. */
.flo-fuss__raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
}

/* Zwei Spalten, aber SPALTENWEISE gefuellt: links Sprechzeiten + Kontakt,
   rechts Seiten + Termine. Zeilenweise gefuellt stuende die kurze
   Sprechzeiten-Spalte neben der langen Kontaktspalte, und darunter klaffte
   auf dem iPad hochkant rund eine Bildschirmhoehe Leerraum.
   Vorlesereihenfolge bleibt die Quelltextreihenfolge und laeuft damit erst
   die linke, dann die rechte Spalte hinunter — genau so, wie man einen
   Fussbereich liest. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .flo-fuss__raster {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    gap: 2.5rem 3rem;
  }

  /* ⚠ DIE EINE AUSNAHME von "Quelltext = Bild = Fokus", und sie ist gewollt:
     In der rechten Spalte steht hier TERMINE oben und SEITEN darunter, im
     Quelltext ist es umgekehrt. Der Nutzer am 2026-09-10: "Tausche in der
     Ansicht die Position von Termine und Seiten" — und auf Rueckfrage "Aber
     nur in der Ansicht iPad Vertical".

     Warum es NUR hier geht: Auf dem Schreibtisch stehen alle vier Spalten
     nebeneinander, dort bleibt die Quelltextfolge sichtbar. Zwei verschiedene
     Bildfolgen bei einer Quelltextfolge sind nur durch Abweichung an EINER
     Breite zu haben — sie liegt hier.

     Der Preis, ausgesprochen: Wer mit der Tabulatortaste durchgeht, springt in
     dieser Ansicht von "Seiten" (unten rechts) nach "Termine" (oben rechts).
     Vier Links Unterschied, innerhalb einer Spalte. Der Fokusring bleibt dabei
     sichtbar, es geht also nichts verloren — nur die Reihenfolge fuehlt sich
     einen Sprung lang seltsam an.

     Kein "order": Ausdrueckliche Rasterplatzierung sagt, WO etwas steht, und
     ist beim Lesen nachvollziehbar. */
  .flo-fuss__raster > :nth-child(3) {   /* Seiten  */
    grid-column: 2;
    grid-row: 2;
  }

  .flo-fuss__raster > :nth-child(4) {   /* Termine */
    grid-column: 2;
    grid-row: 1;
  }
}

@media (min-width: 992px) {
  .flo-fuss__raster {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}

/* mbr-additional.css:5 faerbt JEDES <section> mit #eee. Die vier Spalten
   sind <section>/<nav>, damit sie als benannte Bereiche vorgelesen werden —
   ohne diese Zeile stehen sie als graue Kaesten auf dem Rosa. */
.flo-fuss__spalte {
  background: none;
}

/* Zwei Spalten sind erst ab dem Tablet dabei:
     "Termine"  — beide Eintraege fuehren zu derselben Doctolib-Seite, auf die
                  schon der Knopf im Kopf und der Eintrag im Menue zeigen.
     "Seiten"   — dieselben vier Links stehen auf dem Telefon im Burgermenue.
   Ohne sie ist der Fussbereich bei 390 px 736 px hoch statt ueber 1000. */
.flo-fuss__spalte--ab-tablet {
  display: none;
}

@media (min-width: 768px) {
  .flo-fuss__spalte--ab-tablet {
    display: block;
  }
}

/* Die Ueberschrift ist hier eine Beschriftung, kein Blickfang: klein, gesperrt,
   gedaempft — und darunter eine Haarlinie ueber die volle Spaltenbreite. Der
   Inhalt darunter traegt das Gewicht, nicht die Beschriftung darueber. */
.flo-fuss__titel {
  margin: 0 0 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--fuss-linie);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6f6a5f;
}

.flo-fuss__vorspann {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
}

/* LINKEFFEKT — eine Bewegung, konsequent ueberall.
   Die Unterstreichung ist IMMER da, nur durchsichtig, und blendet in 0,25 s
   ein. Das ist der Unterschied zu "text-decoration: underline" erst im Hover:
   dort springt die Linie hart an, und bei manchen Schriftschnitten verschiebt
   sie die Grundlinie um ein Pixel.

   Warum nicht der verbreitete Trick mit "background-size: 0% 1px": Der zeichnet
   EINEN Balken unter den ganzen Kasten. Bei den zweizeiligen Eintraegen hier
   (Anschrift, "Online-Termin buchen / ueber Doctolib") laege er nur unter der
   zweiten Zeile. "text-decoration-color" unterstreicht jede Zeile einzeln.

   Die Farbe bleibt: jede hellere Variante faellt auf dieser Flaeche unter
   4,5:1. Was sich faerbt, ist das Symbol — in das Petrol des Logos.
   Gemessen 3,85:1 auf #f2eae2; fuer Grafik verlangt WCAG 1.4.11 drei. */
.flo-fuss a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 0.25s ease;
}

.flo-fuss a:focus-visible {
  text-decoration-color: currentColor;
}

@media (hover: hover) {
  .flo-fuss a:hover {
  text-decoration-color: currentColor;
  }
}

/* Das Symbol ist ein GESCHWISTER des Links, kein Kind — "a:hover" erreicht es
   nicht. ":has()" trifft die Zeile, in der der Link ueberfahren wird, ohne dass
   die Leerflaeche daneben mitzaehlt. */
.flo-fuss__liste > li:has(a:focus-visible) .flo-fuss__symbol {
  color: #537c83;
}

@media (hover: hover) {
  .flo-fuss__liste > li:has(a:hover) .flo-fuss__symbol {
  color: #537c83;
  }
}

.flo-fuss__symbol {
  transition: color 0.25s ease;
}

.flo-fuss a:focus-visible {
  outline: 2px solid #1d1d1d;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Wer Bewegung abbestellt hat, bekommt denselben Zustand ohne Uebergang —
   nicht etwa gar keine Rueckmeldung. */
@media (prefers-reduced-motion: reduce) {
  .flo-fuss a,
  .flo-fuss__symbol {
    transition: none;
  }
}

.flo-fuss__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.flo-fuss__liste > li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

/* 11 px oben und unten + 22,5 px Zeile = 44,5 px. WCAG 2.5.8 verlangt 24 px;
   44 px ist das Ziel aus CLAUDE.md, nicht die Untergrenze. */
.flo-fuss__liste a,
.flo-fuss__liste > li > span {
  display: inline-block;
  padding: 0.6875rem 0;
}

/* Das Symbol ist 18 px breit, der Kasten aber eine Textzeile hoch. Dadurch
   zentriert der Browser die Grafik selbst auf der ERSTEN Zeile — auch bei der
   zweizeiligen Anschrift, und ohne einen von Hand gerechneten Abstand, der
   beim naechsten Schriftgroessenwechsel falsch waere. */
.flo-fuss__symbol {
  flex: none;
  width: 18px;
  height: 1.5em;
  margin-top: 0.6875rem;
}

.flo-fuss__liste--schlicht a {
  display: block;
}

/* Wohin der Weg fuehrt, bevor man ihn geht. Doctolib ist ein fremder Dienst;
   das gehoert an den Link, nicht in eine Fussnote. */
.flo-fuss__zusatz {
  display: block;
  font-size: 0.8125rem;
  color: #6f6a5f;
}

/* Sprechzeiten als Beschreibungsliste: Tag links, Zeit rechts. Vorher lagen
   beide in <span> mit "float: right" — im Bild stand dadurch
   "12:30 - 13:00   Mo - Fr   Telefon:", also von hinten nach vorne. */
.flo-fuss__zeiten {
  margin: 0;
  font-size: 0.9375rem;
}

.flo-fuss__zeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 1rem;
  padding: 0.55rem 0;
  /* Feiner als die Linie unter der Ueberschrift — sonst waeren beide gleich
     laut und die Rangfolge im Block waere weg. */
  border-bottom: 1px solid var(--fuss-linie-fein);
}

.flo-fuss__zeile:last-child {
  border-bottom: 0;
}

.flo-fuss__zeile dt {
  margin: 0;
  font-weight: 400;
  color: #6f6a5f;
}

/* Gleiche Ziffernbreite, damit die Zeiten untereinander fluchten. */
.flo-fuss__zeile dd {
  margin: 0;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.flo-fuss__marke {
  display: inline-block;
  margin-right: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


/* ══════════════════════════════════════════════════════════════════════════
   Drei Karten: Sprechstunde · Terminvereinbarung · Kontakt        2026-09-10
   ENTWURF — noch nicht abgenommen.
   ══════════════════════════════════════════════════════════════════════════

   index.html (.cid-slAAnNus5q), spaeter kontakt.html (.cid-srCZs16pCA).
   Der Block bleibt, wie er ist: Aufteilung, Reihenfolge, Knopftexte, Links.
   Uebernommen wird die ART, wie im Fussbereich Schrift und Struktur gesetzt
   sind:

     * Ueberschrift gesperrt, darunter eine Haarlinie ueber die volle
       Spaltenbreite. Der Bestand hatte hier denselben Fehlgriff wie der alte
       Fussbereich: einen Balken FESTER Breite (175 px), der mitten in der
       Spalte endet.
     * Sprechzeiten als Flex-Reihe statt "float: right", Zeiten mit gleicher
       Ziffernbreite.
     * Zwei Linienstaerken statt einer, damit eine Rangfolge entsteht.
     * Symbole als eingebettetes SVG statt Symbolschrift.
     * Knoepfe als Umriss — alle drei gleich, auch der in der Kontaktspalte.
       Vorher war er weiss gefuellt und stand als einziger anders da.

   FARBEN ALS VARIABLEN. Die drei erwogenen Fassungen unterscheiden sich nur
   in den vier Werten unten. Gemessene Kontraste (WCAG, docs/farbraum.md):

     A  Grund #6c6c6c / Mitte #7a756b, Schrift weiss   5,25:1 · 4,58:1  ✓
     B  Grund #6c6c6c / Mitte #f2eae2, Mitte dunkel    5,25:1 · 14,16:1 ✓
     C  Bestand #8c8c8c / #c5bcac, Schrift weiss       3,36:1 ✗ · 1,88:1 ✗

   C ist der heutige Zustand und faellt in beiden Spalten durch. #c5bcac mit
   Weiss ist mit 1,88:1 der schlechteste Wert der Startseite — noch unter dem
   alten Fussbereich (2,02:1). Fuer das Abdunkeln gilt dasselbe Verfahren wie
   bei den Sprechstunden-Knoepfen: gleicher Farbton, nur so dunkel wie noetig
   (docs/betrieb/layouts.md, "Weisse Schrift braucht eine dunkle Flaeche"). */

/* ── Farben je Seite ───────────────────────────────────────────────────────
   Die beiden Bloecke sind DASSELBE Bauteil, tragen aber verschiedene Flaechen —
   so war es im Bestand, und so bleibt es. Gewaehlt am 2026-09-10; die
   verworfenen Fassungen samt Bildern:
   docs/entscheidungen/0011-karten-gestaltung.md */

/* Startseite: aussen das bisherige Grau, in der Mitte das Beige des
   Fussbereichs mit dunkler Schrift ("Fassung D"). */
.cid-slAAnNus5q {
  --karte-grund: #8c8c8c;
  --karte-tinte: #ffffff;
  --karte-grund-mitte: #f2eae2;
  --karte-tinte-mitte: #1d1d1d;

  --karte-linie: color-mix(in srgb, currentColor 32%, transparent);
  --karte-linie-fein: color-mix(in srgb, currentColor 18%, transparent);
  --karte-rand: color-mix(in srgb, currentColor 45%, transparent);
}

/* Sprechzeiten- und Kontaktseite: Bestandsfarben unveraendert — hellgrau aussen, das Praxis-Rosa
   in der Mitte, Schrift durchgehend weiss.

   ⚠ BEIDE UNTERSCHREITEN 4,5:1. Das ist eine bewusste Entscheidung, keine
   Nachlaessigkeit — die Zahlen lagen auf dem Tisch:

     #bfbfbf mit Weiss   1,84:1     mit #1d1d1d   9,17:1
     #ff8a8f mit Weiss   2,26:1     mit #1d1d1d   7,45:1

   Dunkle Schrift wurde ausdruecklich abgelehnt ("In dem Fall moechte ich keine
   dunkle"), das Rosa ist gesetzt ("Pink moechte ich auf jeden Fall haben").

   DER DRITTE WEG FUEHRT AUS DER MARKE HERAUS, gerechnet: Damit Weiss auf dem
   Rosa 4,5:1 erreicht, muss es auf Helligkeit 50 % und Saettigung 70 % —
   also #d9262e, ein Signalrot. docs/farbraum.md haelt genau das seit jeher
   fest ("ergibt ein Feuerwehr-Rot, weiter von der Marke weg als der
   Ausgangswert"). Die entsaettigten Varianten (#a8555c, 5,10:1) sind kein
   Rosa mehr, sondern Altrosa-Braun.

   WAS EINEN TEIL LOESEN WUERDE, falls die Frage wiederkommt: Das Grau aussen
   traegt keine Markenbedeutung. "--karte-grund: #747474" bringt zwei der drei
   Spalten auf 4,67:1, ohne das Rosa anzutasten. Eine Zeile. */
.cid-srCZs16pCA,
.cid-uBF0aWdYDD {
  --karte-grund: #bfbfbf;
  --karte-tinte: #ffffff;
  --karte-grund-mitte: #ff8a8f;
  --karte-tinte-mitte: #ffffff;

  --karte-linie: color-mix(in srgb, currentColor 32%, transparent);
  --karte-linie-fein: color-mix(in srgb, currentColor 18%, transparent);
  --karte-rand: color-mix(in srgb, currentColor 45%, transparent);
}

/* ── Flaechen ──────────────────────────────────────────────────────────── */

.cid-slAAnNus5q .box-item .wrap,
.cid-srCZs16pCA .box-item .wrap,
.cid-uBF0aWdYDD .box-item .wrap{
  background-color: var(--karte-grund);
  color: var(--karte-tinte);
}

.cid-slAAnNus5q .col-lg-4:nth-child(2) .box-item .wrap,
.cid-srCZs16pCA .col-lg-4:nth-child(2) .box-item .wrap,
.cid-uBF0aWdYDD .col-lg-4:nth-child(2) .box-item .wrap,
.cid-slAAnNus5q .col-md-4:nth-child(2) .box-item .wrap,
.cid-srCZs16pCA .col-md-4:nth-child(2) .box-item .wrap,
.cid-uBF0aWdYDD .col-md-4:nth-child(2) .box-item .wrap{
  background-color: var(--karte-grund-mitte);
  color: var(--karte-tinte-mitte);
}

/* Der Bestand setzt Text und Ueberschrift mit "!important" auf Weiss. Damit
   die Mittelspalte dunkel werden kann, muss das hier ueberstimmt werden —
   "inherit" holt die Farbe von .wrap, wo sie oben je Spalte gesetzt ist.

   ⚠ Die letzte Zeile ist die wichtigste: Der <a> um das grosse Symbol traegt
   KEINE Klasse. Ohne sie faellt er auf die Standard-Linkfarbe zurueck und das
   Symbol erbt sie — im Entwurf standen alle drei Symbole leuchtend blau auf
   dem Grau, zweimal hintereinander. */
.cid-slAAnNus5q .box-item-text,
.cid-slAAnNus5q .box-list li,
.cid-slAAnNus5q .box-list li span,
.cid-slAAnNus5q .flo-weiss,
.cid-slAAnNus5q .box-item-title,
.cid-slAAnNus5q .box-item-title a,
.cid-slAAnNus5q a.flo-icon,
.cid-slAAnNus5q a.flo-icon:link:visited:active,
.cid-slAAnNus5q a.flo-link,
.cid-slAAnNus5q a.flo-link:link:visited:active,
.cid-slAAnNus5q .flo-karte__symbol,
.cid-slAAnNus5q .icon-block-top a,
.cid-srCZs16pCA .box-item-text,
.cid-uBF0aWdYDD .box-item-text,
.cid-srCZs16pCA .box-list li,
.cid-uBF0aWdYDD .box-list li,
.cid-srCZs16pCA .box-list li span,
.cid-uBF0aWdYDD .box-list li span,
.cid-srCZs16pCA .flo-weiss,
.cid-uBF0aWdYDD .flo-weiss,
.cid-srCZs16pCA .box-item-title,
.cid-uBF0aWdYDD .box-item-title,
.cid-srCZs16pCA .box-item-title a,
.cid-uBF0aWdYDD .box-item-title a,
.cid-srCZs16pCA a.flo-icon,
.cid-uBF0aWdYDD a.flo-icon,
.cid-srCZs16pCA a.flo-icon:link:visited:active,
.cid-uBF0aWdYDD a.flo-icon:link:visited:active,
.cid-srCZs16pCA a.flo-link,
.cid-uBF0aWdYDD a.flo-link,
.cid-srCZs16pCA a.flo-link:link:visited:active,
.cid-uBF0aWdYDD a.flo-link:link:visited:active,
.cid-srCZs16pCA .flo-karte__symbol,
.cid-uBF0aWdYDD .flo-karte__symbol,
.cid-srCZs16pCA .icon-block-top a,
.cid-uBF0aWdYDD .icon-block-top a {
  color: inherit !important;
}

/* ── Schrift und Struktur ──────────────────────────────────────────────── */

/* Gesperrt wie die Spaltenueberschriften im Fussbereich, nur groesser: hier
   ist die Ueberschrift samt Symbol der Blickfang der Karte, im Fussbereich
   war sie eine Beschriftung. Gleiche Handschrift, andere Groesse. */
.cid-slAAnNus5q .box-item .heading .box-item-title,
.cid-srCZs16pCA .box-item .heading .box-item-title,
.cid-uBF0aWdYDD .box-item .heading .box-item-title{
  letter-spacing: 0.14em;
  padding-bottom: 0.7rem;
}

/* Bei 768–991 px stehen die drei Karten nebeneinander, und dort bricht als
   einzige "TERMINVEREINBARUNG" zweizeilig um — die Haarlinien lagen deshalb
   auf zwei Hoehen (gemessen y 801 gegen 819). Zwei Zeilen Mindesthoehe bringen
   sie auf eine.

   NUR IN DIESEM FENSTER: Ab 992 px sind alle drei einzeilig, eine
   Mindesthoehe erzeugte dort nur Leerraum. Darunter stehen die Karten
   gestapelt, da gibt es nichts auszurichten. */
/* Haarlinien der drei Karten auf EINE Hoehe — auf JEDER Breite
   -------------------------------------------------------------
   Der Nutzer am 2026-09-10, dreimal: die Linien unter den Ueberschriften
   stehen versetzt, sobald eine umbricht ("TERMIN-VEREINBARUNG" neben
   "KONTAKT"). Zuletzt am iPhone.

   ⚠ ZWEI ANNAHMEN AUS DER ERSTEN FASSUNG WAREN FALSCH, beide gemessen
   widerlegt:

   1. "Unter 768 px stehen die Karten gestapelt, da gibt es nichts
      auszurichten." — Sie stehen ZU ZWEIT nebeneinander, auf jeder Breite
      ab 300 px. Genau dort sah der Nutzer den Fehler (18 px bei 375–430,
      36 px bei 320).

   2. "Ab 992 px sind alle drei einzeilig." — Bei 800–900 px ist der
      mittlere Titel wieder zweizeilig. Die Zeilenzahl schwankt mit der
      Spaltenbreite hin und her, sie waechst nicht monoton:
        300–320 px  1 / 3 / 1      800–900 px   1 / 2 / 1
        340–460 px  1 / 2 / 1      1000+ px     1 / 1 / 1
        480–700 px  1 / 1 / 1
      Jedes Fenster, das man dafuer zieht, ist geraten. Deshalb gilt die
      Regel jetzt IMMER.

   Die Mindesthoehe allein genuegt nicht: Sie streckt den Kasten, aber die
   Linie ist ein ::after und flieszt direkt hinter dem TEXT. Erst
   "flex-direction: column" plus "margin-top: auto" schiebt sie ans untere
   Ende des gestreckten Kastens.

   "lh" ist die BERECHNETE Zeilenhoehe. Die frueher benutzte Schaetzung
   "1.3em" traf sie nur zufaellig (20,8 px gerechnet gegen 18 px echte
   Zeilenhoehe) und waere bei jeder Schriftaenderung auseinandergelaufen. */
.cid-slAAnNus5q .box-item .heading .box-item-title,
.cid-srCZs16pCA .box-item .heading .box-item-title,
.cid-uBF0aWdYDD .box-item .heading .box-item-title {
  /* Gerechnet, nicht geschaetzt — border-box, also zaehlt alles mit:
       2 Zeilen a 1lh + die Haarlinie (1 px) + padding-bottom (1rem = 16 px).
       Die erste Fassung sagte "2lh + 0.7rem" und lag damit 5,8 px zu tief;
       genau diese 5 px blieben als Versatz stehen. */
  min-height: calc(2lh + 1px + 1rem);
  display: flex;
  flex-direction: column;
}
.cid-slAAnNus5q .box-item .heading .box-item-title:after,
.cid-srCZs16pCA .box-item .heading .box-item-title:after,
.cid-uBF0aWdYDD .box-item .heading .box-item-title:after {
  margin-top: auto;
}

/* Unter 340 px wird der laengste Titel dreizeilig — gemessen bei 300 und
   320 px, wo sonst 36 px Versatz bleiben. Nur dort, damit die Karten auf
   allen anderen Breiten nicht unnoetig Luft bekommen. */
@media (max-width: 339.98px) {
  .cid-slAAnNus5q .box-item .heading .box-item-title,
  .cid-srCZs16pCA .box-item .heading .box-item-title,
  .cid-uBF0aWdYDD .box-item .heading .box-item-title {
    min-height: calc(3lh + 1px + 1rem);
  }
}

.cid-slAAnNus5q .box-item .heading .box-item-title:after,
.cid-srCZs16pCA .box-item .heading .box-item-title:after,
.cid-uBF0aWdYDD .box-item .heading .box-item-title:after{
  width: 100%;
  background: var(--karte-linie);
}

/* Statt "float: right" eine Flex-Reihe — dieselbe Bauart wie die Sprechzeiten
   im Fussbereich. Dort hat der Float die Zeilen rueckwaerts lesen lassen; hier
   trug er nichts bei, was Flex nicht besser kann. */
.cid-slAAnNus5q .box-list li,
.cid-srCZs16pCA .box-list li,
.cid-uBF0aWdYDD .box-list li{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--karte-linie-fein);
}

.cid-slAAnNus5q .box-list li span,
.cid-srCZs16pCA .box-list li span,
.cid-uBF0aWdYDD .box-list li span{
  float: none;
  padding-left: 0;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* TELEFON- und VIDEOSPRECHSTUNDE stehen in eigenen Zeilen. Sie bekommen die
   Beschriftungsform des Fussbereichs: klein, gesperrt, ohne Linie darunter,
   dafuer Luft darueber. */
.cid-slAAnNus5q .box-list li:has(> strong:only-child),
.cid-srCZs16pCA .box-list li:has(> strong:only-child),
.cid-uBF0aWdYDD .box-list li:has(> strong:only-child){
  border-bottom: 0;
  padding-top: 1.1rem;
  padding-bottom: 0.35rem;
}

.cid-slAAnNus5q .box-list li > strong:only-child,
.cid-srCZs16pCA .box-list li > strong:only-child,
.cid-uBF0aWdYDD .box-list li > strong:only-child{
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  opacity: 0.85;
}

.cid-slAAnNus5q .flo-karte__symbol,
.cid-srCZs16pCA .flo-karte__symbol,
.cid-uBF0aWdYDD .flo-karte__symbol{
  display: block;
}

.cid-slAAnNus5q .box-item .headingicon .icon-block-top,
.cid-srCZs16pCA .box-item .headingicon .icon-block-top,
.cid-uBF0aWdYDD .box-item .headingicon .icon-block-top{
  line-height: 1;
}

/* ── Knoepfe: alle drei als Umriss ─────────────────────────────────────── */

/* Vorher war der Kontakt-Knopf weiss gefuellt und die beiden in der Mitte
   ebenso; auf einer hellen Mittelspalte verschwaende ein weisser Knopf. Ein
   Umriss aus "currentColor" funktioniert auf JEDEM der drei Untergruende und
   braucht keine eigene Farbe je Spalte. */
.cid-slAAnNus5q a.flo-btn.btn,
.cid-srCZs16pCA a.flo-btn.btn,
.cid-uBF0aWdYDD a.flo-btn.btn,
.cid-slAAnNus5q .flo-btn,
.cid-srCZs16pCA .flo-btn,
.cid-uBF0aWdYDD .flo-btn{
  background-color: transparent !important;
  border: 1px solid var(--karte-rand) !important;
  color: inherit !important;
  box-shadow: none !important;
  padding: 0.6rem 0.9rem !important;
  letter-spacing: 0.04em;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.cid-slAAnNus5q a.flo-btn.btn:focus-visible,
.cid-srCZs16pCA a.flo-btn.btn:focus-visible,
.cid-uBF0aWdYDD a.flo-btn.btn:focus-visible,
.cid-slAAnNus5q .flo-btn:focus-visible,
.cid-srCZs16pCA .flo-btn:focus-visible,
.cid-uBF0aWdYDD .flo-btn:focus-visible {
  background-color: color-mix(in srgb, currentColor 14%, transparent) !important;
  border-color: currentColor !important;
}

@media (hover: hover) {
  .cid-slAAnNus5q a.flo-btn.btn:hover,
  .cid-srCZs16pCA a.flo-btn.btn:hover,
  .cid-uBF0aWdYDD a.flo-btn.btn:hover,
  .cid-slAAnNus5q .flo-btn:hover,
  .cid-srCZs16pCA .flo-btn:hover,
  .cid-uBF0aWdYDD .flo-btn:hover {
  background-color: color-mix(in srgb, currentColor 14%, transparent) !important;
  border-color: currentColor !important;
  }
}

.cid-slAAnNus5q .flo-btn-symbol,
.cid-srCZs16pCA .flo-btn-symbol,
.cid-uBF0aWdYDD .flo-btn-symbol{
  vertical-align: -0.2em;
  margin-left: 0.4rem;
}

/* ── Linkeffekt wie im Fussbereich ─────────────────────────────────────── */

.cid-slAAnNus5q .box-list a,
.cid-srCZs16pCA .box-list a,
.cid-uBF0aWdYDD .box-list a,
.cid-slAAnNus5q .box-item-text a,
.cid-srCZs16pCA .box-item-text a,
.cid-uBF0aWdYDD .box-item-text a{
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 0.25s ease;
}

.cid-slAAnNus5q .box-list a:focus-visible,
.cid-srCZs16pCA .box-list a:focus-visible,
.cid-uBF0aWdYDD .box-list a:focus-visible,
.cid-slAAnNus5q .box-item-text a:focus-visible,
.cid-srCZs16pCA .box-item-text a:focus-visible,
.cid-uBF0aWdYDD .box-item-text a:focus-visible {
  text-decoration-color: currentColor;
}

@media (hover: hover) {
  .cid-slAAnNus5q .box-list a:hover,
  .cid-srCZs16pCA .box-list a:hover,
  .cid-uBF0aWdYDD .box-list a:hover,
  .cid-slAAnNus5q .box-item-text a:hover,
  .cid-srCZs16pCA .box-item-text a:hover,
  .cid-uBF0aWdYDD .box-item-text a:hover {
  text-decoration-color: currentColor;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cid-slAAnNus5q .box-list a,
  .cid-slAAnNus5q .box-item-text a,
  .cid-slAAnNus5q .flo-btn {
    transition: none;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   Hero der Startseite: kein Umbruch auf dem Telefon           2026-09-10
   ══════════════════════════════════════════════════════════════════════════

   "Dr. med. Isabel Baenisch" stand auf 2,6rem = 41,6 px und brach auf dem
   iPhone zweizeilig um — bei zwei Namen untereinander vier Zeilen statt zwei.
   Durchgemessen, ab welcher Groesse beide Namen einzeilig bleiben:

     Fensterbreite   noetig
        320 px       24 px      (iPhone SE der ersten Reihe)
        375 px       28 px      (iPhone SE, iPhone mini)
        390 px       30 px      (iPhone 14/15/16)
        430 px       34 px      (iPhone Pro Max)
        ab ~562 px   41,6 px    (der Bestandswert passt wieder)

   WARUM clamp() UND KEIN UMBRUCHPUNKT. Die noetige Groesse waechst stetig mit
   der Fensterbreite; ein Sprung bei 768 px wuerde bei 430 px zu klein und bei
   500 px zu gross bleiben. "7.4vw" trifft die Reihe oben, der untere Anschlag
   sichert die 28 px bei 375 px ab, der obere gibt ab 562 px exakt den
   Bestandswert zurueck — DER SCHREIBTISCH AENDERT SICH DAMIT NICHT, und zwar
   von selbst, ohne Media Query, die jemand spaeter uebersehen koennte.

   Die Zeilenhoehe muss mit: 50 px fest waren bei 41,6 px knapp und bei 28 px
   das Doppelte des Noetigen.

   ⚠ DER EIGENTLICHE GRUND STAND IM HTML, nicht im CSS. "Dr. med." steckt in
   einem <span class="title"> mit INLINE-STIL "font-size: 2.6rem". Das clamp()
   am <h1> erreicht ihn nicht: Der Name schrumpfte, "Dr. med." blieb bei
   41,6 px — sichtbar groesser als der Name, und die Zeile blieb zu lang.
   Die font-size ist am 2026-09-10 aus beiden Inline-Stilen entfernt worden
   (der Rest — Schatten, Farbe, Strichstaerke — steht dort weiter). Seither
   folgt der Span dem clamp und die Zeile bricht von 320 bis 1440 px nicht
   mehr um.

   MERKE: Wer eine Groesse am Elternelement setzt und sie nicht wirkt, sucht
   im HTML nach einem style-Attribut, nicht nach einer weiteren CSS-Regel. */
/* EIN MODUL, VIER SEITEN. index, impressum, datenschutz und cookies tragen
   seit dem 2026-09-10 dasselbe Hero-Markup: <h2> Praxisname, zwei <h1> mit den
   Arztnamen, <h2> Standort. Vorher hatten die drei Rechtsseiten eine eigene
   Fassung (<h1> Praxisname, <h2> Namen) samt eigenem Inline-"font-size:
   2.9rem" — eine Regel traf dort das Falsche, und der Nutzer sah es zuerst.

   "Kannst du nicht einfach bei Cookie, Datenschutz und Impressum exakt
   dasselbe benutzen wie auf der Startseite, dann haben wir quasi ein
   einheitliches Modul." */
.cid-uDmQKdz0OQ h1.flo-headline-praxis,
.cid-u8jczZoMsM h1.flo-headline-praxis,
.cid-u8jdoJsPnP h1.flo-headline-praxis,
.cid-u8jdwjRyPx h1.flo-headline-praxis {
  font-size: clamp(24px, calc(6.5vw + 4px), 2.6rem);
  line-height: 1.15;
}

/* Die beiden Zeilen darueber und darunter ("Hausarztpraxis
   Nymphenburgerstraße", "Ihre Hausärztinnen in München") stehen auf 20,8 px
   und bleiben schon heute einzeilig — gemessen bei 375 px. Sie bekommen nur
   etwas Luft zurueck, weil die feste Zeilenhoehe von 20 px unter der
   Schriftgroesse lag. */
.cid-uDmQKdz0OQ .flo-headline-praxis,
.cid-u8jczZoMsM .flo-headline-praxis,
.cid-u8jdoJsPnP .flo-headline-praxis,
.cid-u8jdwjRyPx .flo-headline-praxis {
  line-height: 1.3;
}


/* ══════════════════════════════════════════════════════════════════════════
   Willkommenstext: auf dem Telefon die volle Breite            2026-09-10
   ══════════════════════════════════════════════════════════════════════════

   Gemessen bei 390 px: Der Container hat 360 px, der Textkasten aber nur
   134 px — der Text brach nach drei bis vier Woertern um, "Herzlich" und
   "Willkommen" standen auf zwei Zeilen.

   Zwei Ursachen, beide aus der Vorlage:
     .flex-block       width: 64%        →  230 px von 360
     .flex-block span  margin-right: 3rem →  weitere 48 px fuer das
                                            Anfuehrungszeichen, plus dessen
                                            eigene 48 px Schriftgroesse

   Auf dem Schreibtisch ist beides richtig: Dort ist der Container breit genug,
   und die 64 % halten die Zeilenlaenge lesbar.

   ⚠ DIE GRENZE LAG ZUERST BEI 768 px — und traf damit das iPad im Hochformat
   NICHT, das genau 768 px breit ist. Dort sprang der Block zurueck auf 64 %
   und war nur 330 px breit, waehrend der Container 720 px bot: 278 px lagen
   brach. Der Nutzer am 2026-09-10: "Bitte bei iPad vertikal die Breite fuer
   den Text besser nutzen."

   Gemessen bei 768–991 px: 64 % = 330 px, 85 % = 475 px, 100 % = 578 px.
   Gewaehlt sind 100 % — dieselbe Breite wie unterhalb der Grenze. Ein Sprung
   von 100 % bei 767 px auf 64 % bei 768 px waere ein sichtbarer Bruch ohne
   Grund. Ab 992 px bleiben die 64 % des Bestands. */
@media (max-width: 991.98px) {
  .cid-sl22tTJ7MT .flex-block {
    width: 100%;
  }

  .cid-sl22tTJ7MT .flex-block span {
    margin-right: 1rem;
    font-size: 2.2rem;
  }

  /* Der Block rueckt minimal zusammen, damit seine letzte Zeile nicht unter
     dem schwebenden 321-MED-Knopf verschwindet. Gemessen bei 390 x 844:
     Sektion 197 px, davon 167 px Text bei 14,4 px Schrift und 21,6 px
     Zeilenhoehe, plus 30 px Innenabstand oben.

     13,5 px statt 14,4 und 1,45 statt 1,5 Zeilenhoehe nehmen rund 20 px —
     genug, damit die Grussformel ueber dem Knopf steht, und wenig genug, dass
     es beim Lesen nicht auffaellt. Der Knopf selbst laesst sich nicht
     verschieben, siehe docs/betrieb/layouts.md. */
  .cid-sl22tTJ7MT {
    padding-top: 20px !important;
  }

  .cid-sl22tTJ7MT .welcome-text {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   Sprechstunden-Einstiege auf dem Telefon: eine Zeile statt drei Bildschirme
   ══════════════════════════════════════════════════════════════════════════
                                                                  2026-09-10
   Gemessen bei 390 x 844: Jede der drei Karten war 238 px hoch, der Block
   948 px — mehr als ein ganzer iPhone-Bildschirm fuer drei Links. Ursache
   sind das Symbol mit 80 bis 105 px Schriftgroesse plus 32 px Abstand
   darunter und der darunter zentrierte Knopf.

   Auf dem Schreibtisch ist die Anordnung richtig: Dort stehen die drei Karten
   NEBENEINANDER, und ein grosses Symbol ueber dem Knopf ist genau die Form,
   die man dafuer will. Gestapelt wird daraus eine Kette von Vollbildern.

   Deshalb unter 768 px: Symbol links, Knopf rechts, eine Zeile je Einstieg. */
@media (max-width: 767.98px) {
  .cid-tNuIhREGbM .card-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
  }

  .cid-tNuIhREGbM .iconfont-wrapper {
    flex: none;
    margin: 0;
    line-height: 1;
  }

  /* Die Groesse steht im Bestand als Inline-Stil bzw. mit hoher Spezifitaet —
     hier braucht es "!important", sonst bleibt das Symbol bei 80 px. */
  .cid-tNuIhREGbM .iconfont-wrapper .mbr-iconfont {
    font-size: 44px !important;
    margin-bottom: 0 !important;
  }

  .cid-tNuIhREGbM .mbr-section-btn {
    flex: 1;
    margin: 0;
    padding-bottom: 0 !important;
  }

  /* UMRISS STATT FLAECHE — und der Grund ist nicht Geschmack, sondern
     Groesse: Auf dem Schreibtisch sind das drei inhaltsbreite Pillen
     nebeneinander, gestapelt werden daraus drei volle Balken. Dieselbe Farbe,
     die dort ein Akzent ist, wird hier zur Flaeche.

     #7a756b auf Weiss sind 4,58:1 — als Schrift wie als Rand ausreichend
     (WCAG verlangt 4,5:1 fuer Text und 3:1 fuer Raender). Die Rolle heisst
     "Wegweiser", siehe docs/farbraum.md.

     Der gefuellte Zustand bleibt fuer das Ueberfahren und den Fokus: Dann ist
     die Flaeche eine Antwort und keine Dauerlast. */
  /* Die gleiche Breite steht oben und gilt hier weiter. */
  .cid-tNuIhREGbM .flo-button {
    width: auto;
    background-color: transparent !important;
    border: 1px solid #7a756b !important;
    color: #7a756b !important;
    box-shadow: none !important;
  }

  .cid-tNuIhREGbM .flo-button:focus-visible {
    background-color: #7a756b !important;
    color: #ffffff !important;
  }

@media (hover: hover) {
  .cid-tNuIhREGbM .flo-button:hover {
    background-color: #7a756b !important;
    color: #ffffff !important;
  }
}

  .cid-tNuIhREGbM .card {
    margin-bottom: 0.75rem;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   Sprechzeiten-Karten: linksbuendig auf dem Telefon             2026-09-10
   ══════════════════════════════════════════════════════════════════════════

   In den drei Karten (.cid-sldrZksTxS) steht der Text zentriert. Auf dem
   Schreibtisch ist das eine Gestaltungsentscheidung; auf dem Telefon bricht
   jede Zeile um, und aus zentriertem Text wird ein Flattersatz nach beiden
   Seiten.

   Schlimmer ist die AUFZAEHLUNG: Die <ul> hat "padding-left: 40px" und
   "list-style-position: outside", der Text ist aber zentriert. Der Punkt
   klebt dadurch am linken Rand, waehrend sein Text in der Mitte steht —
   gemessen bis zu 200 px Abstand zwischen Punkt und erstem Buchstaben.

   Unter 768 px deshalb linksbuendig. Der Aufzaehlungspunkt wandert damit an
   seinen Text heran, und der Absatz darueber liest sich wieder wie ein
   Absatz. */
@media (max-width: 767.98px) {
  .cid-sldrZksTxS .text-box,
  .cid-sldrZksTxS .text-box .mbr-text,
  .cid-sldrZksTxS .text-box p,
  .cid-sldrZksTxS .text-box ul,
  .cid-sldrZksTxS .text-box li,
  .cid-sldrZksTxS .text-box h1,
  .cid-sldrZksTxS .text-box h2,
  .cid-sldrZksTxS .text-box h3,
  .cid-sldrZksTxS .text-box h4,
  .cid-sldrZksTxS .text-box h5 {
    text-align: left !important;
  }

  /* 40 px Einzug sind auf 390 px Breite ein Achtel der Zeile. */
  .cid-sldrZksTxS .text-box ul {
    padding-left: 1.25rem;
  }

  /* Der Knopf war zentriert, weil der Text es war — er bleibt es, damit er
     nicht als einziges Element aus der Reihe faellt. */
  .cid-sldrZksTxS .text-box .mbr-section-btn {
    text-align: left !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   Beiger Trennbalken — am Block, nicht am Kopf                  2026-09-10
   ══════════════════════════════════════════════════════════════════════════

   Er nimmt das Beige des Fussbereichs auf und trennt den weissen Kopfbereich
   vom weissen Inhalt darunter. Heute nur auf sprechzeiten.html.

   ⚠ ERSTER ANLAUF WAR "border-bottom" AM <header> — und der war falsch: Der
   Kopf ist "position: fixed", der Balken waere also DAUERHAFT sichtbar
   mitgewandert. Gewollt ist das Gegenteil ("nicht in der Header-Navigation
   haben, so dass der dauernd stehen bleibt, sondern eigentlich in den Block
   darunter … und schiebt sich dann unter die Navigation").

   Deshalb gehoert er dem Block. Er sitzt genau dort, wo der ruhende Kopf
   endet — "top: var(--kopf-hoehe-ruhe)", denselben Wert, aus dem sich auch
   das padding-top der Section speist. Beim Scrollen bleibt er an seiner
   Stelle im Dokument und wandert unter den Kopf.

   Nebeneffekt, der so richtig ist: Der Kopf ist wieder genau so hoch wie auf
   allen anderen Seiten. Die 8 px, die er als Rand hatte, sind weg. */
/* Der Abstand nach unten war 12 px (Telefon) bzw. 0 px (ab 768) — oben sind
   es 48 px, gemessen vom Balken bis zur ersten Karte. Der Block sass damit
   sichtbar schief zwischen Balken und rosa Flaeche.

   48 px unten spiegeln den Wert oben. Die 12 px Aussenabstand der letzten
   Karte muessen dafuer weg, sonst waeren es 60. */
.flo-trennbalken {
  padding-bottom: 3rem !important;
}

.flo-trennbalken .card:last-child {
  margin-bottom: 0;
}

.flo-trennbalken::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--kopf-hoehe-ruhe, 177px);
  height: 8px;
  background: #f2eae2;
}


/* Klemmt die waagerechte Bewegung des Einblendens ab — siehe dort. Steht
   ausserhalb der "prefers-reduced-motion"-Abfrage, weil es keine Bewegung
   ist, sondern deren Rahmen. */
.row:has(> .flo-einblenden--links),
.row:has(> .flo-einblenden--rechts) {
  overflow-x: clip;
}


/* ══════════════════════════════════════════════════════════════════════════
   "ZUR WEBSEITE" — Umriss-Knopf statt Textlink                  2026-09-10
   ══════════════════════════════════════════════════════════════════════════

   Acht Stueck auf index.html und sprechzeiten.html, alle zu kvb.de. Vorher
   waren es gesperrte Textzeilen mit einem 30-px-Strich dahinter (h6:after) —
   als Bedienelement nicht erkennbar und ohne Tippziel.

   Jetzt der SEKUNDAERE Rang des Knopfsystems: Umriss, 1 px, in der Rolle
   "Bedienung" #537c83 (4,59:1 auf Weiss — reicht fuer Schrift wie fuer Rand).
   Gefuellt wird er nur beim Ueberfahren und im Fokus.

   DAS SYMBOL TRAEGT BEDEUTUNG, es ist keine Zierde: Alle acht Ziele oeffnen
   in einem neuen Fenster. Dazu ein "sr-only"-Zusatz im HTML, weil ein Symbol
   allein fuer Screenreader nichts sagt. "rel=noopener" fehlte im Bestand
   ueberall und ist mitgesetzt.

   KEIN min-width — und das ist der Unterschied zu den Sprechstunden-Knoepfen:
   Dort tragen die drei Knoepfe VERSCHIEDENE Beschriftungen und muessen erst
   auf eine Breite gebracht werden. Hier heissen alle acht gleich, also sind
   sie von selbst gleich breit.

   Ein min-width von 13rem war der erste Anlauf und ragte bei 992 px ueber die
   Karte hinaus: Deren Innenbreite ist dort nur 208 px, genau der Wert des
   min-width. Die Regel "gleich, aber nur so breit wie noetig" heisst hier
   also: gar keine Mindestbreite. */
.flo-extlink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 44px;
  max-width: 100%;
  padding: 0.55rem 1.1rem;
  border: 1px solid #537c83;
  border-radius: 100px;
  color: #537c83 !important;
  background-color: transparent;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-decoration: none !important;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* ⚠ "a." VORNE IST PFLICHT. Der Knopf traegt im Bestand die Klasse
   "text-black", und mbr-additional.css setzt dafuer

       a.text-black:hover { color: #4d4d4d !important; }

   Das ist Spezifitaet (0,2,1) mit !important. Ein blosses
   ".flo-extlink:hover" hat nur (0,2,0) — auch mit !important verliert es.
   Gemessen: Der Text wurde beim Zeigen GRAU auf petrolfarbenem Grund
   (rgb(77,77,77) auf rgb(83,124,131)), also praktisch unlesbar. Der Nutzer
   am 2026-09-10 am Bild: "Hover text Weiss und ueberall updaten."

   Mit "a." steht es (0,2,1) gegen (0,2,1), und verweise.css laedt spaeter —
   bei gleicher Spezifitaet gewinnt die spaetere Regel. */
a.flo-extlink:focus-visible {
  background-color: #537c83;
  color: #ffffff !important;
}

@media (hover: hover) {
  a.flo-extlink:hover {
  background-color: #537c83;
  color: #ffffff !important;
  }
}

.flo-extlink:focus-visible {
  outline: 2px solid #537c83;
  outline-offset: 3px;
}

.flo-extlink .flo-btn-symbol {
  flex: none;
}

/* KEIN UMBRUCH — die Regel gilt fuer Knopfbeschriftungen ausnahmslos. Ab
   992 px ist die Karte am schmalsten (Innenbreite 208 px, der Textkasten
   darin noch weniger), und "ZUR WEBSEITE" brach dort vierzeilig um.

   Gemessen, was hineinpasst: Der Knopf braucht bei 15 px 179 px. Zwischen
   992 und 1199 px steht deutlich weniger zur Verfuegung; dort nehmen
   knapperer Innenabstand, engere Sperrung und 14 px Schrift ihn auf 150 px
   herunter. Auf allen anderen Breiten bleibt er wie er ist. */
.flo-extlink .flo-extlink__text {
  white-space: nowrap;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Aufgeschluesselt, warum es dort eng ist: Die Karte ist 240 px breit,
     davon gehen 32 px Aussenabstand und dann NOCH EINMAL 2 x 32 px
     Innenabstand der .card-box ab — von 240 bleiben 110 px fuer den Knopf.
     Ein Drittel der Karte ist Innenabstand.

     Der Innenabstand geht in diesem Fenster auf 12 px zurueck, der Knopf
     nimmt die volle Breite und wird schmaler gesetzt. */
  .cid-sl9OOTRVj0 .card-box,
  .cid-sosmh3HwjH .card-box {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .flo-extlink {
    display: flex;
    width: 100%;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    gap: 0.35rem;
  }
}

/* Der Strich hinter dem alten Textlink haengt am <h6> und haette jetzt neben
   dem Knopf gestanden. */
.cid-sl9OOTRVj0 h6:after,
.cid-sosmh3HwjH h6:after {
  display: none !important;
}

.cid-sl9OOTRVj0 h6,
.cid-sosmh3HwjH h6 {
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .flo-extlink {
    transition: none;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   Knopfstapel auf dem Telefon nebeneinander                     2026-09-10
   ══════════════════════════════════════════════════════════════════════════

   Der Block "Wie koennen wir Ihnen helfen?" stellte ONLINE-TERMIN und
   ONLINE-REZEPTION untereinander. Gemessen bei 390 px: Behaelter 202 px von
   360 verfuegbaren, "flex-direction: column".

   ⚠ NICHT ZU VERWECHSELN mit ".flo-knopfpaar" in der mittleren Karte. Die
   steht dort in einer col-6, ist mit 170 px Behaelterbreite ZU RECHT
   gestapelt und bleibt, wie sie ist. */
@media (max-width: 767.98px) {
  .flo-knopfstapel {
    width: 100%;
    max-width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.4rem;
    align-items: stretch;
  }

  .flo-knopfstapel .btn {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 !important;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    font-size: 0.78rem !important;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .flo-knopfstapel .flo-btn-symbol,
  .flo-knopfstapel .mbr-iconfont-btn {
    width: 14px;
    height: 14px;
    font-size: 14px;
    margin-left: 0.25rem;
    flex: none;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   Symbole: das <svg> sitzt IM Traeger-<span>, nicht an seiner Stelle
   ══════════════════════════════════════════════════════════════════════

   Warum das <svg> im <span> steckt, steht in
   tools/icons/traeger-wiederherstellen.py — kurz: Mobirise faerbt und
   dimensioniert die Symbole ueber TYP-Selektoren, etwa auf
   ".cid-sxj00Vp772 .row-item .wrapper .card-img span", und ein <svg>
   ist kein <span>.

   Diese beiden Zeilen raeumen die einzige Nebenwirkung der Verschachtelung
   aus: Ein Inline-<svg> sitzt auf der Schriftgrundlinie, darunter bleibt
   Platz fuer Unterlaengen. Die Box wuchs dadurch messbar (80x80 → 80x100,
   16x16 → 16x20). "display: block" am <svg> nimmt diesen Platz weg.

   ⚠ Das "inline-block" am Traeger ist nicht optional. Ohne es hat ein
   Inline-<span> ein Block-Kind, bricht die Zeile — und die fuenf
   Bewertungssterne auf der Startseite stehen untereinander statt
   nebeneinander. Gemessen, nicht vermutet.

   Von fuenf Kandidaten gegen den Stand vor der Umstellung gemessen:
   ohne Regel 81 von 90 Boxen abweichend, mit dieser Kombination 18.
   Was uebrig bleibt, ist Font-Metrik und nicht per CSS zu treffen —
   siehe docs/entscheidungen/0012-symbolschriften-abloesen.md. */
[class*="mbr-iconfont"] { display: inline-block; }
/* "margin-inline: auto" zentriert das Symbol im Traeger, wenn der breiter
   ist. Ein Block-Element ignoriert naemlich text-align — die Symbole ueber
   den Sprechstunden-Knoepfen klebten dadurch links (Traeger 210 px, Symbol
   80 px, Luft 0 links / 130 rechts). Gemessen ueber vier Seiten: richtig
   zentriert 8 → 11, ohne dass eines der 10 bewusst linksbuendigen Symbole
   verrutscht. */
[class*="mbr-iconfont"] > svg { display: block; margin-inline: auto; }


/* Hero der drei Rechtsseiten: volle Breite wie auf der Startseite
   ---------------------------------------------------------------
   Der Nutzer am 2026-09-10 am iPhone: "Impressum, Datenschutz und Cookies
   noch Probleme, sieht nicht aus wie Startseite" — die Ueberschrift brach
   mitten im Wort um ("Nymphenburgers / trasse").

   Die Schriftgroesse war NICHT die Ursache: auf allen vier Seiten gemessen
   29,35 px, identisch. Der Unterschied ist die Breite — 358 px auf der
   Startseite, 300 px auf den Rechtsseiten.

   Grund ist ein Wrapper, den nur die Rechtsseiten haben:

       div.wrap.d-flex.flex-column.align-items-center

   In einer Flex-SPALTE richtet "align-items: center" quer zur Laufrichtung
   aus, also waagerecht — und macht die Kinder dabei so schmal wie ihr
   Inhalt statt so breit wie der Platz. Die Ueberschrift bekam dadurch
   58 px weniger, und genau die fehlten dem Wort.

   "width: 100%" stellt die volle Breite wieder her, ohne die Zentrierung
   anzutasten: gemessen 360 px, die Startseite hat 358. */
.cid-u8jczZoMsM .doctors-names,
.cid-u8jdoJsPnP .doctors-names,
.cid-u8jdwjRyPx .doctors-names { width: 100%; }


/* Sprechstunden-Knoepfe unter ihr Symbol zentrieren
   -------------------------------------------------
   Der Nutzer am 2026-09-10: "Die Icons sind nicht zentriert ueber den
   Buttons." Gemessen war es umgekehrt — das Symbol sitzt mittig im
   gemeinsamen Traeger (.card-box, Mitte 272 px), der KNOPF sass 8 px
   daneben (Mitte 280 px).

   Grund: Der Knopf traegt "margin: 12,8px" links und rechts und ist damit
   mitsamt seinen Aussenabstaenden 233,6 px breit — sein Container misst nur
   218 px. Passt ein Element nicht hinein, kann "text-align: center" es nicht
   mehr zentrieren; es beginnt linksbuendig am Rand plus margin-left, also
   bei 163 + 12,8 = 175,8 px. Genau die gemessenen 176.

   In jeder Spalte steht nur ein Knopf, die seitlichen Abstaende trennen also
   nichts. Ohne sie passt er in den Container und wird zentriert. */
.cid-tNuIhREGbM .mbr-section-btn .btn { margin-inline: 0; }


/* Leistungs-Kacheln: gestaffelt einblenden
   ----------------------------------------
   Der Nutzer fragte, ob der Maus-ueber-Effekt sich auch als Scroll-Animation
   eigne. Bewusst NICHT: Ein Hover-Effekt sagt "hier kann man klicken". Beim
   Scrollen ausgeloest, waere das ein Versprechen, das die Bewegung nicht
   halten kann — und die Kachel bekaeme zwei verschiedene Bedeutungen fuer
   dieselbe Bewegung. Stattdessen dieselbe Rueckmeldung wie ueberall sonst
   auf der Seite: aufblenden mit 24 px Hochwandern.

   Die Staffelung ist der einzige Zusatz. Sechs Kacheln, die exakt gleichzeitig
   erscheinen, wirken wie ein Umschalten; 70 ms Versatz je Kachel machen daraus
   eine Bewegung. Mehr waere Selbstzweck — nach der letzten Kachel sind
   5 x 70 = 350 ms vergangen, das bleibt unter einer halben Sekunde.

   Die Verzoegerung haengt an "--bereit" und damit an derselben Bedingung wie
   die Animation selbst: kein JavaScript oder "prefers-reduced-motion" heisst
   auch keine Staffelung. */
@media (prefers-reduced-motion: no-preference) {
  .cid-sxj00Vp772 .row-item.flo-einblenden--bereit:nth-child(2) { transition-delay: 0.07s; }
  .cid-sxj00Vp772 .row-item.flo-einblenden--bereit:nth-child(3) { transition-delay: 0.14s; }
  .cid-sxj00Vp772 .row-item.flo-einblenden--bereit:nth-child(4) { transition-delay: 0.21s; }
  .cid-sxj00Vp772 .row-item.flo-einblenden--bereit:nth-child(5) { transition-delay: 0.28s; }
  .cid-sxj00Vp772 .row-item.flo-einblenden--bereit:nth-child(6) { transition-delay: 0.35s; }
}


/* ══════════════════════════════════════════════════════════════════════
   Google-Maps-Block: Struktur statt Leerraum
   ══════════════════════════════════════════════════════════════════════

   EIN Block auf zwei Seiten. Bis zum 2026-09-10 trugen index.html und
   kontakt.html zwei verschiedene cids (u8kfymyxjH und u8kkR5gwXS) fuer
   denselben Inhalt — nach Normalisierung von cid und id war das Markup
   Zeichen fuer Zeichen identisch (5869 Zeichen auf beiden Seiten), und von
   19 CSS-Regeln je cid unterschied sich genau eine: padding-top 1rem gegen
   2rem. Jetzt tragen beide Seiten cid-u8kfymyxjH, der Abstand ist auf 2rem
   vereinheitlicht (unten). Die verwaisten Regeln von u8kkR5gwXS bleiben in
   mbr-additional.css liegen — sie sind auf ihre cid skopiert und stoeren
   nichts.

   WAS GEMESSEN WURDE (390 px, kontakt.html, vorher):
     · Der Symbolkasten war 346 px breit — die volle Spaltenbreite fuer ein
       42 px grosses Zeichen. Es stand allein in einer Zeile, der Rest leer.
     · 55 px Abstand ueber dem Symbol, 55 px unter dem Text: zwischen zwei
       Eintraegen lagen 110 px Luft plus Zeilenhoehe.
     · Blockhoehe 787 px fuer zwei Eintraege mit je zwei Zeilen Text.

   Auf breiten Schirmen steht das Symbol NEBEN dem Text, gestapelt sprang es
   darueber. Das ist der Fall, fuer den die Regel des Auftraggebers gilt:
   "gestapelt gilt eine andere Form, nicht dieselbe schmaler."

   1. SYMBOL NEBEN DIE UEBERSCHRIFT, auch gestapelt. Ein Raster aus zwei
      Spalten haelt Symbol und Text auf einer Grundlinie; der Text laeuft
      unter der Ueberschrift weiter, nicht unter dem Symbol.
   2. ABSTAENDE HALBIERT: 55 → 24 px. Die Trennlinie uebernimmt die
      Gliederung, dafuer braucht es keinen Leerraum mehr.
   3. DIE LETZTE LINIE ENTFAELLT. Ein Trenner trennt; unter dem letzten
      Eintrag steht er ohne Aufgabe und schliesst den Block scheinbar ab,
      obwohl darunter noch etwas kommt. */

/* Symbol und Text nebeneinander, auf JEDER Breite dieselbe Anordnung. */
.cid-u8kfymyxjH .item .item-wrapper {
  display: grid;
  grid-template-columns: 64px 1fr;
  column-gap: 1.25rem;
  align-items: start;
}

/* Der Symbolkasten traegt seine Groesse selbst — die 55 px Abstand nach oben
   stammten aus der gestapelten Anordnung und haben hier keine Aufgabe mehr. */
.cid-u8kfymyxjH .item .item-wrapper .icon-wrapper {
  margin-top: 0;
  width: 64px;
}

.cid-u8kfymyxjH .item .item-wrapper .card-box {
  padding: 0 0 1.5rem;
  border-bottom-color: rgba(29, 29, 29, 0.12);
}

/* Abstand zwischen zwei Eintraegen — dort, wo vorher 55 px Innenabstand
   sassen. Als Aussenabstand am Eintrag ist er einmal vorhanden statt in
   jeder Box doppelt. */
.cid-u8kfymyxjH .item + .item {
  margin-top: 1.5rem;
}

/* ⚠ ":last-child" wuerde hier nicht greifen: Die Eintraege sind nicht die
   einzigen Kinder ihres Elternteils. ":last-of-type" auf .item ebenso wenig,
   weil .item eine Klasse ist und kein Elementtyp. Deshalb ueber den
   Elternteil: der letzte .item im .items-wrapper. */
.cid-u8kfymyxjH .items-wrapper .item:last-child .card-box {
  border-bottom: none;
  padding-bottom: 0;
}

/* Der eine Wert, in dem sich die beiden Fassungen unterschieden: index hatte
   1rem, kontakt 2rem. Fuer ein Modul muss es einer sein; 2rem, weil der Block
   auf beiden Seiten auf einen inhaltlich abgeschlossenen Abschnitt folgt und
   der groessere Abstand ihn davon absetzt. */
/* ⚠ AUCH UNTEN. Der Bestand hatte "padding-bottom: 0" und liess den Block
   von den 55 px Innenabstand seiner Eintraege tragen. Als die weichen,
   klebte alles aneinander: 0 px zwischen den Spalten, 0 px zum naechsten
   Abschnitt, der Knopf 6 px ueber dem ersten Eintrag. Der Nutzer am Bild:
   "Das stimmt was nicht. Wir haben kaum Abstaende."

   Merksatz: Wer Innenabstaende aus Kindelementen entfernt, muss pruefen, was
   sie ausser dem Kind noch getragen haben. */
.cid-u8kfymyxjH {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

/* Gestapelt stehen die beiden Spalten aufeinander — ohne Abstand beginnt der
   erste Eintrag unmittelbar unter dem Knopf. Auf breiten Schirmen stehen sie
   nebeneinander, dort waere der Wert falsch. */
@media (max-width: 991.98px) {
  .cid-u8kfymyxjH .row > .col-12 + .col-12 { margin-top: 2.5rem; }
}

/* ⚠ EIGENE ZEILENHOEHE — sonst ist es kein Modul.
   Die beiden Seiten vererben verschiedene Werte: index.html 24 px, kontakt
   .html 20,8 px (1,5 gegen 1,3 bei 16 px Grundschrift). Der Unterschied zog
   sich durch die ganze Elternkette bis zum Block hinunter und machte die
   Textkaesten 9 px unterschiedlich hoch — bei Zeichen fuer Zeichen gleichem
   Markup.

   Gemessen ueber die Kette: container/row/card/items-wrapper/item/card-box
   trugen auf index durchgehend 24 px, auf kontakt 20,8 px. Keine Regel setzte
   die Zeilenhoehe am Text selbst; sie kam von der Seite.

   Ein Block, der von seiner Umgebung abhaengt, sieht auf zwei Seiten
   verschieden aus — genau das war die Beschwerde. Deshalb setzt das Modul
   den Wert selbst: 1,5, der lesbarere der beiden.

   ⚠ BEIDE SPALTEN, nicht nur eine. Der erste Versuch setzte den Wert nur an
   der .card-box; die Textkaesten stimmten danach, die Blockhoehe wich mobil
   aber weiter um 12 px ab — der linke Teil (Ueberschrift, Text, Knopf) erbte
   ihn weiterhin von der Seite. Ein Modul ist erst dann eines, wenn KEIN Teil
   von ihm mehr von aussen abhaengt. */
.cid-u8kfymyxjH,
.cid-u8kfymyxjH .card-box,
.cid-u8kfymyxjH .content-wrapper { line-height: 1.5; }

/* Auch der Knopf haengt an der Seite statt am Block: gemessen 224x50 px auf
   index, 158x38 px auf kontakt — bei identischen Klassen
   ("btn btn-primary display-4") und identischer Schriftgroesse. Der
   Unterschied steckt allein im Innenabstand (16/48 gegen 10/15).

   ⚠ Die kontakt-Fassung verletzte nebenbei die 44-px-Regel fuer Tippziele
   aus CLAUDE.md: 38 px hoch. Deshalb gewinnt hier nicht "der Bestand einer
   der beiden Seiten", sondern der Wert, der die Regel erfuellt.

   "min-height" statt fester Hoehe, damit der Knopf bei groesserer Schrift
   mitwachsen kann. */
.cid-u8kfymyxjH .mbr-section-btn .btn {
  padding: 16px 48px;
  min-height: 44px;
}


/* ══════════════════════════════════════════════════════════════════════
   Kein haengender Hover auf Touchgeraeten
   ══════════════════════════════════════════════════════════════════════

   Auf einem Touchscreen bleibt ":hover" nach dem Antippen am beruehrten
   Element haengen, bis anderswo hingetippt wird. Bei einem Knopf, dessen
   Hover-Zustand die Farbe wechselt, sieht das aus wie ein Fehler: Der
   Nutzer am 2026-09-10 auf dem iPad, "Zu Google Maps" stand grau statt
   rosa. Gemessen mit isMobile+hasTouch: rgb(255,138,143) vor dem Tippen,
   rgb(148,150,142) danach — bei "hover: none".

   Die Ursache steht in mbr-additional.css als globale Regel:

       .btn-primary:hover { background: #94968e !important; ... }

   Sie laesst sich von aussen nicht abschalten, nur ueberschreiben. Deshalb
   wird der Ruhezustand fuer Geraete ohne echten Zeiger wiederhergestellt.

   ⚠ ":not(:active)" ist wichtig: WAEHREND des Antippens darf der Knopf
   ruhig reagieren — das ist eine Rueckmeldung auf eine laufende Handlung,
   kein haengender Zustand. Nur danach soll nichts stehen bleiben.

   Die Werte sind die gemessenen Ruhewerte, nicht geraten. Aendert jemand
   die Knopffarbe, gehoert dieser Block nachgezogen — deshalb steht er
   direkt hier und nicht in einer entfernten Datei. */
@media (hover: none) {
  a.btn-primary:hover:not(:active),
  a.btn-primary:focus:not(:active) {
    background: #ff8a8f !important;
    border-color: #ff8a8f !important;
    color: #ffffff !important;
  }

  /* Der Umriss-Knopf fuellt sich beim Zeigen petrol. Auch das bleibt sonst
     stehen; hier zurueck auf den Umriss. */
  a.flo-extlink:hover:not(:active) {
    background-color: transparent;
    color: #537c83 !important;
  }
}
