/* Innenwelten — innenwelten.eu
   Look nach .STUDIO D-25/D-34: Tinte und Zinnober auf warmem Papier, EB Garamond (OFL, lokal eingebunden).
   Zinnober nur als Auszeichnung: Strich, Rubrik-Ziffer, Link beim Überfahren — nie als Fläche. */

@font-face { font-family: "EB Garamond"; src: url("ebgaramond.woff") format("woff");
             font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("ebgaramond-italic.woff") format("woff");
             font-weight: 400 800; font-style: italic; font-display: swap; }

:root {
  --papier: #F1EADB;
  --papier-tief: #E7DDC8;
  --tinte: #1F1B16;
  --sepia: #6B6154;
  --zinnober: #C8402A;
  --schatten: #D9CDB4;
  --mass: 38rem;            /* Satzbreite */
  --rand: clamp(1rem, 4vw, 3rem);
}

* { box-sizing: border-box; }
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--tinte); background-color: var(--papier);
  /* Papierkorn: feines Rauschen als SVG, kein Bild vom Server */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .38 0 0 0 0 .33 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;
  font-feature-settings: "kern", "liga", "onum";
  line-height: 1.6; text-rendering: optimizeLegibility;
}
::selection { background: var(--schatten); }

a { color: inherit; text-decoration-color: var(--sepia); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover, a:focus-visible { color: var(--zinnober); text-decoration-color: var(--zinnober); }
a:focus-visible { outline: 2px solid var(--zinnober); outline-offset: 3px; }

/* ---------- Kopf und Fuß ---------- */
.kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
        padding: 1.4rem var(--rand) 0; max-width: 72rem; margin: 0 auto; }
.marke { font-weight: 700; font-size: 1.35rem; letter-spacing: .01em; text-decoration: none; }
.kopf nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .95rem; font-variant: small-caps; letter-spacing: .06em; }
.kopf nav a { text-decoration: none; color: var(--sepia); }
.kopf nav a:hover { color: var(--zinnober); }

.fuss { max-width: 72rem; margin: 6rem auto 0; padding: 2rem var(--rand) 3rem; border-top: 1px solid var(--schatten);
        display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--sepia); font-size: .9rem; }
.fuss a { color: var(--sepia); }

/* ---------- Satz ---------- */
main { max-width: 72rem; margin: 0 auto; padding: 0 var(--rand); }
h1, h2, h3 { font-weight: 700; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); margin-top: 3.2rem; }
h3 { font-size: 1.2rem; margin-top: 2rem; }
p, ul, ol { max-width: var(--mass); }
.strich { display: block; width: 7rem; height: 3px; background: var(--zinnober); margin: 1.1rem 0 1.4rem; border: 0; }
.dach { font-variant: small-caps; letter-spacing: .12em; color: var(--sepia); font-size: .95rem; margin: 0 0 .6rem; }
.dach .nr { color: var(--zinnober); letter-spacing: .04em; }
.lead { font-size: 1.25rem; line-height: 1.5; max-width: 34rem; }
.leise { color: var(--sepia); }
.klein { font-size: .9rem; }

/* ---------- Startseite ---------- */
.titelblatt { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 3rem; align-items: center;
              padding: 4.5rem 0 3rem; }
.titelblatt .kopfbild { justify-self: center; width: min(19rem, 70vw); aspect-ratio: 1; border-radius: 50%;
              box-shadow: 0 0 0 10px var(--papier), 0 0 0 11px var(--schatten), 14px 18px 0 11px var(--schatten);
              background: url("kopf.jpg") center/cover; }
.regeln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 2.5rem 0 1rem;
          border-top: 1px solid var(--schatten); padding-top: 2rem; }
.regeln div { font-size: 1.02rem; }
.regeln b { display: block; font-size: 1.15rem; margin-bottom: .3rem; }
.regeln .ziffer { color: var(--zinnober); font-variant: small-caps; letter-spacing: .1em; font-size: .9rem; }

