/* ==========================================================================
   socialthink.ch — Komponenten
   ========================================================================== */

/* ==========================================================================
   Wortmarke
   ========================================================================== */

.wordmark { display: inline-block; line-height: 0; }
/* Das Logo ist quadratisch — die Breite ist zugleich die Hoehe. */
.wordmark--header { width: clamp(2.75rem, 4.5vw, 3.5rem); }
.wordmark--footer { width: 2.5rem; }

/* ==========================================================================
   Kopf- und Fusszeile
   Blog, Kontakt und Datenschutz leben bewusst ausserhalb der drei Kreise.
   ========================================================================== */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
  position: relative;
  z-index: 20;
}

.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(var(--sp-3), 2.2vw, var(--sp-6));
  font-size: var(--fs-nav);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.nav a {
  text-decoration: none;
  color: var(--fg-soft);
  padding-block: var(--sp-1);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.nav a:hover,
.nav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--area); }

/* ---- Bereichsnavigation --------------------------------------------------
   Auf allen Seiten ausser der Startseite stehen die vier Bereiche oben —
   mit demselben unrunden Koerper wie auf der Startseite, nur in klein. Die
   Farbe kommt je Eintrag aus der eigenen area-Klasse, nicht aus der Seite. */

.nav__areas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(var(--sp-3), 2vw, var(--sp-5));
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__areas a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border-bottom: 0;
}

.nav__blob {
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
  border-radius: 50%;
  background: var(--area);
  animation: blob-drift 28s ease-in-out infinite;
  transition: scale var(--dur-fast) var(--ease);
}
.nav__areas li:nth-child(2) .nav__blob { animation-delay:  -8s; }
.nav__areas li:nth-child(3) .nav__blob { animation-delay: -15s; }
.nav__areas li:nth-child(4) .nav__blob { animation-delay: -22s; }

.nav__areas a:hover .nav__blob,
.nav__areas a[aria-current="page"] .nav__blob { scale: 1.35; }

/* Kontakt haelt seine Ecke oben rechts — auch dann, wenn die Bereiche
   darunter in eine eigene Zeile rutschen. Es steht darum neben der
   Bereichsnavigation im Markup, nicht darin. */
.site-header__kontakt {
  font-family: var(--ff-sans);
  font-size: var(--fs-nav);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--fg-soft);
  padding-block: var(--sp-1);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.site-header__kontakt:hover { color: var(--fg); border-bottom-color: var(--area); }

/* Reicht der Platz nicht mehr fuer eine Zeile, bekommen die Bereiche eine
   eigene darunter. Wortmarke und Kontakt bleiben oben in ihren Ecken —
   vorher brach die ganze Kopfzeile um und Kontakt landete links unten. */
@media (max-width: 860px) {
  .site-header:has(.nav__areas) {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
      "logo kontakt"
      "nav  nav";
    justify-content: space-between;
    align-items: center;
    row-gap: var(--sp-4);
  }
  .site-header:has(.nav__areas) .wordmark            { grid-area: logo; }
  .site-header:has(.nav__areas) .nav                 { grid-area: nav; }
  .site-header:has(.nav__areas) .site-header__kontakt { grid-area: kontakt; justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__blob { animation-play-state: paused; }
}

.site-footer {
  margin-top: var(--sp-9);
  border-top: 1px solid var(--rule);
  padding-block: var(--sp-6) var(--sp-7);
  font-size: var(--fs-meta);
  color: var(--fg-soft);
}

.site-footer__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  align-items: start;
}

.site-footer h2 {
  font-family: var(--ff-sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 var(--sp-3);
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--sp-2); line-height: 1.6; }
.site-footer a { color: var(--fg-soft); text-decoration: none; }
.site-footer a:hover { color: var(--fg); text-decoration: underline; }

.site-footer__note {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  justify-content: space-between;
}
.site-footer__heart { color: var(--c-magenta-deep); }

/* ==========================================================================
   Die vier Bereichskoerper der Frontpage

   Zwei verschiedene Kompositionen, nicht eine schmal gerechnete: am Desktop
   eine Gruppe mit gestaffelten Groessen und diagonalem Gewicht, auf schmalen
   Viewports eine Kette, die tiefer verzahnt ist und seitlich aus dem Rand
   laeuft. Beide sind einzeln gerechnet — Abstaende und Ueberlappungen stehen
   bei den jeweiligen Regeln.

   Aufbau in zwei Ebenen:
     .venn__discs   nur die Farbflaechen, mit mix-blend-mode
     .circle        Klickflaeche, Beschriftung und aufklappbarer Inhalt

   Diese Trennung ist notwendig, weil mix-blend-mode nur innerhalb desselben
   Stacking-Kontexts mischt: laege die Flaeche im transformierten Kreis, haette
   sie keinen Zugriff auf die Nachbarkreise als Hintergrund. Ausserdem wird die
   Groesse ueber width/left/top animiert statt ueber scale — so behaelt die
   Beschriftung in jedem Zustand ihren normalen Schriftgrad.

   --dia-open steht auf der Buehne und nennt den Durchmesser des
   aufgeklappten Koerpers. circles.js liest ihn von dort, um die
   Unterrubriken gegen den richtigen Radius zu verteilen.
   ========================================================================== */

