/* =====================================================================
   Andreas Hinkel – Malerei · Stylesheet
   Aufbau: 1) Variablen  2) Grundlagen  3) Layout  4) Kopf/Nav
           5) Hero  6) Sektionen  7) Galerie  8) Lightbox
           9) Kontakt/Footer  10) Animationen  11) Responsive
   Ansatz: Mobile-first, dunkel & elegant, keine externen Ressourcen.
   ===================================================================== */

/* ---------- 1) Variablen ---------- */
/* ---------- Schrift für die Überschrift "Kunsthaus No 7" ----------

   Limelight, selbst ausgeliefert aus fonts/ - siehe fonts/HERKUNFT.txt
   für Lizenz und Begründung.

   Gewünscht war "Broadway". Die gehört Monotype und darf nicht in eine
   Webseite eingebettet werden; Limelight ist die frei lizenzierte
   Entsprechung derselben Art-Deco-Anlage.

   !! Hier NIEMALS eine Adresse von fonts.googleapis.com oder
   fonts.gstatic.com eintragen !! Die Datenschutzerklärung sagt zu,
   dass keine Daten an Dritte gehen, und die CSP erlaubt nur
   "font-src 'self'" - der Browser würde es stumm blockieren.

   font-display: swap - die Überschrift steht sofort in der
   Systemschrift da und wird ersetzt, sobald die Datei geladen ist.
   Kein Zeitfenster, in dem die Zeile unsichtbar ist. */
@font-face {
  font-family: "Limelight";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/limelight-latin.woff2") format("woff2");
  /* Nur Latin: "Kunsthaus No 7" braucht nichts weiter. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}

:root {
  /* Warme, dunkle Palette – passend zu Malerei */
  --bg:        #131211;   /* warmes Fast-Schwarz */
  --bg-2:      #191817;   /* Sektions-Wechsel */
  --surface:   #201e1e;   /* Karten */
  --line:      #ffffff12; /* dezente Linien */
  --text:      #ece8e5;   /* warmes Off-White */
  --text-soft: #ada7a3;   /* gedämpft */
  --muted:     #837d7a;
  /* Ultramarin statt Rot – auf Wunsch von Andreas Hinkel.

     ZWEI Töne, weil die Farbe zwei gegenläufige Aufgaben hat: als
     Fläche muss weißer Text darauf lesbar sein, als Schrift muss sie
     selbst auf dem dunklen Grund lesbar sein. Ein Ton kann nur eines
     davon. Das Rot vorher hatte dieselbe Aufteilung.

     Gemessen (Grund #131211, weiß #ffffff):

                    als Schrift   weiß darauf
       Rot #cf382e      3,79          4,93     (war --accent)
       Rot #e5564a      5,13          3,64     (war --accent-2)
       Blau #3d5afe     3,65          5,13     (ist --accent)
       Blau #5c7cfa     5,10          3,67     (ist --accent-2)

     Die Blautöne bilden das Verhältnis des Rots also fast genau ab -
     keine Rolle wird schlechter. Echtes Ultramarin als Pigment
     (#120A8F) käme auf 1,31 als Schrift und wäre unsichtbar.

     --accent ist für Flächen, Rahmen und große Displayschrift.
     --accent-2 für Fließtext, Links und kleine Auszeichnungen. Kleine
     Texte, die vorher --accent nutzten, stehen jetzt auf --accent-2:
     bei 3,79 lagen sie schon mit dem Rot unter den 4,5, die WCAG AA
     für normalen Text fordert. */
  --accent:    #3d5afe;   /* Ultramarin – Flächen, Rahmen, Displayschrift */
  --accent-2:  #5c7cfa;   /* helleres Ultramarin – Text, Links, Hover */

  /* Fehlerfarbe – bewusst NICHT blau.

     Gewünscht war, alles Rote auf Blau zu setzen. Für Meldungen des
     Kontaktformulars wäre das aber ein Rückschritt: Blau ist jetzt
     die Hausfarbe, ein Fehler in Hausfarbe liest sich wie eine
     normale Auszeichnung und nicht wie ein Hinweis, dass etwas nicht
     stimmt. Rot ist hier kein Gestaltungsmittel, sondern ein Signal.

     Es ist genau der Ton, der vorher --accent-2 war: gemessen 5,13
     auf dem Seitengrund und damit über den 4,5 für normalen Text. */
  --fehler:    #e5564a;   /* Rot – nur für Fehlermeldungen */
  /* Dunkles Ultramarin, in der Helligkeit dem früheren #9C221A
     nachgebildet (0,0838 gegen 0,0829) - Verläufe und der
     Fokuszustand bleiben damit gleich gewichtet. Weißer Text
     darauf: 7,85 statt vorher 5,54, also besser. */
  --accent-deep:#2b3fcb;  /* dunkles Ultramarin für Verläufe */
  --shadow:    0 18px 50px -20px rgba(0,0,0,.78);

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

  --wrap: 1180px;
  --radius: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2) Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; scrollbar-color: var(--accent) #1b1a1a; scrollbar-width: thin; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Roter Scrollbar (Chromium/Brave/Edge/Safari) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #1b1a1a; }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 8px; border: 3px solid #1b1a1a; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-2); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: var(--accent-2); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--text); }

h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; line-height: 1.12; letter-spacing: .01em; margin: 0 0 .5em; }
h2 { font-size: clamp(1.9rem, 5vw, 3rem); }
/* Die Seitenüberschrift in .section-head ist seit der SEO-Anpassung
   eine h1 (vorher h2) – Suchmaschinen brauchen je Seite genau eine.
   Ohne diese Zeile fiele sie auf die Browser-Vorgabe zurück und wäre
   auf breiten Bildschirmen kleiner als vorher. Optisch ändert sich
   damit nichts. */
