/* =========================================================
   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).

   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;
  }
}