/*
Theme Name:   Pro Home Reinigungsservice
Theme URI:    https://reinigung-auf-usedom.de
Description:  Child-Theme für GeneratePress. Corporate Design von Pro Home, angepasst für den Reinigungsservice (Türkis statt Navy).
Author:       Pro Home
Template:     generatepress
Version:      1.0.0
Text Domain:  prohome-reinigung
*/

/* ============================================================
   INHALT
   Abgeleitet aus dem Pro-Home-Child-Theme v1.1.9. Die Abschnitts-
   nummern bleiben gleich, damit beide Dateien vergleichbar sind.
   Entfallene Abschnitte sind markiert.

    1. Design-Token                      (angepasst: Türkis statt Navy)
    2. Schriften
    3. Grundlagen
    4. Flächen
    5. Schaltflächen
    6. Wellenlinie (inkl. ph-wave-on-sand)
    7. FAQ
    8. Ortskacheln                       (entfällt)
    9. Unterkunftskarten                 (entfällt)
   10. Vertrauensleiste
   11. Themenfilter                      (entfällt)
   12. Grosse Zahl
   13. Kopf- und Fussbereich
   14. Mobiles Menü
   15. Hilfsklassen
   16. Raster für Unterkunftskarten      (entfällt)
   17. Startseite: vollbreiter Inhaltsbereich
   18. Vertrauensleiste unter dem Hero   (Hero mit Suchmaske entfällt)
   19. Orte nach Regionen                (entfällt)
   20. Preisversprechen                  (entfällt)
   21. Startseite: Korrekturen
   22. FAQ-Abschnitt
   23. Für Eigentümer                    (entfällt)
   24. Insel-Text                        (entfällt)
   25. Fussbereich
   26. Inhaltsseiten: gemeinsame Bausteine
   27. Prozess-Schritte                  (nur ph-steps)
   28. Echte Blöcke: Hilfsregeln         (nur Buttons)
   29. Icons
   30. Feature-Raster
   31. (entfällt)
   32. Button-Gruppen, Kacheln mit Bild
   33. Dropdown-Menü (Desktop)
   34. Dunkle Abschnitte: Karten, Schritte, Umriss-Button
   35. Formulare: Checkbox-Zeile mit Link im Text
   36-38. (entfallen: Suchmaske, Job-Sticker, Datumsfelder)
   39. Blogbeitrag: umschliessender Container
   40. Blogbeitrag: Artikeltext
   41. NEU: Info-Leiste oben (ph-topbar)
   42. NEU: Logo und Seitentitel im Kopfbereich
   43. NEU: Formulare (Plugin "Pro Home Formulare")
   44. NEU: Cookie-Banner (Complianz) im Pro-Home-Stil
   ============================================================ */


/* ============================================================
   1. DESIGN-TOKEN
   Zentrale Stellschrauben. Die Variablennamen heissen weiter
   --ph-navy-*, damit der Code zwischen den Seiten kompatibel
   bleibt. Hier sind es Türkistöne statt Navy.
   ACHTUNG: Den echten CI-Türkiswert hier eintragen (3 Werte, siehe unten).
   ============================================================ */
