@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');

/* ==========================================================================
   DESIGN-SYSTEM — zentrale Werte. Alles unten im Dokument referenziert nur
   diese Variablen; keine seitenspezifischen Ausnahmen, keine geschätzten
   Zwischenwerte.
   ========================================================================== */
:root{
  /* ---- Farben (6 Werte) ---- */
  --bg:#16161a;              /* Hintergrund, überall gleich */
  --text:#c8c8cc;             /* Fliesstext */
  --text-hell:#f2f2f4;        /* Überschriften und Titel */
  --text-leise:#86868c;       /* Ortsangaben, Labels, Bildunterschriften, Footer */
  --linie:rgba(255,255,255,0.08);   /* Struktur: Bildränder, Trennlinien, Rahmen der Wähler */
  --linie-aktiv:rgba(255,255,255,0.35); /* Unterstreichung klickbarer Titel (Ruhezustand) */
  --linie-aktiv-hover:rgba(255,255,255,0.6); /* dieselbe Unterstreichung, beim Hover aufgehellt */
  --warn:#e0a458;              /* einzige Ausnahme: Hinweisfarbe für fehlende Stripe-Links */

  /* ---- Schriften (2, keine dritte) ---- */
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Instrument Sans',system-ui,sans-serif;

  /* ---- Typografie-Stufen (5) ---- */
  --gross-titel:400 52px/1.2 var(--serif);        /* Seitentitel */
  --werk-titel:400 34px/1.2 var(--serif);         /* Werktitel & Abschnittsüberschriften */
  --fliesstext:400 16px/1.6 var(--sans);          /* Fliesstext */
  --klein:400 13px/1.5 var(--sans);               /* Preise, Wähler, Hinweise */
  --label:400 11px/1.3 var(--sans);               /* gesperrte Versalien */
  --label-letterspacing:.2em;
  --max-zeilenbreite:65ch;

  /* ---- Abstands-Skala — ausschliesslich diese Werte ---- */
  --raum-1:4px;
  --raum-2:8px;
  --raum-3:12px;
  --raum-4:16px;
  --raum-5:24px;
  --raum-6:32px;
  --raum-7:48px;
  --raum-8:64px;
  --raum-9:80px;
  --raum-10:96px;
  --raum-11:128px;

  /* ---- Seitenrand & Breite, überall gleich ---- */
  --rand-desktop:var(--raum-8);   /* 64px */
  --rand-mobile:var(--raum-5);    /* 24px, grosszügig für Handy */
  --inhalt-breite:1400px;

  /* Ein einziger, viewport-bewusster Rhythmus-Wert für die Verkaufsseite:
     Bild und Kaufbereich müssen dort gemeinsam auf einen Bildschirm passen
     (Kernanforderung des Layouts), auch auf kleineren Laptop-Auflösungen
     (z. B. 1366×768). Zentral definiert wie die übrige Skala, nicht pro
     Stelle neu geschätzt — schrumpft auf niedrigen Viewports, deckelt auf
     grossen bei var(--raum-6). */
  --raum-produkt:clamp(8px, 2.6vh, 32px);

  /* ---- Bewegung: zentrale Timing-/Easing-Werte ---- */
  --dauer-schnell:180ms;
  --dauer-mittel:350ms;
  --ease-erscheinen:ease-out;   /* für Erscheinendes (Hover, Fade-in) */
  --ease-wechsel:ease-in-out;   /* für Zustandswechsel (Bildtausch, Lightbox) */
  --transition-schnell:var(--dauer-schnell) var(--ease-erscheinen);
  --transition-mittel:var(--dauer-mittel) var(--ease-wechsel);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:1ms !important;animation-duration:1ms !important}
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:var(--fliesstext)}
img{max-width:100%;display:block}
button{font-family:var(--sans);cursor:pointer}
main{display:block}

