/* =========================================================================
   STY Seitenbaukasten
   -------------------------------------------------------------------------
   Die Klassen, mit denen öffentliche Seiten im WordPress-Editor gebaut werden.
   Wer eine neue Seite anlegt, schreibt HTML mit diesen Klassen und bekommt
   das bestehende STY-Design, ohne eine Zeile CSS zu schreiben.

   KEINE ZWEITE DESIGNBIBLIOTHEK
   -----------------------------
   Das Projekt trug bisher deutsche Klassennamen (.sty-flaeche, .sty-karte,
   .sty-h--editorial). Diese Datei führt die im Auftrag festgelegten Namen
   (.sty-section, .sty-card, .sty-title) ein und schreibt BEIDE in dieselbe
   Regel. Es entstehen keine zwei Systeme mit eigenem Verhalten, sondern ein
   System mit zwei Namen. Die alten Namen bleiben nötig, solange Kopf- und
   Fußzeile als UX Blocks bestehen.

   Für neue Seiten gelten die Namen aus STY-SEITENBAUKASTEN.md.

   Alle Werte kommen aus den Tokens in sty-base.css. Hier stehen keine eigenen
   Farben und keine eigenen Schriftgrößen.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Layout: Container und Raster
   ---------------------------------------------------------------------- */

.sty-container{
  width:100%;
  max-width:var(--sty-container);
  margin-inline:auto;
  padding-inline:clamp(16px,3vw,30px);
}
/* Für Fließtext: schmaler, damit Zeilen lesbar bleiben. */
.sty-container--narrow{max-width:52rem}
.sty-container--wide{max-width:none;padding-inline:clamp(16px,4vw,64px)}

