/* Seitenmenü www.bali.place – Desktop-Fassung (entschieden mit Thomas am 30.09.2026, Prototyp: notes/entwuerfe-2026-09-30/seitenmenue/prototyp/).
   Quelle: notes/tools/seitenmenue/site-menu.css → per einbauen.mjs nach website/css/site-menu.css kopiert. book.bali.place hat dasselbe Aussehen (SiteMenu.tsx).
   Klasse "gm" auf <html> (setzt einbauen.mjs), --gm-s = Faktor für die Abstände der Seitenleiste (Kopf-Skript + site-menu.js).
   Handy (< 992 px) bleibt vorerst wie bisher (Thomas: „mobile schauen wir uns separat an, nach den go-live“). */

/* ---------- Kopfzeile: Seiten in einem Rahmen · Promotions mittig (nur wenn im Seitenmenü vorhanden) · Social rechts ---------- */
.gm-topbar, .gm-side-note { display: none; }
@media (min-width: 992px) {
  .gm { --gm-side: 280px; }
  .gm body.bloc-padding { padding-top: 90px; padding-left: var(--gm-side) !important; }
  .gm .gm-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: 90px;
    padding: 0 28px 0 calc(var(--gm-side) + 28px);
    background: rgba(250,250,248,.72); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
  .gm .gm-group { display: flex; align-items: center; height: 44px; padding: 0 8px; border: 1px solid #e2ddd2; border-radius: 10px; background: #fff; }
  .gm .gm-topbar a { position: relative; color: #3c3a34 !important; text-decoration: none !important; font: 700 15px/1 "RalewayThin-ExtraLight", Raleway, sans-serif;
    letter-spacing: .02em; white-space: nowrap; }
  .gm .gm-group a { padding: 0 14px; }
  .gm .gm-topbar a span { display: inline-block; padding: 5px 0; background: linear-gradient(#da4141, #da4141) no-repeat 0 100% / 0 1px; transition: background-size .3s ease; }
  .gm .gm-topbar a:is(:hover, :focus-visible) span { background-size: 100% 1px; }
  .gm .gm-topbar a:focus-visible { outline: none; }
  /* aktuelle Seite: kurzer roter Strich links vom Wort (wie im Seitenmenü) */
  .gm .gm-group a.is-here::before { content: ""; position: absolute; left: 5px; top: 50%; width: 2px; height: 62%; transform: translateY(-50%); border-radius: 2px; background: #da4141; }
  .gm .gm-topbar a.gm-promo { display: inline-flex; align-items: center; height: 44px; padding: 0 26px; border: 1px solid #e2ddd2; border-radius: 10px; background: #fff;
    color: #da4141 !important; transition: border-color .2s; }
  .gm .gm-topbar a.gm-promo:is(:hover, :focus-visible), .gm .gm-topbar a.gm-promo.is-here { border-color: #da4141; }
  .gm .gm-social { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 10px; border: 1px solid #e2ddd2; border-radius: 10px; background: #fff; }
  .gm .gm-topbar .gm-social a { display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; height: 100%; font: 700 13.5px/1 "RalewayThin-ExtraLight", Raleway, sans-serif; color: #3c3a34 !important; }
  .gm .gm-social svg { width: 17px; height: 17px; fill: var(--c); transition: transform .25s; }
  .gm .gm-topbar .gm-social a:is(:hover, :focus-visible) svg { transform: scale(1.15); }
}
/* Breite (3.10.2026, Thomas, Entwurf https://claude.ai/artifact/Svqmjz9biVe3NxedKijP4M): rechter Block [Sprache ▾][Social] immer bündig am Rand, Promotions mittig dazwischen,
   „Ubud“/„Seminyak“ immer mit Text, YouTube nur Symbol. Wird es eng, spart die Leiste in Stufen – je Sprache und mit/ohne Promotions GEMESSEN (leiste-messen.mjs →
   css/site-menu-fit.css): 1 Abstände enger → 2 Menü-Schrift 14 px → 3 Social oben in die Seitenleiste → 4 Seitenleiste 240 px. Nie Umbruch, nie MENÜ-Knopf.
   (Bis 3.10.: feste Stufen 1240/1100/992 – Social ohne Text bzw. ganz weg; galt nur für Englisch ohne Sprachwahl.) */
@media (min-width: 992px) {
  .gm .gm-topbar { justify-content: flex-start; }
  .gm .gm-topbar > .gm-promo { margin: 0 auto; }
  .gm .gm-topbar:not(:has(> .gm-promo)) > .gm-dl, .gm .gm-topbar:not(:has(> .gm-promo, > .gm-dl)) > .gm-social { margin-left: auto; }
  .gm .gm-topbar > .gm-dl + .gm-social { margin-left: -4px; }   /* Sprache und Social als Paar: 8 statt 12 px Abstand */
  .gm .gm-ssep { width: 1px; height: 18px; background: #e2ddd2; margin: 0 4px; flex: none; }
  .gm .gm-side-soc { display: none; }
  .gm .gm-side-soc .gm-social { display: flex; align-items: center; justify-content: space-between; gap: 2px; height: 44px; padding: 0 6px; border: 1px solid #e2ddd2; border-radius: 10px; background: #fff; }
  .gm .gm-side-soc .gm-social a { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; height: 100%; color: #3c3a34 !important; text-decoration: none !important;
    font: 700 12.5px/1 "RalewayThin-ExtraLight", Raleway, sans-serif; }
  .gm .gm-side-soc .gm-social svg { width: 16px; height: 16px; fill: var(--c); }
  .gm .gm-side-soc { margin: 4px 0 calc(-16px * var(--gm-s, 1)); }
}

/* ---------- Seitenleiste: Logo · Ubud · Seminyak · „Book direct for the best rate“ – ohne Linien, Abstände wachsen mit der Fensterhöhe (× --gm-s) ---------- */
@media (min-width: 992px) {
  .gm .eldar-sidebar { width: var(--gm-side); padding-left: 26px; padding-right: 22px; z-index: 32; background-color: transparent !important; border-right-color: transparent !important; }
  .gm .eldar-sidebar::before { content: ""; position: fixed; top: 90px; bottom: 0; left: 0; width: var(--gm-side); background: #fafaf8; z-index: -1; }
  .gm .eldar-sidebar nav.navbar { display: none !important; }
  .gm .eldar-sidebar .container, .gm .eldar-sidebar .row, .gm .eldar-sidebar .col-lg-12 { padding-top: 0 !important; margin-top: 0 !important; }
  .gm .eldar-sidebar .eldar-logo-div { height: 90px; margin: -7px 0 0 !important; display: flex; align-items: center; }
  .gm .eldar-sidebar .eldar-logo-div img { width: 170px !important; max-width: none; height: auto; margin: 0 !important; }
  .gm .eldar-sidebar div:has(> p > a.eldar-category) { margin: calc(24px * var(--gm-s, 1)) 0 calc(24px * var(--gm-s, 1)) -10px; padding: calc(14px * var(--gm-s, 1)) 10px calc(20px * var(--gm-s, 1)) 22px; }
  .gm .eldar-sidebar nav + div:has(> p > a.eldar-category) { margin-top: calc(40px * var(--gm-s, 1)) !important; }
  .gm .eldar-sidebar div:has(> p > a.eldar-category) > p:first-child { margin-bottom: calc(8px * var(--gm-s, 1)) !important; }
  .gm .eldar-sidebar .eldar-project-link { width: 100%; padding: calc(5px * var(--gm-s, 1)) 8px; }
  .gm .eldar-sidebar .eldar-project-a { font-size: 15px !important; letter-spacing: .02em; color: #5f5c55 !important; }
  .gm .eldar-sidebar .eldar-category { font-size: 13.1px !important; }
  .gm .eldar-sidebar .eldar-category-sub { margin-top: 4px; }
  .gm .eldar-sidebar div:has(> p > a.eldar-category) .btn.book-direct-button { margin-top: calc(16px * var(--gm-s, 1)) !important; font-size: 17px !important; padding: 5px 12px !important; }
  /* „Book direct for the best rate“ – wie die Guest-Favourite-Karte der Bewertungen; Lage/Breite setzt site-menu.js (gleicher Abstand wie zwischen den Blöcken) */
  .gm .gm-side-note { display: block; visibility: hidden; position: fixed; z-index: 33; top: 0; margin: 0; overflow: hidden; box-sizing: border-box;
    padding: calc(14px * var(--gm-s, 1)) 10px calc(16px * var(--gm-s, 1)) 30px; border: 1px solid color-mix(in srgb, #AD332A 38%, transparent); border-radius: 10px;
    background: linear-gradient(180deg, color-mix(in srgb, #EED7D1 85%, #fff) 0%, #fffdfb 78%); box-shadow: 0 10px 30px color-mix(in srgb, #AD332A 12%, transparent);
    color: #AD332A !important; font: 23px/1.2 "CormorantGaramondLight-Regular", "Cormorant Garamond", Georgia, serif; letter-spacing: .01em; pointer-events: none; }
  .gm .gm-side-note.is-on { visibility: visible; animation: gmNoteIn .9s cubic-bezier(.2,.7,.2,1) .5s both; }
  .gm .gm-side-note::after { content: ""; position: absolute; inset: -20% auto -20% -60%; width: 45%; pointer-events: none;
    background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.75) 50%, transparent 100%); transform: skewX(-18deg); opacity: 0; }
  .gm .gm-side-note.is-on::after { animation: gmSheen 8s ease-in-out 2.2s infinite; }
}
@keyframes gmNoteIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes gmSheen { 0% { opacity: 0; left: -60%; } 4% { opacity: 1; } 18% { opacity: 1; left: 120%; } 19%, 100% { opacity: 0; left: 120%; } }

/* ---------- Kopfbild, NUR Desktop ab 992 px: kein Vorhang; Bild + Text blenden ein (1,2 s), Bild gleitet 100 → 106 % in 4,5 s; oben links 12 px rund ----------
   Start erst, wenn das Kopfbild geladen UND entpackt ist (site-menu.js setzt html.gm-hero-ready, spätestens nach 3,5 s). Kopfbild = erster .bloc-fill-screen.
   Farbfläche/Vorschau davor entfernt (30.9. nachts, Thomas: „die hero gehen so nicht, das sieht furchtbar aus“) – stattdessen lädt site-menu.js die Kopfbilder
   aller Seiten vor. Handy/Tablet < 992 px: alles wie ursprünglich, mit Vorhang (Thomas: „kann es sein, dass du mobile den vorhang entfernt hast …“). */
/* Vorhang Handy/Tablet (< 992 px) ruckelte (Thomas 1.10.: „speziell am Anfang – und auch nach mehrmaligem Laden einer Seite“): die Blocs-Keyframes
   page-trans-fade-right enthalten „visibility“ → Chrome lässt die GANZE Animation auf dem Hauptthread laufen (Trace: compositeFailed, unsupportedProperties
   visibility), jede Lade-Arbeit lässt den Vorhang stocken. Hier zwei Animationen: Bewegung + Ausblenden (Grafikkarte) und getrennt nur „visibility“ fürs Ende.
   Gleiche Dauer/Verzögerung (Inline-Stil), gleiches Pausieren (.hero-wait), gleiches Aussehen. */
#page-transition-anim.page-trans-right { animation-name: gmCurtainMove, gmCurtainHide; }
@keyframes gmCurtainMove { 0% { transform: none; } 30% { opacity: 1; } 100% { opacity: 0; transform: translate3d(100%, 0, 0); } }
@keyframes gmCurtainHide { 0% { visibility: visible; } 100% { visibility: hidden; } }
@media (min-width: 992px) {
#page-transition-anim { display: none !important; }
.gm .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen) { position: relative; overflow: hidden; }
/* Titel erst zusammen mit dem Bild einblenden, wenn Bild UND Schrift da sind – sonst hüpfen sie beim Schriftwechsel („die titel im hero hüpfen auch“, Thomas 30.9.) */
.gm:not(.gm-hero-ready) .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen) > .container { opacity: 0; }
.gm.gm-hero-ready .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen) > .container { animation: gmFade 1.2s ease-out both; }
.gm .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen):not(.b-parallax) { isolation: isolate; }
.gm:not(.gm-hero-ready) .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen) .parallax, .gm:not(.gm-hero-ready) .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen):not(.b-parallax)::before { opacity: 0; }
.gm.gm-hero-ready .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen) .parallax { animation: gmFade 1.2s ease-out both, gmZoom 4.5s cubic-bezier(.33,0,.2,1) both; }
/* Gallery u.ä.: Bild hängt direkt am Block → eigene Bildebene, damit nur das Bild zoomt, nicht der Text */
.gm .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen):not(.b-parallax)::before { content: ""; position: absolute; inset: 0; z-index: 0; background: inherit; pointer-events: none; }
.gm .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen):not(.b-parallax) > * { position: relative; z-index: 1; }
.gm.gm-hero-ready .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen):not(.b-parallax)::before { animation: gmFade 1.2s ease-out both, gmZoom 4.5s cubic-bezier(.33,0,.2,1) both; }
@media (min-width: 992px) {
  .gm .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen) { border-top-left-radius: 12px; }
  /* Parallax-Bild steht fest (position: fixed) → Rundung über clip-path auf dem Bildausschnitt */
  .gm .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen) .parallax__container,
  .gm .page-container > .bloc-fill-screen:not(.bloc-fill-screen ~ .bloc-fill-screen)::before { clip-path: inset(0 round 12px 0 0 0); }
}
@keyframes gmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gmZoom { from { scale: 1; } to { scale: 1.06; } }
@media (prefers-reduced-motion: reduce) {
  .gm .page-container > .bloc-fill-screen, .gm .page-container > .bloc-fill-screen .parallax, .gm .page-container > .bloc-fill-screen::before,
  .gm .gm-side-note.is-on, .gm .gm-side-note.is-on::after { animation: none !important; opacity: 1 !important; }
}
}

/* ---------- Kopfbild sofort sichtbar (5.10.2026, Ladezeiten Paket A) ----------
   universal-parallax gibt .parallax erst beim load-Ereignis eine Höhe (bis dahin 0 → Kopfbild geladen, aber unsichtbar; am Handy ~3 s Lücke).
   Das Kopf-Skript (HERO-Block) setzt Höhe/top jetzt mit derselben Rechnung, sobald das Element im DOM ist. Bis universal-parallax den Umschlag
   .parallax__container baut, liegt .parallax direkt im Bloc: hier dieselbe Stapelung (unter dem Text, z-index -1 wie der Umschlag) und derselbe
   Zuschnitt auf den Bloc (clip-path statt clip des Umschlags). Nach dem Umschlag greifen die Regeln nicht mehr (Elternelement ist dann der
   Umschlag) → Endzustand Byte für Byte wie vorher. */
.gm .page-container > .b-parallax > .parallax { z-index: -1; left: var(--bp-hero-x, 0px); } /* left: ohne Umschlag stünde das fixe Element am Inhaltsrand des Blocs (Innenabstand) – das Kopf-Skript setzt --bp-hero-x = linke Kante des Blocs */
.gm .page-container > .b-parallax:has(> .parallax) { clip-path: inset(0); }
@media (min-width: 992px) { .gm .page-container > .bloc-fill-screen.b-parallax:not(.bloc-fill-screen ~ .bloc-fill-screen):has(> .parallax) { clip-path: inset(0 round 12px 0 0 0); } }
/* Vorhang-Fix (5.10.2026 nachmittags): Handy/Tablet < 992 px – der Vorhang #page-transition-anim steht erst am Ende des HTML. Bis er im DOM ist, bleibt das
   Kopfbild unsichtbar, sonst wird es bei schnellem Netz gemalt, bevor der Vorhang es deckt (Thomas: „Das Foto blitzt auf, verschwindet, dann kommt der Vorhang.“).
   Das Kopf-Skript (HERO-Block) wartet ebenfalls auf den Vorhang (ok()); diese Regel ist der zweite Gurt (:has ab iOS 15.4 / Chrome 105). Jede Seite hat den Vorhang. */
@media (max-width: 991px) { .gm:not(:has(#page-transition-anim)) .page-container > .b-parallax > .parallax { visibility: hidden; } }
/* Titelkasten-Fix (5.10.2026 abends): bis der Vorhang im DOM ist, war am Handy noch der TITEL des Kopfblocks zu sehen – .frame-headers (style.css) legt hinter
   die Titelzeilen einen halbdurchsichtigen dunklen Kasten (--swatch-var-760 = rgba(60,58,52,.3)); über dem Foto kaum sichtbar, auf dem hellen Grund ein grauer
   Kasten mit heller Schrift (auch auf www so, Thomas: „Ich kann mich nicht erinnern, dass mir das an einer anderen Website schon mal aufgefallen ist.“).
   Darum bis zum Vorhang der GANZE Kopfblock (.bloc-fill-screen: Titel, Kasten, Bild) unsichtbar – es bleibt die helle Fläche (body = rgb(250,250,248) = Vorhang).
   Kopfzeile (Logo/MENU, bloc-0-…) ist kein .bloc-fill-screen und erscheint wie bisher. Zwei getrennte Regeln (keine Liste: ein Browser ohne :has würde sonst
   beide verwerfen): 1. :has() wie oben; 2. Klasse gm-curtain-wait, die das Kopf-Skript (HERO-Block) am Handy setzt und entfernt, sobald der Vorhang im DOM ist
   (ok(); Rückfall DOMContentLoaded) – greift auch ohne :has (iOS < 15.4). Desktop ≥ 992 px: Titel dort ohnehin opacity 0 bis gm-hero-ready, keine Änderung. */
@media (max-width: 991px) { .gm:not(:has(#page-transition-anim)) .page-container > .bloc-fill-screen { visibility: hidden; } }
@media (max-width: 991px) { .gm.gm-curtain-wait .page-container > .bloc-fill-screen { visibility: hidden; } }

/* ---------- weicher Seitenwechsel (Chrome, Safari 18.2+): Kopfzeile + Seitenleiste stehen still ---------- */
@view-transition { navigation: auto; }
.gm-topbar { view-transition-name: gm-top; }
@media (min-width: 992px) { .gm #bloc-1 { view-transition-name: gm-side; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
::view-transition-group(gm-top), ::view-transition-group(gm-side) { animation: none; }
::view-transition-old(gm-top), ::view-transition-old(gm-side) { display: none; }
::view-transition-new(gm-top), ::view-transition-new(gm-side) { animation: none; }

/* ---------- Verfügbarkeitsfeld (Buchungsleiste der Ubud-Villen): Raleway Regular statt Light/ExtraLight (Thomas: „die schrift da drin ist einfach zu schwach“) ---------- */
.bp-avail :is(select, option, .bp-avail-hint, small),
.bp-avail label ~ * span:not(.bp-avail-book), .bp-avail button:not(.bp-avail-book) span,
.bp-avail-hint, .bp-avail-hint span, .bp-avail-price, .bp-avail-price small { font-family: "RalewayThin-Regular", Raleway, sans-serif !important; font-weight: 400 !important; }

/* The Villas, Karten (01.10.2026, Thomas: „beim letzten stimmt der abstand bei der schrift nicht - 2br/2ba/4guests“): die Ausstattungszeile bricht auf dem
   Handy um – Blocs-Zeilenabstand 1.8em machte eine große Lücke, und der Villenname klebte direkt darunter. Nur bis 991 px, Desktop unverändert. */
@media (max-width: 991px) {
  p.title-h3:has(+ .title-h2-the-villas-header-villas) { line-height: 1.3; margin-bottom: .55em !important; }
}

/* ---------- HANDY-MENÜ (< 992 px, 01.10.2026, Muster https://claude.ai/artifact/MFjGVrgUyhE7JFv2t2pKSo, Vorbild Otello) ----------
   Thomas: zwei Bereiche (oben Satu-Grün: Logo, Seiten, Book Ubud / Book Seminyak mit feiner Linie; unten Papier: die 5 Villen als breite Bildkacheln,
   Ubud Team + Scooter als kleine Knöpfe unter den Ubud-Villen, Social ganz unten), Schrift Jost (NIE Serif im Menü), „≡ MENU“ mit zartem Symbol,
   gleitet von links herein. Grün #457C57 = Satu #4E8A62 einen Hauch dunkler (weiße Schrift 4,9:1). Inhalt per einbauen.mjs, Öffnen/Schließen per site-menu.js. */
@font-face { font-family: "Jost"; src: url("/fonts/Jost/jost-latin-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
.gm-mbtn, .gm-m { display: none; }
@media (max-width: 991.98px) {
  /* Blocs-Kopfzeile: Logo-Spalte col-10 + schmale Symbol-Spalte → „MENU“ brach unter das Logo. Logo nimmt den Rest, Knopf so breit wie nötig, eine Zeile. */
  .gm .row:has(> .col > .gm-mbtn) { flex-wrap: nowrap; min-height: 58px; align-items: center; }  /* Thomas: Leiste „etwas zu schmal“ (48 px; vorher mit dickem Symbol 57 px) */
  .gm .row:has(> .col > .gm-mbtn) > .col-10 { flex: 1 1 auto; width: auto; min-width: 0; }
  .gm .col:has(> .gm-mbtn) { flex: 0 0 auto; width: auto; display: flex; justify-content: flex-end; }
  .gm .gm-mbtn { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer; padding: 10px 2px 10px 10px; margin-left: auto;
    color: #3c3a34; font: 400 13.5px/1 "Jost", "Helvetica Neue", Arial, sans-serif; letter-spacing: .2em; -webkit-tap-highlight-color: transparent; }  /* Thomas: „schrift zu klein“ (war 11 px) */
  .gm .gm-mbtn i { width: 23px; height: 10px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; position: relative; }
  .gm .gm-mbtn i::after { content: ""; position: absolute; left: 0; top: 4px; width: 15px; border-top: 1px solid currentColor; }
  .gm .gm-m { display: block; position: fixed; inset: 0; z-index: 1000000; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    background: #fafaf8; color: #3c3a34; font-family: "Jost", "Helvetica Neue", Arial, sans-serif; visibility: hidden;
    transform: translateX(-100%); transition: transform .6s cubic-bezier(.65,0,.25,1), visibility 0s linear .6s; }
  .gm .gm-m.is-open { transform: none; visibility: visible; transition: transform .6s cubic-bezier(.65,0,.25,1), visibility 0s; }
  html.gm-m-lock, html.gm-m-lock body { overflow: hidden !important; }
  .gm-m a { text-decoration: none !important; }
  .gm-m-in { max-width: 560px; margin: 0 auto; }
  .gm-m-top { background: #457c57; color: #fff; }
  .gm-m-top .gm-m-in { padding: 18px 26px 30px; display: grid; gap: 26px; }
  .gm-m-head { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
  .gm-m-head img { width: 168px; height: auto; filter: brightness(0) invert(1); display: block; }
  .gm-m-close { width: 38px; height: 38px; border-radius: 9px; border: 1px solid rgba(255,255,255,.62); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
  .gm-m-close svg { width: 13px; height: 13px; } .gm-m-close path { stroke: currentColor; stroke-width: 1.2; fill: none; }
  .gm-m-pages { display: grid; gap: 4px; }
  .gm-m-pages a { color: rgba(255,255,255,.82) !important; font: 300 23px/1.5 "Jost", "Helvetica Neue", Arial, sans-serif; justify-self: start; }
  .gm-m-pages a.is-here { color: #fff !important; font-weight: 400; }
  .gm-m-books { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .gm-m-books a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border: 1px solid rgba(255,255,255,.62); border-radius: 10px;
    color: #fff !important; font: 400 14px "Jost", "Helvetica Neue", Arial, sans-serif; letter-spacing: .02em; white-space: nowrap; }
  .gm-m-low .gm-m-in { padding: 26px 22px 34px; display: grid; gap: 12px; }
  .gm-m-cap { font: 500 10.5px "Jost", "Helvetica Neue", Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #8a857b; padding-left: 2px; }
  .gm-m-tile { position: relative; display: grid; place-content: center; text-align: center; height: 112px; border-radius: 11px; overflow: hidden; color: #fff !important; background: #8d9a83; }
  .gm-m-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .gm-m-tile::before { content: ""; position: absolute; inset: 0; background: rgba(28,26,22,.38); z-index: 1; }
  .gm-m-tile b, .gm-m-tile small { position: relative; z-index: 2; }
  .gm-m-tile b { font: 400 21px "Jost", "Helvetica Neue", Arial, sans-serif; letter-spacing: .01em; } .gm-m-tile small { font: 300 13px "Jost", "Helvetica Neue", Arial, sans-serif; margin-top: 2px; }
  .gm-m-tile.is-here { box-shadow: 0 0 0 2px #457c57; }
  .gm-m-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 2px 0 10px; }
  .gm-m-chips a { display: flex; align-items: center; justify-content: center; gap: 7px; height: 42px; border: 1px solid #cfc8bb; border-radius: 10px; color: #3c3a34 !important;
    font: 400 14px "Jost", "Helvetica Neue", Arial, sans-serif; white-space: nowrap; }
  .gm-m-chips a span { color: #457c57; }
  .gm-m-soc { display: flex; justify-content: center; gap: 34px; padding: 22px 0 4px; }
  .gm-m-soc a { display: grid; justify-items: center; gap: 5px; color: #457c57 !important; font: 300 12.5px "Jost", "Helvetica Neue", Arial, sans-serif; }
  .gm-m-soc a span { color: #8a857b; }
  .gm-m-soc svg { width: 22px; height: 22px; } .gm-m-soc svg * { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; } .gm-m-soc svg .dot { fill: currentColor; }
  .gm-m :focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .gm-m-low :focus-visible { outline-color: #457c57; }
  .gm-m.is-open .gm-m-top .gm-m-in > *, .gm-m.is-open .gm-m-low .gm-m-in > * { animation: gm-m-in .5s ease both; }
  .gm-m.is-open .gm-m-top .gm-m-in > :nth-child(2) { animation-delay: .25s } .gm-m.is-open .gm-m-top .gm-m-in > :nth-child(3) { animation-delay: .32s }
  .gm-m.is-open .gm-m-low .gm-m-in > * { animation-delay: .4s }
}
@keyframes gm-m-in { from { opacity: 0; transform: translateX(-10px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .gm .gm-m, .gm .gm-m.is-open { transition: none; } .gm-m.is-open .gm-m-in > * { animation: none !important; } }

/* ---------- Sprachwahl Desktop (3.10.2026, ersetzt die zwei Kreise vom 2.10.): wie am Handy Flagge + Kürzel + Pfeil, Klappliste, LINKS neben Social
   (Thomas: „die sprache bitte links von social media“, „auf diesen breakpoints schon auch das sprachkürzel neben der flagge, so wie auf mobile“).
   Baut notes/tools/uebersetzung/www-sprache/bauen.mjs nur in Seiten mit mehreren Sprachen ein; Öffnen: site-menu.js Teil 7. book.bali.place gleich (app/site-menu.css). */
.gm-dl { display: none; }
@media (min-width: 992px) {
  .gm .gm-dl { display: block; position: relative; flex: none; }
  .gm .gm-dl-t { appearance: none; margin: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 12px; border: 1px solid #e2ddd2;
    border-radius: 10px; background: #fff; color: #3c3a34; font: 700 12.5px/1 "RalewayThin-ExtraLight", Raleway, sans-serif; letter-spacing: .08em; transition: border-color .2s; }
  .gm .gm-dl-t:hover, .gm .gm-dl.is-open .gm-dl-t { border-color: #cfc8bb; }
  .gm .gm-dl .sm-lang-circle { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1px solid #e2ddd2; display: grid; place-items: center; box-sizing: border-box; flex: none; }
  .gm .gm-dl .sm-flag { width: 62%; height: auto; aspect-ratio: 3 / 2; border-radius: 2px; display: block; box-shadow: 0 0 0 .5px rgba(0,0,0,.12); }
  .gm .gm-dl .gm-hl-chev { width: 8px; height: 5px; transition: transform .25s ease; } .gm .gm-dl .gm-hl-chev path { fill: none; stroke: currentColor; stroke-width: 1; }
  .gm .gm-dl.is-open .gm-hl-chev { transform: rotate(180deg); }
  .gm .gm-dl .gm-hl-dd { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; min-width: 190px; box-sizing: border-box; display: grid; gap: 2px; padding: 6px;
    background: #fff; border: 1px solid #e2ddd2; border-radius: 10px; box-shadow: 0 12px 30px rgba(60,58,52,.12);
    opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s, transform .2s, visibility 0s linear .2s; }
  .gm .gm-dl.is-open .gm-hl-dd { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s, visibility 0s; }
  .gm .gm-dl .gm-hl-dd a { display: flex; align-items: center; gap: 11px; height: 42px; padding: 0 10px; border-radius: 7px; color: #3c3a34 !important; text-decoration: none !important;
    font: 700 14px/1 "RalewayThin-ExtraLight", Raleway, sans-serif; letter-spacing: .02em; white-space: nowrap; }
  .gm .gm-dl .gm-hl-dd a:hover { background: #fafaf8; }
  .gm .gm-dl .gm-hl-dd a .sm-lang-code { margin-left: auto; font-size: 11.5px; letter-spacing: .1em; color: #8a857b; }
  .gm .gm-dl .gm-hl-dd a.on { color: #da4141 !important; } .gm .gm-dl .gm-hl-dd a.on .sm-lang-circle { border: 1.5px solid #da4141; }
  .gm .gm-dl-t:focus-visible, .gm .gm-dl .gm-hl-dd a:focus-visible { outline: 2px solid #457c57; outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) { .gm .gm-dl .gm-hl-dd, .gm .gm-dl .gm-hl-chev { transition: none; } }
/* Sprachwahl im Handy-Menü entfernt (3.10.2026, Thomas: „weg, nur noch oben“) → Sprachwahl in der Handy-Kopfzeile, siehe unten. */

/* ---------- HANDY-KOPFZEILE (< 992 px, 3.10.2026, Entwurf https://claude.ai/artifact/2agJSeoue54DHX9Fhdc4TB) ----------
   Thomas: „menu und der hamburger in mobile ist immer noch zu klein. er muss gleich gross werden wie das logo. aber ich möchte unbedingt die zarte schrift als
   auch die zarten hamburger buttons behalten.“ → Größe M: Symbol 30×13 (Linien bleiben 1 px), MENU 17 px Jost Light (einen Schnitt leichter als vorher).
   „sprachauswahl … links neben den hamburger … schönen, dezenten form … zum klappen“ → .gm-hl (baut notes/tools/uebersetzung/www-sprache/bauen.mjs nur
   in Seiten mit mehreren Sprachen ein): aktuelle Sprache, Tipp öffnet die Liste, feiner Strich zu MENU. „am liebsten c, aber nur wenn wir genug platz haben.
   sonst a“: ab 380 px Flagge + Kürzel (C), 360–379 px nur Flagge (A), unter 360 px zusätzlich MENU wieder klein (passt sonst nicht). Öffnen: site-menu.js Teil 7. */
.gm-hl, .gm-hl-sep { display: none; }
@media (max-width: 991.98px) {
  .gm .col:has(> .gm-mbtn) { align-items: center; gap: 10px; }
  .gm .gm-mbtn { font: 300 17px/1 "Jost", "Helvetica Neue", Arial, sans-serif; letter-spacing: .2em; gap: 12px; }
  .gm .gm-mbtn i { width: 30px; height: 13px; }
  .gm .gm-mbtn i::after { top: 5px; width: 20px; }
  .gm .gm-hl { display: block; position: relative; flex: none; }
  .gm .gm-hl-sep { display: block; width: 1px; height: 20px; background: #e2ddd2; flex: none; }
  .gm .gm-hl-t { appearance: none; border: 0; background: none; margin: 0; padding: 8px 2px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
    color: #3c3a34; font: 300 15px/1 "Jost", "Helvetica Neue", Arial, sans-serif; letter-spacing: .14em; -webkit-tap-highlight-color: transparent; }
  .gm .gm-hl .sm-lang-circle { width: 21px; height: 21px; border-radius: 50%; background: #fff; border: 1px solid #e2ddd2; display: grid; place-items: center; box-sizing: border-box; flex: none; }
  .gm .gm-hl .sm-flag { width: 62%; height: auto; aspect-ratio: 3 / 2; border-radius: 1.5px; display: block; box-shadow: 0 0 0 .5px rgba(0,0,0,.12); }
  .gm .gm-hl-chev { width: 8px; height: 5px; transition: transform .25s ease; }
  .gm .gm-hl-chev path { fill: none; stroke: currentColor; stroke-width: 1; }
  .gm .gm-hl.is-open .gm-hl-chev { transform: rotate(180deg); }
  .gm .gm-hl-dd { position: absolute; right: -8px; top: calc(100% + 8px); z-index: 1000; min-width: 180px; box-sizing: border-box; display: grid; gap: 2px; padding: 6px;
    background: #fff; border: 1px solid #e2ddd2; border-radius: 10px; box-shadow: 0 12px 30px rgba(60,58,52,.12);
    opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .2s, transform .2s, visibility 0s linear .2s; }
  .gm .gm-hl.is-open .gm-hl-dd { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s, visibility 0s; }
  .gm .gm-hl-dd a { display: flex; align-items: center; gap: 11px; height: 44px; padding: 0 10px; border-radius: 7px; color: #3c3a34 !important; text-decoration: none !important;
    font: 300 15px/1 "Jost", "Helvetica Neue", Arial, sans-serif; }
  .gm .gm-hl-dd a:hover { background: #fafaf8; }
  .gm .gm-hl-dd a .sm-lang-code { margin-left: auto; font-size: 11.5px; letter-spacing: .14em; color: #8a857b; }
  .gm .gm-hl-dd a.on { color: #da4141 !important; }
  .gm .gm-hl-dd a.on .sm-lang-circle { border: 1.5px solid #da4141; }
  .gm .gm-hl-t:focus-visible, .gm .gm-hl-dd a:focus-visible { outline: 2px solid #457c57; outline-offset: 2px; }
}
@media (max-width: 379.98px) { .gm .gm-hl-t > .sm-lang-code { display: none; } }
@media (max-width: 359.98px) {
  .gm .gm-mbtn { font: 400 13.5px/1 "Jost", "Helvetica Neue", Arial, sans-serif; gap: 10px; }
  .gm .gm-mbtn i { width: 23px; height: 10px; } .gm .gm-mbtn i::after { top: 4px; width: 15px; }
}
@media (prefers-reduced-motion: reduce) { .gm .gm-hl-dd, .gm .gm-hl-chev { transition: none; } }

/* ---------- Knopf „nach oben“ (alle Breiten, 3.10.2026, Wahl „1 · zarter Kreis“) ----------
   Ersetzt das grüne Blocs-Quadrat (Markup: einbauen.mjs, Klasse scrollToTop bleibt für Blocs' Ein-/Ausblenden; Hochscrollen: site-menu.js Teil 6). */
.gm .scrollToTop.gm-top { width: 46px; height: 46px; padding: 0; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 1px solid #cfc8bb; background: rgba(250,250,248,.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(60,58,52,.10); color: #3c3a34; transition: opacity .3s ease, border-color .2s, color .2s; -webkit-tap-highlight-color: transparent; }
.gm .scrollToTop.gm-top svg { width: 16px; height: 18px; display: block; }
.gm .scrollToTop.gm-top path { fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .gm .scrollToTop.gm-top:hover { border-color: #da4141; color: #da4141; } }
.gm .scrollToTop.gm-top:focus-visible { outline: 2px solid #457c57; outline-offset: 2px; }