/* ---------- das eine Muster für klickbare Elemente ----------
   Feine Unterstreichung in --linie-aktiv, exakt textbreit, erscheint beim
   Hover (Desktop hat Hover, das genügt als Signal). Dauerhaft sichtbar nur
   dort, wo es kein Hover gibt oder wo "aktuelle Seite" markiert wird:
   Motivtitel auf Mobile (siehe Media Query weiter unten) und der aktive
   Navigationspunkt. Einzige weitere Ausnahme: der Kaufbutton (gefüllte
   Fläche) und Elemente, die ein ganzes Element klickbar machen (motif-row,
   thumb, ausfuehrung-option, groesse-option) — dort sitzt das Muster
   gezielt auf dem enthaltenen Titel/Text, nicht auf der ganzen Fläche. */
a{
  color:inherit;
  text-decoration-line:underline;
  text-decoration-color:transparent;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:text-decoration-color var(--transition-schnell), color var(--transition-schnell);
}
a:hover{text-decoration-color:var(--linie-aktiv)}

/* Kein globales opacity:0-auf-<img> mehr: in Kombination mit loading="lazy"
   blieb ein Bild sonst unsichtbar, bis der Browser es tatsächlich lädt (bei
   Bildern ausserhalb des Bildschirms kann das lange dauern) — sichtbar als
   "fehlendes" Bild. Einmalige Bilder (Übersicht, Hero) werden deshalb ganz
   normal angezeigt. Echte Bildwechsel (Verkaufsseite) überblenden über die
   eigene .bild-schicht weiter unten, unabhängig von dieser Regel. */

/* ---------- gemeinsamer Seitenrahmen ---------- */

.rahmen{
  max-width:var(--inhalt-breite);
  margin:0 auto;
  padding-left:var(--rand-desktop);
  padding-right:var(--rand-desktop);
}

/* ---------- header / footer (shared across every page) ---------- */

.site-header{
  padding:var(--raum-produkt) var(--rand-desktop);
  max-width:var(--inhalt-breite);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--linie);
  flex-wrap:wrap;
  gap:var(--raum-4);
}

.site-header .logo{
  font:400 20px/1 var(--serif);
  letter-spacing:.03em;
  color:var(--text-hell);
  text-decoration:none;
}

.site-header nav{display:flex;gap:var(--raum-6);font:var(--klein);flex-wrap:wrap}

.site-header nav a{color:var(--text-leise)}

.site-header nav a[aria-current="page"]{color:var(--text);text-decoration-color:var(--linie-aktiv)}
.site-header nav a[aria-current="page"]:hover{text-decoration-color:var(--linie-aktiv-hover)}

.newsletter{
  padding:var(--raum-9) var(--rand-desktop);
  max-width:var(--inhalt-breite);
  margin:0 auto;
  border-top:1px solid var(--linie);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--raum-8);
  flex-wrap:wrap;
}

.newsletter p{margin:0;max-width:var(--max-zeilenbreite);font:var(--werk-titel);font-size:24px;color:var(--text-hell)}

.newsletter form{display:flex;flex-wrap:wrap;align-items:center;gap:var(--raum-4);flex:1;max-width:460px;min-width:260px}

.newsletter input{
  flex:1;padding:var(--raum-3) 0;background:transparent;border:none;
  border-bottom:1px solid var(--linie);color:var(--text-hell);
  font:var(--fliesstext);font-size:15px;outline:none;
  transition:border-color var(--transition-schnell);
}
.newsletter input:focus{border-color:var(--linie-aktiv-hover)}

.newsletter button{
  padding:var(--raum-3) var(--raum-6);background:transparent;border:1px solid var(--linie-aktiv);
  border-radius:2px;color:var(--text-hell);font:var(--klein);letter-spacing:.06em;
  transition:border-color var(--transition-schnell), background-color var(--transition-schnell);
}
.newsletter button:hover{border-color:var(--linie-aktiv-hover)}

.newsletter-note{flex-basis:100%;font:var(--klein);color:var(--text-leise);margin-top:calc(-1 * var(--raum-2))}

.site-footer{
  padding:var(--raum-7) var(--rand-desktop) var(--raum-6);
  max-width:var(--inhalt-breite);
  margin:0 auto;
  border-top:1px solid var(--linie);
  display:flex;justify-content:space-between;gap:var(--raum-7);flex-wrap:wrap;
}

