/* juleplate.art – Gestaltung Entwurf 6, überarbeitet nach Rückmeldung (20.10.2026)
   Raster: 12 Spalten, Zwischenraum 24 px, Grundmaß u = 8 px; alle Abstände sind Vielfache von u.
   Startseite auf einer Mittelachse (Spalten 3–10), wie das Logo. Schrift Roboto, selbst gehostet. */
:root {
  color-scheme: light;
  /* Palette 4 „Verbindende Mitte“; Pop nur im JP-Zeichen und in der Einladung */
  --wand: #eef1f0;      /* Dünenschleier: Grund */
  --papier: #faf9f7;    /* Himmelsweiß: Passepartout, Bänder */
  --tinte: #2c2c2c;     /* Kaminglanz: Text */
  --leise: #6e7170;     /* Steinholzgrau, abgedunkelt (lesbar) */
  --linie: #b5b5b5;     /* Steinholzgrau */
  --bordeaux: #792c28;  /* Dünenrot */
  --gruen: #267a73;     /* Tiefseegrün */
  --schrift: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --u: 8px;
  --breite: 1176px;     /* 12 Spalten à 76 px + 11 Zwischenräume à 24 px */
  --spalt: 24px;
  --pp: 48px;           /* Passepartout: 6 u */
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
form { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--wand); color: var(--tinte); font-family: var(--schrift); font-weight: 300; font-size: 17px; line-height: 1.5; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 300; line-height: 1.2; letter-spacing: .005em; text-wrap: balance; }
p { margin: 0; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 3px; }
.innen { max-width: calc(var(--breite) + 2 * max(16px, 4vw)); margin: 0 auto; padding-left: max(16px, 4vw, env(safe-area-inset-left, 0px)); padding-right: max(16px, 4vw, env(safe-area-inset-right, 0px)); }
.label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; color: var(--leise); }
.klick { all: unset; box-sizing: border-box; cursor: pointer; display: block; min-width: 0; }
.klick:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 4px; }
.zwoelf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); }
.achse { grid-column: 3 / span 8; min-width: 0; }   /* Mittelachse: 8 von 12 Spalten */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Kopf: kompakt wie juleplate.art */
.kopf { padding-block: calc(2 * var(--u)) calc(3 * var(--u)); }
.menue { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
.menue nav { display: flex; gap: calc(3 * var(--u)); }
.menue a { text-decoration: none; white-space: nowrap; }
.menue a.aktiv { color: var(--tinte); font-weight: 400; }
.menue a:hover { color: var(--bordeaux); }
.logo-link { display: block; text-decoration: none; margin-top: calc(2 * var(--u)); }
.logo { display: block; width: min(680px, 78%); height: auto; margin: 0 auto; overflow: visible; }
.unterzeile-logo { text-align: center; margin-top: calc(1.5 * var(--u)); font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: #8d8f8e; }

/* Bühne: langsames Auflösen ins nächste Bild, dazu leichter Zoom */
.buehne { position: relative; height: clamp(200px, 32vw, 480px); overflow: hidden; background: var(--papier); }
.buehne .klick { position: absolute; inset: 0; opacity: 0; transition: opacity 4s ease-in-out; }
.buehne .klick.an { opacity: 1; z-index: 1; }
.buehne img { width: 100%; height: 100%; object-fit: cover; }
.buehne span { position: absolute; left: max(16px, 4vw); bottom: calc(2 * var(--u)); color: #fff; font-size: clamp(20px, 2.4vw, 32px); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 18px rgba(0,0,0,.35); }
@media (prefers-reduced-motion: no-preference) {
  .buehne .klick.an img { animation: zoom 12s ease-out both; }
  @keyframes zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
}

/* Newsletter: eine Zeile auf der Mittelachse; die Felder teilen sich den freien Platz */
.neuigkeiten { background: var(--papier); padding-block: calc(2 * var(--u)); }
.neuigkeiten form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u) calc(2 * var(--u)); }
.neuigkeiten .frage { flex: 0 0 auto; font-weight: 400; }
.neuigkeiten input { flex: 1 1 140px; min-width: 0; background: #fff; border: 1px solid #dcdfde; border-radius: 0; padding: 7px 10px; font-size: 15px; }
.neuigkeiten input:focus { outline: none; border-color: var(--tinte); }
.neuigkeiten button { flex: 0 0 auto; background: var(--tinte); color: var(--papier); border: 0; border-radius: 0; padding: 9px 18px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.neuigkeiten button:hover { background: var(--bordeaux); }
.neuigkeiten button:disabled { opacity: .6; cursor: default; }
.neuigkeiten .meldung { flex-basis: 100%; font-size: 14px; color: var(--gruen); }
.neuigkeiten .meldung.err { color: var(--bordeaux); }
.neuigkeiten .meldung:empty { display: none; }

/* Karte unter der Bühne: Einladung (mit Farbwolken) bzw. Kunstwerk des Monats.
   Verhältnis einer DIN-lang-Karte (210 : 99), mittig auf der Achse. Links das ganze Werk, rechts der Text. */
.platz { margin-top: calc(5 * var(--u)); }
.karte { grid-column: 3 / span 8; position: relative; isolation: isolate; overflow: hidden; border-radius: 6px; background: var(--papier);
  aspect-ratio: 210 / 99; display: grid; grid-template-columns: 47.14% minmax(0, 1fr); text-align: left; }
.karte-bild { position: relative; display: block; min-height: 0; }
.karte-bild img { position: absolute; inset: calc(3 * var(--u)); width: calc(100% - 6 * var(--u)); height: calc(100% - 6 * var(--u));
  object-fit: contain; opacity: 0; transition: opacity 4s ease-in-out; filter: drop-shadow(0 6px 14px rgba(44, 44, 44, .18)); }
.karte-bild img.an { opacity: 1; }
.karte .txt { padding: calc(4 * var(--u)) calc(5 * var(--u)) calc(4 * var(--u)) calc(2 * var(--u)); display: grid; gap: var(--u); align-content: center; min-width: 0; }
.karte .txt > span { display: block; }
.karte .label { color: var(--bordeaux); font-size: 13px; }
.karte .titel { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.05; }
.karte .wann { font-size: clamp(18px, 1.9vw, 24px); font-weight: 400; line-height: 1.3; margin-top: var(--u); }
.karte .satz { color: #4a4846; font-size: clamp(17px, 1.5vw, 19px); }
.karte .mehr { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; margin-top: calc(2 * var(--u)); }
.karte:hover .mehr { color: var(--bordeaux); }
.einladung { background: #fbfaf8; }
/* Farbwolken aus dem Verlauf des JP-Zeichens; sie ziehen sehr langsam */
.wolken { position: absolute; inset: -15%; z-index: -1; filter: blur(40px); opacity: .5; pointer-events: none; }
.wolken i { position: absolute; width: 48%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--c) 0%, transparent 66%); }
.wolken i:nth-child(1) { --c: #2db4e4; left: -2%; top: 24%; width: 56%; }
.wolken i:nth-child(2) { --c: #d6085f; left: 30%; top: -6%; }
.wolken i:nth-child(3) { --c: #e8402e; left: 56%; top: 18%; }
.wolken i:nth-child(4) { --c: #eca036; left: 40%; top: 46%; }
.wolken i:nth-child(5) { --c: #e6d400; left: 66%; top: 52%; }
.wolken i:nth-child(6) { --c: #6e1a2a; left: 12%; top: 64%; width: 34%; opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
  .wolken i { animation: ziehen 46s ease-in-out infinite alternate; }
  .wolken i:nth-child(2) { animation-duration: 58s; animation-delay: -12s; }
  .wolken i:nth-child(3) { animation-duration: 52s; animation-delay: -30s; animation-name: ziehen2; }
  .wolken i:nth-child(4) { animation-duration: 64s; animation-delay: -20s; }
  .wolken i:nth-child(5) { animation-duration: 50s; animation-delay: -6s; animation-name: ziehen2; }
  .wolken i:nth-child(6) { animation-duration: 70s; animation-delay: -40s; }
  @keyframes ziehen { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(14%, -10%) scale(1.15); } 100% { transform: translate(-10%, 8%) scale(.92); } }
  @keyframes ziehen2 { 0% { transform: translate(0, 0) scale(1.05); } 50% { transform: translate(-16%, 10%) scale(.9); } 100% { transform: translate(8%, -12%) scale(1.12); } }
}

/* Begrüßung: auf der Mittelachse, größerer Text, zwei Galeriebilder als Paar im Raster */
.willkommen { padding-block: calc(8 * var(--u)) calc(6 * var(--u)); }
.willkommen h2 { font-size: 36px; margin-bottom: calc(3 * var(--u)); }
.willkommen .text p { font-size: 20px; line-height: 1.6; margin-bottom: calc(2 * var(--u)); }
.willkommen .text strong { font-weight: 400; }
.willkommen .text a.name { text-decoration: none; font-weight: 400; border-bottom: 1px solid var(--linie); }
.willkommen .text a.name:hover { color: var(--bordeaux); border-color: var(--bordeaux); }
.bilderpaar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spalt); margin: calc(4 * var(--u)) 0 calc(5 * var(--u)); }
.bilderpaar figure { margin: 0; }
.bilderpaar img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--papier); }
.bilderpaar figcaption { font-size: 13px; color: var(--leise); margin-top: var(--u); }
.willkommen .gruss { margin-top: calc(3 * var(--u)); }
.willkommen .zeichen { float: right; width: 240px; height: auto; shape-outside: circle(40%); margin: -8px -24px 0 calc(3 * var(--u)); }

/* Öffnungszeiten */
.zeiten { padding-block: var(--u) calc(8 * var(--u)); border-top: 1px solid var(--tinte); padding-top: calc(2 * var(--u)); }
.zeiten > div:first-child { grid-column: 1 / span 3; }
.zeiten > div:last-child { grid-column: 4 / span 8; }
.zeiten.mitte { border-top: 0; padding-top: 0; }
.zeiten.mitte > .achse { grid-column: 3 / span 8; border-top: 1px solid var(--tinte); padding-top: calc(2 * var(--u)); }
.zeiten.mitte .status-heute { margin-top: calc(2 * var(--u)); }
.zeiten .status-heute { font-size: 24px; }
.woche { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; margin-top: var(--u); max-width: 520px; }
.woche div { padding: var(--u) 0; border-top: 2px solid #d3d6d5; color: var(--leise); }
.woche div.auf { border-top-color: var(--tinte); color: var(--tinte); }
.woche div.heute { border-top-color: var(--bordeaux); color: var(--bordeaux); font-weight: 500; }
.zeiten p { color: var(--leise); margin-top: calc(1.5 * var(--u)); }
.zeiten p a { text-decoration: none; }

/* Fuß: mittig wie das Logo, Angaben durch Punkte getrennt */
.fuss { border-top: 1px solid var(--linie); padding-block: calc(3 * var(--u)) calc(3 * var(--u) + env(safe-area-inset-bottom, 0px)); font-size: 14px; color: var(--leise); }
.fuss .innen { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; row-gap: var(--u); text-align: center; }
.fuss .innen > * + *::before { content: "·"; padding-inline: calc(2 * var(--u)); color: var(--linie); }
.fuss b { color: var(--tinte); font-weight: 400; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--bordeaux); }

/* Seitenkopf der Unterseiten */
.seitenkopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--tinte); padding-top: calc(2 * var(--u)); margin-top: calc(3 * var(--u)); }
.seitenkopf h1 { font-size: 30px; }
.zurueck { scroll-margin-top: calc(2 * var(--u)); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); text-decoration: none; display: inline-block; margin-top: calc(3 * var(--u)); }
.zurueck:hover { color: var(--bordeaux); }