/* Die Startseite traegt nichts ausser den vier Koerpern. Sie stehen darum
   mittig im verbleibenden Screen; die Ueberschrift bleibt im Dokument, ist
   aber nur fuer Screenreader und Suchmaschinen da. */
.home {
  display: grid;
  /* Nur vertikal zentrieren. place-items: center wuerde auch waagrecht
     zentrieren und damit die Bahn auf Inhaltsbreite schrumpfen lassen —
     die Buehne rechnet ihre Breite aber aus der des Elternelements. */
  align-content: center;
  min-height: calc(100vh - 9rem);
  min-height: calc(100svh - 9rem);
}

/* Die Buehne bricht aus der Textspalte aus und nimmt die volle Fensterbreite
   ein. Ohne das bliebe die Gruppe eine Insel in der Mitte: das Seitenverhaeltnis
   band sie an die Fensterhoehe, und auf einem Breitbildschirm standen links und
   rechts ueber 600 px leer. Was seitlich hinauslaeuft, wird abgeschnitten —
   clip statt hidden, damit kein Scrollcontainer entsteht. */
.venn {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow-x: clip;
  padding-block: var(--sp-5) var(--sp-7);
}

.venn__stage {
  position: relative;
  /* Volle Breite, solange das Band dabei nicht hoeher wird als der Platz
     unter der Kopfzeile. Sonst begrenzt die Hoehe. */
  width: min(100%, calc((100vh - 11rem) * 2.2));
  width: min(100%, calc((100svh - 11rem) * 2.2));
  margin-inline: auto;
  aspect-ratio: 2.2;               /* liegendes Band */
  --dia-open: 42%;                 /* wird auch von circles.js gelesen */
  isolation: isolate;              /* Mischgruppe endet hier */
}

.venn__discs { position: absolute; inset: 0; pointer-events: none; }

/* ---- Gemeinsame Geometrie beider Ebenen ----------------------------------
   left, top und width stehen bewusst als direkte Werte in den Regeln und
   nicht als var(--cx) und so weiter. Wenn eine animierte Eigenschaft ihren
   Wert ueber eine Custom Property bezieht und sich diese beim Zustandswechsel
   aendert, aktualisiert der berechnete Wert nicht zuverlaessig. Ausgeschrieben
   ist es laenger, aber verlaesslich.

   Die vier Groessen sind gestaffelt — ein dominanter Koerper, zwei mittlere,
   ein kleiner. Das gibt der Startseite eine Hierarchie, statt vier gleich
   grosse Formen nebeneinanderzustellen. Die Mittelpunkte sind so gerechnet,
   dass benachbarte Koerper trotz verschiedener Radien in derselben schmalen
   Linse zusammentreffen: der Abstand betraegt jeweils 0.89 der Radiensumme.
   Die beiden Diagonalen liegen bei 1.22 und 1.27 und beruehren sich nicht.   */

.disc,
.circle {
  position: absolute;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transition: left var(--dur) var(--ease-out),
              top var(--dur) var(--ease-out),
              width var(--dur) var(--ease-out);
}

/* Ruhelage: eine Kette in Lesereihenfolge, von links nach rechts abnehmend
   und senkrecht versetzt, damit daraus keine Reihe wird. Benachbarte Koerper
   treffen sich bei 0.83 bis 0.88 der Radiensumme, die uebrigen Paare liegen
   bei 1.57 und darueber. Eine Kette kann — anders als ein Ring — gar keinen
   eingeschlossenen Freiraum bilden. Aussen laeuft sie links und rechts rund
   fuenf Prozent der Buehnenbreite aus dem Bild.                              */
.venn__stage [data-area="beratung"]        { left: 16.0%; top: 47.1%; width: 42.0%; }
.venn__stage [data-area="sozialforschung"] { left: 47.3%; top: 62.1%; width: 32.5%; }
.venn__stage [data-area="about"]           { left: 72.7%; top: 50.0%; width: 30.0%; }
.venn__stage [data-area="gedanken"]        { left: 93.8%; top: 30.8%; width: 22.0%; }

/* ---- Amoebenform ---------------------------------------------------------
   Acht Radien statt eines einzigen: die vier Ecken bekommen je einen eigenen
   horizontalen und vertikalen Radius, wodurch die Kontur aus der Kreisform
   kippt, ohne eine Kante zu bekommen. Die Drift laesst sie sehr langsam
   weiterwandern — drei Bereiche, drei Phasen, damit nichts im Gleichschritt
   atmet. Scheibe und Klickflaeche teilen dieselbe Animation und bleiben
   dadurch deckungsgleich.                                                    */

@keyframes blob-drift {
  0%,
  100% { border-radius: 64% 36% 41% 59% / 57% 38% 62% 43%; }
  25%  { border-radius: 38% 62% 63% 37% / 41% 63% 37% 59%; }
  50%  { border-radius: 59% 41% 34% 66% / 64% 39% 61% 36%; }
  75%  { border-radius: 41% 59% 62% 38% / 36% 58% 42% 64%; }
}

.disc,
.circle__face {
  border-radius: 50%;
  animation: blob-drift 28s ease-in-out infinite;
}