.sty-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(16px,2.2vw,32px);
}
.sty-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sty-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sty-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Zwei ungleiche Spalten, z. B. Text neben Bild. */
.sty-grid--split{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
/* Überschrift, Erzählung, Bild -- in dieser Reihenfolge.
   Zu dritt gleich breit blieben der Erzählung bei 1440px nur 399px, also rund
   34 Zeichen je Zeile. Das liest sich wie eine Spalte in einer Zeitung, nur
   ohne deren Schriftgröße. Die mittlere Spalte bekommt deshalb mehr Gewicht.

   Warum nicht noch mehr: Die Überschriftenspalte muss das längste Wort der
   Überschrift tragen. "ANGEFANGEN." ist bei 46px rund 333px breit, und ein
   Wort bricht nicht um. Bei 3fr blieben der Spalte 276px, und das Wort stand
   57px über ihrem Rand hinaus -- sichtbar, aber ohne waagerechten Rollbalken,
   also leicht zu übersehen. 5fr geben ihr 342px und damit gerade genug. */
.sty-grid--erzaehlung{grid-template-columns:minmax(0,5fr) minmax(0,7fr) minmax(0,5fr)}
.sty-grid--split-links{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.sty-grid--oben{align-items:start}
.sty-grid--mitte{align-items:center}

/* -------------------------------------------------------------------------
   Sektionen
   ---------------------------------------------------------------------- */

.sty-section,
.sty-flaeche{
  position:relative;
  padding-block:var(--sty-section-y);
}
.sty-section--compact{padding-block:clamp(28px,3vw,48px)}
.sty-section--large{padding-block:clamp(64px,7vw,120px)}
.sty-section--flush{padding-block:0}

.sty-section--dark,
.sty-flaeche--carbon{background-color:var(--sty-carbon);color:var(--sty-white)}
.sty-section--light,
.sty-flaeche--weiss{background-color:var(--sty-white);color:var(--sty-ink)}
.sty-section--beige,
.sty-flaeche--beige{background-color:var(--sty-beige-light);color:var(--sty-ink)}
.sty-section--gold{background-color:var(--sty-gold);color:var(--sty-carbon)}

.sty-section--dark h1,.sty-section--dark h2,.sty-section--dark h3,
.sty-section--dark .sty-title{color:var(--sty-white)}
.sty-section--gold .sty-eyebrow{color:var(--sty-carbon)}
.sty-section--gold .sty-title{color:var(--sty-carbon)}

/* Zwei gleichfarbige Sektionen hintereinander sollen nicht doppelt polstern. */
.sty-section--dark + .sty-section--dark,
.sty-section--light + .sty-section--light,
.sty-section--beige + .sty-section--beige{padding-top:0}

/* -------------------------------------------------------------------------
   Typografie
   ---------------------------------------------------------------------- */

.sty-title,
.sty-h--editorial{
  margin:0 0 .5em;
  font-family:var(--sty-font-display);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.01em;
  font-size:clamp(1.6rem,3.2vw,2.6rem);
}
.sty-title--large{font-size:clamp(2.1rem,5.5vw,4rem)}
.sty-title--small{font-size:clamp(1.25rem,2vw,1.6rem)}
.sty-section-title{
  margin:0 0 1.25rem;
  font-family:var(--sty-font-display);
  font-weight:700;
  font-size:clamp(1.15rem,1.8vw,1.5rem);
  line-height:1.2;
}

.sty-copy{margin:0 0 1em;line-height:1.7}
.sty-copy:last-child{margin-bottom:0}
.sty-copy > * + *{margin-top:1em}
.sty-muted{color:var(--sty-muted)}
.sty-section--dark .sty-muted{color:rgb(248 246 241 / .6)}

/* Kopfzeile einer Sektion: Augenbraue, Titel, Einleitung. */
.sty-kopf{margin-bottom:clamp(24px,3vw,44px)}
.sty-kopf--mitte{text-align:center;margin-inline:auto;max-width:44rem}
.sty-kopf--breit{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem}

/* Kopf über breiten Karten.
   -------------------------------------------------------------------------
   Für Abschnitte, in denen Überschrift und Einleitung über einer Kartenreihe
   stehen, die die ganze Inhaltsbreite nutzt.

   Der Kopf wandert dabei nicht mit in die Breite: eine Überschrift über
   1260px zerfällt in eine Zeile, die das Auge nicht mehr als Block liest, und
   ein Fließtext über dieselbe Strecke ist schlicht unlesbar. Titel und
   Einleitung behalten deshalb ihr eigenes Maß, während die Karten darunter
   die volle Breite bekommen.

   38rem für die Einleitung entspricht etwa 65 Zeichen je Zeile -- die Spanne,
   in der das Auge den Zeilenanfang noch zuverlässig wiederfindet. */
.sty-kopf--ueber{margin-bottom:clamp(28px,3.4vw,52px)}
.sty-kopf--ueber .sty-title{max-width:24ch}
.sty-kopf--ueber .sty-lead{max-width:38rem}

/* -------------------------------------------------------------------------
   Karten
   ---------------------------------------------------------------------- */

.sty-card,
.sty-karte{
  display:flex;
  flex-direction:column;
  padding:clamp(20px,2.2vw,32px);
  background:var(--sty-white);
  border:1px solid var(--sty-karte-kante-hell);
  border-radius:var(--sty-karte-radius);
}
.sty-section--dark .sty-card,
.sty-section--dark .sty-karte{
  background:var(--sty-graphite);
  border-color:var(--sty-karte-kante-dunkel);
  color:var(--sty-white);
}

/* Hervorgehobene Karte, z. B. der empfohlene Tarif. */
.sty-card--feature{
  border-color:var(--sty-gold);
  box-shadow:var(--sty-karte-schatten);
}
/* Karte mit Bild oben: das Bild sitzt bündig an der Kante. */
.sty-card--media{padding:0;overflow:hidden}
.sty-card--media .sty-card__text{padding:clamp(18px,2vw,26px)}
/* Dunkle Kachel mit Bild im Hintergrund, z. B. ein Modul. */
.sty-card--module{
  position:relative;
  justify-content:flex-end;
  min-height:16rem;
  padding:clamp(18px,2vw,26px);
  background:var(--sty-carbon);
  color:var(--sty-white);
  overflow:hidden;
}
.sty-card--coach{gap:.75rem;text-align:center;align-items:center}
.sty-card--pricing{gap:.5rem}

.sty-card__titel{margin:0 0 .4rem;font-size:1.125rem;font-weight:700;line-height:1.3}
.sty-card__text{margin:0;line-height:1.6;color:var(--sty-muted)}
.sty-section--dark .sty-card__text{color:rgb(248 246 241 / .72)}
/* Alles, was unten bündig stehen soll: Preis, Knopf, Fußzeile der Karte. */
.sty-card__fuss{margin-top:auto;padding-top:1.25rem}

/* Gleich hohe Karten in einer Rasterzeile. */
.sty-grid--gleich{grid-auto-rows:1fr}
.sty-grid--gleich > *{height:100%}

/* -------------------------------------------------------------------------
   Medien
   ---------------------------------------------------------------------- */

.sty-media{display:block;overflow:hidden;margin:0}
.sty-media img{display:block;width:100%;height:auto}
.sty-media--cover{aspect-ratio:16/9}
.sty-media--square{aspect-ratio:1/1}
.sty-media--portrait{aspect-ratio:3/4}
.sty-media--cover img,
.sty-media--square img,
.sty-media--portrait img{height:100%;object-fit:cover}

/* Weicher Auslauf zur Fläche hin. mask-image statt Verlauf darüber: so
   bleibt der Übergang auf jeder Hintergrundfarbe richtig. */
.sty-media--fade img{
  -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 55%,transparent 100%);
}
.sty-media--fade-unten img{
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 55%,transparent 100%);
}

