/* Galerie KEIM – Stylesheet (neu). Farben aus dem Logo: Magenta + Hellgrau */
:root{
  --magenta:#E5007E;
  --magenta-dunkel:#b8006a;
  --grau:#eeeeee;
  --grau-mittel:#e1e1e1;
  --grau-rand:#d6d6d6;
  --text:#2b2b2b;
  --text-hell:#6b6b6b;
  --weiss:#ffffff;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--weiss);color:var(--text);
  font:1rem/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
img{max-width:100%;height:auto;border:0}
a{color:var(--magenta);text-decoration:none}
a:hover,a:focus{text-decoration:underline}

/* ---------- Seitenraster ---------- */
.seite{display:grid;grid-template-columns:15rem minmax(0,1fr);
  grid-template-areas:"kopf kopf" "menue inhalt" "fuss fuss";
  max-width:1560px;margin:0 auto;min-height:100vh;grid-template-rows:auto 1fr auto}
.kopf{grid-area:kopf;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--grau);border-bottom:3px solid var(--magenta);padding:.75rem 1.5rem}
.kopf .titel{margin:0;font-size:clamp(1.15rem,2.2vw,1.7rem);font-weight:600;color:var(--text-hell);
  display:flex;align-items:center;gap:.7rem;line-height:1.25}
.kopf .titel::before{content:"";flex:none;width:.7rem;height:.7rem;background:var(--magenta)}
.kopf .logo img{display:block;width:75px;height:75px}

/* ---------- Menü links ---------- */
.menue{grid-area:menue;background:var(--grau);padding:0 1rem;font-size:.93rem}
.menue .inner{position:sticky;top:0;max-height:100vh;display:flex;flex-direction:column}
.menue .scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:1.2rem 0 1rem}
.menue>summary{display:none}
.menue ul{list-style:none;margin:0;padding:0}
.menue li{margin:0}
.menue a{display:block;color:var(--text-hell);font-weight:600;padding:.28rem .5rem;border-radius:3px}
.menue a:hover{color:var(--magenta);text-decoration:none;background:rgba(229,0,126,.07)}
.menue .haupt>li>a{text-transform:uppercase;letter-spacing:.03em;padding:.5rem .5rem;
  display:flex;align-items:center;gap:.55rem}
.menue .haupt>li>a::before{content:"";flex:none;width:.5rem;height:.5rem;background:var(--magenta)}
.menue .offen>a{background:var(--grau-mittel);color:var(--text)}
.menue .unter{margin:.15rem 0 .8rem 1.1rem;border-left:2px solid var(--grau-rand);padding-left:.4rem}
.menue .unter a{font-weight:500;text-transform:none;letter-spacing:0;font-size:.9rem}
.menue a[aria-current="page"]{color:var(--magenta);font-weight:700;background:rgba(229,0,126,.10);box-shadow:inset 3px 0 0 var(--magenta)}
.menue .nebenan{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--grau-rand)}
.menue .nebenan a{font-weight:500;font-size:.88rem}

/* ---------- Inhalt ---------- */
.inhalt{grid-area:inhalt;padding:1.8rem clamp(1rem,3.5vw,3rem) 3rem;min-width:0;max-width:1180px}
.inhalt h1{font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.25;margin:.2rem 0 1rem;color:var(--text);
  font-weight:650;letter-spacing:.01em}
.inhalt h1::after{content:"";display:block;width:3.2rem;height:3px;background:var(--magenta);margin-top:.5rem}
.inhalt h2{font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.3;margin:1.6rem 0 .6rem;color:var(--text);font-weight:600}
.inhalt h3{font-size:1.1rem;color:var(--magenta);margin:1.3rem 0 .4rem;font-weight:600}
.inhalt p{margin:.5rem 0 1rem}
.inhalt ul{padding-left:1.2rem;margin:.4rem 0 1rem}
.inhalt li{margin:.25rem 0}
.inhalt ul{list-style-type:square}
.inhalt ul li::marker{color:var(--magenta)}
.inhalt hr{border:0;border-top:2px solid var(--magenta);width:50%;margin:2rem auto;opacity:.85}
.inhalt table{border-collapse:collapse;max-width:100%}
.inhalt td,.inhalt th{vertical-align:top;padding:.35rem .6rem;text-align:left}
.inhalt a{font-weight:600}
.inhalt a img{transition:opacity .15s}
.inhalt a:hover img{opacity:.88}
.inhalt .mitte,.inhalt .center{text-align:center}
.inhalt blockquote{margin:1rem 0;padding:.2rem 1.2rem;border-left:3px solid var(--magenta);color:var(--text-hell)}
.inhalt pre{white-space:pre-wrap;font:inherit}