.section-head h1 { font-size: clamp(1.9rem, 5vw, 3rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1rem; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

.muted { color: var(--muted); font-size: .92em; }


/* Für Suchmaschinen und Screenreader sichtbar, optisch nicht.
   render.php legt damit Titel, Jahr und Maß unter jede Kachel: Text,
   den Suchmaschinen dem Bild zuordnen können, ohne das Raster zu
   verändern. NICHT display:none - das würde den Text auch für
   Screenreader und Suchmaschinen entfernen. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  /* Weiß, nicht dunkel: dunkler Text auf dem Ultramarin ergibt nur
     3,65:1 und liegt damit unter den 4,5 für normalen Text. Weiß
     darauf sind 5,13:1 - und passt bei einem satten Blau ohnehin
     besser als ein dunkler Ton, der stumpf wirkt. */
  background: var(--accent); color: #fff; padding: .7rem 1.1rem; font-weight: 600;
}
.skip-link:focus { left: 1rem; top: 1rem; }

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

/* ---------- 3) Buttons ---------- */
.btn {
  display: inline-block; padding: .8rem 1.5rem; border-radius: var(--radius);
  font-weight: 600; font-size: .95rem; letter-spacing: .02em; cursor: pointer;
  border: 1px solid transparent; transition: all .25s var(--ease);
}
/* Weisse Schrift, nicht die dunkle. Dunkel auf dem Rot ergab nur
   3,79:1 Kontrast und verfehlte damit die Mindestanforderung von
   4,5:1 fuer normalen Text (WCAG 2.1 AA) - der Text war schlicht
   schwer zu lesen. Weiss auf demselben Rot bringt 4,93:1.

   Beim Ueberfahren wird der Grund DUNKLER statt heller: das hellere
   accent-2 haette den Kontrast wieder unter die Grenze gedrueckt.
   Betrifft vor allem den Absenden-Knopf des Kontaktformulars. */
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover,
.btn-primary:focus-visible { background: var(--accent-deep); color: #fff; transform: translateY(-2px); }
.btn-ghost { border-color: #ffffff30; color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-2); transform: translateY(-2px); }

/* ---------- 4) Kopf / Navigation ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .35s var(--ease), backdrop-filter .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(19,18,17,.82);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: .9rem 0; }

.brand { display: flex; flex-direction: row; align-items: center; gap: .65rem; color: var(--text); }
.brand-logo { height: 36px; width: auto; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--font-serif); font-size: 1.25rem; letter-spacing: .02em; }
.brand-sub { font-size: .72rem; text-transform: uppercase; letter-spacing: .32em; color: var(--accent-2); }

.main-nav { display: flex; align-items: center; gap: 1.6rem; }
.main-nav > a {
  color: var(--text-soft); font-size: .95rem; letter-spacing: .02em; position: relative; padding: .2rem 0;
  /* Kein Umbruch mitten im Namen: "Kunsthaus No 7" darf nicht als
     "Kunsthaus" / "No 7" auf zwei Zeilen zerfallen. */
  white-space: nowrap;
}

/* Zwischen Burger-Menü (bis 720px) und breitem Bildschirm wird die
   Kopfzeile eng. "Kunsthaus No 7" ist rund 40px breiter als vorher
   "Kunsthaus"; zusammen mit Logo, Namenszug und Sprachumschalter
   reicht der Platz in diesem Bereich knapp. Statt die Punkte umbrechen
   oder überlaufen zu lassen, rücken sie hier enger zusammen und werden
   eine Spur kleiner - das bringt rund 100px zurück und ist mehr als
   nötig. Ab 1081px gilt wieder die normale Darstellung. */
@media (min-width: 721px) and (max-width: 1080px) {
  .main-nav { gap: 1.05rem; }
  .main-nav > a { font-size: .88rem; }
}
.main-nav > a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px;
  background: var(--accent); transition: width .25s var(--ease);
}
.main-nav > a:hover, .main-nav > a.active { color: var(--text); }
.main-nav > a:hover::after, .main-nav > a.active::after { width: 100%; }

.lang-switch {
  background: none; border: 1px solid #ffffff26; color: var(--text-soft);
  padding: .35rem .6rem; border-radius: var(--radius); font-size: .8rem; cursor: pointer;
  font-family: var(--font-sans); letter-spacing: .05em; transition: border-color .2s var(--ease);
}
.lang-switch:hover { border-color: var(--accent); color: var(--text); }
.lang-switch .sep { opacity: .4; margin: 0 .15em; }
.lang-switch .lang-de, .lang-switch .lang-en { transition: color .2s; }
body[data-lang="de"] .lang-en { color: var(--muted); }
body[data-lang="en"] .lang-de { color: var(--muted); }
body[data-lang="de"] .lang-de, body[data-lang="en"] .lang-en { color: var(--accent-2); }

.nav-toggle { display: none; }

/* Rechtliches erscheint nur im Burger-Menü. Auf dem Desktop steht es
   in der Fußzeile; in der waagerechten Leiste wäre es doppelt und
   würde die Hauptpunkte verwässern. */
.nav-legal { display: none; }

/* "Startseite" erscheint nur im Burger-Menü. In der waagerechten
   Leiste ab 721px führt schon das Logo links zur Startseite – dort
   wäre der Punkt doppelt und würde die Leiste unnötig füllen. */
.nav-home { display: none; }

/* ---------- 5) Hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  padding-bottom: clamp(3rem, 9vh, 7rem); overflow: hidden;
}


.hero-content { position: relative; }

.hero-title { font-size: clamp(2.3rem, 8.5vw, 6rem); margin: 0 0 1rem; letter-spacing: .01em; word-break: break-word; }
.hero-lead { max-width: 42ch; color: var(--text-soft); font-size: clamp(1.05rem, 2.4vw, 1.35rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }


@keyframes bob { 0%,100%{ transform: translate(-50%,0); } 50%{ transform: translate(-50%,8px); } }

/* ---------- 6) Sektionen ---------- */
.section { padding: clamp(4rem, 10vw, 8rem) 0; }
.section:nth-of-type(even) { background: var(--bg-2); }

.section-head { max-width: 62ch; margin-bottom: 3rem; }
.eyebrow { color: var(--accent-2); text-transform: uppercase; letter-spacing: .28em; font-size: .74rem; margin: 0 0 .6rem; }
.section-intro { color: var(--text-soft); font-size: 1.1rem; }

/* ---------- 7) Galerie ---------- */
.year-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.2rem; }
.year-filter button {
  background: none; border: 1px solid #ffffff1f; color: var(--text-soft);
  padding: .5rem 1.1rem; border-radius: 100px; cursor: pointer; font-size: .9rem;
  font-family: var(--font-sans); transition: all .22s var(--ease);
}
.year-filter button:hover { border-color: var(--accent); color: var(--text); }
/* color: #fff statt dunkel - siehe Begründung beim skip-link.

   KEIN font-weight hier. Fetter Text ist breiter, der ausgewählte Knopf
   wuchs dadurch, und weil die Reihe umbricht, rutschten alle anderen
   Knöpfe in andere Zeilen - auf dem Handy sprang die Auswahl bei jedem
   Tippen. Nachgestellt an den Bildschirmfotos: mit "2021" standen fünf
   Knöpfe in der ersten Zeile, mit "2024" nur vier.

   Die blaue Fläche mit weißer Schrift ist Auszeichnung genug; ein
   zweites Merkmal, das die Breite verändert, braucht es nicht. */
