/* Stil der Galerie, eingefasst in .gal (26.09.2026).
   Erzeugt von galerie-bauen.py -- NICHT von Hand aendern.
   Quelle: entwuerfe/galerie-neu/webseite-galerie-v3.html */
.gal{
  --grund:#F3EEE7; --tinte:#3D3733; --titel:#3D3733; --text:#57534B; --neben:#6B635F;
  --kante:#E6DFD4; --linie:#DDD5C9;
  --polster:40px; --gasse:16px; --breite:1440px; --abstand:56px;
  --module:4; --mh:236px;
  --fs-text:18px;
}
@media (max-width:1199px){.gal{--polster:32px;--abstand:44px}}
/* Handy-Seitenrand 16 px: so misst die Liveseite /galerie bei 390 px (Bilder x16, Breite 358).
   Der FUSS hat dort 40 px -- die Website ist an der Stelle selbst uneinheitlich, und der Fuss
   soll nach Michaels Ansage der Startseite folgen. Deshalb bekommt er seinen Rand eigens. */
@media (max-width:809px){.gal{--polster:16px;--abstand:32px;--fs-text:16px}}.gal *, .gal *::before, .gal *::after{box-sizing:border-box}.gal{-webkit-text-size-adjust:100%}.gal{margin:0;background:var(--grund);color:var(--tinte);
  font-family:"Abhaya Libre",'Abhaya Ersatz',Georgia,serif;font-size:var(--fs-text);line-height:1.65em;padding-bottom:88px}.gal img{display:block;width:100%;height:100%;object-fit:cover;background:#E6DFD4}.gal h1, .gal h2{margin:0;font-family:"Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;font-weight:300;color:var(--titel)}.gal p{margin:0}.gal a{color:inherit}.gal .nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.gal main{max-width:var(--breite);margin:0 auto;padding:0 var(--polster)}.gal .auftakt{padding:var(--abstand) 0 0}.gal .satz{padding-top:var(--abstand)}.gal #im-haus{padding-top:var(--gasse)} /* Kopf und erstes Raster sind EIN Raster */

/* ---- Kopf: Kicker und Titel links, Fliesstext rechts ----
   Michael 27.09.2026: "Schreib bei Galerie einfach Ueberschrift ... Und daneben einen
   Fliesstext. Auf der rechten Seite." Titel und Text stehen nebeneinander auf einer
   Oberkante, der Kopf bleibt flach -- er soll keinen halben Bildschirm fressen. */.gal .kopfraster{display:grid;grid-template-columns:repeat(var(--module),minmax(0,1fr));
  gap:var(--gasse);align-items:start;padding-bottom:var(--abstand)}.gal .titelfeld{grid-column:1 / 3;display:flex;flex-direction:column;gap:20px}.gal .kopfraster h1{font-size:clamp(34px,4.6vw,62px);line-height:1.1;letter-spacing:-.015em}.gal .kopfraster h1 span{display:block}.gal .vorspann{grid-column:3 / 5;margin:0;font-size:18px;line-height:1.7;color:var(--neben);
  max-width:34em;align-self:end}
@media (max-width:809px){.gal .titelfeld, .gal .vorspann{grid-column:1 / -1}.gal .vorspann{margin-top:28px;align-self:start}
}

/* ---- Abschnittsmarke ueber jedem Satz ---- */.gal .marke{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  border-top:1px solid var(--linie);padding-top:14px;margin-bottom:24px}
/* Bildnachweis: die Regionsbilder verlangen ihn ausdruecklich (region-sfl/NACHWEIS.json) */.gal .nachweis{margin:16px 0 0;font-family:"DM Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.1em;color:var(--neben)}.gal .etikett{font-family:"DM Mono",ui-monospace,monospace;font-weight:500;font-size:12px;
  line-height:1.2;letter-spacing:.18em;text-transform:uppercase;color:var(--neben);margin:0;
  font-variant-numeric:tabular-nums}

/* ---- Bildraster ---- */.gal .buehne{position:relative;container-type:inline-size;container-name:galerie;width:100%;margin:0 auto}.gal .mosaik{display:grid;grid-template-columns:repeat(var(--module),minmax(0,1fr));
  gap:var(--gasse);grid-auto-rows:var(--mh)}.gal .k{margin:0;position:relative;overflow:hidden;background:#E6DFD4;border-radius:0}.gal .k img{transition:transform .6s cubic-bezier(.16,1,.3,1)}.gal .k:hover img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.gal .k img, .gal .k:hover img{transition:none;transform:none}}
@container galerie (max-width:809px){.gal .mosaik, .gal .linien{--module:2}}.gal .linien{position:absolute;inset:0;pointer-events:none;display:none;z-index:5}.gal .linien{display:block}.gal .linien::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(to right,
    rgba(196,84,60,.12) 0 calc((100% - (var(--module) - 1) * var(--gasse)) / var(--module)),
    transparent calc((100% - (var(--module) - 1) * var(--gasse)) / var(--module))
              calc((100% - (var(--module) - 1) * var(--gasse)) / var(--module) + var(--gasse)))}

/* ---- Kachelstand Web: 4 Module ---- */.gal .mosaik .das-haus-1{grid-area:1/1/5/3}.gal .mosaik .das-haus-2{grid-area:1/3/3/5}.gal .mosaik .das-haus-3{grid-area:3/3/5/5}.gal .mosaik .das-haus-4{grid-area:5/1/7/3}.gal .mosaik .das-haus-5{grid-area:5/3/7/5}.gal .mosaik .das-haus-6{grid-area:7/1/9/5}.gal .mosaik .zimmer-1{grid-area:1/1/3/3}.gal .mosaik .zimmer-2{grid-area:1/3/3/5}.gal .mosaik .zimmer-3{grid-area:3/1/7/3}.gal .mosaik .zimmer-4{grid-area:3/3/5/5}.gal .mosaik .zimmer-5{grid-area:5/3/7/5}.gal .mosaik .zimmer-6{grid-area:7/1/9/3}.gal .mosaik .zimmer-7{grid-area:7/3/9/5}.gal .mosaik .zimmer-8{grid-area:9/1/11/5}.gal .mosaik .wellness-1{grid-area:1/1/5/3}.gal .mosaik .wellness-2{grid-area:1/3/3/5}.gal .mosaik .wellness-3{grid-area:3/3/5/5}.gal .mosaik .wellness-4{grid-area:5/1/7/3}.gal .mosaik .wellness-5{grid-area:5/3/7/5}.gal .mosaik .wellness-6{grid-area:7/1/9/5}.gal .mosaik .stube-1{grid-area:1/1/3/3}.gal .mosaik .stube-2{grid-area:1/3/3/5}.gal .mosaik .stube-3{grid-area:3/1/7/3}.gal .mosaik .stube-4{grid-area:3/3/5/5}.gal .mosaik .stube-5{grid-area:5/3/7/5}.gal .mosaik .stube-6{grid-area:7/1/9/3}.gal .mosaik .stube-7{grid-area:7/3/9/5}.gal .mosaik .stube-8{grid-area:9/1/11/5}.gal .mosaik .vor-der-tuer-1{grid-area:1/1/3/5}.gal .mosaik .vor-der-tuer-2{grid-area:3/1/5/3}.gal .mosaik .vor-der-tuer-3{grid-area:3/3/5/5}.gal .mosaik .vor-der-tuer-4{grid-area:5/1/7/5}.gal .mosaik .vor-der-tuer-5{grid-area:7/1/9/3}.gal .mosaik .vor-der-tuer-6{grid-area:7/3/11/5}.gal .mosaik .vor-der-tuer-7{grid-area:9/1/11/3}.gal .mosaik .vor-der-tuer-8{grid-area:11/1/13/3}.gal .mosaik .vor-der-tuer-9{grid-area:11/3/13/5}.gal .mosaik .vor-der-tuer-10{grid-area:13/1/15/5}

/* ---- Kachelstand Handy: 2 Module, eigener Satz, wieder ohne Rest ---- */
@container galerie (max-width:809px){.gal .mosaik .das-haus-1{grid-area:1/1/4/3}.gal .mosaik .das-haus-2{grid-area:4/1/6/3}.gal .mosaik .das-haus-3{grid-area:6/1/8/2}.gal .mosaik .das-haus-4{grid-area:6/2/8/3}.gal .mosaik .das-haus-5{grid-area:8/1/10/3}.gal .mosaik .das-haus-6{grid-area:10/1/12/3}.gal .mosaik .zimmer-1{grid-area:1/1/3/3}.gal .mosaik .zimmer-2{grid-area:3/1/5/3}.gal .mosaik .zimmer-3{grid-area:5/1/8/3}.gal .mosaik .zimmer-4{grid-area:8/1/10/2}.gal .mosaik .zimmer-5{grid-area:8/2/10/3}.gal .mosaik .zimmer-6{grid-area:10/1/12/3}.gal .mosaik .zimmer-7{grid-area:12/1/14/3}.gal .mosaik .zimmer-8{grid-area:14/1/16/3}.gal .mosaik .wellness-1{grid-area:1/1/4/3}.gal .mosaik .wellness-2{grid-area:4/1/6/3}.gal .mosaik .wellness-3{grid-area:6/1/8/2}.gal .mosaik .wellness-4{grid-area:6/2/8/3}.gal .mosaik .wellness-5{grid-area:8/1/10/3}.gal .mosaik .wellness-6{grid-area:10/1/12/3}.gal .mosaik .stube-1{grid-area:1/1/3/3}.gal .mosaik .stube-2{grid-area:3/1/5/3}.gal .mosaik .stube-3{grid-area:5/1/8/3}.gal .mosaik .stube-4{grid-area:8/1/10/2}.gal .mosaik .stube-5{grid-area:8/2/10/3}.gal .mosaik .stube-6{grid-area:10/1/12/3}.gal .mosaik .stube-7{grid-area:12/1/14/3}.gal .mosaik .stube-8{grid-area:14/1/16/3}.gal .mosaik .vor-der-tuer-1{grid-area:1/1/3/3}.gal .mosaik .vor-der-tuer-2{grid-area:3/1/6/3}.gal .mosaik .vor-der-tuer-3{grid-area:6/1/8/2}.gal .mosaik .vor-der-tuer-4{grid-area:6/2/8/3}.gal .mosaik .vor-der-tuer-5{grid-area:8/1/10/3}.gal .mosaik .vor-der-tuer-6{grid-area:10/1/12/2}.gal .mosaik .vor-der-tuer-7{grid-area:12/1/15/3}.gal .mosaik .vor-der-tuer-8{grid-area:10/2/12/3}.gal .mosaik .vor-der-tuer-9{grid-area:15/1/17/2}.gal .mosaik .vor-der-tuer-10{grid-area:15/2/17/3}
}

/* ================= KOPF UND FUSS DER WEBSEITE =================
   Nachgebaut nach Messung an https://attractive-operators-473003.framer.app/galerie
   am 25.09.2026, 1440 px. NICHT die Landingpage -- die hat eigene Schriften und ein
   eigenes Menue. Gemessene Werte:
     Kopf      position:fixed, Hoehe 110 px, Grund #F3EEE7, KEINE Trennlinie
     Hamburger 40 x 15 px, drei Striche, links bei x = 65
     Wortmarke Oswald 300, 32 px, Laufweite 13,44 px (= 0,42 em), #57534B, zentriert
     DE / EN   Jost, 13,68 px, Laufweite 2,19 px (= 0,16 em), rechts, Rand 65 px
     Menue     Vollflaeche, 6 Eintraege Cormorant Garamond 300, 64,8 px, Versalien,
               Laufweite 0,02 em, Zeilenabstand 79 px, Farbe #4E3E30;
               Ziffern (01)...(06) Jost 12 px, 0,14 em, um 47 px tiefer gesetzt
     Fuss      vier Spalten, Ueberschriften Abhaya Libre 13 px / 0,2 em Versalien,
               Verweise Abhaya Libre 18 px, Zeilenabstand 30 px
   Zwei bewusste Abweichungen, beide begruendet:
     1. Ueberschriften im Fuss stehen live auf #8A857D = 3,2:1 und fallen durch WCAG AA.
        Hier #6B635F = 5,1:1.
     2. Die Sozial-Verweise stehen live in INTER -- einer Schrift, die dieses Projekt
        sonst nirgends benutzt (Regel 24). Hier Jost, die Kleintextschrift der Seite. */.gal .kopf{position:fixed;top:0;left:0;right:0;z-index:60;height:110px;background:var(--grund);
  display:flex;align-items:center;padding:0 65px}.gal{padding-top:110px}.gal .kopf .wortmarke{position:absolute;left:50%;transform:translateX(-50%);
  font-family:Oswald,Impact,sans-serif;font-weight:300;font-size:32px;letter-spacing:.42em;
  text-indent:.42em;text-transform:uppercase;color:#57534B;text-decoration:none;line-height:1.45}.gal .hamburger{position:relative;z-index:2;width:40px;height:15px;padding:0;border:0;background:none;
  cursor:pointer;display:flex;flex-direction:column;justify-content:space-between}.gal .hamburger span{display:block;height:1px;background:#57534B;transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .2s ease}.gal .hamburger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}.gal .hamburger[aria-expanded=true] span:nth-child(2){opacity:0}.gal .hamburger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.gal .sprache{margin-left:auto;position:relative;z-index:2;display:flex;align-items:center;gap:6px;
  font-family:Jost,system-ui,sans-serif;font-size:13.68px;letter-spacing:.16em;color:#57534B}.gal .sprache a{text-decoration:none;color:inherit}.gal .sprache a[aria-current]{color:#57534B}.gal .sprache a:not([aria-current]){color:#9a938c}

/* Rolldown-Menue: Vollflaeche unter dem Kopf */
/* Live liegt die Seite hinter dem Menue unscharf durch -- nicht zugedeckt. Deshalb
   Milchglas statt Volldeckung, mit Rueckfall auf Volldeckung, wenn der Gast
   "weniger Transparenz" eingestellt hat (Apple: prefers-reduced-transparency). */.gal .rolldown{position:fixed;inset:0;z-index:50;
  background:rgba(243,238,231,.86);backdrop-filter:blur(24px) saturate(105%);
  -webkit-backdrop-filter:blur(24px) saturate(105%);
  display:grid;grid-template-rows:110px 1fr auto;padding:0 65px 48px;
  opacity:0;visibility:hidden;transition:opacity .35s cubic-bezier(.23,1,.32,1),visibility .35s}.gal .rolldown[data-offen=ja]{opacity:1;visibility:visible}.gal .rolldown ol{grid-row:2;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:15px}.gal .rolldown li a{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:#4E3E30}.gal .rolldown .nr{font-family:Jost,system-ui,sans-serif;font-size:12px;letter-spacing:.14em;
  align-self:flex-end;padding-bottom:14px;color:#4E3E30}.gal .rolldown .wort{font-family:"Cormorant Garamond",'Cormorant Ersatz',Georgia,serif;font-weight:300;
  font-size:clamp(32px,4.5vw,64.8px);line-height:1.22;letter-spacing:.02em;text-transform:uppercase}.gal .rolldown li a:hover .wort{text-decoration:underline;text-underline-offset:10px}.gal .rolldown .fusszeile{grid-row:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:24px}.gal .rolldown .fusszeile a{color:#4E3E30;text-decoration:none;font-family:"Abhaya Libre",'Abhaya Ersatz',Georgia,serif}.gal .rolldown .fusszeile .ort{font-size:13px;letter-spacing:.14em;text-transform:uppercase}.gal .rolldown .fusszeile .mail{font-size:16.9px;letter-spacing:.1em;text-align:center}.gal .rolldown .fusszeile .tel{font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-align:right}
@media (prefers-reduced-motion:reduce){.gal .rolldown, .gal .hamburger span{transition:none}}
@media (prefers-reduced-transparency:reduce){.gal .rolldown{background:var(--grund);backdrop-filter:none;-webkit-backdrop-filter:none}}


/* ---- Fuss aus dem HTML-NACHBAU der Startseite ----
   Michael 26.09.2026: "Ich moechte von der HTML-Webseite den Footer."
   Quelle: entwuerfe/nachbau-home/index.html (Markup) und dessen kopf.css (Regeln).
   NICHT der Framer-Fuss -- der hat eine andere Ordnung, das war mein Fehler zuvor.

   Aufbau: zwei Zeilen zu vier Bloecken.
     Zeile 1  Zimmer | (leere Ueberschrift) | Haus
     Zeile 2  Kontakt | Direkt buchen | Rechtliches
     Spalte 4 eine eigene Huelle ueber BEIDE Zeilen: Info, darunter Folgen.
   Die vierte Spalte ist "auto" breit und rechtsbuendig, damit ihre laengste Zeile
   auf der rechten Bildkante endet (so im Nachbau notiert, Michael 23.09.2026).

   Abstandsstufen wie dort: a1 8, a2 16, a3 24, a4 40, a5 64, a6 128.
   Haltepunkte wie dort: bis 1100 zwei Spalten, bis 809 eine. */.gal .fuss{--a1:8px;--a2:16px;--a3:24px;--a4:40px;--a5:64px;--a6:128px;
  --fusstext:#5C564F;
  /* Der Nachbau fuehrt einen eigenen Satzspiegel: 1435 aussen, Rand 40, also 1355 Inhalt.
     Das Bildraster darueber misst 1440/40. Der Fuss behaelt seinen eigenen Wert, sonst
     sitzen die Spalten 3 px neben dem Original. */
  max-width:1435px;margin:0 auto;
  padding:120px 40px 140px;
  font-family:"Abhaya Libre",'Abhaya Ersatz',Georgia,serif;font-size:14px;line-height:1.7;color:var(--fusstext)}.gal .fuss a{text-decoration:none;color:var(--fusstext)}.gal .fuss a:hover{color:var(--tinte);text-decoration:underline;text-underline-offset:3px}.gal .fussraster{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:var(--a4);text-align:left}.gal .fussblock h2{font-size:13px;line-height:1.6;letter-spacing:.2em;text-transform:uppercase;
  color:#8A857D;font-weight:400;margin:0 0 var(--a1);font-family:"Abhaya Libre",'Abhaya Ersatz',Georgia,serif}.gal .fussblock h2.leer{visibility:hidden}.gal .fussblock ul{list-style:none;margin:0;padding:0}.gal .fussblock li{font-size:14px;line-height:1.7;color:var(--fusstext)}.gal .fussspalte{grid-column:4;grid-row:1 / 3;justify-self:end;
  display:grid;align-content:start;gap:var(--a4);text-align:left}.gal .fuss .zeichen{display:grid;place-items:center;margin-top:var(--a6)}.gal .fuss .zeichen a{display:block;color:var(--tinte)}.gal .fuss .signet{display:block;width:96px;height:auto}.gal .fuss .copy{text-align:center;margin:var(--a4) 0 0;font-size:13px;color:var(--fusstext)}.gal .fuss .cookieknopf{display:block;margin:var(--a3) auto 0;font-size:13px;color:var(--fusstext);
  background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  font-family:"Abhaya Libre",'Abhaya Ersatz',Georgia,serif}
@media (max-width:1100px){.gal .fussraster{grid-template-columns:repeat(2,1fr)}.gal .fussspalte{grid-column:auto;grid-row:auto;justify-self:stretch}
}
@media (max-width:809px){.gal .fussraster{grid-template-columns:1fr;gap:var(--a4)}.gal .fuss{padding:80px 20px 120px}.gal .fuss .signet{width:80px}
}

@media (max-width:809px){.gal .kopf{height:88px;padding:0 var(--polster)}.gal{padding-top:88px}.gal .kopf .wortmarke{font-size:24px}.gal .rolldown{padding:0 var(--polster) 32px;grid-template-rows:88px 1fr auto}.gal .rolldown .fusszeile{grid-template-columns:1fr;text-align:left}.gal .rolldown .fusszeile .mail, .gal .rolldown .fusszeile .tel{text-align:left}
}.gal .nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* --- Namensgleiche Klassen aus lp-stil.css zuruecknehmen (siehe galerie-bauen.py) --- */
.gal .satz{display:block;grid-template-columns:none;gap:0;align-items:initial}
.gal .auftakt{padding-left:0;padding-right:0;align-self:auto;width:auto}