/* 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;
}
@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;

  --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;
}

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

.buehne {
  position: relative;
  flex: 1;
  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 {
  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);
}

.logo { width: min(100%, 20rem); 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-size: .82rem; font-weight: 700;
  letter-spacing: .18em; 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-top: 1.1rem; }
.kontaktblock__mail { font-weight: 600; }

/* ---------- 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-body);
  font-size: clamp(.6rem, .42rem + .55vw, .78rem);
  font-weight: 800;
  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);
}

/* ---------- 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; }

/* Kasten mit dem Hinweis, was auf einer Rechtsseite noch fehlt. */
.offen-kasten {
  margin: 1.5rem 0 2rem;
  padding: 1.1rem 1.25rem;
  border: 1px dashed var(--offen-linie);
  border-radius: var(--radius-m);
  background: var(--offen-flaeche);
  color: var(--offen-text);
}
.offen-kasten p { margin-bottom: .5rem; font-weight: 700; }
.offen-kasten ul { margin-bottom: 0; }
.offen-kasten li { font-weight: 500; }

/* ---------- 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; display: flex; gap: .5rem; align-items: baseline; }
.marke__name {
  font-family: var(--font-head); font-size: 1.15rem; font-weight: 700;
  letter-spacing: var(--brand-tracking); text-transform: uppercase; color: #fff;
}
.marke__zusatz {
  font-size: .78rem; font-weight: 700;
  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); }
}

/* ---------- 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; }
}