/* Künstler*innen-Übersicht: quadratische Kacheln, ganze Werke im Passepartout, Bildwechsel je Kachel */
.uebersicht { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(7 * var(--u)) var(--spalt); padding-block: calc(3 * var(--u)) calc(8 * var(--u)); }
.kachel { display: grid; gap: var(--u); align-content: start; }
.wechsel { position: relative; display: block; overflow: hidden; }
.kachel .wechsel { aspect-ratio: 1; display: grid; container-type: inline-size; }
.kachel .wechsel img { grid-area: 1 / 1; align-self: end; justify-self: start; width: auto; height: auto; max-width: 100%; max-height: 100%; max-height: 100cqw; opacity: 0; transition: opacity 4s ease-in-out; }
.kachel .wechsel img.an { opacity: 1; }
.kachel b { font-weight: 400; font-size: 17px; }
.kachel:hover b { color: var(--bordeaux); }

/* Künstlerseite: zuerst das Porträt */
.kuenstler-kopf { padding-block: calc(3 * var(--u)) calc(6 * var(--u)); row-gap: calc(3 * var(--u)); align-items: start; }
.portraet { grid-column: 1 / span 4; grid-row: 1 / span 2; margin: 0; }
.portraet img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--papier); }
.kuenstler-text { grid-column: 6 / span 6; display: grid; gap: calc(2 * var(--u)); align-content: start; }
.kuenstler-kopf > .imblog { grid-column: 6 / span 6; margin-top: 0; }
.kuenstler-text h1 { font-size: 40px; margin-top: -6px; }
.kuenstler-text .unterzeile { color: var(--leise); margin-top: calc(-1 * var(--u)); }
.kuenstler-text .text { display: grid; gap: calc(2 * var(--u)); font-size: 18px; line-height: 1.6; }
.kuenstler-text .text p { margin: 0; }
.kuenstler-text .text h2, .kuenstler-text .text h3 { font-size: 22px; margin-top: var(--u); }
.block { padding-block: 0 calc(8 * var(--u)); display: grid; gap: calc(3 * var(--u)); }
.block-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--tinte); padding-top: calc(2 * var(--u)); }
.block-kopf h2 { font-size: 24px; }
/* Werkkacheln: Unterschrift dicht am eigenen Bild (1 u), großer Abstand zur nächsten Reihe (8 u) */
.raster-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(8 * var(--u)) var(--spalt); align-items: end; }
.raster-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(3 * var(--u)) var(--spalt); }
.werkk { display: grid; gap: var(--u); align-content: start; }
/* Jede Reihe ist so hoch wie ihr höchstes Werk; alle Werke stehen auf der Grundlinie, links bündig mit dem Titel.
   Hochformate sind höchstens so hoch wie die Spalte breit (Containereinheit cqw). */
