/* =====================================================================
   FARBEN – die neue Palette der Galerie Schöne Höhe
   Alle Farben stehen hier oben. Eine Farbe ändern = nur hier den Wert tauschen.
   ===================================================================== */
:root {
  --kobalt:  #273287;
  --limette: #D8E63C;
  --rosa:    #E2B6D3;
  --creme:   #F0EEE9;
  --burgund: #471423;

  /* Farbspalten: Start, Ausstellungen, Fotos */
  --c1: var(--rosa);
  --c2: var(--creme);
  --c3: var(--limette);
  /* Farbspalten: Veranstaltungen */
  --d1: var(--creme);
  --d2: var(--limette);
  --d3: var(--rosa);

  --kreis: var(--kobalt);
}

/* Grundfarben: Burgund als Schrift, Creme als Grund */
body { color: var(--burgund); background: var(--creme); }
a { color: var(--burgund); }
a:hover { color: var(--kobalt); }
a:focus-visible, button:focus-visible { outline-color: var(--burgund); }

/* Menü */
.menu .menu__kontakt { background: var(--burgund); color: var(--creme); }
.menu .menu__kontakt:hover { background: var(--kobalt); color: var(--creme); }

/* Ausstellungs-Karten */
.card--2 { background: var(--kobalt); }
.card--2, .card--2 h3, .card--2 p { color: var(--creme); }
.badge { background: var(--creme); color: var(--burgund); }
.date--dark { background: var(--burgund); color: var(--creme); }
.date--light { background: var(--creme); color: var(--burgund); }

/* Ovale Buttons */
.oval { border-color: var(--burgund); }
.oval:hover { background: var(--burgund); color: var(--creme); }

/* Veranstaltungen */
.event, .events__more { border-top-color: var(--burgund); }
.event__media { background: rgba(71, 20, 35, .1); }
.event__media .placeholder { color: var(--burgund); }

/* Galerieraum: ganze Fläche in Kobaltblau */
.galerie { background: var(--kobalt); color: var(--creme); }
.galerie .kreis { --kreis: var(--rosa); }
.galerie .raum__hinweis { color: var(--creme); }
.schild, .lightbox { color: var(--burgund); }
.lightbox { background: var(--creme); }

/* Fotos */
.slide figcaption { color: var(--creme); }
.chip { color: var(--burgund); }

/* Footer */
.footer { background: var(--burgund); color: var(--creme); }
.footer a { color: var(--creme); }
.footer a:hover { color: var(--rosa); }
.footer a:focus-visible { outline-color: var(--creme); }

/* Ausstellungs-Einzelseite */
.seite { background: var(--creme); color: var(--burgund); }
.seite a { color: var(--burgund); }
.aus__zurueck { border-color: var(--burgund); }
.seite .aus__zurueck:hover { background: var(--burgund); color: var(--creme); }
.aus__schild { color: var(--burgund); }
.aus__schild--laeuft { background: var(--rosa); }

/* Veranstaltungen: eine ruhige Farbfläche statt Spalten.
   Andere Farbe gewünscht? Nur hier tauschen, z. B. var(--creme) oder var(--limette). */
.events { background: var(--rosa); }

/* Einfarbige Bereiche auf der Startseite.
   Farbe ändern? Hier einfach z. B. var(--creme), var(--rosa) oder var(--limette) eintragen. */
#ausstellungen { background: var(--creme); }
#veranstaltungen.events { background: var(--rosa); }

/* Ausstellungen: blaue Fläche, Kacheln in Creme */
#ausstellungen { background: var(--kobalt); color: var(--creme); }
#ausstellungen .section-title { color: var(--creme); font-size: clamp(48px, 7vw, 110px); padding-bottom: 48px; }
#ausstellungen .card { background: var(--creme); padding: 16px 16px 26px; }
#ausstellungen .card__body { padding: 20px 6px 0; }
#ausstellungen .oval { border-color: var(--creme); color: var(--creme); }
#ausstellungen .oval:hover { background: var(--creme); color: var(--kobalt); }
#ausstellungen a:focus-visible { outline-color: var(--creme); }

/* Buttons mit geraden Ecken */
.menu .menu__kontakt, .shop__button, .info .shop__button { border-radius: 0; }
/* aktueller Menüpunkt */
.menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }

/* Startseite: Filmstreifen direkt auf der blauen Fläche */
#ausstellungen .film { margin: 0; }
#ausstellungen .film__band { background: transparent; padding-top: 0; }
#ausstellungen .film__unter { color: var(--creme); }
#ausstellungen .film__titel { color: var(--creme); }

/* „Blick in die Galerie“ kleiner */
#galerie .section-title { font-size: clamp(36px, 5vw, 72px); padding-bottom: 40px; }
/* Startseite: nur das aufgeklappte Plakat in Farbe, alle anderen schwarz-weiß */
#ausstellungen .film__streifen img { filter: grayscale(1); }
#ausstellungen .film__streifen.ist-offen img { filter: none; }

/* Alle schrägen Schildchen mit gleich runden Ecken */
.info__zettel, .film__schild, .aus__schild, .zettel { border-radius: 8px; }

/* Alle schrägen Schildchen eckig */
.info__zettel, .film__schild, .aus__schild, .zettel { border-radius: 0; }

/* Fußzeile: fünf Spalten, Öffnungszeiten-Hinweis */
.footer { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: start; }
.footer__klein { display: inline-block; margin-top: 6px; font-size: 14px; line-height: 1.45; opacity: .8; }

/* Instagram: drehender Schriftkreis */
.insta { position: relative; display: grid; place-items: center; width: 170px; height: 170px; color: var(--creme); text-decoration: none; }
.footer .insta { color: var(--creme); }
.insta::before { content: ""; position: absolute; width: 78px; height: 78px; border-radius: 50%; background: var(--rosa); transform: scale(0); transition: transform .45s cubic-bezier(.3, 1.5, .5, 1); }
.insta__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: insta-dreh 16s linear infinite; }
.insta__ring text { fill: currentColor; font-family: Montserrat, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .08em; }
.insta__logo { position: relative; width: 44px; height: 44px; transition: transform .45s cubic-bezier(.3, 1.5, .5, 1), color .3s; }
.insta:hover::before, .insta:focus-visible::before { transform: scale(1); }
.insta:hover .insta__logo, .insta:focus-visible .insta__logo { color: var(--burgund); transform: rotate(-10deg) scale(1.08); }
.footer .insta:hover { color: var(--limette); }
.insta:focus-visible { outline: 2px solid var(--creme); outline-offset: 4px; border-radius: 50%; }
@keyframes insta-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .insta__ring { animation: none; } }