:root{
  /* Farben */
  --ph-navy-900:#0A4F54;   /* tiefes Türkis (statt Mitternachtsblau). Kontrast mit Weiss ca. 9:1 */
  --ph-navy-800:#0F6A70;   /* Zwischenton, nur für Flächen */
  --ph-navy-600:#0D7479;   /* mittleres Türkis (Kontrast auf Weiss ca. 5,5:1) */
  --ph-sand:#E5D6BE;       /* Sandbeige */
  --ph-sand-light:#F4ECDF; /* Aufgehellt, für grosse Flächen */
  --ph-taupe:#BAAF9C;      /* Taupe */
  --ph-gold:linear-gradient(100deg,#B8862F 0%,#F0DCA8 45%,#C9973C 100%);
  --ph-gold-line:#C9973C;  /* Gold als Volltonfarbe, für Linien */
  --ph-gold-text:#E8C87E;  /* Gold für Text auf dunklem Grund */
  --ph-white:#FFFFFF;

  /* Schrift */
  --ph-font:"Outfit","Segoe UI",system-ui,-apple-system,sans-serif;

  /* Schriftgrössen, skalieren mit der Fensterbreite */
  --ph-step--1:clamp(.82rem,.79rem + .15vw,.9rem);
  --ph-step-0:clamp(1.06rem,1rem + .3vw,1.19rem);
  --ph-step-1:clamp(1.2rem,1.12rem + .4vw,1.45rem);
  --ph-step-2:clamp(1.5rem,1.35rem + .75vw,2.05rem);
  --ph-step-3:clamp(1.9rem,1.6rem + 1.5vw,2.9rem);
  --ph-step-4:clamp(2.3rem,1.75rem + 2.7vw,4.1rem);

  /* Abstände und Formen */
  --ph-gutter:clamp(1.15rem,4vw,2.5rem);
  --ph-wrap:1180px;
  --ph-section:clamp(3.25rem,7vw,5.5rem);
  --ph-radius:14px;
}


/* ============================================================
   2. SCHRIFTEN
   Dateien liegen im Ordner /fonts des Child-Themes.
   Aktuell aktiv: Outfit (SIL Open Font License).
   Umstellung auf Causten: siehe Pro-Home-Child-Theme.
   ============================================================ */
@font-face{
  font-family:"Outfit";
  src:url("fonts/outfit-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Outfit";
  src:url("fonts/outfit-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Outfit";
  src:url("fonts/outfit-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Outfit";
  src:url("fonts/outfit-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}


/* ============================================================
   3. GRUNDLAGEN
   ============================================================ */
body{
  font-family:var(--ph-font);
  font-size:var(--ph-step-0);
  line-height:1.65;
  color:var(--ph-navy-900);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--ph-font);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.015em;
  color:var(--ph-navy-900);
  text-wrap:balance;
}
h1{font-size:var(--ph-step-4);}
h2{font-size:var(--ph-step-3);}
h3{font-size:var(--ph-step-2);}
h4{font-size:var(--ph-step-1);}

a{color:var(--ph-navy-600);text-underline-offset:3px;}
a:hover{color:var(--ph-navy-900);}

/* Sichtbarer Fokusrahmen für Tastaturbedienung. Nicht entfernen. */
:focus-visible{
  outline:3px solid var(--ph-gold-line);
  outline-offset:3px;
  border-radius:4px;
}

img{max-width:100%;height:auto;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}


/* ============================================================
   4. FLÄCHEN
   ============================================================ */
.ph-navy{background:var(--ph-navy-900);color:var(--ph-white);}
.ph-navy h1,.ph-navy h2,.ph-navy h3,.ph-navy h4{color:var(--ph-white);}
.ph-navy p,.ph-navy li{color:var(--ph-sand);}
.ph-navy a{color:var(--ph-gold-text);}

.ph-sand{background:var(--ph-sand-light);}


/* ============================================================
   5. SCHALTFLÄCHEN
   Pro Abschnitt nur ein Gold-Button.
   ============================================================ */
.ph-btn,
.wp-block-button__link{
  display:inline-block;
  font-family:var(--ph-font);
  font-weight:600;
  font-size:var(--ph-step-0);
  line-height:1.2;
  border:0;
  border-radius:8px;
  padding:.78rem 1.6rem;
  text-decoration:none;
  cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease,color .12s ease;
}

.ph-btn-gold{background:var(--ph-gold);color:var(--ph-navy-900);}
.ph-btn-gold:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(201,151,60,.4);
  color:var(--ph-navy-900);
}

.ph-btn-navy{background:var(--ph-navy-600);color:var(--ph-white);}
.ph-btn-navy:hover{background:var(--ph-navy-900);color:var(--ph-white);}

.ph-btn-outline{
  background:transparent;
  color:var(--ph-navy-900);
  box-shadow:inset 0 0 0 1.5px var(--ph-navy-600);
}
.ph-btn-outline:hover{
  background:var(--ph-navy-900);
  color:var(--ph-white);
  box-shadow:none;
}

/* Umrissvariante auf dunklem Grund (.ph-dark siehe Abschnitt 34) */
.ph-navy .ph-btn-outline{
  color:var(--ph-sand);
  box-shadow:inset 0 0 0 1.5px rgba(232,200,126,.5);
}
.ph-navy .ph-btn-outline:hover{
  background:var(--ph-gold);
  color:var(--ph-navy-900);
  box-shadow:none;
}


/* ============================================================
   6. WELLENLINIE
   Das Leitmotiv aus dem Logo. Nur an echten Übergängen zu dunkel.
   Füllfarbe = --ph-navy-900 (#0A4F54, hier als %230A4F54).
   Wird die Farbe geändert, muss sie auch in beiden SVGs geändert werden.
   ============================================================ */
.ph-wave{
  display:block;
  width:100%;
  height:clamp(38px,5vw,70px);
  background-repeat:no-repeat;
  background-size:100% 100%;
  line-height:0;
}
/* Dunkel oben, hell unten */
.ph-wave-down{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath fill='%230A4F54' d='M0,0 L1440,0 L1440,32 C1290,46 1180,19 1010,4 C810,-14 700,25 520,38 C330,52 170,-2 0,28 Z'/%3E%3C/svg%3E");
}
/* Hell oben, dunkel unten */
.ph-wave-up{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath fill='%230A4F54' d='M0,70 L0,34 C170,4 330,58 520,44 C700,31 810,-8 1010,10 C1180,25 1290,52 1440,38 L1440,70 Z'/%3E%3C/svg%3E");
}

/* Welle auf sandfarbenem Untergrund. Ohne diese Klasse entsteht
   ein weisser Streifen zwischen Sandfläche und Welle. */
.ph-wave-on-sand{background:var(--ph-sand-light);}


/* ============================================================
   7. FAQ
   Natives details/summary. Kein Plugin, kein JavaScript.
   ============================================================ */
.ph-faq{max-width:78ch;}
.ph-faq details{border-bottom:1px solid var(--ph-taupe);}
.ph-faq summary{
  cursor:pointer;
  list-style:none;
  padding:1.05rem 2.5rem 1.05rem 0;
  font-weight:600;
  font-size:var(--ph-step-1);
  position:relative;
}
.ph-faq summary::-webkit-details-marker{display:none;}
.ph-faq summary::after{
  content:"";
  position:absolute;right:.5rem;top:50%;
  width:11px;height:11px;margin-top:-7px;
  border-right:2px solid var(--ph-gold-line);
  border-bottom:2px solid var(--ph-gold-line);
  transform:rotate(45deg);
  transition:transform .2s ease;
}
.ph-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px;}
.ph-faq summary:hover{color:var(--ph-navy-600);}
.ph-faq .ph-faq-answer{padding:0 2.5rem 1.3rem 0;max-width:70ch;}


/* ============================================================
   10. VERTRAUENSLEISTE
   ============================================================ */
.ph-trust{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:.6rem 2rem;
  font-size:var(--ph-step--1);
  font-weight:600;
  color:var(--ph-navy-600);
}
.ph-trust li{display:flex;align-items:center;gap:.55rem;}
.ph-trust li::before{
  content:"";width:9px;height:9px;border-radius:50%;
  background:var(--ph-gold);flex:0 0 auto;
}


/* ============================================================
   12. GROSSE ZAHL
   ============================================================ */
.ph-figure{
  display:block;
  font-size:clamp(4rem,10vw,7.5rem);
  font-weight:700;
  line-height:.9;
  letter-spacing:-.04em;
  background:var(--ph-gold);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}


/* ============================================================
   13. KOPF- UND FUSSBEREICH
   ============================================================ */
.site-header{background:var(--ph-navy-900);}
.main-navigation{background:var(--ph-navy-900);}
.main-navigation .main-nav ul li a{
  color:var(--ph-white);
  font-size:var(--ph-step-1);
}
.main-navigation .main-nav ul li:hover>a,
.main-navigation .main-nav ul li.current-menu-item>a{
  background:transparent;
  color:var(--ph-gold-text);
}
.main-navigation .main-nav ul ul{background:var(--ph-navy-800);}

.site-footer,
.site-info{background:var(--ph-navy-900);color:var(--ph-sand);}
.site-footer a,.site-info a{color:var(--ph-sand);}
.site-footer a:hover,.site-info a:hover{color:var(--ph-gold-text);}

/* Menüpunkt "Zu Pro Home" (Vermietung). Im Menü als CSS-Klasse
   "ph-menu-owner" hinterlegen. Der Klassenname bleibt wie bei
   pro-home.de, damit der Code kompatibel bleibt. */
.main-navigation .main-nav ul li.ph-menu-owner>a{
  border:1px solid rgba(232,200,126,.5);
  border-radius:999px;
  color:var(--ph-gold-text);
  margin:.6rem .5rem;
  padding:.45rem 1.05rem;
  line-height:1.2;
}
.main-navigation .main-nav ul li.ph-menu-owner:hover>a{
  background:rgba(232,200,126,.12);
}


/* ============================================================
   14. MOBILES MENÜ
   ============================================================ */
.main-navigation .menu-toggle,
.main-navigation .mobile-bar-items a{
  background:var(--ph-navy-900);
  color:var(--ph-gold-text);
}
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus{
  background:var(--ph-navy-800);
  color:var(--ph-white);
}

.main-navigation.toggled .main-nav>ul,
#generate-slideout-menu{
  background:var(--ph-navy-900);
}
.main-navigation.toggled .main-nav ul li a,
#generate-slideout-menu .main-nav ul li a{
  color:var(--ph-white);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.main-navigation.toggled .main-nav ul li a:hover,
#generate-slideout-menu .main-nav ul li a:hover{
  background:var(--ph-navy-800);
  color:var(--ph-gold-text);
}
.main-navigation.toggled .main-nav ul li.ph-menu-owner>a{
  margin:.8rem 1rem;
  text-align:center;
}


/* ============================================================
   15. HILFSKLASSEN
   ============================================================ */
.ph-lede{font-size:var(--ph-step-1);line-height:1.55;max-width:56ch;}
.ph-measure{max-width:70ch;}
.ph-center{margin-inline:auto;text-align:center;}
/* Abstand nach oben, z. B. vor einem Formular-Shortcode */
.ph-abstand-oben{padding-top:2rem;}


/* ============================================================
   17. STARTSEITE: VOLLBREITER INHALTSBEREICH
   Auf der Startseite werden die Container von GeneratePress
   aufgehoben. Alle Abschnitte tragen ihre Breite selbst
   (ph-...-inner mit max-width). Die Regel aus dem Pro-Home-
   Theme, die Kinder auf Lesebreite begrenzt, entfällt hier.
   ============================================================ */
.home .site.grid-container,
.home .content-area,
.home .site-main,
.home .inside-article,
.home .entry-content{
  max-width:100%;
  width:100%;
  padding-left:0;
  padding-right:0;
  margin-left:0;
  margin-right:0;
}
.home .inside-article{padding-top:0;}
.home .separate-containers .site-main{margin-top:0;}

.ph-fullwidth{width:100%;}


/* ============================================================
   18. VERTRAUENSLEISTE UNTER DEM HERO
   (Hero mit Suchmaske entfällt. Hero = ph-page-hero, Abschnitt 26.)
   ============================================================ */
.ph-trustbar{
  width:100%;
  background:var(--ph-sand-light);
}
.ph-trustbar .ph-trustbar-inner{
  max-width:var(--ph-wrap);
  margin-inline:auto;
  padding:1.15rem var(--ph-gutter);
}


/* ============================================================
   21. STARTSEITE: KORREKTUREN
   GeneratePress schreibt seine Container-Werte als Inline-CSS
   nach dieser Datei. Deshalb hier ausnahmsweise !important.
   ============================================================ */
body.home .site.grid-container,
body.home .content-area,
body.home .site-main,
body.home .inside-article,
body.home .entry-content{
  max-width:100% !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
  border-radius:0 !important;
}
body.home .separate-containers .inside-article{
  padding-top:0 !important;
  padding-bottom:0 !important;
}
body.home .separate-containers .site-main{
  margin:0 !important;
}

/* Welle direkt an den Abschnitt anschliessen */
.ph-wave{
  display:block;
  margin:0;
  vertical-align:top;
}


/* ============================================================
   22. FAQ-ABSCHNITT
   ============================================================ */
.ph-section-faq{
  width:100%;
  background:var(--ph-sand-light);
}
.ph-section-faq-inner{
  max-width:var(--ph-wrap);
  margin-inline:auto;
  padding:clamp(2.75rem,5vw,4.25rem) var(--ph-gutter);
}
.ph-section-faq .ph-faq details{
  border-bottom-color:var(--ph-taupe);
}
.ph-section-faq .ph-faq{
  margin-top:clamp(1.75rem,3.5vw,2.5rem);
}
.ph-section-faq .ph-faq-more{
  margin-top:2rem;
}

/* Sanftes Aufklappen, sofern der Browser es unterstützt */
@supports (interpolate-size: allow-keywords){
  .ph-faq details{
    interpolate-size:allow-keywords;
  }
  .ph-faq details::details-content{
    block-size:0;
    overflow:hidden;
    transition:block-size .28s ease, content-visibility .28s allow-discrete;
  }
  .ph-faq details[open]::details-content{
    block-size:auto;
  }
}


/* ============================================================
   25. FUSSBEREICH
   Standard-Fussbereich von GeneratePress ausblenden. Zusätzlich
   im Customizer unter Layout → Footer die Footer-Widgets auf 0
   stellen.
   ============================================================ */
.site-footer{display:none;}

.ph-footer{
  background:var(--ph-navy-900);
  color:var(--ph-sand);
  font-size:var(--ph-step--1);
  /* feine Linie, falls der Abschluss-Abschnitt davor ebenfalls dunkel ist */
  border-top:1px solid rgba(232,200,126,.2);
}

.ph-footer-inner{
  max-width:var(--ph-wrap);
  margin-inline:auto;
  padding:clamp(2.75rem,5vw,4rem) var(--ph-gutter) 2rem;
  display:grid;
  grid-template-columns:1.4fr repeat(3,1fr);
  gap:2.25rem;
}

.ph-footer h2{
  font-size:var(--ph-step-0);
  color:var(--ph-white);
  margin:0 0 .9rem;
  font-weight:600;
  letter-spacing:0;
}

.ph-footer ul{
  list-style:none;
  margin:0;padding:0;
  display:grid;
  gap:.55rem;
}
.ph-footer a{
  color:var(--ph-sand);
  text-decoration:none;
}
.ph-footer a:hover{
  color:var(--ph-gold-text);
  text-decoration:underline;
  text-underline-offset:3px;
}
.ph-footer address{font-style:normal;line-height:1.6;}

.ph-footer-brand img{
  height:52px;width:auto;
  display:block;
}
.ph-footer-lockup{
  display:inline-flex;
  align-items:center;
  gap:.85rem;
  text-decoration:none;
}
.ph-footer-lockup img{height:52px;width:auto;}
.ph-footer-lockup span{
  color:var(--ph-white);
  font-weight:600;
  font-size:var(--ph-step-0);
  line-height:1.15;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ph-footer a.ph-footer-lockup:hover{text-decoration:none;}
.ph-footer-brand p{
  margin-top:1rem;
  max-width:34ch;
  line-height:1.6;
}

/* Absprung zu einer externen Seite (Pro Home) */
.ph-footer-login{
  color:var(--ph-gold-text) !important;
}
.ph-footer-login::after{
  content:" ↗";
  font-size:.85em;
}

.ph-footer-bar{
  border-top:1px solid rgba(255,255,255,.13);
}
.ph-footer-bar-inner{
  max-width:var(--ph-wrap);
  margin-inline:auto;
  padding:1.15rem var(--ph-gutter);
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.5rem;
  justify-content:space-between;
  align-items:center;
}
.ph-footer-bar ul{
  display:flex;
  flex-wrap:wrap;
  gap:1.25rem;
}

@media (max-width:820px){
  .ph-footer-inner{grid-template-columns:1fr 1fr;}
}
@media (max-width:520px){
  .ph-footer-inner{grid-template-columns:1fr;}
}


/* ============================================================
   26. INHALTSSEITEN: GEMEINSAME BAUSTEINE
   WICHTIG PRO SEITE: Im Editor rechts bei den GeneratePress-
   Seiteneinstellungen "Inhaltsbereich" auf "Volle Breite" stellen,
   sonst laufen die Abschnitte nicht von Kante zu Kante.
   ============================================================ */

/* ---------- Breadcrumb ---------- */
.ph-breadcrumb{width:100%; background:var(--ph-sand-light);}
.ph-breadcrumb-inner{
  max-width:var(--ph-wrap); margin-inline:auto;
  padding:.75rem var(--ph-gutter);
  font-size:var(--ph-step--1);
}
.ph-breadcrumb ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem;}
.ph-breadcrumb li:not(:last-child)::after{content:"/"; margin-left:.4rem; color:var(--ph-taupe);}
.ph-breadcrumb a{color:var(--ph-navy-600); text-decoration:none;}
.ph-breadcrumb a:hover{text-decoration:underline;}
.ph-breadcrumb [aria-current]{color:var(--ph-navy-900); font-weight:600;}

/* ---------- Genereller Abschnitts-Wrapper ---------- */
.ph-content-section{width:100%;}
.ph-content-inner{
  max-width:var(--ph-wrap); margin-inline:auto;
  padding:clamp(2.25rem,5vw,3.5rem) var(--ph-gutter);
}

/* Dunkler Abschnitt (ohne die Link-Farb-Regel von .ph-navy, damit
   Gold-Buttons ihre eigene Textfarbe behalten) */
.ph-content-section.ph-dark{background:var(--ph-navy-900); color:var(--ph-white);}
.ph-dark h1,.ph-dark h2,.ph-dark h3,.ph-dark p{color:var(--ph-white);}

/* ---------- Seiten-Hero (hell, ohne Bild-Overlay) ---------- */
.ph-page-hero{width:100%; background:var(--ph-white); padding:clamp(2.5rem,6vw,4rem) 0 clamp(2rem,4vw,3rem);}
.ph-page-hero-inner{max-width:var(--ph-wrap); margin-inline:auto; padding-inline:var(--ph-gutter);}
.ph-page-hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,3rem); align-items:center;}
.ph-eyebrow{font-size:var(--ph-step--1); color:var(--ph-navy-600); font-weight:600; margin:0 0 .5rem;}
.ph-page-hero-lede{font-size:var(--ph-step-1); color:var(--ph-navy-600); line-height:1.55;}
.ph-page-hero-media{background:var(--ph-sand); border-radius:var(--ph-radius); aspect-ratio:4/3; overflow:hidden;}
.ph-page-hero-media img{display:block; width:100%; height:100%; object-fit:cover;}
@media (max-width:820px){.ph-page-hero-grid{grid-template-columns:1fr;}}

