/* AYMANOVA CAMPUS. Platzhalterseite.
   Eine einzige Datei, damit der Ordner allein ausgeliefert werden kann.
   Farbwelt „erde", Fraunces für Überschriften, Nunito Sans für Fließtext.
   Die Werte sind mit theme.css des Auftritts abgestimmt. Wird dort an der
   Farbwelt etwas geändert, gehört es hier nachgezogen. */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-var.woff2') format('woff2-variations');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
/* Tenor Sans ist die Schrift der Wortmarke. Lateinischer Schnitt, ein Gewicht,
   SIL Open Font License 1.1. Liegt lokal, es wird nichts nachgeladen. */
@font-face {
  font-family: 'Tenor Sans';
  src: url('../fonts/tenor-sans.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('../fonts/nunito-sans-var.woff2') format('woff2-variations');
  font-weight: 300 700; font-style: normal; font-display: swap;
}

:root {
  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Wortmarke und gesperrte Versalien. Dieselbe Schrift wie im Logo. */
  --font-brand: 'Tenor Sans', 'Optima', 'Gill Sans', Candara, system-ui, sans-serif;

  --head-weight: 600;
  --head-tracking: -.02em;
  --brand-tracking: .14em;

  --radius-s: 12px;
  --radius-m: 20px;
  --radius-btn: 999px;
  --ease-soft: cubic-bezier(.22, .61, .36, 1);

  --bg: #FDFAF4;
  --surface: #FFFFFF;
  --tint: #F6EFE3;
  --tint-strong: #EADCC8;

  --text: #3A2A22;
  --text-strong: #291C15;
  --muted: #6B584C;
  --muted-strong: #55443A;

  --accent: #C67B5C;
  --accent-strong: #96500F;
  --accent-deep: #7A400A;
  --accent-atem: #98582B;
  --focus: #96500F;

  --line: #E7DCC9;
  --line-strong: #CDBBA0;

  --dark: #2E211A;
  --dark-text: #F3E9DA;
  --dark-muted: #E3C9AE;

  --shadow-s: 0 3px 10px rgba(58, 42, 34, .05);
  --shadow-m: 0 16px 40px rgba(58, 42, 34, .10);

  --gl-1: #F8F1E4;
  --gl-2: #EFE0CC;
  --gl-3: #D9B89D;

  /* Markierung für Angaben, die noch fehlen. Bewusst auffällig. */
  --offen-flaeche: #FBE7C6;
  --offen-linie:   #E0B471;
  --offen-text:    #6A4508;
}

/* ---------- Grundlagen ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font-head);
  color: var(--text-strong);
  line-height: 1.15;
  margin: 0 0 .6em;
  font-weight: var(--head-weight);
  letter-spacing: var(--head-tracking);
}
h1 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem); }
h1, h2 { font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 120, 'wght' 600; }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2rem); margin-top: 2.5rem; }
h3 { font-size: 1.15rem; margin-top: 1.75rem; font-variation-settings: 'SOFT' 30, 'opsz' 20, 'wght' 600; }

p { margin: 0 0 1rem; }
a { color: var(--accent-strong); }
a:hover { color: var(--accent-deep); }

.wrap { width: min(100% - 2.5rem, 1140px); margin-inline: auto; }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 60;
  background: var(--surface); color: var(--text-strong);
  padding: .75rem 1.1rem; border-radius: var(--radius-s);
  box-shadow: var(--shadow-m); transition: top .15s ease;
}
.skip-link:focus { top: 1rem; }

:where(a, button):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.9rem; padding: .7rem 1.35rem;
  border: 1px solid transparent; border-radius: var(--radius-btn);
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  background: var(--accent-strong); color: #fff; box-shadow: var(--shadow-s);
  transition: background .2s ease;
}
.btn:hover { background: var(--accent-deep); color: #fff; }
.btn .icon { width: 1.15rem; height: 1.15rem; flex: none; }

/* Noch fehlende Pflichtangabe. Sichtbar, damit nichts Erfundenes online geht. */
.offen {
  background: var(--offen-flaeche);
  border: 1px dashed var(--offen-linie);
  color: var(--offen-text);
  border-radius: 6px;
  padding: 0 .35em;
  font-size: .94em;
  font-weight: 600;
}

/* Aufblenden beim Scrollen. Der Anfangszustand haengt an der Klasse js, ohne
   Skript steht also alles einfach da. Bewegt wird translate, damit :hover
   weiter mit transform arbeiten kann, ohne sich zu beissen. */
.js [data-auf] { opacity: 0; translate: 0 1.1rem; }
.js [data-auf].is-auf {
  opacity: 1;
  translate: 0 0;
  transition: opacity .8s var(--ease-soft), translate .8s var(--ease-soft);
  transition-delay: calc(var(--n, 0) * .08s);
}

/* ---------- Bühne der Startseite ---------- */

.start { flex: 1; display: flex; flex-direction: column; }

.buehne {
  position: relative;
  flex: 1 0 auto;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(2.5rem, 1.5rem + 5vw, 5rem) 0 clamp(3rem, 2rem + 4vw, 5rem);
  background:
    radial-gradient(60% 55% at 18% 22%, var(--gl-2) 0%, transparent 70%),
    radial-gradient(55% 50% at 82% 28%, var(--gl-3) 0%, transparent 72%),
    radial-gradient(70% 60% at 50% 100%, var(--gl-1) 20%, transparent 75%),
    var(--gl-1);
}
/* Feines Korn über dem Verlauf, wie im Hero des Auftritts. */
.buehne__korn,
.abbinder__korn {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

.buehne__inner {
  position: relative;
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
}

/* Das Logo trägt den Schriftzug samt Innovative Learning und den beiden Winkeln.
   Seitenverhältnis 750 zu 225. */
.logo { width: min(100%, 24rem); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

.status {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 0 0 1.25rem;
  padding: .4rem .9rem .4rem .75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  background: rgba(255, 255, 255, .7);
  font-family: var(--font-brand);
  font-size: .86rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-deep);
}
.status__punkt {
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--accent-strong);
  flex: none;
}
.js .status__punkt { animation: punkt-atmen 3.2s ease-in-out infinite; }
@keyframes punkt-atmen {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}

.buehne__titel { font-size: clamp(2.2rem, 1.3rem + 4vw, 3.8rem); margin-bottom: .45em; }
.lead {
  font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem);
  color: var(--text-strong);
  max-width: 46ch;
}
.buehne__text { max-width: 52ch; color: var(--muted-strong); }

