/**
 * ENERGIEREBELLEN - Scanner Landingpage
 * Vollständiges CSS für Gutenberg Template (CLEAN BASE - Ohne Schrägen/Rotationen)
 */

/* =====================================================
   1. VARIABLEN
===================================================== */

:root {
  --er-pink: #d4146d;
  --er-pink-card: #dc315f;
  --er-pink-dark: #99005d;
  --er-yellow: #ffd529;
  --er-black: #050505;
  --er-white: #ffffff;
  --er-gray: #e8e8e8;

  --er-font-headline: "Arial Black", Impact, "Oswald", sans-serif;
  --er-font-body: Arial, Helvetica, sans-serif;
}

/* =====================================================
   2. BODY / TEMPLATE RESET
===================================================== */

html,
body.scanner-landingpage {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-height: 100% !important;
  background: #ffffff !important;
  color: var(--er-black) !important;
  font-family: var(--er-font-body) !important;
  overflow-x: hidden !important;
}

body.scanner-landingpage.admin-bar {
  padding-top: 0 !important;
}

body.scanner-landingpage * {
  box-sizing: border-box !important;
}

body.scanner-landingpage img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

body.scanner-landingpage a {
  text-decoration: none !important;
}

/* Theme-Elemente sicher ausblenden */
body.scanner-landingpage .er-scanner-header,
body.scanner-landingpage .er-scanner-footer,
body.scanner-landingpage header.site-header,
body.scanner-landingpage footer.site-footer,
body.scanner-landingpage #wrapper-navbar,
body.scanner-landingpage #wrapper-footer-full,
body.scanner-landingpage .site-header,
body.scanner-landingpage .site-footer,
body.scanner-landingpage .navbar {
  display: none !important;
}

/* Theme-/Bootstrap-Container neutralisieren */
body.scanner-landingpage .er-scanner-main,
body.scanner-landingpage .site,
body.scanner-landingpage #page,
body.scanner-landingpage #content,
body.scanner-landingpage main,
body.scanner-landingpage .container,
body.scanner-landingpage .container-fluid,
body.scanner-landingpage .entry-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
}

/* =====================================================
   3. GUTENBERG RESET
===================================================== */

body.scanner-landingpage .wp-site-blocks,
body.scanner-landingpage .is-layout-constrained,
body.scanner-landingpage .is-layout-flow,
body.scanner-landingpage .wp-block-group,
body.scanner-landingpage .wp-block-columns,
body.scanner-landingpage .wp-block-column,
body.scanner-landingpage .wp-block-image,
body.scanner-landingpage figure {
  max-width: none !important;
}