/* ---------- "Auf einen Blick"-Fakten ---------- */
.ph-facts{
  background:var(--ph-white); border:1px solid var(--ph-taupe);
  border-radius:var(--ph-radius); padding:1.4rem 1.5rem; margin-top:1.75rem;
}
.ph-facts h2{font-size:var(--ph-step-1); margin:0 0 .9rem;}
.ph-facts dl{display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem 1.5rem; margin:0;}
.ph-facts dt{font-size:var(--ph-step--1); color:var(--ph-navy-600); margin:0 0 .15rem;}
.ph-facts dd{margin:0; font-weight:600;}
/* Im Hero steht die Faktenbox ohne Bild rechts neben dem Text */
.ph-page-hero-grid > .ph-facts{margin-top:0;}
@media (max-width:600px){.ph-facts dl{grid-template-columns:1fr 1fr;}}

/* ---------- Sprungmarken ---------- */
.ph-toc{background:var(--ph-sand-light); border-radius:var(--ph-radius); padding:1.25rem 1.5rem; margin:2rem auto 0;}
.ph-toc h2{font-size:var(--ph-step-0); margin:0 0 .6rem;}
.ph-toc ol{margin:0; padding-left:1.1em; columns:2; gap:1.5rem;}
.ph-toc a{color:var(--ph-navy-900); text-decoration:none; font-size:var(--ph-step--1);}
.ph-toc a:hover{text-decoration:underline;}
@media (max-width:700px){.ph-toc ol{columns:1;}}