.kontaktblock {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  max-width: 52ch;
}
.kontaktblock p { color: var(--muted-strong); font-size: .98rem; }
.kontaktblock__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.1rem 0 0; }
/* Die Adresse im Klartext, weil mailto auf manchen Geräten ins Leere läuft. */
.kontaktblock__direkt { margin: .85rem 0 0; }
.kontaktblock__mail { font-weight: 600; white-space: nowrap; }

/* ---------- Venn-Diagramm ---------- */

.venn-block { display: grid; justify-items: center; }

.venn { position: relative; width: min(100%, 30rem); aspect-ratio: 1; }
.venn__grafik { display: block; width: 100%; height: 100%; overflow: visible; }

.venn__flaeche {
  fill: var(--accent);
  fill-opacity: .17;
  transform-origin: 200px 200px;
}
.venn__linie {
  fill: none;
  stroke: var(--accent-strong);
  stroke-width: 1.4;
  stroke-opacity: .38;
  transform-origin: 200px 200px;
}
/* Die Schnittmenge aller vier: der Kern. */
.venn__kern { fill: var(--accent-deep); }

.venn__wort {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  padding: .35rem .5rem;
  max-width: 8.5rem;
  font-size: clamp(.86rem, .74rem + .4vw, 1.02rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--muted-strong);
  text-align: center;
  transition: color .25s var(--ease-soft), transform .3s var(--ease-soft);
}
.venn__wort.is-aktiv {
  color: var(--accent-deep);
  transform: translate(-50%, -50%) scale(1.06);
}

