/* ============================================================
   Module Overview — VZ1
   Setzt die Basic Layout Templates in die Formensprache der
   Startseite um. Raster aus den Figma-Tokens:
     Inhaltsbreite   1372 in 1500
     Aussenrand      64  (mobil 24)
     Stacking-Gap    80  (mobil 40)
     Zweispalter     530 / 670, auseinandergezogen
   Alle Masse in --px, also Figma-Pixel, wie auf der Startseite.
   ============================================================ */

/* Raster der STARTSEITE, nicht das der Figma-Templates:
     Panel-Aussenrand   8
     Innenabstand       70 (News-Modul 120)
     Stacking-Gap       90 zwischen Panels, 130 innen
     Zweispalter        774 / 546 = 7 und 5 Spalten
     Panel-Radius       100
   Die Figma-Werte (64 / 80 / 1372 / 530 / 670) sind damit ersetzt. */
.frame{
  --m-aussen:calc(70 * var(--px));
  --m-rand:calc(8 * var(--px));
  /* Innenabstand der Module; der Abstand ZWISCHEN Modulen kommt aus
     --m-top (Styleguide: nur oben, nie unten). */
  --m-stack:var(--m-innen);
  --m-gap:var(--m-top);
  --m-radius:calc(100 * var(--px));
  /* Zweispalter aufs 12er-Raster: 7 und 5 Spalten, wie auf der
     Startseite. Vorher 5/6 – dadurch hatten Kopf und Karten eines
     Moduls zwei verschiedene Raster. */
  --m-links:calc(774 * var(--px));
  --m-rechts:calc(546 * var(--px));
}

/* ---- Seitenkopf ---- */
.mod-intro{
  padding:calc(120 * var(--px)) calc(78 * var(--px)) calc(120 * var(--px));
}
.mod-titel{font-size:calc(86 * var(--px)); line-height:calc(94 * var(--px)); color:var(--ink)}
.mod-sub{
  margin-top:calc(26 * var(--px)); max-width:calc(720 * var(--px));
  font-size:calc(19 * var(--px)); line-height:calc(31 * var(--px)); font-weight:500; opacity:.75;
}
.mod-nav{display:flex; flex-wrap:wrap; gap:calc(10 * var(--px)); margin-top:calc(40 * var(--px))}
.mod-nav a{
  background:var(--white); border-radius:999px;
  padding:calc(9 * var(--px)) calc(20 * var(--px));
  font-size:calc(15 * var(--px)); font-weight:700;
  transition:transform .3s cubic-bezier(.34,1.6,.5,1), background .2s, color .2s;
}
.mod-nav a:hover{transform:translateY(calc(-2 * var(--px))); background:var(--ink); color:#fff}

/* ---- Modulrahmen ---- */
/* Ein Abstand oben pro Modul, keiner unten (Styleguide 3752:148). */
.mod{
  position:relative; overflow:hidden;
  margin:var(--m-top) var(--m-rand) 0;
  padding:var(--m-innen) var(--m-aussen);
  border-radius:var(--m-radius);
}

/* Module ohne eigene Flaeche laufen wie das News-Modul der Startseite
   randlos auf Bone – dort ist der Innenabstand 120 statt 70. */
.mod:not([class*="mod-"]){
  margin-left:0; margin-right:0; border-radius:0;
  /* 78 = 8 Panel-Rand + 70 Innenabstand: damit stehen die Texte der
     randlosen Module auf derselben Linie wie die der Panels. */
  padding-left:calc(78 * var(--px)); padding-right:calc(78 * var(--px));
}
/* Home-Module: kein Rahmen, kein Innenabstand – der eingebettete Ausschnitt
   soll exakt so breit sein wie auf der Startseite. */
.mod.mod-home{
  margin:var(--m-top) 0 0; padding:0; border-radius:0;
}
/* Kopfmodule folgen dem Hero der Startseite: randlos, unter dem Header
   durchlaufend, nur unten gerundet (112) — kein schwebendes Panel. */
.mod-apricot{
  background:var(--apricot);
  margin:calc(-100 * var(--px)) 0 0;
  padding-left:calc(78 * var(--px)); padding-right:calc(78 * var(--px));
  border-radius:0 0 calc(112 * var(--px)) calc(112 * var(--px));
}
.mod-apricot .m-h1{color:var(--ink)}
/* Auf der Modaluebersicht liegt eine Intro-Sektion darueber – dort kein
   negativer Rand und volle Rundung. */
/* Auf der Uebersicht liegt die Intro darueber, also kein negativer Rand –
   aber oben trotzdem gerade, wie auf allen anderen Seiten. */
/* Auf der Uebersicht stehen die Module alphabetisch, das Kopfmodul also
   mitten in der Liste. Dort ist es ein Panel mit voller Rundung – die
   gerade Oberkante ergibt nur Sinn, wenn es an den Seitenkopf stoesst. */
.mod-intro ~ .mod-apricot{
  margin:var(--m-top) var(--m-rand) 0;
  border-radius:var(--m-radius);
  padding-left:var(--m-aussen); padding-right:var(--m-aussen);
}
.mod-intro ~ #header-article.mod-voll{
  margin:var(--m-top) var(--m-rand) 0;
  border-radius:var(--m-radius);
  padding-left:var(--m-aussen); padding-right:var(--m-aussen);
}
/* Ebenso der Footer: mitten in der Liste ein Panel, nicht angeschnitten. */
.mod-intro ~ .mod-footer{
  margin:var(--m-top) var(--m-rand) 0;
  border-radius:var(--m-radius);
  padding-left:var(--m-aussen); padding-right:var(--m-aussen);
}
.mod-intro ~ #header-article.mod-voll{margin-top:var(--m-top)}
/* Auf Desktop fuellt das Kopfmodul einen Viewport, mobil nicht: dort
   waeren 844 px Hoehe fuer Titel, Lead, Button und Bild zu viel – der
   Titel sass 134 px unter der Modulkante. */