.unterleiste{background:var(--grau);border-radius:4px;padding:.5rem .9rem;margin:0 0 1.5rem;font-size:.92rem}
.unterleiste table{width:auto}
.unterleiste td{padding:.15rem .8rem .15rem 0}
.unterleiste a{font-weight:600}

/* Jahresleiste Galerie */
.jahre{margin:0 0 1.6rem;padding:.7rem 1rem;background:var(--grau);border-radius:4px}
.jahre b{display:inline-block;margin-right:.6rem;color:var(--text-hell)}
.jahre a{display:inline-block;padding:.12rem .55rem;margin:.12rem .1rem;border-radius:3px;background:var(--weiss);
  border:1px solid var(--grau-rand);font-weight:600;font-size:.92rem;color:var(--text-hell)}
.jahre a:hover{background:var(--magenta);border-color:var(--magenta);color:#fff;text-decoration:none}
.jahre details{display:inline}
.jahre summary{display:inline-block;cursor:pointer;padding:.12rem .55rem;margin:.12rem .1rem;color:var(--magenta);font-weight:600;font-size:.92rem}

/* ---------- Startseite ---------- */
.start-abschnitt{margin:0 0 2.8rem}
.start-abschnitt>h1{margin-bottom:1.2rem}
.ausstellung-bilder{text-align:center}
.ausstellung-bilder img{display:block;margin:0 auto 1.2rem;box-shadow:0 2px 14px rgba(0,0,0,.15)}
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.6rem;margin:0 0 2.8rem}
.karte{background:var(--grau);border-radius:6px;padding:1.2rem;text-align:center}
.karte h2{margin:0 0 .8rem;font-size:1.15rem}
.karte img{display:block;margin:0 auto .7rem;border-radius:3px}
.besuch{display:grid;grid-template-columns:minmax(0,170px) 1fr;gap:1.8rem;align-items:start;
  border-top:2px solid var(--magenta);padding-top:1.8rem}
.besuch h2{margin-top:0}
.besuch dl{margin:0}
.besuch dt{font-weight:650;margin-top:.9rem;text-transform:uppercase;letter-spacing:.03em;font-size:.88rem;color:var(--text-hell)}
.besuch dd{margin:.15rem 0 0}

/* ---------- Fußzeile ---------- */
.fuss{grid-area:fuss;background:var(--grau);border-top:3px solid var(--magenta);padding:1rem 1.5rem;
  font-size:.9rem;color:var(--text-hell);display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;justify-content:space-between}
.fuss a{font-weight:600;color:var(--text-hell)}
.fuss a:hover{color:var(--magenta)}

/* ---------- Handy / schmale Fenster ---------- */
@media (max-width:860px){
  .seite{grid-template-columns:minmax(0,1fr);grid-template-areas:"kopf" "menue" "inhalt" "fuss"}
  .kopf{padding:.6rem 1rem}
  .kopf .logo img{width:56px;height:56px}
  .menue{padding:0}
  .menue .inner{position:static;max-height:none;overflow:visible;display:block}
  .menue .scroll{overflow:visible;padding:0}
  .menue>summary{display:block;cursor:pointer;list-style:none;padding:.8rem 1rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.05em;color:var(--text);border-bottom:1px solid var(--grau-rand)}
  .menue>summary::-webkit-details-marker{display:none}
  .menue>summary::after{content:"+";float:right;color:var(--magenta);font-size:1.3rem;line-height:1}
  .menue[open]>summary::after{content:"–"}
  .menue .inner{padding:.6rem 1rem 1.2rem}
  .inhalt{padding:1.2rem 1rem 2rem}
  .besuch{grid-template-columns:1fr}

}

