/* ============================================================
   AKADEMIE DESIGN SYSTEM
   ============================================================
   Zentrale Design-Schicht ueber Salient/WPBakery fuer alle
   "Akademie fuer Selbstbestimmte Bildung"-Seiten.

   Quelle aller Werte: lokale Designer-Referenz
   Akademie_Website_Prototypen/Startseite.html (eingebettetes
   <style>), Werte per getComputedStyle() gegengeprueft, nicht
   geschaetzt.

   Aufbau (mobile-first: jede Regel beschreibt zuerst Mobile,
   Media Queries erweitern danach fuer Tablet/Desktop):
     1. TOKENS        - Farben, Typografie, Abstaende, Radien, Schatten
     2. TYPOGRAFIE     - Kicker/Heading/Body-Grundformatierung
     3. FULL-WIDTH-PATTERN - Academy Section / Full Width Background
     4. KOMPONENTEN    - Buttons, Cards, Mini-Cards, CTA-Banner, Testimonials, Counter
     5. RESPONSIVE-NOTIZEN - siehe Media Queries direkt an den Regeln

   Einbindung: wird ueber functions.php auf jeder Seite geladen,
   die das Seiten-Template "Akademie Design System"
   (template-academy.php) verwendet - das ist eine normale
   WordPress-Seitenvorlage, die Redakteure im Backend unter
   Seiten-Attribute auswaehlen. Keine Page-ID-Bindung im Code.

   Isolation: Alle Selektoren sind entweder (a) neue, Salient-weit
   ungenutzte .ak-*-Klassennamen (greifen nirgends, wo sie nicht
   gesetzt werden) oder (b) gezielt unter einer .ak-*-Elternklasse
   gescopte Ueberschreibungen bestehender Salient-Klassen (z. B.
   .ak-counter .nectar-milestone, .ak-testimonial blockquote). Es
   gibt keine ungescopten globalen Salient-Overrides.
   ============================================================ */


/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */

:root{

  /* --- Farben --- */
  --ak-color-primary:        #A90F5D; /* Magenta, exakt aus Referenz (--magenta) */
  --ak-color-primary-hover:  #8A0C4C; /* abgeleitet: Referenz definiert keinen eigenen Hover-Ton fuer Primaer-Buttons */
  --ak-color-turquoise:      #66C1C0; /* --turquoise */

  --ak-color-text:           #20201E; /* --text: Haupttextfarbe (fast schwarz) - gilt fuer Headings UND Fliesstext */
  --ak-color-text-muted:     #66645D; /* --muted: NUR fuer explizit gedaempfte Elemente (Karten-Fliesstext, Bylines, Tags) */

  --ak-color-background:      #F7F6F1; /* --bg, Basis-Seitenhintergrund / band-plain */
  --ak-color-background-soft: #F0F7F6; /* band-soft (Ueber-uns-Sektion) */
  --ak-color-background-cream:#FFFDF9; /* family-bridge Sektion */
  --ak-color-panel:           #EAF6F5; /* --panel */
  --ak-color-panel-2:         #DDF1F0; /* --panel-2, Mint (Hero/Orient/Closing-Karte) */
  --ak-color-testimonial-band:#F5F1ED; /* testimonials-band */

  --ak-color-card-bg:        #FFFEFA; /* --white, finaler (kaskadierter) Kartenhintergrund */
  --ak-color-card-border:    #D8E4E2; /* finale Kartenrahmenfarbe */
  --ak-color-line:           #C9E2E0; /* --line, allgemeine Trennlinie */

  --ak-color-rose:           #F8EDF3; /* .situation / .products:nth-child(1) - jetzt aktiv genutzt: .ak-card--pink (BildungsVision) */
  --ak-color-rose-border:    #E7CDD9; /* exakt Referenz .bv-card/.bv-hero-card/.orientation-offer border-farbe fuer die Rose-Karte */

  --ak-color-panel-border:   #D5E7E5; /* exakt Referenz .bv-item border - Blau-Karten-Pendant zu --ak-color-rose-border */

  --ak-color-cta-wrapper:    #F1F9F9; /* Academy CTA-Banner: aeussere Wrapper-Ebene (padding-3/4-percent-Flaeche) */
  --ak-color-cta-card:       #E6F5F4; /* Academy CTA-Banner: innere, gerundete Kartenflaeche (column-bg-overlay) */

  /* --- Gradienten (Section-Baender) --- */
  --ak-gradient-hero:      linear-gradient(90deg, #F7F6F1 0%, #F3F0E9 52%, #E8F4F3 100%);
  --ak-gradient-turquoise: linear-gradient(90deg, #DDF1F0 0%, #EEF8F7 100%);
  --ak-gradient-rose-soft: linear-gradient(90deg, #F7EDF2 0%, #F4F1ED 100%);

  /* --- Typografie: Font-Stacks ---
     Kommerzielle Referenz-Fonts (Bodoni 72 / Avenir Next) sind NICHT
     lizenziert eingebunden. Sobald eine Lizenz vorliegt, genuegt der
     Austausch dieser zwei Variablen - keine Seite muss angefasst werden. */
  --ak-font-display: "Bodoni 72", Didot, "Bodoni MT", Georgia, "Times New Roman", serif;
  --ak-font-body:     -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* --- Typografie: Groessen (mobile Basis; Headings nutzen fluides
     clamp() zwischen Mobile- und Desktop-Referenzwert statt fester
     Breakpoint-Stufen) --- */
  --ak-text-hero:     clamp(2.625rem, 8vw + 1rem, 4.75rem);   /* 42px -> 76px */
  --ak-text-h2:       clamp(1.75rem, 5vw + 1rem, 2.75rem);    /* 28px -> 44px */
  --ak-text-h3:       clamp(1.5rem, 4vw + 1rem, 2.375rem);    /* 24px -> 38px */
  --ak-text-card-h3:  clamp(1.375rem, 2vw + 1rem, 1.75rem);   /* 22px -> 28px */
  --ak-text-lead:     1.0625rem; /* 17px mobil */
  --ak-text-lead-desktop: 1.25rem; /* 20px Desktop */
  --ak-text-kicker:   0.75rem;   /* 12px mobil */
  --ak-text-kicker-desktop: 0.8125rem; /* 13px Desktop, exakt Referenz */
  --ak-text-card-body: 0.9375rem; /* 15px, exakt Referenz */
  --ak-text-small:    0.875rem;  /* 14px, Gruenderinnen-Byline */

  --ak-text-price:         1.75rem;  /* 28px mobil, .ak-price - Referenz nutzt fixe 34px ohne eigene Mobile-Stufe */
  --ak-text-price-desktop: 2.125rem; /* 34px, exakt Referenz .bv-price */

  --ak-leading-heading: 1.1;
  --ak-leading-body:    1.5;
  --ak-tracking-heading: -0.015em;
  --ak-tracking-kicker-mobile: 0.12em;
  --ak-tracking-kicker: 0.16em; /* exakt Referenz (.eyebrow) */
  --ak-weight-kicker: 700;      /* exakt Referenz */
  --ak-weight-button: 600;      /* exakt Referenz */

  /* --- Abstaende (mobile-first Basis -> Desktop-Erweiterung) ---
     Drei Section-Stufen statt Einzelwerten pro Bereich:
       --ak-space-section        grosse Sections (Hero, Angebote, Ueber uns, Testimonials, CTA-Baender ...)
       --ak-space-section-small  kompakte Baender (Counter)
       --ak-space-content        Abstand zwischen Elementen INNERHALB einer Section (z. B. Heading -> Text) */
  --ak-space-page-x:         18px; /* Referenz .wrap Mobile-Padding */
  --ak-space-page-x-desktop: 34px; /* Referenz .wrap Desktop-Padding */

  --ak-space-section:            48px; /* mobil bewusst < 76px (Referenz ist Desktop-first) */
  --ak-space-section-desktop:    76px; /* exakt Referenz section{padding:76px 0} */
  --ak-space-section-small:          24px; /* mobil, fuer kompakte Baender wie Counter */
  --ak-space-section-small-desktop:  30px; /* exakt Referenz .counter-shell .wrap{padding:30px 0} */

  --ak-space-content: 20px; /* genereller Abstand zwischen Content-Bloecken einer Section */

  --ak-space-card-padding:          20px;
  --ak-space-card-padding-desktop:  28px; /* exakt Referenz .card{padding:28px} */

  --ak-space-cta-padding:           24px; /* Academy CTA-Banner Rahmenabstand, siehe KOMPONENTEN weiter unten */
  --ak-space-cta-padding-desktop:   44px; /* zwischen Referenz .orient{padding:42px} und .closing{padding:48px} */

  --ak-space-btn-padding-y: 13px; /* exakt Referenz .btn{padding:13px 20px} - ersetzt Salients small/large-Werte */
  --ak-space-btn-padding-x: 20px;

  --ak-space-gap-sm: 12px;
  --ak-space-gap-card: 18px; /* exakt Referenz .products/.testimonials{gap:18px} - siehe column_margin_custom in WPBakery */
  --ak-space-gap-lg: 32px;   /* mobiler Stapel-Abstand grosser 2-Spalten-Bereiche */
  --ak-space-gap-lg-desktop: 64px; /* exakt Referenz .about{gap:64px} */

  /* --- Radien (Design-Tokens, konsistent statt geschaetzt) --- */
  --ak-radius-sm:    14px;
  --ak-radius-item:  18px;  /* exakt Referenz .bv-item - eigene Stufe zwischen sm/md fuer Feature-/Listen-Items */
  --ak-radius-md:    22px;  /* exakt Referenz .mini-card / .bv-card */
  --ak-radius-lg:    24px;  /* exakt Referenz .card / .testimonial-card */
  --ak-radius-image: 28px;  /* exakt Referenz .hero-visual / .about-img */
  --ak-radius-xl:    30px;  /* exakt Referenz .orient / .closing */
  --ak-radius-pill:  999px; /* exakt Referenz .btn */

  /* --- Schatten --- */
  --ak-shadow-card:       0 8px 24px rgba(32, 32, 30, 0.035); /* exakt Referenz */
  --ak-shadow-card-hover: 0 12px 30px rgba(32, 32, 30, 0.07);  /* exakt Referenz (Hover) */
}


/* ------------------------------------------------------------
   2. TYPOGRAFIE
   ------------------------------------------------------------ */

.ak-kicker{
  display: block;
  font-family: var(--ak-font-body);
  font-size: var(--ak-text-kicker);
  font-weight: var(--ak-weight-kicker);
  letter-spacing: var(--ak-tracking-kicker-mobile);
  text-transform: uppercase;
  color: var(--ak-color-primary);
  margin: 0 0 12px;
}
@media (min-width: 901px){
  .ak-kicker{
    font-size: var(--ak-text-kicker-desktop);
    letter-spacing: var(--ak-tracking-kicker);
  }
}

.ak-heading{
  font-family: var(--ak-font-display);
  font-weight: 400;
  line-height: var(--ak-leading-heading);
  letter-spacing: var(--ak-tracking-heading);
  color: var(--ak-color-text);
  margin: 0 0 var(--ak-space-content);
}
.ak-heading--hero{ font-size: var(--ak-text-hero); line-height: 1.06; }
.ak-heading--h2{ font-size: var(--ak-text-h2); line-height: 1.08; }
.ak-heading--h3{ font-size: var(--ak-text-h3); }
.ak-heading--card{ font-size: var(--ak-text-card-h3); line-height: 1.12; margin-bottom: 12px; }
.ak-heading em,
.ak-heading .ak-highlight{ font-style: normal; color: var(--ak-color-primary); }

.ak-lead{ font-size: var(--ak-text-lead); }
@media (min-width: 901px){ .ak-lead{ font-size: var(--ak-text-lead-desktop); } }

.ak-founders-note{ font-size: var(--ak-text-small); color: var(--ak-color-text-muted); margin-top: 24px; }
.ak-founders-note strong{ font-weight: 700; color: var(--ak-color-text); }


/* ------------------------------------------------------------
   3. FULL-WIDTH-PATTERN ("Academy Full Width Section")
   ------------------------------------------------------------
   Ursachenanalyse: Ein WPBakery-Row mit type="full_width_background"
   rendert die eigentliche Row-Box weiterhin in Container-Breite; den
   randlosen Hintergrund liefert Salient ueber ein separates, absolut
   positioniertes Kind-Element <div class="row-bg-wrap"> (position:
   absolute; left:0; width:100%), das per JS/PHP bereits automatisch
   ueber die volle Viewport-Breite gelegt wird. Fuer Row-Hintergrundfarben
   (natives bg_color-Attribut) traegt Salient das inline direkt auf
   dieses Element ein - das funktioniert bereits nativ und richtig.
   Fuer die drei Farbverlaeufe des Designsystems (die es als Salient-
   Attribut nicht gibt) muss die CSS-Regel deshalb auf genau dieses
   .row-bg-wrap-Element zielen, NICHT auf die .ak-section-Row selbst
   (das war der Bug: die Regel traf bislang die eingeengte Row-Box).
   Kein negativer-Margin-Hack noetig - das ist die vorhandene Salient-
   Struktur, nur korrekt adressiert. Gilt als generisches Pattern fuer
   jede kuenftige Section mit Farbverlauf. --- */
.ak-section{
  padding-top: var(--ak-space-section) !important;
  padding-bottom: var(--ak-space-section) !important;
  font-family: var(--ak-font-body);
  color: var(--ak-color-text);
}
@media (min-width: 901px){
  .ak-section{
    padding-top: var(--ak-space-section-desktop) !important;
    padding-bottom: var(--ak-space-section-desktop) !important;
  }
}
/* Kompakte Variante (Counter-Band) - eigener Token statt Einzel-Patch */
.ak-section--small{
  padding-top: var(--ak-space-section-small) !important;
  padding-bottom: var(--ak-space-section-small) !important;
}
@media (min-width: 901px){
  .ak-section--small{
    padding-top: var(--ak-space-section-small-desktop) !important;
    padding-bottom: var(--ak-space-section-small-desktop) !important;
  }
}

/* Academy Section Head: Kicker+Heading links, begleitender Text
   rechts, beide auf gemeinsamer Grundlinie (wie Referenz .section-head
   {display:flex;justify-content:space-between;align-items:end}).
   ------------------------------------------------------------
   URSACHENANALYSE (zwei uebereinanderliegende Bugs):
   (1) el_class auf vc_row_inner wird von Salient verworfen - genau wie
   bei vc_row (siehe FULL-WIDTH-PATTERN oben) extrahiert Salients eigenes
   vc_row_inner.php ein Attribut namens "class", nicht "el_class" (siehe
   shortcode_atts in salient-core/includes/vc_templates/vc_row_inner.php).
   Ohne "class=" statt "el_class=" im Seiteninhalt landete die Klasse nie
   im DOM - diese Regel griff bislang nie.
   (2) Selbst mit korrekt gesetzter Klasse waere .ak-section-head{display:
   flex} wirkungslos gewesen: WPBakery rendert zwischen der Row und den
   Spalten einen zusaetzlichen nativen Wrapper <div class="row_col_wrap_
   12_inner span_12">; die .wpb_column-Elemente sind KEIN direktes Kind
   der Row. Dieser Wrapper ist bei Salient IMMER display:flex (Regel
   "html body .vc_row-fluid > .span_12{display:flex}", unabhaengig vom
   equal_height-Attribut - Korrektur einer frueheren Annahme in diesem
   Kommentar) - Default-align-items:stretch zwingt beide Spalten auf
   gleiche Hoehe. Dadurch sass der rechte Beschreibungstext oben in
   seiner (zu hoch gestreckten) Spalte statt an der Unterkante - das
   beobachtete "Schweben".
   FIX: Kein eigener Flex-Container noetig - der immer vorhandene native
   Wrapper wird wiederverwendet, nur align-items wird von seinem Default
   (stretch) auf flex-end umgestellt. Damit bestimmt weiterhin Salients
   Struktur die Zeilenhoehe (= hoechster Block), beide Spalten werden
   aber an dessen Unterkante ausgerichtet - exakt die Referenz-Optik,
   ohne Negative-Margins oder absolute Positionierung.
   (3) ZWEITER BUG (gefunden bei der BildungsVision-Korrekturrunde,
   betrifft rueckwirkend auch die Startseite, dort wegen kleinerer
   Freiflaeche weniger auffaellig): Salients Grid-CSS legt aus seiner
   Float-Grid-Vergangenheit einen Clearfix ::after{content:"";display:
   block} auf denselben row_col_wrap-Wrapper. Sobald dieser Wrapper (wie
   hier) zum Flex-Container wird, wird dieser Clearfix zu einem echten
   DRITTEN, unsichtbaren Flex-Item - justify-content:space-between
   verteilt den freien Platz dadurch auf ZWEI Luecken (zwischen Spalte 1
   und 2, UND zwischen Spalte 2 und dem unsichtbaren Clearfix-Item) statt
   auf eine einzige Luecke vor der rechten Spalte. Die rechte Spalte
   erreichte dadurch nie den echten rechten Rand. FIX: Clearfix gezielt
   nur innerhalb .ak-section-head deaktivieren (content:none) - die
   globale Clearfix-Regel bleibt fuer alle anderen (nicht-flex) Zeilen
   unveraendert bestehen, die sie fuer den urspruenglichen Zweck (Float-
   Clearing) weiterhin benoetigen.
   Mobile: keine Media Query noetig - unterhalb 901px bleibt Salients
   eigenes responsives Stapeln der Spalten unveraendert wirksam. */
@media (min-width: 901px){
  .ak-section-head [class*="row_col_wrap"]{
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--ak-space-gap-card);
  }
  .ak-section-head [class*="row_col_wrap"] > .wpb_column{ width: auto !important; }
  .ak-section-head [class*="row_col_wrap"] > .wpb_column:last-child{ max-width: 520px; }
  .ak-section-head .ak-heading{ margin-bottom: 0; }
}
.ak-section-head [class*="row_col_wrap"]::after{ content: none; }

/* Die drei Farbverlaeufe: gezielt auf das Salient-eigene
   Full-Width-Hintergrundelement statt auf die Row selbst.
   ------------------------------------------------------------
   URSACHENANALYSE row-bg-wrap-BLEED IN VERSCHACHTELTE INNER-ROWS
   (Stolperstein, siehe auch docs/DESIGN-SYSTEM.md "Herkunft"/Stolperstein-
   Liste): JEDE WPBakery-Row bekommt ihr eigenes <div class="row-bg-wrap">
   als eigenen, direkten ersten Kind-Knoten - auch eine innerhalb einer
   .ak-hero/.ak-band-turquoise/.ak-band-rose-soft-Row verschachtelte
   .inner_row (z. B. eine zweispaltige Karten-Zeile). Diese drei Regeln
   waren urspruenglich als NACHFAHREN-Selektor (".ak-hero .row-bg-wrap"
   mit Leerzeichen) geschrieben und trafen dadurch NICHT nur das
   row-bg-wrap der aeusseren Section, sondern JEDES row-bg-wrap einer
   darin verschachtelten Inner-Row gleich mit - sichtbar als zusaetzliche,
   leicht versetzte "Geisterkarte" (die Inner-Row spannt denselben
   Farbverlauf ueber ihre EIGENE, kleinere/eingerueckte Box neu auf,
   statt nahtlos den Verlauf der aeusseren Section fortzusetzen).
   Zweimal aufgetreten und zunaechst als Einzelfall mit Body-ID-Punktfixen
   behoben (Startseite Tuerkis-Band, "Was ist..." CTA-Banner) - beim
   dritten Mal (Startseite Hero + Rosa-Band) als wiederkehrendes Muster
   erkannt und hier an der Wurzel behoben.
   FIX: Direktkind-Selektor (">") statt Nachfahren-Selektor. Das
   row-bg-wrap der Section selbst IST ein direktes Kind des Elements mit
   der .ak-hero/.ak-band-*-Klasse; das row-bg-wrap einer verschachtelten
   .inner_row ist dagegen ein Kind der .inner_row (die selbst NICHT die
   .ak-hero/.ak-band-*-Klasse traegt) - der Direktkind-Selektor trifft
   dadurch strukturell nur noch die aeussere Section, nie eine
   verschachtelte Inner-Row. Gilt jetzt generisch fuer jede aktuelle UND
   kuenftige Seite/Section mit einer dieser drei Klassen - keine
   Body-ID-Punktfixe mehr noetig. */
.ak-hero > .row-bg-wrap{ background: var(--ak-gradient-hero); }
.ak-band-turquoise > .row-bg-wrap{ background: var(--ak-gradient-turquoise); }
.ak-band-rose-soft > .row-bg-wrap{ background: var(--ak-gradient-rose-soft); }

/* Academy Hero: rechte Spalte (z. B. .ak-card-Variante) soll ihre eigene
   Inhaltshoehe behalten, nicht auf die Hoehe der linken Textspalte
   gestreckt werden.
   URSACHENANALYSE: Wie oben beschrieben ist der native row_col_wrap-
   Wrapper IMMER display:flex mit Default align-items:stretch - das
   WPBakery-Attribut equal_height ist dafuer nicht ursaechlich (bereits
   ohne "yes" ist der Wrapper flex+stretch). Die kuerzere Spalte wird
   dadurch unabhaengig vom Attribut auf die Hoehe der laengeren Spalte
   gezogen; unsere eigene .ak-card-Regel (height:100% auf .wpb_wrapper)
   verstaerkt das zusaetzlich. FIX: align-items auf flex-start fuer den
   Hero-Split - jede Spalte behaelt ihre eigene, inhaltsbestimmte Hoehe;
   .ak-card's height:100% wird dadurch wirkungslos (keine gestreckte
   Elternhoehe mehr vorhanden), kein overflow, kein Abschneiden. Gilt nur
   innerhalb .ak-hero, alle anderen Zeilen (z. B. Angebote/Testimonials,
   wo Gleichhoehe zwischen Geschwister-Karten gewuenscht ist) bleiben
   unveraendert bei stretch. */
@media (min-width: 901px){
  .ak-hero [class*="row_col_wrap"]{ align-items: flex-start; }
}

/* Academy zentrierte Inhaltsspalte (z. B. Statement-Abschnitt "Selbst-
   bestimmte Bildung ist die konsequente Uebernahme..." + "Lisa & Maike"
   auf der Seite "Selbstbestimmte Bildung"): nutzt WPBakerys natives
   width="2/3" + offset="vc_col-lg-offset-2", um eine 2/3-Spalte ohne
   eigenes CSS zu zentrieren.
   URSACHENANALYSE (Korrektur, Breakpoint-Luecke unter 1303px): Salients
   grid-system.css definiert ".vc_col-lg-offset-2{margin-left:16.667%}"
   ausschliesslich innerhalb von "@media (min-width:1300px)" - die
   Spaltenbreite selbst (vc_col-sm-8, 2/3) bleibt zwar bereits ab 690px
   aktiv, der zentrierende Offset faellt aber zwischen 690px und 1299px
   komplett weg (keine sm-/md-Stufe fuer denselben Offset im Content
   gesetzt), wodurch die Spalte in diesem Bereich nach links rutscht
   statt zentriert zu bleiben. FIX: keine Aenderung an Salients globaler
   grid-system.css (bleibt fuer alle anderen Seiten unangetastet) und
   keine Aenderung am Seiteninhalt - stattdessen fuellt eine eigene,
   unter .ak-section gescopte Regel exakt die Luecke mit demselben
   Margin-Wert, den Salient ab 1300px ohnehin nativ liefert.
   ZWEITE KORREKTUR (Bereich 691-999px bewusst ausgenommen): Salient
   traegt zusaetzlich eine eigene, native Tablet-Regel
   ".wpb_column{width:100%}" exakt innerhalb von "@media (min-width:
   691px) and (max-width:999px)" - dort rendert die Spalte nativ bereits
   OHNE Offset auf voller Zeilenbreite, wodurch der zentrierte Text
   (centered_text) in diesem schmalen Bereich schon von sich aus mittig
   sitzt. Wurde die eigene margin-left-Regel hier zusaetzlich angewendet
   (erste Fassung dieser Korrektur, per DOM-Messung als fehlerhaft
   erkannt), kollidierte sie mit der vollen Breite: der Flex-Container
   schrumpft die Spalte (flex-shrink:1) um exakt den Margin-Betrag,
   wodurch sie asymmetrisch (mit Luecke nur auf einer Seite) statt
   zentriert erschien - ein neuer, selbst verursachter Fehler. Die Luecke
   wird daher NUR dort gefuellt, wo Salient tatsaechlich keine eigene
   Zentrierung liefert: 1000px (Ende der Tablet-Sonderregel) bis 1299px
   (Start von Salients eigener lg-Offset-Regel). Ab 1300px sowie im
   Bereich 690-999px bleibt ausschliesslich Salients eigenes Verhalten
   wirksam (keine sichtbare Aenderung am bestehenden Layout dort). Unter
   690px bleibt die Spalte unberuehrt bei Salients nativer
   100%-Stapel-Regel (kein Offset noetig). */
@media (min-width: 1000px) and (max-width: 1299px){
  .ak-section .vc_col-lg-offset-2{ margin-left: 16.66666667%; }
}


/* ------------------------------------------------------------
   4. KOMPONENTEN
   ------------------------------------------------------------ */

/* --- Academy Button: vollstaendig gegen Salients Button-System isoliert.
   ------------------------------------------------------------
   URSACHENANALYSE: Salients globale Theme-Option "Button Style" sowie
   die native "Accent Color" erzeugen mehrere, unterschiedlich spezifische
   !important-Regeln auf denselben Elementen, u. a. (per getMatchedCSS
   Rules() ermittelt, spezifischste zuerst):
     body[data-button-style*="slightly_rounded"] .nectar-button.see-through
       { border-radius: 4px !important }              -> Spezifitaet 0,3,1
     .nectar-button[data-color-override="false"].regular-button
       { background-color: <Accent-Color> !important } -> Spezifitaet 0,3,0
     body[data-button-style*="slightly_rounded"] .nectar-button
       { border-radius: 4px !important }               -> Spezifitaet 0,2,1
   Eine einzelne wiederholte Klasse (.ak-btn.ak-btn.ak-btn, Spezifitaet
   0,3,0) reichte daher NICHT in jedem Fall aus - beim "see-through"-
   Radius (0,3,1) und bei der Accent-Color-Hintergrundfarbe (0,3,0, exakt
   gleichauf, Ladereihenfolge nicht garantiert) gewann teils weiterhin
   Salient. Statt jede einzelne Salient-Regel 1:1 nachzubauen (unwartbar,
   bricht bei jeder Theme-Option-Aenderung neu), wird hier EINE zentrale,
   bewusst hoeher eskalierte Spezifitaet (0,4,0) für die gesamte Academy-
   Button-Flaeche verwendet - das schlaegt jede bekannte Salient-Kombi-
   nation unabhaengig von Ladereihenfolge, ohne die globalen Salient-
   Button-Einstellungen selbst anzufassen (die blieben unveraendert und
   wirken weiterhin auf alle Nicht-Academy-Seiten).
   Varianten: .ak-btn--primary (gefuellt) und .ak-btn--outline (Rahmen,
   1px statt Salients "see-through"-Default von 2px) kommen vollstaendig
   aus dem Design-System - Salients "button_style"-Attribut im Shortcode
   dient nur noch dazu, ueberhaupt ein <a class="nectar-button"> zu
   erzeugen; Optik/Farbe/Radius/Randstaerke uebernimmt ausschliesslich
   diese Regel. --- */
.ak-btn.ak-btn.ak-btn.ak-btn{
  border-radius: var(--ak-radius-pill) !important;
  font-weight: var(--ak-weight-button);
  /* Ursachenanalyse Padding: Salients Groessen-Varianten (u. a. "small":
     6px/14px) liefern deutlich weniger Innenabstand als die Referenz
     (.btn{padding:13px 20px}, EIN Wert fuer alle Buttons, keine Groessen-
     Varianten). Statt "small" separat zu patchen, wird die Polsterung
     hier zentral fuer JEDE .ak-btn-Instanz fest auf den Referenzwert
     gesetzt - macht Salients size="small"/"large" fuer die Optik
     wirkungslos, ohne das size-Attribut selbst zu entfernen (bleibt
     u. a. fuer Klick-/Touch-Flaeche funktional erhalten). */
  padding: var(--ak-space-btn-padding-y) var(--ak-space-btn-padding-x) !important;
}
/* Ursachenanalyse Buttonbreite in Cards: .ak-card > .vc_column-inner >
   .wpb_wrapper ist ein Flex-Container (display:flex;flex-direction:
   column) fuer die Karten-Innenausrichtung. Ohne eigenes align-self
   nehmen Flex-Kinder mit dem Browser-Default (stretch) automatisch die
   volle Breite der Kreuzachse ein - der Card-Link-Button wurde dadurch
   ungewollt so breit wie die Karte selbst. Fix direkt am Kind, nicht am
   Wrapper (der stretch bleibt fuer die Karten-Hoehenausrichtung an
   anderer Stelle weiterhin gewuenscht). */
.ak-card .ak-btn{
  align-self: flex-start;
}
.ak-btn.ak-btn.ak-btn.ak-btn--primary,
.ak-btn.ak-btn.ak-btn.ak-btn--primary:hover{
  background-color: var(--ak-color-primary) !important;
  border-color: var(--ak-color-primary) !important;
  /* Bislang kam Weiss ausschliesslich ueber Salients natives
     solid_text_color_override="#ffffff" (Inline-Style, nur bei
     [nectar_btn]-Shortcodes vorhanden). Fuer die produktgerenderten
     .ak-btn--primary-Links (reines <a>, kein nectar_btn) fehlte
     dadurch eine eigene Textfarbe - der Standard-Linktext blieb
     dunkel/kaum lesbar auf dem magenta Hintergrund. Jetzt fest
     Teil des Systems, unabhaengig davon, welches Element den
     .ak-btn traegt. */
  color: #fff !important;
}
.ak-btn.ak-btn.ak-btn.ak-btn--primary:hover{
  background-color: var(--ak-color-primary-hover) !important;
  border-color: var(--ak-color-primary-hover) !important;
}
.ak-btn.ak-btn.ak-btn.ak-btn--outline{
  border-style: solid !important;
  border-width: 1px !important;
  background-color: transparent !important;
  border-color: var(--ak-color-text) !important;
  color: var(--ak-color-text) !important;
}
.ak-btn.ak-btn.ak-btn.ak-btn--outline:hover{
  background-color: var(--ak-color-primary) !important;
  border-color: var(--ak-color-primary) !important;
  color: #fff !important;
}

/* --- Academy Card: Basis fuer Angebots-/Testimonial-Karten.
   ------------------------------------------------------------
   URSACHENANALYSE (Kartenabstand, Punkt 3 im Korrekturauftrag):
   Salients natives Spalten-Gutter (column_margin_custom, siehe
   Seiteninhalt) erzeugt KEINEN echten Zwischenraum zwischen zwei
   Spalten. Es ist eine klassische Padding-Gutter-Technik: jede
   .wpb_column bekommt padding-left/right: calc(Gap/2), die Row
   bekommt ein kompensierendes margin: calc(-Gap/2) - das Verfahren
   ist in Salients eigenem grid-system.css so angelegt (Regel greift
   ueber die vom Custom-Wert automatisch erzeugte Klasse
   .column-margin-<Xpx>). Lag der Karten-Hintergrund direkt auf der
   Spalte, fuellte er exakt dieses Innen-Padding aus - zwei Karten
   beruehrten sich optisch, obwohl der Gutter-Wert technisch korrekt
   griff (nachgewiesen per getBoundingClientRect: 0px Abstand trotz
   korrekt gesetztem column_margin_custom).
   FIX AUF SYSTEMEBENE: Jede WPBakery-Spalte enthaelt automatisch ein
   eigenes, unklassifiziertes <div class="wpb_wrapper">-Kind (Salient-
   Kernstruktur, kein Custom-Markup). Die komplette visuelle Karten-
   Optik (Hintergrund/Rahmen/Radius/Schatten/Innenabstand) liegt daher
   nicht mehr auf der Spalte (.ak-card) selbst, sondern auf genau
   diesem .wpb_wrapper. Die Spalte bleibt ausschliesslich fuer Salients
   nativen Gutter zustaendig - der wird dadurch als echter, sichtbarer
   Zwischenraum zwischen den Karten-Boxen sichtbar. Kein Custom-
   Wrapper, kein Negative-Margin-Hack, funktioniert fuer jede
   Card-Row mit beliebig vielen Spalten (Mobile-Stapel: Salient setzt
   in diesem Fall automatisch vertikales Margin uebers Gutter-System).

   ZWEITE URSACHENANALYSE (zusaetzlicher, ungewollter Rand): Die vorherige
   Fassung dieser Regel nutzte den Nachfahren-Selektor ".ak-card
   .wpb_wrapper" (ohne Kind-Kombinator). WPBakery-Textelemente wie
   [vc_column_text] erzeugen dabei INTERN ein eigenes, zweites <div
   class="wpb_wrapper"> (Teil von .wpb_text_column.wpb_content_element),
   das als Kind IM Karten-wpb_wrapper verschachtelt liegt. Der Nachfahren-
   Selektor traf beide - das innere .wpb_wrapper bekam dieselbe Border/
   Radius/Padding wie die Karte selbst und erzeugte den sichtbaren
   "doppelten Rand" um den Absatztext. FIX: Kind-Kombinator (">") koppelt
   die Regel exakt an das EINE .wpb_wrapper, das direktes Kind von
   .vc_column-inner ist - .wpb_content_element/.wpb_text_column bleiben
   unveraendert und unsichtbar gestylt, ganz ohne globale Aenderung an
   diesen Salient-Klassen. --- */
.ak-card > .vc_column-inner > .wpb_wrapper{
  background: var(--ak-color-card-bg);
  border: 1px solid var(--ak-color-card-border);
  border-radius: var(--ak-radius-lg);
  box-shadow: var(--ak-shadow-card);
  padding: var(--ak-space-card-padding);
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
}
@media (min-width: 901px){ .ak-card > .vc_column-inner > .wpb_wrapper{ padding: var(--ak-space-card-padding-desktop); } }
.ak-card p{ font-size: var(--ak-text-card-body); color: var(--ak-color-text-muted); }
/* Kicker steht semantisch ueber der allgemeinen, gedaempften Card-Textfarbe:
   .ak-card p (0,1,1 = 11) ist sonst spezifischer als das globale .ak-kicker
   (0,1,0 = 10) und gewinnt faelschlich. .ak-card .ak-kicker (0,2,0 = 20)
   loest das rein ueber Spezifitaet, ohne !important und ohne die
   allgemeine .ak-card p-Regel einzuschraenken. */
.ak-card .ak-kicker{ color: var(--ak-color-primary); }

/* --- Academy Offer Card: Hover-Lift (nur Angebote, nicht Testimonials).
   Animiert bewusst den Wrapper (die sichtbare Karte), nicht die Spalte
   (die auch das unsichtbare Gutter-Padding mit verschieben wuerde). --- */
.ak-offer-card > .vc_column-inner > .wpb_wrapper{ transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.ak-offer-card:hover > .vc_column-inner > .wpb_wrapper{
  transform: translateY(-3px);
  box-shadow: var(--ak-shadow-card-hover);
  border-color: rgba(169, 15, 93, 0.24);
}

/* --- Academy Mini Card (Orientierungsgespraech-Block) --- */
.ak-mini-card{
  background: var(--ak-color-card-bg);
  border: 1px solid var(--ak-color-card-border);
  border-radius: var(--ak-radius-md);
  padding: var(--ak-space-card-padding);
}
.ak-mini-card + .ak-mini-card{ margin-top: 14px; }
.ak-mini-card strong{ display: block; font-size: 1.1875rem; margin-bottom: 8px; color: var(--ak-color-text); }
.ak-mini-card p{ margin: 0; color: var(--ak-color-text-muted); font-size: var(--ak-text-card-body); }

/* --- Academy CTA Banner (Orientierungsgespraech-Karte / Schluss-CTA).
   ------------------------------------------------------------
   URSACHENANALYSE Radius (weiterhin gueltig): Salient rendert eine per
   background_color gesetzte Fuellung nicht auf der Spalte selbst,
   sondern in einer eigenen, tiefer verschachtelten Ebene
   (.vc_column-inner > .column-bg-overlay-wrap > .column-bg-overlay) -
   dasselbe Prinzip wie row-bg-wrap bei Rows, nur fuer Spalten. Ein
   Radius auf der Spalte selbst veraendert daher nicht die sichtbare
   Kante der Fuellung. Fix: Radius + overflow:hidden auf .vc_column-inner
   (den direkten Elternknoten dieser Fuell-Ebene) - dadurch wird JEDES
   Kind, inklusive der Salient-eigenen Hintergrund-Ebene, auf die
   abgerundete Form zugeschnitten. Gleiche Technik wie .ak-image weiter
   unten.

   URSACHENANALYSE Farbebenen ("Ebenen verwechselt") UND Padding (KORRIGIERT
   in dieser Runde - vorherige Annahme war falsch): Der native Parameter
   column_padding="padding-3-percent"/"padding-4-percent" erzeugt zwar die
   Klasse .padding-3-percent auf der Spalte, aber in der tatsaechlich auf
   dieser Salient-Installation geladenen CSS (wp-content/themes/salient/
   css/build/grid-system.css, NICHT die pruefbare, aber ungenutzte
   grid-system-legacy.css) existiert dafuer keine Basis-Regel mehr, die
   ueberhaupt einen Padding-Wert setzt - per getMatchedCSSRules() geprueft,
   .padding-3-percent traegt effektiv 0px vertikal bei. Die einzige real
   wirksame Spalten-Polsterung war Salients allgemeiner 1%-Gutter
   (.vc_row-fluid > .span_12 .wpb_column{padding-left/right:1%}) sowie
   eine explizite .full-width-section > .span_12 > div:last-child{padding-
   bottom:0}-Regel - macht den "3/4%"-Rahmen faktisch nicht existent
   (0px oben/unten, ~1% seitlich) und laesst .column-bg-overlay (die
   gerundete Innenflaeche) fast bis an den Rand der Spalte reichen, was
   sowohl das "fehlende Padding" als auch das "verwechselte" Aussehen der
   zwei Farbebenen erklaert - der f1f9f9-Rahmen war schlicht zu schmal,
   um als eigene Ebene erkennbar zu sein. FIX: Der native Parameter wird
   im Seiteninhalt entfernt (er suggeriert eine Funktion, die auf dieser
   Installation nicht existiert) und durch eine zuverlaessige, eigene
   Academy-Regel ersetzt - Prioritaet 4 der Systemreihenfolge ("eigenes
   CSS nur falls noetig"), hier ausdruecklich zutreffend, weil der native
   Mechanismus nachweislich nicht funktioniert. .ak-cta-banner traegt jetzt
   selbst padding (--ak-space-cta-padding/-desktop) UND border-radius
   (--ak-radius-xl) - beides zusammen macht die Wrapper-Ebene sichtbar
   (Farbrahmen + gerundete Aussenkante), waehrend .vc_column-inner
   weiterhin per eigenem Radius+overflow:hidden die INNERE Kante der
   Kartenflaeche (--ak-color-cta-card) rundet. Gleichzeitig trug
   .column-bg-overlay weiterhin ein inline style="opacity:0.6"
   (Orientierungsgespraech-Karte), das per !important auf opacity:1
   zurueckgesetzt wird, um eine unkontrollierte Mischfarbe mit dem
   Row-Hintergrund zu verhindern. --- */
.ak-cta-banner{
  background: var(--ak-color-cta-wrapper);
  border-radius: var(--ak-radius-xl) !important;
  padding: var(--ak-space-cta-padding) !important;
  box-sizing: border-box;
}
@media (min-width: 901px){
  .ak-cta-banner{ padding: var(--ak-space-cta-padding-desktop) !important; }
}
/* URSACHENANALYSE (gefunden bei der Seite "Selbstbestimmte Bildung"):
   .vc_column-inner (die aeussere, abgerundete Kartenflaeche) traegt
   "padding:0" - dadurch sass sowohl der Kicker (Eckenanschnitt durch
   border-radius) als auch der gesamte Text der 7/12-Textspalte ohne
   jeden Abstand am sichtbaren Kartenrand.
   KORREKTUR (nach Nutzer-Feedback, vorherige Fassung dieser Regel
   war falsch): Polsterung NICHT auf dieser aeusseren Ebene setzen -
   das vergroessert den Abstand der GESAMTEN weissen/hellen Flaeche
   zum tuerkisen Aussenhintergrund, was hier nicht gewuenscht ist und
   auch die Bildspalte verschieben wuerde. Stattdessen traegt die
   aeussere Flaeche wieder KEIN eigenes Padding (Position/Groesse der
   Karte exakt wie urspruenglich), und die Polsterung sitzt gezielt
   auf der eigenen vc_column-inner der 7/12-Textspalte weiter unten
   (.ak-cta-banner .inner_row .vc_col-sm-7 > .vc_column-inner) - trifft
   damit ausschliesslich den Text (inkl. Kicker), laesst Bildspalte,
   Spaltenbreiten und die aeussere Kartenflaeche unangetastet. */
.ak-cta-banner > .vc_column-inner{
  border-radius: var(--ak-radius-xl) !important;
  overflow: hidden;
}

/* Innenabstand des Textinhalts der CTA-Banner-Textspalte - gleicher
   Wert auf allen vier Seiten (Korrektur: oben/unten hatten zunaechst
   weniger Abstand als links/rechts, da nur padding-left/-right gesetzt
   war). siehe Korrektur-Kommentar oben. clamp() statt einer festen
   901px-Stufe, damit Tablet-Breiten einen spuerbar reduzierten
   Zwischenwert bekommen statt direkt auf den vollen Desktop-Wert zu
   springen: 24px (Mobile) -> ~41px (Tablet, z. B. 1024px) -> 50px
   (Desktop, ab ca. 1250px). */
.ak-cta-banner .inner_row .vc_col-sm-7 > .vc_column-inner{
  padding: clamp(24px, 4vw, 50px);
  box-sizing: border-box;
}

.ak-cta-banner .column-bg-overlay{
  background-color: var(--ak-color-cta-card) !important;
  opacity: 1 !important;
}

/* --- Academy Image Container --- */
.ak-image{ border-radius: var(--ak-radius-image) !important; overflow: hidden; }

/* --- Academy Testimonial ---
   Salients Standarddarstellung (linker Farbbalken + kleines
   Anfuehrungszeichen) weicht von der Referenz ab und wird hier gezielt
   ueberschrieben; funktional bleibt [testimonial] bzw. bei mehr
   Eintraegen [testimonial_slider] (natives Touch/Swipe + Pagination,
   siehe Dokumentation) die Basis. Das grosse serifige Anfuehrungszeichen
   kommt per ::before, ohne Markup-Aenderung am Shortcode. --- */
/* Gleiches Prinzip wie .ak-card oben: Karten-Optik auf .wpb_wrapper,
   nicht auf der Spalte, damit Salients natives Gutter zwischen den
   drei Testimonials als echter Zwischenraum sichtbar bleibt. */
.ak-testimonial > .vc_column-inner > .wpb_wrapper{
  background: var(--ak-color-card-bg);
  border: 1px solid var(--ak-color-card-border);
  border-radius: var(--ak-radius-lg);
  box-shadow: var(--ak-shadow-card);
  padding: var(--ak-space-card-padding);
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}
@media (min-width: 901px){ .ak-testimonial > .vc_column-inner > .wpb_wrapper{ padding: 30px 28px 26px; } }
.ak-testimonial > .vc_column-inner > .wpb_wrapper::before{
  content: "\201C";
  display: block;
  font-family: var(--ak-font-display);
  font-size: 40px;
  line-height: 0.8;
  color: var(--ak-color-primary);
  margin-bottom: 14px;
}
@media (min-width: 901px){ .ak-testimonial > .vc_column-inner > .wpb_wrapper::before{ font-size: 56px; margin-bottom: 18px; } }
.ak-testimonial p{
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ak-color-text);
  margin: 0 0 20px;
  flex-grow: 1;
}
@media (min-width: 901px){ .ak-testimonial p{ font-size: 1.0625rem; } }
.ak-testimonial span{
  margin-top: auto;
  font-size: 0.75rem;
  color: var(--ak-color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Salients element-testimonial.css legt auf jedes <blockquote> sitealt
   einen linken Farbbalken + eigenes ::before-Anfuehrungszeichen; beides
   wird gezielt neutralisiert, damit nur das grosse Academy-Zeichen
   sichtbar bleibt. */
.ak-testimonial blockquote{
  margin: 0;
  padding: 0;
  border: none;
  border-left: none;
}
.ak-testimonial blockquote::before,
.ak-testimonial blockquote *::before{
  content: none;
}
/* Salient injiziert serverseitig zusaetzlich ein eigenes kleines
   Anfuehrungszeichen als .image-icon-DIV vor dem Zitat-Text. */
.ak-testimonial blockquote .image-icon{
  display: none;
}

/* Grid-Modus (aktueller Stand: 3 Testimonials, exakt wie Referenz).
   Hinweis: die tatsaechliche Spaltenaufteilung kommt bereits nativ aus
   den WPBakery-Spaltenbreiten (width="1/3" etc.), die auf Mobile
   automatisch stapeln - diese Klasse ist ein Reserve-Hook fuer den
   Fall, dass eine kuenftige Seite Testimonials NICHT ueber WPBakery-
   Spalten, sondern als freies HTML-Grid einbindet. */
.ak-testimonial-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ak-space-gap-card);
}
@media (min-width: 901px){
  .ak-testimonial-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Slider-Modus (sobald mehr Testimonials gepflegt werden): Salients
   natives [testimonial_slider] liefert bereits Touch-/Swipe-Handling
   und Pagination-Dots (siehe Theme-JS nectar-testimonial-slider.js).
   Hier nur Optik angleichen, kein eigenes Karussell-JS. */
.testimonial_slider .ak-testimonial{ height: 100%; }
.testimonial_slider .controls ul{ display: flex; justify-content: center; gap: 8px; margin-top: 24px; padding: 0; list-style: none; }
.testimonial_slider .controls .pagination-switch{
  display: block; width: 9px; height: 9px; border-radius: 999px;
  background: var(--ak-color-card-border); cursor: pointer;
}
.testimonial_slider .controls .pagination-switch.active{ background: var(--ak-color-primary); }

/* --- Academy Counter: nativer [milestone]-Output, nur Typografie an
   die Referenz angeglichen (.nectar-milestone ist eine sitealt
   genutzte Klasse, daher unter .ak-counter gescoped). Abstand
   zwischen den drei Werten kommt ueber column_margin_custom am
   WPBakery-Row (siehe Seiteninhalt), Section-Padding ueber
   .ak-section--small oben. --- */
.ak-counter .nectar-milestone .number h2 span{
  font-family: var(--ak-font-display);
  font-weight: 500;
  color: var(--ak-color-text);
}
.ak-counter .nectar-milestone .subject{
  font-size: 0.8125rem;
  opacity: 0.8;
  color: var(--ak-color-text);
}
/* Symbol ("+" / "seit") kommt nativ grau (#676767, Salients Default-
   Textfarbe); Referenz zeigt es in derselben Farbe wie die Zahl. Nur
   innerhalb des Academy Counters ueberschrieben, .nectar-milestone
   selbst bleibt auf allen anderen Seiten unveraendert grau. */
.ak-counter .nectar-milestone .symbol-wrap{
  color: var(--ak-color-text);
}


/* ------------------------------------------------------------
   5. KOMPONENTEN (BildungsVision-Runde) - allgemeine, seiten-
   unabhaengige Ergaenzungen, keine Seiten-ID-spezifischen Regeln.
   ------------------------------------------------------------ */

/* --- Academy Card: Farbvarianten.
   Die Basis (.ak-card > .vc_column-inner > .wpb_wrapper Hintergrund/
   Rahmen/Radius/Schatten/Padding) bleibt unveraendert (siehe oben).
   Diese Modifier ueberschreiben nur Hintergrund + Rahmenfarbe - per
   zusaetzlicher Klasse auf demselben Element automatisch spezifischer
   als die Basisregel, daher ohne !important loesbar. Wiederverwendbar
   fuer jede kuenftige Seite mit farbig hinterlegten Info-Karten. --- */
.ak-card.ak-card--pink > .vc_column-inner > .wpb_wrapper{
  background: var(--ak-color-rose);
  border-color: var(--ak-color-rose-border);
}
.ak-card.ak-card--blue > .vc_column-inner > .wpb_wrapper{
  background: var(--ak-color-panel);
  border-color: var(--ak-color-panel-border);
}

/* --- Academy Split Row: zweispaltige Flex-Zeile (Inhalt links, Aktion
   rechts), z. B. Mitgliedschafts-Box oder Schluss-CTA mit Text + Button.
   ------------------------------------------------------------
   Gleiches Grundprinzip wie .ak-section-head (siehe FULL-WIDTH-PATTERN
   oben): WPBakery legt zwischen vc_row_inner und den Spalten immer einen
   nativen Wrapper <div class="row_col_wrap_12_inner span_12"> an, der bei
   equal_height="yes" bereits display:flex traegt - dieser native Flex-
   Container wird wiederverwendet statt ein eigener aufgebaut. Anders als
   .ak-section-head (Kicker/Heading, immer flex-end) nutzt .ak-split-row
   align-items:center, da hier Fliesstext und eine gleich hohe Preis-/
   Button-Spalte kombiniert werden. Mobile: Salients natives Spalten-
   Stapeln bleibt unveraendert (keine Regel unterhalb 901px noetig). --- */
@media (min-width: 901px){
  .ak-split-row [class*="row_col_wrap"]{
    justify-content: space-between;
    align-items: center;
    gap: var(--ak-space-gap-lg);
    /* !important noetig: Salients eigene .vc_row-flex-Regel
       (html body .vc_row-fluid > .span_12{flex-wrap:wrap}, Spezifitaet
       0,2,2) ist geringfuegig spezifischer als .ak-split-row [class*=
       row_col_wrap] (0,2,0) und wuerde sonst weiterhin umbrechen. */
    flex-wrap: nowrap !important;
  }
  /* Erste Spalte (Fliesstext) fuellt den verbleibenden Platz und darf
     schrumpfen (min-width:0 verhindert, dass lange Absaetze die Flex-
     Berechnung sprengen und dadurch die zweite Spalte in eine neue Zeile
     umbrechen - der Bug, der hier ohne diese Regel auftrat). Zweite
     Spalte (Preis/Button) bleibt bei ihrer Inhaltsbreite. */
  .ak-split-row [class*="row_col_wrap"] > .wpb_column:first-child{
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
  }
  .ak-split-row [class*="row_col_wrap"] > .wpb_column:last-child{
    flex: 0 0 auto;
    width: auto !important;
  }
}

/* --- Academy Price: fuer Mitgliedschafts-/Kurspreise (BildungsVision,
   kuenftig Shop/Kurs-Seiten). Grossziffer in Display-Schrift + kleiner,
   gedaempfter Zusatztext (Zeitraum) im selben Element sowie eine
   optionale zweite Zeile fuer Alternativpreise (z. B. Monatsrate). --- */
.ak-price{
  font-family: var(--ak-font-display);
  font-weight: 400;
  font-size: var(--ak-text-price);
  color: var(--ak-color-text);
}
@media (min-width: 901px){ .ak-price{ font-size: var(--ak-text-price-desktop); } }
.ak-price span{
  font-family: var(--ak-font-body);
  font-size: var(--ak-text-card-body);
  color: var(--ak-color-text-muted);
}
.ak-price-alt{
  font-family: var(--ak-font-body);
  font-size: var(--ak-text-small);
  color: var(--ak-color-text-muted);
  margin-top: 4px;
}
/* Preis + CTA-Button nebeneinander (Hero-Preiszeile).
   ------------------------------------------------------------
   URSACHENANALYSE: Ein zweites vc_row_inner INNERHALB der Spalte eines
   bereits bestehenden vc_row_inner (hier: Hero-Split) reproduziert exakt
   den bereits bei der Orientierungsgespraech-Karte gefundenen Bug -
   WordPress' Shortcode-Regex kann verschachtelte vc_row_inner-Ebenen
   nicht zuverlaessig aufloesen (sichtbarer Shortcode-Text statt Rendering).
   Fix: KEINE zweite WPBakery-Zeile - .ak-price-block (Preis + Alt-Preis)
   wird per display:inline-block direkt neben den nativ ebenfalls
   inline-block gerenderten [nectar_btn] gesetzt, beide als flache
   Geschwister-Elemente in derselben Spalte (identisches Prinzip wie die
   zwei nebeneinanderstehenden Hero-Buttons auf der Startseite, die
   ebenfalls ohne Row-Wrapper auskommen). Kein WPBakery-Element wird
   dadurch ersetzt - Preis und Button bleiben zwei eigene, im Backend
   unabhaengig editierbare Bloecke. */
.ak-price-block{
  display: inline-block;
  vertical-align: bottom;
  margin: 0 var(--ak-space-gap-card) var(--ak-space-content) 0;
}

/* --- Academy Utility: Textausrichtung rechts. Bewusst minimal gehalten
   (eine Zeile, generisch, keine Seiten-Bindung) statt einer weiteren
   Spezialklasse nur fuer die Mitgliedschafts-Preisspalte. --- */
.ak-text-right{ text-align: right; }

/* --- Academy Feature Item: nummeriertes/gelabeltes Info-Feld in einem
   Zweispalten-Raster (z. B. "Was ist enthalten"-Uebersichten). Analog
   zu .ak-mini-card als einfaches HTML-Muster innerhalb eines
   vc_column_text umgesetzt (keine separaten WPBakery-Spalten noetig -
   gleiches, bereits etablierte Muster wie .ak-mini-card auf der
   Startseite), da es sich um viele kurze, gleichartige Felder statt um
   eigenstaendige Content-Karten mit individueller Reihenfolge handelt. --- */
/* Ursachenanalyse: el_class auf vc_column_text setzt die Klasse auf
   .wpb_text_column (den AEUSSEREN Wrapper) - der eigentliche Inhalt
   (hier: die sechs .ak-feature-item-Divs) liegt aber im NOCHMALS
   verschachtelten .wpb_wrapper-Kind darunter (gleiche Struktur wie beim
   .ak-card-Randbug: jedes [vc_column_text] erzeugt sein eigenes inneres
   .wpb_wrapper). display:grid auf .ak-feature-grid selbst greift daher
   nur auf sein EINZIGES Kind (dieses innere .wpb_wrapper) - das Raster
   muss stattdessen auf genau diesem inneren .wpb_wrapper sitzen. */
.ak-feature-grid > .wpb_wrapper{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ak-space-gap-sm);
}
@media (min-width: 901px){
  .ak-feature-grid > .wpb_wrapper{ grid-template-columns: 1fr 1fr; }
}
.ak-feature-item{
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--ak-color-panel-border);
  border-radius: var(--ak-radius-item);
  padding: 20px;
  box-sizing: border-box;
}
.ak-feature-item > span{
  font-size: 0.6875rem;
  color: var(--ak-color-primary);
  font-weight: 700;
  letter-spacing: 0.1em;
}
/* Ueberschrift/Text im Feature-Item nutzen bewusst die bestehenden
   .ak-heading--card/.ak-card-p-Groessen (Referenz: .bv-card h3,
   .bv-item h3 teilen sich dieselbe Regel) statt einer eigenen, dritten
   Text-Stufe nur fuer dieses Element. */
.ak-feature-item p{
  margin: 0;
  font-size: var(--ak-text-card-body);
  color: var(--ak-color-text-muted);
}

/* --- Academy Divided List: einfache, mit Trennlinien abgesetzte
   Textliste ohne Kartenoptik (z. B. Themen-/Fragenlisten). Bewusst kein
   eigenes Padding-System, sondern feste 15px analog zur Referenz - bei
   Bedarf spaeter auf ein Token anhebbar, sobald ein zweiter Anwendungs-
   fall diese Anforderung bestaetigt. --- */
/* Gleiche Ursache/Fix wie .ak-feature-grid oben: der Inhalt liegt im
   inneren .wpb_wrapper von [vc_column_text], nicht direkt in .ak-
   divided-list (.wpb_text_column) selbst. */
.ak-divided-list > .wpb_wrapper{
  border-top: 1px solid var(--ak-color-line);
}
.ak-divided-list > .wpb_wrapper > div,
.ak-divided-list > .wpb_wrapper > p{
  padding: 15px 0;
  margin: 0;
  border-bottom: 1px solid var(--ak-color-line);
}

/* --- Academy FAQ: Styling-Hook fuer Salients natives [toggles]/[toggle]
   Element (style="minimal", accordion="true") - bewusst KEIN eigenes
   Akkordeon-JS, native Klick-/ARIA-Logik bleibt vollstaendig erhalten.
   ------------------------------------------------------------
   URSACHENANALYSE (el_class + tatsaechliche Klassennamen): Wie bei
   vc_row/vc_row_inner nimmt auch [toggles] KEIN el_class-Attribut an
   (in salient-core/includes/nectar_maps/toggles.php nicht deklariert) -
   el_class direkt am Shortcode wird verworfen. Fix: el_class stattdessen
   auf die umschliessende vc_column setzen (dort funktioniert es
   nachweislich, siehe Seiteninhalt) und von dort aus scopen. Die per
   Browser-Inspektion ermittelten TATSAECHLICHEN Ausgabeklassen sind
   .toggles/.toggle/.toggle-title (NICHT .vc_toggle*/.wpb_accordion_
   holder, wie der Editor-Backend-Platzhalter-Markup in der Shortcode-
   Definition vermuten liesse). Die native "minimal"-Optik (Trennlinien,
   +/--Icons in Akzentfarbe) passt bereits gut zum Design System - hier
   daher nur behutsame Typografie-Angleichung, kein Nachbau als eigene
   Kartenoptik (wuerde die native Optik unnoetig ueberschreiben). --- */