.werkk { container-type: inline-size; }
.werkk .bild { display: block; }
.werkk .bild img { width: auto; height: auto; max-width: 100%; max-height: 280px; max-height: 100cqw; }
.werkk .unter { display: grid; gap: 2px; font-size: 15px; line-height: 1.4; }
.werkk .t { font-weight: 400; }
.werkk .m { color: var(--leise); font-size: 14px; }
.werkk:hover .t { color: var(--bordeaux); }

.punkt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gruen); margin: 0 6px 1px 0; vertical-align: middle; }
.punkt.verkauft { background: var(--linie); }
.neu { color: var(--bordeaux); }

/* Kasten „Im Blog“ in der Textspalte */
.imblog { border-top: 1px solid var(--tinte); padding-top: calc(1.5 * var(--u)); margin-top: var(--u); display: grid; gap: var(--u); }
.imblog ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.imblog li { font-size: 15px; }
.imblog li span { color: var(--leise); }
.imblog a { text-decoration: none; border-bottom: 1px solid var(--linie); }
.imblog a:hover { color: var(--bordeaux); border-bottom-color: var(--bordeaux); }

/* Werkseite: Passepartout Spalten 1–7, Angaben Spalten 9–12, Spalte 8 frei.
   Oberkante des Labels = Oberkante des Bildes, Unterkante des Formulars = Unterkante des Bildes. */