.year-filter button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- Jahrgänge als Auswahlliste (schmale Bildschirme) ----------
   Auf breiten Bildschirmen die Knopfreihe, auf schmalen die Liste.
   Beide stehen im HTML, sichtbar ist immer genau eine. */
.year-select { display: none; }

@media (max-width: 600px) {
  .year-filter { display: none; }
  .year-select {
    display: block; width: 100%; margin-bottom: 2.2rem;
    background: #191817; border: 1px solid #ffffff1f; border-radius: 100px;
    color: var(--text); font: inherit; font-size: .95rem;
    padding: .7rem 2.6rem .7rem 1.1rem; cursor: pointer;
    /* Eigenes Pfeilsymbol, damit es zur Seite passt. Als data:-Adresse
       eingebettet - die CSP erlaubt "img-src 'self' data:", ein
       nachgeladenes Bild waere blockiert. */
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23ada7a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.1rem center;
  }
  .year-select:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent-2); outline-offset: 2px; }
  /* Die Liste selbst zeichnet das Betriebssystem - dort gilt der
     Systemhintergrund, deshalb hier eine lesbare Kombination. */
  .year-select option { background: #191817; color: var(--text); }
}




@keyframes shimmer { to { background-position: -200% 0; } }




/* ---------- Vita ---------- */
.vita-grid { display: grid; gap: 2.5rem; }
.vita-text .lead { font-size: 1.2rem; color: var(--text); }
.timeline { list-style: none; padding: 0; margin: 1rem 0 1rem; }
.timeline li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.t-year { color: var(--accent-2); font-family: var(--font-serif); font-size: 1.05rem; }
.t-desc { color: var(--text-soft); }

.vita-portrait { margin: 0; }
.vita-portrait img { border-radius: var(--radius); border: 1px solid var(--line); width: 100%; height: auto; }
.vita-portrait figcaption { color: var(--muted); font-size: .82rem; margin-top: .5rem; }


/* ---------- 9) Kontakt / Footer ---------- */
.contact-grid { display: grid; gap: 2.5rem; }
.contact-list { display: grid; gap: 1.3rem; margin: 0; }
.contact-list dt { color: var(--accent-2); font-size: .74rem; text-transform: uppercase; letter-spacing: .18em; margin-bottom: .2rem; }
.contact-list dd { margin: 0; font-size: 1.08rem; }

/* Telefon, Mobil, E-Mail und Instagram sind Links und wären sonst rot –
   Adresse und Öffnungszeiten sind es nicht. Damit die Angaben
   einheitlich aussehen, stehen auch die Links in Textfarbe; die
   Hervorhebung übernimmt der Hover. */
.contact-list dd a { color: var(--text); text-decoration: none; }
.contact-list dd a:hover,
.contact-list dd a:focus-visible { color: var(--accent-2); }


/* Schlanker Footer (Höhe ~halbiert, einzeilig) */
/* Klebende Fußzeile: reicht der Inhalt nicht bis zum unteren Rand -
   etwa beim Verkleinern der Browser-Ansicht -, saß die Fußzeile
   vorher mitten auf der Seite. main wächst jetzt in die Lücke.

   Gilt für alle Seiten. */