/* Layout-Tabellen der alten Seiten: breit = Spalten wie früher, schmal = untereinander */
@media (min-width:1101px){
  .inhalt td img,.inhalt th img{max-width:none}   /* Bilder in Tabellenzellen behalten ihre Größe (150/275/300 px) */
  .inhalt{overflow-x:auto}
}
@media (max-width:1100px){
  .inhalt table,.inhalt tbody,.inhalt tr,.inhalt td,.inhalt th{display:block;width:auto!important;max-width:100%}
  .inhalt td:empty{display:none}
  .unterleiste table,.unterleiste tbody,.unterleiste tr,.unterleiste td{display:inline}
}
@media print{
  .menue,.kopf .logo,.jahre,.blaettern{display:none}
  .seite{display:block}
}

/* Bildraster für Ausstellungsseiten (neue Vorlage) */
.bildraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1.6rem 1.4rem;margin:1.5rem 0;align-items:end}
.bildraster figure{margin:0}
.bildraster figcaption{font-size:.9rem;color:var(--text-hell);margin-top:.35rem}
.bildraster img{display:block}

/* ART ALARM: einheitliche Blöcke */
.magenta{color:var(--magenta)}
.aa-nav{margin-bottom:1.2rem}
.aa-block{margin:0 0 .5rem;scroll-margin-top:1rem}
.aa-block h2{margin-top:.2rem}
.aa-titel{font-size:1.1rem;font-weight:600;margin:.2rem 0 .4rem;color:var(--text)}
.aa-ut{margin:.1rem 0 .6rem}
.aa-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 2rem;align-items:start}
.aa-text ul{margin-top:.2rem}
.aa-termin,.aa-dauer,.aa-extra{margin:.4rem 0 .8rem}
.aa-karten{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.aa-karten,.aa-karten a{min-width:0;max-width:100%}
.aa-karten img,.aa-fotos img{max-width:100%;height:auto;display:block}
.aa-block+hr{margin:1.6rem auto}
@media (max-width:760px){.aa-grid{grid-template-columns:minmax(0,1fr)}}

.menue .unter .rubrik{margin:.6rem 0 .1rem;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-hell)}

/* Künstlerseiten: vorheriger / nächster */
.blaettern{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin:2.5rem 0 0;padding-top:1rem;border-top:2px solid var(--magenta)}
.blaettern a{font-weight:600}

/* Kunst & Bauen: Navigationsleiste mit Links als weiße Kästchen (wie die Jahresleiste der Ausstellungen) */
.unterleiste.kasten{padding:.7rem 1rem}
.unterleiste.kasten table,.unterleiste.kasten tbody,.unterleiste.kasten tr,.unterleiste.kasten td{display:contents}
.unterleiste.kasten br{display:none}
.unterleiste.kasten a{display:inline-block;padding:.12rem .55rem;margin:.12rem .1rem;border-radius:3px;background:var(--weiss);
  border:1px solid var(--grau-rand);font-weight:600;font-size:.92rem;color:var(--text-hell)}
.unterleiste.kasten a:hover{background:var(--magenta);border-color:var(--magenta);color:#fff;text-decoration:none}

li[id^="presse-"]{scroll-margin-top:1rem}

/* Adresse + Öffnungszeiten unten im Menü: am PC immer sichtbar */
.menue .besuchinfo{flex:none;margin-top:.4rem;padding:.7rem .3rem .8rem;background:var(--grau);border-top:2px solid var(--magenta);font-size:.78rem;line-height:1.45;color:var(--text)}
.menue .besuchinfo .zeiten{display:block;margin-top:.5rem}
@media print{.besuchinfo{display:none}}

/* Menü bleibt beim Scrollen stehen: die Hülle des <details> darf das Sticky nicht blockieren (neuere Browser) */
.menue::details-content{display:contents}
textarea,input[type=text],input[type=email]{max-width:100%;box-sizing:border-box}
/* Tabellen/Formular auf dem Handy: lange Texte umbrechen, Felder nicht breiter als der Bildschirm */
@media (max-width:760px){main td{overflow-wrap:anywhere}main form input[type=text],main form input[type=email],main form textarea{width:100%;min-width:0}}