.werk { margin-top: calc(3 * var(--u)); align-items: stretch; }
.werk-bild { grid-column: 1 / span 7; margin: 0; background: var(--papier); padding: var(--pp); display: grid; place-items: center; min-height: 100%; }
.werk-bild img { max-height: calc(100vh - 2 * var(--pp) - 120px); max-height: calc(100svh - 2 * var(--pp) - 120px); width: auto; max-width: 100%; object-fit: contain; }
.werk-info { grid-column: 9 / span 4; display: flex; flex-direction: column; padding-block: var(--pp); min-width: 0; }
.werk-info .label { line-height: 16px; }
.werk-info h1 { font-size: 32px; margin-top: calc(1.5 * var(--u)); }
.daten { display: grid; grid-template-columns: 9ch 1fr; gap: var(--u) calc(2 * var(--u)); margin: calc(3 * var(--u)) 0 0; font-size: 16px; }
.daten dt { color: var(--leise); }
.daten dd { margin: 0; }
.anfrage { margin-top: auto; padding-top: calc(5 * var(--u)); display: grid; gap: calc(2 * var(--u)); }
.anfrage h3 { border-top: 1px solid var(--tinte); padding-top: calc(1.5 * var(--u)); font-size: 12px; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.anfrage label { display: grid; gap: 2px; font-size: 13px; color: var(--leise); }
.anfrage input { background: transparent; border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; padding: 6px 0; font-size: 16px; color: var(--tinte); width: 100%; min-width: 0; }
.anfrage input:focus { outline: none; border-bottom-color: var(--tinte); }
.anfrage button { justify-self: start; background: var(--tinte); color: var(--papier); border: 0; border-radius: 0; padding: 12px 20px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.anfrage button:hover { background: var(--bordeaux); }
.anfrage button:disabled { opacity: .6; cursor: default; }
.anfrage small { display: block; font-size: 13px; color: var(--leise); line-height: 1.45; }
.anfrage small a { color: inherit; }
.anfrage .meldung { font-size: 14px; color: var(--gruen); }
.anfrage .meldung.err { color: var(--bordeaux); }
.anfrage .meldung:empty { display: none; }
.blaettern { grid-column: 1 / span 7; display: flex; justify-content: space-between; margin-top: calc(2 * var(--u)); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); font-variant-numeric: tabular-nums; }
.blaettern a { text-decoration: none; }
.blaettern a:hover { color: var(--bordeaux); }

/* Ansichten eines Werks (Details, Raum- und Atelieransichten): klein unter dem Werk, ohne Angaben */
.werk-ansichten { grid-column: 1 / span 7; margin-top: calc(3 * var(--u)); display: grid; gap: var(--u); }
.werk-ansichten ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--u); }
.werk-ansichten a { display: block; width: 88px; height: 88px; background: var(--papier); padding: 4px; }
.werk-ansichten img { width: 100%; height: 100%; object-fit: cover; }
.werk-ansichten a:hover { outline: 1px solid var(--tinte); }
.werk-text { padding-top: calc(6 * var(--u)); }
.werk-text-spalte { grid-column: 1 / span 7; border-top: 1px solid var(--tinte); padding-top: calc(2 * var(--u)); display: grid; gap: calc(2 * var(--u)); }
.werk-text .info { display: grid; gap: calc(2 * var(--u)); font-size: 18px; line-height: 1.6; }
.werk-text .info p { margin: 0; }
.werk-ende { height: calc(8 * var(--u)); }