@media(min-width:1000px){
  .mod-intro ~ .mod-apricot.mod-voll{height:100svh; padding-top:var(--m-innen)}
}
.mod-weiss{background:var(--white)}
/* Jede Teaser-Variante bekommt eine eigene weisse Flaeche */
/* Wie CTA.Default: die Flaeche laeuft bis an den Panelrand (8), das Modul
   selbst hat dafuer keinen eigenen Innenabstand. */
.m-teaser{
  background:var(--white); border-radius:var(--m-radius);
  margin:0 calc(-70 * var(--px));
  padding:var(--m-stack) var(--m-aussen);
}

.m-teaser + .m-variant{margin-top:calc(40 * var(--px))}
#teaser-default{padding-left:calc(78 * var(--px)); padding-right:calc(78 * var(--px))}
.mod-cta{
  background:var(--blue-deep); color:#fff;
  padding:var(--m-innen) var(--m-aussen);
}
.mod-cta .cta-head{display:grid; row-gap:calc(40 * var(--px)); column-gap:var(--grid-gap); align-items:start}
@media(min-width:1000px){
  .mod-cta .cta-head{grid-template-columns:var(--m-links) var(--m-rechts)}
}
/* Gegenstueck zum Kopfmodul: randlos, oben gerundet, unten gerade.
   Der Header ist unten gerundet und oben gerade – der Footer spiegelt das. */
.mod-footer{
  background:var(--ink); color:#fff;
  margin-left:0; margin-right:0;
  padding:var(--m-innen) calc(78 * var(--px));
  border-radius:calc(112 * var(--px)) calc(112 * var(--px)) 0 0;
}

/* Modulname am rechten Rand, wie im Figma-Template */
.mod-label{
  /* Bei transform-origin:100% 0 dreht das Schild um die eigene rechte
     obere Ecke – es landet dadurch rechts NEBEN dem Modul und wird von
     dessen overflow:hidden abgeschnitten. Mit origin 100% 100% dreht es
     nach oben ins Modul hinein. */
  position:absolute; right:0; top:calc(56 * var(--px));
  transform:rotate(-90deg); transform-origin:100% 100%;
  background:var(--ink); color:#fff;
  padding:calc(8 * var(--px)) calc(16 * var(--px));
  font-size:calc(12 * var(--px)); font-weight:700; white-space:nowrap;
  letter-spacing:.02em;
}
.mod-footer .mod-label{background:var(--apricot); color:var(--ink)}
.mod-home .mod-label{z-index:5}
/* Der Panel-Schalter „Modulnamen" blendet auch die Schilder der
   Uebersicht aus – vorher galt er nur fuer die Startseite. */
html[data-dev="aus"] .mod-label{display:none}

/* Kein `margin:0 auto` – der Grid-Zweispalter ist schmaler als der
   Innenraum, dadurch wuerde er sich zentrieren und die Texte laegen
   nicht mehr auf der Rasterlinie (gemessen: 76 px Versatz). */
.m-inner{margin:0; width:100%}

/* Header-Module fuellen wie auf der Startseite den ersten Viewport */
/* Genau ein Viewport hoch, wie der Hero der Startseite. Die Bildhoehe
   richtet sich danach, sonst waechst das Modul darueber hinaus. */
/* Header.Text-Media genau ein Viewport; Header.Article darf wachsen,
   weil dort Titel, Lead und Bild untereinander stehen. */
.mod-voll{height:100svh; display:flex; flex-direction:column; justify-content:center}
.mod-apricot.mod-voll{height:calc(100svh + 100 * var(--px)); padding-top:calc(100 * var(--px))}
#header-article.mod-voll,
.mod-artikelkopf.mod-voll{
  height:auto; min-height:100svh;
  margin:calc(-100 * var(--px)) 0 0;
  padding:calc(160 * var(--px)) calc(78 * var(--px)) var(--m-innen);
  border-radius:0;
}
#header-article .m-bild-voll{max-height:none}
.mod-buehne-voll{height:100svh}

/* ---- Zweispalter 530 / 670 ---- */
/* Zeilenabstand 40 fuer den mobilen Umbruch, Spaltenabstand aus dem
   Raster. Frueher galt die 40 auch quer und kam zum `space-between`
   hinzu – die rechte Spalte lag dadurch neben der Rasterlinie. */
.m-split{display:grid; row-gap:calc(40 * var(--px)); column-gap:var(--grid-gap); align-items:center}
@media(min-width:1000px){
  .m-split{grid-template-columns:var(--m-links) var(--m-rechts)}
  /* Content.Text teilt anders als die uebrigen Zweispalter: Titel 5
     Spalten (546), Text 6 (660), dazwischen Spalte 6 als Trennung
     (138 = 90 + 2x24). Vorher 7/5 – der Text hatte nur 59 Zeichen pro
     Zeile, jetzt rund 71. */
  .m-split-text{
    grid-template-columns:calc(546 * var(--px)) calc(660 * var(--px));
    column-gap:calc(138 * var(--px));
    align-items:start;
  }
  .m-split-team{align-items:start}
  .m-split-dreh{grid-template-columns:var(--m-rechts) var(--m-links)}

  /* Der Text steht in der 7-Spalten-Spur, laeuft aber nur ueber 6 –
     sonst bleiben nur 19 px Luft zum Bild und die Zeilen werden zu lang.
     Die freie Spalte liegt zum Bild hin. */
  .m-col-text{max-width:calc(660 * var(--px))}
  .m-split-dreh .m-col-text{justify-self:end}
  /* Der Titel fuellt seine 5 Spalten – keine zusaetzliche Begrenzung
     noetig, die Trennspalte liegt bereits im Raster. */
}

