/* Cookie-Einwilligung - Darstellung des Dialogs.

   Uebernommen aus dem Schwesterprojekt PUCo (assets/puco.css). Die
   Regeln sind unveraendert, nur der Klassenpraefix heisst hier ph statt
   puco. Die Farben kommen aus den Theme-Variablen von Avada, damit der
   Dialog zur uebrigen Website passt.

   Gehoert zu assets/js/consent.js, das die Markup-Struktur erzeugt. */

#ph-cc{
  position:fixed;inset:0;z-index:2147483000;
  font-family:var(--body_typography-font-family),-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
#ph-cc *{box-sizing:border-box;}
#ph-cc .ph-cc-backdrop{position:absolute;inset:0;background:rgba(18,24,38,.55);}
#ph-cc .ph-cc-box{
  position:relative;margin:5vh auto 0;background:#fff;color:#1d1d1d;
  border-radius:8px;box-shadow:0 14px 50px rgba(0,0,0,.32);
  display:flex;flex-direction:column;max-height:90vh;animation:ph-cc-in .26s ease;
}
#ph-cc .ph-cc-box.is-details{max-width:920px;width:calc(100% - 40px);}
#ph-cc .ph-cc-box.is-entrance{max-width:560px;width:calc(100% - 40px);margin-top:6vh;padding:24px 26px 20px;}
@keyframes ph-cc-in{from{opacity:0;transform:translateY(-14px);}to{opacity:1;transform:none;}}

/* Kopf */
#ph-cc .ph-cc-head{display:flex;align-items:center;gap:12px;padding:20px 24px 16px;border-bottom:1px solid #e6e6e6;}
#ph-cc .is-entrance .ph-cc-head{padding:0 0 14px;margin-bottom:14px;}
#ph-cc .ph-cc-logo{width:40px;height:40px;object-fit:contain;flex:0 0 auto;}
#ph-cc .ph-cc-title{margin:0;font-size:34px;font-weight:700;color:var(--awb-color8);flex:1 1 auto;}
#ph-cc .ph-cc-headlinks{display:flex;gap:20px;margin-right:36px;}
#ph-cc .ph-cc-headlinks a{font-size:15px;color:#000;text-decoration:none;font-weight:500;}
#ph-cc .ph-cc-headlinks a:hover{text-decoration:underline;color:#1f1f1f;}
#ph-cc .ph-cc-x{position:absolute;top:12px;right:16px;z-index:2;border:0;background:none;font-size:30px;line-height:1;color:var(--awb-color5);cursor:pointer;padding:0 4px;}
#ph-cc .ph-cc-x:hover{color:#000;}

/* Einleitung + Tabs */
#ph-cc .ph-cc-intro{margin:0;padding:16px 24px 14px;font-size:14.5px;line-height:1.6;color:#333;}
/* Auf schmalen Bildschirmen brechen die vier Reiter in eine zweite Zeile
   um, statt seitlich zu scrollen. Ein seitlicher Scroll (overflow-x:auto)
   zwingt in CSS auch die Senkrechte zum Beschneiden -- zusammen mit dem
   1px, um das der aktive Reiter nach unten ueberlappt, entstand dadurch
   ein schmaler Scrollbalken, der den aktiven Reiter oben anschnitt. Mit
   Umbruch bleibt die Senkrechte sichtbar und der Reiter unversehrt. */
#ph-cc .ph-cc-tabs{display:flex;flex-wrap:wrap;gap:2px;padding:0 24px;border-bottom:1px solid #e6e6e6;}
#ph-cc .ph-cc-tab{
  appearance:none;border:1px solid transparent;border-bottom:0;background:#fff;color:#000;
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;
  padding:12px 20px;white-space:nowrap;border-radius:6px 6px 0 0;margin-bottom:-1px;
}
#ph-cc .ph-cc-tab:hover{color:var(--awb-color5);}
/* Rahmenfarbe gleich der Fuellung, damit kein absetzender Rand entsteht.
   Zuvor stand hier Farbe 4 (Terrakotta), die als roter Rahmen auffiel. */
#ph-cc .ph-cc-tab.is-active{background:var(--awb-color5);color:#fff;border-color:var(--awb-color5);}

/* Inhaltsbereich (scrollt) */
#ph-cc .ph-cc-panel{flex:1 1 auto;overflow-y:auto;padding:18px 24px;min-height:140px;}
#ph-cc .ph-cc-toolbar{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-bottom:14px;}
#ph-cc .ph-cc-selbtn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;border:0;border-radius:6px;padding:9px 16px;font-family:inherit;font-size:13.5px;font-weight:600;background:var(--awb-color5);color:#fff;transition:background .15s ease;}
#ph-cc .ph-cc-selbtn:hover{background:#000;}
#ph-cc .ph-cc-selico{width:15px;height:15px;flex:0 0 auto;}

