/* =========================================================================
   STY Öffentliche Abschnitte
   -------------------------------------------------------------------------
   Eine Formensprache für alle öffentlichen Seiten: Startseite, Masterclass,
   Coaching, Über uns. Die Startseite ist der Maßstab; alles andere benutzt
   dieselben Bausteine.

   Bausteine:
     .sty-flaeche            Abschnittsfläche (carbon / weiss / beige)
     .sty-eyebrow            kleine goldene Versalzeile
     .sty-h--editorial       ruhige Überschrift (Poppins 700)
     .sty-karte              Karte,
Über uns. Die Startseite ist der Maßstab; alles andere benutzt
   dieselben Bausteine.

   Bausteine:
     .sty-section            Abschnittsfläche (carbon / weiss / beige)
     .sty-eyebrow            kleine goldene Versalzeile
     .sty-h--editorial       ruhige Überschrift (Poppins 700)
     .sty-karte              Karte, hell oder dunkel
     .sty-kachel             Bildkachel mit dunklem Verlauf (Module)
     .sty-preisbox           Leistungs- und Preisbox
     .sty-zeitleiste         Stationen mit goldenen Punkten
     .sty-merkzeile          gesperrte Stichwortliste rechts im Satz

   Tokens und Buttons stehen in sty-base.css.
   ========================================================================= */

/* Ein Abschnitt, in dem ein Bild über die Containerkante hinausläuft, schneidet
   den Überhang erst am Fensterrand ab — nie an der Spalte. */
.sty-abschnitt--randlos{overflow:hidden}
.sty-abschnitt--randlos .col,
.sty-abschnitt--randlos .col-inner{overflow:visible}

/* Abschnittsabstand: großzügiger als zuvor, damit die Seite ruhiger wirkt.
   -------------------------------------------------------------------------
   In der Selektorliste stand ein Stueck Kommentartext samt Kommentarende --
   ein Rest aus einer frueheren Bearbeitung. Ein ungueltiger Selektor in der
   Liste verwirft die ganze Regel, diese war also seit damals wirkungslos.
   Wieder hergestellt. */
.sty-flaeche > .section-content > .row,
.sty-section > .section-content > .row{
  padding-top:var(--sty-section-y);
  padding-bottom:var(--sty-section-y);
}
.sty-flaeche .row + .row,
.sty-section .row + .row{padding-top:0}

/* Ein Abschnitt, der direkt an den nächsten gleicher Farbe stößt, bekommt
   keinen doppelten Abstand. Auch hier lag ein Kommentarrest in der
   Selektorliste und hat die Regel verworfen. */
.sty-flaeche--weiss + .sty-flaeche--weiss > .section-content > .row,
.sty-section--light + .sty-section--light > .section-content > .row{padding-top:0}

/* -------------------------------------------------------------------------
   Wiederkehrende Textbausteine
   ---------------------------------------------------------------------- */

.sty-abschnittskopf{max-width:46rem}
.sty-abschnittskopf .sty-lead{margin-top:1.25rem}

/* Gesperrte Stichwortliste (Hero rechts, Bildband rechts, Team rechts). */
.sty-merkzeile{
  font-size:.8125rem;
  font-weight:700;
  line-height:1.9;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgb(248 246 241 / .75);
  margin:0;
}
.sty-flaeche--weiss .sty-merkzeile,
.sty-section--light .sty-merkzeile,
.sty-flaeche--beige .sty-merkzeile,
.sty-section--beige .sty-merkzeile{color:rgb(17 18 20 / .6)}

/* -------------------------------------------------------------------------
   Hero
   Drei Felder: Text links, Porträt in der Mitte, Marke und Stichworte rechts.
   Unter 1024px stapeln sie; das Porträt steht dann oben.
   ---------------------------------------------------------------------- */

.sty-hero{
  position:relative;
  background-color:var(--sty-carbon);
  color:var(--sty-white);
  overflow:hidden;
}

/* Das Hintergrundbild ist die Bühne, nicht der Inhalt: es wird abgedunkelt und
   läuft an allen Kanten in das Carbon aus, damit keine Fotokante entsteht.
   Flatsome legt es als .section-bg an. */
.sty-hero > .section-bg{
  opacity:.55;
  -webkit-mask-image:
    linear-gradient(to right,transparent 0%,#000 18%,#000 82%,transparent 100%),
    linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);
  mask-image:
    linear-gradient(to right,transparent 0%,#000 18%,#000 82%,transparent 100%),
    linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.sty-hero > .section-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgb(8 9 10 / .92) 0%,rgb(8 9 10 / .62) 45%,rgb(8 9 10 / .45) 100%);
}

.sty-hero > .section-content{position:relative;z-index:1}

.sty-hero > .section-content > .row{
  padding-top:clamp(56px,6vw,96px);
  padding-bottom:clamp(48px,5vw,80px);
}

.sty-hero h1{margin:1.1rem 0 0;color:var(--sty-white)}

.sty-hero__body{
  margin-top:1.5rem;
  max-width:30rem;
  font-size:1.0625rem;
  line-height:1.6;
  color:rgb(248 246 241 / .82);
}
@media (min-width:1024px){ .sty-hero__body{font-size:1.125rem} }

.sty-hero__aktionen{display:flex;flex-wrap:wrap;gap:.875rem;margin-top:2.25rem}

/* Markenfläche rechts: das Logo trägt den Hero, nicht ein Porträt.
   Der Auftritt soll markengetrieben wirken, nicht personengetrieben. */
.sty-hero__marke{display:flex;flex-direction:column;justify-content:center;gap:1.5rem}

@media (min-width:1024px){
  .sty-hero > .section-content > .row{min-height:620px;align-items:center}
}
@media (min-width:1400px){
  .sty-hero > .section-content > .row{min-height:680px}
}
@media (max-width:1023px){
  .sty-hero > .section-content > .row{display:flex;flex-direction:column}
  /* Auf schmalen Geräten steht die Marke oben, der Text darunter. */
  .sty-hero__marke{order:-1;align-items:stretch}
}

/* Stichwortzeile unter dem Logo: mittig, damit sie zur Marke gehört. */
.sty-merkzeile--mitte{text-align:center;line-height:1.7}
@media (max-width:1023px){ .sty-merkzeile--mitte{text-align:left} }

/* --- Goldene Markenfläche (Logo, Linien, Lichtverlauf) --- */
.sty-markenflaeche{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  min-height:150px;
}
@media (min-width:1024px){ .sty-markenflaeche{min-height:220px} }

.sty-markenflaeche img{width:min(90%,340px);height:auto;margin:0 auto}

/* Große Fassung für den Hero: das Logo ist dort die Hauptfläche.
   Die Proportionen bleiben unverändert — nur die Darstellungsgröße wächst. */
.sty-markenflaeche--gross{min-height:230px}
.sty-markenflaeche--gross img{width:min(100%,560px)}
@media (min-width:1024px){
  .sty-markenflaeche--gross{min-height:420px}
  .sty-markenflaeche--gross img{width:min(100%,620px)}
}

.sty-markenflaeche__glow{
  position:absolute;
  z-index:-1;
  height:120%;
  width:90%;
  border-radius:9999px;
  background:radial-gradient(closest-side,rgb(201 165 92 / .16),rgb(201 165 92 / .05) 55%,transparent 100%);
  animation:sty-hero-glow 16s ease-in-out infinite;
}
.sty-markenflaeche__linien{
  position:absolute;
  inset:0;
  z-index:-1;
  width:100%;
  height:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
}
.sty-markenflaeche__linien line{
  stroke:var(--sty-gold);
  stroke-width:1;
  opacity:.2;
  animation:sty-hero-drift 15s ease-in-out infinite;
}
@keyframes sty-hero-drift{
  0%,100%{transform:translate3d(-2%,0,0);opacity:.1}
  50%{transform:translate3d(2%,0,0);opacity:.28}
}
@keyframes sty-hero-glow{
  0%,100%{transform:translate3d(-3%,-2%,0) scale(1)}
  50%{transform:translate3d(3%,2%,0) scale(1.06)}
}
@media (prefers-reduced-motion:reduce){
  .sty-markenflaeche__glow,
  .sty-markenflaeche__linien line{animation:none !important;transform:none}
}

/* -------------------------------------------------------------------------
   Seitenkopf (Hero der Unterseiten)
   -------------------------------------------------------------------------
   Ein Muster für alle Seiten: Wo oben ein Bild steht, trägt es den ganzen
   Abschnitt — als Hintergrund, nicht als Foto in einer Spalte. Damit ist es
   immer formatfüllend, wird nie von einer schmalen Spalte beschnitten und
   wirkt wie ein Hero.

   Der Text steht links auf ruhiger Fläche; das Motiv liegt rechts und läuft
   nach links und an den Kanten weich in das Carbon aus.
   ---------------------------------------------------------------------- */

.sty-seitenhero{
  position:relative;
  background-color:var(--sty-carbon);
  color:var(--sty-white);
  overflow:hidden;
}

.sty-seitenhero > .section-bg{
  /* Das Motiv sitzt rechts; bei Porträts ist der Kopf so vollständig im Bild. */
  background-position:75% 28% !important;
  background-size:cover !important;
  opacity:.85;
  -webkit-mask-image:
    linear-gradient(to right,transparent 0%,#000 42%,#000 92%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,#000 8%,#000 88%,transparent 100%);
  mask-image:
    linear-gradient(to right,transparent 0%,#000 42%,#000 92%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,#000 8%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
/* Verlauf von links, damit die Schrift auf ruhigem Grund steht. */
.sty-seitenhero > .section-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgb(8 9 10 / .96) 0%,rgb(8 9 10 / .82) 38%,rgb(8 9 10 / .25) 70%,rgb(8 9 10 / .1) 100%);
}

.sty-seitenhero > .section-content{position:relative;z-index:1}
.sty-seitenhero > .section-content > .row{
  padding-top:clamp(72px,8vw,128px);
  padding-bottom:clamp(72px,8vw,128px);
  align-items:center;
}
@media (min-width:1024px){
  .sty-seitenhero > .section-content > .row{min-height:560px}
}

.sty-seitenhero h1{margin:1.1rem 0 0;color:var(--sty-white)}

/* Auf schmalen Geräten steht das Motiv über dem Text statt dahinter — sonst
   verdeckt der Verlauf entweder die Schrift oder das Motiv. */
@media (max-width:849px){
  .sty-seitenhero > .section-bg{
    background-position:70% 22% !important;
    opacity:.5;
  }
  .sty-seitenhero > .section-bg::after{
    background:linear-gradient(180deg,rgb(8 9 10 / .55) 0%,rgb(8 9 10 / .9) 55%,rgb(8 9 10 / .97) 100%);
  }
  .sty-seitenhero > .section-content > .row{min-height:420px}
}

/* Der Shop-Banner sitzt in WooCommerces Inhaltsbereich. Damit er wie die
   übrigen Seitenköpfe randlos über die volle Breite läuft, wird die Begrenzung
   des Elternteils hier aufgehoben. */
.sty-shop-banner-halter{
  margin-inline:calc(50% - 50vw);
  margin-bottom:clamp(32px,4vw,56px);
}
.sty-shop-banner-halter .sty-shop-banner > .section-content > .row{
  padding-top:clamp(48px,5vw,80px);
  padding-bottom:clamp(48px,5vw,80px);
}
@media (min-width:1024px){
  .sty-shop-banner > .section-content > .row{min-height:360px}
}

/* Flatsomes eigener Shop-Kopf mit Brotkrumen und Filter entfällt: Der Banner
   übernimmt diese Stelle, sonst stünden zwei Überschriften übereinander. */
.woocommerce .shop-page-title.category-page-title{display:none}

/* Verweis in einer Vorteilskarte. */
.sty-karte__link{margin-top:1.1rem}
.sty-karte--dunkel .sty-karte__link{color:var(--sty-gold);border-color:rgb(201 165 92 / .5)}

/* -------------------------------------------------------------------------
   Glaubwürdigkeitsleiste — schmaler dunkler Streifen mit drei Aussagen
   ---------------------------------------------------------------------- */

.sty-leiste{background-color:var(--sty-carbon);color:var(--sty-white)}
.sty-leiste > .section-content > .row{padding-block:0}

.sty-leiste__liste{
  display:grid;
  grid-template-columns:1fr;
  margin:0;
  padding:0;
  list-style:none;
}
.sty-leiste__liste > li{
  display:flex;
  align-items:center;
  gap:1.15rem;
  min-height:104px;
  padding-block:1.25rem;
  border-top:1px solid rgb(248 246 241 / .08);
}
.sty-leiste__liste > li:first-child{border-top:0}

.sty-leiste__symbol{
  flex:0 0 52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border:1px solid rgb(201 165 92 / .45);
  border-radius:9999px;
  color:var(--sty-gold);
}
.sty-leiste__symbol svg{width:24px;height:24px;display:block}

.sty-leiste__titel{
  display:block;
  font-size:.9375rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--sty-white);
}
.sty-leiste__text{
  display:block;
  margin-top:.3rem;
  font-size:.9375rem;
  color:rgb(248 246 241 / .62);
}

