/* ============================================================
   Platzhirsch – Theme-Styles
   Farben: Petrol #003435 · Graublau #BCC7CC · Messing #C8A24A · Creme #F6F5F1
   ============================================================ */

:root {
  --ph-petrol: #003435;
  --ph-petrol-dark: #001B1C;
  --ph-slate: #BCC7CC;
  --ph-slate-light: #F1F4F5;
  --ph-brass: #C8A24A;
  --ph-brass-dark: #B58F38;
  --ph-cream: #F6F5F1;
  --ph-ink: #10201F;
  --ph-radius: 24px;
  --ph-shadow: 0 8px 30px -12px rgba(0,52,53,.22);
}

html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3 { hyphens: manual; overflow-wrap: normal; letter-spacing: -0.01em; }
.has-petrol-background-color h2, .has-petrol-dark-background-color h2,
.has-petrol-background-color h3, .has-petrol-dark-background-color h3 { color: #F6F5F1; }
img { max-width: 100%; height: auto; }
::selection { background: var(--ph-brass); color: var(--ph-petrol); }

/* ---------- Abschnitte ---------- */
.ph-section { padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: clamp(4rem, 8vw, 7rem); position: relative; overflow: hidden; }
.ph-section--tight { padding-top: 2.25rem; padding-bottom: 2.25rem; }
.ph-eyebrow { color: var(--ph-brass); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; margin-bottom: .5rem; }
.ph-eyebrow--pill { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.1); color: var(--ph-slate); padding: .35rem 1rem; border-radius: 9999px; font-size: .8rem; }
.ph-eyebrow--pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ph-brass); }
.ph-lead { font-size: 1.2rem; line-height: 1.6; opacity: .85; max-width: 42rem; }
.ph-intro { font-size: 1.15rem; opacity: .75; max-width: 46rem; margin-bottom: 2.5rem; }
.ph-accent, .has-brass-color { color: var(--ph-brass) !important; }
.ph-note { font-size: .875rem; opacity: .6; font-style: italic; }

/* Logo-Wasserzeichen (echtes Logo, groß, dezent) */
.ph-mark::after {
  content: ""; position: absolute; pointer-events: none; z-index: 0;
  background: url("../img/logo-white.png") no-repeat center / contain; opacity: .045;
  width: 980px; height: 980px; right: -130px; bottom: -300px;
}
.ph-mark--left::after { left: -200px; right: auto; top: -160px; bottom: auto; width: 700px; height: 700px; opacity: .04; }
.ph-mark--petrol::after { background-image: url("../img/logo-petrol.png"); opacity: .035; width: 640px; height: 640px; right: -160px; bottom: -200px; }
.ph-mark > * { position: relative; z-index: 1; }

/* ---------- Header ---------- */
.ph-header { position: sticky; top: 0; z-index: 50; background: rgba(246,245,241,.92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0,52,53,.1); transition: box-shadow .2s; }
.ph-header.is-scrolled { box-shadow: 0 4px 24px -8px rgba(0,36,37,.14); }
.ph-header__inner { max-width: 1280px; margin: 0 auto; padding: .6rem 1rem; }
.ph-brand img { height: 56px; width: auto; display: block; }
.ph-nav { font-weight: 600; font-size: .95rem; }
.ph-nav .wp-block-navigation-item__content { color: var(--ph-petrol); }
.ph-nav .wp-block-navigation-item__content:hover { color: var(--ph-brass); }
.ph-nav .ph-nav__cta .wp-block-navigation-item__content { background: var(--ph-brass); color: var(--ph-petrol-dark); padding: .55rem 1.2rem; border-radius: 9999px; box-shadow: 0 10px 30px -10px rgba(200,162,74,.55); }
.ph-nav .ph-nav__cta .wp-block-navigation-item__content:hover { background: var(--ph-brass-dark); color: var(--ph-petrol-dark); }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--ph-cream); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.15rem; padding: .5rem 0; }

