/*
Theme Name: Enfold Child
Description: Child Theme für den Verein Leberkrankes Kind e.V.
Version: 1.0
Author: PoLi Marketing GmbH
Author URI: https://polimehr.de
Template: enfold
Text Domain:  leb-child
*/

/* =========================================================
   0. Farben & Maße  (nur hier ändern)
   Kontraste: Tinte auf Weiß 16,8:1 · Tinte auf Gelb 13,9:1
   Gelb auf Tinte 13,9:1 · Gelb NIE als Schrift auf Weiß (1,2:1)
   ========================================================= */
:root{
  --leb-gelb:#fed100;
  --leb-tinte:#1e1e1c;
  --leb-text2:#3d3b37;     /* Sekundärtext, 10,9:1 auf Weiß */
  --leb-sand:#f7f5ef;      /* Alternate-Hintergrund */
  --leb-linie:#e4e1d8;
  --leb-radius:24px;
  --leb-font-head:'Roboto Slab',Georgia,serif;
  --leb-font-body:'Atkinson Hyperlegible',Arial,sans-serif;
}

/* =========================================================
   1. Schriften (lokal, DSGVO) – Dateien in /fonts ablegen
   ========================================================= */
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/atkinson-hyperlegible-regular.woff2') format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/atkinson-hyperlegible-italic.woff2') format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/atkinson-hyperlegible-700.woff2') format('woff2')}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/roboto-slab-variable.woff2') format('woff2')}

/* =========================================================
   2. Grundtypografie
   ========================================================= */
body, body .main_color, body input, body textarea, body select, body button{
  font-family:var(--leb-font-body);
}
#top body, #top .main_color, #top p, #top li{font-size:19px;line-height:1.6;color:var(--leb-tinte)}
#top h1,#top h2,#top h3,#top h4,#top h5,#top h6,
#top .av-special-heading-tag{
  font-family:var(--leb-font-head);font-weight:700;color:var(--leb-tinte);
  letter-spacing:0;text-transform:none;text-wrap:balance;
}
#top h1{font-size:clamp(40px,5vw,64px);line-height:1.06}
#top h2{font-size:clamp(30px,3.2vw,40px);line-height:1.15}
#top h3{font-size:clamp(22px,2vw,28px);line-height:1.25}
#top p{text-wrap:pretty}
.leb-lead p, p.leb-lead{font-size:clamp(19px,1.8vw,22px)!important;line-height:1.5;color:var(--leb-text2)!important;max-width:34em}

/* Links: immer Tinte, unterstrichen (nie Gelb auf Weiß) */
#top .main_color a:not(.avia-button), #top .alternate_color a:not(.avia-button){
  color:var(--leb-tinte);text-decoration:underline;text-underline-offset:3px;
}
#top .main_color a:not(.avia-button):hover{text-decoration-thickness:2px}

/* =========================================================
   3. Barrierefreiheit
   ========================================================= */
/* Sichtbarer Fokus überall */
#top a:focus-visible, #top button:focus-visible, #top input:focus-visible,
#top select:focus-visible, #top textarea:focus-visible, #top [tabindex]:focus-visible{
  outline:3px solid var(--leb-tinte)!important;outline-offset:3px;
  box-shadow:0 0 0 6px var(--leb-gelb)!important;border-radius:4px;
}
/* Skip-Link (wird per functions.php eingefügt) */
.leb-skip{position:absolute;left:12px;top:-100px;z-index:100000;background:var(--leb-tinte);color:#fff!important;
  padding:14px 22px;border-radius:99px;font-weight:700;text-decoration:none!important}
.leb-skip:focus{top:12px}
/* Bewegung reduzieren */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* =========================================================
   4. Header & Hauptmenü
   ========================================================= */
