/* Claudis Kreativwerkstatt
   Variante "Atelier & Leinwand": warmes Naturweiss, Leinenstruktur, Terrakotta.
   Die Werke sind farbstark und motivisch dicht, deshalb haelt sich die Seite
   zurueck.

   Schriften liegen im Projekt, nicht bei Google: sonst geht bei jedem Aufruf
   die IP des Besuchers an einen Dritten. Beide unter der SIL Open Font
   License, Lizenztexte in static/fonts/. */

@font-face {
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/zilla-slab-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/zilla-slab-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Zilla Slab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/zilla-slab-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/caveat.woff2') format('woff2');
}

/* Display-Serife fuer die grossen Ueberschriften. Fraunces ist warm und leicht
   eigenwillig gezeichnet und traegt die Werkstattbuch-Anmutung, ohne kitschig
   zu werden. Ebenfalls SIL OFL, Lizenz in static/fonts/OFL-Fraunces.txt. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fraunces-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/fraunces-900.woff2') format('woff2');
}

:root {
  --bg: #f4f0e6;
  --paper: #fdfbf6;
  --band: #efeade;
  --top: #f8f5ee;
  --ink: #3b352b;
  --head: #2f2a22;
  --muted: #7d7364;
  --accent: #b5623c;
  --accent-d: #8f4a2c;
  --line: #ddd4c2;
  --line-s: #e8e0cf;
  --gruen: #5f7a4a;
  --rot: #a8432a;
  --serif: 'Zilla Slab', Georgia, 'Times New Roman', serif;
  --display: 'Fraunces', 'Zilla Slab', Georgia, serif;
  --hand: 'Caveat', 'Zilla Slab', cursive;
  --radius: 3px;
  --schatten: 0 2px 10px rgba(80, 64, 40, .09);
  /* Oelige Farbtextur fuer die Hintergrund-Kleckse: groebere Wolken als die
     feine Leinenkoernung, damit die Flaechen gemalt statt gerastert wirken. */
  --oel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='o'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015' numOctaves='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23o)' opacity='0.05'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--serif);
  color: var(--ink);
  background-color: var(--bg);
  /* Grundton fuer alle Seiten: zwei sehr blasse Farbtupfer in gegenueber-
     liegenden Ecken (funktioniert auf beliebig langen Seiten) plus die feine
     Leinenkoernung. Die kraeftigeren Kleckse sitzen je Sektion, siehe unten. */
  background-image:
    radial-gradient(42% 30% at 6% 3%, rgba(181, 98, 60, .06), transparent 60%),
    radial-gradient(40% 28% at 94% 97%, rgba(107, 123, 60, .06), transparent 60%),
    radial-gradient(circle at 50% -10%, rgba(181, 98, 60, .05), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  line-height: 1.6;
  font-size: 17px;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.15;
  color: var(--head);
}

h1,
h2 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.01em;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.schmal {
  max-width: 720px;
}

/* Sichtbarer Fokus, sonst ist die Seite per Tastatur nicht bedienbar. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Sprungmarke fuer Screenreader und Tastatur. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: #fff;
  padding: 12px 18px;
}

.skip:focus {
  left: 0;
}

/* ---------- Kopf ---------- */
.kopf {
  background: var(--top);
  border-bottom: 1px solid var(--line);
}

/* Nur oben und unten setzen. Die Klasse sitzt zusammen mit .wrap auf
   demselben Element, und ein padding-Kurzschreibweise wuerde deren
   seitlichen Rand ueberschreiben: der Kopf klebte dann am Fensterrand. */
.kopf-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 18px;
  padding-bottom: 18px;
}

.marke {
  font-weight: 700;
  font-size: 21px;
  color: var(--head);
}

.marke:hover {
  text-decoration: none;
}

.marke .sub {
  display: block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}

.nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 15.5px;
}

.nav a {
  color: var(--muted);
}

.nav a:hover,
.nav a.aktiv {
  color: var(--accent);
}

