/*
 Theme Name:   TCB Divi Child
 Description:  Divi Child Theme - works only when used with the Divi Parent Theme
 Author:       Bettina Herzog
 Author URI:   https://bettinaherzog.de
 Template:     Divi
 Version:      1.0.0
 */

/* Eigenes CSS unter diesem Kommentar eintragen */


/* =========================================================
   Section Toggle — Status-Klassen für js/tcb-sections.js
   ---------------------------------------------------------
   Nutzung:
     <button data-toggle=".meine-section">Umschalten</button>
     <div class="meine-section hidden">…</div>
   ========================================================= */

.hidden  { display: none !important; }
.showing { display: block; }

/* Optional: Button-Status wenn Ziel sichtbar */
[data-toggle].is-active { /* z. B. background, color — pro Projekt */ }


/* =========================================================
   1) Back to Top Button Styling
   ---------------------------------------------------------
   Stylt den nativen Divi "Back to Top"-Button
   (zu aktivieren unter Divi → Theme Options → General).
   Hinweis: Im Original-PDF steht content: '!'; – das ist
   ein Glyph aus dem ETmodules-Icon-Font, der je nach Divi-
   Version einen Pfeil/ein Symbol darstellt. Bei Bedarf
   anpassen (z. B. eigenes Unicode-Icon oder ETmodules-Code).
   ========================================================= */

.et_pb_scroll_top:before {
  content: '!';
}
.et_pb_scroll_top.et-pb-icon {
  background: #fff;
  color: #000;
  padding: 12px;
  font-size: 22px;
  right: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  border-radius: 50%;
}
.et_pb_scroll_top.et-pb-icon:hover {
  background: #000;
  color: #fff;
}
.et_pb_scroll_top.et-pb-icon.et-visible {
  transition: all .3s ease-in-out;
}


/* =========================================================
   2) Add Space Before Headings
   ---------------------------------------------------------
   Sorgt für Luft vor Überschriften, die direkt auf
   Absätze, Listen oder Blockquotes folgen.
   ========================================================= */

:where(.et_pb_text) :is(p,ul,ol,blockquote) ~ :is(h1,h2,h3,h4,h5,h6) {
  padding-top: .75em;
}


/* =========================================================
   3) Fix Bottom Spacing on Elements
   ---------------------------------------------------------
   Konsistenter Abstand am Ende von Text-Modulen.
   ========================================================= */

:where(.et_pb_text) p:last-of-type {
  padding-bottom: 1em;
}
:where(.et_pb_text) :is(p,ul,ol,blockquote):last-child {
  padding-bottom: 0;
}


/* =========================================================
   4) Style Lists
   ---------------------------------------------------------
   Listenzeichen in Primärfarbe und Heading-Font, plus
   etwas Abstand zwischen den Listenpunkten.
   ========================================================= */

:where(.et_pb_text) ::marker {
  color: var(--gcid-primary-color);
  font-family: var(--et_global_heading_font);
}
:where(.et_pb_text) :is(ol,ul) li:not(:last-child) {
  padding-bottom: .5em;
}


/* =========================================================
   5) Style Blockquotes
   ---------------------------------------------------------
   Blockquotes mit dekorativem Anführungszeichen und
   dezentem Hintergrund-Tint in der Primärfarbe.
   ========================================================= */

:where(.et_pb_text) blockquote {
  border: none;
  position: relative;
  padding: .5em 1em;
  margin: .5em 0 1.5em;
}
:where(.et_pb_text) blockquote::after {
  content: '〞';
  color: var(--gcid-primary-color);
  position: absolute;
  font-size: 4em;
  left: -.15em;
  top: .2em;
}
:where(.et_pb_text) blockquote::before {
  content: '';
  background: var(--gcid-primary-color);
  opacity: 0.1;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  border-radius: 5px;
}


/* =========================================================
   6) Link Hover Effects
   ---------------------------------------------------------
   Sanfte Animation des Link-Underlines beim Hover.
   ========================================================= */

:where(.et_pb_text) a {
  transition: all .2s linear;
  text-underline-offset: .24em;
  text-decoration-thickness: .1em;
}
:where(.et_pb_text) a:hover {
  text-underline-offset: .12em;
}