/* ---- Typografie der Module ---- */
.m-h1{font-size:calc(86 * var(--px)); line-height:calc(92 * var(--px)); color:var(--ink)}
.m-h1-breit{max-width:calc(1116 * var(--px))}   /* 10 Spalten */
.m-h2{font-size:calc(60 * var(--px)); line-height:calc(66 * var(--px)); color:var(--ink)}
.m-lead{
  margin-top:calc(26 * var(--px));
  font-size:calc(20 * var(--px)); line-height:calc(32 * var(--px)); font-weight:500;
}
.m-lead-breit{max-width:calc(774 * var(--px))}   /* 7 Spalten */
/* Textstufen nach dem Figma-Beispiel (Node 6504:2768).
   Groessen 1:1 uebernommen, Schrift und Farben aus dem VZ1-System. */
.m-fliess p{font-size:calc(18 * var(--px)); line-height:calc(32 * var(--px)); font-weight:500}
.m-lead-text{font-size:calc(20 * var(--px)) !important; line-height:calc(32 * var(--px)) !important}
.m-h3{margin-top:calc(48 * var(--px)); font-size:calc(32 * var(--px)); line-height:calc(40 * var(--px)); color:var(--ink)}
.m-h4{margin-top:calc(40 * var(--px)); font-size:calc(26 * var(--px)); line-height:calc(34 * var(--px)); color:var(--ink)}
.m-h5{margin-top:calc(36 * var(--px)); font-size:calc(22 * var(--px)); line-height:calc(32 * var(--px)); color:var(--ink)}
.m-h3 + p,.m-h4 + p,.m-h5 + p{margin-top:calc(20 * var(--px))}
.m-liste{list-style:none; margin:calc(22 * var(--px)) 0 0; padding:0; display:grid; gap:calc(16 * var(--px))}
.m-liste li{display:flex; gap:calc(12 * var(--px)); font-size:calc(18 * var(--px)); line-height:calc(32 * var(--px)); font-weight:500}
.m-lnum{flex:0 0 calc(26 * var(--px)); font-weight:700; opacity:.55}
/* Ungeordnete Liste: Punkt in der Bogenform des Logo-Vokabulars statt
   eines Standard-Bullets. */
.m-bullets{list-style:none; margin:calc(22 * var(--px)) 0 0; padding:0; display:grid; gap:calc(16 * var(--px))}
.m-bullets li{
  position:relative; padding-left:calc(30 * var(--px));
  font-size:calc(18 * var(--px)); line-height:calc(32 * var(--px)); font-weight:500;
}
.m-bullets li::before{
  /* Zeilenhoehe 32, Punkt 10 → Oberkante bei (32-10)/2 = 11.
     Ein Pixel hoeher, weil die Versalhoehe optisch ueber der Zeilenmitte
     liegt und der Punkt sonst zu tief wirkt. */
  content:""; position:absolute; left:calc(6 * var(--px)); top:calc(10 * var(--px));
  width:calc(10 * var(--px)); height:calc(10 * var(--px));
  background:var(--ink); border-radius:50%;
}
.m-link{
  color:var(--blue-deep); font-weight:700;
  text-decoration:underline; text-decoration-thickness:calc(2 * var(--px));
  text-underline-offset:.22em; transition:color .2s;
}
.m-link:hover{color:var(--logo-coral)}
.m-link-eigen{
  display:inline-flex; align-items:center; gap:calc(10 * var(--px));
  text-decoration:none; font-size:calc(19 * var(--px));
}
.m-link-eigen:hover{transform:none}

/* Kleines Kennzeichen der Stufe – nur in der Modaluebersicht */
.m-stufe{
  display:inline-block; vertical-align:middle; margin-left:calc(12 * var(--px));
  background:var(--ink); color:#fff; border-radius:999px;
  padding:calc(3 * var(--px)) calc(10 * var(--px));
  font-family:var(--font-body); font-size:calc(12 * var(--px)); font-weight:700;
  letter-spacing:0; opacity:.55;
}
.m-fliess p + p{margin-top:calc(22 * var(--px))}
.m-btn{
  display:inline-flex; align-items:center; gap:calc(12 * var(--px));
  margin-top:calc(32 * var(--px)); background:var(--ink); color:#fff;
  border-radius:999px; padding:calc(17 * var(--px)) calc(32 * var(--px));
  font-size:calc(17 * var(--px)); font-weight:700;
  transition:transform .3s cubic-bezier(.34,1.6,.5,1);
}
.m-btn:hover{transform:translateY(calc(-3 * var(--px))) scale(1.03)}
/* Kein Sonderfall auf Apricot mehr: der Button ist ueberall ink-gefuellt,
   nur auf farbiger Flaeche invertiert er. Vorher stand hier blue-deep,
   waehrend der Header-Button blue nutzt – zwei Blaus fuer dieselbe
   Aufgabe. Blau bleibt dem Header-CTA als einzigem Akzent vorbehalten. */