.site-footer .logo{font:400 20px/1 var(--serif);color:var(--text-hell);text-decoration:none}

.site-footer .footer-cols{display:flex;gap:var(--raum-7);font:var(--klein);line-height:1.9;color:var(--text-leise);flex-wrap:wrap}

.site-footer .footer-cols a{color:var(--text-leise)}

.footer-col{display:flex;flex-direction:column}

.copyright{
  max-width:var(--inhalt-breite);margin:0 auto;
  padding:0 var(--rand-desktop) var(--raum-6);
  font:var(--label);letter-spacing:0;color:var(--text-leise);
}

/* ---------- generic page intro (used on several static pages) ---------- */

.page-intro{padding:var(--raum-10) var(--rand-desktop) var(--raum-6);max-width:var(--inhalt-breite);margin:0 auto}

.page-intro h1{margin:0;font:var(--gross-titel);color:var(--text-hell)}

.page-intro .kicker{
  font:var(--label);letter-spacing:var(--label-letterspacing);text-transform:uppercase;
  color:var(--text-leise);margin-bottom:var(--raum-4);
}

.prose{max-width:var(--max-zeilenbreite);padding:0 var(--rand-desktop) var(--raum-10);margin:0 auto;font:var(--fliesstext);color:var(--text)}

.prose p{margin:0 0 var(--raum-6);max-width:var(--max-zeilenbreite)}

.prose h2{font:var(--werk-titel);font-size:26px;color:var(--text-hell);margin:var(--raum-8) 0 var(--raum-4)}

.stat-row{
  display:grid;grid-template-columns:180px 1fr;gap:var(--raum-6);align-items:baseline;
  margin-bottom:var(--raum-5);
}

.stat-row .stat-num{font:var(--werk-titel);font-size:26px;color:var(--text-hell)}

.stat-row .stat-desc{font:var(--fliesstext);color:var(--text)}

/* ---------- home: hero ----------
   Vollflächiges Bild (100vh / 100dvh), Text im unteren Drittel, sanfter
   Verlauf trägt die Schrift. Funktioniert mit jedem Bildformat, da das Bild
   per object-fit:cover in eine feste Bühne (den Viewport) eingepasst wird. */

.hero{
  position:relative;
  height:100vh;
  height:100dvh;
  width:100%;
  overflow:hidden;
  background:var(--bg);
}

.hero-bild-halter{position:absolute;inset:0}

