/* StiefCon Skin - Platzhalter fuer externe Dienste (Zwei-Klick-Freigabe).
   Laedt auf ALLEN Seiten, auch ohne Skin - das Kontaktformular-Popup mit
   reCAPTCHA gibt es ueberall. Deshalb zwei Farbwelten: dunkel im Skin,
   hell auf den uebrigen Divi-Seiten. */

.sc-extern {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(46,230,200,.35);
  background: rgba(46,230,200,.08);
  color: inherit;
  font-family: inherit;
  text-align: left;
}
.sc-extern__txt { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; }
.sc-extern__btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 16px;
  border-radius: 10px;
  border: 0;
  background: #FF6D00;
  color: #000;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  cursor: pointer;
}
.sc-extern__btn:hover { background: #FF9A4D; }

body:not(.sc-skin) .sc-extern { background: #eefaf7; border-color: #8fe3d3; color: #172033; }

/* Widerruf-Knopf auf Seiten ohne eigenen Footer (Blog, Leistungen, Rechtstexte).
   Klein und zurueckhaltend: er sitzt fest ueber der Seite und darf keinen
   Fliesstext verdecken. Beschriftung deshalb nur "Cookies", der volle Zweck
   steht im aria-label (siehe banner() in stiefcon-skin.php). */
.sc-consent__oeffner {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 90;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(46,230,200,.45);
  background: rgba(8,11,20,.92);
  color: #c3cbd9;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: .85;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.7);
}
.sc-consent__oeffner:hover,
.sc-consent__oeffner:focus { color: #fff; border-color: #2ee6c8; opacity: 1; }
@media (max-width: 479px) {
  .sc-consent__oeffner { padding: 6px 8px; }
}
@media print { .sc-consent__oeffner { display: none; } }

/* Ohne Freigabe: leeres reCAPTCHA-Feld und leeren Express-Kasten nicht anzeigen */
body.sc-extern-zu .g-recaptcha:empty { display: none; }
body.sc-extern-zu.single-product .wcpay-express-checkout-wrapper { display: none !important; }

/* Divi packt Video-iframes in eine Seitenverhaeltnis-Huelle (padding-top: 56.25%).
   Steht darin nur unser Platzhalter, waere das ein leerer Kasten von ~350px -
   Huelle zusammenklappen, bis das iframe nach der Freigabe zurueck ist.
   Greift nur, wenn der Platzhalter DIREKTES Kind der Huelle ist (auf /blog/ so);
   ein Zwischen-Wrapper (Lazy-Load, <p>) faellt durch - dann Selektor erweitern. */
div[style*="padding-top"]:has(> .sc-extern--iframe) { padding-top: 0 !important; overflow: visible !important; }

/* Der Platzhalter steht da, wo spaeter das Video steht - also bringt er die
   Flaeche gleich selbst mit (16:9), sonst springt das Layout beim Nachladen.
   Unter 480px kein festes Verhaeltnis: dort waere der Kasten zu flach fuer den
   Text, deshalb nur eine Mindesthoehe, die mitwaechst. */
.sc-extern--iframe {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 180px;
  max-width: 100%;
  padding: 24px;
  text-align: center;
  background: #0f1320;
}
.sc-extern--iframe .sc-extern__txt { max-width: 46ch; }
body:not(.sc-skin) .sc-extern--iframe { background: #eefaf7; }
@media (min-width: 480px) {
  .sc-extern--iframe { aspect-ratio: 16 / 9; }
}

/* ------------------------------------------------------------------
   Cookie-Banner gegen Divi absichern
   consent.css setzt fuer Ueberschrift und Zeilennamen keine Farbe - auf
   WordPress-Seiten erben sie deshalb Divis h3-Schwarz (#000) bzw. die
   Textfarbe des Themes und stehen dann fast unsichtbar auf dem dunklen
   Banner (gemessen 1,07:1). Diese Datei laedt auf ALLEN Seiten und kommt
   im Quelltext vor den et-cache-Dateien - deshalb !important.
   ------------------------------------------------------------------ */
.sc-consent .cookie { color: #F5F5F7 !important; }
.sc-consent .cookie__h3 { color: #F5F5F7 !important; }
.sc-consent .cookie__name { color: #F5F5F7 !important; }

/* Beide Antworten muessen gleich leicht zu geben sein (Art. 7 Abs. 3 DSGVO):
   gleiche Hoehe, gleiches Polster, gleiche Schrift - nur die Fuellung
   unterscheidet sich, "Nur notwendige" bekommt dafuer einen sichtbaren Rahmen.
   Der Rahmen macht den Knopf 2px hoeher als den Nachbarn, deshalb bekommt
   "Alle akzeptieren" einen unsichtbaren Rahmen derselben Staerke. */
.sc-consent .cookie__alle { border: 1px solid transparent; }
.sc-consent .cookie__noetig {
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid rgba(245,245,247,.6);
  background: transparent;
  color: #F5F5F7 !important;
}
.sc-consent .cookie__noetig:hover { border-color: rgba(245,245,247,.85); }

/* ------------------------------------------------------------------
   Korrekturen an den Divi-Seiten (alles ausserhalb des Skins)
   ------------------------------------------------------------------ */

/* a) Der CTA-Block im Divi-Footer ("Jetzt unverbindlich beraten lassen!")
      liegt auf #f74b03 - das ist nicht das CI-Orange. Quelle der Farbe:
      et-core-unified-tb-75-deferred-*.min.css, Regel .et_pb_row_0_tb_footer.
      Auf #FF6D00 hat Weiss nur 2,8:1, Schwarz dagegen 7,4:1 - deshalb
      wandert die Schrift von Weiss auf Schwarz. Die Divi-Regeln fuer Text
      und Knopf tragen !important, unsere Selektoren sind eine Klasse
      hoeher (body:not(.sc-skin) davor). */
body:not(.sc-skin) .et_pb_row_0_tb_footer { background-color: #FF6D00 !important; }
body:not(.sc-skin) .et_pb_text_0_tb_footer h3 { color: #000000 !important; }
body:not(.sc-skin) .et_pb_text_1_tb_footer.et_pb_text { color: #000000 !important; }
body:not(.sc-skin) #page-container .et_pb_section .et_pb_button_0_tb_footer {
  color: #000000 !important;
  border-color: #000000 !important;
}
/* Divi faerbt den Knopf beim Hover schwarz - dort muss die Schrift wieder hell sein. */
body:not(.sc-skin) #page-container .et_pb_section .et_pb_button_0_tb_footer:hover {
  color: #FFFFFF !important;
}

/* b) Kontaktformular: Divi gibt den Feldern color:#999 auf einer Flaeche in
      #F5F5F5 - 2,61:1, also unlesbar fuer den Platzhaltertext. #5A5A5A
      bringt 6,3:1, der eingetippte Text wird gleich mit dunkler.
      ::placeholder steht bewusst in einer eigenen Regel: mischt man es mit
      ::-webkit-input-placeholder in eine Selektorliste, verwerfen Browser
      die ganze Regel. */
body:not(.sc-skin) .et_pb_contact_form_container .input { color: #333333 !important; }
body:not(.sc-skin) .et_pb_contact_form_container .input::placeholder { color: #5A5A5A !important; opacity: 1; }
body:not(.sc-skin) .et_pb_contact_form_container .input::-webkit-input-placeholder { color: #5A5A5A !important; opacity: 1; }

/* c) Der Divi-Footer (Theme Builder tb-75) traegt die Telefonnummer zweimal:
      et_pb_blurb_0_tb_footer und et_pb_blurb_1_tb_footer sind identische
      "Telefon"-Blurbs (gemessen 03.09.2026 auf /blog/ und /kontakt/). Bis der
      doppelte Blurb im Theme Builder geloescht ist, bleibt der zweite unsichtbar.
      Haengt wie a) an den Modulnummern - nach einem Footer-Umbau pruefen. */
body:not(.sc-skin) .et_pb_blurb_1_tb_footer { display: none !important; }