.m-meta{display:flex; align-items:center; gap:calc(16 * var(--px)); margin-bottom:calc(26 * var(--px))}
.m-tag{
  background:var(--ink); color:#fff; border-radius:999px;
  padding:calc(6 * var(--px)) calc(16 * var(--px));
  font-size:calc(14 * var(--px)); font-weight:700;
}
.m-meta time{font-size:calc(16 * var(--px)); font-weight:600; opacity:.7}

/* ---- Platzhalterflaechen: Bogen aus dem Logo-Vokabular ---- */
/* Gleichmaessig gerundet wie die Karten (48). Die Bogenform mit 60 oben
   und 20 unten wirkte auf querformatigen Bildern schief und war das
   einzige Element mit ungleichen Ecken. Der Bogen bleibt dem
   Formenfeld und den Logo-Formen vorbehalten. */
.ph{
  display:block; width:100%; height:100%; object-fit:cover;
  background:var(--sand);
  border-radius:calc(48 * var(--px));
}
.m-col-bild{aspect-ratio:1/1}
.m-bild-gross{aspect-ratio:670/837; max-height:calc(100svh - 2 * var(--m-stack))}
/* Bild schliesst rechts auf der Innenkante ab, also mit demselben
   Abstand zum Panelrand wie der Text links. */
.m-bild-rechts{justify-self:end; width:100%}
/* Die Hoehenbegrenzung liess das Bild schmaler werden als seine Spalte
   (990 statt 1638). Stattdessen den Ausschnitt beschneiden – Breite
   bleibt volle Inhaltsbreite. */
.mod-voll .m-bild-voll{max-height:38svh; width:100%; overflow:hidden}
.mod-voll .m-bild-voll .ph{height:100%; object-fit:cover}
.m-bild-voll{margin-top:calc(56 * var(--px)); aspect-ratio:16/7}

/* ---- Content.Media-Assets ---- */

/* Nur mobil zeigen: dort fallen die beiden Varianten zusammen. */
/* Nur noch im Teaser-Modul: dort steht der Variantenname als Titel ueber
   der Flaeche. Bei den Bildern ist er in die Legende gewandert. */
.m-variant{
  margin:calc(56 * var(--px)) 0 calc(18 * var(--px));
  font-size:calc(14 * var(--px)); font-weight:700; opacity:.5;
  text-transform:uppercase; letter-spacing:.08em;
}
.m-variant-hinweis{display:none; text-transform:none; letter-spacing:0; font-weight:500}
@media (max-width:999px){ .m-variant-hinweis{display:inline} }
.m-variant-inner{margin-left:0; margin-right:0}
.m-media{margin:0}
/* Gleicher Abstand zwischen allen Varianten – `.m-media-voll` traegt
   negative Raender, `.m-media-paar` ist ein Grid: ohne diese Regeln
   ergaben sich 73 / 123 / 25 statt eines einheitlichen Werts. */
.m-inner > .m-media + .m-media,
.m-inner > .m-media + .m-media-paar,
.m-inner > .m-media-paar + .m-media{margin-top:calc(64 * var(--px))}
.m-inner > .m-media-voll + *{margin-top:calc(64 * var(--px))}
/* `height:auto` noetig: die Grundregel `.ph` setzt `height:100%`, das
   ueberschreibt das Seitenverhaeltnis – die Paar-Bilder standen dadurch
   auf 1.46 statt 1.78. */
.m-media .ph{aspect-ratio:16/9; height:auto}
.m-media figcaption{
  margin-top:calc(16 * var(--px));
  font-size:calc(15 * var(--px)); line-height:1.6; font-weight:500; opacity:.65;
}
.m-media-text{max-width:var(--m-rechts)}
/* Text-Width heisst: auf der Breite der Textspalte, also rechts */
.m-media-rechts{margin-left:auto}
/* Full-Width heisst randlos: das Bild laeuft bis an die Viewportkante,
   nicht nur bis an den Modulinnenrand. */
/* Randlos ueber die volle Viewportbreite. Bewusst OHNE `translate`:
   das Scroll-Reveal animiert genau diese Eigenschaft und wuerde die
   Zentrierung ueberschreiben (gemessen: Bild um 173 px verschoben).
   Der Ausbruch laeuft deshalb ueber negative Raender – das Modul hat
   78 Innenabstand plus 0 Aussenrand. */
.m-media-voll{
  /* `width:auto` allein reicht nicht: die Figur ist ein Block im Fluss,
     die negativen Raender verschieben sie zwar, die Breite bleibt aber
     die des Containers. Deshalb die Breite explizit um beide
     Innenabstaende erhoehen. */
  width:calc(100% + 156 * var(--px));
  margin-left:calc(-78 * var(--px));
  margin-right:calc(-78 * var(--px));
}
.m-media-voll .ph{border-radius:0}
/* Nicht mitskalieren: bei einem Element, das breiter ist als der Viewport,
   erzeugt `scale:.97` einen sichtbaren Rand links und rechts. Das
   Full-Width-Bild blendet deshalb nur ein und schiebt sich hoch. */
.m-media-voll[data-reveal]{scale:1}
/* Legende zurueck auf die Textlinie: derselbe Innenabstand wie das Modul,
   nicht ein fester Wert – sonst laeuft sie bei grossen Viewports weg. */