body { min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
body > .site-footer { margin-top: auto; flex: 0 0 auto; }

.site-footer { border-top: 1px solid var(--line); padding: 1.5rem 0; background: var(--bg); }
.footer-inner { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; align-items: center; justify-content: space-between; }
.footer-brand { font-family: var(--font-serif); margin: 0; font-size: .95rem; }
.footer-nav { display: flex; gap: 1.2rem; }
.footer-nav a { color: var(--text-soft); font-size: .85rem; }
.footer-copy { color: var(--muted); font-size: .78rem; margin: 0; }

/* -----------------------------------------------------------------
   Besuchszähler in der Fußzeile – vierte Spalte zwischen den
   rechtlichen Links und dem Copyright.

   Dezent gehalten: gedämpfte Farbe wie die Nachbarn, erst beim
   Überfahren tritt er hervor. Die Ziffern stehen in tabellarischer
   Breite, damit beim Hochzählen nichts springt.
   ----------------------------------------------------------------- */
.footer-count {
  display: inline-flex; align-items: center; gap: .45rem; margin: 0;
  color: var(--muted); font-size: .78rem; letter-spacing: .02em;
  transition: color .3s var(--ease);
}
.footer-count[hidden] { display: none; }
.footer-count:hover { color: var(--text-soft); }

.fc-icon {
  width: 15px; height: 15px; flex: none; color: var(--accent-2);
  opacity: .75; transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.footer-count:hover .fc-icon { opacity: 1; transform: scale(1.08); }

.fc-num {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
  color: var(--text-soft); font-weight: 600;
  transition: color .3s var(--ease);
}
.footer-count:hover .fc-num { color: var(--text); }

/* Kurzes Aufleuchten, wenn der Zähler seinen Endwert erreicht hat. */
.fc-num.is-done { animation: fcPulse .6s var(--ease); }
@keyframes fcPulse {
  0%   { color: var(--text-soft); text-shadow: none; }
  35%  { color: var(--accent-2); text-shadow: 0 0 12px rgba(61,90,254,.55); }
  100% { color: var(--text-soft); text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-num.is-done { animation: none; }
  .fc-icon, .footer-count { transition: none; }
}


/* ---------- Rechtsseiten (Impressum / Datenschutz) ---------- */
.legal-page { padding-top: 72px; }
.legal { max-width: 780px; padding-top: clamp(2rem, 6vw, 4rem); padding-bottom: 4rem; }
.legal h1 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: 1.5rem; }
.legal h2 { font-size: 1.25rem; color: var(--accent-2); margin-top: 2.2rem; }
.legal p { color: var(--text-soft); }
.legal a { color: var(--accent-2); }
.legal-back { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* ---------- 8) Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(9,9,9,.94); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s var(--ease);
  /* Doppeltipp soll das Bild zoomen, nicht die ganze Seite.
     "manipulation" schaltet den Doppeltipp-Zoom des Browsers ab und
     lässt Scrollen und Pinch unberührt. */
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  /* Der Rahmen hält den Platz frei, in dem Schließen-Knopf, Pfeile und
     Lupen liegen - sonst überlagern sie das Bild. */
  /* Oben Platz für den Schließen-Knopf. Unten reicht wenig: die
     Lupenleiste gehört zum figure und steht im normalen Fluss, die
     Pfeile werden per bottom auf dieselbe Höhe gelegt. */
  padding: 4.8rem 1.1rem 1.4rem;
}
@media (min-width: 721px) {
  /* Auf dem Desktop stehen die Pfeile links und rechts neben dem Bild. */
  .lightbox { padding: 1.5rem 6rem 1.5rem; }
}

/* -----------------------------------------------------------------
   Bedienleiste unter dem Bild.

   Pfeile und Lupen liegen in EINEM Flex-Container. Vorher waren die
   Pfeile absolut positioniert und die Lupen im Textfluss – auf dem
   Telefon standen sie dadurch auf leicht verschiedenen Höhen. Jetzt
   sitzen sie zwangsläufig auf einer Linie.

   Auf dem Desktop werden die Pfeile aus dem Fluss genommen und wieder
   links und rechts neben das Bild gesetzt; die Lupen bleiben mittig.
   ----------------------------------------------------------------- */
.lb-bar {
  flex: 0 0 auto; position: static;
  display: flex; align-items: center; gap: 1rem;
  width: 100%; max-width: 1600px; margin-top: .9rem;
}
.lb-bar .lb-zoom { flex: 1 1 auto; margin-top: 0; }
/* WICHTIG: hidden muss die Lightbox wirklich ausblenden, sonst fängt sie
   (unsichtbar, opacity 0) alle Klicks der Seite ab. */
.lightbox[hidden] { display: none !important; }
.lightbox:not([hidden]) { animation: fade .3s var(--ease) forwards; }
@keyframes fade { to { opacity: 1; } }
/* Das figure hat eine FESTE Höhe und ist eine Flex-Spalte: der
   Bildbereich nimmt den Rest, die Bildunterschrift sitzt unten.

   Vorher bestimmte die Unterschrift die Höhe des figure, und weil die
   Lightbox das figure zentriert, wanderte das BILD nach oben, sobald
   der Titel zweizeilig wurde ("das ist eine Kopie von einer Kopie …").
   Jetzt bleibt der Bildbereich immer gleich groß und das Bild immer
   in seiner Mitte – egal wie lang der Titel ist. */
.lb-figure {
  margin: 0; width: 100%; flex: 1 1 auto; min-height: 0; max-width: 1600px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.lb-stage {
  flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
  touch-action: none;                 /* eigene Pinch-/Ziehgesten */
}
.lb-figure img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; border-radius: 2px; box-shadow: var(--shadow);
  transform-origin: center center;
  will-change: transform;
  -webkit-user-drag: none; user-select: none;
}
/* Ohne Übergang beim Ziehen und beim Pinchen – sonst ruckelt es. */
.lb-figure img.is-animating { transition: transform .22s var(--ease); }

/* Solange das neue Bild lädt, bleibt es unsichtbar.

   Ein <img> zeigt nach dem Setzen einer neuen Adresse weiter das ALTE
   Bild, bis das neue dekodiert ist. Beim Öffnen der Vollansicht und
   beim Blättern blitzte deshalb kurz das zuletzt betrachtete Werk auf.

   Nur "opacity", nicht "visibility" oder "display": das Bild muss
   seine Abmessungen behalten, sonst kann fitImage() in js/gallery.js
   nicht rechnen. */
.lb-figure img.is-loading { opacity: 0; }
.lb-figure img:not(.is-loading) { transition: opacity .18s var(--ease); }
.lb-stage.is-zoomed { cursor: grab; }
.lb-stage.is-grabbing { cursor: grabbing; }

.lb-figure figcaption {
  flex: 0 0 auto; color: var(--text-soft); margin-top: 1rem; font-size: .95rem;
  max-width: 90vw;
}
/* ---------- Lupen-Bedienung der Lightbox ---------- */
.lb-zoom {
  flex: 0 0 auto; display: flex; gap: .5rem; justify-content: center;
  margin-top: .9rem; position: relative; z-index: 10;
}
.lb-zoom-btn {
  width: 42px; height: 42px; padding: 0; cursor: pointer;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(19,18,17,.72); border: 1px solid rgba(61,90,254,.55);
  color: var(--text); transition: all .2s var(--ease);
  /* Verhindert, dass ein Doppeltipp auf den Knopf die ganze Seite zoomt. */
  touch-action: manipulation;
}
.lb-zoom-btn svg { width: 21px; height: 21px; }
.lb-zoom-btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
.lb-zoom-btn:disabled { opacity: .32; cursor: default; }

/* Auf dem Touchgerät etwas größer – Daumen brauchen Fläche. */
@media (max-width: 720px) {
  .lb-zoom { margin-top: .7rem; gap: .7rem; }
  .lb-zoom-btn { width: 48px; height: 48px; }
  .lb-zoom-btn svg { width: 24px; height: 24px; }
}

/* z-index 10: der Schließen-Knopf liegt IMMER über dem Bild. Ohne das
   verschwand er hinter dem hochskalierten Bild, sobald es breiter wurde
   als der frühere feste Rahmen. */
.lb-close, .lb-nav {
  background: rgba(19,18,17,.72); border: 1px solid rgba(61,90,254,.55); color: var(--text);
  cursor: pointer; border-radius: 50%; display: grid; place-items: center;
  transition: all .2s var(--ease);
  touch-action: manipulation; padding: 0;
}
/* Die Pfeile waren die Schriftzeichen ‹ und › – die haben eigene
   Seitenabstände und eine eigene Grundlinie und sitzen deshalb nie
   mittig in einem runden Knopf. Jetzt sind es SVG-Pfeile, die im
   Ansichtsfenster selbst zentriert sind. */
.lb-close svg, .lb-nav svg { width: 45%; height: 45%; display: block; }
.lb-nav svg { width: 42%; height: 42%; }

.lb-close { position: absolute; z-index: 10; top: 1.2rem; right: 1.2rem; width: 3rem; height: 3rem; }
.lb-nav   { flex: 0 0 auto; width: 3.4rem; height: 3.4rem; }
.lb-close:hover, .lb-nav:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

@media (min-width: 721px) {
  /* Desktop: Pfeile aus dem Fluss nehmen und neben das Bild setzen.
     Bezug ist die Lightbox selbst – .lb-bar bleibt bewusst static. */
  .lb-nav { position: absolute; z-index: 10; top: 50%; transform: translateY(-50%); }
  .lb-prev { left: 1rem; }
  .lb-next { right: 1rem; }
}

@media (max-width: 720px) {
  /* Telefon: alles in einer Reihe – Pfeil, Lupen, Pfeil. */
  .lb-nav { width: 48px; height: 48px; }
  .lb-close { top: 1rem; right: 1rem; }
  .lb-bar { gap: .6rem; }
}

/* ---------- 10) Animationen (Reveal beim Scrollen) ---------- */
/* Nur ausblenden, wenn Skripte überhaupt laufen können.

   Ohne diesen Vorbehalt wäre der Inhalt bei abgeschaltetem JavaScript
   dauerhaft unsichtbar (opacity: 0) - es gäbe niemanden, der die
   Klasse "in" setzt. Kennt ein Browser die Abfrage nicht, wird der
   ganze Block ignoriert und der Inhalt ist ebenfalls sichtbar. Beide
   Ausgänge führen also zum sicheren Ergebnis.

   Ein Inline-<style> in <noscript> wäre die übliche Lösung, scheitert
   hier aber an der Content-Security-Policy (style-src 'self'). */
@media (scripting: enabled) {
  .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }

}