body.scanner-landingpage .wp-block-group,
body.scanner-landingpage .wp-block-columns,
body.scanner-landingpage .wp-block-column,
body.scanner-landingpage .wp-block-image,
body.scanner-landingpage figure {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.scanner-landingpage .wp-block-columns {
  width: 100% !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.scanner-landingpage .wp-block-column {
  min-width: 0 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* =====================================================
   4. PAGE WRAPPER
===================================================== */

body.scanner-landingpage .er-page-wrapper {
  width: calc(100vw - 400px) !important;
  max-width: none !important;
  margin: 50px auto 0 auto !important;
  padding: 0 !important;
  background: var(--er-white) !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

body.scanner-landingpage.admin-bar .er-page-wrapper {
  margin-top: 50px !important;
}

/* =====================================================
   5. TYPOGRAFIE
===================================================== */

body.scanner-landingpage .er-page-wrapper h1,
body.scanner-landingpage .er-page-wrapper h2,
body.scanner-landingpage .er-page-wrapper h3,
body.scanner-landingpage .er-page-wrapper h4 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--er-font-headline) !important;
  font-weight: 900 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
}

body.scanner-landingpage .er-page-wrapper p,
body.scanner-landingpage .er-page-wrapper li {
  margin-top: 0 !important;
  font-family: var(--er-font-body) !important;
  font-weight: 800 !important;
}

body.scanner-landingpage .er-page-wrapper p {
  margin-bottom: 8px !important;
}

body.scanner-landingpage .er-page-wrapper strong {
  font-weight: 900 !important;
}

/* =====================================================
   6. HELPER & UNTERSTRICHE
===================================================== */

body.scanner-landingpage .er-text-pink { color: var(--er-pink) !important; }
body.scanner-landingpage .er-text-yellow { color: var(--er-yellow) !important; }

body.scanner-landingpage .er-bg-yellow {
  display: inline !important;
  padding: 0 3px !important;
  background: var(--er-yellow) !important;
  color: var(--er-black) !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* --- UNTERSTRICHE (Gerade & perfekter Abstand) --- */
body.scanner-landingpage .er-page-wrapper .er-title-underline {
  display: inline-block !important;
  position: relative !important;
  padding-bottom: 14px !important; /* Perfekter Abstand zum Text */
  margin-bottom: 15px !important;
}

body.scanner-landingpage .er-page-wrapper .er-title-underline::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 92% !important;
  height: 4px !important;
  background: var(--er-pink) !important;
  border-radius: 20px !important;
  
  /* Zwingt die Linie absolut in die Waagerechte */
  transform: none !important; 
  rotate: 0deg !important; 
}

body.scanner-landingpage .er-page-wrapper .er-title-underline.is-yellow::after {
  background: var(--er-yellow) !important;
}

/* Buttons */
body.scanner-landingpage .wp-block-buttons { margin: 0 !important; gap: 0 !important; }
body.scanner-landingpage .wp-block-button { margin: 0 !important; }

body.scanner-landingpage .er-btn-yellow-wrap .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--er-yellow) !important;
  color: var(--er-black) !important;
  box-shadow: none !important;
  font-family: var(--er-font-headline) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

/* =====================================================
   7 & 8. HERO SECTION (Gerades Layout)
===================================================== */

body.scanner-landingpage .er-hero-section {
  width: 100% !important;
  position: relative !important;
  margin-bottom: 20px !important;
}

/* Top Bar */
body.scanner-landingpage .er-hero-topbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  margin-bottom: 15px !important;
  padding: 20px 40px 0 40px !important;
}

body.scanner-landingpage figure.er-top-logo { margin: 0 !important; }

body.scanner-landingpage .er-scanner-mode {
  color: var(--er-pink) !important;
  font-family: var(--er-font-headline) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  margin: 0 0 5px 0 !important;
}

/* --- GERADER HINTERGRUND --- */
body.scanner-landingpage .er-hero-box {
  position: relative !important;
  background: var(--er-yellow) !important; 
  padding: 50px 0 !important;
  z-index: 1 !important;
}

/* Gerader vertikaler Schnitt: 70% Pink, Rest Gelb */
body.scanner-landingpage .er-hero-box::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; 
  left: 0 !important; 
  bottom: 0 !important; 
  width: 70% !important; 
  background: var(--er-pink) !important;
  z-index: -1 !important;
}

/* Content Container */
body.scanner-landingpage .er-hero-content {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  width: 100% !important;
}

/* --- LINKE SPALTE (Pinker Bereich) --- */
body.scanner-landingpage .er-hero-col-left {
  flex: 0 0 40% !important;
  padding-left: 60px !important;
}

body.scanner-landingpage .er-hero-col-left h1 {
  color: var(--er-white) !important;
  font-size: 64px !important;
  line-height: 0.9 !important;
  margin-bottom: 20px !important;
}

body.scanner-landingpage .er-hero-col-left p {
  color: var(--er-white) !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  margin-bottom: 15px !important;
}

body.scanner-landingpage .er-hero-col-left p .er-text-yellow {
  color: var(--er-yellow) !important;
  font-size: 16px !important;
}