.hero-bild{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Verlauf: von vollständig transparent bei ~60% der Bildhöhe bis zu einer
   deutlichen, fast deckenden Abdunklung am unteren Rand, wo der Text liegt.
   Funktioniert unabhängig vom jeweiligen Hero-Bild, weil er allein aus
   --bg gemischt ist, nicht aus dem Bildinhalt. */
.hero-verlauf{
  position:absolute;
  left:0;right:0;bottom:0;
  height:40%;
  background:linear-gradient(to top, color-mix(in srgb, var(--bg) 96%, transparent), transparent);
  pointer-events:none;
}

.hero-text{
  position:absolute;
  left:var(--rand-desktop);
  right:var(--rand-desktop);
  bottom:var(--raum-10);
  max-width:640px;
}

/* Trägt hier allein die Zeile, die sonst unter dem Namen stand — deshalb
   etwas grösser als normaler Fliesstext, aber bewusst unterhalb der
   Werktitel-Stufe, damit sie nicht wie eine weitere Überschrift wirkt. */
.hero-text p{margin:0;font:var(--fliesstext);font-size:20px;color:var(--text);max-width:var(--max-zeilenbreite)}

.hero-price{margin:var(--raum-3) 0 0;font:var(--klein);color:var(--text-leise)}

/* ---------- home: motif list (built by js/uebersicht.js) ---------- */

.motif-list{padding:var(--raum-5) var(--rand-desktop) var(--raum-10);max-width:var(--inhalt-breite);margin:0 auto;display:flex;flex-direction:column;gap:var(--raum-11)}

.motif-row{
  display:grid;grid-template-columns:520px 1fr;gap:var(--raum-9);
  align-items:end;justify-items:start;text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}

.motif-row.is-reversed{grid-template-columns:1fr 700px}

.motif-media{
  object-fit:cover;box-sizing:border-box;border:1px solid var(--linie);
  box-shadow:0 0 60px rgba(0,0,0,0.45);
  transition:border-color var(--transition-schnell);
  width:100%;
}

.motif-row .motif-media.is-hoch{height:780px;width:520px}
.motif-media.is-quer{height:467px;width:700px}

.motif-row:hover .motif-media,
.motif-row.is-pressed .motif-media{border-color:var(--linie-aktiv)}

.motif-caption{text-align:left;padding-bottom:var(--raum-1)}

.motif-location{font:var(--label);letter-spacing:var(--label-letterspacing);text-transform:uppercase;color:var(--text-leise)}

/* Desktop: nur bei Hover unterstrichen (Hover ist dort das Signal genug).
   Mobile bekommt in der Media Query weiter unten die dauerhafte Linie, weil
   es dort keinen Hover gibt. */
/* Dauerhaft sichtbar (nicht nur bei Hover) — gleich auf jedem Motiv-Titel,
   Mobile wie Desktop, unabhängig davon ob/wie Hover funktioniert. Hellt bei
   Hover zusätzlich auf. */
.motif-title{
  margin-top:var(--raum-5);
  font:var(--werk-titel);
  color:var(--text-hell);
  display:inline-block;
  text-decoration-line:underline;
  text-decoration-color:var(--linie-aktiv);
  text-decoration-thickness:1px;
  text-underline-offset:6px;
  transition:text-decoration-color var(--transition-schnell);
}

.motif-row:hover .motif-title,
.motif-row.is-pressed .motif-title{text-decoration-color:var(--linie-aktiv-hover)}

.motif-row.is-pressed{opacity:.72;transition:opacity var(--transition-schnell)}

/* ---------- product page (werk.html, built by js/werk.js) ---------- */

.product{
  padding:var(--raum-produkt) var(--rand-desktop) var(--raum-10);
  max-width:var(--inhalt-breite);
  margin:0 auto;
  display:grid;grid-template-columns:640px 1fr;gap:var(--raum-9);align-items:start;
}

.product-media{width:640px}

/* Feste, aber viewport-bewusste Bühne: Bild + Kaufbereich sollen zusammen auf
   einen Bildschirm passen. Beide Bildformate werden vollständig und
   zentriert eingepasst (object-fit:contain, nie beschnitten), damit die
   rechte Spalte beim Wechsel nicht springt.
   ".ist-boxed" (Rahmen/Schatten/Hintergrund) gilt für alles ausser dem
   Hauptbild selbst — das Hauptbild wird bewusst ohne diese Box gezeigt. */
.stage{
  position:relative;
  height:min(58vh, 620px);
  width:100%;
  box-sizing:border-box;
  cursor:zoom-in;
  overflow:hidden;
}
.stage.ist-boxed{
  border:1px solid var(--linie);
  box-shadow:0 0 60px rgba(0,0,0,0.45);
  background:var(--bg);
}

.thumbs{display:flex;gap:var(--raum-3);margin-top:var(--raum-7);justify-content:center;flex-wrap:wrap}

/* Einheitliche quadratische Box für alle Miniaturen — Hoch- und Querformat
   werden zentriert eingepasst, egal welches Motivbild dahintersteckt. */
.thumb{
  position:relative;
  height:84px;width:84px;box-sizing:border-box;padding:var(--raum-1);
  background:var(--bg);border:1px solid var(--linie);opacity:.6;
  transition:opacity var(--transition-schnell), border-color var(--transition-schnell);
}
.thumb:hover{opacity:.85;border-color:var(--linie-aktiv)}

/* Bild-Überblendung: gemeinsamer Baustein für Stage, Miniaturen und
   Lightbox (siehe js/gemeinsam.js, bildUeberblenden). Container brauchen
   position:relative + feste Grösse, das Bild wird zentriert eingepasst. */
.bild-schicht{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity var(--transition-mittel), visibility 0s var(--transition-mittel);
}
/* picture ist nur ein technischer Wrapper (WebP + JPEG-Fallback) und soll
   für Layout-Zwecke "unsichtbar" sein — sonst löst sich max-height:100% auf
   dem <img> nicht auf, weil <picture> selbst keine definierte Höhe hat.
   Bewusst nur hier (nicht global), wo Bilder tatsächlich in eine Box mit
   fester Höhe eingepasst werden — die Übersichtsseite braucht das nicht. */
.bild-schicht picture{display:contents}
.bild-schicht.ist-sichtbar{
  opacity:1;visibility:visible;
  transition:opacity var(--transition-mittel), visibility 0s;
}
/* Bilder innerhalb einer Überblend-Schicht faden nicht selbst (opacity:0
   aus der allgemeinen img-Regel), sondern werden über die Schicht selbst
   ein-/ausgeblendet (siehe .bild-schicht oben) — sonst blockieren sich
   beide Mechanismen gegenseitig und das Bild bleibt unsichtbar. */
.bild-schicht img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}