/* Karte (Service-Gruppe / Service / Provider) */
#ph-cc .ph-cc-card{display:flex;gap:14px;align-items:flex-start;background:#f2f2f2;border-radius:6px;padding:16px 18px;margin-bottom:12px;}
#ph-cc .ph-cc-card-main{flex:1 1 auto;min-width:0;}
#ph-cc .ph-cc-card-aside{flex:0 0 auto;padding-top:2px;}
#ph-cc .ph-cc-card-head{display:flex;align-items:center;gap:11px;flex-wrap:wrap;}
#ph-cc .ph-cc-card-title{font-size:15px;font-weight:700;color:var(--awb-color8);}
#ph-cc .ph-cc-card-desc{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:#4d4d4d;}
#ph-cc .ph-cc-badge{font-size:11px;font-weight:600;color:#6b7280;background:#e6e6e6;border-radius:4px;padding:2px 8px;}
#ph-cc .ph-cc-muted{color:#6b7280;}

/* „Informationen anzeigen" */
#ph-cc .ph-cc-more{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--awb-color5);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:0;line-height:1.3;white-space:nowrap;}
#ph-cc .ph-cc-more:hover{color:#4d4d4d;}
#ph-cc .ph-cc-more-ico{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px;transition:transform .15s ease;}
#ph-cc .ph-cc-card.is-open > .ph-cc-card-aside .ph-cc-more-ico,
#ph-cc .ph-cc-subsrv.is-open > .ph-cc-subsrv-head .ph-cc-more-ico{transform:rotate(-135deg);margin-top:2px;}
#ph-cc .ph-cc-details{display:none;margin-top:14px;padding-top:14px;border-top:1px solid #e6e6e6;}
#ph-cc .ph-cc-card.is-open > .ph-cc-card-main > .ph-cc-details{display:block;}
#ph-cc .ph-cc-subsrv.is-open > .ph-cc-details{display:block;}
#ph-cc .ph-cc-details-h{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--awb-color8);}
#ph-cc .ph-cc-svclist{margin:0;padding-left:18px;font-size:13px;line-height:1.7;color:#4d4d4d;}
#ph-cc .ph-cc-subsrv{padding:10px 0;border-bottom:1px solid #e6e6e6;}
#ph-cc .ph-cc-subsrv:last-child{border-bottom:0;padding-bottom:0;}
#ph-cc .ph-cc-subsrv-head{display:flex;align-items:center;gap:11px;}
#ph-cc .ph-cc-subsrv-txt{flex:1 1 auto;min-width:0;font-size:13.5px;color:var(--awb-color8);}
#ph-cc .ph-cc-kv{margin:0 0 7px;font-size:13px;line-height:1.55;color:#333;}
#ph-cc .ph-cc-kv b{color:var(--awb-color8);}
#ph-cc .ph-cc-kv a{color:var(--awb-color5);word-break:break-all;}

/* Custom-Checkbox (Service-Gruppen) */
#ph-cc .ph-cc-check-wrap{position:relative;display:inline-flex;flex:0 0 auto;cursor:pointer;}
#ph-cc .ph-cc-check-input{position:absolute;left:0;top:0;opacity:0;width:22px;height:22px;margin:0;cursor:pointer;}
#ph-cc .ph-cc-check{width:22px;height:22px;border-radius:6px;background:#e6e6e6;border:2px solid var(--awb-color7);position:relative;transition:background .15s ease,border-color .15s ease;}
#ph-cc .ph-cc-check-input:checked + .ph-cc-check{background:var(--awb-color5);border-color:var(--awb-color5);}
#ph-cc .ph-cc-check-input:checked + .ph-cc-check::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
#ph-cc .ph-cc-check-input:indeterminate + .ph-cc-check{background:var(--awb-color5);border-color:var(--awb-color5);}
#ph-cc .ph-cc-check-input:indeterminate + .ph-cc-check::after{content:"";position:absolute;left:4px;top:9px;width:12px;height:0;border-bottom:2px solid #fff;}
#ph-cc .ph-cc-check-input:disabled{cursor:default;}
#ph-cc .ph-cc-check-input:disabled + .ph-cc-check{background:#e6e6e6;border-color:#e6e6e6;}
#ph-cc .ph-cc-check-input:disabled:checked + .ph-cc-check::after{border-color:#999;}

/* Custom-Switch (Services) */
#ph-cc .ph-cc-switch-wrap{position:relative;display:inline-flex;flex:0 0 auto;cursor:pointer;}
#ph-cc .ph-cc-switch-input{position:absolute;left:0;top:0;opacity:0;width:46px;height:26px;margin:0;cursor:pointer;}
#ph-cc .ph-cc-switch{width:46px;height:26px;border-radius:13px;background:#e6e6e6;position:relative;transition:background .15s ease;}
#ph-cc .ph-cc-switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#000;transition:transform .15s ease,background .15s ease;}
#ph-cc .ph-cc-switch-input:checked + .ph-cc-switch{background:var(--awb-color5);}
#ph-cc .ph-cc-switch-input:checked + .ph-cc-switch::after{transform:translateX(20px);background:#fff;}
#ph-cc .ph-cc-switch-input:disabled{cursor:default;}