.folgen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem; margin-top: 1.6rem; }
.karte { text-decoration: none; display: block; }
.karte img { width: 100%; height: auto; display: block; box-shadow: 10px 12px 0 var(--schatten); transform: rotate(-.6deg);
             transition: transform .35s ease, box-shadow .35s ease; }
.karte:nth-child(2) img { transform: rotate(.5deg); }
.karte:hover img { transform: rotate(0) translateY(-3px); box-shadow: 12px 16px 0 var(--schatten); }
.karte .dach { margin-top: 1.4rem; }
.karte h3 { margin-top: .2rem; font-size: 1.45rem; }
.karte p { margin: .4rem 0 0; color: var(--sepia); }

.belegakte { margin-top: 4.5rem; padding: 2.4rem clamp(1.2rem, 4vw, 3rem); background: var(--papier-tief);
             border: 1px solid var(--schatten); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem; }
.belegakte h2 { margin-top: 0; }
.formular-platz { border: 1px dashed var(--sepia); padding: 1.2rem; align-self: center; color: var(--sepia); font-style: italic; }
.anmeldung { display: grid; gap: .75rem; align-self: center; }
.anmeldung > label { font-variant: small-caps; letter-spacing: .1em; color: var(--sepia); font-weight: 600; }
.anmeldung input[type=email] { font: inherit; padding: .65rem .8rem; border: 1px solid var(--sepia); background: var(--papier); color: var(--tinte); border-radius: 0; }
.anmeldung .einwilligung { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem;
                           font-variant: normal; letter-spacing: normal; color: var(--tinte); font-weight: 400; }
.anmeldung .einwilligung input { margin-top: .3rem; accent-color: var(--zinnober); }
.anmeldung button { justify-self: start; font: inherit; padding: .6rem 1.5rem; background: var(--tinte); color: var(--papier); border: 0; cursor: pointer; }
.anmeldung button:hover { background: var(--zinnober); }
.anmeldung input:focus-visible, .anmeldung button:focus-visible { outline: 2px solid var(--zinnober); outline-offset: 2px; }
.anmeldung p { margin: 0; }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Mitmachen: die Zugänge (.STUDIO D-167) ---------- */
.mitmachen { margin-top: 4.5rem; }
.mitmachen h2 { margin-top: 0; }
.zugaenge { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; margin-top: 1.8rem; }
.zugang { display: flex; flex-direction: column; padding: 1.3rem 1.5rem 1.2rem; border: 1px solid var(--schatten);
          border-top: 3px solid var(--tinte); }
.zugang .dach { margin: 0 0 .35rem; }
.zugang h3 { margin: 0 0 .5rem; font-size: 1.35rem; }
.zugang p, .zugang ul { margin: 0 0 .8rem; color: var(--sepia); }
.zugang ul { padding-left: 1.1rem; }
.zugang li { margin: .25rem 0; }
.zugang .preis { color: var(--tinte); font-size: 1.2rem; font-weight: 600; margin-bottom: .2rem; }
.zugang .weiter { margin-top: auto; font-variant: small-caps; letter-spacing: .08em; text-decoration: none; color: var(--tinte); }
.zugang .weiter::after { content: " →"; color: var(--zinnober); }
.zugang.hervor { grid-column: 3; grid-row: 1 / span 2; background: var(--papier-tief); border-top-color: var(--zinnober); }
.schritte ol { padding-left: 1.3rem; max-width: 44rem; }
.schritte li { margin: .45rem 0; }
.zugaenge-fuss { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; font-variant: small-caps;
                 letter-spacing: .06em; padding-bottom: 1rem; margin-bottom: .2rem; border-bottom: 1px solid var(--schatten); }
.zugaenge-fuss a { text-decoration: none; }

/* ---------- Folgenseite ---------- */
.folge-kopf { padding: 3.5rem 0 1rem; max-width: 50rem; }
.folge-kopf h1 { font-size: clamp(2.3rem, 6vw, 3.8rem); }
.folge-bild { margin: 2rem 0 0; max-width: 50rem; }
.folge-bild img { width: 100%; height: auto; display: block; box-shadow: 10px 12px 0 var(--schatten); }
.video-hinweis { margin-top: 1.4rem; font-style: italic; color: var(--sepia); }

