/* VIA ARTIS Sektionen */

/* ---------- Umschlag ---------- */
.umschlag {
  background: var(--knochen);
  border-bottom: 1px solid var(--linie);
}
.umschlag__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.umschlag__inhalt {
  position: relative;
  z-index: 2;
  padding: 0 clamp(1.4rem, 7vw, 6.5rem);
  max-width: 44rem;
}
.umschlag h1 {
  font-family: var(--serif-zier);
  font-weight: 700;
  font-size: var(--fs-riesig);
  line-height: .92;
  letter-spacing: -.02em;
}
.umschlag h1 em {
  font-weight: 600;
  color: color-mix(in srgb, var(--korall) 62%, var(--tiefgruen));
  margin-left: .55em;
  display: inline-block;
  line-height: 1.1;
  padding-bottom: .06em;
}
.umschlag__satz {
  max-width: 26rem;
  margin-top: 1.3rem;
  color: var(--text-gedaempft);
}
.umschlag .cta { margin-top: 1.8rem; }
.umschlag__zitat {
  position: absolute;
  z-index: 2;
  right: clamp(2rem, 12vw, 11rem);
  top: 24vh;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--tiefgruen);
  opacity: .38;
  transform: rotate(-3deg);
  line-height: 1.5;
}
.umschlag__werke {
  position: absolute;
  z-index: 2;
  right: clamp(4rem, 12vw, 10rem);
  top: 22vh;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--tiefgruen);
  opacity: .3;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
}
/* Erstes Werk lugt herein */
.umschlag__lugt {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -9rem;
  transform: translateX(-50%);
  width: min(30rem, 76vw);
  height: 13rem;
  background: color-mix(in srgb, var(--pigment-tillmann) 16%, var(--knochen));
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
@media (max-width: 767px) {
  .umschlag__zitat { display: none; }
}

/* ---------- Kapitelblatt ---------- */
.kapitel {
  min-height: 46dvh;
  justify-content: center;
  padding: 5rem 1.4rem;
}
.kapitel__form {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 3.2rem 4rem;
}
.kapitel__form::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--knochen-tief);
  border-radius: var(--blob-c);
  z-index: -1;
}
.kapitel__zahl {
  font-family: var(--serif);
  font-style: italic;
  color: var(--korall);
  font-size: 1rem;
}
.kapitel h2 { font-size: var(--fs-display); }
.kapitel p { color: var(--text-gedaempft); max-width: 22rem; margin-top: .5rem; font-size: .98rem; }

/* ---------- Werkseite ---------- */
.werkseite {
  --akzent: var(--korall);
  --sichtbarkeit: 0;
  display: grid;
  align-items: center;
  min-height: 100dvh;
  padding: clamp(5rem, 10vh, 7.8rem) clamp(1.4rem, 5vw, 4.8rem) clamp(3.4rem, 7vh, 5.4rem);
  gap: clamp(2rem, 6vw, 5.5rem);
  isolation: isolate;
  border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 13%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    0 -10px 24px rgba(18, 40, 32, .045);
  background:
    radial-gradient(circle at var(--seite-x, 8%) 36%, color-mix(in srgb, var(--akzent) 18%, transparent) 0 18rem, transparent 18.1rem),
    var(--knochen);
}
.werkseite--vereine {
  background:
    radial-gradient(circle at var(--seite-x, 88%) 42%, color-mix(in srgb, var(--akzent) 24%, transparent) 0 20rem, transparent 20.1rem),
    #EFE6D2;
}
.werkseite--weitere {
  background:
    radial-gradient(circle at var(--seite-x, 14%) 38%, color-mix(in srgb, var(--akzent) 20%, transparent) 0 18rem, transparent 18.1rem),
    #F3EEE4;
}

.werkseite::before,
.werkseite::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.werkseite::before {
  z-index: 5;
  background:
    linear-gradient(90deg, rgba(18, 40, 32, .055), transparent 8%, transparent 90%, rgba(18, 40, 32, .04)),
    linear-gradient(180deg, rgba(255, 255, 255, .25), transparent 12%, transparent 90%, rgba(18, 40, 32, .035));
  opacity: .5;
}

