/* Aquarelier: Grundlagen. Atelier-Welt: cremiges Aquarellpapier, Tinte in Payne's Grau. */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-kursiv.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Papier */
  --papier: #F2ECE1;
  --papier-tief: #E9E1D3;
  --papier-hell: #F8F4EC;
  --papier-rand: #DDD3C3;
  /* Tinte: Payne's Grau, das Schwarz der Aquarellmaler */
  --tinte: #262B33;
  --tinte-2: #3A404A;
  --tinte-weich: #5D626B;
  --linie: #D5CBBA;
  /* Atelier bei Nacht */
  --nacht: #22262D;
  --nacht-2: #2C3139;
  --auf-nacht: #F2ECE1;
  --auf-nacht-weich: #B7B1A6;

  /* Schrift */
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --t-klein: 15px;
  --t-text: 18px;
  --t-lead: clamp(19px, 1.4vw, 22px);
  --t-h3: clamp(24px, 2vw, 30px);
  --t-h2: clamp(40px, 4.6vw, 72px);
  --t-h1: clamp(56px, 7vw, 124px);

  /* Abstände (4er-Raster) */
  --a-1: 4px; --a-2: 8px; --a-3: 12px; --a-4: 16px; --a-5: 20px; --a-6: 24px; --a-7: 32px;
  --a-8: 40px; --a-9: 56px; --a-10: 80px; --a-11: 120px;
  --rand: clamp(20px, 5.5vw, 88px);
  --abschnitt: clamp(96px, 12vw, 180px);

  /* Formen: Knöpfe sind Pillen, Papier und Karten fast eckig */
  --r-karte: 4px;
  --r-wand: clamp(16px, 2.2vw, 28px);

  /* Bewegung */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Tiefe, getönt in Tinte statt Schwarz */
  --schatten-1: 0 1px 2px rgba(38, 43, 51, .08), 0 6px 16px -8px rgba(38, 43, 51, .22);
  --schatten-2: 0 2px 4px rgba(38, 43, 51, .08), 0 22px 44px -22px rgba(38, 43, 51, .38);
  --schatten-3: 0 3px 6px rgba(38, 43, 51, .1), 0 40px 70px -30px rgba(38, 43, 51, .5);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { overflow-x: hidden; overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; }
body {
  margin: 0;
  overflow-x: hidden; overflow-x: clip;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: var(--t-text);
  font-weight: 400;
  line-height: 1.62;
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--tinte); color: var(--papier); }
input, textarea { caret-color: var(--tinte); }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 4px; border-radius: 4px; }
.nacht :focus-visible { outline-color: var(--auf-nacht); }
html { scrollbar-color: var(--tinte-weich) var(--papier-tief); }

.nur-lesen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sprung { position: fixed; left: 16px; top: -80px; z-index: 100; background: var(--tinte); color: var(--papier); padding: 12px 18px; border-radius: 999px; }
.sprung:focus { transform: translateY(100px); }

