/******************* 01. Font Implementation *******************/
/*
@font-face {
  font-family: 'Open Sans';
  src: url('../../Fonts/OpenSans/OpenSans-Regular-webfont.eot');
  src: url('../../Fonts/OpenSans/OpenSans-Regular-webfont.eot?#iefix') format("embedded-opentype"),
  url('../../Fonts/OpenSans/OpenSans-Regular-webfont.woff') format('woff'),
  url('../../Fonts/OpenSans/OpenSans-Regular-webfont.ttf') format('truetype'),
  url('../../Fonts/OpenSans/OpenSans-Regular-webfont.svg##{$font-name-normal}') format('svg');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../../Fonts/OpenSans/OpenSans-Bold-webfont.eot');
  src: url('../../Fonts/OpenSans/OpenSans-Bold-webfont.eot?#iefix') format("embedded-opentype"),
  url('../../Fonts/OpenSans/OpenSans-Bold-webfont.woff') format('woff'),
  url('../../Fonts/OpenSans/OpenSans-Bold-webfont.ttf') format('truetype'),
  url('../../Fonts/OpenSans/OpenSans-Bold-webfont.svg##{$font-name-bold}') format("svg");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
*/
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 200 800;
  src: local('Roboto Flex Regular'), url('../../Fonts/Roboto/RobotoFlex[GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght].woff') format('woff');
  font-display: swap;
}
/******************* 02. Variable Declarations *******************/
:root {

  /*** Fonts,see also Font Implementation at to top of this file ***/
  --font-family-normal: 'Roboto Flex', verdana, arial, helvetica, sans-serif;
  --font-variation-settings-extralight: 'wdth' 120, 'wght' 200;
  --font-variation-settings-light: 'wdth' 120, 'wght' 300;
  --font-variation-settings: 'wdth' 120, 'wght' 400;
  --font-variation-settings-medium: 'wdth' 120, 'wght' 500;
  --font-variation-settings-semibold: 'wdth' 120, 'wght' 600;
  --font-variation-settings-bold: 'wdth' 120, 'wght' 700;
  --font-variation-settings-extrabold: 'wdth' 120, 'wght' 800;

  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Luft ober- und unterhalb des Logos */
--logo-spacing: var(--gutter-half);                                    /* 12px */
--header-service-height: calc(var(--logo-height) + var(--logo-spacing) * 2);

  /*** Colors begin ***/

  /* Gray Scale */
  --black: #000;
  --white: #fff;
  --white-opacity: rgba(255, 255, 255, 0.9);

  /* Message Colors */
  --error: #ba0202;
  --error-light: #fff2f2;
  --valid: #5abc55;
  --valid-light: #e8f6e7;
  --warning: #ffc800;
  --warning-light: #fffae8;
  --information: #0080ff;
  --information-light: #ecf5fe;

  /*** Colors end ***/

  /*** Basic Sizes ***/

  /* Basic horizontal spaces */
  --base-html-size: 16px;
  --body-font-size: 1rem; /* 16px*/

  --base-size: 1.5rem;
  --base-size-double: 3rem;
  --base-size-triple: 4.5rem;
  --base-size-half: 0.75rem;
  --base-size-quarter: 0.375rem;
  --base-size-eighth: 0.1875rem;

  /* Basic vertical spaces */
  --gutter: 1.5rem;
  --gutter-double: 3rem;
  --gutter-triple: 4.5rem;
  --gutter-half: 0.75rem;
  --gutter-quarter: 0.375rem;
  --gutter-eighth: 0.1875rem;

  /* Borders */
  --border-width: 2px;
  --border-radius: 2px;

  --transition: .3s ease-in-out;


  /******************* 03. Property Declarations, Individual Layout *******************/

  /* Max. Height of Logo in Header (--logo-height) on Website
  Rendered File height is defined in TypoScript Constants on Root Page. Adjust value if necessary
  Example: --logo-height: 150px;
  */

 --logo-height: calc(var(--base-size, 16px) * 3);

  /* Body */
  --font-color: var(--gray1);
  --font-color-light: var(--gray2);
  --body-bg-color: var(--white);

  /* Body links */
  --body-link-color: var(--color1);
  --body-link-hover-color: var(--color2);
  --body-link-invers-color: var(--gray4);
  --body-link-invers-hover-color: var(--white);
  --body-link-text-decoration: underline;
  --body-link-text-decoration-color: var(--gray4);
  --body-link-text-decoration-thickness: 1px;
  --body-link-underline-offset: 3px;

  /* Page Header */
  --header-bg-color: var(--white);
  --header-bg-overlay: var(--white-opacity);
  --header-color: var(--font-color);
  --header-link-color: var(--body-link-color);
  --header-link-hover-color: var(--body-link-hover-color);
  --header-service-height: var(--logo-height, calc(var(--base-size, 16px) * 3));
  --mobile-logo-height: calc(var(--base-size, 16px) * 3);
  --nav-header-height: calc(var(--base-size, 16px) * 2);
  --header-height: calc(var(--header-service-height) + var(--nav-header-height));
  --header-height-fixed: calc(var(--logo-height, 16px) * .5);

  --header-button-color: var(--white);
  --header-button-hover-color: var(--white);
  --header-button-bg: var(--body-link-color);
  --header-button-hover-bg: var(--body-link-hover-color);
  --header-button-border: var(--body-link-color);
  --header-button-hover-border: var(--body-link-hover-color);

  /* Page Footers */
  --footer-bg: var(--gray2);
  --footer-color: var(--white);
  --footer-link-color: var(--gray5);
  --footer-link-hover-color: var(--body-link-invers-hover-color);

  --footer2-bg: var(--gray1);
  --footer2-color: var(--white);
  --footer2-link-color: var(--body-link-invers-color);
  --footer2-link-hover-color: var(--body-link-invers-hover-color);

  /* Fonts sizes depending on display size */
  --base-html-size-small: var(--base-html-size);
  --base-html-size-medium: calc(var(--base-html-size) * 1.125);
  --base-html-size-large: calc(var(--base-html-size) * 1.1875);

  /* Font sizes - https://type-scale.com/ Perfect Fourth, 1.333 */
  --font-size1: 2.369rem; /* h1 */
  --line-height1: var(--base-size-double);
  --font-size2: 1.777rem; /* h2 */
  --line-height2: calc(var(--base-size) * 1.5);
  --font-size3: 1.333rem; /* h3 */
  --line-height3: calc(var(--base-size) * 1.25);
  --font-size4: 1.125rem; /* h4 */
  --font-size5: var(--body-font-size); /* h5 */
  --font-size-small: calc(var(--body-font-size) * 0.8);
  --line-height-small: calc(var(--body-font-size) * 0.8);

  /* Headers h1-h5 */
  --header-font-family: var(--font-family-normal);
  --header-font-weight: var(--font-weight-semibold);
  --header-font-color: var(--font-color-light);
  --header-font-variation-settings: var(--font-variation-settings-semibold);

  /* Buttons primary */
  --button-color: var(--white);
  --button-hover-color: var(--white);
  --button-bg: var(--body-link-color);
  --button-hover-bg: var(--body-link-hover-color);
  --button-border: var(--body-link-color);
  --button-hover-border: var(--body-link-hover-color);

  /* Buttons secondary */
  --button2-color: var(--body-link-color);
  --button2-hover-color: var(--white);
  --button2-bg: var(--white);
  --button2-hover-bg: var(--body-link-hover-color);
  --button2-border: var(--body-link-color);
  --button2-hover-border: var(--body-link-hover-color);

  /* Tables: border color and cell borders.*/
  --table-border-color: var(--gray3);
  --table-hover-color: var(--font-color);
  --table-hover-bg: var(--gray5);
  --table-header-bg: var(--gray5);
  --table-header-color: var(--font-color);
  --stripedblock-bg: var(--gray5);

  /* Default Border */
  --border-color: var(--gray3);

  /* Image Border Option for Editors*/
  --image-border-color: var(--border-color);
  --image-border-width: var(--border-width);

  /* Layout Option for Editors*/
  --layout-100-bg: var(--gray5);

  /* Toggle Content Header Frame Option */
  --toggle-bg: var(--gray5);

  /* Paddíng for all boxes with background */
  --padding-boxes: var(--base-size) var(--gutter);

  --box-shadow: rgba(0, 0, 0, 0.2);


  /***** Content Element: Hero Text over image options *****/
  --hero-text-light: var(--white);
  --hero-text-dark: var(--black);
  --hero-text-bg-light: rgba(255, 255, 255, 0.9);
  --hero-text-bg-dark: rgba(0, 0, 0, 0.9);
  --hero-text-shadow-dark: 1px 1px 1px var(--black);
  --hero-text-shadow-light: 1px 1px 1px var(--white);

  /***** Navigation smartmenu *****/

  /* Navigation background over whole browser width */
  --menu-bg-100vw: var(--gray5, #eee);

  --menu-font-family: var(--font-family-normal);

  /*Mobile Items separators*/
  --collapsible-separators-color: rgba(0, 0, 0, 0.05);
  /*Toggle button (sub menu indicators)*/
  --collapsible-toggle-bg: var(--white-opacity);
  --collapsible-submenu-bg: rgba(var(--gray4), 0.1);

  /* 1.level menu */
  --menu-link-color: var(--body-link-color);
  --menu-link-hover-color: var(--font-color);
  --menu-bg: var(--gray5);
  --menu-hover-bg: var(--gray5);
  --menu-current-bg: var(--gray5);
  --menu-arrow-color: var(--menu-link-color);

  /* 2.level menu */
  --submenu-link-color: var(--body-link-color);
  --submenu-link-hover-color: var(--font-color);
  --submenu-current-color: var(--font-color);
  --submenu-bg: var(--gray5);
  --submenu-hover-bg: var(--white);
  --submenu-current-bg: var(--white);
  --submenu-arrow-color: var(--body-link-color);
  --desktop-submenu-border-color: var(--border-color);

  /* hamburger icon for mobile menu */
  --menu-icon-button: var(--body-link-color);

}


html {
  scroll-behavior: smooth;
}

div.anker {
  scroll-margin-top:calc(var(--header-height-fixed) - var(--base-html-size) * 2);
}

/******************* 04. Logo: Luft oben/unten, schrumpft beim Scrollen mit *******************/
.wrapper-logo {
  box-sizing: border-box;
  padding-top: var(--logo-spacing, 0.75rem);
  padding-bottom: var(--logo-spacing, 0.75rem);
}
/* Im fixierten Header ist die Zeile nur ~43px hoch – Abstand proportional reduzieren */
.wrapper-content.scroll-fixed .wrapper-logo {
  padding-top: calc(var(--logo-spacing, 0.75rem) * 0.35);
  padding-bottom: calc(var(--logo-spacing, 0.75rem) * 0.35);
}
.wrapper-logo img {
  display: block;
  height: var(--logo-height, 4.5rem);
  max-height: 100%;
  width: auto;
  max-width: 100%;
}



/* ===== Farbsystem und Grundlagen ===== */
.mo-lp{
  --g:#94C11F; --g-h:#86B01B; --g-d:#5E7B14; --g-x:#4A6110;
  --g-t:#F3F8E7; --g-t2:#E8F1D0; --g-l:#AECC53;
  --ink:#2E2E2D; --txt:#575656; --txt-2:#6E6D6C;
  --line:#E2E2E0; --line-2:#F1F1EF;
  --dark:#242A17; --dark-2:#333B22;
  --on-g:#1A2405;
  --ok:#3F6B12; --warn:#8A5A00;
  --r:12px; --r-lg:20px;

  /* Abstand nach oben zum Logo im Header und nach unten zum Footer.
     Greift auf --logo-height aus dem Template zurück; ohne diese
     Variable wird derselbe Rechenweg selbst angewandt. */
  --mo-gap:var(--logo-height, calc(var(--base-size, 16px) * 3));

  --sh:0 1px 2px rgba(46,46,45,.06);
  --sh-2:0 8px 24px -6px rgba(46,46,45,.14), 0 2px 6px -2px rgba(46,46,45,.06);
  --sh-3:0 22px 46px -14px rgba(46,46,45,.24);
  --max:1180px;

  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color:var(--ink);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* Die Landingpage besteht jetzt aus mehreren Inhaltselementen. Der Abstand
   nach oben zum Header bzw. nach unten zum Footer darf deshalb nur einmal
   gesetzt werden: oben am ersten, unten am letzten Element. */
.mo-lp--top{padding-top:var(--mo-gap)}
.mo-lp--bottom{padding-bottom:var(--mo-gap)}

/* TYPO3 setzt um jedes Inhaltselement einen Rahmen-Container mit eigenem
   Aussenabstand. Zwischen den Landingpage-Elementen darf dort nichts stehen,
   sonst reissen die farbigen Sektionen auseinander. */
:where(.frame, .frame-default, .frame-space-before-none, [class*="frame-type-"]):has(> .mo-lp){
  margin-block:0;
  padding-block:0;
}
.mo-lp *,.mo-lp *::before,.mo-lp *::after{box-sizing:border-box}
.mo-lp img{max-width:100%;display:block}
.mo-lp p{margin:0 0 1em}
.mo-lp a{color:var(--g-x);text-decoration-thickness:1px;text-underline-offset:2px}
.mo-lp h1,.mo-lp h2,.mo-lp h3,.mo-lp h4,.mo-lp h5,.mo-lp h6{
  font-family:inherit;line-height:1.18;letter-spacing:-.02em;margin:0 0 .5em;
  font-weight:700;color:var(--ink);
}
.mo-lp h2{font-size:clamp(1.6rem,3.2vw,2.35rem)}
.mo-lp h3{font-size:clamp(1.1rem,1.7vw,1.3rem)}
.mo-lp ul,.mo-lp ol{margin:0;padding:0;list-style:none}
.mo-lp li{margin:0}
.mo-lp button,.mo-lp input,.mo-lp select,.mo-lp textarea{font-family:inherit}
.mo-lp section{padding:0}
.mo-lp svg{display:inline-block;vertical-align:middle}
.mo-lp .mo-ico{
  width:21px;height:21px;flex-shrink:0;display:block;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.mo-lp .mo-opt-ico,.mo-lp .mo-svc-ico{color:var(--g-x)}
.mo-lp .mo-svc-ico .mo-ico{width:22px;height:22px}
.mo-lp .mo-bfsg-box li > .mo-ico{color:var(--g);margin-top:2px}
.mo-lp .mo-tick .mo-ico{width:13px;height:13px;stroke-width:3.2}
.mo-lp .mo-lm-list .mo-ico{width:17px;height:17px;stroke-width:2.6;margin-top:2px;color:#CBE382}
.mo-lp .mo-done-ico .mo-ico{width:28px;height:28px;stroke-width:2.6}
.mo-lp :focus-visible{outline:3px solid var(--g-d);outline-offset:2px;border-radius:6px}
.mo-lp .mo-wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.mo-lp .mo-sec{padding:82px 0}
.mo-lp .mo-alt{background:var(--g-t);border-block:1px solid var(--line)}
.mo-lp .mo-center{text-align:center}
.mo-lp .mo-center .mo-lead{margin-inline:auto}
.mo-lp .mo-lead{font-size:1.15rem;color:var(--txt);max-width:62ch}
.mo-lp .mo-eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:.78rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--g-x);margin-bottom:14px;
}
.mo-lp .mo-eyebrow::before{content:"";width:24px;height:3px;background:var(--g);border-radius:2px}
.mo-lp .mo-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== Buttons ===== */
.mo-lp .mo-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:inherit;font-weight:650;font-size:1rem;padding:14px 26px;border-radius:10px;
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;line-height:1.2;
  text-align:center;transition:.18s ease;
}
.mo-lp .mo-btn--primary{background:var(--g);color:var(--on-g);box-shadow:0 6px 16px -7px rgba(148,193,31,.9)}
.mo-lp .mo-btn--primary:hover{background:var(--g-h);transform:translateY(-1px);color:var(--on-g)}
.mo-lp .mo-btn--dark{background:var(--ink);color:#fff}
.mo-lp .mo-btn--dark:hover{background:#1A1A19;transform:translateY(-1px);color:#fff}
.mo-lp .mo-btn--ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.mo-lp .mo-btn--ghost:hover{border-color:var(--txt-2);background:var(--g-t)}
.mo-lp .mo-btn--light{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.mo-lp .mo-btn--light:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.mo-lp .mo-btn--sm{padding:10px 18px;font-size:.92rem}
.mo-lp .mo-btn--lg{padding:17px 32px;font-size:1.05rem}
.mo-lp .mo-btn--block{width:100%}

/* ===== Hero ===== */
.mo-lp .mo-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(880px 460px at 88% -10%, rgba(148,193,31,.20), transparent 62%),
    radial-gradient(680px 380px at 2% 106%, rgba(148,193,31,.13), transparent 60%),
    linear-gradient(180deg,#FDFEFB,#F5F9EE);
  border-bottom:1px solid var(--line);
}
.mo-lp .mo-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:start;padding:70px 0 66px}
.mo-lp .mo-hero h1{
  font-size:clamp(2.05rem,4.3vw,3.15rem);font-weight:800;letter-spacing:-.032em;
  line-height:1.14;margin:0 0 20px;color:var(--ink);
}
.mo-lp .mo-hl{background:linear-gradient(180deg,transparent 60%,rgba(148,193,31,.45) 60%);padding:0 3px}
.mo-lp .mo-hero-sub{font-size:1.17rem;color:var(--txt);margin-bottom:26px;max-width:56ch}
.mo-lp .mo-hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.mo-lp .mo-note{font-size:.9rem;color:var(--txt-2);display:flex;align-items:flex-start;gap:8px}
.mo-lp .mo-note svg{flex-shrink:0;margin-top:4px}
.mo-lp .mo-trust{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:36px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.mo-lp .mo-trust div{background:#fff;padding:15px 14px}
.mo-lp .mo-trust b{display:block;font-size:1.38rem;font-weight:800;letter-spacing:-.03em;color:var(--g-x)}
.mo-lp .mo-trust span{font-size:.82rem;color:var(--txt-2);line-height:1.35;display:block}

/* ===== Bedarfs-Check ===== */
.mo-lp .mo-check{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);overflow:hidden;position:sticky;top:24px;
}
.mo-lp .mo-check-head{padding:20px 26px;background:linear-gradient(135deg,var(--dark),var(--dark-2));color:#fff}
.mo-lp .mo-check-head h2{font-size:1.22rem;margin:0 0 3px;color:#fff;letter-spacing:-.02em}
.mo-lp .mo-check-head p{margin:0;font-size:.88rem;color:#C6D3AE}
.mo-lp .mo-progress{display:flex;gap:6px;margin-top:15px}
.mo-lp .mo-progress i{flex:1;height:4px;border-radius:3px;background:rgba(255,255,255,.22);transition:.3s}
.mo-lp .mo-progress i.is-on{background:var(--g)}
.mo-lp .mo-check-body{padding:25px}
.mo-lp .mo-step{display:none}
.mo-lp .mo-step.is-on{display:block;animation:mo-fade .28s ease}
@keyframes mo-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mo-lp .mo-q{font-weight:700;font-size:1.06rem;margin:0 0 4px;letter-spacing:-.015em;color:var(--ink)}
.mo-lp .mo-q-sub{font-size:.87rem;color:var(--txt-2);margin:0 0 16px}
.mo-lp .mo-opts{display:grid;gap:9px}
.mo-lp .mo-opt{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;font:inherit;
  padding:13px 15px;border:1.5px solid var(--line);border-radius:11px;background:#fff;
  cursor:pointer;transition:.15s;color:var(--ink);
}
.mo-lp .mo-opt:hover{border-color:var(--g);background:var(--g-t);transform:translateX(2px)}
.mo-lp .mo-opt-ico{
  width:38px;height:38px;border-radius:9px;display:grid;place-items:center;
  flex-shrink:0;font-size:1.15rem;background:var(--g-t2);
}
.mo-lp .mo-opt b{display:block;font-weight:650;font-size:.96rem;line-height:1.3}
.mo-lp .mo-opt small{display:block;color:var(--txt-2);font-size:.81rem;line-height:1.35}
.mo-lp .mo-back{
  background:none;border:none;color:var(--txt-2);font:inherit;font-size:.87rem;
  cursor:pointer;padding:8px 0;margin-top:13px;display:inline-flex;gap:6px;align-items:center;
}
.mo-lp .mo-back:hover{color:var(--ink)}
.mo-lp .mo-badge{
  display:inline-flex;align-items:center;gap:8px;font-size:.79rem;font-weight:700;
  padding:6px 12px;border-radius:99px;margin-bottom:12px;text-transform:uppercase;letter-spacing:.05em;
}
.mo-lp .mo-badge--mo{background:var(--g-t2);color:var(--g-x)}
.mo-lp .mo-badge--ex{background:#EDEDEC;color:var(--ink)}
.mo-lp .mo-badge--ml{background:#F0F6E0;color:var(--g-x)}
.mo-lp .mo-badge--all{background:var(--line-2);color:var(--txt)}
.mo-lp .mo-summary{
  background:var(--g-t);border:1px solid var(--g-t2);border-radius:11px;
  padding:13px 15px;margin-bottom:16px;font-size:.88rem;color:var(--txt);
}
.mo-lp .mo-summary b{color:var(--ink)}
.mo-lp .mo-field{margin-bottom:13px}
.mo-lp .mo-field label{display:block;font-size:.85rem;font-weight:650;margin-bottom:5px;color:var(--txt)}
.mo-lp .mo-field input,
.mo-lp .mo-field textarea,
.mo-lp .mo-field select{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:9px;
  font:inherit;font-size:.95rem;background:#fff;color:var(--ink);
}
.mo-lp .mo-field input:focus,
.mo-lp .mo-field textarea:focus,
.mo-lp .mo-field select:focus{border-color:var(--g-d);outline:none;box-shadow:0 0 0 3px rgba(148,193,31,.28)}
.mo-lp .mo-field textarea{min-height:86px;resize:vertical}
.mo-lp .mo-consent{display:flex;gap:9px;align-items:flex-start;font-size:.8rem;color:var(--txt-2);margin:14px 0}
.mo-lp .mo-consent input{margin-top:3px;flex-shrink:0;width:16px;height:16px;accent-color:var(--g-d)}
.mo-lp .mo-done{text-align:center;padding:14px 0}
.mo-lp .mo-done-ico{
  width:58px;height:58px;border-radius:50%;background:var(--g-t2);color:var(--g-x);
  display:grid;place-items:center;margin:0 auto 16px;font-size:1.7rem;font-weight:700;
}

/* ===== Problem / Lösung ===== */
.mo-lp .mo-pg{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:42px}
.mo-lp .mo-pg-card{border-radius:var(--r-lg);padding:30px;border:1px solid var(--line)}
.mo-lp .mo-pg-card--bad{background:#fff}
.mo-lp .mo-pg-card--good{background:linear-gradient(160deg,var(--dark),var(--dark-2));color:#fff;border-color:transparent;box-shadow:var(--sh-3)}
.mo-lp .mo-pg-card h3{margin-bottom:18px;display:flex;align-items:center;gap:10px;font-size:1.16rem}
.mo-lp .mo-pg-card--good h3{color:#fff}
.mo-lp .mo-pg-list{display:grid;gap:13px}
.mo-lp .mo-pg-list li{display:flex;gap:11px;align-items:flex-start;font-size:.97rem;line-height:1.5}
.mo-lp .mo-pg-card--bad li{color:var(--txt)}
.mo-lp .mo-pg-card--good li{color:#D8E3C2}
.mo-lp .mo-pg-card--good li b{color:#fff}
.mo-lp .mo-tick{flex-shrink:0;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:800;margin-top:2px}
.mo-lp .mo-tick--x{background:#F4E4E2;color:#8C2F26}
.mo-lp .mo-tick--v{background:rgba(148,193,31,.28);color:#C3E066}

/* ===== Marken ===== */
.mo-lp .mo-brands{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.mo-lp .mo-brand{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh);transition:.22s;
}
.mo-lp .mo-brand:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.mo-lp .mo-brand-top{padding:25px 25px 21px;border-top:4px solid}
.mo-lp .mo-brand--mo .mo-brand-top{border-color:var(--g);background:linear-gradient(180deg,var(--g-t2),#fff)}
.mo-lp .mo-brand--ex .mo-brand-top{border-color:var(--txt);background:linear-gradient(180deg,#F0F0EF,#fff)}
.mo-lp .mo-brand--ml .mo-brand-top{border-color:var(--g-d);background:linear-gradient(180deg,#EDF4DC,#fff)}
.mo-lp .mo-brand-name{font-size:1.32rem;font-weight:800;letter-spacing:-.03em;margin:12px 0 3px}
.mo-lp .mo-brand--mo .mo-brand-name,
.mo-lp .mo-brand--ml .mo-brand-name{color:var(--g-x)}
.mo-lp .mo-brand--ex .mo-brand-name{color:var(--ink)}
.mo-lp .mo-brand-dom{font-size:.8rem;font-weight:600;color:var(--txt-2);letter-spacing:.02em;margin-bottom:11px;display:block}
.mo-lp .mo-brand-claim{font-size:.96rem;color:var(--txt);margin:0}
.mo-lp .mo-brand-body{padding:21px 25px 25px;display:flex;flex-direction:column;flex:1}
.mo-lp .mo-brand-body ul{margin:0 0 21px;display:grid;gap:9px;flex:1}
.mo-lp .mo-brand-body li{display:flex;gap:9px;font-size:.92rem;color:var(--txt);line-height:1.45}
.mo-lp .mo-brand-body li::before{content:"";width:6px;height:6px;border-radius:50%;margin-top:8px;flex-shrink:0;background:var(--g)}
.mo-lp .mo-brand--ex .mo-brand-body li::before{background:var(--txt-2)}
.mo-lp .mo-brand-cta{display:flex;flex-direction:column;gap:9px}
.mo-lp .mo-chip{display:inline-block;font-size:.72rem;font-weight:700;padding:4px 9px;border-radius:6px;letter-spacing:.03em;text-transform:uppercase}
.mo-lp .mo-chip--mo{background:var(--g);color:var(--on-g)}
.mo-lp .mo-chip--ex{background:var(--txt);color:#fff}
.mo-lp .mo-chip--ml{background:var(--g-d);color:#fff}

/* ===== Leistungen ===== */
.mo-lp .mo-svc{display:grid;grid-template-columns:repeat(3,1fr);gap:19px;margin-top:40px}
.mo-lp .mo-svc-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:23px;transition:.2s}
.mo-lp .mo-svc-card:hover{border-color:var(--g);box-shadow:var(--sh-2)}
.mo-lp .mo-svc-ico{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-size:1.2rem;margin-bottom:14px;background:var(--g-t2)}
.mo-lp .mo-svc-card h3{font-size:1.04rem;margin-bottom:7px}
.mo-lp .mo-svc-card p{font-size:.92rem;color:var(--txt);margin:0 0 12px;line-height:1.5}
.mo-lp .mo-svc-kw{font-size:.78rem;color:var(--txt-2);border-top:1px dashed var(--line);padding-top:10px;margin:0}

/* ===== Barrierefreiheit ===== */
.mo-lp .mo-bfsg{background:linear-gradient(150deg,#1C2113,#2E3820);color:#fff;border:0}
.mo-lp .mo-bfsg h2,.mo-lp .mo-bfsg h3{color:#fff}
.mo-lp .mo-bfsg .mo-lead{color:#CFDDB4}
.mo-lp .mo-bfsg-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}
.mo-lp .mo-bfsg-box{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-lg);padding:27px}
.mo-lp .mo-bfsg-box ul{display:grid;gap:15px}
.mo-lp .mo-bfsg-box li{display:flex;gap:12px;font-size:.94rem;color:#DCE7C8;line-height:1.5}
.mo-lp .mo-bfsg-box li b{color:#fff;display:block;font-size:.99rem}
.mo-lp .mo-warn{
  display:inline-flex;gap:8px;align-items:center;background:rgba(148,193,31,.18);
  color:#CBE382;border:1px solid rgba(148,193,31,.42);padding:7px 14px;border-radius:99px;
  font-size:.83rem;font-weight:650;margin-bottom:18px;
}

/* ===== Ablauf ===== */
.mo-lp .mo-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px;counter-reset:mo-s}
.mo-lp .mo-stp{position:relative;padding-top:52px}
.mo-lp .mo-stp::before{
  counter-increment:mo-s;content:counter(mo-s);position:absolute;top:0;left:0;
  width:40px;height:40px;border-radius:11px;background:var(--g);color:var(--on-g);
  display:grid;place-items:center;font-weight:800;font-size:1.02rem;
}
.mo-lp .mo-stp::after{content:"";position:absolute;top:19px;left:52px;right:-11px;height:2px;background:var(--g-t2)}
.mo-lp .mo-stp:last-child::after{display:none}
.mo-lp .mo-stp h3{font-size:1.03rem;margin-bottom:6px}
.mo-lp .mo-stp p{font-size:.92rem;color:var(--txt);margin:0}

/* ===== Kundenstimmen ===== */
.mo-lp .mo-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:21px;margin-top:40px}
.mo-lp .mo-quote{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:25px;display:flex;flex-direction:column}
.mo-lp .mo-quote p{font-size:.97rem;color:var(--ink);line-height:1.6;flex:1;margin-bottom:18px}
.mo-lp .mo-quote p::before{content:"„"}
.mo-lp .mo-quote p::after{content:"“"}
.mo-lp .mo-qmeta{display:flex;gap:12px;align-items:center;border-top:1px solid var(--line-2);padding-top:15px}
.mo-lp .mo-qav{width:40px;height:40px;border-radius:50%;background:var(--g-t2);display:grid;place-items:center;font-weight:700;color:var(--g-x);font-size:.86rem;flex-shrink:0}
.mo-lp .mo-qmeta b{display:block;font-size:.9rem}
.mo-lp .mo-qmeta span{display:block;font-size:.8rem;color:var(--txt-2)}
.mo-lp .mo-stars{color:var(--g-d);letter-spacing:2px;font-size:.9rem;margin-bottom:12px}

/* ===== Website-Check ===== */
.mo-lp .mo-lm{
  background:linear-gradient(140deg,#33440D,#5E7B14 58%,#4A6110);
  border-radius:var(--r-lg);padding:44px;color:#fff;display:grid;
  grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;box-shadow:var(--sh-3);
}
.mo-lp .mo-lm h2{color:#fff;margin-bottom:14px}
.mo-lp .mo-lm p{color:#E2ECCD}
.mo-lp .mo-lm .mo-eyebrow{color:#CBE382}
.mo-lp .mo-lm .mo-eyebrow::before{background:#CBE382}
.mo-lp .mo-lm-list{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:20px 0 0}
.mo-lp .mo-lm-list li{display:flex;gap:9px;font-size:.9rem;color:#EDF3E1;align-items:flex-start;line-height:1.4}
.mo-lp .mo-lm-form{background:#fff;border-radius:var(--r);padding:25px;color:var(--ink)}
.mo-lp .mo-lm-form h3{font-size:1.07rem;margin-bottom:4px}
.mo-lp .mo-lm-form > p{font-size:.86rem;color:var(--txt-2);margin-bottom:16px}

/* ===== FAQ ===== */
.mo-lp .mo-faq{max-width:820px;margin:40px auto 0}
.mo-lp .mo-faq details{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:11px;overflow:hidden}
.mo-lp .mo-faq details[open]{border-color:var(--g);box-shadow:var(--sh-2)}
.mo-lp .mo-faq summary{
  padding:18px 22px;font-weight:650;cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;gap:18px;align-items:center;font-size:1.01rem;
}
.mo-lp .mo-faq summary::-webkit-details-marker{display:none}
.mo-lp .mo-faq summary::after{content:"+";font-size:1.5rem;font-weight:400;color:var(--txt-2);flex-shrink:0;line-height:1}
.mo-lp .mo-faq details[open] summary::after{content:"–";color:var(--g-x)}
.mo-lp .mo-faq .mo-ans{padding:0 22px 20px;color:var(--txt);font-size:.96rem}
.mo-lp .mo-faq .mo-ans p:last-child{margin-bottom:0}

/* ===== Kontakt ===== */
.mo-lp .mo-kontakt{display:grid;grid-template-columns:.95fr 1.05fr;gap:50px;align-items:start}
.mo-lp .mo-kbox{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;box-shadow:var(--sh-2)}
.mo-lp .mo-kdata{display:grid;gap:17px;margin:26px 0 0}
.mo-lp .mo-kdata li{display:flex;gap:14px;align-items:flex-start}
.mo-lp .mo-ki{width:40px;height:40px;border-radius:10px;background:var(--g-t2);color:var(--g-x);display:grid;place-items:center;flex-shrink:0}
.mo-lp .mo-kdata b{display:block;font-size:.82rem;color:var(--txt-2);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.mo-lp .mo-kdata a,.mo-lp .mo-kdata span{font-size:1.01rem;color:var(--ink);text-decoration:none;font-weight:600}
.mo-lp .mo-kdata a:hover{color:var(--g-x)}
.mo-lp .mo-two{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.mo-lp .mo-termin{margin-top:28px;padding:19px;background:var(--g-t);border-radius:var(--r);border:1px solid var(--g-t2)}
.mo-lp .mo-termin p{margin:0;font-size:.95rem;color:var(--txt)}

/* ===== Schnellkontakt mobil ===== */
.mo-lp .mo-mbar{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:55;background:#fff;
  border-top:1px solid var(--line);padding:9px 12px;gap:9px;
  box-shadow:0 -4px 16px rgba(46,46,45,.10);
}
.mo-lp .mo-mbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;
  font-size:.72rem;font-weight:650;color:var(--txt);padding:6px 4px;border-radius:9px;
}
.mo-lp .mo-mbar a.is-primary{background:var(--g);color:var(--on-g)}

/* ===== Responsive ===== */
@media(max-width:1040px){
  .mo-lp .mo-hero-grid{grid-template-columns:1fr;gap:42px;padding:52px 0}
  .mo-lp .mo-check{position:static}
  .mo-lp .mo-brands,.mo-lp .mo-svc,.mo-lp .mo-quotes{grid-template-columns:1fr 1fr}
  .mo-lp .mo-steps{grid-template-columns:1fr 1fr;gap:30px 22px}
  .mo-lp .mo-stp:nth-child(2)::after{display:none}
  .mo-lp .mo-bfsg-grid,.mo-lp .mo-lm,.mo-lp .mo-kontakt{grid-template-columns:1fr;gap:32px}
}
@media(max-width:860px){
  .mo-lp .mo-mbar{display:flex}
  .mo-lp{padding-bottom:calc(var(--mo-gap) + 68px)}
}
@media(max-width:720px){
  .mo-lp{font-size:16px}
  .mo-lp .mo-sec{padding:56px 0}
  .mo-lp .mo-wrap{padding:0 18px}
  .mo-lp .mo-pg,.mo-lp .mo-brands,.mo-lp .mo-svc,.mo-lp .mo-quotes,
  .mo-lp .mo-steps,.mo-lp .mo-two,.mo-lp .mo-lm-list{grid-template-columns:1fr}
  .mo-lp .mo-trust{grid-template-columns:1fr 1fr}
  .mo-lp .mo-stp::after{display:none}
  .mo-lp .mo-lm,.mo-lp .mo-kbox,.mo-lp .mo-pg-card{padding:24px 20px}
  .mo-lp .mo-hero-btns .mo-btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .mo-lp *{animation:none!important;transition:none!important}
}


/* =====================================================================
   FORMULARE AUS EXT:form
   Die drei Formulare sind eigene Inhaltselemente. Das JavaScript
   verschiebt sie in die passenden Slots innerhalb der Landingpage.
   Ab dann liegen sie innerhalb von .mo-lp und werden hier so gestylt,
   dass sie exakt wie die Entwuerfe aussehen.
   ===================================================================== */

/* Solange das Formular noch an seiner urspruenglichen Stelle steht
   (JavaScript aus, oder die Millisekunde vor dem Verschieben), bleibt es
   sichtbar und funktionsfaehig. Es rutscht dann nur an eine andere Stelle. */
.mo-form-slot{margin:0}
.mo-form-slot > .frame,
.mo-form-slot > div[class*="frame-type-form"]{margin:0;padding:0}
.mo-lp .mo-noscript{font-size:.85rem;color:var(--txt-2);margin:0}

/* --- Grundgeruest --------------------------------------------------- */
.mo-lp .mo-form-slot form{margin:0}
.mo-lp .mo-form-slot fieldset{border:0;margin:0;padding:0;min-width:0}
.mo-lp .mo-form-slot legend{display:none}

/* TYPO3 gibt die Bezeichnung der Formularseite als h2 aus ("Anfrage").
   Die Ueberschrift steht bei uns schon im HTML-Element darueber. */
.mo-lp .mo-form-slot form > h2{display:none}

/* Feldabstaende: .form-group ist die aeltere, .form-element die aktuelle
   Klasse der Formular-Templates. Beide auf denselben Wert wie im Entwurf. */
.mo-lp .mo-form-slot .form-group,
.mo-lp .mo-form-slot .form-element,
.mo-lp .mo-form-slot .input{margin:0 0 13px}

/* Der Stern hinter Pflichtfeld-Beschriftungen */
.mo-lp .mo-form-slot label .required{color:var(--g-d);font-weight:700}

/* --- Beschriftungen -------------------------------------------------- */
.mo-lp .mo-form-slot label,
.mo-lp .mo-form-slot .control-label,
.mo-lp .mo-form-slot .form-label{
  display:block;font-size:.85rem;font-weight:650;margin-bottom:5px;color:var(--txt);
}

/* --- Eingabefelder --------------------------------------------------- */
.mo-lp .mo-form-slot input[type=text],
.mo-lp .mo-form-slot input[type=email],
.mo-lp .mo-form-slot input[type=tel],
.mo-lp .mo-form-slot input[type=url],
.mo-lp .mo-form-slot input[type=number],
.mo-lp .mo-form-slot input[type=date],
.mo-lp .mo-form-slot select,
.mo-lp .mo-form-slot textarea,
.mo-lp .mo-form-slot .form-control{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:9px;
  font:inherit;font-size:.95rem;background:#fff;color:var(--ink);
  -webkit-appearance:none;appearance:none;
}
/* Doppelter Selektor mit .form-control: TYPO3 setzt diese Klasse an das
   select, und die Regel oben wuerde das Hintergrundbild sonst ueberschreiben. */
.mo-lp .mo-form-slot select,
.mo-lp .mo-form-slot select.form-control{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23575656' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px;
  padding-right:40px;
}
.mo-lp .mo-form-slot textarea{min-height:86px;resize:vertical}
.mo-lp .mo-form-slot input:focus,
.mo-lp .mo-form-slot select:focus,
.mo-lp .mo-form-slot textarea:focus{
  border-color:var(--g-d);outline:none;box-shadow:0 0 0 3px rgba(148,193,31,.28);
}

/* --- Checkbox (Datenschutz) ------------------------------------------ */
/* Zwei Markup-Varianten sind moeglich:
   aeltere Templates legen das Kaestchen INNERHALB des label ab,
   TYPO3 13/14 legt es als Geschwister daneben und klammert beides in
   .form-check-wrapping-label. Deshalb wird die Zeile jeweils dort zum
   Flex-Container gemacht, wo Kaestchen und Text tatsaechlich liegen. */
.mo-lp .mo-form-slot .checkbox,
.mo-lp .mo-form-slot .form-check,
.mo-lp .mo-form-slot .form-element-check{margin:16px 0 18px}

/* Variante A – Kaestchen im label */
.mo-lp .mo-form-slot .checkbox > label,
.mo-lp .mo-form-slot .form-check > label{
  display:flex;gap:9px;align-items:flex-start;
}

/* Variante B – TYPO3 13/14 */
.mo-lp .mo-form-slot .form-check-wrapping-label{
  display:flex;gap:9px;align-items:flex-start;
}

/* Beschriftung selbst bleibt in beiden Faellen normaler Fliesstext,
   sonst reisst der Pflichtfeld-Stern in eine eigene Spalte. */
.mo-lp .mo-form-slot .checkbox label,
.mo-lp .mo-form-slot .form-check-label{
  display:block;font-size:.8rem;font-weight:400;color:var(--txt-2);
  margin:0;line-height:1.5;
}
.mo-lp .mo-form-slot input[type=checkbox],
.mo-lp .mo-form-slot .form-check-input{
  margin:3px 0 0;flex-shrink:0;width:16px;height:16px;accent-color:var(--g-d);
  -webkit-appearance:auto;appearance:auto;
}

/* --- Absende-Button --------------------------------------------------- */
.mo-lp .mo-form-slot .actions{margin:0}
.mo-lp .mo-form-slot .form-navigation{margin:0}
.mo-lp .mo-form-slot .form-navigation ul{display:block;margin:0;padding:0}
.mo-lp .mo-form-slot .btn-toolbar,
.mo-lp .mo-form-slot .btn-group{display:block;width:100%}
.mo-lp .mo-form-slot button[type=submit],
.mo-lp .mo-form-slot input[type=submit],
.mo-lp .mo-form-slot .btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;
  font:inherit;font-weight:650;font-size:1.05rem;padding:17px 32px;border-radius:10px;
  border:1.5px solid transparent;cursor:pointer;line-height:1.2;text-align:center;
  transition:.18s ease;background:var(--g);color:var(--on-g);
  box-shadow:0 6px 16px -7px rgba(148,193,31,.9);
}
.mo-lp .mo-form-slot button[type=submit]:hover,
.mo-lp .mo-form-slot input[type=submit]:hover,
.mo-lp .mo-form-slot .btn-primary:hover{background:var(--g-h);transform:translateY(-1px)}

/* --- Fehler und Hinweise ---------------------------------------------- */
.mo-lp .mo-form-slot .has-error input,
.mo-lp .mo-form-slot .has-error select,
.mo-lp .mo-form-slot .has-error textarea,
.mo-lp .mo-form-slot input[aria-invalid=true],
.mo-lp .mo-form-slot .is-invalid{border-color:#B4231C;background:#FFF6F5}
.mo-lp .mo-form-slot .help-block,
.mo-lp .mo-form-slot .invalid-feedback,
.mo-lp .mo-form-slot .error{
  display:block;font-size:.82rem;color:#B4231C;font-weight:600;margin-top:5px;
}
.mo-lp .mo-form-slot .alert,
.mo-lp .mo-form-slot .typo3-messages{
  border:1.5px solid #B4231C;background:#FFF6F5;color:#7A1712;
  border-radius:9px;padding:13px 15px;font-size:.88rem;margin:0 0 15px;list-style:none;
}

/* --- Bestaetigung nach dem Absenden ----------------------------------- */
.mo-lp .mo-form-slot .mo-confirm,
.mo-lp .mo-form-slot > div > p:only-child{
  font-size:.95rem;color:var(--ok);font-weight:650;margin:0;
}
.mo-lp .mo-form-slot.is-confirmed{
  border:1.5px solid var(--g);background:var(--g-t);
  border-radius:var(--r);padding:20px 22px;
}

/* --- Honeypot sicher verstecken ---------------------------------------- */
.mo-lp .mo-form-slot .hidden,
.mo-lp .mo-form-slot [style*="display:none"]{display:none !important}

/* Nach dem Absenden zeigt EXT:form nur noch den Bestaetigungstext.
   Ergebnis-Text, Zusammenfassung und Zurueck-Schalter des Checks werden
   dann ausgeblendet, damit keine leeren Kaesten stehen bleiben. */
.mo-lp .mo-check--done #mo-result-badge,
.mo-lp .mo-check--done #mo-result-title,
.mo-lp .mo-check--done #mo-result-text,
.mo-lp .mo-check--done #mo-summary,
.mo-lp .mo-check--done .mo-form-hint,
.mo-lp .mo-check--done .mo-back{display:none}

/* Kleiner Hinweis unter dem Bedarfs-Check-Formular */
.mo-lp .mo-form-hint{font-size:.78rem;color:var(--txt-2);text-align:center;margin:11px 0 0}