.werkseite::after {
  z-index: 6;
  width: min(14rem, 24vw);
  left: auto;
  background: linear-gradient(90deg, transparent, rgba(246, 243, 236, .36) 45%, rgba(18, 40, 32, .08));
}

.werkseite__pigment {
  position: absolute;
  z-index: 0;
  width: clamp(14rem, 22vw, 24rem);
  aspect-ratio: 1 / 1.08;
  background: none;
  border: 1.5px solid var(--akzent);
  opacity: .3;
  border-radius: var(--blob-b);
}

.werkbild {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1.5 / 1;
  width: 100%;
  border-radius: var(--radius-bild);
  box-shadow:
    0 18px 34px rgba(18, 40, 32, .075);
  transform-origin: 50% 0;
}
.werkbild img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.werktext {
  position: relative;
  z-index: 2;
  max-width: 28rem;
  min-width: 0;
}
.werktext > * {
  transform: translate3d(0, 0, 0);
}
.werktext h2 {
  font-size: clamp(2.6rem, 5.8vw, 4.8rem);
  letter-spacing: .01em;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  max-width: 100%;
}
.werkseite--titel-lang .werktext h2 {
  font-size: clamp(1.9rem, 3.1vw, 2.68rem);
  line-height: 1.08;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.werktext .claim {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-claim);
  color: var(--text-gedaempft);
  margin-top: .6rem;
}
.werktext .untertitel {
  font-size: var(--fs-klein);
  color: color-mix(in srgb, var(--text-gedaempft) 80%, var(--akzent));
  margin-bottom: 1rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 650;
  max-width: 100%;
}
.steckbrief-knopf {
  margin-top: 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--tiefgruen);
  color: var(--knochen);
  font-size: var(--fs-klein);
  font-weight: 500;
  padding: .6rem 1.3rem;
  border-radius: 999px;
  transition: background var(--schnell) var(--kurve), transform var(--schnell) var(--kurve);
}
.steckbrief-knopf::after { content: '→'; }
.steckbrief-knopf:hover { background: var(--korall); }
.steckbrief-knopf:active { transform: scale(.97); }

/* Bühnen-Varianten */
.buehne-bild-rechts {
  --seite-x: 8%;
  grid-template-columns: minmax(18rem, .58fr) minmax(0, 1.24fr);
}
.buehne-bild-rechts .werktext { order: 1; }
.buehne-bild-rechts .werkbild { order: 2; }
.buehne-bild-rechts .werkseite__pigment { right: -7vw; top: 12vh; }

.buehne-bild-links {
  --seite-x: 88%;
  grid-template-columns: minmax(0, 1.3fr) minmax(16rem, .64fr);
}
.buehne-bild-links .werkbild { order: 1; }
.buehne-bild-links .werktext { order: 2; justify-self: end; text-align: left; }
.buehne-bild-links .werkseite__pigment { left: -9vw; bottom: 8vh; }

.buehne-bild-mittig { grid-template-columns: minmax(16rem, .58fr) minmax(0, 1.18fr); justify-items: center; text-align: left; }
.buehne-bild-mittig .werkbild { width: 100%; aspect-ratio: 1.5 / 1; order: 2; }
.buehne-bild-mittig .werktext { max-width: 34rem; }
.buehne-bild-mittig .werkseite__pigment { left: 50%; top: 8vh; transform: translateX(-50%); }

.buehne-bild-voll { grid-template-columns: 1fr; align-items: end; padding-bottom: 5rem; }
.buehne-bild-voll .werkbild {
  position: absolute;
  inset: 9vh 7vw 12vh;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  opacity: .9;
}
.buehne-bild-voll .werktext {
  position: relative;
  z-index: 3;
  background: color-mix(in srgb, var(--knochen) 94%, white);
  border-radius: 26px;
  padding: 1.4rem 1.7rem;
  max-width: 24rem;
}
.buehne-bild-voll .werkseite__pigment { right: -6vw; bottom: -8vh; opacity: .4; }