.ak-faq .toggle-title{
  font-family: var(--ak-font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ak-color-text);
}
.ak-faq .toggle > div{
  color: var(--ak-color-text-muted);
  font-size: var(--ak-text-card-body);
  line-height: var(--ak-leading-body);
}


/* ------------------------------------------------------------
   6. ACADEMY PRODUCT VIEW (Bildungs-Angebote-Runde)
   ------------------------------------------------------------
   Erste wiederverwendbare Produktuebersicht des Design Systems:
   Filter + Grid + Karte, gerendert aus echten SureCart-Daten (PHP:
   salient-child/inc/academy-product-view.php, Shortcode
   [ak_product_view]). Anders als die WPBakery-Karten (Startseite/
   BildungsVision) sind dies REINE HTML/CSS-Elemente (kein
   .wpb_wrapper-Layer vorhanden, da nicht von WPBakery, sondern vom
   PHP-Renderer erzeugt) - deshalb hier normales CSS-Grid mit
   echtem "gap" statt des Padding-Gutter-Workarounds, den die
   WPBakery-Card-Komponenten brauchen. Farben/Radien/Schatten/
   Abstaende sind bewusst identisch zu .ak-card (gleiche Tokens),
   damit Produktkarten und redaktionelle Karten sich wie eine
   Familie anfuehlen. --- */