/* Bild, das über die Containerkante hinausläuft (Widescreen-Wirkung). */
.sty-media--bleed-rechts{margin-right:calc(50% - 50vw)}
.sty-media--bleed-links{margin-left:calc(50% - 50vw)}

/* Hintergrundbild einer Sektion. Die Adresse kommt als Variable aus der
   Mediathek (sty_child_media_variables), nicht als Inline-Style. */
.sty-section--bild{overflow:hidden}
.sty-section--bild > *{position:relative;z-index:2}
.sty-section--bild::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--sty-bild);
  background-size:cover;
  background-position:center;
  opacity:var(--sty-bild-deckung,.3);
  z-index:0;
}
.sty-section--bild::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,var(--sty-carbon) 0%,rgb(8 9 10 / .8) 50%,rgb(8 9 10 / .45) 100%);
  z-index:1;
}

/* -------------------------------------------------------------------------
   Schaltflächen
   ---------------------------------------------------------------------- */

.sty-btn--primary{
  background:var(--sty-gold);
  border:1px solid var(--sty-gold);
  color:var(--sty-carbon);
}
.sty-btn--primary:hover{background:var(--sty-gold-light);border-color:var(--sty-gold-light)}
.sty-btn--secondary{
  background:transparent;
  border:1px solid currentColor;
  color:inherit;
}
.sty-btn--secondary:hover{border-color:var(--sty-gold);color:var(--sty-gold)}
.sty-btn--ghost{
  background:transparent;
  border:1px solid transparent;
  color:inherit;
  padding-inline:0;
}
.sty-btn--ghost:hover{color:var(--sty-gold)}

/* Mehrere Schaltflächen nebeneinander. */
.sty-aktionen{display:flex;flex-wrap:wrap;gap:.75rem 1rem;margin-top:clamp(20px,2.4vw,32px)}
.sty-aktionen--mitte{justify-content:center}

/* -------------------------------------------------------------------------
   Listen
   ---------------------------------------------------------------------- */

/* Derselbe Flatsome-Einzug trifft auch Listen im Seiteninhalt. Wo bewusst
   keine Aufzeichnungspunkte stehen, gehoert kein Einzug hin. */