/* ---------- Typografie ---------- */
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 340; letter-spacing: -0.022em; line-height: 1.02; text-wrap: balance; font-optical-sizing: auto; }
h1 { font-size: var(--t-h1); font-weight: 300; letter-spacing: -0.03em; line-height: .98; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 420; letter-spacing: -0.01em; line-height: 1.15; }
p { margin: 0; text-wrap: pretty; }
.lead { font-size: var(--t-lead); line-height: 1.55; max-width: 40ch; color: var(--tinte-weich); }
.klein { font-size: var(--t-klein); line-height: 1.5; }
.leise { color: var(--tinte-weich); }
.nacht { background: var(--nacht); color: var(--auf-nacht); }
.nacht .leise, .nacht .lead { color: var(--auf-nacht-weich); }
.ziffern { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Knöpfe ---------- */
/* Jeder Knopf bekommt beim Überfahren einen feinen, leuchtenden Goldring mit etwas Abstand, auf hellem wie auf
   dunklem Grund. Farbe und Schrift bleiben; der Ring liegt in ::before und öffnet sich sanft nach außen. */
.knopf {
  --glanz: 205, 160, 80;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 10px 28px;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--tinte); color: var(--papier);
  font-family: var(--sans); font-size: 16px; font-weight: 560; letter-spacing: .01em; white-space: nowrap;
  box-shadow: 0 1px 1px rgba(38, 43, 51, .2), 0 10px 22px -12px rgba(38, 43, 51, .55);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), border-color 200ms ease, color 200ms ease;
}
.knopf::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity 220ms ease, inset 280ms var(--ease-out);
  box-shadow: 0 0 0 1.5px rgba(var(--glanz), .95), 0 0 10px 1px rgba(var(--glanz), .45), 0 0 24px 2px rgba(var(--glanz), .16);
}
.nacht .knopf, .kopf.dunkel .knopf { --glanz: 226, 197, 151; }
.knopf:active { transform: scale(0.97); }
.knopf:active::before, .knopf:focus-visible::before { opacity: 1; inset: -5px; }
.knopf--linie { background: transparent; color: var(--tinte); border-color: rgba(38, 43, 51, .35); box-shadow: none; }
.knopf--hell { background: var(--papier); color: var(--tinte); }
.nacht .knopf--linie { color: var(--auf-nacht); border-color: rgba(242, 236, 225, .4); }
.knopf--leuchten { background: transparent; color: var(--auf-nacht); border-color: rgba(242, 236, 225, .5); box-shadow: none; }
.knopf--leuchten::after, .knopf--pfeil::after { content: "\2192"; transition: transform 200ms var(--ease-out); }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.knopf[disabled]::before, .knopf[aria-disabled="true"]::before { display: none; }
.knopf .knopf-ring { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: dreh 700ms linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }
@media (hover: hover) and (pointer: fine) {
  .knopf:not([disabled]):not([aria-disabled="true"]):hover::before { opacity: 1; inset: -5px; }
  .knopf--leuchten:hover::after, .knopf--pfeil:hover::after { transform: translateX(4px); }
}

/* ---------- Kopfzeile ---------- */
.kopf {
  position: fixed; z-index: 50; left: 0; right: 0; top: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 78px; padding: 0 var(--rand);
  color: var(--tinte);
  transition: background-color 300ms ease, box-shadow 300ms ease, color 300ms ease;
}
.kopf.dunkel { color: var(--auf-nacht); }
.kopf.dunkel .marke { color: var(--auf-nacht); }
.kopf.dunkel a.leise-link { color: var(--auf-nacht-weich); }
.kopf.dunkel .knopf { background: var(--papier); color: var(--tinte); }
.kopf.bewegt.dunkel { background: rgba(34, 38, 45, .72); box-shadow: 0 1px 0 rgba(242, 236, 225, .06); }
.kopf.bewegt { background: rgba(242, 236, 225, .78); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); box-shadow: 0 1px 0 rgba(38, 43, 51, .08); }
.kopf-links { display: flex; align-items: center; gap: 4px; }
.kopf-rechts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.kopf a.leise-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--tinte-weich); transition: color 160ms ease, background-color 160ms ease; }
.kopf .knopf { min-height: 46px; padding: 8px 22px; font-size: 15px; }
a.marke { display: inline-flex; align-items: center; min-height: 44px; }
.marke { font-family: var(--serif); font-size: 30px; font-weight: 380; letter-spacing: .005em; line-height: 1; color: var(--tinte); }
.kopf a.leise-link[aria-current="page"] { color: var(--tinte); }
.kopf.dunkel a.leise-link[aria-current="page"] { color: var(--auf-nacht); }
@media (hover: hover) and (pointer: fine) {
  .kopf a.leise-link:hover { color: var(--tinte); background: rgba(38, 43, 51, .05); }
  .kopf.dunkel a.leise-link:hover { color: var(--auf-nacht); background: rgba(242, 236, 225, .1); }
}
@media (max-width: 960px) { .kopf { grid-template-columns: auto 1fr; } .kopf-links { display: none; } .kopf .marke { justify-self: start; } .kopf .kopf-rechts a.leise-link { display: none; } }
@media (max-width: 420px) { .marke { font-size: 25px; } .kopf .knopf { padding: 8px 16px; } }

/* ---------- Bildfläche für kommende Higgsfield-Bilder ---------- */
.flaeche {
  position: relative; display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%),
    var(--papier-tief);
  color: var(--tinte-weich);
}
.flaeche > span { font-size: 13px; font-weight: 500; letter-spacing: .02em; text-align: center; padding: 0 16px; opacity: .8; }
.nacht .passepartout .flaeche { background: radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%), var(--papier-tief); color: var(--tinte-weich); }
.nacht .flaeche:not(.passepartout .flaeche) { background: radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 60%), var(--nacht-2); color: var(--auf-nacht-weich); }