.venn__stage [data-area="beratung"]        .circle__face,
.disc[data-area="beratung"]        { animation-delay:  -2s; }
.venn__stage [data-area="sozialforschung"] .circle__face,
.disc[data-area="sozialforschung"] { animation-delay:  -8s; }
.venn__stage [data-area="about"]           .circle__face,
.disc[data-area="about"]           { animation-delay: -15s; }
.venn__stage [data-area="gedanken"]        .circle__face,
.disc[data-area="gedanken"]        { animation-delay: -22s; }

/* ---- Farbflaeche --------------------------------------------------------- */

/* Die Turbulenz verschiebt die Kontur pixelweise und macht aus der glatten
   Rundung eine leicht verwackelte, gezeichnete Linie. Das Filter liegt als
   <defs> in der Seite; jeder Koerper bekommt einen eigenen Seed. */
.disc {
  --wobble: url(#wobble-1);
  background: var(--area);
  mix-blend-mode: multiply;
  filter: var(--wobble);
  transition: left var(--dur) var(--ease-out),
              top var(--dur) var(--ease-out),
              width var(--dur) var(--ease-out),
              filter var(--dur-fast) var(--ease);
}
.disc[data-area="sozialforschung"] { --wobble: url(#wobble-2); }
.disc[data-area="about"]           { --wobble: url(#wobble-3); }
.disc[data-area="gedanken"]        { --wobble: url(#wobble-4); }

/* Ohne mix-blend-mode-Unterstuetzung ueber Teiltransparenz annaehern. */
@supports not (mix-blend-mode: multiply) {
  .disc { opacity: 0.85; }
}

.disc.is-hover { filter: var(--wobble) brightness(0.92); }

/* Haelt das <defs>-SVG aus dem Layout heraus. */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Der geoeffnete Koerper steht solide da, damit sein Inhalt ruhig sitzt, und
   legt sich ueber die beiden anderen Farbflaechen. */
.disc.is-active {
  mix-blend-mode: normal;
  background: var(--area-open);
  z-index: 2;
}

/* Die Kreisebene muss ueber jeder Farbflaeche liegen — auch ueber der
   aktiven, sonst deckt diese ihre eigene Beschriftung und ihr Panel zu. */
.circle { z-index: 3; }

/* ---- Klickflaeche und Beschriftung --------------------------------------- */

.circle__face {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  font: inherit;
  color: var(--on-area);
  -webkit-tap-highlight-color: transparent;
}

.circle__label {
  position: absolute;
  left: var(--lx, 50%);
  top: var(--ly, 50%);
  width: 78%;                      /* sonst bricht der Text auf halber Breite */
  transform: translate(-50%, -50%);
  font-family: var(--ff-sans);
  font-weight: 700;
  font-size: var(--label-size, clamp(1rem, 2.2vw, 1.35rem));
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-align: center;
  /* Auffangnetz fuer lange Beschriftungen. Wo die Gestaltung eine Trennung
     vorsieht, steht sie als &shy; im Text; alles andere trennt der Browser.
     Ohne das laeuft ein Wort wie "Organisationsberatung" aus dem Koerper
     heraus, sobald es jemand ins Menue schreibt. Braucht lang="de" am
     Dokument — WordPress setzt das. */
  hyphens: auto;
  overflow-wrap: break-word;
  transition: opacity var(--dur-fast) var(--ease),
              font-size var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

/* Die Schriftgroesse folgt der Groesse des Koerpers. */
.venn__stage .circle[data-area="beratung"]        { --label-size: clamp(1.2rem,  3.0vw, 1.8rem); }
.venn__stage .circle[data-area="sozialforschung"] { --label-size: clamp(1rem,   2.3vw, 1.4rem); }
.venn__stage .circle[data-area="about"]           { --label-size: clamp(1rem,   2.2vw, 1.35rem); }
.venn__stage .circle[data-area="gedanken"]        { --label-size: clamp(0.85rem, 1.3vw, 1.05rem); }

.circle__face:hover .circle__label,
.circle__face:focus-visible .circle__label {
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 2px;
}

/* Bei nur streifender Ueberlagerung ist die Mitte jedes Koerpers frei — die
   Beschriftung sitzt darum mittig und nicht mehr im Aussendrittel. */

/* ---- Aufgeklappter Inhalt ------------------------------------------------
   Der Titel sitzt oben, der Schliessen-Knopf unten, dazwischen streut
   circles.js die Unterrubriken frei im Koerper. Alles ist absolut
   positioniert: eine normale Textspalte wuerde die Rundung ignorieren.     */

.circle__panel {
  position: absolute;
  inset: 0;
  color: var(--on-area);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease),
              visibility 0s linear var(--dur);
}

.circle__title {
  position: absolute;
  left: 50%;
  top: 14%;
  translate: -50% 0;
  /* Auf 14 % Hoehe misst die Sehne des Kreises noch 69 % des Durchmessers.
     Die Box darf darum nicht breiter sein, sonst stehen ihre Ecken ueber
     der Kontur — bei 76 % ragte sie rund 14 px hinaus. */
  width: 62%;
  text-align: center;
  margin: 0;
  font-family: var(--ff-sans);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.circle__title a {
  /* inline-block statt inline: bricht der Titel auf zwei Zeilen um, ist die
     Klickflaeche sonst nur der Text selbst, und zwischen den Zeilen klafft
     eine Luecke. Als Block ist die ganze Zeile treffbar, und die Unterlinie
     laeuft einmal darunter statt je Zeile. */
  display: inline-block;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgb(255 255 255 / 0.45);
  padding-bottom: 0.15em;
}
.circle__title a:hover,
.circle__title a:focus-visible { border-bottom-color: currentColor; }

/* ---- Unterrubriken --------------------------------------------------------
   Nicht als Liste untereinander, sondern nach den Platzverhaeltnissen im
   Koerper verteilt: circles.js rechnet fuer jede Hoehe die Sehnenbreite des
   Kreises aus und setzt --x, --y und --rot. Die Streuung ist ueber den
   Bereichsnamen gesaet und darum bei jedem Oeffnen dieselbe.
   white-space: nowrap ist Bedingung — nur so ist die Breite eines Knopfes
   unabhaengig davon, wie gross der Koerper gerade ist, und schon vor dem
   Aufklappen messbar.                                                       */

.circle__links {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  /* Die Liste spannt den ganzen Koerper auf, damit die Knoepfe frei darin
     platziert werden koennen. Sie darf dabei aber keine Klicks abfangen —
     sonst liegt sie ueber dem Titel und dessen Link ist tot. Die Knoepfe
     holen sich die Klickbarkeit einzeln zurueck. */
  pointer-events: none;
}

.circle__links li {
  position: absolute;
  pointer-events: auto;
  left: 50%;
  top: 50%;
  translate: calc(-50% + var(--x, 0px)) calc(-50% + var(--y, 0px));
  rotate: var(--rot, 0deg);
  white-space: nowrap;
}

.circle__links a {
  display: inline-block;
  font-family: var(--ff-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.5em 1em;
  border: 1px solid rgb(255 255 255 / 0.4);
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
/* Jeder Knopf mit eigener, unrunder Kontur. */
.circle__links li:nth-child(1) a { border-radius: 48% 52% 46% 54% / 58% 54% 46% 42%; }
.circle__links li:nth-child(2) a { border-radius: 54% 46% 55% 45% / 44% 48% 52% 56%; }
.circle__links li:nth-child(3) a { border-radius: 45% 55% 48% 52% / 56% 44% 56% 44%; }
.circle__links li:nth-child(4) a { border-radius: 52% 48% 54% 46% / 46% 57% 43% 54%; }

.circle__links a:hover,
.circle__links a:focus-visible {
  background: rgb(255 255 255 / 0.18);
  border-color: rgb(255 255 255 / 0.85);
}

.circle__close {
  position: absolute;
  left: 50%;
  bottom: 10%;
  translate: -50% 0;
  border: 0;
  background: none;
  padding: var(--sp-1) var(--sp-2);
  color: inherit;
  font-family: var(--ff-sans);
  font-size: 0.8125rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity var(--dur-fast) var(--ease);
}
.circle__close:hover { opacity: 1; text-decoration: underline; }

/* ---- Zustand: ein Bereich ist offen --------------------------------------
   Die beiden ruhenden Kreise schrumpfen und docken in den Ecken an; ihre
   Beschriftung rutscht dabei unter den Kreis, weil sie nicht mehr hineinpasst. */

.venn__stage.is-open [data-area] { width: 10%; }

/* Jeder ruhende Koerper dockt in der Ecke seines eigenen Quadranten an —
   so bleibt die raeumliche Zuordnung erhalten. */
/* 10 und 90 Prozent statt 6 und 94: die Beschriftung steht mittig unter dem
   Koerper und braucht darum links und rechts ihre halbe Breite an Platz.
   Weiter aussen wurde sie an der Beschneidung abgeschnitten. */
.venn__stage.is-open [data-area="beratung"]        { left: 10%; top: 18%; }
.venn__stage.is-open [data-area="sozialforschung"] { left: 90%; top: 18%; }
.venn__stage.is-open [data-area="about"]           { left: 10%; top: 82%; }
.venn__stage.is-open [data-area="gedanken"]        { left: 90%; top: 82%; }

/* 74% muss mit --dia-open auf der Buehne uebereinstimmen — circles.js liest
   von dort den Radius, gegen den es die Unterrubriken verteilt. */
/* 42 % muss mit --dia-open auf der Buehne uebereinstimmen — circles.js liest
   von dort den Radius, gegen den es die Unterrubriken verteilt. Mehr geht
   nicht: breiter als das waere der Koerper hoeher als das Band. Beratung
   behaelt dadurch beim Oeffnen seine Groesse und tritt nur in die Mitte,
   die kleineren Koerper wachsen deutlich. */
.venn__stage.is-open [data-area].is-active { left: 50%; top: 50%; width: 42%; }

.venn__stage.is-open .circle:not(.is-active) .circle__label {
  --lx: 50%;
  --ly: 128%;
  --label-size: 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--area-deep);
  /* Feste, schmale Breite statt nowrap: lange Bereichsnamen brechen dann um,
     statt seitlich ueber die Beschneidung hinauszulaufen. */
  width: 7.5rem;
  white-space: normal;
  line-height: 1.25;
}

.venn__stage.is-open .circle.is-active .circle__label { opacity: 0; }

.circle.is-active .circle__panel {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease) 140ms, visibility 0s;
}

/* Gestaffelt einblenden, sobald der Koerper seine Groesse erreicht hat:
   erst der Titel, dann die Unterrubriken einzeln, zuletzt der Schliessen-
   Knopf. Die Knoepfe tragen ihre gestreute Position bereits in translate und
   rotate — die Animation arbeitet darum mit transform, das sich mit beiden
   zusammensetzt, statt sie zu ueberschreiben. */
.circle.is-active .circle__title,
.circle.is-active .circle__links li,
.circle.is-active .circle__close {
  animation: panel-in var(--dur) var(--ease-out) backwards;
}
.circle.is-active .circle__title                 { animation-delay: 170ms; }
.circle.is-active .circle__links li:nth-child(1) { animation-delay: 230ms; }
.circle.is-active .circle__links li:nth-child(2) { animation-delay: 280ms; }
.circle.is-active .circle__links li:nth-child(3) { animation-delay: 330ms; }
.circle.is-active .circle__links li:nth-child(4) { animation-delay: 380ms; }
.circle.is-active .circle__close                 { animation-delay: 430ms; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}

/* ---- Fallback ------------------------------------------------------------ */

/* Ohne JavaScript traegt die Kreisinteraktion nicht — dann wird die Buehne
   ausgeblendet und dieselben Links erscheinen als gewoehnliche Liste. */
.venn__fallback { display: none; }
.no-js .venn__stage { display: none; }
.no-js .venn__fallback { display: block; }

@media (prefers-reduced-motion: reduce) {
  .disc, .circle, .circle__panel, .circle__label { transition: none; }
  .circle.is-active .circle__title,
  .circle.is-active .circle__links li,
  .circle.is-active .circle__close { animation: none; }
  /* Die Form bleibt amoebenhaft, sie driftet nur nicht mehr. */
  .disc, .circle__face { animation-play-state: paused; }
}

/* ---- Schmale Viewports ---------------------------------------------------
   Dieselbe Mechanik, nur andere Geometrie: die Kreise stehen im Zickzack
   untereinander statt im Dreieck.                                           */
@media (max-width: 640px) {
  /* Eigene Komposition, kein schmal gerechneter Desktop: eine Kette, die
     deutlich tiefer verzahnt ist (Abstand 0.73 bis 0.92 der Radiensumme statt
     0.89) und links und rechts aus dem Rand laeuft. Die Buehne nimmt dafuer
     die volle Fensterbreite ein und bricht aus der Textspalte aus; was
     hinauslaeuft, wird abgeschnitten statt eine Querscrollleiste zu erzeugen. */
  .venn { padding-block: var(--sp-4); }

  .venn__stage {
    width: 100%;
    aspect-ratio: 0.641 / 1;
    --dia-open: 88%;
  }

  .venn__stage [data-area="beratung"]        { left: 34.4%; top: 27.6%; width: 80%; }
  .venn__stage [data-area="sozialforschung"] { left: 72.3%; top: 50.6%; width: 63%; }
  .venn__stage [data-area="about"]           { left: 38.5%; top: 74.8%; width: 56%; }
  .venn__stage [data-area="gedanken"]        { left: 81.5%; top: 85.5%; width: 44%; }

  /* Die angeschnittenen Koerper tragen ihre Beschriftung nicht mittig,
     sondern dort, wo tatsaechlich Flaeche im Bild ist. */
  .venn__stage .circle[data-area="beratung"]        .circle__label { --lx: 58%; --ly: 50%; }
  .venn__stage .circle[data-area="sozialforschung"] .circle__label { --lx: 40%; --ly: 50%; }
  .venn__stage .circle[data-area="gedanken"]        .circle__label { --lx: 38%; --ly: 48%; }

  .venn__stage .circle[data-area="beratung"]        { --label-size: 1.5rem; }
  .venn__stage .circle[data-area="sozialforschung"] { --label-size: 1.15rem; }
  .venn__stage .circle[data-area="about"]           { --label-size: 1.1rem; }
  .venn__stage .circle[data-area="gedanken"]        { --label-size: 0.85rem; }

  .venn__stage.is-open [data-area] { width: 15%; }
  .venn__stage.is-open [data-area="beratung"]        { left: 16%; top:  8%; }
  .venn__stage.is-open [data-area="sozialforschung"] { left: 84%; top:  8%; }
  .venn__stage.is-open [data-area="about"]           { left: 16%; top: 90%; }
  .venn__stage.is-open [data-area="gedanken"]        { left: 84%; top: 90%; }
  .venn__stage.is-open [data-area].is-active { left: 50%; top: 50%; width: 88%; }

  /* Im geoeffneten Zustand sitzt die Beschriftung wieder mittig unter dem
     geschrumpften Koerper. */
  .venn__stage.is-open .circle .circle__label { --lx: 50%; }

  .circle__links a { font-size: 0.875rem; padding: 0.45em 0.85em; }
  .circle__title { font-size: 0.9375rem; top: 15%; width: 66%; }
}

/* ==========================================================================
   Seitenkopf der Unterseiten

   Die Bruecke von der Startseite: eine grosse, sehr blasse Waschflaeche in
   der Bereichsfarbe, mit derselben unrunden Kontur und derselben Drift wie
   die Koerper. Sie laeuft aus der Textspalte heraus und wird am Fensterrand
   abgeschnitten — dadurch bleibt vom Auftritt der Startseite etwas stehen,
   ohne dass die Inhaltsseite laut wird.
   ========================================================================== */

.page-hero {
  position: relative;
  padding-block: var(--sp-7) var(--sp-6);
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero h1 { max-width: 15em; }

.page-hero__wash {
  position: absolute;
  z-index: 0;
  top: -6%;
  right: -9vw;
  width: min(27rem, 34vw);
  aspect-ratio: 1;
  background: var(--area);
  /* Sehr blass: die Flaeche soll den Ton der Seite faerben, nicht als
     Element auftreten. Der leichte Weichzeichner nimmt ihr den
     Aufkleber-Charakter, die Verwacklung bleibt erkennbar. */
  opacity: 0.07;
  border-radius: 50%;
  filter: url(#wobble-2) blur(3px);
  animation: blob-drift 34s ease-in-out infinite;
  pointer-events: none;
}

@media (max-width: 700px) {
  .page-hero__wash { width: 62vw; right: -20vw; top: 4%; opacity: 0.09; }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero__wash { animation-play-state: paused; }
}

/* Zugehoerigkeit statt Ruecksprung. Publikationsverzeichnis und
   Medienspiegel haengen unter zwei Rubriken; eine einzelne Ruecksprungmarke
   muesste sich dort fuer eine entscheiden und waere je nach Weg die falsche.
   Die Zeile nennt darum beide — dieselbe Farbmarke wie in der Kopfzeile. */
.zugehoerig {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-5);
  font-family: var(--ff-sans);
  font-size: var(--fs-nav);
}

.zugehoerig__label {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

.zugehoerig a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 500;
  color: var(--fg-soft);
  text-decoration: none;
  padding-block: var(--sp-1);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.zugehoerig a:hover { color: var(--fg); border-bottom-color: var(--area); }

.backlink {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--ff-sans);
  font-size: var(--fs-nav);
  color: var(--fg-soft);
  text-decoration: none;
  margin-bottom: var(--sp-5);
}
.backlink:hover { color: var(--area-deep); }

/* ---- Versetztes Raster ---------------------------------------------------
   Der Titel steht buendig links, der Inhalt darunter ist eingerueckt, und
   die Zwischenueberschriften haengen wieder in den linken Rand hinaus. Das
   gibt der Seite eine Achse statt einer einzigen Spalte — und bleibt
   trotzdem ruhig genug fuer lange Verzeichnisse.                            */

@media (min-width: 900px) {
  .section { padding-left: var(--einzug); }
  .section > .prose > h2,
  .section > .prose > .eyebrow { margin-left: calc(-1 * var(--einzug)); }
}

/* Der erste Abschnitt schliesst enger an den Seitenkopf an. */
.page-hero + .section { padding-top: var(--sp-4); }

/* Die Trennlinien nehmen die Bereichsfarbe auf, statt neutral grau zu sein. */
.rule { border-top-color: var(--area); opacity: 0.32; }

/* ==========================================================================
   Karten (Unterrubriken eines Bereichs)
   ========================================================================== */

.cards {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  height: 100%;
  padding: var(--sp-5);
  background: var(--bg-alt);
  border: 1px solid transparent;
  border-radius: 14px 22px 16px 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.card:hover {
  border-color: var(--area);
  transform: translateY(-2px);
}

.card h3 { margin: 0; font-size: var(--fs-h3); }
.card p  { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--fg-soft); }

/* Nimmt die Amoebenform der Startseite auf, jede Karte in anderer Phase. */
.card__dot {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--area);
  flex: none;
  animation: blob-drift 28s ease-in-out infinite;
}
.cards li:nth-child(2) .card__dot { animation-delay:  -7s; }
.cards li:nth-child(3) .card__dot { animation-delay: -14s; }
.cards li:nth-child(4) .card__dot { animation-delay: -21s; }

@media (prefers-reduced-motion: reduce) {
  .card__dot { animation-play-state: paused; }
}

/* ==========================================================================
   Verzeichnisse: Publikationen, Medienspiegel, Projekte, Datensaetze
   ========================================================================== */

.entries { list-style: none; margin: var(--sp-6) 0 0; padding: 0; }

.entry {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--sp-2) var(--sp-5);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--rule);
}
.entry:last-child { border-bottom: 1px solid var(--rule); }

.entry__when {
  font-family: var(--ff-sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--area-deep);
  padding-top: 0.4em;
}

.entry__title { margin: 0; font-size: 1.05em; line-height: 1.4; }

/* Im Prototyp war der Titel blosser Text und der Weg fuehrte ueber eine
   Zeile "Details" darunter. Im Theme ist der Titel selbst der Link — das ist
   das groessere Ziel und die naheliegendere Geste. Unterstrichen gehoert er
   deswegen nicht: in einer Liste aus dreissig Eintraegen ergaebe das dreissig
   Striche. Die Bereichsfarbe zeigt beim Ueberfahren, dass es weitergeht. */
.entry__title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.entry__title a:hover,
.entry__title a:focus-visible { border-bottom-color: var(--area); }
.entry__where { font-style: italic; color: var(--fg-soft); }

.entry__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  font-family: var(--ff-sans);
  font-size: var(--fs-meta);
}
.entry__links a { color: var(--area-deep); text-decoration: none; font-weight: 500; }
.entry__links a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .entry { grid-template-columns: 1fr; gap: var(--sp-2); }
  .entry__when { padding-top: 0; }
}

/* ---- Schlagwortleiste ---------------------------------------------------- */

.tagbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
}

.tag {
  display: inline-block;
  font-family: var(--ff-sans);
  font-size: var(--fs-meta);
  line-height: 1;
  padding: 0.45em 0.8em;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--fg-soft);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.tag:hover { border-color: var(--area); color: var(--fg); }

/* Das Schlagwort, nach dem gerade gefiltert wird. Gefuellt statt umrandet:
   in einer Leiste aus dreissig Umrissen faellt ein weiterer Umriss nicht
   auf, eine Flaeche schon. */
.tag--aktiv {
  background: var(--area);
  border-color: var(--area);
  color: var(--on-area);
}
.tag--aktiv:hover { color: var(--on-area); }

/* ---- Gefilterte Ansicht --------------------------------------------------
   Ohne diese Zeile landet man nach einem Klick auf ein Schlagwort in einer
   Liste, die korrekt gefiltert ist, aber nichts darueber verraet. */

.filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-5);
}

.filter__label {
  font-family: var(--ff-sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

.filter .tag--aktiv { cursor: default; }

.filter__weg {
  font-family: var(--ff-sans);
  font-size: var(--fs-meta);
  color: var(--fg-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
}
.filter__weg:hover { color: var(--fg); border-bottom-color: var(--area); }

/* ==========================================================================
   Zeitleiste (Werdegang) und Schaltflaechen
   ========================================================================== */

.timeline { list-style: none; margin: var(--sp-5) 0 0; padding: 0; }

.timeline li {
  position: relative;
  padding: 0 0 var(--sp-5) var(--sp-6);
  border-left: 1px solid var(--rule);
}
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -0.3125rem;
  top: 0.5em;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--area);
}
.timeline h3 { margin: 0 0 var(--sp-2); font-size: 1.05em; }
.timeline p  { margin: 0; font-size: 0.95em; color: var(--fg-soft); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--ff-sans);
  font-size: var(--fs-nav);
  font-weight: 500;
  padding: 0.7em 1.3em;
  border-radius: 999px;
  border: 1px solid var(--area);
  color: var(--area-deep);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--area); color: var(--on-area); }
