/* ===========================================================================
   Andrea Brun – Malerei, Solothurn
   Statische Website, keine externen Abhängigkeiten.
   =========================================================================== */

/* --- Design-Tokens ------------------------------------------------------ */
:root {
  /* --paper ist das helle Beige hinter allem Text. Karten und Bildflächen
     stehen darauf in einem gedämpften Altrosa (--paper-2), --paper-3 ist die
     eine Spur sattere Variante für Hover-Zustände. */
  --paper:        #f9f4ea;
  --paper-2:      #f5e5e0;
  --paper-3:      #f5e3de;
  --ink:          #3b322b;
  --ink-soft:     #6d6154;
  /* Nicht heller wählen: auf dem Beige sonst unter 4.5:1 Kontrast. */
  --ink-faint:    #736553;
  --line:         #e8dcc6;
  --line-soft:    #f0e6d4;
  --accent:       #8d5c3d;
  --accent-soft:  #d9bc9a;
  /* Braune Fläche hinter den Bildern im Slider. Nicht heller wählen: ab etwa
     #634c3a verliert «Louise frisch frisiert» ihre Kante, weil das Gemälde
     selbst einen dunkelbraunen Grund hat. */
  --buehne:       #554132;
  --buehne-ink:   #f4eee2;
  --overlay:      rgba(40, 33, 27, .985);
  --overlay-ink:  #f4eee2;
  --shadow:       0 2px 5px rgba(88, 68, 44, .05), 0 12px 28px rgba(88, 68, 44, .06);

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                  Georgia, "Times New Roman", serif;
  --font-ui:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;

  --wrap:      1180px;
  --wrap-text: 680px;
  --gap:       clamp(1.25rem, 3vw, 2.25rem);
  --pad-x:     clamp(1.25rem, 5vw, 3.5rem);
  --radius:    9px;
  --radius-sm: 6px;
  --ease:      cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:       #1d1813;
    --paper-2:     #2a1f1d;
    --paper-3:     #332724;
    --ink:         #f0e7d7;
    --ink-soft:    #bcae99;
    --ink-faint:   #9d9079;
    --line:        #3b3125;
    --line-soft:   #332b20;
    --accent:      #d0a173;
    --accent-soft: #6b543c;
    --buehne:      #473529;
    --buehne-ink:  #f0e7d7;
    --overlay:     rgba(16, 13, 10, .985);
    --overlay-ink: #f0e7d7;
    --shadow:      0 2px 5px rgba(0, 0, 0, .3), 0 12px 28px rgba(0, 0, 0, .35);
  }
}

/* --- Reset / Basis ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

/* Zentrale Stellschraube für ALLE Schriftgrössen: sämtliche Grössen im
   Stylesheet sind in rem angegeben und hängen an diesem Wert. 100% wäre die
   Browser-Vorgabe (meist 16 px), 88% entspricht 14.08 px. Kleiner oder grösser
   stellen: nur diese eine Zahl ändern – seit August 2026 gilt das ausnahmslos,
   auch .brand in der Kopfzeile hängt jetzt daran.
   Ausgenommen bleiben allein die beiden Handy-Grössen der Navigation: die sind
   so klein, dass sie eine eigene Untergrenze brauchen (siehe dort). */
html {
  font-size: 88%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: clamp(1rem, .96rem + .18vw, 1.075rem);
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  /* Nicht blasser wählen: mit --line war die Unterstreichung auf dem Beige und
     erst recht auf dem Altrosa der Kästen kaum vom Hintergrund zu unter-
     scheiden – Verweise sahen aus wie gewöhnlicher Text. Betrifft den Ort der
     kommenden Ausstellung und den Rückweg auf der Fehlerseite. */
  text-decoration-color: var(--accent-soft);
  text-underline-offset: .22em;
  transition: text-decoration-color .2s var(--ease), color .2s var(--ease);
}
a:hover { text-decoration-color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
}

::selection { background: var(--accent-soft); color: var(--ink); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* --- Kopfzeile ---------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.25) blur(16px);
  -webkit-backdrop-filter: saturate(1.25) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease);
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--line-soft); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding-block: clamp(.9rem, 2.2vw, 1.35rem);
}

/* Der Name in der Kopfzeile. Bis August 2026 war diese Grösse von der
   allgemeinen Verkleinerung ausgenommen; auf Wunsch der Künstlerin ist sie
   jetzt eigens kleiner und hängt wie alles andere am Regler oben.
   Ergibt rund 20.5 px am Computer und 16.8 px auf dem Handy. */
