/*
 * MOBILE ANSICHT (Meldungen der Testerin aos-website#101, #102, #103, #105, #106, #107, #108, #110, #111; Entscheid Tobias 07.10.2026:
 * "nur Layout beziehungsweise CSS, optische Aenderungen, nichts Textliches").
 *
 * Jede Regel steht an der gemessenen Ursache (Suite inhalte, Spec mobil.spec.mjs, Laeufe 20261007-1718 und -1726, 390 x 844):
 *   #106/#107  Fuss: drei Spalten nebeneinander (.inside.row ist flex), je 114 px; Ueberschriften und Links liefen aus der Spalte, das Siegel
 *              hatte 87 px. -> untereinander, volle Breite; das Siegel stapelt seine zwei Zellen.
 *   #105       "Dein Zertifikat": die Grafik ist 1900 x 300, die Zertifikate liegen rechts. Das Theme verschiebt sie um -100 %, begrenzt aber die
 *              Breite auf 100 % - sie landete 300 px links ausserhalb. -> rechte 40 % der Grafik fuellen die Breite.
 *   #101       Bewertungsportal-Grafik (FernstudiumDirekt) in der Kurzbeschreibung: 345 px breit. -> hoechstens 150 px.
 *   #103       Foerderung: inline padding-left:320px am Link "Zur Variante mit Bildungsgutschein"; lange Ueberschriften ohne Umbruch.
 *   #110       Startseiten-Slider: Infokasten haengt absolut am unteren Rand der 200 px hohen Flaeche und waechst bei langem Text nach OBEN unter den
 *              Kopf. -> untereinander: Bild, darunter der Kasten in seiner natuerlichen Hoehe.
 *   #102/#108/#111  in der Mitte der Rueckruf-Knopf (Menue), rechts der Halbkreis der Rabattpille; der Cookie-Knopf ist seit 08.10.2026 ein Link in der Fusszeile:
 *              -> Seit 08.10.2026 nur noch ein Halbkreis rechts (seit 12.10.2026 die Aktionspille des Bausteins, Abschnitt am Ende dieser Datei); Seitenende mit Luft, damit die Rechtlichen Links frei liegen.
 */

@media (max-width: 767px) {
  /* #106 Fuss */
  #footer .top .inside.row { flex-direction: column; flex-wrap: nowrap; }
  #footer .top .inside.row > .footercol { width: 100%; max-width: 100%; flex: 0 0 auto; height: auto; padding: 0 0 24px; border: 0; }
  #footer .footercol nav { width: 100%; max-width: 100%; overflow: visible; }
  #footer .footercol h2.headline, #footer .footercol a { overflow-wrap: anywhere; }

  /* #107 Siegel im Fuss: die zwei Zellen untereinander, nichts wird beschnitten */
  #provenExpertFooterArea { width: auto; max-width: 100%; overflow: visible; margin-top: 20px; }
  #provenExpertFooterArea table, #provenExpertFooterArea tbody, #provenExpertFooterArea tr, #provenExpertFooterArea td { display: block; width: auto; max-width: 100%; }
  #provenExpertFooterArea td { padding: 0 0 12px; }
  #provenExpertFooterArea td:nth-child(2) { display: none; }
  #proSealWidget { max-width: 100%; }

  /* #101 Bewertungsportal-Grafik in der Kurzbeschreibung */
  .mod_customcatalogreader.cc_produkte .common .ce_spaltenset_wrapper_start .ce_image img { max-width: 150px; height: auto; }

  /* #103 Foerderung */
  .accordion-body p[style*="padding-left"] { padding-left: 0 !important; }
  .accordion-body h2, .accordion-body h3 { font-size: clamp(18px, 5.4vw, 24px); line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; }

  /* #108 Seitenende: Platz fuer Rueckruf-Knopf und Pille, die Rechtlichen Links bleiben frei erreichbar */
  body { padding-bottom: 8rem; }
  body:has(.ocg-aktionspille:not([hidden])) { padding-bottom: 12rem; } /* der Halbkreis der Aktionspille sitzt rechts auf 8,25 bis 11,75 rem */
}

/* #105 Zertifikat */
@media (max-width: 680px) {
  .ce_e_abschluss_produkte .ce_image figure.image_container img { width: 250%; max-width: none; position: relative; left: -150%; }
}

/* #110 Slider: Bild oben, Kasten darunter in natuerlicher Hoehe */
@media (max-width: 750px) {
  .ce_e_slide { display: flex; flex-direction: column; }
  .ce_e_slide .visual { order: 1; }
  /* der Theme-Selektor `#keyvisual #intro .container` (absolut, left: 50 %) ist spezifischer: derselbe Selektor, spaeter geladen */
  #keyvisual #intro .container, .ce_e_slide .container { order: 2; position: static; left: auto; transform: none; bottom: auto !important; width: 100%; opacity: 1; z-index: auto; }
  /* Das Etikett "KI-generiert" (Theme: ::after, absolut unten rechts am SLIDE) soll am Bild bleiben, nicht auf dem Knopf darunter liegen:
     als letzter Eintrag der Bildspalte, mit Rueckversatz ueber den unteren Bildrand. */
  .ce_e_slide.ki-generiert::after { position: relative; order: 1; align-self: flex-end; bottom: auto; right: 8px; margin: -22px 0 8px; }
}

