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

   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 (reines Zeichen, kein Emoji) */
a[href^="tel:"].pok-btn-call::before{
  content: "\260E";
  margin-right: 0.5em;
}
.pok-icon-phone::before{
  content: "\260E";
  color: inherit;
}

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