.m-media-voll figcaption{padding-left:calc(78 * var(--px)); padding-right:calc(78 * var(--px))}
.m-media-paar{display:grid; gap:var(--grid-gap); grid-template-columns:1fr 1fr}

/* ---- Content.Video-Player ---- */
.m-video{position:relative; aspect-ratio:16/9}
.m-video .ph{filter:brightness(.82)}
.m-play{
  /* Zentrierung ueber `translate`, Hover ueber `transform` – beide sind
     eigenstaendige Eigenschaften und addieren sich. Frueher stand die
     Zentrierung zusaetzlich im Hover-`transform`, dadurch sprang der Knopf
     beim Ueberfahren um seine halbe Breite. */
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:calc(96 * var(--px)); height:calc(96 * var(--px)); border-radius:50%;
  border:0; cursor:pointer; background:var(--white); color:var(--ink);
  font-size:calc(28 * var(--px)); display:grid; place-items:center; padding-left:calc(6 * var(--px));
  transition:transform .3s cubic-bezier(.34,1.6,.5,1);
}
/* Gleiche Geste wie .m-btn: anheben und leicht wachsen. Der Knopf ist
   per translate zentriert, deshalb steht die Zentrierung in der Kurve mit. */
.m-play:hover{transform:translateY(calc(-3 * var(--px))) scale(1.03)}
.m-bildtext{
  margin-top:calc(18 * var(--px));
  font-size:calc(15 * var(--px)); font-weight:500; opacity:.65;
}

/* ---- Content.Team ---- */
.m-team{display:grid; grid-template-columns:repeat(4,1fr); gap:calc(40 * var(--px)) var(--grid-gap)}
.m-person{margin:0}
.m-person img{
  width:100%; aspect-ratio:319/399; object-fit:cover;
  border-radius:calc(150 * var(--px)) calc(150 * var(--px)) calc(20 * var(--px)) calc(20 * var(--px));
}
/* Runde Portraets, gerade ausgerichtet */
.m-person img{aspect-ratio:1/1; border-radius:50%;
  transition:transform .45s cubic-bezier(.34,1.5,.5,1)}
.m-person:hover img{transform:translateY(calc(-8 * var(--px)))}
.m-person figcaption{text-align:center; align-items:center}
.m-person figcaption{display:flex; flex-direction:column; gap:calc(4 * var(--px)); margin-top:calc(22 * var(--px))}

.m-name{font-family:var(--font-head); font-weight:var(--w-display); font-size:calc(22 * var(--px)); letter-spacing:var(--track)}
.m-rolle{font-size:calc(17 * var(--px)); font-weight:600; opacity:.75}
/* Als Link erkennbar: blau wie die uebrigen Verweise, Unterstrich beim
   Hover. Vorher stand die Adresse als abgeblendeter Text da und war
   weder klickbar noch als Link lesbar. */
.m-kontakt{
  font-size:calc(16 * var(--px)); color:var(--blue-deep);
  text-decoration:none; transition:text-decoration-color .2s;
  text-decoration-color:transparent;
}
.m-kontakt:hover{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}

/* ---- Teaser.Overview ---- */
.m-uebersicht{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--grid-gap); margin-top:calc(60 * var(--px))}
.m-ukachel{
  position:relative; display:flex; flex-direction:column;
  min-height:calc(230 * var(--px)); padding:calc(32 * var(--px));
  background:var(--white); border-radius:calc(40 * var(--px));
  transition:transform .4s cubic-bezier(.34,1.5,.5,1), box-shadow .4s;
}
.m-ukachel:hover{transform:translateY(calc(-8 * var(--px))); box-shadow:0 calc(20 * var(--px)) calc(44 * var(--px)) rgba(60,45,20,.14)}
.m-unum{font-family:var(--font-head); font-weight:var(--w-display); font-size:calc(20 * var(--px)); opacity:.4}
.m-ukachel h3{margin-top:auto; font-size:calc(30 * var(--px)); line-height:1.1}
.m-uarrow{
  position:absolute; right:calc(30 * var(--px)); bottom:calc(30 * var(--px));
  width:calc(40 * var(--px)); height:calc(40 * var(--px)); border-radius:50%;
  background:var(--ink); color:#fff; display:grid; place-items:center; font-size:calc(16 * var(--px));
  opacity:0; transition:opacity .3s ease;
}
.m-ukachel:hover .m-uarrow{opacity:1}
.m-uebersicht .m-ukachel:nth-child(3n+1){background:var(--apricot)}
.m-uebersicht .m-ukachel:nth-child(3n+2){background:var(--white)}
.m-uebersicht .m-ukachel:nth-child(3n+3){background:var(--sand)}

/* ============================================================ Auszeichnung
   Die Bauteile, die auf der Startseite fuer den Charakter sorgen —
   Marker, Sticker, Kippung — auf die Layoutmodule uebertragen.
   Vorher hatte styles.css 19 Kippungen und 7 Sticker, modules.css eine
   einzige Kippung und keinen Sticker.
   ============================================================ */