/* ---------- Verlinkungs-Chips ("Weitere Leistungen") ---------- */
.ph-chips{display:flex; flex-wrap:wrap; gap:.6rem; list-style:none; margin:1.1rem 0 0; padding:0;}
.ph-chips a{
  display:inline-block; text-decoration:none;
  border:1px solid var(--ph-taupe); border-radius:999px;
  padding:.45rem 1rem; font-size:var(--ph-step--1); font-weight:600;
  color:var(--ph-navy-900); transition:background .15s ease;
}
.ph-chips a:hover{background:var(--ph-sand-light);}
/* Genau vier Kacheln: zwei mal zwei statt drei plus eine */
.ph-feature-grid.ph-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
@media (max-width:700px){
  .ph-feature-grid.ph-grid-4{grid-template-columns:1fr;}
}
.ph-chips span{
  display:inline-block;
  border:1px solid var(--ph-taupe); border-radius:999px;
  padding:.45rem 1rem; font-size:var(--ph-step--1); font-weight:600;
  color:var(--ph-navy-900);
}

.ph-measure-wide{max-width:80ch;}


/* ============================================================
   27. PROZESS-SCHRITTE
   (Grosse und kleine Kacheln, Schnellzugriffe, Newsletter-Box
   aus dem Eigentümer-Bereich entfallen.)
   ============================================================ */