.btn--solid { background: var(--area); color: var(--on-area); border-color: var(--area); }
.btn--solid:hover { background: var(--area-deep); border-color: var(--area-deep); }

/* Platzhalter fuer noch nicht geschriebene Inhalte (Familienbegleitung). */
.placeholder {
  border-left: 3px solid var(--area);
  background: var(--bg-alt);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-5) 0;
  font-size: 0.95em;
}
.placeholder strong {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--ff-sans);
  font-size: var(--fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--area-deep);
}

/* ==========================================================================
   Einzelseite eines Verzeichniseintrags
   Publikation, Projekt, Datensatz, Medienbericht, Beitrag — ein Layout fuer
   alle fuenf. Sie unterscheiden sich nur in den Zeilen des Steckbriefs.

   Das Raster ist gegenueber den uebrigen Unterseiten gekippt: dort steht der
   Text eingerueckt unter einem buendigen Titel, hier holt die schmale
   Metaspalte diesen Einzug zurueck und steht auf der Achse der Ueberschrift,
   waehrend der Fliesstext nach rechts wandert. Der Eintrag bekommt so ein
   eigenes Gesicht, ohne ein zweites Gestaltungssystem zu eroeffnen.
   ========================================================================== */

.eintrag { display: grid; gap: var(--sp-6); }