.thumb.is-active{opacity:1;border-color:var(--text-hell)}
.thumb.is-active:hover{border-color:var(--text-hell)}

.product-info{max-width:440px}

.motif-eyebrow{font:var(--label);letter-spacing:var(--label-letterspacing);text-transform:uppercase;color:var(--text-leise)}

.product-info h1{margin:var(--raum-produkt) 0 0;font:var(--werk-titel);color:var(--text-hell)}

.product-story{margin:var(--raum-produkt) 0 0;font:var(--fliesstext);color:var(--text);max-width:var(--max-zeilenbreite)}

.divider{height:1px;background:var(--linie);margin:var(--raum-produkt) 0}

.selector-label{font:var(--label);letter-spacing:var(--label-letterspacing);text-transform:uppercase;color:var(--text-leise);margin-bottom:var(--raum-3)}

.ausfuehrung-options{display:flex;gap:var(--raum-3)}

/* Design-Vorgabe: Beschreibung steht in JEDER Box, dauerhaft — nicht nur
   für die aktuell gewählte Ausführung — damit man vergleichen kann, ohne
   umzuschalten. */
.ausfuehrung-option{
  /* <button> zentriert seinen Inhalt in Chromium intern vertikal — auch mit
     display:block lässt sich das nicht abschalten. Explizit als Flex-Spalte
     mit justify-content:flex-start erzwingen, sonst beginnen zwei Boxen mit
     unterschiedlich hohem Inhalt (Name ein-/zweizeilig) unterschiedlich
     hoch statt beide oben bündig. */
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  flex:1;text-align:left;padding:var(--raum-2) var(--raum-3);background:transparent;
  border:1px solid var(--linie);border-radius:2px;color:var(--text);
  transition:border-color var(--transition-schnell), color var(--transition-schnell);
}
.ausfuehrung-option:hover{border-color:var(--linie-aktiv)}
.ausfuehrung-option.is-selected{border-color:var(--text-hell);color:var(--text-hell)}
.ausfuehrung-option.is-selected:hover{border-color:var(--text-hell)}

.ausfuehrung-option .name{display:block;font:var(--klein);font-size:14px;color:inherit}
.ausfuehrung-option .beschreibung{display:block;font:var(--klein);color:var(--text-leise);margin-top:var(--raum-1)}

.groesse-options{display:flex;gap:var(--raum-3)}

.groesse-options-label{margin:var(--raum-produkt) 0 var(--raum-4)}

.groesse-option{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  flex:1;padding:var(--raum-2);background:transparent;border:1px solid var(--linie);
  border-radius:2px;color:var(--text);text-align:center;
  transition:border-color var(--transition-schnell), color var(--transition-schnell);
}
.groesse-option:hover{border-color:var(--linie-aktiv)}
.groesse-option.is-selected{border-color:var(--text-hell);color:var(--text-hell)}
.groesse-option.is-selected:hover{border-color:var(--text-hell)}