/* Großansicht für Ansichten: ohne Angaben, ohne Formular, Blättern nur innerhalb der Ansichten */
.grossbild { position: fixed; inset: 0; z-index: 50; background: var(--wand); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: calc(2 * var(--u)) max(16px, 4vw) calc(2 * var(--u) + env(safe-area-inset-bottom, 0px)); }
.grossbild .oben { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.grossbild figure { margin: 0; display: grid; place-items: center; min-height: 0; overflow: hidden; padding-block: calc(2 * var(--u)); }
.grossbild img { width: auto; max-width: 100%; max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); object-fit: contain; background: var(--papier); padding: calc(2 * var(--u)); }
.grossbild .unten { display: flex; justify-content: space-between; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); font-variant-numeric: tabular-nums; }
.grossbild button { all: unset; cursor: pointer; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
.grossbild button:hover { color: var(--bordeaux); }
.grossbild button:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 3px; }
body.offen { overflow: hidden; }

/* Textseiten (Kontakt, Impressum, Datenschutz) */
.textseite { padding-block: calc(3 * var(--u)) calc(8 * var(--u)); row-gap: calc(2 * var(--u)); }
.textseite h1 { grid-column: 1 / span 3; font-size: 30px; }
.textseite .inhalt { grid-column: 4 / span 8; display: grid; gap: calc(1.5 * var(--u)); max-width: 70ch; }
.textseite .inhalt p { margin: 0; }
.textseite .inhalt h2 { font-size: 24px; }
.textseite .inhalt h3 { font-size: 18px; font-weight: 400; margin-top: var(--u); }
.textseite .inhalt strong { font-weight: 400; }
.textseite .inhalt a { color: var(--bordeaux); }