@media (min-width: 1000px) {
  .eintrag {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--sp-7) var(--sp-8);
    align-items: start;
  }
  /* Klebt beim Lesen mit: der Zitiervorschlag einer Publikation ist genau
     dann gefragt, wenn man unten im Abstract steht. */
  .eintrag__meta {
    margin-left: calc(-1 * var(--einzug));
    position: sticky;
    top: var(--sp-5);
  }
}

/* Eintraege ohne Fliesstext — bei Projekten die Regel, dort traegt der Lead
   die Aussage. Eine leere zweite Spalte waere ein Loch; der Steckbrief legt
   sich stattdessen quer unter den Seitenkopf. */
.eintrag--ohne-text { grid-template-columns: 1fr; }

@media (min-width: 700px) {
  .eintrag--ohne-text .steckbrief {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--sp-5) var(--sp-6);
    align-items: start;
  }
  .eintrag--ohne-text .steckbrief > div { margin-bottom: 0; }
}

@media (min-width: 1000px) {
  .eintrag--ohne-text .eintrag__meta { position: static; }
}

/* Das Lesemass gilt fuer den Text, nicht fuer die Spalte: ein Zeitungsscan
   oder ein Diagramm darf die ganze Spaltenbreite nutzen. */
.eintrag__haupt > * { max-width: var(--w-text); }
.eintrag__haupt > .beleg { max-width: none; }
.eintrag__haupt > :first-child { margin-top: 0; }

