/* VGrader "Hell" – Look der YouTube-Thumbnails (Okt. 2026)
   Weiß + Himmelblau statt Beige/Braun, kräftiges Logo-Orange, fette Anton-Headlines.
   Wird NACH allen anderen Stylesheets geladen. Zum Zurücknehmen einfach den <link> entfernen. */

:root{
  --bg:#FFFFFF;
  --bg-alt:#EDF5FC;          /* helles Himmelblau für abwechselnde Bereiche */
  --ink:#121418;
  --ink-soft:#4B5563;
  --orange:#EE6512;          /* nah am Logo-Orange #E95C0C, etwas heller */
  --orange-deep:#C24D06;
  --line:#DCE4EC;
  --white:#FFFFFF;
  --sky:#2C8CDB;
  /* Landingpage-Variablen */
  --bg-2:#EDF5FC;
  --dark:#121418;
  --dark-2:#1C2128;
  --green:#2E9E4F;
}
html body,html body.lead-update{background:#fff;color:var(--ink)}

/* ---------- Headlines: Thumbnail-Typo ---------- */
.lead-update :is(h1,h2){color:var(--ink)}
.lead-update h1 em,.lead-update h2 em{color:var(--orange)!important;font-style:normal}
.vg-kicker,.lead-update .eyebrow,.lead-update .kicker{
  display:inline-block;background:var(--orange);color:#fff!important;padding:6px 10px 5px;border-radius:6px;
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1.2}
.lead-update .eyebrow::before{display:none}

/* ---------- Kopfzeile ---------- */
.utility-bar{border-bottom-color:var(--line)}
header.nav,.nav{background:#fff!important}
.lp-top{background:rgba(255,255,255,.95)!important;border-bottom-color:var(--line)!important}

/* ---------- Buttons ---------- */
.lead-update .btn:not(.btn-secondary),.lead-update button[type=submit],.btn{background:var(--orange);color:#fff!important;box-shadow:0 10px 24px -12px rgba(238,101,18,.9)}
.lead-update .btn:not(.btn-secondary):hover,.lead-update button[type=submit]:hover,.btn:hover{background:var(--orange-deep)}
.lead-update .btn-secondary{background:#fff;color:var(--ink)!important;border:2px solid var(--ink)}
.lead-secondary{background:#fff!important;border:2px solid var(--line)!important}

/* ---------- Startseite: Hero hell ---------- */
.hero-full{background:#fff}
.hero-full-gradient{background:linear-gradient(100deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 26%,rgba(255,255,255,.35) 48%,rgba(255,255,255,0) 62%)}
.hero-full-content h1{color:var(--ink)}
.hero-full-content p{color:#2A3038!important}
.hero-full-content .lead-micro{color:var(--ink-soft)!important}
.hero-full-content .btn-outline{border-color:var(--ink)!important;color:var(--ink)!important;background:#fff}
.hero-full-content .btn-outline:hover{background:var(--ink);color:#fff!important}
@media(max-width:860px){.hero-full-content{background:#fff!important}}

/* ---------- Dunkle Bänder hell machen ---------- */
.stat-bar{background:var(--bg-alt);color:var(--ink);border-block:1px solid var(--line)}
.stat-item{border-right-color:var(--line)}
.stat-item strong{color:var(--ink)}
.stat-item span{color:var(--ink-soft)}

.band{background:var(--bg-alt)!important}
.band h2{color:var(--ink)}
.band p{color:var(--ink-soft)}

.compare-vn{background:#fff;color:var(--ink);border-top:0}
.compare-vn-head h2{color:var(--ink)}
.compare-vn-head p{color:var(--ink-soft)}
.compare-vn-head li{color:var(--ink)}

.audiences{background:var(--bg-alt)!important}
.audiences h2,.audiences-head h2{color:var(--ink)!important}
.audiences p{color:var(--ink-soft)}
.audience-card{background:#fff;border:1px solid var(--line);box-shadow:0 14px 30px -22px rgba(18,20,24,.35)}

.mt-point-info-body{background:#fff;box-shadow:0 14px 30px -10px rgba(18,20,24,.35)}
.mt-point-text{color:var(--ink)}

.home-video .vg-embed-placeholder,.vg-embed-placeholder{background-color:var(--bg-alt)}
.products,.lead-practice{background:#fff}
.tile-img{background:var(--bg-alt)}
.faq{background:var(--bg-alt)}
footer{background:#fff;border-top:1px solid var(--line)}

/* ---------- Erklärvideo-Block hell ---------- */
.vg-explainer{background:var(--bg-alt);color:var(--ink)}
.vg-explainer h2{color:var(--ink)}
.vg-explainer-head p{color:var(--ink-soft)}
.vg-explainer .vg-kicker{color:#fff}
.vg-video{box-shadow:0 26px 60px -28px rgba(18,20,24,.55)}
.vg-explainer-cta{background:#fff;border:1px solid var(--line)}
.vg-explainer-cta strong{color:var(--ink)}
.vg-explainer-cta span{color:var(--ink-soft)}
.vg-explainer .vg-tel-link{color:var(--ink);border:2px solid var(--line)}
.vg-explainer .vg-tel-link:hover{border-color:var(--ink)}
.vg-explainer .vg-tel-link svg{color:var(--orange)}
.vg-yt-link{color:var(--ink-soft)}
.vg-yt-link:hover{color:var(--ink)}

/* ---------- Kundenstimme ---------- */
.vg-voice{background:#fff}
.vg-voice-meta li{background:var(--bg-alt);border-color:var(--line)}

/* ---------- Lead-Bausteine (lead-update.css nutzt feste Beige-Werte) ---------- */
.lead-quick-inner,.lead-shell,.lead-update .lead-shell{background:#fff;border-color:var(--line)}
.lead-next{background:var(--bg-alt)!important}
.lead-update .lead-form{background:var(--bg-alt)!important;border-color:var(--line)!important}
.lead-update .field :is(input,textarea,select){background:#fff!important;border-color:#C9D3DD!important}
.lead-extra{border-color:var(--line)}
.lead-sticky{background:rgba(255,255,255,.97)!important;border-color:var(--line)!important}
.lead-update .mobile-cta{background:rgba(255,255,255,.97)!important;border-top-color:var(--line)!important}
.vg-person{border-color:var(--line)}
.vg-response i{background:var(--green)}
.cta .vg-response i{background:#fff}

/* ---------- Landingpage ---------- */
.lead-update .hero{background:#fff}
.hero-visual{background:var(--bg-alt)!important;box-shadow:0 30px 60px -30px rgba(18,20,24,.5)!important}
.hero-visual::after{background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%)!important}
.hero-visual>img{object-position:72% 50%}
.hero-badge{background:var(--orange)!important;color:#fff!important}
.hero-card{background:rgba(255,255,255,.95)!important;color:var(--ink)!important;border-color:transparent!important}
.hero-card strong{color:var(--ink)}
.hero-card p{color:var(--ink-soft)!important}
.tick{background:var(--orange)!important;color:#fff!important}
.lead-tech{background:var(--bg-alt)!important;border-color:var(--line)!important}
.lead-tech-item{background:#fff!important}
.lead-tech-item strong{color:var(--orange)}
.problem{background:#fff!important}
.problem-card{background:var(--bg-alt)!important;border-color:var(--line)!important}
.vform{background:var(--bg-alt)}
.benefit-icon{background:var(--orange)!important;color:#fff!important}
.lead-update .results{background:var(--bg-alt)!important}
.lead-update .result{border-color:var(--line)!important}
.result .num{color:var(--orange)!important}
.audience{background:#fff}
.aud-card{border-color:var(--line)!important}
.aud-num{color:var(--orange)!important;opacity:.25}
.faq details{border-color:var(--line)!important}
.lang-switch{background:#fff;border-color:var(--line)}

/* ---------- Kontaktseite ---------- */
.info-block{border-color:var(--line)}
.info-block-note{background:var(--bg-alt)!important;border-color:var(--line)!important}
.info-block-note h3{color:var(--orange-deep)!important}
.info-block-note p{color:var(--ink-soft)!important}
.contact-form{border-color:var(--line)}

/* Orange CTA-Band unten: weißer Button statt orange auf orange */
.lead-update .cta .btn:not(.btn-secondary){background:#fff!important;color:var(--orange-deep)!important;box-shadow:0 10px 24px -14px rgba(0,0,0,.45)}
.lead-update .cta .btn:not(.btn-secondary):hover{background:var(--ink)!important;color:#fff!important}
.lead-update .lead-sticky .btn{background:var(--orange)!important}

/* Headlines durchgehend in Großbuchstaben wie auf den Thumbnails */
.lead-update :is(h1,h2):not(.vg-person-name){text-transform:uppercase;letter-spacing:.3px}
.lead-update :is(.contact-form h2,.lead-quick h2,.lead-tech h2,.test-banner-box h2){text-transform:none}


/* =========================================================
   Unterseiten: einheitliche Bausteine (Okt. 2026)
   ========================================================= */

/* Seitenkopf-Label ("Team", "Geschichte", "Philosophie", Produktkategorie) wie die Thumbnail-Kästchen */
.lead-update .tag:not(.tag-new){background:var(--orange);color:#fff;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px 5px;border-radius:6px}

/* Einheitliche Seitenköpfe */
.lead-update :is(.a-hero,.ph-hero,.m-hero,.pd-hero,.p-hero,.kombi-hero,.page-hero,.fr-hero) h1{font-size:clamp(38px,5vw,56px);line-height:1.02;color:var(--ink)}
.lead-update :is(.a-hero,.ph-hero,.m-hero,.pd-hero,.p-hero,.kombi-hero,.page-hero,.fr-hero) p{font-size:16.5px;line-height:1.65;color:var(--ink-soft)}

/* Dunkle "Unser Prinzip"-Kästen -> hell mit orangem Label */
.ph-principle-box,.history-principle,.concern-principle{background:var(--bg-alt)!important;border:1px solid var(--line)}
.ph-principle-box p,.history-principle p,.concern-principle p{color:var(--ink)!important;font-weight:600}
.ph-principle-box::before,.history-principle::before{content:"Unser Prinzip";display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:6px}

/* Team: helle Karten, 3 Spalten */
.team-grid{grid-template-columns:repeat(3,1fr)!important}
.team-card{background:#fff!important;color:var(--ink)!important;border:1px solid var(--line);padding:16px!important;box-shadow:0 18px 40px -30px rgba(18,20,24,.45)}
.team-card-photo{background:var(--bg-alt)!important;margin-bottom:14px!important}
.team-card h3{color:var(--ink)!important;font-weight:700!important;font-size:18px!important}
.team-card .role{color:var(--ink-soft)!important}
@media(max-width:980px){.team-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:560px){.team-grid{grid-template-columns:1fr!important}}

/* Produkt 230K: Größen-Teaser hell */
.overview-sizes{background:var(--bg-alt)!important;border:1px solid var(--line)}
.overview-sizes .size-teaser-old{color:var(--ink-soft)!important}
.overview-sizes .size-teaser-note{color:var(--ink-soft)!important}
.overview-box-inner{border:1px solid var(--line);box-shadow:0 30px 60px -36px rgba(18,20,24,.35)!important}

/* 205K: Upgrade-Kasten hell */
.upgrade-card{background:var(--bg-alt)!important;color:var(--ink)!important;border:1px solid var(--line)}
.upgrade-card h2{color:var(--ink)!important}
.upgrade-card p{color:var(--ink-soft)!important}
.upgrade-points div{color:var(--ink)!important}
.compare-table th{color:var(--ink)}

/* Timeline (Produktdetails, Geschichte): gleiche Punkte, gleiche Bildecken */
.timeline-dot{background:#fff!important;border-color:var(--orange)!important}
.hl-img{border-radius:14px!important;background:var(--bg-alt)!important}
.hl-item h3,.hl-text h3{color:var(--ink)}

/* Feature-Kacheln & "Passt besonders gut zu" */
.pd-feature-card,.feature-grid>div,.pd-related-card{border-color:var(--line)!important;border-radius:14px!important}
.pd-feature-card h3{font-weight:700!important;color:var(--ink)}
.pd-related-card .thumb{background:var(--bg-alt)!important}

/* Messen */
.fair-card{border-color:var(--line)!important;box-shadow:0 18px 40px -30px rgba(18,20,24,.4)}

/* Philosophie: Zahlenkacheln */
.ph-stat{border:1px solid var(--line);background:#fff!important}
.ph-stat .num{color:var(--orange)!important}
/* Team: 10 Personen -> 5 Spalten auf großen Bildschirmen, keine einzelne Karte in der letzten Reihe */
@media(min-width:1100px){.team-grid{grid-template-columns:repeat(5,1fr)!important;gap:16px!important}.team-card{padding:12px!important}.team-card h3{font-size:16px!important}}
/* Cookie-Fenster: Überschriften in normaler Schreibweise */
.lead-update :is(.vg-privacy-banner,.vg-privacy-dialog) h2{text-transform:none!important;font-family:'Inter',sans-serif!important;font-weight:700!important;letter-spacing:0!important}