.brand {
  font-family: var(--font-display);
  font-size: clamp(1.19rem, 1.03rem + .6vw, 1.455rem);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); }

.nav a {
  font-size: .83rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: .3em;
  position: relative;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--accent); }

/* Auf schmalen Schirmen kein Klappmenü: der Name steht oben, die vier Links
   stehen offen darunter. Der Umbruchpunkt liegt dort, wo Name und Menü in
   einer Zeile zu eng würden – darüber bleibt die einzeilige Kopfzeile. */
@media (max-width: 34em) {
  .site-header__inner {
    flex-direction: column;
    align-items: stretch;
    gap: .55rem;
    padding-block: .8rem .7rem;
  }
  .nav {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .35rem .9rem;
  }
  /* Eigene Untergrenze: das Menü ist der kleinste Text der ganzen Website und
     darf beim Verkleinern nicht mitschrumpfen, sonst wird es unlesbar.
     Die Werte halten rund 10.8 px bzw. 10.2 px – wie vor der Verkleinerung. */
  .nav a {
    font-size: .77rem;
    letter-spacing: .06em;
    padding-block: .35em;
  }
}

/* Ganz schmale Geräte (iPhone SE und ähnliche) */
@media (max-width: 22.5em) {
  .nav a { font-size: .725rem; letter-spacing: .04em; }
  .nav { gap: .35rem .6rem; }
}

/* --- Seitenkopf --------------------------------------------------------- */
.page-head {
  padding-top: clamp(3rem, 9vw, 6.5rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  max-width: var(--wrap-text);
}
.page-head h1 { font-size: clamp(2rem, 1.4rem + 3.2vw, 3.75rem); }
.page-head .lead {
  margin: 1.25rem 0 0;
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 46ch;
  text-wrap: pretty;
}
/* Sichtbarer Platzhalter für noch fehlende Angaben – vor dem Livegang entfernen */
.todo {
  background: #f7dfb6;
  color: #6b4b12;
  padding: .12em .6em;
  border-radius: 999px;
  font-size: .9em;
}

/* Seiten ohne sichtbaren Titel (Bilder, Ausstellungen, Über) brauchen oben
   eigenen Abstand – sonst klebt der erste Block an der Kopfzeile. Ersetzt seit
   15. August 2026 die frühere .about--kopflos und gilt jetzt für alle drei. */
.kopflos { padding-top: clamp(1.5rem, 4vw, 3rem); }

.eyebrow {
  font-size: .73rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.1rem;
}

/* --- Startseite: ein einzelnes Werk ------------------------------------- */
.startbild {
  padding-top: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  display: flex;
  justify-content: center;
}
.startbild figure {
  margin: 0;
  max-width: min(100%, 49.6rem);
}
.startbild img {
  width: 100%;
  /* Hochformate sollen nicht über den Bildschirm hinauswachsen.
     Seit 15. August 2026 um einen Fünftel kleiner als zuvor, auf Wunsch der
     Künstlerin. Die alten Werte waren max-width 62rem und diese Zeile
     min(78vh, 52rem) – beide mal 0.8 gerechnet. */
  max-height: min(62.4vh, 41.6rem);
  object-fit: contain;
  object-position: center top;
  border-radius: 0;
}
/* Auf dem Handy bleibt die alte Grösse: dort ist das Bild ohnehin von der
   Bildschirmbreite begrenzt und war nie zu gross. */
@media (max-width: 34em) {
  .startbild figure { max-width: 100%; }
  .startbild img { max-height: min(78vh, 52rem); }
}
/* Linksbündig unter dem Bild, wie der Bildbeschrieb im Bildwechsler. Der
   Rahmen um das Bild ist genau so breit wie das Bild selbst, die Beschriftung
   sitzt deshalb bündig an dessen linker Kante. */
.startbild figcaption {
  margin-top: .95rem;
  text-align: left;
}
/* Bildbeschrieb. Muss immer gleich gross bleiben wie .slide__titel und
   .slide__angaben im Slider – dort steht derselbe Beschrieb. */
.startbild__titel {
  display: block;
  /* Serifenlos, nicht in der Serifenschrift wie die übrigen Titel der Website
     – seit 15. August 2026 auf Wunsch der Künstlerin. Gilt gleichermassen für
     .slide__titel im Bildwechsler. */
  font-family: var(--font-ui);
  font-size: .9rem;
  line-height: 1.35;
}
.startbild__angaben {
  display: block;
  margin-top: .15rem;
  font-size: .725rem;
  color: var(--ink-faint);
}

/* --- Bilder-Slider ------------------------------------------------------ */
.slider {
  position: relative;
  padding-top: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  /* Eine konstante Bühnenhöhe für alle Bilder – sonst springt das Layout
     beim Blättern zwischen Hoch- und Querformat. Beide Werte hängen an
     diesen Variablen, damit die Pfeile immer gleich hoch sind wie die Bühne.

     Seit 15. August 2026 um einen Fünftel kleiner (vorher min(70vh, 44rem)).
     Die Höhe ist der entscheidende Wert: zehn der elf Bilder sind höhen-, nur
     das breite «Charlie und Fred» ist breitenbegrenzt. Damit auch dieses eine
     mitschrumpft, ist die Bühne zusätzlich in der Breite gedeckelt.
     Beide Zahlen gehören zusammen – beim Ändern immer beide anfassen.

     Der Deckel ist bewusst ein fester Wert und kein Prozentsatz: so greift er
     nur auf breiten Schirmen, wo er nötig ist. Auf dem iPad hochkant ist die
     Spalte ohnehin schmaler – dort würde ein Prozentsatz die Querformate
     zusätzlich einschnüren und oben und unten braune Balken stehen lassen. */
  --buehne-h: min(56vh, 35.2rem);
  --buehne-pad: clamp(.9rem, 2.5vw, 2rem);
  max-width: 62rem;
  margin-inline: auto;
}

.slide { margin: 0; }
/* Ohne JavaScript stehen alle Bilder untereinander. */
.slider:not([data-ready="true"]) .slide + .slide { margin-top: var(--gap); }

.slide__buehne {
  display: block;
  background: var(--buehne);
  border-radius: 0;
  padding: var(--buehne-pad);
}
.slide__buehne img {
  width: 100%;
  height: var(--buehne-h);
  object-fit: contain;
  border-radius: 0;
}

.slide__text {
  padding-top: .85rem;
  max-width: var(--wrap-text);
}
/* Gleiche Grössen wie .startbild__titel / .startbild__angaben – beim Ändern
   immer beide Stellen anfassen. */
.slide__titel {
  display: block;
  font-family: var(--font-ui);
  font-size: .9rem;
  line-height: 1.35;
}
.slide__angaben {
  display: block;
  margin-top: .15rem;
  font-size: .725rem;
  color: var(--ink-faint);
}

.slider__btn {
  position: absolute;
  top: clamp(1.5rem, 4vw, 3rem);   /* gleich wie padding-top von .slider */
  height: calc(var(--buehne-h) + 2 * var(--buehne-pad));
  width: clamp(2.75rem, 7vw, 4.5rem);
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--buehne-ink);
  opacity: .55;
  transition: opacity .25s var(--ease);
}
.slider__btn:hover { opacity: 1; }
.slider__btn svg { width: 28px; height: 28px; }
.slider__prev { left: 0; }
.slider__next { right: 0; }
.slider:not([data-ready="true"]) .slider__btn { display: none; }