/* ---- Steckbrief ----------------------------------------------------------
   Die Felder, die im ACF am Beitrag haengen: Jahr, Zeitraum, Medium,
   Zitiervorschlag, Schlagwoerter. Immer dieselbe Liste, nur andere Zeilen. */

.steckbrief {
  margin: 0;
  padding-top: var(--sp-4);
  border-top: 2px solid var(--area);
  font-family: var(--ff-sans);
}

.steckbrief dt {
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-bottom: var(--sp-1);
}

.steckbrief > div { margin-bottom: var(--sp-5); }
.steckbrief > div:last-child { margin-bottom: 0; }

.steckbrief dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  overflow-wrap: anywhere;   /* lange URLs sprengen die schmale Spalte sonst */
}
.steckbrief a { color: var(--area-deep); }
.steckbrief .tagbar { margin-top: 0; }

/* Der Zitiervorschlag steht in der Lesschrift und mit haengendem Einzug —
   so, wie er in einem Literaturverzeichnis landen wird. */
.steckbrief .zitat {
  font-family: var(--ff-serif);
  font-size: 1.0625rem;
  line-height: 1.45;
  padding-left: 1.1em;
  text-indent: -1.1em;
}

/* ---- Dateien und Weblinks ------------------------------------------------ */

.aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}
.aktionen .btn__zeichen { font-size: 1.1em; line-height: 1; }