/* Impressum und Datenschutz */
.recht { max-width: 760px; margin-top: 56px; }
.recht h2 { margin: 72px 0 20px; font-size: clamp(28px, 3vw, 40px); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
.recht h3 { margin: 36px 0 10px; font-size: 20px; font-weight: 600; }
.recht p, .recht li { font-size: 17px; line-height: 1.7; }
.recht ul { margin: 0 0 1.1em; padding-left: 1.2em; }
.recht li { margin-bottom: .6em; }
.recht a { overflow-wrap: anywhere; }
.recht__offen { padding: 14px 18px; background: var(--limette); }

/* Blick in die Galerie: kein Balken unten, Hinweis als Schildchen an der Wand */
.galerie { padding-bottom: 0; }
.raum__schild {
  position: absolute; top: 24px; left: 24px; z-index: 3; pointer-events: none;
  padding: 6px 16px; background: var(--rosa); color: var(--burgund);
  font-size: 16px; font-weight: 600; transform: rotate(-3deg);
  box-shadow: 0 2px 0 rgba(71, 20, 35, .25);
}

/* Original-Anfahrtskarte als Bild */
.karte__bild { display: block; width: 100%; height: auto; }

/* Neues Logo (Datei logo.svg), färbt sich automatisch passend zur Umgebung */
.logo--bild {
  display: block; width: 170px; aspect-ratio: 153 / 41.5; background: currentColor;
  -webkit-mask: url("logo.svg") center / contain no-repeat; mask: url("logo.svg") center / contain no-repeat;
}
.logo--big.logo--bild { width: 230px; }
.karte__bild { display: block; width: 100%; height: auto; }

/* Unterseiten: Menüleiste mit Farbverlauf wie auf der Startseite, als eine Fläche */
.hero--klein.stripes {
  position: relative; isolation: isolate;
  background:
    radial-gradient(26% 150% at 30% 75%, #8a2b52 0%, #b8547d 25%, #dc9bbd 52%, rgba(226,182,211,0) 85%),
    radial-gradient(30% 140% at 92% 40%, rgba(39,50,135,.95) 0%, rgba(70,82,180,.6) 38%, rgba(39,50,135,0) 78%),
    radial-gradient(26% 120% at 66% 0%, rgba(216,230,60,.95) 0%, rgba(216,230,60,.4) 40%, rgba(216,230,60,0) 75%),
    radial-gradient(45% 140% at 45% 100%, #d995bb 0%, rgba(226,182,211,.7) 40%, rgba(226,182,211,0) 80%),
    linear-gradient(115deg, #f0d6e4 0%, #f3e6ee 45%, #e7e4f3 100%);
}
.hero--klein.stripes::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; mix-blend-mode: multiply; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .48 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}

/* Hinweis „E-Mail-Adresse kopiert“ */
.mail-hinweis { position: fixed; left: 50%; bottom: 24px; z-index: 1000; max-width: min(560px, calc(100vw - 32px)); padding: 14px 20px; background: var(--burgund); color: var(--creme); font-size: 15px; line-height: 1.45; opacity: 0; transform: translate(-50%, 20px); pointer-events: none; transition: opacity .3s, transform .3s; }
.mail-hinweis.ist-sichtbar { opacity: 1; transform: translate(-50%, 0); }

/* Abstand zwischen Seiteninhalt und bewegtem Banner */
main + .muster { margin-top: clamp(72px, 9vw, 140px); }

/* Spendenseite: Kästen direkt unter dem Text */
.ueber__abschnitt .spenden__wege { margin-top: 40px; }

/* YouTube erst nach Klick laden */
.yt-start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; background: var(--burgund) center / cover no-repeat; color: var(--creme); text-align: center; }
.yt-start__knopf { padding: 14px 26px; border: 0; border-radius: 0; background: var(--limette); color: var(--burgund); font: inherit; font-weight: 600; cursor: pointer; }
.yt-start__knopf:hover { background: var(--rosa); }
.yt-start__hinweis { max-width: 30em; margin: 0; padding: 6px 10px; background: rgba(71, 20, 35, .85); font-size: 13px; line-height: 1.45; }
.yt-start__hinweis a { color: inherit; }
.recht .index { columns: 2; column-gap: 32px; }
.recht h2[id] { scroll-margin-top: 24px; }
.recht .seal { margin-top: 48px; font-size: 13px; opacity: .7; }

/* Handy: nichts ragt seitlich heraus, kein automatischer Dunkelmodus */
:root { color-scheme: light only; }
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
.kreis__linie { max-width: 100vw; }

/* ---------- Handy-Ansicht ---------- */
.menu-knopf { display: none; }
.film__band { touch-action: pan-y; }
@media (max-width: 760px) {
  .menu-knopf { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; width: 52px; height: 52px; padding: 0 13px; border: 0; border-radius: 0; background: var(--burgund); cursor: pointer; }
  .menu-knopf span { display: block; height: 2px; background: var(--creme); transition: transform .25s, opacity .25s; }
  .menu-offen .menu-knopf span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-offen .menu-knopf span:nth-child(2) { opacity: 0; }
  .menu-offen .menu-knopf span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .topbar { flex-wrap: wrap; align-items: center; }
  .topbar .menu { display: none; }
  .topbar.menu-offen .menu { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 16px 0 8px; }
  .topbar.menu-offen .menu a { font-size: 20px; padding: 8px 0; }
  .topbar.menu-offen .menu .menu__kontakt { margin-top: 10px; padding: 14px 28px; }
  .section-title, #ausstellungen .section-title, #galerie .section-title { font-size: 9.5vw; }
  .raum__schild { top: 10px; left: 10px; max-width: 70%; padding: 4px 10px; font-size: 12px; }
  .hero.hat-verlauf .verlauf__kachel { display: none; }
  .hero.hat-verlauf .verlauf { background: radial-gradient(70% 45% at 15% 60%, #8a2b52 0%, #b8547d 25%, #dc9bbd 52%, rgba(226,182,211,0) 85%), radial-gradient(60% 40% at 95% 30%, rgba(39,50,135,.9) 0%, rgba(70,82,180,.5) 40%, rgba(39,50,135,0) 80%), radial-gradient(50% 30% at 70% 0%, rgba(216,230,60,.9) 0%, rgba(216,230,60,.35) 40%, rgba(216,230,60,0) 75%), linear-gradient(160deg, #f0d6e4 0%, #f3e6ee 50%, #e7e4f3 100%); }
}