/* Kategorie-Sticker ueber der Kartenkante, wie im News-Modul */
.a-karte{overflow:visible}
.a-tag{
  position:absolute; top:calc(-15 * var(--px)); left:calc(30 * var(--px));
  align-self:auto; background:#fff;
  box-shadow:0 0 0 calc(4 * var(--px)) var(--bone), 0 calc(6 * var(--px)) calc(14 * var(--px)) rgba(40,30,10,.2);
  transition:transform .35s cubic-bezier(.34,1.6,.5,1);
}
.a-karte.c1 .a-tag{color:#00688F; transform:rotate(-6deg)}
.a-karte.c2 .a-tag{color:#A03D33; transform:rotate(4.5deg)}
.a-karte.c3 .a-tag{color:#8A5A0B; transform:rotate(-3.5deg)}
.a-karte:hover .a-tag{transform:rotate(0deg) scale(1.06)}
.a-karte time{margin-top:calc(34 * var(--px))}

/* Marker hinter einem Wort – dieselbe Flaeche wie auf der Startseite */
.m-h1 .mark,.m-h2 .mark{color:#fff}

/* Teambilder leicht gekippt, richten sich beim Hover auf */
.m-person:nth-child(odd) img{transform:rotate(-2.5deg)}
.m-person:nth-child(even) img{transform:rotate(2deg)}
.m-person:hover img{transform:rotate(0) translateY(calc(-8 * var(--px)))}

/* Teaser-Bild gekippt, wie die Karten der Startseite */
.m-teaser .m-col-bild{transition:transform .45s cubic-bezier(.34,1.5,.5,1)}
.m-teaser .m-split .m-col-bild{transform:rotate(1.6deg)}
.m-teaser .m-split-dreh .m-col-bild{transform:rotate(-1.8deg)}
.m-teaser:hover .m-col-bild{transform:rotate(0)}

/* Header-Bild ebenfalls leicht aus der Achse */
.m-bild-rechts{transform:rotate(-1.4deg); transition:transform .5s cubic-bezier(.34,1.5,.5,1)}
.m-bild-rechts:hover{transform:rotate(0)}

/* ---- Teaser.Article-Overview: Liste mit Filter ---- */
.a-filterreihe{display:flex; flex-wrap:wrap; gap:calc(12 * var(--px)); margin-bottom:calc(64 * var(--px))}
.a-filter{
  border:0; cursor:pointer; background:var(--white); color:var(--ink);
  border-radius:999px; padding:calc(11 * var(--px)) calc(24 * var(--px));
  font-family:var(--font-body); font-size:calc(16 * var(--px)); font-weight:700;
  transition:transform .3s cubic-bezier(.34,1.6,.5,1), background .2s, color .2s;
}
.a-filter:hover{transform:translateY(calc(-2 * var(--px)))}
.a-filter.is-on{background:var(--ink); color:#fff}
/* Zeilenabstand deutlich groesser als der Spaltenabstand: die Sticker
   ragen 15 px ueber die Kartenoberkante, bei gleichem Abstand kleben sie
   an der Karte darueber. */
.a-liste{
  display:grid; grid-template-columns:repeat(3,1fr);
  column-gap:var(--grid-gap); row-gap:calc(64 * var(--px));
}
.a-karte{
  position:relative; display:flex; flex-direction:column;
  min-height:calc(300 * var(--px)); padding:calc(34 * var(--px));
  border-radius:calc(44 * var(--px));
  transition:transform .4s cubic-bezier(.34,1.5,.5,1), box-shadow .4s, opacity .3s;
}
.a-karte.c1{background:var(--blue-deep); color:#fff}
.a-karte.c2{background:var(--logo-coral); color:var(--ink)}
.a-karte.c3{background:var(--apricot); color:var(--ink)}
.a-karte{transform:none}
.a-karte:hover{transform:translateY(calc(-8 * var(--px))); box-shadow:0 calc(22 * var(--px)) calc(46 * var(--px)) rgba(60,45,20,.16)}
.a-karte[hidden]{display:none}
.a-tag{
  align-self:flex-start; background:#fff; color:var(--ink);
  border-radius:999px; padding:calc(6 * var(--px)) calc(16 * var(--px));
  font-size:calc(13 * var(--px)); font-weight:700;
}
.a-karte time{margin-top:calc(18 * var(--px)); font-size:calc(15 * var(--px)); font-weight:600; opacity:.85}
.a-karte h3{margin-top:calc(10 * var(--px)); font-size:calc(28 * var(--px)); line-height:1.1; color:inherit}
.a-pfeil{
  position:absolute; right:calc(30 * var(--px)); bottom:calc(30 * var(--px));
  width:calc(42 * var(--px)); height:calc(42 * var(--px)); border-radius:50%;
  background:var(--ink); color:#fff; display:grid; place-items:center; font-size:calc(16 * var(--px));
  opacity:0; transition:opacity .3s ease;
}
.a-karte:hover .a-pfeil{opacity:1}

/* ---- Teaser.Article: Verweis ---- */
.m-hinweis{font-size:calc(19 * var(--px)); line-height:calc(31 * var(--px)); font-weight:500; max-width:calc(774 * var(--px))}
.m-hinweis a{text-decoration:underline; text-underline-offset:.2em}
.m-vlink{
  display:inline-flex; align-items:center; gap:calc(12 * var(--px)); margin-top:calc(30 * var(--px));
  background:var(--blue-deep); color:#fff; border-radius:999px;
  padding:calc(17 * var(--px)) calc(32 * var(--px)); font-size:calc(17 * var(--px)); font-weight:700;
  transition:transform .3s cubic-bezier(.34,1.6,.5,1);
}
.m-vlink:hover{transform:translateY(calc(-3 * var(--px))) scale(1.03)}

/* ---- Site-Footer ---- */
.m-footer{
  margin:0;
  display:grid; gap:calc(90 * var(--px)) calc(60 * var(--px));
  /* Footer aufs Raster: Spalte 1-4 / 6-9 / 11-12. `justify-content`
     entfaellt – bei drei Spuren plus Gap ergaben sich sonst eigene
     Abstaende, die neben der Rasterlinie lagen. */
  /* Spur 1 = Spalte 1-4 (432), Spur 2 beginnt auf Spalte 6, Spur 3 auf
     Spalte 10. Gap 138 = eine Spalte plus zwei Gaps (90+2x24). */
  grid-template-columns:calc(432 * var(--px)) calc(432 * var(--px)) 1fr;
  column-gap:calc(138 * var(--px));
}
.m-fspalte{display:flex; flex-direction:column; gap:calc(16 * var(--px))}
/* Echtes Logo statt Schriftzug. Auf dunklem Grund einfarbig weiss –
   die Markenfarben haetten auf Ink zu wenig Kontrast. */
.m-flogo{display:block; margin-bottom:calc(20 * var(--px))}
.m-flogo-svg{display:block; width:calc(104 * var(--px)); height:auto}
.m-flogo-svg path{fill:#fff}
.m-footer p{font-size:calc(18 * var(--px)); line-height:1.75; opacity:.85}
.m-fnav{gap:calc(26 * var(--px))}
.m-fnav a{font-family:var(--font-head); font-weight:var(--w-display); font-size:calc(38 * var(--px)); letter-spacing:var(--track)}
.m-fnav a:hover,.m-frecht a:hover{color:var(--apricot)}
.m-frecht a{font-size:calc(18 * var(--px)); opacity:.85}
.m-fsocial{display:flex; gap:calc(16 * var(--px)); margin-top:calc(50 * var(--px))}
.m-fsocial a{
  width:calc(44 * var(--px)); height:calc(44 * var(--px)); border-radius:50%;
  background:rgba(255,255,255,.14); display:grid; place-items:center;
  font-size:calc(14 * var(--px)); font-weight:700; opacity:1;
  transition:background .25s, transform .3s cubic-bezier(.34,1.6,.5,1);
}
.m-fsocial a:hover{background:var(--apricot); color:var(--ink); transform:translateY(calc(-2 * var(--px)))}
.m-fcopy{grid-column:1; opacity:.55}
.m-fby{grid-column:2/-1; opacity:.55}

/* ============================================================ Home-Module
   Die Module der Startseite, damit die Uebersicht vollstaendig ist.
   Sie werden hier verkleinert gezeigt (Skalierung ueber --px im
   Modulrahmen), damit sie neben den Layout-Modulen lesbar bleiben.
   ============================================================ */
.mod-home .m-inner{max-width:none; margin:0}
/* Hoehe meldet das eingebettete Modul selbst per postMessage; bis die
   Meldung ankommt, verhindert min-height ein Springen des Layouts. */
.mod-buehne{
  position:relative; overflow:hidden;
  margin:0; background:var(--bone); min-height:calc(760 * var(--px));
}
.mod-buehne iframe{
  display:block; width:100%; height:100%; border:0;
  /* Der eingebettete Hero misst 100vh des iframes – die Buehnenhoehe
     gibt also die Modulhoehe vor. */
}
.mod-hinweis-klein{
  margin:calc(18 * var(--px)) 0 0;
  font-size:calc(15 * var(--px)); font-weight:500; opacity:.6;
}

/* ============================================================ Mobile */
@media (max-width:999px){
  /* Small-Raster: 2 Spalten, Rand und Abstand je 24 */
  .frame{--m-aussen:24px; --m-rand:8px; --m-radius:44px; --grid-gap:24px}
  .mod-intro{padding:56px 32px 0}
  .mod-apricot{margin-top:0; padding-left:32px; padding-right:32px; border-radius:0 0 44px 44px}
  /* Auf der Uebersicht bleibt es auch mobil ein Panel */
  /* 8 Rand + 16 Innenabstand = 24 wie bei den randlosen Modulen */
  .mod-intro ~ .mod-apricot,
  .mod-intro ~ .mod-footer,
  .mod-cta{margin-left:8px; margin-right:8px; padding-left:24px; padding-right:24px; border-radius:44px}
  .mod-apricot.mod-voll{height:auto; min-height:70svh; padding-top:40px; padding-bottom:40px}
  /* Randlos wie das Kopfmodul auf den echten Seiten – nur auf der
     Uebersicht ein Panel (Regel weiter oben). */
  #header-article.mod-voll,
  .mod-artikelkopf.mod-voll{margin-top:0; padding:40px 32px 56px; min-height:0}
  /* Auf der Uebersicht ein Panel: 8 Rand + 16 = 24 wie ueberall */
  .mod-intro ~ #header-article.mod-voll{margin:var(--m-top) 8px 0; padding-left:24px; padding-right:24px; border-radius:44px}
  .mod:not([class*="mod-"]){padding-left:32px; padding-right:32px}
  .mod.mod-home{padding:0; margin-left:0; margin-right:0}
  .mod-titel{font-size:clamp(28px,7.6vw,36px); line-height:1.14}
  .mod-sub{font-size:16px; line-height:1.6; margin-top:16px}
  .mod-nav{gap:8px; margin-top:26px}
  .mod-nav a{font-size:13px; padding:7px 14px}
  /* Wie auf Desktop am rechten Rand, nur kleiner. Vorher stand es im
     Textfluss und schob den Modulinhalt nach unten. */
  /* Unterhalb des fixierten Burgers (14 + 48 = 62), sonst ueberlappen
     sich die beiden am oberen Modulrand. */
  .mod-label{
    top:80px; font-size:10px; padding:5px 10px;
    letter-spacing:.03em;
  }
  .m-h1{font-size:clamp(28px,7.6vw,36px); line-height:1.14}
  .m-h2{font-size:clamp(24px,6.8vw,32px); line-height:1.16}
  .m-lead{font-size:17px; line-height:1.6; margin-top:16px}
  .m-fliess p{font-size:16px; line-height:1.65}
  .m-lead-text{font-size:17px !important; line-height:1.6 !important}
  .m-h3{font-size:21px; line-height:1.28; margin-top:30px}
  .m-h4{font-size:18px; line-height:1.35; margin-top:24px}
  .m-h5{font-size:17px; line-height:1.45; margin-top:20px}
  /* Beide Listen gleich: die Bullet-Liste hatte keine Mobile-Regel und
     stand dadurch auf 18 statt 16. */
  .m-liste li,
  .m-bullets li{font-size:16px; line-height:1.6}
  .m-bullets li{padding-left:26px}
  .m-bullets li::before{top:9px; width:8px; height:8px}
  .m-stufe{font-size:11px; margin-left:8px}
  .mod-voll{min-height:0}
  .mod-buehne-voll{height:70svh}
  .m-btn,.m-vlink{font-size:16px; padding:15px 26px; margin-top:24px}
  .m-split{gap:28px}
  /* Kopfbilder quadratisch: hochkant nimmt auf dem Handy zu viel Hoehe,
     16:7 wird zum Streifen. `justify-self` zuruecknehmen – sonst sitzt
     das Bild 4 px neben der Rasterkante. */
  .m-bild-gross{aspect-ratio:1/1; max-height:none}
  .m-bild-rechts{justify-self:stretch}
  .m-bild-voll{aspect-ratio:1/1; margin-top:34px}
  .mod-voll .m-bild-voll{max-height:none}
  /* Einspaltig gestapelt, aber in Grid-Breite – die Variante heisst
     Grid-Width, also gilt das auch, wenn die zweite Spalte umbricht. */
  .m-media-paar{grid-template-columns:1fr; gap:34px}
  /* Keine Begrenzung: mobil ist die Textspalte die volle Inhaltsbreite,
     Text-Width und Grid-Width sind hier also richtigerweise gleich. Eine
     kuenstliche Verschmaelerung wuerde eine Regel vortaeuschen, die es
     nicht gibt. */
  .m-media-voll{width:calc(100% + 64px); margin-left:-32px; margin-right:-32px}
  .m-media-voll figcaption{padding-left:32px; padding-right:32px}
  /* Einspaltig, aber das Portraet nur so breit wie noetig – bei voller
     Spaltenbreite waren es 340 px und das Modul fast 2000 px hoch. */
  .m-team{grid-template-columns:1fr; gap:30px}
  /* Portraet und Beschriftung mittig – linksbuendig wirkte das kleine
     Bild neben der breiten Spalte verloren. */
  .m-person img{max-width:180px; margin-inline:auto}
  .m-person figcaption{align-items:center; text-align:center}
  .m-name{font-size:18px}
  .m-rolle{font-size:15px}
  /* Einspaltig ist wieder Platz – das Kuerzen war nur noetig, solange
     zwei Kacheln nebeneinander gleich hoch stehen mussten. */
  .m-kontakt{font-size:15px; word-break:break-word}
  /* Rund wie auf Desktop: Kreis steht fuer Menschen. Hier stand vorher
     eine Bogenform, also eine eigene Form nur fuer Mobil. */
  .m-person img{border-radius:50%}
  .m-name{font-size:17px}
  .m-rolle{font-size:14px}

  .m-uebersicht{grid-template-columns:1fr; gap:12px; margin-top:30px}
  .m-ukachel{min-height:150px; padding:24px; border-radius:28px}
  .m-ukachel h3{font-size:21px; line-height:1.25}
  .m-uarrow{opacity:1}
  .m-play{width:64px; height:64px; font-size:20px}
  .m-variant{margin:34px 0 12px; font-size:12px}
    /* Der negative Rand von -70 ist fuer Desktop gerechnet (Panel-Rand 8
       plus 70 Innenabstand). Mobil sind es 8 + 24, also -24. */
    .m-teaser{margin:0 -24px; padding:34px 24px; border-radius:34px}
  /* Die Beschriftung steht ausserhalb der Teaser-Flaeche und muss die
     Textkante des Moduls treffen, nicht dessen Innenabstand. */
  .m-variant-inner{padding-left:0; padding-right:0}
  #teaser-default{padding-left:32px; padding-right:32px}
  .a-liste{grid-template-columns:1fr; column-gap:24px; row-gap:34px}
  /* Karten und Bilder tragen mobil dieselbe Rundung (32), sonst hat
     jedes Element eine eigene. */
  .a-karte{min-height:220px; padding:26px; border-radius:32px}
  .ph{border-radius:32px}
  .a-karte h3{font-size:21px; line-height:1.25}
  .a-pfeil{opacity:1; width:36px; height:36px}
  .a-filterreihe{margin-bottom:34px; gap:8px}
  .a-filter{font-size:14px; padding:9px 16px}
  .m-team-frech .m-person{transform:none !important}
  .mod-footer{padding:var(--m-innen) 32px; border-radius:44px 44px 0 0}
  .m-footer{grid-template-columns:1fr; gap:30px}
  .m-flogo-svg{width:76px}
  .m-fnav a{font-size:24px}
  .m-fcopy,.m-fby{grid-column:1; margin-top:0}
}