/* ---------- Hero ---------- */
.ph-hero { padding-top: clamp(3.5rem, 7vw, 6.5rem); padding-bottom: clamp(3.5rem, 7vw, 6.5rem); position: relative; overflow: hidden; }
.ph-hero h1 { color: #F6F5F1; margin: 1rem 0 0; }
.ph-hero .ph-lead { color: rgba(246,245,241,.85); margin-top: 1.5rem; }
.ph-hero .wp-block-buttons { margin-top: 2rem; gap: 1rem; }
.ph-hero__card { position: relative; isolation: isolate; aspect-ratio: 1 / 1; max-width: 480px; margin: 0 auto; border-radius: 28px; box-shadow: 0 25px 60px -20px rgba(0,0,0,.5); border: 1px solid rgba(200,162,74,.4); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 2rem;
  background-color: var(--ph-cream);
  /* Farbverläufe statt Weichzeichner: Safari schneidet filter:blur an runden Ecken nicht sauber ab */
  background-image:
    radial-gradient(circle at 92% 6%, rgba(200,162,74,.28) 0, rgba(200,162,74,0) 42%),
    radial-gradient(circle at 6% 96%, rgba(188,199,204,.7) 0, rgba(188,199,204,0) 42%),
    linear-gradient(to right, rgba(0,52,53,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,52,53,.045) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px; }
.ph-hero__card .wp-block-image { position: relative; z-index: 1; width: 72%; margin: 0 0 3.5rem; }
.ph-hero__badge { position: absolute; z-index: 2; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; background: var(--ph-petrol); color: var(--ph-cream); border-radius: 16px; padding: 1rem 1.25rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); display: flex; gap: 1rem; align-items: center; }
.ph-hero__badge::before { content: "⚡"; flex: 0 0 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: rgba(200,162,74,.2); color: var(--ph-brass); font-size: 1.25rem; }
.ph-hero__badge p { margin: 0; font-size: .9rem; line-height: 1.35; opacity: .8; }
.ph-hero__badge p strong { display: block; font-size: 1rem; opacity: 1; color: #fff; }

/* Buttons */
.ph-btn-ghost .wp-block-button__link { background: rgba(255,255,255,.1) !important; color: var(--ph-cream) !important; border: 1px solid rgba(255,255,255,.25) !important; }
.ph-btn-ghost .wp-block-button__link:hover { background: rgba(255,255,255,.2) !important; }
.wp-block-button__link { box-shadow: 0 10px 30px -10px rgba(200,162,74,.55); }

/* Häkchen-Listen */
.ph-checks { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; font-size: .9rem; }
.ph-checks li { padding-left: 1.4rem; position: relative; }
.ph-checks li::before { content: "✓"; position: absolute; left: 0; color: var(--ph-brass); font-weight: 700; }
.ph-checks--column { flex-direction: column; gap: .6rem; margin-top: 1.25rem; }
.ph-checks--light { color: rgba(246,245,241,.85); }

/* ---------- Vertrauensleiste ---------- */
.ph-trust { border-top: 1px solid rgba(0,52,53,.1); border-bottom: 1px solid rgba(0,52,53,.1); }
.ph-trust__item { display: flex; gap: 1rem; align-items: flex-start; }
.ph-trust__item::before { content: ""; flex: 0 0 48px; height: 48px; border-radius: 12px; background: var(--ph-petrol) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A24A' stroke-width='3'><path d='M20 6L9 17l-5-5'/></svg>") no-repeat center / 22px; }
.ph-trust__item h3 { font-size: 1rem; margin: .2rem 0 .25rem; }
.ph-trust__item p { font-size: .9rem; opacity: .7; margin: 0; }
@media (max-width: 600px) { .ph-trust .wp-block-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .ph-trust__item { flex-direction: column; text-align: center; align-items: center; } }

/* ---------- Leistungen (Karten) ---------- */
.ph-card { background: #fff; border-radius: var(--ph-radius); overflow: hidden; box-shadow: var(--ph-shadow); border: 1px solid rgba(0,52,53,.05); height: 100%; transition: box-shadow .3s; }
.ph-card:hover { box-shadow: 0 20px 40px -16px rgba(0,52,53,.3); }
.ph-card .wp-block-image { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ph-petrol); position: relative; }
.ph-card .wp-block-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.ph-card:hover .wp-block-image img { transform: scale(1.05); }
.ph-card .wp-block-image--zoom img { transform: scale(1.7); transform-origin: top; }
.ph-card:hover .wp-block-image--zoom img { transform: scale(1.78); }
.ph-card .wp-block-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,52,53,.8), rgba(0,52,53,.15) 45%, transparent); pointer-events: none; }
.ph-card .wp-block-image figcaption { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; margin: 0; background: var(--ph-brass); color: var(--ph-petrol-dark); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .4rem .8rem; border-radius: 9999px; }
.ph-card__body { padding: 1.75rem; }
.ph-card__body h3 { font-size: 1.35rem; margin: 0 0 .75rem; }
.ph-card__body p { opacity: .75; margin: 0; }
.ph-cards .wp-block-column { margin-bottom: 0; }