.ph-steps{list-style:none; margin:1.5rem 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem;}
.ph-steps li{background:var(--ph-white); border:1px solid var(--ph-taupe); border-radius:var(--ph-radius); padding:1.25rem 1.1rem;}
.ph-step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--ph-gold); color:var(--ph-navy-900);
  font-weight:700; font-size:var(--ph-step--1); margin-bottom:.75rem;
}
.ph-steps h3{font-size:var(--ph-step-0); margin:0 0 .35rem;}
.ph-steps p{font-size:var(--ph-step--1); color:var(--ph-navy-600); margin:0;}
@media (max-width:820px){.ph-steps{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.ph-steps{grid-template-columns:1fr;}}


/* ============================================================
   28. ECHTE BLÖCKE: HILFSREGELN (nur Buttons)
   ============================================================ */
.wp-block-button.ph-btn-gold .wp-block-button__link{
  background:var(--ph-gold); color:var(--ph-navy-900);
  border-radius:999px; padding:.78rem 1.6rem; font-weight:600;
}
.wp-block-button.ph-btn-gold .wp-block-button__link:hover{
  transform:translateY(-1px); box-shadow:0 8px 20px rgba(201,151,60,.4);
}


/* ============================================================
   29. ICONS
   ============================================================ */
.ph-icon{width:1em; height:1em; fill:currentColor; vertical-align:-2px; margin-right:.4rem;}


/* ============================================================
   30. FEATURE-RASTER
   minmax(0,1fr) verhindert, dass eine Spalte durch nicht
   umbrechenden Inhalt breiter wird als geplant.
   ============================================================ */
.ph-feature-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
  margin-top:1.75rem;
}
.ph-feature-card{
  background:var(--ph-white); border:1px solid var(--ph-taupe);
  border-radius:var(--ph-radius); padding:1.5rem 1.4rem;
  min-width:0;
}
.ph-feature-card h3{margin-top:0; font-size:var(--ph-step-1);}
.ph-feature-card p{color:var(--ph-navy-600); font-size:var(--ph-step--1); margin-bottom:1rem;}
.ph-feature-card ul{margin:0; padding-left:1.1em; font-size:var(--ph-step--1); color:var(--ph-navy-600);}
@media (max-width:820px){
  .ph-feature-grid{grid-template-columns:1fr;}
}