.ak-product-view{ font-family: var(--ak-font-body); }

/* --- Filter: Pillen-Buttons, >=44px Touch-Ziel, horizontal
   scrollbar statt umbrechend auf sehr schmalen Screens (kein
   abgeschnittener Text, keine hakelige Mehrzeilen-Reihe). --- */
.ak-product-filter{
  display: flex;
  gap: var(--ak-space-gap-sm);
  margin-bottom: var(--ak-space-content);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.ak-product-filter::-webkit-scrollbar{ display: none; }
@media (min-width: 641px){
  .ak-product-filter{ flex-wrap: wrap; overflow-x: visible; }
}
.ak-product-filter-item{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--ak-color-card-border);
  background: var(--ak-color-card-bg);
  border-radius: var(--ak-radius-pill);
  font-family: var(--ak-font-body);
  font-size: var(--ak-text-card-body);
  font-weight: 600;
  color: var(--ak-color-text);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.ak-product-filter-item:hover{
  background: var(--ak-color-rose);
  border-color: var(--ak-color-rose-border);
  color: var(--ak-color-primary);
}
.ak-product-filter-item:focus-visible{
  outline: 2px solid var(--ak-color-primary);
  outline-offset: 2px;
}
.ak-product-filter-item.is-active{
  background: var(--ak-color-primary) !important;
  border-color: var(--ak-color-primary) !important;
  color: #fff !important;
}

/* --- Grid: mobile-first eine Spalte, ab 641px zwei, ab 901px drei -
   passend zur Referenz (.shop-grid: 1 / 2 / 3 Spalten je Breakpoint).
   Ladezustand blendet nur ab (kein Layout-Sprung, kein Skeleton
   noetig fuer diesen Umfang).
   URSACHENANALYSE grid-auto-flow: .ak-product-group (Angebotsgruppe wie
   "BasisSeminare") traegt grid-column:1/-1 und erzwingt damit eine
   eigene volle Zeile. Mit dem CSS-Grid-Standardverhalten (sparse
   packing) wird dadurch aber JEDE Karte VOR der Gruppe in der laufenden
   Zeile isoliert - die Spalten rechts daneben bleiben leer, weil das
   Grid nach einem erzwungenen Vollzeilen-Element nicht rueckwirkend
   auffuellt. Ergebnis vor diesem Fix: eine einzelne Karte allein in
   Zeile 1 mit zwei leeren Zellen, bevor die Gruppen-Zeile beginnt -
   Karten fuellen die Zeile nicht wie gewuenscht ("moeglichst 3 pro
   Zeile, Umbruch erst wenn voll"). FIX: grid-auto-flow: dense laesst
   nachfolgende (nicht explizit positionierte) Karten die entstandene
   Luecke VOR der Gruppen-Zeile auffuellen - betrifft nur die
   Platzierungsreihenfolge normal fliessender Karten, NICHT die Gruppe
   selbst (die behaelt ihre eigene volle Zeile unveraendert, siehe
   .ak-product-group weiter unten). Wirkt gleichermassen in allen drei
   Breakpoints (1/2/3 Spalten), keine zusaetzliche Media Query noetig. */
.ak-product-grid{
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: dense;
  gap: var(--ak-space-gap-card);
  transition: opacity .15s ease;
}
@media (min-width: 641px){
  .ak-product-grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 901px){
  .ak-product-grid{ grid-template-columns: repeat(3, 1fr); }
}
.ak-product-grid.is-loading{ opacity: .45; pointer-events: none; }
.ak-product-grid-empty{
  grid-column: 1 / -1;
  color: var(--ak-color-text-muted);
  font-size: var(--ak-text-card-body);
  text-align: center;
  padding: var(--ak-space-content) 0;
}

/* --- Karte: gleiche Optik wie .ak-card (Farb-/Radius-/Schatten-
   Tokens identisch), hier direkt auf dem Element statt ueber
   .wpb_wrapper, da kein WPBakery-Spalten-Wrapper existiert. --- */
.ak-product-card{
  background: var(--ak-color-card-bg);
  border: 1px solid var(--ak-color-card-border);
  border-radius: var(--ak-radius-lg);
  box-shadow: var(--ak-shadow-card);
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ak-product-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--ak-shadow-card-hover);
  border-color: rgba(169, 15, 93, 0.24);
}
.ak-product-card-image{
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ak-color-panel);
}
.ak-product-card-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ak-product-card-content{
  padding: var(--ak-space-card-padding);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
@media (min-width: 901px){
  .ak-product-card-content{ padding: var(--ak-space-card-padding-desktop); }
}
.ak-product-card-kicker{ margin-bottom: 12px; }
.ak-product-card-title{ margin-bottom: 12px; }
.ak-product-card-body{
  font-size: var(--ak-text-card-body);
  color: var(--ak-color-text-muted);
  margin: 0 0 var(--ak-space-content);
}
.ak-product-card-bottom{
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.ak-product-card-price{ line-height: 1.2; }
.ak-product-card-price small{
  display: block;
  margin-top: 2px;
  font-size: var(--ak-text-small);
  color: var(--ak-color-text-muted);
}
.ak-product-card .ak-btn{ align-self: flex-start; }

/* --- Bundle-Unteroptionen (z. B. BasisSeminar 1/2/Bundle in einer
   Karte) - eigene, dichtere Zeilen statt Bild+Preis+CTA-Bottom. --- */
.ak-product-card-options{
  display: grid;
  gap: var(--ak-space-gap-sm);
  margin-top: auto;
}
.ak-product-card-option{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ak-space-gap-sm);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--ak-color-card-border);
  border-radius: var(--ak-radius-item);
  padding: 16px 18px;
}
.ak-product-card-option--featured{
  background: #FFF9FC;
  border-color: rgba(169, 15, 93, 0.34);
}
.ak-product-card-option strong{
  display: block;
  font-size: 1.0625rem;
  color: var(--ak-color-text);
}
.ak-product-card-option small{
  display: block;
  color: var(--ak-color-text-muted);
  font-size: var(--ak-text-small);
  margin-top: 2px;
}
.ak-product-card-option-action{
  text-align: right;
  white-space: nowrap;
  flex: 0 0 auto;
}
.ak-product-card-option-action b{
  display: block;
  font-family: var(--ak-font-display);
  font-weight: 400;
  font-size: 1.125rem;
  color: var(--ak-color-text);
}
.ak-product-card-option-action a{
  display: block;
  margin-top: 2px;
  font-size: var(--ak-text-small);
  color: var(--ak-color-primary);
  font-weight: 600;
}
.ak-product-card-option-action a:hover{ text-decoration: underline; }
@media (max-width: 480px){
  .ak-product-card-option{ display: block; }
  .ak-product-card-option-action{ text-align: left; margin-top: 10px; }
}

