/*
 Theme Name:   divi-aerzte-mobilfunk
 Description:  DIVI Child Theme fuer aerzte-und-mobilfunk.de
 Template:     Divi
 Version:      1.0.0
 Text Domain:  divi-aerzte-mobilfunk
*/

:root {
  --color-sand:         #FDF6EE;
  --color-sage:         #F5FAF7;
  --color-lavender:     #F4F8FD;
  --color-accent:       #2C4A3E;
  --color-accent-blue:  #2C5F8A;
  --color-text-primary: #1A1A2E;
  --color-text-muted:   #888888;
}

/* ─── Glassmorphism Block .orientierung-entry ─────────────────────── */

.orientierung-entry {
  background: rgba(253, 246, 238, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 18px;
  padding: 2rem 2.5rem;
  box-shadow:
    0 4px 28px rgba(44, 74, 62, 0.07),
    0 1px 4px  rgba(44, 74, 62, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  color: var(--color-text-primary);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.orientierung-entry:hover {
  box-shadow:
    0 8px 36px rgba(44, 74, 62, 0.11),
    0 2px 8px  rgba(44, 74, 62, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transform: translateY(-2px);
}

.orientierung-entry h2,
.orientierung-entry h3 {
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

.orientierung-entry p {
  color: var(--color-text-primary);
  line-height: 1.75;
}

.orientierung-entry a {
  color: var(--color-accent-blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(44, 95, 138, 0.3);
  transition: border-color 0.2s ease;
}

.orientierung-entry a:hover {
  border-color: var(--color-accent-blue);
}

/* ─── Logo ────────────────────────────────────────────────────────── */
#main-header .logo_container img {
  height: 70px !important;
  width: auto !important;
  padding-left: 20px !important;
}

/* ─── Themenfelder: Rahmen-Fix ────────────────────────────────────── */
.hp-tile {
  border: none !important;
  box-shadow: 0 2px 12px rgba(44,74,62,0.08) !important;
}

/* ─── Hero Leitsatz ──────────────────────────────────────────────── */
.hp-hero__leitsatz {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.75);
  margin: 0 0 1rem;
}

/* ─── Zielgruppen-Karten ─────────────────────────────────────────── */
.hp-card__img {
  object-position: center top !important;
}
.hp-card__body {
  padding-top: 1.2rem !important;
}
.hp-card__title {
  font-size: 1.2rem !important;
}

/* ─── Wissensbaum-Sektion ────────────────────────────────────────── */
.hp-wissensbaum {
  min-height: 600px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10rem 2rem !important;
}
.hp-wissensbaum__content h2 {
  font-size: 2.5rem !important;
  margin-bottom: 1.5rem !important;
}
.hp-wissensbaum__sub {
  margin-bottom: 3rem !important;
}
/* ─── Divi Footer Override ───────────────────────────────────────── */
#main-footer {
  background: #1A1A2E !important;
  padding: 3rem 0 1rem 0 !important;
}
#footer-widgets {
  display: none !important;
}
#footer-bottom {
  background: #1A1A2E !important;
  color: rgba(255,255,255,0.6) !important;
  text-align: center !important;
  padding: 1rem !important;
  font-size: 0.85rem !important;
}

/* ─── Custom Footer #aerzte-footer ──────────────────────────────── */
#aerzte-footer {
  background: #1A1A2E;
  color: rgba(255,255,255,0.75);
  padding: 4rem 2rem 2rem;
  font-size: 0.92rem;
  line-height: 1.75;
}
#aerzte-footer .af-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
#aerzte-footer .af-site-name {
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin: 0 0 0.75rem;
}
#aerzte-footer .af-tagline {
  color: rgba(255,255,255,0.6);
  font-size: 0.88rem;
  margin: 0;
  line-height: 1.7;
}
#aerzte-footer h4 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.4);
  margin: 0 0 1rem;
}
#aerzte-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#aerzte-footer ul li { margin-bottom: 0.55rem; }
#aerzte-footer ul li a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.2s ease;
}
#aerzte-footer ul li a:hover { color: #ffffff; }
#aerzte-footer .af-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 0 0;
  text-align: center;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.4);
}
@media (max-width: 768px) {
  #aerzte-footer .af-inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* ─── K1: Divi Footer-Elemente komplett ausblenden ───────────────── */
#footer-bottom,
.footer-widget,
#footer-widgets,
p.footer-license {
  display: none !important;
}

/* ─── K2: Custom Footer Groesse ──────────────────────────────────── */
#aerzte-footer {
  padding: 4rem 2rem 2rem 2rem !important;
}
#aerzte-footer h4 {
  font-size: 1rem !important;
}
#aerzte-footer ul li a {
  font-size: 0.9rem !important;
}
#aerzte-footer .af-inner {
  gap: 2rem !important;
}

