/* Aktuelles & Ausstellungen – baut auf galerie-basis.css und vorschlag-c.css auf.
   Ruhig und hell: keine Kästen, feine Linien, große Fotos ohne Rahmen. */
:root { --akzent: #e0457b; }

/* ---------- Einstieg: Foto über die ganze Breite, Text darunter ---------- */
.ak-hero-bild { position: relative; overflow: hidden; aspect-ratio: 1800 / 994; max-height: calc(100vh - 90px); width: 100%; }
.ak-hero-bild img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 50% 60%; transform: scale(1.06); transition: transform 2.4s var(--ease); }
.ak-hero-bild::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: right; transition: transform 1.5s var(--ease) .1s; }
.is-loaded .ak-hero-bild img { transform: scale(1); }
.is-loaded .ak-hero-bild::after { transform: scaleX(0); }
.ak-hero-text { display: grid; grid-template-columns: 5fr 7fr; gap: 0 clamp(40px, 6vw, 110px); padding: clamp(50px, 6vw, 90px) var(--pad) 0; align-items: start; }
.ak-hero-text .kicker { grid-column: 1 / -1; }
.ak-hero-text h1 { margin: 0; }
.ak-hero-text .aktionen { margin-top: 34px; }
.ak-hero-text .hero-fakten { margin-top: 40px; }

/* ---------- Als Nächstes ---------- */
.ak-naechstes { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(32px, 6vw, 110px); }
.termin-gross { display: grid; grid-template-columns: clamp(110px, 12vw, 180px) 1fr; gap: clamp(24px, 3vw, 50px); padding: 34px 0; border-top: 1px solid var(--line); }
.termin-gross:last-child { border-bottom: 1px solid var(--line); }
.termin-datum .tag { display: block; font-weight: 200; font-size: clamp(44px, 5vw, 80px); line-height: .95; letter-spacing: -.04em; color: var(--akzent); white-space: nowrap; }
.termin-datum .monat { display: block; margin-top: 10px; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
/* rosa Stempel „Herzliche Einladung“ unter dem Datum (wie „Herzlich willkommen!“ bei den Malkursen) */
.einladung { display: grid; place-items: center; width: 96px; aspect-ratio: 1; margin-top: 22px; border-radius: 50%; background: var(--akzent); color: #fff; font: 700 21px/.95 'Caveat', 'Segoe Print', cursive; text-align: center; transform: rotate(-10deg); box-shadow: inset 0 0 0 5px var(--akzent), inset 0 0 0 6.5px rgba(255,255,255,.75), 0 8px 18px rgba(160,30,80,.18); }
/* Dauerhaft zu sehen (Praxis) */
.termin-dauer .dauer-wort { font: 700 clamp(26px, 2.4vw, 36px)/1 'Caveat', 'Segoe Print', cursive; letter-spacing: 0; white-space: normal; transform: rotate(-6deg); transform-origin: left center; }
/* Dankeschön nach der Veranstaltung */
.termin-danke .danke-wort { font: 700 clamp(44px, 4.6vw, 72px)/1 'Caveat', 'Segoe Print', cursive; letter-spacing: 0; transform: rotate(-6deg); transform-origin: left center; }
.termin-inhalt .art { display: block; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.termin-inhalt h3 { font-weight: 400; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.12; letter-spacing: -.025em; }
.termin-fakten { list-style: none; display: grid; gap: 6px; margin: 18px 0 0; color: var(--text); font-size: 15.5px; }
.termin-fakten li { display: flex; gap: 12px; align-items: center; }
.termin-fakten .icon { color: var(--muted); }
.termin-inhalt p { color: var(--text); margin-top: 18px; max-width: 34em; }
.termin-inhalt .link { margin-top: 20px; }
.kein-termin { font-weight: 400; font-size: 18px; line-height: 1.6; color: var(--text); max-width: 40em; padding: 34px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---------- Foto + Text (Ateliertage, Kunst auf Zeit) ---------- */
.ak-bild-text { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(40px, 7vw, 130px); align-items: center; }
.ak-bild-text.umgekehrt { grid-template-columns: 5fr 6fr; }
.ak-bild-text.umgekehrt figure { order: 2; }
.ak-bild-text figure { overflow: hidden; }
.ak-bild-text img { aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.6s var(--ease); }
.ak-bild-text figure:hover img { transform: scale(1.03); }
.ak-bild-text h2 { margin-bottom: 6px; }
.ak-bild-text p { color: var(--text); margin-top: 20px; max-width: 32em; }
.ak-bild-text .link { margin-top: 30px; }
.ak-bild-text .merkmale { margin: 26px 0 0; }
.ak-bild-text .merkmale .icon { color: var(--akzent); margin-top: .25em; }
.ak-beispiel { font-family: 'Caveat', cursive; font-size: 25px !important; line-height: 1.25; color: var(--ink) !important; }

/* ---------- Neu aus dem Atelier: alle Bilder gleich hoch, Breite nach Format ---------- */
.neu-reihe { display: flex; gap: clamp(24px, 3.5vw, 60px); align-items: flex-start; }
.neu-werk { flex: var(--r, 1) 1 0; min-width: 0; }
.neu-bild { display: flex; gap: 6px; overflow: hidden; }
.neu-bild img { flex: 1 1 0; min-width: 0; aspect-ratio: var(--rt, auto); object-fit: cover; box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .35); transition: transform 1s var(--ease), box-shadow 1s var(--ease); }
.neu-bild { overflow: visible; }
.neu-werk:hover .neu-bild img { transform: translateY(-6px); box-shadow: 0 22px 38px -18px rgba(0, 0, 0, .4); }
.neu-werk .werk-info { flex-wrap: wrap; }

/* ---------- Neurographik ---------- */
.ak-neuro { max-width: 46em; }
.ak-neuro .kicker { display: flex; gap: 10px; align-items: center; color: var(--akzent); }
.ak-neuro p { color: var(--text); margin-top: 20px; max-width: 40em; }
.ak-neuro strong { color: var(--ink); font-weight: 600; }
.ak-neuro .aktionen { margin-top: 32px; }
/* Entstehung in 6 Schritten – eine Reihe, die Fotos gleiten nacheinander herein */
.neuro-weg { margin-top: clamp(50px, 6vw, 90px); }
.neuro-weg-titel { font-size: 1.05rem; font-weight: 500; letter-spacing: .02em; color: var(--ink); margin-bottom: 24px; }
.neuro-weg ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); }
.neuro-weg img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  box-shadow: 0 10px 26px -16px rgba(0, 0, 0, .35); transition: transform 1s var(--ease), box-shadow 1s var(--ease); }
.neuro-weg li:hover img { transform: translateY(-6px); box-shadow: 0 22px 38px -18px rgba(0, 0, 0, .4); }
.neuro-weg .schritt { display: block; margin-top: 14px; color: var(--ink); font-weight: 500; }
.neuro-weg .schritt b { color: var(--akzent); font-weight: 600; margin-right: 4px; }
.neuro-weg .schritt-text { display: block; margin-top: 4px; font-size: .92rem; line-height: 1.5; color: var(--text); }