body.scanner-landingpage .er-btn-hero .wp-block-button__link {
  background: var(--er-yellow) !important;
  color: var(--er-black) !important;
  font-family: var(--er-font-headline) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  padding: 12px 24px !important;
  border-radius: 0 !important;
  margin-top: 10px !important;
  display: inline-block !important;
  text-transform: uppercase !important;
}

/* --- MITTLERE SPALTE (Bild) --- */
body.scanner-landingpage .er-hero-col-center {
  flex: 0 0 30% !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
}

body.scanner-landingpage .er-hero-img {
  margin: 0 !important;
  width: 130% !important;
  max-width: 420px !important;
  transform: translateY(20px) !important; 
}

/* --- RECHTE SPALTE (Gelber Bereich) --- */
body.scanner-landingpage .er-hero-col-right {
  flex: 0 0 30% !important;
  padding-left: 20px !important;
  padding-right: 40px !important;
}

body.scanner-landingpage .er-hero-col-right h3 {
  color: var(--er-pink) !important;
  font-size: 38px !important;
  line-height: 0.9 !important;
  margin-bottom: 15px !important;
}

body.scanner-landingpage .er-insta-icon { margin: 0 0 15px 0 !important; }

body.scanner-landingpage .er-hero-col-right p {
  color: var(--er-black) !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  margin-bottom: 12px !important;
}

/* --- HASHTAGS (Kugelsicherer Selektor) --- */
body.scanner-landingpage .er-hero-col-right p:nth-of-type(2) strong { 
  font-family: var(--er-font-headline) !important; 
  font-size: 18px !important; 
  font-weight: 900 !important; 
  letter-spacing: -0.02em !important; 
  line-height: 1.2 !important;
}

body.scanner-landingpage .er-small-text { font-size: 11px !important; line-height: 1.4 !important; }

/* =====================================================
   9. ABOUT / WER WIR WIRKLICH SIND
===================================================== */
body.scanner-landingpage .er-about { background: var(--er-white) !important; padding: 42px 70px 22px 72px !important; }
body.scanner-landingpage .er-about > .wp-block-columns { gap: 54px !important; align-items: flex-start !important; }
body.scanner-landingpage .er-about .wp-block-column:first-child { flex: 0 0 38% !important; max-width: 38% !important; }
body.scanner-landingpage .er-about .wp-block-column:last-child { flex: 0 0 48% !important; max-width: 48% !important; }
body.scanner-landingpage .er-about h2 { color: var(--er-black) !important; font-size: 36px !important; line-height: 0.9 !important; }
body.scanner-landingpage .er-about p { color: var(--er-black) !important; font-size: 11px !important; line-height: 1.25 !important; margin-bottom: 8px !important; }

/* =====================================================
   10. WARUM REBELLEN
===================================================== */
body.scanner-landingpage .er-warum-wrap { background: var(--er-white) !important; padding: 26px 56px 14px !important; }
body.scanner-landingpage .er-warum-card { 
  position: relative !important; 
  min-height: 210px !important; 
  padding: 34px 58px 34px 72px !important; 
  background: var(--er-pink-card) !important; 
}
body.scanner-landingpage .er-warum-card > .wp-block-columns { gap: 34px !important; align-items: center !important; }
body.scanner-landingpage .er-warum-card .wp-block-column:nth-child(1) { flex: 0 0 31% !important; max-width: 31% !important; }
body.scanner-landingpage .er-warum-card .wp-block-column:nth-child(2) { flex: 0 0 48% !important; max-width: 48% !important; }
body.scanner-landingpage .er-warum-card .wp-block-column:nth-child(3) { flex: 0 0 16% !important; max-width: 16% !important; }
body.scanner-landingpage .er-warum-card h2 { color: var(--er-white) !important; font-size: 32px !important; line-height: 0.92 !important; }
body.scanner-landingpage .er-warum-card p, body.scanner-landingpage .er-warum-card strong { color: var(--er-white) !important; font-size: 11px !important; line-height: 1.25 !important; }
body.scanner-landingpage .er-warum-card p { margin-bottom: 8px !important; }
body.scanner-landingpage .er-warum-card .er-text-yellow, body.scanner-landingpage .er-warum-card .er-text-yellow strong { color: var(--er-yellow) !important; }

