/* ═══════════════════════════════════════════════════════════════════════════
   LUMA PEAK MOMENT — ZENTRALE MOBILE-SCHICHT
   ═══════════════════════════════════════════════════════════════════════════

   Diese Datei enthält das komplette Mobil-Layout aller Seiten an einer Stelle.

   WICHTIGSTE REGEL
   ────────────────
   Alles steht in @media (max-width: 1023px).
   Ab 1024px ist diese Datei wirkungslos — der Desktop-Entwurf bleibt unberührt.
   Beim Ergänzen niemals eine Regel außerhalb dieser Media-Query anlegen.

   EINBINDUNG
   ──────────
   Auf jeder Seite direkt NACH dem seiteneigenen <style>-Block:
     <link rel="stylesheet" href="assets/mobile.css">
   Die spätere Position sorgt dafür, dass diese Datei bei gleicher
   Spezifität gewinnt — deshalb ist kaum !important nötig.
   !important steht nur dort, wo im HTML ein style="…"-Attribut
   überschrieben werden muss (botanische Illustrationen).

   AUFBAU
   ──────
   1  Tokens (mobile Abstands- und Größenskala)
   2  Grundlagen: Typografie, Abstände, Seitenrand
   3  Kopfzeile (dreiteilig) + Menü
   4  Komponente A — Wisch-Karussell
   5  Komponente B — Reiter-Leiste
   6  Komponente C — Aufklapp-Liste
   7  Botanische Illustrationen
   8  Instagram-Sektion
   9  Footer
   10 Startseite
   11 Unterseiten
   13 Lesbarkeit (Ausrichtung, Textschnitte, Tastflächen)
   14 Straffung (weniger Scrollstrecke)
   15 Investment-Seite (Reiter, Paketkarten, Add-ons, Zahlungsablauf)
   16 Portfolio-Seite (Umschalter, Foto-Raster, Video-Einträge)
   17 Videografie-Seite (Filme + Add-ons als eine Wisch-Reihe, Film & Foto)
   12 Landscape + kleine Geräte + reduzierte Bewegung
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {

  /* ─────────────────────────────────────────────────────────────────────────
     1 · TOKENS
     Eigenständige mobile Werte — keine herunterskalierten Desktop-Größen.
     ───────────────────────────────────────────────────────────────────────── */
  :root {
    --m-pad: 20px;            /* Seitlicher Innenabstand, überall gleich */
    --m-sec: 34px;            /* Vertikaler Sektionsabstand */
    --m-sec-tight: 26px;      /* Für eng aufeinanderfolgende Sektionen */
    --m-gap: 12px;            /* Abstand zwischen Karten im Karussell */
    --m-head-gap: 10px;       /* Überschrift → Fließtext */
    --m-nav-h: 58px;          /* Höhe der Kopfzeile im Ruhezustand (nur Zeichen) */
    --m-nav-h-big: 88px;      /* … in der großen Form (Zeichen + Schriftzug) */
    --m-radius: 3px;
    --m-tap: 44px;            /* Mindest-Tap-Fläche */
    --m-nav-total: calc(var(--m-nav-h) + env(safe-area-inset-top, 0px));
    --m-nav-total-big: calc(var(--m-nav-h-big) + env(safe-area-inset-top, 0px));
  }

  /* ─────────────────────────────────────────────────────────────────────────
     2 · GRUNDLAGEN
     ───────────────────────────────────────────────────────────────────────── */

  html { -webkit-text-size-adjust: 100%; }

  body {
    overflow-x: hidden;
    /* Fängt Ausreißer ab, die sonst horizontales Scrollen erzeugen */
    max-width: 100vw;
  }

  /* Kein Element darf breiter als der Viewport werden */
  img, video, iframe, table, pre { max-width: 100%; }

  /* Sektionsabstände global auf etwa 55 % des Desktop-Werts.

     Zum !important: Die Seiten setzen ihre Abstände über Klassen
     (.journal-hero { padding: 120px 0 56px } und ähnlich). Ein Selektor
     ohne !important würde dagegen verlieren, und die Sektionen behielten
     ihre Desktop-Abstände. Das ist bewusst eine einzige zentrale Regel —
     kein verstreuter Flicken — und sie gilt nur unter 1024px. */
  section {
    padding-top: var(--m-sec) !important;
    padding-bottom: var(--m-sec) !important;
    padding-left: var(--m-pad);
    padding-right: var(--m-pad);
  }
  /* Vollflächige Hero-Bereiche bringen ihre Abstände selbst mit.
     Nur auf <section> — ein freier Muster-Selektor trifft sonst auch
     andere Elemente, etwa eine Hilfsklasse am <body>. */
  section#hero, section[class*="-hero"], section[id*="-hero"], section.hero {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Karussell-Sektionen laufen randlos, damit die Nachbarkarte am
     Bildschirmrand angeschnitten sichtbar bleibt. Der seitliche Abstand
     wandert dafür auf die Kinder. */
  section.m-flush { padding-left: 0; padding-right: 0; }
  section.m-flush > *:not(.m-carousel):not(.m-tabs-wrap):not(.m-group) {
    padding-left: var(--m-pad);
    padding-right: var(--m-pad);
  }

  /* Typografie */
  h1, .hero-title { font-size: clamp(2rem, 8.6vw, 2.9rem); line-height: 1.12; }
  h2, .sec-title  { font-size: clamp(1.6rem, 6.6vw, 2.2rem); line-height: 1.18; }
  h3             { font-size: clamp(1.15rem, 4.6vw, 1.45rem); line-height: 1.25; }

  p, li, dd, dt, label, input, textarea, select, button, a {
    font-size: 16px;
    line-height: 1.65;
  }
  /* Zeilenlänge 45–70 Zeichen */
  p { max-width: 68ch; }

  .sec-eyebrow, .m-eyebrow {
    font-size: 11px;
    letter-spacing: 0.22em;
    margin-bottom: 10px;
  }

  /* Überschrift → Text enger zusammen */
  .sec-title + p,
  .sec-title + .sec-sub,
  h2 + p { margin-top: var(--m-head-gap); }

  /* Kursive Einleitungen kürzen */
  .sec-sub, .featured-sub, .process-sub, .pos-sub {
    font-size: 15px;
    line-height: 1.6;
    max-width: 60ch;
  }

  /* ── Tap-Flächen ──────────────────────────────────────────────────────
     Alles, was angetippt wird, braucht mindestens 44px in der Höhe.
     Reine Textlinks im Fließtext sind ausgenommen: dort würde eine
     Mindesthöhe den Zeilenfluss auseinanderreißen. */
  /* Punkte-Anzeigen sind ausgenommen: Sie sind absichtlich nur wenige
     Pixel groß und bekommen ihre Tastfläche über ein Pseudo-Element.
     Ohne diese Ausnahme wurden aus 7px-Punkten 44px hohe Striche. */
  button:not([class*="-dot"]):not(.m-dot),
  [role="button"], input[type="submit"], input[type="button"],
  a.btn, a[class*="cta"], a[class*="-link"], a[class*="-btn"],
  .back-link, a.back, .m-back-link {
    min-height: var(--m-tap);
  }
  /* Links, die als eigenständige Schaltfläche stehen (nicht im Textfluss) */
  a[class*="cta"], a[class*="-btn"], .back-link, a.back {
    display: inline-flex;
    align-items: center;
  }

  /* Punkte-Anzeigen der seiteneigenen Diashows.
     Der sichtbare Punkt bleibt klein; die Tap-Fläche wird unsichtbar
     darüber gelegt.

     ACHTUNG — hier stand einmal ein padding mit background-clip.
     Das hat die Punkte in lange helle Balken verwandelt, weil ihre
     Hintergrundfläche mitgewachsen ist. Ein Pseudo-Element ist der
     richtige Weg: es vergrößert nur den Tastbereich, nicht das Aussehen.

     ACHTUNG — `[class$="-dot"]` trifft ALLES, was auf „-dot" endet, auch
     Dinge, die man gar nicht antippt. `.tl-dot` (die Punkte der Zeitleiste
     in der Paket-Detailansicht, investment.html) ist so ein Fall und nimmt
     hier ernsthaften Schaden: Die Regel setzt `position: relative` und
     überschreibt damit das `position: absolute` der Seite. Aus dem absolut
     gesetzten 11×11-Kreis wird ein normales Inline-Element — Inline-Boxen
     ignorieren `width` und `height`, übrig blieb ein 2,7px schmaler,
     26px hoher Strich (26px = Zeilenhöhe 1,65 × 16px), der zudem 21px
     über seiner Uhrzeit hing. Deshalb hier ausgenommen. */
  .slide-dot, .testi-dot, .fs-dot, .vc-dot, .pp-dot,
  [class$="-dot"]:not(.tl-dot) {
    position: relative;
  }
  .slide-dot::after, .testi-dot::after, .fs-dot::after,
  .vc-dot::after, .pp-dot::after, [class$="-dot"]:not(.tl-dot)::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
    /* nur Tastfläche — unsichtbar */
  }
  /* Textlinks, die als eigene Zeile stehen */
  .film-link, .about-cta, .featured-link, .journal-link {
    display: inline-flex !important;
    align-items: center;
    min-height: var(--m-tap);
  }

  /* ── Einblend-Animationen: sicher sichtbar ────────────────────────────
     Die Seiten verstecken viele Elemente hinter Animationen, die ein
     Skript beim Scrollen freigibt (`opacity: 0` als Ausgangszustand).
     Auf dem Handy sprangen mehrere davon nicht an — dadurch fehlten
     ganze Überschriften und Knöpfe, obwohl sie im Quelltext standen.

     Auf Mobile wird deshalb nichts mehr versteckt: Inhalt ist sofort da.
     Das ist auch für die gefühlte Ladezeit besser.

     ACHTUNG — `[class*="-in"]` ist eine TEILSTRING-Suche über das ganze
     class-Attribut, keine Endung. Sie trifft rund vierzig Klassen, die mit
     Einblenden nichts zu tun haben: alles auf `-inner`, `-invest`, `-info`,
     `-input`, `-indicator`. Bei bloßen Hüllen ist das folgenlos — die sind
     ohnehin sichtbar.

     Nicht folgenlos war es bei `.paket-info-panel` (investment.html): Die
     beiden Tafeln liegen `position: absolute` über der Paketkarte und
     verstecken sich ausschließlich über `opacity: 0`; sichtbar werden sie
     erst mit der Klasse `.visible` beim Aufklappen. Hier wurden sie
     dauerhaft auf `opacity: 1` gezwungen und lagen als deckende cremefarbene
     Balken über dem linken und rechten Rand jeder Karte — der Anfangs-
     buchstabe von „Essentials" und „Fokussiert" war schlicht verdeckt.
     Deshalb die Ausnahme.

     Die Teilstring-Regel bleibt trotzdem stehen: `.cta-inner` auf der
     Startseite hängt daran (dort neutralisiert sie ein
     `transform: translateY(-120px)` aus dem Desktop-Entwurf, siehe 4.11).
     Wer sie enger fasst, muss das mitprüfen. */
  .fade-up, .stagger-item, .cta-hw, .cw, .cta-line,
  #contact-cta .cta-btn, .cta-eyebrow,
  [class*="reveal"], [class*="-in"]:not(.slide-img):not(.paket-info-panel) {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
    visibility: visible !important;
  }
  /* Ausnahme: Das Menü braucht seine Einblendung — sie läuft dort
     zuverlässig, weil sie an das Öffnen gekoppelt ist. */
  .mobile-menu-overlay .mobile-menu-item {
    opacity: 0 !important;
    transform: translateY(14px) !important;
    transition: opacity 0.4s ease, transform 0.4s ease !important;
  }
  .mobile-menu-overlay.is-open .mobile-menu-item {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     3 · KOPFZEILE (dreiteilig) + MENÜ
     [ ANFRAGE ]   [ LOGO ]   [ ☰ ]
     ───────────────────────────────────────────────────────────────────────── */

  nav#navbar { display: none !important; }

  .mobile-nav {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    /* `start` statt `center`: Wächst die Leiste in die große Form (siehe
       .m-nav-big weiter unten), sollen Anfrage-Link, DE/EN und Menü-Icon
       exakt dort stehen bleiben, wo sie im Ruhezustand stehen — nur die
       Mitte darf sich ausdehnen. Die beiden Randzellen holen sich die
       Mittigkeit der schmalen Zeile über einen eigenen Außenabstand
       zurück (siehe .m-nav-cta und .m-nav-right). */
    align-items: start;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 10002;
    padding: 0 12px;
    padding-top: env(safe-area-inset-top, 0px);
    height: var(--m-nav-total);
    background: rgba(244, 237, 228, 0.82);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
    backdrop-filter: blur(8px) saturate(1.1);
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transition: box-shadow 0.25s ease, border-color 0.25s ease,
                background 0.25s ease;
  }

  /* Beim Scrollen: Trennlinie + leichter Schatten */
  .mobile-nav.is-scrolled {
    background: rgba(244, 237, 228, 0.94);
    border-bottom-color: rgba(122, 92, 68, 0.18);
    box-shadow: 0 2px 14px rgba(44, 26, 14, 0.07);
  }

  /* ── Kopfzeile beim Runterscrollen wegschieben ─────────────────────────
     Auf dem Handy ist der Bildschirm knapp. Die Leiste folgt deshalb der
     Scrollbewegung: runter schiebt sie nach oben aus dem Bild, rauf holt
     sie zurück. Weil sie dabei Millimeter für Millimeter dem Finger folgt,
     ergibt sich das Tempo von selbst — schnelles Wischen räumt sie schnell
     weg, langsames langsam. Kein fester Schwellwert, keine feste Dauer.

     Bewusst KEIN Übergang auf `transform` im Grundzustand: sonst würde die
     Leiste der Bewegung sichtbar hinterherlaufen. Der Übergang kommt nur
     zum Einrasten dazu, wenn das Scrollen aufhört (.m-nav-snap).
     Bewegt wird ausschließlich `transform` — das läuft auf der Grafik-
     einheit, die Seite muss dafür nichts neu zeichnen. */
  .mobile-nav { will-change: transform; }

  .mobile-nav.m-nav-snap {
    transition: box-shadow 0.25s ease, border-color 0.25s ease,
                background 0.25s ease,
                transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* Ganz oben draußen: auch aus Tab-Reihenfolge und Vorlesefunktion nehmen,
     damit niemand auf eine unsichtbare Leiste tabbt. */
  .mobile-nav.m-nav-off { visibility: hidden; }

  /* Weniger Bewegung gewünscht: Die Leiste folgt weiter dem Finger (das ist
     direkte Reaktion auf die eigene Geste, keine Eigenbewegung), aber das
     Einrasten am Ende passiert ohne Animation. */
  @media (prefers-reduced-motion: reduce) {
    .mobile-nav.m-nav-snap { transition: none; }
  }

  /* Links: Anfrage — Textlink mit feiner Unterlinie statt Kasten.
     Der Rahmen wirkte neben dem zurückhaltenden Logo zu schwer. */
  .m-nav-cta {
    justify-self: start;
    /* Die Leiste richtet ihre Zellen oben aus (siehe .mobile-nav). Dieser
       Außenabstand stellt die Mittigkeit in der schmalen Zeile wieder her
       und hält den Link dort fest, auch wenn die Mitte aufklappt. */
    align-self: start;
    margin-top: calc((var(--m-nav-h) - var(--m-tap)) / 2);
    display: inline-flex;
    align-items: center;
    min-height: var(--m-tap);
    padding: 0 2px;
    border: none;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brown-dark);
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    position: relative;
  }
  .m-nav-cta::after {
    content: '';
    position: absolute;
    left: 2px; right: 2px; bottom: 12px;
    height: 1px;
    background: rgba(122, 92, 68, 0.45);
    transition: background 0.2s ease;
  }
  .m-nav-cta:active::after { background: var(--brown-dark); }

  /* ── Mitte: Marke ──────────────────────────────────────────────────────
     Zwei Zustände auf demselben Markup:

     Ruhezustand   nur das Zeichen, klein und exakt mittig. Solange gelesen
                   und gescrollt wird, soll oben nichts um Aufmerksamkeit
                   bitten — der Schriftzug wäre hier reine Wiederholung.

     Große Form    unter dem Zeichen klappen "Luma" und "Peak Moments" auf —
                   dieselbe Anordnung wie im Kopf der Desktop-Seite
                   (.nav-logo: senkrechter Stapel, Zeichen oben). Das
                   Zeichen selbst bleibt dabei immer gleich groß.
                   Sie kommt am Seitenanfang sofort und sonst nach drei
                   Sekunden Ruhe; geschaltet wird sie in mobile.js.

     `justify-self: center` hält den Stapel unabhängig von der Breite der
     Nachbarzellen in der Bildschirmmitte. `align-self: stretch` gibt ihm
     die volle Höhe der Leiste, sodass `justify-content: center` ihn in
     beiden Zuständen mittig hält — ohne feste Werte pro Zustand. */
  .mobile-nav-logo {
    justify-self: center;
    align-self: stretch;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Kein `gap`: Im Ruhezustand sind die beiden Zeilen 0 Pixel hoch, ein
       Abstand würde das Zeichen trotzdem aus der Mitte schieben. Den
       Abstand tragen deshalb die Zeilen selbst (margin-top). */
    gap: 0;
    min-width: var(--m-tap);
    font-family: 'Cormorant Garamond', serif;
    text-transform: uppercase;
    color: var(--brown-dark);
    text-decoration: none;
    line-height: 1;
  }
  /* Das Zeichen behält in beiden Zuständen dieselbe Größe. Es ist der feste
     Punkt der Kopfzeile — nur der Schriftzug darunter kommt und geht. */
  .mobile-nav-logo img {
    width: 40px; height: 40px;
    object-fit: contain;
    display: block;
  }

  /* Die beiden Zeilen unter dem Zeichen.
     Zugeklappt über `height: 0` statt `display: none`, damit das Aufklappen
     eine Bewegung ist und nicht ein Sprung. `overflow: hidden` schneidet
     die Schrift dabei sauber ab. Der negative rechte Außenabstand gleicht
     den Sperrabstand hinter dem letzten Buchstaben aus — ohne ihn säße der
     Schriftzug sichtbar zu weit links unter dem Zeichen. */
  .m-nav-logo-word,
  .m-nav-logo-sub {
    display: block;
    overflow: hidden;
    height: 0;
    opacity: 0;
    transform: translateY(-6px);
    white-space: nowrap;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                margin-top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.32s ease;
  }
  .m-nav-logo-word {
    font-size: 19px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.3em;
    margin-right: -0.3em;
  }
  .m-nav-logo-sub {
    font-size: 11px;
    font-weight: 300;
    line-height: 13px;
    letter-spacing: 0.28em;
    margin-right: -0.28em;
  }

  /* ── Große Form ────────────────────────────────────────────────────────
     Nur die Leiste wächst, `body { padding-top }` bleibt beim schmalen Maß:
     Der Inhalt darunter soll nicht ruckartig nach unten geschoben werden,
     wenn der Kopf aufklappt. Die Leiste legt sich stattdessen kurz über die
     obersten Pixel — und beim ersten Scrollen ist sie wieder schmal.

     Der Übergang auf `height` sitzt bewusst NUR hier, nicht auf .mobile-nav:
     Beim Aufklappen soll die Leiste wachsen, beim Zuklappen aber sofort
     schmal sein. Denn zugeklappt wird sie nur, weil gerade gescrollt wird —
     und dann zählt freie Sicht, nicht eine halbe Sekunde Nachlauf. Ein
     Nebeneffekt, auf den sich mobile.js verlässt: Direkt nach dem Zuklappen
     misst `messen()` schon die schmale Höhe und schiebt die Leiste damit
     vollständig aus dem Bild.
     `transform` steht mit in der Liste, damit das Einrasten aus
     .m-nav-snap nicht verloren geht, wenn beide Klassen zusammenkommen. */
  .mobile-nav.m-nav-big {
    height: var(--m-nav-total-big);
    transition: box-shadow 0.25s ease, border-color 0.25s ease,
                background 0.25s ease,
                transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1),
                height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .mobile-nav.m-nav-big .m-nav-logo-word {
    height: 20px;
    margin-top: 5px;
    opacity: 1;
    transform: translateY(0);
  }
  .mobile-nav.m-nav-big .m-nav-logo-sub {
    height: 13px;
    margin-top: 2px;
    opacity: 0.75;
    transform: translateY(0);
  }

  /* Weniger Bewegung gewünscht: Der Zustandswechsel bleibt (er trägt die
     Information), nur das Wachsen und Aufklappen passiert ohne Animation.
     Diese Regel steht nach der oben — bei gleicher Spezifität gewinnt damit
     sie, wenn .m-nav-big und .m-nav-snap zusammenkommen. */
  @media (prefers-reduced-motion: reduce) {
    .mobile-nav.m-nav-big { transition: box-shadow 0.25s ease,
                                        border-color 0.25s ease,
                                        background 0.25s ease; }
    .m-nav-logo-word,
    .m-nav-logo-sub { transition: none; }
  }

  /* ── Rechte Zelle: Sprache + Menü ──────────────────────────────────────
     Der Sprachumschalter stand vorher nur unten im Burger-Menü. Gemessen:
     unter etwa 660px Innenhöhe lag er außerhalb des Sichtbereichs, und
     weil die Menüliste den Bildschirm optisch füllt, deutete nichts auf
     weiteren Inhalt darunter hin — er war praktisch nicht vorhanden.

     Sprache und Menü teilen sich hier eine Rasterzelle. Bekäme die
     Kopfzeile stattdessen eine vierte Spalte, säße das Logo nicht mehr
     mittig. */
  .m-nav-right {
    justify-self: end;
    /* Wie beim Anfrage-Link: oben ausgerichtet und um die halbe Differenz
       nach unten gerückt, damit Sprache und Menü in der schmalen Zeile
       mittig sitzen und beim Aufklappen der Mitte stehen bleiben. */
    align-self: start;
    margin-top: calc((var(--m-nav-h) - var(--m-tap)) / 2);
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .m-nav-lang { display: flex; align-items: center; }

  /* ── Sprache: eine Karte mit zwei Seiten ───────────────────────────────
     Vorher zwei Knöpfe à 27px direkt nebeneinander — die kleinste Ziel-
     fläche der Seite, deutlich unter den 44px einer Fingerkuppe, und der
     Nachbar lag zwei Pixel daneben. Jetzt ein Knopf über die volle Tast-
     breite, der die aktuelle Sprache zeigt und beim Antippen auf die
     andere dreht.

     Bei genau zwei Sprachen fällt der Zustand mit der Drehung zusammen:
     0° ist Deutsch, 180° Englisch. mobile.js setzt nur `data-lang`, die
     Drehung selbst passiert hier. `backface-visibility` blendet die
     jeweils abgewandte Seite aus, sodass immer genau eine lesbar ist. */
  .m-lang-toggle {
    width: var(--m-tap);
    height: var(--m-tap);
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    /* Ohne Perspektive wirkt die Drehung flach wie ein Zusammenschieben */
    perspective: 260px;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--brown-dark);
    -webkit-tap-highlight-color: transparent;
  }

  .m-lang-flip {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    /* Leichtes Überschwingen am Ende — die Karte fällt in ihre Lage,
       statt weich auszulaufen. Das Überschwingen bleibt unsichtbar
       falsch herum, weil die Rückseite ausgeblendet ist. */
    transition: transform 0.55s cubic-bezier(0.34, 1.32, 0.48, 1);
  }
  .m-lang-toggle[data-lang="en"] .m-lang-flip { transform: rotateX(-180deg); }

  .m-lang-face {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: grid;
    place-items: center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .m-lang-face-en { transform: rotateX(180deg); }

  /* Rückmeldung beim Antippen: Die Karte gibt kurz nach. */
  .m-lang-toggle:active .m-lang-flip { transform: scale(0.88); }
  .m-lang-toggle[data-lang="en"]:active .m-lang-flip {
    transform: rotateX(-180deg) scale(0.88);
  }

  /* Weniger Bewegung gewünscht: Die Sprache wechselt ohne Drehung. */
  @media (prefers-reduced-motion: reduce) {
    .m-lang-flip { transition: none; }
  }

  /* Rechts: Menü-Icon.
     Steht normalerweise in .m-nav-right (mobile.js hängt es dort ein). Bis
     das Skript läuft — und wenn es ausbleibt — ist es selbst Rasterzelle und
     braucht dieselbe Ausrichtung wie die andere Randzelle. */
  .mobile-nav > .hamburger {
    align-self: start;
    margin-top: calc((var(--m-nav-h) - var(--m-tap)) / 2);
  }
  .hamburger {
    justify-self: end;
    width: var(--m-tap);
    height: var(--m-tap);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  .hamburger-line {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--brown-dark);
    transition: transform 0.26s ease, opacity 0.2s ease;
  }
  .hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  .hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; }
  .hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  /* Inhalt unter die fixierte Kopfzeile schieben */
  body { padding-top: var(--m-nav-total); }
  /* Seiten mit Vollbild-Hero ziehen ihn wieder unter die Leiste */
  body.m-fullhero { padding-top: 0; }

  /* ═══════════════════════════════════════════════════════════════════════
     MENÜ — vollflächig, eigenständig
     ═══════════════════════════════════════════════════════════════════════

     Die Seiten bringen eigene Menü-Regeln mit, die von einer Klasse `.open`
     abhängen und die Einträge sonst auf `opacity: 0` lassen. Diese Logik
     ist entfernt — deshalb setzt der Block hier alles selbst und
     überschreibt die alten Werte ausdrücklich.

     Gestaltung: Statt einer schmalen Schublade nimmt das Menü den ganzen
     Bildschirm ein. Das gibt große, sicher treffbare Ziele und eine ruhige
     Ordnung — auf dem Handy wichtiger als eine Teilansicht der Seite.
     ═══════════════════════════════════════════════════════════════════════ */

  .mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 10003;
    visibility: hidden;
    pointer-events: none;
  }
  .mobile-menu-overlay.is-open {
    visibility: visible;
    pointer-events: auto;
  }
  /* Hintergrund verdunkelt nur den schmalen Rest neben dem Panel */
  .mobile-menu-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(44, 26, 14, 0.35);
    opacity: 0;
    transition: opacity 0.3s ease-out;
  }
  .mobile-menu-overlay.is-open .mobile-menu-backdrop { opacity: 1; }

  .mobile-menu-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 100%;                     /* volle Breite statt Schublade */
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    background: var(--cream, #F4EDE4);
    padding: calc(var(--m-nav-total) + 24px) 26px
             calc(20px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
    box-shadow: none;
  }
  .mobile-menu-overlay.is-open .mobile-menu-panel { transform: translateX(0); }

  .mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;         /* Einträge mittig im Bildschirm */
    gap: 2px;
  }

  /* Die Seiten-CSS lässt die Einträge auf opacity: 0 stehen, weil sie eine
     Klasse erwartet, die es nicht mehr gibt. Hier werden sie sichtbar
     gemacht — mit einem sanften Nachrücken beim Öffnen. */
  .mobile-menu-overlay .mobile-menu-item,
  .mobile-menu-overlay.is-open .mobile-menu-item {
    opacity: 0;
    transform: translateY(14px);
    border-bottom: 1px solid rgba(122, 92, 68, 0.1);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .mobile-menu-overlay.is-open .mobile-menu-item {
    opacity: 1;
    transform: translateY(0);
  }
  .mobile-menu-overlay.is-open .mobile-menu-item:nth-child(1) { transition-delay: 0.06s; }
  .mobile-menu-overlay.is-open .mobile-menu-item:nth-child(2) { transition-delay: 0.10s; }
  .mobile-menu-overlay.is-open .mobile-menu-item:nth-child(3) { transition-delay: 0.14s; }
  .mobile-menu-overlay.is-open .mobile-menu-item:nth-child(4) { transition-delay: 0.18s; }
  .mobile-menu-overlay.is-open .mobile-menu-item:nth-child(5) { transition-delay: 0.22s; }
  .mobile-menu-overlay.is-open .mobile-menu-item:nth-child(6) { transition-delay: 0.26s; }
  .mobile-menu-overlay.is-open .mobile-menu-item:nth-child(7) { transition-delay: 0.30s; }

  .mobile-menu-overlay .mobile-menu-link,
  .mobile-menu-overlay .mobile-dropdown-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 62px;                /* großzügig für den Daumen */
    padding: 6px 2px;
    background: none;
    border: none;
    font-family: 'Cormorant Garamond', serif;
    font-size: 27px !important;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.15;
    color: var(--brown-dark) !important;
    opacity: 1 !important;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transform: none !important;
  }

  /* Aktuelle Seite: kursiv mit feinem Punkt */
  .mobile-menu-overlay .mobile-menu-link[aria-current="page"] {
    font-style: italic;
    color: var(--brown-mid) !important;
  }
  .mobile-menu-overlay .mobile-menu-link[aria-current="page"]::after {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold, #B89A80);
    margin-left: 12px;
    flex: none;
  }

  /* Die Seite baut das Symbol bereits aus zwei Strichen als Plus.
     Nur nicht zusätzlich einen Rahmen-Pfeil darüberlegen — daraus
     wurde sonst ein Kreuz. Beim Aufklappen wird das Plus zum Minus. */
  .mobile-dropdown-arrow {
    border: none !important;
    transform: none !important;
    width: 22px; height: 22px;
    flex: none;
  }
  .mobile-dropdown-toggle[aria-expanded="true"] .mobile-dropdown-arrow::after {
    transform: scaleY(0);
  }

  .mobile-submenu {
    list-style: none;
    margin: 0;
    padding: 0 0 6px 18px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.28s ease-out, opacity 0.2s ease;
  }
  .mobile-dropdown-toggle[aria-expanded="true"] + .mobile-submenu {
    max-height: 220px;
    opacity: 1;
  }
  .mobile-menu-overlay .mobile-submenu-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-family: 'Jost', sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brown-mid) !important;
    text-decoration: none;
    opacity: 1 !important;
  }

  /* Anfrage als deutlicher Abschluss unter der Liste */
  .m-menu-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    margin: 22px 0 16px;
    background: var(--brown-dark);
    color: var(--cream) !important;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-decoration: none;
  }

  /* Sprachumschalter im Menü — jetzt ÜBER der Liste.
     Unten stand er außerhalb des Sichtbereichs (siehe Kopfzeile oben).
     Der Hauptzugang ist nun die Kopfzeile; hier bleibt er als zweiter
     Weg, aber sicher sichtbar. `order` wirkt, weil das Panel eine
     Flex-Spalte ist. */
  .mobile-lang {
    order: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-bottom: 14px;
    margin-top: 0;
    border-top: none;
    border-bottom: 1px solid rgba(122, 92, 68, 0.12);
  }
  .mobile-lang-label {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brown-light);
    margin-right: 4px;
  }
  .mobile-lang-btn {
    min-width: 46px;
    min-height: var(--m-tap);
    padding: 0 12px;
    background: none;
    border: none;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--brown-light);
    cursor: pointer;
  }
  .mobile-lang-btn.active-lang {
    background: none;
    color: var(--brown-dark);
    text-decoration: underline;
    text-underline-offset: 5px;
  }

  /* Schließen-Kreuz oben rechts im Menü */
  .m-menu-close {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 7px);
    right: 14px;
    width: var(--m-tap);
    height: var(--m-tap);
    display: grid;
    place-items: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 2;
  }
  .m-menu-close span {
    position: absolute;
    width: 22px;
    height: 1.5px;
    background: var(--brown-dark);
  }
  .m-menu-close span:first-child { transform: rotate(45deg); }
  .m-menu-close span:last-child  { transform: rotate(-45deg); }

  /* Solange das Menü offen ist, verschwindet der Burger dahinter */
  body.m-menu-open .hamburger { opacity: 0; pointer-events: none; }

  /* Dekoration im Menü entfernen — Block 6 */
  .mobile-panel-botanical { display: none; }

  /* Hintergrund-Scroll sperren, während das Menü offen ist */
  body.m-menu-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     4 · KOMPONENTE A — WISCH-KARUSSELL
     Aus einem bestehenden Grid wird eine Scroll-Snap-Reihe.
     Die Nachbarkarte bleibt angeschnitten sichtbar — das signalisiert,
     dass gewischt werden kann, ganz ohne zusätzlichen Hinweis.
     ───────────────────────────────────────────────────────────────────────── */

  .m-carousel {
    display: flex !important;
    /* Manche Listen stehen auf der Seite als Spalte (flex-direction: column).
       Ohne diese Zeile bleiben die Karten gestapelt und das Karussell
       wirkt wirkungslos — genau das war bei „Was ihr bekommt" der Fall. */
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    gap: var(--m-gap);
    padding: 4px var(--m-pad) 4px;
    scroll-padding-inline: var(--m-pad);
    margin: 0;
    max-width: 100vw;
    /* Scrollleiste ausblenden */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .m-carousel::-webkit-scrollbar { display: none; }

  .m-carousel > * {
    flex: 0 0 var(--m-card, 84vw);
    scroll-snap-align: center;
    scroll-snap-stop: always;
    min-width: 0;
    margin: 0 !important;
  }
  /* Erste/letzte Karte mittig ausrichtbar machen */
  .m-carousel > *:first-child { scroll-snap-align: center; }

  /* Punkte-Anzeige */
  .m-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    padding: 0 var(--m-pad);
  }
  .m-dot {
    width: var(--m-tap);
    height: var(--m-tap);
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
  }
  /* Sichtbarer Punkt sitzt in einer großzügigen Tap-Fläche */
  .m-dot::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(122, 92, 68, 0.3);
    transition: width 0.5s cubic-bezier(0.65, 0, 0.35, 1),
                border-radius 0.5s cubic-bezier(0.65, 0, 0.35, 1),
                background-color 0.5s ease;
  }
  .m-dot[aria-current="true"]::before {
    background: var(--brown-dark);
    width: 16px;
    border-radius: 3px;
  }
  /* Bei vielen Elementen sind einzelne Punkte zu schmal — Zähler ergänzen */
  .m-dots.m-dots-compact { gap: 3px; }
  .m-dots.m-dots-compact .m-dot { width: 22px; height: var(--m-tap); }

  /* Auf dunklem Grund gezeichnet: Braun auf Dunkelbraun war praktisch
     unsichtbar — die Sektion sah aus, als ließe sie sich gar nicht
     blättern. `on-dark` setzt mobile.js anhand der gemessenen
     Hintergrundfarbe (siehe onDarkGround). */
  .m-dots.on-dark .m-dot::before { background: rgba(244, 237, 228, 0.30); }
  .m-dots.on-dark .m-dot[aria-current="true"]::before {
    background: var(--cream-light, #F4EDE4);
  }

  .m-counter {
    text-align: center;
    margin-top: 10px;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--brown-mid);
  }
  .m-counter.on-dark { color: rgba(244, 237, 228, 0.65); }

  /* ── Wisch-Hinweis ──────────────────────────────────────────────────────
     Drei nach rechts laufende Winkel unter der Punkte-Anzeige. Sie laufen
     genau dreimal durch, sobald das Karussell ins Bild kommt, und
     verschwinden endgültig, sobald gewischt wurde.

     Kein Text: Die Seite ist zweisprachig, ein fest verdrahtetes Wort
     bliebe in der englischen Fassung stehen. */
  .m-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 16px;
    margin-top: 5px;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }
  .m-swipe-hint i {
    width: 6px;
    height: 6px;
    border-right: 1.3px solid var(--brown-light);
    border-top: 1.3px solid var(--brown-light);
    transform: rotate(45deg);
    opacity: 0.15;
  }
  .m-swipe-hint.on-dark i {
    border-right-color: rgba(244, 237, 228, 0.75);
    border-top-color: rgba(244, 237, 228, 0.75);
  }
  .m-swipe-hint.is-live i { animation: m-swipe-flow 1.35s ease-in-out 3; }
  .m-swipe-hint.is-live i:nth-child(2) { animation-delay: 0.13s; }
  .m-swipe-hint.is-live i:nth-child(3) { animation-delay: 0.26s; }
  .m-swipe-hint.is-done { opacity: 0; }

  @keyframes m-swipe-flow {
    0%, 100% { opacity: 0.15; }
    45%      { opacity: 0.85; }
  }

  /* Ohne Bewegung: Die Winkel stehen dauerhaft etwas kräftiger da,
     damit der Hinweis auch dann ankommt. */
  @media (prefers-reduced-motion: reduce) {
    .m-swipe-hint.is-live i { animation: none; opacity: 0.45; }
  }

  /* Pfeil-Buttons auf Mobile ausblenden — es wird gewischt */
  .m-carousel-wrap .fs-arrow,
  .slide-arrow,
  .fs-arrow,
  .m-hide-arrows { display: none !important; }

  /* ─────────────────────────────────────────────────────────────────────────
     5 · KOMPONENTE B — REITER-LEISTE
     Horizontal scrollbar, niemals umbrechend.
     ───────────────────────────────────────────────────────────────────────── */

  .m-tabs-wrap {
    position: relative;
    max-width: 100vw;
  }
  /* Weicher Verlauf rechts: es geht noch weiter */
  .m-tabs-wrap::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 34px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(244, 237, 228, 0), var(--cream));
    opacity: 1;
    transition: opacity 0.2s ease;
  }
  .m-tabs-wrap.m-tabs-end::after { opacity: 0; }
  /* Auf dunklem Grund passt der Verlauf sich an */
  .m-tabs-wrap.on-dark::after {
    background: linear-gradient(to right, rgba(44, 26, 14, 0), var(--brown-dark));
  }

  .m-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    gap: 8px;
    padding: 0 var(--m-pad);
    scroll-padding-inline: var(--m-pad);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .m-tabs::-webkit-scrollbar { display: none; }

  .m-tabs > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    min-height: var(--m-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    font-size: 13px;
    letter-spacing: 0.1em;
  }

  /* Weicher Übergang beim Filtern statt hartem Umspringen */
  .m-filter-fade {
    transition: opacity 0.2s ease;
  }
  .m-filter-fade.m-filtering { opacity: 0; }

  /* ─────────────────────────────────────────────────────────────────────────
     6 · KOMPONENTE C — AUFKLAPP-LISTE (Accordion)
     ───────────────────────────────────────────────────────────────────────── */

  .m-acc { border-top: 1px solid rgba(122, 92, 68, 0.16); }
  .m-acc-item { border-bottom: 1px solid rgba(122, 92, 68, 0.16); }

  .m-acc-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 48px;
    padding: 13px 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: 'Cormorant Garamond', serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--brown-dark);
  }
  .m-acc-icon {
    position: relative;
    flex: none;
    width: 15px; height: 15px;
  }
  .m-acc-icon::before,
  .m-acc-icon::after {
    content: '';
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1.4px;
    background: var(--brown-mid);
    transition: transform 0.24s ease, opacity 0.24s ease;
  }
  .m-acc-icon::after { transform: rotate(90deg); }
  .m-acc-btn[aria-expanded="true"] .m-acc-icon::after {
    transform: rotate(0deg);
    opacity: 0;
  }

  .m-acc-panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out;
  }
  .m-acc-panel > * { padding-bottom: 16px; }
  .m-acc-panel p {
    font-size: 15px;
    line-height: 1.68;
    color: var(--brown-mid);
    margin: 0;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     7 · BOTANISCHE ILLUSTRATIONEN
     Leiser Akzent statt Muster: höchstens eine je Sektion, nie hinter Text,
     nur an den Rändern. !important ist hier nötig, weil Position und Größe
     im HTML als style="…"-Attribut stehen.
     ───────────────────────────────────────────────────────────────────────── */

  /* Alle botanischen PNGs liegen im Ordner hintergrund/. Über den Bildpfad
     erwischen wir sie zuverlässig — unabhängig davon, wie die Klasse auf der
     jeweiligen Seite heißt (bot-deco, testi-floral-l, ig-fl-r1, …). */
  img[src*="hintergrund/"] {
    max-width: 120px !important;
    width: 110px !important;
    height: auto !important;
    opacity: 0.22 !important;
    z-index: 0 !important;
    pointer-events: none;
  }

  /* Höchstens eine Illustration je Sektion: alle weiteren entfallen */
  section img[src*="hintergrund/"] ~ img[src*="hintergrund/"] {
    display: none !important;
  }

  /* Nie hinter Überschrift oder Text — nur an den unteren Sektionsrand */
  section > img[src*="hintergrund/"] {
    position: absolute !important;
    top: auto !important;
    bottom: -8px !important;
    transform: none !important;
  }
  section > img[src*="hintergrund/"]:not([style*="right"]) {
    left: -24px !important; right: auto !important;
  }
  section > img[src*="hintergrund/"][style*="right"] {
    right: -24px !important; left: auto !important;
  }

  /* Vollständig entfernen: im Footer (dort waren vier bis fünf gleichzeitig),
     hinter der Testimonial-Überschrift (Text war kaum lesbar),
     in der Instagram-Sektion und im Menü. */
  footer img[src*="hintergrund/"],
  #testimonials img[src*="hintergrund/"],
  .testimonial-section img[src*="hintergrund/"],
  .testimonials-section img[src*="hintergrund/"],
  #instagram img[src*="hintergrund/"],
  .mobile-menu-panel img[src*="hintergrund/"] {
    display: none !important;
  }

  /* Inhalt liegt immer über der Dekoration.

     ACHTUNG — hier stand einmal:
       section > *:not(img[...]) { position: relative; z-index: 1; }
     Das hat jedem direkten Kind einer Sektion `position: relative`
     aufgezwungen und damit alle absolut positionierten Elemente aus den
     Angeln gehoben: Der Hero-Bildcontainer verlor seine Höhe und die
     Startseite hatte kein Titelbild mehr.

     Richtig ist, nur die Dekoration nach hinten zu schieben und die
     Positionierung der übrigen Elemente unangetastet zu lassen. */
  section > img[src*="hintergrund/"] { z-index: 0 !important; }

  /* ─────────────────────────────────────────────────────────────────────────
     8 · INSTAGRAM
     2 Spalten × 3 Reihen im Hochformat (3:4), Handle vollständig sichtbar.
     ───────────────────────────────────────────────────────────────────────── */

  #instagram { padding-left: var(--m-pad); padding-right: var(--m-pad); }
  #instagram > div:first-of-type,
  #instagram > div[style*="padding"] {
    padding: 0 0 16px !important;
  }
  .ig-floral { display: none !important; }

  .instagram-handle {
    font-size: clamp(1.25rem, 6vw, 1.85rem) !important;
    line-height: 1.2;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
  }
  .instagram-handle-link {
    font-size: inherit;
    display: inline-block;
    max-width: 100%;
    word-break: break-word;
  }
  .instagram-sub { font-size: 13px; margin-top: 6px; }

  /* Raster: zwei große Spalten statt drei kleiner Kacheln.
     Auf 390px sind Drittel-Bilder nur ~120px breit — zu klein, um etwas
     zu erkennen. Zwei Spalten geben jedem Bild fast doppelt so viel
     Fläche; sechs Bilder im Hochformat (3:4) reichen als Vorgeschmack. */
  /* Der Wrapper bringt 60px Innenabstand aus dem Desktop-Entwurf mit —
     davon blieben für die Bilder nur noch schmale Kacheln übrig.
     Auf Mobile laufen sie randlos über die ganze Breite. */
  #instagram { padding-left: 0 !important; padding-right: 0 !important; }
  #instagram > div:first-of-type { padding-left: var(--m-pad) !important;
                                   padding-right: var(--m-pad) !important; }
  .ig-grid-wrap {
    max-width: 100%;
    position: relative;
    padding: 0 !important;
  }
  .instagram-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    max-width: 100%;
    margin: 0;
  }
  .instagram-grid > *:nth-child(n + 7) { display: none !important; }

  .ig-item {
    aspect-ratio: 3 / 4;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
    display: block;
    position: relative;
  }
  .ig-swatch,
  .ig-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ig-overlay { display: none; }

  /* Der Link sitzt — wie auf dem Desktop — mittig auf den Bildern.
     Damit er dort lesbar bleibt, liegt ein heller Balken darunter,
     der die volle Breite einnimmt. */
  .instagram-cta {
    position: absolute !important;
    top: 50%; left: 0; right: 0;
    transform: translateY(-50%) !important;
    background: rgba(244, 237, 228, 0.94) !important;
    padding: 16px 20px !important;
    white-space: normal !important;
    /* Der Balken läuft über die volle Breite durch — so ist es auf allen
       Seiten. ueber-uns.html und journal.html brachten aus ihrem eigenen
       CSS ein `max-width: 84vw` mit; dort war er 328px statt 386px breit
       und saß mangels Auto-Rändern zusätzlich links statt mittig. Beides
       hier zentral aufgehoben, damit die Sektion überall gleich aussieht. */
    max-width: none !important;
    margin: 0 auto !important;
    text-align: center;
    z-index: 3;
  }
  .ig-follow-btn {
    display: block;
    min-height: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 14px;
    line-height: 1.55;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brown-dark) !important;
    text-decoration: none;
  }
  /* Ansprache auf dem Handy direkter (Du-Imperativ Singular) als auf dem
     Desktop (Ihr-Form) — reine Wortwahl, beide Varianten stehen bereits
     im Text, hier wird nur zwischen ihnen umgeschaltet. */
  .ig-cta-desktop { display: none; }
  .ig-cta-mobile { display: inline; }

  /* ─────────────────────────────────────────────────────────────────────────
     9 · FOOTER — einspaltig, zentriert, ohne Dekoration
     ───────────────────────────────────────────────────────────────────────── */

  /* Die feine Kante oben trennt den Footer von der Instagram-Sektion.
     Beide sind dunkelbraun (Instagram rgb 44,26,14, Footer rgb 26,14,6)
     und stießen ohne Übergang aneinander — auf dem Handy verschmolz das
     zu einer einzigen dunklen Fläche, in der der Footer nicht mehr als
     eigener Bereich zu erkennen war. */
  footer {
    padding: 34px var(--m-pad) calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    text-align: center;
    border-top: 1px solid rgba(244, 237, 228, 0.14);
  }
  .footer-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    gap: 0;
    max-width: 100%;
    grid-template-columns: none !important;
  }
  .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-bottom: 0;
  }
  /* 20% größer als zuvor (34px/15px) — Logo und Markenname sind jetzt
     das eigentliche Blickfang-Element im Footer, seit die Zeile darunter
     der E-Mail-Adresse gehört statt der Tagline. */
  .footer-logo-img { width: 41px; height: 41px; object-fit: contain; }
  .footer-logo { font-size: 18px; letter-spacing: 0.18em; }
  /* Tagline entfällt auf dem Handy komplett — die E-Mail-Adresse steht
     an ihrer Stelle (siehe .footer-brand-email). */
  .footer-tagline { display: none; }
  .footer-brand-email {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--m-tap);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: rgba(244, 237, 228, 0.55);
    text-decoration: none;
  }
  .footer-rule {
    width: 36px;
    margin: 12px auto;
    border: none;
    border-top: 1px solid rgba(122, 92, 68, 0.25);
  }
  /* Kontaktzeile (E-Mail + Instagram-Icon) entfällt komplett — die
     E-Mail-Adresse steht jetzt oben im Markenblock, das Instagram-Icon
     im Hamburger-Menü (siehe initMenu in mobile.js). */
  .footer-meta { display: none; }
  .footer-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-top: 26px;
    padding-top: 0;
    border-top: none;
    font-size: 11.5px;
    letter-spacing: 0.08em;
  }
  .footer-copy a {
    display: inline-flex;
    align-items: center;
    min-height: var(--m-tap);
    padding: 0 6px;
    font-size: 11.5px;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     10 · STARTSEITE
     ───────────────────────────────────────────────────────────────────────── */

  /* 4.1 Hero — 85vh, damit die nächste Sektion angeschnitten sichtbar bleibt.
     Inhalt sitzt mittig in der Sektion. */
  #hero {
    height: 85vh;
    height: 85svh;
    min-height: 520px;
    align-items: center;
  }
  .hero-content {
    padding: 0 var(--m-pad);
    max-width: 100%;
  }
  .hero-eyebrow { font-size: 10.5px; letter-spacing: 0.24em; }
  .hero-title {
    font-size: clamp(2rem, 8.4vw, 2.8rem);
    line-height: 1.1;
  }
  .hero-sub {
    font-size: 14.5px;
    line-height: 1.6;
    max-width: 40ch;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 2 * var(--m-pad));
    max-width: 420px;
    min-height: 48px;
    margin: 22px auto 0;
  }
  /* Punkte-Anzeige des Hero-Sliders kompakt halten */
  .slide-dots {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 5px;
    bottom: 18px;
    padding: 0 var(--m-pad);
    max-width: 100%;
  }
  .slide-dot { width: 6px; height: 6px; flex: none; }
  .slide-pause-icon { display: none; }

  /* 4.2 Lukas & Maria */
  #positioning { padding-top: var(--m-sec); padding-bottom: var(--m-sec); }
  .pos-split {
    display: flex !important;
    flex-direction: column;
    gap: 22px;
    grid-template-columns: none !important;
  }
  .pos-photo-col { max-height: 40vh; overflow: hidden; }
  .pos-photo {
    width: 100%;
    max-height: 40vh;
    object-fit: cover;
    display: block;
  }
  .pos-statement { font-size: clamp(1.5rem, 6.2vw, 2rem); line-height: 1.22; }

  /* 4.3 Drei Dinge — Karussell */
  #pillars { --m-card: 85vw; }
  .pillars-grid > .pillar { display: flex; flex-direction: column; }
  .pillar-photo {
    aspect-ratio: 4 / 3;
    max-height: 200px;
    overflow: hidden;
  }
  .pillar-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .pillar-num { font-size: 12px; margin-top: 12px; }
  .pillar-title { font-size: 1.3rem; line-height: 1.24; margin-top: 4px; }
  .pillar-text { font-size: 14.5px; line-height: 1.6; margin-top: 8px; }

  /* 4.5 Ausgewählte Hochzeiten — Karussell */
  #featured { --m-card: 78vw; }
  .featured-slideshow { display: none; }  /* Diashow + Karussell doppelt sich */
  .featured-card-img {
    aspect-ratio: 3 / 4;
    max-height: 300px;
    overflow: hidden;
  }
  .featured-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .featured-card-info { padding-top: 10px; }
  .featured-card-name { font-size: 15px; }
  .featured-card-meta { font-size: 11.5px; margin-top: 2px; }
  .featured-cta-wrap { margin-top: 20px; text-align: center; }
  .featured-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--m-tap);
    font-size: 12px;
  }

  /* 4.8 Investment-Pakete — Karussell, Bild höchstens 160px */
  #packages { --m-card: 85vw; }
  .package-img, .pkg-img, .package-img-wrap {
    max-height: 160px;
    overflow: hidden;
  }
  .package-img img, .pkg-img img, .package-img-wrap img {
    width: 100%; height: 100%;
    max-height: 160px;
    object-fit: cover;
  }
  /* Die Karten waren 820px hoch, allein 78px davon Innenabstand */
  .package-body, .pkg-body {
    padding: 18px 16px 20px !important;
    gap: 7px;
  }
  .package-name, .pkg-name  { font-size: 1.15rem !important; line-height: 1.2; }
  .package-price, .pkg-price { font-size: 1rem !important; }
  .package-desc, .pkg-desc {
    font-size: 13px !important;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .package-features li, .pkg-features li,
  .package-body li, .pkg-body li {
    font-size: 12.5px !important;
    line-height: 1.45;
    padding: 2px 0 !important;
  }
  /* Sehr lange Leistungslisten kürzen — die Details stehen auf der
     Investment-Seite ohnehin vollständig */
  .package-body li:nth-child(n + 7),
  .pkg-body li:nth-child(n + 7),
  .package-features li:nth-child(n + 7),
  .pkg-features li:nth-child(n + 7) { display: none !important; }
  .package-tile { max-height: 470px; }

  /* Sektionsköpfe: der Abstand zur ersten Karte war teils 64px.
     Muster-Selektor, damit auch künftige Sektionen erfasst sind. */
  [class$="-header"], [class$="-head"], [class*="-header "], [class*="-head "] {
    padding-bottom: 18px !important;
    margin-bottom: 0 !important;
  }

  /* Zweispaltige Bild-Text-Bereiche stapeln, Bild kompakt */
  .approach-split, .statement-split, .philo-split, .story-split {
    display: block !important;
    grid-template-columns: none !important;
  }
  .approach-img-wrap, .statement-img-wrap {
    max-height: 200px;
    overflow: hidden;
    margin-top: 18px;
  }

  /* Absätze im Fließtext: 16px bleiben (Lesbarkeit), aber enger gesetzt */
  .approach-text p, .story-text p, .statement-text p {
    margin-bottom: 12px;
  }

  /* Dienstleister-Liste kompakt */
  .vendors-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 12px !important;
  }
  .vendor-item {
    padding: 0 !important;
    border: none !important;
  }
  .vendor-role { font-size: 10.5px !important; letter-spacing: 0.16em; }
  .vendor-name { font-size: 13.5px !important; line-height: 1.35; }

  /* ── „Weiterlesen" ──────────────────────────────────────────────────────
     Lange Textblöcke werden zunächst gekürzt gezeigt. Der Text bleibt
     vollständig vorhanden — er klappt auf Knopfdruck auf. */
  .m-clamp {
    position: relative;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
  }
  .m-clamp:not(.is-open) { max-height: var(--m-clamp-h, 260px); }
  .m-clamp:not(.is-open)::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 68px;
    pointer-events: none;
    background: linear-gradient(to bottom,
                rgba(244, 237, 228, 0), var(--cream, #F4EDE4));
  }
  .m-clamp-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: var(--m-tap);
    margin-top: 4px;
    padding: 0;
    background: none;
    border: none;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brown-mid);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
  }

  /* Bild-Text-Bereiche (Bridge): Auf dem Desktop stehen Film und Foto
     nebeneinander. Nebeneinander sind sie auf 390px zu klein — deshalb
     untereinander, beide auf voller Inhaltsbreite. Genaue Maße und der
     Abspiel-Knopf stehen in Block 17.4.

     ACHTUNG — hier stand einmal `.bridge-video-wrap { display: none }`.
     Die Sektion heißt „Film und Foto — ein gemeinsamer Blick"; ohne das
     Video blieben Fotos übrig und die Überschrift log. */
  .bridge-media {
    display: block !important;
    grid-template-columns: none !important;
  }
  .bridge-collage img { width: 100%; height: 100%; object-fit: cover; }
  .bridge-text {
    font-size: 14.5px !important;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 4.9 Ablauf — 2×2-Raster statt vier Bildschirmhöhen.
     Die Seiten setzen die Kugelgröße über #process .orb-scene in eigenen
     Media-Queries (bis zu 204px). Dagegen kommt ein schlichtes .orb-scene
     nicht an, deshalb hier derselbe spezifische Selektor. */
  #process, .process-section { --orb: 100px; }
  .orb-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 14px !important;
    max-width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .orb-step { text-align: center; }
  #process .orb-scene,
  .process-section .orb-scene,
  .orb-scene {
    --orb: 100px !important;
    width: 100px;
    height: 100px;
    margin: 0 auto;
  }
  .orb-meta { font-size: 10.5px; letter-spacing: 0.16em; margin-top: 10px; }
  .orb-title { font-size: 1.05rem; line-height: 1.25; margin-top: 3px; }
  .orb-text {
    font-size: 13px;
    line-height: 1.5;
    margin-top: 5px;
    /* Zwei Zeilen, damit das Raster ruhig bleibt */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Schwebe-Animation kostet auf Mobile nur Akkulaufzeit */
  .orb-float { animation: none !important; }

  /* 4.10 Testimonials — deutlich kompakter.
     Vorher: Foto, fünfzeiliges Zitat, Name, Ort und ein großer Knopf
     ergaben eine Karte von fast einer ganzen Bildschirmhöhe. */
  #testimonials { --m-card: 84vw; }
  #testimonials { padding-top: 36px !important; padding-bottom: 36px !important; }

  .testi-carousel-wrap { padding-top: 14px !important; padding-bottom: 6px !important; }

  .testi-photo, .testimonial-photo {
    max-height: 132px;
    overflow: hidden;
  }
  .testi-photo img, .testimonial-photo img {
    width: 100%; height: 132px;
    object-fit: cover;
  }
  .testi-card { padding: 10px !important; }
  .testi-body { padding: 12px 4px 4px !important; }
  .testi-quote-mark { display: none; }
  .testi-quote, .testimonial-quote {
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    margin: 0 0 10px !important;
    /* Drei Zeilen genügen als Vorgeschmack — die ganze Stimme
       steht weiterhin hinter „Geschichte lesen". */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .testi-name    { font-size: 15px !important; line-height: 1.2; }
  .testi-detail  { font-size: 10.5px !important; letter-spacing: 0.12em; margin-top: 2px; }
  /* Der Knopf war so groß wie eine eigene Zeile — als Textlink reicht er */
  .testi-read-more {
    display: inline-flex;
    align-items: center;
    min-height: var(--m-tap);
    margin-top: 2px;
    padding: 0;
    border: none !important;
    background: none !important;
    font-size: 10.5px !important;
    letter-spacing: 0.16em;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  /* Das Karussell hat eine feste Höhe, weil die Karten darin räumlich
     angeordnet sind. Sie war auf die frühere, hohe Karte ausgelegt —
     nach dem Kürzen blieb darunter ein leeres Feld von 250px. */
  .testi-carousel { height: 390px !important; }
  .testi-carousel-wrap { padding-top: 10px !important; padding-bottom: 0 !important; }

  .testi-nav-row { margin-top: 12px !important; }
  /* Die Punkte sitzen in einer Flex-Reihe und wurden dort auf volle Höhe
     gestreckt — aus Punkten wurden dadurch schmale Striche. */
  .testi-dots, .slide-dots, .fs-dots {
    align-items: center !important;
  }
  .testi-dot, .slide-dot, .fs-dot, .vc-dot, .pp-dot, [class$="-dot"] {
    flex: 0 0 auto !important;
    align-self: center !important;
  }
  /* Testimonial-Punkte sahen anders aus als die übrigen Karussell-Punkte
     (z.B. Investment) — jetzt identisches Aussehen: kleiner Kreis, aktiv
     als Pille, wie die .m-dot-Komponente. */
  .testi-dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: rgba(122, 92, 68, 0.3) !important;
    transform: none !important;
    transition: width 0.5s cubic-bezier(0.65, 0, 0.35, 1),
                border-radius 0.5s cubic-bezier(0.65, 0, 0.35, 1),
                background-color 0.5s ease !important;
  }
  .testi-dot.active {
    background: var(--brown-dark) !important;
    width: 16px !important;
    border-radius: 3px !important;
  }

  /* ── 4.10b "Geschichte lesen" — das Fenster dahinter ────────────────────
     Die Seiten selbst (index, fotografie, videografie — identisches Markup,
     deshalb reicht dieser eine Block für alle drei) stellen das Fenster ab
     900px schon einspaltig. Das ist auf ein Tablet gedacht und reicht auf
     einem Handy nicht:

     · Das Schließkreuz ist 36×36 mit `border-radius: 50%`. Weiter oben
       gibt DIESE Datei jedem <button> `min-height: 44px` als Tastfläche —
       aus dem Kreis wurde damit ein 36×44 großes Ei, in dem das ✕ schief
       saß. Genau das war das "verzerrte X". Der Knopf bekommt hier beide
       Maße auf 44px: wieder rund UND groß genug zum Treffen.
     · Der Kasten hatte keine Höhenbegrenzung. Foto (280px) plus Zitat in
       Desktop-Größe ergaben rund 800px — auf einem 844px hohen Bildschirm
       ging das gerade eben auf, auf einem kürzeren lief der Text unten
       heraus, ohne dass man ihn erreichen konnte.
     · Schriftgrade und Abstände waren unverändert Desktop-Maße.

     Jetzt: Kasten auf Fensterhöhe begrenzt, Foto flacher, Schrift auf
     mobile Grade. Der Kasten selbst bleibt stehen — das Kreuz ist damit
     immer erreichbar —, nur der Text scrollt, wenn ein Zitat lang wird. */
  .testi-modal {
    padding: 18px 16px;
    align-items: center;
  }
  .testi-modal-box {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    max-width: 100%;
    /* Zweimal `max-height` mit Absicht: `dvh` kennen ältere Browser nicht
       und überspringen die Zeile, `vh` bleibt dann als Rückfall. Wo `dvh`
       geht, ist es besser — `vh` rechnet auf dem Handy mit ausgefahrener
       Adressleiste und schnitte den Kasten unten an. 36px = 2 × 18px
       Außenabstand von .testi-modal. */
    max-height: calc(100vh - 36px);
    max-height: calc(100dvh - 36px);
    /* Waagerecht weiter beschnitten (Foto), senkrecht scrollt der Text in
       .testi-modal-content — nicht der Kasten. */
    overflow-x: hidden;
    overflow-y: hidden;
    box-shadow: 0 24px 60px rgba(44, 26, 14, 0.38);
  }
  .testi-modal-photo {
    min-height: 0;
    height: 190px;
  }
  .testi-modal-content {
    padding: 22px 20px 26px;
    /* Desktop zentriert hier senkrecht. Zusammen mit `overflow-y: auto`
       wäre das eine Falle: Überläuft der Text, schiebt zentrierter
       Flex-Inhalt seinen Anfang über den oberen Rand hinaus — und dorthin
       lässt sich nicht zurückscrollen. Da der Kasten nur eine `max-height`
       hat, wächst er bei kurzem Zitat ohnehin passgenau mit; zu zentrieren
       gäbe es dann nichts. */
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .testi-modal-mark {
    font-size: 46px;
    margin-bottom: 12px;
  }
  .testi-modal-quote {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 20px;
  }
  .testi-modal-name {
    font-size: 19px;
    margin-bottom: 4px;
  }
  .testi-modal-detail {
    font-size: 11px;
    letter-spacing: 0.18em;
    margin-bottom: 20px;
  }
  .testi-modal-link {
    font-size: 12px;
    letter-spacing: 0.22em;
    min-height: var(--m-tap);
    display: inline-flex;
    align-items: center;
  }
  /* Das ✕ wieder rund: Höhe UND Breite auf die volle Tastfläche. */
  .testi-modal-close {
    top: 10px; right: 10px;
    width: var(--m-tap);
    height: var(--m-tap);
    min-width: var(--m-tap);
    min-height: var(--m-tap);
    font-size: 15px;
    /* Das Foto dahinter ist dunkel bis hell — der Knopf braucht eine
       eigene, deckende Fläche, sonst verschwindet das Kreuz darin. */
    background: rgba(253, 250, 247, 0.94);
  }

  /* 4.11 Abschluss-CTA
     Hier lief einiges schief, was auf dem Desktop gedacht ist:
       · Der Inhalt wird per transform um 280px nach oben gezogen —
         auf einer kurzen mobilen Sektion schob ihn das heraus.
       · Die Überschrift ist Wort für Wort auf opacity: 0 gesetzt und
         wartet auf eine Animation, die auf Mobile nicht anspringt.
       · Der Videohintergrund verlor seine Fläche.
     Deshalb wird hier alles ausdrücklich zurückgesetzt. */
  #contact-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    height: auto !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    overflow: hidden;
  }
  .cta-bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0;
  }
  .cta-bg video, .cta-bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
  }
  /* Video 30px tiefer — dafür etwas hineingezoomt, sonst würde oben eine
     Lücke entstehen (die Sektion ist auf Mobile recht kurz). */
  .cta-bg video {
    transform: translateY(30px) scale(1.25);
    transform-origin: center;
  }
  .cta-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(44, 26, 14, 0.45) !important;
    z-index: 1;
  }
  .cta-inner {
    position: relative;
    z-index: 2;
    transform: none !important;   /* die -280px vom Desktop */
    width: 100%;
    padding: 0 var(--m-pad) !important;
    text-align: center;
  }
  /* Überschrift sofort zeigen — sie bestand aus einzeln eingeblendeten
     Wörtern, die ohne die Desktop-Animation unsichtbar blieben. */
  .cta-hw, #contact-cta .cw, .cta-line {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
  }
  /* Überschrift und Untertext sitzen per position:relative 40px höher,
     ohne den Knopf darunter mitzuziehen — der bleibt exakt an seiner
     Stelle. */
  .cta-heading {
    font-size: clamp(1.6rem, 7vw, 2.3rem) !important;
    line-height: 1.16;
    margin-bottom: 10px;
    position: relative;
    top: -40px;
  }
  /* Rutscht mit Überschrift/Untertext gemeinsam 40px nach oben (statt nur
     20px wie zuvor) — sonst würde die jetzt höher sitzende Überschrift
     sie überlappen. Der Abstand zwischen beiden bleibt so unverändert.
     Auf #contact-cta eingegrenzt (nur die Startseite) — .cta-eyebrow und
     .cta-sub heißen auf videografie.html zufällig genauso (eigener,
     unabhängiger CTA-Block dort). Ohne diese Eingrenzung rutschte dessen
     Fließtext ebenfalls 30–40px nach oben, mitten hinter den Knopf. */
  #contact-cta .cta-eyebrow { margin-bottom: 8px; position: relative; top: -30px; }
  #contact-cta .cta-sub {
    font-size: 14.5px !important;
    line-height: 1.55;
    max-width: 34ch;
    margin: 0 auto 20px;
    position: relative;
    top: -40px;
  }
  /* videografie.html — Zeile „Antwort innerhalb von 24 Stunden ·
     Unverbindlich & kostenlos" unter dem Knopf auf Wunsch entfernt. */
  .cta-section .cta-sub { display: none !important; }
  #contact-cta .cta-btn,
  #contact-cta a[class*="btn"] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 340px;
    min-height: 52px;
    padding: 12px 18px !important;
    margin: 0 auto;
    font-size: 11.5px !important;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-align: center;
    position: relative;
    top: 30px;
  }

  /* 4.6 Video — kein Autoplay, Poster mit großem Play-Symbol */
  .m-video-poster {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--brown-dark);
    border: none;
    padding: 0;
    cursor: pointer;
  }
  .m-video-poster img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .m-video-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(244, 237, 228, 0.9);
    display: grid;
    place-items: center;
    pointer-events: none;
  }
  .m-video-play::after {
    content: '';
    width: 0; height: 0;
    margin-left: 4px;
    border-left: 17px solid var(--brown-dark);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     11 · UNTERSEITEN
     ───────────────────────────────────────────────────────────────────────── */

  /* Alle Hero-Bereiche der Unterseiten auf höchstens 70vh.
     Die Seiten benennen sie unterschiedlich (foto-hero, video-hero,
     au-hero, journal-hero, cover-hero …), deshalb der Muster-Selektor.

     Wichtig: ausschließlich auf <section> einschränken. Ein freies
     [class*="-hero"] trifft sonst auch andere Elemente — unter anderem
     body.m-fullhero, was die gesamte Seite auf 70vh gestutzt hat. */
  /* `min-height` statt fester `height`: Wo der Inhalt mehr Platz braucht
     (etwa die vier Merkmale im Video-Hero), darf der Bereich mitwachsen.
     Mit fester Höhe überlappten sich dort Kästen und Text. */
  section[class*="-hero"], section[id*="-hero"],
  section.page-hero, section.sub-hero, section.hero-sub-page {
    height: auto !important;
    min-height: 70svh !important;
    max-height: none !important;
    padding-top: calc(var(--m-nav-total) + 16px) !important;
    padding-bottom: 28px !important;
  }
  /* Bereiche ohne Bildhintergrund behalten ihre natürliche Höhe */
  section.thank-hero, section.step-hero {
    height: auto !important;
    max-height: none !important;
  }
  /* Investment: dunkler Hero deutlich kompakter */
  #invest-hero, .invest-hero, #hero-pakete {
    height: auto !important;
    min-height: 40svh !important;
    max-height: none !important;
  }

  /* Merkmal-Listen im Hero: auf Desktop nebeneinander, gestapelt brauchen
     sie zu viel Platz. Kompakte Zeilen statt großer Kästen. */
  .hero-features, .hero-usp, .video-hero-features,
  .foto-hero-features, .video-hero-tags, .foto-hero-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center;
    gap: 6px !important;
    margin: 14px 0 !important;
    max-width: 100%;
  }
  .hero-features > *, .hero-usp > *,
  .video-hero-features > *, .foto-hero-features > *,
  .video-hero-tag, .foto-hero-tag {
    padding: 5px 10px !important;
    margin: 0 !important;
    font-size: 9.5px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.1em !important;
    min-height: 0 !important;
    white-space: nowrap;
  }

  /* Der Scroll-Hinweis bleibt absolut positioniert (sonst rutscht der
     ganze Hero-Inhalt aus der Mitte). Damit er den Inhalt nicht
     überlagert, bekommt der Hero unten etwas mehr Luft. */
  section[class*="-hero"] { padding-bottom: 56px !important; }
  .video-hero-scroll, .foto-hero-scroll, .hero-scroll {
    bottom: 14px !important;
  }

  /* Hochzeitsgalerie: Die Seite stellt sie unter 640px auf eine Spalte —
     dadurch wurde der Bereich über 2.700px lang. Zwei Spalten zeigen
     doppelt so viel auf einmal und halbieren die Strecke. */
  .masonry {
    column-count: 2 !important;
    column-gap: 6px !important;
    padding: 16px var(--m-pad) 10px !important;
  }
  .masonry-item {
    margin-bottom: 6px !important;
    break-inside: avoid;
  }
  .masonry-item img { width: 100%; height: auto; display: block; }
  .masonry-item-cat {
    font-size: 9px !important;
    letter-spacing: 0.14em;
    padding: 3px 7px !important;
  }

  /* 5.1 / 5.7 Galerien — 2 Spalten */
  .m-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 5px !important;
    max-width: 100%;
  }
  .m-grid-2 > * { margin: 0 !important; width: auto !important; }
  .m-grid-2 img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
  }

  /* 2×2-Raster für vier kurze Blöcke (Werte, Kennzahlen) */
  .m-grid-2x2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 22px 16px !important;
    max-width: 100%;
    margin: 0;
  }
  .m-grid-2x2 > * {
    margin: 0 !important;
    width: auto !important;
    min-width: 0;
    text-align: center;
  }
  .m-grid-2x2 p { font-size: 13.5px; line-height: 1.55; }
  .m-grid-2x2 h3, .m-grid-2x2 .philosophy-title {
    font-size: 1.02rem;
    line-height: 1.25;
  }
  /* Kennzahlen kompakt */
  .stats-narrow-grid.m-grid-2x2 { gap: 18px 12px !important; }
  .sn-number { font-size: 2rem !important; line-height: 1; }
  .sn-label  { font-size: 11.5px !important; line-height: 1.4; }

  /* „Mehr laden" — schließt lange Listen ab, statt sie endlos auszurollen */
  .m-more {
    display: block;
    width: calc(100% - 2 * var(--m-pad));
    max-width: 420px;
    min-height: 48px;
    margin: 22px auto 0;
    padding: 0 20px;
    background: transparent;
    border: 1px solid rgba(122, 92, 68, 0.35);
    border-radius: 2px;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brown-dark);
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .m-more:active { background: rgba(122, 92, 68, 0.1); }

  /* 5.55 Journal — Featured-Artikel (journal.html)
     Eigene Komponente, keine Karte aus #articleGrid — hatte deshalb noch
     nie eine mobile Fassung und übernahm die Desktop-Maße 1:1: 4:3-Bild,
     40/30px Innenabstand, ungekürzter Anriss. Zusammen ergab das rund
     850px Höhe, bevor überhaupt die Filter oder die erste echte Karte zu
     sehen waren. Jetzt: flaches Bild, enger Abstand, Anriss auf 2 Zeilen
     gekürzt — wie bei den Karten darunter. */
  .featured-section { padding: 0 var(--m-pad) 32px !important; }
  .featured-img { aspect-ratio: 16 / 10 !important; }
  .featured-body { padding: 22px 20px 26px !important; }
  .featured-tag { font-size: 11px; letter-spacing: 0.2em; margin-bottom: 10px; }
  .featured-title { font-size: 22px !important; line-height: 1.2; margin-bottom: 10px; }
  .featured-excerpt {
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .featured-meta { font-size: 11px; letter-spacing: 0.14em; gap: 8px; margin-bottom: 16px; }
  .featured-link { font-size: 11.5px; letter-spacing: 0.2em; }

  /* 5.55b Journal — nur eine Filterebene auf Mobile
     Bei elf Beiträgen sind Land- und Ort-Filter (Region/Sub-Region) reine
     Zusatzebenen über der Kategorie — auf dem schmalen Bildschirm drei
     übereinanderliegende Wisch-Reihen, bevor überhaupt ein Beitrag zu
     sehen ist. Bleiben komplett aus; die Kategorie-Filter (Alle/Real
     Weddings/Locations/Tipps) reichen zum Eingrenzen. */
  .region-filter, .region-sub { display: none !important; }

  /* 5.55c Journal — Newsletter-Formular gestapelt statt nebeneinander
     `.newsletter-form` ist `display:flex` mit `input{flex:1}` und einem
     Knopf ohne eigene Flex-Angabe. Der Knopftext „ANMELDEN" trägt
     0.32em Buchstabenabstand und bricht nicht um — sein Mindestbreite
     verdrängte das E-Mail-Feld auf 390px auf rund 44px (praktisch
     unbenutzbar). Untereinander hat jedes Feld die volle Breite. */
  .newsletter-form {
    flex-direction: column;
    border: none !important;
    gap: 10px;
  }
  .newsletter-form input {
    border: 1px solid var(--brown-light) !important;
    min-height: var(--m-tap);
  }
  .newsletter-form button {
    min-height: var(--m-tap);
  }

  /* 5.55d Journal — „Weitere Beiträge" bekommt Luft nach unten
     Der Knopf steht als eigenes Element direkt vor der dunklen
     Newsletter-Sektion (0px Abstand) — er klebte an deren Kante. */
  .m-more { margin-bottom: 28px; }

  /* 5.6 Journal — eine Spalte, Karte maximal 320px hoch */
  .m-journal-list {
    /* Eigenes Seitenpolster (40px 24px) aus journal.html's Alt-Breakpoint
       (max-width:700px) überschreiben — 24px lag 4px neben dem Rest der
       Seite (Titel, Newsletter-Formular, Instagram-Handle liegen alle auf
       var(--m-pad) = 20px). */
    padding-left: var(--m-pad) !important;
    padding-right: var(--m-pad) !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 26px !important;
    max-width: 100%;
  }
  /* Keine feste Deckelung: Mit max-height wurde die letzte Textzeile
     der Beitragskarten abgeschnitten. Die Höhe ergibt sich aus dem
     verkleinerten Bild und dem gekürzten Anriss. */
  .m-journal-list > * {
    max-height: none;
    overflow: visible;
    margin: 0 !important;
    width: auto !important;
    padding-bottom: 4px;
  }
  /* Der Bildrahmen ist auf dem Desktop hochkant (4:5) — auf 390px ergibt
     das 428px Höhe für ein einzelnes Vorschaubild. Rahmen UND Bild
     bekommen dasselbe flache Format, sonst bleibt darunter eine große
     leere Fläche stehen. */
  .m-journal-list .article-img,
  .m-journal-list .journal-card-img,
  .m-journal-list .post-card-img {
    aspect-ratio: 2 / 1 !important;
    max-height: 175px;
    margin-bottom: 12px !important;
    overflow: hidden;
  }
  .m-journal-list img {
    width: 100%;
    height: 100%;
    max-height: 175px;
    object-fit: cover;
    display: block;
  }
  .m-journal-list > * { padding-bottom: 2px; }
  .m-journal-list .article-cat { font-size: 10px !important; letter-spacing: 0.16em; }
  .m-journal-list .article-title { margin-top: 5px !important; }
  .m-journal-list .article-excerpt { margin-top: 4px !important; }
  .m-journal-list h2,
  .m-journal-list h3,
  .m-journal-list .article-title {
    font-size: 1.2rem !important;
    line-height: 1.25;
    margin-top: 8px;
  }
  .m-journal-list p,
  .m-journal-list .article-excerpt {
    font-size: 14px;
    line-height: 1.55;
    margin-top: 5px;
    /* Einzeiliger Anriss */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Datum · Autor · Lesezeit in einer kompakten Zeile statt drei Spalten */
  .journal-meta, .post-meta, .article-meta {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 8px;
    grid-template-columns: none !important;
    font-size: 11px;
    line-height: 1.4;
  }

  .journal-card, .post-card, .beitrag-card {
    max-height: none;
    overflow: visible;
  }

  /* 5.61 Journal-Beitrag — Seitenpolster ausrichten
     `.post-layout` (Inhaltsverzeichnis + Artikeltext) hat aus seinem
     eigenen Alt-Breakpoint (max-width:960px) 24px Seitenpolster —
     4px neben dem Rest der Seite (Instagram-Handle, verwandte Beiträge
     liegen auf var(--m-pad) = 20px). Text und TOC standen dadurch minimal
     eingerückt gegenüber allem anderen auf der Seite. */
  .post-layout { padding-left: var(--m-pad) !important; padding-right: var(--m-pad) !important; }

  /* Sektionsköpfe und Bildspalten dürfen nicht abgeschnitten werden.
     Mehrere Seiten deckeln sie mit fester Höhe aus dem Desktop-Entwurf. */
  .portfolio-header, .about-photo-col, .pos-photo-col,
  [class$="-header"], [class$="-head"] {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }
  .journal-card-img, .post-card-img {
    aspect-ratio: 16 / 9;
    max-height: 200px;
    overflow: hidden;
  }
  .journal-card-img img, .post-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Leistungsumfang (Foto/Video): nummerierte Karten im Karussell */
  .includes-list.m-carousel > .inc-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 !important;   /* je 26px oben und unten waren zu viel */
    border: none !important;
  }
  /* ACHTUNG — hier stand `font-size: 11px`. Die Nummer ist im Entwurf eine
     große Kursivziffer (34–48px); auf 11px zusammengestaucht blieb links
     am Kartenrand ein unleserlicher Krümel stehen, während vom Nachbarn
     rechts eine halbe Ziffer ins Bild ragte. Sie bleibt eine Ziffer,
     nur kleiner — Ausrichtung in Block 17.5. */
  .inc-num   { font-size: 30px; letter-spacing: 0; line-height: 1; }
  .inc-title { font-size: 1.05rem; line-height: 1.25; }
  .inc-body p, .inc-text { font-size: 13.5px; line-height: 1.55; }
  /* ACHTUNG — hier stand `.includes-aside { display: none }` mit der
     Begründung, das Begleitbild trage nichts bei. Das war falsch: Auf einer
     Seite, die Bewegtbild verkauft, ist es das einzige Bild in dieser
     Sektion. Es steht jetzt über der Liste (siehe Block 17.8). */
  .includes-inner {
    display: block !important;
    grid-template-columns: none !important;
  }

  /* Showreel: auf Desktop zwei Spalten, hier untereinander.
     Der Player bekommt ein festes Seitenverhältnis, damit die
     Beschriftung nicht mitten auf dem Abspiel-Knopf landet. */
  .showreel-split {
    display: block !important;
    grid-template-columns: none !important;
    min-height: 0 !important;
  }
  .showreel-player {
    aspect-ratio: 16 / 9;
    min-height: 0 !important;
  }
  .showreel-label {
    bottom: 10px !important;
    font-size: 10px !important;
    letter-spacing: 0.24em !important;
  }
  .showreel-text { padding: 22px var(--m-pad) 0 !important; }
  .showreel-text p { font-size: 14.5px !important; line-height: 1.55; }

  /* Leistungszeilen auf videografie.html — Video über Text statt nebeneinander.
     Größen, Trennzeilen und die Add-on-Reihe stehen in Block 17. */
  .m-group > .offer-row {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 10px;
  }
  .offer-video { width: 100%; height: 100%; object-fit: cover; }
  /* Bedienelemente des Videos auf Tap-Größe bringen */
  .vc-bigplay { width: 64px !important; height: 64px !important; }

  /* 5.4 Investment — Zusatzleistungen als Liste statt Tabelle,
     Zahlungsablauf nebeneinander statt gestapelt */
  .addons-table, .addon-table {
    display: block;
    width: 100%;
    overflow: visible;
  }
  .addons-table thead, .addon-table thead { display: none; }
  .addons-table tr, .addon-table tr,
  .addon-row, .addon-item {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 11px 0;
    border-bottom: 1px solid rgba(122, 92, 68, 0.14);
  }
  .addons-table td, .addon-table td { display: block; padding: 0; border: none; }
  .addon-name  { flex: 1; font-size: 14px; line-height: 1.4; }
  .addon-price { flex: none; text-align: right; font-size: 14px; white-space: nowrap; }

  /* Zusatzleistungen: drei Panels untereinander statt als Raster,
     Zeilen deutlich kompakter (waren je 90px hoch bei 16px Innenabstand). */
  .addons-panels {
    display: block !important;
    grid-template-columns: none !important;
  }
  .addon-panel {
    padding: 18px 0 6px !important;
    border: none !important;
    background: transparent !important;
  }
  .addon-panel-icon  { display: none !important; }
  .addon-panel-title {
    font-size: 11px !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brown-light);
    margin-bottom: 4px;
  }
  .addon-item {
    padding: 9px 0 !important;
    gap: 12px;
    border-bottom: 1px solid rgba(122, 92, 68, 0.13);
  }
  .addon-item .addon-desc,
  .addon-item p {
    font-size: 12.5px !important;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Galerie-Vorschau: höchstens sechs Bilder, darunter der Link zum Portfolio */
  .pp-grid.m-grid-2 > *:nth-child(n + 7),
  .portfolio-preview .m-grid-2 > *:nth-child(n + 7) { display: none !important; }
  .addon-cat, .addon-category {
    display: block;
    margin: 22px 0 6px;
    font-family: 'Jost', sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brown-light);
  }

  /* Zahlungsablauf: drei kurze Blöcke passen nebeneinander auf 390px */
  .payflow-steps, .payment-steps, .payflow-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    text-align: center;
  }
  .payflow-steps > *, .payment-steps > *, .payflow-grid > * {
    margin: 0 !important;
    min-width: 0;
  }
  .payflow-steps h3, .payment-steps h3,
  .payflow-steps .pf-title, .payflow-grid .pf-title {
    font-size: 13px !important;
    line-height: 1.25;
  }
  .payflow-steps p, .payment-steps p, .payflow-grid p {
    font-size: 11.5px !important;
    line-height: 1.4;
  }
  .pf-num, .payflow-num {
    font-size: 11px !important;
    letter-spacing: 0.14em;
  }

  /* 5.8 Formulare */

  /* Die Kontakt-Überschrift blendet auf Mobile ihren Zeilenumbruch aus.
     Dadurch klebten die Sätze aneinander: „Eure Hochzeit.Unsere
     Leidenschaft." Zwei Zeilen sind hier die bessere Lösung. */
  .contact-header-title br { display: inline !important; }

  input, textarea, select {
    font-size: 16px !important;   /* darunter zoomt iOS Safari beim Antippen */
    width: 100%;
    max-width: 100%;
    min-height: var(--m-tap);
  }
  /* Ein Feld bringt eigene Innenabstände als style-Attribut mit und war
     dadurch deutlich höher als alle anderen. */
  .contact-form input[style],
  .contact-form textarea[style] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: normal !important;
  }
  .contact-form input:not([type="checkbox"]):not([type="radio"]),
  .contact-form select {
    height: 52px;
    padding-top: 0;
    padding-bottom: 0;
  }
  textarea { min-height: 120px; }
  .form-row, .form-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px;
    grid-template-columns: none !important;
  }
  label { display: block; margin-bottom: 6px; font-size: 13px; }
  button[type="submit"], .submit-btn {
    width: 100%;
    min-height: 48px;
  }
  .form-error, .field-error {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    color: #A34331;
  }
  /* Zustimmungs-Checkbox mit großzügigem Tap-Ziel */
  .consent-row, .form-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  .consent-row input[type="checkbox"],
  .form-consent input[type="checkbox"] {
    width: 22px !important;
    height: 22px;
    min-height: 22px;
    flex: none;
    margin-top: 2px;
  }
  .consent-row label, .form-consent label {
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0;
  }
  .consent-row a, .form-consent a {
    text-decoration: underline;
    padding: 4px 0;
    display: inline-block;
  }

  /* 5.5 Konfigurator
     Aufbau (Schritte, Fortschritt, fixierte Leiste, laufende Preissumme,
     Zwischenspeichern) ist bereits vorhanden. Hier nur die Maße für den
     Daumen und Abstand für die fixierte Leiste am unteren Rand. */
  .opt-card, .format-card, .stil-card, .paket-card,
  .addon-card, .guest-btn, .phase-chip, .day-toggle-btn {
    min-height: 56px !important;
  }
  .konf-bar {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .konf-bar-inner { gap: 8px; }
  .btn-back, .btn-next {
    min-height: 48px;
    padding: 12px 16px !important;
    font-size: 12px !important;
    letter-spacing: 0.14em !important;
  }
  .bar-summary { min-height: 48px; }
  .bar-price { font-size: 15px; }
  /* Der Inhalt darf nicht unter der fixierten Leiste verschwinden */
  .konf-main, .step-panel:last-child { padding-bottom: 110px; }
  .step-headline { font-size: clamp(1.4rem, 5.6vw, 1.9rem); line-height: 1.2; }
  .step-sub { font-size: 14px; line-height: 1.55; }
  /* Der Stepper mit sechs Schritten passt nicht auf 390px — scrollbar */
  .stepper {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .stepper::-webkit-scrollbar { display: none; }

  /* 5.9 Impressum / Datenschutz — schlicht, gut lesbar */
  .legal-page, .legal-content {
    padding-left: var(--m-pad);
    padding-right: var(--m-pad);
  }
  .legal-page p, .legal-content p,
  .legal-page li, .legal-content li {
    font-size: 16px;
    line-height: 1.7;
  }
  .legal-page h2, .legal-content h2 {
    margin-top: 32px;
    margin-bottom: 10px;
    font-size: 1.35rem;
  }
  .m-back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: var(--m-tap);
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brown-mid);
    text-decoration: none;
  }

  /* Lightbox — vollständig per Touch bedienbar */
  /* Auf fotografie.html gibt es zwei Bildansichten mit je eigenem
     Schließen-Knopf. Sie lagen übereinander — die geschlossene bekommt
     keine Tastfläche mehr. */
  .style-single:not(.is-open) .style-single-close,
  .lightbox:not(.open):not(.is-open) .m-lb-close { pointer-events: none; }

  .m-lb-close {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: calc(10px + env(safe-area-inset-right, 0px));
    width: var(--m-tap);
    height: var(--m-tap);
    z-index: 10;
    display: grid;
    place-items: center;
    background: rgba(44, 26, 14, 0.55);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }
  .m-lb-counter {
    position: fixed;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(44, 26, 14, 0.55);
    color: #fff;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    letter-spacing: 0.12em;
  }

  /* ── Letzte Verdichtung: wiederkehrende Blöcke auf allen Unterseiten ──── */

  /* Abschluss-CTA: war teils fast eine ganze Bildschirmhöhe */
  .final-cta-section, .cta-section, .final-cta {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .final-cta-title, .cta-title {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.2;
  }
  .final-cta-sub, .cta-sub { font-size: 12.5px !important; }
  .final-cta-text, .cta-text {
    font-size: 14.5px !important;
    line-height: 1.55;
  }

  /* FAQ-Bereiche: Kopf und Zeilenabstände kompakter */
  .faq-section { padding-top: 40px !important; padding-bottom: 40px !important; }
  .faq-headline { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
  .faq-list { gap: 0 !important; }
  .faq-question {
    min-height: 48px;
    padding: 12px 0 !important;
    font-size: 15.5px !important;
    line-height: 1.35;
  }
  .faq-answer-inner { padding-bottom: 14px !important; }
  .faq-answer-inner p { font-size: 14.5px !important; line-height: 1.6; }

  /* Testimonial-Bereiche auf den Unterseiten */
  .testi-invest, .testimonial-section, .testimonials-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .testimonial-quote, .testi-big-quote {
    font-size: 16px !important;
    line-height: 1.55;
  }

  /* Zwischenüberleitungen (Bridge) */
  .bridge-section { padding-top: 40px !important; padding-bottom: 40px !important; }
  .bridge-title { font-size: clamp(1.4rem, 5.6vw, 1.9rem) !important; }

  /* Instagram-Kopf kompakt halten */
  #instagram { padding-top: 30px !important; padding-bottom: 30px !important; }

  /* ── Letzte Straffung: Luft zwischen den Bausteinen ─────────────────────
     Die Abstände stammten aus dem Desktop-Entwurf, wo großzügiger Weißraum
     wirkt. Auf 390px bedeutet dieselbe Luft zusätzliche Wischbewegungen. */

  /* Überschriften-Blöcke */
  .sec-eyebrow, .m-eyebrow { margin-bottom: 6px !important; }
  h2, .sec-title { margin-bottom: 0 !important; }
  .sec-title + p, .sec-title + .sec-sub, h2 + p { margin-top: 8px !important; }

  /* Abstand zwischen Überschriftsblock und Inhalt */
  [class$="-header"], [class$="-head"] { padding-bottom: 14px !important; }

  /* Ablauf-Raster: die Kugeln standen weit auseinander */
  .orb-row { gap: 18px 12px !important; }
  .orb-meta { margin-top: 7px !important; }
  .orb-text { margin-top: 3px !important; -webkit-line-clamp: 2; }

  /* Zwei-Spalten-Textblöcke */
  .about-split, .pos-split, .positioning-split {
    gap: 16px !important;
  }
  .about-heading { font-size: clamp(1.5rem, 6vw, 2rem) !important; line-height: 1.18; }
  .about-body { font-size: 14.5px !important; line-height: 1.55; margin-bottom: 10px !important; }

  /* Paket-Karten: keine feste Höhendeckelung.
     Mit `max-height` wurde die letzte Zeile („Details ansehen")
     abgeschnitten. Die Karten dürfen so hoch sein, wie ihr Inhalt
     braucht — im Karussell kostet das keine zusätzliche Scrollhöhe. */
  .package-tile, .pkg-tile {
    max-height: none !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
  }
  .package-body, .pkg-body {
    padding: 16px 16px 20px !important;
    gap: 5px;
    flex: 1;
  }
  /* Die Schaltfläche am Ende der Karte bekommt sicheren Abstand */
  .package-body > *:last-child,
  .pkg-body > *:last-child {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
  }

  /* Punkte-Anzeige näher an den Inhalt */
  .m-dots { margin-top: 8px !important; }
  .m-counter { margin-top: 4px !important; }

  /* Abschluss-Bereiche */
  #contact-cta { padding-top: 40px !important; padding-bottom: 40px !important; }
  /* Video randlos über die volle Breite; Kopfzeile und Link behalten ihr
     eigenes Seitenpolster. Die drei Grid-Zeilen (Kopf | Video | Link, wie
     im Desktop-Entwurf) mit gleich großen 1fr-Außenzeilen halten das Video
     exakt in der Mitte des dunklen Blocks, unabhängig von Textlängen. */
  #film {
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    min-height: 66vh;
    height: auto;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .film-head, .film-cta-wrap {
    padding-left: var(--m-pad);
    padding-right: var(--m-pad);
  }
  .film-facade { max-width: none; width: 100%; }

  /* Play-Button im Film-Bereich war mit 64px zu wuchtig — 50% kleiner. */
  .film-play { width: 32px !important; height: 32px !important; }
  .film-play svg { width: 9px !important; height: 11px !important; margin-left: 2px; }

  /* Play-Buttons auf den Video-Postern (portfolio.html, portfolio-hochzeit.html)
     waren mit 80px genauso wuchtig — ebenfalls 50% kleiner. Die Größe
     steht als width/height-Attribut direkt am <svg>, deshalb hier per
     CSS überschrieben statt in jeder der 5 Karten einzeln geändert. */
  .vc-poster-play svg { width: 40px !important; height: 40px !important; }

  /* ═══════════════════════════════════════════════════════════════════════
     13 · LESBARKEIT — Ausrichtung, Textschnitte, Tastflächen
     Nachgezogen am 4. August 2026. Steht bewusst am Ende der Datei:
     diese Regeln müssen frühere Festlegungen überschreiben.
     ═══════════════════════════════════════════════════════════════════════ */

  /* ── 13.1 Alles mittig ─────────────────────────────────────────────────
     Ausdrückliche Vorgabe: „Generell sollte der ganze Text überall auf
     der Webseite mittig sein."

     Hier stand vorher das Gegenteil (Fließtext linksbündig). Das war eine
     Lesbarkeitsentscheidung — bei zentriertem Fließtext beginnt jede Zeile
     an anderer Stelle und das Auge muss den Einstieg nach jedem Umbruch
     neu suchen. Die gestalterische Entscheidung geht hier vor; der
     Wunsch wurde zweimal bestätigt. Nicht eigenmächtig zurückdrehen. */
  section p, section li,
  .faq-answer-inner,
  .faq-answer-inner p,
  .faq-answer-inner li,
  .faq-question,
  .orb-title, .orb-text, .orb-meta,
  .testi-quote, .testimonial-quote,
  .bridge-text,
  .offer-name, .offer-desc,
  .inc-title, .inc-text, .inc-body p,
  .package-desc, .pkg-desc,
  .showreel-text p,
  .m-clamp, .m-clamp p {
    text-align: center !important;
  }

  /* Ausnahme: Zeilen, die aus zwei Spalten bestehen (Bezeichnung links,
     Preis rechts). Dort ist Zentrieren keine Gestaltung, sondern macht
     die Zuordnung unlesbar. */
  .addon-item, .addon-item *,
  .addons-table td, .addon-table td,
  .addon-name, .addon-price,
  .package-specs li, .pkg-specs li {
    text-align: initial !important;
  }
  .addon-price { text-align: right !important; }

  /* Die Frage trägt rechts das Plus-Zeichen — ohne feste Spalte
     schwamm es neben dem zentrierten Text. */
  .faq-question {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
  .faq-question .faq-icon { flex: none; }

  /* ── Zugeklappte Antworten schauen heraus ──────────────────────────────
     Die Aufklapp-Mechanik läuft über `grid-template-rows: 0fr → 1fr`.
     Im geschlossenen Zustand blieb die Zeile aber 14px hoch — exakt der
     `padding-bottom` der Antwort. Ein Innenabstand lässt sich nicht auf
     null stauchen, solange das Kind `min-height: auto` behält.

     Ergebnis: Von jeder geschlossenen Antwort stand die oberste Zeile
     angeschnitten unter der Frage und lief in die nächste Frage hinein.
     Genau das wirkte wie „abgeschnittene Sätze".

     Zwei Zeilen beheben es: das Kind darf schrumpfen, und der
     Innenabstand entfällt, solange zu ist. */
  .faq-answer-wrap > * { min-height: 0; }
  .faq-item:not(.open) .faq-answer-inner,
  .faq-answer-wrap[aria-hidden="true"] .faq-answer-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* ── 13.2 Keine harten Textschnitte ────────────────────────────────────
     `-webkit-line-clamp` schneidet mitten im Satz ab, ohne Ausweg — der
     Text ist vorhanden, aber unerreichbar. Wo der Platz reicht, entfällt
     die Kürzung ganz; der Rest bekommt in mobile.js ein „Weiterlesen".  */
  .orb-text,
  .testi-quote, .testimonial-quote,
  .bridge-text,
  .offer-desc,
  .package-desc, .pkg-desc {
    display: block !important;
    -webkit-line-clamp: none !important;
    -webkit-box-orient: initial !important;
    overflow: visible !important;
  }

  /* Der Verlauf am unteren Rand eines gekürzten Blocks blendet nach Creme
     aus. Auf dunklem Grund — etwa der Bridge-Sektion — muss er nach
     Braun laufen, sonst liegt dort ein heller Schleier. */
  .bridge-section .m-clamp:not(.is-open)::after,
  .philo-dark .m-clamp:not(.is-open)::after,
  .m-clamp.on-dark:not(.is-open)::after {
    background: linear-gradient(to bottom,
                rgba(44, 26, 14, 0), var(--brown-dark, #2C1A0E));
  }
  /* `on-dark` setzt mobile.js jetzt gemessen (buildClamp → onDarkGround),
     nicht mehr nur über die beiden Sektionsnamen oben. Auf dunklem Grund
     braucht auch der Knopf selbst helle Schrift — in Braun stand er sonst
     Braun auf Dunkelbraun. */
  .m-clamp.on-dark + .m-clamp-btn { color: rgba(244, 237, 228, 0.78); }

  /* ── 13.3 Ablauf — vier volle Zeilen statt 2×2-Raster ──────────────────
     Im Raster blieben je Schritt zwei Zeilen Text; alle vier Sätze brachen
     mitten ab. Kugel links, Text rechts: vollständig lesbar, und die
     Sektion wächst dabei kaum, weil die Kugeln kleiner werden. */
  .orb-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }
  /* Der Schritt hat vier Kinder: Kugel, Nummer, Titel, Text. Ohne
     ausdrückliche Platzierung fließen sie zeilenweise durch beide
     Spalten — die Kugel stand dann neben der Nummer und der Titel
     unter der Kugel. Die Kugel bekommt deshalb die ganze linke Spalte. */
  .orb-step {
    display: grid;
    grid-template-columns: 82px 1fr;
    grid-template-rows: auto auto 1fr;
    align-items: start;
    column-gap: 16px;
    row-gap: 3px;
    text-align: left;
  }
  #process .orb-scene,
  .process-section .orb-scene,
  .orb-scene {
    --orb: 82px !important;
    width: 82px;
    height: 82px;
    margin: 0;
    grid-column: 1;
    grid-row: 1 / span 3;
  }
  .orb-meta  { grid-column: 2; grid-row: 1; margin-top: 0 !important; }
  .orb-title { grid-column: 2; grid-row: 2; margin-top: 0; }
  .orb-text  { grid-column: 2; grid-row: 3; margin-top: 3px !important; }

  /* ── 13.4 Stimmen — Zitat vollständig, ohne Foto ───────────────────────
     Das Zitat ist das Verkaufsargument und brach nach drei Zeilen ab.
     Ohne Foto passt es vollständig; Name und Ort tragen den Beleg. */
  .testi-photo, .testimonial-photo { display: none !important; }
  .testi-quote, .testimonial-quote {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 0 14px !important;
  }
  .testi-card { padding: 0 !important; }
  .testi-body { padding: 4px 2px !important; }
  /* Die feste Karussellhöhe war auf die frühere Karte mit Foto ausgelegt */
  .testi-carousel { height: auto !important; min-height: 260px; }

  /* ── 13.5 Tastflächen ──────────────────────────────────────────────────
     Die Regel für `[class$="-dot"]` greift nur, wenn das Klassenattribut
     auf „-dot" endet. Sobald ein zweites Wort dazukommt (`active`,
     `is-active`), passt sie nicht mehr — genau der aktive Punkt verlor
     dadurch seine Tastfläche. Deshalb hier zusätzlich beim Namen. */
  .video-hero-dot, .foto-hero-dot, .hero-dot {
    position: relative;
  }
  .video-hero-dot::after, .foto-hero-dot::after, .hero-dot::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: var(--m-tap); height: var(--m-tap);
    transform: translate(-50%, -50%);
  }

  /* Die Video-Bedienung war 34–36px breit — fünf Knöpfe dicht nebeneinander.
     Vor- und Zurückspulen braucht auf dem Handy niemand; die drei übrigen
     bekommen dafür volle Tastbreite. */
  .vc-skip-back, .vc-skip-fwd { display: none !important; }
  .vc-btn {
    min-width: var(--m-tap) !important;
    min-height: var(--m-tap) !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════
     13.8 · MENÜ — Neuaufbau
     Reihenfolge von oben nach unten:
       Logo · Instagram/YouTube · Navigation · Anfrage · Sprache
     Alles mittig. Die Reihenfolge stellt `order` her, damit sie nicht
     davon abhängt, an welcher Stelle mobile.js die Bausteine einfügt.
     ═══════════════════════════════════════════════════════════════════════ */

  /* Abstände: Der obere Innenabstand rückt Logo, Kanäle und Navigation
     gemeinsam 20px höher. Der untere schiebt Anfrage und Sprache nach oben —
     beide hängen über `margin-top: auto` am unteren Rand, der Innenabstand
     ist damit der einzige Hebel für ihren Abstand zur Unterkante.
     (62px → 112px: auf Wunsch 50px weiter herauf.) */
  .mobile-menu-panel {
    align-items: center;
    text-align: center;
    padding: calc(var(--m-nav-total) + 6px) 24px
             calc(112px + env(safe-area-inset-bottom, 0px));
  }

  /* ── Hintergrundbild — extrem zurückgenommen ───────────────────────────
     Ausdrücklicher Wunsch: ein Foto als leiser Hintergrund im Menü, aber
     "nicht richtig sichtbar". Statt Element-Opazität (die auch Kinder mit
     erfassen könnte) liegt eine fast deckende Cremeschicht direkt IM
     Hintergrund-Stapel über dem Bild — das Foto scheint nur mit rund 5%
     hindurch. Das Panel-Cream (`background` oben) bleibt als Grundfarbe
     bestehen; dieses ::before liegt als eigene Ebene davor. */
  /* ── Logo als Kopf ─────────────────────────────────────────────────── */
  .m-menu-brand {
    order: -3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--brown-dark);
  }
  .m-menu-brand img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    display: block;
  }
  .m-menu-brand-word {
    font-family: 'Cormorant Garamond', serif;
    font-size: 25px;
    font-weight: 300;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    line-height: 1;
    /* Sperrsatz schiebt optisch nach rechts — hier ausgeglichen */
    text-indent: 0.26em;
  }
  .m-menu-brand-sub {
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    font-weight: 300;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--brown-light);
    line-height: 1;
    text-indent: 0.34em;
  }

  /* ── Soziale Kanäle ────────────────────────────────────────────────── */
  .m-menu-social {
    order: -2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
  }
  .m-menu-social a {
    display: grid;
    place-items: center;
    width: var(--m-tap);
    height: var(--m-tap);
    color: var(--brown-light);
    text-decoration: none;
    transition: color 0.25s ease;
  }
  .m-menu-social a:active { color: var(--brown-dark); }

  /* ── Navigation ────────────────────────────────────────────────────── */
  /* Beginnt rund 30px unter den Kanälen. Kein `flex: 1` mehr — sonst
     zöge die Liste sich über den ganzen Rest und die Abstände oben
     wären nicht mehr steuerbar. */
  .mobile-menu-list {
    order: 0;
    flex: 0 0 auto;
    width: 100%;
    margin-top: 30px;
    justify-content: flex-start;
    gap: 0;
  }
  /* Trennlinien entfallen — mittiger Satz wirkt mit Luft ruhiger */
  .mobile-menu-overlay .mobile-menu-item,
  .mobile-menu-overlay.is-open .mobile-menu-item {
    border-bottom: none;
  }

  .mobile-menu-overlay .mobile-menu-link,
  .mobile-menu-overlay .mobile-dropdown-toggle {
    position: relative;
    justify-content: center;
    gap: 0;
    min-height: 48px;
    padding: 3px 2px;
    font-size: 24px !important;
    text-align: center;
    color: var(--brown-mid) !important;
    transition: color 0.25s ease;
  }

  /* „Portfolio" stand mit dem Plus zusammen mittig — dadurch saß das Wort
     selbst außerhalb der Achse und sprang gegenüber den anderen Einträgen.
     Jetzt zählt nur das Wort für die Mitte; das Plus liegt darüber und
     sitzt am rechten Rand. */
  .mobile-dropdown-arrow {
    position: absolute !important;
    right: 22px;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  /* Aktuelle Seite dunkel — daran erkennt man, wo man gerade ist. */
  /* Der aktive Eintrag steht zwischen zwei feinen Strichen — dadurch ist
     auf einen Blick zu sehen, in welchem Bereich man gerade ist, ohne dass
     die übrigen Einträge Linien bekommen. Gilt auch für Untereinträge
     (Foto / Video) und für den Aufklapp-Eintrag darüber. */
  .mobile-menu-overlay .mobile-menu-link[aria-current="page"],
  .mobile-menu-overlay .mobile-dropdown-toggle[aria-current="page"],
  .mobile-menu-overlay .mobile-submenu-link[aria-current="page"] {
    color: var(--brown-dark) !important;
    font-style: italic;
    border-top: 1px solid rgba(122, 92, 68, 0.3);
    border-bottom: 1px solid rgba(122, 92, 68, 0.3);
  }
  /* Der goldene Punkt saß rechts daneben und verschob den mittigen
     Satz aus der Achse. Die dunkle Farbe genügt als Markierung. */
  .mobile-menu-overlay .mobile-menu-link[aria-current="page"]::after {
    content: none;
  }
  /* Rückmeldung beim Antippen */
  .mobile-menu-overlay .mobile-menu-link:active,
  .mobile-menu-overlay .mobile-dropdown-toggle:active,
  .mobile-menu-overlay .mobile-submenu-link:active {
    color: var(--brown-dark) !important;
  }

  .mobile-submenu { padding-left: 0; }
  .mobile-menu-overlay .mobile-submenu-link {
    justify-content: center;
    min-height: 42px;
    font-size: 12px;
    color: var(--brown-light) !important;
    transition: color 0.25s ease;
  }

  /* ── Anfrage ───────────────────────────────────────────────────────── */
  /* `margin-top: auto` schiebt diesen Block und die Sprache darunter an
     den unteren Rand, solange Platz da ist. Reicht der Platz nicht,
     wird der Abstand von selbst zu null und das Panel scrollt. */
  .m-menu-cta {
    order: 1;
    margin: auto 0 0;
    /* Beidseitig 20px schmaler als der Platz hergibt. Beide Werte nötig:
       Auf breiteren Geräten greift `max-width` (320 → 280), auf schmaleren
       die Rechnung — sonst liefe der Knopf dort wieder bis an den
       Innenabstand des Panels. */
    width: calc(100% - 40px);
    max-width: 280px;
    min-height: 52px;
    /* Vorher --brown-dark: neben dem hellen Menü wirkte der Knopf wie
       ein Fremdkörper. Jetzt das mittlere Braun der Marke; dunkel wird
       er beim Antippen und auf der Kontaktseite selbst. */
    background: var(--brown-mid);
    color: var(--cream) !important;
    font-size: 11.5px;
    letter-spacing: 0.26em;
    transition: background 0.25s ease;
  }
  .m-menu-cta:active,
  .m-menu-cta[aria-current="page"] {
    background: var(--brown-dark);
  }

  /* ── Sprache ganz unten, mittig ────────────────────────────────────── */
  .mobile-menu-panel .mobile-lang {
    order: 2;
    justify-content: center;
    gap: 0;
    min-height: 0;
    margin: 18px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid rgba(122, 92, 68, 0.12);
    border-bottom: none;
  }
  .mobile-menu-panel .mobile-lang-btn {
    min-height: var(--m-tap);
    padding: 0 14px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.2em;
  }
  .mobile-menu-panel .mobile-lang-btn.active-lang {
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
  }
  .mobile-menu-panel .mobile-lang-btn + .mobile-lang-btn {
    padding-left: 14px;
  }
  .mobile-menu-panel .mobile-lang-btn + .mobile-lang-btn::before {
    height: 12px;
    margin-top: -6px;
  }

  /* Beim Öffnen springt der Fokus auf das Schließen-Kreuz. Der harte
     eckige Standardrahmen wirkte dort wie ein Kasten um das X. Sichtbar
     bleibt der Fokus — nur rund und in der Markenfarbe. */
  .mobile-menu-panel :focus-visible {
    outline: 2px solid rgba(122, 92, 68, 0.45);
    outline-offset: 2px;
    border-radius: 3px;
  }
  .m-menu-close:focus-visible { border-radius: 50%; }

  /* Kürzere Geräte: Menü darf enger stehen, statt zu scrollen */
  @media (max-height: 700px) {
    .m-menu-brand img { width: 44px; height: 44px; }
    .m-menu-brand-word { font-size: 21px; }
    .m-menu-social { margin-top: 14px; }
    .mobile-menu-list { margin-top: 20px; }
    .mobile-menu-overlay .mobile-menu-link,
    .mobile-menu-overlay .mobile-dropdown-toggle {
      min-height: 42px;
      font-size: 21px !important;
    }
    .m-menu-cta { min-height: 48px; }
  }

  /* ── 13.7 Sprache — Sichtbarkeit und Grundform ─────────────────────────
     Position, Größe und Ausrichtung stehen oben in 13.8. Hier bleibt nur,
     was unabhängig davon gilt.

     ACHTUNG — der eigentliche Grund, warum DE/EN im Menü „weg" war:
     Die Seiten-CSS setzt `.mobile-lang { opacity: 0 }` und blendet den
     Block erst über `.mobile-menu-overlay.open` ein. Diese Klasse gibt es
     nicht mehr — mobile.js schaltet mit `.is-open`. Der Umschalter stand
     also immer im Dokument, war aber unsichtbar, egal an welcher Stelle.
     Die pauschale Sichtbar-Regel weiter oben greift hier nicht, weil
     `mobile-lang` auf keines ihrer Namensmuster passt. */
  .mobile-menu-panel .mobile-lang,
  .mobile-menu-overlay .mobile-lang,
  .mobile-menu-overlay.is-open .mobile-lang {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
  }

  /* „Sprache" davor ist überflüssig — DE/EN spricht für sich */
  .mobile-menu-panel .mobile-lang-label { display: none; }

  /* Die Seiten geben den Knöpfen einen Rahmen-Kasten; im Menü zu schwer. */
  .mobile-menu-panel .mobile-lang-btn {
    min-width: 0;
    background: none !important;
    border: none !important;
    font-family: 'Jost', sans-serif;
    color: var(--brown-light);
    text-decoration: none;
  }
  .mobile-menu-panel .mobile-lang-btn.active-lang {
    color: var(--brown-dark);
    text-decoration: underline;
  }
  /* Feiner Trenner zwischen DE und EN */
  .mobile-menu-panel .mobile-lang-btn + .mobile-lang-btn {
    position: relative;
  }
  .mobile-menu-panel .mobile-lang-btn + .mobile-lang-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    background: rgba(122, 92, 68, 0.28);
  }

  /* ── 13.6 Botanische Illustrationen ────────────────────────────────────
     Sie bleiben als leiser Akzent, dürfen aber nie über Inhalt oder
     Bedienelementen liegen. Im Ablauf überlappten sie die unteren Kugeln. */
  #process img[src*="hintergrund/"],
  .process-section img[src*="hintergrund/"] {
    display: none !important;
  }

  /* ═══════════════════════════════════════════════════════════════════════
     14 · STRAFFUNG — weniger Scrollstrecke bei gleichem Inhalt
     Nachgezogen am 4. August 2026. Steht am Ende, weil diese Regeln
     frühere Festlegungen überschreiben müssen.
     ═══════════════════════════════════════════════════════════════════════ */

  /* ── 14.02 Titelbild bis an den rechten Rand ───────────────────────────
     Die Diashow-Bilder sind mit `left: -20px; right: -20px` bewusst breiter
     als der Bildschirm — der Ken-Burns-Zoom soll an keiner Kante Blitzer
     zeigen. Die Grundregel `img { max-width: 100% }` (Block 2) hat sie
     aber auf Bildschirmbreite gekappt: Das Bild endete bei 366px statt
     410px, rechts blieb ein 24px breiter brauner Streifen stehen.
     Diese Ebenen brauchen die Deckelung nicht. */
  .slide-img,
  .hero-video-wrap img,
  .hero-video-wrap video,
  .au-hero-bg img,
  [class*="-hero"] > img {
    max-width: none;
  }

  /* ── 14.03 Vertrauens-Leiste — auf Wunsch entfernt, siehe 14.03b ──────── */
  .trust-strip { display: none !important; }

  /* ── 14.03b Foto/Video-Umschalter ───────────────────────────────────────
     Ersetzt die Vertrauens-Leiste. Von der Startseite führte bisher kein
     direkter Weg zu fotografie.html oder videografie.html, nur zum
     gemeinsamen Portfolio. Kantige Reiter (bewusst nicht rund — die
     restliche Seite arbeitet nirgends mit Pillen-Formen) blenden zwischen
     zwei Infoblöcken um: kleines Foto, kurzer Text, Link zur jeweiligen
     Seite (Verhalten siehe mobile.js, initServicesSwitch). */
  .services-switch {
    display: block;
    background: #ffffff;
    padding: 44px var(--m-pad) 48px !important;
    text-align: center;
  }
  .switch-head { margin-bottom: 26px; }
  .switch-toggle {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(122, 92, 68, 0.18);
  }
  .switch-tab {
    flex: 1 1 50%;
    border: none;
    background: none;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0 0 14px;
    min-height: var(--m-tap);
    color: var(--brown-light);
    cursor: pointer;
    transition: color 0.4s ease;
  }
  .switch-tab.active { color: var(--brown-dark); }
  .switch-thumb {
    position: absolute;
    left: 0; bottom: -1px;
    width: 50%;
    height: 2px;
    background: var(--brown-dark);
    transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .switch-toggle[data-active="video"] .switch-thumb { transform: translateX(100%); }

  .switch-panel { display: none; padding-top: 28px; }
  .switch-panel.active { display: block; }
  .switch-photo {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 16 / 10;
    margin: 0 auto 20px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(20, 10, 5, 0.18);
  }
  .switch-photo img,
  .switch-photo video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Das Foto-Panel zoomt sanft (Ken Burns) — das Video-Panel hat mit dem
     eigenen laufenden Bild schon genug Bewegung und bleibt unskaliert. */
  .switch-photo img {
    animation: switchKenBurns 10s ease-in-out infinite alternate;
  }
  .switch-text {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 16px;
    line-height: 1.6;
    color: var(--brown-mid);
    max-width: 32ch;
    margin: 0 auto 22px;
  }
  .switch-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--m-tap);
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--brown-dark);
    text-decoration: none;
    border-bottom: 1px solid rgba(122, 92, 68, 0.4);
    padding: 0 2px 6px;
    transition: color 0.3s, border-color 0.3s, letter-spacing 0.3s;
  }
  .switch-link:active { letter-spacing: 0.3em; }

  @keyframes switchKenBurns {
    0%   { transform: scale(1); }
    100% { transform: scale(1.08); }
  }
  @media (prefers-reduced-motion: reduce) {
    .switch-photo img { animation: none; }
  }

  /* ── 14.04 „Über uns" — Text zuerst, mittig ────────────────────────────
     Auf dem Desktop ist .team-grid die Reihe Foto – Text – Foto. Mobil
     kommt zuerst der Text über die volle Breite (er ist der Inhalt der
     Sektion), darunter die beiden Bilder nebeneinander. */
  .team-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 12px !important;
    align-items: start;
    /* Kein eigenes Seitenpolster: Die Sektion bringt bereits 20px mit.
       Mit einem zweiten Polster kamen die Fotos nur noch auf 147px
       Breite und 110px Höhe — briefmarkengroß. */
    padding: 0 !important;
    margin: 0 !important;
  }
  .team-center-col {
    grid-column: 1 / -1;
    order: -1;                 /* Text vor die Bilder */
    text-align: center;
    width: auto !important;
    max-width: 100%;
  }
  .team-photo-col {
    aspect-ratio: 4 / 5;
    max-height: 230px;
    overflow: hidden;
    margin: 0 !important;
  }
  .team-photo-col img {
    width: 100%;
    height: 100%;
    max-height: 230px;
    object-fit: cover;
    display: block;
  }

  /* Der Textteil erbt aus dem Desktop-Entwurf ein zusätzliches Polster
     und begrenzte Zeilenbreiten — mobil bleibt davon zu wenig übrig. */
  .team-center-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .team-headline, .team-lead, .team-text, .team-signature {
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* ── 14.045 Video: erst der Abspiel-Knopf, dann die Steuerung ──────────
     Die Seite blendet die Steuerleiste auf Touch-Geräten dauerhaft ein
     (`@media (hover: none) { .vc-player .vc-overlay { opacity: 1 } }`).
     Gewünscht ist ein ruhiger Ruhezustand: nur der Abspiel-Knopf. Die
     Leiste erscheint erst auf einen weiteren Tipper — geschaltet über
     `m-vc-open` in mobile.js.

     Bewusst am Overlay selbst angesetzt statt an `.vc-player`: Auf der
     Startseite heißt der Rahmen `.film-facade`, auf den Unterseiten
     `.vc-player`. Über das Overlay sind beide erfasst. */
  .vc-overlay {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease;
  }
  .m-vc-open .vc-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* ── 14.01 Seitliches Polster aus dem Desktop-Entwurf ──────────────────
     Die Grundregel in Block 2 lautet `section { padding-left: var(--m-pad) }`
     und hat damit nur Element-Spezifität (0,0,1). Jede klassenbasierte
     Seitenregel (0,1,0) gewinnt dagegen — unabhängig von der Reihenfolge.

     Folge: Neun Sektionen behielten ihre 40–60px aus dem Desktop-Entwurf.
     Auf ueber-uns.html blieben dadurch von 390px Bildschirmbreite nur
     266px für den Text übrig — knapp ein Drittel ging an die Ränder.

     Gefunden auf index, videografie, ueber-uns, investment, journal und
     portfolio-hochzeit. Randlose Sektionen (`.m-flush`, Instagram) sind
     bewusst nicht aufgeführt. */
  .testimonial-section, .quote-section, .testi-invest,
  .addons-invest, .payflow, .bridge-section,
  .featured-section, .final-cta,
  section#process {
    padding-left: var(--m-pad) !important;
    padding-right: var(--m-pad) !important;
  }

  /* ── 14.015 Philosophie: eine Spalte statt 2×2 ─────────────────────────
     Im 2×2-Raster war jede Textspalte nur 129px breit — rund 16 Zeichen
     je Zeile, also alle paar Wörter ein Umbruch. Untereinander steht die
     volle Breite zur Verfügung, und alle vier Werte bleiben sichtbar
     (kein Wegwischen nötig). Kostet rund 90px Länge, gewinnt aber
     deutlich an Lesbarkeit. */
  .philosophy-grid.m-grid-2x2 {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  .philosophy-grid .philosophy-item {
    padding: 0 !important;
    max-width: 42ch;
    margin: 0 auto !important;
    text-align: center;
  }
  .philosophy-grid .philosophy-text { max-width: none !important; }

  /* ── 14.018 Blätter-Pfeile der Stimmen ─────────────────────────────────
     Entfernt auf Wunsch — die Karten sind ohnehin wischbar, die Pfeile
     waren redundant. Punkte bleiben als Positionsanzeige. */
  .testi-arrow {
    display: none;
  }

  /* ── 14.02 Zitat-Sektion (Über uns) ────────────────────────────────────
     Der Knopf war 86px hoch (Innenabstände aus dem Desktop), und die
     beiden senkrechten Zierlinien beanspruchten je 56px — zusammen
     112px Höhe für zwei Haarlinien. */
  .quote-line-top, .quote-line-bottom { height: 30px !important; }
  .quote-section .btn-cta {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    min-height: 52px;
    margin: 0 auto !important;
    padding: 10px 18px !important;
    text-align: center;
    line-height: 1.35;
  }

  /* ── 14.048 Startseite · „Über uns" (#about) ───────────────────────────
     Zwei Befunde:

     1. Die Fotospalte war 0px breit UND 0px hoch — das Bild wurde auf dem
        Handy überhaupt nicht angezeigt. Weil es `loading="lazy"` trägt und
        sein Behälter keine Fläche hatte, kam es nie in den Sichtbereich
        und wurde deshalb auch nie geladen (die Datei selbst ist da, der
        Server liefert sie mit 200). Ein Teufelskreis: keine Größe → kein
        Laden → keine Größe.

     2. Überschrift und der Link „Unsere ganze Geschichte" standen
        linksbündig, die Augenbraue „Über uns" klebte als schmaler
        Inline-Kasten am linken Rand.

     Beides ist hier gelöst: Bild oben in festem 4:3, darunter der Text —
     alles mittig, wie in der Investment-Sektion. */
  #about .about-split {
    display: block !important;
    grid-template-columns: none !important;
    text-align: center;
  }
  #about .about-photo-col {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    height: auto !important;
    overflow: hidden;
    margin: 0 0 20px;
  }
  #about .about-photo-img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
  }

  /* Der Bildtitel lag mit `top: -82px` außerhalb des Bildes — sichtbar
     wurde das erst, als das Bild wieder Fläche hatte. Er sitzt jetzt im
     Bild und rückt auf Wunsch nochmals 20px tiefer (18px → -2px). */
  #about .about-photo-caption {
    position: absolute;
    top: auto !important;
    left: 0;
    right: 0;
    bottom: -2px;
    width: auto;
    text-align: center;
  }

  /* Alles im Textteil mittig.
     `.about-text-col` bringt aus dem Desktop-Entwurf `padding-right: 20px`
     mit — dort steht der Text neben dem Foto und braucht den Abstand.
     Mobil, wo der Text die volle Breite hat, verschiebt dieses Polster
     jeden zentrierten Block um 10px nach links: Die Mitte lag bei 183
     statt 193. Genau das war der schiefe Eindruck. */
  #about .about-text-col {
    text-align: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #about .about-heading,
  #about .about-body,
  #about .sec-eyebrow { text-align: center !important; }
  #about .about-body {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-right: 0 !important;
  }
  /* Augenbraue und Link sind Inline-Kästen — sie folgen der Textachse
     des Elternteils, brauchen aber selbst keine Breite. */
  #about .sec-eyebrow { display: inline-flex; }
  #about .about-cta {
    display: inline-flex !important;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* ── 14.05 Punkte der Titel-Diashow mittig ─────────────────────────────
     Die Seite verankert die Punktreihe rechts (`left: 188px; right: 20px`).
     `justify-content: center` zentriert dann nur innerhalb dieses schmalen
     Streifens — die Punkte saßen dadurch deutlich rechts der Mitte.
     Über die volle Breite gespannt sitzen sie wirklich mittig. */
  .slide-dots {
    left: 0 !important;
    right: 0 !important;
    justify-content: center;
  }

  /* Sperrsatz schiebt zentrierten Text optisch nach links: hinter dem
     letzten Zeichen steht noch ein voller Buchstabenabstand. Ein
     Einzug in halber Höhe des Abstands gleicht das aus. */
  .hero-eyebrow { text-indent: 0.24em; }
  .hero-cta     { text-indent: 0.14em; }

  /* ── 14.06 Kennzahlen „1 Paar · 2 Perspektiven · 12 Hochzeiten · 100%" ──
     Die vier Blöcke standen im 2×2-Raster mit ungleichen Höhen (89px und
     112px), weil die Beschriftungen unterschiedlich oft umbrechen. Zahlen
     und Texte lagen dadurch reihenweise auf verschiedenen Linien — das war
     der unruhige Eindruck.

     Feste Zeilen für die Beschriftung bringen alle vier auf dieselbe
     Grundlinie; Zahl und Text stehen mittig übereinander. */
  .stats-narrow-grid.m-grid-2x2 {
    grid-template-columns: 1fr 1fr !important;
    /* Gleich hohe Zeilen: Eine Beschriftung braucht drei Zeilen
       („12 · Hochzeiten pro Jahr — maximal"), die übrigen zwei. Ohne
       `1fr` wären die Reihen unterschiedlich hoch und die Zahlen lägen
       nicht auf einer Linie. */
    grid-auto-rows: 1fr !important;
    gap: 24px 14px !important;
    align-items: stretch;
  }
  .sn-item {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 !important;
  }
  .sn-number {
    font-size: 2rem !important;
    line-height: 1;
    margin: 0 0 6px !important;
  }
  .sn-label {
    font-size: 11.5px !important;
    line-height: 1.4;
    margin: 0 !important;
  }

  /* ── 14.07 „Lukas & Maria" im Titelbild tiefer ─────────────────────────
     Zuerst 10px, auf Nachfrage weitere 20px — zusammen 30px. */
  .au-hero-name { margin-top: 30px !important; }

  /* ── 14.1 Instagram bleibt ein 2×3-Raster ──────────────────────────────
     Hier stand kurzzeitig eine Wisch-Reihe (alle 16 Bilder, rund 230px
     statt 772px). Sie gefiel nicht — Instagram bleibt beim Raster aus
     Block 8: zwei Spalten, drei Reihen, sechs Bilder. Der Folgen-Link
     liegt dabei wie zuvor mittig auf den Bildern. */

  /* ── 14.2 Paket-Sektion: die Blöcke nach den Karten ────────────────────
     Auf die drei Karten folgen ein „Foto & Film"-Banner und ein zweiter
     CTA — zusammen 604px. Beide bleiben inhaltlich erhalten, brauchen
     aber nicht die Desktop-Innenabstände. */
  .combo-inner { padding: 22px 20px !important; }
  .combo-price-wrap { margin-top: 12px !important; }

  /* „Individuell für euch" rückt rund 50px höher.
     ACHTUNG — ein `margin-top: -50px` war hier falsch: Zwischen Banner
     und Block liegt gar kein Zwischenraum, der Leerraum steckt in den
     Innenabständen beider Blöcke. Der negative Außenabstand hat die
     beiden deshalb um 50px überlappen lassen.
     Richtig ist, die Polster zu verkleinern: 23px Luft am Banner-Ende,
     30px Abstand des Banners und das Kopfpolster des Blocks.
     Der eigentliche Verursacher ist `margin-top: 80px` am Block selbst
     (Desktop-Entwurf). 80 → 30 sind die gewünschten 50px. */
  .combo-inner  { padding-bottom: 8px !important; }
  .combo-banner { margin-top: 14px !important; }
  .packages-cta {
    margin-top: 30px !important;
    padding-top: 0 !important;
  }
  .packages-cta-title { margin-top: 0 !important; }
  .packages-cta-text {
    font-size: 14px !important;
    line-height: 1.55;
    max-width: 40ch;
    margin-left: auto;
    margin-right: auto;
  }
  /* Der Knopf war 84px hoch (18px/56px Innenabstand aus dem Desktop) */
  .packages-cta a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: calc(100% - 2 * var(--m-pad));
    max-width: 320px;
    min-height: 52px;
    margin: 14px auto 0;
    padding: 10px 18px !important;
    text-align: center;
  }

  /* ── 14.3 Paket-Karte: Abstände aus dem Desktop-Entwurf ────────────────
     Die Karte ist 632px hoch, davon sind allein 124px Außenabstände
     zwischen den sechs Zeilen (16/18/28/26/26/10px). Auf 390px ist das
     Weißraum, den man scrollen muss. Der Inhalt bleibt vollständig. */
  .package-body > *,
  .pkg-body > * {
    margin-bottom: 10px !important;
  }
  .package-body .package-tagline,
  .pkg-body .package-tagline { margin-bottom: 14px !important; }
  .package-body .package-specs,
  .pkg-body .package-specs { margin-bottom: 14px !important; }
  .package-body > *:last-child,
  .pkg-body > *:last-child { margin-bottom: 0 !important; }

  /* ── 14.35 Karussell-Reihen: Außenabstand aus dem Desktop ──────────────
     Die Seiten geben ihren Rastern einen unteren Außenabstand (z. B.
     .styles-grid: 60px). Als Karussell schiebt der die eigene
     Punkte-Anzeige und den Wisch-Hinweis nach unten und reißt sie vom
     Karussell los. Die Grundregel für .m-carousel setzt zwar `margin: 0`,
     verliert aber gegen die spätere Seitenregel — deshalb hier bestimmt. */
  .m-carousel {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* ── 14.4 Bridge-Sektion: Abstände und Knopf ───────────────────────────
     908px für Überschrift, Collage, zwei Absätze und einen Knopf. Davon
     waren 146px Außenabstände und 115px allein der Knopf (Innenabstände
     aus dem Desktop-Entwurf). */
  .bridge-eyebrow { margin-bottom: 14px !important; }
  .bridge-media   { margin-bottom: 24px !important; }
  .bridge-text    { margin-bottom: 14px !important; }
  .bridge-text + .bridge-text { margin-bottom: 22px !important; }
  .bridge-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: calc(100% - 2 * var(--m-pad));
    max-width: 320px;
    min-height: 52px;
    margin: 0 auto !important;
    padding: 10px 18px !important;
    text-align: center;
    line-height: 1.35;
  }

  /* ── 14.45 Stimmen: Bild zurück über dem Zitat, Text mit Luft ──────────
     Das Foto war ausgeblendet worden, damit das vollständige Zitat passt.
     Auf Wunsch steht es wieder über dem Zitat.

     Zugleich lag der Text mit `padding: 4px 2px` praktisch auf dem
     Kartenrand — das war der gedrängte Eindruck im Kasten.

     Die Karten sind absolut positioniert (räumliches Karussell), deshalb
     braucht die Bühne eine feste Höhe. Sie muss Bild und längstes Zitat
     zugleich fassen. */
  .testi-photo, .testimonial-photo {
    display: block !important;
    max-height: 130px;
    overflow: hidden;
  }
  .testi-photo img, .testimonial-photo img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    display: block;
  }
  /* Schlagschatten: Der Desktop-Wert (`0 60px 140px rgba(0,0,0,.75)` plus
     ein zweiter) war vor dem hellen Creme ein dunkler Schleier. Mein
     erster Gegenzug (0.13 Deckkraft) war dann zu zaghaft — die Karte
     wirkte flach aufgeklebt. Jetzt zwei Ebenen: ein enger, dunklerer
     Kontaktschatten direkt unter der Kante und ein weicher, weiter
     Schatten darunter. Das ergibt Tiefe, ohne den Grund einzutrüben. */
  .testi-card {
    box-shadow:
      0 4px 10px rgba(44, 26, 14, 0.16),
      0 18px 40px rgba(44, 26, 14, 0.20) !important;
  }
  /* Die seitlichen Karten liegen optisch weiter hinten — leiserer Schatten */
  .testi-card:not(.is-active):not(.active) {
    box-shadow:
      0 3px 8px rgba(44, 26, 14, 0.10),
      0 12px 26px rgba(44, 26, 14, 0.13) !important;
  }
  .testi-body { padding: 15px 18px 16px !important; }
  .testi-quote, .testimonial-quote {
    font-size: 14px !important;
    line-height: 1.58 !important;
    margin: 0 0 10px !important;
  }
  /* Nur Rückfallwert. Die tatsächliche Höhe rechnet initTestiStage() in
     mobile.js aus der höchsten Karte aus und setzt sie als Inline-Stil —
     ein fester Wert hier reicht nicht, weil die Zitate je Seite und je
     Sprache unterschiedlich lang umbrechen. */
  .testi-carousel {
    height: 430px !important;
    min-height: 0 !important;
  }

  /* ── 14.5 Stil-Karten: Bild weniger hochkant ───────────────────────────
     Das Bild war 414px hoch bei 296px Kartenbreite — fast die halbe
     Bildschirmhöhe für ein einzelnes Vorschaubild. */
  .style-img, .styles-grid .style-img {
    aspect-ratio: 4 / 5;
    max-height: 300px;
    overflow: hidden;
  }
  .style-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ═════════════════════════════════════════════════════════════════════════
     15 · INVESTMENT-SEITE (investment.html)

     Ausgangslage auf dem Handy — vier Dinge standen der Entscheidung im Weg:

     1. Jede Paketkarte war 895px hoch, der Bildschirm 844px. Es war nie
        eine ganze Karte zu sehen; das Bild allein nahm 401px (3:4).
     2. Die Karten lagen in einem Wisch-Karussell. Die erste Karte war nach
        links aus dem Bild geschoben, ohne sichtbaren Hinweis — wer nicht
        zufällig nach rechts wischte, hielt das mittlere Paket für das
        günstigste. Preise will man nebeneinanderlegen, nicht suchen.
     3. Die vier Reiter lagen als wischbare Reihe auf ~950px Breite; der
        vierte („Maßgeschneiderte Anfrage") war komplett außerhalb.
     4. Der Preis stand mit 46px unter einer 186px langen Merkmalsliste —
        also genau das, wonach man zuerst schaut, ganz unten.

     Leitgedanke hier: Reihenfolge nach Entscheidungsweg. Erst welches
     Paket (Reiter), dann Name und Preis, dann was drin ist, dann die
     Handlung. Alles untereinander, nichts seitlich versteckt.
     ═════════════════════════════════════════════════════════════════════════ */

  /* ── 15.0 Hero: Titel aus der Kurve holen ─────────────────────────────
     Der Hero richtet seinen Inhalt unten aus (`justify-content: flex-end`)
     und hat 70px Innenabstand nach unten. Darunter liegt die cremefarbene
     Abschlusskurve mit 80px Höhe und z-index 3 — also ÜBER dem Titel (2).

     Auf dem Desktop geht das gerade noch auf, weil die Kurve in der Mitte
     flach ausläuft. Auf dem Handy ist der Hero nur noch 338px hoch, der
     Titel bricht auf zwei Zeilen um und rutscht damit in genau den Bereich,
     in dem die Kurve am höchsten gefüllt ist: Die untere Zeile
     („INVESTMENT") wurde zur Hälfte von der Kurve überdeckt.

     Zwei Maßnahmen: Die Kurve wird auf dem schmalen Schirm flacher (80px
     wären hier ein Drittel der Hero-Höhe), und der Titel bekommt so viel
     Abstand nach unten, dass er sicher darüber endet. */
  #hero-pakete {
    padding-bottom: 76px !important;
  }
  #hero-pakete .hero-curve {
    height: 56px;
  }

  /* ── 15.05 Einleitung: gleicher Seitenrand wie alles andere ───────────
     Der Block brachte 40px Innenabstand aus dem Desktop-Entwurf mit,
     während Karten und Reiter auf --m-pad (20px) sitzen. Nebeneinander
     gesehen wirkten die Kanten dadurch verschoben; nebenbei kostete der
     schmalere Textblock zusätzliche Zeilen. */
  .intro-invest {
    padding-left: var(--m-pad) !important;
    padding-right: var(--m-pad) !important;
  }
  .intro-invest-quote { margin-top: 26px !important; }

  /* ── 15.1 Reiter: Raster statt Wisch-Reihe ────────────────────────────
     Drei kurze Reiter nebeneinander, die lange „Maßgeschneiderte Anfrage"
     über die volle Breite darunter. Alle vier sind gleichzeitig sichtbar. */
  .tab-bar {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--m-pad) !important;
    overflow: visible !important;
  }
  .tab-bar::before, .tab-bar::after { display: none !important; }
  .tab-bar .bot-deco { display: none !important; }

  .tab-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: var(--m-tap);
    padding: 10px 6px !important;
    border: 1px solid rgba(122, 92, 68, 0.22);
    background: transparent;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    letter-spacing: 0.1em;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--brown-mid);
    text-align: center;
    white-space: normal !important;
    border-radius: 2px;
  }
  .tab-btn[data-tab="individuell"] { grid-column: 1 / -1; }

  /* Aktiver Reiter: gefüllt statt nur unterstrichen — auf dem Handy muss
     der Zustand ohne Hover-Vergleich erkennbar sein. */
  .tab-btn.active {
    background: var(--brown-dark);
    border-color: var(--brown-dark);
    color: var(--cream-light);
  }
  /* Die Desktop-Striche über/unter dem aktiven Reiter würden im gefüllten
     Feld als helle Kanten stehen bleiben. */
  .tab-btn::before, .tab-btn::after { display: none !important; }

  /* ── 15.2 Paketkarten: mittig startendes Karussell ─────────────────────
     Zwischenschritt war ein senkrechter Stapel. Der löste zwar das alte
     Karussell-Problem (erste Karte unsichtbar links außerhalb), schuf aber
     ein neues: Bei rund 500px Kartenhöhe steht nie ein zweiter Preis mit
     im Bild. Pakete vergleicht man aber — und was man nicht nebeneinander
     sieht, vergleicht man nicht.

     Jetzt liegen die Karten wieder in einer Reihe, aber das mittlere Paket
     startet ZENTRIERT (Startposition in mobile.js). Die Grundmechanik —
     Flex-Reihe, Snap, verborgene Scrollleiste, Punkte, Wisch-Hinweis —
     kommt aus der .m-carousel-Komponente; hier steht nur, was das
     Paket-Karussell davon abweichend braucht.

     Der seitliche Innenabstand ist genau die halbe Restbreite. Damit kommt
     auch die erste und die letzte Karte in der Mitte zur Ruhe statt am
     Rand zu kleben — sonst wirkte das Wischen an den Enden wie ein
     Anschlag. Die Nachbarkarten schauen dadurch links und rechts gleich
     weit herein und zeigen ohne Worte, dass es weitergeht. */
  /* Luft zwischen Reitern und Paketen: Vorher lagen zwischen dem Knopf
     „Maßgeschneiderte Anfrage" und der ersten Karte nur 12px — beides klebte
     aneinander und die Reiterreihe sah aus, als gehörte sie zur Karte.
     Mit 50px zusätzlich sind es 62px: Die Auswahl oben und die Pakete
     darunter sind sichtbar zwei getrennte Schritte. */
  .pakete-wrap {
    padding-left: 0;
    padding-right: 0;
    padding-top: 50px;
  }

  .pakete-cards.m-carousel {
    --m-rand: calc((100vw - var(--m-card, 74vw)) / 2);
    gap: 12px;
    max-width: 100vw !important;
    padding: 4px var(--m-rand) 6px !important;
    scroll-padding-inline: var(--m-rand);
  }

  /* Einrasten NUR auf den Karten.
     `.m-carousel > *` gibt jedem direkten Kind `scroll-snap-align: center`.
     In dieser Reihe liegen aber noch drei weitere Kinder: die beiden
     Detailtafeln und der Zurück-Knopf, alle `position: absolute` an
     beliebigen Stellen. Sie brachten damit eigene Rastpunkte mit, die mit
     denen der Karten konkurrierten — das Wischen blieb irgendwo dazwischen
     stehen statt sauber auf dem nächsten Paket einzurasten. */
  .pakete-cards.m-carousel > .paket-info-panel,
  .pakete-cards.m-carousel > .expand-back-btn {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
  }

  /* Der Konfigurator-Verweis im Reiter „Individuell" ist eine einzelne
     Karte — kein Karussell (buildCarousel steigt unter zwei Einträgen aus)
     — und braucht deshalb weiter den normalen Seitenrand. */
  #panel-individuell .pakete-cards {
    max-width: 100% !important;
    padding: 0 var(--m-pad) !important;
  }

  .paket-card-h {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(122, 92, 68, 0.16);
    overflow: hidden;
    /* Gleich hohe Karten: Sonst richten sich Preis und Knopf je nach Länge
       der Merkmalsliste auf unterschiedlicher Höhe aus, und beim Wischen
       springt beides. Die Liste nimmt den Ausgleich auf (siehe 15.25). */
    height: auto;
  }

  /* Bild im Querformat 4:3.
     Vorgeschichte: Zuerst ein 128px flacher Streifen — vom Motiv war nichts
     zu erkennen, die Karten sahen aus, als hätte jede oben einen Balken.
     Dann das Originalverhältnis der Vorlagen (1500×844 = 16:9), das schnitt
     zwar nichts ab, wirkte in der schmalen Karte aber wieder wie ein Band.

     4:3 ist der Kompromiss: hoch genug, dass das Brautpaar Raum bekommt,
     und immer noch Querformat. Aus 16:9 werden dabei links und rechts je
     rund 17% weggeschnitten (`object-fit: cover`) — die Motive sind mittig,
     das trägt. Bei 289px Kartenbreite ergibt das ~217px Bildhöhe. */
  .paket-img-wrap {
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    flex: none !important;
  }

  .paket-body { padding: 16px 16px 18px !important; }

  /* Reihenfolge im Kartenkörper: Der Preis wandert direkt unter den Namen.
     Vorher stand er hinter der Merkmalsliste — man musste an allem
     vorbeilesen, um zu erfahren, was das Paket kostet. */
  /* 10px waren in Versalien mit weitem Buchstabenabstand nicht mehr
     zuverlässig lesbar. Gilt auch für konfigurator.html, wo dieselbe
     Auszeichnung verwendet wird — dort ebenfalls ein Gewinn. */
  .paket-tier-badge {
    order: 1;
    font-size: 11.5px !important;
    letter-spacing: 0.18em;
    margin-bottom: 5px !important;
  }
  .paket-name {
    order: 2;
    font-size: 21px !important;
    letter-spacing: 0.12em;
    margin-bottom: 2px !important;
  }
  .paket-price-display {
    order: 3;
    font-size: 29px !important;
    margin-bottom: 12px !important;
  }
  .paket-price-display .price-from {
    font-size: 12px;
    letter-spacing: 0.08em;
    vertical-align: middle;
  }
  .paket-price-display .price-currency { font-size: 20px; }
  .paket-body-divider { order: 4; margin-bottom: 10px !important; }
  /* ── 15.25 Gleiche Höhe, gleiche Zeilen ────────────────────────────────
     Alle Karten sind gleich hoch (Flex-Reihe streckt sie). Damit Preis und
     Knopf beim Wischen nicht von Karte zu Karte springen, nimmt die
     Merkmalsliste den Höhenunterschied auf: Sie wächst, der Knopf sitzt
     dadurch überall unten, und die Preise stehen überall auf derselben
     Linie direkt unter dem Namen. Genau das macht zwei Pakete
     vergleichbar. */
  .paket-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .paket-features {
    order: 5;
    flex: 1 1 auto !important;
    margin-bottom: 14px !important;
  }
  .paket-features li {
    font-size: 13.5px;
    line-height: 1.65;
    padding-left: 13px;
  }
  .paket-expand-btn {
    order: 6;
    margin-top: 0 !important;
    min-height: var(--m-tap);
    padding: 13px 16px !important;
    font-size: 11.5px !important;
    letter-spacing: 0.16em !important;
  }

  /* ── 15.28 Das empfohlene Paket sichtbar machen ────────────────────────
     Rein gestalterische Lenkung: Das mittlere Paket trägt bereits das
     Kennzeichen „Meistgewählt". Damit es beim Wischen auch ohne Lesen
     auffällt, bekommt seine Karte einen kräftigeren Rand und einen
     leichten Schatten — sie liegt eine Spur vor den anderen. Preise und
     Leistungen bleiben unangetastet.

     `:has()` kennen ältere Browser nicht; dort bleibt die Karte schlicht
     wie die übrigen. Das ist Absicht — die Auszeichnung ist Zugabe, keine
     Voraussetzung dafür, dass die Seite funktioniert. */
  .paket-card-h:has(.paket-tier-badge[data-i18n-html="pkt.tier.popular"]) {
    border-color: rgba(122, 92, 68, 0.55);
    box-shadow: 0 8px 26px rgba(44, 26, 14, 0.13);
  }

  /* ── 15.3 Aufgeklappte Detailansicht ───────────────────────────────────
     Die Seite blendet beim Antippen die übrigen Karten aus und hängt zwei
     Panels unter die gewählte Karte. Hier bekommen sie Kartenbreite,
     ruhige Abstände und lesbare Größen.

     Wichtig: In diesem Zustand ist die Reihe KEIN Karussell mehr, sondern
     eine Spalte aus Karte und Detailtafeln. Diese Regeln stehen deshalb
     mit zwei Klassen und schlagen damit .m-carousel. */
  .pakete-cards.mobile-expand {
    max-width: 100% !important;
    flex-direction: column !important;
    gap: 0;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    padding: 0 var(--m-pad) !important;
  }
  .pakete-cards.mobile-expand > * {
    flex: none !important;
    width: 100% !important;
    scroll-snap-align: none !important;
  }
  /* Punkte und Wisch-Hinweis gehören zur Reihe — ohne Reihe kein Hinweis.
     Beide stehen als Geschwister hinter der Bahn (siehe mobile.js). */
  .pakete-cards.mobile-expand ~ .m-dots,
  .pakete-cards.mobile-expand ~ .m-swipe-hint { display: none !important; }

  .pakete-cards.mobile-expand .paket-info-panel {
    position: static !important;
    width: 100% !important;
    max-width: 100%;
    top: auto; bottom: auto; left: auto; right: auto;
    max-height: none;
    overflow: visible;
    margin-top: 14px;
    padding: 18px 16px !important;
    border: 1px solid rgba(122, 92, 68, 0.16);
    flex: none !important;
  }
  .pakete-cards.mobile-expand .info-panel-title { font-size: 20px; }
  .pakete-cards.mobile-expand .info-panel-label {
    font-size: 10px;
    letter-spacing: 0.2em;
  }
  .pakete-cards.mobile-expand .ipf-title,
  .pakete-cards.mobile-expand .info-panel-list li { font-size: 13.5px; }
  .pakete-cards.mobile-expand .ipf-desc { font-size: 12.5px; line-height: 1.5; }

  /* ── 15.35 Zeitleiste im Detail ────────────────────────────────────────
     Der Punkt sitzt auf der Höhe SEINER Uhrzeit, nicht darüber. Die Seite
     setzt `top: 4px` — das passt zur Desktop-Zeilenhöhe. Mobil ist die
     Zeile höher (23px bei 14px Schrift), der Punkt hing dadurch oben.
     Gerechnet: (Zeilenhöhe − Punktgröße) / 2.

     Die Verbindungslinie beginnt am unteren Rand des Punktes und läuft bis
     zum nächsten — beide Werte hängen deshalb an derselben Rechnung. */
  .day-timeline { --tl-punkt: 11px; --tl-zeile: 23px; }
  .tl-dot {
    top: calc((var(--tl-zeile) - var(--tl-punkt)) / 2) !important;
    width: var(--tl-punkt) !important;
    height: var(--tl-punkt) !important;
  }
  .tl-step:not(:last-child)::after {
    top: calc((var(--tl-zeile) + var(--tl-punkt)) / 2) !important;
    bottom: calc(0px - (var(--tl-zeile) - var(--tl-punkt)) / 2) !important;
  }
  /* Die Beschreibung war mit 16px größer als Uhrzeit und Titel darüber —
     die Nebensache stach damit hervor. */
  .tl-desc { font-size: 13.5px; line-height: 1.5; }
  .tl-time, .tl-title { font-size: 13.5px; }
  .tl-step { padding-bottom: 14px; }

  /* Zurück-Knopf: volle Breite, damit er als Ausweg erkennbar ist und
     nicht als schmaler Zusatz irgendwo unter dem Text steht. */
  .pakete-cards.mobile-expand .expand-back-btn {
    position: static !important;
    transform: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--m-tap);
    margin: 16px 0 0 !important;
  }

  /* ── 15.4 Zusatzleistungen: Preisliste statt drei Schaukästen ──────────
     Was hier vorher nicht funktionierte, kam fast alles vom Desktop:

     · `.addon-panel` steht auf `text-align: center`. Auf dem breiten Schirm
       trägt das; auf dem Handy standen Name, Zusatz und Preis mittig
       untereinander — drei verschiedene Startkanten pro Eintrag. Preise
       überfliegt man aber an EINER Kante, sonst vergleicht man nicht.
     · Der Kopf war dreistöckig: Zeichen, darunter Titel, darunter ein
       34px-Strich. Drei Zeilen Vorspann für ein Wort („Foto"), und das
       dreimal — dadurch stand mehr Rahmen als Inhalt auf dem Schirm.
     · `.addon-items3` („Für beide") trennt seine Einträge auf dem Desktop
       mit senkrechten Linien (`border-left`) und schaltet `border-top`
       ab. Untereinander gestapelt blieb davon ein sinnloser Strich links
       und gar keine Trennung zwischen den Zeilen.

     Jetzt: linksbündig, Zeichen und Titel in EINER Kopfzeile, darunter
     die Einträge als Zeilen — Name links, Preis rechts an einer Kante,
     Zusatz klein darunter. Zum Überfliegen gedacht, nicht zum Lesen. */
  .addon-panel {
    text-align: left !important;
    padding: 16px 16px 6px !important;
  }

  /* Kopfzeile: beide Teile inline, damit sie nebeneinander stehen */
  .addon-panel-icon {
    display: inline-block !important;
    vertical-align: middle;
    margin: 0 9px 0 0 !important;
    line-height: 0;
  }
  .addon-panel-icon svg { width: 21px; height: 21px; }
  .addon-panel-title {
    display: inline !important;
    font-size: 20px !important;
    vertical-align: middle;
  }
  /* Aus dem kurzen Zierstrich wird die Trennlinie unter der Kopfzeile */
  .addon-panel-title-line {
    width: 100% !important;
    margin: 11px 0 0 !important;
    opacity: 0.5;
  }

  .addon-item {
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 2px 14px;
    padding: 12px 0 !important;
    text-align: left !important;
  }
  .addon-item-name {
    grid-column: 1;
    font-size: 15px;
    line-height: 1.3;
  }
  .addon-item-price {
    grid-column: 2;
    grid-row: 1;
    font-size: 15px;
    white-space: nowrap;
    text-align: right;
    margin-top: 0 !important;
    /* Der Preis ist die Information, wegen der man hier ist — er darf
       nicht blasser sein als der Name daneben. */
    color: var(--brown-dark);
  }
  .addon-item-meta {
    grid-column: 1 / -1;
    font-size: 11.5px;
    line-height: 1.35;
    letter-spacing: 0.02em;
    margin-top: 0 !important;
    opacity: 0.72;
  }

  /* „Für beide": aus drei Spalten wird ein Stapel wie bei den anderen —
     senkrechte Trenner raus, waagerechte rein. */
  .addon-items3 { display: block !important; }
  .addon-items3 .addon-item { padding: 12px 0 !important; }
  .addon-items3 .addon-item + .addon-item {
    border-left: none !important;
    border-top: 1px solid rgba(122, 92, 68, 0.12) !important;
  }

  /* ── 15.5 Zahlungsablauf: zwei Schritte untereinander ─────────────────── */
  .payflow-track {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    grid-template-columns: none !important;
  }
  .payflow-step {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 4px 14px;
    text-align: left;
  }
  .payflow-badge {
    grid-row: 1 / span 2;
    align-self: start;
    margin: 0 !important;
  }
  .payflow-step-label { margin: 0; }
  .payflow-step-desc { grid-column: 2; margin: 0; font-size: 13.5px; line-height: 1.55; }

  /* ═════════════════════════════════════════════════════════════════════════
     16 · PORTFOLIO-SEITE (portfolio.html)

     Ausgangslage auf dem Handy — gemessen bei 390px:

     1. Die Umschalter „Foto" und „Video" lagen BEIDE außerhalb des Bildes
        (x = −109 und x = 428). Die Kopfleiste ist auf Mobile eine Flex-Reihe
        mit `justify-content: center`, und in dieser Reihe stehen fünf
        Kinder: Knopf, Kennzeichnung, Überschrift, Unterzeile, Knopf. Der
        Text in der Mitte machte die Reihe 609px breit — bei 390px Fenster
        schob das die beiden Knöpfe symmetrisch nach draußen.
        Folge: Auf dem Handy war die Video-Ansicht überhaupt nicht
        erreichbar. Das ist der eigentliche Bedienfehler dieser Seite.
     2. Die Titelbilder sind Querformat (1500×844 bzw. 1200×675 = 16:9),
        die Kacheln aber Hochformat `aspect-ratio: 3/4`. Mit `object-fit:
        cover` blieben davon 41% der Bildbreite übrig — **59% abgeschnitten**.
        Bei Paarbildern heißt das: Der halbe Bildinhalt fehlt.
     3. Die Seite selbst stellt ab 640px auf eine Spalte um. Das kam nie an,
        weil `.m-grid-2` (aus der GRID2-Liste in mobile.js) mit `!important`
        zwei Spalten erzwingt. Übrig blieben 177px breite Bilder — für eine
        Fotoseite die falsche Größe.

     Leitgedanke: Auf einer Portfolioseite ist das Bild der Inhalt. Es
     bekommt die volle Breite und sein eigenes Format; alles andere ordnet
     sich unter.
     ═════════════════════════════════════════════════════════════════════════ */

  /* ── 16.1 Kopfleiste: Text zuerst, Umschalter direkt über den Bildern ──
     Aus der Reihe wird ein Raster: Die beiden Knöpfe teilen sich eine
     eigene Zeile, Text steht darüber über die volle Breite. `order` regelt
     das, ohne die Reihenfolge im Quelltext anzufassen (die Seite braucht
     sie auf dem Desktop links und rechts vom Titel).

     War früher andersherum (Knöpfe zuerst) — auf Wunsch getauscht: Text
     rückt so dicht unter die Kopfzeile, die Knöpfe sitzen direkt vor dem
     ersten Bild, das sie steuern, mit spürbarem Abstand zum Text darüber.
     Das frühere „Knöpfe zuerst"-Argument (Kopfzeile schneidet beim
     Scrollen auf 50px zu) betrifft nur den Desktop-Entwurf — auf Mobile
     steht die Kopfzeile ohnehin auf `height: auto !important` (weiter
     unten in diesem Block), schneidet also gar nicht mehr zu.

     ACHTUNG — Seitenkennung ist Pflicht: `.portfolio-header` heißt auf
     fotografie.html der ganz normale Sektionskopf (Augenbraue, Titel,
     Fließtext). Ohne `.m-page-portfolio` davor traf diese Regel ihn mit
     und riss ihn in zwei Spalten: „Arbeiten" links, „Einblicke in unsere
     Bildsprache" rechts, der Fließtext wieder links. Der Klassenname ist
     auf beiden Seiten gleich, gemeint ist er nur hier. */
  .m-page-portfolio .portfolio-header {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0 10px;
    align-items: start;
    justify-content: stretch !important;
    padding: 0 var(--m-pad) 20px !important;
    text-align: center;
  }
  /* `position: relative` statt `static`: Der Button bleibt so im
     normalen Textfluss (kein Offset, layouttechnisch identisch zu
     static), dient aber weiterhin als Bezugsrahmen für seine eigenen
     ::before/::after-Unterstreichungslinien (position:absolute, siehe
     Desktop-Regel weiter oben). Mit `static` hatten diese Linien gar
     keinen positionierten Vorfahren mehr — ihr Bezugsrahmen sprang zum
     gesamten Dokument, die volle Breite lange Linie des aktiven Buttons
     landete dadurch ca. eine Bildschirmhöhe weiter unten auf der Seite
     (mitten im zweiten Video), unsichtbar verantwortlich für Klicks, die
     dort `switchMedia()` auslösten und zurück nach oben sprangen. */
  .media-btn {
    order: 2;
    margin-top: 22px;
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: var(--m-tap);
    padding: 10px 6px !important;
    border: 1px solid rgba(122, 92, 68, 0.22) !important;
    border-radius: 2px;
    font-size: 12px !important;
    letter-spacing: 0.14em !important;
    white-space: nowrap;
  }
  /* Aktiver Zustand gefüllt — auf dem Handy gibt es keinen Hover-Vergleich.
     Gleiche Sprache wie die Reiter auf der Investment-Seite. */
  .media-btn.active {
    background: var(--brown-dark) !important;
    border-color: var(--brown-dark) !important;
    color: var(--cream-light) !important;
  }
  .portfolio-label,
  .portfolio-title,
  .portfolio-sub { grid-column: 1 / -1; }
  .portfolio-label { margin-top: 0; }
  .portfolio-title { font-size: clamp(1.5rem, 6vw, 2rem) !important; line-height: 1.15; }
  .portfolio-sub { font-size: 12px; line-height: 1.5; }

  /* ── 16.2 Foto-Raster: eine Spalte, Bilder im Querformat ───────────────
     Die ID schlägt das `!important` aus `.m-grid-2` — hier ist die
     Ein-Spalten-Ansicht richtig, weil jedes Bild für eine ganze Hochzeit
     steht und nicht für eine Kachel in einer Galerie.

     3:2 statt 3:4: Aus 16:9 werden damit rund 16% seitlich beschnitten
     statt 59%. Das Format bleibt Querformat wie die Vorlage, und das Bild
     wird bei voller Breite etwa viermal so groß wie vorher. */
  #grid-section .portfolio-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 var(--m-pad) !important;
    justify-content: stretch !important;
  }
  #grid-section .grid-item {
    aspect-ratio: 3 / 2 !important;
    height: auto !important;
    width: 100% !important;
    border: none !important;
  }
  /* Beschriftung: größer, weil die Karte jetzt die volle Breite hat */
  #grid-section .grid-item-name {
    left: 18px; bottom: 18px;
    font-size: 22px !important;
  }
  #grid-section .grid-item-date {
    right: 18px; bottom: 23px;
    font-size: 12.5px !important;
  }

  /* ── 16.3 Video-Einträge ───────────────────────────────────────────────
     Die Seite stapelt sie auf Mobile bereits richtig (Video über Text).

     Das Zierbild muss weg. Auf dem Desktop steht es seitlich neben dem
     Eintrag und füllt dort freien Raum; gestapelt wird daraus eine eigene
     Zeile von 200px Höhe — pro Eintrag, viermal also 800px Scrollstrecke
     für ein Bild ohne Aussage (`alt=""`, eine Blume aus hintergrund/).
     Dazu vier PNGs à 1200×967, die über Mobilfunk mitgeladen werden.
     `.bot-deco` blendet die Seite aus demselben Grund schon aus — diese
     Klasse hatte sie nur übersehen. */
  .video-deco { display: none !important; }

  .video-entry { padding: 24px var(--m-pad) !important; gap: 16px !important; }
  .video-text-title { font-size: clamp(1.3rem, 5.4vw, 1.7rem); line-height: 1.2; }
  .video-text-desc { font-size: 14px; line-height: 1.6; }

  /* Der vermeintliche „Strich hinter dem Video" war in Wahrheit die
     Unterstreichung des aktiven Foto/Video-Knopfs, die durch fehlenden
     Bezugsrahmen an einer falschen Stelle landete — behoben oben bei
     .media-btn (position: relative statt static). Die vorherige
     Direktmaßnahme hier (Video während .vc-paused unsichtbar) traf
     fälschlich auch jede spätere Pause nach dem Abspielen — Poster war
     dann schon dauerhaft ausgeblendet, das Video zusätzlich unsichtbar,
     Ergebnis: weißer Bildschirm beim Pausieren. Deshalb wieder entfernt. */

  /* Jeder Film ein eigenes Feld: Video und zugehöriger Text stehen auf
     derselben Fläche, der nächste Film auf einer anderen. Ohne das lief
     alles als eine weiße Bahn durch und man sah nicht, wo ein Eintrag
     endet und der nächste beginnt. Der Unterschied ist bewusst klein —
     er soll gliedern, nicht streifen. */
  .video-entries > .video-entry:nth-child(odd) { background: #FBF7F2; }
  .video-entries > .video-entry:nth-child(even) { background: #FFFFFF; }

  /* Bedienelemente kleiner — aber nur das Sichtbare. Die Knopffläche
     bleibt bei 44px, sonst trifft man sie nicht mehr. Verkleinert wird
     das Zeichen darin. */
  .video-side .vc-btn svg { width: 17px !important; height: 17px !important; }

  /* ── 16.4 Kopfleiste bleibt oben stehen ────────────────────────────────
     Sie war `position: fixed` und lief unter der Topbar die ganze Seite
     mit — auf 390px sind das 203px, also fast ein Viertel des Schirms,
     dauerhaft belegt von einer Überschrift, die man einmal liest.

     Jetzt läuft sie im normalen Fluss mit und scrollt weg. Damit fällt
     auch der Platzhalter darunter weg: Das Skript setzt den Sektionen per
     Inline-Stil einen `padding-top`, der genau die Höhe der festen Leiste
     ausglich (gemessen 284px). Inline schlägt normale Regeln — deshalb
     hier `!important`. Aus demselben Grund wird die Höhe zurückgeholt:
     Das Skript schreibt beim Scrollen `height: 50px` in die Leiste, was
     im Fluss die ganze Seite ruckeln ließe.

     Seitenkennung wie in 16.1 — der Klassenname existiert auch auf
     fotografie.html, dort ist er ein gewöhnlicher Sektionskopf. */
  .m-page-portfolio .portfolio-header {
    position: static !important;
    top: auto !important;
    height: auto !important;
    overflow: visible !important;
    /* Die Leiste blendet sich per Skript ein. Springt das nicht an,
       bliebe sie unsichtbar — auf Mobile ist der Inhalt sofort da. */
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  #grid-section,
  #video-grid-section { padding-top: 0 !important; }

  /* ── 16.35 Überschrift sitzt jetzt oben, dicht unter der Kopfzeile ─────
     `.portfolio-header` ist das erste Element im Fluss und startet exakt
     an `body`s padding-top (--m-nav-h, 58px — die kleine Kopfzeilenform).
     Ganz oben, ungescrollt, zeigt die Kopfzeile kurz noch ihre GROSSE Form
     mit Schriftzug (--m-nav-h-big, 88px) und reicht 30px in den Bereich
     hinein, den jetzt die Überschrift „Unsere Arbeit" belegt (vorher die
     Umschalter-Knöpfe — die sitzen jetzt weiter unten vor den Bildern,
     siehe 16.1). Auf Wunsch bewusst kein Ausgleich mehr dafür: Die
     Überschrift ist reiner Text ohne Bedienfunktion, ein kurzes Antippen
     blockiert nichts — anders als bei den Knöpfen vorher. */

  /* ── 16.5 Luft vor der Instagram-Sektion ───────────────────────────────
     Die letzte Kachel stieß direkt an die dunkle Instagram-Fläche — ohne
     Abstand liest sich das als ein Block statt als zwei Abschnitte. */
  #grid-section,
  #video-grid-section { padding-bottom: 44px !important; }

  /* ── 16.6 Footer wieder auffindbar ─────────────────────────────────────
     Er war nicht kaputt, nur nicht zu erkennen: Instagram-Sektion und
     Footer sind beide dunkelbraun und stießen ohne Kante aneinander.
     Trennlinie und Abstand stehen in Block 9 bei den übrigen
     Footer-Regeln — das Problem hängt an den zwei Farben, nicht an
     dieser Seite, und gilt deshalb überall. */

  /* ═════════════════════════════════════════════════════════════════════════
     17 · VIDEOGRAFIE-SEITE (videografie.html)

     Ausgangslage auf dem Handy — gemessen bei 390px:

     1. „Was wir anbieten" war 2.545px hoch, ein Viertel der ganzen Seite.
        Davon entfielen 1.334px auf die drei Add-ons: sie lagen als volle
        Karten untereinander, während die drei Filme direkt darüber eine
        Wisch-Reihe waren. Zwei Gruppen derselben Sektion, zwei völlig
        verschiedene Bauformen — man musste erst begreifen, dass unten
        dieselbe Art Angebot steht wie oben.
     2. Die Trennzeilen „Die Filme" und „Add-ons" sind auf dem Desktop eine
        Zeile aus Titel, Unterzeile und einer Linie, die den Rest der
        Breite füllt. Auf 390px stand der Titel linksbündig und die Linie
        lief ins Leere aus dem Bild — mitten in einer sonst durchgehend
        zentrierten Seite.
     3. Die Filmkarte war 610px hoch bei 832px Sichtfläche. Der 12px starke
        dunkle Videorahmen, 26px Schriftgrößen aus dem Desktop-Entwurf und
        eine Faktenliste mit 11px Zeilenpolster ergaben zusammen eine Karte,
        von der man nie Anfang und Ende gleichzeitig sah.
     4. In „Film und Foto — ein gemeinsamer Blick" war das Video
        ausgeblendet. Übrig blieb eine Fotocollage, die zusätzlich auf
        240px Höhe abgeschnitten war und linksbündig klebte, weil das
        Seitenverhältnis 1/1 aus dem Desktop stehen geblieben ist.

     Leitgedanke: Alles, was zur Auswahl steht, wird gewischt und sieht
     dabei gleich aus. Alles, was erklärt, steht ruhig untereinander.
     Die Sektionsreihenfolge bleibt unangetastet.
     ═════════════════════════════════════════════════════════════════════════ */

  /* ── 17.1 Trennzeilen „Die Filme" / „Add-ons" ──────────────────────────
     Aus der Desktop-Zeile (Titel · Unterzeile · Linie nach rechts) wird
     ein zentrierter Dreiklang: Titel, Unterzeile, kurze Linie darunter.
     Das ist auf einen Blick als Gruppenanfang lesbar und passt zu den
     übrigen Sektionsköpfen der Seite. */
  .offer-group {
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 0 var(--m-pad) !important;
    margin: 0 auto 16px !important;
    text-align: center;
  }
  .offer-group.addons-label { margin-top: 26px !important; }
  .offer-group-title {
    font-size: 12px;
    letter-spacing: 0.3em;
  }
  .offer-group-sub {
    font-size: 14.5px;
    white-space: normal !important;   /* „zu jedem Film-Investment dazu buchbar" */
    line-height: 1.35;
  }
  /* Die Linie füllte auf dem Desktop den Rest der Zeile (`flex: 1`).
     Als kurzer Strich unter der Unterzeile schließt sie die Gruppe ab. */
  .offer-group::after {
    flex: none !important;
    width: 44px;
    margin-top: 9px;
  }

  /* ── 17.2 Filmkarten: dieselbe Bauform, kleinere Maße ──────────────────
     Ziel ist eine Karte, die als Ganzes ins Bild passt. Erreicht über
     schmaleren Videorahmen, mobile Schriftgrade und ein enger gesetztes
     Faktenblatt — nicht über weggelassenen Inhalt. */
  /* Die Seite gibt der Filmzeile links und rechts 24px Polster (eigene
     Media-Query ab 768px). In einer Karte des Karussells zog das Video
     dadurch auf 272px zusammen, während die Add-on-Karte darunter mit
     320px lief — zwei verschieden große Videos in derselben Sektion.
     Den Seitenrand setzt hier das Karussell selbst. */
  .m-group > .offer-row {
    gap: 12px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .offer-media {
    aspect-ratio: 16 / 9;
    max-height: none;
    overflow: hidden;
    /* 12px Rahmen sind auf 320px Kartenbreite ein Balken, kein Rahmen */
    border-width: 5px !important;
    box-shadow: 0 6px 20px rgba(44, 26, 14, 0.14) !important;
  }
  /* „No. 01" fehlte in der Zentrierungs-Liste aus Block 13.1 und stand als
     einziges Element der Karte linksbündig. */
  .offer-num {
    font-size: 13px;
    margin-bottom: 5px !important;
    text-align: center !important;
  }
  .offer-name {
    font-size: 1.55rem !important;
    line-height: 1.15;
    margin-bottom: 4px !important;
  }
  .offer-meta {
    font-size: 11px;
    letter-spacing: 0.2em;
    margin-bottom: 12px !important;
    text-align: center !important;
  }
  .offer-desc {
    font-size: 14px !important;
    line-height: 1.65;
    margin-bottom: 16px !important;
  }
  /* Faktenblatt: Bezeichnung links, Wert rechts — die Ausnahme von der
     Zentrierung (Block 13.1) gilt hier genauso wie bei den Paket-Specs,
     sonst verliert man die Zuordnung. */
  .offer-facts li {
    padding: 8px 0 !important;
    gap: 14px !important;
    font-size: 13px;
    line-height: 1.45;
  }
  .offer-facts .of-label {
    font-size: 10.5px;
    letter-spacing: 0.13em;
    padding-top: 1px !important;
  }
  .offer-facts .of-value { font-size: 13px; }
  .offer-facts li,
  .offer-facts li * { text-align: initial !important; }
  .offer-facts .of-value { text-align: right !important; }

  /* ── 17.3 Add-ons: dieselbe Wisch-Reihe wie die Filme ──────────────────
     Registriert in mobile.js (CAROUSSELS, `.offer-addons`). Hier fällt nur
     noch weg, was das Desktop-Raster mitbringt, und die Karteninhalte
     bekommen dieselben Maße wie oben — gleiche Bühne, gleiche Schriftgrade,
     gleicher Rahmen. Wer die Sektion herunterwischt, sieht sechsmal
     dieselbe Karte mit sechs verschiedenen Angeboten darin. */
  .offer-addons {
    max-width: 100vw !important;
    align-items: stretch !important;
  }
  .addon-card {
    background: transparent;      /* die Sektion trägt die Fläche */
    padding: 0 !important;
  }
  .addon-media {
    aspect-ratio: 16 / 9;
    margin-bottom: 12px !important;
    border-width: 5px !important;
  }
  /* Der Handyrahmen des Reels sitzt in derselben 16:9-Bühne wie die
     anderen beiden Videos — dadurch beginnt der Text auf allen drei
     Karten auf derselben Linie. Das Innenpolster wird kleiner, damit
     vom Gerät auf dieser Bühnengröße noch etwas zu erkennen ist. */
  .addon-media.phone { padding: 6px 0 !important; }
  .phone-frame {
    border-radius: 16px !important;
    padding: 5px !important;
    box-shadow: 0 8px 22px rgba(44, 26, 14, 0.3),
                inset 0 0 0 1px rgba(201, 166, 107, 0.55) !important;
  }
  .phone-frame::after { top: 7px; width: 18px; height: 2px; }
  .phone-frame video { border-radius: 12px !important; }
  /* Titel und Kennzeichnung fehlten in der Zentrierungs-Liste aus Block
     13.1: Auf der Karte stand die Beschreibung mittig, Name und Länge
     darüber linksbündig. */
  .addon-title {
    font-size: 1.55rem !important;
    line-height: 1.15;
    margin: 0 0 4px !important;
    text-align: center !important;
  }
  .addon-meta {
    font-size: 11px;
    letter-spacing: 0.2em;
    margin: 0 0 10px !important;
    text-align: center !important;
  }
  /* Der 64px-Abspielknopf ist breiter als der 86px schmale Handyrahmen und
     verdeckte darin fast das ganze Bild. */
  .phone-frame .vc-bigplay {
    width: 42px !important;
    height: 42px !important;
  }
  .phone-frame .vc-bigplay svg { width: 16px; height: 19px; }
  .addon-desc {
    font-size: 14px !important;
    line-height: 1.65;
    margin: 0 !important;
    padding-bottom: 0 !important;
  }

  /* ── 17.4 „Film und Foto" — das Video kommt zurück ─────────────────────
     Untereinander statt nebeneinander: erst der Film in voller
     Inhaltsbreite, darunter die Fotocollage. Beide sind damit groß genug,
     um etwas zu erkennen — nebeneinander wären es je 165px gewesen.

     Das Video startet erst auf einen Tipper (mobile.js, 7c). Damit bleibt
     die Regel „kein Video ohne Zutun laden" erhalten, die auf Mobile
     überhaupt erst zum Ausblenden geführt hatte. */
  .bridge-video-wrap {
    display: block !important;
    position: relative;
    max-width: none !important;
    width: 100%;
    aspect-ratio: 16 / 9 !important;
    margin: 0 0 8px !important;
    transform: none !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  }
  .bridge-collage {
    max-height: none !important;
    overflow: visible !important;
    aspect-ratio: 4 / 3 !important;
    gap: 6px !important;
    transform: none !important;
  }

  /* Abspiel-Knopf des Schleifen-Videos (mobile.js legt ihn an).
     Bewusst kleiner und heller als der Knopf der Beispielvideos: Dieses
     Video ist Beiwerk, kein Angebot zum Ansehen. */
  .m-tapvideo-btn {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: var(--m-tap);
    height: var(--m-tap);
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(244, 237, 228, 0.5);
    border-radius: 50%;
    background: rgba(44, 26, 14, 0.42);
    color: rgba(244, 237, 228, 0.92);
    cursor: pointer;
    transition: opacity 0.3s ease;
    z-index: 2;
  }
  .m-tapvideo-btn svg { margin-left: 3px; }   /* optische Mitte des Dreiecks */
  /* Läuft das Video, verschwindet der Knopf — antippen pausiert wieder. */
  .m-tapvideo:not(.is-paused) .m-tapvideo-btn { opacity: 0; }
  .m-tapvideo:not(.is-paused):active .m-tapvideo-btn { opacity: 1; }

  /* ── 17.45 Showreel: Kennzeichnung und Überschrift mittig ──────────────
     Auf dem Desktop steht der Textteil rechts neben dem Player und ist
     linksbündig gesetzt. Untereinander blieb davon ein halber Bruch übrig:
     „Unser Ansatz" und „Ein Film der sich anfühlt wie euer Tag." klebten
     links, die vier Absätze darunter standen mittig (Block 13.1). */
  .showreel-text {
    text-align: center !important;
  }
  .showreel-text .sec-eyebrow {
    justify-content: center;
    margin-bottom: 12px !important;
  }
  /* Die Grundform der Kennzeichnung hat nur links einen Strich; die
     Sektionsköpfe der Seite ergänzen den rechten selbst. Zentriert
     gesetzt fehlte er hier und die Zeile hing schief. */
  .showreel-text .sec-eyebrow::after {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background: var(--brown-light);
    flex-shrink: 0;
  }
  /* Die Beschriftung liegt auf dem Standbild — über hellen Bildstellen
     war sie nicht mehr zu lesen. */
  .showreel-label {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
  }

  /* ── 17.5 „Was ihr von uns bekommt" — Karte mit Kopfziffer ─────────────
     Die Karte ist zentriert wie alles andere; die Ziffer steht als
     eigener Kopf darüber statt als Krümel am linken Rand. */
  .includes-list.m-carousel > .inc-row {
    align-items: center;
    text-align: center;
    gap: 2px;
  }
  .inc-num {
    order: -1;
    opacity: 0.75;
    margin-bottom: 2px;
  }

  /* ── 17.6 Ablauf — die Kugel neben der Mitte des Textes ────────────────
     Block 13.3 stellt Kugel und Text nebeneinander und setzt dafür
     `text-align: left`. Diese Zeile greift seit Block 13.1 nicht mehr
     („der ganze Text mittig"), und damit hing die Kugel oben links an
     einem mittig gesetzten Textblock — nichts fluchtete miteinander.

     Statt die Zentrierung zurückzudrehen, sitzt die Kugel jetzt mittig
     zur Textspalte. Und der Text bricht nicht mehr nach drei Zeilen ab:
     die Schritte sind kurz genug, dass sie vollständig hineinpassen. */
  .orb-step {
    align-items: center !important;
    /* Die Spalte aus Block 13.3 ist 82px breit. Steht darin eine 92px
       große Kugel, schiebt sie sich über den linken Seitenrand hinaus. */
    grid-template-columns: 92px 1fr !important;
    column-gap: 14px !important;
  }
  #process .orb-scene,
  .process-section .orb-scene,
  .orb-scene {
    --orb: 92px !important;
    width: 92px;
    height: 92px;
    align-self: center;
  }
  .orb-text {
    -webkit-line-clamp: none !important;
    display: block !important;
    overflow: visible !important;
  }

  /* ── 17.7 Luft zwischen Karussell und nächstem Block ───────────────────
     Punkte-Anzeige (44px Tastfläche) und Wisch-Hinweis (16px) stehen
     zusammen mit den Sektionsabständen darüber und darunter. Zwischen der
     Filmreihe und der Add-on-Trennzeile ergab das 96px Leerfläche. */
  .m-swipe-hint + .offer-group { margin-top: 14px !important; }
  .formats-section .m-dots { margin-top: 10px; }

  /* ── 17.8 Titelbild: Punkte mittig, Scroll-Hinweis raus ────────────────
     Die Punktreihe hing unten rechts in der Ecke und war mit 8px Punkt plus
     6px Innenabstand eher ein Knopf als eine Positionsanzeige. Unten mittig
     und klein gesetzt sagt sie dasselbe wie auf der Startseite: Man sieht
     auf einen Blick, das wievielte von fünf Bildern gerade läuft.

     Der Scroll-Hinweis („Entdecken" plus pulsierende Linie) stand genau
     dort, wo die Punkte jetzt sitzen. Auf dem Handy erklärt er ohnehin
     nichts — gescrollt wird von selbst. */
  .video-hero-scroll { display: none !important; }

  .video-hero-dots {
    left: 0 !important;
    right: 0 !important;
    bottom: 22px !important;
    justify-content: center;
    gap: 12px !important;
  }
  .video-hero-dot {
    width: 6px !important;
    height: 6px !important;
    padding: 0 !important;
  }
  /* Die Tastfläche aus Block 13.5 spannt 44×44px. Bei 6px Punkt und 12px
     Abstand überlappen sich fünf solcher Felder fast vollständig — man
     träfe nie den gewünschten Punkt. Waagerecht deshalb auf den Abstand
     der Punkte begrenzt, senkrecht bleibt es großzügig. */
  .video-hero-dot::after {
    width: 18px !important;
    height: var(--m-tap) !important;
  }

  /* ── 17.9 „Unser Ansatz": vier Absätze statt einer Textwand ────────────
     Der Block läuft über vier Absätze und liest sich am Stück als eine
     einzige graue Fläche. Er hat aber eine klare Dramaturgie: These —
     Wendepunkt — Begründung — Fazit. Die beiden kurzen Sätze („Wir machen
     das anders." / „Das ist der Unterschied …") sind die Wendepunkte und
     werden hier auch als solche gesetzt. */
  .showreel-text p { margin-bottom: 16px !important; }

  /* Der Wendepunkt: als eigene Zeile zwischen zwei Haarlinien */
  .showreel-text p:nth-of-type(2) {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px !important;
    font-style: italic;
    line-height: 1.35 !important;
    color: var(--brown-dark);
    padding: 16px 0;
    margin: 6px 0 18px !important;
    border-top: 1px solid rgba(122, 92, 68, 0.16);
    border-bottom: 1px solid rgba(122, 92, 68, 0.16);
  }
  /* Das Fazit trägt den Satz, auf den alles zuläuft */
  .showreel-text p:nth-of-type(4) {
    font-size: 16px !important;
    color: var(--brown-dark);
    margin-top: 18px !important;
    margin-bottom: 0 !important;
  }
  .showreel-text p:nth-of-type(4) strong { font-weight: 500; }

  /* ── 17.10 Trennzeilen kräftiger ───────────────────────────────────────
     „Die Filme" und „Add-ons" waren so leise gesetzt wie eine Bildunterschrift
     und gingen zwischen zwei Karussells unter. Sie sind aber die einzige
     Stelle, an der steht, was der Unterschied zwischen den beiden Reihen
     ist: enthalten oder dazu buchbar. */
  .offer-group-title {
    font-size: 15px !important;
    letter-spacing: 0.26em !important;
    color: var(--brown-dark) !important;
    font-weight: 400;
  }
  .offer-group-sub {
    font-size: 15px !important;
    color: var(--brown-mid) !important;
  }
  .offer-group::after { width: 54px; }

  /* ── 17.11 „Was ihr von uns bekommt": das Bild kommt zurück ────────────
     Es war das einzige Bild der Sektion und lag auf `display: none`.
     Auf dem Handy steht es über der Liste, nicht daneben. */
  .includes-aside {
    display: block !important;
    padding: 0 var(--m-pad);
    margin-bottom: 22px;
  }
  .includes-figure {
    max-width: none !important;
    aspect-ratio: 4 / 3 !important;
  }
  /* Der Zierrahmen sitzt auf dem Desktop 20px außerhalb des Bildes. In der
     randlosen Sektion (`m-flush`) reichte er über den Bildschirmrand. */
  .includes-figure-accent {
    right: -10px !important;
    bottom: -10px !important;
    width: 42% !important;
  }

  /* ── 17.12 Investment: Preis über die Merkmalsliste ────────────────────
     Die Karte war 579px hoch. Sichtbar waren davon Bild, Stufe, Name und
     Anreißer — der Preis stand rund 500px tief in der Karte, also nie im
     selben Blick wie der Paketname. Genau dafür wischt man aber durch drei
     Pakete.

     Der Preis rückt deshalb direkt unter den Anreißer (wie auf
     investment.html, Block 15.2), und alle Abstände kommen von den
     Desktop-Werten auf mobile Maße herunter.

     ACHTUNG — alles hier hängt an `.packages-section`. Die Klassen
     `.package-price`, `.package-specs` usw. stehen auch auf der
     Startseite; ohne diese Eingrenzung würde die Umsortierung die
     Paketkarten dort mitverändern. `.packages-section` gibt es nur auf
     den beiden Leistungsseiten (Foto und Video), die einander ohnehin
     spiegeln. */
  .packages-section .package-body {
    padding: 20px 18px 22px !important;
  }
  .packages-section .package-tier {
    font-size: 11px !important;
    letter-spacing: 0.24em !important;
    margin-bottom: 8px !important;
  }
  .packages-section .package-name {
    font-size: 26px !important;
    margin-bottom: 7px !important;
  }
  .packages-section .package-tagline {
    font-size: 14.5px !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
    flex: none !important;      /* schob den Rest sonst ans Kartenende */
  }
  .packages-section .package-price {
    order: 1;                   /* vor die Merkmalsliste */
    font-size: 27px !important;
    margin: 0 0 14px !important;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(122, 92, 68, 0.14);
  }
  .packages-section .package-specs {
    order: 2;
    margin-bottom: 14px !important;
  }
  .packages-section .package-specs li { padding: 7px 0 !important; }
  .packages-section .package-specs .spec-label { font-size: 10.5px !important; }
  .packages-section .package-specs .spec-value { font-size: 13.5px !important; }
  .packages-section .package-btn {
    order: 3;
    min-height: var(--m-tap);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  /* Das Titelbild war auf 160px gedeckelt (Block 4.8). Die 28px, die es
     hier abgibt, entscheiden darüber, ob der Knopf „Details ansehen" noch
     zusammen mit dem Sektionskopf ins Bild passt. */
  .packages-section .package-img-wrap,
  .packages-section .package-img-wrap img {
    max-height: 132px !important;
  }

  /* Die 3px-Oberkante (frühere Lösung, um das empfohlene Paket auf hellem
     Grund erkennbar zu machen) wirkte wie ein brauner Streifen oben auf
     dem Bild — auf Wunsch wieder entfernt. Die Randfarbe und die
     goldene Einordnungs-Bezeichnung („Meistgewählt") bleiben als
     dezentere Unterscheidung. */
  .packages-section .package-tile.featured {
    border-color: rgba(168, 131, 78, 0.55) !important;
  }
  .packages-section .package-tile.featured .package-tier { color: #A8834E !important; }

  /* ── 17.13 Kombi-Banner entfällt auf dem Handy ─────────────────────────
     Auf Wunsch von Lukas (2026-08-06). Der Banner „Foto & Film — das
     vollständige Erlebnis" stand mit 305px zwischen den Paketkarten und
     dem Absatz „Individuell für euch" und wiederholte ein Angebot, das
     weiter unten in „Film und Foto — ein gemeinsamer Blick" ohnehin
     ausführlich kommt.

     Nur auf videografie.html — genau dort war der Wunsch. Auf
     fotografie.html steht derselbe Banner; soll er dort auch weg, kommt
     `.m-page-fotografie` in dieselbe Zeile.
     Auf dem Desktop bleibt er überall unverändert stehen. */
  .m-page-videografie .combo-banner { display: none !important; }

  /* ═════════════════════════════════════════════════════════════════════════
     18 · ÜBER-UNS-SEITE (ueber-uns.html)
     ═════════════════════════════════════════════════════════════════════════

     Durchgang am 2026-08-06 auf 390px. Die Sektionsreihenfolge bleibt
     unangetastet; geändert wird nur, was auf dem Handy falsch saß.

     Nicht angefasst, weil ausdrücklich so gewünscht:
     · Instagram bleibt bei zwei Spalten und drei Reihen (Block 14.1).
       Die Sektion ist damit 892px hoch — der teuerste Posten der Seite.
     · Das Instagram-Symbol bleibt im Menü statt im Footer (Block 9). */

  /* ── 18.0 Kopfvideo läuft von selbst, ohne Bedienknopf ─────────────────
     Wunsch vom 2026-08-06: Das Video startet allein und läuft in
     Endlosschleife, der Play/Pause-Kreis unten rechts entfällt.
     Der Start liegt in assets/video-autoplay.js (data-autoplay="always"),
     die Schleife am `loop`-Attribut. Der Klick auf die Heldenfläche ist
     im Seitenskript auf ab 1024px begrenzt. */
  .au-hero-play { display: none !important; }

  /* Der schwarze Streifen unten im Kopfbild steckte nicht im Layout, sondern
     im Video: 1280×720 mit je 65px eingebackenem Balken oben und unten
     (Cinemascope 2,17:1 in einem 16:9-Rahmen). Weggezoomt hätte man dafür
     ein Drittel des Bildes verloren, deshalb sind die Balken jetzt aus der
     Datei geschnitten — sie ist seitdem 1280×590.

     Damit wird der bisherige `scale(1.18)` schädlich: Das Bild ist ohne
     Balken schon knapp, und auf 390px zeigt das Heldenfeld ohnehin nur den
     mittleren Ausschnitt eines sehr breiten Films — mit Zoom 26% der
     Breite, ohne 30%. Auf dem Desktop bleibt der Zoom, dort ist die Fläche
     breit genug. */
  .au-hero-bg { transform: none !important; }

  /* ── 18.1 Augenbrauen passen wieder in eine Zeile ──────────────────────
     14px mit 0.44em Sperrung ergibt für „Unsere Philosophie" 346px reine
     Textbreite — genau die Breite, die zur Verfügung steht. Die Zeile
     brach also um, und weil die beiden Zierstriche als ::before/::after
     am Anfang und Ende der Flex-Zeile hängen, standen sie danach weit
     links und rechts allein neben zwei Textzeilen.

     11px mit 0.18em ist der Wert aus der Spezifikation (§2) und lässt
     auch auf 320px noch Luft. Die Seite bringt vier eigene Klassen für
     dieselbe Sache mit — .sec-eyebrow aus Block 2 greift hier nicht. */
  .team-eyebrow,
  .philosophy-eyebrow,
  .pp-eyebrow,
  .faq-eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    gap: 12px !important;
  }
  /* Sperrsatz schiebt zentrierten Text nach links: hinter dem letzten
     Zeichen steht noch ein voller Buchstabenabstand. */
  .team-eyebrow, .philosophy-eyebrow, .pp-eyebrow, .faq-eyebrow {
    text-indent: 0.18em;
  }
  /* Die FAQ-Augenbraue war als einzige anders gebaut: Jost statt
     Montserrat, 28px lange Striche statt 22px, `inline-flex` statt `flex`.
     Nebeneinander betrachtet fiel sie damit sichtbar aus der Reihe. */
  .faq-eyebrow {
    display: flex !important;
    justify-content: center;
    font-family: 'Montserrat', 'Jost', sans-serif !important;
    font-weight: 300 !important;
  }
  .faq-eyebrow::before, .faq-eyebrow::after {
    width: 22px !important;
    flex-shrink: 0;
  }

  /* ── 18.1b Gleicher Rhythmus in jedem Blockkopf ────────────────────────
     Nach dem Angleichen der Augenbrauen blieben zwei Ausreißer übrig:
     „LUKAS & MARIA" stand mit 28px als einzige Überschrift größer als die
     übrigen (24px), und die Abstände zwischen Augenbraue und Überschrift
     lagen bei 26px (Über uns), 22px (FAQ) und 20px (Rest).

     Alle sechs Köpfe stehen jetzt auf 24px und 20px. Soll der Name der
     beiden wieder größer sein als die übrigen Überschriften, kommt
     `.team-headline` hier heraus. */
  .m-page-ueber-uns .team-headline {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }
  .m-page-ueber-uns .team-eyebrow,
  .m-page-ueber-uns .faq-eyebrow {
    margin-bottom: 20px !important;
  }

  /* ── 18.2 Galerie-Kopf: 60px Desktop-Polster ───────────────────────────
     .pp-header trug `padding: 0 60px` aus dem Desktop-Entwurf. Von 386px
     blieben so 266px, und „Unsere Geschichte in Bildern" brauchte drei
     Zeilen statt einer. */
  .pp-header {
    padding-left: var(--m-pad) !important;
    padding-right: var(--m-pad) !important;
  }

  /* ── 18.3 Philosophie zurück ins 2×2-Raster ────────────────────────────
     Hebt Block 14.015 für diese vier Kacheln auf. Untereinander brauchten
     sie 799px — fast einen ganzen Bildschirm für vier Sätze, die niemand
     einzeln liest. Nebeneinander sind es 545px, und alle vier sind auf
     einen Blick zu erfassen. So steht es auch in der Spezifikation (§6).

     Der Einwand von damals — 129px Textspalten — galt für das Raster mit
     Innenabständen. Ohne die kommen 166px heraus, bei 14px Schrift rund
     22 Zeichen je Zeile. Das ist eng, aber es sind vier Zeilen kurzer
     Text, kein Fließtext. */
  .philosophy-grid.m-grid-2x2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 14px !important;
  }
  .philosophy-grid .philosophy-item {
    max-width: none !important;
    padding: 0 !important;
    /* Die Haarlinie unter jeder Kachel stammt aus der Seiten-CSS und war
       im Raster unregelmäßig gesetzt (die letzten beiden Kacheln hatten
       je nach Breite eine oder keine). Der 24px-Abstand trennt die beiden
       Reihen deutlich genug. */
    border-bottom: none !important;
  }
  .philosophy-icon { margin-bottom: 10px !important; }
  .philosophy-title {
    font-size: 17px !important;
    line-height: 1.25;
    margin-bottom: 8px !important;
  }
  /* 13.5px lag unter der Untergrenze von 14px (§2) — und war zugleich ein
     krummer Wert. */
  .philosophy-text {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* ── 18.4 Vorstellungstext: Zeilenabstand 2.0 → 1.6 ────────────────────
     .team-lead darüber steht auf 1.6, .team-text erbte 2.0 vom Desktop.
     Zwei verschiedene Zeilenabstände direkt untereinander wirken wie ein
     Satzfehler, und die 2.0 ziehen den Absatz um 38px auseinander. */
  .team-text {
    line-height: 1.6 !important;
    margin-bottom: 28px !important;
  }

  /* ── 18.5 Namen unter den beiden Portraits ─────────────────────────────
     Auf dem Desktop steht der Text zwischen den Bildern, mobil stehen
     beide Portraits nebeneinander unter dem Text. Ohne Beschriftung
     erfährt niemand, wer von beiden Lukas und wer Maria ist — auf einer
     Seite, die genau das erzählen soll.

     Die Spalte trug `aspect-ratio` und `overflow: hidden`; darin wäre die
     Zeile abgeschnitten worden. Das Seitenverhältnis wandert deshalb auf
     das Bild, die Spalte selbst wächst mit. */
  .team-photo-col {
    aspect-ratio: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .team-photo-col img {
    aspect-ratio: 4 / 5;
    height: auto !important;
  }
  .team-photo-name {
    display: block !important;
    margin-top: 10px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-transform: uppercase;
    text-align: center;
    color: var(--brown-mid, #7A5C44);
  }

  /* ── 18.9 Zusammenführung unter den Portraits ──────────────────────────
     Zwei Linien laufen von den Bildmitten nach unten, treffen sich
     geschwungen und tragen dort die drei Angaben (Wunsch vom 2026-08-06).
     Aufbau im HTML, dort steht auch, woher die Zahlen im Pfad kommen. */
  .team-bond {
    display: block !important;
    position: relative;
    margin-top: 6px;
    text-align: center;
  }
  .team-bond-svg {
    display: block;
    width: 100%;
    /* Muss zur Höhe im viewBox passen (74), sonst stimmt die Lage der Raute
       bei `top: 52px` nicht mehr. */
    height: 74px;
    overflow: visible;
  }
  .team-bond-svg path {
    fill: none;
    stroke: rgba(184, 154, 128, 0.6);
    stroke-width: 1;
    /* Ohne das würde die waagrechte Streckung die Linie ungleich dick
       machen — links und rechts dünner als in der Mitte. */
    vector-effect: non-scaling-stroke;
  }
  /* Die Raute sitzt genau auf dem Treffpunkt (173|52 im Raster des SVG).
     Sie heißt bewusst nicht „…-dot": Der Sammelselektor `[class$="-dot"]`
     weiter oben in dieser Datei hätte sie auf `position: relative` gesetzt
     und ihr eine unsichtbare 44px-Tastfläche verpasst. */
  .team-bond-mark {
    position: absolute;
    left: 50%;
    top: 52px;
    width: 7px;
    height: 7px;
    margin: -4px 0 0 -4px;
    transform: rotate(45deg);
    border: 1px solid rgba(184, 154, 128, 0.9);
    /* Deckt den Linienknick darunter ab — muss deshalb die Bandfarbe der
       Vorstellungs-Sektion tragen (Block 18.10: weiß). */
    background: #FFFFFF;
  }
  .team-bond-count {
    margin: 16px 0 0 !important;
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-indent: 0.12em;
    color: var(--brown-dark, #2C1A0E);
    /* Cormorant setzt Ziffern als Mediävalziffern — die alleinstehende „1"
       sieht darin wie ein kleines „ı" aus. Bei den Kennzahlen fällt das
       nicht auf, weil sie dort doppelt so groß steht. */
    font-variant-numeric: lining-nums;
    font-feature-settings: 'lnum' 1;
  }
  .team-bond-note {
    margin: 6px 0 0 !important;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 300;
    line-height: 1.45;
    letter-spacing: 0.18em;
    text-indent: 0.18em;
    text-transform: uppercase;
    color: var(--brown-light, #B89A80);
  }

  /* ── 18.6 FAQ: das Pluszeichen bekommt einen festen Platz ──────────────
     Die Frage ist eine zentrierte Flex-Zeile, das Zeichen lag als letztes
     Element direkt hinter dem Text. Bei einzeiligen Fragen stand es
     mittig-rechts, bei zweizeiligen ganz außen — von Zeile zu Zeile
     sprang es um bis zu 60px. Verankert man es rechts und legt links
     dieselbe Breite als Polster an, bleibt der Text optisch mittig.

     36px ist die knappste Breite, die das 28px-Zeichen noch frei stellt.
     Bei 44px brachen zwei Fragen zusätzlich um, die Liste wuchs um 40px. */
  .faq-question {
    position: relative;
    padding-left: 36px !important;
    padding-right: 36px !important;
  }
  .faq-question .faq-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  /* ── 18.7 Abschluss-Sektion straffen ───────────────────────────────────
     514px für eine Überschrift, zwei Zeilen Text und einen Knopf. Allein
     die beiden senkrechten Zierlinien kosteten mit ihren Außenabständen
     156px.

     Die untere entfällt: Sie stand zwischen dem Satz „Ein kurzes
     Gespräch …" und dem Knopf, der genau diesen Satz beantwortet — eine
     Trennlinie an der einzigen Stelle, an der nichts zu trennen ist.
     Die obere entfällt seit 18.13 ebenfalls; dort steht jetzt die
     Augenbraue des Blockkopfs. */
  .quote-line-top,
  .quote-line-bottom { display: none !important; }
  .quote-sub { margin-bottom: 32px !important; }

  /* ── 18.13 Blockkopf des Abschlusses ───────────────────────────────────
     Letzter Abschnitt ohne Kennzeichnung. Gleicher Aufbau wie bei allen
     anderen: Augenbraue mit den zwei 22px-Strichen, darunter mit 14px
     Abstand die Überschrift — hier das schon vorhandene „Lasst uns
     kennenlernen.". Wortlaut der Augenbraue wie im Schluss-Block von
     Fotografie, Videografie und Investment.

     Die senkrechte Zierlinie darüber ist raus: Sie war der Ersatz,
     solange es hier keinen Kopf gab. */
  .m-page-ueber-uns .quote-eyebrow {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 0 20px;
    font-family: 'Montserrat', 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 0.18em;
    text-indent: 0.18em;
    text-transform: uppercase;
    color: var(--brown-light, #B89A80);
  }
  .m-page-ueber-uns .quote-eyebrow::before,
  .m-page-ueber-uns .quote-eyebrow::after {
    content: '';
    display: block;
    width: 22px;
    height: 1px;
    flex-shrink: 0;
    background: var(--brown-light, #B89A80);
  }
  /* Die Überschrift stand mit 28px aus der Reihe — alle anderen Blockköpfe
     der Seite haben 24px. Der Abstand darunter wieder 14px wie überall. */
  .m-page-ueber-uns .quote-text {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.12 !important;
    margin: 0 0 14px !important;
  }

  /* 18.8 (Instagram-Balken) ist in Block 8 aufgegangen — er betraf nicht nur
     diese Seite, sondern auch journal.html. */

  /* ── 18.10 Farbwechsel der Bänder ──────────────────────────────────────
     Vorher lief die halbe Seite in einem einzigen Beige durch: Vorstellung,
     Kennzahlen, Philosophie und Galerie alle auf rgb(245,240,232), danach
     FAQ und Abschluss auf rgb(244,237,228) — ein Unterschied von einem
     Punkt je Kanal, den kein Auge sieht. Beim Scrollen fehlte damit jeder
     Anhaltspunkt, wo ein Abschnitt aufhört.

     Jetzt wechseln sich Weiß und Creme ab, die beiden dunklen Bänder
     (Stimme, Instagram) bleiben die Akzente:

       Kopf          Video
       Über uns      weiß   ┐ zusammen ein Block, deshalb dieselbe Farbe:
       Kennzahlen    weiß   ┘ die Linie von oben läuft durch beide
       Philosophie   creme
       Galerie       weiß
       Stimme        dunkel
       FAQ           weiß
       Abschluss     creme
       Instagram     dunkel
       Footer        dunkler

     Nur auf dem Handy. Am Desktop bleibt die bisherige Färbung. */
  .m-page-ueber-uns .team-section,
  .m-page-ueber-uns .stats-narrow,
  .m-page-ueber-uns .portfolio-preview,
  .m-page-ueber-uns .faq-section {
    background: #FFFFFF !important;
  }
  /* Die Textspalte trägt aus dem Desktop-Entwurf ein eigenes Beige. Auf dem
     weißen Band stand sie dadurch als grauer Kasten mit harten Kanten
     mitten in der Sektion. */
  .m-page-ueber-uns .team-center-col { background: transparent !important; }
  .m-page-ueber-uns .philosophy-section,
  .m-page-ueber-uns .quote-section {
    background: #F4EDE4 !important;
  }
  /* Die Haarlinien um die Kennzahlen entfallen — der Farbwechsel trennt
     jetzt, und die obere Linie hätte die Verbindung von oben zerschnitten. */
  .m-page-ueber-uns .stats-narrow {
    border-top: none !important;
    border-bottom: none !important;
  }

  /* ── 18.11 Von der Zusammenführung in die vier Kennzahlen ──────────────
     Die Linie endet nicht mehr in eigenem Text, sondern läuft als
     Mittelachse durch die vier Felder weiter. Damit daraus ein Strich wird
     und keine Treppe, stehen alle Abstände zwischen SVG-Unterkante und
     Rasteroberkante auf null; die Luft über den Zahlen kommt aus dem
     Innenabstand des Rasters, den die Achse mitnimmt. */
  .m-page-ueber-uns .team-section { padding-bottom: 0 !important; }
  .m-page-ueber-uns .stats-narrow { padding-top: 0 !important; }
  .m-page-ueber-uns .stats-narrow-grid {
    position: relative;
    padding-top: 26px !important;
  }
  .m-page-ueber-uns .stats-narrow-grid::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    margin-left: -0.5px;
    background: rgba(184, 154, 128, 0.6);
  }
  /* Die seiteneigenen Teilstriche saßen an der rechten Kante der ersten
     Spalte (x=185), nicht in der Seitenmitte (x=193) — neben der neuen
     Achse wären das zwei Linien 8px nebeneinander gewesen. */
  .m-page-ueber-uns .sn-item::after { display: none !important; }

  /* ── 18.12 Blockkopf über der Stimme ───────────────────────────────────
     Die Sektion war der einzige Abschnitt der Seite ohne Kennzeichnung —
     das Zitat begann ohne Ansage.

     Aufbau eins zu eins wie bei den übrigen Blöcken dieser Seite
     (.team-eyebrow, .philosophy-eyebrow, .pp-eyebrow): Augenbraue als
     Flex-Zeile mit je einem 22px-Strich links und rechts, darunter die
     Überschrift in Cormorant. Einziger Unterschied sind die Farben — das
     Band ist dunkelbraun, also helle Töne statt --brown-light/--brown-dark.

     Das Zierband (Linie–Raute–Linie) entfällt: Es war der Ersatz, solange
     es hier keine Überschrift gab. Über einer Augenbraue, die selbst schon
     zwei Striche trägt, wäre es ein dritter Strich über zwei Strichen. */
  .m-page-ueber-uns .testimonial-top-ornament { display: none !important; }

  .m-page-ueber-uns .testimonial-eyebrow {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    /* 20px unter der Augenbraue — derselbe Wert wie bei Philosophie und
       Galerie, damit alle Blockköpfe denselben inneren Rhythmus haben. */
    margin: 0 0 20px;
    /* Dieselbe Schrift wie die anderen Augenbrauen der Seite. */
    font-family: 'Montserrat', 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 300;
    /* `normal` wie bei den übrigen — mit 1.4 war die Zeile 15px statt 13px
       hoch und die Striche saßen dadurch eine Spur tiefer. */
    line-height: normal;
    letter-spacing: 0.18em;
    text-indent: 0.18em;
    text-transform: uppercase;
    color: rgba(244, 237, 228, 0.62);
  }
  .m-page-ueber-uns .testimonial-eyebrow::before,
  .m-page-ueber-uns .testimonial-eyebrow::after {
    content: '';
    display: block;
    width: 22px;
    height: 1px;
    flex-shrink: 0;
    background: rgba(244, 237, 228, 0.45);
  }
  /* Maße wie .faq-headline (dem anderen gemischt geschriebenen Titel der
     Seite): 24px, Strichstärke 300, Zeilenhöhe 1.12, keine Sperrung. */
  .m-page-ueber-uns .testimonial-headline {
    display: block !important;
    /* 14px wie bei Philosophie, Galerie und FAQ. Das `!important` ist
       nötig: Block 14 setzt `h2 { margin-bottom: 0 !important }`, ohne
       Gegengewicht klebte das Zitat direkt an der Überschrift. */
    margin: 0 0 14px !important;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.5rem, 6vw, 2rem);
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: normal;
    text-align: center;
    color: var(--cream, #F4EDE4);
  }
  .m-page-ueber-uns .testimonial-headline em { font-style: italic; }

  /* ═══════════════════════════════════════════════════════════════════════
     19 · FOTOGRAFIE-SEITE
     Vollständige Durchsicht der mobilen Fassung (2026-08-06).
     Alles hier hängt an `.m-page-fotografie` — die Seitenkennung, die
     mobile.js an den <body> schreibt. Andere Seiten bleiben unberührt,
     auch videografie.html, obwohl es dieselben Klassennamen benutzt.

     Leitgedanke: ein mittiges System. Auf 390px gibt es genau eine
     sinnvolle Achse, und zwar die Bildmitte. Alles, was daneben saß —
     die Punkte der Titel-Diashow, die einseitigen Zierstriche, der
     „Weiterlesen"-Knopf, der zweispaltig zerrissene Galeriekopf —
     kommt hier auf diese Achse zurück.

     Ausgangslage: 10.251px Scrollstrecke = 12,1 Bildschirme.
     Vorgabe aus MOBILE-SPEC §10: höchstens 7.
     ═══════════════════════════════════════════════════════════════════════ */

  /* ── 19.0 Ein Seitenrand für alle Sektionen ────────────────────────────
     Acht der dreizehn Sektionen tragen aus dem seiteneigenen
     `@media (max-width: 900px)`-Block ein `padding: 0 24px`. Eine
     Klassenregel schlägt die Grundregel `section { padding-left:
     var(--m-pad) }` aus Block 2 — die hat nur Elementgewicht. Die
     Textspalte sprang dadurch beim Scrollen zwischen 346px und 338px hin
     und her: keine grobe Verschiebung, aber genau die Sorte Unruhe, die
     man sieht, ohne sie benennen zu können. */
  .m-page-fotografie .statement-section,
  .m-page-fotografie .approach-section,
  .m-page-fotografie .portfolio-section,
  .m-page-fotografie .includes-section,
  .m-page-fotografie #testimonials,
  .m-page-fotografie .bridge-section,
  .m-page-fotografie .faq-section,
  .m-page-fotografie .final-cta-section {
    padding-left: var(--m-pad) !important;
    padding-right: var(--m-pad) !important;
  }

  /* ── 19.05 Hauptknöpfe: eine Zeile, eine Breite ────────────────────────
     Alle vier Handlungsaufforderungen der Seite („Verfügbarkeit prüfen",
     „Komplett-Investment ansehen", „Investment individualisieren",
     „Verfügbarkeit prüfen" im Abschluss) brachen auf zwei Zeilen um und
     waren dadurch 63–86px hoch — jeder in einer anderen Höhe, jeder in
     einer anderen Breite. Vier Knöpfe, vier Bauformen.

     Ursache ist der Sperrsatz: 14–16px mit 0.28–0.32em ergibt für
     „Komplett-Investment ansehen" rund 420px, es stehen aber 306 zur
     Verfügung. Kleiner gesetzt passt jeder Knopf in eine Zeile — und alle
     vier sehen gleich aus: volle Spaltenbreite, 52px hoch, mittig. */
  .m-page-fotografie .foto-hero-cta,
  .m-page-fotografie .final-cta-btn,
  .m-page-fotografie .bridge-btn,
  .m-page-fotografie .packages-cta a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 320px;
    min-height: 52px;
    height: auto;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.16em !important;
    text-indent: 0.16em;
    white-space: nowrap;
  }

  /* ── 19.1 Augenbrauen: ein einziges Muster ─────────────────────────────
     Die Seite hatte drei Bauformen nebeneinander: Strich links und rechts
     (Arbeiten, FAQ, Abschluss), nur rechts (Investment, Im Service
     enthalten), nur links (Unser fotografischer Ansatz) und gar keiner
     (Fotografische Stile, Ablauf, Testimonials). Nebeneinander gelesen
     wirkt das nicht wie Gestaltung, sondern wie Zufall — und die
     einseitigen schieben die Zeile sichtbar aus der Mitte.

     Jetzt überall: Strich – Wort – Strich, mittig.

     `text-indent` gleicht den Sperrsatz aus: Hinter dem letzten Zeichen
     steht noch ein voller Buchstabenabstand, ohne Ausgleich sitzt jede
     gesperrte Zeile eine halbe Sperrung zu weit links. */
  .m-page-fotografie .sec-eyebrow,
  .m-page-fotografie .faq-eyebrow,
  .m-page-fotografie .bridge-eyebrow,
  .m-page-fotografie .final-cta-eyebrow {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: normal !important;
    letter-spacing: 0.16em !important;
    text-indent: 0.16em;
    text-align: center !important;
    text-transform: uppercase;
  }
  .m-page-fotografie .sec-eyebrow::before,
  .m-page-fotografie .sec-eyebrow::after,
  .m-page-fotografie .faq-eyebrow::before,
  .m-page-fotografie .faq-eyebrow::after,
  .m-page-fotografie .bridge-eyebrow::before,
  .m-page-fotografie .bridge-eyebrow::after,
  .m-page-fotografie .final-cta-eyebrow::before,
  .m-page-fotografie .final-cta-eyebrow::after {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    flex: 0 0 20px;
    /* Der Strich nimmt die Schriftfarbe der Zeile an. Damit stimmt er auf
       hellem wie auf dunklem Grund, ohne dass hier jede Sektion einzeln
       aufgezählt werden müsste. */
    background: currentColor;
    opacity: 0.5;
    /* Der Ausgleich oben gilt der Schrift, nicht den Strichen — sonst
       wandert der linke Strich mit nach rechts. */
    text-indent: 0;
  }

  /* Gesperrte Großbuchstaben-Zeilen außerhalb der Augenbrauen: gleicher
     Ausgleich, damit auch sie wirklich mittig stehen. */
  .m-page-fotografie .final-cta-sub,
  .m-page-fotografie .instagram-sub,
  .m-page-fotografie .package-tier,
  .m-page-fotografie .combo-label,
  .m-page-fotografie .orb-meta,
  .m-page-fotografie .spec-label { text-indent: 0.15em; }

  /* ── 19.2 Titelbild ────────────────────────────────────────────────────
     Drei Dinge:

     1. Die Punkte saßen unten RECHTS. Die Seite verankert sie mit
        `right: 60px` — `justify-content` hilft da nichts, weil die Reihe
        gar nicht über die Breite spannt. Über die volle Breite gezogen
        sitzen sie mittig, wie auf der Startseite (vgl. 14.05) und auf
        videografie.html (17.8).
     2. Die Tastfläche war 6×6px. Sie kommt aus Block 13.5 (44×44px),
        muss waagerecht aber auf den Punktabstand begrenzt werden — sonst
        überlappen sich neun 44px-Felder fast vollständig und man trifft
        nie den gewünschten Punkt.
     3. Zeile und Überschrift waren für 390px zu groß gesetzt: Die
        Augenbraue brach auf zwei Zeilen, die Überschrift brauchte vier
        (MOBILE-SPEC §2 erlaubt drei). */
  .m-page-fotografie .foto-hero-dots {
    left: 0 !important;
    right: 0 !important;
    bottom: 22px !important;
    justify-content: center;
    gap: 12px !important;
  }
  .m-page-fotografie .foto-hero-dot::after {
    width: 18px !important;
    height: var(--m-tap) !important;
  }
  .m-page-fotografie .foto-hero-label {
    font-size: 10px !important;
    letter-spacing: 0.24em !important;
    text-indent: 0.24em;
    margin-bottom: 18px !important;
    white-space: nowrap;
  }
  .m-page-fotografie .foto-hero-title {
    font-size: clamp(1.75rem, 7.6vw, 2.4rem) !important;
    line-height: 1.06 !important;
  }
  .m-page-fotografie .foto-hero-sub {
    margin-top: 16px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
  /* Der Innenkasten war auf 226px begrenzt — der Knopf konnte darin gar
     nicht auf Spaltenbreite kommen. Maße des Knopfes selbst: 19.05. */
  .m-page-fotografie .foto-hero-inner {
    width: 100%;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .m-page-fotografie .foto-hero-cta { margin-top: 26px !important; }

  /* ── 19.3 Statement: Satz in der Mitte, eine Pflanze rechts oben ───────
     Der Satz stand im unteren Drittel der Sektion, weil die Zierblume als
     Block darüber lag und ihn nach unten schob. Er steht jetzt senkrecht
     mittig: Die Sektion ist ein Flex-Kasten mit fester Mindesthöhe, der
     Text ist ihr einziges Element im Fluss.

     Die Pflanze ist dafür aus dem Fluss genommen und sitzt rechts oben.
     Sie überlappt die erste Textzeile nur am Rand — die Textspalte endet
     bei 366px, die Pflanze beginnt bei 292px und liegt mit ihrer Masse
     über dem freien Raum darüber. `z-index` stellt sicher, dass sie
     hinter der Schrift bleibt, falls sie doch einmal anstößt.

     Die beiden Pflanzen am unteren Rand entfallen: Es soll eine pro
     Sektion sein (MOBILE-SPEC §9), und bei 22% Deckkraft am Fuß der
     Sektion trugen sie ohnehin nichts bei. */
  .m-page-fotografie .statement-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 40svh;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .m-page-fotografie .statement-ornament {
    position: absolute;
    top: 18px;
    right: 12px;
    z-index: 0;
    width: auto !important;
    margin: 0 !important;
  }
  .m-page-fotografie .statement-ornament img { width: 82px !important; }
  .m-page-fotografie .statement-bot-l,
  .m-page-fotografie .statement-bot-r { display: none !important; }
  .m-page-fotografie .statement-text {
    position: relative;
    z-index: 1;
    font-size: 21px !important;
    line-height: 1.42 !important;
  }

  /* ── 19.4 Unser Ansatz: „Weiterlesen" gehört in die Mitte ──────────────
     Der Knopf der Aufklapp-Komponente stand als einziges Bedienelement
     der ganzen Seite linksbündig am Textrand. */
  .m-page-fotografie .m-clamp-btn {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
  }
  .m-page-fotografie .approach-img-wrap { margin-top: 26px !important; }

  /* ── 19.5 Fotografische Stile ──────────────────────────────────────────
     Die Karte war 487px hoch: ein 3:4-Bild über die volle Kartenbreite
     plus vier Zeilen Text. Vier davon sind eine Wisch-Reihe — man sah pro
     Ansicht ein Bild und musste für den Vergleich viermal wischen.

     Das Bild wird quer (4:3, gedeckelt auf 190px). Damit passen Bild,
     Name und Beschreibung gemeinsam ins Blickfeld, und der Vergleich
     zwischen zwei Looks braucht eine Wischbewegung statt eines Scrolls.

     Wichtig ist außerdem der Antipp-Hinweis: Hinter jeder Karte liegt
     eine Galerie mit sechs Beispielbildern. Auf dem Desktop zeigt ein
     Pluszeichen beim Darüberfahren, dass es da etwas zu holen gibt — auf
     dem Handy gibt es kein Darüberfahren, das Zeichen erschien nie und
     die Galerie war praktisch unauffindbar. Es steht jetzt dauerhaft da. */
  .m-page-fotografie .style-img {
    aspect-ratio: 4 / 3 !important;
    max-height: 190px;
  }
  .m-page-fotografie .style-img-overlay { background: rgba(20, 10, 5, 0.12) !important; }
  .m-page-fotografie .style-img-plus {
    opacity: 1 !important;
    transform: none !important;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(20, 10, 5, 0.34);
    border-color: rgba(255, 255, 255, 0.85);
    /* Nach unten rechts in die Ecke, damit es das Motiv nicht verdeckt */
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
  .m-page-fotografie .style-body { padding: 16px 16px 20px !important; }
  .m-page-fotografie .style-name { font-size: 19px !important; margin-bottom: 6px !important; }
  .m-page-fotografie .style-desc { font-size: 13.5px !important; line-height: 1.6 !important; }
  .m-page-fotografie .styles-note {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-top: 6px !important;
  }

  /* ── 19.6 Galerie-Vorschau: Raster statt Wisch-Reihe ───────────────────
     Vorher ein Karussell über 19 Bilder. Die Punkte-Anzeige dazu war
     19 × 22px = 418px breit und lief links wie rechts aus dem Bild
     (gemessen −43px bis 429px) — daneben stand zusätzlich der Zähler
     „1 / 19". Zwei Anzeigen für dieselbe Sache, beide unbrauchbar.

     Jetzt sechs Bilder als 2-Spalten-Raster, wie in MOBILE-SPEC §6 für
     diese Seite festgelegt. Sechs Bilder auf einen Blick sagen über eine
     Bildsprache mehr aus als eins, das man neunzehnmal weiterschiebt —
     und der Weg zum vollständigen Portfolio steht direkt darunter.
     Die übrigen 13 verschwinden nicht, sie liegen dort. */
  .m-page-fotografie .portfolio-grid.m-grid-2 {
    gap: 6px !important;
    /* Die Seite zieht das Raster mit −24px aus der Sektion heraus, passend
       zu ihrem eigenen 24px-Polster. Mobil sind es 20px — ohne Korrektur
       ragte die Galerie 4px über beide Ränder hinaus. */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* ACHTUNG — hier stand:
       .portfolio-grid.m-grid-2 > .pg-item:nth-child(n + 7)
         { display: none !important }
     Das war falsch und hat den Knopf „Mehr anzeigen" darunter tot
     gestellt: Die Komponente 6d (LOADMORE in mobile.js) blendet Einträge
     über `el.style.display = ''` wieder ein — ein Inline-Stil, der gegen
     `display: none !important` verliert. Der Knopf zählte also korrekt
     hoch und tat sichtbar nichts.

     Die Begrenzung auf sechs Bilder macht jetzt LOADMORE selbst
     (`first: 6`, Eintrag in mobile.js). Eine Stelle, die zählt, statt
     zweier, die sich widersprechen. */
  /* Quadratisch, nicht 3:4. Hochkant wären sechs Bilder 676px hoch und
     die Vorschau allein länger als der Rest der Sektion; quadratisch sind
     es 510px, und der Zuschnitt trifft Hoch- wie Querformate gleich fair. */
  .m-page-fotografie .portfolio-grid.m-grid-2 > .pg-item {
    aspect-ratio: 1 / 1 !important;
    width: auto !important;
    height: auto !important;
  }
  .m-page-fotografie .portfolio-grid.m-grid-2 > .pg-item img {
    width: 100%; height: 100%;
    aspect-ratio: auto !important;
    object-fit: cover;
  }
  /* Das Pluszeichen der Kacheln erscheint auf dem Desktop beim
     Darüberfahren. Auf dem Handy gäbe es sonst keinen Hinweis, dass sich
     ein Bild groß öffnen lässt. */
  .m-page-fotografie .portfolio-grid.m-grid-2 .pg-item-zoom {
    opacity: 1 !important;
    /* Klein und in der Ecke, nicht 46px mitten auf dem Motiv: Bei sechs
       Kacheln nebeneinander wäre das Zeichen sonst das Auffälligste an
       der Sektion — und es sollen die Bilder wirken. */
    width: 28px !important;
    height: 28px !important;
    top: auto !important;
    left: auto !important;
    right: 7px !important;
    bottom: 7px !important;
    transform: none !important;
    background: rgba(20, 10, 5, 0.32);
    border-color: rgba(255, 255, 255, 0.8);
    color: #fff;
  }
  .m-page-fotografie .portfolio-cta { margin-top: 22px !important; }
  /* „Komplettes Portfolio ansehen →" brach mit voller Sperrung auf zwei
     Zeilen, und die Unterstreichung lief dabei quer durch die zweite. */
  .m-page-fotografie .portfolio-link {
    display: inline-flex;
    align-items: center;
    /* 23px hoch war das letzte Bedienelement der Seite unter 44px */
    min-height: var(--m-tap);
    font-size: 12px !important;
    letter-spacing: 0.14em !important;
    text-indent: 0.14em;
    white-space: nowrap;
  }

  /* ── 19.7 Pakete: Kombi-Banner mobil raus ──────────────────────────────
     Der Banner „Foto & Film — das vollständige Erlebnis" (3.900 €) ist
     auf Wunsch mobil entfernt — dieselbe Entscheidung wie auf
     videografie.html (Block 17).

     Die Sektion endet damit nach den drei Paketkarten mit „Individuell
     für euch"; auf das Kombi-Angebot führt zwei Sektionen weiter die
     Strecke „Foto und Film — ein gemeinsamer Blick" mit eigenem Knopf.
     Auf dem Desktop bleibt der Banner unverändert stehen.

     (Hier standen zuvor Pfeil-Knopf und Textgrößen für den Banner —
     entfallen mit ihm.) */
  .m-page-fotografie .combo-banner { display: none !important; }
  .m-page-fotografie .packages-cta { margin-top: 26px !important; }
  .m-page-fotografie .packages-cta a { margin-top: 20px !important; }

  /* ── 19.8 Was ihr von uns bekommt: Liste statt Wisch-Reihe ─────────────
     Sechs Leistungen, die zusammen begründen, wofür das Geld ausgegeben
     wird. Als Karussell sah man davon eine — fünf Sechstel des Arguments
     lagen hinter einer Wischgeste, die niemand machen muss.

     Der Gegeneinwand wäre die Scrollstrecke. Die Zeilen sind aber kurz:
     Nummer, Titel, zwei Zeilen. Untereinander kosten sie rund 480px und
     man liest sie im Vorbeiscrollen, statt sie zu bedienen.

     Die Registrierung dazu steht in mobile.js (CAROUSSELS) — dort ist
     `.includes-list` jetzt auf `.m-page-videografie` begrenzt. */
  .m-page-fotografie .includes-list {
    display: block !important;
    max-width: 340px;
    margin: 0 auto !important;
  }
  .m-page-fotografie .inc-row {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 13px 0 !important;
    text-align: center;
    border-top: none !important;
    border-bottom: 1px solid rgba(244, 237, 228, 0.14);
  }
  .m-page-fotografie .inc-row:last-child { border-bottom: none !important; }
  /* Die Nummer ist im Entwurf eine große Kursivziffer neben der Zeile. In
     der gestapelten Liste steht sie über dem Titel — als Cormorant-Kursive
     auf 13px las sich „01" wie ein verrutschtes „o1". Sie wird deshalb
     hier zur Sperrschrift-Zeile in derselben Sprache wie die Augenbrauen
     der Seite. Farbe: der Gold-Akzent, den die Sektion ohnehin führt. */
  .m-page-fotografie .inc-num {
    font-family: 'Jost', sans-serif !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    letter-spacing: 0.2em !important;
    text-indent: 0.2em;
    line-height: 1 !important;
    margin-bottom: 7px;
    color: rgba(201, 166, 107, 0.9) !important;
  }
  .m-page-fotografie .inc-title {
    font-size: 17px !important;
    line-height: 1.25 !important;
    margin-bottom: 5px !important;
  }
  .m-page-fotografie .inc-text {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    max-width: none !important;
  }
  /* Das Begleitbild bleibt (es ist das einzige Bild der Sektion), wird
     aber zum Streifen: 224px hoch war es ein zweites Titelbild vor einer
     Liste, die selbst schon 600px braucht. */
  .m-page-fotografie .includes-figure {
    /* Feste Höhe statt Seitenverhältnis: Mit `aspect-ratio` und
       `max-height` rechnet der Browser die Breite zurück, das Bild wurde
       dadurch schmaler als die Textspalte und stand als Briefmarke da. */
    width: 100% !important;
    max-width: none !important;
    height: 150px !important;
    aspect-ratio: auto !important;
    margin: 0 auto 22px !important;
  }
  .m-page-fotografie .includes-figure img {
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .m-page-fotografie .includes-intro { margin-bottom: 0 !important; }
  .m-page-fotografie .includes-head { margin-bottom: 22px !important; }

  /* ── 19.9 Ablauf: 2×2-Raster ───────────────────────────────────────────
     Vorher: Kugel links, Text rechts daneben, der Text darin mittig.
     Dadurch lag die Textachse bei 246px, die Bildmitte bei 195px — genau
     der schiefe Eindruck, um den es hier geht.

     Jetzt das 2×2-Raster aus MOBILE-SPEC §5.9: Kugel über dem Text, alles
     auf einer Achse, alle vier Schritte gleichzeitig sichtbar. Dass es
     vier sind, sieht man damit, ohne es zu lesen.

     Die vier Beschreibungstexte sind für 165px Spaltenbreite zu lang.
     Sie werden nicht abgeschnitten, sondern gegen eine kurze Fassung
     getauscht (mobile.js TEXTSWAP, Texte in lang.js, beide Sprachen). */
  .m-page-fotografie #process .orb-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 30px 14px !important;
    align-items: start;
  }
  .m-page-fotografie #process .orb-step {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    grid-template-columns: none !important;
    text-align: center;
    min-width: 0;
  }
  .m-page-fotografie #process .orb-scene {
    --orb: 96px;
    width: 96px !important;
    height: 96px !important;
    margin: 0 auto 10px !important;
  }
  .m-page-fotografie #process .orb-meta {
    font-size: 10px !important;
    letter-spacing: 0.16em !important;
    text-indent: 0.16em;
    margin: 0 0 3px !important;
  }
  .m-page-fotografie #process .orb-title {
    font-size: 16px !important;
    line-height: 1.2 !important;
    margin: 0 0 5px !important;
  }
  .m-page-fotografie #process .orb-text {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* ── 19.10 Foto und Film ───────────────────────────────────────────────
     998px — die längste Sektion der Seite nach den Paketen, für einen
     Quer-Verweis. Die Collage aus fünf Fotos zeigt dabei genau dieselben
     fünf Aufnahmen, die 4.000px weiter oben schon in der Galerie standen.

     Sie bleibt (die Sektion stellt Foto gegen Film, dafür braucht es
     beides), wird aber flach: aus dem Quadrat wird ein 16:9-Streifen.
     Das Video darunter bleibt unverändert — es ist hier das Argument. */
  .m-page-fotografie .bridge-collage {
    aspect-ratio: 16 / 9 !important;
    gap: 6px !important;
  }
  .m-page-fotografie .bridge-media { gap: 20px !important; }
  .m-page-fotografie .bridge-text {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
  }
  .m-page-fotografie .bridge-btn { margin-top: 24px !important; }

  /* ── 19.11 FAQ: Fragen wirklich mittig ─────────────────────────────────
     Das Pluszeichen sitzt rechts in der Zeile und ist 28px breit, dazu
     14px Abstand. Zentriert wurde deshalb nur der Rest — jede Frage stand
     21px links der Bildmitte. Gleiches Polster links und rechts stellt
     die Achse wieder her.

     Bewusst KEIN Flex-Platzhalter links: Der Versuch (`::before` mit
     `flex: 0 0 24px`) sah in der Rechnung richtig aus, in der Darstellung
     aber lief die Frage weiter unter das Pluszeichen — das Textelement
     schrumpfte nicht auf die freie Breite, auch nicht mit `min-width: 0`.
     Der Knopf ist deshalb wieder ein einfacher Block mit gleichem Polster
     links und rechts; das Zeichen liegt absolut am rechten Rand und
     nimmt gar keinen Platz im Fluss mehr ein. */
  .m-page-fotografie .faq-question {
    display: block !important;
    position: relative;
    padding: 13px 34px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
  .m-page-fotografie .faq-icon {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px; height: 24px;
  }
  .m-page-fotografie .faq-answer-inner p {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  /* ── 19.12 Abschluss ───────────────────────────────────────────────────
     Der Knopf ist der letzte Schritt der Seite und darf so aussehen. */
  .m-page-fotografie .final-cta-btn { margin-top: 26px !important; }
  .m-page-fotografie .final-cta-sub {
    display: block;
    margin-top: 16px !important;
    font-size: 10.5px !important;
    letter-spacing: 0.14em !important;
  }
  .m-page-fotografie .final-cta-body {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     12 · KLEINE GERÄTE, LANDSCAPE, REDUZIERTE BEWEGUNG
     ───────────────────────────────────────────────────────────────────────── */

  @media (max-width: 380px) {
    :root { --m-pad: 16px; --m-sec: 44px; }
    /* Vier Elemente in der Kopfzeile brauchen hier jeden Pixel */
    .m-nav-cta { font-size: 10px; padding: 0; letter-spacing: 0.1em; }
    /* Der Sprachknopf behält seine 44px Tastbreite — hier zu sparen hieße,
       genau das Problem zurückzuholen, das er gelöst hat. Nur die Schrift
       darauf wird eine Spur kleiner. */
    .m-lang-toggle { font-size: 11px; }
    .hamburger { width: 38px; }
    /* Marke eine Spur kleiner — sonst drängt der Schriftzug auf schmalen
       Geräten an den Anfrage-Link und das Menü-Icon heran. */
    :root { --m-nav-h-big: 80px; }
    .mobile-nav-logo img { width: 34px; height: 34px; }
    .m-nav-logo-word { font-size: 16px; line-height: 17px; letter-spacing: 0.24em;
                       margin-right: -0.24em; }
    .mobile-nav.m-nav-big .m-nav-logo-word { height: 17px; }
    .m-nav-logo-sub { font-size: 10px; line-height: 12px; letter-spacing: 0.22em;
                      margin-right: -0.22em; }
    .mobile-nav.m-nav-big .m-nav-logo-sub { height: 12px; }
    .instagram-grid { gap: 4px !important; }
    .orb-row { gap: 22px 12px !important; }
    #process { --orb: 88px; }
    .orb-scene { --orb: 88px; }
  }

  /* Phones im Querformat: Vollbild-Hero würde die Inhalte verschlucken */
  @media (max-height: 500px) and (orientation: landscape) {
    #hero { height: auto; min-height: 420px; padding: 90px 0 40px; }
    .page-hero, .sub-hero, .hero-sub-page,
    #photo-hero, #video-hero, #about-hero,
    #journal-hero, #portfolio-hero {
      height: auto !important;
      max-height: none !important;
      min-height: 360px !important;
      padding-top: 80px;
      padding-bottom: 40px;
    }
    #invest-hero, .invest-hero {
      height: auto !important;
      max-height: none !important;
      min-height: 260px !important;
    }
    .mobile-menu-panel { padding-top: calc(var(--m-nav-total) + 8px); }
    .orb-row { grid-template-columns: repeat(4, 1fr) !important; }
  }

  /* ── 18 · STIMMEN-KARUSSELL: dieselbe 3D-Bühne, für Mobile skaliert ─────
     Gemeldet auf videografie.html: Karten unterschiedlich groß, manche
     sitzen weiter oben. Ursache: Das räumliche 3D-Karussell vom Desktop
     lief unverändert auf Mobile weiter — die horizontalen Versätze
     (380/680/850px) und die Tiefe (-100/-360/-620px) sind für eine
     1000px+ breite Bühne gerechnet. Auf 390px lag die Nachbarkarte damit
     fast komplett außerhalb des Bildschirms; was man sah, war nur ein
     stark verzerrter, foreshortened Rand — das wirkte wie „unterschiedlich
     groß" und „mal höher, mal tiefer".
     Erster Gegenzug war, die Perspektive ganz abzuschalten (nur die
     aktive Karte sichtbar) — auf Wunsch aber zurückgenommen: Die
     3D-Bewegung soll bleiben, wie im Desktop-Entwurf. Hier deshalb
     dieselbe Bühne mit denselben Verhältnissen, nur die Maßzahlen an
     390px statt 1200px angepasst (grob auf ein Drittel skaliert), damit
     die Nachbarkarten als Anschnitt sichtbar bleiben statt komplett
     abzuschneiden.

     ── Nachbesserung 2026-08-07 ────────────────────────────────────────
     Gemeldet: „Auf der Desktop-Landingpage ist es viel flüssiger, die
     Bilder springen nicht von hinten nach vorne. Wenn ich ein Bild
     weitergehe, springt es komischerweise über das andere."

     Gemessen auf 390px war die Ursache eindeutig — die Karten lagen
     übereinander:
       Mitte   43 – 343px
       +1     211 – 491px   →  132px Überlappung
       −1    −105 – 175px   →  132px Überlappung
       +2     289 – 544px   →  zusätzlich
     Drei gleichzeitig sichtbare Karten auf einem Stapel, gehalten nur
     von `z-index`. Der wechselt beim Weiterblättern SCHLAGARTIG (z-index
     ist nicht animierbar), während die Bewegung 0,8s läuft — die Karte
     wechselt also mitten im Gleiten die Ebene und schiebt sich sichtbar
     über ihre Nachbarin.

     Auf dem Desktop passiert das nicht, und zwar nicht wegen besserer
     Animation: Dort sind die Karten 360px breit bei 380px Versatz, sie
     berühren sich schlicht nie. Die Stapelreihenfolge ist dort ohne
     Wirkung.

     Genau das wird hier nachgebaut. Die Zahlen sind so gewählt, dass die
     Nachbarkarte bündig an der Mittelkarte endet statt sie zu überlappen
     — bei 262px Karte und 277px Versatz (Maßstab 0.94 durch die Tiefe)
     liegt ihre linke Kante bei 325px, die Mittelkarte endet bei 324px.
     Beide wandern beim Blättern gleich weit nach links, der Abstand
     bleibt also über die ganze Bewegung erhalten. Ohne Überlappung ist
     der z-index-Wechsel unsichtbar — die 3D-Bühne bleibt wie sie ist.

     Die 262px sind zugleich die Breite, die der Seitenentwurf selbst für
     Mobile vorsieht (`.testi-card { width: 260px }` unter 900px); die
     300px hier waren die Abweichung. */
  .testi-carousel-wrap { perspective: 1100px !important; }
  .testi-card {
    width: min(68vw, 262px) !important;
    top: 0 !important;
  }
  .testi-card[data-pos="0"] {
    transform: translate3d(-50%, 0, 0) rotateY(0deg) !important;
    opacity: 1 !important;
    z-index: 10 !important;
    pointer-events: auto !important;
  }
  .testi-card[data-pos="1"] {
    transform: translate3d(calc(-50% + 277px), 6px, -70px) rotateY(-16deg) !important;
    opacity: 0.8 !important;
    z-index: 8 !important;
    pointer-events: none !important;
  }
  .testi-card[data-pos="-1"] {
    transform: translate3d(calc(-50% - 277px), 6px, -70px) rotateY(16deg) !important;
    opacity: 0.8 !important;
    z-index: 8 !important;
    pointer-events: none !important;
  }
  .testi-card[data-pos="2"] {
    transform: translate3d(calc(-50% + 450px), 18px, -160px) rotateY(-26deg) !important;
    opacity: 0.3 !important;
    z-index: 6 !important;
    pointer-events: none !important;
  }
  .testi-card[data-pos="-2"] {
    transform: translate3d(calc(-50% - 450px), 18px, -160px) rotateY(26deg) !important;
    opacity: 0.3 !important;
    z-index: 6 !important;
    pointer-events: none !important;
  }
  /* Ab der dritten Position OHNE Übergang: Bei sieben Stimmen wandert
     genau eine Karte pro Schritt von −3 nach +3, also einmal quer durch
     die ganze Bühne. Mit Übergang gleitet sie diese Strecke mit — bei
     Deckkraft 0 zwar unsichtbar, aber sie kostet 0,8s Compositing für
     nichts. Ohne Übergang springt sie unbemerkt an ihren Platz. */
  .testi-card[data-pos="3"], .testi-card[data-pos="-3"],
  .testi-card[data-pos="4"], .testi-card[data-pos="-4"],
  .testi-card[data-pos="5"], .testi-card[data-pos="-5"] {
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    transition: none !important;
    visibility: hidden !important;
  }
  /* Weniger Ebenen, weniger Rasterarbeit pro Bild: `will-change` hält für
     jede Karte dauerhaft eine eigene Compositing-Ebene vor — bei sieben
     Karten auf einem Handy ist das der eigentliche Ruckel-Anteil. Nur die
     drei sichtbaren brauchen sie. Ebenso die Eckmarken (`::after` zeichnet
     acht Verläufe pro Karte): sie bleiben der Mittelkarte vorbehalten, wo
     man sie überhaupt sieht. */
  .testi-card { will-change: auto !important; }
  .testi-card[data-pos="0"],
  .testi-card[data-pos="1"],
  .testi-card[data-pos="-1"] { will-change: transform, opacity !important; }
  .testi-card:not([data-pos="0"])::after { display: none; }

  @media (prefers-reduced-motion: reduce) {
    .mobile-menu-panel,
    .mobile-menu-backdrop,
    .m-acc-panel,
    .m-submenu,
    .hamburger-line { transition: none !important; }
    .m-carousel { scroll-behavior: auto !important; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Tablets hochkant (768–1023px): zwei Spalten statt einer, sonst wie Mobile.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --m-pad: 32px; --m-sec: 64px; }
  .m-carousel > * { flex-basis: 46vw; }
  #featured { --m-card: 42vw; }
  #pillars, #packages, #testimonials { --m-card: 46vw; }
  .m-grid-2 { grid-template-columns: repeat(3, 1fr) !important; }
  .instagram-grid { grid-template-columns: repeat(6, 1fr) !important; }
  .instagram-grid > *:nth-child(n + 7) { display: block !important; }
  .orb-row { grid-template-columns: repeat(4, 1fr) !important; }
  #process, .orb-scene { --orb: 128px; }
}