.logo.avia-svg-logo { padding: 20px 0; }
#header_main{border-bottom:1px solid var(--leb-linie)}
#top #header .main_menu .menu > li > a{
  font-family:var(--leb-font-body);font-weight:700;font-size:18px;color:var(--leb-tinte);
}
#top #header .main_menu .menu > li.current-menu-item > a .avia-menu-text,
#top #header .main_menu .menu > li.current-menu-ancestor > a .avia-menu-text{
  box-shadow:inset 0 -4px 0 var(--leb-gelb);
}
#top #header .avia-menu-fx{display:none}
/* Menüpunkte mit CSS-Klasse leb-menu-spenden / leb-menu-mitglied */
#top #header .main_menu .menu > li.leb-menu-spenden > a,
#top #header .main_menu .menu > li.leb-menu-mitglied > a{padding:0 6px}
#top #header .main_menu .menu > li.leb-menu-spenden > a .avia-menu-text,
#top #header .main_menu .menu > li.leb-menu-mitglied > a .avia-menu-text{
  display:inline-block;padding:10px 20px;border-radius:99px;line-height:1.2;border:2px solid var(--leb-tinte);
}
#top #header .main_menu .menu > li.leb-menu-mitglied > a .avia-menu-text{background:var(--leb-tinte);color:#fff}
#top #header .main_menu .menu > li.leb-menu-spenden > a:hover .avia-menu-text{background:var(--leb-gelb)}
#top #header .main_menu .menu > li.leb-menu-mitglied > a:hover .avia-menu-text{background:#000}
/* Untermenü */
#top #header .main_menu .menu .sub-menu{border:2px solid var(--leb-tinte);border-radius:16px;overflow:hidden;box-shadow:6px 6px 0 var(--leb-gelb)}
#top #header .main_menu .menu .sub-menu a{font-size:17px;color:var(--leb-tinte)}
#top #header .main_menu .menu .sub-menu a:hover{background:var(--leb-sand)}

/* =========================================================
   5. Buttons  (Enfold „Button“-Element → CSS-Klasse)
   leb-btn-gelb · leb-btn-dunkel · leb-btn-outline
   ========================================================= */
#top .avia-button.leb-btn-gelb, #top .leb-btn-gelb .avia-button,
#top .avia-button.leb-btn-dunkel, #top .leb-btn-dunkel .avia-button,
#top .avia-button.leb-btn-outline, #top .leb-btn-outline .avia-button, #top .avia-button {
  font-family:var(--leb-font-body);font-weight:700;font-size:19px;line-height:1.2;
  padding:15px 26px;min-height:48px;border-radius:99px!important;border:2px solid var(--leb-tinte)!important;
  text-decoration:none!important;transition:background .15s,color .15s;
}
#top .avia-button.leb-btn-gelb, #top .leb-btn-gelb .avia-button, #top .avia-button.avia-color-theme-color {background:var(--leb-gelb)!important;color:var(--leb-tinte)!important;border-color:var(--leb-gelb)!important}
#top .main_color .avia-color-theme-color .avia-svg-icon svg:first-child { fill: #000; }
#top .avia-button.leb-btn-gelb:hover, #top .leb-btn-gelb .avia-button:hover, #top .avia-button.avia-color-theme-color:hover {border-color:var(--leb-tinte)!important}
#top .avia-button.leb-btn-dunkel, #top .leb-btn-dunkel .avia-button{background:var(--leb-tinte)!important;color:#fff!important}
#top .avia-button.leb-btn-dunkel:hover, #top .leb-btn-dunkel .avia-button:hover{background:#000!important}
#top .avia-button.leb-btn-outline, #top .leb-btn-outline .avia-button, #top .avia-button.avia-color-dark{background:transparent!important;color:var(--leb-tinte)!important}
#top .avia-button.leb-btn-outline:hover, #top .leb-btn-outline .avia-button:hover, #top .avia-button.avia-color-dark:hover {background:var(--leb-gelb)!important; opacity: 1; }
.avia-button .avia_button_background{display:none!important}
/* Buttons nebeneinander (Element „Buttons – Mehrfach“) */
#top .avia-buttonrow-wrap .avia-button{margin:0 12px 12px 0}

/* =========================================================
   6. Startseite
   ========================================================= */
/* 6.1 Hero – Color Section, Klasse leb-hero */
#top .leb-hero .container{padding-top:clamp(32px,5vw,72px);padding-bottom:clamp(48px,6vw,88px)}
#top .leb-hero .flex_column{display:flex;flex-direction:column;justify-content:center}

/* 6.2 Schnellzugriff – dunkle Color Section, Klasse leb-quickbar */
#top .leb-quickbar{background:var(--leb-tinte)!important;color:#fff}
#top .leb-quickbar .container{padding-top:28px;padding-bottom:28px}
#top .leb-quickbar h2, #top .leb-quickbar h3, #top .leb-quickbar .av-special-heading-tag{color:#fff!important;font-size:22px!important;margin:12px 0}
#top .leb-quickbar a{
  display:flex;justify-content:space-between;gap:12px;color:#fff!important;font-weight:700;font-size:18px;
  padding:12px 0;border-bottom:2px solid var(--leb-gelb);text-decoration:none!important;
}
#top .leb-quickbar a::after{content:"→"}
#top .leb-quickbar a:hover{color:var(--leb-gelb)!important}