.nav a.aktiv {
  font-weight: 600;
}

/* ---------- Aufmacher ---------- */
.hero {
  padding: 74px 0 60px;
  text-align: center;
}

.hero .kicker {
  font-family: var(--hand);
  font-size: 29px;
  color: var(--accent);
  transform: rotate(-2deg);
  display: inline-block;
  margin-bottom: 6px;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(32px, 5.4vw, 50px);
  margin: 6px 0 16px;
}

.hero p {
  max-width: 560px;
  margin: 0 auto;
  color: var(--muted);
}

.strich {
  width: 72px;
  height: 2px;
  background: var(--accent);
  margin: 22px auto 0;
  border-radius: 2px;
}

/* ---------- Kacheln ---------- */
/* Feste vier Spalten, wie im abgenommenen Entwurf. Bewusst kein auto-fit mit
   minmax: dabei streckt sich jede Kachel auf ihren Anteil an der vollen
   Breite, und bei drei Bereichen werden aus 258 Pixeln knapp 380. Die
   Vorschaubilder draengen sich dann vor die Werke, was der Idee dieser
   Gestaltung widerspricht. Weniger als vier Bereiche lassen rechts Platz,
   das ist gewollt. */
/* Auto-fit mit fester Ober- und Untergrenze: die Kacheln bleiben zwischen 220
   und 300 Pixel breit und werden zentriert. So streckt sich bei zwei oder drei
   Bereichen keine Kachel auf halbe Bildschirmbreite, und rechts steht kein
   leeres Reihenende mehr. Die frueheren festen vier Spalten liessen bei drei
   Bereichen ein Viertel der Reihe leer. */
.kacheln {
  display: grid;
  gap: 34px;
  padding: 16px 0 56px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 300px));
  justify-content: center;
}

/* Jede Kachel ist ein Foto-Abzug mit weissem Rand, leicht schief wie an die
   Wand gepinnt. Der mehrlagige Schatten laesst zwei blasse Karten hinten rechts
   hervorlugen: die Kachel sieht dadurch aus wie ein Stapel Fotos, also ein
   ganzes Album statt eines einzelnen Bildes. Beim Ueberfahren richtet sie sich
   auf und hebt sich. Der Winkel wechselt nach Position, damit es zufaellig
   wirkt statt gleichmaessig gekippt. */
.kachel {
  position: relative;
  display: block;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line-s);
  border-radius: var(--radius);
  padding: 11px 11px 0;
  transition: transform .2s, box-shadow .2s;
  box-shadow:
    7px 8px 0 -2px var(--paper), 7px 8px 0 -1px var(--line-s),
    15px 17px 0 -4px var(--paper), 15px 17px 0 -3px var(--line-s),
    0 12px 22px rgba(80, 64, 40, .16);
}

.kachel:nth-child(3n+1) {
  transform: rotate(-1.3deg);
}

.kachel:nth-child(3n+2) {
  transform: rotate(.9deg);
}

.kachel:nth-child(3n+3) {
  transform: rotate(-.5deg);
}

.kachel:hover {
  transform: rotate(0) translateY(-5px);
  text-decoration: none;
  z-index: 3;
  box-shadow:
    7px 8px 0 -2px var(--paper), 7px 8px 0 -1px var(--line-s),
    15px 17px 0 -4px var(--paper), 15px 17px 0 -3px var(--line-s),
    0 20px 34px rgba(80, 64, 40, .26);
}

.kachel .bild {
  aspect-ratio: 4 / 3;
  background: var(--band);
  object-fit: cover;
  width: 100%;
  border-radius: 2px;
}

/* Titel in Handschrift wie unter ein eingeklebtes Foto geschrieben, die Anzahl
   klein darunter. display:block, weil das Element ein span mit Blockkindern
   ist und sein Padding sonst nicht weitergibt. */
.kachel .text {
  display: block;
  padding: 10px 6px 14px;
  text-align: center;
}

