.hp2 .hero{isolation:isolate;overflow:hidden;min-height:min(80vh,760px);
 padding-top:calc(var(--kopf,150px) + clamp(26px,3.4vw,52px))}
.hp2 .hero:before{content:"";position:absolute;inset:0;z-index:0;background:#0e0e0f url('https://cambio.academy/wp-content/uploads/cambio-hero/cambio-hero-poster.jpg') center/cover no-repeat}
.hp2 .hero .heroVid{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hp2 .hero .heroVid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.hp2 .hero .heroVid video.an{opacity:1}
.hp2 .hero .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(90deg,rgba(8,8,9,.9) 0%,rgba(8,8,9,.8) 40%,rgba(8,8,9,.46) 74%,rgba(8,8,9,.56) 100%),
 linear-gradient(180deg,rgba(8,8,9,.58) 0%,rgba(8,8,9,.2) 36%,rgba(8,8,9,.7) 100%)}
.hp2 .hero > .w{position:relative;z-index:2}
.hp2 .hero .kicker{color:#fff;opacity:.84}
.hp2 .hero h1{color:#fff;text-shadow:0 2px 34px rgba(0,0,0,.45)}
.hp2 .hero .lead{color:#eae7e3;text-shadow:0 1px 18px rgba(0,0,0,.5)}
.hp2 .hero a.btn.g{border-color:#fff;color:#fff}
.hp2 .hero a.btn.g:hover{background:#fff;color:#0e0e0f}
.hp2 .hero .deckNav button{background:rgba(255,255,255,.45)}
.hp2 .hero .deckNav button[aria-current="true"]{background:var(--rot)}
@media (max-width:700px){
 .hp2 .hero .scrim{background:linear-gradient(180deg,rgba(8,8,9,.78) 0%,rgba(8,8,9,.54) 38%,rgba(8,8,9,.76) 100%)}
}
@media (prefers-reduced-motion:reduce){.hp2 .hero .heroVid{display:none}}

/* Ausbildungskarten: einspaltig wird das quadratische Motiv sonst sehr hoch */
@media (max-width:1024px){
 .hp2 .karte .kbild{aspect-ratio:16/10}
}
/* Hero-Deck bleibt auf dem Handy kompakt */
@media (max-width:700px){
 .hp2 .deckCard .bild{aspect-ratio:3/2;background-position:center 18%}
}

/* Handgeschriebene Schriftzuege (Bilddateien, keine Schriftart) */
.hp2 .sfs.faq{width:min(112px,24vw);margin:0 auto 10px}

/* ------------------------------------------------------------------
   Infocall-Formular (WPForms 13902, Modern-Markup)
   Farben und Maße laufen über die CSS-Variablen, die WPForms selbst liest.
   ------------------------------------------------------------------ */
.elementor-element-hp2f1{max-width:792px;margin:0 auto;padding:0 16px;
 position:relative;z-index:1} /* sonst liegt die feste WebGL-Szene ueber dem Formular */
/* Hoehere Spezifitaet als der Inline-Block, den WPForms spaeter im Dokument ausgibt. */
.wpforms-container#wpforms-13902{
 --wpforms-field-border-radius:12px;
 --wpforms-field-border-style:solid;
 --wpforms-field-border-size:1px;
 --wpforms-field-background-color:#fdfcfa;
 --wpforms-field-border-color:#ddd8ce;
 --wpforms-field-text-color:#0e0e0f;
 --wpforms-label-color:#0e0e0f;
 --wpforms-label-sublabel-color:#6b6b6b;
 --wpforms-label-error-color:#E11E13;
 --wpforms-button-border-radius:999px;
 --wpforms-button-border-style:none;
 --wpforms-button-border-size:0px;
 --wpforms-button-background-color:#E11E13;
 --wpforms-button-border-color:#E11E13;
 --wpforms-button-text-color:#ffffff;
 --wpforms-field-size-input-height:54px;
 --wpforms-field-size-input-spacing:20px;
 --wpforms-field-size-padding-h:17px;
 --wpforms-field-size-font-size:16px;
 --wpforms-field-size-line-height:20px;
 --wpforms-label-size-font-size:15px;
 --wpforms-label-size-line-height:20px;
 --wpforms-label-size-sublabel-font-size:13px;
 --wpforms-button-size-font-size:17px;
 --wpforms-button-size-height:58px;
 --wpforms-button-size-padding-h:38px;
 --wpforms-button-size-margin-top:26px;
 font-family:Roboto,system-ui,sans-serif;
 background:#fff;
 border:1px solid #e6e2da;
 border-radius:22px;
 padding:clamp(24px,4vw,40px);
 box-shadow:0 18px 44px rgba(0,0,0,.055);
}
#wpforms-13902 .wpforms-field{padding:0 0 4px}
#wpforms-13902 .wpforms-field-label,
#wpforms-13902 legend.wpforms-field-label{font-weight:600;margin-bottom:8px}
#wpforms-13902 .wpforms-required-label{color:#E11E13}
#wpforms-13902 input[type="text"],
#wpforms-13902 input[type="email"],
#wpforms-13902 input[type="tel"],
#wpforms-13902 select,
#wpforms-13902 textarea{
 border-radius:12px;
 background:#fdfcfa;
 border:1px solid #ddd8ce;
 transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
}
#wpforms-13902 input:focus,
#wpforms-13902 select:focus,
#wpforms-13902 textarea:focus{
 border-color:#E11E13;
 background:#fff;
 box-shadow:0 0 0 3px rgba(225,30,19,.13);
 outline:none;
}
#wpforms-13902 .wpforms-field-sublabel{color:#6b6b6b}
#wpforms-13902 .wpforms-submit-container{text-align:center}
#wpforms-13902 button[type="submit"]{
 background:#E11E13;
 color:#fff;
 border:0;
 border-radius:999px;
 font-family:Roboto,system-ui,sans-serif;
 font-weight:700;
 font-size:17px;
 letter-spacing:.01em;
 padding:0 38px;
 min-height:58px;
 box-shadow:0 10px 24px rgba(225,30,19,.22);
 transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
#wpforms-13902 button[type="submit"]:hover{background:#b81710;box-shadow:0 12px 30px rgba(225,30,19,.3)}
#wpforms-13902 button[type="submit"]:active{transform:translateY(1px)}
#wpforms-13902 .wpforms-error{color:#E11E13;font-size:13px}
#wpforms-13902 input.wpforms-error,
#wpforms-13902 select.wpforms-error{border-color:#E11E13}
@media (max-width:700px){
 #wpforms-13902{padding:22px 18px 26px;border-radius:18px}
 #wpforms-13902 button[type="submit"]{width:100%}
}

/* Erste Zeile: rechts daneben sitzt nur ein 1-Pixel-Honeypot des Formulars.
   Die Namensspalte bekommt daher die volle Breite. */
.wpforms-container#wpforms-13902 #wpforms-13902-field_2-container .wpforms-layout-column:first-child{width:100%}
.wpforms-container#wpforms-13902 #wpforms-13902-field_2-container .wpforms-layout-column:last-child{width:0}

/* ------------------------------------------------------------------
   Akzentschrift im Hero.
   Water Brush (SIL Open Font License 1.1), lokal
   ausgeliefert - keine Verbindung zu Google beim Seitenaufruf.
   Sobald die Originalschrift der Marke vorliegt, wird nur diese
   @font-face-Regel getauscht, sonst nichts.
   ------------------------------------------------------------------ */
@font-face{
 font-family:'Cambio Script';
 src:url('https://cambio.academy/wp-content/uploads/cambio-hero/water-brush-latin.woff2') format('woff2');
 font-weight:400;font-style:normal;font-display:swap;
}
.hp2 .hero h1 .hs-wort{
 font-family:'Cambio Script','Playfair Display',Georgia,serif;
 font-weight:400;
 font-size:1.34em;
 line-height:1;
 letter-spacing:0;
 padding-right:.06em;
 display:inline-block;
}

/* ------------------------------------------------------------------
   Partner-Laufband, Bewertungssiegel, Daueraktion
   ------------------------------------------------------------------ */
.hp2 .partnerKopf{text-align:center;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
 color:#6b6b6b;font-weight:700;margin:36px 0 16px}
/* Dunkler Streifen: die Partnerlogos sind fuer dunklen Grund gemacht.
   Backstage und ghd haben schwarze Flaechen, Kryolan eine dunkelblaue -
   auf Weiss werden daraus Kaesten, auf Schwarz verschwinden sie. */
.hp2 .laufband{position:relative;overflow:hidden;background:#0e0e0f;border-radius:22px;
 padding:clamp(18px,2.1vw,26px) 0}
.hp2 .laufband:before,.hp2 .laufband:after{content:"";position:absolute;top:0;bottom:0;
 width:clamp(36px,7%,110px);z-index:2;pointer-events:none}
.hp2 .laufband:before{left:0;background:linear-gradient(90deg,#0e0e0f,rgba(14,14,15,0))}
.hp2 .laufband:after{right:0;background:linear-gradient(270deg,#0e0e0f,rgba(14,14,15,0))}
.hp2 .laufbandSpur{display:flex;width:max-content;animation:hp2Lauf 46s linear infinite}
.hp2 .laufband:hover .laufbandSpur,
.hp2 .laufband:focus-within .laufbandSpur{animation-play-state:paused}
.hp2 .satz{display:flex;align-items:center;gap:clamp(40px,5.5vw,84px);padding-right:clamp(40px,5.5vw,84px)}
.hp2 .satz img{height:clamp(68px,9.5vw,126px);width:auto;flex:0 0 auto;display:block;object-fit:contain}
@keyframes hp2Lauf{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){
 .hp2 .laufband:before,.hp2 .laufband:after{display:none}
 .hp2 .laufbandSpur{animation:none;width:auto}
 .hp2 .satz:last-child{display:none}
 .hp2 .satz{flex-wrap:wrap;justify-content:center;padding-right:0;gap:32px}
}

/* Bewertungssiegel: fest in der rechten unteren Ecke, wie auf den bestehenden Seiten
   (dort position:fixed, right:0, bottom:0, z-index 200). */
.hp2 .pe,body > .pe{position:fixed;left:0;right:auto;bottom:0;z-index:200;margin:0;line-height:0}
.hp2 .pe img,body > .pe img{display:block;width:120px;height:auto}
@media (max-width:700px){
 /* ueber der Sticky-Leiste, die es auf den bestehenden Seiten nicht gibt */
 .hp2 .pe,body > .pe{bottom:calc(62px + env(safe-area-inset-bottom,0px))}
}
@media print{.hp2 .pe,body > .pe{display:none}}

.hp2 .zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,54px);align-items:center;margin-top:24px}
.hp2 .zwei > div > .ctas{margin-top:22px}
.hp2 .zwei .bild img{width:100%;height:auto;display:block;border-radius:18px}

.hp2 .aktion{display:grid;grid-template-columns:minmax(0,440px) 1fr;
 gap:clamp(26px,4vw,54px);align-items:center;margin-top:24px}
.hp2 .aktion .bild img{width:100%;height:auto;display:block}
/* Kein zusaetzlicher Rahmen: find_your_fire_star2.jpg bringt den Goldrahmen mit. */
.hp2 .code{display:inline-block;background:#fff;border:2px dashed var(--rot);color:var(--rot);
 border-radius:12px;padding:10px 18px;font-weight:700;font-size:1.02rem;margin:2px 0 14px}
@media (max-width:860px){
 .hp2 .zwei,.hp2 .aktion{grid-template-columns:1fr}
 .hp2 .aktion .bild{max-width:440px;margin:0 auto}
 .hp2 .zwei .bild{order:-1}
}

/* Tonknopf im Hero. Autostart laeuft stumm, den Ton schaltet man selbst dazu. */
/* Aussehen des Tonknopfs - unabhaengig davon, wo er haengt. Auf dem
   Desktop sitzt er in der Kopfzeile, darunter im Hero. */
.tonKnopf{
 display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 13px;border:1px solid rgba(255,255,255,.55);
 border-radius:999px;background:rgba(14,14,15,.42);color:#fff;font:700 .84rem/1 Roboto,system-ui,sans-serif;
 letter-spacing:.02em;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
 transition:background-color .2s ease,border-color .2s ease}
.tonKnopf:hover,.tonKnopf:focus-visible{background:rgba(225,30,19,.9);border-color:transparent}
.hp2 .hero .tonKnopf{position:absolute;z-index:3;right:clamp(14px,3vw,34px);top:calc(var(--kopf,150px) + 14px)}
.cbKopfRechts .tonKnopf{position:relative;padding:8px 14px 8px 11px;font-size:.78rem}
/* Solange der Ton stumm ist, macht der Knopf dreimal sanft auf sich aufmerksam.
   Kein Browser startet Video mit Ton - ein Klick muss es sein. */
.tonKnopf.puls:after{content:"";position:absolute;inset:-4px;border-radius:999px;
 border:2px solid rgba(255,255,255,.75);animation:tonPuls 1.9s ease-out 3;pointer-events:none}
@keyframes tonPuls{0%{transform:scale(1);opacity:.85}70%{transform:scale(1.45);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tonKnopf.puls:after{animation:none;display:none}}
.tonKnopf svg{width:17px;height:17px;fill:currentColor;display:block;flex:0 0 auto}
@media (max-width:700px){
 .hp2 .hero .tonKnopf{padding:9px 13px 9px 11px;font-size:.78rem}
 .hp2 .hero .tonKnopf span{display:none}
}

/* ------------------------------------------------------------------
   Infocall als Popup.
   Das Formular bleibt im Quelltext der Seite stehen und wird per Skript
   in diesen Dialog gehaengt. Ohne JavaScript steht es weiterhin offen
   unter dem Knopf - der Link springt dann einfach dorthin.
   ------------------------------------------------------------------ */
dialog.cbDlg{
 border:0;padding:0;background:transparent;overflow:visible;
 width:min(600px,calc(100vw - 28px));max-width:100%;
 max-height:calc(100dvh - 40px);
 color:var(--schwarz);
}
dialog.cbDlg::backdrop{background:rgba(10,10,11,.6)}
dialog.cbDlg .cbDlgBox{
 background:#fff;border-radius:22px;border:1px solid #e6e2da;
 box-shadow:0 30px 80px rgba(0,0,0,.3);
 max-height:calc(100dvh - 40px);overflow:auto;
 padding:clamp(26px,4vw,38px) clamp(20px,4vw,38px) clamp(24px,4vw,34px);
 -webkit-overflow-scrolling:touch;
}
dialog.cbDlg .cbDlgKopf{text-align:center;margin-bottom:22px}
dialog.cbDlg .cbDlgKopf .kicker{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
 color:var(--rot);font-weight:700;margin:0 0 12px}
dialog.cbDlg .cbDlgKopf h2{font-family:'Playfair Display',Georgia,serif;font-weight:700;
 font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.15;margin:0 0 10px}
dialog.cbDlg .cbDlgKopf p{color:#555;font-size:1rem;line-height:1.5;margin:0}
dialog.cbDlg .cbDlgZu{
 position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;border-radius:999px;
 border:1px solid #e6e2da;background:#fff;color:var(--grau);cursor:pointer;
 display:flex;align-items:center;justify-content:center;
 transition:background .18s ease,color .18s ease,border-color .18s ease}
dialog.cbDlg .cbDlgZu:hover,dialog.cbDlg .cbDlgZu:focus-visible{background:var(--rot);color:#fff;border-color:transparent}
dialog.cbDlg .cbDlgZu svg{width:16px;height:16px;fill:currentColor;display:block}
/* Platz fuer den Schliessknopf, damit er die Kicker-Zeile nicht beruehrt. */
dialog.cbDlg .cbDlgKopf{padding-right:34px;padding-left:34px}
@media (max-width:620px){
 dialog.cbDlg .cbDlgZu{top:10px;right:10px;width:36px;height:36px}
 dialog.cbDlg .cbDlgKopf{padding-right:26px;padding-left:26px}
}
/* Im Dialog braucht das Formular keine zweite Karte. */
dialog.cbDlg .wpforms-container#wpforms-13902{
 background:none;border:0;border-radius:0;padding:0;box-shadow:none;margin:0}
/* Seite hinter dem Dialog nicht mitscrollen lassen. */
html.cbDlgOffen,html.cbDlgOffen body{overflow:hidden}
/* Die leere Huelle des Formulars verschwindet, sobald es umgezogen ist. */
.cbFormWeg{display:none !important}

/* ------------------------------------------------------------------
   Kopfzeile transparent ueber dem Hero-Video.
   Die Leiste wird aus dem Textfluss genommen und liegt ueber dem Video;
   der Hero beginnt dadurch ganz oben. Gilt nur auf dieser Seite, weil
   nur sie diese Datei laedt.
   ------------------------------------------------------------------ */
body > .elementor-location-header{
 position:absolute;top:0;left:0;right:0;z-index:50;background:transparent}

/* Zarter Verlauf, damit die Schrift auch ueber hellen Videostellen traegt. */
body > .elementor-location-header:after{content:"";position:absolute;inset:0;z-index:-1;
 background:linear-gradient(180deg,rgba(8,8,9,.62) 0%,rgba(8,8,9,.34) 55%,rgba(8,8,9,0) 100%);
 pointer-events:none}

/* Alle Flaechen der Leiste durchsichtig - ausser den Klappmenues. */
body > .elementor-location-header .elementor-section,
body > .elementor-location-header .elementor-container,
body > .elementor-location-header .elementor-column,
body > .elementor-location-header .elementor-widget-wrap,
body > .elementor-location-header .elementor-widget-container{
 background-color:transparent !important;background-image:none !important}

/* Schrift und Symbole in Weiss. */
body > .elementor-location-header,
body > .elementor-location-header p,
body > .elementor-location-header span,
body > .elementor-location-header a,
body > .elementor-location-header i,
body > .elementor-location-header .elementor-item,
body > .elementor-location-header .elementor-heading-title,
body > .elementor-location-header .elementor-icon-list-text{color:#ffffff !important}
body > .elementor-location-header svg{fill:#ffffff !important}
body > .elementor-location-header a:hover,
body > .elementor-location-header .elementor-item:hover{color:#ffffff !important;opacity:.78}

/* Social-Symbole: weisse Linie statt beigem Kreis. */
body > .elementor-location-header a.elementor-social-icon{
 background-color:transparent !important;
 border-color:rgba(255,255,255,.55) !important;border-radius:999px}
body > .elementor-location-header .elementor-social-icon:hover{background-color:rgba(255,255,255,.18) !important}
body > .elementor-location-header .elementor-social-icon i{color:#ffffff !important}

/* Warenkorb-Zaehler bleibt rot, damit er ablesbar ist. */
body > .elementor-location-header .elementor-button-icon-qty{
 background-color:var(--rot) !important;color:#ffffff !important}

/* Die Hauptnavigation selbst bleibt durchsichtig. */
body > .elementor-location-header nav.elementor-nav-menu--main,
body > .elementor-location-header nav.elementor-nav-menu--main .elementor-nav-menu,
body > .elementor-location-header nav.elementor-nav-menu--main .elementor-nav-menu li{
 background-color:transparent !important;
 -webkit-backdrop-filter:none;backdrop-filter:none}

/* Nur die Klappmenues bekommen eine eigene Flaeche - sonst stuenden sie auf dem Video. */
body > .elementor-location-header nav.elementor-nav-menu--dropdown,
body > .elementor-location-header ul.sub-menu{
 background-color:rgba(14,14,15,.96) !important;
 -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body > .elementor-location-header .elementor-nav-menu--dropdown a,
body > .elementor-location-header ul.sub-menu a{color:#ffffff !important}
body > .elementor-location-header .elementor-nav-menu--dropdown a:hover,
body > .elementor-location-header ul.sub-menu a:hover{background-color:rgba(255,255,255,.08) !important}

/* Burger mobil. */
body > .elementor-location-header .elementor-menu-toggle{
 background-color:transparent !important;color:#ffffff !important}
body > .elementor-location-header .elementor-menu-toggle svg{fill:#ffffff !important}

/* Freigestelltes Logo in Weiss. Hoehe statt Breite, damit es nicht verzerrt. */
body > .elementor-location-header img.cbLogoWeiss{
 width:auto !important;max-width:none !important;
 height:clamp(38px,4.2vw,56px) !important;display:block}

/* Mobil laeuft die Kicker-Zeile sonst unter den Tonknopf. */
@media (max-width:700px){
 .hp2 .hero .kicker{padding-right:62px}
}

@media print{body > .elementor-location-header{position:static}}

/* ------------------------------------------------------------------
   Weiche Uebergaenge zwischen den Abschnitten.
   Jeder Abschnitt behaelt seine Farbe - Weiss, Sand, Beige, Schwarz.
   Weich wird nur die Naht: start-neu.js legt auf jeden Abschnitt einen
   Verlauf, der an beiden Raendern auf die Mischfarbe mit dem Nachbarn
   laeuft. Dadurch treffen sich zwei Abschnitte an der Kante in exakt
   derselben Farbe, und die Mischung verteilt sich je zur Haelfte auf
   beide Seiten.
   Faellt das Skript aus, bleiben die Farben unten stehen - dann sieht es
   aus wie vorher, nur eben mit Kante.
   ------------------------------------------------------------------ */
html{background:#faf8f4}
body{background:transparent !important}

/* Der Infocall-Abschnitt.
   Die Elementor-Huelle trug noch eine Beige-Flaeche und brachte 80 px
   Innenabstand oben und unten mit, dazu 20 px Widget-Abstand. Diese
   160+ px gehoerten zu keinem Abschnitt - dadurch riss die Verlaufskette
   an dieser Stelle ab und der Abschnitt wurde unnoetig gross.
   Jetzt liegt er buendig zwischen seinen Nachbarn und ist klein. */
.elementor-element-hp2s2{background-color:transparent !important;background-image:none !important;
 padding-top:0 !important;padding-bottom:0 !important}
.elementor-element-hp2s2 .elementor-widget-wrap{padding:0 !important}
/* Die Huelle war zusaetzlich auf Inhaltsbreite begrenzt - dadurch reichte
   der Abschnitt nicht bis an den Seitenrand und wirkte wie ein Kasten.
   Der Text bleibt ueber .w.schmal weiter in der Mitte. */
.elementor-element-hp2s2 > .elementor-container{max-width:none !important}
/* Der Lade-Baustein ist ein leeres Widget und steuerte ueber den
   Elementor-Widget-Abstand noch 20 px bei - genau die Luecke, die die
   Verlaufskette vor dem Infocall unterbrochen hat. */
.elementor-element-hp2-hero-video{margin:0 !important;padding:0 !important}
/* Und weil der Lade-Baustein hinter dem Inhalts-Baustein steht, ist dieser
   nicht mehr das letzte Widget - Elementor haengt ihm 20 px Abstand an.
   Genau diese 20 px waren die Luecke vor dem Infocall. */
.elementor-element-hp2h1{margin-bottom:0 !important}
.elementor-element-hp2s1 .elementor-widget-wrap,
.elementor-element-hp2s3 .elementor-widget-wrap{padding-top:0 !important;padding-bottom:0 !important}
.elementor-element-hp2h2{margin-bottom:0 !important}
.elementor-element-hp2h2 .hp2 .s{
 padding-top:clamp(30px,3.4vw,50px) !important;
 padding-bottom:clamp(30px,3.4vw,50px) !important}
.elementor-element-hp2h2 .hp2 .s .lead{margin-bottom:20px !important}

/* Der Uebergang vom Video in die erste Sektion bleibt bewusst eine
   harte Kante - so gewuenscht. */

/* Karten behalten ihre weisse Flaeche, damit sie sich vom Verlauf abheben. */
.hp2 .karte,
.hp2 .ecard,
.hp2 .stimme,
.hp2 .trust div{background:#ffffff}

/* Der dunkle Abschnitt bleibt schwarz; nur seine Innenabstaende sind
   groesser, damit die Schrift erst im vollen Schwarz beginnt - die Naht
   selbst macht das Skript. */
.hp2 .s.dunkel{
 padding-top:clamp(150px,17vw,250px);
 padding-bottom:clamp(150px,17vw,250px);
}

/* Das dunkle Partner-Laufband ist eine Kachel mit runden Ecken, keine
   Sektionskante - es bleibt, wie es ist. */

/* Auf dieser Seite sitzt unten die schwarze Leiste. Der WhatsApp-Knopf
   rueckt mobil darueber, sonst laege er darunter. */
@media (max-width:700px){
 body.page-id-19067 a.cambio-wa{transition:bottom .25s ease,transform .2s ease,box-shadow .2s ease}
 body.page-id-19067:has(.sticky.cmo-in) a.cambio-wa{
  bottom:calc(84px + env(safe-area-inset-bottom,0px)) !important}
}

/* ------------------------------------------------------------------
   Rechte Gruppe in der Kopfzeile: Flagge, Login, Warenkorb, Tonknopf.
   Zusammengesetzt wird sie in start-neu.js; hier steht nur, wie sie
   sitzt. Gilt nur fuer die Desktop-Leiste - Tablet und Handy haben eine
   eigene Kopfzeile, die unberuehrt bleibt.
   ------------------------------------------------------------------ */
.elementor-element-d00f013 > .elementor-container{flex-wrap:nowrap}
/* Die beiden Spalten rechts sind leer, seit Warenkorb und Flagge in der
   Gruppe stehen; die Login-Spalte der oberen Leiste ebenso. */
.elementor-element-4c38a07,
.elementor-element-863dd17,
.elementor-element-90edc83{display:none !important}
.elementor-element-8044ae7,
.elementor-element-9a4d07a{width:auto !important;flex:1 1 auto !important}

.cbKopfRechts{
 flex:0 0 auto;align-self:center;
 display:flex;align-items:center;justify-content:flex-end;
 gap:clamp(12px,1.3vw,20px);
 padding-right:14px}
.cbKopfRechts > *{margin:0 !important;padding:0}
.cbKopfRechts a{
 color:#ffffff !important;text-decoration:none;white-space:nowrap;
 font:700 .78rem/1 Roboto,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;
 transition:opacity .2s ease}
.cbKopfRechts a:hover{opacity:.72}
.cbKopfRechts img.wpml-ls-flag{display:block;width:22px;height:auto;border-radius:2px}
/* Der Warenkorb bringt seinen eigenen Elementor-Rahmen mit. */
.cbKopfRechts .elementor-widget-woocommerce-menu-cart{width:auto}
.cbKopfRechts .elementor-menu-cart__toggle .elementor-button{padding:0;background:transparent;border:0}
.cbKopfRechts .elementor-menu-cart__toggle,
.cbKopfRechts .elementor-menu-cart__container{margin:0}

/* Die rechte Gruppe nimmt dem Hauptmenue Breite weg. Damit nicht ein
   Punkt mehr als vorher in die zweite Zeile rutscht, sitzen die
   Menuepunkte hier etwas enger - 20 px Innenabstand waren grosszuegig.
   Dass "Zur Online Academy" weiterhin umbricht, ist unveraendert und
   loest sich erst mit dem Menue-Umbau auf fuenf Hauptpunkte. */
@media (min-width:1025px){
 .elementor-element-6dbe5bb .elementor-nav-menu--main a.elementor-item{
  padding-left:clamp(12px,1.25vw,20px) !important;
  padding-right:clamp(12px,1.25vw,20px) !important}
}

/* ------------------------------------------------------------------
   Abstaende zwischen den Abschnitten auf dem Handy.

   Im Quelltext der Seite steht fuer schmale Schirme
   padding-bottom: calc(clamp(44px,5vw,72px) + 62px) - die 62 px waren als
   Platz fuer die schwarze Sticky-Leiste gedacht. Die Regel traf aber
   *jeden* Abschnitt, nicht nur den letzten. Dadurch lagen zwischen zwei
   Abschnitten 44 + 106 = 150 px Luft.

   Jetzt: ringsum 34 px, und nur der letzte Abschnitt haelt den Platz fuer
   die Leiste frei.
   ------------------------------------------------------------------ */
@media (max-width:700px){
 .hp2 .s{
  padding-top:34px !important;
  padding-bottom:34px !important}
 /* Der letzte Abschnitt der Seite - darunter faehrt die Sticky-Leiste ein.
    In hp2h3 stehen seit dem Umzug der Fragen zwei Abschnitte; den Platz
    haelt nur der untere frei. */
 .elementor-element-hp2h3 .hp2 .s:last-of-type{
  padding-bottom:calc(34px + 62px) !important}
 /* Der Hero rechnet seinen oberen Abstand aus der Kopfzeilenhoehe. */
 .hp2 .s.hero{padding-top:calc(var(--kopf,145px) + clamp(20px,3.4vw,52px)) !important}
 /* Der dunkle Abschnitt braucht Vorlauf, damit die Schrift im vollen
    Schwarz beginnt - mobil reichen dafuer 92 px, weil die Naht dort
    kuerzer ist (110 statt 170 px). */
 .hp2 .s.dunkel{
  padding-top:92px !important;
  padding-bottom:92px !important}
 /* Die kleine Infocall-Sektion bleibt klein. */
 .elementor-element-hp2h2 .hp2 .s{
  padding-top:26px !important;
  padding-bottom:26px !important}
}

/* ------------------------------------------------------------------
   Zwei Nachbesserungen fuer das Handy.
   ------------------------------------------------------------------ */
@media (max-width:700px){
 /* 1. Zwischen dem Kombi-Hinweis und dem OeCert-Bild standen rund 110 px:
    34 px Abstand unten, 34 px oben und zusaetzlich 24 px Aussenabstand des
    zweispaltigen Blocks, der einspaltig nichts mehr traegt. */
 .hp2 .zwei,.hp2 .aktion{margin-top:0}
 .hp2 .s{padding-top:28px !important;padding-bottom:28px !important}
 .elementor-element-hp2h3 .hp2 .s:last-of-type{padding-bottom:calc(28px + 62px) !important}

 /* 2. Das Bewertungssiegel lag mit seiner unteren Ecke auf dem
    "Testimonials"-Schriftzug. Der Schriftzug wird oben um 12 px
    hochgezogen - das passte, solange rechts daneben nichts stand. */
 .hp2 .sfs:not(.faq){margin-top:8px}
 .cbSiegelZeile{column-gap:10px}
}