/* ─── K1: Glassmorphism Zielgruppen-Karten ───────────────────────── */
.hp-card,
.et_pb_column .et_pb_blurb,
.wo-einsteigen .et_pb_blurb_container {
  background: rgba(253,246,238,0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(44,74,62,0.12),
              inset 0 1px 0 rgba(255,255,255,0.8) !important;
  transition: transform 0.3s ease,
              box-shadow 0.3s ease !important;
}
.hp-card:hover,
.et_pb_blurb:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 48px rgba(44,74,62,0.18),
              inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

/* ─── K2: Glassmorphism Themenfelder-Kacheln ─────────────────────── */
.et_pb_blurb {
  background: rgba(245,250,247,0.8) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  border-radius: 14px !important;
  padding: 1.5rem !important;
  box-shadow: 0 4px 16px rgba(44,74,62,0.08) !important;
  transition: transform 0.3s ease,
              box-shadow 0.3s ease !important;
}
.et_pb_blurb:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 32px rgba(44,74,62,0.15) !important;
}

/* ─── K3: Zitat-Zone Text links ──────────────────────────────────── */
.hp-zitat-section,
.et_pb_section.zitat-section {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-left: 8% !important;
  text-align: left !important;
}
.hp-zitat-section blockquote,
.hp-zitat-section .et_pb_text {
  max-width: 55% !important;
  text-align: left !important;
  padding-right: 3rem !important;
}

/* ─── K4: Dreidimensionalitaet — Sektionen + Buttons ────────────── */
.et_pb_section {
  transition: all 0.3s ease !important;
}
.et_pb_button {
  box-shadow: 0 4px 15px rgba(44,74,62,0.25) !important;
  transition: transform 0.2s ease,
              box-shadow 0.2s ease !important;
}
.et_pb_button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(44,74,62,0.35) !important;
}

/* ════════════════════════════════════════════════════════════════
   ZONE 4 — WISSENSTAFELN: 8-Panel Wissensbaum (Stand 2026-05)
   ════════════════════════════════════════════════════════════════ */

/* Section: Padding reduzieren (überschreibt alten !important) */
.hp-wissensbaum {
  padding: 4rem 2rem 5rem !important;
}

/* Stage — Positioning-Kontext für absolute Tafeln */
.wb-stage {
  position: relative;
  width: 100%;
  height: 520px;
}

/* Grundform jeder Tafel */
.wb-box {
  width: 160px;
  min-height: 160px;
  padding: 14px 16px;
  background: rgba(253,246,238,0.52);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.42);
  box-shadow: 0 6px 24px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.55);
  transition: transform 0.30s ease, box-shadow 0.30s ease, background 0.30s ease;
  position: absolute;
}

/* Türchen-Hover */
.wb-box:hover {
  background: rgba(253,246,238,0.82);
  box-shadow: 0 18px 48px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.75);
  transform: translateY(-10px) scale(1.04) rotate(0deg) !important;
}