/* 6.3 Kreis-Bild – Bild-Element, Klasse leb-kreis (z. B. für Icons) */
#top .leb-kreis img{border-radius:50%;background:var(--leb-gelb)}
#top .leb-kreis-klein{max-width:130px; float: none; }
#top .leb-pillar h2, #top .leb-pillar h3{font-size:28px;margin:16px 0 10px}
#top .leb-pillar p{color:var(--leb-text2)}

/* 6.4 Karten – Spalte, Klasse leb-karte (Rahmen statt Schatten) */
#top .flex_column.leb-karte{border:2px solid var(--leb-tinte);border-radius:20px;padding:24px!important}
#top .leb-karte h3{font-size:20px;margin:0 0 8px}
#top .leb-karte ul{list-style:none;margin:0;padding:0}
#top .leb-karte li{margin:0;padding:0;border-bottom:1px solid var(--leb-linie)}
#top .leb-karte li a{display:flex;justify-content:space-between;gap:8px;padding:8px 0;text-decoration:none!important;font-size:18px}
#top .leb-karte li a::after{content:"→"}
#top .leb-karte li a:hover{text-decoration:underline!important}

/* 6.5 Zitat – Spalte/Text-Block, Klasse leb-zitat */
#top .leb-zitat blockquote, #top .leb-zitat blockquote p{border:0;margin:0;padding:0;font-family:var(--leb-font-head);font-weight:500;font-size:clamp(22px,2.3vw,28px);line-height:1.4;color:var(--leb-tinte)}
#top .leb-zitat blockquote::before{
  content:"“";display:flex;align-items:flex-end;justify-content:center;width:64px;height:64px;border-radius:50%;
  background:var(--leb-gelb);font:700 56px/1 var(--leb-font-head);margin-bottom:20px;
}
#top .leb-zitat cite, #top .leb-zitat figcaption{display:block;margin-top:16px;font-style:normal;font-size:17px;color:var(--leb-text2)}

/* 6.6 News-Liste – Element „Blog-Beiträge“ (Liste), Klasse leb-newsliste */
#top .leb-newsliste .post-entry{border-bottom:1px solid var(--leb-linie);padding:18px 0;margin:0}
#top .leb-newsliste .post-title{font-family:var(--leb-font-head);font-size:21px;line-height:1.3}
#top .leb-newsliste .post-title a{text-decoration:none!important}
#top .leb-newsliste .post-meta-infos, #top .leb-newsliste .slide-meta{font-size:16px;color:var(--leb-text2)}
#top .leb-newsliste .read-more-link, #top .leb-newsliste .post_delimiter{display:none}

/* 6.7 Gelbe Box – Spalte, Klasse leb-box-gelb (Magazin, „Auf einen Blick“) */
#top .flex_column.leb-box-gelb{background:var(--leb-gelb);border-radius:var(--leb-radius);padding:32px!important}
#top .leb-box-gelb *{color:var(--leb-tinte)!important}
#top .av-subheading, #top .av-subheading p{font-size:14px!important;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:0}
#top .leb-box-gelb img{border:3px solid var(--leb-tinte);border-radius:8px;transform:rotate(-3deg)}

/* 6.8 CTA – gelbe Color Section (leb-cta) mit weißen Spalten (leb-cta-karte) */
#top .leb-cta{background:var(--leb-gelb)!important}
#top .flex_column.leb-cta-karte{background:#fff;border-radius:var(--leb-radius);padding:36px!important;position:relative;overflow:hidden;min-height:260px}
#top .leb-cta-karte p{max-width:320px}
#top .leb-cta-karte .leb-deko{position:absolute;right:0;bottom:-6px;width:130px;margin:0;pointer-events:none}

/* =========================================================
   7. Unterseiten (Erkrankungen)
   ========================================================= */