@media (max-width: 900px) {
  .werkseite {
    grid-template-columns: 1fr !important;
    align-content: center;
    text-align: left;
    padding-top: 5.8rem;
    gap: 1.4rem;
  }
  .werkbild { order: 1 !important; width: 100%; aspect-ratio: 1.5 / 1; }
  .werktext { order: 2 !important; max-width: 100%; justify-self: start !important; text-align: left !important; }
  .werktext h2,
  .werkseite--titel-lang .werktext h2 {
    font-size: clamp(2.05rem, 10.5vw, 3.15rem);
  }
  .buehne-bild-voll .werkbild { position: relative; inset: auto; aspect-ratio: 1.5 / 1; }
  .buehne-bild-voll .werktext { background: none; padding: 0; }
  .buehne-bild-mittig .werkbild { aspect-ratio: 1.5 / 1; }
  .seitenzahl { bottom: .9rem; }
}

@media (min-width: 901px) {
  .werkseite:nth-of-type(2n) {
    transform-origin: center top;
  }
  .werkseite:nth-of-type(2n) .werkbild {
    transform-origin: 46% 0;
  }
  .werkseite:nth-of-type(2n + 1) .werkbild {
    transform-origin: 54% 0;
  }
}

/* ---------- Möglichkeiten (dunkle Seite) ---------- */
.moeglichkeiten {
  background: linear-gradient(135deg, #0f251d 0%, var(--tiefgruen) 58%, #1b382d 100%);
  color: var(--knochen);
  border-radius: 54% 46% 0 0 / 72px 56px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--knochen) 18%, transparent);
  border-bottom: 1px solid rgba(246, 243, 236, .16);
  box-shadow: 0 -28px 60px rgba(18, 40, 32, .18);
  flex-direction: column;
  justify-content: center;
  padding: clamp(4rem, 10vh, 7rem) clamp(1.4rem, 7vw, 6.5rem);
}
.moeglichkeiten__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: .92;
}
.moeglichkeiten__kopf { position: relative; z-index: 2; max-width: 34rem; }
.moeglichkeiten h2 { font-size: var(--fs-display); }
.moeglichkeiten__satz {
  color: #B9C4B6;
  margin-top: .8rem;
  max-width: 30rem;
}
.wurzelraum {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  width: min(72rem, 100%);
  margin-top: 2.6rem;
}
.wurzelgruppe {
  --akzent: var(--korall);
  position: relative;
  padding: clamp(1.9rem, 3vw, 2.3rem) clamp(1.7rem, 2.8vw, 2.2rem) clamp(2.1rem, 3.2vw, 2.5rem);
  display: flex;
  flex-direction: column;
  isolation: isolate;
  transition: transform var(--dauer) var(--kurve);
}
.wurzelgruppe:nth-child(2) { --akzent: var(--amber); }
.wurzelgruppe:nth-child(3) { --akzent: var(--salbei); }
.wurzelgruppe::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid rgba(246, 243, 236, .18);
  border-radius: 42px 26px 46px 28px;
  background:
    radial-gradient(circle at 20% 14%, color-mix(in srgb, var(--akzent) 20%, transparent), transparent 65%),
    rgba(246, 243, 236, .055);
  transition: transform var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve), background var(--dauer) var(--kurve);
}
.wurzelgruppe:nth-child(2)::before { border-radius: 28px 44px 26px 46px; }
.wurzelgruppe:nth-child(3)::before { border-radius: 46px 28px 42px 26px; }
.wurzelgruppe:hover,
.wurzelgruppe:focus-within { transform: translateY(-.2rem); }
.wurzelgruppe:hover::before,
.wurzelgruppe:focus-within::before {
  transform: scale(1.015);
  border-color: color-mix(in srgb, var(--akzent) 45%, rgba(246, 243, 236, .2));
  background:
    radial-gradient(circle at 20% 14%, color-mix(in srgb, var(--akzent) 30%, transparent), transparent 65%),
    rgba(246, 243, 236, .085);
}
.wurzelgruppe h3 {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: clamp(1.3rem, 2.3vw, 1.8rem);
}
.wurzelgruppe h3::before {
  content: '';
  width: .55rem;
  height: .55rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--akzent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent) 22%, transparent);
}
.wurzelgruppe ul {
  list-style: none;
  padding: 0;
  margin: 1.1rem 0 0;
  display: grid;
  gap: .6rem;
  color: #CBD5C8;
}
.wurzelgruppe li {
  position: relative;
  padding-left: 1.05rem;
  font-size: .96rem;
}
.wurzelgruppe li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .68em;
  width: .34rem;
  height: .34rem;
  border-radius: 999px;
  background: var(--akzent);
}

