/* PfalzHaus360 Einwilligung · Gestaltung nach Design L (DESIGN V1.7, Abschnitt 2).
   Werte stehen hier selbst, damit das Banner auch ohne Theme gleich aussieht.
   „Alle ablehnen“ und „Alle akzeptieren“ sind absichtlich identisch gestaltet (VG Hannover: kein Nudging). */

.ph360e, .ph360e-dialog, .ph360e-meldung {
  --e-gruen: #007400;
  --e-gruen-dunkel: #005c00;
  --e-gruen-hell: #e6f0e1;
  --e-flaeche: #f6f8f4;
  --e-tinte: #141414;
  --e-grau: #5a5f5a;
  --e-linie: #e0e4dc;
  --e-rand: #6b746a;
  --e-kachelrand: #8c9688;
  --e-kartenrand: #c6dbbb;
  --e-schatten: 0 2px 6px rgba(0, 60, 0, .08), 0 22px 56px rgba(0, 70, 0, .18);
  --e-schrift: var(--schrift, 'Outfit', system-ui, sans-serif);
}

/* ── erste Ebene ─────────────────────────────────────────────────────────── */
.ph360e[hidden] { display: none !important; }
.ph360e { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; }
/* Text scrollt bei wenig Höhe in sich, die Knöpfe bleiben immer sichtbar. */
.ph360e-leiste {
  box-sizing: border-box; display: flex; flex-direction: column; max-height: min(72vh, 40rem);
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--e-kartenrand); border-radius: 16px 16px 0 0; background: #fff; box-shadow: var(--e-schatten);
  color: var(--e-tinte); font: 400 .9375rem/1.45 var(--e-schrift); text-align: left;
}
@supports (height: 100dvh) { .ph360e-leiste { max-height: min(72dvh, 40rem); } }
.ph360e-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ph360e-knoepfe { flex: none; padding-top: .75rem; }
@media (min-width: 760px) {
  /* Seit 1.0.3: mittig statt links (Auftrag 30.10.2026) */
  .ph360e { left: 0; right: 0; bottom: 1.5rem; width: min(40rem, calc(100vw - 3rem)); margin-inline: auto; }
  .ph360e-leiste { padding: 1.5rem 1.75rem; border: 1px solid var(--e-kartenrand); border-radius: 16px; font-size: 1rem; line-height: 1.5; }
}
.ph360e-titel { margin: 0 0 .375rem; color: var(--e-tinte); font: 600 1.25rem/1.2 var(--e-schrift); letter-spacing: 0; text-wrap: balance; }
@media (min-width: 760px) { .ph360e-titel { margin-bottom: .5rem; font-size: 1.375rem; } }
.ph360e-text p { margin: 0 0 .5rem; text-wrap: pretty; }
.ph360e-d-inhalt p { margin: 0 0 .75rem; text-wrap: pretty; }
@media (min-width: 760px) { .ph360e-text p { margin-bottom: .75rem; } }
.ph360e-links { margin: 0; font-size: .9375rem; }
.ph360e a, .ph360e-dialog a { color: var(--e-gruen-dunkel); text-decoration: underline; text-underline-offset: .15em; }
.ph360e a:hover, .ph360e-dialog a:hover { text-decoration-thickness: 2px; }
.ph360e-test { margin: 0 0 .75rem; padding: .35rem .6rem; border-radius: 6px; background: #fbf0da; color: #6e4700; font-size: .9375rem; font-weight: 500; }

/* Knöpfe: zwei gleiche Hauptknöpfe, „Einstellungen“ als Umrissknopf */
.ph360e-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ph360e-knoepfe .ph360e-knopf--umriss { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .ph360e-knoepfe { grid-template-columns: 1fr 1fr auto; gap: .625rem; padding-top: 1rem; }
  .ph360e-knoepfe .ph360e-knopf--umriss { grid-column: auto; }
}
.ph360e-knopf {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0;
  padding: .4rem .75rem; border: 2px solid var(--e-gruen); border-radius: 8px; background: var(--e-gruen); color: #fff;
  font: 600 1rem/1.25 var(--e-schrift); text-align: center; text-decoration: none; cursor: pointer; box-shadow: none;
}
.ph360e-knopf:hover { background: var(--e-gruen-dunkel); border-color: var(--e-gruen-dunkel); color: #fff; }
.ph360e-knopf--umriss { background: #fff; color: var(--e-gruen-dunkel); }
.ph360e-knopf--umriss:hover { background: var(--e-gruen-hell); color: var(--e-gruen-dunkel); border-color: var(--e-gruen); }
@media (min-width: 760px) { .ph360e-knopf { min-height: 48px; padding: .5rem 1rem; } }
.ph360e :focus-visible, .ph360e-dialog :focus-visible, .ph360e-menue :focus-visible, .ph360e-oeffnen:focus-visible {
  outline: 3px solid var(--e-gruen-dunkel); outline-offset: 3px; border-radius: 4px;
}

/* Platz unten frei, solange das Banner steht: nichts Fokussierbares liegt darunter (WCAG 2.4.11) */
html.ph360e-offen { scroll-padding-bottom: calc(var(--ph360e-hoehe, 0px) + 1rem); }
html.ph360e-offen body { padding-bottom: var(--ph360e-hoehe, 0px) !important; }
/* Seit 1.0.3: Ab 760 px liegt das Banner als Karte über der Seite. Den Platz darunter hält die dunkle Fußleiste des
   Themes frei (.fuss__balken), nicht der weiße Seitengrund: Der Fuß reicht so bis an den Fensterrand, und kein
   Fokusziel liegt unter dem Banner. Ohne diese Fußleiste bleibt der Platz am body. Auf dem Handy deckt das Banner
   den Platz über die ganze Breite ab; dort bleibt es beim body. */
@media (min-width: 760px) {
  html.ph360e-offen body:has(.fuss__balken) { padding-bottom: 0 !important; }
  html.ph360e-offen .fuss__balken { padding-bottom: var(--ph360e-hoehe, 0px); }
}

/* ── zweite Ebene: Einstellungen ─────────────────────────────────────────── */
.ph360e-dialog {
  box-sizing: border-box; width: min(44rem, calc(100vw - 1rem)); max-width: none; max-height: min(90vh, 52rem); margin: auto; padding: 0;
  border: 1px solid var(--e-kartenrand); border-radius: 16px; background: #fff; box-shadow: var(--e-schatten);
  color: var(--e-tinte); font: 400 1rem/1.5 var(--e-schrift); overflow: hidden;
}
@supports (height: 100dvh) { .ph360e-dialog { max-height: min(90dvh, 52rem); } }
.ph360e-dialog[open] { display: flex; flex-direction: column; }
.ph360e-dialog::backdrop { background: rgba(20, 20, 20, .55); }
.ph360e-d-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .75rem .75rem 1.5rem; border-bottom: 1px solid var(--e-linie); }
.ph360e-d-kopf .ph360e-titel { margin: 0; }
.ph360e-zu { display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none; margin: 0; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--e-tinte); cursor: pointer; }
.ph360e-zu:hover { background: var(--e-flaeche); }
.ph360e-d-inhalt { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem 1.5rem .5rem; }
.ph360e-d-fuss { display: grid; grid-template-columns: repeat(3, 1fr); gap: .625rem; padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--e-linie); background: var(--e-flaeche); }
@media (max-width: 599px) {
  .ph360e-d-kopf { padding-left: 1.25rem; }
  .ph360e-d-inhalt { padding: 1rem 1.25rem .5rem; }
  .ph360e-d-fuss { grid-template-columns: 1fr 1fr; padding-left: 1.25rem; padding-right: 1.25rem; }
  .ph360e-d-fuss .ph360e-knopf--umriss { grid-column: 1 / -1; }
}
@media (max-width: 339px) { .ph360e-d-fuss { grid-template-columns: 1fr; } }