/* ============================================================
   32. BUTTON-GRUPPEN, KACHELN MIT BILD
   ============================================================ */
.ph-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  margin-top:1.5rem;
}

/* Bild in einer Feature-Kachel (für später, wenn Bilder da sind) */
.ph-feature-card:has(.ph-feature-img){
  display:flex;
  flex-direction:column;
}
.ph-feature-img{
  margin:auto 0 0;
  padding-top:1rem;
  aspect-ratio:auto;
}
.ph-feature-img img{
  display:block;
  width:100%;
  aspect-ratio:3 / 2;
  object-fit:cover;
  border-radius:10px;
}


/* ============================================================
   33. DROPDOWN-MENÜ (Desktop)
   Das Menü hat derzeit keine Untermenüs. Die Regeln sind für
   später vorbereitet (Pille in Türkis mit Goldrand).
   ============================================================ */
@media (min-width:769px){
  .main-navigation .main-nav ul li{
    position:relative;
  }
  .main-navigation .main-nav ul li > ul{
    top:calc(100% + .5rem);
  }
  .main-navigation .main-nav ul ul{
    background:var(--ph-navy-900);
    border:1px solid rgba(232,200,126,.25);
    border-radius:16px;
    padding:.6rem;
    margin-top:0;
    min-width:260px;
    box-shadow:0 18px 40px rgba(10,79,84,.45), 0 2px 6px rgba(10,79,84,.3);
  }
  .main-navigation .main-nav ul ul::before{
    content:"";
    position:absolute;
    left:0; right:0;
    top:-.5rem;
    height:.5rem;
  }
  .main-navigation .main-nav ul ul li + li{
    margin-top:.35rem;
  }
  .main-navigation .main-nav ul ul li a{
    display:block;
    color:var(--ph-gold-text) !important;
    font-size:var(--ph-step-0);
    line-height:1.2;
    padding:.6rem 1.1rem;
    border:1px solid rgba(232,200,126,.45);
    border-radius:999px;
    border-bottom-width:1px;
    background:transparent;
    transition:background .15s ease,color .15s ease,border-color .15s ease;
  }
  .main-navigation .main-nav ul ul li:hover > a,
  .main-navigation .main-nav ul ul li > a:focus-visible{
    background:rgba(232,200,126,.12);
    border-color:rgba(232,200,126,.85);
    color:var(--ph-white) !important;
  }
  .main-navigation .main-nav ul ul li.current-menu-item > a{
    background:var(--ph-gold);
    border-color:transparent;
    color:var(--ph-navy-900) !important;
  }
  .main-navigation .main-nav ul ul li.current-menu-item:hover > a{
    color:var(--ph-navy-900) !important;
  }
  .main-navigation .main-nav ul li.ph-menu-owner:hover > a,
  .main-navigation .main-nav ul li.ph-menu-owner.sfHover > a{
    color:var(--ph-white) !important;
    border-color:rgba(232,200,126,.8);
  }
}


/* ============================================================
   34. DUNKLE ABSCHNITTE: KARTEN, SCHRITTE, UMRISS-BUTTON
   ============================================================ */
.ph-dark .ph-eyebrow{color:var(--ph-gold-text);}
.ph-dark .ph-feature-card{
  background:var(--ph-navy-800);
  border-color:rgba(232,200,126,.25);
}
.ph-dark .ph-feature-card h3{color:var(--ph-white);}
.ph-dark .ph-feature-card p{color:var(--ph-sand);}
.ph-dark .ph-feature-card ul{color:var(--ph-sand);}