/* ---------- 11) Responsive: Desktop-Layouts ---------- */
@media (min-width: 760px) {
  .vita-grid { grid-template-columns: 1.5fr 1fr; align-items: start; }
  .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .contact-list { grid-template-columns: 1fr 1fr; }
}

/* ---------- Unterseiten: fester, solider Header ---------- */
.subpage { padding-top: 68px; }
.subpage .site-header {
  background: rgba(19,18,17,.92); backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.main-nav a.active { color: var(--text); }
.main-nav a.active::after { width: 100%; }

/* ---------- Motto-Hero (Startseite) ---------- */
.hero-motto-section {
  min-height: 100svh; align-items: center; text-align: center;
  background: var(--bg);
  /* Der Seitenkopf liegt fixiert darüber. Ohne diesen Abstand schiebt
     sich der mittig ausgerichtete Inhalt auf niedrigen Bildschirmen
     (echtes Telefon mit Browserleisten) unter den Kopf - auf dem
     Desktop und im Simulator fällt das nicht auf, weil dort mehr Höhe
     zur Verfügung steht. --header-h setzt js/main.js beim Laden und
     bei jeder Größenänderung. */
  padding-top: calc(var(--header-h, 64px) + 1rem);
}
.hero-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(61,90,254,.09) 30%, rgba(61,90,254,.11) 46%, rgba(61,90,254,.05) 60%, transparent 78%);
}
.hero-motto-section .hero-content { position: relative; z-index: 1; }
.hero-content.center { display: flex; flex-direction: column; align-items: center; }
.motto-img { width: min(80vw, 520px); height: auto; margin: .4rem 0 1.6rem; filter: drop-shadow(0 8px 26px rgba(0,0,0,.55)); }
.hero-motto-section .hero-lead { margin-inline: auto; }
.hero-motto-section .hero-actions { justify-content: center; }