#top .leb-seitenkopf{background:var(--leb-sand)!important}
#top .leb-tag{display:inline-block;background:#fff;border:2px solid var(--leb-tinte);border-radius:99px;padding:4px 14px;font-size:15px;font-weight:700;margin:0 6px 6px 0}
#top .leb-toc{position:sticky;top:100px;border-left:4px solid var(--leb-gelb);padding-left:18px}
#top .leb-toc ul{list-style:none;margin:0}
#top .leb-toc li{margin:0}
#top .leb-toc a{display:block;padding:5px 0;text-decoration:none!important;font-size:17px}
#top .leb-toc a:hover{text-decoration:underline!important}
#top .leb-hinweis{border:3px solid var(--leb-tinte);border-radius:var(--leb-radius);padding:26px 28px!important}
#top .leb-textbreite{max-width:760px}
#top [id]{scroll-margin-top:110px}
.avia-breadcrumbs, .breadcrumb{font-size:16px}

/* =========================================================
   8. Footer & Socket
   ========================================================= */
#top #footer, #top #socket{background:var(--leb-tinte);color:#fff;border:0}
#top #footer a, #top #socket a{color:#fff;text-decoration:underline;text-underline-offset:3px}
#top #footer a:hover, #top #socket a:hover{color:var(--leb-gelb)}
#top #footer .widgettitle{font-family:var(--leb-font-head);color:var(--leb-gelb);font-size:20px;text-transform:none;letter-spacing:0}
#top #socket {border-top:1px solid #4a4843; font-size: 15px; }
#top #socket li { font-size: 15px; }
/* =========================================================
   9. Gravity Forms (Mitglied werden) – Orbital-Theme
   ========================================================= */
.gform_wrapper.gform-theme--orbital{
  --gf-color-primary:var(--leb-tinte);
  --gf-color-primary-contrast:#ffffff;
  --gf-color-in-ctrl-primary:var(--leb-tinte);
  --gf-ctrl-border-color:var(--leb-tinte);
  --gf-ctrl-radius:12px;
  --gf-ctrl-size-md:52px;
  --gf-ctrl-font-size:18px;
  --gf-ctrl-label-font-size-primary:18px;
  --gf-font-family-base:var(--leb-font-body);
  --gf-ctrl-outline-color-focus:var(--leb-gelb);
}
#top .gform_wrapper input:not([type=checkbox]):not([type=radio]):not([type=submit]),
#top .gform_wrapper select, #top .gform_wrapper textarea{
  border:2px solid var(--leb-tinte)!important;border-radius:12px;font-size:18px;min-height:52px;padding:10px 14px;background:#fff;color:var(--leb-tinte)
}
#top .gform_wrapper .gfield_label{font-weight:700;font-size:18px;color:var(--leb-tinte)}
#top .gform_wrapper .gfield_description{font-size:16px;color:var(--leb-text2)}
#top .gform_wrapper .gfield_required{color:#a4001d}  /* 7,6:1 auf Weiß */
#top .gform_wrapper .gfield_error input, #top .gform_wrapper .gfield_error select{border-color:#a4001d!important}
#top .gform_wrapper .validation_message, #top .gform_wrapper .gform_validation_errors{color:#a4001d}
#top .gform_wrapper .gform_button, #top .gform_wrapper input[type=submit]{
  background:var(--leb-tinte)!important;color:#fff!important;border:0!important;border-radius:99px!important;
  font-weight:700;font-size:19px;padding:16px 32px!important;min-height:52px;cursor:pointer
}
#top .gform_wrapper .gform_button:hover{background:#000!important}

/* =========================================================
   10. Spenden (PayPal-Link als Button, Klasse leb-btn-dunkel)
   ========================================================= */
#top .leb-betraege{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
#top .leb-betraege a{
  display:inline-flex;align-items:center;justify-content:center;min-width:96px;min-height:56px;
  border:2px solid var(--leb-tinte);border-radius:16px;font-weight:700;font-size:20px;text-decoration:none!important;background:#fff
}
#top .leb-betraege a:hover{background:var(--leb-gelb)}

/* =========================================================
   11. Mobil
   ========================================================= */
@media (max-width:767px){
  #top body, #top p, #top li{font-size:18px}
  #top .flex_column.leb-cta-karte{padding:28px!important;padding-bottom:130px!important}
  #top .leb-toc{position:static}
  #top .avia-button.leb-btn-gelb, #top .leb-btn-gelb .avia-button,
  #top .avia-button.leb-btn-dunkel, #top .leb-btn-dunkel .avia-button,
  #top .avia-button.leb-btn-outline, #top .leb-btn-outline .avia-button{display:flex;justify-content:center;width:100%}
}