/* ---------- Eigene Arbeit ---------- */
.ueber {
  flex-direction: column;
  justify-content: center;
  background: var(--knochen);
  border-top: 1px solid var(--linie);
  padding: clamp(4rem, 10vh, 7rem) clamp(1.4rem, 7vw, 6.5rem);
}
.ueber h2 { font-size: var(--fs-display); }
.ueber__intro { max-width: 30rem; color: var(--text-gedaempft); margin-top: .8rem; }
.ueber__formen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.2rem;
  margin-top: 2.4rem;
  width: 100%;
}
.ueber__form {
  position: relative;
  padding: 1.7rem 1.6rem 1.9rem;
}
.ueber__form::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--knochen-tief);
  border-radius: var(--blob-b);
  transition: transform var(--dauer) var(--kurve);
}
.ueber__form:nth-child(2n)::before { border-radius: var(--blob-a); }
.ueber__form:nth-child(3n)::before { border-radius: var(--blob-c); }
.ueber__form:hover::before { transform: scale(1.03); }
.ueber__form h3 { font-size: 1.25rem; }
.ueber__form p { font-size: .92rem; color: var(--text-gedaempft); margin-top: .45rem; }
.ueber__form a { color: var(--korall-tief); font-size: .92rem; }
.ueber__hinweis {
  margin-top: 1.6rem;
  font-family: var(--serif);
  font-style: italic;
  color: var(--text-gedaempft);
  font-size: .98rem;
}

/* ---------- Kontakt ---------- */
.kontakt {
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid var(--linie);
  background: #F3EEE4;
  padding: clamp(4rem, 10vh, 7rem) clamp(1.4rem, 7vw, 6.5rem) 2rem;
}
.kontakt__innen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.6rem, 5vw, 4rem);
  align-items: center;
  width: 100%;
}
.kontakt h2 { font-size: var(--fs-display); }
.kontakt__satz { color: var(--text-gedaempft); margin-top: .8rem; max-width: 24rem; }
.kontakt__direkt { margin-top: 1.5rem; font-size: .95rem; color: var(--text-gedaempft); line-height: 2; }
.kontakt__direkt a { color: var(--text); }
.kontakt__form {
  position: relative;
  padding: 2rem 1.9rem;
}
.kontakt__form::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--knochen-tief);
  border-radius: 38px;
}
.fusszeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  width: 100%;
  margin-top: clamp(3rem, 8vh, 5rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--linie);
  font-size: var(--fs-klein);
  color: var(--text-gedaempft);
}
.fusszeile__marke { font-family: var(--serif); letter-spacing: .13em; color: var(--text); }
.fusszeile a { color: var(--text-gedaempft); }
@media (max-width: 900px) {
  .kontakt__innen { grid-template-columns: 1fr; }
  .wurzelraum { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .umschlag__inhalt { padding-top: 2rem; }
  .umschlag h1 { font-size: clamp(3.3rem, 18vw, 5.8rem); }
  .umschlag h1 em { margin-left: .25em; }
  .kapitel__form { padding: 2.4rem 2rem; }
  .ueber__formen { grid-template-columns: 1fr; }
}

/* ---------- Rechtsseiten (Impressum/Datenschutz) ---------- */
.rechtsseite {
  max-width: 44rem;
  margin: 0 auto;
  padding: 8rem 1.4rem 4rem;
}
.rechtsseite h1 { font-size: var(--fs-titel); margin-bottom: 1.6rem; }
.rechtsseite h2 {
  font-size: 1.2rem;
  margin: 2rem 0 .5rem;
}
.rechtsseite p, .rechtsseite dd, .rechtsseite dt { color: var(--text-gedaempft); }
.rechtsseite dt { font-weight: 500; margin-top: .6rem; color: var(--text); }
.rechtsseite dd { margin: 0; }
.rechtsseite a { color: var(--korall-tief); }