.groesse-option .dims{display:block;font:var(--klein);font-size:14px}
.groesse-option .preis{display:block;font:var(--label);letter-spacing:0;color:var(--text-leise);margin-top:var(--raum-1)}

.preis-row{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-top:calc(var(--raum-produkt) + var(--raum-4));gap:var(--raum-4);flex-wrap:wrap;
}

.preis-row .preis-gesamt{font:var(--werk-titel);color:var(--text-hell)}

.preis-row .versand{font:var(--klein);color:var(--text-leise)}

/* Text-Wechsel (Preis, Versandzeile, Preis je Grösse): weiches Umblenden
   statt hartem Sprung. Sitzt direkt auf dem wertetragenden Element, wird
   von js/gemeinsam.js (weichWechseln) kurz an- und wieder ausgeschaltet. */
.fade-swap{transition:opacity var(--transition-schnell)}
.fade-swap.ist-versteckt{opacity:0;transition-duration:0s}

.kaufen-button{
  margin-top:var(--raum-4);display:block;width:100%;padding:var(--raum-3) 0;background:var(--text-hell);
  border:none;border-radius:2px;color:var(--bg);font:var(--klein);letter-spacing:.06em;
  text-align:center;text-decoration:none;
  transition:transform var(--transition-schnell), filter var(--transition-schnell);
}
.kaufen-button:hover{filter:brightness(1.08);transform:translateY(-1px)}
.kaufen-button:active{transform:translateY(0)}

.stripe-warnung{
  font:var(--klein);color:var(--warn);
  max-height:0;opacity:0;overflow:hidden;visibility:hidden;
  transition:opacity var(--transition-schnell), max-height var(--transition-schnell), margin-top var(--transition-schnell), visibility 0s var(--transition-schnell);
}
.stripe-warnung.is-sichtbar{
  max-height:100px;opacity:1;margin-top:var(--raum-3);visibility:visible;
  transition:opacity var(--transition-schnell), max-height var(--transition-schnell), margin-top var(--transition-schnell), visibility 0s;
}

.werk-nicht-gefunden{padding:var(--raum-11) var(--rand-desktop);text-align:center}

.werk-nicht-gefunden h1{font:var(--gross-titel);color:var(--text-hell);margin:0 0 var(--raum-5)}

/* ---------- Lightbox ---------- */

.lightbox{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--transition-mittel), visibility 0s var(--transition-mittel);
}
.lightbox.ist-offen{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity var(--transition-mittel), visibility 0s;
}

.lightbox-bild-halter{position:relative;width:min(90vw,1100px);height:min(82vh,800px)}

.lightbox-schliessen,
.lightbox-nav{
  position:absolute;
  background:transparent;border:1px solid var(--linie);border-radius:2px;
  color:var(--text-hell);
  padding:var(--raum-3) var(--raum-4);
  font:var(--label);letter-spacing:0;
  transition:border-color var(--transition-schnell);
}
.lightbox-schliessen:hover,.lightbox-nav:hover{border-color:var(--linie-aktiv-hover)}

.lightbox-schliessen{top:var(--raum-5);right:var(--raum-5)}
.lightbox-vor{right:var(--raum-5);top:50%;transform:translateY(-50%)}
.lightbox-zurueck{left:var(--raum-5);top:50%;transform:translateY(-50%)}

/* ---------- Rechtstexte / leere Gerüste ---------- */

.legal-section{max-width:var(--max-zeilenbreite);padding:0 var(--rand-desktop) var(--raum-6);margin:0 auto}

.legal-section h2{font:var(--werk-titel);font-size:22px;color:var(--text-hell);margin:0 0 var(--raum-3)}

.legal-section p{font:var(--fliesstext);color:var(--text);margin:0}

.platzhalter-hinweis{color:var(--text-leise);font-style:italic}

/* ---------- Danke-Seite ---------- */