.venn__mitte {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-family: var(--font-brand);
  font-size: clamp(.62rem, .44rem + .55vw, .8rem);
  font-weight: 400;
  letter-spacing: var(--brand-tracking);
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

/* Auftritt: erst zeichnen sich die Kreise, dann füllen sie sich, zuletzt kommt
   der Kern. Nach etwa 3,4 Sekunden ist der Aufbau fertig, dann übernimmt der
   Dauerpuls. Ohne JavaScript steht das fertige Bild sofort da. */
.js .venn .venn__linie { stroke-dasharray: 754; stroke-dashoffset: 754; }
.js .venn .venn__flaeche { opacity: 0; transform: scale(.72); }
.js .venn .venn__kern { opacity: 0; transform: scale(.6); transform-origin: 200px 200px; }
.js .venn .venn__mitte,
.js .venn .venn__wort { opacity: 0; }

.js .venn-block.is-in .venn__linie {
  animation: venn-zeichnen 1.9s var(--ease-soft) forwards;
  animation-delay: calc(var(--n) * .22s);
}
.js .venn-block.is-in .venn__flaeche {
  animation: venn-fuellen 1.2s var(--ease-soft) forwards,
             venn-atmen 15s ease-in-out infinite;
  animation-delay: calc(.6s + var(--n) * .22s), calc(2.6s + var(--n) * 2.4s);
}
.js .venn-block.is-in .venn__kern {
  animation: venn-kern 1.3s var(--ease-soft) 1.7s forwards,
             venn-kern-atmen 10s ease-in-out 3.4s infinite;
}
.js .venn-block.is-in .venn__mitte { animation: venn-auf 1s var(--ease-soft) 2.2s forwards; }
.js .venn-block.is-in .venn__wort {
  animation: venn-auf .9s var(--ease-soft) forwards;
  animation-delay: calc(1.25s + var(--n) * .22s);
}

@keyframes venn-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes venn-fuellen  { to { opacity: 1; transform: scale(1); } }
@keyframes venn-kern     { to { opacity: 1; transform: scale(1); } }
@keyframes venn-auf      { to { opacity: 1; } }
@keyframes venn-atmen    { 0%, 100% { opacity: 1; } 50% { opacity: .74; } }

/* Der Kern atmet farblich, fünf Sekunden hin und fünf zurück. Kein Blinken,
   kein Größenwechsel. Weiße Schrift bleibt an beiden Enden lesbar. */
@keyframes venn-kern-atmen {
  0%, 100% { fill: var(--accent-deep); }
  50%      { fill: var(--accent-atem); }
}

.venn[data-venn] .venn__flaeche.is-aktiv { fill-opacity: .3; }
.venn[data-venn] .venn__linie.is-aktiv { stroke-opacity: .8; stroke-width: 2; }
.venn__flaeche, .venn__linie {
  transition: fill-opacity .3s var(--ease-soft), stroke-opacity .3s var(--ease-soft), stroke-width .3s var(--ease-soft);
}

/* ---------- Dreiklang und Fliesstext ---------- */

.manifest { padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0 clamp(3rem, 2rem + 5vw, 6rem); }
.manifest__inner {
  display: grid;
  gap: clamp(2rem, 4vw, 4.5rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: start;
}

/* Drei Saetze, je zweigeteilt: der Auftakt klein und zurueckgenommen, die
   Aussage gross in der Ueberschriftenschrift. Die Punkte am Rand sind mit
   einer Haarlinie verbunden. */
.dreiklang__satz {
  position: relative;
  margin: 0 0 clamp(1.5rem, 2.5vw, 2.25rem);
  padding-left: 2rem;
}
.dreiklang__satz:last-child { margin-bottom: 0; }
.dreiklang__satz::before {
  content: "";
  position: absolute; left: 0; top: .45rem;
  width: .7rem; height: .7rem;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  z-index: 1;
}
.dreiklang__satz:not(:last-child)::after {
  content: "";
  position: absolute; left: .31rem; top: 1.2rem; bottom: -1.2rem;
  width: 2px;
  background: linear-gradient(180deg, var(--tint-strong), transparent);
}
.dreiklang__auftakt {
  display: block;
  color: var(--muted);
  font-size: .95rem; font-weight: 600;
  line-height: 1.5;
  margin-bottom: .2rem;
}
.dreiklang__kern {
  display: block;
  font-family: var(--font-head);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 120, 'wght' 600;
  font-size: clamp(1.25rem, 1.05rem + .95vw, 1.75rem);
  line-height: 1.28;
  letter-spacing: var(--head-tracking);
  color: var(--text-strong);
}

.fliess { max-width: 46ch; color: var(--muted-strong); }
.fliess p:last-child { margin-bottom: 0; }

/* Der Satz, der den Abschnitt eröffnet. Steht allein und mittig und trägt ihn
   als Überschrift, der Dreiklang und der Fließtext folgen darunter. */
.merksatz {
  width: min(100% - 2.5rem, 46rem);
  margin: 0 auto clamp(2.75rem, 2rem + 3.5vw, 4.5rem);
  text-align: center;
}
.merksatz span {
  display: block;
  font-family: var(--font-head);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 120, 'wght' 600;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.15rem);
  line-height: 1.32;
  letter-spacing: var(--head-tracking);
  color: var(--accent-deep);
}
.merksatz span::before {
  content: "";
  display: block;
  width: 3.5rem; height: 2px;
  margin: 0 auto clamp(1.25rem, 2vw, 1.75rem);
  border-radius: 2px;
  background: var(--accent);
}

/* ---------- Ein Campus, der beruehrt ---------- */

.campus {
  padding: clamp(3rem, 2rem + 5vw, 6rem) 0;
  border-block: 1px solid var(--line);
  background: linear-gradient(170deg, var(--tint) 0%, var(--gl-2) 100%);
}
.campus__inner {
  display: grid;
  gap: clamp(1.25rem, 3vw, 3.5rem);
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: start;
}
.campus__titel {
  margin: 0;
  font-size: clamp(1.7rem, 1.25rem + 2.1vw, 2.6rem);
}
.campus__text { max-width: 52ch; }
.campus__text p:last-child { margin-bottom: 0; color: var(--muted-strong); }
.campus__lead {
  font-family: var(--font-head);
  font-variation-settings: 'SOFT' 40, 'opsz' 60, 'wght' 500;
  font-size: clamp(1.15rem, 1.02rem + .65vw, 1.45rem);
  line-height: 1.45;
  color: var(--text-strong);
}

/* ---------- Kurswelt ---------- */

.kurswelt { padding: clamp(3.5rem, 2rem + 5vw, 6.5rem) 0; }
.kurswelt__kopf { max-width: 54ch; }
.kurswelt__kopf h2 { margin-top: 0; font-size: clamp(1.7rem, 1.25rem + 2.1vw, 2.6rem); }
.kurswelt__kopf .lead { color: var(--muted-strong); margin-bottom: 0; }

.kurswelt__vorspann {
  margin: clamp(2rem, 4vw, 3rem) 0 1.25rem;
  font-family: var(--font-brand);
  font-size: .88rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-deep);
}

