/* Consent-Gate fuer eingebettete Fremdinhalte, siehe js/cc-embed.js
   Farben ueber Variablen, damit dunkle Widgets (YouTube, Podcast) den Platzhalter
   umfaerben koennen: --cc-ph-bg, --cc-ph-fg, --cc-ph-border. */
.cc-embed { position: relative; width: 100%; height: var(--cc-embed-height, 360px); }
.cc-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.cc-embed__ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; height: 100%; padding: 20px; text-align: center;
  background: var(--cc-ph-bg, #f2f2f2); color: var(--cc-ph-fg, #222);
  border: 1px solid var(--cc-ph-border, #ddd);
}
.cc-embed__txt, .cc-embed__txt strong { color: var(--cc-ph-fg, #222); }
.cc-embed__txt { margin: 0; max-width: 34em; font-size: small; line-height: 1.5; }
.cc-embed__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* Die Clickfunnel-Themes stylen nacktes <button> als vollbreiten Block und setzen
   "color: ... !important" und bei :hover/:focus "border: none !important" - deshalb
   hier alles ausschreiben, Farbe und Rahmen mit !important (sonst war "Einstellungen
   aendern" weiss auf hellgrau, also unsichtbar). */
.cc-embed .cc-embed__btn,
.cc-embed .cc-embed__btn:hover,
.cc-embed .cc-embed__btn:focus,
.cc-embed .cc-embed__btn:active {
  display: inline-block; width: auto; margin: 0; padding: 8px 16px;
  font: inherit; font-size: small; line-height: 1.2; text-transform: none;
  border: 1px solid var(--cc-ph-fg, #222) !important; border-radius: 4px; cursor: pointer;
}
.cc-embed .cc-embed__load, .cc-embed .cc-embed__all { background: var(--cc-ph-fg, #222); color: var(--cc-ph-bg, #fff) !important; }
.cc-embed .cc-embed__prefs { background: transparent; color: var(--cc-ph-fg, #222) !important; }
.cc-embed .cc-embed__btn:hover { opacity: .85; }
.cc-embed .cc-embed__btn:focus-visible { outline: 2px solid var(--cc-ph-fg, #222); outline-offset: 2px; }
.cc-embed .cc-embed__link, .cc-embed .cc-embed__link:hover { color: inherit !important; text-decoration: underline; }

/* Platzhalter vor zurueckgehaltenen Video/Audio/Embed/Object aus dem CMS-Filter */
.cc-embed--gated { max-width: 100%; }
.cc-embed--audio { height: auto; }
.cc-embed--audio .cc-embed__ph { padding: 12px; }

/* Cookie-Banner (orestbida CookieConsent, #cc-main) gegen die Clickfunnel-Themes: die setzen auf
   nacktes <button> "color: ... !important" und "border: none !important" (clickfunnel/main.css,
   sps.css) - die Kategorie-Titel im Einstellungs-Dialog waren weiss auf hellgrau. Hier die Werte
   der Lib mit !important zurueck (gleiche Variablen, aendert auf der Hauptseite nichts). */
#cc-main .cm__btn, #cc-main .pm__btn {
  color: var(--cc-btn-primary-color) !important;
  border: 1px solid var(--cc-btn-primary-border-color) !important;
}
#cc-main .cm__btn:hover, #cc-main .pm__btn:hover {
  color: var(--cc-btn-primary-hover-color) !important;
  border-color: var(--cc-btn-primary-hover-border-color) !important;
}
#cc-main .cm__btn--secondary, #cc-main .pm__btn--secondary {
  color: var(--cc-btn-secondary-color) !important;
  border-color: var(--cc-btn-secondary-border-color) !important;
}
#cc-main .cm__btn--secondary:hover, #cc-main .pm__btn--secondary:hover {
  color: var(--cc-btn-secondary-hover-color) !important;
  border-color: var(--cc-btn-secondary-hover-border-color) !important;
}
#cc-main .pm__section-title { color: var(--cc-primary-color) !important; }
#cc-main .pm__section--toggle .pm__section-title { border: 1px solid var(--cc-cookie-category-block-border) !important; }
#cc-main .pm__close-btn { border: 1px solid var(--cc-btn-secondary-border-color) !important; }

/* Leiste NICHT fixiert, sondern vor dem Inhalt: cc-config.js setzt html.cc-topbar und haengt
   #cc-main an den Anfang von <body>. Nach der Wahl verschwindet sie samt Platz. */
html.cc-topbar #cc-main { position: relative !important; }
html.cc-topbar #cc-main .cm--bar { position: relative !important; transform: none !important; transition: none !important; }
html.cc-topbar:not(.show--consent) #cc-main .cm--bar { display: none !important; }

/* Kompakte Leiste oben (Vimeo-Dashboards, cc-config.js data-banner="top-bar", Layout "bar inline"):
   volle Breite, Text links, drei kleine Buttons in einer Zeile rechts. Gilt nur fuer .cm--bar.
   !important ueberall: auf den Clickfunnels laedt die Lib-CSS NACH dieser Datei, und ihre
   Mobil-Regeln (max-width 640px) haben selbst !important. */
#cc-main .cm--bar.cm--inline .cm__body,
#cc-main .cm--bar.cm--inline .cm__links { max-width: none !important; }
#cc-main .cm--bar.cm--inline .cm__body {
  flex-direction: row !important; align-items: center !important; gap: 1em; padding: .4em 1em !important;
}
#cc-main .cm--bar .cm__texts { padding: 0 !important; }
#cc-main .cm--bar .cm__desc {
  padding: 0 !important; font-size: .8em; line-height: 1.4; max-height: none !important;
}
#cc-main .cm--bar.cm--inline .cm__btns {
  flex-direction: row !important; flex-wrap: nowrap; gap: .4em; max-width: none !important;
  padding: 0 !important; border: 0 !important;
}
#cc-main .cm--bar .cm__btn-group { display: flex !important; flex-direction: row !important; gap: .4em; margin: 0 !important; }
#cc-main .cm--bar .cm__btn + .cm__btn,
#cc-main .cm--bar .cm__btn-group + .cm__btn-group { margin: 0 !important; }
#cc-main .cm--bar .cm__btn {
  min-width: 0 !important; min-height: 0 !important; margin: 0 !important;
  padding: .45em 1em !important; font-size: .78em !important; line-height: 1.3 !important; white-space: nowrap;
}
@media (max-width: 760px) {
  #cc-main .cm--bar.cm--inline .cm__body {
    flex-direction: column !important; align-items: stretch !important; gap: .4em; padding: .5em .75em !important;
  }
  #cc-main .cm--bar .cm__btn-group:first-child { flex: 2 1 0; }
  #cc-main .cm--bar .cm__btn-group:last-child { flex: 1 1 0; }
  #cc-main .cm--bar .cm__btn { flex: 1 1 0; padding: .5em .3em !important; font-size: .74em !important; }
}