/* --- AGGRESSIVER BLITZ-FIX --- */
body.scanner-landingpage .er-warum-wrap .er-warum-bolt,
body.scanner-landingpage .er-warum-wrap .er-warum-bolt * { 
  color: var(--er-yellow) !important; 
  font-size: 130px !important; 
  line-height: 1 !important; 
  margin: 0 !important; 
  padding: 0 !important;
  display: inline-block !important; 
  transform: none !important; 
  rotate: 0deg !important;
}

/* =====================================================
   11. DU BIST HIER
===================================================== */
body.scanner-landingpage .er-du-bist-hier { background: var(--er-white) !important; padding: 18px 76px 26px 76px !important; }
body.scanner-landingpage .er-du-bist-hier > .wp-block-columns { gap: 52px !important; align-items: flex-start !important; }
body.scanner-landingpage .er-du-bist-hier .wp-block-column:first-child { flex: 0 0 36% !important; max-width: 36% !important; }
body.scanner-landingpage .er-du-bist-hier .wp-block-column:last-child { flex: 0 0 48% !important; max-width: 48% !important; }
body.scanner-landingpage .er-du-bist-hier h2 { color: var(--er-black) !important; font-size: 34px !important; line-height: 0.9 !important; }
body.scanner-landingpage .er-du-bist-hier ul { list-style: none !important; margin: 2px 0 0 0 !important; padding: 0 !important; }
body.scanner-landingpage .er-du-bist-hier li { position: relative !important; color: var(--er-black) !important; font-size: 11px !important; line-height: 1.25 !important; padding-left: 23px !important; margin-bottom: 8px !important; }
body.scanner-landingpage .er-du-bist-hier li::before { content: "⚡" !important; position: absolute !important; left: 0 !important; top: -3px !important; color: var(--er-pink) !important; font-size: 17px !important; line-height: 1 !important; }
body.scanner-landingpage .er-footer-line { color: var(--er-pink) !important; font-size: 11px !important; font-weight: 900 !important; margin-top: 12px !important; }

/* =====================================================
   12. EXKLUSIV FÜR SCANNER & FORMULAR
===================================================== */
body.scanner-landingpage .er-scanner { 
  position: relative !important; 
  width: auto !important; 
  min-height: 300px !important; 
  margin: 0 56px !important; 
  padding: 30px 58px 34px 58px !important; 
  background: var(--er-pink-dark) !important; 
}
body.scanner-landingpage .er-scanner > .wp-block-columns { gap: 42px !important; align-items: flex-start !important; }
body.scanner-landingpage .er-scanner .wp-block-column:first-child { flex: 0 0 38% !important; max-width: 38% !important; }
body.scanner-landingpage .er-scanner .wp-block-column:last-child { flex: 0 0 44% !important; max-width: 44% !important; position: relative !important; }
body.scanner-landingpage .er-scanner h2 { color: var(--er-white) !important; font-size: 34px !important; line-height: 0.9 !important; }
body.scanner-landingpage .er-scanner p, body.scanner-landingpage .er-scanner li, body.scanner-landingpage .er-scanner strong { color: var(--er-white) !important; font-size: 10.5px !important; line-height: 1.25 !important; }
body.scanner-landingpage .er-scanner .er-text-yellow, body.scanner-landingpage .er-scanner .er-text-yellow strong { color: var(--er-yellow) !important; }
body.scanner-landingpage .er-scanner ul { list-style: none !important; margin: 10px 0 14px !important; padding: 0 !important; }
body.scanner-landingpage .er-scanner li { position: relative !important; padding-left: 21px !important; margin-bottom: 5px !important; }
body.scanner-landingpage .er-scanner li::before { content: "✓" !important; position: absolute !important; left: 0 !important; top: -2px !important; color: var(--er-yellow) !important; font-size: 15px !important; line-height: 1 !important; }