/* ---------- Hausverwaltungen (dunkel) ---------- */
.ph-feature { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 1.75rem; height: 100%; transition: background .2s; }
.ph-feature:hover { background: rgba(255,255,255,.1); }
.ph-feature h3 { font-size: 1.05rem; color: #F6F5F1; margin: 0 0 .5rem; }
.ph-feature h3::before { content: ""; display: block; width: 48px; height: 48px; border-radius: 12px; background: rgba(200,162,74,.2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8A24A' stroke-width='2.5'><path d='M20 6L9 17l-5-5'/></svg>") no-repeat center / 22px; margin-bottom: 1.1rem; }
.ph-feature p { font-size: .9rem; color: rgba(246,245,241,.75); margin: 0; }
.ph-dark .ph-lead { color: rgba(246,245,241,.8); }

/* ---------- Vorher / Nachher ---------- */
.ph-ba { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--ph-shadow); height: 100%; }
.ph-ba__frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; user-select: none; touch-action: none; cursor: ew-resize; }
.ph-ba__frame .wp-block-image { position: absolute; inset: 0; margin: 0; }
.ph-ba__frame .wp-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-ba__frame::before, .ph-ba__frame::after { position: absolute; top: 12px; z-index: 5; padding: 4px 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 9999px; pointer-events: none; }
.ph-ba__frame::before { content: "Vorher"; left: 12px; background: rgba(0,36,37,.85); color: var(--ph-cream); }
.ph-ba__frame::after { content: "Nachher"; right: 12px; background: var(--ph-brass); color: var(--ph-petrol); }
.ph-ba__handle { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--ph-brass); left: 50%; z-index: 4; pointer-events: none; }
.ph-ba__handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: var(--ph-brass); color: var(--ph-petrol-dark); display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.ph-ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 6; }
.ph-ba__text { padding: 1.25rem; }
.ph-ba__text h3 { font-size: 1rem; margin: 0 0 .25rem; }
.ph-ba__text p { font-size: .875rem; opacity: .7; margin: 0; }