/* --- Angebotsgruppe (z. B. "BasisSeminare") - volle Breite im Grid,
   Kartenrumpf identisch zu .ak-product-card, Zeilen via
   .ak-product-card-option* oben. Farbvarianten nutzen bestehende
   Tokens, keine neuen Werte. --- */
.ak-product-group{ grid-column: 1 / -1; }
.ak-product-group.ak-product-group--pink{
  background: var(--ak-color-rose);
  border-color: var(--ak-color-rose-border);
}
.ak-product-group.ak-product-group--blue{
  background: var(--ak-color-panel);
  border-color: var(--ak-color-panel-border);
}

/* Punktfix Seite "NetzwerkBildung (Entwurf Design V1)" (ID 2777):
   [testimonial_slider style="multiple_visible"] hat nativ nur EINEN
   Breiten-Parameter (custom_width_desktop, siehe Salient
   class-nectar-element-styles.php) - keine eigenen Tablet-/Phone-
   Varianten wie bei anderen Nectar-Elementen (z. B. font_size_desktop/
   _tablet/_phone). custom_width_desktop="33.333%" liefert die
   gewuenschten 3 gleichzeitig sichtbaren Testimonials auf Desktop,
   greift mangels Alternative aber unveraendert auch auf Tablet/Phone -
   genau der Fall, in dem laut Systemvorgabe Academy-CSS eingesetzt
   werden soll ("wo wir bestehendes Salient-Verhalten bewusst
   ueberschreiben muessen"). Fix NUR fuer diese eine Seite (Body-ID) -
   kein globales .testimonial_slider-Verhalten geaendert, andere
   Vorkommen auf anderen Seiten bleiben unberuehrt. Breakpoints an
   Salients eigene Slider-Konvention angelehnt (690px/999px, siehe
   element-testimonial.css), nicht an die Academy-Breakpoints (641px/
   901px), weil hier gezielt natives Salient-Verhalten fortgeschrieben
   wird. */