/* --- FORMULAR (Exakt nach Design-Vorlage) --- */
body.scanner-landingpage .er-form { 
  position: relative !important; 
  width: 100% !important; 
  max-width: 340px !important; 
  margin: 15px 0 0 0 !important; 
  padding: 35px 25px 25px 25px !important; 
  background: var(--er-white) !important; 
}

/* Die gelbe Überschrift (überlappt den oberen Rand) */
body.scanner-landingpage .er-form-header { 
  position: absolute !important; 
  top: -12px !important; 
  left: 50% !important; 
  transform: translateX(-50%) !important; 
  background: var(--er-yellow) !important; 
  padding: 6px 16px !important; 
  width: max-content !important; 
  z-index: 10 !important;
}

body.scanner-landingpage .er-form-header h3 { 
  color: var(--er-black) !important; 
  font-size: 11px !important; 
  font-weight: 900 !important; 
  line-height: 1 !important; 
  margin: 0 !important;
  text-transform: uppercase !important;
}

/* CF7 Eingabefelder */
body.scanner-landingpage .er-form .wpcf7 { padding: 0 !important; }
body.scanner-landingpage .er-form .wpcf7 p { margin: 0 0 12px 0 !important; padding: 0 !important; }

body.scanner-landingpage .er-form input[type="text"], 
body.scanner-landingpage .er-form input[type="tel"], 
body.scanner-landingpage .er-form input[type="email"], 
body.scanner-landingpage .er-form textarea { 
  width: 100% !important; 
  height: 36px !important; 
  margin: 0 !important; 
  padding: 8px 12px !important; 
  border: 1px solid #dcdcdc !important; 
  border-radius: 0 !important; 
  background: var(--er-white) !important; 
  color: var(--er-black) !important; 
  font-family: var(--er-font-body) !important; 
  font-size: 12px !important; 
}

body.scanner-landingpage .er-form textarea { 
  height: 80px !important; 
  resize: none !important; 
}

/* Submit Button */
body.scanner-landingpage .er-form input[type="submit"] { 
  display: inline-block !important; 
  width: auto !important; 
  margin: 5px 0 0 0 !important; 
  padding: 10px 20px !important; 
  border: 0 !important; 
  background: var(--er-black) !important; 
  color: var(--er-white) !important; 
  font-family: var(--er-font-headline) !important; 
  font-size: 12px !important; 
  font-weight: 900 !important; 
  text-transform: uppercase !important; 
  cursor: pointer !important;
}

/* Text unter dem Button (im CF7 Code) */
body.scanner-landingpage .er-form-footer-text {
  color: var(--er-black) !important;
  font-size: 11px !important;
  margin: 8px 0 0 0 !important;
  text-align: left !important; 
}

/* CF7 Fehlermeldungen */
body.scanner-landingpage .er-form .wpcf7-response-output { margin: 10px 0 0 0 !important; padding: 8px !important; font-size: 10px !important; line-height: 1.2 !important; border-radius: 0 !important; }
body.scanner-landingpage .er-form .wpcf7-not-valid-tip { font-size: 10px !important; line-height: 1.2 !important; margin-top: 2px !important; margin-bottom: 0 !important; }

/* Express-Sticker */
body.scanner-landingpage .er-express-box { 
  position: absolute !important; 
  right: -144px !important; 
  top: 100px !important; 
  bottom: auto !important; 
  width: 142px !important; 
  margin: 0 !important; 
  padding: 10px 10px !important; 
  background: var(--er-yellow) !important; 
  transform: none !important; 
  rotate: 0deg !important;
  box-shadow: none !important; 
  z-index: 20 !important; 
}
body.scanner-landingpage .er-express-box h4 { color: var(--er-black) !important; font-size: 12px !important; line-height: 1.05 !important; text-align: center !important; }

/* =====================================================
   13. REBEL MODE (Perfekte 3-Spalten Aufteilung)
===================================================== */
body.scanner-landingpage .er-rebel-mode { 
  background: var(--er-gray) !important; 
  padding: 0 40px !important; 
  overflow: hidden !important;
}

