/* SFKS — handgepflegte Ergänzungen zum vendorten Webflow-CSS.
 * (webflow.css ist kompiliert/generiert — eigene Regeln leben hier.)
 */

/* ---------------------------------------------------------------------------
 * Männeken-Illustrationen auf der Landing (.layout357_image, zwei Stück:
 * «Problem»-Selfie .is-mirrored und «Unser Ziel»-Figur mit der Pakt-Bubble)
 * — Kundenwunsch 2026-08: rund 15 % grösser.
 *
 * Warum hier und nicht in src/html/: public/ überlebt den Re-Run der
 * Crawl-Pipeline (transform-pages.py löscht src/html/ komplett).
 *
 * Warum genau 15 %: das ist der grösste einheitliche Faktor, bei dem die
 * Ziel-Figur samt Bubble auf der schmalsten Desktop-Spalte (Viewport 992 px)
 * noch im Viewport bleibt — dort bleiben ~8 px Luft, wie heute schon.
 *
 * Wo NICHT vergrössert wird und warum:
 *  - Hero (.header-image-left/-right): randlos und in beide Richtungen hart
 *    begrenzt (Bildbreite = 50 vw bzw. 100 vw, Bildhöhe = Resthöhe des
 *    Heros). Jede Vergrösserung erzeugt Überlauf oder frisst die Headline an.
 *  - Ziel-Figur auf breitem Desktop: die Sektion ist auf volle Viewporthöhe
 *    komponiert — Figur-Oberkante liegt bei 40vh, Figurhöhe bei 60vh, die
 *    Füsse stehen exakt auf der Viewport-Unterkante. Höher heisst dort
 *    abgeschnittene Füsse. Deshalb ist die Figurhöhe bei 60vh gedeckelt; der
 *    Zuwachs greift nur, wo die Spalte (nicht die Höhe) die Grenze war, also
 *    zwischen ~992 und ~1150 px Viewportbreite und auf hohen Viewports.
 * ------------------------------------------------------------------------ */

/* Kleine Pakt-Zahl-Bubble in der Hand des Männekens (Landing, «Unser Ziel»).
 * Zahl = unterzeichnete Elternpakte im Schuljahr 2025/26 (statisch, 1'601).
 * Positionierung relativ zum .layout357_image-wrapper; der Wrapper deckt sich
 * auf allen Breakpoints mit dem Bildinhalt, deshalb sind Prozente hier
 * Prozente der Figur. Anker = Hand unten rechts bei ~94 % / ~66 %. */
