/* kmu-wert.ch · Stylesheet der Landingpage (automatisch aus kompakt/styles.css, bau/css_port.py — nicht von Hand ändern) */
/* =====================================================================
   wirtuosa · Unternehmensbewertung · Entwurf «kompakt»
   Eine Szene am Einstieg (Aussage steht zum Schluss ruhig neben
   dem Tablet), dann der dunkle Vorhang, danach kurze Abschnitte von je etwa einem Bildschirm mit genau einem Effekt.
   Marke: Aubergine #4F2057, Nacht #1D131E, Mauve nur auf Dunkel; Schrift Mona Sans. Keine Doppellinien.
   Positionen in vw/vh (Entwurf 1440×900, skaliert auf 1920×1080). Nur Desktop.
   ===================================================================== */

:root {
  --nacht: #1D131E;          /* Nachtaubergine: Flächen Expertin, Einblick, Team, Loader */
  --aub: #4F2057;            /* Hauptfarbe: Akzent auf Hell, Knöpfe, Flächen Anlässe, Anfrage, Schluss */
  --mauve: #A88DAB;          /* nur auf Dunkel (Überschriften, Label, Summenlinie, Fokus). Nie Text auf Hell (2.97:1) */
  --papier: #F3F3F3;
  --weiss: #FFFFFF;
  --tinte: #101010;
  --grau: #5A535C;           /* Fliesstext auf Weiss/Papier (7.43 / 6.70). NICHT auf dem Studio-Bild */
  --hell-auf-dunkel: rgba(255, 255, 255, .82);
  --leise-auf-dunkel: rgba(255, 255, 255, .70);
  --linie-dick: 3px;         /* die einzige dicke Linie: Preisblatt und Summe beim Formular (gleich stark wie die Zeitachse) */
  --haar-hell: rgba(16, 16, 16, .12);
  --haar-hell-stark: rgba(16, 16, 16, .2);
  --haar-dunkel: rgba(255, 255, 255, .22);
  --feldrand: #8F8791;       /* 3.48:1 auf Weiss (einzige Feldgrenze) */
  --platzhalter: #777079;    /* 4.80:1 auf Weiss */
  --rand: 4.4vw;
  --out: cubic-bezier(.25, 1, .5, 1);
  /* Masseinheit für Tablet und Auszug: 1vh, bei schmalen Fenstern kleiner */
  --tu: min(1vh, .634vw);
}

/* ===== Elementor-Grundlage neutralisieren (steht vor allen Regeln unten) =====
   .e-con gibt allen Containern position:relative und width:100% (0,1,0) — hier (0,1,1), damit die Regeln unten
   (mindestens 0,1,2) gewinnen. Innenabstände und Knopf-/Feld-Grundstile setzt Elementor mit (0,2,0). */
/* Das Theme setzt html { scroll-behavior: smooth }. Damit misst ScrollTrigger bei jedem Neu-Vermessen mitten auf der
   Seite falsch (sein kurzer Sprung an den Anfang wird «weich» und findet nicht statt): alle Szenen verrutschen um die
   gerade gescrollte Strecke (gemessen 26.09.: Einstieg start −677 statt 0). Weiches Scrollen macht mit Skript Lenis. */
html.js { scroll-behavior: auto !important; }
html .e-con:where(.e-atomic-element) { position: static; width: auto; height: auto; min-height: 0; overflow: visible; z-index: auto; margin: 0; border-radius: 0; transition: none; }
html .elementor .e-div-block-base { padding: 0; min-width: 0; }
html .elementor .e-button-base, html .elementor .e-form-submit-button-base { background: none; padding: 0; border: 0; border-radius: 0; color: inherit; font: inherit; text-align: inherit; transition: none; }
html .elementor .e-self-hosted-video-base { max-width: none; aspect-ratio: auto; }
html .elementor .e-accordion-item-header-base { padding: 0; gap: 0; }
html .elementor .e-accordion-item-content-base { padding: 0; min-width: 0; }
html .elementor .e-accordion-item-icon-base { width: auto; height: auto; transform: none; }
html .elementor .e-form-base { display: block; padding: 0; gap: 0; }
html .elementor .e-form-input-base, html .elementor .e-form-textarea-base, html .elementor .e-form-select-base { height: auto; font-size: inherit; color: inherit; border-radius: 0; }
html .elementor .e-form-label-base { display: block; font-size: inherit; color: inherit; line-height: inherit; }
html .elementor :is(h1, h2, h3, h4, h5, h6) { font-size: revert; font-weight: revert; line-height: revert; color: inherit; margin: 0; }
html .elementor a { text-decoration: none; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html body {
  margin: 0; background: var(--weiss); color: var(--tinte);
  font-family: "Mona Sans", "Helvetica Neue", Arial, sans-serif; font-size: 17px; line-height: 1.5; font-stretch: 100%;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden; overflow-x: clip;   /* clip: schneidet ab, ohne einen Scroll-Container zu bilden (sticky bleibt zuverlässig) */
}
html .elementor h1, html .elementor h2, html .elementor h3, html .elementor h4, html .elementor p, html .elementor ol, html .elementor ul, html .elementor blockquote, html .elementor figure { margin: 0; }
html .elementor h2, html .elementor h3 { text-wrap: balance; hyphens: manual; }
html .elementor ol, html .elementor ul { padding: 0; list-style: none; }
html .elementor img { display: block; max-width: 100%; height: auto; }
html .elementor a { color: inherit; }
html .elementor button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--aub); color: #fff; }
:focus-visible { outline: 2px solid var(--aub); outline-offset: 4px; }
/* Auf dunklem Grund Mauve (Aubergine auf Nacht nur 1.44:1); auf der weissen Formularkarte wieder Aubergine */
html .elementor [data-ton="dunkel"] :focus-visible, html[data-kopf="dunkel"] .elementor .kopf :focus-visible, html[data-cta="dunkel"] .elementor .cta:focus-visible { outline-color: var(--mauve); }
html .elementor .formular :focus-visible { outline-color: var(--aub); }
html .elementor .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html .elementor main { position: relative; z-index: 1; }
html .elementor main > section { position: relative; z-index: 1; }
/* jede Sektion liegt über der Einstiegs-Bühne (.bericht: z-index 0) */

/* ---------- Pfeil (→ der Hausschrift, 45° gedreht) ---------- */
html .elementor .arr { display: inline-block; transform: rotate(-45deg); line-height: 1; transition: transform .6s var(--out); }
html .elementor a:hover .arr, html .elementor button:hover .arr { transform: rotate(-45deg) translateX(4px); }
/* ---------- Hover: Text rollt nach oben, Kopie rollt nach ---------- */
html .elementor .roll { display: inline-block; position: relative; overflow: hidden; vertical-align: bottom; line-height: 1.2; }
html .elementor .roll__z { display: block; white-space: pre; }
html .elementor .roll__z--b { position: absolute; left: 0; top: 100%; }
html .elementor .roll .c { display: inline-block; transition: transform .7s var(--out); transition-delay: calc(var(--i) * 11ms); }
html .elementor a:hover .roll .c, html .elementor button:hover .roll .c, html .elementor a:focus-visible .roll .c, html .elementor button:focus-visible .roll .c { transform: translateY(-100%); }
/* ---------- Ladeanimation: das wirtuosa-Logo (Zeichen + Schriftzug) mittig ----------
   Lage wie in wirtuosa-logo.svg (1215.34 × 1187.98): Zeichen x 143–1058, y 0–877; Schriftzug y 960–1190.
   Im Dunkeln hell (wie das Zeichen der Kopfzeile auf dunklen Flächen); die Originalfarben bekommt es beim Andocken. */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--nacht); pointer-events: none; }