/* ---------- Ablauf ---------- */
.ph-steps { margin-top: 1rem; }
.ph-steps .wp-block-column { margin-top: 3.5rem; }
.ph-step { position: relative; background: #fff; border-radius: 16px; padding: 4.25rem 2rem 2rem; box-shadow: var(--ph-shadow); border: 1px solid rgba(0,52,53,.05); text-align: center; height: 100%; }
/* Kreis fest positioniert, damit WordPress-Abstandsregeln ihn nicht verschieben */
.ph-step .ph-step__num { position: absolute; top: -3rem; left: 50%; transform: translateX(-50%); margin: 0 !important; opacity: 1 !important; width: 96px; height: 96px; border-radius: 50%; background: var(--ph-petrol); color: var(--ph-brass); font-family: var(--wp--preset--font-family--display); font-weight: 800; font-stretch: 125%; font-size: 1.9rem; line-height: 1; display: grid; place-items: center; box-shadow: 0 0 0 8px var(--ph-slate-light); }
.ph-step h3 { font-size: 1.1rem; margin: 0 0 .75rem; }
.ph-step p { opacity: .7; margin: 0; }

/* ---------- Einsatzgebiet ---------- */
.ph-orte { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1.5rem; font-weight: 600; font-size: .9rem; color: var(--ph-petrol); }
.ph-orte li::before { content: "●"; color: var(--ph-brass); margin-right: .5rem; font-size: .7rem; vertical-align: middle; }
#ph-map, .ph-map { width: 100%; height: 500px; border-radius: 16px; overflow: hidden; box-shadow: var(--ph-shadow); background: var(--ph-slate-light); }
.ph-standort .ph-map { height: 340px; margin-top: 1.5rem; }
@media (max-width: 781px) { #ph-map, .ph-map { height: 340px; } }
.ph-standort { background: #fff; border-radius: var(--ph-radius); padding: 1.75rem; box-shadow: var(--ph-shadow); border: 1px solid rgba(0,52,53,.05); height: 100%; }
.ph-standort h3 { font-size: 1.25rem; margin: 0 0 .5rem; }
.ph-standort__meta { font-size: .9rem; opacity: .75; margin: 0; line-height: 1.6; }
.ph-standort__meta a { font-weight: 600; }
.ph-standort .ph-orte { margin-top: 1.25rem; }
.ph-contact__item p a { text-decoration: none; }
.leaflet-container { font-family: inherit; }
.leaflet-popup-content-wrapper { border-radius: 12px; }

/* ---------- Zielgruppen ---------- */
.ph-target { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 1.75rem; height: 100%; }
.ph-target__tag { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-stretch: 125%; color: var(--ph-brass); font-size: 1.9rem; margin: 0 0 .75rem; }
.ph-target h3 { font-size: 1rem; color: #F6F5F1; margin: 0 0 .5rem; }
.ph-target p { font-size: .9rem; color: rgba(246,245,241,.75); margin: 0; }

/* ---------- Kontakt ---------- */
.ph-contact__item { display: flex; gap: 1rem; align-items: flex-start; margin-top: 1.5rem; }
.ph-contact__item::before { content: ""; flex: 0 0 48px; height: 48px; border-radius: 12px; background: var(--ph-petrol); }
.ph-contact__item p { margin: 0; font-size: .9rem; opacity: .65; }
.ph-contact__item p strong { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-stretch: 125%; color: var(--ph-petrol); font-size: 1.05rem; opacity: 1; margin: .1rem 0; }
.ph-form { background: #fff; border-radius: var(--ph-radius); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--ph-shadow); border: 1px solid rgba(0,52,53,.05); }
.ph-form h3 { font-size: 1.4rem; margin: 0 0 1.5rem; }
.ph-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.ph-form__grid .is-full { grid-column: 1 / -1; }
@media (max-width: 600px) { .ph-form__grid { grid-template-columns: 1fr; } }
.ph-form label { display: block; font-size: .875rem; font-weight: 600; color: var(--ph-petrol); margin-bottom: .4rem; }
.ph-form input[type=text], .ph-form input[type=email], .ph-form input[type=tel], .ph-form select, .ph-form textarea { width: 100%; border: 1px solid rgba(0,52,53,.15); border-radius: 12px; padding: .75rem 1rem; font: inherit; background: #fff; }
.ph-form input:focus, .ph-form select:focus, .ph-form textarea:focus { outline: none; border-color: var(--ph-brass); box-shadow: 0 0 0 3px rgba(200,162,74,.2); }
.ph-form, .ph-form * { box-sizing: border-box; }
.ph-form__checks { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; font-size: .9rem; }
@media (max-width: 600px) { .ph-form__checks { grid-template-columns: 1fr; } }
@media (max-width: 480px) { h2 { font-size: 1.6rem; } }
.ph-form__checks label, .ph-form__consent label { font-weight: 400; color: inherit; display: flex; gap: .5rem; align-items: flex-start; margin: 0; }
.ph-form input[type=checkbox] { accent-color: var(--ph-petrol); margin-top: .2rem; }
.ph-form__consent { font-size: .875rem; opacity: .8; }
.ph-form__hp { position: absolute; left: -9999px; }
.ph-form button { margin-top: 1.5rem; background: var(--ph-brass); color: var(--ph-petrol-dark); border: 0; border-radius: 9999px; padding: 1rem 2rem; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 10px 30px -10px rgba(200,162,74,.55); }
.ph-form button:hover { background: var(--ph-brass-dark); }
.ph-form__status { font-size: .8rem; opacity: .6; margin: 1rem 0 0; }
.ph-form__status.is-ok { opacity: 1; color: var(--ph-petrol); font-weight: 600; }
.ph-form__status.is-error { opacity: 1; color: #B42318; font-weight: 600; }

/* ---------- Footer ---------- */
.ph-footer__inner { padding-top: 4rem; padding-bottom: 2rem; color: rgba(246,245,241,.8); }
.ph-footer__logo { height: 80px; width: auto; margin-bottom: 1rem; }
.ph-footer__title { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: #F6F5F1; margin: 0 0 1rem; }
.ph-footer__list { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.ph-footer__list li { margin-bottom: .4rem; }
.ph-footer__inner a { color: inherit; text-decoration: none; }
.ph-footer__inner a:hover { color: var(--ph-brass); }
.ph-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .8rem; opacity: .7; }
.ph-wa-float { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: transform .15s; }
.ph-wa-float:hover { transform: scale(1.05); }
@media (min-width: 1024px) { .ph-wa-float { display: none; } }

/* ---------- Rechtstexte ---------- */
.ph-legal { padding-top: 3rem; padding-bottom: 5rem; }
.ph-legal h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: 2rem; }
.ph-legal h2 { font-size: 1.15rem; margin-top: 2rem; }

/* ---------- Einblenden ---------- */
.ph-reveal { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
.ph-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ph-reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------- Editor-Hilfen ---------- */
.editor-styles-wrapper .ph-hero, .editor-styles-wrapper .ph-dark { color: var(--ph-cream); }