.kurse {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
}
.kurs {
  position: relative;
  overflow: hidden;
  padding: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: var(--shadow-s);
  transition: transform .25s var(--ease-soft), box-shadow .25s var(--ease-soft),
              border-color .25s var(--ease-soft);
}
/* Feiner Strich am oberen Rand, der beim Zeigen aufzieht. */
.kurs::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-deep));
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-soft);
}
.kurse .kurs:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-m);
  border-color: var(--line-strong);
}
.kurse .kurs:hover::before { transform: scaleX(1); }
.kurs__titel {
  margin: 0 0 .5rem;
  font-size: 1.1rem;
  line-height: 1.3;
}
.kurs__text { margin: 0; color: var(--muted-strong); font-size: .98rem; }

.kurswelt__nachsatz {
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  color: var(--muted);
  font-size: .98rem;
}

/* ---------- Abbinder ---------- */

.abbinder {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0;
  background:
    radial-gradient(60% 60% at 20% 100%, var(--gl-2) 0%, transparent 70%),
    radial-gradient(55% 55% at 80% 0%, var(--gl-3) 0%, transparent 72%),
    var(--gl-1);
}
.abbinder__inner { display: grid; justify-items: center; text-align: center; }
.abbinder__marke { margin: 0; display: grid; justify-items: center; gap: .15rem; }
.abbinder__name {
  font-family: var(--font-brand);
  font-size: 1.15rem; font-weight: 400;
  letter-spacing: var(--brand-tracking); text-transform: uppercase;
  color: var(--text-strong);
}
.abbinder__claim {
  font-family: var(--font-brand);
  font-size: .8rem; font-weight: 400;
  letter-spacing: var(--brand-tracking); text-transform: uppercase;
  color: var(--accent-deep);
}
.abbinder__zeile {
  margin: clamp(1rem, 2vw, 1.5rem) 0 clamp(1.5rem, 3vw, 2.25rem);
  max-width: 18ch;
  font-size: clamp(1.5rem, 1.15rem + 2vw, 2.5rem);
}
.abbinder__aktion { margin: 0; }
/* Die Adresse im Klartext, weil mailto auf manchen Geräten ins Leere läuft. */
.abbinder__direkt {
  margin: 1rem 0 0;
  color: var(--muted-strong);
  font-size: .95rem;
}
.abbinder__mail { font-weight: 600; white-space: nowrap; }