/* Prozess-Schritte auf dunklem Grund (sonst weisse Schrift auf Weiss) */
.ph-dark .ph-steps li{
  background:var(--ph-navy-800);
  border-color:rgba(232,200,126,.25);
}
.ph-dark .ph-steps h3{color:var(--ph-white);}
.ph-dark .ph-steps p{color:var(--ph-sand);}

.ph-dark .ph-btn-outline{
  color:var(--ph-white);
  box-shadow:inset 0 0 0 1.5px rgba(232,200,126,.5);
}
.ph-dark .ph-btn-outline:hover{
  background:var(--ph-gold);
  color:var(--ph-navy-900);
  box-shadow:none;
}
.ph-dark a:not(.ph-btn){color:var(--ph-gold-text);}


/* ============================================================
   35. FORMULARE: CHECKBOX-ZEILE MIT LINK IM TEXT
   ============================================================ */
form label:has(> input[type="checkbox"]){
  display:block !important;
  line-height:1.5;
}
form label:has(> input[type="checkbox"]) input[type="checkbox"]{
  float:left;
  margin:.35em .6em 0 0;
}


/* ============================================================
   39. BLOGBEITRAG: UMSCHLIESSENDER CONTAINER
   ============================================================ */
.ph-post-wrap{
  flex:1 1 100%;
  width:100%;
  min-width:0;
}


/* ============================================================
   40. BLOGBEITRAG: ARTIKELTEXT
   ============================================================ */
.ph-post-content h2{
  margin-top:2.5rem;
  scroll-margin-top:6rem;
}
.ph-post-content h3{margin-top:1.75rem;}
.ph-post-content p,
.ph-post-content li{line-height:1.7;}
.ph-post-content img{
  border-radius:var(--ph-radius);
  margin:1.5rem 0;
}
.ph-post-content blockquote{
  margin:1.75rem 0;
  padding:.25rem 0 .25rem 1.25rem;
  border-left:3px solid var(--ph-gold-line);
  font-size:var(--ph-step-1);
  color:var(--ph-navy-600);
}
.ph-post-content ul,
.ph-post-content ol{padding-left:1.4em;}
.ph-post-content a{text-decoration:underline;}


/* ============================================================
   41. NEU: INFO-LEISTE OBEN (ph-topbar)
   Telefon, Öffnungszeiten und WhatsApp über dem Menü. Wird von
   der functions.php vor dem Kopfbereich ausgegeben.
   ============================================================ */
.ph-topbar{
  background:var(--ph-navy-800);
  color:var(--ph-sand);
  font-size:var(--ph-step--1);
}
.ph-topbar-inner{
  max-width:var(--ph-wrap);
  margin-inline:auto;
  padding:.5rem var(--ph-gutter);
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:.3rem 1.5rem;
}
.ph-topbar a{
  color:var(--ph-gold-text);
  text-decoration:none;
  font-weight:600;
}
.ph-topbar a:hover{
  color:var(--ph-white);
  text-decoration:underline;
  text-underline-offset:3px;
}
@media (max-width:600px){
  .ph-topbar-inner{justify-content:center;}
}


/* ============================================================
   42. NEU: LOGO UND SEITENTITEL IM KOPFBEREICH
   Im Customizer unter Website-Identität das Logo (Icon) setzen und
   den Website-Titel "Pro Home Reinigungsservice" setzen (im Kopf wird nur das Icon angezeigt).
   Der Titel erscheint dann in Versalien neben dem Icon, passend
   zur Markenschrift.
   ============================================================ */
.site-header .main-title,
.site-header .main-title a,
.site-header .main-title a:hover,
.site-header .main-title a:focus{
  color:var(--ph-white);
  font-family:var(--ph-font);
  font-weight:600;
  font-size:var(--ph-step-1);
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
}
.site-header .site-logo img,
.site-header .header-image{
  max-height:52px;
  width:auto;
}
.site-header .inside-header{
  align-items:center;
  gap:.9rem;
}
.site-header .site-description{display:none;}

/* Zweizeiliger Titel: Zeile 1 groß, "Insel Usedom" klein darunter */
.site-header .main-title a{display:block;line-height:1.15;}
.site-header .main-title .ph-title-sub{
  display:block;
  margin-top:.2rem;
  font-size:.68em;
  font-weight:500;
  letter-spacing:.22em;
  color:var(--ph-gold-text);
}
.site-header .main-title,
.site-header .main-title a{font-size:clamp(.95rem,4.2vw,1.15rem);}
@media (max-width:768px){
  .site-header .inside-header{
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:flex-start;
    align-items:center;
    text-align:left;
    padding-top:.7rem;
    padding-bottom:.7rem;
  }
  .site-header .site-branding-container{gap:.7rem;}
  .site-header .site-logo img{max-height:48px;}
  .site-header .inside-header{justify-content:space-between;}
  /* Burger-Menü: Liste klappt als Fläche unter der Kopfzeile auf,
     über die volle Breite (sonst wird sie neben dem Logo gequetscht). */
  .site-header{position:relative;}
  .site-header .main-navigation,
  .site-header .main-navigation .inside-navigation{
    position:static;
    width:auto;
    flex:0 0 auto;
  }
  .site-header .main-navigation.toggled .main-nav{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    z-index:999;
    background:var(--ph-navy-900);
    box-shadow:0 14px 30px rgba(0,0,0,.35);
  }
  .site-header .main-navigation.toggled .main-nav>ul{
    display:block;
    flex-wrap:nowrap;
  }
  .site-header .main-navigation.toggled .main-nav ul li{
    display:block;
    width:100%;
  }
  .site-header .main-navigation.toggled .main-nav ul li a{
    display:block;
    padding:1rem 1.25rem;
    white-space:normal;
  }
}