html:not(.js) .loader { display: none; }
/* ohne Skript nie eine Ladefläche, die liegen bleibt */
.loader__logo { position: absolute; left: 50%; top: 50%; width: clamp(148px, 14vw, 240px); aspect-ratio: 1215.34 / 1187.98; transform: translate(-50%, -54%); }
.loader__zeichen { position: absolute; left: 11.766%; top: 0; width: 75.288%; height: auto; aspect-ratio: 915 / 877; fill: #fff; }
.loader__wort { position: absolute; left: 0; top: 80.81%; width: 100%; height: 19.36%; fill: #E3DCE4; }
.loader__wort > * { opacity: 0; }
/* Buchstaben und Schlusspunkt steigen erst im Skript aus ihrer Grundlinie */
/* Touch-Geräte scrollen nativ (ohne Lenis): während der Ladeanimation nicht scrollen — an «Touch» gekoppelt wie im Skript,
   nicht an die Bildschirmgrösse (sonst scrollt z. B. ein Tablet quer durch die Ladefläche) */
@media (hover: none) and (pointer: coarse) {.loader { pointer-events: auto; touch-action: none; }

}
/* ---------- Kopfzeile (kein Menü) ---------- */
html .elementor .kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 26px var(--rand); color: var(--tinte); transition: background-color .4s var(--out); pointer-events: none;
}
/* Über fliessendem Text: deckend in exakt der Farbe des Abschnitts darunter (kein sichtbarer Balken) */
html .elementor .kopf--deckend { background-color: var(--seite, #fff); }
/* Farbwechsel weich und ohne Aufblitzen: die Fläche blendet über (.4s), Schrift und Zeichen blenden kurz aus und in der
   neuen Farbe wieder ein. Das Skript setzt .kopf--wechsel und tauscht data-kopf erst, wenn sie unsichtbar sind
   (würden Schrift und Fläche gleichzeitig ineinander überblenden, hätten sie in der Mitte dieselbe Farbe). */
html .elementor .kopf__marke, html .elementor .kopf__ziel { transition: opacity .22s var(--out); }
html .elementor .kopf--wechsel .kopf__marke, html .elementor .kopf--wechsel .kopf__ziel { opacity: 0; transition-duration: .1s; }
/* Reserve bis zum Tausch nach 150 ms */
html .elementor .kopf a, html .elementor .kopf p { pointer-events: auto; }
html .elementor .kopf__marke { display: flex; align-items: center; gap: 12px; text-decoration: none; }
html .elementor .kopf__zeichen { width: 40px; height: auto; }
/* Farbe wechselt, während das Zeichen ausgeblendet ist (.kopf--wechsel) */
html .elementor .kopf__name { display: flex; flex-direction: column; line-height: 1.2; }
html .elementor .kopf__name strong { font-size: 16px; font-weight: 600; font-stretch: 108%; letter-spacing: -.01em; }
html .elementor .kopf__name span { font-size: 14px; }
/* volle Deckkraft (Kontrast) */
html .elementor .kopf__ziel { font-size: 14px; font-weight: 500; }
html[data-kopf="hell"] .elementor .kopf__ziel { color: #000; }
/* oben rechts ist das Studio-Bild dunkler: Schwarz hält überall ≥ 4.59:1 */
html[data-kopf="dunkel"] .elementor .kopf { color: #fff; }
html[data-kopf="dunkel"] .elementor .kopf__zeichen { filter: brightness(0) invert(1); }
/* ---------- Fester Knopf unten mittig ---------- */
html .elementor .cta {
  position: fixed; left: 50%; bottom: 3.4vh; z-index: 60; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 16px; padding: 17px 24px 17px 26px; border-radius: 3px;
  background: var(--aub); color: #fff; text-decoration: none; font-size: 16px; font-weight: 560; font-stretch: 106%;
  transition: background-color .35s var(--out), box-shadow .35s var(--out), opacity .3s;
}
/* Wie bei der Kopfzeile: die Fläche blendet über, die Beschriftung blendet aus, wechselt unsichtbar die Farbe und kommt
   erst wieder, wenn die Fläche fast umgefärbt ist (Verzögerung) — nie Schrift in Flächenfarbe */
html .elementor .cta__txt { transition: opacity .2s var(--out) .18s; }
html .elementor .cta .arr { transition: transform .6s var(--out), opacity .2s var(--out) .18s; }
html .elementor .cta--wechsel .cta__txt { opacity: 0; transition: opacity .1s; }
html .elementor .cta--wechsel .arr { opacity: 0; transition: transform .6s var(--out), opacity .1s; }
html[data-cta="dunkel"] .elementor .cta { background: #fff; color: var(--aub); box-shadow: inset 0 0 0 1px rgba(79, 32, 87, .28); }
html .elementor .cta.is-weg { opacity: 0; pointer-events: none; }
html .elementor .cta-morph { position: fixed; z-index: 59; background: #fff; opacity: 0; pointer-events: none; border-radius: 3px; }
html .elementor .linkbtn {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 0 8px; text-decoration: none;
  font-size: 16px; font-weight: 560; font-stretch: 106%; border-bottom: 1px solid currentColor;
}
html .elementor .linkbtn--hell { color: #fff; }
/* =====================================================================
   1 · Einstieg
   Die Bühne klebt (sticky) über die ganze Sektion. Höhe = 100vh Bühne + Szene (--szene, 1 Einheit = 1vh, liest auch
   app.js) + 100vh, in denen die Expertin als Vorhang darüberfährt (sie hat margin-top: -100vh). Es läuft kein Text am
   Tablet vorbei: am Ende der Szene steht die Aussage ruhig links neben ihm, bis der Vorhang sie zudeckt.
   ===================================================================== */
html .elementor .bericht { --szene: 130; z-index: 0; height: calc((var(--szene) + 200) * 1vh); }
html .elementor .bericht__buehne { position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: 0; }
html .elementor .studio { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
html .elementor .studio__video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Startbild: die Frage gross und mittig in zwei ganzen Zeilen (Mitte bei 48vh) */
html .elementor .hero-h1 { font-size: min(7.4vw, 12.5vh); }
html .elementor .hero-h1 > span {
  position: absolute; left: 0; right: 0; display: block; text-align: center; white-space: nowrap;
  font-stretch: 100%; font-weight: 620; letter-spacing: -.035em; line-height: .96; z-index: 3; transform-origin: 50% 0;
}
html .elementor .hero-h1__l { top: calc(48vh - .96em); color: var(--tinte); }
html .elementor .hero-h1__r { top: 48vh; color: var(--aub); }
/* Angebotsblock 7px tiefer als die Legende: Schriftlinien von Link, Legende und «wirklich wert?» liegen auf einer Linie.
   Breite: bis 48px vor die linke Kante von «wirklich wert?» in der Endlage (--zeile2-links misst das Skript).
   Auf dem Studio-Bild aller Kleintext in Tinte (Grau fällt dort unter 4.5:1). */
html .elementor .hero-preis { position: absolute; left: var(--rand); bottom: calc(15.5vh - 7px); z-index: 3; max-width: calc(var(--zeile2-links, 29vw) - var(--rand) - 48px); }
html .elementor .hero-preis__zahl span:first-child { font-size: 26px; font-weight: 580; font-stretch: 110%; letter-spacing: -.02em; }
html .elementor .hero-preis__zahl span:last-child { font-size: 15px; color: var(--tinte); margin-left: 6px; }
html .elementor .hero-preis__check { margin-top: 10px; font-size: 15px; color: var(--tinte); text-wrap: balance; }
/* kein einzelnes Restwort */
html .elementor .hero-preis .linkbtn { margin-top: 14px; }
html .elementor .hero-legende { position: absolute; right: var(--rand); bottom: 15.5vh; font-size: 15px; color: var(--tinte); z-index: 3; }
/* Das Objekt: Tablet, 70 × 56.02 Einheiten, mittig (Mitte bei 52vh), Drehpunkt = Bildschirmmitte des Geräts */
html .elementor .objekt { position: absolute; left: calc(50% - 28.01 * var(--tu)); top: calc(52vh - 35 * var(--tu)); height: calc(70 * var(--tu)); width: calc(56.02 * var(--tu)); z-index: 2; transform-origin: 50.7% 50.9%; will-change: transform; }
html .elementor .tablet__img { width: 100%; height: 100%; }
/* Bildschirm: die Originalseite als eigene Ebene über dem Foto. Die vier Bildschirmecken sind im Foto vermessen
   (natürliche px, Kanten auf 0.3 px genau); matrix3d legt die Seite (Seitenverhältnis des iPad-Bildschirms 1640 × 2360)
   perspektivisch darauf. --k = gezeigte Breite / 1122 setzt app.js; ohne Skript bleibt die Ebene weg (scale 0). */
html .elementor .tablet__schirm { position: absolute; left: 0; top: 0; width: 1122px; height: 1402px; transform-origin: 0 0; transform: scale(var(--k, 0)); pointer-events: none; }
html .elementor .tablet__seite { position: absolute; left: 0; top: 0; width: 1000px; height: 1438.85px; transform-origin: 0 0;
  transform: matrix3d(0.839889175, 0.052046582, 0, 5.78009637e-05, 0.000397215042, 0.80206299, 0, 2.76168371e-07, 0, 0, 1, 0, 176.140995, 136.667272, 0, 1);
  background: #fff; border-radius: 30px; overflow: hidden; filter: brightness(.985); }
/* Weiss des Foto-Bildschirms */
html .elementor .tablet__seite img { display: block; width: 100%; height: auto; }
/* Bildschirme mit 1×-Pixeln: die 500-px-Fassung (die 1000er würde zu stark verkleinert, die Schrift wird treppig) */
html .elementor .tablet__seite-klein { display: none !important; }
@media (max-resolution: 1.49dppx) {html .elementor .tablet__seite-gross { display: none !important; }
html .elementor .tablet__seite-klein { display: block !important; }

}
/* Die Aussage am Ende der Szene: links neben dem Tablet, auf seiner Mittellinie (52vh). Breite bis 5vw vor die linke
   Gerätekante in der Endlage: 50% + 23vw − 56.02tu × .9 / 2 = 73vw − 25.2tu */
html .elementor .statement { position: absolute; left: var(--rand); top: 52vh; transform: translateY(-50%); width: calc(73vw - 25.2 * var(--tu) - var(--rand) - 5vw); z-index: 3; pointer-events: none; }
html.js .elementor .statement { opacity: 0; }
/* bis das Skript die Zeilen vorbereitet hat */
html .elementor .statement__txt { font-size: 1.85vw; line-height: 1.38; font-weight: 470; font-stretch: 104%; letter-spacing: -.012em; color: var(--tinte); }
html .elementor .statement__fakten { margin-top: 4vh; font-size: 16px; line-height: 1.55; color: var(--tinte); }
html .elementor .statement__visum { margin-top: 1.6vh; font-size: 16px; color: var(--tinte); }
html .elementor .statement__visum strong { font-weight: 600; margin-right: 6px; }
html .elementor .statement__visum a { pointer-events: auto; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness .2s var(--out); }
html .elementor .statement__visum a:hover { text-decoration-thickness: 2px; }
/* =====================================================================
   2 · Expertin (Nacht): der Vorhang über der Bühne, genau ein Bildschirm.
   Oben die Überschrift, in der Mitte das Zitat (leuchtet Wort für Wort auf), unten Foto + Name + Freigabe-Vermerk.
   ===================================================================== */
html .elementor .expertin, html .elementor .einblick { background: var(--nacht); color: #fff; }
html .elementor .expertin { min-height: 100vh; margin-top: -100vh; display: flex; flex-direction: column; padding: 16vh var(--rand) 11vh; }
html .elementor .expertin__h2 { font-size: 3.2vw; font-stretch: 110%; font-weight: 560; letter-spacing: -.03em; line-height: 1.02; color: var(--mauve); }
html .elementor .expertin__zitat { margin: 8vh 0 0; width: 64vw; font-size: 2.3vw; line-height: 1.3; font-weight: 450; font-stretch: 104%; letter-spacing: -.012em; }
html .elementor .expertin__person { margin-top: auto; padding-top: 6vh; display: flex; align-items: flex-end; gap: 22px; }
html .elementor .expertin__person p { display: flex; flex-direction: column; font-size: 15px; line-height: 1.45; }
html .elementor .expertin__person strong { font-size: 18px; font-weight: 600; }
html .elementor .expertin__person span { color: var(--hell-auf-dunkel); }
/* Kleines Foto (Expertin und Team): Hochformat, Kopf-Ausschnitt per CSS, Graustufen (die Datei bleibt unverändert) */
html .elementor .foto { flex: none; width: clamp(80px, 6.1vw, 112px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: var(--papier); }
/* Ausschnitt pro Foto über --zoom / --fx / --fy (Kopf etwa gleich gross in beiden Kacheln) */
html .elementor .foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1.6)); transform-origin: var(--fx, 48%) var(--fy, 30%); filter: grayscale(1) contrast(1.04); }
/* =====================================================================
   3 · Bericht (Weiss): sechs Inhalte als Raster 3 × 2 auf einem Bildschirm — keine Karten, keine Kästen,
   nur eine Haarlinie über jedem Punkt
   ===================================================================== */
html .elementor .leistung { background: var(--weiss); color: var(--tinte); padding: 12vh var(--rand) 10vh; }
html .elementor .leistung__kopf { display: grid; grid-template-columns: 1.25fr 1fr; column-gap: 6vw; align-items: end; }
html .elementor .leistung__h2 { font-size: 2.5vw; font-stretch: 110%; font-weight: 560; letter-spacing: -.03em; line-height: 1.04; color: var(--tinte); }
html .elementor .leistung__h2 span { color: var(--aub); }
html .elementor .leistung__intro { font-size: 18px; line-height: 1.55; color: var(--grau); max-width: 32em; }
html .elementor .schritte { margin-top: 9vh; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3.4vw; row-gap: 7vh; }
html .elementor .schritt { position: relative; padding-top: 2.6vh; }
html .elementor .schritt__linie { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--haar-hell-stark); transform-origin: 0 50%; }
html .elementor .schritt__kopf { font-size: 1.7vw; font-weight: 560; font-stretch: 104%; letter-spacing: -.026em; line-height: 1.1; color: var(--aub); hyphens: manual; }
html .elementor .schritt__kopf span { display: inline-block; min-width: 2.2em; font-size: 14px; font-weight: 600; letter-spacing: 0; vertical-align: .45em; color: var(--tinte); }
html .elementor .schritt h3 { margin-top: 1.6vh; font-size: 19px; font-weight: 600; font-stretch: 104%; letter-spacing: -.012em; line-height: 1.3; }
html .elementor .schritt h3 + p { margin-top: 8px; font-size: 16.5px; line-height: 1.55; color: var(--grau); }
/* =====================================================================
   4 · Einblick (Nacht): Texte + Hinweis links · Originalauszug in der Mitte · Notizen rechts auf der Höhe des Auszugs
   ===================================================================== */
html .elementor .einblick { padding: 9vh var(--rand) 9vh; }
html .elementor .einblick__buehne { display: grid; grid-template-columns: 27vw auto 1fr; column-gap: 4vw; align-items: start; }
html .elementor .einblick__links h2 { font-size: 2.3vw; font-stretch: 106%; font-weight: 560; letter-spacing: -.025em; line-height: 1.08; color: var(--mauve); }
html .elementor .einblick__links > p { margin-top: 22px; font-size: 17px; color: var(--hell-auf-dunkel); }
html .elementor .einblick__links h3 { margin-top: 5vh; font-size: 2vw; font-stretch: 106%; font-weight: 560; letter-spacing: -.025em; line-height: 1.08; color: var(--mauve); }
html .elementor .hinweis { margin-top: 4vh; padding-top: 2.2vh; border-top: 1px solid var(--haar-dunkel); }
html .elementor .hinweis__kopf { font-size: 20px; font-weight: 600; font-stretch: 104%; color: #fff; }
html .elementor .hinweis__txt { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--hell-auf-dunkel); }
/* Auszug: zwei Originalseiten, 76 Einheiten hoch, Breite 76 × 1600/2265 = 53.69. Blatt 2 liegt in der Ruhelage leicht
   verschoben und gedreht über Blatt 1 (gleiche Werte wie B2 in app.js), mit Schatten: man sieht zwei Blätter */
html .elementor .einblick__blatt { position: relative; height: calc(76 * var(--tu)); width: calc(53.69 * var(--tu)); }
html .elementor .einblick__img { width: 100%; height: 100%; }
html .elementor .einblick__img--2 { position: absolute; left: 0; top: 0; transform: translate(3.5%, 1.8%) rotate(2.6deg); box-shadow: 0 2.2vh 5vh rgba(0, 0, 0, .5); }
html .elementor .einblick__rechts { position: relative; height: calc(76 * var(--tu)); }
/* Halt (nur mit Skript): die Bühne klebt als Ganzes 9vh unter der Oberkante, nie unter der Kopfzeile (--stick-oben
   aus app.js) — alle drei Spalten halten und lösen sich gemeinsam. Der Abschnitt ist so hoch, dass die Klebestrecke
   immer --halt (vh) beträgt, auch wenn die Bühne höher ist als der Bildschirm (--halt-hoehe aus app.js; hier nur der
   Wert für den ersten Aufbau). Ist die Textspalte höher als der Platz, gleitet sie während des Halts langsam hoch. */
html.js .elementor .einblick { --halt: 120; min-height: var(--halt-hoehe, calc((100 + var(--halt)) * 1vh)); }
html.js .elementor .einblick__buehne { position: sticky; top: var(--stick-oben, 9vh); }
html .elementor .notizgruppe__titel { display: none; }
/* nur Handy (dort stehen beide Notizlisten untereinander) */
html .elementor .einblick__labels { display: grid; }
html .elementor .einblick__labels > * { grid-area: 1 / 1; }
/* die beiden Bildlegenden liegen übereinander */
/* Ohne Skript: die Ruhelage nach dem Wechsel (Blatt 2 oben, seine Notizen und seine Legende) */
html:not(.js) .elementor .notizgruppe--1, html:not(.js) .elementor .einblick__label--1 { visibility: hidden; }
html .elementor .notiz { position: absolute; left: -4vw; top: calc(var(--y) * 100%); display: flex; align-items: center; transform: translateY(-50%); }
html .elementor .notiz__strich { display: block; width: 7.2vw; height: 1px; background: var(--mauve); transform-origin: left center; }
html .elementor .notiz__txt { margin-left: 16px; width: 16vw; font-size: 16px; font-weight: 520; line-height: 1.35; }
/* Bildlegende oben in der Spalte (auf Höhe der Blattkante); Knopf und Hinweis unter den Notizen — sie dürfen unten
   über die Blatthöhe hinaus in den freien Raum reichen (dort liegt kein fester Knopf) */
html .elementor .einblick__labels { position: absolute; left: calc(3.2vw + 16px); top: 0; width: 18vw; }
html .elementor .einblick__fuss { position: absolute; left: calc(3.2vw + 16px); top: 77%; width: 18vw; }
html .elementor .einblick__label { font-size: 15px; color: var(--mauve); }
html .elementor .einblick__note { margin-top: 18px; font-size: 14px; line-height: 1.5; color: var(--leise-auf-dunkel); }
/* =====================================================================
   5 · Ablauf (Weiss): der Rahmen klebt kurz (50vh), währenddessen füllt sich der Strahl
   ===================================================================== */
html .elementor .ablauf { height: 150vh; background: var(--weiss); color: var(--tinte); }
html .elementor .ablauf__rahmen { position: sticky; top: 0; height: 100vh; overflow: hidden; }
html .elementor .ablauf__h2 { position: absolute; left: var(--rand); top: 16vh; font-size: 3vw; font-stretch: 110%; font-weight: 560; letter-spacing: -.03em; line-height: 1.04; color: var(--aub); }
/* Punkte am Anfang der Spalten: 4 Spalten, Abstand 2.5vw → Spalte i beginnt bei i × (25% + .625vw) */
html .elementor .zeitachse { position: absolute; left: var(--rand); right: var(--rand); top: 52vh; height: 1px; }
/* Jeder Schritt hat seinen eigenen Abschnitt der Linie (Punkt = Beginn des Schritts, Abschnitt = seine Spalte).
   Die Linie läuft darum über die volle Breite; mit dem letzten Schritt füllt sie sich bis an den rechten Rand und
   schliesst dort mit einem Endstrich ab (wie die Linie der Ladeanimation) = Ablauf abgeschlossen. */
html .elementor .zeitachse__linie { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: var(--haar-hell-stark); transform: scaleX(0); }
html .elementor .zeitachse__fuellung { position: absolute; left: 0; right: 0; top: -1px; height: var(--linie-dick); background: var(--aub); transform: scaleX(0); transform-origin: 0 50%; }
html .elementor .zeitachse__ende { position: absolute; right: 0; top: -7px; width: 2px; height: 15px; background: rgba(16, 16, 16, .32); opacity: 0; }
html .elementor .zeitachse__punkt {
  position: absolute; top: 0; left: calc(var(--i) * (25% + .625vw)); width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(16, 16, 16, .32); opacity: 0;
}
html .elementor .zeitachse__label { position: absolute; left: 50%; top: calc(52vh - 5.2vh); transform: translateX(-50%); font-size: 17px; font-weight: 560; font-stretch: 104%; white-space: nowrap; opacity: 0; }
html .elementor .stufen { position: absolute; left: var(--rand); right: var(--rand); top: 58vh; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 2.5vw; opacity: 0; }
html .elementor .stufe { opacity: .3; }
html .elementor .stufe span { display: block; font-size: 14px; font-weight: 600; color: var(--aub); }
html .elementor .stufe h3 { margin-top: 12px; font-size: 20px; font-weight: 580; font-stretch: 104%; letter-spacing: -.012em; line-height: 1.25; }
html .elementor .stufe p { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--grau); }
html .elementor .ablauf__termin { position: absolute; left: var(--rand); bottom: 13vh; width: 44vw; font-size: 15px; color: var(--grau); opacity: 0; }
/* =====================================================================
   6 · Team (Nacht): Kopf oben, zwei Personen darunter; kleine Foto-Kacheln statt grosser Initialen
   ===================================================================== */
html .elementor .team { background: var(--nacht); color: #fff; padding: 10vh var(--rand); }
html .elementor .team__kopf { display: grid; grid-template-columns: 1.05fr 1fr; column-gap: 6vw; align-items: end; }
html .elementor .team__kopf h2 { font-size: 3vw; font-stretch: 110%; font-weight: 560; letter-spacing: -.03em; line-height: 1.04; color: var(--mauve); }
html .elementor .team__kopf p { font-size: 19px; line-height: 1.55; color: var(--hell-auf-dunkel); }
html .elementor .team__personen { margin-top: 7vh; display: grid; grid-template-columns: 1fr 1fr; column-gap: 6vw; }
html .elementor .person__kopf { display: flex; align-items: flex-end; gap: 22px; }
html .elementor .person h3 { font-size: 23px; font-weight: 600; font-stretch: 104%; letter-spacing: -.012em; }
html .elementor .person__rolle { margin-top: 4px; font-size: 15px; color: var(--hell-auf-dunkel); }
html .elementor .person__txt { margin-top: 3.4vh; font-size: 18px; line-height: 1.55; max-width: 34em; color: rgba(255, 255, 255, .88); }
/* gleiche Breite wie der Text darüber (34em bei 18px) */
html .elementor .person__fokus { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--haar-dunkel); font-size: 15px; font-weight: 560; line-height: 1.2; max-width: 612px; }
html .elementor .team__fuss { margin-top: 6vh; font-size: 15px; color: var(--hell-auf-dunkel); }
/* =====================================================================
   7 · Preis (Papiergrau): links die Einordnung, rechts ein offenes Preisblatt — kein Rahmen, kein Schatten,
   keine Quittung; oben die einzige dicke Linie, die sich beim Hereinscrollen aufzieht
   ===================================================================== */
html .elementor .preis { background: var(--papier); }
html .elementor .preis__rahmen { padding: 14vh var(--rand) 11vh; display: grid; grid-template-columns: 40vw 32vw; justify-content: space-between; align-items: start; }
html .elementor .preis__info h2 { font-size: 2.6vw; font-stretch: 110%; font-weight: 560; letter-spacing: -.03em; line-height: 1.04; color: var(--aub); }
html .elementor .preis__lead { margin-top: 3vh; font-size: 19px; line-height: 1.5; color: var(--grau); }
html .elementor .preis__zurueck { margin-top: 4vh; padding-top: 2.4vh; border-top: 1px solid rgba(16, 16, 16, .16); }
html .elementor .preis__zurueck h3 { font-size: 20px; font-weight: 600; font-stretch: 104%; }
html .elementor .preis__zurueck p { margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--grau); }
html .elementor .preis__klein { margin-top: 2.2vh; font-size: 14px; line-height: 1.5; color: var(--grau); }
html .elementor .preisblatt { position: relative; background: #fff; padding: 30px 32px 32px; }
html .elementor .preisblatt__linie { position: absolute; left: 0; right: 0; top: 0; height: var(--linie-dick); background: var(--aub); transform-origin: 0 50%; }
html .elementor .preisblatt__titel { font-size: 17px; font-weight: 600; font-stretch: 106%; color: var(--tinte); }
html .elementor .preisblatt__preis { margin-top: 2.2vh; display: flex; align-items: baseline; gap: 12px; }
html .elementor .preisblatt__preis span:first-child { font-size: 17px; font-weight: 500; color: var(--grau); white-space: nowrap; }
html .elementor .preisblatt__preis span:last-child { font-size: 4.6vw; font-weight: 600; font-stretch: 112%; letter-spacing: -.035em; line-height: .9; font-variant-numeric: lining-nums; white-space: nowrap; color: var(--tinte); }
html .elementor .preisblatt__konditionen { margin-top: 10px; font-size: 15px; color: var(--grau); }
html .elementor .preisblatt__leistungen { margin-top: 3vh; border-top: 1px solid var(--haar-hell); }
html .elementor .preisblatt__leistungen > p { padding: 10px 0; font-size: 16px; line-height: 1.4; border-bottom: 1px solid var(--haar-hell); text-wrap: pretty; }
html .elementor .preisblatt__btn {
  margin-top: 24px; display: flex; justify-content: space-between; align-items: center;
  padding: 17px 20px; background: var(--aub); color: #fff; text-decoration: none; border-radius: 3px;
  font-size: 16px; font-weight: 560; font-stretch: 106%;
}
/* =====================================================================
   8 · Anlässe (Aubergine) · 9 · FAQ (Weiss) · 10 · Anfrage · 11 · Schluss (Aubergine)
   ===================================================================== */
html .elementor .anlaesse { background: var(--aub); color: #fff; padding: 20vh var(--rand) 16vh; text-align: center; }
html .elementor .anlaesse__liste > p { font-size: 7vw; font-stretch: 120%; font-weight: 560; letter-spacing: -.035em; line-height: 1.1; perspective: 900px; }
html .elementor .anlaesse__liste > p .c { display: inline-block; }
/* FAQ auf Weiss: jede Frage rollt aus ihrer Zeile (Maske .frage__zeile) hoch */
html .elementor .faq { background: var(--weiss); color: var(--tinte); padding: 10vh var(--rand) 9vh; display: grid; grid-template-columns: 1fr 1.9fr; column-gap: 6vw; align-items: start; }
html .elementor .faq__kopf h2 { font-size: 3vw; font-stretch: 110%; font-weight: 560; letter-spacing: -.03em; line-height: 1.04; color: var(--aub); }
html .elementor .faq__kopf p { margin-top: 22px; font-size: 19px; color: var(--grau); }
html .elementor .faq__kopf .linkbtn { margin-top: 30px; color: var(--aub); }
html .elementor .frage { border-top: 1px solid rgba(16, 16, 16, .18); }
html .elementor .frage:last-child { border-bottom: 1px solid rgba(16, 16, 16, .18); }
html .elementor .frage summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 19px 0; font-size: 19px; font-weight: 540; font-stretch: 104%; letter-spacing: -.01em; }
html .elementor .frage summary::-webkit-details-marker { display: none; }
html .elementor .frage__zeile { flex: 1; display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
/* Reserve für Unterlängen (g, p, q) */
html .elementor .frage__txt { display: block; }
html .elementor .frage__icon { position: relative; flex: none; width: 18px; height: 18px; }
html .elementor .frage__icon::before, html .elementor .frage__icon::after { content: ""; position: absolute; left: 0; top: 8.5px; width: 18px; height: 1px; background: var(--tinte); transition: transform .5s var(--out); }
html .elementor .frage__icon::after { transform: rotate(90deg); }
html .elementor .frage[open] .frage__icon::after { transform: rotate(0deg); }
html .elementor .frage__antwort p { padding: 0 64px 24px 0; font-size: 17px; line-height: 1.65; color: var(--grau); max-width: 62ch; }
/* 9b · Treuhand (Papiergrau) direkt vor der Anfrage: zwei Spalten wie Preis und FAQ. Vier Punkte als Raster 2 × 2,
   über jedem eine feine Linie (wie im Bericht); sie zieht sich per --s beim Hereinscrollen auf (app.js) */
html .elementor .treuhand { background: var(--papier); color: var(--tinte); padding: 12vh var(--rand) 12vh; display: grid; grid-template-columns: 1fr 1.25fr; column-gap: 6vw; align-items: start; }
html .elementor .treuhand__kopf h2 { font-size: 2.6vw; font-stretch: 110%; font-weight: 560; letter-spacing: -.03em; line-height: 1.04; color: var(--aub); }
html .elementor .treuhand__kopf p { margin-top: 3vh; font-size: 19px; line-height: 1.5; color: var(--grau); max-width: 28em; }
html .elementor .treuhand__text { font-size: 17px; line-height: 1.55; color: var(--grau); max-width: 40em; }
html .elementor .treuhand__punkte { margin-top: 4.5vh; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3.4vw; row-gap: 3.4vh; }
html .elementor .treuhand__punkt { position: relative; padding-top: 1.8vh; font-size: 17px; font-weight: 560; font-stretch: 104%; line-height: 1.4; text-wrap: pretty; }
html .elementor .treuhand__punkt::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--haar-hell-stark); transform: scaleX(var(--s, 1)); transform-origin: 0 50%; }
html .elementor .treuhand__aktion { margin-top: 5.5vh; display: flex; align-items: center; gap: 24px; }
html .elementor .treuhand__btn {
  flex: none; display: inline-flex; align-items: center; gap: 28px; padding: 17px 20px; background: var(--aub); color: #fff;
  text-decoration: none; border-radius: 3px; font-size: 16px; font-weight: 560; font-stretch: 106%;
}
html .elementor .treuhand__klein { font-size: 14px; line-height: 1.45; color: var(--grau); max-width: 22em; }
/* Formular: zwei Optionen zum Anklicken («Sie sind») — Knopf und Text nebeneinander, die Fläche des Texts klickt mit */
html .elementor .feld.feld--wahl { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 10px; align-items: start; }
/* .feld (später) ist flex */
html .elementor .feld--wahl .feld__titel { grid-column: 1 / -1; font-size: 15px; font-weight: 600; }
/* «.feld input.wahl__knopf»: schlägt die Regeln für Textfelder (.feld input, .feld input:focus, mobil min-height) */
html .elementor .feld input.wahl__knopf { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; padding: 0; display: grid; place-content: center;
  border: 1px solid var(--feldrand); border-radius: 50%; background: #fff; box-shadow: none; cursor: pointer; transition: border-color .2s; }
html .elementor .feld input.wahl__knopf::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--aub); transform: scale(0); transition: transform .15s var(--out); }
html .elementor .feld input.wahl__knopf:checked { border-color: var(--aub); }
html .elementor .feld input.wahl__knopf:checked::before { transform: scale(1); }
html .elementor .feld input.wahl__knopf:focus { box-shadow: none; }
html .elementor .feld input.wahl__knopf:focus-visible { outline: 2px solid var(--aub); outline-offset: 2px; }
/* «.feld--wahl .wahl__text»: schlägt in WordPress die Feldbeschriftung (.feld > label aus .feld > span) */
html .elementor .feld--wahl .wahl__text { font-size: 16px; font-weight: 400; line-height: 1.35; cursor: pointer; }
html .elementor .anfrage, html .elementor .finale { background: var(--aub); color: #fff; }
html .elementor .anfrage { padding: 10vh var(--rand) 8vh; display: grid; grid-template-columns: 1fr 1fr; column-gap: 6vw; align-items: stretch; }
html .elementor .anfrage__text { display: flex; flex-direction: column; }
html .elementor .anfrage__text h2 { font-size: 3vw; font-stretch: 110%; font-weight: 560; letter-spacing: -.03em; line-height: 1.04; }
html .elementor .anfrage__text p { margin-top: 22px; font-size: 19px; line-height: 1.55; color: var(--hell-auf-dunkel); max-width: 30em; }
/* Summe mit einer dicken Linie (keine Doppellinie), unten auf Höhe des Absende-Knopfs */
html .elementor .anfrage__summe { margin-top: auto; padding-top: 20px; max-width: 30em; border-top: var(--linie-dick) solid var(--mauve); }
html .elementor .anfrage__text .anfrage__preis { margin-top: 0; font-size: 40px; font-weight: 600; font-stretch: 110%; letter-spacing: -.025em; line-height: 1.1; color: #fff; }
html .elementor .anfrage__preis span:first-child, html .elementor .anfrage__preis span:last-child { font-size: 17px; font-weight: 500; font-stretch: 100%; letter-spacing: 0; color: var(--hell-auf-dunkel); }
html .elementor .anfrage__preis span:first-child { margin-right: 2px; }
html .elementor .anfrage__preis span:last-child { margin-left: 8px; }
html .elementor .anfrage__text .anfrage__umfang { margin-top: 10px; font-size: 17px; }
html .elementor .formular { background: #fff; color: var(--tinte); padding: 40px 40px 34px; border-radius: 3px; }
html .elementor .formular__hinweis { margin-bottom: 22px; padding: 10px 14px; background: var(--papier); font-size: 14px; color: var(--grau); }
html .elementor .formular__zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
html .elementor .feld { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
html .elementor .feld > label { font-size: 15px; font-weight: 600; }
html .elementor .feld em { font-style: normal; font-weight: 400; color: var(--grau); }
html .elementor .feld input, html .elementor .feld select, html .elementor .feld textarea {
  width: 100%; font: inherit; font-size: 17px; color: var(--tinte); background: #fff;
  border: 1px solid var(--feldrand); border-radius: 2px; padding: 13px 14px; appearance: none; transition: border-color .2s, box-shadow .2s;
}
html .elementor .feld select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234F2057' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
html .elementor .feld textarea { resize: vertical; min-height: 110px; }
html .elementor .feld input::placeholder, html .elementor .feld textarea::placeholder { color: var(--platzhalter); }
html .elementor .feld input:focus, html .elementor .feld select:focus, html .elementor .feld textarea:focus { outline: none; border-color: var(--aub); box-shadow: 0 0 0 3px rgba(79, 32, 87, .14); }
html .elementor .formular__senden { width: 100%; margin-top: 6px; display: flex; justify-content: space-between; align-items: center; padding: 17px 20px; background: var(--aub); color: #fff; border-radius: 3px; font-size: 17px; font-weight: 560; font-stretch: 106%; }
html .elementor .formular__bestellung { margin-top: 14px; font-size: 15px; font-weight: 600; }
html .elementor .formular__fuss { margin-top: 6px; font-size: 14px; color: var(--grau); }
html .elementor .formular__ok { margin-top: 16px; padding: 12px 14px; background: var(--papier); font-size: 15px; }
html .elementor .formular__ok:empty { margin: 0; padding: 0; }
/* leer unsichtbar (Höhe 0), bleibt aber im Accessibility-Baum → Ansage zuverlässig */

/* Schluss: nur der Footer, das Zeichen klein beim Absender (kein grosses zentriertes Logo) */
html .elementor .fuss { display: grid; grid-template-columns: 1fr auto; column-gap: 4vw; row-gap: 2.6vh; align-items: center; padding: 3.6vh var(--rand) 4.2vh; border-top: 1px solid rgba(255, 255, 255, .18); }
html .elementor .fuss__absender { display: flex; align-items: center; gap: 14px; }
html .elementor .fuss__zeichen { width: 32px; height: auto; filter: brightness(0) invert(1); }
html .elementor .fuss__claim { display: flex; flex-direction: column; font-size: 15px; color: var(--hell-auf-dunkel); }
html .elementor .fuss__claim strong { font-size: 17px; font-weight: 600; font-stretch: 106%; color: #fff; }
html .elementor .fuss__recht { grid-column: 1 / -1; display: flex; gap: 28px; font-size: 14px; color: var(--hell-auf-dunkel); }
html .elementor .fuss__recht a { text-decoration: none; }
html .elementor .fuss__recht a:hover { color: #fff; }
/* ---------- Vorschau: der Originalauszug gross ---------- */
html .elementor .vorschau { position: fixed; inset: 0; z-index: 200; }
html .elementor .vorschau[hidden] { display: none; }
html .elementor .vorschau__grund { position: absolute; inset: 0; background: rgba(20, 12, 20, .84); }
html .elementor .vorschau__panel { position: absolute; left: 50%; top: 4vh; bottom: 4vh; width: min(760px, 92vw); transform: translateX(-50%); display: flex; flex-direction: column; background: #fff; color: var(--tinte); border-radius: 3px; overflow: hidden; }
html .elementor .vorschau__kopf { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 24px; border-bottom: 1px solid var(--haar-hell); }
html .elementor .vorschau__kopf p { display: flex; flex-direction: column; font-size: 14px; color: var(--grau); }
html .elementor .vorschau__kopf strong { font-size: 17px; font-weight: 600; font-stretch: 106%; color: var(--tinte); }
html .elementor .vorschau__zu { width: 44px; height: 44px; font-size: 26px; line-height: 1; }
html .elementor .vorschau__bild { flex: 1; overflow: auto; overscroll-behavior: contain; background: #fff; }
html .elementor .vorschau__bild img { display: block; width: 100%; }
html .elementor .vorschau__bild img + img { margin-top: 10px; box-shadow: 0 -10px 0 #ECECEC; }
/* schmaler grauer Schnitt zwischen den Seiten */

/* ---------- Ohne Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {.loader { display: none !important; }

}
/* =====================================================================
   HOCHFORMAT: Handy (M) und Tablet hochkant (T) · FLACH (Handy quer / sehr niedrig)
   Dieselben Abfragen wie in app.js (Q). Nichts hier greift bei 1440×900 oder 1920×1080 — der Desktop bleibt
   Zeile für Zeile wie oben. Jede svh/lvh-Angabe folgt einer vh-Rückfallangabe (ältere iOS).
   ===================================================================== */

/* ---------- A · gemeinsam für HOCH (M + T) ---------- */
@media (max-width: 699.98px), (max-width: 767.98px) and (orientation: landscape), (max-width: 1024px) and (max-height: 520px), (min-width: 700px) and (max-width: 1199.98px) and (orientation: portrait) {html .elementor .linkbtn, html .elementor .kopf__marke { min-height: 44px; }
/* Tippflächen mindestens 44 px hoch */

  /* 1 · Einstieg: Bühne = grosse Höhe (lvh), Inhalte an der kleinen sichtbaren Höhe (svh) ausgerichtet */
  html .elementor .bericht { height: calc((var(--szene) + 200) * 1vh); height: calc((var(--szene) + 200) * 1lvh); }
html .elementor .bericht__buehne { height: 100vh; height: 100lvh; }
html .elementor .studio__video { object-position: 38% 50%; }
html .elementor .hero-h1 > .hero-h1__l { top: auto; bottom: 54vh; bottom: calc(100lvh - 46svh); }
html .elementor .hero-h1 > .hero-h1__r { top: 46vh; top: 46svh; }
html .elementor .hero-preis { left: var(--rand); right: var(--rand); max-width: none; bottom: var(--cz); bottom: calc(100lvh - 100svh + var(--cz)); }
html .elementor .hero-legende { left: var(--rand); right: var(--rand); top: 0; bottom: auto; text-align: center; font-size: 14px; }
html .elementor .objekt { left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 1122 / 1402; }
html .elementor .statement { left: var(--rand); right: var(--rand); top: 0; width: auto; transform: none; }
/* 2 · Expertin (Vorhang) */
  html .elementor .expertin { margin-top: -100vh; margin-top: -100lvh; min-height: 100vh; min-height: 100lvh; }
html .elementor .expertin__zitat { width: auto; }
/* 3 · Bericht */
  html .elementor .leistung__kopf { grid-template-columns: 1fr; row-gap: 20px; }
/* 4 · Einblick: Spalten auflösen, der Hinweis steht am Schluss; kein Halt (der Wechsel läuft beim Durchscrollen) */
  html .elementor .einblick__links, html .elementor .einblick__rechts { display: contents; }
html .elementor .hinweis { order: 1; }
html .elementor .einblick__blatt { width: 100%; height: auto; aspect-ratio: 1600 / 2265; }
html .elementor .notizgruppe { position: relative; }
/* Raster/Spalten am Abschnitt selbst (die Bühne löst sich auf); seitlich abschneiden: Blatt 2 wartet ausserhalb
     des Bildes und darf die Seite nie breiter machen */
  html .elementor .einblick { display: grid; overflow-x: clip; }
html .elementor .einblick__buehne { display: contents; }
html.js .elementor .einblick { min-height: 0; }
/* 5 · Ablauf: senkrechter Strahl links der Schritte (Lage und Punkte setzt das Skript) */
  html .elementor .ablauf { height: auto; }
html .elementor .ablauf__rahmen { position: relative; top: auto; height: auto; overflow: visible; }
html .elementor .ablauf__h2, html .elementor .zeitachse__label, html .elementor .ablauf__termin { position: static; transform: none; width: auto; white-space: normal; opacity: 1; }
html .elementor .zeitachse__label { margin-top: 20px; font-size: 16px; font-weight: 560; }
html .elementor .stufen { position: relative; inset: auto; margin-top: 32px; grid-template-columns: 1fr; row-gap: 32px; padding-left: 36px; opacity: 1; }
html .elementor .stufe { transition: opacity .5s var(--out); }
html .elementor .stufe.is-an { opacity: 1; }
html .elementor .stufe h3 { font-size: 19px; }
html .elementor .stufe p { font-size: 16px; }
html .elementor .zeitachse { left: 6px; right: auto; width: 1px; }
html .elementor .zeitachse__linie { left: 0; right: 0; top: 0; bottom: 0; transform: none; }
html .elementor .zeitachse__fuellung { left: -1px; right: auto; top: 0; width: 3px; height: 100%; transform: scaleY(0); transform-origin: 50% 0; }
html .elementor .zeitachse__punkt { left: 0; top: var(--py, 0); margin: -6px 0 0 -5.5px; opacity: 1; transition: background-color .4s, box-shadow .4s; }
html .elementor .zeitachse__punkt.is-an { background: var(--aub); box-shadow: inset 0 0 0 1.5px var(--aub); }
html .elementor .zeitachse__ende { left: -7px; right: auto; top: auto; bottom: 0; width: 15px; height: 2px; opacity: 1; transition: background-color .4s; }
html .elementor .zeitachse__ende.is-an { background: var(--aub); }
html .elementor .ablauf__termin { margin-top: 32px; }
/* 6 · Team */
  html .elementor .team__kopf { grid-template-columns: 1fr; row-gap: 20px; }
/* 7 · Preis: Überschrift, Einordnung, Preisblatt, dann Rückerstattung und Kleingedrucktes */
  html .elementor .preis__rahmen { display: flex; flex-direction: column; }
html .elementor .preis__info { display: contents; }
html .elementor .preis__lead { order: 1; margin-top: 16px; font-size: 17px; }
html .elementor .preisblatt { order: 2; margin-top: 32px; }
html .elementor .preis__zurueck { order: 3; margin-top: 40px; }
html .elementor .preis__klein { order: 4; }
html .elementor .preisblatt__preis { flex-direction: column; align-items: flex-start; gap: 4px; }
html .elementor .preisblatt__btn { min-height: 56px; }
/* 8 · Anlässe: das längste Wort («Standortbestimmung», 10.5em) füllt genau die Breite */
  /* optisch mittig: oben liegt über der Versalhöhe schon etwa 6 px Zeilenraum, unten endet die Unterlänge (g) am Rand */
  html .elementor .anlaesse { padding: 7.2vh var(--rand) 8vh; }
html .elementor .anlaesse__liste > p { font-size: calc((100vw - 2 * var(--rand)) / 10.8); white-space: nowrap; }
/* 9 · FAQ */
  html .elementor .faq { grid-template-columns: 1fr; row-gap: 32px; }
html .elementor .treuhand { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
html .elementor .faq__kopf p { margin-top: 16px; font-size: 17px; }
html .elementor .faq__kopf .linkbtn { margin-top: 18px; }
html .elementor .frage summary { padding: 18px 0; gap: 16px; }
html .elementor .frage__antwort p { padding: 0 0 22px; font-size: 16px; }
/* 10 · Anfrage: Felder gross genug für den Daumen, 17px (kein Zoom beim Tippen auf iOS) */
  html .elementor .anfrage { grid-template-columns: 1fr; row-gap: 40px; }
html .elementor .anfrage__text p { margin-top: 16px; font-size: 17px; }
html .elementor .anfrage__summe { margin-top: 32px; padding-top: 16px; }
html .elementor .feld input, html .elementor .feld select, html .elementor .feld textarea { min-height: 50px; font-size: 17px; }
html .elementor .formular__senden { min-height: 56px; }
/* 12 · Vorschau: keine Wisch-Bewegung durch den Hintergrund */
  html .elementor .vorschau__grund, html .elementor .vorschau__kopf { touch-action: none; }

}
/* ---------- B · Tablet hochkant (T): Desktop-Takt, Tablet rückt nach oben ---------- */
@media (min-width: 700px) and (max-width: 1199.98px) and (orientation: portrait) {:root { --rand: 32px; --cz: 104px; }
html .elementor .kopf { padding: 22px var(--rand); }
html .elementor .cta { bottom: 24px; }
html .elementor .bericht { --szene: 130; }
html .elementor .hero-h1 { font-size: 6vh; font-size: min(7.2vw, 6svh); }
html .elementor .hero-preis__zahl span:first-child { font-size: 28px; }
html .elementor .statement__txt { font-size: clamp(24px, 3.2vw, 30px); line-height: 1.32; }
html .elementor .statement__fakten { margin-top: 28px; font-size: 17px; }
html .elementor .statement__visum { margin-top: 14px; font-size: 17px; }
html .elementor .leistung__h2, html .elementor .einblick__links h2, html .elementor .ablauf__h2, html .elementor .team__kopf h2, html .elementor .preis__info h2, html .elementor .faq__kopf h2, html .elementor .anfrage__text h2, html .elementor .expertin__h2, html .elementor .treuhand__kopf h2 { font-size: 44px; }
html .elementor .expertin { padding: 128px var(--rand) calc(var(--cz) + 40px); }
html .elementor .expertin__zitat { margin-top: 48px; max-width: 30em; font-size: clamp(26px, 3.6vw, 32px); }
html .elementor .leistung, html .elementor .einblick, html .elementor .ablauf, html .elementor .team, html .elementor .faq, html .elementor .anfrage, html .elementor .preis__rahmen, html .elementor .treuhand { padding: 120px var(--rand) 104px; }
html .elementor .schritte { column-gap: 24px; row-gap: 48px; margin-top: 64px; }
html .elementor .schritt__kopf { font-size: 22px; }
/* Einblick: Auszug links, Notizen rechts auf seiner Höhe (Linien zeigen ins Blatt), Texte über die volle Breite.
     Beide Notizgruppen liegen in derselben Zelle neben dem Auszug (Reihe 5: nach Überschrift, Text, Zwischentitel, Text) */
  html .elementor .einblick { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; align-items: start; }
html .elementor .einblick__links > *, html .elementor .einblick__labels, html .elementor .einblick__fuss { grid-column: 1 / -1; max-width: 40em; }
html .elementor .einblick__blatt { grid-column: 1; grid-row: 5; margin-top: 48px; }
html .elementor .notizgruppe { grid-column: 2; grid-row: 5; margin-top: 48px; align-self: stretch; }
html .elementor .notiz { left: -40px; right: 0; }
html .elementor .notiz__strich { width: 64px; flex: none; }
html .elementor .notiz__txt { width: auto; flex: 1; }
html .elementor .einblick__labels { position: static; display: grid; width: auto; margin-top: 24px; }
html .elementor .einblick__fuss { position: static; width: auto; margin-top: 10px; }
html .elementor .hinweis { margin-top: 48px; }
html .elementor .stufen { padding-left: 44px; max-width: 640px; }
html .elementor .team__personen { column-gap: 40px; }
html .elementor .preisblatt { max-width: 640px; padding: 32px 36px; }
html .elementor .preisblatt__preis span:last-child { font-size: 88px; }
html .elementor .preisblatt__leistungen { display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); column-gap: 32px; }
html .elementor .frage summary { font-size: 19px; }
html .elementor .formular { padding: 36px; }
html .elementor #formular { scroll-margin-top: 100px; }
html .elementor .fuss__recht a { display: inline-block; padding: 12px 0; }

}
/* ---------- C · Handy (M): fünf Haltebilder im Einstieg, danach ruhige Stapel ---------- */
@media (max-width: 699.98px), (max-width: 767.98px) and (orientation: landscape), (max-width: 1024px) and (max-height: 520px) {:root { --rand: 20px; --cz: 84px; }
html .elementor main p, html .elementor main li, html .elementor blockquote { hyphens: auto; }
/* Kopfzeile: Zeichen + Name als Einheit mittig; die Zielgruppe steht klein und mittig darunter und weicht beim ersten
     Scrollen (Kundenwunsch 29.09.: auf dem Handy zentriert). Die Zielgruppe bleibt so breit wie ihr Text (keine
     Tippfläche über die ganze Breite) */
  html .elementor .kopf { padding: 12px var(--rand); justify-content: center; }
html .elementor .kopf__zeichen { width: 32px; }
html .elementor .kopf__name strong { font-size: 15px; }
html .elementor .kopf__ziel { position: absolute; left: 0; right: 0; top: 64px; width: fit-content; max-width: calc(100% - 2 * var(--rand)); margin-inline: auto; font-size: 14px; text-align: center; }
html .elementor .kopf--deckend .kopf__ziel { visibility: hidden; }
html .elementor .cta { bottom: 12px; bottom: max(12px, env(safe-area-inset-bottom)); padding: 16px 20px 16px 22px; gap: 14px; white-space: nowrap; }
/* einzeilig (fest positioniert, sonst schmaler Umbruch) */

  /* 1 · Einstieg */
  html .elementor .bericht { --szene: 190; }
html .elementor .hero-h1 { font-size: 10.8vw; font-size: min(10.8vw, 6.8svh); }
html .elementor .hero-h1 > .hero-h1__l { left: var(--rand); right: var(--rand); white-space: normal; text-wrap: balance; }
html .elementor .hero-preis__zahl span:first-child { font-size: 24px; }
html .elementor .hero-preis__check { margin-top: 6px; }
html .elementor .hero-preis .linkbtn { margin-top: 6px; padding: 13px 0 11px; }
html:not(.hero-flach) .elementor .hero-preis { text-align: center; }
/* mittig unter dem Tablet, wie Tablet und Legende */
  /* Aussage und Fakten teilen sich denselben Platz (nie gleichzeitig sichtbar). Beide stehen mittig im freien Raum
     zwischen Tablet und Knopf: das Skript setzt --st-raum, die beiden 1fr-Zeilen nehmen den Rest je zur Hälfte */
  html .elementor .statement { display: grid; grid-template-rows: 1fr auto auto 1fr; min-height: var(--st-raum, 0px); }
html .elementor .statement__txt { grid-area: 1 / 1 / 5 / 2; align-self: center; font-size: clamp(18px, 4.9vw, 21px); line-height: 1.38; }
html .elementor .statement__fakten { grid-area: 2 / 1; margin-top: 0; font-size: 16px; line-height: 1.5; }
html .elementor .statement__fakten p + p { margin-top: 6px; }
html .elementor .statement__visum { grid-area: 3 / 1; align-self: start; margin-top: 14px; font-size: 16px; }
html .elementor .statement__visum strong { display: block; margin-right: 0; }
/* Aussage, Eckdaten und Vermerk mittig unter dem Tablet, wie Angebot und Legende (Kundenwunsch 29.09.) */
  html:not(.hero-flach) .elementor .statement { text-align: center; }
/* mittig gesetzt fällt ein einzelnes Restwort auf: kurze Absätze ausgleichen, die Aussage ohne Restwort */
  html:not(.hero-flach) .elementor .statement__fakten p, html:not(.hero-flach) .elementor .statement__visum { text-wrap: balance; }
html:not(.hero-flach) .elementor .statement__txt { text-wrap: pretty; }
/* Überschriften */
  html .elementor .leistung__h2, html .elementor .einblick__links h2, html .elementor .ablauf__h2, html .elementor .team__kopf h2, html .elementor .preis__info h2, html .elementor .faq__kopf h2, html .elementor .anfrage__text h2, html .elementor .expertin__h2, html .elementor .treuhand__kopf h2 { font-size: clamp(27px, 8vw, 34px); font-stretch: 106%; line-height: 1.06; }
html .elementor .leistung, html .elementor .einblick, html .elementor .ablauf, html .elementor .team, html .elementor .faq, html .elementor .anfrage, html .elementor .preis__rahmen, html .elementor .treuhand { padding: 88px var(--rand) 72px; }
/* Treuhand: Punkte untereinander, Knopf über die volle Breite, Satz darunter */
  html .elementor .treuhand__kopf p { margin-top: 16px; font-size: 17px; }
html .elementor .treuhand__text { font-size: 16px; }
html .elementor .treuhand__punkte { grid-template-columns: 1fr; row-gap: 18px; margin-top: 28px; }
html .elementor .treuhand__punkt { padding-top: 14px; font-size: 16px; }
html .elementor .treuhand__aktion { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 32px; }
html .elementor .treuhand__btn { justify-content: space-between; min-height: 56px; }
/* 2 · Expertin: nur so hoch wie der Inhalt (der Vorhang deckt trotzdem, die nächste Sektion schliesst direkt an) */
  html .elementor .expertin { min-height: 0; padding: 92px var(--rand) 64px; }
html .elementor .expertin__zitat { margin-top: 28px; font-size: clamp(21px, 5.8vw, 25px); line-height: 1.32; }
html .elementor .expertin__person { margin-top: 32px; padding-top: 0; gap: 16px; }
html .elementor .expertin__person strong { font-size: 17px; }
/* 3 · Bericht: alle sechs offen untereinander */
  html .elementor .leistung__intro { font-size: 17px; }
html .elementor .schritte { grid-template-columns: 1fr; margin-top: 40px; row-gap: 28px; }
html .elementor .schritt { padding-top: 16px; }
html .elementor .schritt__kopf { font-size: 22px; }
html .elementor .schritt h3 { margin-top: 8px; font-size: 17px; }
html .elementor .schritt h3 + p { font-size: 16px; }
/* 4 · Einblick */
  html .elementor .einblick { display: flex; flex-direction: column; }
html .elementor .einblick__links h2 { font-size: clamp(26px, 7.4vw, 30px); }
html .elementor .einblick__links > p { margin-top: 16px; font-size: 16px; }
html .elementor .einblick__links h3 { margin-top: 36px; font-size: clamp(22px, 6.2vw, 26px); }
html .elementor .einblick__blatt { margin-top: 32px; max-width: 440px; align-self: center; }
/* Blatt 2 liegt weniger weit rechts und flacher (B2M in app.js): die gedrehte Ecke bleibt im schmalen Bild */
  html .elementor .einblick__img--2 { transform: translate(1.2%, 1.8%) rotate(2.2deg); }
/* beide Notizlisten untereinander, jede mit ihrer Seite als Überschrift; die wechselnde Legende entfällt */
  html .elementor .notizgruppe__titel { display: block; margin-top: 28px; font-size: 15px; color: var(--mauve); }
html .elementor .notizgruppe--1 .notizgruppe__titel { margin-top: 24px; }
html:not(.js) .elementor .notizgruppe--1 { visibility: visible; }
html .elementor .einblick__labels { display: none; }
html .elementor .notizen { margin-top: 8px; }
html .elementor .notiz { position: static; transform: none; padding: 6px 0; }
html .elementor .notiz__strich { width: 28px; flex: none; }
html .elementor .notiz__txt { margin-left: 14px; width: auto; font-size: 16px; }
html .elementor .einblick__fuss { position: static; width: auto; margin-top: 16px; }
html .elementor .hinweis { margin-top: 40px; }
/* Handy hochkant mit Szene (app.js setzt .einblick--steht, --stick-oben, --halt-rest; Kai 02.10.): das Blatt bleibt
     unter der Kopfzeile stehen, die Notizen ziehen darunter durch und verschwinden hinter ihm. Rand unten = alles unter
     den Notizen: so löst es sich, sobald die letzte Notiz hinter ihm liegt; Gruppe 1 holt den Rand zurück (Fluss gleich).
     Auf niedrigen Bildschirmen etwas kleiner: es nimmt höchstens zwei Drittel des Platzes unter der Kopfzeile ein. */
  html.js .elementor .einblick--steht .einblick__blatt { position: sticky; top: var(--stick-oben, 80px); z-index: 2;
    width: min(100%, 440px, calc((100vh - var(--stick-oben, 80px)) * .466));
    width: min(100%, 440px, calc((100svh - var(--stick-oben, 80px)) * .466));
    margin-bottom: var(--halt-rest, 0px); }
html.js .elementor .einblick--steht .notizgruppe--1 { margin-top: calc(-1 * var(--halt-rest, 0px)); }
/* Fläche in der Abschnittsfarbe links und rechts des Blatts (und im Spalt zur Kopfzeile, 12 px = Luft aus app.js):
     die Notizen verschwinden ganz, statt neben dem schmaleren Blatt hervorzuschauen. Nach oben reicht sie nur in den
     eigenen Rand des Blatts (32 px), deckt also nie den Text darüber; seitlich schneidet der Abschnitt ab. */
  html.js .elementor .einblick--steht .einblick__blatt::before { content: ''; position: absolute; z-index: -1; top: -12px; bottom: 0; left: -50vw; right: -50vw; background: var(--nacht); }
/* 6 · Team */
  html .elementor .team__kopf p { font-size: 17px; }
html .elementor .team__personen { grid-template-columns: 1fr; margin-top: 48px; row-gap: 48px; }
html .elementor .person h3 { font-size: 20px; }
html .elementor .person__txt { margin-top: 20px; font-size: 16px; }
html .elementor .person__fokus { max-width: none; }
html .elementor .team__fuss { margin-top: 40px; }
/* 7 · Preis: das Blatt randabfallend; oben und vor dem Blatt kompakter, die Zahl etwas kleiner (Kundenwunsch) */
  html .elementor .preis__rahmen { padding-top: 56px; }
html .elementor .preisblatt { margin-top: 20px; margin-inline: calc(-1 * var(--rand)); padding: 28px var(--rand); }
html .elementor .preisblatt__preis span:last-child { font-size: min(14vw, 56px); }
html .elementor .preisblatt__leistungen > p { padding: 12px 0; }
/* 9 · FAQ · 10 · Anfrage · 11 · Footer */
  html .elementor .frage summary { font-size: 17px; }
html .elementor .anfrage__text .anfrage__preis { font-size: 32px; }
html .elementor .formular { padding: 24px 20px; }
html .elementor .formular__zeile { grid-template-columns: 1fr; gap: 0; }
html .elementor #formular { scroll-margin-top: 76px; }
/* Footer mittig (Kundenwunsch 29.09.): Zeichen + Claim als Einheit, darunter Knopf und Rechtliches. Der Claim bricht
     vor «Schweizer» um (Span im Claim, am Desktop eine Zeile) und wird nie getrennt */
  html .elementor .fuss { grid-template-columns: 1fr; row-gap: 20px; justify-items: center; padding: 28px var(--rand); }
html .elementor .fuss__recht { justify-content: center; }
html .elementor .fuss__recht a { display: inline-block; padding: 12px 0; }
html .elementor .fuss__claim { hyphens: manual; }
html .elementor .fuss__claim strong span { display: block; }
/* 12 · Vorschau als Vollbild-Blatt */
  html .elementor .vorschau__panel { left: 0; top: 0; bottom: 0; width: auto; right: 0; transform: none; border-radius: 0; }
html .elementor .vorschau__kopf { padding: 12px 12px 12px var(--rand); }

}
/* ---------- D · sehr schmale Handys ---------- */
@media (max-width: 374px) {:root { --rand: 16px; }
/* «Unternehmensbewertung für» braucht bei 17px 242.8 px, bei 320 px Breite sind nur 242 px frei → «für» stünde allein */
  html .elementor .fuss__claim strong { font-size: 16px; }

}
/* ---------- E · ruhige Bühne ohne Szene: Handy quer, «Bewegung reduzieren» im Hochformat, ohne JavaScript ---------- */
@media (max-width: 699.98px), (max-width: 767.98px) and (orientation: landscape), (max-width: 1024px) and (max-height: 520px), (min-width: 700px) and (max-width: 1199.98px) and (orientation: portrait) {:is(html:not(.js), html.hero-flach) .elementor .bericht { height: auto; }
:is(html:not(.js), html.hero-flach) .elementor .bericht__buehne { position: relative; height: auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; gap: 20px; padding: 96px var(--rand) calc(var(--cz) + 16px); }
:is(html:not(.js), html.hero-flach) .elementor .hero-h1 { position: relative; z-index: 3; font-size: clamp(32px, 8vw, 44px); }
:is(html:not(.js), html.hero-flach) .elementor .hero-h1 > span { position: relative; inset: auto; white-space: normal; text-align: left; }
:is(html:not(.js), html.hero-flach) .elementor .objekt { position: relative; left: auto; top: auto; width: min(100%, 340px); height: auto; align-self: center; order: 1; }
:is(html:not(.js), html.hero-flach) .elementor .hero-legende { position: relative; inset: auto; text-align: center; order: 2; }
:is(html:not(.js), html.hero-flach) .elementor .hero-preis { position: relative; inset: auto; order: 3; }
:is(html:not(.js), html.hero-flach) .elementor .statement { position: relative; inset: auto; transform: none; width: auto; opacity: 1; order: 4; display: block; }
:is(html:not(.js), html.hero-flach) .elementor .statement__fakten { margin-top: 20px; }
:is(html:not(.js), html.hero-flach) .elementor .expertin { margin-top: 0; }
:is(html:not(.js), html.hero-flach) .elementor .kopf { position: absolute; }

}
@media (max-width: 1024px) and (max-height: 520px) {:root { --rand: max(20px, calc((100vw - 760px) / 2)); }

}


/* ===== Ergänzungen für die Elementor-Fassung ===== */
/* Formular-Meldungen (Elementor blendet sie nach dem Absenden ein) */
html .elementor .formular__ok, html .elementor .formular__fehler { margin-top: 16px; padding: 12px 14px; background: var(--papier); color: var(--tinte); font-size: 15px; text-align: left; }
html .elementor .formular__fehler { background: #FBEDED; }
/* Formular, wenn der Browser JavaScript ganz abgeschaltet hat: Hinweis mit Kontaktadresse statt Absende-Knopf
   (Elementors Formular sendet nur mit Skript); im Editor sichtbar, damit der Text bearbeitbar bleibt */
html .elementor .formular__ohne-js { display: none; margin-top: 6px; padding: 12px 14px; background: var(--papier); color: var(--tinte); font-size: 15px; }
@media (scripting: none) {
  html .elementor .formular__ohne-js { display: block; }
  html .elementor .formular__senden { display: none; }
}
body.elementor-editor-active .elementor .formular__ohne-js { display: block; }
/* Vorschau-Dialog: ohne Skript und vor dem Start verborgen (das Skript setzt hidden und .is-bereit) */
html .elementor .vorschau:not(.is-bereit) { display: none; }

/* ===== Impressum und Datenschutz (ohne Animations-Skript): Kopfzeile im Fluss, ruhiger Lesetext =====
   Absätze und Zwischentitel brauchen keine eigene Klasse: neue Absätze in .recht sehen im Editor sofort richtig aus. */
html body .elementor .kopf.kopf--seite { position: relative; }
html .elementor .recht { display: block; max-width: calc(44em + 2 * var(--rand)); padding: 8vh var(--rand) 14vh; }
html .elementor .recht h1 { margin-bottom: 6vh; font-size: clamp(36px, 4vw, 60px); font-stretch: 110%; font-weight: 560; letter-spacing: -.03em; line-height: 1.04; color: var(--aub); hyphens: manual; overflow-wrap: break-word; }
html .elementor .recht h2 { margin-top: 44px; font-size: 20px; font-weight: 600; font-stretch: 104%; letter-spacing: -.01em; line-height: 1.3; color: var(--tinte); }
html .elementor .recht p { margin-top: 22px; font-size: 17px; line-height: 1.65; color: var(--grau); }
html .elementor .recht :is(h1, h2) + p { margin-top: 10px; }
html .elementor .recht h1 + p { margin-top: 0; }
html .elementor .recht strong { font-weight: 600; color: var(--tinte); }
html .elementor .recht a { color: var(--aub); text-decoration: underline; text-underline-offset: 3px; }
/* Fokusrahmen auf dunklem Grund auch ohne Skript (Rechtsseiten setzen kein data-ton): Mauve, auf der weissen Formularkarte Aubergine */
html .elementor .ton-dunkel :focus-visible { outline-color: var(--mauve); }
html .elementor .ton-dunkel .formular :focus-visible { outline-color: var(--aub); }
/* Ohne Skript öffnet sich das Vorschau-Fenster nicht: Knöpfe dafür ausblenden (im Editor bleiben sie bearbeitbar) */
html:not(.js) body:not(.elementor-editor-active) .elementor .js-vorschau { display: none; }
/* Pfeil in Knöpfen ohne Skript (Rechtsseiten, Editor): wie .arr gedreht */
html:not(.js) .elementor .linkbtn > span:last-child:not(:first-child) { display: inline-block; transform: rotate(-45deg); line-height: 1; }
@media (max-width: 699.98px) {
  html .elementor .recht { padding: 56px var(--rand) 72px; }
  html .elementor .recht h1 { margin-bottom: 36px; font-size: clamp(30px, 9vw, 40px); }
  html .elementor .recht h2 { margin-top: 36px; font-size: 18px; }
  html .elementor .recht p { font-size: 16px; }
}

/* ===== Ohne Skript und im Elementor-Editor: ruhige Fassung, alle Inhalte sichtbar =====
   (der Editor lädt kein Animations-Skript; dort gilt html:not(.js) für alle Breiten) */
html:not(.js) .elementor .bericht { height: auto; }
html:not(.js) .elementor .bericht__buehne { position: relative; height: auto; min-height: 100vh; display: flex; flex-direction: column; gap: 20px; padding: 120px var(--rand) 120px; }
html:not(.js) .elementor .hero-h1 { position: relative; z-index: 3; font-size: clamp(32px, 5vw, 64px); }
html:not(.js) .elementor .hero-h1 > span { position: relative; inset: auto; white-space: normal; text-align: left; }
html:not(.js) .elementor .objekt { position: relative; left: auto; top: auto; width: min(100%, 420px); height: auto; align-self: center; order: 1; }
html:not(.js) .elementor .hero-legende { position: relative; inset: auto; text-align: center; order: 2; }
html:not(.js) .elementor .hero-preis { position: relative; inset: auto; order: 3; max-width: none; }
html:not(.js) .elementor .statement { position: relative; inset: auto; transform: none; width: auto; max-width: 56em; opacity: 1; order: 4; display: block; }
html:not(.js) .elementor .statement__txt { font-size: 22px; }
html:not(.js) .elementor .statement__fakten { margin-top: 20px; }
html:not(.js) .elementor .expertin { margin-top: 0; }
html:not(.js) .elementor .kopf { position: absolute; }
html:not(.js) .elementor .cta { position: relative; left: auto; bottom: auto; transform: none; margin: 112px var(--rand) 28px; }   /* unter der Kopfzeile, die hier über der Bühne liegt */
/* Handy: die Kopfzeile steht dort mittig (Kundenwunsch 29.09.), der Knopf darunter auch */
@media (max-width: 699.98px), (max-width: 767.98px) and (orientation: landscape), (max-width: 1024px) and (max-height: 520px) {
  html:not(.js) .elementor .cta { display: flex; width: fit-content; margin-inline: auto; }
}
html:not(.js) .elementor :is(.zeitachse__punkt, .zeitachse__ende, .zeitachse__label, .stufen, .ablauf__termin, .stufe) { opacity: 1; }
html:not(.js) .elementor :is(.zeitachse__linie, .zeitachse__fuellung) { transform: none; }
/* im Editor den Vorschau-Dialog als normalen Block zeigen, damit Titel und Bild bearbeitbar bleiben */
body.elementor-editor-active .elementor .vorschau { display: block; position: relative; inset: auto; z-index: auto; }
body.elementor-editor-active .elementor .vorschau__grund { display: none; }
body.elementor-editor-active .elementor .vorschau__panel { position: relative; left: auto; top: auto; bottom: auto; transform: none; margin: 40px auto; max-height: 90vh; }