/*
Theme Name: Divi Child entwicklungssinn
Description: Child-Theme fuer entwicklungssinn.de (netz-gaenger)
Author: netz-gaenger
Template: Divi
Version: 3.1.0
*/

/* =====================================================================
   entwicklungssinn.de — Design-System
   Werte = Messwerte aus dem Screendesign, siehe outputs/design-system.json.

   WICHTIG (Divi 5.9.0, Fallstrick 11 im Stack-Playbook):
   Programmatisch gesetzte CSS-Klassen an Modulen erscheinen NICHT im
   Frontend. Deshalb wird hier nur gestylt, was ohne Modulklasse auskommt:
     - globale Regeln auf Divi-eigene Klassen (.et_pb_button, .et_pb_row)
     - Klassen, die IM MODULINHALT stehen (.eyebrow, .hl-*, .lead, .dl)
   Alles andere laeuft ueber Divi-Modul-Optionen:
     Sektionsfarbe, Padding, Bildrahmen (Border), Kartenflaeche
     (Hintergrundbild es-karte-papier.png, Groesse "stretch"),
     randabfallende Bilder (negative Margins).
   ===================================================================== */

@font-face{font-family:"Prater Sans";
  src:url("assets/prater-sans.woff2") format("woff2"),
      url("assets/prater-sans.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap}

:root{
  /* Marke (rein) */
  --korall:#e1967d; --petrol:#5f9196; --gold:#b48c5f;
  --gruen:#87af8c;  --blau:#7daabe;   --violett:#9b91be;
  /* Papier-Varianten (Marke x0,76) — Headlines, Buttons, Labels */
  --korall-p:#ab725f; --petrol-p:#486e72; --gold-p:#886a48;
  --gruen-p:#668568;  --blau-p:#5f8190;   --violett-p:#766e90;
  /* Basis + Flaechen */
  --text:#000; --weiss:#fff;
  --pap-hell:#e8e7e2; --pap-neutral:#d8d7d1; --pap-petrol:#c8cecc;
  --pap-kraft:#d1c7b8; --pap-korall:#dacabd; --pap-violett:#c8c5cb;
  --pap-gruen:#c9cfc3; --pap-karte:#ded6cb;
  --content:1180px; --rahmen:7px;
  /* tatsaechliche Zeilenbreite; auch Basis fuer randabfallende Bilder */
  --rowbreite:min(90vw, 1180px);
}

html{overflow-x:hidden}
body{background:var(--pap-hell);color:var(--text);
  font-family:"Gothic A1",system-ui,sans-serif;font-size:16px;line-height:22px}

/* ---------- Papiertextur ----------
   Die vom Kunden gelieferte Graupappe (inputs/bilder/hintergrund.jpg), auf
   eine nahtlose Kachel gespiegelt und auf den Mittelwert der hellsten
   Design-Flaeche normiert (231,4 / 230,5 / 225,5).

   Sie wird per background-blend-mode MULTIPLIZIERT — die Sektionsfarbe ist
   deshalb ein TINT, nicht die Endfarbe:  Papier x Tint = Design-Farbe.
   Dasselbe gilt fuer Buttons, damit die Textur auch dort durchscheint.

   Nicht als Overlay ueber den Inhalt legen (mix-blend-mode) — das legt einen
   Schleier ueber Fotos und Text. Genau das war der Fehler in Version 1.4.
*/
body .et_pb_section{
  background-image:url("assets/papier.jpg");
  background-size:960px auto;
  background-repeat:repeat;
  background-blend-mode:multiply}

/* ---------- Typografie ---------- */
body h1,body h2,body h3,body h4{
  font-family:"Prater Sans","Gothic A1",sans-serif;font-weight:400;
  color:var(--text);padding-bottom:0}
body h1,body h2{font-size:50px;line-height:52px}
body h3{font-size:33px;line-height:36px}
/* !important noetig — Divis dynamisches CSS steht nach dem Child-Stylesheet
   und setzt sonst wieder 16px/22px durch. */
body p,body li{font-size:18px!important;line-height:26px!important;color:var(--text)}
body .eyebrow,body .eyebrow p{font-size:16px!important;line-height:22px!important}
body p:last-child{padding-bottom:0}

/* Klassen, die IM Modulinhalt stehen — die funktionieren */
.eyebrow{font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  font-size:16px;line-height:22px;margin:0}
body .et_pb_menu .et-menu li a{font-size:17px!important;font-weight:600!important}
.lead{max-width:560px}
.hl-korall{color:var(--korall-p)}  .hl-petrol{color:var(--petrol-p)}
.hl-gold{color:var(--gold-p)}      .hl-gruen{color:var(--gruen-p)}
.hl-blau{color:var(--blau-p)}      .hl-violett{color:var(--violett-p)}

/* Definitionsliste (Factsheet / Angebotspakete) */
.dl{display:grid;grid-template-columns:max-content 1fr;gap:0 20px;margin:0}
.dl dt,.dl dd{padding:10px 0;border-top:1px solid rgba(255,255,255,.75);margin:0}
.dl dt{font-weight:700}
.dl > dt:first-child,.dl > dt:first-child + dd{border-top:0}
.dl dt:nth-of-type(6n+1){color:var(--petrol-p)}  .dl dt:nth-of-type(6n+2){color:var(--korall-p)}
.dl dt:nth-of-type(6n+3){color:var(--violett-p)} .dl dt:nth-of-type(6n+4){color:var(--gruen-p)}
.dl dt:nth-of-type(6n+5){color:var(--blau-p)}    .dl dt:nth-of-type(6n+6){color:var(--gold-p)}

/* ---------- Breite ----------
   Divis eigene .et_pb_row-Regel (width:80%) gewinnt sonst gegen diese hier —
   gemessen 2026-09-02: Contentbreite lag bei 1440px Viewport real bei 1152px
   statt 1180px. Deshalb !important. */
body .et_pb_row{width:var(--rowbreite)!important;max-width:var(--rowbreite)!important}

/* ---------- Buttons: globale Form, Farbe kommt aus den Modul-Optionen ---------- */
body .et_pb_button{
  /* Textur scheint durch den Button — Farbe ist ein kompensierter Tint */
  background-image:url("assets/papier.jpg")!important;
  background-size:960px auto!important;
  background-blend-mode:multiply;
  /* Korrekturvorlage: Text und Pfeil nicht weiss, sondern in Papierfarbe —
     im Design ist die Schrift aus der Farbflaeche ausgespart, darunter liegt
     das helle Papier. Schrift 15% groesser als zuvor (16 -> 18px). */
  color:var(--pap-hell)!important;
  font-family:"Gothic A1",system-ui,sans-serif!important;
  font-weight:600!important;font-size:18px!important;line-height:24px!important;
  border-radius:0!important;border:0!important;
  /* Padding kommt aus den Modul-Optionen. Die Neigung MUSS hier stehen:
     Divi 5.9.0 speichert decoration.transform zwar und der Validator meldet
     nichts, schreibt aber kein rotateZ ins Frontend-CSS (getestet unter
     module.decoration und unter button.decoration). Im Design sind es
     2,5 Grad in wechselnder Richtung. */
  transform:rotate(-2.5deg);
  transition:transform .18s ease,filter .18s ease}
body .et_pb_button:after,body .et_pb_button:before{display:none!important}
body .et_pb_column:nth-child(even) .et_pb_button{transform:rotate(2.5deg)}
body .et_pb_button:hover{filter:brightness(1.12)}

/* ---------- Bilder ----------
   7px weisser Rahmen auf ALLEN Inhaltsbildern — auch auf denen in den
   Papierkarten (Korrekturvorlage 17:00 Uhr: "Auch 7px weissen Rahmen").
   Header/Footer (_tb_) bleiben aussen vor — dort steht das Logo. */
body .et_pb_image img{width:100%;height:auto}
body .et_pb_image:not([class*="_tb_"]) img{border:7px solid var(--weiss);border-radius:0}
body .et_pb_slider{border:7px solid var(--weiss)}

/* ---------- Links ----------
   Divis Standard-Linkfarbe ist Blau (#2ea3f2) und schlug in Topbar und Footer
   durch — im Screendesign sind diese Links schwarz. Die Icons erben ueber
   currentColor mit. */
body .et-l--header a,body .et-l--footer a{color:var(--text)!important;text-decoration:none}
/* Die Topbar-Icons sind Bilder, kein Rahmen wie bei Inhaltsbildern.
   KEIN width hier setzen — `width:auto` hat die width/height-Attribute im
   Markup ausgehebelt, die Icons rendern dann in ihrer Dateigroesse (80px). */
body .et-l--header .et_pb_text img{border:0!important;display:inline-block}
/* Topbar: 16px wie im Screendesign, nicht 18px wie der Fliesstext. */
body .et-l--header .et_pb_section:first-child p,
body .et-l--header .et_pb_section:first-child a{font-size:16px!important;line-height:22px!important}
body .et-l--header a:hover,body .et-l--footer a:hover{color:var(--korall-p)!important}
body .et-l--post .et_pb_text a{color:var(--korall-p)}

/* ---------- Papierkarten ----------
   Vorgabe von Rene (2026-09-02) woertlich uebernommen, aber auf ALLE
   Kartengruppen angewandt statt nur auf .et_pb_group_0..2 — die nummerierten
   Klassen gelten je Seite, die Karten gibt es aber auch auf den Unterseiten.
   Die Modul-Optionen in divi_blocks.gruppe() fuehren dieselben Werte, damit
   Builder und Frontend uebereinstimmen. */
body .et_pb_group{
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
  background-image:url('https://www.entwicklungssinn.de/wp-content/uploads/2026/09/es-karte-papier.png');
  padding-top:32px!important;
  padding-right:34px!important;
  padding-bottom:15px!important;
  padding-left:40px!important}

/* ---------- Menue im Theme-Builder-Header ----------
   Fallstrick 14: sonst erbt das Menue list-style: disc.
   Divi setzt dem Menue-Modul ausserdem einen weissen Hintergrund und
   ignoriert dort sowohl decoration.background als auch activeLinkColor
   (gemessen 2026-09-02) — beides deshalb hier zentral. */
body .et_pb_menu .et-menu,body .et_pb_menu .et-menu li{list-style:none}
body .et_pb_menu,body .et_pb_menu .et_pb_menu__wrap{background-color:transparent!important}
body .et_pb_menu .et-menu li.current-menu-item > a,
body .et_pb_menu .et-menu li.current-menu-ancestor > a{
  color:var(--korall-p)!important;text-decoration:underline;text-underline-offset:5px}
body .et_pb_menu .et-menu > li > a{padding-bottom:0}
/* Divi setzt dem Menue-Modul text-align:start und richtet trotz
   style="right_aligned" linksbuendig aus — deshalb hier erzwungen. */
/* !important noetig: Divis dynamisches CSS steht NACH dem Child-Stylesheet
   und setzt .et_pb_menu__wrap auf flex:0 1 auto (gemessen 2026-09-02:
   Menue endete bei 1074 statt an der Contentkante 1310). */
body .et-l--header .et_pb_menu__wrap,
body .et-l--header .et_pb_menu__menu,
body .et-l--header .et_pb_menu__menu > nav,
body .et-l--header .et_pb_menu__menu > nav > ul{flex-grow:1!important}
body .et-l--header .et_pb_menu__wrap,
body .et-l--header .et_pb_menu__menu,
body .et-l--header .et_pb_menu__menu > nav > ul{justify-content:flex-end!important}
body .et-l--footer .et_pb_menu__wrap{justify-content:flex-start!important}
/* Menue vertikal auf das Logo ausmitteln (Korrekturvorlage 16:49 Uhr) */
body .et-l--header .et_pb_row{align-items:center!important}
body .et-l--header .et_pb_column{display:flex!important;flex-direction:column;
  justify-content:center}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  body h1,body h2{font-size:40px;line-height:44px}
  body h3{font-size:28px;line-height:32px}
}
@media (max-width:767px){
  body h1,body h2{font-size:34px;line-height:38px}
}
@media (prefers-reduced-motion:reduce){body *{transition:none!important}}