/*
 * AKTIONSPILLE (Baustein ocg-marken-bausteine @ ae8a19b, Betreiberentscheid F-213 vom 11.10.2026): Aufbau und Verhalten liefert der Baustein
 * (/bundles/ocgmarkenbausteine/ocg-aktionspille.css, erst geladen, wenn eine Aktion laeuft). Hier steht nur die Optik der Academy of Sports,
 * als Variablen; Farben und Masse wie die bisherige Pille (aos-website#116). Diese Datei laedt jede Seite ohnehin: keine zusaetzliche Anfrage.
 * Kontraste, gerechnet: Text #23201e auf #fff 16,3:1; Frist #5c5650 auf #fff 7,3:1; Marke #23201e auf #f39100 8,2:1; Rand #8f8a85 auf #fff 3,5:1.
 * Der Halbkreis sitzt mobil auf 8,25 rem, ueber dem Rueckruf-Knopf und dem Fusszeilen-Link zum Cookie-Widerruf (Lauf 20261008-1233).
 */
.ocg-aktionspille {
  --ocg-pille-grund: #fff;
  --ocg-pille-text: #23201e;
  --ocg-pille-nebentext: #5c5650;
  --ocg-pille-rand: 1px solid #8f8a85;
  --ocg-pille-akzent: #f39100;
  --ocg-pille-akzent-text: #23201e;
  --ocg-pille-fokus: #23201e;
  --ocg-pille-unten-mobil: 8.25rem;
}
.ocg-aktionspille-marke { font-style: italic; }

/*
 * TESTERINNEN-MELDUNGEN 13.10.2026 (aos-website#114, #115, #118, #121). Jede Regel nennt ihre Meldung.
 */

/* #114: Ist das Burger-Menue offen (Theme setzt body.menu), liegen Aktionspille und Einwilligungskarte ueber dem unteren Teil der Liste
   (AZAV war nicht erreichbar). Beide treten zurueck, solange das Menue offen ist; mit dem Schliessen sind sie wieder da (kein Merker, kein Skript). */
body.menu .ocg-aktionspille,
body.menu .aos-consent,
body.menu .aos-consent-hg { display: none !important; }

/* #115: In den grauen Infokaesten der Kategorieseiten wurde ein langes Wort am Kastenrand abgeschnitten ("Laufgruppe"). Das Theme stapelt Bild und
   Text mobil selbst (customize.css, <= 750 px); was fehlte, ist der Umbruch langer Woerter im Kasten. */
@media (max-width: 767px) {
  .content-box-special-01 { overflow-wrap: anywhere; hyphens: auto; }
}

/* #121: Der Knopf "BEWIRB DICH JETZT!" im Produkt-Teaser (Initiativbewerbung u. a.) sitzt absolut am Kastenrand und lag mobil ueber dem Text.
   Mobil steht er im Fluss unter der Beschriftung; das Hintergrundbild bleibt hinter dem Kasten. */
@media (max-width: 767px) {
  .ce_e_produkt_teaser a { padding-bottom: 24px; }
  .ce_e_produkt_teaser a .label { position: relative; z-index: 2; }
  .ce_e_produkt_teaser a .button_text { position: relative; bottom: auto; left: auto; z-index: 2; margin-top: 16px; }
}

/* #118: Das Theme faerbt Links und Spans je Produktkategorie (body.cat-*). Die Pille bekommt ihre Farben aus den Variablen oben, mit
   Vorrang vor jeder Kategorie, damit Marke, Text und Pfeil in allen Kategorien dieselben, gemessenen Kontraste haben
   (Marke #23201e auf #f39100 8,2:1, Text #23201e auf #fff 16,3:1). */
body .ocg-aktionspille a.ocg-aktionspille-link:link .ocg-aktionspille-marke,
body .ocg-aktionspille a.ocg-aktionspille-link:visited .ocg-aktionspille-marke,
body .ocg-aktionspille .ocg-aktionspille-marke { color: var(--ocg-pille-akzent-text); background: var(--ocg-pille-akzent); }
body .ocg-aktionspille .ocg-aktionspille-text,
body .ocg-aktionspille .ocg-aktionspille-pfeil { color: var(--ocg-pille-text); }

/* #108 (Desktop): Die Aktionspille sitzt fest unten rechts (16 px vom Rand) und ist auf Produktseiten mit Frist und Marke rund 100 px hoch. Ohne Luft
   am Seitenende liegt sie ueber den Rechtlichen Links im Fuss (Datenschutz Social Media, Barrierefreiheit). Das Fussende bekommt deshalb Platz,
   solange die Pille steht; der Hintergrund bleibt der des Fusses, weil das Polster am Element .copyright (der Leiste mit den Rechtlichen Links) hangt und nicht am body. */
@media (min-width: 768px) {
  body:has(.ocg-aktionspille:not([hidden])) #footer .copyright { padding-bottom: 7.5rem; }
}