/* ---------- Nach-oben-Button ---------- */
.to-top {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 90;
  width: 3.1rem; height: 3.1rem; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 1.4rem; line-height: 1;
  box-shadow: var(--shadow);
  /* bottom wird von js/main.js gesetzt, damit der Pfeil der Fußzeile
     ausweicht - deshalb hier mit in den Übergang aufgenommen. */
  transition: transform .2s var(--ease), background .2s var(--ease), bottom .25s var(--ease);
}
.to-top:hover { background: var(--accent-2); transform: translateY(-3px); }
.to-top[hidden] { display: none; }


/* ---------- Kontaktformular ---------- */
.contact-form .field { margin-bottom: 1.1rem; }
.contact-form label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--accent-2); margin-bottom: .4rem; }
.contact-form input, .contact-form textarea {
  width: 100%; background: #191817; border: 1px solid #ffffff1f; border-radius: var(--radius);
  color: var(--text); padding: .8rem .9rem; font: inherit; transition: border-color .2s var(--ease);
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--accent); outline: none; }
.contact-form textarea { resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; }
.form-status { margin: 0; font-size: .92rem; }
.form-status.is-ok { color: #8fce8f; }
.form-status.is-err { color: var(--fehler); }

/* Feldweise Fehlermeldungen im Kontaktformular.
   Kein text-transform/letter-spacing: die .contact-form label-Regel
   setzt Kapitälchen, das ist fuer eine Meldung falsch. Farbe wie die
   Sammelmeldung darueber (--fehler) - gemessen 5,13:1 auf dem
   Seitengrund und damit ueber den 4,5:1, die WCAG AA fordert. */
.field-error {
  margin: .4rem 0 0; font-size: .85rem; line-height: 1.45;
  color: var(--fehler); text-transform: none; letter-spacing: normal;
}
.field-error-consent { margin: -.8rem 0 1.2rem; }

/* Das betroffene Feld selbst markieren - eine Meldung allein sieht man
   auf einem langen Formular leicht nicht. */
.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] { border-color: var(--fehler); }
.consent input[aria-invalid="true"] + .consent-box { border-color: var(--fehler); }


/* ---------- Karte ---------- */
.map-box { margin-top: 1.8rem; }
.map-frame {
  position: relative; aspect-ratio: 16/10; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  background: repeating-linear-gradient(45deg, #1a1919, #1a1919 12px, #1f1e1e 12px, #1f1e1e 24px);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-consent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1rem; padding: 1.5rem; }
.map-consent p { color: var(--text-soft); max-width: 34ch; margin: 0; font-size: .9rem; }
.map-link { display: inline-block; margin-top: .7rem; font-size: .88rem; }


/* ---------- Mobile Navigation ---------- */
@media (max-width: 720px) {
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px; position: relative;
    width: 44px; height: 44px; background: none; border: 0; cursor: pointer; z-index: 320;
  }
  .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--text); transition: transform .3s var(--ease), opacity .3s var(--ease); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .main-nav {
    position: fixed; inset: 0; z-index: 310; flex-direction: column; justify-content: center; gap: 1.8rem;
    background: var(--bg);
    transform: translateX(100%); transition: transform .4s var(--ease); font-size: 1.3rem;
  }
  .main-nav.open { transform: none; }
  .main-nav > a { color: var(--text); font-size: 1.4rem; font-family: var(--font-serif); }
  /* Im Burger-Menü ist "Startseite" der erste Punkt (steht im Markup
     vor "Galerie"), leicht abgesetzt vom Rest. */
  .nav-home { display: block; }

  /* Impressum und Datenschutz unter der Sprachauswahl: deutlich
     kleiner als die Hauptpunkte (0,95 statt 1,4 rem), in --muted statt
     Textfarbe und durch eine dünne Linie abgesetzt. Sie sollen
     vollständig da sein, aber nicht mit der Hauptnavigation
     konkurrieren.

     Die Regeln greifen NICHT über .main-nav > a, weil die Links in
     einem eigenen div stecken und damit keine direkten Kinder sind. */
  .nav-legal {
    display: flex; gap: 1.6rem; justify-content: center;
    margin-top: .6rem; padding-top: 1.5rem;
    border-top: 1px solid var(--line); width: min(70%, 16rem);
  }
  .nav-legal a {
    color: var(--muted); font-size: .95rem;
    font-family: var(--font-sans); letter-spacing: .02em;
  }
  .nav-legal a:hover,
  .nav-legal a:focus-visible { color: var(--text-soft); }
  /* Die aktive Seite auch hier nur dezent hervorheben - main.js setzt
     die Klasse für alle Links in .main-nav. */
  .nav-legal a.active { color: var(--text-soft); }
  .lang-switch { font-size: 1rem; padding: .5rem .9rem; }

  /* WICHTIG: kein backdrop-filter am Header auf Mobil – sonst wird das
     position:fixed-Menü nach dem Scrollen "eingefangen" (verrutscht). */
  .site-header, .site-header.scrolled { backdrop-filter: none !important; }
  .site-header.scrolled { background: rgba(19,18,17,.97); }
  body.menu-open { overflow: hidden; }
}

/* =====================================================================
   Carousel (wiederverwendbar) – ein großes Bild, Zähler, Pfeile, Punkte
   ===================================================================== */
.carousel { position: relative; display: flex; flex-direction: column; min-height: 0; }
.car-viewport {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 40%, #211f1f, #0e0d0d);
}
.car-track { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; transition: transform .6s var(--ease); }
.car-slide { position: relative; flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: zoom-in; }
/* Das Bild füllt den Rahmen, statt in seiner Naturgröße stehen zu
   bleiben. Vorher begrenzte "max-height: 100%" nur nach oben: die
   Werke sind aber nur 190-720 px groß, standen also als Briefmarke in
   einem bildschirmhohen Rahmen. Besonders auffällig beim Verkleinern
   der Browser-Ansicht - dort wächst der Rahmen mit dem Ansichtsfenster,
   die Bilddatei aber nicht. "contain" wahrt dabei das Seitenverhältnis
   und schneidet nichts ab. */
