/* =========================================================
   Podologie Kaiser – Custom CSS für Helix Ultimate
   Agentur: bkit
   Farbschema: Mint #4DBDAF · Dunkel #1E2B29 · Weiß #FFFFFF
   Schriften: Cormorant Garamond (Überschriften) · DM Sans (Text)

   Einspielen unter:
   Backend > Extensions > Templates > Styles > [Helix Ultimate Style]
   > Tab "Custom Code" > Feld "Custom CSS"
   (oder als Datei /templates/shaper_helixultimate/css/custom.css)

   STATUS (Stand 13.08.2026):
   Abschnitte 1–20 wie zuvor. Abschnitt 21 "Barrierefreiheit /
   Kontrast-Fixes" — ersetzt an mehreren Stellen im Text (nicht im
   ganzen Dokument neu geschrieben) die helle Mint-Textfarbe und den
   hellen Meta-Grauton durch WCAG-AA-konforme dunklere Varianten,
   dort wo sie auf hellem/weißem Hintergrund als TEXT liefen (Links,
   Eyebrow-Labels, Button-Beschriftung, Meta-/Quellentext). Wo Mint
   auf dunklem Hintergrund läuft (z.B. Team-Karten im Homepage-
   Teaser, CTA-Bänder) bleibt es unverändert, da dort der Kontrast
   bereits gut ist (>6:1). Details siehe Abschnitt 21-Kommentar unten.

   NEU: Abschnitt 22 "Preise-Unterseite (/leistungen/preise)" —
   die Seite nutzte im HTML bereits pok-price-grid/pok-price-card/
   pok-accordion/pok-fee-table-Klassen (u.a. für die Gebührenordnung
   für Heilpraktiker), für die es in dieser Datei bislang KEINE
   Regeln gab -- analog zum Leistungen-Seiten-Bug vom 12.08.2026
   (Abschnitt 20). Die Seite dürfte dadurch bislang weitgehend
   unformatiert gewesen sein, inkl. der GebüH-Tabelle. Zusätzlich
   wurde .pok-price-table th (Abschnitt 7) von Dunkel auf Mint mit
   dunklem Text umgestellt (auf Nutzerwunsch, analog zu den Buttons
   in Abschnitt 4 -- 6,4:1 Kontrast).

   Abschnitt 2 (Schriften) wurde von dynamisch geladenen Google Fonts
   auf lokal gehostete Dateien umgestellt (DSGVO-konform, keine
   Verbindung mehr zu Google-Servern). Dazu:
   1) Die 10 Dateien aus pok-fonts-selfhosted.zip per FTP nach
      /images/fonts/ auf dem Server hochladen (Ordner "fonts" ggf.
      neu anlegen; der Joomla-Medienmanager verweigert den Upload von
      .woff/.woff2 systembedingt, daher FTP-Weg).
   2) Im Backend unter Templates > Stile > shaper_helixultimate >
      Template Options > Custom Code > Feld "Before </head>" die
      Google-Fonts-<link>-Tags entfernen (siehe Anleitung weiter
      unten) -- wurde in dieser Session bereits erledigt.

   NEU (17.08.2026): Abschnitt 4 -- das Telefon-Zeichen vor "Jetzt
   anrufen" war das Unicode-Zeichen U+260E ("\260E"). iOS/Safari
   rendert dieses Zeichen systemseitig als farbiges Emoji (rotes
   Telefon), unabhängig von der gesetzten Schriftfarbe, während es
   auf Desktop/Android als schlichtes Glyph erschien. Ersetzt durch
   eine SVG-Maske (inline Data-URL), die per currentColor immer die
   Textfarbe des Buttons erbt und auf allen Geräten identisch
   aussieht. Zusätzlich iOS-Normalisierungen: -webkit-text-size-
   adjust (verhindert automatische Schriftvergrößerung im
   Querformat), -webkit-appearance:none und white-space:nowrap für
   Buttons (verhindert Umbruch von "Jetzt anrufen" auf zwei Zeilen).

   NEU (17.08.2026): Abschnitt 24 "Mobile-Feinschliff & Geräte-
   Konsistenz" -- Ergebnis eines Mobil-Audits über alle Seiten in
   zwölf Breiten (320 bis 991 px). Behebt einen echten Überlauf
   (.pok-partners-grid mit minmax(320px) sprengt 320-px-Geräte),
   Touch-Flächen unter 44 px, die gequetschte Preistabelle unter
   480 px, zentrierten Fließtext im Hinweis-Band, zu hohe Hero-
   Bilder auf Mobil sowie drei Ursachen für abweichende Darstellung
   auf einzelnen Geräten (aspect-ratio-Fallback für iOS 14, :has()-
   Ersatz, Schrift-Fallback-Kette) und vereinheitlicht den
   Handy-Breakpoint von 560 px auf 575 px.
   Nachtrag desselben Tages: Nach dem Auslesen der echten Seiten-
   inhalte aus dem Backend kamen 24.12 (lange deutsche Komposita
   brechen aus Überschriften -- "Kooperationspartnern?" sprengte
   bei 320 px die Seite) und 24.13 (Telefon- und E-Mail-Links in
   den Partnerkarten als Tippziele) hinzu.
   Enthält außerdem eine Korrektur zu Abschnitt 4: white-space:nowrap
   gilt jetzt nur noch für den kurzen Anruf-Button statt für alle
   Buttons.

   NEU (17.08.2026): Abschnitt 25 "Kopfbereich und Startseiten-Hero
   auf Mobilgeräten" -- Ergebnis der Auswertung eines echten
   Seiten-Snapshots. Gemessen bei 390 x 844 px: Topbar 68 px plus
   Header 174 px plus Hero-Foto rund 490 px bedeuteten, dass die
   Überschrift erst bei y = 858 und der Anruf-Button erst bei
   y = 1092 begann -- der erste Bildschirm zeigte ausschließlich
   Kopfbereich und Foto. Abschnitt 25 dreht auf Mobil die
   Hero-Reihenfolge (Text vor Bild), verkleinert Topbar, Header und
   den Anruf-Button und vergrößert Burger-Menü und Menüpunkte auf
   44 px. Danach beginnt die Überschrift bei y = 340 und der Button
   bei y = 574, beides auf dem ersten Bildschirm.
   Warnung für spätere Änderungen: .burger-icon ist der Container
   der drei Menübalken. Setzt man darauf display:flex, verlieren die
   Balken ihre Breite und das Menü-Symbol verschwindet. Vergrößert
   werden darf nur der umgebende .offcanvas-toggler-Link.

   NEU (23.10.2026): Abschnitt 26 "Erstanmeldung / Online-Anamnese
   (/erstanmeldung)" -- Styling für die neue Formularseite. Die Seite
   setzt die Vorgaben aus der datenschutzrechtlichen Bewertung um:
   zwei getrennte, nicht vorausgewählte Einwilligungs-Häkchen,
   Kurzinformation mit Link auf die Datenschutzerklärung, Telefon
   ODER E-Mail als Pflichtangabe (nie beides), kein Datei-Upload.
   Bedienbarkeit ist hier wichtiger als anderswo auf der Seite: die
   Zielgruppe sind überwiegend ältere Patientinnen und Patienten,
   viele mit Diabetes und eingeschränktem Sehvermögen. Daher 17 px
   Grundschrift in allen Eingabefeldern (unter 16 px zoomt iOS beim
   Antippen automatisch hinein und verschiebt das Layout), 48 px
   Mindesthöhe für jedes Bedienelement, 26 px große Checkboxen mit
   vollflächig klickbarem Label und ein 3 px starker Fokusrahmen.

   NEU (24.10.2026): Abschnitt 26.1 "Aufklappende Unterfragen" -- das
   Formular wurde nach dem Abgleich mit dem Papier-Fragebogen der Praxis
   um Krankenkasse, Infektionskrankheiten, einen Diabetes-Block, Fragen
   zur Durchblutung sowie Schuhe und Einlagen erweitert. Die Rückfragen
   erscheinen nur, wenn die zugehörige Angabe angekreuzt ist.

   NEU (26.10.2026): Abschnitt 27 "Cookie-Banner (reDim CookieHint and
   Consent)" -- passt das Einwilligungs-Fenster an das Seitendesign an:
   weiße Karte mit Mint-Akzentlinie, Überschrift in Cormorant Garamond,
   Pillen-Buttons wie .pok-btn statt der grünen Plugin-Standardfarbe
   (#008511), runde Mint-Schalter, 15 px statt 12 px Text. "Alle
   ablehnen" bleibt bewusst gleich groß wie "Alle akzeptieren".
   Überschreibt die Inline-Farben des Plugins per Dreifach-ID, damit die
   Ladereihenfolge keine Rolle spielt.

   NEU (28.10.2026): Abschnitt 28 "Kontakt-Seite: Button und Hinweis
   Erstanmeldung" -- dritter Hero-Button (weiß, Mint-Rahmen,
   Klemmbrett-Icon) neben Anrufen und E-Mail, Klarstellungssatz
   "kein Termin über das Formular", neue Zeile "Neu bei uns?" in der
   Kontaktdaten-Karte. Brief-Icon für den E-Mail-Button.

   NEU (28.10.2026): Abschnitt 29 "Was Sie zum ersten Termin
   mitbringen" -- Checklisten-Baustein in drei Varianten:
   aufklappbar (Erstanmeldung, Block 1), offen (Bestätigung nach dem
   Absenden) und zweispaltig (Leistungen, unter dem Behandlungsablauf).

   Bei jeder künftigen Änderung: komplett ersetzen, nicht anhängen.
   ========================================================= */

/* -------------------- 1. Variablen -------------------- */
:root{
  --pok-mint:        #4DBDAF;
  --pok-mint-dark:    #3a9c90;
  --pok-dark:        #1E2B29;
  --pok-white:       #FFFFFF;
  --pok-grey-light:  #F5F7F6;
  --pok-font-head:   'Cormorant Garamond', serif;
  --pok-font-body:   'DM Sans', sans-serif;

  /* -- NEU (Abschnitt 21): barrierefreie Text-Varianten -------------
     Mint (#4DBDAF) und Mint-Dunkel (#3a9c90) haben auf WEISSEM/hellem
     Hintergrund nur 2,3:1 bzw. 3,3:1 Kontrast (WCAG AA verlangt
     4,5:1 für normalen Text). --pok-mint-text ist ein dunklerer,
     geprüfter Ton (5,86:1) für Links/Labels/Zahlen auf hellem
     Hintergrund. --pok-meta ersetzt den bisherigen Grauton #8b9997
     (nur 2,96:1) für Quellen-/Metatext (5,48:1). Auf DUNKLEM
     Hintergrund bleibt das normale --pok-mint weiterhin in Gebrauch
     (dort >6:1 Kontrast, unproblematisch). -------------------- */
  --pok-mint-text:   #267064;
  --pok-meta:        #5f6c69;
}

/* -------------------- 2. Schriften (selbst gehostet, DSGVO-konform) -------------------- */
/* Vormals: Google Fonts per <link> aus dem "Before </head>"-Feld (dynamischer Abruf
   von fonts.googleapis.com/fonts.gstatic.com, dabei wird die Besucher-IP an Google
   übertragen -- ohne Einwilligung abmahnfähig, vgl. LG München I, 20.01.2022,
   Az. 3 O 17493/20). Ersetzt durch lokal gehostete Woff2/Woff-Dateien, keine
   Verbindung mehr zu Google-Servern. Dateien liegen unter /images/fonts/ (per FTP
   hochgeladen) -- siehe Abschnitt 19-Hinweis zur Datenschutzerklärung. */
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/images/fonts/cormorant-garamond-600.woff2') format('woff2'),
      url('/images/fonts/cormorant-garamond-600.woff') format('woff');
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/images/fonts/cormorant-garamond-700.woff2') format('woff2'),
      url('/images/fonts/cormorant-garamond-700.woff') format('woff');
}
@font-face{
  font-family:'DM Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/images/fonts/dm-sans-400.woff2') format('woff2'),
      url('/images/fonts/dm-sans-400.woff') format('woff');
}
@font-face{
  font-family:'DM Sans';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/images/fonts/dm-sans-500.woff2') format('woff2'),
      url('/images/fonts/dm-sans-500.woff') format('woff');
}
@font-face{
  font-family:'DM Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/images/fonts/dm-sans-700.woff2') format('woff2'),
      url('/images/fonts/dm-sans-700.woff') format('woff');
}

body,
.sppb-addon-content,
p, li, span, a, input, textarea, select, button{
  font-family: var(--pok-font-body);
  color: var(--pok-dark);
}

h1, h2, h3, h4, h5, h6,
.sppb-addon-title,
.site-title{
  font-family: var(--pok-font-head);
  color: var(--pok-dark);
  font-weight: 600;
  letter-spacing: 0.01em;
}

h1{ font-size: 2.75rem; line-height: 1.15; }
h2{ font-size: 2.1rem;  line-height: 1.2;  }
h3{ font-size: 1.5rem;  line-height: 1.3;  }

/* -------------------- 3. Grundfarben -------------------- */
/* Linkfarbe auf --pok-mint-text umgestellt (Abschnitt 21: barrierefrei, 5,86:1
   statt vorher 2,28:1 mit --pok-mint). Hover/Focus nutzt --pok-dark für
   maximalen, eindeutigen Kontrast als Interaktions-Feedback. */
a{ color: var(--pok-mint-text); text-decoration: none; transition: color .2s ease; }
a:hover, a:focus{ color: var(--pok-dark); }
a:focus-visible{ outline: 3px solid var(--pok-mint-dark); outline-offset: 2px; border-radius: 2px; }

.pok-section-dark,
.header-dark{
  background-color: var(--pok-dark);
  color: var(--pok-white);
}
/* Auf dunklem Hintergrund bleibt Mint unverändert -- dort >6:1 Kontrast, siehe
   Kommentar zu Abschnitt 21 oben. */
.pok-section-dark a{ color: var(--pok-white); }
.pok-section-dark a:hover{ color: var(--pok-mint); }

.pok-section-mint{
  background-color: var(--pok-mint);
  color: var(--pok-white);
}
.pok-section-mint h1, .pok-section-mint h2, .pok-section-mint h3{
  color: var(--pok-white);
}

/* -------------------- 4. Buttons / CTA -------------------- */
/* Wichtig: kein Buchungsbutton, nur "Jetzt anrufen" (tel:-Link) */
/* Abschnitt 21: Textfarbe auf dem gefüllten Mint-Button war Weiß (nur 2,28:1
   Kontrast auf Mint) -- umgestellt auf --pok-dark (6,43:1). Hover behält
   denselben dunklen Text bei (nur Hintergrund/Rand ändern sich), damit die
   Lesbarkeit in jedem Zustand gleich gut bleibt. */
.sppb-btn,
.pok-btn,
a[href^="tel:"].pok-btn-call{
  display: inline-block;
  font-family: var(--pok-font-body);
  font-weight: 700;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  border: 2px solid var(--pok-mint);
  background-color: var(--pok-mint);
  color: var(--pok-dark) !important;
  transition: all .2s ease;
}
.sppb-btn:hover,
.pok-btn:hover,
a[href^="tel:"].pok-btn-call:hover{
  background-color: transparent;
  color: var(--pok-dark) !important;
}