.kachel .text b {
  display: block;
  font-family: var(--hand);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--head);
}

.kachel .text i {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

/* ---------- Abschnitte ---------- */
.band {
  background:
    var(--oel),
    radial-gradient(26% 52% at 4% 52%, rgba(122, 92, 160, .20), transparent 72%),
    radial-gradient(30% 58% at 96% 24%, rgba(181, 98, 60, .26), transparent 70%),
    radial-gradient(24% 48% at 50% 104%, rgba(107, 123, 60, .24), transparent 72%),
    var(--band);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 52px 0;
}

/* Ganzflaechige Baender, damit sich die Sektionen voneinander abheben. Jede
   Zone streut die Oelfarben-Kleckse anders, so wirkt keine Flaeche wie die
   naechste. Deckkraft bewusst niedrig, die Fotos bleiben vorn. Kein eigener
   Innenabstand: der kommt aus den Sektionen darin (hero, kacheln, ueber). */
.zone {
  position: relative;
}
.zone-hero {
  background:
    var(--oel),
    radial-gradient(30% 46% at 8% 18%, rgba(181, 98, 60, .24), transparent 70%),
    radial-gradient(26% 40% at 90% 12%, rgba(95, 122, 74, .22), transparent 70%),
    radial-gradient(24% 38% at 74% 88%, rgba(214, 160, 80, .24), transparent 70%);
}
.zone-ueber {
  background:
    var(--oel),
    radial-gradient(28% 52% at 84% 36%, rgba(107, 131, 181, .20), transparent 72%),
    radial-gradient(26% 48% at 14% 78%, rgba(214, 160, 80, .23), transparent 72%),
    radial-gradient(22% 40% at 55% 108%, rgba(107, 123, 60, .18), transparent 72%);
  border-top: 1px solid var(--line-s);
}

.band h2,
.abschnitt h2 {
  font-size: clamp(23px, 3.4vw, 28px);
  margin: 0 0 4px;
}

.abschnitt {
  padding: 52px 0;
}

.lead {
  color: var(--muted);
  margin: 0 0 26px;
}

/* ---------- Bildraster (Masonry) ---------- */
/* Spalten per CSS-Columns statt Grid: die Werke behalten ihr echtes Hoch- oder
   Querformat und werden nicht mehr auf Quadrat beschnitten. Fuer ein
   Kunstportfolio ist der Beschnitt der groesste Verlust gewesen, er hat die
   Komposition der Bilder zerschnitten. column-width statt fester Spaltenzahl
   macht das Raster von selbst schmaler auf kleinen Schirmen. Der senkrechte
   Abstand kommt aus margin-bottom der Werke, Columns kennen keinen row-gap. */
.raster {
  columns: 260px;
  column-gap: 22px;
}

.werk {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-s);
  border-radius: var(--radius);
  padding: 9px 9px 6px;
  box-shadow: var(--schatten);
  margin: 0 0 22px;
  break-inside: avoid;
  transition: transform .2s, box-shadow .2s;
}

/* Wie eingeklebt: jedes Foto haengt minimal schief. Der Winkel wechselt nach
   Position, damit es zufaellig wirkt statt gleichmaessig gekippt. Beim
   Ueberfahren richtet sich das Bild auf und tritt hervor, das ist zugleich das
   Signal, dass die Kachel anklickbar ist. */
.werk:nth-child(3n+1) {
  transform: rotate(-1.3deg);
}

.werk:nth-child(3n+2) {
  transform: rotate(.9deg);
}

.werk:nth-child(3n+3) {
  transform: rotate(-.4deg);
}

.werk:nth-child(5n+3) {
  transform: rotate(1.5deg);
}

.werk:hover {
  transform: rotate(0) scale(1.02);
  z-index: 3;
  box-shadow: 0 14px 30px rgba(80, 64, 40, .24);
}

.werk img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1px;
  background: var(--band);
  border: 1px solid rgba(0, 0, 0, .05);
}