.stoerer-elternpakt.stoerer-elternpakt-hand {
  width: 8rem;
  height: 8rem;
  top: 66.7%;
  left: 94.1%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.stoerer-elternpakt-hand .stoerer-hand-zahl {
  font-size: 1.6rem;
  line-height: 1.1;
  margin: 0;
}

.stoerer-elternpakt-hand .stoerer-hand-label {
  font-size: 0.75rem;
  line-height: 1.25;
  margin: 0.25rem 0 0;
}

@media screen and (min-width: 992px) {
  /* Ziel-Figur (mit Bubble): Box hugt neu den Bildinhalt (width gesetzt,
   * height:auto → intrinsisches 944:1250). Vorher war die Box 100 % × 60vh
   * und object-fit:contain hat je nach Viewport-Verhältnis mal in der Breite,
   * mal in der Höhe gepasst — die Bubble war nur im höhen-gebundenen Fall
   * richtig kalibriert und rutschte zwischen ~992 und ~1250 px Viewport neben
   * die Figur bzw. aus dem Bild (public/css/custom.css war dort schon vor
   * dieser Änderung daneben). Mit einer Box, die immer dem Bildinhalt
   * entspricht, gibt es nur noch einen Fall und die Bubble sitzt über
   * einfache Prozente sicher auf der Hand.
   *
   *   --fig-w = min(115 % der Spalte, 45.312vh)
   *             115 %    = +15 % Breite, ragt 7.5 % in die 80-px-Spaltenlücke
   *             45.312vh = 0.7552 × 60vh — Höhen-Deckel, damit die Füsse
   *                        weiterhin genau auf der Viewport-Unterkante stehen
   * Rechtsbündig, damit die Figur nach links in die Spaltenlücke wächst und
   * die Bubble am rechten Rand nicht abgeschnitten wird. */
  .layout357_image-wrapper {
    --fig-w: min(115%, 45.312vh);
  }

  /* max-width:none nötig: webflow.css setzt img{max-width:100%} und würde die
   * 115 % sonst wieder auf die Spaltenbreite zurückkappen. */
  .layout357_image:not(.is-mirrored) {
    display: block;
    width: var(--fig-w);
    max-width: none;
    height: auto;
    margin-inline: calc(100% - var(--fig-w)) 0;
  }

  /* Selfie-Figur: gleiche Kur wie die Ziel-Figur oben — Box == Bildinhalt
   * (intrinsisch 1200:931) statt 100 % × 60vh-Letterbox, in der der sichtbare
   * Inhalt je nach Viewport-Verhältnis vertikal wanderte (object-fit:contain
   * zentriert im Übermass). Breite unverändert 115 % der Spalte, gedeckelt
   * auf die alte Box-Höhe (60vh × 1200/931 = 77.34vh); Margins zentrieren
   * wie bisher (bei 115 % ergibt das die alten −7.5 % Überhang). Verankert
   * wird die Figur unten an der Grid-Zeile (align-self:end statt center) —
   * damit ist die Kopfposition auf jeder Viewportgrösse deterministisch. */
  .layout357_image.is-mirrored {
    --selfie-w: min(115%, 77.34vh);
    width: var(--selfie-w);
    max-width: none;
    height: auto;
    margin-inline: calc((100% - var(--selfie-w)) / 2);
  }
  /* Nur die Selfie-Zeile: die Ziel-Figur lebt im -elternpakt-Grid */
  .layout357_content-layout > .layout357_image-wrapper {
    align-self: end;
  }

  /* rechtsbündige Figur: Hand bei 94.14 % von links = 5.86 % von rechts */
  .stoerer-elternpakt.stoerer-elternpakt-hand {
    left: calc(100% - 0.0586 * var(--fig-w));
  }
}

@media screen and (max-width: 991px) {
  /* Bild ist hier width:auto → Wrapper == Bildinhalt, Prozente wie gehabt.
   * Höhe 25rem → 28.75rem (+15 %). */
  .layout357_image {
    height: 28.75rem;
  }
  .stoerer-elternpakt.stoerer-elternpakt-hand {
    width: 6.5rem;
    height: 6.5rem;
    top: 65%;
    left: 93.8%;
  }
  .stoerer-elternpakt-hand .stoerer-hand-zahl { font-size: 1.3rem; }
  .stoerer-elternpakt-hand .stoerer-hand-label { font-size: 0.65rem; }
}

@media screen and (max-width: 767px) {
  /* Höhe 20rem → 23rem (+15 %), aber gedeckelt:
   *  - Ziel-Figur: die Bubble ragt rechts über die Figur hinaus und darf den
   *    Viewport nicht verlassen (.page-wrapper hat overflow:clip). Aus
   *    Spaltenbreite 90vw, zentrierter Figur und 5.75rem Bubble folgt
   *    H ≤ 1.508 × Viewportbreite − 160px; unter ~372 px Viewport greift der
   *    Deckel, bei 320 px bleibt es praktisch bei der bisherigen Grösse.
   *  - Selfie-Figur: max-width:100 % kappt sie auf die Spalte; ohne Deckel
   *    entstünde nur Leerraum in der Box. 69.8vw = 90vw / 1.2889 (Seiten-
   *    verhältnis 1200:931). */
  .layout357_image:not(.is-mirrored) {
    height: clamp(20rem, calc(150.8vw - 160px), 23rem);
  }
  .layout357_image.is-mirrored {
    height: clamp(20rem, 69.8vw, 23rem);
  }
  .stoerer-elternpakt.stoerer-elternpakt-hand {
    width: 5.75rem;
    height: 5.75rem;
    top: 67.5%;
    left: 93.9%;
  }
}

/* Elternpakt-Schulkarte (Landing): der Webflow-Export versteckt alle
 * Code-Embeds pauschal (.code-embed,.code-embed-2{display:none} in
 * webflow.css). Die Karten-Sektion ist seit 2026-08 sichtbar in Gebrauch
 * (Elternpakt-Karte, public/js/school-map.js) — nur dort einschalten.
 * Die zweite Karten-Sektion #swiss-map (.section_home_map) bleibt hidden. */
.section_map .code-embed-2 {
  display: block;
}

/* Elternpakt-Hero: die drei Zahlen-Boxen (ehemals eigene Sektion
 * .section_stats28 unterhalb des Heros) sitzen neu direkt unter dem CTA,
 * damit sie beim Öffnen der Seite ohne Scrollen sichtbar sind.
 * Kompakte Variante der stats28-Boxen — bewusst dreispaltig bis aufs Handy
 * hinunter (Webflow stapelt .stats28_list ab 991px), sonst wäre der Hero
 * auf schmalen Viewports höher statt kürzer. Die Spalten werden dabei sehr
 * schmal, deshalb überall Umbruch/Silbentrennung statt Clipping
 * (.stats28_item hat overflow:hidden). */
.hero-stats {
  margin-bottom: 2rem;
}

.hero-stats .heading-style-h3 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  line-height: 1.3;
}