/* Tabellen (Cookies / Historie) */
#ph-cc .ph-cc-tablewrap{overflow-x:auto;margin-top:10px;}
#ph-cc .ph-cc-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:520px;}
#ph-cc .ph-cc-table th,#ph-cc .ph-cc-table td{text-align:left;padding:7px 9px;border-bottom:1px solid #f0f0f0;vertical-align:top;color:#333;}
#ph-cc .ph-cc-table th{background:#fafafa;font-weight:700;color:var(--awb-color8);white-space:nowrap;}
#ph-cc .ph-cc-table tr:nth-child(even) td{background:#fafafa;}
#ph-cc .ph-cc-histtable tr:nth-child(even) td{background:transparent;}
#ph-cc .ph-cc-histtable td{border-bottom:0;vertical-align:top;line-height:1.55;}
#ph-cc .ph-cc-histtable .ph-cc-uidrow td{text-align:center;font-size:11.5px;color:#6b7280;letter-spacing:.02em;padding:3px 9px 14px;border-bottom:1px solid #e6e6e6;}
#ph-cc .ph-cc-yes{color:#1e6b34;font-weight:600;}
#ph-cc .ph-cc-no{color:#a72828;font-weight:600;}
#ph-cc .ph-cc-empty{font-size:14px;color:#6b7280;padding:24px 0;text-align:center;}

/* Footer-Buttons. Reihenfolge: Speichern - Nur essenzielle - Alle Cookies.
   Nur „Alle Cookies akzeptieren" ist voll in der Markenfarbe gefuellt,
   die beiden anderen sind mit ihr umrandet (Modifier is-umrandet). Der
   Rand liegt auch auf dem gefuellten Button (dort in Fuellfarbe, also
   unsichtbar), damit alle Buttons exakt gleich hoch sind. */
#ph-cc .ph-cc-footer{display:flex;gap:10px;padding:16px 24px;background:#fafafa;border-top:1px solid #e6e6e6;border-radius:0 0 8px 8px;flex-wrap:wrap;}
#ph-cc .ph-cc-btn{flex:1 1 auto;cursor:pointer;border:2px solid var(--awb-color5);border-radius:6px;padding:11px 14px;font-family:inherit;font-size:14px;font-weight:600;line-height:1.25;background:var(--awb-color5);color:#fff;transition:background .15s ease,color .15s ease,border-color .15s ease;}
#ph-cc .ph-cc-btn:hover{background:var(--awb-color8);border-color:var(--awb-color8);}
#ph-cc .ph-cc-btn.is-umrandet{background:transparent;color:var(--awb-color5);}
#ph-cc .ph-cc-btn.is-umrandet:hover{background:var(--awb-color5);border-color:var(--awb-color5);color:#fff;}

/* Einstiegs-Banner */
#ph-cc .ph-cc-ebody p{margin:0 0 10px;font-size:14px;line-height:1.55;color:#4d4d4d;}
#ph-cc .ph-cc-ebody a{color:var(--awb-color5);text-decoration:underline;}
#ph-cc .ph-cc-ebtns{display:flex;flex-direction:column;gap:8px;margin-top:16px;}
#ph-cc .is-entrance .ph-cc-btn{flex:0 0 auto;}
#ph-cc .ph-cc-prefs{display:block;width:100%;margin-top:8px;background:none;border:0;color:var(--awb-color5);font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;padding:6px;text-align:center;}
#ph-cc .ph-cc-prefs:hover{color:#4d4d4d;text-decoration:underline;}
#ph-cc .ph-cc-links{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:14px;}
#ph-cc .ph-cc-links a{font-size:12.5px;color:#6b7280;text-decoration:none;}
#ph-cc .ph-cc-links a:hover{text-decoration:underline;}
#ph-cc .ph-cc-links span{color:#c9c9c9;}

/* Wieder geoeffnet wird der Dialog ueber den Link "Cookie-Einstellungen"
   in der Fusszeile, nicht ueber ein schwebendes Symbol. Der Link steht
   dort neben Impressum und Datenschutz und uebernimmt deren Aussehen --
   deshalb braucht er hier nur den Zeiger, alles Weitere kommt aus dem
   Theme. */
.ph-cc-oeffnen{cursor:pointer;}

@media (max-width:640px){
  #ph-cc .ph-cc-box.is-details,#ph-cc .ph-cc-box.is-entrance{margin:0;border-radius:0;width:100%;max-width:100%;height:100%;max-height:100%;}
  #ph-cc .ph-cc-head{flex-wrap:wrap;padding:16px 16px 12px;}
  #ph-cc .ph-cc-headlinks{width:100%;margin:8px 0 0 52px;gap:16px;}
  #ph-cc .ph-cc-title{font-size:29px;}
  #ph-cc .ph-cc-intro,#ph-cc .ph-cc-tabs,#ph-cc .ph-cc-panel,#ph-cc .ph-cc-footer{padding-left:16px;padding-right:16px;}
  #ph-cc .ph-cc-footer{flex-direction:column;}
}