@media (min-width:768px){
  .sty-leiste__liste{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sty-leiste__liste > li{
    border-top:0;
    border-left:1px solid rgb(248 246 241 / .08);
    padding-inline:2.5rem;
    justify-content:flex-start;
  }
  .sty-leiste__liste > li:first-child{border-left:0;padding-left:0}
}

/* -------------------------------------------------------------------------
   Karten
   Hell auf hellem Grund, dunkel auf hellem Grund (Mehrwert-Karten) — beide
   kantig, höchstens 2px Radius.
   ---------------------------------------------------------------------- */

.sty-karten{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  margin:0;
  padding:0;
  list-style:none;
}
@media (min-width:700px){ .sty-karten--3{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:640px){ .sty-karten--2{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* Alle Karten teilen dieselbe Ebene: gleiche Höhe im Raster, dezente Kante,
   dezente Tiefe, ruhiger Hover. Keine weichen Schatten, kein Glow. */
.sty-karte{
  display:flex;
  flex-direction:column;
  height:100%;
  border:1px solid var(--sty-karte-kante-hell);
  border-radius:var(--sty-karte-radius);
  background-color:var(--sty-beige-light);
  box-shadow:var(--sty-karte-schatten);
  padding:2.25rem 2rem;
  transition:box-shadow var(--sty-uebergang),transform var(--sty-uebergang),border-color var(--sty-uebergang);
}
@media (hover:hover) and (pointer:fine){
  .sty-karte:hover{box-shadow:var(--sty-karte-schatten-hover);transform:translateY(-2px)}
}

.sty-karte__titel{
  margin:0;
  font-family:var(--sty-font-body);
  font-size:1.375rem;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.015em;
}
.sty-karte__text{
  margin:.85rem 0 0;
  font-size:1rem;
  line-height:1.65;
  color:rgb(17 18 20 / .72);
}

/* Dunkle Karte auf hellem Grund — der Kontrast der Startseite.
   Die Kante ist warm-golden statt grau, damit sie sich vom Off-White löst. */
.sty-karte--dunkel{
  background-color:var(--sty-carbon);
  border-color:var(--sty-karte-kante-dunkel);
  color:var(--sty-white);
  text-align:center;
  padding:2.5rem 2rem 2.25rem;
  align-items:center;
}
.sty-karte--dunkel .sty-karte__titel{color:var(--sty-white)}
.sty-karte--dunkel .sty-karte__text{color:rgb(248 246 241 / .72)}
@media (hover:hover) and (pointer:fine){
  .sty-karte--dunkel:hover{border-color:rgb(201 165 92 / .45)}
}

/* Goldener Ring mit Symbol. */
.sty-karte__symbol{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:84px;
  height:84px;
  margin:0 auto 1.5rem;
  border:1px solid rgb(201 165 92 / .5);
  border-radius:9999px;
  color:var(--sty-gold);
}
.sty-karte__symbol svg{width:36px;height:36px;display:block}

/* -------------------------------------------------------------------------
   Bildband — dunkler Abschnitt mit Foto, Aussage und Verweis
   ---------------------------------------------------------------------- */

.sty-band{background-color:var(--sty-carbon);color:var(--sty-white);overflow:hidden}
.sty-band > .section-content > .row{
  padding-top:clamp(64px,7vw,112px);
  padding-bottom:clamp(64px,7vw,112px);
}
.sty-band__aussage{
  font-family:var(--sty-font-body);
  font-size:clamp(1.375rem,2.2vw,2rem);
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.015em;
  color:var(--sty-white);
  max-width:34rem;
  margin:0;
}

/* Das Bild sitzt nicht als Rechteck in der Fläche: alle vier Kanten laufen
   weich in das Carbon aus. Das Motiv selbst bleibt scharf — kein Weichzeichner,
   nur eine Maske. */
.sty-band__bild{position:relative;overflow:hidden}
.sty-band__bild img{
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
  object-position:center center;
  display:block;
  -webkit-mask-image:
    linear-gradient(to right,transparent 0%,#000 14%,#000 86%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%);
  mask-image:
    linear-gradient(to right,transparent 0%,#000 14%,#000 86%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
@media (min-width:1024px){
  .sty-band__bild img{aspect-ratio:3 / 2}
}

/* -------------------------------------------------------------------------
   Bilder allgemein: weiche Übergänge statt harter Fotokanten
   -------------------------------------------------------------------------
   .sty-blend-x   an den Seiten auslaufend (breite Motive in dunklen Flächen)
   .sty-blend-xy  an allen vier Kanten auslaufend
   Beide arbeiten mit einer Maske, nicht mit einem Weichzeichner: das Motiv
   bleibt scharf, nur der Rand wird durchsichtig.
   ---------------------------------------------------------------------- */

.sty-blend-x img,
.sty-blend-xy img{display:block;width:100%;height:auto;object-fit:cover}

.sty-blend-x img{
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%);
}
.sty-blend-xy img{
  -webkit-mask-image:
    linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,#000 10%,#000 90%,transparent 100%);
  mask-image:
    linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%),
    linear-gradient(to bottom,transparent 0%,#000 10%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* -------------------------------------------------------------------------
   Porträts von Olaf
   Eigene Klasse statt einer globalen Regel: der Bildausschnitt wird je Motiv
   gesetzt, damit der Kopf nie oben abgeschnitten wird. Die Aufnahmen selbst
   bleiben unverändert.
   ---------------------------------------------------------------------- */
.sty-olaf-bild{position:relative;overflow:hidden}
.sty-olaf-bild img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  /* Etwas oberhalb der Mitte: bei Hochformaten sitzt der Kopf sonst am Rand. */
  object-position:50% 30%;
}
/* Querformat mit Person in der Bildmitte. */
.sty-olaf-bild--quer img{object-position:50% 38%}

/* Breitbild-Aufnahme, in der Olaf rechts im Bild steht (etwa bei 70 % der
   Breite). Ein mittiger Ausschnitt würde ihn längs durchschneiden. */
.sty-olaf-bild--rechts img{object-position:70% center}

/* -------------------------------------------------------------------------
   Bild läuft nach rechts aus dem Raster bis an den Fensterrand
   -------------------------------------------------------------------------
   Statt eines Fotos im Kasten: die Fläche reicht über die Containerkante
   hinaus. Die Breite ist die Spaltenbreite plus dem seitlichen Innenabstand
   plus der halben Differenz zwischen Fenster und Container — also genau bis
   zum Rand, ohne feste Zahlen.

   Links läuft das Bild weich aus, damit es in die Textspalte übergeht;
   rechts bleibt es randlos stehen. Der Abschnitt braucht overflow:hidden.
   ---------------------------------------------------------------------- */
.sty-bild--auslauf-rechts{overflow:visible}
.sty-bild--auslauf-rechts img{
  width:calc(100% + var(--sty-gutter) + max(0px,(100vw - var(--sty-container)) / 2));
  max-width:none;
  aspect-ratio:4 / 3;
  object-fit:cover;
  -webkit-mask-image:
    linear-gradient(to right,transparent 0%,#000 20%),
    linear-gradient(to bottom,transparent 0%,#000 10%,#000 90%,transparent 100%);
  mask-image:
    linear-gradient(to right,transparent 0%,#000 20%),
    linear-gradient(to bottom,transparent 0%,#000 10%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
/* Auf schmalen Geräten steht das Bild wieder im Raster — sonst würde der
   Überhang den Bildausschnitt aus dem sichtbaren Bereich schieben. */
@media (max-width:849px){
  .sty-bild--auslauf-rechts img{
    width:100%;
    aspect-ratio:16 / 10;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%);
  }
}

/* Textlink mit goldenem Unterstrich und Pfeil. */
.sty-textlink{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  min-height:2.75rem;
  font-size:.875rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--sty-gold);
  text-decoration:none;
  border-bottom:1px solid rgb(201 165 92 / .5);
  transition:color .2s ease,border-color .2s ease;
}
.sty-textlink:hover{color:var(--sty-gold-light);border-color:var(--sty-gold-light)}
.sty-textlink::after{content:"→";font-size:1.1em;line-height:1}
.sty-flaeche--weiss .sty-textlink,
.sty-section--light .sty-textlink,
.sty-flaeche--beige .sty-textlink,
.sty-section--beige .sty-textlink{color:var(--sty-gold-ink);border-color:rgb(119 97 54 / .45)}

/* -------------------------------------------------------------------------
   Modulkacheln (Themenwelten)
   Dunkel mit Bild — die Sprache des Mitgliederbereichs, damit Besucher sehen,
   was sie dort erwartet.
   ---------------------------------------------------------------------- */

.sty-themen__liste,
.sty-module{
  display:grid;
  grid-template-columns:1fr;
  gap:1.5rem;
  margin:3rem 0 0;
  padding:0;
  list-style:none;
}
@media (min-width:768px){
  .sty-themen__liste,
  .sty-module{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Alle Kacheln einer Zeile gleich hoch -- hier klappt nichts auf, das
     Koppeln ist also unschaedlich. */
  .sty-module{grid-auto-rows:1fr}
}

.sty-thema,
.sty-modul{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:330px;
  height:100%;
  overflow:hidden;
  background-color:var(--sty-carbon);
  border:1px solid var(--sty-karte-kante-dunkel);
  border-radius:var(--sty-karte-radius);
  box-shadow:var(--sty-karte-schatten);
  padding:2rem 1.75rem 1.75rem;
  color:var(--sty-white);
  transition:box-shadow var(--sty-uebergang),transform var(--sty-uebergang),border-color var(--sty-uebergang);
}
@media (min-width:1024px){
  .sty-thema,.sty-modul{min-height:360px}
}
@media (hover:hover) and (pointer:fine){
  .sty-thema:hover,.sty-modul:hover{
    box-shadow:var(--sty-karte-schatten-hover);
    transform:translateY(-3px);
    border-color:rgb(201 165 92 / .45);
  }
  .sty-thema:hover .sty-thema__bild img{transform:scale(1.04)}
}

/* Das Bild füllt die Kachel bis an den Rand — keine innere Umrandung.
   Der Verlauf darüber sichert die Lesbarkeit und lässt die untere Kante in
   die Kartenfläche auslaufen, statt eine harte Fotokante zu zeigen. */
.sty-thema__bild,
.sty-modul__bild{
  position:absolute;
  inset:0;
  z-index:-2;
  overflow:hidden;
}
.sty-thema__bild img,
.sty-modul__bild img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  transition:transform .4s ease;
}
.sty-thema::before,
.sty-modul::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgb(8 9 10 / .2) 0%,rgb(8 9 10 / .72) 48%,rgb(8 9 10 / .96) 100%);
}
/* Ohne Bild bleibt die Kachel ruhig schwarz mit feinem Linienraster —
   dieselbe Grafik wie die Modulkarten im Mitgliederbereich. */
.sty-thema--ohne-bild,
.sty-modul--ohne-bild{
  background-image:repeating-linear-gradient(135deg,rgb(201 165 92 / .09) 0 1px,transparent 1px 22px);
}

.sty-thema__nummer,
.sty-modul__nummer{
  display:block;
  margin-bottom:.6rem;
  font-family:var(--sty-font-body);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--sty-gold);
}
.sty-thema__titel,
.sty-modul__titel{
  margin:0;
  font-family:var(--sty-font-display);
  font-size:clamp(1.25rem,1.5vw,1.5rem);
  line-height:1.18;
  text-transform:uppercase;
  color:var(--sty-white);
  /* Platz für den Pfeilknopf unten rechts. */
  padding-right:3.25rem;
}
.sty-thema__beschreibung,
/* Die Modulbeschreibungen sind unterschiedlich lang -- Modul 1 hat mit 341
   Zeichen rund das Dreifache der uebrigen. Ohne Begrenzung zog es die ganze
   erste Rasterzeile auf 610px, waehrend die beiden anderen Zeilen bei 371px
   blieben. Vier Zeilen als feste Hoehe machen alle Kacheln gleich gross; der
   vollstaendige Text steht auf der Modulseite im Mitgliederbereich. */
.sty-modul__beschreibung{
  margin:.85rem 0 0;
  font-size:1rem;
  line-height:1.6;
  color:rgb(248 246 241 / .78);
  padding-right:3.25rem;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  line-clamp:4;
  overflow:hidden;
  min-height:calc(4 * 1.6em);
}
.sty-modul__meta{
  margin:.9rem 0 0;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--sty-gold);
}

.sty-thema__link{display:block;text-decoration:none;color:inherit}

/* Goldener Pfeilknopf unten rechts. */
.sty-thema__pfeil{
  position:absolute;
  right:1.5rem;
  bottom:1.5rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid var(--sty-gold);
  border-radius:9999px;
  color:var(--sty-gold);
  font-size:1.1rem;
  line-height:1;
  transition:background-color .2s ease,color .2s ease;
}
.sty-thema:hover .sty-thema__pfeil{background-color:var(--sty-gold);color:var(--sty-carbon)}

/* -------------------------------------------------------------------------
   Preis- und Leistungsboxen
   ---------------------------------------------------------------------- */

/* Mehr Rinne zwischen den Karten als vorher: die Tiefe unten braucht Platz,
   sonst laufen die Schatten zweier Nachbarn ineinander und die Kanten
   verlieren genau die Schaerfe, die sie tragen soll. */
.sty-pakete{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  margin-top:0;
}
/* Erst ab 900px dreispaltig: bei 768px blieben je Box rund 200px, die Leistungen
   brachen dann in zwei bis drei Zeilen um. */
@media (min-width:900px){ .sty-pakete{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem} }
@media (min-width:600px) and (max-width:899px){ .sty-pakete{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* Zwei Karten statt drei -- die Masterclass-Tarife.
   -------------------------------------------------------------------------
   Gemessen standen sie in einem dreispaltigen Raster: zwei Karten zu je
   404px links, 428px leere Spalte rechts. Das las sich nicht als "zwei
   Tarife", sondern als "eine Karte fehlt".

   Die Spalten bleiben so breit wie die Coaching-Tafeln -- der Block wird
   auf ihre Summe begrenzt und mittig gesetzt, statt die Karten auf halbe
   Seitenbreite zu ziehen. Zwei 642px breite Preiskarten waeren keine
   Preiskarten mehr.
   52rem sind genau 404 + 24 + 404. */
@media (min-width:900px){
  .sty-pakete--2{
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:52rem;
    margin-inline:auto;
  }
  /* Ohne unterschiedliche Hoehen ergibt das Anheben der hervorgehobenen
     Karte keinen Sinn mehr: es wuerde die gerade erst angeglichenen
     Oberkanten wieder auseinanderziehen. */
  .sty-pakete--2 .sty-paket--hervorgehoben{margin-top:0}
}

/* Gleich hohe Karten, sobald sie nebeneinander stehen -- also ab 600px und
   nicht erst ab 900px. Bei zwei Tarifen ohne Aufklapper gibt es den Grund
   fuer align-self:start nicht: niemand kann eine Karte wachsen lassen.
   Gemessen waren es 478 gegen 602 Pixel bei 1440px und 503 gegen 623 bei
   768px.

   Der Platz, der durch das Strecken entsteht, faellt an die Leistungsliste.
   Sie ist das einzige Element in der Karte, das wachsen darf, ohne dass
   etwas auseinanderrutscht -- die Eintraege bleiben oben, der Hinweis
   darunter behaelt seinen Abstand von 1,5rem. Mit margin-top:auto am
   Hinweis waere genau dieser Abstand verlorengegangen. */
@media (min-width:600px){
  .sty-pakete--2 .sty-paket{align-self:stretch}
  .sty-pakete--2 .sty-paket__leistungen{flex:1 1 auto}
}

/* Der ganze Abschnitt folgt der Mitte, nicht nur die Karten.
   -------------------------------------------------------------------------
   Mit mittigem Kartenblock, aber linksbuendiger Ueberschrift und linkem
   Knopf sprang der Blick dreimal: 83px, 297px, 83px. Entweder alles links
   oder alles mittig -- gemessen war der Zickzack das eigentliche Problem.

   Erkannt wird der Abschnitt an dem, was ihn ausmacht: er enthaelt den
   Zwei-Tarif-Block. Kein zusaetzlicher Klassenname im Seiteninhalt, damit
   im Editor nichts steht, das dort niemand erklaeren kann.

   Die Breite ist dieselbe wie die des Kartenblocks (52rem), damit
   Ueberschrift, Karten und Fussnote auf einer Achse stehen. */
.sty-container:has(> .sty-pakete--2) > .sty-kopf{
  max-width:52rem;
  margin-inline:auto;
  text-align:center;
}
/* .sty-lead traegt eine eigene Hoechstbreite und bliebe sonst links im
   zentrierten Block stehen. */
.sty-container:has(> .sty-pakete--2) > .sty-kopf .sty-lead{margin-inline:auto}
/* Die Handlungszeile unter einem Preisraster steht mittig -- auf der
   Masterclass-Seite unter zwei Tarifen, auf der Coaching-Seite unter drei
   Paketen. Beide Male ist es derselbe Fall: eine einzelne Handlung, die zu
   allen Karten darueber gehoert und zu keiner einzelnen. Linksbuendig sah
   sie aus, als gehoerte sie zur ersten Karte.

   Nachbarselektor statt :has(), weil .sty-aktionen dem Raster folgt -- das
   laesst sich ohne :has() ausdruecken und trifft nur die Faelle, in denen
   wirklich ein Preisraster darueber steht.

   .sty-aktionen ist eine Flexzeile: hier entscheidet justify-content,
   nicht text-align. */
.sty-pakete ~ .sty-aktionen{justify-content:center}
/* Die Fussnote steht zwischen Raster und Knopf und richtet sich nach dem
   Knopf -- sonst stuende sie als einziges Element des Blocks links.
   Bedingung ist deshalb dieselbe wie oben: nur wo eine Handlungszeile
   folgt. Auf der Startseite, wo unter den Paketen keine .sty-aktionen mehr
   steht, bleibt sie linksbuendig wie der Text daneben. */
.sty-pakete:has(~ .sty-aktionen) .sty-pakete__fussnote{text-align:center}

/* Tiefe statt Flaeche.
   -------------------------------------------------------------------------
   Vorher trug die Karte einen einzigen Schatten und eine graue Kante. Auf
   Off-White ergab das eine Box, die vom Untergrund kaum zu unterscheiden
   war -- der Grund, warum die Tafeln flach und blass wirkten.

   Jetzt sind es vier Lagen, und jede hat eine Aufgabe:
     1px   Aufsetzpunkt, damit die Karte die Flaeche beruehrt
     6px   Nahbereich, gibt der Kante ihre Kontur
     48px  Umgebungsschatten, hebt die Karte als Koerper heraus
     innen ein heller Lichtsaum oben -- so entsteht Materialwirkung ohne
           dass irgendwo ein Verlauf oder eine neue Farbe noetig waere

   Alle Werte liegen unter 30 Prozent Deckkraft. Sichtbar ist die Summe,
   nicht die einzelne Lage.

   Die Kante ist Gold bei 22 Prozent statt Grau: warm, sehr leise, und sie
   bleibt innerhalb der CI. Eine dunkle Standardkante haette die Karte
   umrandet statt sie zu tragen. */
.sty-paket{
  position:relative;
  display:flex;
  flex-direction:column;
  /* Im geschlossenen Zustand stehen alle drei Karten gleich hoch; öffnet eine,
     wächst nur sie. align-self verhindert, dass das Raster die Nachbarn mitzieht. */
  align-self:start;
  border:1px solid rgb(201 165 92 / .22);
  border-radius:var(--sty-karte-radius);
  background-color:#fdfdfc;
  box-shadow:
    0 1px 1px rgb(8 9 10 / .04),
    0 4px 10px -6px rgb(8 9 10 / .1),
    0 24px 48px -28px rgb(8 9 10 / .28),
    inset 0 1px 0 rgb(255 255 255 / .9);
  padding:2.25rem 1.85rem 1.85rem;
  transition:box-shadow var(--sty-uebergang),border-color var(--sty-uebergang);
}
@media (hover:hover) and (pointer:fine){
  .sty-paket:hover{
    border-color:rgb(201 165 92 / .42);
    box-shadow:
      0 1px 1px rgb(8 9 10 / .05),
      0 6px 14px -6px rgb(8 9 10 / .14),
      0 34px 62px -30px rgb(8 9 10 / .34),
      inset 0 1px 0 rgb(255 255 255 / .9);
  }
}

/* Die Empfehlung ist dunkel mit Goldakzenten — die beiden anderen bleiben hell.
   -------------------------------------------------------------------------
   Sie soll prominenter stehen, nicht lauter rufen. Deshalb kein gefuellter
   Goldrahmen und kein Leuchten nach aussen, sondern:
     ein Goldsaum von 1px direkt auf der Kante (16 Prozent)
     ein tieferer, weiter gestreuter Schatten als bei den hellen Karten
     ein Lichtsaum innen oben in Gold statt Weiss

   Der Unterschied zu Basic und Prime entsteht ueber Tiefe, nicht ueber
   Groesse oder Sattheit. */
.sty-paket--hervorgehoben{
  background-color:var(--sty-carbon);
  border-color:rgb(201 165 92 / .34);
  color:var(--sty-white);
  padding-top:2.6rem;
  box-shadow:
    0 0 0 1px rgb(201 165 92 / .16),
    0 2px 6px -2px rgb(8 9 10 / .3),
    0 18px 36px -20px rgb(8 9 10 / .42),
    0 44px 80px -44px rgb(8 9 10 / .55),
    inset 0 1px 0 rgb(201 165 92 / .22);
}
@media (hover:hover) and (pointer:fine){
  .sty-paket--hervorgehoben:hover{
    border-color:rgb(201 165 92 / .5);
    box-shadow:
      0 0 0 1px rgb(201 165 92 / .24),
      0 2px 6px -2px rgb(8 9 10 / .32),
      0 22px 44px -20px rgb(8 9 10 / .46),
      0 52px 92px -44px rgb(8 9 10 / .6),
      inset 0 1px 0 rgb(201 165 92 / .28);
  }
}

/* Erst wenn die drei Karten nebeneinander stehen, ergibt ein Anheben Sinn.
   Untereinander waere es nur ein Loch im Abstand. 14px reichen: mit dem
   tieferen Schatten liest sich die Karte als vorderste Ebene. */
@media (min-width:900px){
  .sty-paket--hervorgehoben{margin-top:-14px}
}

/* Das Band sitzt auf der Oberkante, nicht darueber: unten eckig, oben
   gerundet wie die Karte. So gehoert es zur Karte statt darauf zu kleben. */
.sty-paket__marke{
  position:absolute;
  top:-.7rem;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  background:var(--sty-gold);
  color:var(--sty-carbon);
  font-size:.6875rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.35rem .85rem;
  border-radius:3px 3px 0 0;
  box-shadow:0 2px 8px -3px rgb(8 9 10 / .45);
}

.sty-paket__titel{
  margin:0;
  font-family:var(--sty-font-body);
  font-size:1.25rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.2;
}
.sty-paket--hervorgehoben .sty-paket__titel{color:var(--sty-white)}
.sty-paket__zusatz{
  display:block;
  margin-top:.3rem;
  font-size:.9375rem;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:rgb(17 18 20 / .62);
}
.sty-paket--hervorgehoben .sty-paket__zusatz{color:rgb(248 246 241 / .7)}

/* Der Preis ist die Entscheidungsgrundlage und bekommt deshalb den groessten
   Sprung nach oben -- darunter faellt die Monatsangabe deutlich ab, statt
   wie vorher fast gleich gross danebenzustehen. */
.sty-paket__preis{
  margin:1.4rem 0 0;
  font-family:var(--sty-font-body);
  font-size:1.5rem;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.02em;
}
.sty-paket--hervorgehoben .sty-paket__preis{color:var(--sty-gold)}

/* Betrag und Laufzeit: gleiche Zeile, zwei Gewichte. Der Betrag bleibt
   ungebrochen -- eine umgebrochene Zahl ist keine Zahl mehr. Die Laufzeit
   faellt auf 62 Prozent zurueck und wird damit zur Angabe neben dem Preis
   statt zum zweiten Teil davon. */
.sty-paket__betrag{white-space:nowrap}
.sty-paket__laufzeit{
  margin-left:.35em;
  font-size:.62em;
  font-weight:700;
  letter-spacing:0;
  white-space:nowrap;
  opacity:.82;
}
.sty-paket__monat{
  margin:.35rem 0 0;
  font-size:.875rem;
  color:rgb(17 18 20 / .58);
}
.sty-paket--hervorgehoben .sty-paket__monat{color:rgb(248 246 241 / .66)}

/* Die Trennlinie sitzt jetzt oben an der Leistungsliste und nicht mehr unter
   der Monatsangabe. Grund: ohne Monatspreis -- zeige_monatspreis="nein" --
   verschwand vorher auch die Linie, und die Gliederung fiel in sich
   zusammen. An der Liste ist sie immer da, wo sie hingehoert. */
.sty-paket__leistungen{
  list-style:none;
  margin:1.5rem 0 0;
  padding:1.5rem 0 0;
  border-top:1px solid rgb(17 18 20 / .1);
}
.sty-paket--hervorgehoben .sty-paket__leistungen{border-top-color:rgb(248 246 241 / .12)}

.sty-paket__leistungen li{
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  font-size:.9375rem;
  line-height:1.5;
  padding-block:.42rem;
}

/* Der Haken steht in einer eigenen goldenen Scheibe statt frei im Text.
   Das ist der Unterschied zwischen Aufzaehlung und Leistungsversprechen --
   und es bindet die Liste an die Goldkante der Karte, ohne eine neue Farbe
   einzufuehren: dieselbe Goldmarke, einmal als Flaeche.

   Feste Groesse und margin-top statt line-height-Tricks: so sitzt die
   Scheibe auch dann auf der ersten Zeile, wenn der Text zweizeilig wird. */
.sty-paket__leistungen li::before{
  content:"✓";
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.25rem;
  height:1.25rem;
  margin-top:.1rem;
  border-radius:50%;
  background:var(--sty-gold);
  color:var(--sty-carbon);
  font-size:.7rem;
  font-weight:800;
  line-height:1;
}
.sty-paket--hervorgehoben .sty-paket__leistungen li::before{
  background:var(--sty-gold);
  color:var(--sty-carbon);
}
/* Der aufgeklappte Rest ist dieselbe Liste und braucht weder zweite
   Trennlinie noch zweiten Abstand nach oben. */
.sty-paket__leistungen--rest{margin-top:0;padding-top:.35rem;border-top:0}

/* Aufklapper: nativ über details/summary — ohne JavaScript bedienbar und
   per Tastatur erreichbar.
   -------------------------------------------------------------------------
   Das <summary> traegt seit dieser Ueberarbeitung .sty-btn .sty-btn--primary
   und sieht damit genau aus wie jeder andere Knopf auf hellem Grund: helle
   Flaeche, goldene Kante, dunkler Text, goldener Pfeil. Farbe, Rahmen,
   Schatten, Schwebezustand und Pfeil kommen vollstaendig aus dem bestehenden
   Knopfsystem -- hier steht dazu bewusst keine einzige Zeile.

   Was vorher hier stand (eigene Schriftgroesse, eigenes Gold, ein eigener
   Winkel als Zeichen) war ein zweiter Knopfstil neben dem eigentlichen. Er
   ist ersatzlos entfallen.

   Geblieben sind nur die drei Dinge, die ein <summary> zum Knopf braucht --
   Zeiger, kein Dreieck, keine Marker-Grafik -- und die Breite im Karten-
   zusammenhang. */
.sty-paket__details{margin-top:1.5rem}
.sty-paket__details summary{cursor:pointer;list-style:none}
.sty-paket__details summary::-webkit-details-marker{display:none}

/* Die einzige Anpassung am Knopf: volle Kartenbreite und mittig gesetzter
   Text. Eine Preistafel hat genau eine Handlung -- die soll die Karte auch
   ausfuellen. */
.sty-paket__knopf{
  display:flex;
  width:100%;
  justify-content:center;
  margin:0;
}

/* Im aufgeklappten Zustand zeigt derselbe Pfeil zurueck. Kein zweites
   Zeichen, keine zweite Regel: nur eine Drehung des vorhandenen. */
.sty-paket__details[open] .sty-paket__knopf::after{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){
  .sty-paket__details[open] .sty-paket__knopf::after{transition:none}
}

.sty-paket__details-zu{display:none}
.sty-paket__details[open] .sty-paket__details-auf{display:none}
.sty-paket__details[open] .sty-paket__details-zu{display:inline}

/* Der Hinweis ist Kleingedrucktes und steht deutlich abgesetzt unter dem
   Knopf -- vorher klebte er mit 1,1rem fast daran. */
.sty-paket__hinweis{
  margin:1.5rem 0 0;
  padding-top:1.25rem;
  border-top:1px solid rgb(17 18 20 / .1);
  font-size:.8125rem;
  line-height:1.5;
  color:rgb(17 18 20 / .55);
}
.sty-paket--hervorgehoben .sty-paket__hinweis{
  color:rgb(248 246 241 / .58);
  border-top-color:rgb(248 246 241 / .12);
}
.sty-pakete__fussnote{
  grid-column:1 / -1;
  margin:.5rem 0 0;
  font-size:.8125rem;
  line-height:1.6;
  color:rgb(17 18 20 / .6);
}
.sty-flaeche--carbon .sty-pakete__fussnote,
.sty-section--dark .sty-pakete__fussnote{color:rgb(248 246 241 / .6)}

/* -------------------------------------------------------------------------
   Zeitleiste (Olaf-Geschichte)
   ---------------------------------------------------------------------- */

.sty-zeitleiste{list-style:none;margin:0;padding:0;border-left:1px solid rgb(17 18 20 / .15)}
.sty-flaeche--carbon .sty-zeitleiste,
.sty-section--dark .sty-zeitleiste{border-left-color:rgb(248 246 241 / .15)}

.sty-zeitleiste li{position:relative;padding:0 0 1.75rem 1.5rem}
.sty-zeitleiste li:last-child{padding-bottom:0}
.sty-zeitleiste li::before{
  content:"";
  position:absolute;
  left:-5px;
  top:.45rem;
  width:9px;
  height:9px;
  border-radius:9999px;
  background:var(--sty-gold);
}
.sty-zeitleiste__titel{
  display:block;
  font-size:.9375rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.sty-zeitleiste__text{
  display:block;
  margin-top:.25rem;
  font-size:.9375rem;
  line-height:1.55;
  color:rgb(17 18 20 / .68);
}
.sty-flaeche--carbon .sty-zeitleiste__text,
.sty-section--dark .sty-zeitleiste__text{color:rgb(248 246 241 / .68)}

.sty-story__bild img{width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;filter:grayscale(1) contrast(1.04)}

/* -------------------------------------------------------------------------
   Podcast — bewusst zurückgenommen: eine schmale Zeile, kein eigener Block
   ---------------------------------------------------------------------- */

.sty-podcast{background-color:var(--sty-beige-light)}
.sty-podcast > .section-content > .row{padding-block:1.5rem}
.sty-podcast__zeile{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.25rem;
}
.sty-podcast__bild{flex:0 0 96px}
.sty-podcast__bild img{width:96px;height:64px;object-fit:cover}
.sty-podcast__text{flex:1 1 16rem;min-width:0}
.sty-podcast__label{
  display:block;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--sty-gold-ink);
}
.sty-podcast__satz{margin:.2rem 0 0;font-size:.9375rem;color:rgb(17 18 20 / .72)}

/* -------------------------------------------------------------------------
   Team
   ---------------------------------------------------------------------- */

.sty-team{background-color:var(--sty-carbon);color:var(--sty-white)}
.sty-team__liste{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin:2rem 0 0;
  padding:0;
  list-style:none;
}
@media (min-width:768px){ .sty-team__liste{grid-template-columns:repeat(2,minmax(0,1fr))} }

.sty-person{
  display:flex;
  align-items:stretch;
  gap:1.25rem;
  border:1px solid rgb(248 246 241 / .12);
  background-color:var(--sty-graphite);
  padding:1.25rem;
}
.sty-person__bild{flex:0 0 108px}
.sty-person__bild img{width:108px;height:108px;object-fit:cover;filter:grayscale(1)}
.sty-person__text{min-width:0;display:flex;flex-direction:column;justify-content:center}

/* Auf dem Telefon nebeneinander bleiben Portraet und Text nicht nebeneinander
   lesbar: von 358px gehen 108px an das Bild und 40px an Polster und Abstand,
   dem Text bleiben 188px -- rund 21 Zeichen je Zeile. Deshalb stellt sich die
   Karte um: Bild oben, Text darunter ueber die ganze Breite. */
@media (max-width:560px){
  .sty-person{flex-direction:column;align-items:flex-start;gap:.9rem}
  .sty-person__bild{flex:0 0 auto}
}
.sty-person__name{
  margin:0;
  font-family:var(--sty-font-body);
  font-size:1.0625rem;
  font-weight:700;
  color:var(--sty-white);
}
.sty-person__rolle{
  display:block;
  margin-top:.15rem;
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--sty-gold);
}
.sty-person__satz{
  margin:.6rem 0 0;
  font-size:.875rem;
  line-height:1.55;
  color:rgb(248 246 241 / .7);
}
/* Fehlt ein freigegebenes Foto, bleibt die Bildspalte leer statt mit einem
   Ersatzbild gefüllt. */
.sty-person--ohne-bild .sty-person__bild{display:none}

/* -------------------------------------------------------------------------
   Zahlenzeile, Lernziele, Redaktionshinweis
   ---------------------------------------------------------------------- */

.sty-zahlen{
  display:inline-block;
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--sty-gold-ink);
}
.sty-flaeche--carbon .sty-zahlen,
.sty-section--dark .sty-zahlen{color:var(--sty-gold)}

.sty-lernziele ol{margin:1.5rem 0 0;padding-left:1.25rem}
.sty-lernziele li{margin-bottom:.9rem;line-height:1.65;max-width:48rem}
.sty-lernziele li::marker{color:var(--sty-gold-ink);font-weight:700}
.sty-flaeche--carbon .sty-lernziele li::marker,
.sty-section--dark .sty-lernziele li::marker{color:var(--sty-gold)}

.sty-hinweis--redaktion{
  border:1px dashed var(--sty-gold-ink);
  background:rgb(201 165 92 / .08);
  color:var(--sty-gold-ink);
  padding:.8em 1em;
  font-size:.875rem;
  border-radius:var(--sty-radius);
}

/* Eine Auswahlzeile, in der nur noch ein fester Wert steckt, hat keinen Zweck.
   Der Wert wird als verstecktes Feld mitgegeben (sty_einzelwert_ohne_auswahl),
   die Zeile selbst verschwindet mitsamt ihrer Beschriftung. */
.variations tr:has(> td.value > input.sty-fester-wert){display:none}
.variations tr:has(> .value > input.sty-fester-wert){display:none}

/* Preisangabe: der Monatsbetrag ist die Zahl, die verglichen wird, und steht
   deshalb gross. Der tatsaechlich zu zahlende Gesamtbetrag darunter -- klein,
   aber vollstaendig lesbar. Er darf nicht verschwinden. */
.sty-preis{display:block}
.sty-preis__gross{
  display:block;
  font-size:1.35em;
  font-weight:700;
  line-height:1.2;
}
.sty-preis__gross .woocommerce-Price-amount{font-size:inherit;font-weight:inherit}
.sty-preis__klein{
  display:block;
  margin-top:.25rem;
  font-size:.8125rem;
  font-weight:400;
  line-height:1.45;
  letter-spacing:0;
  color:var(--sty-muted);
  text-transform:none;
}
.sty-flaeche--carbon .sty-preis__klein,
.sty-section--dark .sty-preis__klein{color:rgb(248 246 241 / .65)}

/* In der Produktliste bleibt es kompakt. */
.products .sty-preis__gross{font-size:1.15em}
.products .sty-preis__klein{font-size:.75rem}

/* Erklaerung zum Monatsbetrag auf der Produktseite. */
.sty-preishinweis{
  margin:.5rem 0 1.25rem;
  max-width:44rem;
  font-size:.8125rem;
  line-height:1.5;
  color:var(--sty-muted);
}

/* Das Portraet auf der Ueber-uns-Seite wird nicht zugeschnitten: Bei einem
   Bild von Menschen kostet ein fester Bildausschnitt schnell den Kopf. */
.sty-bild-bianca img{width:100%;height:auto;display:block}

/* =========================================================================
   Lesbarkeit: Schriftgroessen und Gewicht
   -------------------------------------------------------------------------
   Gemessen wirkten die Seiten kleinteilig: Fliesstext und Kartenbeschriftungen
   lagen bei 13-16px, die Coaching-Preise bei 24px, Schaltflaechen bei 14px.
   Angehoben wird gezielt und unterschiedlich stark -- kein Faktor ueber alles.

   Diese Werte galten zuerst nur auf der Startseite. Sie sind der Massstab fuer
   alle oeffentlichen Seiten und deshalb hier allgemein gesetzt: eine Regel
   statt einer Kopie je Seite.
   ========================================================================= */

/* --- Ueberschriften: mehr Praesenz --- */
.sty-section--hero .sty-title--large{
  /* Die Obergrenze lag bei 4.5rem und war ab 1200px erreicht -- die
     Überschrift wuchs auf breiten Schirmen also nicht mehr mit und wirkte
     dort kleiner, als der Einstieg sie braucht. */
  font-size:clamp(2.4rem,6vw,5.25rem);
  letter-spacing:-.02em;
}
.sty-title{font-size:clamp(1.8rem,3.6vw,2.9rem)}
.sty-eyebrow{font-size:.9375rem;letter-spacing:.14em}

/* --- Der Hero: der Einstieg soll tragen ---------------------------------
   Die Überschrift blieb bei 1440px an ihrer Obergrenze von 72px hängen und
   wirkte damit kleiner als der Rest der Seite verspricht. Sie darf jetzt bis
   84px wachsen; die Schaltflächen darunter wachsen mit, damit das Verhältnis
   stimmt und der erste Klick nicht verloren aussieht.

   Der Aufbau bleibt unverändert: Text links, Bild rechts, das STY-Logo an
   seinem Platz. Es ändern sich nur Größe und Abstände. */
.sty-section--hero .sty-lead{font-size:1.375rem;line-height:1.65}
/* Auf dem Telefon ist der Hero-Text die erste Spalte, die gelesen wird --
   22px ergeben dort nur noch gut 28 Zeichen je Zeile. Er faellt deshalb auf
   19px zurueck. Die allgemeine Mobilregel weiter unten greift hier nicht: der
   Hero-Selektor ist spezifischer und wuerde sie ueberstimmen. */
@media (max-width:640px){ .sty-section--hero .sty-lead{font-size:1.1875rem} }
.sty-section--hero .sty-eyebrow{font-size:1rem}

/* Mehr Luft zwischen Aussage und Handlung -- eng beieinander lesen sich die
   beiden als ein Block, und der Aufruf verliert sein Gewicht. */
.sty-section--hero .sty-aktionen{margin-top:clamp(26px,3vw,42px);gap:.85rem 1.1rem}
/* 2.4rem statt 2.75rem seitlich. Gemessen: mit 2.75rem waren die beiden
   Hero-Knoepfe zusammen 672px breit, die Spalte innen 675px -- sie passten
   nur deshalb nebeneinander, weil zwischen ihnen gar kein Abstand stand.
   Sobald der Abstand von 12px zurueckkam, brach die Zeile um. Mit 2.4rem
   sind es 650px plus 12px Abstand: sie stehen nebeneinander und haben
   wieder Luft. 2.4rem ist zugleich der Wert, den .sty-btn--lg ueberall
   sonst traegt -- eine Ausnahme weniger. Die groessere Schrift bleibt. */
.sty-section--hero .sty-btn--lg{font-size:1.1875rem;padding:1.35rem 2.4rem}

/* --- Fliesstext: 16-18px, gut lesbar --- */
.sty-lead{font-size:1.1875rem;max-width:42rem}
@media (min-width:768px){ .sty-lead{font-size:1.3125rem} }
.sty-copy{font-size:1.0625rem}

/* --- Karten und Beschriftungen --- */
.sty-karte__text,
.sty-thema__beschreibung{font-size:1.0625rem;line-height:1.6}
.sty-karte__titel,
.sty-thema__titel{font-size:1.1875rem}
.sty-thema__nummer{font-size:.8125rem;letter-spacing:.14em}

/* --- Aussagenleiste --- */
.sty-leiste__titel{font-size:1.0625rem}
.sty-leiste__text{font-size:1rem}

/* --- Zahlenzeile und Merkzeilen --- */
.sty-zahlen{font-size:.9375rem;letter-spacing:.1em}
.sty-merkzeile{font-size:.9375rem;line-height:1.7}

/* --- Zeitleiste --- */
.sty-zeitleiste__titel{font-size:1.0625rem}
.sty-zeitleiste__text{font-size:1rem}

/* --- Team --- */
.sty-person__rolle{font-size:.875rem;letter-spacing:.1em}
.sty-person__satz{font-size:1rem;line-height:1.6}

/* --- Coaching-Preiskarten: der Preis traegt die Entscheidung ---
   Der Abstand zwischen Preis und Monatsangabe war mit 1,875rem zu 1rem zu
   knapp -- beide lasen sich als eine Zeile. 2rem zu ,9375rem trennt sie
   klar, ohne dass die Karte hoeher wird. */
.sty-paket__titel{font-size:1.375rem}
.sty-paket__zusatz{font-size:1rem}
.sty-paket__preis{font-size:2rem;line-height:1.1}
.sty-paket__monat{font-size:.9375rem}
.sty-paket__leistungen li,
.sty-paket__leistungen span{font-size:1rem;line-height:1.55}
.sty-paket__hinweis,
.sty-pakete__fussnote{font-size:.875rem;line-height:1.5}
.sty-paket__marke{font-size:.75rem;letter-spacing:.1em}

/* --- Schaltflaechen und Textlinks --- */
.sty-btn{font-size:1rem;padding:.95rem 1.9rem}
.sty-btn--lg{font-size:1.125rem;padding:1.2rem 2.4rem}
.sty-textlink{font-size:1rem}

/* Auf schmalen Geraeten faellt alles wieder etwas zurueck, damit die
   Preiskarten und Modulkacheln nicht auseinanderlaufen. */
@media (max-width:640px){
  .sty-paket__preis{font-size:1.7rem}
  .sty-paket__titel{font-size:1.25rem}
  /* Weniger Innenabstand auf dem Telefon -- bei 358px Kartenbreite ginge
     sonst ein Fuenftel der Zeile an den Rand. */
  .sty-paket{padding:2rem 1.35rem 1.5rem}
  .sty-paket--hervorgehoben{padding-top:2.35rem}
  .sty-btn--lg{font-size:1rem;padding:1rem 1.6rem}
  .sty-lead{font-size:1.0625rem}
}

/* Die Modulkacheln auf der Masterclass-Seite tragen eigene Klassennamen und
   blieben bei 12-16px. Sie folgen jetzt demselben Massstab wie die Kacheln
   auf der Startseite. */
.sty-modul__nummer{font-size:.8125rem;letter-spacing:.14em}
.sty-modul__meta{font-size:.875rem}
.sty-modul__titel{font-size:clamp(1.15rem,1.6vw,1.45rem)}
.sty-modul__beschreibung{font-size:1.0625rem;line-height:1.6}

/* =========================================================================
   Bilder auf der Startseite: weiche Kanten
   -------------------------------------------------------------------------
   Kein Bild soll mit einer harten Kante in der Flaeche stehen. Zwei Mittel
   zusammen, weil eines allein nicht reicht:

   1. Abgerundete Ecken -- gegen den rechtwinkligen Ausschnitt.
   2. Eine Maske, die alle vier Raender nach aussen ausblenden laesst, damit
      das Bild in den Hintergrund uebergeht statt davor zu kleben.

   mask-image statt eines Verlaufs darueber: ein aufgelegter Verlauf muesste
   die Hintergrundfarbe kennen und waere auf der dunklen Flaeche falsch. Die
   Maske nimmt Deckkraft weg und funktioniert deshalb auf jedem Grund.

   mask-composite:intersect verbindet die beiden Verlaeufe so, dass nur
   sichtbar bleibt, was in BEIDEN deckend ist -- daher weiche Kanten ringsum
   statt nur oben und unten.

   Welche Seiten das bekommen, entscheidet die Koerperklasse
   sty-weiche-bilder -- vergeben in functions.php. Nicht jede Seite: wo
   Produktbilder oder Formulare stehen, waere ein ausgeblendeter Bildrand
   nicht automatisch richtig.
   ========================================================================= */

body.sty-weiche-bilder .sty-media img,
body.sty-weiche-bilder .ux-image img,
body.sty-weiche-bilder .img-inner img{
  border-radius:10px;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* Das Modulbild in den Themenkacheln bleibt scharf begrenzt: es sitzt in
   einer Kachel mit eigener Kante, ein ausgeblendeter Rand saehe dort aus
   wie ein Fehler. Nur die Ecken werden weich. */
body.sty-weiche-bilder .sty-thema__bild img{
  -webkit-mask-image:none;
  mask-image:none;
  border-radius:8px;
}

/* Die Personenbilder im Team sind klein und quadratisch -- dort genuegen
   runde Ecken. */
body.sty-weiche-bilder .sty-person__bild img{
  -webkit-mask-image:none;
  mask-image:none;
  border-radius:6px;
}

/* =========================================================================
   Schaltflaechen im UX Builder: gleiche Hoehe, gleiche Grundlinie
   -------------------------------------------------------------------------
   Auf einer UX-Builder-Seite stehen zwei Arten nebeneinander:

     [button …]                  -> <a class="button primary sty-btn …">
     [sty_produkt_button …]      -> <a class="sty-btn sty-btn--solid">

   Beide tragen .sty-btn, aber die erste zusaetzlich Flatsomes .button --
   und die setzt eine eigene, groessere Zeilenhoehe. Gemessen: 58px gegen
   50px bei identischem Polster und identischer Schriftgroesse, dazu 12px
   Hoehenversatz, weil die eine als Blockelement mit Aussenrand sitzt und die
   andere auf der Textgrundlinie.

   .sty-btn.button zaehlt zwei Klassen und gewinnt deshalb gegen Flatsomes
   eine. Ein !important waere hier der bequeme, aber falsche Weg: es wuerde
   auch jede spaetere, berechtigte Ausnahme erschlagen.
   ========================================================================= */

/* Gemessen waren es genau zwei Ursachen fuer 58px gegen 50px:
   der Flatsome-Knopf traegt 1px Rahmen, der Shortcode-Knopf keinen -- und
   der Pfeil sass nur auf einem von beiden, weil [sty_produkt_button] die
   Klasse sty-btn--solid ausgibt und nicht sty-btn--primary.

   Deshalb bekommen ALLE Knoepfe denselben Rahmen (unsichtbar, wo keiner
   gewollt ist) und denselben Pfeil. Was gleich aussehen soll, muss auch
   gleich gebaut sein. */
.sty-btn,
.sty-btn.button,
a.sty-btn.button{
  border:1px solid transparent;
  line-height:1.2;
  min-height:3rem;
  /* Kein margin:0 hier. Der Selektor a.sty-btn.button hat die Spezifitaet
     (0,2,1) und schlug damit die Abstandsregel darunter mit (0,2,0) -- auch
     wenn die spaeter steht, denn gezaehlt wird pro Einzelselektor. Gemessen
     sass deshalb auf der Startseite zwischen gestapelten Knoepfen exakt
     0px Luft. Was Flatsome an Rand mitbringt, setzt der naechste Block. */
}

/* Beide Arten sitzen jetzt auf derselben Linie und haben denselben Abstand
   zueinander -- unabhaengig davon, welche zuerst kommt. */
.sty-btn,
.sty-btn.button,
a.sty-btn.button{
  /* top statt middle: middle richtet an der Grundlinie des Elternteils aus,
     und die liegt bei den beiden Knopfarten unterschiedlich -- gemessen 6px
     Versatz. Bei gleicher Hoehe stellt top sie exakt nebeneinander.

     a.sty-btn.button steht mit in der Liste, damit diese Regel dieselbe
     Spezifitaet erreicht wie der Normalisierungsblock darueber und nicht
     wieder still ueberschrieben wird. */
  vertical-align:top;
  margin-right:.75rem;
  margin-bottom:.75rem;
}

/* In einer .sty-aktionen-Zeile uebernimmt der Flex-Abstand; dort sind die
   Aussenraender ueberfluessig und wuerden doppelt zaehlen. */
.sty-aktionen .sty-btn,
.sty-aktionen .sty-btn.button,
.sty-aktionen a.sty-btn.button{margin-right:0;margin-bottom:0}

/* =========================================================================
   Der Haupt-CTA
   -------------------------------------------------------------------------
   Nach dem Mockup: dunkle Flaeche, goldene Kante, goldener Text, ein Pfeil
   und ein zurueckhaltender Schein nach aussen.

   DER SCHEIN IST BEWUSST SCHWACH
   ------------------------------
   Im Mockup leuchtet der Knopf kraeftig -- das funktioniert auf einer
   schwarzen Flaeche und in einer Einzelansicht. Auf der Seite stehen oft
   zwei Knoepfe nebeneinander und darunter Karten; ein starker Schein zoege
   dort mehr Aufmerksamkeit als der Inhalt. Zwei weiche Schatten uebereinander
   statt eines harten: der innere gibt die Kontur, der aeussere den Hauch.

   AUF HELLEM GRUND
   ----------------
   Gold auf Off-White traegt nicht genug Kontrast, und ein goldener Schein
   verschwindet dort. Deshalb behaelt der Knopf auf hellen Flaechen seine
   gefuellte Form -- gleiche Groesse, gleiche Schrift, gleicher Pfeil, nur
   ohne Schein. Der Mockup-Look gilt dort, wo er gedacht war: im Dunkeln.
   ========================================================================= */

/* Die hervorgehobene Preiskarte ist eine dunkle Flaeche in einem hellen
   Abschnitt. Ihr Knopf gehoert deshalb hierher und nicht zu den hellen --
   aber die helle Regel weiter unten steht spaeter in der Datei und wuerde
   bei gleicher Spezifitaet gewinnen. Die Kartenklasse zaehlt deshalb mit:
   vier Klassen gegen drei. Es ist derselbe Stil, kein zweiter. */
.sty-section--dark .sty-btn.sty-btn--primary,
.sty-section--dark .sty-btn.sty-btn--solid,
.sty-flaeche--carbon .sty-btn.sty-btn--primary,
.sty-paket--hervorgehoben .sty-btn.sty-btn--primary.sty-paket__knopf{
  background:rgb(8 9 10 / .55);
  border:1px solid var(--sty-gold);
  color:var(--sty-gold);
  box-shadow:
    0 0 0 1px rgb(201 165 92 / .18),
    0 0 18px -2px rgb(201 165 92 / .28);
  transition:
    background-color .25s ease-out,
    border-color .25s ease-out,
    color .25s ease-out,
    box-shadow .25s ease-out,
    transform .2s ease-out;
}

@media (hover:hover) and (pointer:fine){
  .sty-section--dark .sty-btn.sty-btn--primary:hover,
  .sty-section--dark .sty-btn.sty-btn--solid:hover,
  .sty-flaeche--carbon .sty-btn.sty-btn--primary:hover,
  .sty-paket--hervorgehoben .sty-btn.sty-btn--primary.sty-paket__knopf:hover{
    background:rgb(201 165 92 / .12);
    border-color:var(--sty-gold-light);
    color:var(--sty-gold-light);
    box-shadow:
      0 0 0 1px rgb(216 185 111 / .3),
      0 0 26px -2px rgb(216 185 111 / .42);
  }
}

/* Der Pfeil. Ueber ::after statt im Text: so steht er nicht in jedem
   Redaktionsfeld und kann beim Bearbeiten nicht verlorengehen. Er ist
   Schmuck und deshalb fuer Vorlesewerkzeuge ausgeblendet. */
.sty-btn--primary::after,
.sty-btn--solid::after{
  content:"\2192";
  margin-left:.15em;
  font-size:1.1em;
  line-height:1;
  transition:transform .25s ease-out;
}

@media (hover:hover) and (pointer:fine){
  .sty-btn--primary:hover::after,
  .sty-btn--solid:hover::after{transform:translateX(3px)}
}

/* Kein Pfeil, wo der Knopf schon ein Symbol traegt oder wo er nur bestaetigt
   -- ein Pfeil verspricht dort einen Weg, den es nicht gibt. */
.sty-btn--primary[type="submit"]::after,
.sty-btn--primary.sty-btn--ohne-pfeil::after,
.sty-aktionen--formular .sty-btn--primary::after{content:none}

@media (prefers-reduced-motion:reduce){
  .sty-btn--primary::after,
  .sty-btn--solid::after{transition:none}
  .sty-btn--primary:hover::after,
  .sty-btn--solid:hover::after{transform:none}
}

/* --- Nachbesserungen zum CTA ------------------------------------------ */

/* Der Pfeil darf die Hoehe nicht bestimmen. Ohne feste Hoehe waechst der
   Knopf um die Zeilenbox des Glyphen -- gemessen 6px, und zwar nur bei dem
   Knopf, der zusaetzlich Flatsomes .button traegt. Eine feste Hoehe von 1em
   macht ihn zu einem Kaestchen, das nie groesser wird als der Text daneben. */
.sty-btn--primary::after,
.sty-btn--solid::after{
  display:inline-flex;
  align-items:center;
  height:1em;
  font-size:1em;
  line-height:1;
}



/* Auf dunklem Grund traegt jetzt der primaere Knopf die Umrissform. Ein
   gefuellter Zweitknopf daneben wuerde lauter rufen als er -- deshalb wird
   der sekundaere dort zurueckgenommen. */
.sty-section--dark .sty-btn.sty-btn--secondary,
.sty-flaeche--carbon .sty-btn.sty-btn--secondary{
  background:transparent;
  border-color:rgb(248 246 241 / .32);
  color:rgb(248 246 241 / .88);
  box-shadow:none;
}
@media (hover:hover) and (pointer:fine){
  .sty-section--dark .sty-btn.sty-btn--secondary:hover,
  .sty-flaeche--carbon .sty-btn.sty-btn--secondary:hover{
    border-color:var(--sty-gold);
    color:var(--sty-gold);
    background:transparent;
  }
}

/* Flatsomes [button] legt seinen Text in ein zusaetzliches <span>. Gemessen:
   drei Kindknoten statt einem, und dieses Span bringt eine eigene, hoehere
   Zeilenbox mit -- Inhalt 26px statt 19px, macht 6px Unterschied zum
   Shortcode-Knopf daneben.

   Das Span bekommt deshalb dieselbe Zeilenhoehe wie der Knopf selbst. Erst
   damit sind beide Arten wirklich gleich hoch, nicht nur scheinbar. */
.sty-btn.button > span{
  display:inline-flex;
  align-items:center;
  line-height:1.2;
}

/* =========================================================================
   Das Button-System
   -------------------------------------------------------------------------
   Nach dem Konzeptblatt. Drei Formen, klar nach Untergrund getrennt:

     DUNKLER GRUND   Hero und Kopfzeile: dunkle Flaeche, goldene Kante,
                     goldener Text, Pfeil, leichter Schein. Beide identisch --
                     derselbe naechste Schritt soll ueberall gleich aussehen.

     HELLER GRUND    Primaer: fast weisse Flaeche, goldene Kante, dunkler
                     Text, goldener Pfeil.
                     Sekundaer: Off-White-Flaeche, dunkle Kante, dunkler Text
                     und Pfeil.

   Auf hellen Flaechen gibt es damit keinen gefuellten Goldknopf mehr. Gold
   traegt dort die Kante und den Pfeil, nicht die Flaeche -- das ist der
   Unterschied zwischen "teuer" und "laut".
   ========================================================================= */

/* --- Kopfzeile: identisch mit dem Hero-CTA ---------------------------- */

.sty-kopf-cta,
.header .sty-btn--primary,
.header .button.primary{
  background:rgb(8 9 10 / .55);
  border:1px solid var(--sty-gold);
  color:var(--sty-gold);
  box-shadow:
    0 0 0 1px rgb(201 165 92 / .18),
    0 0 18px -2px rgb(201 165 92 / .28);
}
@media (hover:hover) and (pointer:fine){
  .sty-kopf-cta:hover,
  .header .sty-btn--primary:hover,
  .header .button.primary:hover{
    background:rgb(201 165 92 / .12);
    border-color:var(--sty-gold-light);
    color:var(--sty-gold-light);
    box-shadow:
      0 0 0 1px rgb(216 185 111 / .3),
      0 0 26px -2px rgb(216 185 111 / .42);
  }
}

/* Der Knopf sitzt in der Navigationszeile und muss dort hineinpassen.
   Etwas knapper gesetzt als im Hero -- gleiche Form, weniger Raum. */
/* Im Kopf ist der Knopf Navigation, nicht der Hero: gleiche Form, aber
   deutlich knapper gesetzt. Mit Pfeil und vollem Polster war er 250px breit
   und hat die Leiste auf zwei Zeilen gedrueckt. */
.sty-kopf-cta,
.header .sty-btn--primary,
.header .button.primary{
  min-height:2.5rem;
  padding:.45rem .9rem;
  font-size:.75rem;
  letter-spacing:.06em;
}
.sty-kopf-cta::after,
.header .sty-btn--primary::after,
.header .button.primary::after{font-size:.95em;margin-left:.1em}

/* --- Helle Flaechen: primaer ----------------------------------------- */

.sty-section--light .sty-btn.sty-btn--primary,
.sty-section--light .sty-btn.sty-btn--solid,
.sty-section--beige .sty-btn.sty-btn--primary,
.sty-section--beige .sty-btn.sty-btn--solid,
.sty-flaeche--weiss .sty-btn.sty-btn--primary{
  background:#fdfdfc;
  border:1px solid var(--sty-gold);
  color:var(--sty-ink);
  box-shadow:0 1px 2px rgb(17 18 20 / .05), 0 8px 20px -14px rgb(17 18 20 / .35);
}
.sty-section--light .sty-btn.sty-btn--primary::after,
.sty-section--light .sty-btn.sty-btn--solid::after,
.sty-section--beige .sty-btn.sty-btn--primary::after,
.sty-section--beige .sty-btn.sty-btn--solid::after,
.sty-flaeche--weiss .sty-btn.sty-btn--primary::after{color:var(--sty-gold-ink)}

/* Der Pfeil in der dunklen Preiskarte folgt dem Knopf, nicht dem hellen
   Abschnitt um ihn herum. currentColor statt eines eigenen Wertes: damit
   gibt es hier keine zweite Farbdefinition. */
.sty-paket--hervorgehoben .sty-btn.sty-btn--primary.sty-paket__knopf::after{color:currentColor}

@media (hover:hover) and (pointer:fine){
  .sty-section--light .sty-btn.sty-btn--primary:hover,
  .sty-section--light .sty-btn.sty-btn--solid:hover,
  .sty-section--beige .sty-btn.sty-btn--primary:hover,
  .sty-section--beige .sty-btn.sty-btn--solid:hover,
  .sty-flaeche--weiss .sty-btn.sty-btn--primary:hover{
    background:#fff;
    border-color:var(--sty-gold-ink);
    color:var(--sty-ink);
    box-shadow:0 1px 2px rgb(17 18 20 / .07), 0 12px 26px -14px rgb(17 18 20 / .45);
  }
}

/* --- Helle Flaechen: sekundaer --------------------------------------- */

.sty-section--light .sty-btn.sty-btn--secondary,
.sty-section--light .sty-btn.sty-btn--outline,
.sty-section--beige .sty-btn.sty-btn--secondary,
.sty-flaeche--weiss .sty-btn.sty-btn--secondary{
  background:var(--sty-beige-light);
  border:1px solid rgb(17 18 20 / .78);
  color:var(--sty-ink);
  box-shadow:0 1px 2px rgb(17 18 20 / .05), 0 8px 20px -14px rgb(17 18 20 / .3);
}
.sty-section--light .sty-btn.sty-btn--secondary::after,
.sty-section--light .sty-btn.sty-btn--outline::after,
.sty-section--beige .sty-btn.sty-btn--secondary::after,
.sty-flaeche--weiss .sty-btn.sty-btn--secondary::after{color:var(--sty-ink)}

@media (hover:hover) and (pointer:fine){
  .sty-section--light .sty-btn.sty-btn--secondary:hover,
  .sty-section--light .sty-btn.sty-btn--outline:hover,
  .sty-section--beige .sty-btn.sty-btn--secondary:hover,
  .sty-flaeche--weiss .sty-btn.sty-btn--secondary:hover{
    background:#fff;
    border-color:var(--sty-ink);
    color:var(--sty-ink);
  }
}

/* Der Pfeil gehoert laut Konzept auf beide Varianten -- er zeigt den
   naechsten Schritt an, nicht den Rang der Handlung. */
.sty-btn--secondary::after,
.sty-btn--outline::after{
  content:"\2192";
  display:inline-flex;
  align-items:center;
  height:1em;
  margin-left:.15em;
  font-size:1em;
  line-height:1;
  transition:transform .25s ease-out;
}
@media (hover:hover) and (pointer:fine){
  .sty-btn--secondary:hover::after,
  .sty-btn--outline:hover::after{transform:translateX(3px)}
}
@media (prefers-reduced-motion:reduce){
  .sty-btn--secondary::after,
  .sty-btn--outline::after{transition:none}
  .sty-btn--secondary:hover::after,
  .sty-btn--outline:hover::after{transform:none}
}

/* sty-chrome.css setzt die Textfarbe des Kopfzeilen-Knopfs spezifischer als
   die Regel oben. Hier steht sie mit drei Klassen -- damit gewinnt sie, ohne
   dass irgendwo ein !important noetig wird. */
.header .sty-kopf-cta.sty-btn{color:var(--sty-gold)}
.header .sty-kopf-cta.sty-btn::after{color:var(--sty-gold)}
@media (hover:hover) and (pointer:fine){
  .header .sty-kopf-cta.sty-btn:hover,
  .header .sty-kopf-cta.sty-btn:hover::after{color:var(--sty-gold-light)}
}

/* Der Pfeil bleibt im Kopf aussen vor.
   -------------------------------------------------------------------------
   Laut Konzept soll der Header-Knopf mit dem Hero-CTA identisch sein. Form,
   Farbe und Kante sind es auch. Der Pfeil aber macht ihn 250px breit, und
   damit passt die Navigationszeile bei 1440px nicht mehr in eine Zeile --
   gemessen brach sie auf vier Zeilen um.

   Zwischen "identischer Pfeil" und "Navigation bricht um" ist die Navigation
   wichtiger. Der Knopf traegt weiterhin dieselbe Form und dieselbe Farbe,
   nur ohne Pfeil.

   Sauber loesen liesse sich das mit einer kuerzeren Beschriftung im Kopf --
   etwa "Starten" statt "Masterclass starten". Das ist eine redaktionelle
   Entscheidung, keine technische. */
.sty-kopf-cta::after,
.header .sty-btn::after,
.header .button::after{content:none}

/* =========================================================================
   Was der UX Builder an fremden Regeln mitbringt
   -------------------------------------------------------------------------
   Seit die Startseite aus [section]/[row]/[col] besteht, liegen die
   Shortcode-Ausgaben in einer .col-inner. Damit greifen Flatsome-Regeln,
   die vorher nie gegriffen haben. Drei davon waren bei 390px sichtbar
   falsch. Alles hier ist Korrektur an fremden Regeln, kein neuer Stil.
   ========================================================================= */

/* 1. Listen der Shortcodes waren eingerueckt.
   -------------------------------------------------------------------------
   .col-inner ul li{margin-left:1.3em;margin-bottom:.6em} aus flatsome.css
   trifft jedes <li>, das die Shortcodes ausgeben -- und das sind Karten,
   keine Aufzaehlungspunkte. Gemessen: 22,1px Einzug bei 390px und 23,4px
   bei 1440px, dazu 10px Rand unten, die sich zum Rasterabstand addierten.

   Sichtbar war es an den Themenkarten: Ueberschrift und Knopf begannen bei
   39px, die Karten bei 61px.

   Die Flatsome-Regel steht bei (0,1,2) -- eine Klasse und zwei Elemente.
   Ein :where() um die Listenklassen waere auf (0,1,1) gefallen und haette
   verloren; gemessen blieben die 22px stehen. Deshalb zaehlen die Klassen
   hier voll mit: (0,2,1) gewinnt, und zwar unabhaengig davon, ob die Liste
   als ul oder ol ausgegeben wird. */
.col-inner .sty-leiste__liste > li,
.col-inner .sty-karten > li,
.col-inner .sty-themen__liste > li,
.col-inner .sty-module__liste > li,
.col-inner .sty-paket__leistungen > li,
.col-inner .sty-zeitleiste > li,
.col-inner .sty-team__liste > li{
  margin-left:0;
  margin-bottom:0;
}

@media (max-width:640px){

  /* 2. Der Seitenrand war auf der Startseite ein anderer als ueberall sonst.
     -----------------------------------------------------------------------
     Flatsome setzt 24px auf .row und 15px auf .col -- zusammen 39px. Die
     uebrigen Seiten arbeiten mit .sty-container und 16px. Gemessen waren
     das 312px Inhaltsbreite gegen 358px: ein Sprung von 46px beim
     Seitenwechsel.

     Die 24px kommen weg, die 15px werden auf 16px gehoben. Oben und unten
     bleibt alles wie es ist -- .col traegt dort einen eigenen Abstand.

     Der Fusszeilen-Abschnitt steht mit in der Liste: er ist ebenfalls ein
     UX-Builder-Abschnitt und lief mit 39px aus der Flucht -- auf allen
     Seiten, auch den noch nicht umgestellten. */
  .sty-section--light > .section-content > .row,
  .sty-section--dark > .section-content > .row,
  .sty-section--hero > .section-content > .row,
  .sty-footer > .section-content > .row{
    padding-left:0;
    padding-right:0;
  }
  .sty-section--light > .section-content > .row > .col,
  .sty-section--dark > .section-content > .row > .col,
  .sty-section--hero > .section-content > .row > .col,
  .sty-footer > .section-content > .row > .col{
    padding-left:16px;
    padding-right:16px;
  }

  /* 3. Eine rechtsbuendige Spalte neben lauter linksbuendigen.
     -----------------------------------------------------------------------
     [col align="right"] ist auf dem Schreibtisch richtig: die Spalte steht
     dort rechts neben dem Text. Sobald die Spalten untereinander stehen,
     ist es nur noch eine Zeile, die aus der Flucht faellt. Betroffen war
     der Knopf "Alle Themenwelten ansehen". */
  .sty-section--light .col-inner.text-right,
  .sty-section--dark .col-inner.text-right{text-align:left}

  /* 4. Knoepfe direkt in einer Spalte verhalten sich wie in .sty-aktionen.
     -----------------------------------------------------------------------
     Auf den uebrigen Seiten stehen sie in .sty-aktionen und sind dort ueber
     die volle Breite gestreckt. Im UX Builder gibt es diese Huelle nicht
     mehr -- gemessen standen sie mit 276px neben 300px und 274px neben
     233px nebeneinander, also ausgefranst. Volle Breite stellt beide
     Seitenarten wieder gleich; der Abstand von 12px kommt aus dem
     Aussenrand oben und entspricht dem Flex-Abstand von .sty-aktionen. */
  .col-inner > .sty-btn{
    display:flex;
    width:100%;
    margin-right:0;
  }
  .col-inner > .sty-btn:last-child{margin-bottom:0}
}


/* =========================================================================
   Mobiles Abstandssystem
   =========================================================================
   Gemessen bei 390px, vorher:

     Seitenrand           16px
     Sektion oben         30px, unten 60px  (30 Sektion + 30 Spalte)
     Uebergang Farbwechsel 90px, gleiche Farbe 60px
     Abstand Karten       Kacheln 20, Themen 24, Pakete 20
     Innenabstand Karten  Kacheln 40/32/36, Pakete 32/21,6/24
     Kennzahlen -> Kacheln 58px
     Preis -> Leistungen   54px
     Titel -> Lead (Hero)  13px, Lead -> Knopf 13px

   Es gab also kein System, sondern je Bauteil einen anderen Wert. Das ist
   der Grund fuer den unruhigen Eindruck -- nicht einzelne zu enge oder zu
   weite Stellen.

   Ab hier gelten vier Zahlen, und nur diese:

     24px   Seitenrand
     64px   zwischen zwei Sektionsinhalten
     20px   zwischen zwei Karten
     24px   innerhalb einer Karte zwischen Gruppen (8 fuer eng Zusammengehoerendes)

   Alles hier steht in einer Medienabfrage. Der Schreibtisch bleibt, wie er
   ist -- bis auf eine Ausnahme, die unten benannt ist.
   ========================================================================= */

@media (max-width:640px){

  /* -----------------------------------------------------------------------
     1. EIN Seitenrand: 24px

     Vorher 16px, und zwar bewusst: die UX-Builder-Seiten waren einmal auf
     die 16px von .sty-container gezogen worden, damit der Rand beim
     Seitenwechsel nicht springt. Diese Angleichung bleibt richtig -- sie
     wird nur auf 24px gehoben, und zwar auf BEIDEN Seitenarten gleichzeitig.
     Nur eine von beiden zu aendern risse genau den Sprung wieder auf, der
     damals behoben wurde.
     -------------------------------------------------------------------- */
  .sty-container{padding-inline:24px}

  .sty-section--light > .section-content > .row > .col,
  .sty-section--dark > .section-content > .row > .col,
  .sty-section--hero > .section-content > .row > .col,
  .sty-footer > .section-content > .row > .col{
    padding-left:24px;
    padding-right:24px;
  }

  /* -----------------------------------------------------------------------
     2. EIN Rhythmus zwischen Sektionen: 64px

     Die Rechnung: 32px Sektionspolster unten + 32px oben. Der Abstand von
     30px, den jede Spalte nach unten traegt, faellt bei der letzten Spalte
     einer Sektion weg -- sonst kaemen 94px heraus.

     Die Regel "zwei gleichfarbige Sektionen polstern nicht doppelt" gilt
     mobil nicht mehr. Auf dem Schreibtisch trennt sie zwei Bloecke derselben
     Farbe optisch zu einem; auf dem Telefon, wo ohnehin alles untereinander
     steht, erzeugte sie nur zwei verschiedene Uebergaenge: 90px bei
     Farbwechsel, 60px ohne. Ein Rhythmus ist besser als zwei.
     -------------------------------------------------------------------- */
  .section[class*="sty-section--"]:not(.sty-section--hero){padding-block:32px}

  .sty-section--dark + .sty-section--dark,
  .sty-section--light + .sty-section--light,
  .sty-section--beige + .sty-section--beige{padding-top:32px}

  .section[class*="sty-section--"] > .section-content > .row:last-child > .col:last-child{
    padding-bottom:0;
  }

  /* Dieselben 64px auf den Vorlagenseiten.

     Masterclass, Coaching und die uebrigen nicht im UX Builder gebauten
     Seiten benutzen .sty-section mit der Basisklasse -- dort greift
     --sty-section-y, mobil 64px oben UND unten. Zwischen zwei Abschnitten
     waren das 128px, also genau das Doppelte der UX-Builder-Seiten. Beim
     Wechsel von der Startseite auf die Masterclass-Seite sprang der
     Rhythmus.

     Der Hero behaelt seine 56px -- ein Einstieg darf mehr Luft haben. */
  .sty-section:not(.sty-section--hero){padding-block:32px}

  /* Und dieselbe Regel wie bei den Spalten: das letzte Element eines
     Abschnitts gibt seinen Aussenabstand ab. Gemessen sprangen einzelne
     Uebergaenge sonst auf 86px, je nachdem, ob der Abschnitt mit einem
     Absatz, einer Liste oder einer Karte endet. */
  .sty-section .sty-container > :last-child{margin-bottom:0}

  /* -----------------------------------------------------------------------
     3. Der Hero

     Er behaelt sein groesseres Polster -- ein Einstieg darf mehr Luft haben
     als eine Zwischensektion. Innen wird die Staffelung sauber gestuft:
     Augenbraue 16 zum Titel, Titel 16 zum Text, Text 24 zu den Knoepfen.
     Gemessen waren es 16 / 13 / 13, also praktisch kein Unterschied
     zwischen "gehoert eng zusammen" und "hier beginnt die Handlung".
     -------------------------------------------------------------------- */
  .sty-section--hero .sty-title{margin-bottom:16px}
  .sty-section--hero .sty-lead{margin-bottom:24px}

  /* Zwei grosse Knoepfe untereinander: gleicher Abstand wie zwischen
     Karten waere zu viel, 12px sind der kleine Abstand des Systems. */
  .sty-section--hero .col-inner > .sty-btn{margin-bottom:12px}

  /* -----------------------------------------------------------------------
     4. Vorteilsreihe (Ganzheitlicher Ansatz / Wissenschaftlich fundiert /
        Echte Erfahrung)

     Titel und Unterzeile standen 5px auseinander und lasen sich als ein
     Absatz. 8px ist der kleine Abstand: nah genug, um zusammenzugehoeren,
     weit genug, um zwei Dinge zu sein.
     -------------------------------------------------------------------- */
  .sty-leiste__titel{margin-bottom:8px}
  .sty-leiste__liste > li{padding-block:20px}

  /* -----------------------------------------------------------------------
     5. Kacheln (Fundiertes Wissen / Klare Orientierung / Umsetzbare
        Strategien)

     Innen 40 oben, 32 seitlich, 36 unten -- drei verschiedene Werte in einer
     Kachel. Bei 342px Kartenbreite gingen allein 64px an den seitlichen
     Innenabstand. Jetzt 28/24, symmetrisch.
     -------------------------------------------------------------------- */
  .sty-karte{padding:28px 24px}
  .sty-karten{gap:20px}
  .sty-karte__symbol{margin-bottom:20px}
  .sty-karte__titel{margin-bottom:8px}

  /* -----------------------------------------------------------------------
     5b. Abschnittskopf zu Kartenbereich: EIN Abstand statt drei

     Gemessen standen zwischen Kennzahlenblock und erster Kachel 82px. Die
     setzten sich zusammen aus:

       24px  Aussenabstand von .sty-zahlen
       30px  Spaltenpolster von Flatsome
       28px  .sty-kopf--ueber -- unsere eigene, gewollte Regel

     Nur die dritte war beabsichtigt. Die beiden anderen wuchsen unbemerkt
     dazu, weil der Kopf eine eigene Spalte ist und Spalten in Flatsome
     grundsaetzlich nach unten polstern.

     .sty-zahlen ist ausserdem inline-block und sass auf einer Textgrundlinie:
     unter ihm stand zusaetzlich die Unterlaenge seiner Zeile. Als Block hat
     es keine mehr.

     Ab hier bestimmt der Kopf den Abstand, und sonst niemand.
     -------------------------------------------------------------------- */
  .sty-zahlen{display:block}

  /* Das letzte Element einer Spalte gibt seinen Aussenabstand ab.

     Das ist die eine Regel, die den ganzen Stapelfehler aufloest: in einer
     gestapelten Spalte steht unter dem letzten Absatz ohnehin schon das
     Spaltenpolster. Sein margin-bottom kommt dort oben drauf und ist der
     Grund, warum fast jeder Uebergang zwischen zwei Spalten einen anderen
     Wert hatte -- er haengt davon ab, welches Element zufaellig zuletzt
     steht. */
  .section[class*="sty-section--"] .col-inner > :last-child{margin-bottom:0}

  /* Gestapelte Spalten folgen demselben Mass wie der Rest: 24 statt 30.
     Ausgenommen der Abschnittskopf -- er bringt seinen eigenen, groesseren
     Abstand zum Kartenbereich mit, und zwei davon waeren wieder doppelt. */
  .sty-section--light > .section-content > .row > .col:not(.sty-kopf),
  .sty-section--dark > .section-content > .row > .col:not(.sty-kopf),
  .sty-section--hero > .section-content > .row > .col:not(.sty-kopf){padding-bottom:24px}

  .col.sty-kopf{padding-bottom:0;margin-bottom:24px}

  /* -----------------------------------------------------------------------
     6. Modulkarten "Was die Masterclass abdeckt"
     -------------------------------------------------------------------- */
  .sty-themen__liste{gap:20px}
  .sty-thema__nummer{margin-bottom:8px}
  .sty-thema__titel{margin-bottom:8px}

  /* Die Liste trug 48px Aussenabstand nach oben -- zusammen mit dem
     Spaltenpolster von 24 standen 72px zwischen Einleitung und erster
     Karte. Den Abstand bestimmt die Spalte. */
  .sty-themen__liste{margin-top:0}

  /* -----------------------------------------------------------------------
     7. Preisboxen

     32 oben, 21,6 seitlich, 24 unten. Der krumme Wert stammt aus einer
     rem-Rechnung, die nie fuer das Telefon gedacht war. Und zwischen Preis
     und Leistungsliste klafften 54px, waehrend Titel und Preis 22px
     auseinander standen -- die Karte zerfiel optisch in zwei Haelften.
     -------------------------------------------------------------------- */
  .sty-paket{padding:28px 24px}
  .sty-paket--hervorgehoben{padding-top:32px}
  .sty-pakete{gap:20px}

  /* Preis und Monatszeile gehoeren zusammen -- sie standen 30px
     auseinander und lasen sich als zwei Angaben. Die Monatszeile bringt
     ihren eigenen kleinen Abstand mit, der reicht. */
  .sty-paket__preis{margin-bottom:0}

  /* Die Leistungsliste traegt den Trenner als border-top. Ihr Aussenabstand
     UND ihr Innenabstand betrugen je 24px -- zusammen 48px ueber dem ersten
     Punkt. Der Trenner braucht nur einen der beiden: oben der Abstand zur
     Monatszeile, unten der Innenabstand zur Liste. */
  .sty-paket__leistungen{margin-block:24px 0;padding-top:24px}
  .sty-paket__details{margin-top:24px}
  .sty-paket__hinweis{margin-top:24px}

  /* -----------------------------------------------------------------------
     8. Knoepfe in einer UX-Builder-Spalte

     Bestand schon: volle Breite, damit sie nicht ausgefranst nebeneinander
     stehen. Ergaenzt wird nur die Trefferflaeche -- 48px ist das Mass, unter
     dem ein Ziel auf einem Telefon unzuverlaessig wird.
     -------------------------------------------------------------------- */
  .col-inner > .sty-btn{min-height:48px;align-items:center;justify-content:center}

  /* Das Abstandselement des UX Builders bringt 32px mit. Es steht zwischen
     einem Kartenbereich und dem Knopf darunter -- dort gilt 24. */
  .col-inner > .gap-element{padding-top:24px}
}


/* =========================================================================
   Mobile Reihenfolge: "Alle Themenwelten ansehen" unter die Karten
   =========================================================================
   Auf dem Schreibtisch steht der Knopf rechts neben der Ueberschrift -- eine
   Zeile, zwei Spalten, und er ist dort gut aufgehoben.

   Sobald die Spalten untereinander stehen, wird daraus eine Aufforderung,
   die man liest, BEVOR man weiss, worum es geht. Gemessen standen zwischen
   Einleitung und Knopf 52px und zwischen Knopf und erster Karte 90px: der
   Knopf sass allein in einem 142px hohen Loch.

   Er wandert deshalb ans Ende -- dorthin, wo man ihn braucht: nachdem man
   die drei Module gesehen hat.

   WIE
   ---
   Die beiden Zeilen (Ueberschrift+Knopf, Kartenliste) werden zu Geschwistern
   gemacht: .section-content wird Flexspalte, die .row dazwischen bekommen
   display:contents und verschwinden als Rasterebene. Danach laesst sich mit
   order sortieren.

   Nur bis 549px -- das ist die Breite, unterhalb derer Flatsome die Spalten
   stapelt. Darueber steht der Knopf wieder neben der Ueberschrift, und dort
   soll er bleiben.
   ========================================================================= */

@media (max-width:549px){
  section:has(.sty-themen__liste) > .section-content{
    display:flex;
    flex-direction:column;
  }
  section:has(.sty-themen__liste) > .section-content > .row{display:contents}

  /* Ueberschrift und Einleitung bleiben auf 0 (Vorgabe). */
  section:has(.sty-themen__liste) .col:has(.sty-themen__liste){order:2}
  section:has(.sty-themen__liste) .col:has(> .col-inner > .sty-btn){order:3}

  /* Der Knopf schliesst den Abschnitt ab und braucht keinen Spaltenabstand
     mehr unter sich -- das Sektionspolster steht schon darunter.

     Der Selektor ist absichtlich so lang: die allgemeine Spaltenregel
     weiter oben ist vierteilig und gewinnt sonst. Gemessen blieben dadurch
     24px unter dem Knopf stehen, und der Uebergang zur naechsten Sektion
     war 88px statt 64. */
  .sty-section--light:has(.sty-themen__liste) > .section-content > .row > .col:has(> .col-inner > .sty-btn){
    padding-top:24px;
    padding-bottom:0;
  }
  .sty-section--light:has(.sty-themen__liste) > .section-content > .row > .col:has(.sty-themen__liste){padding-bottom:0}
}