body.page-id-2777 .testimonial_slider[data-style*="multiple_visible"] .flickity-slider .vc_element.vc_testimonial,
body.page-id-2777 .testimonial_slider[data-style*="multiple_visible"] .flickity-slider blockquote{
  width: 33.333% !important;
}
@media (max-width: 999px){
  body.page-id-2777 .testimonial_slider[data-style*="multiple_visible"] .flickity-slider .vc_element.vc_testimonial,
  body.page-id-2777 .testimonial_slider[data-style*="multiple_visible"] .flickity-slider blockquote{
    width: 50% !important;
  }
}
@media (max-width: 690px){
  body.page-id-2777 .testimonial_slider[data-style*="multiple_visible"] .flickity-slider .vc_element.vc_testimonial,
  body.page-id-2777 .testimonial_slider[data-style*="multiple_visible"] .flickity-slider blockquote{
    width: 100% !important;
  }
}

/* Zweiter Fund am selben Slider (NetzwerkBildung, ID 2777): mit
   style="multiple_visible" haelt Salient serienmaessig nur das
   "is-selected" (aktuell im Fokus stehende) Testimonial voll deckend -
   alle anderen werden per data-Attribut-Styling auf opacity:0.3
   abgedunkelt (uebliches Coverflow-Verhalten bei Slidern, bei denen
   PRO Ansicht nur EIN Element im Fokus stehen soll). Das widerspricht
   hier der Anforderung "3 gleichzeitig sichtbar" - abgedunkelter,
   ohnehin schon gedaempfter Fliesstext (.ak-testimonial p nutzt
   --ak-color-text-muted) war dadurch praktisch unlesbar. Ausserdem
   lieferte color="extra-color-1-light" (main-Farboption des
   Sliders) nur dem "is-selected"-Element eine farbige Box UND
   weisse Schrift auf allen drei - ohne Box wurde die weisse Schrift
   auf hellem Seitenhintergrund unsichtbar. FIX in zwei Teilen: (1)
   color="default" im Shortcode (statt extra-color-1-light) - alle
   Testimonials nutzen jetzt einheitlich dunklen Fliesstext ueber die
   ohnehin vorhandene .ak-testimonial-Farbregel. (2) hier: Opacity
   fuer alle Elemente auf 1 zurueckgesetzt UND die bestehende
   .ak-card-Kartenoptik (Hintergrund/Rahmen/Radius/Schatten) direkt auf
   die Testimonial-Blockquotes gelegt, weil die eigentliche .ak-
   testimonial-Kartenregel strukturell an ".vc_column-inner >
   .wpb_wrapper" gebunden ist (WPBakery-Spalten-Struktur) - diese
   existiert hier nicht, da [testimonial] direkt (ohne umschliessende
   Spalte) im Flickity-Slider liegt. Wieder bewusst nur fuer diese eine
   Seite gescoped, kein globales .testimonial_slider-Verhalten
   geaendert. */