body.scanner-landingpage .er-rebel-mode > .wp-block-columns { 
  width: 100% !important; 
  gap: 30px !important; 
  align-items: stretch !important; 
}

/* Spalte 1: Mann (sitzt unten auf) */
body.scanner-landingpage .er-rebel-mode .wp-block-column:nth-child(1) { 
  flex: 0 0 28% !important; 
  max-width: 28% !important; 
  display: flex !important;
  align-items: flex-end !important; 
}

/* Spalte 2: Text (mittig zentriert) */
body.scanner-landingpage .er-rebel-mode .wp-block-column:nth-child(2) { 
  flex: 0 0 42% !important; 
  max-width: 42% !important; 
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important; 
  padding: 40px 0 !important; 
}

/* Spalte 3: Grafik (mittig zentriert, rechtsbündig) */
body.scanner-landingpage .er-rebel-mode .wp-block-column:nth-child(3) { 
  flex: 0 0 25% !important; 
  max-width: 25% !important; 
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important; 
}

body.scanner-landingpage .er-rebel-mode figure { margin: 0 !important; }
body.scanner-landingpage .er-rebel-mode img { 
  width: auto !important; 
  max-width: 100% !important; 
  display: block !important; 
}

/* Text-Styling (KOMMT BALD & REBEL MODE) */
body.scanner-landingpage .er-badge { 
  display: block !important; 
  width: fit-content !important; 
  margin: 0 !important; 
  padding: 4px 8px !important; 
  background: #555555 !important; 
  color: var(--er-white) !important; 
  font-family: var(--er-font-headline) !important; 
  font-size: 12px !important; 
  font-weight: 900 !important; 
  line-height: 1 !important; 
  text-transform: uppercase !important; 
}

body.scanner-landingpage .er-rebel-mode h2 { 
  display: block !important; 
  width: fit-content !important; 
  margin: 0 0 10px 0 !important; 
  padding: 4px 10px !important; 
  background: var(--er-pink-dark) !important; 
  color: var(--er-white) !important; 
  font-size: 32px !important; 
  line-height: 1 !important; 
}

body.scanner-landingpage .er-rebel-mode p { 
  color: var(--er-black) !important; 
  font-size: 13px !important; 
  line-height: 1.3 !important; 
  margin-bottom: 6px !important; 
}

/* =====================================================
   14. FOOTER CTA
===================================================== */
body.scanner-landingpage .er-footer-cta { min-height: 112px !important; padding: 22px 86px 20px 108px !important; background: var(--er-pink-dark) !important; }
body.scanner-landingpage .er-footer-cta > .wp-block-columns { gap: 36px !important; align-items: center !important; }
body.scanner-landingpage .er-footer-cta .wp-block-column:first-child { flex: 0 0 58% !important; max-width: 58% !important; }
body.scanner-landingpage .er-footer-cta .wp-block-column:last-child { flex: 0 0 35% !important; max-width: 35% !important; }
body.scanner-landingpage .er-footer-cta h2 { color: var(--er-white) !important; font-size: 34px !important; line-height: 0.9 !important; margin-bottom: 6px !important; }
body.scanner-landingpage .er-footer-cta p { color: var(--er-white) !important; font-size: 11px !important; line-height: 1.2 !important; margin-bottom: 0 !important; }
body.scanner-landingpage .er-footer-cta p strong { color: var(--er-yellow) !important; }
body.scanner-landingpage .er-footer-cta .wp-block-buttons { justify-content: flex-end !important; }
body.scanner-landingpage .er-footer-cta .er-btn-yellow-wrap { transform: none !important; }
body.scanner-landingpage .er-footer-cta .er-btn-yellow-wrap .wp-block-button__link { min-width: 230px !important; padding: 13px 18px !important; font-size: 13px !important; }