.thanks{padding:var(--raum-11) var(--rand-desktop);text-align:center;max-width:var(--max-zeilenbreite);margin:0 auto}

.thanks h1{font:var(--gross-titel);color:var(--text-hell);margin:0 0 var(--raum-5)}

.thanks p{font:var(--fliesstext);color:var(--text);margin:0 0 var(--raum-6)}

.email{font:var(--werk-titel);font-size:26px;color:var(--text-hell);display:inline-block;margin:0}

.thanks .email{display:block;margin-top:var(--raum-6)}

/* ---------- responsive ---------- */

@media (max-width:880px){
  .site-header{padding:var(--raum-5) var(--rand-mobile)}
  .site-header .logo{font-size:17px}
  .site-header nav{gap:var(--raum-4);font-size:12px}

  .page-intro,.prose,.legal-section{padding-left:var(--rand-mobile);padding-right:var(--rand-mobile)}
  .page-intro h1{font-size:36px}

  .hero-text{left:var(--rand-mobile);right:var(--rand-mobile);bottom:var(--raum-8)}
  .hero-text p{font-size:17px}

  .motif-list{padding:0 var(--rand-mobile) var(--raum-8);gap:var(--raum-9)}
  .motif-row,.motif-row.is-reversed{
    grid-template-columns:1fr;gap:0;justify-items:center;
  }
  .motif-row .motif-media{order:1;height:470px !important;width:313px !important}
  .motif-row.is-quer .motif-media{height:228px !important;width:342px !important}
  .motif-caption{
    order:2;justify-self:center !important;text-align:center;
    margin-top:var(--raum-3); /* Bild -> Ortsangabe: eng */
  }
  .motif-location{margin-bottom:var(--raum-1)}
  .motif-title{
    margin-top:var(--raum-2); /* Ortsangabe -> Titel: eng */
    font-size:22px; /* kleiner, damit er nicht wie eine Abschnittsüberschrift wirkt */
  }
  /* Die Unterstreichung ist bereits per Grundregel dauerhaft sichtbar und
     eng am Text (inline-block) — hier nichts weiter nötig.
     Titel -> nächstes Bild: der grosse Rest des Zeilenabstands (--raum-9)
     kommt automatisch aus dem gap von .motif-list — mind. 1:3 zu den
     beiden engen Abständen oben. */

  .newsletter{padding:var(--raum-6) var(--rand-mobile);flex-direction:column;align-items:stretch}
  .newsletter p{font-size:19px;max-width:none}
  .newsletter form{max-width:none}

  .site-footer{padding:var(--raum-6) var(--rand-mobile) var(--raum-5);flex-direction:column;gap:var(--raum-5)}
  .footer-cols{gap:0}
  .footer-col{gap:var(--raum-3)}
  .copyright{padding:0 var(--rand-mobile) var(--raum-5)}

  .product{padding:var(--raum-5) var(--rand-mobile) var(--raum-7);grid-template-columns:1fr;gap:0}
  .product-media{width:100%;max-width:342px;margin:0 auto}
  .stage{height:min(52vh, 470px)}
  .thumbs{margin-top:var(--raum-5);gap:var(--raum-2)}
  .thumb{height:64px;width:64px}
  .product-info{max-width:none;margin-top:var(--raum-6)}
  .product-info h1{font-size:28px}
  .product-story{font-size:15px}
  /* Reserviert zwei Zeilen für den Ausführungsnamen, damit die Beschreibung
     darunter bei beiden Boxen auf derselben Höhe beginnt, unabhängig davon,
     ob der Name (z. B. "Gerahmter Fine Art Print") umbricht oder nicht. */
  .ausfuehrung-option .name{min-height:calc(1.5em * 2)}
  .preis-row{margin-top:calc(var(--raum-produkt) + var(--raum-4))}
  .preis-row .preis-gesamt{font-size:26px}

  .lightbox-bild-halter{width:94vw;height:76vh}
  .lightbox-vor,.lightbox-zurueck{padding:var(--raum-2) var(--raum-3)}

  .thanks{padding:var(--raum-8) var(--rand-mobile)}
}