.car-slide img {
  width: 100%; height: 100%; object-fit: contain;
  -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none;
}
.car-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.8rem 1.2rem .9rem; text-align: left;
  background: linear-gradient(to top, rgba(12,12,12,.92), transparent); pointer-events: none; z-index: 3;
}
.car-cap .c-year { display: block; color: var(--accent-2); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.car-cap .c-title { display: block; font-family: var(--font-serif); font-size: clamp(1.1rem, 2.6vw, 1.6rem); line-height: 1.2; }
.car-cap .c-size { display: block; color: var(--text-soft); font-size: .82rem; margin-top: .1rem; }
.car-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  touch-action: manipulation;
  width: 3rem; height: 3rem; border-radius: 50%; cursor: pointer;
  background: rgba(19,18,17,.55); border: 1px solid rgba(61,90,254,.55); color: var(--text);
  line-height: 1; display: grid; place-items: center; padding: 0;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.car-btn svg { width: 42%; height: 42%; display: block; }
.car-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.car-prev { left: .6rem; } .car-next { right: .6rem; }


.car-foot { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .8rem .2rem 0; flex: 0 0 auto; }
.car-dots { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; max-width: 100%; }
.car-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #ffffff30; cursor: pointer; transition: background .2s, transform .2s; touch-action: manipulation; }
.car-dots button[aria-selected="true"] { background: var(--accent); transform: scale(1.3); }

/* Kein CSS-Wasserzeichen mehr über dem Carousel und der Lightbox.
   api/img.php brennt das Wasserzeichen in die Werke aus img/bilder
   ein – das Overlay war damit doppelt. Es lag außerdem auf .car-viewport, nicht auf dem
   Bild: da die Bilder mit object-fit: contain nur einen Teil des
   Viewports ausfüllen, kachelte es sichtbar über die leere Fläche
   daneben und über die Bildunterschrift. */
.lb-figure { position: relative; }
.lb-figure img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }


/* Neueste-Werke-Bereich auf der Startseite: füllt den Bildschirm, oben bündig */
/* Die Höhe folgt dem Ansichtsfenster, ist aber nach oben gedeckelt.
   Grund: 100dvh wächst beim Verkleinern der Browser-Ansicht mit (bei
   25 % sind es vier Bildschirmhöhen), der Inhaltsbereich bleibt aber
   bei 1180 px Breite. Ohne Deckel entstand ein extrem hoher, fast
   leerer Rahmen. 78rem passt zur Breite des Inhaltsbereichs. */
.section-fit { background: var(--bg); height: min(calc(100dvh - var(--header-h, 64px)), 78rem); min-height: 420px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; padding: clamp(1rem, 3vh, 1.6rem) 0 1rem; }
.section-fit > .wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.section-fit .section-head { margin-bottom: 1rem; }
.home-carousel { flex: 1; min-height: 0; }


/* Mobil/Tablet: fit-Seiten werden zu normal & vollständig scrollbaren Seiten
   (KEIN Scroll-Lock, Footer immer erreichbar) */
@media (max-width: 900px), (max-height: 700px) {
  .section-fit { height: auto; overflow: visible; padding-bottom: 2.5rem; }
  .section-fit > .wrap { display: flex; }
  .home-carousel { flex: none; height: min(62vh, 34rem); }
}


/* ---------- Instagram im Hero ---------- */
.hero-insta { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.4rem; color: var(--accent-2); font-size: .95rem; letter-spacing: .02em; }
.hero-insta:hover { color: var(--text); }
.hero-insta svg { width: 20px; height: 20px; flex: none; }

/* ---------- Button-Breite stabil (kein Layout-Sprung bei Sprachwechsel) ---------- */
.hero-actions .btn { min-width: 12.5rem; text-align: center; }
@media (max-width: 520px) { .hero-actions { width: 100%; } .hero-actions .btn { min-width: 0; width: 100%; } }

/* ---------- Vita mobil: Bild über die Tabelle ---------- */
@media (max-width: 759px) {
  .vita-grid { display: flex; flex-direction: column; }
  .vita-side { order: -1; }
  .vita-portrait { margin-bottom: 1.5rem; }
}

/* ---------- Hero: "Malerei" unter dem Namen (wie Navbar-Marke) ---------- */
.hero-motto-section .hero-title { margin-bottom: .35rem; }
.hero-brandsub {
  color: var(--accent); text-transform: uppercase; font-weight: 700;
  letter-spacing: .22em; font-size: clamp(1.5rem, 5vw, 2.9rem); line-height: 1;
  margin: 0 0 2.4rem;
}

/* ---------- Section-Notiz (z. B. „keine Auftragskunst", Kunsthaus-Zeilen) ---------- */
.section-note { color: var(--text-soft); font-size: .98rem; margin: .5rem 0 0; }
.section-note.muted { color: var(--muted); font-size: .9rem; }

/* ---------- Weniger Leerraum über der ersten Überschrift auf Unterseiten ---------- */
.subpage main > .section:first-child { padding-top: clamp(1.5rem, 4vh, 3rem); }

/* ---------- Karten-Links (OpenStreetMap / Google Maps) ---------- */
.map-links { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin-top: .8rem; }
.map-links .map-link { margin: 0; }