/* =========================================================
   7) DIVI ICON HOVER-EFFEKTE
   ---------------------------------------------------------
   Wiederverwendbare Hover-Effekte.
   
   EFFEKT 1: ICON-SWAP
   Zwei Icons liegen uebereinander, beim Hover wird sanft zwischen ihnen
   umgeblendet. Das zweite Icon wird zusaetzlich leicht groesser.

  EFFEKT 2: TCB-ICON-SPIN
  Ein einzelnes Blurb-Icon dreht sich und wird groesser, wenn man ueber
  das Blurb (oder die Spalte) hovert.
   ========================================================================== */


/* ==========================================================================
   EFFEKT 1: ICON-SWAP (zwei Icons, Tausch beim Hover)
   --------------------------------------------------------------------------
   Aufbau in Divi:
   1. Eine Spalte oder Zeile als gemeinsamen Container -> CSS-Klasse: icon-swap
   2. Erstes Blurb-Modul (Standard-Icon)              -> CSS-Klasse: icon-default
   3. Zweites Blurb-Modul (Hover-Icon)                -> CSS-Klasse: icon-hover

   Wichtig: Die beiden Module muessen visuell uebereinander liegen
   (z. B. per absoluter Positionierung). Diese Positionierung ist hier
   nicht enthalten - das wurde im Modul-Setup geregelt.
   ========================================================================== */