/* ---------- Rahmen und Passepartout ---------- */
.rahmen {
  --rahmen-farbe: #C8A676; --rahmen-kante: #A68354;
  position: relative; margin: 0;
  padding: clamp(9px, 1vw, 15px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--rahmen-farbe) 85%, #fff) 0%, var(--rahmen-farbe) 45%, var(--rahmen-kante) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), inset 2px 2px 0 rgba(255, 255, 255, .22), var(--schatten-3);
}
.rahmen--eiche { --rahmen-farbe: #C8A676; --rahmen-kante: #A68354; }
.rahmen--schwarz { --rahmen-farbe: #2B2E33; --rahmen-kante: #15171A; }
.rahmen--weiss { --rahmen-farbe: #F6F4EF; --rahmen-kante: #D8D6D0; }
.rahmen--ohne { padding: 0; background: none; box-shadow: var(--schatten-2); }
.rahmen--ohne .passepartout { padding: 0; }
.passepartout { position: relative; container-type: inline-size; background: #FBF9F4; padding: 8% 8% 12%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05), inset 3px 3px 7px rgba(0, 0, 0, .1); }
.passepartout .flaeche, .passepartout img { width: 100%; aspect-ratio: var(--bild-format, 3 / 2); }
.passepartout img { display: block; height: auto; object-fit: cover; }
/* Der Titel sitzt im unteren Rand des Passepartouts; der Abstand hängt an der Breite, damit er auch bei Hochformat nicht ins Bild rutscht */
.bildtitel { position: absolute; left: 0; right: 0; bottom: 3.4cqi; line-height: 1.2; padding: 0 6%; white-space: nowrap; text-align: center; font-family: var(--serif); font-style: italic; font-size: clamp(12px, 1.05vw, 17px); color: #5A5E66; letter-spacing: .01em; }

/* ---------- Textverweis mit Pfeil (ohne Unterstrich) ---------- */
.pfeil-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; font-weight: 560; letter-spacing: .01em; color: inherit; }
.pfeil-link::after { content: "\2192"; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .pfeil-link:hover::after { transform: translateX(4px); } }

/* ---------- Felder ---------- */
.feld { display: grid; gap: 8px; }
.feld label { font-size: var(--t-klein); font-weight: 560; color: var(--tinte); }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 56px; padding: 0 18px; border-radius: var(--r-karte);
  border: 1px solid #938772; background: var(--papier-hell); color: var(--tinte);
  font-size: 17px; transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.feld textarea { padding: 14px 18px; min-height: 120px; resize: vertical; line-height: 1.5; }
.feld input::placeholder, .feld textarea::placeholder { color: #7D8088; }
.feld input:hover, .feld textarea:hover { border-color: #7F7461; }
.feld input:focus, .feld textarea:focus, .feld select:focus { outline: none; border-color: var(--tinte); background: #FFFDF8; box-shadow: 0 0 0 3px rgba(38, 43, 51, .1); }
.feld .hilfe { font-size: 14px; color: var(--tinte-weich); }
.feld .fehler { font-size: 14px; color: #8E2B35; }

/* ---------- Fußzeile ---------- */
.fuss { background: var(--nacht); color: var(--auf-nacht); padding: var(--a-10) var(--rand) var(--a-8); }
.fuss-innen { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--a-8); }
.fuss .marke { font-size: 44px; color: var(--auf-nacht); }
.fuss p { color: var(--auf-nacht-weich); margin-top: var(--a-3); }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; align-content: start; }
.fuss li a { display: inline-flex; min-height: 44px; align-items: center; color: var(--auf-nacht-weich); transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .fuss li a:hover { color: var(--auf-nacht); } }
.fuss-unten { max-width: 1240px; margin: var(--a-9) auto 0; padding-top: var(--a-5); border-top: 1px solid rgba(183, 177, 166, .2); display: flex; justify-content: space-between; gap: var(--a-4); flex-wrap: wrap; font-size: var(--t-klein); color: var(--auf-nacht-weich); }
@media (max-width: 760px) { .fuss-innen { grid-template-columns: 1fr 1fr; } .fuss-innen > :first-child { grid-column: 1 / -1; } }

/* ---------- Papierstruktur über allem ---------- */
.papierkorn {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .25 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Weiches Einblenden ---------- */
.js [data-ein] { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: var(--verz, 0ms); }
.js [data-ein].da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .js [data-ein] { opacity: 1; transform: none; }
}
body.pause *, body.pause *::before, body.pause *::after { animation-play-state: paused !important; }

/* Kopfzeile nur mit Wortmarke (Danke, 404) */
.kopf--mitte { grid-template-columns: 1fr auto 1fr; }
.kopf--mitte .marke { justify-self: center; }

/* Kleine Fußzeile: Rechtliches mit Abstand statt Mittelpunkten, Tippflächen 44 px */
.fuss-links { display: flex; flex-wrap: wrap; column-gap: 22px; }
.fuss-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--auf-nacht-weich); transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .fuss-links a:hover { color: var(--auf-nacht); } }

/* Nur mit Maus sinnvoll (z. B. Hineinziehen) */
.nur-maus { display: none; }
@media (hover: hover) and (pointer: fine) { .nur-maus { display: inline; } }

/* Reduzierte Bewegung: Einblenden bleibt als ruhige Überblendung, ohne Weg */
@media (prefers-reduced-motion: reduce) {
  .js [data-ein] { transform: none !important; transition: opacity 280ms ease !important; }
}
.fuss--klein .fuss-unten { align-items: center; }

/* ---------- Wand als Foto: Wohnzimmer mit Sofa oder Flur mit Sideboard ----------
   Beide Fotos sind quadratisch und zeigen dasselbe Haus (Higgsfield, 29.09.2026). Das Foto wird ganz gezeigt,
   der Rahmen hängt darüber mit seiner Mitte auf fester Höhe und wächst von der Mitte aus (Skript: scale, hier: translate).
   Alle Maße in Prozent der Fotobreite, gemessen an Lichtschalter, Tür und Sofalehne:
   Wohnzimmer (wand-wohnzimmer): 2,88 px je cm bei 1024 px, Boden an der Wand bei 61 %, Sofa 240 cm breit.
     Rahmen bei 70 cm = 70 x 2,88 / 1024 = 19,69 %; Bildmitte 140 cm über dem Boden = 21,7 % von oben.
   Flur (wand-flur): 2,8 px je cm, Boden bei 71,1 %, Sideboard 170 cm breit, 96 cm hoch.
     Rahmen bei 70 cm = 19,14 %; Bildmitte 160 cm über dem Boden = 27,3 % von oben.
   Startseite (wand-sideboard): 3,33 px je cm, Boden an der Wand bei 82,8 %, Sideboard 200 cm breit und 75 cm hoch.
     Rahmen bei 70 cm = 22,76 %; Bildmitte 155 cm über dem Boden = 32,4 % von oben (Nico: 145 wirkte zu tief), mittig über dem Sideboard bei 47,7 %.
     Sideboard oben bei 58,1 %, Lampenschirm oben bei 38,9 %, links bei 63,5 %. Reicht ein großes Bild seitlich an die Lampe,
     hängt seite.js es so hoch, dass 10 cm Luft über dem Schirm bleiben (Nico: 100 × 70 hing zu eng an der Lampe).
   --licht zeigt, wohin der Schatten fällt: im Wohnzimmer kommt das Licht vom Fenster rechts, im Flur von der Tür links.
   --moebel-oben ist die Oberkante von Sofalehne (37,5 %) und Sideboard (44,3 %). Kommt ein großes Bild ihr näher
   als 15 cm, schiebt werkstatt.js es nach oben (100 × 70 hochkant über dem Sofa). */
.szene-sofa { --mitte-x: 50%; --mitte-y: 21.7%; --rahmen-70: 19.69%; --licht: -1; --moebel-oben: 37.5%; }
.szene-flur { --mitte-x: 49.8%; --mitte-y: 27.3%; --rahmen-70: 19.14%; --licht: 1; --moebel-oben: 44.3%; }
.szene-sideboard { --mitte-x: 47.7%; --mitte-y: 32.4%; --rahmen-70: 22.76%; --licht: -1; --moebel-oben: 58.1%; --lampe-oben: 38.9%; --lampe-links: 63.5%; }
.wand-foto { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-wand); background: #DCDAD5; pointer-events: none; }
.wand-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.szene-sofa .foto-flur, .szene-flur .foto-sofa { display: none; }
:is(.wand, .bank-wand):has(.wand-foto) { isolation: isolate; }
:is(.wand-bild, .bank-bild) { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1; z-index: 1; }
/* Leiste 2,2 cm breit; Schatten weich zur lichtabgewandten Seite, dicht an der Wand etwas dunkler */
:is(.wand-bild, .bank-bild) .rahmen {
  position: absolute; left: var(--mitte-x); top: var(--mitte-y); width: var(--rahmen-70); padding: calc(var(--rahmen-70) / 70 * 2.2);
  translate: -50% -50%; transform-origin: 50% 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), inset 1px 1px 0 rgba(255, 255, 255, .22),
    calc(var(--licht) * 2px) 3px 3px rgba(40, 34, 28, .26), calc(var(--licht) * 9px) 13px 20px rgba(40, 34, 28, .17);
}
:is(.wand-bild, .bank-bild) .rahmen--ohne { padding: 0; box-shadow: calc(var(--licht) * 2px) 3px 3px rgba(40, 34, 28, .2), calc(var(--licht) * 8px) 11px 18px rgba(40, 34, 28, .13); }

/* ---------- Gutschein als fotografierte Klappkarte ----------
   gutschein-szene.png (3504 × 2336, Aufsicht): Karte links 29,11 %, rechts 81,11 %, oben 25,26 %, unten 78,34 %; Falz bei 55,34 % (50,44 % der Karte).
   Aquarell und Schrift liegen mit Multiplizieren auf dem Papier, dadurch wirken sie gedruckt.
   .gs-rahmen zeigt einen Ausschnitt der Szene in Prozent des Fotos (--x0 bis --x1, --y0 bis --y1). Die Szene wird in Originalgröße
   gesetzt und nicht skaliert, deshalb bleibt die Schrift scharf; Schriftgrößen in cqi der Karte. */
.gs-rahmen { --x0: 0; --x1: 100; --y0: 0; --y1: 100; position: relative; overflow: hidden; aspect-ratio: calc((var(--x1) - var(--x0)) * 3504) / calc((var(--y1) - var(--y0)) * 2336); background: #EFE9DF; }
.gs-szene { position: absolute; margin: 0; aspect-ratio: 3 / 2; width: calc(100% * 100 / (var(--x1) - var(--x0))); left: calc(-100% * var(--x0) / (var(--x1) - var(--x0))); top: calc(-100% * var(--y0) / (var(--y1) - var(--y0))); isolation: isolate; }
.gs-foto { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Lage der aufgeklappten Karte auf dem Foto; die Staffelei neigt sie kaum merklich, das gleicht matrix() aus */
.gs-karte { position: absolute; left: 39.947%; top: 25.514%; width: 34.803%; height: 37.457%; transform-origin: 0 0; transform: matrix(1, 0.00328, -0.00857, 1, 0, 0); container-type: size; display: grid; grid-template-columns: 48.63% 1fr; mix-blend-mode: multiply; color: #23272E; }
.gs-links { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 3cqi; padding: 9cqi 3cqi 5cqi; min-height: 0; }
.gs-links img { width: 100%; height: 100%; object-fit: contain; min-height: 0; filter: brightness(1.05);
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }
.gs-marke { font-family: var(--serif); font-size: 2.2cqi; letter-spacing: .05em; color: #3A404A; line-height: 1; }
.gs-rechts { display: grid; grid-template-rows: auto auto auto 1fr auto auto; align-content: start; padding: 9cqi 5.5cqi 5cqi 5cqi; min-height: 0; overflow: hidden; }
.gs-kopf { font-family: var(--sans); font-size: 1.25cqi; font-weight: 620; letter-spacing: .26em; text-transform: uppercase; color: #5D626B; padding-bottom: 2.2cqi; border-bottom: .12cqi solid rgba(35, 39, 46, .35); }
.gs-fuer { margin-top: 3.4cqi; font-family: var(--serif); font-style: italic; font-size: 2.1cqi; line-height: 1.3; color: #3A404A; }
.gs-titel { margin-top: 1.4cqi; font-family: var(--serif); font-weight: 300; font-size: 4.3cqi; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.gs-gruss { margin-top: 2.6cqi; font-family: var(--serif); font-style: italic; font-size: 1.85cqi; line-height: 1.45; color: #3A404A; overflow-wrap: anywhere; }
.gs-von { margin-top: 2.4cqi; font-family: var(--sans); font-size: 1.5cqi; color: #3A404A; }
.gs-fuss { display: flex; justify-content: space-between; gap: 2cqi; margin-top: 2.6cqi; padding-top: 1.6cqi; border-top: .12cqi solid rgba(35, 39, 46, .25); font-family: var(--sans); font-size: 1.12cqi; letter-spacing: .04em; color: #5D626B; white-space: nowrap; }
.gs-karte [data-k].beispiel { opacity: .5; }