/* ---------- Besondere Orte (Teaser für „Über mich“) ---------- */
.ak-orte { border-top: 1px solid var(--line); padding-top: clamp(50px, 5vw, 80px); }
.ak-orte .kicker { display: flex; gap: 10px; align-items: center; }
.ak-orte .zitat-gross { max-width: 22em; }
.ak-orte-text { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 110px); margin-top: clamp(30px, 3vw, 50px); }
.ak-orte-text p { grid-column: 2; color: var(--text); max-width: 34em; }
.ak-orte-bild { grid-column: 1; grid-row: 1 / span 2; margin: 0; overflow: hidden; }
.ak-orte-bild img { aspect-ratio: 4 / 3; object-fit: cover; }
.ak-orte-bild figcaption { margin-top: 12px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ak-orte-text .link { grid-column: 2; justify-self: start; align-self: start; }
.ak-orte-text:has(.ak-orte-bild) { grid-template-rows: auto 1fr; row-gap: 30px; }

/* ---------- Ausstellungen (Auswahl) ---------- */
.ak-raum { overflow: hidden; margin: 0 calc(var(--pad) * -1); }
.ak-raum img { aspect-ratio: 1800 / 802; object-fit: cover; }
.ak-liste { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 110px); margin-top: clamp(50px, 6vw, 90px); }
.ak-liste p { color: var(--text); margin-top: 22px; max-width: 30em; }
.ausstellungen { list-style: none; }
.ausstellungen li { display: grid; grid-template-columns: 9em 1fr; gap: 4px 24px; padding: 20px 0; border-top: 1px solid var(--line); }
.ausstellungen li:last-child { border-bottom: 1px solid var(--line); }
.ausstellungen .jahr { grid-row: span 2; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.ausstellungen .ort { font-size: 19px; color: var(--ink); }
.ausstellungen .titel { color: var(--text); font-size: 15px; }
.ausstellungen .titel:empty { display: none; }

/* ---------- Nichts verpassen ---------- */
.ak-verpassen { text-align: center; max-width: 760px; margin: 0 auto; }
.ak-verpassen p { color: var(--text); margin: 22px auto 0; max-width: 34em; }
.ak-verpassen .aktionen { justify-content: center; }

@media (max-width: 900px) {
  .ak-hero-bild { aspect-ratio: 4 / 3; }
  .ak-hero-bild img { object-position: 55% 50%; }
  .ak-hero-text, .ak-naechstes, .ak-bild-text, .ak-bild-text.umgekehrt, .ak-neuro, .ak-orte-text, .ak-liste { grid-template-columns: minmax(0, 1fr); }
  .ak-hero-text h1 { margin-bottom: 24px; }
  .ak-bild-text.umgekehrt figure { order: 0; }
  .ak-orte-text p, .ak-orte-text .link, .ak-orte-bild { grid-column: 1; }
  .ak-orte-bild { grid-row: auto; }
  .ak-orte-text:has(.ak-orte-bild) { grid-template-rows: none; }
  .neuro-weg ol { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; }
}
@media (max-width: 640px) {
  .neu-reihe { flex-direction: column; align-items: stretch; gap: 40px; }
  .neu-werk { flex: none; }
  .termin-gross { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ausstellungen li { grid-template-columns: minmax(0, 1fr); }
  .ausstellungen .jahr { grid-row: auto; }
  .neuro-weg ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ak-orte .zitat-gross em { font-style: normal; font-weight: 600; }

/* Startseite: Block „Aktuelles“ */
#start-aktuelles { margin-bottom: 40px; }
#start-aktuelles .neu-reihe { margin-top: 10px; }
.start-besuch { display: flex; gap: 14px; align-items: flex-start; margin-top: 30px; color: var(--text); max-width: 34em; }
.start-besuch .icon { margin-top: .3em; color: var(--akzent); }
#start-aktuelles .link { margin-top: 0; } #start-aktuelles .termin-inhalt .link { margin-top: 20px; }
.neu-reihen { display: grid; gap: clamp(50px, 5vw, 80px); }

/* ---------- Neurographik als „Stapel“ (Entwurf, js/neuro-stapel.js) ---------- */
/* Laptop: links Text, Überschrift und Schritte – rechts der Stapel auf gleicher Höhe (weniger Weißfläche) */
.neuro-raster.mit-stapel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 6vw, 110px);
  grid-template-areas: "text stapel" "titel stapel" "schritte stapel"; grid-template-rows: auto auto 1fr; }
.mit-stapel .ak-neuro { grid-area: text; }
.mit-stapel .neuro-stapel, .mit-stapel .stapel-buehne { display: contents; }
.mit-stapel .neuro-weg-titel { grid-area: titel; margin: clamp(40px, 4vw, 60px) 0 20px; }
.mit-stapel .stapel-seite { grid-area: schritte; }
.mit-stapel .stapel-schritte { grid-template-columns: repeat(2, max-content); column-gap: clamp(30px, 4vw, 60px); grid-auto-flow: column; grid-template-rows: repeat(3, auto); }
.mit-stapel .stapel { grid-area: stapel; align-self: center; }
.stapel { position: relative; width: 100%; max-width: 680px; aspect-ratio: 4 / 3; margin: 30px auto; }
.blatt { position: absolute; inset: 0; margin: 0; opacity: 0;
  transform: translate(var(--x), var(--y)) rotate(var(--r));
  will-change: transform, opacity; backface-visibility: hidden; }   /* bleibt nach dem Fallen ruhig liegen (kein Nachruckeln) */
.blatt img { display: block; width: 100%; height: 100%; object-fit: cover;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 18px 34px -18px rgba(0, 0, 0, .38); }
/* Gleiten: das Blatt kommt schräg von oben und legt sich in EINER ruhigen Bewegung ab (kein Pendeln, langsam auslaufend) */
.faellt .blatt { animation: blatt-gleitet 2.6s cubic-bezier(.25, .6, .25, 1) both; animation-delay: calc(var(--i) * 1.7s + .2s); }
@keyframes blatt-gleitet {
  0%   { opacity: 0; transform: translate(calc(var(--x) - 4%), calc(var(--y) - 16%)) rotate(calc(var(--r) - 6deg)); }
  25%  { opacity: 1; }
  100% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}
/* Schritte daneben leuchten passend zum gerade fallenden Blatt auf */
.stapel-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.stapel-schritte li { color: var(--text); opacity: .35; transition: opacity .8s var(--ease); }
.stapel-schritte b { color: var(--akzent); font-weight: 600; margin-right: 6px; }
.faellt .stapel-schritte li { animation: schritt-an .8s var(--ease) both; animation-delay: calc(var(--i) * 1.7s + .6s); }
@keyframes schritt-an { from { opacity: .35; } to { opacity: 1; color: var(--ink); } }
.stapel-nochmal { margin-top: 34px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 900px) {
  .neuro-raster.mit-stapel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "titel" "stapel" "schritte"; grid-template-rows: auto; }
  .stapel { width: 86%; margin: 20px auto 40px; }
  .stapel-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .faellt .blatt { animation: none; opacity: 1; }
  .faellt .stapel-schritte li { animation: none; opacity: 1; }
}

/* ---------- Kalender-Knöpfe beim Termin (js/kalender.js) ---------- */
.kalender { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.kal-frage { flex-basis: 100%; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.kal-frage + .kal-tage, .kal-frage + .kal-knoepfe { margin-top: -2px; }
.kal-tage, .kal-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; flex-basis: 100%; }
.kal-tage + .kal-frage { margin-top: 8px; }
.kal-tag, .kal-knopf { display: inline-flex; align-items: center; gap: 9px; padding: 10px 17px; border-radius: 999px; border: 0;
  box-shadow: inset 0 0 0 1px #cfccc6; background: none; font: inherit; font-size: 15px; color: var(--ink); text-decoration: none; cursor: pointer; transition: all .25s; }
.kal-tag:hover, .kal-knopf:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.kal-tag.an { background: var(--ink); color: #fff; box-shadow: none; }
.kal-logo { width: 16px; height: 16px; fill: currentColor; flex: none; }
.kal-knopf:hover .kal-logo { transform: translateY(-1px); }