/* Sanfter Uebergang fuer beide Icons (Opacity und Skalierung) */
.icon-swap .icon-default,
.icon-swap .icon-hover {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Standard-Zustand: Hover-Icon ist unsichtbar und in Normalgroesse */
.icon-swap .icon-hover {
  opacity: 0;
  transform: scale(1);
}

/* Beim Hover ueber den Container: Standard-Icon ausblenden */
.icon-swap:hover .icon-default {
  opacity: 0;
}

/* Beim Hover ueber den Container: Hover-Icon einblenden und vergroessern */
.icon-swap:hover .icon-hover {
  opacity: 1;
  transform: rotate(-2deg) scale(1.05);   /* 1.10 = dezent, 1.15 = spuerbar, 1.25 = stark */
}


/* ==========================================================================
   EFFEKT 2: ICON-SPIN (ein Icon, dreht sich und waechst beim Hover)
   --------------------------------------------------------------------------
   Aufbau in Divi:
  - CSS-Klasse "tcb-icon-spin" entweder am Blurb-Modul selbst
     (dann muss man ueber das Blurb hovern)
     ODER an der ganzen Spalte
     (dann reagiert auch der Leerraum drumherum auf Hover).

   Funktioniert sowohl fuer Divis eingebaute Icon-Schrift (.et-pb-icon)
   als auch fuer hochgeladene Bilder oder SVGs (img).
   ========================================================================== */

/* Sanfter Uebergang fuer die Drehung und Skalierung */
.tcb-icon-spin .et_pb_main_blurb_image .et-pb-icon,
.tcb-icon-spin .et_pb_main_blurb_image img {
  transition: transform 0.5s ease;
}

/* Beim Hover: volle Drehung + Vergroesserung */
.tcb-icon-spin:hover .et_pb_main_blurb_image .et-pb-icon,
.tcb-icon-spin:hover .et_pb_main_blurb_image img {
  transform: rotate(-10deg) scale(1.5);
  /* Stellschrauben:
     rotate(5deg)   -> sehr subtil
     rotate(10deg)  -> klar wahrnehmbar (aktuell)
     rotate(20deg)  -> deutlich
     rotate(-10deg) -> Drehung nach links
     scale(1.05)    -> ganz dezent groesser
     scale(1.1)     -> moderat groesser (aktuell)
     scale(1.2)     -> sichtbar groesser
  */
}

/* -------------------------------------------------------------------------
   TCB-Polaroid: quadratisches Bild mit klassischem Polaroid-Rahmen
   - am Bild-Modul/Container nutzen
   - wirkt unabhängig vom Hover-Glow
*/
.tcb-polaroid {
  display: inline-block;
  width: 100%;
  max-width: 360px;
  background: #fff;
  padding: 6% 6% 20%;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
  box-sizing: border-box;
  overflow: hidden;
}

.tcb-polaroid .et_pb_image_wrap,
.tcb-polaroid .et_pb_main_blurb_image {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.tcb-polaroid img,
.tcb-polaroid .et_pb_image_wrap img,
.tcb-polaroid .et_pb_main_blurb_image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ein-Klassen-Komposition: tcb-icon-spin (Alias)
   - nur eine Klasse im Modul eintragen
   - betrifft nur das Icon-Spin-Verhalten (Glow sollte auf die Column)
   - funktioniert wenn Divi nur ein CSS-Klassenfeld zulässt */
.tcb-icon-spin {
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
  will-change: transform, box-shadow, filter;
}
.tcb-icon-spin .et_pb_main_blurb_image .et-pb-icon,
.tcb-icon-spin .et_pb_main_blurb_image img {
  transition: transform 0.5s ease;
}

.tcb-icon-spin:hover .et_pb_main_blurb_image .et-pb-icon,
.tcb-icon-spin:hover .et_pb_main_blurb_image img {
  transform: rotate(-10deg) scale(1.5);
}

/* -------------------------------------------------------------------------
   Layout: Gleich hohe Columns (für Blurbs in einer Row)
   - Füge die Klasse `tcb-equalize-row` auf die Row/Section, die die Columns
     enthält (z.B. per Row > Attributes > CSS Class).
   - Die Regeln sorgen dafür, dass jede Column sowie deren Module die gleiche
     Höhe bekommen, sodass Glow/Box-Shadow konsistent wirkt.
*/
.tcb-equalize-row {
  display: flex;
  align-items: stretch;
}
.tcb-equalize-row .et_pb_column {
  display: flex;
  flex-direction: column;
}
.tcb-equalize-row .et_pb_column .et_pb_module {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* -------------------------------------------------------------------------
   Border Glow: wende den Glow an jedem Element an, das die Klasse trägt.
   Die Klasse kann jetzt auch auf Row/Module/Column gesetzt werden.
*/
.tcb-border-glow {
  transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease;
  will-change: transform, box-shadow, filter;
}
.tcb-border-glow:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 12px rgba(255,255,255,0.26),
    0 0 28px rgba(255,255,255,0.16),
    0 20px 45px rgba(0,0,0,0.18);
  filter: brightness(1.06);
}

/* -------------------------------------------------------------------------
   Background-Image Hover Zoom
   - Setze die Klasse `tcb-bg-hover-scale` auf die Column mit dem Background-Image.
   - Der Hintergrund wird beim Hover leicht auf 110% vergrößert.
*/
.tcb-bg-hover-scale {
  position: relative;
  overflow: hidden;
}
.tcb-bg-hover-scale::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  background-repeat: inherit;
  background-attachment: inherit;
  background-color: transparent;
  transition: transform 0.45s ease;
  transform: scale(1);
  z-index: 0;
}
.tcb-bg-hover-scale:hover::before {
  transform: scale(1.05);
}
.tcb-bg-hover-scale > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   OPTIONAL: FEDERNDER EFFEKT FUER ICON-SPIN
   --------------------------------------------------------------------------
   Falls die Drehung am Ende leicht "ueberschiessen" und zurueckwippen soll,
   ersetze den transition-Block oben durch diesen hier:

   .tcb-icon-spin .et_pb_main_blurb_image .et-pb-icon,
   .tcb-icon-spin .et_pb_main_blurb_image img {
     transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
   ========================================================================== */


/* ==========================================================================
   EFFEKT 3: LOGO-SPIN (universell fuer jedes Bild, z. B. Logo)
   --------------------------------------------------------------------------
   Aufbau in Divi:
   - CSS-Klasse "logo-spin" am Bild-Modul vergeben (oder am Eltern-Container,
     wenn die Hover-Flaeche groesser sein soll).

   Funktioniert fuer:
   - Divi Bild-Module (img innerhalb .et_pb_image)
   - Logos im Header / Code-Modul (jedes img-Element)
   - Beliebige andere Bilder, denen man die Klasse zuweist
   ========================================================================== */

/* Sanfter Uebergang */
.logo-spin img {
  transition: transform 0.5s ease;
}

/* Beim Hover: drehen + vergroessern */
.logo-spin:hover img {
  transform: rotate(360deg) scale(1.2);
  /* Alternativen siehe Effekt 2 */
}

/* -------------------------------------------------------------------------
   Helper: runder Badge (z.B. kleines Icon / Zahl oben links)
   - Verwenden: füge `tcb-badge` dem Badge-Element innerhalb eines
     relativ positionierten Containers hinzu.
*/
.tcb-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(14, 36, 86, 0.18);
  background: #FFD700;
  color: inherit;
  z-index: 5;
}