/* Schriften wie im Original: Helvetica Neue in drei Schnitten,
   BB Manual Mono fuer Kleintext und Beschriftungen. */
@font-face{font-family:Helvetica; font-weight:300; font-display:swap;
  src:url(/fonts/HelveticaNeue-Light.woff2) format("woff2")}
@font-face{font-family:Helvetica; font-weight:400; font-display:swap;
  src:url(/fonts/HelveticaNeue-Regular.otf) format("opentype")}
@font-face{font-family:Helvetica; font-weight:700; font-display:swap;
  src:url(/fonts/HelveticaNeueBold.otf) format("opentype")}
@font-face{font-family:"BB Manual Mono"; font-weight:400; font-display:swap;
  src:url(/fonts/BBManualMono.woff2) format("woff2")}

/* SWA Group — eigenes Stylesheet, keine Fremdbausteine */

:root{
  --schrift: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --mono: "BB Manual Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --tinte: #1a1a1a;
  --grau: #6c6c66;
  --linie: #e6e6e2;
  --flaeche: #f2f2ef;
  --papier: #fff;
  --kopf: 68px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip}
/* Ausklappende Felder duerfen die Seitenbreite nie vergroessern. */
body{overflow-x:clip}
body{
  font-family:var(--schrift); color:var(--tinte); background:var(--papier);
  line-height:1.6; font-size:16px; -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}

/* ---------- Kopfzeile ---------- */
.kopfzeile{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:10px;
  padding:14px 32px; background:transparent; border:0;
  transition:background .35s ease, border-color .35s ease;
}
/* Weiche, nach unten auslaufende Unschaerfe statt harter Kante.
   Mehrere Lagen mit steigendem Radius und passender Maske - dadurch
   loest sich der Balken zum Bild hin auf, statt abzuschneiden. */
.schleier{position:fixed; top:0; left:0; right:0; height:132px; z-index:99;
  pointer-events:none; transition:opacity .35s ease}
.schleier span{position:absolute; inset:0; display:block}
/* Acht Baender, oben am staerksten, nach unten auslaufend. Bewusst
   zurueckhaltend: zu viel Radius und Saettigung lassen die Farben
   ausbrennen, statt den Untergrund nur zu beruhigen. */