/* ---------- Datenschutz-Pflichtcheckbox (im Stil der Seite) ---------- */
.contact-form label.consent {
  display: flex; align-items: flex-start; gap: .7rem; margin: 0 0 1.2rem; cursor: pointer;
  font-size: .9rem; color: var(--text-soft); line-height: 1.5;
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consent-box {
  flex: none; width: 22px; height: 22px; margin-top: .15rem; border: 1px solid #ffffff33;
  border-radius: 4px; background: #191817; display: grid; place-items: center;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.consent-box::after {
  content: ""; width: 6px; height: 11px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); transition: transform .15s var(--ease);
}
.consent input:checked + .consent-box { background: var(--accent); border-color: var(--accent); }
.consent input:checked + .consent-box::after { transform: rotate(45deg) scale(1); }
.consent input:focus-visible + .consent-box { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.consent-text a { color: var(--accent-2); }

/* ---------- Kunsthaus-Chronologie (kompakt, zentriert auf der fit-Seite) ---------- */
.kh-timeline { max-width: 560px; margin: .6rem auto .4rem; text-align: left; }
.kh-timeline li { padding: .45rem 0; }

/* =====================================================================
   Raster-Ansicht (Galerie/Presse/Meinungen/Kunsthaus) – quadratische Kacheln
   ===================================================================== */
.tile-grid { display: grid; gap: 1.3rem; grid-template-columns: repeat(4, 1fr); margin-top: .5rem; }

/* Presse, Meinungen und Kunsthaus sind kleine Scans und Fotos
   (im Mittel 640-700 px breit). Vier Spalten machten die Kacheln auf
   dem Desktop kleiner als die Bilddateien selbst - drei Spalten nutzen
   die Auflösung besser aus. Die Galerie bleibt bei vier Spalten, dort
   sind gleichmäßige Kacheln der Reihe wichtiger.
   "contain" statt "cover": ein Zeitungsausschnitt darf nicht
   angeschnitten werden, man will die Überschrift sehen. */
@media (max-width: 900px) { .tile-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .tile-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; } }

/* Presse, Meinungen und Kunsthaus sind Scans und Fotos, im Mittel nur
   640-700 px breit und meist im Hochformat.

   Sie bekommen deshalb hochformatige statt quadratische Kacheln und
   "contain" statt "cover" - ein Zeitungsausschnitt darf nicht
   angeschnitten werden, man will die Überschrift lesen können.

   WICHTIG: Diese Regeln stehen NACH den Media-Queries oben und tragen
   selbst welche. Ein einfaches ".tile-grid.tile-grid-scans" hätte durch
   die höhere Spezifität (zwei Klassen) auch die Mobil-Regeln
   überschrieben - dann stünden auf dem Handy drei statt zwei Spalten
   und die Bilder wären briefmarkengroß. */
/* Etwas heller als der Seitenhintergrund: solange ein Bild noch laedt,
   sieht man die Kachel als Platzhalter statt eines schwarzen Lochs. */
.tile-grid-scans .grid-item { background: #1c1a1a; aspect-ratio: 3 / 4; }
.tile-grid-scans .grid-item img { object-fit: contain; }

@media (min-width: 601px)  { .tile-grid.tile-grid-scans { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .tile-grid.tile-grid-scans { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px)  { .tile-grid.tile-grid-scans { grid-template-columns: repeat(2, 1fr); } }
.grid-item {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 10px; cursor: zoom-in;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  /* Zwei schnelle Tipps auf eine Kachel sollen zweimal die Lightbox
     ansprechen, nicht die Seite hineinzoomen. */
  touch-action: manipulation;
}
.grid-item img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease);
  -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none;
}
.grid-item:hover img { transform: scale(1.05); }
/* Auch hier kein CSS-Wasserzeichen mehr: die Kacheln zeigen dieselben
   Bilder, die api/img.php schon gewasserzeichnet ausliefert. Zwei
   Wasserzeichen übereinander wären nur unruhig. */


/* Knopfreihe auf der 404-Seite */
.err-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }


/* ---------- Überschrift "Kunsthaus No 7" ----------
   Auf Wunsch von Andreas Hinkel in Art-Deco-Schrift und Grau.

   Zur Farbe: gewünscht war "grau 25% Helligkeit". Wörtlich genommen
   (#404040) ergibt das auf dem dunklen Grund dieser Seite 1,80:1 -
   die Zeile wäre praktisch unlesbar, WCAG AA verlangt selbst für
   große Überschriften 3,0:1. Gemeint ist ersichtlich das Grau aus
   Office ("Grau 25%" = 25 % Schwarzanteil, #BFBFBF); das ergibt
   gemessen 10,18:1 und sieht genau so zurückgenommen aus, wie es
   gedacht war.

   font-weight: 400 ist Absicht und darf NICHT auf 600 zurück (die
   Regel für h1/h2/h3 setzt 600). Limelight gibt es nur in einem
   Schnitt; bei 600 rechnet der Browser einen fetten Schnitt selbst
   aus, und genau die feinen Waagerechten, die diese Schrift
   ausmachen, laufen dabei zu.

   letter-spacing: Limelight läuft von sich aus eng; eine Spur Luft
   passt zur Anlage der Schrift und zum Rest der Seite. */
/* Die frühere Sonderregel für /kunsthaus (Ultramarin nur dort) ist
   entfallen: seit --accent/--accent-2 blau sind, gilt die Farbe auf
   der ganzen Seite. .eyebrow und .t-year nutzen beide --accent-2 und
   damit genau den Ton #5C7CFA, der dort gewünscht war. */

.kh-titel {
  /* LTC Broadway (Adobe Fonts) zuerst - so gewuenscht. Limelight
     dahinter als selbst ausgelieferter Rueckfall: laedt Adobe nicht
     (Abo abgelaufen, Netz blockiert, Kennung fehlt), steht die Zeile
     weiter in einer Art-Deco-Schrift und nicht in einer Serifen. */
  font-family: "ltc-broadway", "Limelight", var(--font-serif);
  color: #bfbfbf;
  font-weight: 400;
  letter-spacing: .06em;
}