/* ---- Beleg: Scan, Bild, Ton, Video --------------------------------------- */

.beleg { margin: var(--sp-6) 0 0; }
.beleg img {
  border: 1px solid var(--rule);
  border-radius: 10px 16px 12px 18px;
  background: var(--bg-alt);
}
.beleg audio, .beleg video { width: 100%; }
.beleg figcaption {
  margin-top: var(--sp-3);
  font-family: var(--ff-sans);
  font-size: var(--fs-meta);
  color: var(--fg-soft);
}

/* ---- Bezuege -------------------------------------------------------------
   Das Beziehungsnetz, das im Bestand schon gepflegt ist: jeder Eintrag kennt
   die Publikationen, Projekte, Datensaetze, Medienberichte und Beitraege zum
   selben Thema. Neu traegt jede Gruppe die Farbe des Bereichs, in den sie
   fuehrt — nicht die der Seite, auf der sie steht. Damit wird die Farbe zur
   Wegmarke und nicht blosse Dekoration, und der Sprung von Sozialforschung
   in den Medienspiegel ist schon vor dem Klick sichtbar.

   Der Block laeuft nach links aus dem Einzug heraus: er gehoert zur Seite,
   aber nicht mehr zum Text.                                                 */

.bezug {
  position: relative;
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
  background: var(--bg-alt);
  border-radius: 24px 14px 28px 16px;
}