/* Blur-up: der winzige, geblurrte Platzhalter (LQIP als data:-URI im
   --lqip-Attribut) liegt als ::before hinten und ist sofort da. Das scharfe
   Bild liegt darueber, laedt per loading=lazy erst im Sichtbereich und blendet
   dann sanft ein. Ohne JavaScript bleibt das scharfe Bild sichtbar (volle
   Deckkraft) und erscheint beim Laden ohne Ueberblendung, das .js kommt aus
   static/js/blurup.js. Inline-onload waere einfacher, ist hier aber per CSP
   verboten. */
.blurup {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--band);
  border-radius: 1px;
}
.blurup::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: 0;
  background-image: var(--lqip, none);
  background-size: cover;
  background-position: center;
  filter: blur(12px);
  transform: scale(1.12);
}
/* Transparenter Hintergrund, damit vor dem Laden der Blur durchscheint und
   nicht die graue Grundfarbe des Bildes. */
.blurup > img {
  position: relative;
  z-index: 1;
  background: transparent;
}
.js .blurup > img {
  opacity: 0;
  transition: opacity .5s ease-out;
}
.js .blurup > img.geladen {
  opacity: 1;
}

/* Bildunterschrift in Handschrift, wie mit dem Stift ins Album geschrieben. */
.werk figcaption,
.werk-bu {
  font-family: var(--hand);
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
  padding: 8px 3px 1px;
  display: block;
}

.werk-link {
  display: block;
  color: inherit;
}

.werk-link:hover {
  text-decoration: none;
}

.werk button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  font: inherit;
  position: relative;
}

/* Lupe beim Ueberfahren: macht sichtbar, dass sich das Bild vergroessern
   laesst. Als SVG eingebettet, kein Emoji. */
.werk button::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .2s;
  background: rgba(30, 24, 16, .3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E") center / 36px no-repeat;
}

.werk button:hover::after,
.werk button:focus-visible::after {
  opacity: 1;
}

/* Zurueck-Verweis. Der Pfeil ist aus zwei Rahmenkanten gebaut statt als
   Schriftzeichen: das Pfeilzeichen ist in Zilla Slab zwar enthalten, aber sehr
   lang und duenn gezeichnet und passt nicht zur Schrift. So skaliert er mit
   der Schriftgroesse und nimmt deren Farbe an. */
.zurueck {
  display: inline-flex;
  align-items: center;
}

.zurueck::before {
  content: '';
  width: .42em;
  height: .42em;
  margin-right: .5em;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  position: relative;
  top: -.04em;
}

/* ---------- Ueber mich ---------- */
.ueber {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 44px;
  align-items: center;
}

.ueber .unterschrift {
  font-family: var(--hand);
  font-size: 30px;
  color: var(--accent);
  transform: rotate(-3deg);
  display: inline-block;
}