.ph360e-kat { margin: 0 0 .75rem; padding: 1rem 1.125rem; border: 1px solid var(--e-linie); border-radius: 12px; }
.ph360e-kat__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ph360e-kat__titel { margin: 0; color: var(--e-tinte); font: 600 1.1875rem/1.2 var(--e-schrift); letter-spacing: 0; }
.ph360e-kat__text { margin-top: .375rem; color: var(--e-grau); }
.ph360e-kat__text p { margin: 0 0 .5rem; }
.ph360e-immer { flex: none; padding: .25rem .625rem; border-radius: 999px; background: var(--e-gruen-hell); color: var(--e-gruen-dunkel); font-size: .9375rem; font-weight: 600; }

/* Schalter: echtes Kästchen mit role="switch", darüber gelegt; die Bahn ist nur Bild */
.ph360e-schalter { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 60px; height: 44px; cursor: pointer; }
.ph360e-schalter input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ph360e-schalter__bahn { position: relative; box-sizing: border-box; width: 52px; height: 32px; border: 2px solid var(--e-kachelrand); border-radius: 999px; background: #fff; transition: background-color .15s, border-color .15s; }
.ph360e-schalter__bahn::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--e-rand); transition: transform .15s; }
.ph360e-schalter input:checked + .ph360e-schalter__bahn { border-color: var(--e-gruen); background: var(--e-gruen); }
.ph360e-schalter input:checked + .ph360e-schalter__bahn::after { transform: translateX(20px); background: #fff; }
.ph360e-schalter input:focus-visible + .ph360e-schalter__bahn { outline: 3px solid var(--e-gruen-dunkel); outline-offset: 3px; }
.ph360e-schalter:hover .ph360e-schalter__bahn { border-color: var(--e-rand); }
.ph360e-schalter:hover input:checked + .ph360e-schalter__bahn { border-color: var(--e-gruen-dunkel); background: var(--e-gruen-dunkel); }
@media (forced-colors: active) {
  .ph360e-schalter__bahn { border-color: CanvasText; }
  .ph360e-schalter__bahn::after { background: CanvasText; }
  .ph360e-schalter input:checked + .ph360e-schalter__bahn { background: Highlight; border-color: Highlight; }
  .ph360e-schalter input:checked + .ph360e-schalter__bahn::after { background: Canvas; }
}

.ph360e-details { margin-top: .5rem; }
.ph360e-details summary { display: flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--e-gruen-dunkel); font-weight: 600; cursor: pointer; list-style: none; }
.ph360e-details summary::-webkit-details-marker { display: none; }
.ph360e-details summary::before { content: ""; width: .5rem; height: .5rem; margin: 0 .25rem 0 .125rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.ph360e-details[open] summary::before { transform: rotate(45deg); }
.ph360e-dienste { margin: .25rem 0 0; padding: 0; list-style: none; }
.ph360e-dienst { padding: .75rem 0; border-top: 1px solid var(--e-linie); }
.ph360e-dienst__name { margin: 0 0 .375rem; font-weight: 600; }
.ph360e-dienst dl { display: grid; grid-template-columns: 1fr; gap: .125rem 1rem; margin: 0; font-size: .9375rem; }
.ph360e-dienst dt { color: var(--e-grau); font-weight: 500; }
.ph360e-dienst dd { margin: 0 0 .375rem; overflow-wrap: anywhere; }
@media (min-width: 600px) {
  .ph360e-dienst dl { grid-template-columns: 12rem 1fr; }
  .ph360e-dienst dd { margin: 0; }
}
.ph360e-hinweis { color: var(--e-grau); font-size: .9375rem; }
.ph360e-kennung { color: var(--e-grau); font-size: .9375rem; overflow-wrap: anywhere; }
.ph360e-kennung code, .ph360e-kennung[hidden] { font-size: .875rem; }
.ph360e-kennung[hidden] { display: none; }

/* Wenig Höhe (Handy quer, 400 % Zoom): Banner und Dialog scrollen als Ganzes, nichts bleibt
   festgeheftet und nichts wird abgeschnitten (WCAG 1.4.10). */
@media (max-height: 30em) {
  .ph360e-leiste { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .ph360e-inhalt { overflow: visible; }
  .ph360e-dialog[open] { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .ph360e-d-inhalt { overflow: visible; }
}

/* Ansage für Vorlesehilfen */
.ph360e-meldung { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Link im Fuß, falls das Skript ihn ergänzt und es keine Liste gibt */
.ph360e-fusslink { margin: .5rem auto; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .ph360e-schalter__bahn, .ph360e-schalter__bahn::after, .ph360e-details summary::before { transition: none; }
}
@media print { .ph360e, .ph360e-dialog { display: none !important; } }