/* ---------- Rechtsseiten ---------- */

.recht { flex: 1; padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 0 clamp(3rem, 2rem + 3vw, 4.5rem); }
.recht__inner { width: min(100% - 2.5rem, 46rem); margin-inline: auto; }
.recht h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.8rem); }
.recht h2:first-of-type { margin-top: 2rem; }
.recht ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.recht li { margin-bottom: .35rem; }
.recht address { font-style: normal; margin-bottom: 1rem; }
.recht__stand { color: var(--muted); font-size: .92rem; margin-top: 2.5rem; }

.zurueck {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-bottom: 1.75rem;
  font-size: .95rem; font-weight: 600; text-decoration: none;
}
.zurueck:hover { text-decoration: underline; }
.zurueck .icon { width: 1.05rem; height: 1.05rem; }

/* Der Verantwortliche in der Datenschutzerklärung, abgesetzt vom Fließtext. */
.verantwortlicher {
  margin: 1.5rem 0 2rem;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-s);
  background: var(--tint);
}
.verantwortlicher p { margin: 0 0 .5rem; }
.verantwortlicher p:last-child { margin-bottom: 0; }
.verantwortlicher strong { color: var(--text-strong); }

/* ---------- Fußzeile ---------- */

.fuss {
  background: var(--dark);
  color: var(--dark-text);
  padding: clamp(2rem, 1.5rem + 2vw, 3rem) 0;
}
.fuss__inner { display: grid; gap: .75rem; justify-items: center; text-align: center; }
.fuss__marke { margin: 0; width: 100%; display: grid; justify-items: center; }
/* Helle Fassung des Logos, der Schriftzug in der Fußzeile ist entfallen. */
.fuss__logo { width: min(100%, 15rem); margin-inline: auto; }
.marke__name {
  font-family: var(--font-brand); font-size: 1.2rem; font-weight: 400;
  letter-spacing: var(--brand-tracking); text-transform: uppercase; color: #fff;
}
.marke__zusatz {
  font-family: var(--font-brand);
  font-size: .8rem; font-weight: 400;
  letter-spacing: var(--brand-tracking); text-transform: uppercase;
  color: var(--dark-muted);
}
.fuss__text { margin: 0; color: var(--dark-muted); font-size: .95rem; }
.fuss__nav ul {
  list-style: none; margin: .5rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.5rem;
}
.fuss__nav a { color: var(--dark-text); font-size: .95rem; }
.fuss__nav a:hover { color: #fff; }

/* ---------- Schmale Fenster ---------- */

@media (max-width: 62rem) {
  .buehne__inner { grid-template-columns: 1fr; }
  .buehne__text-block { order: 1; }
  .venn-block { order: 2; }
  .venn { width: min(100%, 24rem); }

  .manifest__inner,
  .campus__inner { grid-template-columns: 1fr; }
  .campus__titel { max-width: 18ch; }
}

/* ---------- Wer weniger Bewegung möchte, bekommt das fertige Bild ---------- */

@media (prefers-reduced-motion: reduce) {
  .js .venn .venn__linie { stroke-dashoffset: 0; }
  .js .venn .venn__flaeche { opacity: 1; transform: none; }
  .js .venn .venn__kern { opacity: 1; transform: none; }
  .js .venn .venn__mitte,
  .js .venn .venn__wort { opacity: 1; }
  .js .venn-block.is-in .venn__linie,
  .js .venn-block.is-in .venn__flaeche,
  .js .venn-block.is-in .venn__kern,
  .js .venn-block.is-in .venn__mitte,
  .js .venn-block.is-in .venn__wort,
  .js .status__punkt { animation: none; }

  .js [data-auf] { opacity: 1; translate: 0 0; }
  .js [data-auf].is-auf { transition: none; }
  .kurse .kurs:hover { transform: none; }
  .kurs::before, .kurse .kurs:hover::before { transition: none; }
}