/* 3-Raum Akzentstreifen */
.wb-box--r1 { border-left: 3px solid #A07840; }
.wb-box--r2 { border-left: 3px solid #647928; }
.wb-box--r3 { border-left: 3px solid #2C5F8A; }

.wb-box--r1:hover { box-shadow: 0 18px 48px rgba(160,120,64,0.22), inset 0 1px 0 rgba(255,255,255,0.75); }
.wb-box--r2:hover { box-shadow: 0 18px 48px rgba(100,121,40,0.22), inset 0 1px 0 rgba(255,255,255,0.75); }
.wb-box--r3:hover { box-shadow: 0 18px 48px rgba(44,95,138,0.22), inset 0 1px 0 rgba(255,255,255,0.75); }

/* Icon-Kreise */
.wb-box__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1;
}
.wb-box--r1 .wb-box__icon { background: rgba(160,120,64,0.15); }
.wb-box--r2 .wb-box__icon { background: rgba(100,121,40,0.15); }
.wb-box--r3 .wb-box__icon { background: rgba(44,95,138,0.15); }

/* Typografie */
.wb-box__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1A1A2E;
  margin: 0 0 6px;
  line-height: 1.3;
  text-transform: uppercase;
}
.wb-box__links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wb-box__links li {
  font-size: 10px;
  font-weight: 500;
  color: #2C4A3E;
  padding: 2px 0;
  transition: transform 0.2s ease;
}
.wb-box__links a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.wb-box__links a:hover { color: #2C5F8A; }

/* Subtopics schieben sich beim Hover vor */
.wb-box:hover .wb-box__links li:nth-child(1) { transform: translateX(3px); transition-delay: 0.05s; }
.wb-box:hover .wb-box__links li:nth-child(2) { transform: translateX(3px); transition-delay: 0.10s; }
.wb-box:hover .wb-box__links li:nth-child(3) { transform: translateX(3px); transition-delay: 0.15s; }

/* Zentrum-Box — Forschung & Studienlage */
.wb-box--center {
  background: rgba(44,74,62,0.85);
  width: 175px;
  border: 1px solid rgba(255,255,255,0.20);
  border-left: 3px solid rgba(255,255,255,0.40);
}
.wb-box--center .wb-box__icon { background: rgba(255,255,255,0.15); }
.wb-box--center .wb-box__title,
.wb-box--center .wb-box__links li,
.wb-box--center .wb-box__links a { color: #fff !important; }
.wb-box--center .wb-box__links a:hover { color: rgba(255,255,255,0.72) !important; }
.wb-box--center:hover {
  background: rgba(44,74,62,0.96);
  transform: translateY(-10px) scale(1.05) !important;
  box-shadow: 0 20px 52px rgba(44,74,62,0.40), inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

/* CTA in Zentrum-Box */
.wb-cta {
  display: inline-block;
  margin-top: 8px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.50);
  border-radius: 20px;
  padding: 3px 10px;
  text-decoration: none;
  transition: background 0.2s;
}
.wb-box--center:hover .wb-cta { background: rgba(255,255,255,0.15); }

/* Organische Rotationen — Tafel 1–7, Tafel 8 (Zentrum) ohne */
.wb-stage > .wb-box:nth-child(1) { transform: rotate(-1.8deg); }
.wb-stage > .wb-box:nth-child(2) { transform: rotate(1.4deg); }
.wb-stage > .wb-box:nth-child(3) { transform: rotate(-1.2deg); }
.wb-stage > .wb-box:nth-child(4) { transform: rotate(0.8deg); }
.wb-stage > .wb-box:nth-child(5) { transform: rotate(-0.6deg); }
.wb-stage > .wb-box:nth-child(6) { transform: rotate(1.6deg); }
.wb-stage > .wb-box:nth-child(7) { transform: rotate(-1.0deg); }

/* Zentrierung der 8. Tafel via Wrapper */
.wb-center-wrap {
  position: absolute;
}

/* Mobile: absolute → 2-spaltig */
@media (max-width: 900px) {
  .wb-stage {
    position: static;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
  }
  .wb-stage > .wb-box,
  .wb-stage .wb-center-wrap {
    position: static !important;
    transform: none !important;
  }
  .wb-stage > .wb-box:nth-child(n) { transform: none; }
  .wb-box,
  .wb-box--center { width: auto !important; }
  .wb-center-wrap { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .wb-stage { grid-template-columns: 1fr; }
}

/* ── WISSENSTAFELN: Position Fix — !important gegen Divi ── */
.wb-stage {
  position: relative !important;
  width: 100% !important;
  height: 620px !important;
  max-width: 960px !important;
  overflow: visible !important;
}
.wb-box {
  position: absolute !important;
  width: 160px !important;
  min-height: 160px !important;
  padding: 14px 16px !important;
  background: rgba(253,246,238,0.58) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.42) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.55) !important;
}
.wb-box--center {
  position: absolute !important;
  width: 175px !important;
}
.wb-center-wrap {
  position: absolute !important;
}
/* Mobile: Absolutpositionierung aufheben */
@media (max-width: 900px) {
  .wb-stage {
    position: static !important;
    height: auto !important;
    max-width: 100% !important;
  }
  .wb-box,
  .wb-box--center {
    position: static !important;
    width: auto !important;
    transform: none !important;
  }
  .wb-center-wrap {
    position: static !important;
    transform: none !important;
    grid-column: 1 / -1;
  }
}