/* Blog: ruhiger Ton aus dem Beitragsbild, zwei schmale Bildfenster (Beitragsbild und ein Werk), die langsam schwenken.
   Bilder Spalten 1–6 (bleiben beim Lesen stehen), Text Spalten 7–12. Klare Rangfolge: Zeile, Titel, Unterzeile, Text. */
.blogliste { display: grid; gap: calc(5 * var(--u)); padding-block: calc(3 * var(--u)) calc(8 * var(--u)); }
.beitrag { --bg: var(--papier); background: var(--bg); color: var(--tinte); border-radius: 6px;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: calc(4 * var(--u));
  padding: calc(7 * var(--u)) calc(6 * var(--u)); scroll-margin-top: calc(3 * var(--u)); align-items: start; }
.fenster { grid-column: 1 / span 6; position: sticky; top: calc(3 * var(--u)); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spalt); }
.fenster.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fenster figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(44, 44, 44, .06); box-shadow: 0 12px 32px rgba(44, 44, 44, .14); }
.fenster.zwei figure { aspect-ratio: 2 / 3; }
.fenster a { display: block; width: 100%; height: 100%; }
.fenster img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .fenster img { animation: schwenk 38s ease-in-out infinite alternate; animation-delay: var(--v, 0s); }
  @keyframes schwenk { from { object-position: 0% 25%; transform: scale(1.04); } to { object-position: 100% 75%; transform: scale(1.12); } }
}
.beitrag .txt { grid-column: 7 / span 6; display: grid; align-content: start; min-width: 0; }
.beitrag.ohne .txt { grid-column: 3 / span 8; }
.beitrag .label { color: var(--leise); }
.beitrag h2 { font-size: 46px; line-height: 1.08; margin-top: calc(2 * var(--u)); text-wrap: pretty; }
.beitrag .unter { font-size: 22px; line-height: 1.35; color: #4a4846; margin-top: calc(1.5 * var(--u)); }
.beitrag .text { display: grid; gap: calc(2 * var(--u)); margin-top: calc(4 * var(--u)); font-size: 18px; line-height: 1.65; }
.beitrag .text p { margin: 0; }
.beitrag .text strong { font-weight: 500; }
.beitrag .text a { color: inherit; text-underline-offset: 3px; }
.beitrag .mehr { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; margin-top: calc(4 * var(--u)); justify-self: start; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.beitrag .mehr:hover { color: var(--bordeaux); }

/* Kontakt: Angaben und Foto nebeneinander */
.textseite.kontakt .inhalt { grid-column: 4 / span 4; align-self: start; }
.kontakt-bild { grid-column: 9 / span 4; grid-row: 1 / span 2; margin: 0; }
.kontakt-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.kontakt-bild figcaption { font-size: 13px; color: var(--leise); margin-top: var(--u); }

/* Einmalige, sanfte Bewegung beim Aufruf */
@media (prefers-reduced-motion: no-preference) {
  .einmal { animation: einmal 1.1s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--n, 0) * 70ms + 100ms); }
  @keyframes einmal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* iPad quer und kleine Rechner: Achse auf 10 Spalten */
@media (max-width: 1180px) {
  .achse, .karte, .zeiten.mitte > .achse { grid-column: 2 / span 10; }
}
@media (max-width: 1180px) and (min-width: 861px) {
  .kuenstler-text { grid-column: 6 / span 7; }
  .kuenstler-kopf > .imblog { grid-column: 6 / span 7; }
}
/* iPad hoch: Achse auf ganzer Breite, Karte bleibt quer */
@media (max-width: 960px) {
  .achse, .karte, .zeiten.mitte > .achse { grid-column: 1 / -1; }
  .karte .titel { font-size: 30px; }
}
@media (max-width: 860px) {
  .zeiten > div:first-child, .zeiten > div:last-child,
  .portraet, .kuenstler-text, .werk-bild, .werk-info, .blaettern, .werk-ansichten,
  .werk-text-spalte, .kuenstler-kopf > .imblog, .textseite h1, .textseite .inhalt,
  .beitrag > a, .beitrag > img, .beitrag .txt, .beitrag.ohne .txt { grid-column: 1 / -1; }
  .portraet { max-width: 320px; }
  .werk-info { padding-block: calc(3 * var(--u)) 0; }
  .blaettern { grid-row: 2; }
  .werk-ansichten { grid-row: 3; }
  .uebersicht { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(6 * var(--u)) calc(2 * var(--u)); }
  .raster-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(6 * var(--u)) calc(2 * var(--u)); }
  .raster-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fenster, .beitrag .txt, .beitrag.ohne .txt, .textseite.kontakt .inhalt, .kontakt-bild { grid-column: 1 / -1; grid-row: auto; }
  .fenster { position: static; }
  .kontakt-bild { max-width: 420px; }
  .beitrag { padding: calc(4 * var(--u)) calc(3 * var(--u)); }
  .beitrag h2 { font-size: 34px; }
  .beitrag .text { font-size: 17px; }
}
/* Handy: Karte steht hochkant (Bild oben, Text darunter), Fuß untereinander */
@media (max-width: 640px) {
  .menue { font-size: 11px; letter-spacing: .06em; }
  .menue nav { gap: 12px; }
  .logo { width: 100%; }
  .unterzeile-logo { font-size: 11px; letter-spacing: .1em; }
  .platz { margin-top: calc(3 * var(--u)); }
  .karte { aspect-ratio: auto; grid-template-columns: 1fr; }
  .karte-bild { aspect-ratio: 4 / 3; }
  .karte-bild img { inset: calc(2 * var(--u)); width: calc(100% - 4 * var(--u)); height: calc(100% - 4 * var(--u)); }
  .karte .txt { padding: 0 calc(3 * var(--u)) calc(3 * var(--u)); }
  .karte .titel { font-size: 28px; }
  .willkommen { padding-top: calc(5 * var(--u)); }
  .willkommen h2 { font-size: 30px; }
  .willkommen .text p { font-size: 18px; }
  .willkommen .zeichen { width: 140px; margin-right: -8px; }
  .bilderpaar { gap: calc(2 * var(--u)); }
  .uebersicht { grid-template-columns: 1fr; }
  .neuigkeiten .frage { flex-basis: 100%; }
  .neuigkeiten input { flex-basis: 90px; }
  .werk-ansichten a { width: 72px; height: 72px; }
  .fuss .innen { flex-direction: column; align-items: center; }
  .fuss .innen > * + *::before { content: none; }
  :root { --pp: 24px; }
}
/* Niedrige Bildschirme (iPad quer, kleine Rechner): Werkangaben etwas dichter, damit alles neben das Bild passt */
@media (min-width: 861px) and (max-height: 800px) {
  .werk-info h1 { font-size: 28px; margin-top: var(--u); }
  .daten { margin-top: calc(2 * var(--u)); gap: 4px calc(2 * var(--u)); }
  .anfrage { padding-top: calc(3 * var(--u)); gap: calc(1.5 * var(--u)); }
}
@media (max-width: 380px) { .menue { font-size: 10px; } .menue nav { gap: 9px; } }
@media (prefers-reduced-motion: reduce) { .buehne .klick, .wechsel img, .karte-bild img { transition: none; } }

/* Weicher Seitenwechsel: die alte Seite blendet in die neue über (Chrome, Edge, Safari 18.2+) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 280ms ease-in both seite-aus; }
::view-transition-new(root) { animation: 420ms ease-out both seite-ein; }
@keyframes seite-aus { to { opacity: 0; } }
@keyframes seite-ein { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}