.slider__zaehler {
  margin: .55rem 0 0;
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Auf schmalen Schirmen eine fast quadratische Bühne: so bleiben bei
   Querformaten oben und unten keine grossen braunen Flächen stehen. */
@media (max-width: 34em) {
  /* Handy unverändert: dort waren die Bilder nie zu gross. */
  .slider { --buehne-h: min(86vw, 60vh); max-width: 100%; }
}

/* --- Textseiten --------------------------------------------------------- */
.prose { max-width: var(--wrap-text); padding-bottom: clamp(3rem, 7vw, 5rem); }
.prose p { margin: 0 0 1.4em; text-wrap: pretty; }
.prose p:last-child { margin-bottom: 0; }
.prose h2 {
  font-size: clamp(1.4rem, 1.2rem + .9vw, 1.9rem);
  margin: 2.75rem 0 1rem;
}

/* Textblöcke bekommen eine eigene, etwas wärmere Beige-Fläche */
.prose--card {
  background: var(--paper-2);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.35rem, 4vw, 2.5rem);
  padding-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
.prose--card h2:first-child { margin-top: 0; }

.about {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: start;
  padding-bottom: clamp(3rem, 7vw, 5rem);
}
@media (max-width: 47em) { .about { grid-template-columns: 1fr; } }
/* Bilder bleiben eckig, nur Textkästen sind gerundet. */
.about__portrait { border-radius: 0; box-shadow: var(--shadow); }
.about figure { margin: 0; position: sticky; top: 7rem; }
@media (max-width: 47em) { .about figure { position: static; } }
.about figcaption {
  margin-top: .7rem;
  font-size: .8rem;
  color: var(--ink-faint);
}

/* --- Ausstellungen ------------------------------------------------------ */
/* Sämtliche Blöcke der Seite stehen in dieser einen Spalte: Terminkasten,
   Liste, Bild und Video. Die Spalte ist auf der Seite zentriert, die Schrift
   darin bleibt linksbündig. Weil alles darin liegt, brauchen die einzelnen
   Blöcke keine eigene Breitenangabe mehr – sie können gar nicht mehr
   auseinanderlaufen. */
.spalte {
  max-width: var(--wrap-text);
  margin-inline: auto;
  /* Luft nach unten, sonst klebt die Videounterschrift als letzte Zeile der
     Seite am Fensterrand. Gleicher Wert wie am Fuss der übrigen Seiten. */
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

.upcoming {
  background: var(--paper-2);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 2.4rem) clamp(1.35rem, 4vw, 2.4rem);
  margin-bottom: clamp(3rem, 7vw, 4.5rem);
}
/* Der Name der Ausstellung. Seit 15. August 2026 ein h3, weil die Zeile
   «Kommende Ausstellung» als h2 über den Kasten gewandert ist. */
.upcoming h3 {
  font-size: clamp(1.35rem, 1.15rem + .9vw, 1.8rem);
  margin-bottom: 1.4rem;
}

.upcoming__facts {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: .5rem 1.25rem;
  margin: 0;
}
.upcoming__facts dt {
  font-size: .73rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: .32em;
}
.upcoming__facts dd { margin: 0; }

@media (max-width: 30em) {
  .upcoming__facts { grid-template-columns: 1fr; gap: .1rem; }
  .upcoming__facts dd { margin-bottom: .85rem; }
  .upcoming__facts dd:last-child { margin-bottom: 0; }
}

.section-title {
  font-size: .78rem;
  font-family: var(--font-ui);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1rem;
}

/* Statt Trennlinien: abwechselnd zart getönte Zeilen mit runden Ecken */
.exhibitions { list-style: none; margin: 0; padding: 0; }
.exhibitions li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.25rem;
  padding: .95rem clamp(.9rem, 2.5vw, 1.3rem);
  border-radius: var(--radius-sm);
  align-items: baseline;
}
.exhibitions li:nth-child(odd) { background: var(--paper-2); }
.exhibitions .year {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.exhibitions .venue { text-wrap: pretty; }
.exhibitions li[data-current="true"] .year,
.exhibitions li[data-current="true"] .venue { color: var(--ink); }
.exhibitions li[data-current="true"] .venue { font-weight: 500; }

@media (max-width: 30em) {
  .exhibitions li { grid-template-columns: 1fr; gap: .15rem; }
}

/* Bild und Video schliessen unten an die Terminliste an. Das Video nimmt die
   volle Breite der Spalte ein, ist also genau so breit wie die Terminliste
   darüber. Auf dem Handy füllen beide die ganze Breite. */
.feature {
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
}
/* Das Artbox-Foto darf schmaler stehen als das Video – und muss es auch:
   im Original ist es nur 480 × 480 px gross, breiter würde es unscharf
   hochgerechnet. Es steht in der Spalte zentriert. */
.feature--bild { max-width: 480px; }
.feature figure { margin: 0; }
.feature img, .feature video {
  border-radius: 0;
  width: 100%;
  background: var(--paper-2);
  box-shadow: var(--shadow);
}
.feature figcaption {
  margin-top: .75rem;
  font-size: .82rem;
  color: var(--ink-faint);
}

/* --- Kleingedrucktes ---------------------------------------------------- */
/* Eigener Fussbereich am Seitenende: deutlicher Abstand nach oben und eine
   feine Linie, damit der Hinweis nicht zum Bild darüber zu gehören scheint. */
.kleingedruckt {
  max-width: var(--wrap-text);
  margin: clamp(3.5rem, 9vw, 6.5rem) 0 0;
  padding-top: clamp(1.35rem, 3vw, 1.9rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--line-soft);
  font-size: .78rem;
  line-height: 1.7;
  color: var(--ink-faint);
  text-wrap: pretty;
}

/* --- Bewegung reduzieren ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* --- Druck -------------------------------------------------------------- */
@media print {
  .slider__zaehler { display: none !important; }
  body { background: #fff; color: #000; }
  /* Beim Drucken alle Bilder zeigen, nicht nur das aktuelle */
  .slide[hidden] { display: block !important; }
  .slide { break-inside: avoid; page-break-inside: avoid; }
  .slide__buehne { background: none; padding: 0; }
  .slide__buehne img, .startbild img { height: auto; max-height: 20cm; }
}