/* Nur Icon im Kopf: Der Titel bleibt für Suchmaschinen und
   Screenreader im Code, wird aber nicht angezeigt. */
.site-header .main-title,
.site-header .site-description{
  position:absolute !important;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.site-header .site-logo img,
.site-header .header-image{max-height:56px;}
@media (max-width:768px){
  .site-header .site-logo img,
  .site-header .header-image{max-height:48px;}
}

/* Kopfzeile: Logo und Titel links, Menü rechts in EINER Zeile.
   Ab 1100 px nebeneinander, darunter Menü unter dem Logo, mittig. */
.site-header .site-branding-container{
  display:flex;
  align-items:center;
  gap:.9rem;
}
.site-header .main-title{white-space:nowrap;margin:0;line-height:1.2;}
.site-header .main-navigation .main-nav ul{flex-wrap:wrap;}
.site-header .main-navigation .main-nav ul li a{
  white-space:nowrap;
  line-height:1.2;
  padding:.8rem 1rem;
}
@media (min-width:769px){
  .site-header .inside-header{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    row-gap:.25rem;
  }
  .site-header .main-navigation{
    width:100%;
    float:none;
  }
  .site-header .main-navigation .inside-navigation{justify-content:center;}
  .site-header .main-navigation .main-nav ul{justify-content:center;}
}
@media (min-width:1100px){
  .site-header .inside-header{
    flex-wrap:nowrap;
    justify-content:space-between;
    column-gap:1.5rem;
  }
  .site-header .main-title{font-size:clamp(.9rem,1.25vw,1.1rem);}
  .site-header .main-navigation{width:auto;flex:1 1 auto;margin-left:auto;}
  .site-header .main-navigation .inside-navigation{justify-content:flex-end;}
  .site-header .main-navigation .main-nav ul{flex-wrap:nowrap;justify-content:flex-end;}
  .site-header .main-navigation .main-nav ul li a{
    font-size:clamp(.9rem,1.2vw,1.05rem);
    padding:.8rem clamp(.5rem,.9vw,1rem);
  }
  .site-header .main-navigation .main-nav ul li.ph-menu-owner>a{
    margin:0 0 0 .5rem;
    padding:.45rem 1.05rem;
  }
}


/* ============================================================
   43. NEU: FORMULARE (Plugin "Pro Home Formulare")
   ============================================================ */
.ph-form{max-width:760px;}
.ph-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.1rem 1.4rem;
}
.ph-form-wide{grid-column:1 / -1;}
.ph-form-field{display:flex;flex-direction:column;gap:.3rem;min-width:0;}
.ph-form-field label{
  font-size:var(--ph-step--1);
  font-weight:600;
  color:var(--ph-navy-600);
}
.ph-form-field input,
.ph-form-field select,
.ph-form-field textarea{
  font-family:var(--ph-font);
  font-size:var(--ph-step-0);
  border:1px solid var(--ph-taupe);
  border-radius:8px;
  padding:.62rem .75rem;
  background:var(--ph-white);
  color:var(--ph-navy-900);
  width:100%;
  box-sizing:border-box;
  min-height:44px;
}
.ph-form-field textarea{min-height:140px;resize:vertical;}
.ph-form-field input:hover,
.ph-form-field select:hover,
.ph-form-field textarea:hover{border-color:var(--ph-navy-600);}
.ph-form-check{
  margin-top:1.25rem;
  font-size:var(--ph-step--1);
  color:var(--ph-navy-600);
}
.ph-form-msg{
  max-width:760px;
  margin:0 0 1.5rem;
  padding:1rem 1.25rem;
  border-radius:var(--ph-radius);
  font-weight:600;
}
.ph-form-msg-ok{
  background:var(--ph-white);
  border:2px solid var(--ph-gold-line);
  color:var(--ph-navy-900);
}
.ph-form-msg-err{
  background:var(--ph-white);
  border:2px solid #B3261E;
  color:#8C1D18;
}
@media (max-width:600px){
  .ph-form-grid{grid-template-columns:1fr;}
}


/* ============================================================
   45. NEU: TABELLEN (z. B. Cookie-Richtlinie)
   ============================================================ */
.ph-content-inner table{
  width:100%;
  border-collapse:collapse;
  margin:1rem 0 1.5rem;
  font-size:.95rem;
}
.ph-content-inner th,
.ph-content-inner td{
  text-align:left;
  vertical-align:top;
  padding:.7rem .9rem;
  border-bottom:1px solid var(--ph-taupe,#BAAF9C);
}
.ph-content-inner th{
  background:var(--ph-navy-900);
  color:var(--ph-white);
  font-weight:600;
  white-space:nowrap;
}