.schleier span:nth-child(1){
  backdrop-filter:blur(8.6px) saturate(118%);
  -webkit-backdrop-filter:blur(8.6px) saturate(118%);
  -webkit-mask-image:linear-gradient(#000 0%, #000 12.5%, transparent 25.0%);
  mask-image:linear-gradient(#000 0%, #000 12.5%, transparent 25.0%)}
.schleier span:nth-child(2){
  backdrop-filter:blur(5.55px) saturate(116%);
  -webkit-backdrop-filter:blur(5.55px) saturate(116%);
  -webkit-mask-image:linear-gradient(transparent 0.0%, #000 12.5%, #000 25.0%, transparent 37.5%);
  mask-image:linear-gradient(transparent 0.0%, #000 12.5%, #000 25.0%, transparent 37.5%)}
.schleier span:nth-child(3){
  backdrop-filter:blur(3.58px) saturate(114%);
  -webkit-backdrop-filter:blur(3.58px) saturate(114%);
  -webkit-mask-image:linear-gradient(transparent 12.5%, #000 25.0%, #000 37.5%, transparent 50.0%);
  mask-image:linear-gradient(transparent 12.5%, #000 25.0%, #000 37.5%, transparent 50.0%)}
.schleier span:nth-child(4){
  backdrop-filter:blur(2.31px) saturate(112%);
  -webkit-backdrop-filter:blur(2.31px) saturate(112%);
  -webkit-mask-image:linear-gradient(transparent 25.0%, #000 37.5%, #000 50.0%, transparent 62.5%);
  mask-image:linear-gradient(transparent 25.0%, #000 37.5%, #000 50.0%, transparent 62.5%)}
.schleier span:nth-child(5){
  backdrop-filter:blur(1.49px) saturate(110%);
  -webkit-backdrop-filter:blur(1.49px) saturate(110%);
  -webkit-mask-image:linear-gradient(transparent 37.5%, #000 50.0%, #000 62.5%, transparent 75.0%);
  mask-image:linear-gradient(transparent 37.5%, #000 50.0%, #000 62.5%, transparent 75.0%)}
.schleier span:nth-child(6){
  backdrop-filter:blur(0.96px) saturate(108%);
  -webkit-backdrop-filter:blur(0.96px) saturate(108%);
  -webkit-mask-image:linear-gradient(transparent 50.0%, #000 62.5%, #000 75.0%, transparent 87.5%);
  mask-image:linear-gradient(transparent 50.0%, #000 62.5%, #000 75.0%, transparent 87.5%)}
.schleier span:nth-child(7){
  backdrop-filter:blur(0.62px) saturate(106%);
  -webkit-backdrop-filter:blur(0.62px) saturate(106%);
  -webkit-mask-image:linear-gradient(transparent 62.5%, #000 75.0%, #000 87.5%, transparent 100.0%);
  mask-image:linear-gradient(transparent 62.5%, #000 75.0%, #000 87.5%, transparent 100.0%)}
.schleier span:nth-child(8){
  backdrop-filter:blur(0.4px) saturate(104%);
  -webkit-backdrop-filter:blur(0.4px) saturate(104%);
  -webkit-mask-image:linear-gradient(transparent 75.0%, #000 87.5%, #000 100.0%, transparent 100.0%);
  mask-image:linear-gradient(transparent 75.0%, #000 87.5%, #000 100.0%, transparent 100.0%)}
/* Ein Hauch Weiss fuer die Lesbarkeit, ebenfalls auslaufend. */
.schleier span:nth-child(9){
  background:linear-gradient(180deg, rgba(255,255,255,.5) 0%,
    rgba(255,255,255,.3) 28%, rgba(255,255,255,.12) 58%,
    rgba(255,255,255,.03) 80%, rgba(255,255,255,0) 100%)}

/* Sobald gescrollt wird, setzt sich die Leiste sanft ab. */
.kopfzeile.gescrollt{background:transparent; border:0}
/* Der Schleier bleibt immer stehen. Er wird beim Scrollen nur
   etwas kraeftiger, damit die Leiste ueber hellen Bildern lesbar ist. */
.schleier{transition:opacity .35s ease}
.schleier span:nth-child(4){transition:background .35s ease}
/* Das Logo bleibt immer schwarz. Ganz oben steht die Leiste ueber dem
   weissen Rand - dort braucht es weder Schatten noch Schleier. */
.kopfzeile.hell:not(.gescrollt) ~ .schleier{opacity:0}
.marke{font-family:var(--serif); font-weight:700; font-size:26px; letter-spacing:-.01em; text-decoration:none}
.navi{margin-left:auto; display:flex; align-items:center; gap:8px}
/* Milchglas: durchscheinender Grund, kraeftige Saettigung, feine helle
   Kante. Der Untergrund bleibt erkennbar, statt zugedeckt zu werden. */
.knopf{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.10em; text-transform:uppercase;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 1px 2px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.6);
  border-radius:999px; padding:10px 16px;
  cursor:pointer; color:var(--tinte); text-decoration:none; line-height:1;
  display:inline-flex; align-items:center; gap:8px;
  transition:background .24s ease, box-shadow .24s ease, transform .24s cubic-bezier(.2,.8,.2,1);
}
.knopf:hover{background:rgba(255,255,255,.78);
  box-shadow:0 4px 14px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.7);
  transform:translateY(-1px)}
.knopf:active{transform:translateY(0)}
.knopf[aria-current="page"]{background:#EFE7CF; box-shadow:inset 0 0 0 1.4px #A88720; color:#6f5a12;
  border-color:rgba(255,255,255,.14);
  box-shadow:0 2px 10px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.12)}
.knopf[aria-current="page"]:hover{background:#EAE0C2}
.knopf.rund{padding:10px 12px}

/* Klappmenü */
.klapp{position:relative !important}
/* Das Feld gehoert zur Leiste, nicht darueber: gleiche Rundung wie die
   Knoepfe, gleiches Milchglas, knapp bemessen. Es haengt direkt am
   Knopf, statt frei zu schweben. */
.klapp-inhalt{
  position:absolute; top:calc(100% + 6px); right:0; min-width:172px;
  /* Deutlich dichter als die Knoepfe: hier steht Text, der gelesen
     werden muss - Durchblick darf die Lesbarkeit nicht kosten. */
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(0,0,0,.06); border-radius:20px;
  box-shadow:0 14px 40px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.9);
  padding:5px;
  transform-origin:top right;
  opacity:0; visibility:hidden; transform:translateY(-4px) scale(.96);
  transition:opacity .26s cubic-bezier(.2,.8,.2,1),
             transform .34s cubic-bezier(.22,1.02,.32,1),
             visibility .34s;
}
.klapp.offen .klapp-inhalt{transform:translateY(0) scale(1)}
.klapp.offen .klapp-inhalt{opacity:1; visibility:visible; transform:translateY(0)}
.klapp-inhalt a{
  display:block; padding:8px 13px; border-radius:14px; text-decoration:none;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--grau); white-space:nowrap;
  transition:background .18s, color .18s;
  opacity:0; transform:translateY(-5px);
}
.klapp-inhalt a:hover{background:rgba(0,0,0,.055); color:var(--tinte)}
.klapp-inhalt a[aria-current="page"]{background:#EFE7CF; box-shadow:inset 0 0 0 1.4px #A88720; color:#6f5a12}
/* Eintraege laufen leicht versetzt ein, das wirkt ruhiger als alles auf einmal. */
.klapp.offen .klapp-inhalt a{
  opacity:1; transform:none;
  transition:opacity .3s ease, transform .42s cubic-bezier(.22,1.02,.32,1), background .18s;
}
.klapp.offen .klapp-inhalt a:nth-child(1){transition-delay:.05s}
.klapp.offen .klapp-inhalt a:nth-child(2){transition-delay:.09s}
.klapp.offen .klapp-inhalt a:nth-child(3){transition-delay:.13s}
.klapp.offen .klapp-inhalt a:nth-child(4){transition-delay:.17s}
.klapp.offen .klapp-inhalt a:nth-child(5){transition-delay:.21s}
.klapp .knopf{transition:background .24s ease, box-shadow .24s ease}
.klapp.offen > .knopf{background:rgba(255,255,255,.82)}
.klapp .knopf svg{transition:transform .3s cubic-bezier(.22,1.02,.32,1)}
.klapp.offen .knopf svg{transform:rotate(45deg)}

/* ---------- Grundraster ---------- */
main{padding-top:var(--kopf)}
.bahn{max-width:1400px; margin:0 auto; padding:0 clamp(32px,4.5vw,64px)}
.abschnitt{padding:88px 0}
.ueberschrift{font-size:44px; font-weight:300; line-height:.95;
  letter-spacing:-.03em; margin-bottom:36px}
.hinweis{font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--grau)}

/* ---------- Aufmacher Startseite ---------- */
.aufmacher{position:relative; height:calc(100vh - 24px); min-height:520px;
  overflow:hidden; border-radius:14px; margin:0 12px}
.aufmacher-bild{position:absolute; inset:0}
.aufmacher-bild img{width:100%; height:100%; object-fit:cover}
.aufmacher-bild::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.55) 100%)}
.aufmacher-text{position:absolute; left:0; right:0; bottom:62px; color:#fff; z-index:2}
/* Masse aus dem Original: h1 = 56px, ab 768px 64px, Gewicht 300,
   Zeilenhoehe .95, Laufweite -.03em */
.aufmacher-text h1{font-size:56px; font-weight:300; line-height:.95;
  letter-spacing:-.03em}
.aufmacher-meta{display:flex; flex-wrap:wrap; gap:18px; margin-top:14px; align-items:center}
.aufmacher-meta .hinweis{color:rgba(255,255,255,.86)}
.aufmacher .knopf{background:rgba(255,255,255,.92)}
.aufmacher .knopf:hover{background:#fff}
/* Laufleiste: je Bild ein Strich, der sichtbar abläuft. Ist er voll,
   wechselt das Bild - so sieht man, wie lange es noch steht. */
.punkte{position:absolute; right:32px; bottom:58px; display:flex; gap:10px; z-index:3}
.punkt{width:46px; height:3px; border-radius:999px; background:rgba(255,255,255,.32);
  border:0; padding:0; cursor:pointer; overflow:hidden; position:relative;
  transition:background .25s}
.punkt:hover{background:rgba(255,255,255,.5)}
.punkt::after{content:""; position:absolute; inset:0; transform-origin:left center;
  transform:scaleX(0); background:#fff; border-radius:999px}
.punkt[aria-current="true"]::after{transform:scaleX(var(--lauf, 0))}
.punkt.erledigt::after{transform:scaleX(1)}

/* ---------- Projektraster ---------- */
.raster{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.raster.zwei{grid-template-columns:repeat(2,1fr)}
.kachel{text-decoration:none; display:block}
.kachel-bild{position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:14px;
  background:var(--flaeche)}
.kachel-bild img{width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.kachel:hover .kachel-bild img{transform:scale(1.04)}
.kachel-titel{margin-top:13px; font-size:18px; line-height:1.05; letter-spacing:-.01em}
.kachel .hinweis{margin-top:4px}

/* ---------- Liste ---------- */
.liste{display:block}
.listenzeile{display:flex; gap:22px; align-items:center; padding:18px 0;
  border-bottom:1px solid var(--linie); text-decoration:none; transition:opacity .2s}
.listenzeile:first-child{border-top:1px solid var(--linie)}
.listenzeile:hover{opacity:.62}
.listenbild{width:104px; height:78px; object-fit:cover; border-radius:10px;
  background:var(--flaeche); flex-shrink:0}
.listentext{flex:1; min-width:0}
.listentitel{font-size:18px; line-height:1.05; letter-spacing:-.01em; margin-bottom:6px}
.listenmeta{display:flex; gap:18px; flex-wrap:wrap}

/* Umschalter + Reiter */
.werkzeuge{display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding-bottom:22px; border-bottom:1px solid var(--linie); margin-bottom:32px}
.reiter{font-family:var(--mono); font-size:11.5px; letter-spacing:.10em;
  text-transform:uppercase; background:transparent; border:0; border-radius:999px;
  padding:9px 14px; cursor:pointer; color:var(--grau); transition:color .2s, background .2s}
.reiter:hover{color:var(--tinte)}
.reiter[aria-pressed="true"]{background:#EFE7CF; box-shadow:inset 0 0 0 1.4px #A88720; color:#6f5a12}
.umschalter{margin-left:auto; background:rgba(255,255,255,.55);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.6); border-radius:999px;
  box-shadow:0 1px 2px rgba(0,0,0,.04); padding:9px 12px; cursor:pointer;
  color:var(--tinte); display:inline-flex; line-height:0;
  transition:background .24s ease, transform .24s cubic-bezier(.2,.8,.2,1)}
.umschalter:hover{background:rgba(255,255,255,.8); transform:translateY(-1px)}

/* sanftes Aus- und Einblenden beim Wechsel */
.wechsel{transition:opacity .18s ease}
.wechsel.blende{opacity:0}

/* ---------- Projektseite: zweispaltig wie im Original ----------
   Links die Angaben, rechts die Bilder. Links bleibt beim Blaettern stehen. */
.projekt{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:34px; max-width:1500px; margin:0 auto; padding:26px clamp(26px,4vw,56px) 0; align-items:start}
.projekt-links{position:sticky; top:calc(var(--kopf) + 30px); display:flex;
  flex-direction:column; gap:30px; padding-bottom:48px; padding-right:20px}
.projekt-links h1{font-size:44px; font-weight:300; line-height:.96;
  letter-spacing:-.03em; margin-bottom:4px}
.angaben{display:flex; flex-direction:column}
/* Angaben als stille Paare: Bezeichnung klein darueber, Wert darunter.
   Das liest sich wie ein Impressum im Heft, nicht wie eine Tabelle. */
.angaben{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px 34px; padding:22px 0; border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie)}
.angabe{display:flex; flex-direction:column; gap:5px}
.angabe dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.10em;
  text-transform:uppercase; color:var(--grau)}
.angabe dd{font-size:16px; line-height:1.3}
.beschreibung{font-size:20px; line-height:1.55; color:#3a3a3a;
  letter-spacing:-.005em; max-width:42ch}
.beschreibung p{margin-bottom:.9em}
.mehr-text{display:none}
.mehr-text.offen{display:block}
.mehr-knopf{align-self:flex-start}

.projekt-rechts{display:flex; flex-direction:column; gap:14px}
.projekt-rechts img{width:100%; border-radius:14px; background:var(--flaeche);
  object-fit:cover; display:block}
.projekt-rechts img:first-child{aspect-ratio:16/10}

/* ---------- Streifen weiterer Projekte ---------- */
.streifen{margin-top:80px; padding:34px 0 10px; border-top:1px solid var(--linie)}
.streifen-kopf{display:flex; align-items:baseline; gap:16px; margin-bottom:20px}
.streifen-bahn{display:flex; gap:16px; overflow-x:auto; padding-bottom:14px;
  scroll-snap-type:x mandatory; scrollbar-width:thin}
.streifen-bahn::-webkit-scrollbar{height:3px}
.streifen-bahn::-webkit-scrollbar-thumb{background:#d5d5d5; border-radius:3px}
.streifen-teil{flex:0 0 260px; scroll-snap-align:start; text-decoration:none}
.streifen-teil img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px;
  background:var(--flaeche); margin-bottom:9px; transition:opacity .3s}
.streifen-teil:hover img{opacity:.82}
.streifen-titel{font-size:16px}

/* ---------- Team ---------- */
/* Drei Spalten - damit gehen die Gruppen glatt auf und niemand
   steht in einer angebrochenen Reihe allein. */
.team-raster{display:grid; grid-template-columns:repeat(4,1fr); gap:40px 34px}
.kopfbild{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:14px;
  background:var(--flaeche); margin-bottom:11px; filter:grayscale(1);
  transition:filter .4s}
.person:hover .kopfbild{filter:grayscale(0)}
.person-name{font-size:18px; line-height:1.05; letter-spacing:-.01em}

/* ---------- Journal ---------- */
/* Eintraege im Heftcharakter: links die Einordnung, rechts der Text,
   das Bild als Beigabe. Ohne Bild rueckt der Text auf - kein Leerkasten. */
.eintrag{display:grid; grid-template-columns:132px minmax(0,1fr) 260px;
  gap:36px; align-items:start; padding:32px 0;
  border-bottom:1px solid var(--linie); text-decoration:none;
  transition:opacity .25s}
.eintrag:first-child{border-top:1px solid var(--linie)}
.eintrag:hover{opacity:.66}
.eintrag.ohne-bild{grid-template-columns:132px minmax(0,1fr)}
.eintrag-marke{display:flex; flex-direction:column; gap:5px; padding-top:3px}
.eintrag-bild{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px;
  background:var(--flaeche)}
.eintrag-titel{font-size:18px; line-height:1.05; letter-spacing:-.01em; margin:6px 0 8px}
.eintrag-anriss{color:#3a3a3a; font-size:16px; max-width:70ch}

/* ---------- Suche ---------- */
.suchschicht{position:fixed; inset:0; z-index:200;
  background:rgba(255,255,255,.66);
  backdrop-filter:blur(34px) saturate(190%);
  -webkit-backdrop-filter:blur(34px) saturate(190%);
  display:none; padding:26px 32px;
  opacity:0; transition:opacity .34s ease}
.suchschicht.offen{display:block}
.suchschicht.sichtbar{opacity:1}
/* Der Kopf faellt von oben herein, sobald sich die Schicht legt. */
.suchschicht .suchkopf{transform:translateY(-14px); opacity:0;
  transition:transform .48s cubic-bezier(.16,.9,.22,1), opacity .38s ease}
.suchschicht.sichtbar .suchkopf{transform:none; opacity:1}
.suchfeld{transition:border-color .3s ease}
.suchschicht.sichtbar .suchfeld:focus{border-color:var(--tinte)}
.suchkopf{display:flex; align-items:center; gap:14px; max-width:900px; margin:0 auto}
.suchfeld{flex:1; font-family:var(--schrift); font-size:clamp(22px,3.4vw,40px);
  font-weight:300; border:0; border-bottom:1px solid var(--linie); padding:14px 0;
  outline:none; background:transparent}
.suchfeld::placeholder{color:#c8c8c8}
.suchtreffer{max-width:900px; margin:30px auto 0; max-height:70vh;
  overflow-y:auto; overflow-x:hidden;
  /* Balken ausblenden, Rollen bleibt moeglich - sonst schneidet der
     Balken in die Flaeche und der Rand wirkt unsauber. */
  scrollbar-width:none; -ms-overflow-style:none}
.suchtreffer::-webkit-scrollbar{width:0; height:0; display:none}

/* ---------- Fusszeile ---------- */
.fusszeile{border-top:1px solid var(--linie); margin-top:90px; padding:44px 0 60px}
.fuss-raster{display:flex; flex-wrap:wrap; gap:34px; justify-content:space-between}
.fuss-spalte a{display:block; text-decoration:none; padding:4px 0; font-size:16px}
.fuss-spalte a:hover{text-decoration:underline}

/* ---------- Einblenden beim Scrollen ---------- */
.zeigt{opacity:0; transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1)}
.zeigt.da{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .zeigt{opacity:1; transform:none; transition:none}
  .kachel-bild img{transition:none}
}

/* ---------- schmale Schirme ---------- */
@media(max-width:1000px){
  .raster{grid-template-columns:repeat(2,1fr)}
  .team-raster{grid-template-columns:repeat(3,1fr); gap:30px 24px}
}
@media(max-width:760px){
  .kopfzeile{padding:12px 18px}
  .bahn{padding:0 20px}
  .abschnitt{padding:60px 0}
  .navi .verbergbar{display:none}
  .raster,.raster.zwei{grid-template-columns:1fr}
  .team-raster{grid-template-columns:repeat(3,1fr); gap:30px 24px}
  .eintrag{grid-template-columns:1fr}
  .projekt{grid-template-columns:1fr; gap:24px; padding:16px 14px 0}
  .projekt-links{position:static; gap:20px; padding-bottom:8px}
  .streifen-teil{flex:0 0 214px}
  .aufmacher{margin:0 8px; border-radius:14px}
  /* Die Folien muessen auch hier uebereinander liegen, nicht untereinander. */
  .aufmacher{height:70vh; min-height:420px}
  .punkte{right:18px; bottom:22px}
  .punkt{width:34px}
  .aufmacher-text{bottom:34px}
  .aufmacher-text h1{font-size:30px}
  .listenbild{width:84px; height:62px}
}


/* ---------- Einflug: Inhalte kommen leicht von unten herein ----------
   Der Takt (--takt) staffelt die Reihenfolge, damit es gefuehrt wirkt
   und nicht alles gleichzeitig aufpoppt. */
.einflug{opacity:0; transform:translateY(22px);
  transition:opacity 1.05s cubic-bezier(.16,.9,.22,1),
             transform 1.05s cubic-bezier(.16,.9,.22,1);
  transition-delay:calc(var(--takt, 0) * .085s)}
.einflug.da{opacity:1; transform:none}

/* Aufmacher-Beschriftung fliegt beim Bildwechsel mit */
.aufmacher-text h1,
.aufmacher-meta{will-change:transform, opacity}
.aufmacher-text.raus h1{opacity:0; transform:translateY(16px)}
.aufmacher-text.raus .aufmacher-meta{opacity:0; transform:translateY(12px)}
.aufmacher-text h1{transition:opacity .5s ease, transform .5s cubic-bezier(.16,.84,.28,1)}
.aufmacher-meta{transition:opacity .5s ease .06s, transform .5s cubic-bezier(.16,.84,.28,1) .06s}

/* Aufmacherbild zieht beim Wechsel sanft auf - wie ein langsamer Schwenk */
.aufmacher-bild img{transform:scale(1.06); transition:transform 7s linear, opacity .9s ease}
.aufmacher-bild.aktiv img{transform:scale(1)}

@media (prefers-reduced-motion: reduce){
  .einflug{opacity:1; transform:none; transition:none}
  .aufmacher-bild img{transform:none; transition:opacity .4s ease}
}


/* ---------- Startseite: Zitat, Schwerpunkte, Beitext ---------- */
.flaeche{background:var(--flaeche)}
.zitat-block{padding:104px 0}
.zitat{font-size:44px; font-weight:300; line-height:.95;
  letter-spacing:-.03em; max-width:17ch; margin:0}

.zitat-quelle{display:flex; flex-direction:column; gap:3px; margin-top:30px}
.zitat-quelle span:first-child{font-size:16px}

.schwerpunkt img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px;
  background:var(--flaeche); margin-bottom:12px; filter:grayscale(1);
  transition:filter .5s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
.schwerpunkt:hover img{filter:grayscale(0); transform:scale(1.015)}
.schwerpunkt-titel{font-size:18px; line-height:1.05; letter-spacing:-.01em}

.zweispalt{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:52px; align-items:center}
.zweispalt.umgekehrt .beitext-bild{order:-1}
/* Einleitungstexte sind Lesetexte, keine Bildunterschriften:
   groesser, dunkler, mit Luft zwischen den Zeilen. */
.fliesstext{font-size:20px; line-height:1.55; max-width:46ch; color:#3a3a3a;
  letter-spacing:-.005em}
.beitext-bild{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px;
  background:var(--flaeche)}

@media(max-width:900px){
  .zweispalt{grid-template-columns:1fr; gap:26px}
  .zitat-block{padding:66px 0}
  .zitat{max-width:none}
}


/* ---------- Einblenden beim Laden ----------
   Gleiches Muster wie im Thoughtwell-Projekt: kurzer Weg von unten,
   weiche Kurve, gestaffelt. Wirkt ruhig statt sprunghaft. */
@keyframes aufsteigen{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
.auftritt{opacity:0; animation:aufsteigen .78s cubic-bezier(.22,.61,.36,1) forwards}
.auftritt.t1{animation-delay:.06s}
.auftritt.t2{animation-delay:.16s}
.auftritt.t3{animation-delay:.26s}
.auftritt.t4{animation-delay:.36s}

/* Seitenwechsel: der Inhalt blendet kurz aus, statt hart zu springen. */
main{animation:aufsteigen .5s cubic-bezier(.22,.61,.36,1) both}
body.geht main{opacity:0; transform:translateY(-8px);
  transition:opacity .22s ease, transform .22s ease}

@media (prefers-reduced-motion: reduce){
  .auftritt{opacity:1; animation:none}
  main{animation:none}
  body.geht main{opacity:1; transform:none; transition:none}
}


/* ---------- Textstufen ab 768px, wie im Original ---------- */
@media(min-width:768px){
  .aufmacher-text h1{font-size:64px}
  .ueberschrift{font-size:48px}
  .zitat{font-size:48px}
  .projekt-links h1{font-size:24px}
}
@media(max-width:767px){
  .aufmacher-text h1{font-size:38px}
  .ueberschrift{font-size:30px}
  .zitat{font-size:30px}
}


/* ---------- Ladeauftritt: der Aufmacher waechst auf ----------
   Die Seite oeffnet sich, indem das Bild aus einem kleineren, staerker
   gerundeten Ausschnitt auf volle Breite aufzieht. Danach kommt der Text. */
@keyframes aufziehen{
  from{ transform:scale(.68) translateY(28px); border-radius:70px; opacity:0 }
  45% { opacity:1 }
  to  { transform:scale(1) translateY(0); border-radius:14px; opacity:1 }
}
@keyframes bildberuhigen{
  from{ transform:scale(1.4) }
  to  { transform:scale(1) }
}
.aufmacher{transform-origin:center top;
  animation:aufziehen 1.65s cubic-bezier(.16,.86,.2,1) both}
.aufmacher-bild img{animation:bildberuhigen 2.8s cubic-bezier(.16,.86,.2,1) both}

/* Die Beschriftung folgt erst, wenn das Bild steht. */
.aufmacher-text{animation:aufsteigen .95s cubic-bezier(.16,.9,.22,1) 1.0s both}
.punkte{animation:aufsteigen .7s ease 1.25s both}

/* Die Leiste kommt zuletzt und ganz ruhig. */
.kopfzeile{animation:aufsteigen .85s cubic-bezier(.16,.9,.22,1) .3s both}

@media (prefers-reduced-motion: reduce){
  .aufmacher, .aufmacher-bild img, .aufmacher-text, .punkte, .kopfzeile{animation:none}
}


/* ---------- Team, Kontakt, Karriere, Textseiten ---------- */
.team-gruppe{margin-bottom:64px}
.gruppen-titel{margin-bottom:18px; font-weight:400}
.team-raster.weit{grid-template-columns:repeat(2,1fr); max-width:760px}
.person.gross .kopfbild{aspect-ratio:4/5}
.person.gross .person-name{font-size:24px; margin-top:4px}

.anriss{font-size:28px; font-weight:300; line-height:1.34; letter-spacing:-.02em;
  max-width:52ch; color:var(--tinte); margin-bottom:42px}
.lauftext{max-width:52ch; font-size:18px; line-height:1.6; color:#3a3a3a}
.lauftext p{margin-bottom:1em}
.seiten-bild{width:100%; max-width:900px; border-radius:14px; margin:0 0 38px;
  background:var(--flaeche)}
.einschub{border-left:2px solid var(--linie); padding-left:22px; margin:34px 0}
.grossatz{font-size:24px; font-weight:300; line-height:1.25; letter-spacing:-.02em;
  color:var(--tinte); margin-top:38px; max-width:34ch}

.anfragen{display:flex; flex-wrap:wrap; gap:44px; padding-bottom:44px;
  border-bottom:1px solid var(--linie); margin-bottom:52px}
.anfrage a{font-size:16px; text-decoration:none; border-bottom:1px solid var(--linie)}
.anfrage a:hover{border-color:var(--tinte)}
/* Alle Standortspalten teilen sich dieselben Zeilen, damit Linien und
   Knoepfe auf einer Hoehe sitzen - auch bei unterschiedlich langen
   Adressen. */
.buero-raster{display:grid; grid-template-columns:repeat(3,1fr); gap:34px;
  grid-template-rows:auto auto auto auto auto; align-items:start}
.buero{display:grid; grid-row:span 5; grid-template-rows:subgrid; gap:0}
.buero-bild{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px;
  background:var(--flaeche); margin-bottom:18px; filter:grayscale(1); align-self:start}
.buero-ort{font-size:24px; font-weight:300; line-height:1.05; letter-spacing:-.01em;
  margin:0 0 12px; align-self:start}
.buero-adresse{font-size:16px; color:#6c6c66; margin:0 0 16px; line-height:1.5;
  align-self:start}
.buero .angaben{margin-top:6px}
.buero .angabe dd a{text-decoration:none; border-bottom:1px solid var(--linie)}

.stellen-liste{display:block; max-width:900px}
.stelle{display:block; padding:22px 0; border-bottom:1px solid var(--linie);
  text-decoration:none; transition:opacity .2s}
.stelle:first-child{border-top:1px solid var(--linie)}
.stelle:hover{opacity:.62}
.stellen-titel{font-size:24px; font-weight:300; line-height:1.05;
  letter-spacing:-.01em; margin-bottom:7px}

@media(max-width:900px){
  .buero-raster{grid-template-columns:1fr; gap:44px}
  .team-raster.weit{grid-template-columns:1fr}
  .anfragen{gap:24px; flex-direction:column}
}


/* ---------- Personen-Overlay ----------
   Die Person oeffnet sich ueber der Teamseite, statt sie zu verlassen.
   Die Adresszeile wandert trotzdem mit, damit man sie teilen kann. */
.schicht{position:fixed; inset:0; z-index:210; display:none}
.schicht.offen{display:block}
.schicht-grund{position:absolute; inset:0; background:rgba(20,20,20,.4);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  opacity:0; transition:opacity .38s ease}
.schicht.sichtbar .schicht-grund{opacity:1}
.schicht-blatt{position:absolute; inset:auto 0 0; height:92vh; background:var(--papier);
  border-radius:20px 20px 0 0; overflow:auto; padding:22px 0 60px;
  transform:translateY(26px); opacity:0;
  transition:transform .46s cubic-bezier(.18,.72,.16,1), opacity .34s ease}
.schicht.sichtbar .schicht-blatt{transform:none; opacity:1}
.schicht-zu{position:sticky; top:0; float:right; margin:0 26px 0 0; z-index:3}
.schicht .projekt{padding-top:8px}
@media(min-width:900px){
  .schicht-blatt{inset:24px 24px auto; height:auto; max-height:calc(100vh - 48px);
    border-radius:20px; padding:22px 0 44px}
}
@media (prefers-reduced-motion: reduce){
  .schicht-grund, .schicht-blatt{transition:none}
}


/* Portraets stehen im Hochformat - im Breitformat schneidet es die
   Koepfe an und wirkt zufaellig. */
.person-seite .projekt-rechts img,
.schicht .projekt-rechts img{aspect-ratio:3/4; object-fit:cover; max-width:520px}
.person-seite .projekt,
.schicht .projekt{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
@media(max-width:900px){
  .person-seite .projekt-rechts img,
  .schicht .projekt-rechts img{max-width:none; aspect-ratio:3/4}
  .person-seite .projekt,
  .schicht .projekt{grid-template-columns:1fr}
}


/* ---------- Journal-Beitrag: ruhige Lesespalte ---------- */
.beitrag{max-width:1240px; margin:0 auto; padding:52px 32px 0}
/* Der Kopfbereich darf nicht in ch bemessen werden - die Einheit haengt
   an der Schriftgroesse des Elements und schnuert sonst alles ein.
   Nur der Titel bekommt eine Zeilenbreite, gemessen an seiner Groesse. */
.beitrag-kopf{max-width:900px; margin-bottom:44px}
.beitrag-titel{font-size:44px; font-weight:300; line-height:1.0;
  letter-spacing:-.03em; margin:16px 0 0; max-width:17ch}
.beitrag-kopf .anriss{margin-top:20px; margin-bottom:0; max-width:44ch;
  font-size:20px; line-height:1.45; color:#3a3a3a}
.beitrag-kopf > .hinweis{display:block}
.beitrag-bild{width:100%; max-height:70vh; object-fit:cover; border-radius:14px;
  background:var(--flaeche); margin-bottom:44px}
.beitrag-text{max-width:52ch; font-size:18px; line-height:1.62; color:#3a3a3a}
.beitrag-text p{margin-bottom:1.05em}
.zwischen{font-size:24px; font-weight:300; line-height:1.05; letter-spacing:-.01em;
  color:var(--tinte); margin:36px 0 14px}
.beitrag .zurueck{max-width:none; margin:52px 0 0; padding:0}

/* Journalliste editorialer */
.eintrag-titel{font-size:26px; font-weight:300; line-height:1.1;
  letter-spacing:-.022em; margin:0 0 10px; max-width:26ch}
.eintrag-anriss{font-size:16px; line-height:1.5; color:#6c6c66; max-width:52ch}
.eintrag.ohne-bild .eintrag-titel{font-size:30px; max-width:30ch}

@media(min-width:768px){
  .beitrag-titel{font-size:56px}
}
@media(max-width:900px){
  .eintrag{grid-template-columns:1fr; gap:14px}
  .beitrag{padding:30px 18px 0}
  .beitrag-titel{font-size:30px; max-width:none}
  .beitrag-kopf .anriss{font-size:18px}
}


/* Zitat mit Portraet daneben - der Satz braucht ein Gesicht. */
.zitat-zeile{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,380px);
  gap:64px; align-items:end}
.zitat-bild{display:block; text-decoration:none}
.zitat-bild img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:14px;
  background:var(--flaeche); filter:grayscale(1);
  transition:filter .5s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
.zitat-bild:hover img{filter:grayscale(0); transform:translateY(-3px)}
@media(max-width:900px){
  .zitat-zeile{grid-template-columns:1fr; gap:34px; align-items:start}
  .zitat-bild img{max-width:280px}
}


/* ---------- Fliessender Texteintritt ----------
   Textbloecke kommen leicht unscharf und tiefer herein und ziehen sich
   scharf. Das wirkt wie Einlaufen, nicht wie Aufblitzen. Zeilen eines
   Absatzes folgen versetzt, damit das Auge mitgeht. */
.fliessen{opacity:0; transform:translateY(20px); filter:blur(7px);
  transition:opacity 1.15s cubic-bezier(.16,.9,.22,1),
             transform 1.15s cubic-bezier(.16,.9,.22,1),
             filter 1.15s cubic-bezier(.16,.9,.22,1);
  transition-delay:calc(var(--takt, 0) * .085s)}
.fliessen.da{opacity:1; transform:none; filter:blur(0)}

/* Zeilenweiser Eintritt fuer grosse Saetze */
/* Zeilen laufen hinter einer Kante hervor. Lange, weiche Kurve und
   kleine Versaetze - das liest sich ruhig, nicht hektisch. */
.zeile{display:block; overflow:hidden;
  /* Unterlaengen (g, y, ß) brauchen Platz, sonst kappt die Maske sie. */
  padding-bottom:.16em; margin-bottom:-.16em}
.zeile > span{display:block; transform:translateY(108%); opacity:.001;
  transition:transform 1.15s cubic-bezier(.16,.9,.22,1),
             opacity .9s cubic-bezier(.16,.9,.22,1);
  transition-delay:calc(var(--z, 0) * .055s)}
.da .zeile > span, .zeile.da > span{transform:none; opacity:1}
/* Zerlegte Bloecke duerfen nicht zusaetzlich unscharf einlaufen -
   sonst ueberlagern sich zwei Bewegungen. */
.zeilen-satz.fliessen{opacity:1; transform:none; filter:none}

/* Leiser Hinweis am Fuss eines Bereichs - die stillen Angaben */
.leiser-hinweis{margin-top:46px; padding-top:22px; border-top:1px solid var(--linie);
  max-width:44ch}
.leiser-hinweis a{font-size:16px; text-decoration:none;
  border-bottom:1px solid var(--linie); transition:border-color .2s}
.leiser-hinweis a:hover{border-color:var(--tinte)}
.leiser-hinweis .hinweis{margin-bottom:7px}

@media (prefers-reduced-motion: reduce){
  .fliessen{opacity:1; transform:none; filter:none; transition:none}
  .zeile > span{transform:none; transition:none}
}

@media (prefers-reduced-motion: reduce){
  .zeile > span{transform:none; opacity:1; transition:none}
}


/* Weiterführende Verweise - dezent, mit kleinem Pfeil nach aussen */
.verweise{display:flex; flex-wrap:wrap; gap:18px; margin-top:4px}
.verweis{display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:14px; letter-spacing:.10em;
  text-transform:uppercase; text-decoration:none; color:var(--tinte);
  border-bottom:1px solid var(--linie); padding-bottom:5px;
  transition:color .2s, border-color .2s}
.verweis svg{width:12px; height:12px}
.verweis:hover{color:var(--tinte); border-color:var(--tinte)}
.verweis svg{opacity:.7}


/* Treffer laufen einzeln ein, sobald getippt wird */
@keyframes trefferEin{
  from{opacity:0; transform:translateY(12px); filter:blur(4px)}
  to  {opacity:1; transform:none; filter:blur(0)}
}
.suchtreffer .listenzeile{
  animation:trefferEin .5s cubic-bezier(.16,.9,.22,1) both;
  animation-delay:calc(var(--n, 0) * .045s)}
.suchtreffer .listenzeile:hover{opacity:1; background:rgba(0,0,0,.03)}
.suchtreffer .listenzeile{border-radius:14px; padding-left:12px; padding-right:12px;
  transition:background .2s}
.such-zahl{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--grau); padding:18px 0 4px;
  animation:trefferEin .4s cubic-bezier(.16,.9,.22,1) both}
.such-leer{animation:trefferEin .45s cubic-bezier(.16,.9,.22,1) both}

@media (prefers-reduced-motion: reduce){
  .suchtreffer .listenzeile, .such-zahl, .such-leer{animation:none}
  .suchschicht, .suchschicht .suchkopf{transition:none}
}


/* Gruppenbilder nicht in ein Format zwingen - sonst stehen die
   Aeusseren ausserhalb des Ausschnitts. Das Bild behaelt seine
   eigenen Proportionen und alle bleiben zu sehen. */
.beitext-bild.ganz{aspect-ratio:auto; height:auto; object-fit:contain}


/* Auf der Kontaktseite bleiben die Angaben einspaltig untereinander. */
.buero .angaben{grid-template-columns:1fr; gap:16px; padding:18px 0;
  align-self:start; margin:0}

/* Projektseite: mehr Luft nach oben, Fussnote ganz unten */
.projekt{padding-top:42px}
.projekt-links .knopf{align-self:flex-start}
.projekt-links .leiser-hinweis{margin-top:8px}

@media(min-width:768px){
  .projekt-links h1{font-size:48px}
}
@media(max-width:900px){
  .projekt-links h1{font-size:30px}
  .angaben{grid-template-columns:repeat(2,minmax(0,1fr))}
  .projekt{padding-top:22px}
}

@media(max-width:900px){
  .eintrag, .eintrag.ohne-bild{grid-template-columns:1fr; gap:12px; padding:26px 0}
  .eintrag-marke{flex-direction:row; gap:14px}
  .eintrag-titel, .eintrag.ohne-bild .eintrag-titel{font-size:22px; max-width:none}
  .eintrag-bild{order:-1; margin-bottom:6px}
}


/* Juengste Beitraege im Menue */
.klapp-inhalt.breit{width:min(420px, calc(100vw - 40px)); padding:6px;
  /* Fast deckend - hier steht Text vor einem beliebigen Bild. */
  background:rgba(255,255,255,.985)}
.klapp-kopf{font-family:var(--mono); font-size:10.5px; letter-spacing:.10em;
  text-transform:uppercase; color:var(--grau); padding:12px 14px 10px}
/* Feste Bildspalte fuer alle Zeilen - so steht der Text immer an
   derselben Kante, ob mit Bild oder ohne. */
.klapp-inhalt .neu-zeile{display:grid; grid-template-columns:52px minmax(0,1fr);
  position:relative; z-index:1;
  gap:16px; align-items:center; padding:12px 14px; border-radius:14px;
  text-decoration:none; transition:background .18s}
.klapp-inhalt .neu-zeile + .neu-zeile{border-top:1px solid rgba(0,0,0,.05)}
.klapp-inhalt .neu-zeile:hover{background:rgba(0,0,0,.045)}
.neu-zeile:hover + .neu-zeile{border-top-color:transparent}
.klapp-inhalt .neu-zeile img{width:52px; height:52px; border-radius:10px;
  object-fit:cover; background:var(--flaeche); display:block}
/* Ohne Bild bleibt die Spalte leer statt einen Kasten zu zeigen -
   der Text behaelt trotzdem seine Kante. */
.klapp-inhalt .neu-zeile.ohne-bild::before{content:""; display:block; width:52px}
.neu-text{display:flex; flex-direction:column; gap:3px; min-width:0}
.neu-text{gap:5px}
.neu-titel{font-family:var(--schrift); font-size:14px; line-height:1.32;
  letter-spacing:-.01em; color:var(--tinte); text-transform:none;
  white-space:normal; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.neu-zeile .hinweis{font-size:10.5px; letter-spacing:.10em}
.klapp-fuss{display:block; margin-top:6px; padding:13px 14px;
  border-top:1px solid rgba(0,0,0,.07); border-radius:0 0 14px 14px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--grau); text-decoration:none;
  transition:color .18s}
.klapp-fuss:hover{color:var(--tinte)}
/* Die Beitragszeilen laufen nicht gestaffelt ein - sonst flackert es beim Zeigen. */
.klapp-inhalt.breit .neu-zeile, .klapp-inhalt.breit .klapp-fuss,
.klapp-inhalt.breit .klapp-kopf{opacity:1; transform:none; transition:background .18s}
@media(max-width:900px){.klapp-inhalt.breit{min-width:290px}}


/* Streifen: alle Kacheln gleich hoch, auch ohne Bild. Statt eines leeren
   Kastens traegt dort der Titel selbst die Flaeche. */
.streifen-teil{display:flex; flex-direction:column}
.streifen-feld{display:flex; align-items:flex-end; width:100%; aspect-ratio:4/3;
  border-radius:14px; background:var(--flaeche); margin-bottom:9px;
  padding:18px; transition:background .3s}
.streifen-feld > span{font-size:18px; font-weight:300; line-height:1.2;
  letter-spacing:-.015em; color:#4a4a4a;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.streifen-teil.ohne-bild:hover .streifen-feld{background:#e6e6e2}
/* Der Titel darunter waere dann doppelt - er entfaellt bei diesen Kacheln. */
.streifen-teil.ohne-bild .streifen-titel{display:none}
.streifen-teil.ohne-bild .hinweis{margin-top:2px}

/* Der Knopf steht in allen Spalten auf gleicher Hoehe, ganz unten. */
.buero > p:last-child{margin:16px 0 0; align-self:end}

@supports not (grid-template-rows: subgrid){
  .buero{display:block}
  .buero-adresse{min-height:5.4em}
}


/* Die gleitende Markierung liegt hinter den Feldern. */
.pille{position:absolute; top:0; left:0; border-radius:999px;
  background:#EFE7CF; box-shadow:inset 0 0 0 1.4px #A88720; pointer-events:none; z-index:0; opacity:0}
.navi .pille{box-shadow:inset 0 0 0 1.4px #A88720, 0 2px 10px rgba(0,0,0,.08)}
.navi .knopf, [data-werkzeuge] .reiter{position:relative; z-index:1}
/* Ist die Pille im Spiel, tragen die Felder selbst keinen Grund mehr -
   die Markierung kommt allein von der gleitenden Flaeche. */
.navi:has(.pille) .knopf[aria-current="page"]{background:transparent; color:#6f5a12;
  border-color:transparent; box-shadow:none}
[data-werkzeuge]:has(.pille) .reiter[aria-pressed="true"]{background:transparent; color:#6f5a12}
.reiter, .navi .knopf{transition:color .3s ease, background .24s ease}
/* Helle Schrift wandert mit der Pille mit. Steht die Pille woanders,
   faellt der gewaehlte Reiter auf die dunkle Schrift zurueck. */
[data-werkzeuge]:has(.unter-pille) .reiter[aria-pressed="true"]:not(.unter-pille){color:var(--grau)}
.navi:has(.unter-pille) .knopf[aria-current="page"]:not(.unter-pille){color:var(--tinte)}
.unter-pille{color:#6f5a12 !important}
.navi .knopf.unter-pille{color:#6f5a12 !important; background:transparent !important;
  border-color:transparent !important; box-shadow:none !important}


/* Sobald die gleitende Pille die Markierung uebernimmt, treten die
   eigenen Hover-Gruende der Knoepfe zurueck - sonst laufen zwei
   Markierungen nebeneinander her. */
.navi:has(.pille) .knopf{background:transparent; border-color:transparent;
  box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none}
.navi:has(.pille) .knopf:hover{background:transparent; transform:none;
  box-shadow:none}
[data-werkzeuge]:has(.pille) .reiter:hover{background:transparent}
/* Die Leiste traegt das Milchglas jetzt als Ganzes. */
/* Kein eigener Rahmen um die Leiste - die Knoepfe tragen sich selbst. */
.navi{flex-shrink:0}


/* Die Frage steht als leise Unterzeile ueber dem Titel des Aufmachers. */
.aufmacher-frage{font-family:var(--mono); font-size:clamp(14px,1.5vw,19px);
  line-height:1.4; letter-spacing:.02em; text-transform:none;
  color:rgba(255,255,255,.94); margin:16px 0 0; max-width:30ch;
  text-shadow:0 1px 16px rgba(0,0,0,.45)}
.aufmacher-frage:empty{display:none}


/* Auch in der Beitragsliste wandert eine Markierung mit - hier hell,
   damit die Schrift dunkel bleiben kann. */
.klapp-inhalt.breit{position:relative}
.pille-hell{position:absolute; top:0; left:0; border-radius:14px;
  background:rgba(0,0,0,.055); pointer-events:none; z-index:0; opacity:0}
.klapp-inhalt .neu-zeile:hover{background:rgba(0,0,0,.05)}


/* Unsichtbare Bruecke zwischen Knopf und Feld, damit der Zeiger den
   Zwischenraum ueberqueren kann, ohne dass das Feld zuklappt. */
.klapp-inhalt::before{content:""; position:absolute; left:0; right:0;
  top:-10px; height:10px}


/* In den senkrechten Listen bleibt es beim ruhigen Abblenden statt
   einer wandernden Flaeche. */
[data-behaelter] .listenzeile:hover, [data-behaelter] .eintrag:hover{opacity:.62}


/* Das Klappfeld richtet sich immer am eigenen Knopf aus, nie an der
   Leiste - sonst zieht es diese in die Hoehe. */
.klapp{position:relative !important}
.klapp-inhalt{position:absolute !important}


/* Standortkarten: ruhig eingefaerbt, damit sie neben den Fotos nicht
   ueberlaut wirken. Der Quellenhinweis ist bei OpenStreetMap Pflicht. */
.buero-bild{filter:grayscale(1) contrast(.86) brightness(1.06)}
.kartenquelle{display:none}



/* ---------- Menue fuer schmale Schirme ---------- */
.nur-schmal{display:none !important}
.balken{display:flex; flex-direction:column; gap:4px; width:15px}
.balken span{display:block; height:1.4px; background:currentColor; border-radius:2px;
  transition:transform .3s cubic-bezier(.22,1.02,.32,1)}

.menueschicht{position:fixed; inset:0; z-index:220; display:none;
  /* Milchglas statt deckendem Weiss - der Inhalt dahinter bleibt zu ahnen. */
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(34px) saturate(190%);
  -webkit-backdrop-filter:blur(34px) saturate(190%);
  opacity:0; transition:opacity .34s ease}
.menueschicht.offen{display:flex; flex-direction:column}
.menueschicht.sichtbar{opacity:1}
.menue-kopf{display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid rgba(0,0,0,.07)}
.menue-liste{flex:1; display:flex; flex-direction:column; justify-content:flex-start;
  gap:40px; padding:36px 26px 32px; overflow-y:auto; -webkit-overflow-scrolling:touch}

/* Gruppe: Beschriftung seitlich, Punkte gross daneben */
.menue-gruppe{display:grid; grid-template-columns:minmax(64px,auto) minmax(0,1fr); gap:26px;
  align-items:start}
.menue-marke{padding-top:9px}
.menue-punkte{display:flex; flex-direction:column; gap:6px}
.menue-punkte a{font-size:30px; font-weight:300; line-height:1.22;
  letter-spacing:-.028em; text-decoration:none; padding:5px 0;
  opacity:0; transform:translateY(16px);
  transition:opacity .5s cubic-bezier(.16,.9,.22,1),
             transform .6s cubic-bezier(.16,.9,.22,1);
  transition-delay:calc(var(--m, 0) * .04s + .1s)}
.menueschicht.sichtbar .menue-punkte a{opacity:1; transform:none}

.menue-fuss{padding:20px 18px 30px; border-top:1px solid rgba(0,0,0,.09);
  display:flex; flex-direction:column; gap:22px;
  background:rgba(255,255,255,.42)}
.fuss-block{display:flex; flex-direction:column; gap:8px}
.fuss-marke{font-size:10.5px; letter-spacing:.10em}
.fuss-weg{font-family:var(--mono); font-size:12px; letter-spacing:.03em;
  text-decoration:none; color:var(--tinte)}
.menue-sprache{position:relative}
.sprache-knopf{display:inline-flex; align-items:center; gap:9px;
  align-self:flex-start; cursor:pointer; color:var(--tinte);
  background:rgba(255,255,255,.7); border:1px solid rgba(0,0,0,.09);
  border-radius:999px; padding:8px 14px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase}
.sprache-knopf svg{transition:transform .28s cubic-bezier(.22,1.02,.32,1)}
.sprache-knopf[aria-expanded="true"] svg{transform:rotate(180deg)}
.sprache-liste{display:flex; flex-direction:column; gap:2px; margin-top:10px;
  background:rgba(255,255,255,.75); border:1px solid rgba(0,0,0,.08);
  border-radius:14px; padding:6px; align-self:flex-start; min-width:190px}
.sprache-liste > span{display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:9px 12px; border-radius:10px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase}
.sprache-aktiv{color:#fff; background:#26251f}
.sprache-bald{color:#a9a9b2}
.sprache-bald em{font-style:normal; font-size:10.5px; letter-spacing:.10em;
  color:#c0c0c7; border:1px solid rgba(0,0,0,.08); border-radius:999px;
  padding:2px 7px}
.menue-wege{display:flex; flex-direction:column; gap:6px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em}
.menue-wege a{text-decoration:none; color:var(--grau)}

@media(max-width:760px){
  .nur-schmal{display:inline-flex !important}
  .kopfzeile .navi{gap:6px}
  .menue-punkte a{font-size:26px}
  .menue-gruppe{grid-template-columns:minmax(56px,auto) minmax(0,1fr); gap:20px}
}
@media (prefers-reduced-motion: reduce){
  .menueschicht, .menue-liste a{transition:none}
}


/* ---------- Kooperationen: waagerechtes Laufband ---------- */
.kooperationen{padding:46px 0 40px; border-bottom:1px solid var(--linie);
  overflow:hidden}
.kooperationen .hinweis{margin-bottom:20px}
.ko-bahn{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.ko-lauf{display:flex; gap:64px; width:max-content;
  animation:kolauf 38s linear infinite}
/* Das Band laeuft ohne Unterbrechung durch. */
.ko-name{font-size:26px; font-weight:300; letter-spacing:-.02em; color:#4a4a4a;
  white-space:nowrap; transition:color .3s}
.ko-name:hover{color:var(--tinte)}
@keyframes kolauf{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

@media(max-width:760px){
  .ko-name{font-size:20px}
  .ko-lauf{gap:38px; animation-duration:26s}
  .kooperationen{padding:34px 0 30px}
  /* Auf schmalen Schirmen nimmt das Portrait die volle Breite. */
  .zitat-bild img{max-width:none; width:100%}
  .zitat-zeile{gap:26px}
}
@media (prefers-reduced-motion: reduce){
  .ko-lauf{animation:none; flex-wrap:wrap; width:auto}
}


/* ---------- Klientel ---------- */
.ueber-zusatz{font-size:.4em; color:var(--grau); letter-spacing:0;
  vertical-align:middle; margin-left:.34em}
.klientel-raster{display:grid; grid-template-columns:repeat(3,1fr);
  gap:2px 44px; column-fill:balance}
.klient{display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; padding:11px 0; border-bottom:1px solid rgba(0,0,0,.07)}
.klient > span:first-child{font-size:16px; line-height:1.35}
.klient .hinweis{font-size:10.5px; flex-shrink:0}
@media(max-width:900px){.klientel-raster{grid-template-columns:repeat(2,1fr); gap:2px 26px}}
@media(max-width:600px){.klientel-raster{grid-template-columns:1fr}}





/* Mitmachen-Abschnitt bekommt mehr Luft nach oben und unten. */
.abschnitt.mitmachen{padding:104px 0}
.abschnitt.mitmachen .zweispalt{gap:72px; align-items:center}
@media(max-width:900px){
  .abschnitt.mitmachen{padding:64px 0}
  .abschnitt.mitmachen .zweispalt{gap:32px}
}


/* ---------- Dokumente zum Herunterladen ----------
   Als Blaetter mit Titelseite: man sieht, was man bekommt. */
.abschnitt.dokumente{padding-top:78px}
.dokument-raster{display:grid; grid-template-columns:repeat(4,1fr); gap:28px}
.dokument{display:block}
.dokument-blatt{position:relative; display:block; aspect-ratio:1/1.414;
  border-radius:10px; overflow:hidden; background:var(--flaeche);
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 10px 26px rgba(0,0,0,.07);
  transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease}
.dokument-blatt img{width:100%; height:100%; object-fit:cover; display:block}
.dokument:hover .dokument-blatt{transform:translateY(-5px);
  box-shadow:0 2px 4px rgba(0,0,0,.07), 0 20px 44px rgba(0,0,0,.13)}
.dokument-marke{position:absolute; left:11px; top:11px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.10em;
  background:rgba(255,255,255,.86); backdrop-filter:blur(10px);
  border-radius:999px; padding:4px 9px; color:var(--tinte)}
.dokument-fuss{display:block; padding-top:14px}
.dokument-blatt{cursor:pointer}
.dokument-name{display:block; font-size:16px; line-height:1.32;
  letter-spacing:-.012em; margin-bottom:8px; text-decoration:none;
  color:var(--tinte); transition:opacity .2s}
.dokument-name:hover{opacity:.6}
.dokument-zeile{display:flex; align-items:center; justify-content:space-between; gap:12px}
.dokument-pfeil{display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:999px; background:var(--flaeche);
  color:var(--tinte); flex-shrink:0;
  transition:background .25s, transform .35s cubic-bezier(.22,1.02,.32,1)}
.dokument-pfeil:hover{background:var(--tinte); color:#fff; transform:translateY(2px)}
@media(max-width:1000px){.dokument-raster{grid-template-columns:repeat(3,1fr); gap:22px}}
@media(max-width:760px){.dokument-raster{grid-template-columns:repeat(2,1fr); gap:18px}}


/* Klientel steht auf der grauen Flaeche, Mitmachen auf Weiss - so
   trennen sich die beiden Themen sichtbar voneinander. */
.abschnitt.mitmachen{background:var(--papier)}
.abschnitt.dokumente{border-top:1px solid var(--linie)}


/* ---------- Leistungen: die Groessenordnungen ---------- */
.stufen{display:block; max-width:1000px; margin-top:12px}
.stufe{display:grid; grid-template-columns:120px minmax(0,1fr); gap:36px;
  align-items:baseline; padding:34px 0; border-bottom:1px solid var(--linie)}
.stufe:first-child{border-top:1px solid var(--linie)}
.stufe-kurz{font-size:44px; font-weight:300; line-height:.9; letter-spacing:-.04em;
  color:var(--tinte)}
.stufe-titel{font-size:22px; font-weight:300; line-height:1.2; letter-spacing:-.018em;
  margin-bottom:8px}
.stufe-satz{font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color:var(--grau)}
@media(min-width:768px){.stufe-kurz{font-size:56px}}
@media(max-width:760px){
  .stufe{grid-template-columns:64px minmax(0,1fr); gap:20px; padding:26px 0}
  .stufe-kurz{font-size:30px}
  .stufe-titel{font-size:18px}
}


/* ---------- Schlagzeilen-Ticker ---------- */
.ticker{margin:0 0 34px; padding:16px 0; border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie); overflow:hidden}
.ticker-bahn{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent)}
.ticker-lauf{display:flex; gap:52px; width:max-content;
  animation:tickerlauf 64s linear infinite}
.ticker-teil{display:inline-flex; align-items:baseline; gap:12px;
  text-decoration:none; white-space:nowrap; transition:opacity .25s}
.ticker-teil:hover{opacity:.55}
.ticker-jahr{font-family:var(--mono); font-size:10.5px; letter-spacing:.10em;
  color:var(--grau)}
.ticker-titel{font-size:16px; letter-spacing:-.01em; color:var(--tinte)}
@keyframes tickerlauf{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media(max-width:760px){
  .ticker-lauf{gap:34px; animation-duration:46s}
  .ticker-titel{font-size:14px}
}
@media (prefers-reduced-motion: reduce){
  .ticker-lauf{animation:none; flex-wrap:wrap; width:auto; gap:18px 34px}
}


/* ---------- Innovation ---------- */
.abschnitt.innovation{background:var(--flaeche)}
.felder{display:flex; flex-wrap:wrap; gap:9px; margin-top:26px}
.feld{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tinte);
  background:rgba(255,255,255,.75); border:1px solid rgba(0,0,0,.07);
  border-radius:999px; padding:8px 14px}

/* ---------- Der Goldene Kreis: eigene Bühne ----------
   Diese Seite folgt bewusst einer eigenen Ordnung - dunkler Grund,
   Gold als einzige Farbe. Sie soll sich von den Projektseiten absetzen. */
:root{ --gold:#C9A227; }

.gk{background:#0D0F35; color:#f2f2ef}
.gk .kopfzeile{background:transparent}
.gk-kopf{max-width:1280px; margin:0 auto; padding:180px 32px 0}
.gk-marke{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); margin-bottom:34px}
.gk-titel{font-size:clamp(46px,9vw,148px); font-weight:300; line-height:.98;
  letter-spacing:-.042em; max-width:14ch; margin:0; color:var(--gold)}
.gk-titel em{font-style:normal; color:var(--gold)}
.gk-unter{font-size:clamp(20px,2.6vw,34px); font-weight:300; color:#8a8a86;
  margin-top:32px; max-width:34ch; line-height:1.34; letter-spacing:-.018em}
.gk-quelle{display:flex; flex-wrap:wrap; gap:30px; margin-top:54px;
  padding-top:26px; border-top:1px solid rgba(255,255,255,.14);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:#8a8a86}

/* Zahlen */
.gk-zahlen{display:grid; grid-template-columns:repeat(3,1fr); gap:34px;
  max-width:1280px; margin:0 auto; padding:76px 32px 84px}
.gk-zahl{border-top:1px solid rgba(255,255,255,.14); padding-top:20px}
.gk-wert{font-size:clamp(38px,5vw,68px); font-weight:300; line-height:1;
  letter-spacing:-.04em; color:var(--gold)}
.gk-was{font-family:var(--mono); font-size:11.5px; letter-spacing:.10em;
  text-transform:uppercase; color:#8a8a86; margin-top:12px}

/* Karte */
.gk-buehne{padding:0 clamp(32px,4.5vw,64px) 90px; max-width:1280px; margin:0 auto}
#gk-karte{position:relative; background:transparent; border-radius:20px;
  padding:26px; overflow:hidden}
.gk-svg{width:100%; height:auto; display:block; overflow:visible}

.gk-ring{fill:none; stroke:rgba(255,255,255,.08); stroke-width:1;
  opacity:0; transform-origin:center; transform:scale(.9);
  transition:opacity 1s ease, transform 1.2s cubic-bezier(.16,.9,.22,1);
  transition-delay:calc(var(--takt) * .12s)}
.laeuft .gk-ring{opacity:1; transform:scale(1)}
.gk-masstab-text{fill:rgba(255,255,255,.3); font-family:var(--mono);
  font-size:11.5px; letter-spacing:.10em; text-anchor:middle;
  opacity:0; transition:opacity .9s ease;
  transition-delay:calc(.4s + var(--takt) * .12s)}
.laeuft .gk-masstab-text{opacity:1}

.gk-kreis{fill:rgba(201,162,39,.05); stroke:var(--gold); stroke-width:2.5;
  opacity:0;
  transition:stroke-dashoffset 2.4s cubic-bezier(.3,.7,.2,1) .3s,
             opacity .5s ease .3s}
.laeuft .gk-kreis{stroke-dashoffset:0 !important; opacity:1}

.gk-linie{stroke:rgba(201,162,39,.6); stroke-width:1;
  stroke-dasharray:220; stroke-dashoffset:220;
  transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(1.4s + var(--takt) * .06s)}
.laeuft .gk-linie{stroke-dashoffset:0}

.gk-ort{cursor:default; opacity:0;
  transition:opacity .55s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(1s + var(--takt) * .04s)}
.laeuft .gk-ort{opacity:1}
.gk-punkt{fill:var(--gold); stroke:#1a1a1a; stroke-width:1.5;
  transition:fill .25s ease}
.gk-ort.gk-zentrum .gk-punkt{fill:var(--gold)}
.gk-ort.gk-klein .gk-punkt{fill:rgba(201,162,39,.55)}
.gk-ort.gk-innen .gk-punkt{fill:rgba(201,162,39,.75)}

/* Beschriftung: ueberall gleich hell und gleich schwer. Ein Schatten
   traegt sie ueber den Kreisrand, ohne dass sie fett wirkt. */
.gk-linie.gk-satellit{stroke:rgba(201,162,39,.55); stroke-width:1;
  stroke-dasharray:none; stroke-dashoffset:0; opacity:0;
  transition:opacity .35s ease; pointer-events:none}
.gk-linie.gk-satellit.zeig{opacity:1}
.gk-name{fill:#e6e6e2; font-family:Helvetica, Arial, sans-serif;
  font-size:14px; font-weight:400; letter-spacing:-.005em;
  paint-order:stroke; stroke:#0D0F35; stroke-width:3.5; stroke-linejoin:round;
  pointer-events:none; transition:fill .25s ease}
.gk-ort.gk-klein .gk-name{font-size:12px; fill:#9c9c98}
.gk-ort.gk-zentrum .gk-name{fill:#fff}
.gk-ort:hover .gk-punkt, .gk-ort:focus .gk-punkt{fill:#fff}
.gk-ort:hover .gk-name, .gk-ort:focus .gk-name{fill:#fff}
.gk-ort:focus{outline:none}

.gk-puls{fill:none; stroke:var(--gold); stroke-width:1.2; opacity:0;
  transform-box:fill-box; transform-origin:center}
.laeuft .gk-puls{animation:gkpuls 3.6s cubic-bezier(.2,.7,.2,1) infinite;
  animation-delay:2.2s}
@keyframes gkpuls{
  0%   {opacity:.4; transform:scale(1)}
  70%  {opacity:0;  transform:scale(2.2)}
  100% {opacity:0;  transform:scale(2.2)}
}

/* Text */
/* Kapitel: je ein Gedanke, mit Nummer, Kopfzeile und Absatz. */
.gk-kapitel{max-width:1120px; margin:0 auto; padding:0 clamp(32px,4.5vw,64px) 40px}
.gk-teil{display:grid; grid-template-columns:120px minmax(0,1fr);
  gap:34px; padding:58px 0; border-top:1px solid rgba(255,255,255,.1)}
/* Die Nummern in der Grundschrift und hell - die Schreibmaschinenschrift
   wirkt hier zu technisch, das gedeckte Gold zu dunkel. */
.gk-nummer{font-family:var(--schrift); font-size:clamp(34px,4vw,60px);
  font-weight:300; letter-spacing:-.03em; line-height:.9;
  color:#e3c25a; padding-top:2px}
.gk-kopf-zeile{font-size:clamp(21px,2.2vw,30px); font-weight:300; line-height:1.06;
  letter-spacing:-.03em; color:#f2f2ef; margin:0 0 16px; max-width:20ch}
.gk-anriss{font-size:clamp(15px,1.4vw,17.5px); font-weight:300; line-height:1.4;
  color:var(--gold); margin:0 0 22px; max-width:34ch}
.gk-absatz{font-size:16px; line-height:1.66; color:#b6b6b2; max-width:62ch; margin:0}
.gk-fuss{max-width:1280px; margin:0 auto; padding:0 clamp(32px,4.5vw,64px) 110px;
  display:flex; flex-wrap:wrap; gap:14px}
.gk .knopf{background:rgba(255,255,255,.1); color:#f2f2ef;
  border-color:rgba(255,255,255,.16); box-shadow:none; backdrop-filter:none}
.gk .knopf:hover{background:rgba(255,255,255,.2)}
.gk .knopf.gold{background:var(--gold); color:#1a1a1a; border-color:transparent}
.gk .knopf.gold:hover{background:#dab432}
.gk .fusszeile{border-top-color:rgba(255,255,255,.12)}
.gk .fusszeile, .gk .fuss-spalte a{color:#a5a5a1}
.gk .hinweis{color:#8a8a86}

@media(max-width:760px){
  .gk-kopf{padding:112px 18px 46px}
  .gk-zahlen{grid-template-columns:1fr; gap:20px; padding:0 20px 54px}
  .gk-buehne{padding:0 12px 60px}
  #gk-karte{padding:12px; border-radius:14px}
  .gk-name{font-size:20px}
  .gk-ort.gk-klein .gk-name{font-size:16px}
  .gk-text{padding:0 20px 70px; font-size:18px}
  .gk-text p:first-child{font-size:20px}
}
@media (prefers-reduced-motion: reduce){
  .gk-ring, .gk-kreis, .gk-linie, .gk-ort{transition:none; opacity:1;
    transform:none; stroke-dashoffset:0}
  .gk-puls{animation:none !important}
}


/* Portraets etwas zurueckgenommen - kleiner und mit mehr Luft dazwischen
   wirkt die Reihe ruhiger als eine Wand aus Gesichtern. */
.team-raster .kopfbild{aspect-ratio:4/5}
.team-gruppe{margin-bottom:76px}
@media(max-width:760px){
  .team-raster{grid-template-columns:repeat(2,1fr); gap:24px 18px}
  .team-gruppe{margin-bottom:52px}
}


/* Fusszeilen-Abschluss: Zeichen, Gruss, Rechtezeile */
.fuss-schluss{display:flex; align-items:center; flex-wrap:wrap; gap:20px;
  margin-top:52px; padding-top:26px; border-top:1px solid var(--linie)}
.fuss-marke{font-family:var(--serif); font-weight:700; font-size:24px;
  letter-spacing:-.01em; text-decoration:none; color:var(--tinte); line-height:1}
.fuss-schluss .hinweis:first-of-type{margin-right:auto}
.gk .fuss-marke{color:#f2f2ef}
.gk .fuss-schluss{border-top-color:rgba(255,255,255,.12)}
@media(max-width:600px){
  .fuss-schluss{gap:10px; flex-direction:column; align-items:flex-start}
  .fuss-schluss .hinweis:first-of-type{margin-right:0}
}


/* ---------- Die Idee dahinter: der Schluss in grosser Schrift ---------- */
.gk-vision{border-top:1px solid rgba(255,255,255,.1); margin-top:30px}
.gk-vision-bahn{max-width:1180px; margin:0 auto; padding:100px 32px 110px}
.gk-vision .gk-marke{margin-bottom:38px}
.gk-vision-text{font-size:clamp(24px,3vw,42px); font-weight:300;
  line-height:1.32; letter-spacing:-.03em; color:#f2f2ef; max-width:26ch}
.gk-vision-text p{margin-bottom:1.05em}
.gk-vision-text p:last-child{margin-bottom:0}
.gk-schluss{font-size:clamp(22px,2.6vw,34px); font-weight:300; line-height:1.16;
  letter-spacing:-.032em; color:var(--gold); max-width:24ch;
  margin:56px 0 0; padding-top:40px; border-top:1px solid rgba(255,255,255,.1)}
@media(max-width:760px){
  .gk-vision-bahn{padding:56px 18px 66px}
  .gk-vision-text{max-width:none}
  .gk-schluss{margin-top:36px; padding-top:28px}
}


/* ---------- Warum das trägt ---------- */
.gk-warum{border-top:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.02)}
.gk-warum-bahn{max-width:1200px; margin:0 auto; padding:84px 32px 92px}
.gk-warum .gk-marke{margin-bottom:26px}
.gk-warum-titel{font-size:clamp(30px,4.2vw,62px); font-weight:300; line-height:1.08;
  letter-spacing:-.032em; color:#f2f2ef; max-width:20ch; margin:0 0 60px}
.gk-punkte{display:grid; grid-template-columns:repeat(3,1fr); gap:52px 44px}
.gk-punkt-block{border-top:1px solid rgba(201,162,39,.34); padding-top:22px}
.gk-punkt-kopf{font-size:24px; font-weight:400; line-height:1.25;
  letter-spacing:-.018em; color:var(--gold); margin:0 0 14px}
.gk-punkt-text{font-size:17.5px; line-height:1.6; color:#b2b2ae; margin:0}
@media(max-width:1000px){.gk-punkte{grid-template-columns:repeat(2,1fr); gap:44px 32px}}
@media(max-width:700px){
  .gk-punkte{grid-template-columns:1fr; gap:34px}
  .gk-warum-bahn{padding:56px 18px 62px}
  .gk-warum-titel{margin-bottom:40px}
}


/* ---------- Belege: die Projekte hinter der These ---------- */
.gk-belege{border-top:1px solid rgba(255,255,255,.1)}
.gk-belege-bahn{max-width:1200px; margin:0 auto; padding:70px 32px 96px}
.gk-belege .gk-marke{margin-bottom:32px}
.gk-belege-raster{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.gk-beleg{display:block; text-decoration:none}
.gk-beleg img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px;
  background:#1c1c1b; margin-bottom:14px;
  transition:opacity .35s ease, transform .5s cubic-bezier(.2,.7,.2,1)}
.gk-beleg:hover img{opacity:.82; transform:translateY(-3px)}
.gk-beleg-titel{font-size:18px; color:#f2f2ef; margin-bottom:5px}
.gk-beleg-ort{font-family:var(--mono); font-size:10.5px; letter-spacing:.10em;
  text-transform:uppercase; color:#8a8a86}
@media(max-width:760px){
  .gk-belege-raster{grid-template-columns:1fr; gap:22px}
  .gk-belege-bahn{padding:52px 18px 64px}
}


/* ---------- Statement: der Einstieg trägt den stärksten Satz ---------- */
.gk-statement{max-width:1280px; margin:0 auto; padding:92px 32px 96px}
.gk-statement-satz{font-size:clamp(34px,6.1vw,94px); font-weight:300;
  line-height:1.03; letter-spacing:-.042em; color:#fff; max-width:21ch; margin:0}
.gk-statement-zusatz{font-size:clamp(18px,2.1vw,28px); font-weight:300;
  line-height:1.36; color:var(--gold); max-width:32ch; margin:42px 0 0;
  letter-spacing:-.014em}

/* Der vollständige Beitrag steht am Ende, bewusst zurückgenommen. */
.gk-langtext{border-top:1px solid rgba(255,255,255,.1)}
.gk-langtext-bahn{max-width:1120px; margin:0 auto; padding:78px 32px 40px}
.gk-langtext .gk-marke{margin-bottom:8px}
.gk-langtext .gk-kapitel{padding:0}
.gk-langtext .gk-teil{padding:44px 0}

@media(max-width:760px){
  .gk-statement{padding:8px 18px 56px}
  .gk-statement-satz{max-width:none}
  .gk-langtext-bahn{padding:52px 18px 28px}
}


/* Auf schmalen Schirmen dürfen die Vollbild-Momente atmen, ohne zu kippen. */
@media(max-width:760px){
  .gk-kopf{padding:118px 18px 0}
  .gk-quelle{gap:14px; margin-top:34px}
  .gk-statement{padding:60px 18px 64px}
  .gk-zahlen{padding:48px 18px 52px}
}


/* Die Idee dahinter: Blöcke mit eigener Überschrift statt Textwand */
.gk-vision-block{padding-bottom:44px}
.gk-vision-block + .gk-vision-block{padding-top:44px;
  border-top:1px solid rgba(255,255,255,.09)}
.gk-vision-kopf{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); margin-bottom:22px}
.gk-vision-block p{margin:0}
@media(max-width:760px){
  .gk-teil{grid-template-columns:64px minmax(0,1fr); gap:18px}
  .gk-vision-block{padding-bottom:32px}
  .gk-vision-block + .gk-vision-block{padding-top:32px}
}


/* ---------- Kopfschleier auf dunklem Grund ----------
   Der weisse Verlauf gehoert auf helle Seiten. Hier vergraut er alles,
   deshalb: dunkel statt hell, schwaecher, und der Blur setzt erst
   unterhalb der Leiste an, damit nichts Wichtiges verwischt. */
.gk .schleier{height:104px}
.gk .schleier span:nth-child(9){
  background:linear-gradient(180deg, rgba(17,17,17,.92) 0%,
    rgba(17,17,17,.6) 42%, rgba(17,17,17,.22) 72%, rgba(17,17,17,0) 100%)}
.gk .schleier span:nth-child(1){
  backdrop-filter:blur(3.4px) saturate(105%);
  -webkit-backdrop-filter:blur(3.4px) saturate(105%)}
.gk .schleier span:nth-child(2){
  backdrop-filter:blur(2.2px) saturate(104%);
  -webkit-backdrop-filter:blur(2.2px) saturate(104%)}
.gk .schleier span:nth-child(3){
  backdrop-filter:blur(1.4px) saturate(103%);
  -webkit-backdrop-filter:blur(1.4px) saturate(103%)}
.gk .schleier span:nth-child(4){
  backdrop-filter:blur(.9px); -webkit-backdrop-filter:blur(.9px)}
.gk .schleier span:nth-child(5),
.gk .schleier span:nth-child(6),
.gk .schleier span:nth-child(7),
.gk .schleier span:nth-child(8){
  backdrop-filter:none; -webkit-backdrop-filter:none}


/* ---------- Abstraktes Zeichen im Kopf ----------
   Ringe und umlaufende Punkte - dieselbe Ordnung wie die Karte,
   nur ohne Orte und Text. */
.gk-kopf{position:relative}
.gk-zeichen{position:absolute; right:-40px; top:50%; transform:translateY(-50%);
  width:min(46vw, 560px); pointer-events:none; opacity:0;
  animation:gkZeichenEin 1.6s cubic-bezier(.16,.9,.22,1) .5s forwards}
.gk-zeichen svg{width:100%; height:auto; display:block; overflow:visible}
@keyframes gkZeichenEin{ to{opacity:1} }

.gk-z-ring{fill:none; stroke:#fff; stroke-opacity:.07; stroke-width:1}
.gk-z-kreis{fill:none; stroke:var(--gold); stroke-opacity:.5; stroke-width:1.5;
  stroke-dasharray:5 12}
.gk-z-lauf{transform-origin:200px 200px;
  animation:gkDreh 44s linear infinite}
.gk-z-lauf.rueck{animation-duration:64s; animation-direction:reverse}
@keyframes gkDreh{ to{transform:rotate(360deg)} }
.gk-z-punkt{fill:var(--gold); opacity:.85}
.gk-z-punkt.gross{fill:#fff; opacity:1}
.gk-z-punkt.klein{fill:var(--gold); opacity:.42}
.gk-z-mitte{fill:#fff;
  animation:gkAtmen 4.6s cubic-bezier(.4,0,.6,1) infinite}
@keyframes gkAtmen{
  0%,100% {r:7;   opacity:1}
  50%     {r:9.5; opacity:.72}
}

/* Ein Punkt wandert zwischen den Bahnen und kommt zurück */

@media(max-width:1000px){
  .gk-zeichen{width:52vw; right:-90px; opacity:.5 !important;
    animation:none}
}
@media(max-width:760px){ .gk-zeichen{display:none} }
@media (prefers-reduced-motion: reduce){
  .gk-zeichen, .wv-zeichen{opacity:1; animation:none}
  .gk-z-lauf, .gk-z-mitte, .wv-netzbild{animation:none}
  .wv-f{stroke-dashoffset:0; animation:none}
  .wv-k{opacity:1; animation:none}
}

/* ---------- About: gleiche Dramaturgie wie der Goldene Kreis,
   nur hell. Groß beginnen, nach unten ruhiger. ---------- */
.ue-kopf{max-width:1280px; margin:0 auto; padding:172px 32px 0}
.ue-marke{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grau); margin-bottom:30px}
/* Das Zeichen in der Hausschrift, so groß wie es trägt. */
.ue-zeichen{display:block; width:min(100%,860px); height:auto;
  margin:0 0 38px; user-select:none}
.ue-titel{font-size:clamp(34px,5.4vw,86px); font-weight:300; line-height:1;
  letter-spacing:-.04em; margin:0; color:var(--tinte)}
.ue-statement{font-size:clamp(21px,2.6vw,34px); font-weight:300; line-height:1.32;
  letter-spacing:-.024em; color:var(--tinte); max-width:26ch; margin:46px 0 0}
.ue-statement-zusatz{font-size:clamp(16px,1.8vw,21px); font-weight:300;
  line-height:1.45; color:var(--grau); max-width:38ch; margin:22px 0 0}

.ue-zahlen{display:grid; grid-template-columns:repeat(3,1fr); gap:34px;
  max-width:1280px; margin:0 auto; padding:88px 32px 96px}
.ue-zahl{border-top:1px solid var(--linie); padding-top:20px}
.ue-wert{font-size:clamp(40px,5.4vw,76px); font-weight:300; line-height:1;
  letter-spacing:-.042em; color:var(--tinte)}
.ue-was{font-family:var(--mono); font-size:11.5px; letter-spacing:.10em;
  text-transform:uppercase; color:var(--grau); margin-top:14px}

/* Stimmen: Name und Bild links oben, Text als Lesespalte */
.ue-stimmen{border-top:1px solid var(--linie)}
.ue-stimme{max-width:1280px; margin:0 auto; padding:76px 32px;
  display:grid; grid-template-columns:300px minmax(0,1fr); gap:64px;
  align-items:start}
.ue-stimme + .ue-stimme{border-top:1px solid var(--linie)}
.ue-stimme-kopf{display:flex; flex-direction:column; gap:18px}
.ue-portrait{width:100%; max-width:230px; aspect-ratio:3/4; object-fit:cover;
  border-radius:14px; background:var(--flaeche); filter:grayscale(1)}
.ue-name{font-size:24px; font-weight:300; line-height:1.1; letter-spacing:-.022em;
  margin-bottom:5px}
.ue-stimme-text{font-size:clamp(18px,2vw,24px); font-weight:300; line-height:1.5;
  letter-spacing:-.016em; color:#3a3a3a; max-width:34ch}
.ue-stimme-text p{margin-bottom:1.05em}
.ue-stimme-text p:last-child{margin-bottom:0}
.ue-stimme.ohne-bild .ue-stimme-text{color:#4a4a4a}

/* Das Büro: kleinere Schrift, das ist der Sachtext */
.ue-buero{background:var(--flaeche); border-top:1px solid var(--linie)}
.ue-bahn{max-width:1280px; margin:0 auto; padding:82px 32px 90px}
.ue-buero-kopf{font-size:clamp(26px,3.4vw,46px); font-weight:300; line-height:1.06;
  letter-spacing:-.03em; margin:0 0 38px; max-width:20ch}
.ue-buero-text{font-size:18px; line-height:1.66; color:#4a4a4a; max-width:62ch}
.ue-buero-text p{margin-bottom:1.1em}
.ue-buero-text p:last-child{margin-bottom:0}

.ue-schluss{border-top:1px solid var(--linie)}
.ue-schluss p{font-size:clamp(24px,3.2vw,44px); font-weight:300; line-height:1.18;
  letter-spacing:-.03em; color:var(--tinte); max-width:24ch; margin:0}
.ue-fuss{max-width:1280px; margin:0 auto; padding:0 clamp(32px,4.5vw,64px) 100px;
  display:flex; flex-wrap:wrap; gap:12px}

@media(max-width:900px){
  .ue-stimme{grid-template-columns:1fr; gap:28px; padding:52px 18px}
  .ue-portrait{max-width:170px}
}
@media(max-width:760px){
  .ue-kopf{padding:112px 18px 0}
  .ue-zahlen{grid-template-columns:1fr; gap:22px; padding:54px 18px 58px}
  .ue-bahn{padding:54px 18px 60px}
  .ue-fuss{padding:0 20px 66px}
  .ue-statement, .ue-stimme-text{max-width:none}
}

/* ---------- Welten verbinden: gleiche Bühne, rot statt gold ----------
   Das Rot ist der Akzent der Projektseite welten-verbinden.com. */
.wv{ --gold:#D64533; }
.wv-kopfteil{position:relative}
.wv-zeichen{position:absolute; right:-30px; top:52%; transform:translateY(-50%);
  width:min(40vw, 460px); pointer-events:none; opacity:0;
  animation:gkZeichenEin 1.6s cubic-bezier(.16,.9,.22,1) .5s forwards}
.wv-zeichen svg{width:100%; height:auto; display:block; overflow:visible}
/* Ein Netz aus zwei Gruppen, die sich verknuepfen. Die Faeden ueber
   die Mitte wachsen zuletzt - erst dann verbinden sich die Welten. */
.wv-f{stroke:#fff; stroke-opacity:.14; stroke-width:1;
  stroke-dasharray:260; stroke-dashoffset:260;
  animation:wvFaden 1.5s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:calc(1.1s + var(--takt) * .13s)}
.wv-f-innen{stroke:var(--gold); stroke-opacity:.4;
  animation-delay:calc(.5s + var(--takt) * .07s)}
@keyframes wvFaden{ to{stroke-dashoffset:0} }

.wv-k{opacity:0; animation:wvKnoten .6s cubic-bezier(.22,1.1,.32,1) forwards;
  animation-delay:calc(.3s + var(--takt) * .09s)}
.wv-k-l{fill:var(--gold)}
.wv-k-r{fill:#fff}
@keyframes wvKnoten{ from{opacity:0; transform:scale(.3)} to{opacity:1; transform:none} }
.wv-k{transform-box:fill-box; transform-origin:center}

.wv-netzbild{animation:wvAtmen 9s ease-in-out infinite; transform-origin:200px 200px}
@keyframes wvAtmen{
  0%,100% {transform:scale(1)}
  50%     {transform:scale(1.035)}
}

.wv-schema{max-width:1120px; margin:0 auto; padding:0 clamp(32px,4.5vw,64px) 20px}
.wv-teil{display:grid; grid-template-columns:150px minmax(0,1fr); gap:36px;
  padding:52px 0; border-top:1px solid rgba(255,255,255,.1); align-items:start}
.wv-w{font-family:var(--schrift); font-size:clamp(30px,3.6vw,54px); font-weight:300;
  line-height:.9; letter-spacing:-.03em; color:var(--gold); padding-top:2px}
.wv-kopf{font-size:clamp(27px,3.1vw,44px); font-weight:300; line-height:1.06;
  letter-spacing:-.026em; color:#f2f2ef; margin:0 0 14px; max-width:22ch}
.wv-text{font-size:clamp(18px,1.45vw,22px); line-height:1.58; color:#b6b6b2;
  max-width:54ch; margin:18px 0 0}

.wv-netz{border-top:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.02)}
.wv-bahn{max-width:1200px; margin:0 auto; padding:80px 32px 92px}
.wv-netz-text{font-size:20px; line-height:1.6; color:#b6b6b2; max-width:52ch;
  margin:0 0 44px}
.wv-partner-raster{display:grid; grid-template-columns:repeat(3,1fr); gap:2px 40px}
.wv-partner{font-size:16px; color:#d4d4d0; padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,.09)}
.wv .gk-quelle a{color:var(--gold); text-decoration:none;
  border-bottom:1px solid rgba(214,69,51,.4); padding-bottom:2px}
.wv .gk-quelle a:hover{border-color:var(--gold)}

@media(max-width:1000px){.wv-partner-raster{grid-template-columns:repeat(2,1fr); gap:2px 26px}}
@media(max-width:760px){
  .wv-zeichen{display:none}
  .wv-schema{padding:0 20px 12px}
  .wv-teil{grid-template-columns:82px minmax(0,1fr); gap:18px; padding:36px 0}
  .wv-bahn{padding:54px 18px 62px}
  .wv-partner-raster{grid-template-columns:1fr}
}

/* ---------- Welten verbinden: Programm, Menschen, Netzwerk ---------- */
.wv-programm{border-top:1px solid rgba(255,255,255,.1)}
.wv-termine{margin-bottom:44px}
.wv-termin{display:grid; grid-template-columns:110px minmax(0,1fr); gap:30px;
  padding:26px 0; border-bottom:1px solid rgba(255,255,255,.09); align-items:baseline}
.wv-termin:first-child{border-top:1px solid rgba(255,255,255,.09)}
.wv-jahr{font-size:clamp(26px,3vw,40px); font-weight:300; line-height:.9;
  letter-spacing:-.03em; color:var(--gold)}
.wv-termin-titel{font-size:20px; font-weight:300; letter-spacing:-.018em;
  color:#f2f2ef; margin-bottom:7px}
.wv-formate{display:flex; flex-wrap:wrap; gap:9px}
.wv-format{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:#c9c9c5;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:999px; padding:8px 14px}

.wv-menschen{border-top:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.02)}
.wv-mensch-raster{display:grid; grid-template-columns:repeat(4,1fr); gap:2px 34px}
.wv-mensch{padding:20px 0; border-bottom:1px solid rgba(255,255,255,.09)}
.wv-mensch-name{font-size:18px; color:#f2f2ef; line-height:1.3; margin-bottom:6px}
.wv-mensch-zusatz{display:block; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.06em; color:#8a8a86; margin-top:3px}
.wv-swa{display:inline-block; margin-top:9px; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.10em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(214,69,51,.42);
  border-radius:999px; padding:3px 9px}

.wv-gruppen{display:grid; grid-template-columns:repeat(3,1fr); gap:46px 44px}
.wv-gruppe-kopf{margin-bottom:14px; padding-bottom:12px;
  border-bottom:1px solid rgba(214,69,51,.34)}
.wv-gruppe .wv-partner{font-size:16px; padding:11px 0; border-bottom:none}

@media(max-width:1000px){
  .wv-mensch-raster{grid-template-columns:repeat(3,1fr); gap:2px 26px}
  .wv-gruppen{grid-template-columns:repeat(2,1fr); gap:38px 30px}
}
@media(max-width:700px){
  .wv-mensch-raster{grid-template-columns:repeat(2,1fr); gap:2px 20px}
  .wv-gruppen{grid-template-columns:1fr; gap:32px}
  .wv-termin{grid-template-columns:70px minmax(0,1fr); gap:16px}
}

/* ---------- Welten verbinden: die Logowand ---------- */
.gk .knopf.hell{background:#fff;color:#1a1a1a;border-color:transparent}
.gk .knopf.hell:hover{background:#e6e6e2}

/* Eine geschlossene Wand: alle Marken gleich schwer, weiss auf Schwarz.
   Die letzte Reihe zentriert sich, damit der Block nicht ausfranst. */
/* Die Wand steht randlos auf Schwarz. Der invertierte weisse Logogrund
   verschwindet darin restlos, die Marken schweben frei. */
section.wv-netz{padding-top:140px;padding-bottom:130px}
.wv-wand{display:flex;flex-wrap:wrap;justify-content:center;
 column-gap:0;row-gap:74px;margin-top:92px}
.wv-logo{flex:0 0 auto;width:calc(100% / 5);min-width:190px;
 display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
 gap:26px;padding:0 26px;text-decoration:none;position:relative}
.wv-logo-bild{max-width:140px;width:auto;height:72px;object-fit:contain;
 opacity:1;
 transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
a.wv-logo:hover .wv-logo-bild{opacity:1;transform:scale(1.07)}
.wv-logo-wort{font-size:22px;font-weight:300;line-height:1.22;text-align:center;
 letter-spacing:-.02em;color:rgba(255,255,255,.92);max-width:172px;height:88px;
 display:flex;align-items:center;justify-content:center}
.wv-logo-name{font-family:"BB Manual Mono",monospace;font-size:10.5px;letter-spacing:.10em;
 text-transform:uppercase;text-align:center;color:rgba(255,255,255,.3);line-height:1.7;
 max-width:180px;transition:color .45s ease}
a.wv-logo:hover .wv-logo-name{color:rgba(255,255,255,.7)}
.wv-logo.ohne-bild .wv-logo-name{display:none}

/* Beitritt */
.wv-beitritt{padding:180px 0 60px;text-align:center}
.wv-beitritt-kopf{font-size:clamp(40px,6vw,86px);font-weight:300;letter-spacing:-.035em;
 line-height:1.02;margin:0 0 30px}
.wv-beitritt-text{font-size:clamp(18px,1.7vw,25px);font-weight:300;line-height:1.5;
 max-width:660px;margin:0 auto 46px;color:rgba(255,255,255,.62)}
.wv-beitritt-mail{display:inline-block;font-size:clamp(22px,2.6vw,38px);font-weight:300;
 letter-spacing:-.02em;color:#fff;text-decoration:none;
 border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:8px;transition:border-color .3s}
.wv-beitritt-mail:hover{border-bottom-color:#fff}

@media(max-width:700px){
 .wv-logo{width:50%;min-width:0;padding:0 12px;gap:16px}
 .wv-logo-bild{max-width:104px;height:56px}
 .wv-logo-wort{font-size:16px;height:56px}
 .wv-logo-name{font-size:8.5px}
 .wv-wand{margin-top:54px;row-gap:48px;padding:44px 0 50px}
 .wv-beitritt{padding:120px 0 40px}
}

/* Urheber: drei Marken direkt unter dem Kopf. Keine Linie, keine Flaeche,
   keine Beschriftung - die Marken stehen fuer sich. */
.gk-urheber{max-width:1280px; margin:0 auto; padding:72px 32px 0}
.gk-urheber-bahn{display:flex; flex-wrap:wrap; align-items:center;
  column-gap:clamp(64px,7vw,124px); row-gap:44px}
.gk-urheber .gk-marke{margin-bottom:34px; opacity:.5}
.urheber-marke{display:flex; flex-direction:column; align-items:flex-start; gap:18px;
  text-decoration:none; opacity:.9; transition:opacity .4s ease}
.urheber-bild{display:flex; align-items:center; height:62px}
.urheber-name{font-family:var(--mono); font-size:10.5px; letter-spacing:.10em;
  text-transform:uppercase; color:rgba(255,255,255,.42); line-height:1.65;
  max-width:24ch; transition:color .4s ease}
a.urheber-marke:hover .urheber-name{color:rgba(255,255,255,.75)}
a.urheber-marke:hover{opacity:1}
/* SWA-Wortmarke als Bild: gleiches Mass wie die anderen Beteiligten-Logos */
img.wv-wortmarke{height:48px; width:auto; max-width:260px; object-fit:contain}
/* Brenner-Schriftzug steht etwas groesser */
.urheber-marke .wv-logo-bild[src*="brenner"]{max-width:340px; height:72px}
.urheber-marke .wv-logo-bild{max-width:250px; height:56px; width:auto;
  object-fit:contain; object-position:left center; opacity:1}
.wv-wortmarke{font-family:var(--serif); font-weight:700; font-size:46px;
  letter-spacing:-.015em; line-height:1; color:#f2f2ef}
@media(max-width:700px){
  .gk-urheber{padding:26px 18px 0}
  .gk-urheber-bahn{gap:34px}
  .urheber-bild{height:46px}
  .urheber-marke .wv-logo-bild{max-width:150px; height:44px}
  .wv-wortmarke{font-size:36px}}

/* Welten verbinden: die vier Gedanken stehen nebeneinander, nicht in einer
   schmalen Spalte - sonst bleibt die halbe Seite leer. */
.wv .gk-vision-bahn{max-width:1300px; padding:120px 32px 140px}
.wv .gk-vision-text{display:grid; grid-template-columns:repeat(2,1fr);
  column-gap:96px; row-gap:0; max-width:none;
  font-size:clamp(24px,2.42vw,36px); line-height:1.3; letter-spacing:-.022em}
.wv .gk-vision-block{padding:60px 0 54px; border-top:1px solid rgba(255,255,255,.1)}
.wv .gk-vision-block + .gk-vision-block{padding-top:60px}
.wv .gk-vision-block:nth-child(2){border-top:1px solid rgba(255,255,255,.1)}
.wv .gk-vision-kopf{font-size:16px; letter-spacing:.14em; margin-bottom:30px;
  color:var(--gold); opacity:1; line-height:1.5}
.wv .gk-schluss{font-size:clamp(34px,4.2vw,64px); line-height:1.06; max-width:20ch;
  margin-top:92px; padding-top:66px}
@media(max-width:900px){
  .wv .gk-vision-text{grid-template-columns:1fr; column-gap:0}
  .wv .gk-vision-bahn{padding:74px 18px 76px}
  .wv .gk-vision-block{padding:34px 0 30px}
  .wv .gk-vision-block + .gk-vision-block{padding-top:34px}}

/* Welten verbinden: die W-Fragen laufen ueber die volle Breite -
   Frage, Antwort und Erklaerung nebeneinander statt in einer schmalen Spalte. */
.wv .wv-schema{max-width:1300px; margin:0 auto; padding:0 clamp(32px,4.5vw,64px)}
.wv .wv-teil{grid-template-columns:132px minmax(0,1.05fr) minmax(0,1fr);
  column-gap:56px; row-gap:20px; align-items:start; padding:62px 0}
.wv .wv-kopf{font-size:clamp(28px,2.9vw,42px); line-height:1.05; margin:0;
  letter-spacing:-.03em}
.wv .wv-text{font-size:clamp(19px,1.5vw,23px); line-height:1.55; max-width:46ch;
  margin:6px 0 0; color:#a9a9a5}
.wv .wv-w{font-size:clamp(30px,3.2vw,46px)}

/* Der Aufschlag: heller und groesser - Rot bleibt dem Akzent vorbehalten */
.wv .gk-statement{max-width:1300px; margin:0 auto; padding:34px 32px 92px}
.wv .gk-statement-satz{font-size:clamp(44px,6.1vw,96px); line-height:.99;
  letter-spacing:-.04em; max-width:19ch}
.wv .gk-statement-zusatz{color:#c4c4c0; font-size:clamp(21px,2.05vw,31px);
  line-height:1.42; max-width:40ch; margin-top:38px; letter-spacing:-.015em}
@media(max-width:900px){
  .wv .wv-teil{grid-template-columns:74px minmax(0,1fr); column-gap:20px;
    row-gap:12px; padding:38px 0}
  .wv .wv-text{grid-column:2; max-width:none}
  .wv .gk-statement{padding:20px 18px 58px}
  .wv .gk-statement-zusatz{margin-top:26px}}

/* Der Schriftzug steht in der Wand auf derselben Linie wie die Bildmarken */
.wv-wand-marke{height:88px; display:flex; align-items:center; justify-content:center;
  font-size:44px; line-height:1}
@media(max-width:700px){.wv-wand-marke{height:56px; font-size:30px}}

/* Der Abbinder folgt dem mittigen Aufruf darueber */
.wv .gk-fuss{justify-content:center; padding-top:8px}

/* Schwerpunkte: Auskunft, kein Verweis. Pikto, Name und die Sache dahinter. */
.schwerpunkte-teil{padding-top:16px}
.schwerpunkt-reihe{display:flex; flex-wrap:wrap; gap:16px; margin-top:44px}
.schwerpunkt-pille{display:inline-flex; align-items:center; gap:17px;
  padding:24px 38px 24px 30px; border-radius:999px; border:1px solid #e6e6e2;
  background:#faf9f5; color:#1a1a1a; white-space:nowrap; line-height:1}
.schwerpunkt-zeichen{width:34px; height:34px; flex:0 0 auto; color:#1a1a1a; opacity:.8}
.schwerpunkt-wort{font-size:22px; letter-spacing:-.018em}
.schwerpunkt-unter{font-family:var(--mono); font-size:10.5px; letter-spacing:.10em;
  text-transform:uppercase; color:#8a8a86; padding-left:16px; margin-left:1px;
  border-left:1px solid #e0e0de}
@media(max-width:1000px){.schwerpunkt-unter{display:none}}
@media(max-width:820px){.schwerpunkt-reihe{gap:11px}
  .schwerpunkt-pille{padding:17px 26px 17px 20px; gap:12px}
  .schwerpunkt-wort{font-size:18px}
  .schwerpunkt-zeichen{width:26px; height:26px}}

/* Die roten Auszeichnungen tragen den Abschnitt mit - sie duerfen gesehen werden */
.wv .gk-vision .gk-marke{font-size:16px; letter-spacing:.14em; opacity:1;
  margin-bottom:52px}
.wv .gk-kopf .gk-marke{font-size:12px; letter-spacing:.14em}
@media(max-width:900px){
  .wv .gk-vision-kopf{font-size:12px; margin-bottom:20px}
  .wv .gk-vision .gk-marke{font-size:12px; margin-bottom:34px}}

/* ============================================================
   SACRED TECTURE
   ============================================================ */
/* ============================================================
   Palette der Buchdeckel: Ultramarin als Grund, Altgold für die
   Linien, warmes Grau für den Text. Kein Schwarz, kein Weiß —
   das Blau trägt die Tiefe, das Gold die Zeichnung.
   ============================================================ */
.sac{
  --blau-tief:#141A4A;      /* Grund, dunkles Ultramarin */
  --blau:#232C6B;           /* Flächen darüber */
  --blau-hell:#39428C;      /* Kanten und Linien */
  --gold:#C9A227;           /* die Zeichnung */
  --gold-hell:#E3C46A;      /* Lichter im Gold */
  --grau-warm:#B9B4A6;      /* Fließtext */
  --grau-still:#7E7B72;     /* stille Zeilen */
  --papierweiss:#f2f2ef;    /* Überschriften */
  background:
    radial-gradient(120% 90% at 50% 0%, #1E2660 0%, transparent 62%),
    radial-gradient(90% 70% at 50% 100%, #1A2156 0%, transparent 58%),
    var(--blau-tief);
  color:var(--papierweiss)}
.sac .kopfzeile .marke{color:var(--gold-hell)}
.sac .knopf{background:rgba(201,162,39,.1); border-color:rgba(201,162,39,.38);
  color:var(--gold-hell)}
.sac .knopf:hover{background:rgba(201,162,39,.2); border-color:var(--gold)}
.sac .fusszeile{background:transparent; color:var(--grau-still)}
.sac .kopfzeile{background:transparent}
.sac .navi .knopf{color:var(--grau-warm)}

.sac-kopf{max-width:1180px; margin:0 auto; padding:clamp(110px,13vh,170px) 32px 0;
  text-align:center}
.sac-kopf .hinweis{color:#8a8a86}
.sac-titel{font-size:clamp(46px,8vw,116px); font-weight:300; letter-spacing:-.045em;
  line-height:.96; margin:26px 0 0}
.sac-satz{font-size:clamp(21px,2.4vw,32px); font-weight:300; letter-spacing:-.022em;
  line-height:1.3; color:#cfcdc6; max-width:24ch; margin:30px auto 0}
.sac-anriss{font-size:clamp(16px,1.5vw,19px); line-height:1.62; color:#8a8a86;
  max-width:60ch; margin:34px auto 0; padding-bottom:0}

/* ---------- Die Blume trägt die Seite ---------- */
.sac-buehne-gross{position:relative; min-height:100vh;
  display:grid; place-items:center; overflow:hidden;
  padding:clamp(90px,12vh,150px) 24px clamp(50px,8vh,90px)}
.sac-blume-gross{position:absolute; inset:0; display:grid; place-items:center;
  pointer-events:none}
.blume{width:min(96vmin, 1080px); height:auto; display:block; overflow:visible;
  filter:drop-shadow(0 0 26px rgba(201,162,39,.16))}
.bl-kreis, .bl-rand{fill:none; stroke:var(--gold); vector-effect:non-scaling-stroke}
.bl-kreis{stroke-width:1.25; stroke-opacity:.92}
.bl-rand{stroke-width:1.6; stroke-opacity:.7; stroke:var(--gold-hell)}
.bl-kreis[style*="--ring:0"]{stroke-width:1.7; stroke-opacity:1;
  stroke:var(--gold-hell)}

/* Sich bildend, nicht abspulend. Drei Griffe machen den Unterschied:
   die Kreise überlagern sich stark (3,6s Dauer bei nur 0,8s Ringabstand,
   also bis zu zwanzig gleichzeitig in Bewegung), sie ziehen aus ihrem
   Mittelpunkt auf statt nur herumzulaufen, und innerhalb eines Rings
   entstehen sie von zwei Seiten gleichzeitig statt im Uhrzeigersinn. */
.blume circle{stroke-dasharray:1; stroke-dashoffset:1; opacity:0;
  transform-box:fill-box; transform-origin:center}
.blume.zeichnet circle{
  animation:blumeZiehen 3.6s cubic-bezier(.22,.68,.14,1) forwards;
  animation-delay:calc(var(--ring) * .8s + var(--n) * .085s)}
@keyframes blumeZiehen{
  0%  {stroke-dashoffset:1; opacity:0;   transform:scale(.9)}
  10% {opacity:.35}
  70% {opacity:.85}
  100%{stroke-dashoffset:0; opacity:1;   transform:scale(1)}
}
/* Danach atmet die Figur kaum merklich weiter */
.blume.fertig{animation:blumeAtmen 16s ease-in-out infinite}
@keyframes blumeAtmen{
  0%,100%{transform:scale(1);     opacity:1}
  50%    {transform:scale(1.008); opacity:.9}
}

/* Der Satz steht in der Figur, nicht daneben */
.sac-kopf-innen{position:relative; z-index:2; text-align:center;
  max-width:22ch; margin:0 auto;
  text-shadow:0 2px 40px rgba(20,26,74,.96), 0 0 100px rgba(20,26,74,.92)}
.sac-kopf-innen .hinweis{color:var(--gold)}
.sac-titel{font-size:clamp(44px,7.6vw,108px); font-weight:300; letter-spacing:-.045em;
  line-height:.95; margin:22px 0 0}
.sac-satz{font-size:clamp(18px,2vw,26px); font-weight:300; letter-spacing:-.02em;
  line-height:1.32; color:var(--grau-warm); margin:24px auto 0}
.sac-neu{position:absolute; left:50%; bottom:clamp(28px,5vh,54px);
  transform:translateX(-50%); z-index:3}

/* ---------- Die Texte darunter ---------- */
.sac-zeichen-teil{max-width:780px; margin:0 auto;
  padding:clamp(60px,10vh,120px) 32px 0; text-align:center}
.sac-anriss{font-size:clamp(20px,2.2vw,29px); font-weight:300; line-height:1.42;
  letter-spacing:-.018em; color:var(--papierweiss); margin:0}
.sac-erklaerung{padding-top:clamp(50px,8vh,90px)}
.sac-zeichen-kopf{font-size:clamp(24px,2.6vw,36px); font-weight:300;
  letter-spacing:-.028em; line-height:1.14; margin:0 0 18px}
.sac-erklaerung p{font-size:clamp(16px,1.5vw,19px); line-height:1.62;
  color:var(--grau-warm); max-width:56ch; margin:0 auto}

/* ---------- Die drei Gedanken ---------- */
.sac-bloecke{max-width:1240px; margin:clamp(60px,9vh,110px) auto clamp(70px,10vh,120px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:rgba(201,162,39,.22); border:1px solid rgba(201,162,39,.22)}
.sac-block{background:var(--blau); padding:clamp(28px,3vw,44px)}
.sac-block-kopf{font-size:clamp(20px,1.9vw,25px); font-weight:400;
  letter-spacing:-.02em; margin-bottom:12px; color:var(--gold-hell)}
.sac-block p{font-size:16.5px; line-height:1.6; color:var(--grau-warm); margin:0}

@media(max-width:900px){
  .sac-buehne{grid-template-columns:1fr; gap:36px}
  .sac-bloecke{grid-template-columns:1fr; padding-inline:18px; margin-inline:18px}
  .sac-kopf{padding-inline:18px}
}
@media (prefers-reduced-motion: reduce){
  .blume.zeichnet circle{animation:none; stroke-dashoffset:0; opacity:.9}
  .blume.fertig{animation:none}
}


/* ---------- Der Grund ist nicht rein weiß ----------
   Ein Hauch warmes Papier statt #fff. Man sieht es nicht bewusst,
   aber der Kontrast wird weicher und die Seite wirkt weniger
   nach Bildschirm und mehr nach Druck. */
:root{ --papier:#FAF9F5; --papier-tief:#F2F0EA; }
body{background:var(--papier)}
.kopfzeile{background:transparent}
.abschnitt.hell,.fusszeile{background:var(--papier-tief)}

/* ---------- Ein Hauch Gold auch auf den hellen Seiten ----------
   Nicht als Fläche, nur dort, wo ohnehin ein Akzent sitzt: die
   aktive Zeile, der Anriss einer Rubrik, die Marke im Fuß. */
:root{ --gold-tief:#9C7C18; --gold-hauch:#F4EEDC; }
.hinweis{color:var(--gold-tief)}
.abschnitt .hinweis::after{background:var(--gold-tief)}
.knopf[aria-current="page"]{color:#1a1a1a}
.eintrag:hover .eintrag-titel,.liste-item:hover .liste-titel{color:var(--gold-tief)}
.fuss-marke{color:var(--gold-tief)}

/* ============================================================
   DIE WORTMARKE
   Nachgebaut statt eingesetzt: das PDF enthält nur ein PNG mit
   909 Pixeln Breite — als Schrift bleibt die Marke in jeder Größe
   scharf und wiegt nichts. Orange und Grau sind aus der Vorlage
   gemessen: #F68A00 und #8A8B8D.
   ============================================================ */
@font-face{font-family:"Avenir Marke"; src:url(/fonts/Avenir-Light.woff2) format("woff2");
  font-weight:300; font-display:swap}
:root{ --swa-orange:#F68A00; --swa-grau:#8A8B8D; }

.marke{display:inline-flex; flex-direction:column; gap:5px; text-decoration:none;
  line-height:1; font-family:"Avenir Marke", Avenir, "Helvetica Neue", sans-serif}
.marke-wort{font-size:30px; font-weight:300; letter-spacing:.005em;
  color:var(--swa-orange); white-space:nowrap}
.marke-wort b{font-weight:300; letter-spacing:.02em}
.marke-zusatz{font-size:10.5px; font-weight:300; letter-spacing:.06em;
  color:var(--swa-grau); white-space:nowrap;
  padding:4px 0; border-top:1px solid var(--swa-grau);
  border-bottom:1px solid var(--swa-grau)}

.fuss-marke{font-family:"Avenir Marke", Avenir, "Helvetica Neue", sans-serif}
.fuss-marke .marke-wort{font-size:22px; color:var(--swa-orange)}

/* Auf den dunklen Seiten bleibt das Orange, das Grau wird heller */
.gk .marke-zusatz,.sac .marke-zusatz{color:#9a9a94; border-color:#4a4a46}
@media(max-width:700px){
  .marke-wort{font-size:23px}
  .marke-zusatz{font-size:8px; letter-spacing:.06em}
}

/* ---------- Das Logo als Bild ----------
   Die Vorlage hat 909 Pixel Breite; in der Leiste sitzt es bei 52px
   Höhe, also mit reichlich Reserve für Retina-Schirme. */
.marke{display:inline-flex; align-items:center; padding:0}
.marke{flex-shrink:0}
.marke img{height:62px; width:auto; max-width:none; display:block; content:url("/bilder/marke/swa-wort-gold-gross.png")}
.fuss-marke img{height:44px; width:auto; display:block}
.fuss-marke{display:inline-flex; align-items:center}
/* Auf dunklem Grund die weiße Fassung */
/* Auf dunklem Grund die helle Goldfassung */
.gk .marke img,.gk .fuss-marke img,
.sac .marke img,.sac .fuss-marke img{content:url("/bilder/marke/swa-wort-gold-gross.png")}
@media(max-width:700px){ .marke img{height:34px} }

/* ---------- Höhere Kopfleiste ----------
   Das größere Logo braucht Luft. Der Schleier darunter wächst mit,
   sonst endet die Unschärfe mitten in der Leiste. */
.kopfzeile{padding:26px clamp(20px,3vw,44px)}
.schleier{height:186px}
.aufmacher{margin-top:8px}
@media(max-width:900px){
  .kopfzeile{padding:18px 18px}
  .schleier{height:148px}
}

/* Atmosphaerebilder auf der Teamseite: Abstand nach oben und unten,
   damit sie zwischen Ueberschrift und Personenraster atmen. */
.abschnitt .beitrag-bild{margin:26px 0 52px}

/* Die Logodatei ist jetzt eng auf die Buchstaben beschnitten, der Leerraum
   darueber und darunter faellt weg. Die Hoehen sind darauf neu eingestellt. */
.marke img{height:38px}
.fuss-marke img{height:27px}
@media(max-width:900px){.marke img{height:32px}}

/* Welten verbinden: Zeichen zwischen den Worten */
.wv-kopfteil .gk-titel::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 0 16px;
  vertical-align: -4px;
  background: radial-gradient(circle at 30% 30%, #fff, #fff 3px, transparent 3px);
  box-shadow: 
    160% 0 0 -8px #fff,
    80% 140% 0 -6px #fff,
    -50% 120% 0 -6px #fff,
    180% 60% 0 -7px #fff
}

/* Welten verbinden und Goldener Kreis: weißes Logo */
.wv .marke img,
.gk .marke img {
  content: url("/bilder/marke/swa-wort-weiss-gross.png");
}

/* Golden Circle: kleineres Logo */
.gk .marke img {
  height: 32px !important;
}

/* Sprach-Dropdown im Kopf: Globus mit Auswahl, weitere Sprachen folgen. */
.sprach-inhalt{min-width:198px}
.sprach-inhalt .sprache-eintrag{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  width:100%; padding:8px 13px; border-radius:14px; border:0; background:none;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; white-space:nowrap; color:var(--grau);
  cursor:pointer; text-align:left}
.sprach-inhalt .sprache-eintrag:hover{background:rgba(0,0,0,.055); color:var(--tinte)}
.sprach-inhalt .sprache-eintrag.sprache-aktiv{color:#fff; background:#26251f}

/* Weltkarte der Projekte (Reiter "Karte" in der Projektübersicht) */
#welt-karte{background:#0D0F35; border-radius:20px; padding:clamp(18px,3vw,44px);
  margin-top:8px}
.wk-svg{width:100%; height:auto; display:block; overflow:visible}
.wk-land{fill:rgba(255,255,255,.10); stroke:rgba(255,255,255,.16); stroke-width:.5}
.wk-punkt{fill:var(--gold); opacity:0; transform:scale(.2);
  transform-box:fill-box; transform-origin:center;
  transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(.3s + var(--takt) * .12s)}
.laeuft .wk-punkt{opacity:1; transform:scale(1)}
.wk-puls{fill:none; stroke:rgba(201,162,39,.5); stroke-width:1.2;
  transform-box:fill-box; transform-origin:center; opacity:0}
.laeuft .wk-puls{animation:wkPuls 3.2s ease-out infinite;
  animation-delay:calc(1s + var(--takt) * .3s)}
@keyframes wkPuls{
  0%{transform:scale(1); opacity:.7}
  70%,100%{transform:scale(2.6); opacity:0}}
.wk-name{fill:#fff; font-family:Helvetica, Arial, sans-serif; font-size:16px;
  paint-order:stroke; stroke:#0D0F35; stroke-width:3.5; stroke-linejoin:round;
  opacity:0; transition:opacity .5s ease;
  transition-delay:calc(.55s + var(--takt) * .12s)}
.wk-zahl{fill:rgba(201,162,39,.9); font-family:var(--mono); font-size:10.5px;
  letter-spacing:.10em; text-transform:uppercase;
  paint-order:stroke; stroke:#0D0F35; stroke-width:3; stroke-linejoin:round;
  opacity:0; transition:opacity .5s ease;
  transition-delay:calc(.7s + var(--takt) * .12s)}
.laeuft .wk-name, .laeuft .wk-zahl{opacity:1}
.wk-ort:hover .wk-punkt, .wk-ort:focus .wk-punkt{fill:#fff; r:9;
  stroke:rgba(255,255,255,.3); stroke-width:7}
.wk-ort:hover .wk-name, .wk-ort:focus .wk-name{fill:#fff}
.wk-ort:hover .wk-zahl, .wk-ort:focus .wk-zahl{fill:#E3C25A}
@media (prefers-reduced-motion: reduce){
  .wk-punkt, .wk-name, .wk-zahl{opacity:1; transform:none; transition:none}
  .laeuft .wk-puls{animation:none}}
.wechsel[hidden], #welt-karte[hidden]{display:none}

/* Verborgene Orte: tauchen erst beim Hovern ihrer Gruppe auf */
.gk-ort.gk-nur-hover{opacity:0 !important; transition:opacity .35s ease}
.gk-ort.gk-nur-hover.zeig{opacity:1 !important}

/* Projektpunkte: blinken leise, der Mini-Name erscheint erst beim Berühren */
.gk-ort.gk-projekt .gk-punkt{fill:var(--gold)}
.laeuft .gk-ort.gk-projekt .gk-punkt{animation:gkBlinken 2.4s ease-in-out infinite}
@keyframes gkBlinken{0%,100%{opacity:1}50%{opacity:.22}}
.gk-ort.gk-projekt .gk-name{opacity:0; font-size:11.5px;
  transition:opacity .3s ease}
.gk-ort.gk-projekt:hover .gk-name, .gk-ort.gk-projekt:focus .gk-name,
.gk-ort.gk-projekt.zeig .gk-name{opacity:1}
.gk-ort.gk-projekt:hover .gk-punkt, .gk-ort.gk-projekt:focus .gk-punkt{
  animation-play-state:paused; opacity:1; fill:#fff}
@media (prefers-reduced-motion: reduce){
  .laeuft .gk-ort.gk-projekt .gk-punkt{animation:none}}

/* Verweis im Fliesstext der dunklen Seiten: goldene Linie, ruhig */
.gk-verweis{color:inherit; text-decoration:none;
  border-bottom:1px solid rgba(201,162,39,.65); transition:color .25s ease}
.gk-verweis:hover{color:var(--gold)}


/* Sprachliste in der Menueschicht: gleiche Machart */
.sprache-liste .sprache-eintrag{display:block; width:100%; text-align:left;
  border:0; background:none; cursor:pointer; padding:7px 12px; border-radius:14px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--grau)}
.sprache-liste .sprache-eintrag:hover{background:rgba(0,0,0,.055); color:var(--tinte)}
.sprache-liste .sprache-eintrag.sprache-aktiv{color:#fff; background:#26251f}

/* Google-Uebersetzung: nur die Uebersetzung selbst, alles Beiwerk bleibt unsichtbar */
#google_translate_element{position:absolute; left:-9999px; top:0; height:0; overflow:hidden}
.goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame,
.goog-te-spinner-pos, .skiptranslate iframe{display:none !important}
body{top:0 !important}
font[style]{background:transparent !important; box-shadow:none !important}

/* ============================================================
   Der Blick aus dem Orbit: filmisches Schwarzweiss.
   Das Geruest ist das des Goldenen Kreises, die Farbwelt
   wechselt von Ultramarin und Gold zu Schwarz und Weiss.
   ============================================================ */
.orbit{background:#070A1E; --gold:#f2f2ef}
.orbit .kopfzeile, .orbit .schleier{--grund:#070A1E}
.orbit .gk-statement-satz, .orbit .gk-warum-titel{color:#f2f2ef}
.orbit .gk-wert{color:#fff}
.orbit .gk-marke, .orbit .gk-vision-kopf{color:rgba(255,255,255,.66)}
.orbit .gk-zahl{border-top-color:rgba(255,255,255,.24)}
.orbit .gk-punkt-block{border-top-color:rgba(255,255,255,.24)}
.orbit .gk-schluss{color:#b9b9b5}
.orbit .knopf.hell{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4);
  color:#fff}
.orbit .knopf.hell:hover{background:#fff; color:#070A1E}

/* Studio-Bilder: zwei Kader nebeneinander, wie Filmstills */
.orbit-bilder{max-width:1280px; margin:0 auto; padding:0 clamp(32px,4.5vw,64px);
  display:grid; grid-template-columns:repeat(2,1fr); gap:26px}
.orbit-bilder figure{margin:0}
.orbit-bilder img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
  border-radius:14px; filter:grayscale(1)}
.orbit-bilder figcaption{margin-top:10px; color:#8a8a86}
@media(max-width:760px){.orbit-bilder{grid-template-columns:1fr; padding:0 20px}}
/* Das Stadtnetz liegt leise hinter dem Titel, wie der Blick auf die Erde bei Nacht */
.orbit-kopf{position:relative; overflow:hidden}
.orbit-kopf > *{position:relative; z-index:1}
.orbit-kopf #orbit-netz{position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  opacity:.42; pointer-events:none}
.orbit-icon{margin-bottom:14px}
.orbit-icon svg{width:32px; height:32px; display:block; fill:none;
  stroke:rgba(255,255,255,.85); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round}

/* Die erste Staffel als Programmliste: jede Folge eine volle Zeile */
.orbit-folgen{display:flex; flex-direction:column; margin-top:8px}
.orbit-folge{display:grid; grid-template-columns:72px 1fr; gap:10px 26px;
  align-items:start; padding:30px 0;
  border-top:1px solid rgba(255,255,255,.18)}
.orbit-folge .orbit-icon{margin:4px 0 0}
.orbit-folge .gk-punkt-kopf{margin-top:0}
.orbit-folge .gk-punkt-text{max-width:68ch}
@media(max-width:700px){
  .orbit-folge{grid-template-columns:48px 1fr; gap:8px 16px; padding:24px 0}
  .orbit-icon svg{width:26px; height:26px}}
/* Vier Rubriken in einer ruhigen Viererreihe */
.orbit-rubriken .gk-punkte{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.orbit-rubriken .gk-punkte{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.orbit-rubriken .gk-punkte{grid-template-columns:1fr}}
/* Benachrichtigung zur Sendung: ein ruhiger Abschluss vor dem Fuss */
.orbit-melden{max-width:1280px; margin:0 auto; padding:26px 32px 84px;
  display:flex; flex-direction:column; align-items:flex-start; gap:16px}
.orbit-melden .gk-statement-zusatz{margin:0}
.orbit-melden-zeile{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.orbit-eingabe{background:transparent; border:0;
  border-bottom:1px solid rgba(255,255,255,.35); border-radius:0;
  color:#f2f2ef; font-size:18px; padding:10px 2px; width:min(320px,100%);
  outline:none; transition:border-color .25s ease}
.orbit-eingabe::placeholder{color:rgba(255,255,255,.4);
  font-family:var(--mono); font-size:12px; letter-spacing:.10em;
  text-transform:uppercase}
.orbit-eingabe:focus{border-bottom-color:#fff}
.orbit-eingabe.fehlt{border-bottom-color:#fff; animation:orbitFehlt .5s ease}
@keyframes orbitFehlt{0%,100%{transform:translateX(0)}30%{transform:translateX(-4px)}60%{transform:translateX(4px)}}

/* ON AIR: der Claim mit blinkendem Sendepunkt */
.orbit-claim{display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:12px; letter-spacing:.10em;
  text-transform:uppercase; color:#f2f2ef; margin:26px 0 0}
.orbit-onair{width:10px; height:10px; border-radius:50%; background:#E4372F;
  box-shadow:0 0 0 0 rgba(228,55,47,.55); flex-shrink:0;
  animation:orbitOnair 1.6s ease-out infinite}
@keyframes orbitOnair{
  0%{box-shadow:0 0 0 0 rgba(228,55,47,.55); opacity:1}
  60%{opacity:.55}
  100%{box-shadow:0 0 0 12px rgba(228,55,47,0); opacity:1}}

/* Newsletter: gross, einladend, mit pulsierendem Knopf */
.orbit-melden{gap:22px; padding-top:54px}
.orbit-melden-titel{font-size:clamp(28px,3.6vw,52px); font-weight:300;
  line-height:1.15; letter-spacing:-.025em; color:#f2f2ef;
  max-width:22ch; margin:0}
.orbit-melden .orbit-eingabe{font-size:clamp(19px,2vw,24px);
  width:min(300px,100%); padding:14px 2px}
.orbit-melden .knopf.hell{padding:10px 26px; font-size:13px;
  animation:orbitLocken 2.4s ease-out infinite}
.orbit-melden .knopf.hell:hover{animation:none}
@keyframes orbitLocken{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.30)}
  100%{box-shadow:0 0 0 16px rgba(255,255,255,0)}}
@media (prefers-reduced-motion: reduce){
  .orbit-onair, .orbit-melden .knopf.hell{animation:none}}

/* Logo-Kacheln ohne Weichzeichner einfliegen lassen: der animierte
   Blur hinterlaesst auf dunklem Grund sonst helle Schleier. */
.gk-urheber .fliessen, .wv-wand .fliessen{filter:none}
.orbit-hero-melden{display:inline-flex; margin-top:30px;
  animation:orbitLocken 2.4s ease-out infinite}
.orbit-hero-melden:hover{animation:none}

/* Folgen-Video: Platzhalter im Player-Look, bis die Sendungen online sind */
.orbit-folge{grid-template-columns:72px 1fr auto}
.orbit-video{display:flex; flex-direction:column; gap:9px; width:210px}
.orbit-video-flaeche{aspect-ratio:16/9; border-radius:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center}
.orbit-play{width:46px; height:46px; border-radius:50%; position:relative;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.45)}
.orbit-play::after{content:''; position:absolute; left:17px; top:13px;
  border-left:14px solid rgba(255,255,255,.85);
  border-top:9px solid transparent; border-bottom:9px solid transparent}
.orbit-video-status{display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.10em;
  text-transform:uppercase; color:#9a9a9a}
.orbit-onair.klein{width:7px; height:7px}
@media(max-width:900px){
  .orbit-folge{grid-template-columns:48px 1fr}
  .orbit-video{grid-column:2; width:min(240px,100%); margin-top:6px}}


/* Der Platzhalter reagiert wie ein echter Player: aufhellen, Play fuellt sich */
.orbit-video-flaeche{cursor:pointer;
  transition:background .3s ease, border-color .3s ease, transform .35s cubic-bezier(.2,.8,.2,1)}
.orbit-video-flaeche:hover{background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.4); transform:translateY(-3px)}
.orbit-play{transition:transform .3s ease, background .3s ease, border-color .3s ease}
.orbit-video-flaeche:hover .orbit-play{transform:scale(1.14); background:#fff; border-color:#fff}
.orbit-play::after{transition:border-left-color .3s ease}
.orbit-video-flaeche:hover .orbit-play::after{border-left-color:#070A1E}

/* Folgen im Medien-Reiter: bereitgestellt, aber noch ohne Klickziel */
.folge-kachel{cursor:default}
.folge-bild{display:flex; align-items:center; justify-content:center;
  background:#070A1E !important}
.folge-bild .orbit-play{width:40px; height:40px}
.folge-bild .orbit-play::after{left:15px; top:11px;
  border-left:12px solid rgba(255,255,255,.85);
  border-top:8px solid transparent; border-bottom:8px solid transparent}
.folge-status{display:inline-flex; align-items:center; gap:7px}
.folge-kachel:hover{opacity:1}


/* Weltkarte: Zoom in die Region Berlin & Brandenburg */
.wk-halter{position:relative}
.wk-ebene{opacity:0; pointer-events:none;
  transition:transform .9s cubic-bezier(.3,0,.2,1), opacity .7s ease}
.wk-ebene.wk-da{opacity:1; pointer-events:auto; transition-delay:0s, .35s}
.wk-ebene.wk-hinaus{transform:scale(6); opacity:0; pointer-events:none;
  transition-delay:0s, 0s}
.wk-detail-kopf{font-size:26px; letter-spacing:-.02em}
.wk-zurueck{position:absolute; top:22px; right:22px; z-index:2;
  opacity:0; pointer-events:none; transition:opacity .4s ease .5s}
.wk-gezoomt .wk-zurueck{opacity:1; pointer-events:auto}
.wk-flaeche{fill:rgba(255,255,255,.05); stroke:rgba(255,255,255,.38);
  stroke-width:1.3; stroke-linejoin:round}
.wk-grenzen{fill:none; stroke:rgba(255,255,255,.10); stroke-width:.7}
.wk-fluss{fill:none; stroke:rgba(132,168,255,.42); stroke-width:1.1;
  stroke-linecap:round; stroke-linejoin:round}
.wk-wasser{fill:rgba(132,168,255,.22); stroke:rgba(132,168,255,.3);
  stroke-width:.4}
.wk-marke{fill:rgba(255,255,255,.10); stroke:rgba(255,255,255,.3);
  stroke-width:.7}
.wk-goldkreis{fill:rgba(201,162,39,.04); stroke:rgba(201,162,39,.8);
  stroke-width:1.6; stroke-dasharray:7 7}
.wk-uebrig{position:absolute; right:22px; top:50%; z-index:5;
  transform:translateY(-50%); opacity:0; pointer-events:none;
  transition:opacity .6s ease .45s;
  background:rgba(13,17,48,.97); border:1px solid rgba(255,255,255,.16);
  border-radius:14px; padding:8px 0 10px; min-width:250px; max-width:330px;
  max-height:320px; overflow-y:auto; box-shadow:0 18px 50px rgba(0,0,0,.5)}
.wk-uebrig.wk-da{opacity:1; pointer-events:auto}
.wk-liste-kopf{padding:8px 18px 10px; font-family:"BB Manual Mono",monospace;
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.55); border-bottom:1px solid rgba(255,255,255,.1);
  margin-bottom:6px}
.wk-uebrig a{display:block; padding:7px 18px; color:#fff;
  text-decoration:none; font-size:14.5px; line-height:1.35}
.wk-uebrig a:hover{color:#E3C25A; background:rgba(255,255,255,.05)}
@media (max-width: 700px){
  .wk-uebrig{left:12px; right:12px; top:auto; bottom:12px; transform:none;
    min-width:0; max-width:none; max-height:190px}
}
.orbit-bilder video{width:100%; aspect-ratio:16/9; object-fit:cover;
  display:block; border-radius:14px}
.karte-kopf{padding:118px 32px 22px}
.karte-kopf .gk-marke{margin-bottom:14px}
.karte-kopf .gk-titel{font-size:clamp(32px,4.2vw,60px); letter-spacing:-.03em}
.karte-buehne{max-width:1560px; margin:0 auto; padding:8px 32px 70px}
.karte .wk-puls{stroke:rgba(242,242,240,.45)}
.karte .wk-zahl{fill:rgba(255,255,255,.62)}
@media(max-width:760px){.karte-buehne{padding:14px 12px 60px}}

.sprache-reihe{display:flex; flex-wrap:wrap; gap:8px}
.sprache-reihe .sprache-eintrag{border:1px solid rgba(0,0,0,.12); border-radius:999px;
  padding:9px 14px; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; background:rgba(255,255,255,.7); color:var(--tinte);
  cursor:pointer}
.sprache-reihe .sprache-aktiv{color:#fff; background:#26251f}
.wk-rolle{overflow-x:auto; -webkit-overflow-scrolling:touch}
@media(max-width:760px){
  .kopfzeile .sprach-klapp{display:none}
  .kopfzeile .navi .knopf{padding:9px 11px; font-size:10.5px}
  .wk-rolle .wk-svg{min-width:1080px}
  #welt-karte{padding:12px 10px}
  .wk-zurueck{top:12px; right:12px}
  .karte-buehne{padding:10px 10px 56px}
}
@media(max-width:480px){
  .kopfzeile .navi > a.knopf{display:none}
}
@media(max-width:760px){.karte-kopf{padding:96px 18px 12px}}
/* Menue-Fuss: klein und leise; .fuss-marke gehoert sonst dem Footer-Logo */
.menue-fuss{padding:14px 18px 20px; gap:14px}
.menue-fuss .fuss-marke{font-family:var(--mono); font-size:10.5px; font-weight:400;
  letter-spacing:.10em; text-transform:uppercase; color:#8a8a86}
.menue-fuss .fuss-weg{font-size:11.5px}
.sprache-reihe .sprache-eintrag{padding:7px 11px; font-size:10.5px}
/* Das Menue-Overlay ist immer hell; Schrift und Logo darin immer dunkel,
   auch wenn es von einer dunklen Seite aus geoeffnet wird. */
.menueschicht{background:rgba(255,255,255,.8); color:var(--tinte)}
.menueschicht .menue-punkte a{color:var(--tinte)}
.menueschicht .menue-marke, .menueschicht .fuss-marke{color:#8a8a86}
.menueschicht .knopf{color:var(--tinte); border-color:rgba(0,0,0,.18);
  background:rgba(255,255,255,.7)}
.menueschicht .marke img{content:url("/bilder/marke/swa-wort-gold-gross.png")}
.menueschicht .fuss-weg{color:var(--tinte)}
@media(max-width:760px){
  .menue-punkte a{font-size:22px; padding:4px 0}
  .menue-liste{gap:28px; padding:24px 20px}
  .menue-fuss{padding:12px 18px 16px; gap:10px}
  .menue-fuss .fuss-block{gap:5px}
}
.bild-oben{object-position:50% 0}

/* Das Laenderband sitzt direkt unter dem Team-Satz, als eine Einheit */
.laender-band{margin-top:0; padding-top:14px; padding-bottom:30px}
.laender-band .ko-name{font-weight:500; color:var(--tinte)}
/* Kurzer Einwilligungs-Hinweis vor der Google-Uebersetzung */
.uebersetzung-frage{position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  z-index:340; background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:14px;
  padding:16px 18px 14px; width:min(92vw,470px);
  box-shadow:0 18px 50px rgba(0,0,0,.18); color:var(--tinte)}
.uebersetzung-frage p{font-size:14px; line-height:1.55; margin:0 0 12px}
.uf-knoepfe{display:flex; gap:10px; flex-wrap:wrap}
.uf-knoepfe .uf-ja{background:#141414; color:#fff; border-color:transparent}
/* Zwischenueberschriften auf den Rechtsseiten */
.zwischen-kopf{font-size:20px; font-weight:500; letter-spacing:-.01em;
  margin:36px 0 12px; color:var(--tinte)}
.lauftext .zwischen-kopf:first-child{margin-top:0}

/* Teambild: auf schmalen Screens Fokus nach rechts (S. Wagner steht rechts) */
@media (max-width:760px){
  .beitrag-bild.fokus-rechts{object-position:76% 30%; max-height:none; aspect-ratio:16/10; height:auto}
}

/* Quellenzeile unter der Projektkarte */
.karten-quelle{margin-top:16px; font-size:12px; opacity:.55}
.karten-quelle a{color:inherit; text-decoration:underline}