.spalten { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 3rem; margin-top: 3rem; }
.inhalt { position: sticky; top: 1.5rem; align-self: start; font-size: .95rem; }
.inhalt b { font-variant: small-caps; letter-spacing: .1em; color: var(--sepia); font-weight: 600; }
.inhalt ol { list-style: none; padding: 0; margin: .6rem 0 0; }
.inhalt li { margin: .35rem 0; }
.inhalt a { text-decoration: none; }

.kapitel { list-style: none; padding: 0; margin: 1rem 0 0; max-width: 40rem; }
.kapitel li { display: grid; grid-template-columns: 4rem 1fr; gap: .5rem; padding: .55rem 0; border-bottom: 1px solid var(--schatten); }
.kapitel .zeit { font-feature-settings: "tnum", "lnum"; color: var(--zinnober); }

.nachweis { list-style: none; padding: 0; max-width: 46rem; }
.nachweis li { padding: .7rem 0 .7rem 1.2rem; border-left: 2px solid var(--schatten); margin: .4rem 0; }
.nachweis li:hover { border-left-color: var(--zinnober); }
.nachweis .wie { display: block; font-size: .88rem; color: var(--sepia); font-style: italic; }
.nachweis a { word-break: break-word; }
/* die Quellenzeilen des Videos unter jedem Werk (ST-58 A2, D-174 ⑥) */
.nachweis .blaetter { list-style: none; margin: .5rem 0 0; padding: 0 0 0 .9rem; font-size: .9rem; color: var(--sepia); }
.nachweis .blaetter li { padding: .22rem 0; margin: 0; border-left: 0; }
.nachweis .blaetter li::before { content: "·"; color: var(--zinnober); margin-right: .5rem; }
.karte .dauer { font-feature-settings: "tnum", "lnum"; color: var(--tinte); }

.kasten { margin-top: 2.2rem; padding: 1.4rem 1.6rem; border: 1px solid var(--schatten); background: var(--papier-tief); max-width: 46rem; }
.kasten h3 { margin-top: 0; }
.werbung { font-variant: small-caps; letter-spacing: .08em; color: var(--sepia); }

/* ---------- Rechtstexte ---------- */
.recht { max-width: 44rem; padding-top: 3rem; }
.recht h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.recht dl { display: grid; grid-template-columns: 15rem 1fr; gap: .5rem 1.5rem; margin: 1.5rem 0; }
.recht dt { color: var(--sepia); }
.recht dd { margin: 0; }
.platzhalter { background: #f6d9c8; padding: 0 .25em; outline: 1px dashed var(--zinnober); }

/* ---------- Bewegung: ein ruhiger Auftritt ---------- */
@media (prefers-reduced-motion: no-preference) {
  .auftritt > * { animation: auf .8s ease both; }
  .auftritt > *:nth-child(2) { animation-delay: .08s; }
  .auftritt > *:nth-child(3) { animation-delay: .16s; }
  .auftritt > *:nth-child(4) { animation-delay: .24s; }
  .auftritt > *:nth-child(5) { animation-delay: .32s; }
  @keyframes auf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  .titelblatt, .belegakte, .folgen, .regeln, .spalten, .zugaenge { grid-template-columns: minmax(0, 1fr); }
  .zugang.hervor { grid-column: auto; grid-row: auto; }
  .kopf nav { gap: .3rem 1rem; font-size: .9rem; }
  .titelblatt { padding-top: 2.5rem; gap: 2rem; }
  .titelblatt .kopfbild { order: -1; width: 11rem; }
  .inhalt { position: static; }
  .recht dl { grid-template-columns: minmax(0, 1fr); }
  .recht dt { margin-top: .6rem; }
}

@media print {
  body { background: #fff; }
  .kopf nav, .fuss, .inhalt, .formular-platz, .anmeldung { display: none; }
}