/* Outline-Variante für DUNKLE Hintergründe (weißer Rahmen/Text) */
/* Zusätzliche, höher spezifische Selektoren (a.pok-btn.pok-btn-outline, inkl.
   tel:/mailto:-Variante) + durchgängig !important auf allen drei Eigenschaften:
   manche Templates/Plugins setzen z.B. für a[href^="tel:"] eine eigene Farbe
   mit !important, was sonst die einfache Klassenregel aushebeln kann. */
.pok-btn-outline,
a.pok-btn.pok-btn-outline,
a[href^="tel:"].pok-btn.pok-btn-outline,
a[href^="mailto:"].pok-btn.pok-btn-outline{
  background-color: transparent !important;
  border: 2px solid var(--pok-white) !important;
  color: var(--pok-white) !important;
}
.pok-btn-outline:hover,
a.pok-btn.pok-btn-outline:hover,
a[href^="tel:"].pok-btn.pok-btn-outline:hover,
a[href^="mailto:"].pok-btn.pok-btn-outline:hover{
  background-color: var(--pok-white) !important;
  color: var(--pok-dark) !important;
}

/* Outline-Variante für HELLE Hintergründe (dunkler Rahmen/Text) */
.pok-btn-outline-dark,
a.pok-btn.pok-btn-outline-dark,
a[href^="tel:"].pok-btn.pok-btn-outline-dark,
a[href^="mailto:"].pok-btn.pok-btn-outline-dark{
  background-color: transparent !important;
  border: 2px solid var(--pok-dark) !important;
  color: var(--pok-dark) !important;
}
.pok-btn-outline-dark:hover,
a.pok-btn.pok-btn-outline-dark:hover,
a[href^="tel:"].pok-btn.pok-btn-outline-dark:hover,
a[href^="mailto:"].pok-btn.pok-btn-outline-dark:hover{
  background-color: var(--pok-dark) !important;
  color: #fff !important;
}

/* Telefon-Icon vor "Jetzt anrufen"-Links / Topbar-Links.
   Seit 17.08.2026 als SVG-Maske statt Unicode-Zeichen U+260E: iOS/Safari
   rendert U+260E systemseitig als farbiges Emoji (rotes Telefon) und ignoriert
   dabei die CSS-Schriftfarbe. Die Maske wird mit background-color eingefärbt
   und erbt per currentColor die Textfarbe des Buttons -- identische Darstellung
   auf iPhone, Android und Desktop. */
a[href^="tel:"].pok-btn-call::before,
.pok-icon-phone::before{
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/></svg>") no-repeat center / contain;
}

/* iOS-Normalisierung: Safari vergrößert auf dem iPhone im Querformat
   eigenmächtig Schriftgrößen (Text-Autosizing) und legt bei Links/Buttons
   teils eigene Systemstile darüber. Außerdem soll "Jetzt anrufen" nie auf
   zwei Zeilen umbrechen. */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.sppb-btn,
.pok-btn,
a[href^="tel:"].pok-btn-call{
  -webkit-appearance: none;
  appearance: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: rgba(77,189,175,.25);
}

/* -------------------- 5. Topbar / Header / Navigation -------------------- */
/* Höhe an allen Wickel-Ebenen erzwingen: Helix Ultimate legt für den Header
   vermutlich eine eigene feste Höhe fest (wegen Sticky-Header-Funktion beim
   Scrollen). Das überschreiben wir hier, sonst ragt zentrierter Inhalt
   (Logo/Button), der mehr Platz braucht, über die feste Höhe hinaus. */
#sp-header,
#sp-header .container,
#sp-header .container-inner{
  height: auto !important;
  min-height: 0 !important;
}
#sp-header{
  background-color: var(--pok-white);
  border-bottom: 1px solid var(--pok-grey-light);
}
#sp-header .row{
  padding-top: 18px;
  padding-bottom: 18px;
}

#sp-menu .sp-megamenu-parent > li > a{
  font-family: var(--pok-font-body);
  font-weight: 500;
  color: var(--pok-dark);
}
#sp-menu .sp-megamenu-parent > li > a:hover,
#sp-menu .sp-megamenu-parent > li.active > a{
  color: var(--pok-mint-text);
}

/* Topbar-Inhalt (Telefon / E-Mail / Adresse) */
.pok-topbar-content{
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  font-size: .85rem;
}
.pok-topbar-content a,
.pok-topbar-content span{ color: #fff; }
.pok-topbar-content a:hover{ color: var(--pok-mint); }
@media (max-width: 767px){
  .pok-topbar-content{ justify-content: center; text-align: center; gap: 10px; }
}

/* Header-Logo Größenbegrenzung (falls das Template-Feld keine eigene Höhe setzt) */
#sp-header .logo img,
#sp-logo img{
  max-height: 60px;
  width: auto;
}

/* Vertikale Zentrierung von Logo und Menü im Header */
#sp-header #sp-logo,
#sp-header #sp-menu{
  display: flex;
  align-items: center;
}
#sp-header #sp-logo .sp-column,
#sp-header #sp-menu .sp-column{
  display: flex;
  align-items: center;
}
#sp-logo .logo img{
  display: block;
}

/* -------------------- 6. Container-Breite Header / Topbar / Footer -------------------- */
/* Helix Ultimate läuft hier im Fluid-Layout (volle Breite). SP Page Builder
   begrenzt seine eigenen Reihen ab 1400px auf max. 1320px (siehe Seitenquelltext-
   Kopf: ".sppb-row-container { max-width: 1320px; }"). Damit Topbar, Header und
   Footer-Inhalt auf derselben Breite wie der Seiteninhalt zentriert sind
   (die farbigen Hintergrundstreifen bleiben trotzdem randlos volle Breite): */
#sp-top-bar .container-inner,
#sp-header .container-inner,
#sp-bottom .container-inner,
#sp-footer .container-inner{
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* -------------------- 7. Karten / Boxen (Leistungen, Team etc.) -------------------- */
.pok-card{
  background: var(--pok-white);
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(30,43,41,0.08);
  padding: 1.75rem;
}
.pok-card h3{ margin-top: 0; }

/* Preistabellen (Kopfzeile Abschnitt 22: von Dunkel auf Mint umgestellt) */
.pok-price-table th{
  background-color: var(--pok-mint);
  color: var(--pok-dark);
  font-family: var(--pok-font-body);
  font-weight: 700;
}
.pok-price-table td{ border-bottom: 1px solid var(--pok-grey-light); }

/* -------------------- 8. Startseite: Hero -------------------- */
.pok-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;}
.pok-hero-lead{font-size:1.15rem;color:var(--pok-mint-text);font-weight:600;margin-bottom:1rem;}
.pok-hero-desc{font-size:1.05rem;color:#3d4a48;margin-bottom:1.8rem;}
.pok-hero-actions{display:flex;gap:16px;margin-bottom:2rem;flex-wrap:wrap;}
.pok-hero-img{border-radius:16px;overflow:hidden;box-shadow:0 12px 40px rgba(30,43,41,.18);aspect-ratio:4/5;}
.pok-hero-img img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;}

/* Dezentes Badge für nicht-numerische Zusatzinfos (z.B. "Kassen- & Privatpatienten willkommen"),
   getrennt von den echten Kennzahlen in .pok-stats damit deren Größe/Rhythmus einheitlich bleibt */
.pok-hero-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(77,189,175,.12);
  border: 1px solid var(--pok-mint);
  color: var(--pok-mint-text);
  font-weight: 600;
  font-size: .88rem;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 1.6rem;
}
.pok-hero-badge::before{
  content: "\2713";
  color: var(--pok-mint-text);
  font-weight: 700;
}

.pok-stats{display:flex;gap:34px;flex-wrap:wrap;}
.pok-stat b{display:block;font-family:var(--pok-font-head);font-size:2rem;color:var(--pok-mint-text);}
.pok-stat span{font-size:.85rem;color:#5a6664;}

/* -------------------- 9. Startseite: Leistungen -------------------- */
.pok-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.pok-services-grid.pok-services-grid--2{grid-template-columns:repeat(2,1fr);max-width:700px;margin:0 auto;}
.pok-service-num{font-family:var(--pok-font-head);font-size:1.6rem;color:var(--pok-mint-text);font-weight:700;margin-bottom:8px;}

/* -------------------- 10. Startseite: Team -------------------- */
.pok-team-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center;}
.pok-team-img{border-radius:16px;overflow:hidden;}
.pok-team-img img{width:100%;display:block;}
.pok-team-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px;}
.pok-team-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden;text-align:center;}
.pok-team-card img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;}
.pok-team-card .pok-info{padding:16px;}
.pok-team-card .pok-info b{display:block;font-size:1.05rem;color:#fff;font-family:var(--pok-font-head);}
/* Läuft auf dunklem Hintergrund (rgba(255,255,255,.05)-Karten in dunkler Sektion)
   -- Mint hat dort >6:1 Kontrast, bleibt unverändert (siehe Abschnitt 21-Kommentar). */
.pok-team-card .pok-info span{font-size:.82rem;color:var(--pok-mint);}
.pok-badge-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.2rem;}
.pok-badge{background:rgba(77,189,175,.15);border:1px solid var(--pok-mint);color:var(--pok-mint);font-size:.78rem;padding:5px 12px;border-radius:999px;}

/* -------------------- 11. Startseite: Praxis-Kacheln -------------------- */
.pok-facility-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.pok-facility-tile{border-radius:14px;overflow:hidden;position:relative;aspect-ratio:4/3;}
.pok-facility-tile img{width:100%;height:100%;object-fit:cover;display:block;}
.pok-facility-tile .pok-cap{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(30,43,41,.85));color:#fff;padding:30px 18px 14px;font-weight:600;font-family:var(--pok-font-body);}

/* -------------------- 12. Footer -------------------- */
/* Helix Ultimate liefert Hintergrund/Textfarbe für #sp-bottom / #sp-footer
   bereits über die Presets (--sppb-footer-bg-color / --sppb-footer-text-color).
   Hier nur die Typografie/Struktur der eigenen Inhalte innerhalb der Module: */
#sp-bottom,
#sp-footer{
  padding-top: 50px;
  padding-bottom: 30px;
}
.pok-footer-col h4{
  font-family: var(--pok-font-head);
  color: var(--pok-mint);
  font-size: 1.2rem;
  margin-bottom: .6rem;
}
.pok-footer-col p{
  color: rgba(255,255,255,.85);
  font-size: .92rem;
  line-height: 1.6;
}
.pok-footer-col a{ color: rgba(255,255,255,.85); }
.pok-footer-col a:hover{ color: var(--pok-mint); }

.pok-footer-bottom{
  text-align: center;
  font-size: .8rem;
  color: rgba(255,255,255,.6);
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
}

/* -------------------- 13. Responsive / Mobile -------------------- */
@media (max-width: 991px){
  h1{ font-size: 2.1rem; }
  h2{ font-size: 1.7rem; }
  h3{ font-size: 1.3rem; }

  .pok-card{ padding: 1.25rem; }

  #sp-menu .sp-megamenu-parent{
    background-color: var(--pok-white);
  }
}

/* Abschnitt 21 / Mobile-Fix 1: Die volle-Breite-Regel für Buttons war bisher
   pauschal für JEDE .pok-btn-Instanz (auch kleine Inline-Buttons wie
   "Vollständiger Gesetzestext" in den Rechtliche-Grundlagen-Karten oder den
   "Route"-Button bei der Anfahrtskarte) -- dadurch wurden die ab Tablet-
   Breite unbeabsichtigt zu vollbreiten Blöcken. Jetzt nur noch gezielt für
   die großen CTA-Kontexte (Hero-Actions, CTA-Bänder, Kontakt-Actions,
   Hinweis-Band). Kleine Inline-Buttons in Karten behalten ihre kompakte
   Breite bei. */