.ueber .portraet {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

/* ---------- Fuss ---------- */
/* Kein margin-top: der Seitenhintergrund schiene sonst als Streifen zwischen
   dem letzten Abschnitt und dem Fuss durch. Der Abstand kommt aus dem
   Innenabstand des Abschnitts darueber. */
.fuss {
  background: var(--top);
  border-top: 1px solid var(--line);
  padding: 24px 0;
  font-size: 14px;
  color: var(--muted);
}

.fuss-in {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.fuss a {
  color: var(--muted);
}

/* ---------- Meldungen ---------- */
.meldung {
  padding: 13px 16px;
  border-radius: var(--radius);
  margin: 16px 0;
  border: 1px solid var(--line);
  background: var(--paper);
}

.meldung.error {
  border-color: #e0b4a8;
  background: #fbeeea;
  color: #7d2c17;
}

.meldung.success {
  border-color: #bfd0b0;
  background: #eef3e9;
  color: #3c5230;
}

/* ---------- Knoepfe und Formulare ---------- */
.knopf {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 12px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  text-align: center;
  /* 44px Mindesthoehe: darunter trifft man am Handy daneben. */
  min-height: 44px;
}

.knopf:hover {
  background: var(--accent-d);
  border-color: var(--accent-d);
  text-decoration: none;
}

.knopf.still {
  background: var(--paper);
  color: var(--head);
  border-color: var(--line);
}

.knopf.still:hover {
  background: var(--band);
}

.knopf.gefahr {
  background: var(--rot);
  border-color: var(--rot);
}

.knopf.klein {
  padding: 8px 12px;
  font-size: 14px;
  min-height: 38px;
}

.knopf[disabled] {
  opacity: .55;
  cursor: default;
}

label {
  display: block;
  font-weight: 600;
  font-size: 15px;
  margin: 0 0 6px;
  color: var(--head);
}

.feld {
  margin-bottom: 20px;
}

.feld .hinweis {
  font-size: 13.5px;
  color: var(--muted);
  margin: 5px 0 0;
  font-weight: 400;
}

input[type=text],
input[type=email],
input[type=password],
textarea,
select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  padding: 12px 13px;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

textarea {
  min-height: 130px;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(181, 98, 60, .18);
}

/* ---------- Verwaltung ---------- */
/* Zweite Leiste unter dem Kopf. Gleiche Farbwelt wie die Hauptnavigation, die
   aktive Seite bekommt wie ein Reiter einen Strich in Terrakotta bis auf die
   untere Kante der Leiste. */
.unterbar {
  background: var(--band);
  border-bottom: 1px solid var(--line);
}

.unterbar-in {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 15.5px;
}

.unterbar a {
  position: relative;
  color: var(--muted);
}

.unterbar a:hover,
.unterbar a.aktiv {
  color: var(--accent);
  text-decoration: none;
}

.unterbar a.aktiv {
  font-weight: 600;
}

.unterbar a.aktiv::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -13px;
  height: 2px;
  background: var(--accent);
}

/* Schiebt den Blick-zurueck-Verweis ans rechte Ende der Leiste. */
.unterbar-raus {
  margin-left: auto;
}

.karte {
  background: var(--paper);
  border: 1px solid var(--line-s);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--schatten);
}

.karte h3 {
  margin: 0 0 4px;
  font-size: 19px;
}

.karte .meta {
  color: var(--muted);
  font-size: 14px;
}

.zeile {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.zeile.verteilt {
  justify-content: space-between;
}

.leer {
  color: var(--muted);
  font-style: italic;
}

.bildliste {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.bildliste .eintrag {
  background: var(--band);
  border: 1px solid var(--line-s);
  border-radius: var(--radius);
  padding: 10px;
}

.bildliste img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 1px;
}

.bildliste .werkzeuge {
  display: flex;
  gap: 6px;
  margin-top: 9px;
  flex-wrap: wrap;
}

.bildliste .werkzeuge form {
  margin: 0;
}

.marke-titelbild {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--gruen);
  padding: 2px 8px;
  border-radius: 999px;
  margin-top: 8px;
}

/* Ablagefeld fuer den Upload */
.ablage {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 26px 20px;
  text-align: center;
}

.ablage.aktiv {
  border-color: var(--accent);
  background: #faf3ec;
}

.ablage p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14.5px;
}

.fortschritt {
  height: 10px;
  background: var(--band);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 16px;
}

.fortschritt i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .2s;
}

/* ---------- Lightbox ---------- */
dialog.lupe {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 96vw;
  max-height: 96vh;
}

dialog.lupe::backdrop {
  background: rgba(30, 24, 16, .88);
}

dialog.lupe img {
  max-width: 96vw;
  max-height: 88vh;
  width: auto;
  margin: 0 auto;
  border-radius: 2px;
}

dialog.lupe .bu {
  color: #f0e8d8;
  text-align: center;
  padding: 10px 12px;
  font-size: 14.5px;
}