.sty-liste{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.sty-liste > li{margin-left:0}
.sty-card ul,
.sty-card ol{list-style:none;margin:0;padding:0}
.sty-card ul > li,
.sty-card ol > li{margin-left:0}
.sty-liste--haken li{position:relative;padding-left:1.9rem;line-height:1.6}
.sty-liste--haken li::before{
  content:"";
  position:absolute;
  left:0;
  top:.45em;
  width:.85rem;
  height:.85rem;
  border-radius:50%;
  background:var(--sty-gold);
}

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */

@media (max-width:1024px){
  .sty-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sty-grid--split,
  .sty-grid--split-links,
  .sty-grid--erzaehlung{grid-template-columns:minmax(0,1fr)}
  .sty-media--bleed-rechts,
  .sty-media--bleed-links{margin-inline:0}
}

@media (max-width:860px){
  .sty-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sty-kopf--breit{display:block}
  .sty-kopf--breit > * + *{margin-top:1rem}
}

@media (max-width:640px){
  .sty-grid--2,
  .sty-grid--3,
  .sty-grid--4{grid-template-columns:minmax(0,1fr)}
  /* Auf dem Telefon laufen Schaltflächen über die volle Breite: größere
     Trefferfläche, keine halb leere Zeile. */
  .sty-aktionen{flex-direction:column;align-items:stretch}
  .sty-aktionen .sty-btn{justify-content:center;width:100%}
  .sty-card--module{min-height:13rem}
}

/* -------------------------------------------------------------------------
   Bild hinter einer Sektion
   -------------------------------------------------------------------------
   Das Bild steht als eigenes Element im Seiteninhalt, nicht als Inline-Style
   und nicht im Theme verdrahtet. Es ist damit im Editor sichtbar und
   austauschbar; die Gestaltung liegt hier.
   ---------------------------------------------------------------------- */

.sty-section__hintergrund{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.sty-section__hintergrund figure,
.sty-section__hintergrund img{
  width:100%;
  height:100%;
  margin:0;
  object-fit:cover;
  aspect-ratio:auto;
}
/* Das Bild selbst laeuft nach unten weich aus. mask-image statt eines
   Verlaufs darueber: so verschwindet die Bildkante wirklich, statt von einer
   zweiten Flaeche ueberdeckt zu werden -- das funktioniert auf jeder
   Hintergrundfarbe und auch dort, wo die naechste Sektion hell ist. */
.sty-section__hintergrund img{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,rgb(0 0 0 / .45) 82%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 55%,rgb(0 0 0 / .45) 82%,transparent 100%);
}

/* Abdunkeln, damit heller Text auf jedem Motiv lesbar bleibt. Der Verlauf
   laeuft nach rechts UND nach unten aus, damit unten keine Kante entsteht. */
.sty-section__hintergrund::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgb(8 9 10 / 0) 55%,var(--sty-carbon) 100%),
    linear-gradient(90deg,var(--sty-carbon) 0%,rgb(8 9 10 / .82) 45%,rgb(8 9 10 / .5) 100%);
}
.sty-section--light .sty-section__hintergrund::after{
  background:linear-gradient(90deg,var(--sty-white) 0%,rgb(248 246 241 / .8) 45%,rgb(248 246 241 / .5) 100%);
}
/* Alles außer dem Hintergrund liegt darüber. */
.sty-section > .sty-container{position:relative;z-index:1}

.sty-section--hero{padding-block:clamp(56px,8vw,130px)}
.sty-section--hero .sty-title--large{margin-bottom:.35em}

/* -------------------------------------------------------------------------
   Sichtbarkeit nach Breite
   -------------------------------------------------------------------------
   Sparsam einsetzen: In aller Regel soll derselbe Inhalt sich anpassen,
   nicht zweimal existieren. Nur wo eine Sektion am Telefon einen anderen
   Aufbau braucht -- etwa der Shop-Kopf -- lohnen zwei Fassungen.
   ---------------------------------------------------------------------- */

.sty-nur-mobil{display:block}
.sty-ab-tablet{display:none}

@media (min-width:768px){
  .sty-nur-mobil{display:none}
  .sty-ab-tablet{display:block}
}

/* --- Shop: die drei Wege als eine Kachel (nur Telefon) --- */
.sty-shopbanner-mobil{padding-block:clamp(28px,7vw,44px)}
.sty-shopbanner-mobil .sty-title{
  margin-bottom:1.25rem;
  font-size:clamp(1.5rem,7vw,2rem);
}

.sty-shopwege{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid rgb(248 246 241 / .14);
}
.sty-shopwege > li{margin-left:0}
.sty-shopwege a{
  display:block;
  padding:.95rem 0;
  border-bottom:1px solid rgb(248 246 241 / .14);
  color:inherit;
  text-decoration:none;
}
.sty-shopwege__titel{
  display:block;
  font-size:1.0625rem;
  font-weight:700;
  color:var(--sty-gold);
}
.sty-shopwege__titel::after{
  content:" →";
  color:rgb(248 246 241 / .5);
}
.sty-shopwege__text{
  display:block;
  margin-top:.15rem;
  font-size:.875rem;
  line-height:1.5;
  color:rgb(248 246 241 / .7);
}