@media (max-width: 991px){
  .pok-hero-actions .sppb-btn, .pok-hero-actions .pok-btn,
  .pok-kontakt-actions .sppb-btn, .pok-kontakt-actions .pok-btn,
  .pok-note-band-actions .sppb-btn, .pok-note-band-actions .pok-btn,
  .pok-team-cta .sppb-btn, .pok-team-cta .pok-btn,
  .pok-koop-cta .sppb-btn, .pok-koop-cta .pok-btn,
  .pok-praxis-cta .sppb-btn, .pok-praxis-cta .pok-btn,
  .pok-kontakt-cta .sppb-btn, .pok-kontakt-cta .pok-btn,
  .pok-wissen-cta .sppb-btn, .pok-wissen-cta .pok-btn{
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 900px){
  .pok-hero-grid,.pok-team-intro{grid-template-columns:1fr;}
  .pok-hero-img{order:-1;}
  .pok-services-grid{grid-template-columns:repeat(2,1fr);}
  .pok-facility-grid{grid-template-columns:1fr;}
}

/* Abschnitt 21 / Mobile-Fix 2: .pok-team-cards (Startseiten-Team-Teaser)
   hatte keine Zwischenstufe zwischen 900px und 560px und blieb 3-spaltig --
   jetzt analog zu .pok-services-grid ab 900px 2-spaltig. */
@media (max-width: 900px){
  .pok-team-cards{grid-template-columns:repeat(2,1fr);}
}

@media (max-width: 575px){
  h1{ font-size: 1.75rem; }
  h2{ font-size: 1.4rem; }

  .sppb-row-container,
  .sp-megamenu-wrapper{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  a[href^="tel:"].pok-btn-call{
    padding: 1rem 1.5rem;
    font-size: 1.05rem;
  }
}

@media (max-width: 560px){
  .pok-services-grid,.pok-services-grid.pok-services-grid--2{grid-template-columns:1fr;}
  .pok-team-cards{grid-template-columns:1fr;max-width:280px;margin:56px auto 0;}
  .pok-hero-actions .pok-btn,.pok-hero-actions .pok-btn-outline,.pok-hero-actions .pok-btn-outline-dark{width:100%;text-align:center;}
}

/* =========================================================
   14. Team-Seite (/team)
   Live verifiziert. Jede Karte = natives <details>-Element (kein JS),
   Klick klappt Werdegang bzw. bei Xandra Kaiser das Fortbildungs-
   Akkordeon auf.
   ========================================================= */

/* -- Hero/Intro -- */
.pok-team-hero{max-width:760px;margin:0 auto;text-align:center;padding:20px 0;}
.pok-team-eyebrow{color:var(--pok-mint-text);font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:.8rem;}
.pok-team-hero h1{font-size:2.6rem;margin-bottom:.9rem;}
.pok-team-hero p{font-size:1.08rem;color:#3d4a48;}

/* -- Lead-Satz über den Karten -- */
.pok-team-lead{text-align:center;max-width:700px;margin:0 auto 3rem;color:#3d4a48;font-size:1.02rem;}

/* -- Karten-Grid -- */
.pok-team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;align-items:start;}

details.pok-team-card{background:var(--pok-grey-light);border-radius:16px;overflow:hidden;box-shadow:0 2px 16px rgba(30,43,41,.06);}
details.pok-team-card summary{cursor:pointer;list-style:none;display:block;}
details.pok-team-card summary::-webkit-details-marker{display:none;}
details.pok-team-card .photo{aspect-ratio:3/4;background:#dfe6e4;position:relative;overflow:hidden;}
details.pok-team-card .photo img{width:100%;height:100%;object-fit:cover;display:block;}
details.pok-team-card .photo.placeholder{display:flex;align-items:center;justify-content:center;color:var(--pok-meta);font-size:.8rem;text-align:center;padding:1rem;}
details.pok-team-card .new-badge{position:absolute;top:12px;left:12px;background:var(--pok-mint);color:#fff;font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.02em;}
details.pok-team-card .info{padding:20px 20px 18px;text-align:center;}
details.pok-team-card .info h3{font-size:1.35rem;margin-bottom:.2rem;}
details.pok-team-card .role{display:block;color:var(--pok-mint-text);font-weight:700;font-size:.85rem;line-height:1.3;min-height:2.6em;margin-bottom:.9rem;}
details.pok-team-card .toggle-hint{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.82rem;font-weight:700;color:var(--pok-dark);border-top:1px solid rgba(30,43,41,.08);padding:12px 20px;transition:background .15s ease;}
details.pok-team-card summary:hover .toggle-hint{background:rgba(77,189,175,.1);}
details.pok-team-card .toggle-hint::after{content:"Mehr erfahren  \2304";}
details.pok-team-card[open] .toggle-hint::after{content:"Weniger anzeigen  \2303";}
details.pok-team-card .card-detail{padding:4px 20px 24px;}
details.pok-team-card .desc{font-size:.9rem;color:#3d4a48;margin:0 0 .4rem;}
details.pok-team-card .desc.todo{color:#b4643a;font-style:italic;}

/* -- Fortbildungen-Akkordeon, verschachtelt in der Xandra-Karte -- */
.pok-cme-wrap{margin-top:1rem;border-top:1px solid rgba(30,43,41,.08);padding-top:1rem;text-align:left;}
.pok-cme-wrap h4{font-size:1rem;font-family:var(--pok-font-body);font-weight:700;margin-bottom:.8rem;}
details.pok-cme-group{background:#fff;border-radius:10px;margin-bottom:8px;box-shadow:0 1px 8px rgba(30,43,41,.06);overflow:hidden;}
details.pok-cme-group summary{cursor:pointer;list-style:none;padding:12px 16px;font-family:var(--pok-font-body);font-weight:700;font-size:.85rem;color:var(--pok-dark);display:flex;justify-content:space-between;align-items:center;}
details.pok-cme-group summary::-webkit-details-marker{display:none;}
details.pok-cme-group summary::after{content:"+";font-size:1.2rem;color:var(--pok-mint-text);font-weight:400;margin-left:12px;}
details.pok-cme-group[open] summary::after{content:"\2013";}
details.pok-cme-group summary .count{color:var(--pok-meta);font-weight:500;font-size:.78rem;margin-left:8px;}
.pok-cme-list{padding:0 16px 14px;margin:0;list-style:none;}
.pok-cme-list li{padding:7px 0;border-top:1px solid var(--pok-grey-light);font-size:.82rem;display:flex;gap:10px;}
.pok-cme-list li .date{color:var(--pok-mint-text);font-weight:700;flex-shrink:0;width:95px;}
.pok-cme-note{font-size:.78rem;color:var(--pok-meta);margin-top:.8rem;}

/* -- CTA-Band -- */
.pok-team-cta{background:var(--pok-dark);color:#fff;padding:56px 0;text-align:center;}
.pok-team-cta h2{color:#fff;font-size:1.9rem;}
.pok-team-cta p{color:rgba(255,255,255,.8);margin-bottom:1.6rem;}

/* -- Responsive -- */
@media (max-width: 991px){
  .pok-team-grid{grid-template-columns:repeat(2,1fr);}
  .pok-team-hero h1{font-size:2.1rem;}
}
@media (max-width: 575px){
  .pok-team-grid{grid-template-columns:1fr;max-width:320px;margin:0 auto;}
  .pok-cme-list li{flex-direction:column;gap:2px;}
  .pok-cme-list li .date{width:auto;}
}

/* =========================================================
   15. Kooperationen-Seite (/kooperationen)
   Noch nicht live verifiziert.
   3 Reihen: Hero/Intro (#F5F7F6) -> Partner-Grid (#FFFFFF) ->
   CTA-Band (#1E2B29). Reihen-Hintergrund/-Textfarbe wird im
   SP-Page-Builder-Reihen-Panel gesetzt, NICHT hier im HTML.
   Partner-Grid nutzt auto-fit, damit es ohne Markup-Änderung
   von 1 auf mehrere Partner skaliert.
   ========================================================= */

/* -- Hero/Intro -- */
.pok-koop-hero{max-width:760px;margin:0 auto;text-align:center;padding:20px 0;}
.pok-koop-eyebrow{color:var(--pok-mint-text);font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:.8rem;}
.pok-koop-hero h1{font-size:2.6rem;margin-bottom:.9rem;}
.pok-koop-hero p{font-size:1.08rem;color:#3d4a48;margin:0;}

/* -- Partner-Grid -- */
.pok-partners-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:28px;
  max-width:1000px;
  margin:0 auto;
  padding:20px 0;
}
/* Solange nur 1 Partner existiert: Karte nicht überbreiten */
.pok-partners-grid:has(> :only-child){max-width:520px;}

.pok-partner-card{
  background:var(--pok-grey-light);
  border-radius:16px;
  padding:2rem 2rem 1.8rem;
  box-shadow:0 2px 16px rgba(30,43,41,.06);
  display:flex;
  flex-direction:column;
  gap:1.1rem;
}
.pok-partner-logo{
  background:#fff;
  border-radius:12px;
  padding:1.4rem;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:110px;
}
.pok-partner-logo img{max-width:100%;max-height:80px;display:block;}
.pok-partner-logo.placeholder{color:var(--pok-meta);font-size:.8rem;text-align:center;border:1.5px dashed #c8d1cf;}

.pok-partner-card h3{font-size:1.35rem;margin-bottom:.3rem;}
.pok-partner-meta{font-size:.92rem;line-height:1.7;color:#3d4a48;}
.pok-partner-meta .label{color:var(--pok-mint-text);font-weight:700;margin-right:.35em;}
.pok-partner-card .pok-btn-outline-dark{align-self:flex-start;padding:.6rem 1.4rem;font-size:.88rem;margin-top:.3rem;}

/* -- CTA-Band -- */
.pok-koop-cta{background:var(--pok-dark);color:#fff;padding:56px 0;text-align:center;}
.pok-koop-cta h2{color:#fff;font-size:1.9rem;}
.pok-koop-cta p{color:rgba(255,255,255,.8);margin-bottom:1.6rem;}

/* -- Responsive -- */
@media (max-width: 991px){
  .pok-koop-hero h1{font-size:2.1rem;}
}
@media (max-width: 575px){
  .pok-koop-hero h1{font-size:1.75rem;}
  .pok-partner-card{padding:1.5rem 1.4rem;}
}

/* =========================================================
   16. Praxis-Seite (/praxis)
   Mockup vom Nutzer freigegeben, noch NICHT live verifiziert.
   4 Reihen: Hero/Intro (#F5F7F6) -> Räume-Grid (#FFFFFF) ->
   Hygiene/Sterilisation (#F5F7F6) -> CTA-Band (#1E2B29).
   Reihen-Hintergrund/-Textfarbe wird im SP-Page-Builder-Reihen-
   Panel gesetzt, NICHT hier im HTML.
   Bewusst OHNE Anfahrt/Lage-Bereich – kommt auf die Kontakt-Seite
   (Abschnitt 17).
   ========================================================= */

/* -- Hero/Intro -- */
.pok-praxis-hero{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.pok-praxis-eyebrow{color:var(--pok-mint-text);font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:.8rem;}
.pok-praxis-hero h1{font-size:2.6rem;line-height:1.15;}
.pok-praxis-lead{font-size:1.08rem;color:#3d4a48;}
.pok-praxis-hero-img{border-radius:16px;overflow:hidden;box-shadow:0 12px 40px rgba(30,43,41,.18);aspect-ratio:4/3;}
.pok-praxis-hero-img img{width:100%;height:100%;object-fit:cover;display:block;}
.pok-facts{display:flex;gap:20px;flex-wrap:wrap;margin-top:1.8rem;}
.pok-fact{background:#fff;border-radius:12px;padding:.7rem 1.1rem;font-size:.85rem;font-weight:700;box-shadow:0 2px 10px rgba(30,43,41,.06);display:flex;align-items:center;gap:8px;}
.pok-fact .dot{width:8px;height:8px;border-radius:50%;background:var(--pok-mint);flex-shrink:0;}

/* -- Section-Überschriften (Räume-Grid, Hygiene) -- */
.pok-praxis-section-head{max-width:700px;margin:0 auto 3rem;text-align:center;}
.pok-praxis-section-head h2{font-size:2.1rem;}
.pok-praxis-section-head p{color:#3d4a48;font-size:1.02rem;margin:0;}

/* -- Räume-Grid -- */
.pok-praxis-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.pok-praxis-tile{border-radius:14px;overflow:hidden;position:relative;aspect-ratio:3/4;}
.pok-praxis-tile img{width:100%;height:100%;object-fit:cover;display:block;}
.pok-praxis-tile .cap{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(30,43,41,.88));color:#fff;padding:36px 16px 14px;}
.pok-praxis-tile .cap b{display:block;font-family:var(--pok-font-head);font-size:1.15rem;font-weight:600;}
.pok-praxis-tile .cap span{font-size:.8rem;color:rgba(255,255,255,.85);}

/* -- Hygiene / Sterilisation -- */
.pok-hygiene-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin-bottom:3rem;}
.pok-hygiene-img{border-radius:14px;overflow:hidden;aspect-ratio:4/3;}
.pok-hygiene-img img{width:100%;height:100%;object-fit:cover;display:block;}
.pok-hygiene-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.pok-hygiene-step{background:#fff;border:1px solid rgba(30,43,41,.06);border-radius:14px;padding:1.6rem;box-shadow:0 2px 16px rgba(30,43,41,.06);}
.pok-hygiene-step .num{font-family:var(--pok-font-head);font-size:1.6rem;color:var(--pok-mint-text);font-weight:700;margin-bottom:.5rem;}
.pok-hygiene-step h3{color:var(--pok-dark);font-size:1.15rem;margin-bottom:.4rem;}
.pok-hygiene-step p{color:#3d4a48;font-size:.92rem;margin:0;}

/* -- CTA-Band -- */
.pok-praxis-cta{background:var(--pok-dark);color:#fff;padding:56px 0;text-align:center;}
.pok-praxis-cta h2{color:#fff;font-size:1.9rem;}
.pok-praxis-cta p{color:rgba(255,255,255,.8);margin-bottom:1.6rem;}

/* -- Responsive -- */
@media (max-width: 991px){
  .pok-praxis-hero{grid-template-columns:1fr;}
  .pok-praxis-hero-img{order:-1;}
  .pok-praxis-grid{grid-template-columns:repeat(2,1fr);}
  .pok-hygiene-grid{grid-template-columns:1fr 1fr;}
  .pok-hygiene-steps{grid-template-columns:1fr;}
  .pok-praxis-hero h1{font-size:2.1rem;}
  .pok-praxis-section-head h2{font-size:1.7rem;}
}
@media (max-width: 575px){
  .pok-praxis-grid{grid-template-columns:1fr;}
  .pok-hygiene-grid{grid-template-columns:1fr;}
  .pok-praxis-hero h1{font-size:1.75rem;}
}

/* =========================================================
   17. Kontakt-Seite (/kontakt)
   Noch NICHT live verifiziert. 4 Reihen: Hero/Intro
   (#F5F7F6) -> Kontaktdaten & Öffnungszeiten (#FFFFFF) -> Anfahrt/
   Lage mit OpenStreetMap-Einbettung (#F5F7F6) -> CTA-Band (#1E2B29).
   Reihen-Hintergrund/-Textfarbe wird im SP-Page-Builder-Reihen-Panel
   gesetzt, NICHT hier im HTML. Nutzt bewusst OpenStreetMap statt
   Google Maps (kein Cookie-Consent-Tool nötig) und verzichtet
   bewusst auf ein Kontaktformular (konsistent zum Rest der Seite:
   nur tel:/mailto:-Links, kein Formular).
   ========================================================= */

/* -- Hero/Intro -- */
.pok-kontakt-hero{max-width:760px;margin:0 auto;text-align:center;padding:20px 0;}
.pok-kontakt-eyebrow{color:var(--pok-mint-text);font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:.8rem;}
.pok-kontakt-hero h1{font-size:2.6rem;margin-bottom:.9rem;}
.pok-kontakt-lead{font-size:1.08rem;color:#3d4a48;margin:0 0 1.8rem;}
.pok-kontakt-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* -- Kontaktdaten & Öffnungszeiten -- */
.pok-kontakt-cards{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1000px;margin:0 auto;}
.pok-kontakt-card{background:var(--pok-grey-light);border-radius:16px;padding:2rem 2rem 1.8rem;box-shadow:0 2px 16px rgba(30,43,41,.06);}
.pok-kontakt-card h3{margin-top:0;margin-bottom:1.1rem;font-size:1.35rem;}
.pok-kontakt-praxisname{font-weight:700;margin:0 0 1rem;}

.pok-kontakt-detail{display:flex;flex-direction:column;gap:2px;padding:.6rem 0;border-top:1px solid rgba(30,43,41,.08);}
.pok-kontakt-detail:first-of-type{border-top:none;padding-top:0;}
.pok-kontakt-detail .label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--pok-mint-text);}
.pok-kontakt-detail a{color:var(--pok-dark);font-weight:600;}
.pok-kontakt-detail a:hover{color:var(--pok-mint-text);}

.pok-oeff-row{display:flex;justify-content:space-between;gap:16px;padding:.7rem 0;border-top:1px solid rgba(30,43,41,.08);}
.pok-oeff-row:first-of-type{border-top:none;padding-top:0;}
.pok-oeff-row .day{font-weight:700;}
.pok-oeff-row .time{color:#3d4a48;text-align:right;}
.pok-oeff-note{font-size:.85rem;color:var(--pok-meta);margin:1rem 0 0;}

/* -- Anfahrt/Lage -- */
.pok-anfahrt-head{max-width:700px;margin:0 auto 3rem;text-align:center;}
.pok-anfahrt-head h2{font-size:2.1rem;}
.pok-anfahrt-head p{color:#3d4a48;font-size:1.02rem;margin:0;}

.pok-anfahrt-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start;}
.pok-anfahrt-map{display:flex;flex-direction:column;gap:14px;}
.pok-anfahrt-map iframe{width:100%;height:340px;border:0;border-radius:16px;box-shadow:0 12px 40px rgba(30,43,41,.15);}
.pok-anfahrt-map .pok-btn-outline-dark{align-self:flex-start;}
.pok-anfahrt-info h3{font-size:1.2rem;margin:1.4rem 0 .5rem;}
.pok-anfahrt-info p{color:#3d4a48;font-size:.95rem;margin:0;}

/* -- CTA-Band -- */
.pok-kontakt-cta{background:var(--pok-dark);color:#fff;padding:56px 0;text-align:center;}
/* Zeichen kommt komplett aus dem CSS (wie das Telefon-Icon in Abschnitt 4),
   damit Joomlas Text-Filter im Raw-HTML-Feld es nicht als "unbekannte
   Entität" rausfiltern kann – das HTML-Element bleibt dafür leer. */
.pok-kontakt-cta-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;border:2px solid var(--pok-mint);margin-bottom:1.1rem;}
.pok-kontakt-cta-icon::before{
  content:"\201D";
  display:block;
  font-family:var(--pok-font-head);
  font-size:2rem;
  font-weight:700;
  line-height:1;
  color:var(--pok-mint);
  transform:translateY(-2px);
}
.pok-kontakt-cta h2{color:#fff;font-size:1.9rem;margin:0 0 .6rem;}
.pok-kontakt-cta p{color:rgba(255,255,255,.8);margin-bottom:1.6rem;max-width:560px;margin-left:auto;margin-right:auto;}

/* -- Responsive -- */
@media (max-width: 991px){
  .pok-kontakt-hero h1{font-size:2.1rem;}
  .pok-anfahrt-grid{grid-template-columns:1fr;}
}
@media (max-width: 767px){
  .pok-kontakt-cards{grid-template-columns:1fr;}
}
@media (max-width: 575px){
  .pok-kontakt-hero h1{font-size:1.75rem;}
  .pok-kontakt-actions .pok-btn,.pok-kontakt-actions .pok-btn-outline-dark{width:100%;text-align:center;}
  .pok-oeff-row{flex-direction:column;gap:2px;}
  .pok-oeff-row .time{text-align:left;}
  .pok-anfahrt-map iframe{height:260px;}
}

/* =========================================================
   18. Wissenswertes-Seite (/wissenswertes)
   Noch NICHT live verifiziert. 5 Reihen: Hero/Intro (#F5F7F6) ->
   Geschichte der Podologie / Zeitstrahl (#FFFFFF) -> Informationen
   zum Podologengesetz / Akkordeon (#F5F7F6) -> Rechtliche
   Grundlagen (#FFFFFF) -> CTA-Band (#1E2B29). Reihen-Hintergrund/
   -Textfarbe wird im SP-Page-Builder-Reihen-Panel gesetzt, NICHT
   hier im HTML. Akkordeon nutzt natives <details> (kein JS), wie
   schon auf der Team-Seite (Abschnitt 14).

   WICHTIG: Die Original-Seite listete unter "Medizinproduktegesetz
   (MPG)" das inzwischen abgelöste MPG. Seit 26.05.2021 gilt die
   EU-Medizinprodukteverordnung (MDR), ergänzt durch das deutsche
   Medizinprodukterecht-Durchführungsgesetz (MPDG). Im "Rechtliche
   Grundlagen"-Block wurde das entsprechend aktualisiert.
   ========================================================= */

/* -- Hero/Intro -- */
.pok-wissen-hero{max-width:760px;margin:0 auto;text-align:center;padding:20px 0;}
.pok-wissen-eyebrow{color:var(--pok-mint-text);font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:.8rem;}
.pok-wissen-hero h1{font-size:2.6rem;margin-bottom:.9rem;}
.pok-wissen-hero p{font-size:1.08rem;color:#3d4a48;margin:0;}

/* -- Section-Überschriften (wiederverwendet für Geschichte/Info/Recht) -- */
.pok-wissen-section-head{max-width:700px;margin:0 auto 3rem;text-align:center;}
.pok-wissen-section-head h2{font-size:2.1rem;}
.pok-wissen-section-head p{color:#3d4a48;font-size:1.02rem;margin:0;}

/* -- Geschichte: Zeitstrahl -- */
.pok-timeline{max-width:760px;margin:0 auto;position:relative;padding-left:36px;}
.pok-timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:rgba(77,189,175,.3);}
.pok-timeline-item{position:relative;padding-bottom:2.2rem;}
.pok-timeline-item:last-child{padding-bottom:0;}
.pok-timeline-item::before{content:"";position:absolute;left:-36px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--pok-white);border:3px solid var(--pok-mint);}
.pok-timeline-item .era{color:var(--pok-mint-text);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.3rem;display:block;}
.pok-timeline-item h3{font-size:1.2rem;margin:0 0 .4rem;}
.pok-timeline-item p{color:#3d4a48;font-size:.94rem;margin:0;}

/* -- Informationen zum Podologengesetz: Akkordeon (natives <details>) -- */
.pok-wissen-info{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px;}
details.pok-info-item{background:#fff;border-radius:12px;box-shadow:0 2px 16px rgba(30,43,41,.06);overflow:hidden;}
details.pok-info-item summary{cursor:pointer;list-style:none;padding:1.1rem 1.4rem;font-family:var(--pok-font-body);font-weight:700;font-size:1rem;color:var(--pok-dark);display:flex;justify-content:space-between;align-items:center;gap:1rem;}
details.pok-info-item summary::-webkit-details-marker{display:none;}
details.pok-info-item summary::after{content:"+";font-size:1.3rem;color:var(--pok-mint-text);font-weight:400;flex-shrink:0;}
details.pok-info-item[open] summary::after{content:"\2013";}
details.pok-info-item[open] summary{border-bottom:1px solid var(--pok-grey-light);}
.pok-info-body{padding:0 1.4rem 1.3rem;}
.pok-info-body p{color:#3d4a48;font-size:.94rem;line-height:1.7;margin:0 0 .9rem;}
.pok-info-body p:last-child{margin-bottom:0;}
.pok-wissen-source{max-width:820px;margin:1.4rem auto 0;font-size:.82rem;color:var(--pok-meta);font-style:italic;}

/* -- Rechtliche Grundlagen -- */
.pok-legal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:1000px;margin:0 auto;}
.pok-legal-card{background:var(--pok-grey-light);border-radius:14px;padding:1.8rem;display:flex;flex-direction:column;gap:.7rem;}
.pok-legal-card h3{margin:0;font-size:1.2rem;}
.pok-legal-card p{color:#3d4a48;font-size:.92rem;margin:0;flex-grow:1;}
.pok-legal-card .pok-btn{align-self:flex-start;padding:.55rem 1.3rem;font-size:.85rem;}
.pok-wissen-disclaimer{max-width:1000px;margin:1.6rem auto 0;font-size:.82rem;color:var(--pok-meta);text-align:center;}

/* -- CTA-Band -- */
.pok-wissen-cta{background:var(--pok-dark);color:#fff;padding:56px 0;text-align:center;}
.pok-wissen-cta h2{color:#fff;font-size:1.9rem;}
.pok-wissen-cta p{color:rgba(255,255,255,.8);margin-bottom:1.6rem;}

/* -- Responsive -- */
@media (max-width: 991px){
  .pok-wissen-hero h1{font-size:2.1rem;}
  .pok-wissen-section-head h2{font-size:1.7rem;}
  .pok-legal-grid{grid-template-columns:1fr;}
}
@media (max-width: 575px){
  .pok-wissen-hero h1{font-size:1.75rem;}
  .pok-timeline{padding-left:30px;}
  .pok-timeline-item::before{left:-30px;}
}

/* =========================================================
   19. Impressum (/impressum) & Datenschutzerklärung
   (/datenschutz)
   Live und verifiziert (Stand 11.08.2026). Beide Seiten bewusst OHNE CTA-Band
   (reine Rechtstexte, kein Marketing-Ton) und OHNE eigenes
   Akkordeon-CSS für die Datenschutzseite – die nutzt bewusst
   dieselben details.pok-info-item-Klassen wie Abschnitt 18
   (Wissenswertes), damit nicht doppelter CSS-Code für dieselbe
   Optik entsteht.

   Rechtsgrundlage geprüft zum Stand 11.08.2026: Das TMG wurde durch
   das Digitale-Dienste-Gesetz (DDG) abgelöst (§ 5 DDG statt § 5
   TMG), das TTDSG durch das TDDDG (§ 25 TDDDG statt § 25 TTDSG).
   Texte entsprechend formuliert.
   ========================================================= */

/* -- Hero/Intro (beide Seiten) -- */
.pok-legal-hero{max-width:760px;margin:0 auto;text-align:center;padding:20px 0;}
.pok-legal-eyebrow{color:var(--pok-mint-text);font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:.8rem;}
.pok-legal-hero h1{font-size:2.6rem;margin-bottom:.9rem;}
.pok-legal-hero p{font-size:1.05rem;color:#3d4a48;margin:0;}

/* -- Impressum: Fließtext-Inhalt -- */
.pok-legal-content{max-width:760px;margin:0 auto;}
.pok-legal-content h2{font-size:1.5rem;margin:2.4rem 0 1rem;}
.pok-legal-content h2:first-child{margin-top:0;}
.pok-legal-content p{color:#3d4a48;font-size:.96rem;line-height:1.75;margin:0 0 .9rem;}
.pok-legal-content ul{color:#3d4a48;font-size:.96rem;line-height:1.75;margin:0 0 .9rem;padding-left:1.3rem;}
.pok-legal-content li{margin-bottom:.35rem;}
.pok-legal-content a{font-weight:600;}

.pok-legal-block{background:var(--pok-grey-light);border-radius:14px;padding:1.6rem 1.8rem;margin-bottom:0;}
.pok-legal-block p:last-child{margin-bottom:0;}

/* -- Hinweis-/Platzhalter-Boxen für noch offene Angaben (USt, Aufsichtsbehörde etc.) -- */
.pok-legal-todo{background:#fdf3ec;border:1px dashed #d98a4f;border-radius:10px;padding:1rem 1.2rem;font-size:.88rem;color:#8a4a1f;margin:1rem 0 0;}
.pok-legal-todo b{display:block;margin-bottom:.3rem;color:#b4643a;}
.pok-legal-todo ul{margin:.4rem 0 0;padding-left:1.2rem;}
.pok-legal-todo li{margin-bottom:.2rem;}

/* -- Datenschutzerklärung: Akkordeon (nutzt details.pok-info-item aus Abschnitt 18) -- */
.pok-legal-accordion{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px;}
.pok-legal-source{max-width:820px;margin:1.4rem auto 0;font-size:.82rem;color:var(--pok-meta);text-align:center;}

/* -- Responsive -- */
@media (max-width: 991px){
  .pok-legal-hero h1{font-size:2.1rem;}
}
@media (max-width: 575px){
  .pok-legal-hero h1{font-size:1.75rem;}
  .pok-legal-block{padding:1.2rem 1.3rem;}
}

/* =========================================================
   20. Leistungen-Seite (/leistungen)
   Noch NICHT live verifiziert. Die Seite nutzte im HTML bereits
   eigene pok-*-Klassen (Hero-Grid, Breadcrumb, Checkliste,
   Leistungsspektrum-Karten, Ablauf-Schritte, Hinweis-Band,
   Unterseiten-Teaser), für die bislang keine CSS-Regeln existierten
   -- die Seite erschien dadurch größtenteils unformatiert (Bug-
   Meldung "fehlerhaftes CSS auf der Leistungsseite").

   Zusätzlicher Fix in diesem Abschnitt betrifft NICHT das CSS,
   sondern die Klassenwahl im Seiten-HTML selbst: der "Jetzt
   anrufen"-Button im Hinweis-Band (.pok-note-band-actions) nutzte
   .pok-btn-outline (weißer Rahmen/Text, siehe Abschnitt 4 -- gedacht
   für DUNKLE Hintergründe) auf dem hellen .pok-note-band-Hintergrund
   und war dadurch unsichtbar (weiß auf weiß). Im Backend wurde die
   Klasse auf .pok-btn-outline-dark umgestellt.
   ========================================================= */

/* -- Breadcrumb -- */
.pok-breadcrumb{font-size:.82rem;color:var(--pok-meta);margin:0 0 1rem;}
.pok-breadcrumb a{color:var(--pok-meta);}
.pok-breadcrumb a:hover{color:var(--pok-mint-text);}

/* -- Kicker/Eyebrow (wiederverwendetes Muster, z.B. Abschnitt 14/18/19) -- */
.pok-page-kicker,
.pok-section-kicker{
  color:var(--pok-mint-text);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  display:block;
  margin-bottom:.8rem;
}

/* -- Hero (zweispaltig: Text + Bild) -- */
.pok-page-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;}
.pok-page-hero-grid h1{font-size:2.5rem;line-height:1.15;margin:0 0 1rem;}
.pok-page-hero-grid h1 em{font-style:italic;color:var(--pok-mint-text);}
.pok-page-hero-grid p{font-size:1.05rem;color:#3d4a48;margin:0;}
.pok-page-hero-img{border-radius:16px;overflow:hidden;box-shadow:0 12px 40px rgba(30,43,41,.18);aspect-ratio:4/5;}
.pok-page-hero-img img{width:100%;height:100%;object-fit:cover;display:block;}

/* -- Checkliste unter dem Hero -- */
.pok-infobar-row{display:flex;flex-wrap:wrap;gap:14px;margin:1.8rem 0 0;}
.pok-infobar-item{display:flex;align-items:center;gap:10px;background:var(--pok-grey-light);border-radius:999px;padding:.65rem 1.2rem .65rem .65rem;font-size:.85rem;font-weight:600;color:var(--pok-dark);}
.pok-infobar-item .pok-dot{width:22px;height:22px;border-radius:50%;background:var(--pok-mint);flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.pok-infobar-item .pok-dot::before{content:"\2713";color:#fff;font-size:.7rem;font-weight:700;}

/* -- Section-Head (wiederverwendetes Muster für Zwischenüberschriften) -- */
.pok-section-head{max-width:700px;margin:0 auto 3rem;text-align:center;}
.pok-section-head h2{font-size:2.1rem;margin:0;}

/* -- Leistungsspektrum: Karten -- */
.pok-service-detail{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.pok-service-detail-card{background:var(--pok-grey-light);border-radius:16px;padding:2rem;display:flex;flex-direction:column;box-shadow:0 2px 16px rgba(30,43,41,.06);}
.pok-service-detail-card h3{margin:0 0 .6rem;font-size:1.25rem;}
.pok-service-detail-card p{color:#3d4a48;font-size:.92rem;line-height:1.6;margin:0;}
.pok-service-detail-card--img{grid-column:span 1;}
.pok-service-detail-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;margin-top:1.2rem;order:99;}
/* Optionaler "Mehr erfahren"-Link am Kartenende (z.B. Karte 06 Nagelpilz erkennen),
   wird per margin-top:auto im Flex-Layout an den unteren Kartenrand gedrückt,
   damit alle Karten trotz unterschiedlicher Textlänge bündig abschließen. */
.pok-service-detail-card .pok-teaser-link{margin-top:auto;padding-top:1.1rem;}

.pok-service-list{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem;}
.pok-service-list li{position:relative;padding-left:1.4rem;color:#3d4a48;font-size:.9rem;line-height:1.5;}
.pok-service-list li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--pok-mint-text);font-weight:700;}

/* -- Behandlungsablauf: Schritte -- */
.pok-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.pok-step{text-align:center;padding:0 6px;}
.pok-step-num{width:52px;height:52px;border-radius:50%;background:var(--pok-mint);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--pok-font-head);font-size:1.4rem;font-weight:700;margin:0 auto 1rem;}
.pok-step h4{font-size:1.1rem;margin:0 0 .5rem;}
.pok-step p{color:#3d4a48;font-size:.9rem;line-height:1.5;margin:0;}

/* -- Hinweis-Band (ärztliche Verordnung + CTA) -- */
.pok-note-band{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;background:var(--pok-grey-light);border-radius:16px;padding:2rem 2.4rem;}
.pok-note-band h3{font-size:1.3rem;margin:0 0 .5rem;}
.pok-note-band p{color:#3d4a48;font-size:.94rem;line-height:1.6;margin:0;max-width:560px;}
.pok-note-band-actions{flex-shrink:0;}

/* -- Unterseiten-Teaser (Preisliste etc.) -- */
.pok-subpage-teasers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}
.pok-teaser-card{background:#fff;border:1px solid rgba(30,43,41,.08);border-radius:14px;padding:1.8rem;box-shadow:0 2px 16px rgba(30,43,41,.06);display:flex;flex-direction:column;gap:.6rem;}
.pok-teaser-card h3{margin:0;font-size:1.2rem;}
.pok-teaser-card p{color:#3d4a48;font-size:.92rem;margin:0;flex-grow:1;}
.pok-teaser-link{font-weight:700;color:var(--pok-mint-text);display:inline-flex;align-items:center;gap:6px;}
.pok-teaser-link::after{content:"\2192";transition:transform .2s ease;}
.pok-teaser-link:hover::after{transform:translateX(4px);}

/* -- Responsive -- */
@media (max-width: 991px){
  .pok-page-hero-grid{grid-template-columns:1fr;gap:30px;}
  .pok-page-hero-img{order:-1;}
  .pok-service-detail{grid-template-columns:repeat(2,1fr);}
  .pok-steps{grid-template-columns:repeat(2,1fr);}
  .pok-note-band{padding:1.8rem;}
}
@media (max-width: 767px){
  .pok-infobar-row{flex-direction:column;align-items:stretch;}
  .pok-infobar-item{border-radius:12px;}
}
@media (max-width: 575px){
  .pok-page-hero-grid h1{font-size:1.9rem;}
  .pok-service-detail{grid-template-columns:1fr;}
  .pok-steps{grid-template-columns:1fr;}
  .pok-subpage-teasers{grid-template-columns:1fr;}
  .pok-note-band{flex-direction:column;text-align:center;padding:1.6rem;}
  .pok-note-band p{max-width:100%;}
}

/* =========================================================
   22. Preise-Unterseite (/leistungen/preise)
   Noch NICHT live verifiziert. Seite nutzte pok-price-grid/
   pok-price-card/pok-accordion/pok-fee-table-Klassen im HTML, für
   die es hier noch keine Regeln gab (analog zum Leistungen-Bug vom
   12.08.2026, Abschnitt 20) -- Seite dürfte bislang größtenteils
   unformatiert gewesen sein, inkl. der Gebührenordnung-für-
   Heilpraktiker-Tabelle ganz unten (dieser Teil wird inhaltlich
   NICHT angetastet, nur mit CSS versehen).
   ========================================================= */

/* -- Preis-Karten-Grid -- */
.pok-price-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
.pok-price-card{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 2px 16px rgba(30,43,41,.06);
  padding:1.8rem 2rem;
}
.pok-price-card h3{font-size:1.2rem;margin:0 0 1rem;}
.pok-price-card--wide{grid-column:span 2;}
.pok-price-card table{width:100%;border-collapse:collapse;}
.pok-price-table th{padding:.6rem 1rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;text-align:left;}
.pok-price-table th:last-child{text-align:right;}
.pok-price-table td{padding:.75rem 1rem;font-size:.92rem;color:var(--pok-dark);vertical-align:top;}
.pok-price-table td:last-child{text-align:right;white-space:nowrap;font-weight:700;color:var(--pok-mint-text);font-family:var(--pok-font-head);font-size:1.65rem;line-height:1;}
.pok-price-note{display:block;font-size:.78rem;font-weight:400;color:var(--pok-meta);margin-top:2px;}
.pok-price-footnote{font-size:.82rem;color:var(--pok-meta);font-style:italic;margin:1rem 0 0;}

/* -- Gebührenordnung für Heilpraktiker: Akkordeon -- */
.pok-accordion{
  max-width:820px;
  margin:0 auto;
  background:#fff;
  border-radius:14px;
  box-shadow:0 2px 16px rgba(30,43,41,.06);
  overflow:hidden;
}
.pok-accordion summary{
  cursor:pointer;
  list-style:none;
  padding:1.1rem 1.4rem;
  font-family:var(--pok-font-body);
  font-weight:700;
  font-size:1rem;
  color:var(--pok-dark);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}
.pok-accordion summary::-webkit-details-marker{display:none;}
.pok-accordion-icon{color:var(--pok-mint);font-size:1.3rem;font-weight:400;flex-shrink:0;}
.pok-accordion[open] summary{border-bottom:1px solid var(--pok-grey-light);}
.pok-accordion-body{padding:1.2rem 1.4rem 1.5rem;}
.pok-accordion-intro{font-size:.92rem;color:#3d4a48;line-height:1.7;margin:0 0 1.2rem;}
.pok-fee-table-wrap{overflow-x:auto;}
.pok-fee-table{width:100%;border-collapse:collapse;font-size:.86rem;}
.pok-fee-table th{background:var(--pok-grey-light);color:var(--pok-dark);text-align:left;padding:.6rem .8rem;font-weight:700;white-space:nowrap;}
.pok-fee-table td{padding:.55rem .8rem;border-top:1px solid var(--pok-grey-light);color:#3d4a48;}
.pok-fee-table td:last-child{text-align:right;white-space:nowrap;font-weight:600;color:var(--pok-mint-text);}

/* -- Responsive -- */
@media (max-width: 767px){
  .pok-price-grid{grid-template-columns:1fr;}
  .pok-price-card--wide{grid-column:span 1;}
}
@media (max-width: 575px){
  .pok-price-card{padding:1.3rem 1.4rem;}
  .pok-price-table td:last-child{font-size:1.35rem;}
  .pok-accordion summary{padding:1rem 1.1rem;}
  .pok-accordion-body{padding:1rem 1.1rem 1.3rem;}
  .pok-fee-table th, .pok-fee-table td{padding:.5rem .6rem;font-size:.8rem;}
}

/* =========================================================
   23. Neue Unterseite /leistungen/nagelpilz-erkennen +
   Leistungsspektrum-Grid auf 3 Spalten umgestellt (13.08.2026).
   Noch NICHT live verifiziert.
   ========================================================= */

/* -- Modifier für 3er-Schritte-Reihen (statt der Standard-4er-Reihe
   in .pok-steps, siehe Abschnitt 20) -- damit 3 Vorgehensweise-
   Schritte nicht auf 4 Spalten verteilt werden. -- */
.pok-steps--3{grid-template-columns:repeat(3,1fr);}
@media (max-width: 991px){
  .pok-steps--3{grid-template-columns:1fr;}
}

/* -- Modifier für 5er-Schritte-Reihen (Behandlungsablauf /leistungen,
   erweitert von 4 auf 5 Schritte am 13.08.2026) -- desktop 5 nebeneinander,
   Tablet 3+2 zentriert (kein Waisen-Schritt), Mobil untereinander. -- */
.pok-steps--5{grid-template-columns:repeat(5,1fr);}
@media (max-width: 991px){
  .pok-steps--5{grid-template-columns:repeat(3,minmax(0,240px));justify-content:center;}
}
@media (max-width: 575px){
  .pok-steps--5{grid-template-columns:1fr;}
}

/* "Formular ausfüllen"-Link innerhalb eines Schritts (Schritt 1 Anamnese) */
.pok-step .pok-teaser-link{display:inline-flex;margin-top:.7rem;font-size:.88rem;}

/* =========================================================
   24. Mobile-Feinschliff & Geräte-Konsistenz (17.08.2026)
   Ergebnis des Mobil-Audits über alle Seiten in den Breiten
   320 / 360 / 375 / 390 / 412 / 430 / 560 / 576 / 667 / 768 /
   900 / 991 px. Behebt: einen echten Überlauf, zu kleine
   Touch-Flächen, gequetschte Preiszeilen, uneinheitliche
   Breakpoints und drei Stellen, an denen ältere iPhones
   objektiv etwas anderes rendern als Android/Desktop.
   ========================================================= */

/* -- 24.1 Korrektur zu Abschnitt 4: white-space:nowrap galt für ALLE
   Buttons. Bei langen Beschriftungen ("Vollständiger Gesetzestext",
   "Zur Website des Partners") kann das auf schmalen Geräten aus dem
   Container laufen. Nowrap wird deshalb auf den kurzen Anruf-Button
   begrenzt -- nur der soll garantiert einzeilig bleiben. -- */
.sppb-btn,
.pok-btn{ white-space: normal; }
a[href^="tel:"].pok-btn-call{ white-space: nowrap; }

/* -- 24.2 Touch-Flächen: Apple HIG und Material verlangen beide
   mind. 44 bzw. 48 px Höhe. Gemessen wurden 15 px (Topbar-Links),
   18 px ("Zu den Preisen"-Teaser) und 39 px (kleine Outline-Buttons
   in Karten). Auf dem Desktop bleibt alles wie es ist. -- */
@media (max-width: 991px){
  .pok-topbar-content a,
  .pok-teaser-link,
  .pok-breadcrumb a,
  .pok-footer-col a,
  .pok-footer-bottom a,
  .pok-kontakt-detail a{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Bewusst NICHT erfasst: Links mitten im Fließtext (Impressum,
     Datenschutz-Akkordeon). Ein 44-px-Kasten um ein Wort im Satz
     zerreißt den Zeilenfluss; WCAG 2.2 nimmt Links in laufendem
     Text von der Mindestgröße ausdrücklich aus. Stattdessen dort
     nur etwas mehr Zeilenabstand, damit sie leichter zu treffen
     sind: */
  .pok-legal-content p,
  .pok-info-body p{ line-height: 1.85; }
  .pok-btn,
  .sppb-btn,
  a[href^="tel:"].pok-btn-call{
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* -- 24.3 ECHTER ÜBERLAUF: .pok-partners-grid nutzt
   minmax(320px, 1fr). Auf einem 320-px-Gerät (iPhone SE 1. Gen.,
   iPhone 5/5s -- immer noch im Umlauf) bleiben nach den 15 px
   Container-Padding nur 290 px übrig, die Spalte erzwingt aber
   320 px: die Partner-Karte ragt 45 px über den rechten Rand, die
   ganze Seite lässt sich horizontal wegschieben. min() deckelt die
   Mindestbreite auf die tatsächlich verfügbare Breite. -- */
.pok-partners-grid{
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

/* -- 24.4 Preistabelle: Der Preis steht in einer eigenen Spalte mit
   white-space:nowrap und 1,65 rem Schriftgröße. Auf 320-390 px
   bleiben für die Leistungsbezeichnung nur ~150 px, lange Namen
   brechen auf 3-4 Zeilen um. Unter 480 px wird pro Zeile gestapelt:
   Leistung oben, Preis darunter -- deutlich ruhiger zu lesen. -- */
@media (max-width: 480px){
  .pok-price-table thead{
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .pok-price-table tr{
    display: block;
    padding: .9rem 0;
    border-bottom: 1px solid var(--pok-grey-light);
  }
  .pok-price-table tr:last-child{ border-bottom: none; }
  .pok-price-table td{
    display: block;
    padding: 0;
    border-bottom: none;
  }
  .pok-price-table td:last-child{
    text-align: left;
    margin-top: .5rem;
    font-size: 1.5rem;
  }
  /* Die Mint-Kopfzeile entfällt beim Stapeln -- damit die Karte ihren
     Farbakzent behält, bekommt die Kategorie-Überschrift stattdessen
     eine Mint-Linie. */
  .pok-price-card h3{
    border-bottom: 3px solid var(--pok-mint);
    padding-bottom: .6rem;
  }
}

/* -- 24.5 Hero-Bilder: Seitenverhältnis 4/5 (hochkant) bedeutet auf
   einem 390-px-Gerät rund 490 px Bildhöhe -- der eigentliche Text
   beginnt erst unterhalb des ersten Bildschirms. Auf Mobil flacher,
   damit Überschrift und Anruf-Button ohne Scrollen sichtbar sind. -- */
@media (max-width: 767px){
  .pok-hero-img,
  .pok-page-hero-img{ aspect-ratio: 3 / 2; }
  .pok-praxis-hero-img{ aspect-ratio: 3 / 2; }
}

/* -- 24.6 Hinweis-Band: unter 575 px war der komplette Block
   zentriert. Zentrierter Fließtext über 4-6 Zeilen liest sich
   deutlich schlechter als linksbündiger (flatternder linker Rand).
   Überschrift und Text linksbündig, Button volle Breite. -- */
@media (max-width: 575px){
  .pok-note-band{ text-align: left; align-items: stretch; }
  .pok-note-band-actions{ width: 100%; }
}

/* -- 24.7 GebüH-Tabelle: liegt in .pok-fee-table-wrap mit
   overflow-x:auto, ist auf schmalen Geräten also seitlich
   scrollbar -- das sieht man ihr aber nicht an. Kurzer Hinweis
   plus weicher Verlauf am rechten Rand als Scroll-Signal. -- */
@media (max-width: 767px){
  .pok-fee-table-wrap{ position: relative; }
  .pok-fee-table-wrap::before{
    content: "Tabelle seitlich scrollbar \2192";
    display: block;
    font-size: .78rem;
    color: var(--pok-meta);
    font-style: italic;
    margin-bottom: .4rem;
  }
}

/* -- 24.8 GERÄTE-KONSISTENZ 1: aspect-ratio wird an 9 Stellen
   genutzt. Safari kann das erst ab iOS 15 (Sept. 2021) -- auf
   iPhone 6s/7/8 mit iOS 14 kollabieren die Bildkacheln, weil das
   img zwar height:100% hat, der Container ohne aspect-ratio aber
   keine Höhe bekommt: die Bilder verschwinden komplett. Fallback
   nur für Browser OHNE aspect-ratio-Unterstützung. -- */
@supports not (aspect-ratio: 1 / 1){
  .pok-hero-img, .pok-page-hero-img, .pok-praxis-hero-img,
  .pok-facility-tile, .pok-praxis-tile, .pok-hygiene-img,
  details.pok-team-card .photo{
    height: auto;
    min-height: 180px;
  }
  .pok-hero-img img, .pok-page-hero-img img, .pok-praxis-hero-img img,
  .pok-facility-tile img, .pok-praxis-tile img, .pok-hygiene-img img,
  details.pok-team-card .photo img, .pok-team-card img,
  .pok-service-detail-img{
    height: auto;
  }
}

/* -- 24.9 GERÄTE-KONSISTENZ 2: Schrift-Fallbacks. Solange die
   selbst gehosteten Dateien laden, sieht alles gleich aus. Fällt
   eine Datei aus (Cache, Netz, Content-Blocker), rendert die
   bisherige Angabe 'Cormorant Garamond', serif auf dem iPhone
   Times New Roman und auf Android Noto Serif -- zwei völlig
   verschiedene Seiten. Mit expliziter Fallback-Kette bleibt der
   Unterschied klein. -- */
:root{
  --pok-font-head: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --pok-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* -- 24.10 GERÄTE-KONSISTENZ 3: :has() im Partner-Grid (Abschnitt 15)
   versteht Safari erst ab 15.4 und Firefox für Android erst ab
   Version 121. Dort greift die Regel nicht und die einzelne
   Partnerkarte wird über die volle Breite gezogen. Gleiches
   Ergebnis ohne :has() über einen Zusatz-Deckel auf Mobil. -- */
@media (max-width: 767px){
  .pok-partners-grid{ max-width: 520px; }
}

/* -- 24.11 Breakpoint-Vereinheitlichung: Die Datei mischt 560 px
   (Abschnitt 13) und 575 px (Abschnitte 14-22) als "Handy"-Grenze.
   Zwischen 561 und 575 px verhalten sich dadurch gleichartige
   Grids unterschiedlich (Services noch 2-spaltig, Team schon
   1-spaltig). Alles auf 575 px vereinheitlicht -- der Bootstrap-
   Standard, den Helix Ultimate ohnehin verwendet. -- */
@media (max-width: 575px){
  .pok-services-grid,
  .pok-services-grid.pok-services-grid--2{ grid-template-columns: 1fr; }
  .pok-team-cards{ grid-template-columns: 1fr; max-width: 280px; margin: 56px auto 0; }
  .pok-hero-actions .pok-btn,
  .pok-hero-actions .pok-btn-outline,
  .pok-hero-actions .pok-btn-outline-dark{ width: 100%; }
}

/* -- 24.12 Lange deutsche Komposita: "Kooperationspartnern?" ist bei
   320 px Bildschirmbreite und 1,9 rem Schriftgröße breiter als die
   verfügbaren 290 px und schiebt die ganze Seite auf. Betrifft
   grundsätzlich jede Überschrift mit einem langen zusammengesetzten
   Wort -- Podologie-Fachbegriffe sind voll davon. break-word greift
   nur im Notfall, die Silbentrennung nur auf schmalen Geräten. -- */
h1, h2, h3, h4, h5, h6{
  overflow-wrap: break-word;
}
@media (max-width: 767px){
  body{ overflow-wrap: break-word; }
  h1, h2, h3, h4{ hyphens: auto; }
}

/* -- 24.13 Nachtrag zu 24.2: In den Partnerkarten auf /kooperationen
   stehen Telefon und E-Mail als Links in einer Textzeile mit
   vorangestelltem Label. Sie sind eigenständige Kontaktwege, keine
   Verweise im Fließtext -- also gehören sie zu den Tippzielen. -- */
@media (max-width: 991px){
  .pok-partner-meta a{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
/* =========================================================
   25. Kopfbereich und Startseiten-Hero auf Mobilgeräten
   (17.08.2026, nach Auswertung eines Seiten-Snapshots)
   ========================================================= */

/* -- 25.1 Tippziel Burger-Menü. Gemessen: das Icon ist 25 x 26 px,
   der umgebende Link 25 px breit. Apple verlangt 44 x 44, Google 48.
   Das ist der einzige Weg zur Navigation auf dem Handy und
   gleichzeitig das kleinste Ziel der ganzen Seite.

   ACHTUNG, hier lag ein Fehler in der ersten Fassung: Die Regel
   erfasste zusätzlich .burger-icon und setzte darauf display:flex.
   .burger-icon ist aber der Container der DREI BALKEN
   (<span><span><span>). Als Flex-Zeile verlieren die Balken ihre
   Breite und schrumpfen auf 0 x 2 px -- das Menü-Symbol verschwindet
   spurlos. Vergrößert wird deshalb ausschließlich der umgebende
   Link; das Icon darin bleibt unangetastet. -- */
@media (max-width: 991px){
  #sp-header .offcanvas-toggler-right,
  #sp-header .offcanvas-toggler-left,
  #sp-header .offcanvas-toggler-secondary,
  #sp-header .offcanvas-toggler-primary{
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
}

/* -- 25.2 Kopfhöhe. Gemessen bei 390 px Breite: Topbar 68 px plus
   Header 174 px = 242 px, bevor überhaupt Inhalt beginnt -- fast ein
   Drittel eines iPhone-Bildschirms. Die Topbar wiederholt dabei nur,
   was Header und Fußzeile ohnehin zeigen. Kompakter statt weg:
   die Nummer bleibt oben antippbar. -- */
@media (max-width: 767px){
  #sp-top-bar{
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .pok-topbar-content{
    gap: 4px 18px;
    font-size: .78rem;
    line-height: 1.5;
  }
  #sp-header .row{
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* Der Anruf-Button im Header ist mit 1,05 rem und 1 rem Innenabstand
     größer als jeder andere Button der Seite. Auf Handybreite etwas
     zurücknehmen -- er bleibt mit 48 px Höhe bequem treffbar. */
  #sp-header a[href^="tel:"].pok-btn-call{
    padding: .7rem 1.1rem;
    font-size: .95rem;
  }
}

/* -- 25.3 Startseiten-Hero: Reihenfolge auf dem Handy.
   Gemessen bei 390 × 844 px: Die Überschrift beginnt bei y = 858,
   der Anruf-Button bei y = 1092. Auf dem ersten Bildschirm sieht der
   Besucher also ausschließlich Topbar, Header und ein Foto -- keine
   Überschrift, keinen Satz, keinen Button. Auf Mobil zuerst der Text,
   das Bild folgt darunter. Ab 901 px bleibt das zweispaltige Layout
   mit Bild rechts unverändert. -- */
@media (max-width: 900px){
  .pok-hero-img{ order: 1; }
  .pok-hero-text{ order: 0; }
}

/* -- 25.4 Menüpunkte im ausgeklappten Off-Canvas: gemessen 38 px hoch.
   Wieder unter den 44 px, die Apple für Tippziele vorgibt -- und das
   an der Stelle, an der auf dem Handy die gesamte Navigation
   stattfindet. Die Zeilen bekommen etwas mehr Luft. -- */
@media (max-width: 991px){
  .offcanvas-inner .mod-menu > li > a,
  .offcanvas-inner .mod-menu > li > .menu-separator{
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .offcanvas-inner .mod-menu .menu-toggler{
    min-width: 44px;
    min-height: 44px;
  }
}


/* =========================================================
   26. Erstanmeldung / Online-Anamnese (/erstanmeldung)
   Neu am 23.10.2026. Eigener Menüpunkt "Erstanmeldung".
   Aufbau: Hero mit Freiwilligkeits-Hinweis (#F5F7F6) ->
   Formular (#FFFFFF). Reihen-Hintergrund wie überall im
   SP-Page-Builder-Reihen-Panel setzen, nicht hier.

   Drei Dinge sind datenschutzrechtlich gesetzt und dürfen beim
   Umgestalten nicht verloren gehen:
   1) Die beiden Einwilligungs-Häkchen sind getrennt und keines ist
      vorausgewählt (kein "checked" im HTML).
   2) Telefon und E-Mail sind einzeln NICHT required -- Pflicht ist
      nur, dass eines von beiden ausgefüllt ist. Das prüft das
      Skript im Block, zusätzlich das Plugin auf dem Server.
   3) Es gibt kein Upload-Feld. Fotos werden ausschließlich in der
      Praxis und mit eigener Einwilligung aufgenommen.
   ========================================================= */

/* -- Hero -- */
.pok-form-hero{max-width:820px;margin:0 auto;text-align:center;padding:20px 0;}
.pok-form-hero h1{font-size:2.5rem;margin:0 0 .9rem;}
.pok-form-hero p{font-size:1.08rem;color:#3d4a48;margin:0 auto;max-width:680px;}

/* Hinweis auf die Freiwilligkeit. Steht bewusst als eigener Kasten über
   dem Formular und nicht als Fußnote: Patientinnen und Patienten sollen
   vor dem Ausfüllen sehen, dass sie den Bogen auch in der Praxis auf
   Papier bekommen. */
.pok-form-notice{
  background:#fff;
  border:1px solid var(--pok-mint);
  border-left:5px solid var(--pok-mint);
  border-radius:12px;
  padding:1.2rem 1.5rem;
  margin:1.8rem auto 0;
  max-width:760px;
  text-align:left;
}
.pok-form-notice b{display:block;margin-bottom:.35rem;font-size:1.02rem;}
.pok-form-notice p{font-size:.95rem;color:#3d4a48;margin:0;line-height:1.65;}

.pok-trust-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:1.6rem;}
.pok-trust-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid #dfe6e4;border-radius:999px;
  padding:.5rem 1.1rem;font-size:.85rem;font-weight:600;color:var(--pok-dark);
}
/* Zeichen kommen aus dem CSS, nicht aus dem HTML -- Joomlas Textfilter
   im Raw-HTML-Feld hat auf der Kontakt-Seite schon einmal eine
   HTML-Entität verschluckt (siehe Abschnitt 17). */
.pok-trust-badge--lock::before{content:"\1F512";font-size:.95em;}
.pok-trust-badge--time::before{content:"\23F1";font-size:.95em;}
.pok-trust-badge--revoke::before{content:"\2713";color:var(--pok-mint-text);font-weight:700;}

/* -- Formular-Rahmen -- */
.pok-form{max-width:780px;margin:0 auto;}

.pok-form fieldset{
  border:1px solid #dfe6e4;
  border-left:4px solid var(--pok-mint);
  border-radius:12px;
  padding:1.6rem 1.8rem;
  margin:0 0 1.4rem;
  background:#fff;
}
.pok-form legend{
  font-family:var(--pok-font-head);
  font-weight:700;
  font-size:1.35rem;
  color:var(--pok-dark);
  padding:0 .4rem;
}
.pok-form legend .pok-opt{
  font-family:var(--pok-font-body);
  font-size:.88rem;
  font-weight:400;
  color:var(--pok-meta);
}

.pok-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.3rem;margin-top:.5rem;}
.pok-field{display:flex;flex-direction:column;gap:.4rem;}
.pok-field--full{grid-column:1 / -1;}

.pok-form label{
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--pok-meta);
}
.pok-form label .pok-opt{text-transform:none;font-weight:400;color:#93a19d;}
/* Pflichtfeld-Stern: rot wäre auf Weiß nur knapp über der Grenze und
   signalisiert Fehler. Mint-dunkel ist ruhiger und mit 5,86:1 sicher
   lesbar. Zusätzlich steht unter dem Formular im Klartext, was Pflicht
   ist -- Farbe allein darf nie der einzige Träger einer Information sein. */
.pok-form .pok-req{color:var(--pok-mint-text);font-weight:700;}

/* 17px: unter 16px zoomt iOS beim Antippen automatisch in das Feld
   hinein und verschiebt die ganze Seite. */
.pok-form input[type=text],
.pok-form input[type=email],
.pok-form input[type=tel],
.pok-form input[type=date],
.pok-form select,
.pok-form textarea{
  font-family:var(--pok-font-body);
  font-size:17px;
  line-height:1.4;
  padding:.8rem .85rem;
  min-height:48px;
  border:1.5px solid #dfe6e4;
  border-radius:8px;
  color:var(--pok-dark);
  background:#fcfdfd;
  width:100%;
  -webkit-appearance:none;
  appearance:none;
}
.pok-form select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%231E2B29' d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;
  background-position:right .7rem center;
  background-size:1.4em;
  padding-right:2.6rem;
}
.pok-form textarea{min-height:92px;resize:vertical;}

.pok-form input:focus,
.pok-form select:focus,
.pok-form textarea:focus{
  outline:3px solid var(--pok-mint-dark);
  outline-offset:1px;
  border-color:var(--pok-mint-dark);
}

.pok-field-hint{font-size:.86rem;color:var(--pok-meta);margin:.3rem 0 0;line-height:1.5;}

/* -- Radio-Zeile (ärztliche Verordnung) -- */
.pok-radio-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.2rem;}
.pok-radio-row label{
  display:inline-flex;align-items:center;gap:.6rem;
  text-transform:none;font-weight:500;font-size:1rem;color:var(--pok-dark);
  background:var(--pok-grey-light);
  border:1.5px solid transparent;
  border-radius:10px;
  padding:.7rem 1.1rem;
  min-height:48px;
  cursor:pointer;
}
.pok-radio-row input{width:22px;height:22px;accent-color:var(--pok-mint-dark);flex:0 0 auto;margin:0;}
.pok-radio-row input:focus-visible{outline:3px solid var(--pok-mint-dark);outline-offset:2px;}
.pok-radio-row label:has(input:checked){border-color:var(--pok-mint);background:rgba(77,189,175,.12);}

/* -- Vorerkrankungen: Checkbox-Raster -- */
/* Das ganze Feld ist klickbar, nicht nur das 26-px-Kästchen. Für Hände,
   die nicht mehr zielsicher treffen, ist das der eigentliche Gewinn. */
.pok-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem .9rem;margin-top:.4rem;}
.pok-check-grid label{
  display:flex;align-items:center;gap:.7rem;
  text-transform:none;font-weight:500;font-size:1rem;color:var(--pok-dark);
  background:var(--pok-grey-light);
  border:1.5px solid transparent;
  border-radius:10px;
  padding:.75rem .9rem;
  min-height:52px;
  cursor:pointer;
  line-height:1.35;
}
.pok-check-grid input{width:26px;height:26px;accent-color:var(--pok-mint-dark);flex:0 0 auto;margin:0;}
.pok-check-grid input:focus-visible{outline:3px solid var(--pok-mint-dark);outline-offset:2px;}
.pok-check-grid label:has(input:checked){border-color:var(--pok-mint);background:rgba(77,189,175,.12);}

/* -- Kurzinformation zum Datenschutz über den Häkchen -- */
.pok-privacy-short{
  background:var(--pok-grey-light);
  border-radius:12px;
  padding:1.1rem 1.3rem;
  margin:0 0 1.1rem;
}
.pok-privacy-short b{display:block;margin-bottom:.4rem;}
.pok-privacy-short p{font-size:.9rem;color:#3d4a48;line-height:1.7;margin:0;}
.pok-privacy-short a{font-weight:700;text-decoration:underline;}

/* -- Einwilligungs-Häkchen -- */
/* Zwei getrennte Kästen, keines vorausgewählt. Nicht zu einem Häkchen
   zusammenfassen: die Datenschutzexpertin hat die Trennung ausdrücklich
   verlangt (Kenntnisnahme vs. Einwilligung in die Übertragung). */
.pok-consent-item{
  display:flex;gap:.9rem;align-items:flex-start;
  background:#fff;
  border:1.5px solid #dfe6e4;
  border-radius:12px;
  padding:1rem 1.2rem;
  margin-bottom:.8rem;
  cursor:pointer;
}
.pok-consent-item:last-of-type{margin-bottom:0;}
.pok-consent-item input{width:26px;height:26px;margin:.15rem 0 0;accent-color:var(--pok-mint-dark);flex:0 0 auto;}
.pok-consent-item input:focus-visible{outline:3px solid var(--pok-mint-dark);outline-offset:2px;}
.pok-consent-item span{font-size:.95rem;line-height:1.65;color:var(--pok-dark);text-transform:none;font-weight:400;letter-spacing:normal;}
.pok-consent-item:has(input:checked){border-color:var(--pok-mint);background:rgba(77,189,175,.08);}

/* -- Honeypot: für Menschen unsichtbar, für Bots ein Feld zum Ausfüllen.
   Bewusst kein display:none -- manche Bots ignorieren genau das. Kein
   Google reCAPTCHA, das würde Daten an Google übertragen. -- */
.pok-hp{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;overflow:hidden !important;}

/* -- Absenden + Meldungen -- */
.pok-form-submit{text-align:center;margin-top:1.4rem;}
.pok-form-submit button{
  font-family:var(--pok-font-body);
  font-weight:700;
  font-size:1.05rem;
  padding:1rem 2.6rem;
  min-height:56px;
  border-radius:999px;
  border:2px solid var(--pok-mint);
  background:var(--pok-mint);
  color:var(--pok-dark);
  cursor:pointer;
  transition:all .2s ease;
}
.pok-form-submit button:hover{background:transparent;}
.pok-form-submit button:focus-visible{outline:3px solid var(--pok-mint-dark);outline-offset:3px;}
.pok-form-submit button[disabled]{opacity:.6;cursor:progress;}
.pok-form-footnote{font-size:.85rem;color:var(--pok-meta);margin:.9rem auto 0;max-width:560px;line-height:1.6;}

/* Fehlermeldung: Rahmen plus Text, nie Farbe allein. */
.pok-form-msg{display:none;border-radius:12px;padding:1.1rem 1.3rem;margin:1.2rem 0 0;font-size:.98rem;line-height:1.6;}
.pok-form-msg[data-show="1"]{display:block;}
.pok-form-msg--error{background:#fdf1ec;border:1.5px solid #c0562a;color:#8a3a14;}
.pok-form-msg--ok{background:rgba(77,189,175,.12);border:1.5px solid var(--pok-mint);color:var(--pok-dark);}
.pok-form-msg--ok b{display:block;font-size:1.1rem;margin-bottom:.3rem;}

/* Feld mit Fehler: Rahmen UND Hinweistext, damit es auch ohne
   Farbwahrnehmung erkennbar ist. */
.pok-form .pok-invalid input,
.pok-form .pok-invalid select,
.pok-form .pok-invalid textarea,
.pok-form input.pok-invalid,
.pok-form select.pok-invalid{border-color:#c0562a;background:#fdf7f5;}
.pok-field-error{display:none;font-size:.86rem;color:#8a3a14;font-weight:700;margin:.25rem 0 0;text-transform:none;letter-spacing:normal;}
.pok-field-error[data-show="1"]{display:block;}

/* -- Bestätigung nach dem Absenden -- */
.pok-form-done{display:none;text-align:center;max-width:620px;margin:0 auto;padding:2.5rem 1.5rem;}
.pok-form-done[data-show="1"]{display:block;}
.pok-form-done h2{font-size:1.9rem;margin:0 0 .8rem;}
.pok-form-done p{font-size:1.05rem;color:#3d4a48;line-height:1.7;margin:0 0 1.2rem;}

/* -- Responsive -- */
@media (max-width: 767px){
  .pok-form-hero h1{font-size:2rem;}
  .pok-field-grid,.pok-check-grid{grid-template-columns:1fr;}
  .pok-form fieldset{padding:1.3rem 1.1rem;}
  .pok-form legend{font-size:1.2rem;}
  .pok-form-submit button{width:100%;}
}
@media (max-width: 575px){
  .pok-form-hero h1{font-size:1.75rem;}
  .pok-form-notice{padding:1rem 1.1rem;}
  .pok-radio-row{flex-direction:column;}
  .pok-radio-row label{width:100%;}
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce){
  .pok-form-submit button{transition:none;}
}


/* ---------------------------------------------------------
   26.1 Aufklappende Unterfragen (Nachtrag 24.10.2026)
   Der Papierbogen der Praxis fragt deutlich mehr ab als die erste
   Fassung des Formulars. Damit es für die meisten trotzdem kurz
   bleibt, erscheinen die Rückfragen zu Diabetes, Durchblutung und
   Einlagen nur, wenn die zugehörige Angabe angekreuzt ist.

   WICHTIG: .pok-field setzt display:flex. Ein hidden-Attribut würde
   davon überstimmt -- die Blöcke wären immer sichtbar. Deshalb die
   Regel mit !important weiter unten. Ohne JavaScript bleiben alle
   Blöcke sichtbar; niemand kann dadurch etwas nicht ausfüllen.
   --------------------------------------------------------- */
.pok-form [hidden]{display:none !important;}

/* Zwei Absicherungen gegen Überlauf nach rechts:

   1. box-sizing -- die Eingabefelder haben width:100% plus Innenabstand.
      Ohne border-box addiert der Browser den Abstand oben drauf und das Feld
      wird breiter als seine Spalte. Helix setzt das global, aber darauf
      wollen wir uns nicht verlassen.
   2. minmax(0, 1fr) weiter unten -- ein 1fr-Raster ist nie schmaler als das
      längste Wort darin. "Durchblutungsstörungen" sprengt damit die Spalte,
      und das ganze Raster schiebt sich über den Rahmen hinaus. minmax(0, …)
      erlaubt der Spalte, schmaler zu werden als ihr Inhalt; der Umbruch
      darunter fängt den Rest ab. */
.pok-form, .pok-form *, .pok-form *::before, .pok-form *::after{box-sizing:border-box;}
/* fieldset hat von Haus aus min-inline-size:min-content und wird dadurch
   niemals schmaler als sein längstes Wort -- auf einem 320-px-Gerät schiebt
   es die ganze Seite auf. Der einzige Weg dagegen ist min-width:0. */
.pok-form fieldset{min-width:0;}
.pok-form label, .pok-form .pok-field-hint, .pok-form legend{overflow-wrap:break-word;}

/* Die Ankreuz-Kacheln sind Flex-Container. Der Text darin ist ein anonymes
   Flex-Element mit min-width:auto und damit nie schmaler als das längste
   Wort -- "Durchblutungsstörungen" allein ist auf einem 320-px-Gerät breiter
   als die Kachel. min-width:0 erlaubt das Schrumpfen, overflow-wrap:anywhere
   senkt zusätzlich die berechnete Mindestbreite (break-word tut das nicht),
   und hyphens:auto sorgt dafür, dass bevorzugt an Silben getrennt wird. */
.pok-check-grid label,
.pok-radio-row label,
.pok-consent-item{min-width:0;}
/* hyphens:auto auf allen Breiten -- auch im Dreispalter ist eine Spalte
   schmaler als "Durchblutungsstoerungen", und mit Trennstrich liest sich der
   Umbruch deutlich besser als der harte Schnitt mitten im Wort, den
   overflow-wrap allein erzeugt. overflow-wrap bleibt als Notnagel fuer
   Faelle, die die Silbentrennung nicht aufloest. */
.pok-check-grid label,
.pok-radio-row label{overflow-wrap:anywhere;hyphens:auto;}

.pok-unterfragen{
  margin-top:1rem;
  padding:1rem 1.1rem 1.1rem;
  background:var(--pok-grey-light);
  border-left:3px solid var(--pok-mint);
  border-radius:10px;
}
.pok-unterfragen .pok-field-grid{margin-top:0;}
.pok-unterfragen-titel{
  font-family:var(--pok-font-body);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--pok-mint-text);
  margin:0 0 .8rem;
}
/* Eingabefelder innerhalb eines Unterfragen-Blocks stehen auf grauem
   Grund -- weiß statt des sonst leicht getönten Hintergrunds, damit sie
   sich davon abheben. */
.pok-unterfragen input[type=text],
.pok-unterfragen input[type=tel],
.pok-unterfragen select,
.pok-unterfragen textarea{background:#fff;}
/* Ankreuzfelder im Unterfragen-Block: der graue Kachel-Hintergrund der
   Hauptliste würde hier mit dem Blockhintergrund verschwimmen. */
.pok-unterfragen .pok-check-grid label,
.pok-unterfragen .pok-radio-row label{background:#fff;}

/* Das Vorerkrankungs-Raster hat jetzt 16 Einträge. Ab Tablet drei
   Spalten, sonst wird die Liste unnötig lang zum Scrollen. */
/* Drei Spalten erst ab 1200px. Darunter bleiben zwei -- Bezeichnungen wie
   "Arthritis, Arthrose, Rheuma, Gicht oder Osteoporose" brauchen Platz,
   sonst steht in jeder Kachel ein vierzeiliger Wortturm. */
@media (min-width: 1200px){
  .pok-check-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .pok-unterfragen .pok-check-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}


/* =========================================================
   27. Cookie-Banner "CookieHint and Consent" von reDim (26.10.2026)
   Passt das Plugin an das Seitendesign an: weiße Karte mit 16 px
   Radius und weichem Schatten (wie .pok-price-card), Überschrift in
   Cormorant Garamond, Text in DM Sans, Pillen-Buttons wie .pok-btn,
   Schalter und Fokusrahmen in Mint.

   Warum drei IDs (#redim-cookiehint#redim-cookiehint#redim-cookiehint):
   Das Plugin schreibt seine Farben als Inline-<style> in den Kopf,
   jeweils mit !important und Selektoren wie
   "#redim-cookiehint#redim-cookiehint .redim-cc-accept-all" (zwei IDs).
   Ob custom.css vor oder nach diesem Block lädt, ist nicht garantiert.
   Mit drei IDs gewinnt diese Datei unabhängig von der Reihenfolge.
   Die Dreifach-ID funktioniert in allen Positionen des Plugins (Modal,
   oben, unten), weil sie nur die Karte selbst anspricht.

   Plugin-Struktur (ausgelesen am 26.10.2026, Skin "Flatline",
   Template "flyout-right", Position Modal):
   #redim-cookiehint-modal > #redim-cookiehint.redim-tpl
     .redim-cc-head (.redim-cc-icon + h2.redim-cc-headline)
     .redim-cc-content p
     .redim-cc-buttons: .redim-cc-accept-all, .redim-cc-reject,
                        .redim-cc-toggle-details
     .redim-cc-details (Kategorien mit .redim-cc-switch, .redim-cc-save)
     #cookiehintinfo (Links) · .redim-cc-watermark

   DSGVO/TDDDG: "Alle ablehnen" steht gleich groß und auf derselben
   Ebene wie "Alle akzeptieren" -- nur mit Rahmen statt Füllung. Bitte
   nicht kleiner, blasser oder als reinen Textlink gestalten; ein
   versteckter Ablehnen-Weg macht die Einwilligung unwirksam.

   Die Farbfelder im Plugin-Backend werden hiervon überschrieben. Sie
   können leer bleiben oder auf #4DBDAF gesetzt werden -- dann blitzt
   beim Laden auch kein Grün auf, falls custom.css einen Moment später
   kommt.
   ========================================================= */

/* -- 27.1 Abdunklung hinter dem Modal: Dunkel-Ton der Seite statt Grau -- */
#redim-cookiehint-modal#redim-cookiehint-modal{
  background: rgba(30,43,41,.55) !important;
  padding: 16px !important;
  box-sizing: border-box !important;
}

/* -- 27.2 Karte -- */
#redim-cookiehint#redim-cookiehint#redim-cookiehint{
  /* Variablen des Skins auf die Seitenfarben umbiegen. Sie steuern u.a.
     die gestrichelte Trennlinie und den Hintergrund der Speichern-Leiste
     im aufgeklappten Zustand (Desktop ab 900 px). */
  --redim-cc-btn-bg: var(--pok-mint) !important;
  --redim-cc-btn-fg: var(--pok-dark) !important;
  --redim-cc-accent: var(--pok-mint-dark) !important;
  --redim-cc-skin-btn-bg: var(--pok-mint) !important;
  --redim-cc-skin-btn-fg: var(--pok-dark) !important;
  --redim-cc-skin-accent: var(--pok-mint-dark) !important;
  --redim-cc-skin-surface: #ffffff !important;
  --redim-cc-skin-divider: #dfe6e4 !important;
  --redim-cc-skin-knob: #ffffff !important;
  --redim-cc-skin-muted: var(--pok-meta) !important;
  --redim-cc-skin-surface-shadow: 0 -10px 16px -14px rgba(30,43,41,.35) !important;

  color-scheme: light !important;
  background: #ffffff !important;
  color: var(--pok-dark) !important;
  border: 0 !important;
  border-radius: 16px !important;
  /* Mint-Akzentlinie oben als Innenschatten statt border-top: ein
     Rahmen würde die Kartenhöhe um 4 px vergrößern und im aufgeklappten
     Zustand (Desktop) einen überflüssigen Scrollbalken erzeugen. */
  box-shadow: inset 0 5px 0 var(--pok-mint), 0 24px 60px rgba(30,43,41,.28) !important;
  padding: 30px 32px 22px !important;
  font-family: var(--pok-font-body) !important;
  -webkit-font-smoothing: antialiased;
}

/* -- 27.3 Kopf: Keks-Symbol ausblenden (passt nicht zur ruhigen
   Bildsprache der Praxis), Überschrift wie die übrigen Seitentitel. -- */
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-icon{
  display: none !important;
}
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-head{
  margin-bottom: 10px !important;
}
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-headline{
  font-family: var(--pok-font-head) !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  color: var(--pok-dark) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* -- 27.4 Text: 15 px statt 12 px -- die Zielgruppe liest oft mit
   eingeschränktem Sehvermögen (vgl. Abschnitt 26). -- */
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-content,
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-content p{
  font-family: var(--pok-font-body) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: #3d4a48 !important;
  margin: 0 !important;
}
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-content{
  margin-bottom: 8px !important;
}
/* Der Abstand zwischen Text und Buttons kommt nur noch vom Text oben.
   Das Plugin setzt auf die Button-Gruppe zusätzlich margin-top: 8px.
   Im geschlossenen Zustand fallen beide Abstände zusammen, im
   aufgeklappten (Flexbox) addieren sie sich -- die Karte wurde dadurch
   8 px höher als die vom Plugin fest eingefrorene Höhe und bekam einen
   Scrollbalken. */
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-buttons{
  margin-top: 0 !important;
}

/* -- 27.5 Buttons: Grundform wie .pok-btn (Pille, DM Sans fett,
   keine Großbuchstaben) -- */
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-btn{
  font-family: var(--pok-font-body) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  line-height: 1.3 !important;
  min-height: 48px !important;
  padding: .8rem 1.6rem !important;
  margin-top: 10px !important;
  border-radius: 999px !important;
  border: 2px solid var(--pok-mint) !important;
  background: var(--pok-mint) !important;
  color: var(--pok-dark) !important;
  box-shadow: none !important;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease !important;
}

/* Alle akzeptieren: gefüllt Mint, Hover transparent (wie .pok-btn) */
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-accept-all{
  background: var(--pok-mint) !important;
  border-color: var(--pok-mint) !important;
  color: var(--pok-dark) !important;
}
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-accept-all:hover{
  background: transparent !important;
  color: var(--pok-dark) !important;
  box-shadow: none !important;
}

/* Alle ablehnen: gleich groß, dunkler Rahmen (wie .pok-btn-outline-dark) */
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-reject{
  background: transparent !important;
  border-color: var(--pok-dark) !important;
  color: var(--pok-dark) !important;
}
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-reject:hover{
  background: var(--pok-dark) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Cookie-Einstellungen: zurückhaltend, dritte Ebene */
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-toggle-details{
  background: transparent !important;
  border: 1.5px solid #dfe6e4 !important;
  color: var(--pok-dark) !important;
  font-weight: 500 !important;
  gap: 8px !important;
}
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-toggle-details:hover,
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-toggle-details.redim-cc-is-open{
  background: rgba(77,189,175,.1) !important;
  border-color: var(--pok-mint) !important;
  color: var(--pok-dark) !important;
}
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-toggle-text{
  color: inherit !important;
  font: inherit !important;
}
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-toggle-caret{
  color: var(--pok-mint-text) !important;
}

/* Auswahl speichern (im aufgeklappten Bereich): Hauptaktion, gefüllt */
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-save{
  background: var(--pok-mint) !important;
  border-color: var(--pok-mint) !important;
  color: var(--pok-dark) !important;
}
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-save:hover{
  background: transparent !important;
  color: var(--pok-dark) !important;
}

/* Fokus: wie überall auf der Seite (Abschnitt 3) */
#redim-cookiehint#redim-cookiehint#redim-cookiehint a:focus-visible,
#redim-cookiehint#redim-cookiehint#redim-cookiehint button:focus-visible,
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-switch input:focus-visible + .redim-cc-slider{
  outline: 3px solid var(--pok-mint-dark) !important;
  outline-offset: 2px !important;
}

/* -- 27.6 Kategorien & Schalter (aufgeklappter Bereich) -- */
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-cat{
  border-top: 1px solid #dfe6e4 !important;
  border-radius: 0 !important;
}
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-cat-label{
  font-family: var(--pok-font-body) !important;
  font-weight: 700 !important;
  font-size: .98rem !important;
  color: var(--pok-dark) !important;
}
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-cat-count{
  font-weight: 400 !important;
  color: var(--pok-meta) !important;
}
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-cat-desc{
  font-size: .9rem !important;
  line-height: 1.55 !important;
  color: #3d4a48 !important;
}
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-always-on{
  display: inline-block !important;
  margin-left: 6px !important;
  padding: 2px 10px !important;
  border-radius: 999px !important;
  background: rgba(77,189,175,.15) !important;
  color: var(--pok-mint-text) !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  vertical-align: middle !important;
}
/* Pfeil zum Aufklappen der Einzel-Cookies: 44 px Tippfläche */
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-detail-toggle{
  color: var(--pok-mint-text) !important;
  min-width: 44px !important;
  min-height: 44px !important;
  font-size: 1.1rem !important;
}

/* Schalter: rund statt eckig (Flatline-Skin setzt radius 0).
   Aus = Grau, An = Mint-Dunkel (3,3:1 auf Weiß -- reicht für
   Bedienelemente, WCAG 1.4.11 verlangt 3:1). */
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-slider{
  background-color: #8a9693 !important;
  border-radius: 999px !important;
}
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-slider::before{
  border-radius: 50% !important;
  background-color: #fff !important;
}
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-switch input:checked + .redim-cc-slider,
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-switch input[aria-disabled="true"] + .redim-cc-slider{
  background-color: var(--pok-mint-dark) !important;
}

/* Einzel-Cookie-Liste */
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-cookies{
  color: #3d4a48 !important;
  font-size: .86rem !important;
}
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-cookie-name code{
  font-size: .8rem !important;
  background: var(--pok-grey-light) !important;
  color: var(--pok-dark) !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  word-break: break-all !important;
}
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-cookie-meta{
  color: var(--pok-meta) !important;
}

/* -- 27.7 Links unter den Buttons und Herstellerhinweis -- */
#redim-cookiehint#redim-cookiehint#redim-cookiehint #cookiehintinfo{
  margin-top: 16px !important;
  font-size: .88rem !important;
  color: var(--pok-meta) !important;
}
#redim-cookiehint#redim-cookiehint#redim-cookiehint #cookiehintinfo a{
  color: var(--pok-mint-text) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 32px !important;
}
#redim-cookiehint#redim-cookiehint#redim-cookiehint #cookiehintinfo a:hover{
  color: var(--pok-dark) !important;
}
#redim-cookiehint#redim-cookiehint#redim-cookiehint #cookiehintinfo span{
  color: #c8d1cf !important;
  margin: 0 6px !important;
}
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-watermark,
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-watermark a{
  color: var(--pok-meta) !important;
  font-size: 11px !important;
  opacity: .85;
}

/* Ohne JavaScript: Hinweistext */
#redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-noscript{
  color: #3d4a48 !important;
  font-size: .9rem !important;
}

/* -- 27.8 Mobil: weniger Innenabstand, kleinere Überschrift. Die Karte
   bleibt scrollbar (max-height 92vh kommt vom Plugin), die Buttons
   stehen untereinander in voller Breite. -- */
@media (max-width: 575px){
  #redim-cookiehint-modal#redim-cookiehint-modal{
    padding: 10px !important;
  }
  #redim-cookiehint#redim-cookiehint#redim-cookiehint{
    padding: 22px 20px 16px !important;
    border-radius: 14px !important;
  }
  #redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-headline{
    font-size: 1.5rem !important;
  }
  #redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-content,
  #redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-content p{
    font-size: 15px !important;
    line-height: 1.6 !important;
  }
  #redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-btn{
    padding: .75rem 1.2rem !important;
  }
}

/* Kopf-/Fußleisten-Position (falls im Plugin später umgestellt): dort
   ist die Karte randlos -- Radius und Schatten oben/unten anpassen. */
#redim-cookiehint-top #redim-cookiehint#redim-cookiehint#redim-cookiehint,
#redim-cookiehint-bottom #redim-cookiehint#redim-cookiehint#redim-cookiehint{
  border-radius: 0 !important;
  box-shadow: inset 0 5px 0 var(--pok-mint), 0 -8px 30px rgba(30,43,41,.18) !important;
}
#redim-cookiehint-top #redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-btn,
#redim-cookiehint-bottom #redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-btn{
  margin-top: 0 !important;
}

/* -- 27.9 Wieder-Öffnen-Knopf unten links (erscheint nach der Auswahl,
   damit Besucher ihre Einwilligung jederzeit ändern können -- Pflicht
   nach Art. 7 Abs. 3 DSGVO, also nicht ausblenden). Nur farblich an
   die Seite angeglichen; doppelte Klasse, weil das Plugin hier mit
   einer einfachen Klasse und !important arbeitet. -- */
.redim-cc-reopen.redim-cc-reopen{
  border: 2px solid var(--pok-mint) !important;
  background: #fff !important;
  box-shadow: 0 0 0 2px #fff, 0 4px 14px rgba(30,43,41,.18) !important;
}
.redim-cc-reopen.redim-cc-reopen:hover{
  border-color: var(--pok-mint-dark) !important;
  box-shadow: 0 0 0 2px #fff, 0 6px 18px rgba(30,43,41,.26) !important;
}
.redim-cc-reopen.redim-cc-reopen:focus-visible{
  outline: 3px solid var(--pok-mint-dark) !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce){
  #redim-cookiehint#redim-cookiehint#redim-cookiehint .redim-cc-btn{ transition: none !important; }
}


/* =========================================================
   28. Kontakt-Seite: Button und Hinweis "Erstanmeldung"
   (28.10.2026)
   Ergänzt Abschnitt 17. Neben "Jetzt anrufen" und "E-Mail
   schreiben" steht im Hero ein dritter Button, der auf
   /leistungen/erstanmeldung führt. Darunter ein Satz, dass das
   Formular KEINEN Termin vereinbart -- Termine bleiben telefonisch
   (harte Projektvorgabe: keine Buchungsfunktion auf der Seite).
   In der Karte "Kontaktdaten" kommt eine abgesetzte Zeile
   "Neu bei uns?" mit demselben Ziel dazu.

   Icons wie das Telefon-Icon in Abschnitt 4 als SVG-Maske mit
   currentColor: kein Emoji-Rendering auf iOS, kein Zeichen im
   HTML, das Joomlas Textfilter verschlucken könnte.

   Volle Button-Breite unter 991 px kommt bereits aus Abschnitt 13
   (.pok-kontakt-actions .pok-btn), 44-px-Tippfläche der Karten-
   Links aus 24.2 -- hier nicht wiederholt.
   ========================================================= */

/* -- 28.1 Icons: Brief und Klemmbrett -- */
.pok-icon-mail::before,
.pok-icon-form::before{
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  vertical-align: -0.125em;
  background-color: currentColor;
}
.pok-icon-mail::before{
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/></svg>") no-repeat center / contain;
}
.pok-icon-form::before{
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19 3h-4.18A3 3 0 0 0 12 1a3 3 0 0 0-2.82 2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-1.5 14.5L6 13l1.4-1.4 3.1 3.1 6.1-6.1L18 10l-7.5 7.5z'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19 3h-4.18A3 3 0 0 0 12 1a3 3 0 0 0-2.82 2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-1.5 14.5L6 13l1.4-1.4 3.1 3.1 6.1-6.1L18 10l-7.5 7.5z'/></svg>") no-repeat center / contain;
}

/* -- 28.2 Dritter Hero-Button: weiß mit Mint-Rahmen. Hebt sich vom
   dunklen Outline-Button "E-Mail" ab, bleibt aber optisch hinter dem
   gefüllten Anruf-Button (Anrufen ist und bleibt die Hauptaktion).
   !important wie bei den Outline-Varianten in Abschnitt 4. -- */
a.pok-btn.pok-btn-form,
.pok-btn.pok-btn-form{
  background-color: #fff !important;
  border: 2px solid var(--pok-mint) !important;
  color: var(--pok-dark) !important;
}
a.pok-btn.pok-btn-form:hover,
.pok-btn.pok-btn-form:hover{
  background-color: var(--pok-mint) !important;
  color: var(--pok-dark) !important;
}

/* -- 28.3 Klarstellung unter den Buttons -- */
.pok-kontakt-actions-note{
  font-size: .88rem;
  line-height: 1.55;
  color: var(--pok-meta);
  max-width: 520px;
  margin: 1.1rem auto 0;
}

/* -- 28.4 Zeile "Neu bei uns?" in der Kontaktdaten-Karte -- */
.pok-kontakt-detail.pok-kontakt-detail--form{
  margin-top: .5rem;
  background: #fff;
  border: 1px solid var(--pok-mint);
  border-left: 4px solid var(--pok-mint);
  border-radius: 12px;
  padding: .9rem 1rem;
}
.pok-kontakt-detail--form a{
  display: inline-flex;
  align-items: center;
  color: var(--pok-dark);
}
.pok-kontakt-detail--form small{
  font-size: .82rem;
  line-height: 1.45;
  color: var(--pok-meta);
}

/* -- 28.5 Mobil: etwas weniger Abstand zwischen den drei Buttons -- */
@media (max-width: 575px){
  .pok-kontakt-actions{ gap: 12px; }
}


/* =========================================================
   29. "Was Sie zum ersten Termin mitbringen" (28.10.2026)
   Ein Baustein, drei Einsatzorte:
   a) details.pok-bring--details  aufklappbar -- /leistungen/
      erstanmeldung, Block 1, unter dem Freiwilligkeits-Hinweis
   b) .pok-bring                  offen -- Bestätigung nach dem
      Absenden (#pokDone in Block 2 der Erstanmeldung)
   c) .pok-bring--wide            offen, 2-spaltig -- /leistungen,
      unter dem Behandlungsablauf

   Häkchen und Koffer-Symbol kommen aus dem CSS, nicht aus dem
   HTML (Joomlas Textfilter, siehe Abschnitt 17/26). Der Koffer
   ist ein Hintergrundbild, weil der Kreis selbst schon das
   ::before-Element ist.

   Selektoren bewusst zweistufig (.pok-bring .pok-bring-title):
   in der Bestätigung greift sonst ".pok-form-done p" (Abschnitt
   26) und macht die Überschrift grau und klein.
   ========================================================= */

/* -- 29.1 Grundkasten -- */
.pok-bring{
  background: #fff;
  border: 1px solid #dfe6e4;
  border-left: 5px solid var(--pok-mint);
  border-radius: 12px;
  padding: 1.3rem 1.5rem;
  max-width: 760px;
  margin: 1.4rem auto 0;
  text-align: left;
}
.pok-bring .pok-bring-title{
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--pok-font-head);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--pok-dark);
  margin: 0 0 .9rem;
  max-width: none;
}
.pok-bring .pok-bring-title::before{
  content: "";
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(77,189,175,.15) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23267064' d='M20 6h-4V4c0-1.1-.9-2-2-2h-4C8.9 2 8 2.9 8 4v2H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zM10 4h4v2h-4V4z'/></svg>") no-repeat center / 20px;
}

/* -- 29.2 Liste: jede Zeile eine eigene Kachel mit Mint-Häkchen -- */
.pok-bring .pok-bring-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.pok-bring .pok-bring-list li{
  position: relative;
  margin: 0;
  padding: .7rem .9rem .7rem 2.7rem;
  background: var(--pok-grey-light);
  border-radius: 10px;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--pok-dark);
}
.pok-bring .pok-bring-list li::before{
  content: "\2713";
  position: absolute;
  left: .8rem;
  top: .68rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--pok-mint);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pok-bring .pok-bring-list li small{
  display: block;
  font-size: .85rem;
  color: var(--pok-meta);
}

/* -- 29.3 a) Aufklappbar (natives <details>, kein JS) -- */
details.pok-bring.pok-bring--details{ padding: 0; }
details.pok-bring--details summary{
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 1.5rem;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
details.pok-bring--details summary::-webkit-details-marker{ display: none; }
details.pok-bring--details summary .pok-bring-title{
  margin: 0;
  font-size: 1.2rem;
}
details.pok-bring--details summary::after{
  content: "+";
  flex: 0 0 auto;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--pok-mint-text);
}
details.pok-bring--details[open] summary::after{ content: "\2013"; }
details.pok-bring--details[open] summary{ border-bottom: 1px solid var(--pok-grey-light); }
details.pok-bring--details summary:focus-visible{
  outline: 3px solid var(--pok-mint-dark);
  outline-offset: 2px;
  border-radius: 12px;
}
.pok-bring-body{ padding: 1rem 1.5rem 1.3rem; }

/* -- 29.4 b) In der Bestätigung: Abstand zum Button darunter -- */
.pok-form-done .pok-bring{ margin: 1.6rem auto 1.8rem; }

/* -- 29.5 c) Breit, zwei Spalten (Leistungen) -- */
.pok-bring.pok-bring--wide{
  max-width: 1000px;
  margin-top: 3rem;
  padding: 1.8rem 2rem;
}
.pok-bring--wide .pok-bring-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* -- 29.6 Responsive -- */
@media (max-width: 767px){
  .pok-bring--wide .pok-bring-list{ grid-template-columns: 1fr; }
}
@media (max-width: 575px){
  .pok-bring,
  .pok-bring.pok-bring--wide{ padding: 1.1rem; }
  details.pok-bring.pok-bring--details{ padding: 0; }
  details.pok-bring--details summary{ padding: 1rem 1.1rem; }
  .pok-bring-body{ padding: .9rem 1.1rem 1.1rem; }
  .pok-bring .pok-bring-title{ font-size: 1.2rem; }
}