body.page-id-2777 .testimonial_slider[data-style*="multiple_visible"] .flickity-slider blockquote{
  opacity: 1 !important;
  background: var(--ak-color-card-bg);
  border: 1px solid var(--ak-color-card-border);
  border-radius: var(--ak-radius-lg);
  box-shadow: var(--ak-shadow-card);
  padding: 28px !important;
  box-sizing: border-box;
  margin: 0 14px !important;
}

/* Dritter Fund am selben Slider: die 33.333%/50%/100%-Breiten oben
   fuellen exakt (3/2/1 x Breite = 100%) die volle Flickity-Spur ohne
   Rest - dadurch sitzt die ERSTE und LETZTE Karte direkt an der Kante
   des Sliders, waehrend zwischen den Karten per margin:0 14px oben
   ein sichtbarer Abstand besteht. Diese Asymmetrie (Abstand zwischen
   Karten, aber keiner zum Rand) wirkt wie ein harter, "abgeschnittener"
   Rand links/rechts. FIX: seitliches Padding auf den Slider-Container
   selbst, damit aussen derselbe Abstand entsteht wie zwischen den
   Karten - die Item-Breiten (33.333% usw.) beziehen sich weiterhin auf
   die (jetzt kleinere) Restbreite und fuellen sie unveraendert exakt,
   nur innerhalb des gepolsterten Bereichs. overflow bewusst NICHT auf
   hidden gesetzt (wuerde bei einer per Flickity/JS versetzten Karte
   eine sichtbare Kante MITTEN durch die Karte schneiden statt sie
   sauber wegzulassen - am selben Element ausprobiert und wieder
   verworfen). */
body.page-id-2777 .testimonial_slider[data-style*="multiple_visible"]{
  padding: 0 56px;
  box-sizing: border-box;
}