/* =====================================================
   15. RESPONSIVE (MOBILE FIXES)
===================================================== */

@media (max-width: 1100px) {
  body.scanner-landingpage .er-page-wrapper { width: 100% !important; margin: 0 !important; }
  body.scanner-landingpage.admin-bar .er-page-wrapper { margin-top: 0 !important; }

  /* --- 1. ALLGEMEINES STACKING FÜR ALLE SPALTEN --- */
  body.scanner-landingpage .wp-block-columns {
    flex-direction: column !important;
    gap: 30px !important;
  }
  body.scanner-landingpage .wp-block-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --- 2. HERO MOBILE FIX --- */
  body.scanner-landingpage .er-hero-topbar { flex-direction: column !important; align-items: flex-start !important; padding: 20px 20px 0 20px !important; }
  body.scanner-landingpage .er-scanner-mode { margin-top: 15px !important; }
  
  body.scanner-landingpage .er-hero-box { 
    padding: 40px 20px 20px 20px !important; 
    background: linear-gradient(to bottom, var(--er-pink) 0%, var(--er-pink) 65%, var(--er-yellow) 65%, var(--er-yellow) 100%) !important;
  }
  body.scanner-landingpage .er-hero-box::before { display: none !important; } 
  
  body.scanner-landingpage .er-hero-col-left { padding: 0 !important; }
  body.scanner-landingpage .er-hero-col-center { margin-top: 20px !important; }
  body.scanner-landingpage .er-hero-col-right { margin-top: 20px !important; padding: 20px 0 0 0 !important; }

  /* --- 3. SEKTIONEN PADDING MOBILE --- */
  body.scanner-landingpage .er-about,
  body.scanner-landingpage .er-warum-wrap,
  body.scanner-landingpage .er-du-bist-hier,
  body.scanner-landingpage .er-scanner,
  body.scanner-landingpage .er-rebel-mode,
  body.scanner-landingpage .er-footer-cta {
    padding: 40px 20px !important;
    margin: 0 !important;
  }

  /* --- 4. WARUM REBELLEN FIX --- */
  body.scanner-landingpage .er-warum-card { padding: 30px 20px !important; }
  body.scanner-landingpage .er-warum-card > .wp-block-columns { gap: 20px !important; align-items: flex-start !important; }
  body.scanner-landingpage .er-warum-bolt { text-align: left !important; margin-top: 10px !important; }

  /* --- 5. FORMULAR & EXPRESS BOX FIX --- */
  body.scanner-landingpage .er-form { width: 100% !important; max-width: 100% !important; }
  body.scanner-landingpage .er-express-box { 
    position: relative !important; 
    right: auto !important; 
    top: auto !important; 
    width: 100% !important; 
    max-width: 250px !important;
    margin: 20px 0 0 0 !important; 
  }

  /* --- 6. REBEL MODE FIX --- */
  body.scanner-landingpage .er-rebel-mode > .wp-block-columns { align-items: flex-start !important; }
  body.scanner-landingpage .er-rebel-mode img { margin: 0 auto !important; }

  /* --- 7. FOOTER CTA FIX --- */
  body.scanner-landingpage .er-footer-cta .wp-block-buttons { justify-content: flex-start !important; margin-top: 20px !important; }
  body.scanner-landingpage .er-footer-cta .er-btn-yellow-wrap .wp-block-button__link { width: 100% !important; }
}

@media (max-width: 600px) {
  body.scanner-landingpage figure.er-top-logo img { width: 180px !important; max-width: 180px !important; }
  body.scanner-landingpage .er-hero-col-left h1 { font-size: 46px !important; }
  body.scanner-landingpage .er-hero-col-right h3, 
  body.scanner-landingpage .er-about h2, 
  body.scanner-landingpage .er-warum-card h2, 
  body.scanner-landingpage .er-du-bist-hier h2, 
  body.scanner-landingpage .er-scanner h2, 
  body.scanner-landingpage .er-footer-cta h2 { 
    font-size: 32px !important; 
  }
}