/* ============================================================
   Privates Institut für Empathie — Design Tokens
   Richtung A (Editorial / asymmetrisch)
   ------------------------------------------------------------
   Einsatz in Divi 5:
   1. Diese Datei ins Child-Theme laden ODER den Inhalt in
      Divi → Theme-Optionen → "Eigenes CSS" einfügen.
   2. Die Farben zusätzlich als GLOBAL COLORS in Divi anlegen
      (Werte unten), damit sie im Builder auswählbar sind.
   3. Schriften Spectral + Mulish global setzen (siehe README).
   ============================================================ */


:root {
  /* ---- Farben (auch als Divi Global Colors anlegen) ---- */
  --ife-ivory:        #F4EEE4; /* Grundfläche / heller Text auf dunkel */
  --ife-panel:        #efefef; /* Karten / leicht abgesetzte Flächen   */
  --ife-ink:          #221F1A; /* Haupttext, Headlines auf hell        */
  --ife-ink-soft:     #5A544B; /* Fließtext sekundär                   */
  --ife-petrol:       #13494F; /* Akzent, Ansatz-Titel, Button         */
  --ife-petrol-deep:  #0F3A3F; /* dunkle Vollflächen, Button-Hover     */
  --ife-sand:         #A98C5F; /* Eyebrows, feine Akzente (Wärme)      */
  --ife-hairline:     rgba(34,31,26,0.14); /* Trennlinien              */
  --ife-on-dark:      rgba(244,238,228,0.78); /* Fließtext auf Petrol  */

  /* ---- Schrift ---- */
  --ife-serif: 'Spectral', Georgia, 'Times New Roman', serif; /* Headlines, Leads, Zitate */
  --ife-sans:  'Mulish', system-ui, -apple-system, sans-serif; /* Labels, Fließtext        */

  /* ---- Rhythmus / Maße ---- */
  --ife-maxw:        1400px;          /* Inhaltsbreite                  */
  --ife-gutter:      7vw;             /* seitlicher Rand                */
  --ife-section-y:   clamp(110px, 16vh, 200px); /* Sektions-Abstand     */
  --ife-grid-gap:    40px;            /* Spaltenabstand 12er-Raster     */
}

/* ---- Eyebrow / Label ---- */
.ife-eyebrow {
  font-family: var(--ife-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ife-sand);
}

/* ---- Button ---- */
.ife-btn {
  display: inline-block;
  background: var(--ife-petrol);
  color: var(--ife-ivory);
  font-family: var(--ife-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 22px 48px;
  white-space: nowrap;
  transition: background .25s ease;
}
.ife-btn:hover { background: var(--ife-petrol-deep); }

::selection { background: var(--ife-petrol); color: var(--ife-ivory); }


/* ---- Listen (Ansätze): Hairline-Zeilen, keine Bullets ---- */
.ife-list { list-style:none; margin:0; padding:0; }
.ife-list li { padding:17px 0; border-top:1px solid var(--ife-hairline);
  font-family:var(--ife-sans); font-size:17px; color:var(--ife-ink); }
.ife-list li:last-child { border-bottom:1px solid var(--ife-hairline); }

/* ---- Inline-Link (Anfrage / Gespräch) ---- */
.ife-link { display:inline-block; font-family:var(--ife-sans); font-size:12px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ife-petrol);
  text-decoration:none; border-bottom:1px solid var(--ife-petrol); padding-bottom:3px;
  transition:opacity .25s ease; }
.ife-link:hover { opacity:.6; }

/* ---- Zitat-Trenner ---- */
.ife-quote { text-align:center; }
.ife-quote .q { font-family:var(--ife-serif); font-style:italic; font-weight:300;
  font-size:clamp(26px,3.6vw,48px); line-height:1.28; color:var(--ife-ink); margin:0; }
.ife-quote .src { font-family:var(--ife-sans); font-size:12px; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--ife-sand); margin-top:18px; display:block; }

/* ---- Ansatz-Nummer (groß, entsättigtes Petrol) ---- */
.ife-num { font-family:var(--ife-serif); font-weight:300; font-size:88px; line-height:1;
  color:rgba(19,73,79,.32); }

/* ---- Spuren-Kacheln (komplett aus dem Code-Modul hierher gezogen — Code-Box = nur HTML) ---- */
/* Layout: zeilenweises Flex-Grid, 3 -> 2 -> 1 Spalte, letzte Reihe zentriert */
.ife-spuren { display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
.ife-tile { position:relative; height:300px; flex:0 0 calc((100% - 48px)/3); overflow:hidden;
  cursor:pointer; background:var(--ife-panel); border:1px solid var(--ife-hairline); }

/* Textebene (Vorderseite) */
.ife-tile-text { position:absolute; inset:0; padding:34px; display:flex; flex-direction:column;
  justify-content:space-between; transition:opacity 1.1s ease, transform 1.3s ease;
  opacity:1; transform:scale(1); }
.ife-kicker { font-family:var(--ife-sans); font-size:11px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ife-sand); }
.ife-tile-title { font-family:var(--ife-serif); font-weight:400; font-size:25px; line-height:1.15;
  color:var(--ife-ink); margin:0 0 12px; }
.ife-tile-sub { font-family:var(--ife-sans); font-size:14px; line-height:1.6;
  color:var(--ife-ink-soft); margin:0; }

/* Bildebene (S/W-Platzhalter; echtes Foto kommt als <img> hinein) */
.ife-tile-img { position:absolute; inset:0; padding:28px; display:flex; flex-direction:column;
  justify-content:flex-end; background-color:var(--ife-petrol-deep);
  background-image:repeating-linear-gradient(135deg, rgba(244,238,228,.055) 0 2px, transparent 2px 13px);
  background-size:cover; background-position:center;
  transition:opacity 1.1s ease, transform 1.4s ease; opacity:0; transform:scale(1.05); }
.ife-tile-img img { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:grayscale(1) contrast(1.02); }
.ife-tile-cap { position:relative; font-family:ui-monospace,monospace; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(244,238,228,.55); }
.ife-tile-imgtitle { position:relative; font-family:var(--ife-serif); font-style:italic; font-weight:300;
  font-size:21px; line-height:1.2; color:var(--ife-ivory); margin-top:8px; }

/* Aktiv (Timer) ODER Hover -> Bildebene zeigen, Text ausblenden */
.ife-tile.is-active .ife-tile-img, .ife-tile:hover .ife-tile-img { opacity:1; transform:scale(1); }
.ife-tile.is-active .ife-tile-text, .ife-tile:hover .ife-tile-text { opacity:0; transform:scale(.99); }

/* Responsiv: 3 -> 2 -> 1 Spalte */
@media (max-width:900px){ .ife-tile { flex:0 0 calc((100% - 24px)/2); } }
@media (max-width:560px){ .ife-tile { flex:0 0 100%; } }

/* ---- Hero (erste Sektion .et_pb_section_0): Mobile-Hoehe <=480px ---- */
@media (max-width: 480px) {
  body.page-id-2 .et_pb_section_0 {
    min-height: 95vh;
    height: 95vh;
    height: 95dvh; /* echte Viewporthoehe ohne Adressleisten-Sprung */
    overflow: hidden;
  }
}

/* ---- Kachel-Hover-Zusatztext (Kompetenz/Proof) — explizit NICHT kursiv (Annes Wunsch) ---- */
.ife-tile-note { position:relative; font-family:var(--ife-sans); font-style:normal; font-weight:400;
  font-size:14px; line-height:1.5; color:var(--ife-ivory); margin:0 0 14px; }