.hero-stats .stats28_list {
  grid-column-gap: 0.75rem;
  grid-row-gap: 0.75rem;
  grid-template-columns: 1fr 1fr 1fr;
}

.hero-stats .stats28_item {
  padding: 1rem;
}

.hero-stats .stats28_item .margin-bottom.margin-small {
  margin-bottom: 0.25rem;
}

.hero-stats .stats28_number {
  font-size: 2.25rem;
  line-height: 1.15;
}

.hero-stats .stats28_item-content .heading-style-h6 {
  font-size: 0.875rem;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

@media screen and (max-width: 991px) {
  .hero-stats .stats28_list {
    grid-column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .hero-stats .stats28_item {
    padding: 0.75rem 0.5rem;
  }
  .hero-stats .stats28_number {
    font-size: 1.5rem;
  }
  .hero-stats .stats28_item-content .heading-style-h6 {
    font-size: 0.6875rem;
    line-height: 1.25;
  }
}

@media screen and (max-width: 767px) {
  .hero-stats .heading-style-h3 {
    font-size: 1.125rem;
  }
  .hero-stats .stats28_list {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .hero-stats .stats28_number {
    font-size: 1.375rem;
  }
}

@media screen and (max-width: 479px) {
  .hero-stats .stats28_list {
    grid-column-gap: 0.375rem;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .hero-stats .stats28_item {
    padding: 0.625rem 0.4375rem;
  }
  .hero-stats .stats28_number {
    font-size: 1.25rem;
  }
  .hero-stats .stats28_item-content .heading-style-h6 {
    font-size: 0.625rem;
  }
}

/* ---------------------------------------------------------------------------
 * VIP-Testimonial-Kreise auf der Landing («Stimmen»-Slider: Rigozzi, Wolff,
 * Studer, Fisch) — Kundenwunsch 2026-08 (Karte 4b961bc9): Portraits grösser.
 * 3.5rem → 5rem: das ist die Grösse der nicht-kompakten Webflow-Basisvariante
 * (.testimonial10_client-image-wrapper), es bleibt also im System. Die
 * -2-Kreise gibt es nur auf der Landing; auf den Slider gescoped, damit ein
 * künftiger Crawl sie nirgendwo sonst mitvergrössert. */
.testimonial10_slider .testimonial10_client-image-wrapper-2 {
  width: 5rem;
  min-width: 5rem;
  height: 5rem;
  min-height: 5rem;
}

/* Elternpakt-Schulkarten-Sektion («Der Elternpakt an Schweizer Schulen»)
 * lila hinterlegen — Kundenwunsch 2026-08 (Karte 61805c31): dasselbe Lila
 * wie das Karten-Meer um die Schweiz-Insel (French Lilac, webflow.css
 * --colors--french-lilac; school-map.js MASK_FILL). Ink bleibt dunkel,
 * Kontrast auf dem hellen Lila reicht (Titel/Fliesstext wie im Hero). */
#elternpakt-karte {
  background-color: #e7b7eb;
}

/* CC-BY-4.0-Lizenzhinweis im Footer (Rechtepaket 2026-08, Wortlaut = Draft).
 * Injiziert von scripts/content_fixes.py (inject_legal_notes) unterhalb der
 * .footer17_bottom-wrapper-Zeile; Optik an .footer17_credit-text angelehnt. */
.cc-license-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1.25rem;
  max-width: 46rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #aaa;
}
.cc-license-note .cc-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.1rem;
}
.cc-license-note a {
  color: inherit;
  text-decoration: underline;
}
.cc-license-note a:hover {
  color: #fff;
}

/* ---------------------------------------------------------------------------
 * Download-Kacheln unter Ressourcen ~1/3 kleiner (Karte 2dc78293):
 * 4 statt 3 Spalten auf Desktop (mit etwas engerem Raster), 2 statt 1 auf
 * Tablet — Webflow stellte dort schon ab 991px auf eine volle Breite um,
 * was die Kacheln riesig machte. Aufs Handy (ab 479px) wieder einspaltig.
 * blog50 gibt es nur auf /ressourcen. */
.section_blog50 .blog50_list {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
}
@media screen and (max-width: 991px) {
  .section_blog50 .blog50_list {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 479px) {
  .section_blog50 .blog50_list {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
 * Download-Kacheln: einheitliche Höhe + kleinere Titel (Karte c0e6636a).
 * Vorher richtete das Grid die Kacheln oben aus (align-items:start) und jede
 * war so hoch wie ihr Titel — 1- vs. 3-zeilige Titel (FR!) ergaben ein
 * Flickenmuster. Neu: Zeile streckt alle Kacheln gleich hoch, der
 * Download-Link sitzt via margin-top:auto überall auf derselben Linie.
 * Titel von h5- auf h6-Metrik (1.75rem → 1.25rem, Alexandras Vorschlag). */
.section_blog50 .blog50_list {
  align-items: stretch;
}
.section_blog50 .blog50_item {
  display: flex;
}
.section_blog50 .blog50_item-link {
  width: 100%;
  align-items: stretch;
}
.section_blog50 .blog50_item-content {
  justify-content: flex-start;
}
/* Titel wächst und drückt den Download-Block nach unten — margin-top:auto
 * scheitert hier an Webflows !important-Margin-Utilities. */
.section_blog50 .blog50_item-content .heading-style-h5 {
  flex: 1 0 auto;
  font-size: 1.25rem;
  letter-spacing: -0.01375rem;
  line-height: 1.4;
}

/* ---------------------------------------------------------------------------
 * /worum-gehts: «Problem» (4 Befunde) + «#Loesungsansaetze» (4 Lösungen)
 * als einspaltiger Top-to-Bottom-Flow — löst das 2×2-Raster vom 25.08. ab
 * (Karte c11df03b, Folge-Feedback). Timeline-Schiene + Kreise entfernt die
 * Pipeline im Markup (scripts/content_fixes.py, restructure_worum_gehts);
 * dort entstehen auch die .befund-*-Elemente. Die Befunde sind editoriale
 * Stat-Karten: Creme-Grund, dünne warme Linie, Original-Icon beim Titel
 * (Kundenwunsch 26.08. — die Mono-Overlines «Befund 01–04» entfielen wieder),
 * grosse Kennzahlen in salmon-dark, Zitat-Befund als Blockquote.
 * Monospace = System-Stack (--sfks-mono), bewusst kein neues Font-File. */
:root {
  --sfks-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.problem_content.stacked-flow,
.timeline6_content.stacked-flow {
  grid-template-columns: 1fr;
}
.stacked-flow .timeline6_content-right {
  grid-template-columns: 100%;
  grid-row-gap: 2rem;
}
.stacked-flow .timeline6_row {
  grid-template-columns: 1fr;
}
.stacked-flow .timeline6_item {
  margin-left: 0;
}

/* Befund-Karten */
.befund-card {
  background-color: var(--_primitives---colors--cape-honey-lighter);
  border: 1px solid var(--_primitives---colors--cape-honey-dark);
  padding: 1.75rem 2rem;
}
/* Kopfzeile: Titel links, Icon rechts auf EINER Zeile (Kundenwunsch
 * 26.08., zweite Runde) — Icon kleiner, Karte dadurch sichtbar flacher. */
.befund-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 0.75rem;
}
.befund-head .home_problem_icon-wrapper {
  flex: 0 0 auto;
}
/* Icon grösser als die 5rem-Basis der .icon-1x1-large (Kundenwunsch 26.08.,
 * vierte Runde: 5rem → 6.5rem). */
.befund-head .icon-1x1-large {
  width: 6.5rem;
  height: 6.5rem;
}
/* Massband-Icon (Befund 01): Das Asset (studie-01.avif) hat KEINEN inneren
 * Weissraum (Alpha-Bounding-Box = volle Leinwand, geprüft 26.08.) — es wirkt
 * kleiner, weil es als einziges stark hochformatig ist (383×500): im
 * quadratischen contain-Rahmen füllt es nur 76.6 % der Breite, die anderen
 * ~90–97 %. transform:scale gleicht die sichtbare Masse aus, ohne Layout
 * (Zeilenhöhe, rechtsbündige Kante) zu verändern; der Überstand bleibt im
 * 2rem-Kartenpolster. */
.problem_content .timeline6_row:first-child .befund-head .icon-1x1-large {
  transform: scale(1.15);
}
.befund-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  margin: 0.75rem 0 1rem;
}
.befund-stat-value {
  font-family: var(--_typography---font-styles--heading);
  font-size: 3.25rem;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--_primitives---colors--salmon-dark);
}
.befund-stat-caption {
  font-family: var(--sfks-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--_primitives---colors--cape-honey-darker);
  margin-top: 0.5rem;
}
/* Quellenzeilen (auch die zweizeilige .div-block-12 in Befund 02) */
.befund-card .text-size-tiny {
  font-family: var(--sfks-mono);
  font-size: 0.6875rem;
  color: var(--_primitives---colors--cape-honey-darker);
}
.befund-quote {
  border-left: 3px solid var(--_primitives---colors--salmon-dark);
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  font-style: italic;
}
@media screen and (max-width: 767px) {
  .befund-card {
    padding: 1.25rem;
  }
  .befund-head {
    gap: 1rem;
  }
  /* Lange Einzelwörter («Gesundheitsrisiken») können sonst nicht umbrechen —
   * die Kopfzeile lief über und das Icon wurde am Kartenrand angeschnitten. */
  .befund-head h3 {
    min-width: 0;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  /* Mobil bleibt die volle Icon-Grösse — der Titel bricht daneben um
   * (hyphens-Fix oben); bei 375px verifiziert, kein Overflow. */
  .befund-stats {
    gap: 1rem 1.75rem;
  }
  .befund-stat-value {
    font-size: 2.5rem;
  }
}

/* ---------------------------------------------------------------------------
 * Forschung: «Stimmen»-Slider (testimonial27 — gibt es nur auf
 * forschung-und-unterstutzung, die Startseite nutzt testimonial10) —
 * kleinere Kacheln, ab Tablet ZWEI Zitate nebeneinander pro View.
 * Die Mini-Runtime in site.js setzt width:100% inline auf jede .w-slide,
 * daher !important; ihr Schritt ist translateX(-100% · i) der EIGENEN
 * Slide-Breite — bei 50%-Slides rückt jeder Klick genau eine Kachel
 * weiter. Mobile (≤767px) bleibt unangetastet: eine Kachel pro View.
 * Bekannter Schönheitsrest: auf dem letzten Dot steht die letzte Kachel
 * allein links (JS klemmt den Index bei N−1). */
@media screen and (min-width: 992px) {
  /* Maske breiter als die bisherigen 50 %, damit 2 Kacheln à 50 % zusammen
   * trotzdem kleiner ausfallen als die bisherige Einzelkachel. */
  .section_testimonial27 .testimonial27_mask {
    width: 72%;
  }
}
@media screen and (min-width: 768px) {
  .section_testimonial27 .testimonial27_slide {
    width: 50% !important;
  }
}
@media screen and (max-width: 767px) {
  /* Vorbestand-Bug: Webflows margin-right:2rem auf .testimonial27_slide
   * liess die Mobile-Schritte um 32px pro Klick driften (site.js schiebt
   * um die Slide-Breite OHNE Margin) — Kacheln wurden zunehmend
   * angeschnitten. Margin weg = Schritt exakt eine Maskenbreite. */
  .section_testimonial27 .testimonial27_slide {
    margin-right: 0;
  }
}

/* Zitat-Quellen-/Namenszeilen (Landing + Forschung) gleichmässig umbrechen:
 * en/fr/it können keine «//»-Marker tragen (auto-übersetztes CMS), mehr-
 * zeilige Zeilen sollen wenigstens ausgewogen brechen statt ein einzelnes
 * Wort hängen zu lassen. Explizite <br> (de, aus «//») erzwingen ihre
 * Umbrüche weiterhin — balance verteilt nur den Rest. text-wrap erbt in
 * die Namens-/Job-Divs hinein; alte Browser ignorieren die Property.
 * Auch auf den Zitat-Texten selbst: kurze zentrierte Blöcke gewinnen,
 * und ab ~7 Zeilen lässt Chromium balance ohnehin unangetastet. */
.testimonial10_client-info,
.testimonial27_client,
.testimonial27_client-nopic,
.testimonial10_content h3,
.testimonial-short,
.testimonials-text-style {
  text-wrap: balance;
}

/* Reduced Motion: Das Hero-Scrollytelling-Skript ist bei
   prefers-reduced-motion komplett deaktiviert (Bucket-B Entscheid 9).
   Das Slide-out-Männchen startet aber im Webflow-CSS mit opacity:0 und
   wird erst vom Skript sichtbar gemacht — ohne Skript fehlte es also
   ganz (gefunden 2026-08-26 im QA-Pass). Reduced Motion heisst
   «keine Animation», nicht «kein Inhalt»: statisch einblenden. */
@media (prefers-reduced-motion: reduce) {
  .slide-out-kid {
    opacity: 1;
  }
}

/* Ressourcen-Sprungleiste: hartes 5+4 statt 7+2 auf Desktop (Karte
   «website - a hard return», 27.08.). Das Break-Div setzt die Pipeline
   (content_fixes.insert_ressourcen_pill_break) nach der 5. Pill; unter
   992px bleibt es display:none und das normale Wrappen/Scrollen gilt. */
.pill-line-break {
  display: none;
}
@media screen and (min-width: 992px) {
  .pill-line-break {
    display: block;
    flex-basis: 100%;
    height: 0;
  }
}

/* Über-uns-Karten (layout419): Der Textblock endete bündig an der
   Kartenunterkante (Karte «website - a space», 27.08.) — unten braucht
   der zentrierte Content dieselbe Luft wie an den übrigen Kanten. */
.layout419_card-content {
  padding-bottom: 1.5rem;
}

/* Lösungs-Karten tragen dieselbe Titel/Icon-Kopfzeile wie die Befund-Karten
   (Karte «icons of solutions», 27.08.) — nur der Wrapper-Selektor fehlt,
   Grösse/Abstände kommen aus den bestehenden .befund-head-Regeln. */
.befund-head .zuhause_layout-2_icon-wrapper {
  flex: 0 0 auto;
}

/* Vierte Lösungs-Karte: das Figuren-Bild (Sport-Foto, querformatig) deutlich
   grösser als die Standard-Kopfzeilen-Icons (Abnahme-Rückläufer «männekens
   LOTS bigger», Karte aa90be28) — gleiches Muster wie das skalierte
   Massband-Icon auf Befund-Karte 1. Mobil reduziert, damit der Titel in der
   Kopfzeile nicht bricht. */
.timeline6_content .timeline6_row:last-child .befund-head .icon-1x1-large {
  width: 11rem;
  height: auto;
}
@media screen and (max-width: 479px) {
  .timeline6_content .timeline6_row:last-child .befund-head .icon-1x1-large {
    width: 7.5rem;
  }
}

/* Shop-Checkbox: Der Datenschutz-Link im Label wird unterstrichen, damit er
   als Link erkennbar ist (Abnahme-Rückläufer auf Karte 5cd8ad3a, 27.08.). */
.form_checkbox-label a {
  text-decoration: underline;
}

/* Glossar-Akkordeons (/ressourcen): Klick-Toggle lebt nativ in site.js
   (Webflow-Klick-Interactions werden nicht portiert, Karte d95e6e80). */
.faq10_question {
  cursor: pointer;
}

/* Gratis-Absatz im Shop: «spendest»/«Mitglied» als klar erkennbare Links —
   fett + unterstrichen (Abnahme-Rückläufer Karte 2929a7c0, 28.08.). */
.shop-gratis-hinweis a {
  font-weight: 700;
  text-decoration: underline;
}

/* /worum-gehts: H1 «Smartphones verändern die Kindheit» leicht kleiner,
   damit er auf Desktop zweizeilig bleibt (Abnahme-Rückläufer Karte
   d8ad2d0d, 28.08.). Mobile Breakpoints bleiben unverändert. */
@media screen and (min-width: 992px) {
  #Problem h1.heading-style-h1 {
    font-size: 4rem;
  }
}

/* Sprungpunkt Twint-QR (Karte 2929a7c0): etwas Luft nach oben, damit die
   Navbar den QR-Code nach dem Sprung nicht überdeckt. */
.anchor-offset {
  scroll-margin-top: 6rem;
}

/* Hero «Smart Kids, not Smartphones»: die rote Box war auf 93 % Höhe, die
   Unterlänge des p ragte heraus (Karte dd2773db). Nur die rote Box — die
   grüne hat keine Unterlängen. */
.header_highlight-red {
  height: 104%;
}

/* Freiwillige Spendenauswahl im Bestellformular (Karte 532235cb, Variante B):
   drei Optionen nebeneinander, keine vorausgewählt. */
.spende-optionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.spende-option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}
.spende-danke {
  font-weight: 700;
}

/* /worum-gehts (en): drei Überschriften brechen auf Desktop ungünstig
   (Karte 38091594, 29.08.). Gemessen bei 1440px vor der Änderung:
   «Later rather than sooner» 781px Text in 768px Box → 2 Zeilen;
   «Personal social media accounts …» → 3 Zeilen;
   «For other people's children …» → 949/99px, zwei Wörter hingen allein.

   Nur ab 992px: unter 992px brechen alle drei bereits wie gewünscht, und
   die Klassen setzt die Pipeline ausschliesslich auf die englische Fassung
   (content_fixes.tune_worum_gehts_headings) — de/fr/it sind anders lang.
   Die Grössen sind die gemessenen Schwellen, nicht geraten: 69px ergäbe
   wieder zwei Zeilen, 43px wieder drei. */
@media screen and (min-width: 992px) {
  .heading-style-h1.fit-one-line {
    font-size: 68px;
  }
  .heading-style-h3.fit-two-lines {
    font-size: 42px;
  }
}

/* Verteilt die zwei Zeilen gleichmässig statt 949/99 (→ 615/445).
   Ohne Grössenänderung und auf allen Breiten unbedenklich. */
.balance-heading {
  text-wrap: balance;
}

/* Startseiten-Claim (de) «...und doch haben Smartphones die Kindheit
   verändert»: stand dreizeilig statt zweizeilig (Karte ab56a2e9, 29.08.).
   Gemessen mit Playwright, Grössen sind die ermittelten Schwellen:

     Viewport   Textbox   52px (alt)   nötig für 2 Zeilen
     1440px+    720px     3 Zeilen     50px
     1280px     643px     3 Zeilen     44px (46px liefe mit 5px Reserve
                                        zu knapp fürs Schriftrendering)
      992px     488px     3 Zeilen     nicht erreichbar — auch 38px bleibt
                                       dreizeilig, deshalb unverändert

   text-wrap: balance hilft hier nicht (getestet, bleibt dreizeilig).
   Die Klasse setzt die Pipeline nur auf der deutschen Startseite
   (content_fixes.fit_landing_claim) — en/fr/it sind kürzer und schon ok. */
@media screen and (min-width: 1280px) {
  .heading-style-h2.claim-two-lines {
    font-size: 44px;
  }
}
@media screen and (min-width: 1440px) {
  .heading-style-h2.claim-two-lines {
    font-size: 50px;
  }
}