dialog.lupe .zu {
  position: fixed;
  top: 14px;
  right: 16px;
  font-size: 26px;
  line-height: 1;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  border: 0;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  cursor: pointer;
}

/* ---------- Cookie-Hinweis ---------- */
.cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(60, 48, 30, .15);
  padding: 16px 0;
}

.cookie[hidden] {
  display: none;
}

.cookie-in {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cookie p {
  margin: 0;
  font-size: 14.5px;
  flex: 1 1 320px;
}

/* ---------- Formatierter Text aus dem Editor ---------- */
.fliesstext> :first-child {
  margin-top: 0;
}

.fliesstext> :last-child {
  margin-bottom: 0;
}

.fliesstext p {
  margin: 0 0 14px;
}

.fliesstext h2 {
  font-size: 22px;
  margin: 26px 0 8px;
}

.fliesstext h3 {
  font-size: 18px;
  margin: 22px 0 6px;
}

.fliesstext ul,
.fliesstext ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

.fliesstext li {
  margin-bottom: 4px;
}

.fliesstext blockquote {
  margin: 0 0 14px;
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--line);
  color: var(--muted);
}

/* Editor in der Verwaltung. Quill bringt eigene Rahmen mit, die hier an die
   uebrigen Formularfelder angeglichen werden. */
.editor {
  background: var(--paper);
}

.ql-toolbar.ql-snow,
.ql-container.ql-snow {
  border-color: var(--line);
}

.ql-toolbar.ql-snow {
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--band);
}

.ql-container.ql-snow {
  border-radius: 0 0 var(--radius) var(--radius);
  font-family: var(--serif);
  font-size: 16px;
}

.ql-editor {
  min-height: 220px;
}

/* Hoehere Spezifitaet noetig: quill.snow.css wird nach diesem Stylesheet
   geladen und setzt dort margin: 0. Ohne Abstand sieht man beim Schreiben
   nicht, wo ein Absatz endet und der naechste beginnt. */
.editor .ql-editor p {
  margin-bottom: 12px;
}

.ql-snow .ql-stroke {
  stroke: var(--ink);
}

.ql-snow .ql-fill {
  fill: var(--ink);
}

.ql-snow .ql-picker {
  color: var(--ink);
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke {
  stroke: var(--accent);
}

.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill {
  fill: var(--accent);
}

/* ---------- Fliesstext auf Rechtsseiten ---------- */
.text-seite h2 {
  margin-top: 34px;
  font-size: 21px;
}

.text-seite h2:first-child {
  margin-top: 0;
}

.text-seite p {
  margin: 0 0 14px;
}

/* Kacheln (auto-fit) und Raster (columns) sind von sich aus responsiv, sie
   brauchen keine festen Spaltenzahlen je Breite mehr. */
@media (max-width: 860px) {
  .ueber {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .hero {
    padding: 52px 0 42px;
  }

  .kopf-in {
    padding: 14px 0;
  }

  .nav {
    gap: 16px;
    font-size: 15px;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 16px;
  }

  .wrap {
    padding: 0 16px;
  }

  /* Schmalere Spalten, damit die Werke am Handy zweispaltig bleiben statt zu
     einer einzigen Reihe zu werden. */
  .raster {
    columns: 150px;
    column-gap: 12px;
  }

  .werk {
    margin-bottom: 12px;
  }

  .knopf {
    width: 100%;
  }

  .zeile .knopf {
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }

  /* Keine gekippten Fotos und keine Bewegung beim Hover: ruhige, gerade
     Darstellung fuer alle, die reduzierte Bewegung eingestellt haben. */
  .werk,
  .werk:nth-child(3n+1),
  .werk:nth-child(3n+2),
  .werk:nth-child(3n+3),
  .werk:nth-child(5n+3),
  .kachel,
  .kachel:nth-child(3n+1),
  .kachel:nth-child(3n+2),
  .kachel:nth-child(3n+3) {
    transform: none;
  }

  .werk:hover,
  .kachel:hover {
    transform: none;
  }
}