@media (min-width: 900px) {
  .bezug { margin-left: calc(-1 * var(--einzug)); }
}

.bezug__titel {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

.bezug__grid {
  display: grid;
  gap: var(--sp-6);
  /* auto-fill, nicht auto-fit: eine einzelne Gruppe soll ihre Spalte
     behalten und nicht ueber die ganze Breite gezogen werden. */
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  margin-top: var(--sp-5);
}

/* Zweite Reihe: was nicht gepflegt, sondern aus den Schlagwoertern
   abgeleitet ist. Die gestrichelte Marke sagt das, ohne es zu erklaeren. */
.bezug__titel--zweit { margin-top: var(--sp-7); }
.bezug__ziel--abgeleitet {
  background: transparent;
  border-left-style: dashed;
}

.bezug__kopf {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--ff-sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--area-deep);
  text-decoration: none;
}
.bezug__kopf:hover { text-decoration: underline; }

.bezug__gruppe:nth-child(2) .nav__blob { animation-delay:  -9s; }
.bezug__gruppe:nth-child(3) .nav__blob { animation-delay: -17s; }
.bezug__gruppe:nth-child(4) .nav__blob { animation-delay: -25s; }

.bezug__gruppe ul { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.bezug__gruppe li + li { margin-top: var(--sp-3); }

.bezug__ziel {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg);
  border-left: 2px solid var(--area);
  border-radius: 0 10px 12px 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: inherit;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease);
}
.bezug__ziel:hover,
.bezug__ziel:focus-visible { transform: translateX(3px); }
/* strong bleibt inline: beim Zitiervorschlag steht der Titel mitten im Satz
   und darf nicht auf eine eigene Zeile gezwungen werden. Den Umbruch macht
   die Meta-Zeile. */
.bezug__ziel strong { font-weight: 600; }
.bezug__ziel .meta { display: block; margin-top: 0.15em; }

@media (prefers-reduced-motion: reduce) {
  .bezug__ziel { transition: none; }
}