/* SoS v1 Redesign — Generisches Textseiten-Template (Todo #1028).
 * Laedt via hooks.php-Regex-Branch (template-content-v1.php -> sos-v1-content.css).
 * Header-Band + Prose-Container fuer Recht/Info-Seiten (/rechnung, /agb, /datenschutz,
 * /impressum, /glossar). Prose-Regeln 1:1 aus dem bewaehrten .art-Muster (news-single),
 * hier unter .pg. Alles unter .sos-v1 gescoped -> Nicht-v1-Seiten unberuehrt.
 */

/* Header = v1-Foto-Hero (.hero aus sos-v1-chrome.css, wie Kurse/Diplome).
 * Hintergrundbild wird im Template inline gesetzt (Beitragsbild der Seite,
 * sonst /proto-assets/hero.webp). Hier nur die Prose. */

/* ===== Prose-Container (gespiegelt von .art / news-single) ===== */
.sos-v1 .pg{
  max-width:1120px; margin:0 auto; padding:52px 6vw 76px;
  font-size:17px; line-height:1.78; color:var(--ink);
}
.sos-v1 .pg > *:first-child{ margin-top:0; }
.sos-v1 .pg p{ margin:0 0 18px; }
.sos-v1 .pg h2{ font-size:25px; font-weight:700; margin:34px 0 12px; }
.sos-v1 .pg h3{ font-size:20px; font-weight:700; margin:26px 0 10px; }
.sos-v1 .pg h4{ font-size:17px; font-weight:700; margin:22px 0 8px; }
.sos-v1 .pg ul,.sos-v1 .pg ol{ margin:0 0 18px 22px; }
.sos-v1 .pg li{ margin-bottom:7px; }
.sos-v1 .pg a{ color:var(--o); font-weight:600; }
/* CTA-Buttons behalten ihre eigene Farbe (sonst faerbt .pg a den Text orange-auf-orange). */
.sos-v1 .pg a.mini-cta{ color:#fff; }
.sos-v1 .pg a.mini-cta:hover{ color:#fff; }
.sos-v1 .pg a.cta-alt{ color:var(--o); }
.sos-v1 .pg a:hover{ color:var(--o-d); }
.sos-v1 .pg strong,.sos-v1 .pg b{ font-weight:700; }
.sos-v1 .pg img{ max-width:100%; height:auto; border-radius:12px; margin:14px 0; }
/* iframe: KEIN height:auto — sonst kollabieren Embeds mit festem height-Attribut
 * (z.B. Airtable-Formular height="1831" -> Upload-Formular abgeschnitten, #1028). */
.sos-v1 .pg iframe{ width:100%; max-width:100%; border:0; border-radius:12px; margin:18px 0; background:var(--card); }
/* Airtable-/Embed-iframes mit fixem inline-Border (border:1px solid #ccc) an Theme angleichen. */
.sos-v1 .pg iframe.airtable-embed{ border:1px solid var(--line)!important; }
.sos-v1 .pg table{ width:100%; border-collapse:collapse; margin:0 0 20px; font-size:15px; }
.sos-v1 .pg th,.sos-v1 .pg td{ border:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top; }
.sos-v1 .pg th{ background:var(--bg); font-weight:700; }
.sos-v1 .pg blockquote{ border-left:4px solid var(--o); padding-left:18px; margin:0 0 18px; color:var(--mut); font-style:italic; }
.sos-v1 .pg hr{ border:none; border-top:1px solid var(--line); margin:32px 0; }

/* ===== [su_box]-Shortcode (Shortcodes Ultimate) dark-mode-tauglich machen =====
 * Alte Rechtsseiten (impressum/agb/datenschutz) wrappen ihren Inhalt in
 * [su_box title="… Stand …"]. Default-Rendering: weisse su-box-content + Lücken
 * um den Titel -> im v1-Dark-Mode „weisse Box" + „doppelter Rahmen". Hier als
 * sauberer, adaptiver Card umgeschrieben (Titel bündig, Body = --card/--ink). */
.sos-v1 .pg .su-box{
  background:var(--card)!important; border:1px solid var(--line)!important;
  border-radius:14px!important; overflow:hidden;
  margin:0 0 24px!important;
  /* Ruhe-Schatten wie v1-Cards (light: 0 6px 22px rgba(0,0,0,.09)). */
  box-shadow:0 6px 22px rgba(0,0,0,.09)!important;
  transition:transform .2s, box-shadow .2s!important;
}
:root[data-theme="dark"] .sos-v1 .pg .su-box{
  border-color:rgba(255,255,255,.14)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 12px 36px rgba(255,255,255,.13)!important;
}
/* Hover-Lift wie die anderen v1-Cards (translateY + staerkerer Schatten). */
.sos-v1 .pg .su-box:hover{
  transform:translateY(-5px); box-shadow:0 14px 30px rgba(0,0,0,.2)!important;
}
:root[data-theme="dark"] .sos-v1 .pg .su-box:hover{
  box-shadow:0 18px 48px rgba(255,255,255,.21)!important;
  border-color:rgba(255,255,255,.26)!important;
}
.sos-v1 .pg .su-box > .su-box-title{
  /* NICHT orange: Orange ist im v1-System der CTA-/Klick-Indikator, der Box-Titel
   * ist aber kein CTA. Neutrales Chrome (--anthra). */
  background:var(--anthra)!important; color:#fff!important;
  margin:0!important; border:0!important; border-radius:0!important;
  padding:14px 22px!important; font-size:18px!important; font-weight:700!important;
  text-shadow:none!important;
}
.sos-v1 .pg .su-box > .su-box-content{
  background:transparent!important; color:var(--ink)!important;
  margin:0!important; padding:22px!important; border-radius:0!important;
}
.sos-v1 .pg .su-box-content p{ color:var(--ink); }

/* ===== Gutenberg-Blöcke (Galerie/Bilder/Spalten) — Core-Block-Styles fehlen im
 * v1-Modus (general.min.css dequeued). Für Seiten wie /musik-uebungsraum. ===== */
.sos-v1 .pg figure{ margin:0 0 18px; }
.sos-v1 .pg figcaption,.sos-v1 .pg .wp-element-caption{
  font-size:13px; color:var(--mut); text-align:center; margin-top:7px;
}
/* Einzelbilder (nicht in Galerie): Hausstil-Grade, bei Hover volle Farbe + Lift. */
.sos-v1 .pg .wp-block-image img{
  border-radius:12px; width:100%; height:auto;
  filter:var(--img-grade); -webkit-filter:var(--img-grade);
  transition:filter .25s, -webkit-filter .25s, transform .2s, box-shadow .2s;
}
.sos-v1 .pg .wp-block-image:hover img{
  filter:none; -webkit-filter:none; transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.2);
}
:root[data-theme="dark"] .sos-v1 .pg .wp-block-image:hover img{ box-shadow:0 16px 40px rgba(255,255,255,.15); }
.sos-v1 .pg .wp-block-columns{ display:flex; gap:26px; flex-wrap:wrap; margin:0 0 20px; }
.sos-v1 .pg .wp-block-column{ flex:1; min-width:250px; }
.sos-v1 .pg .wp-block-group{ margin:0 0 20px; }

/* ===== Galerie als KARUSSELL — exakt das .gal-Slider-Muster der Kurs-Seiten.
 * JS im Template wandelt jede .wp-block-gallery in .gal-wrap um (grosse Bilder,
 * feste Hoehe, horizontales Scroll-Snap, Pfeile + Dots + Auto-Advance). ===== */
/* Fallback vor/ohne JS: einfache Reihe, damit nichts zerbricht. */
.sos-v1 .pg .wp-block-gallery{ display:flex; flex-wrap:wrap; gap:14px; margin:0 0 26px; padding:0; list-style:none; }
.sos-v1 .pg .wp-block-gallery .wp-block-image{ margin:0; flex:1 1 300px; }
.sos-v1 .pg .wp-block-gallery .wp-block-image img{ width:100%; height:auto; border-radius:12px; }

.sos-v1 .pg .gal-wrap{ position:relative; margin:0 0 26px; }
.sos-v1 .pg .gal-stage{ position:relative; }
.sos-v1 .pg .gal{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:34px 48px 44px; scroll-behavior:smooth; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%);
}
.sos-v1 .pg .gal::-webkit-scrollbar{ display:none; }
.sos-v1 .pg .gal-slide{ flex:0 0 auto; scroll-snap-align:center; text-align:center; }
.sos-v1 .pg .gal-slide img{
  height:380px; width:auto!important; max-width:none!important; border-radius:12px; display:block; margin:0 auto;
  filter:var(--img-grade); -webkit-filter:var(--img-grade);
  transition:filter .25s, -webkit-filter .25s, box-shadow .25s, transform .25s;
}
.sos-v1 .pg .gal-slide:hover img{ filter:none; -webkit-filter:none; }
.sos-v1 .pg .gal-cap{ margin:10px auto 0; max-width:440px; font-size:13px; color:var(--mut); line-height:1.45; }
.sos-v1 .pg .gal-arrow{
  position:absolute; top:calc(50% - 12px); transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.92);
  box-shadow:0 4px 16px rgba(0,0,0,.20); color:#222; font-size:26px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center; padding-bottom:4px;
  transition:background .15s, transform .15s;
}
.sos-v1 .pg .gal-arrow:hover{ background:#fff; transform:translateY(-50%) scale(1.08); }
.sos-v1 .pg .gal-prev{ left:6px; }
.sos-v1 .pg .gal-next{ right:6px; }
.sos-v1 .pg .gal-dots{ display:flex; justify-content:center; flex-wrap:wrap; gap:9px; margin-top:2px; }
.sos-v1 .pg .gal-dot{ width:9px; height:9px; border-radius:50%; border:0; background:#cdcdcd; cursor:pointer; padding:0; transition:background .2s, transform .2s; }
.sos-v1 .pg .gal-dot.is-active{ background:var(--o); transform:scale(1.3); }
.sos-v1 .pg .gal-wrap.gal-many .gal-dots{ display:none; }  /* viele Bilder -> keine Dot-Wueste */
@media(max-width:900px){ .sos-v1 .pg .gal-slide img{ height:240px; } }

/* ===== Formulare (Gravity Forms / socform / Newsletter) im v1-Look — dieselbe
 * Optik wie das kf-Formular (chrome.css). Generische Element-Selektoren -> deckt
 * die meisten Formulare ab. Fuer Seiten wie /feedback, /kontakt, /termin. ===== */
.sos-v1 .pg input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]):not([type=hidden]),
.sos-v1 .pg textarea,
.sos-v1 .pg select{
  width:100%; max-width:100%; border:1.5px solid var(--line); border-radius:9px;
  padding:11px 12px; font-size:15px; color:var(--ink); background:var(--card);
  font-family:inherit; box-sizing:border-box; transition:border-color .15s, box-shadow .15s;
}
.sos-v1 .pg textarea{ min-height:120px; resize:vertical; }
/* Eingabetext hell im Dark-Mode: GF setzt -webkit-text-fill-color -> ohne das waere
 * getippter Text dunkel auf dunklem Feld. Buttons ausgenommen. */
.sos-v1 .pg input:not([type=submit]):not([type=button]),
.sos-v1 .pg textarea,
.sos-v1 .pg select{ color:var(--ink)!important; -webkit-text-fill-color:var(--ink)!important; }
.sos-v1 .pg input::placeholder,
.sos-v1 .pg textarea::placeholder{ color:var(--mut)!important; -webkit-text-fill-color:var(--mut)!important; opacity:1; }
.sos-v1 .pg input:focus, .sos-v1 .pg textarea:focus, .sos-v1 .pg select:focus{
  outline:none; border-color:var(--o); box-shadow:0 0 0 3px rgba(255,160,0,.16);
}
.sos-v1 .pg label,
.sos-v1 .pg .gfield_label{ display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.sos-v1 .pg .gfield_required, .sos-v1 .pg .gfield_required_text{ color:var(--o); }
.sos-v1 .pg .gfield, .sos-v1 .pg .gform-body .gform_fields > *{ margin-bottom:16px; }
.sos-v1 .pg .gform_wrapper{ margin:6px 0 0; }
/* /kontakt: Formular klar vom Intro-Text abgrenzen (war zu nah). */
.sos-v1 .pg .kontakt-forms{ margin-top:36px; padding-top:32px; border-top:1px solid var(--line); }
.sos-v1 .pg .gform_description, .sos-v1 .pg .gsection_description, .sos-v1 .pg .gfield_description{
  color:var(--mut); font-size:13px;
}
/* Submit + generische Buttons = v1-Primaer-CTA.
 * WICHTIG: bare `button` NUR ausserhalb von Widgets mit eigenem Button-CSS. Das Spreadshirt-
 * Shop-Widget (#myShop) nutzt sprd-*-Buttons (Groessen, Swatches, Pfeile, Burger, CTA) — die
 * duerfen NICHT von unserem CTA-Styling ueberfaerbt werden (sonst alles orange 80x54 riesig).
 * -> :not([class*="sprd"]) laesst dem Widget seine eigene Button-Optik. */
.sos-v1 .pg button:not([class*="sprd"]),
.sos-v1 .pg input[type=submit],
.sos-v1 .pg input[type=button]:not([class*="sprd"]),
.sos-v1 .pg .gform_footer input[type=submit],
.sos-v1 .pg .gform_button{
  display:inline-block; background:var(--o); color:#fff; border:none; cursor:pointer;
  font-weight:700; font-size:16px; padding:13px 28px; border-radius:10px; width:auto;
  transition:background .15s, box-shadow .15s, transform .15s;
}
.sos-v1 .pg button:not([class*="sprd"]):hover,
.sos-v1 .pg input[type=submit]:hover,
.sos-v1 .pg .gform_footer input[type=submit]:hover,
.sos-v1 .pg .gform_button:hover{
  background:var(--o-d); box-shadow:0 10px 26px rgba(255,160,0,.32); transform:translateY(-1px);
}
/* Checkbox/Radio: Akzentfarbe + Label daneben (nicht als Block). */
.sos-v1 .pg input[type=checkbox], .sos-v1 .pg input[type=radio]{ width:auto; accent-color:var(--o); margin-right:7px; }
.sos-v1 .pg .gchoice label, .sos-v1 .pg .gfield-choice-input + label{ display:inline; font-weight:500; }
/* GF-Validierung dark-mode-tauglich. */
.sos-v1 .pg .gform_validation_errors, .sos-v1 .pg .validation_message{ color:#e05656; font-size:13px; }
/* Technische GF-Felder ausblenden: "pregenerated" (auto-generierter Username, Feld 53) +
 * User-Registration-Username-Feld. Im alten Design vom GF-Add-on versteckt; auf v1 fehlt das. */
.sos-v1 .pg .gfield.pregenerated,
.sos-v1 .pg .gfield--type-username{ display:none!important; }
/* Native <select> auch im Dark-Mode dunkel (GF-Selects erzwingen sonst weiss). */
.sos-v1 .pg select{ background:var(--card)!important; color:var(--ink)!important; }
/* intl-tel-input (Telefon-Flag-Dropdown) NICHT als CTA einfaerben — mein .pg button/input
 * Styling traf den Flag-Container. Neutral halten. */
.sos-v1 .pg .iti{ width:100%; }
.sos-v1 .pg .iti__flag-container,
.sos-v1 .pg .iti__selected-flag,
.sos-v1 .pg .iti button,
.sos-v1 .pg .iti__country-list,
.sos-v1 .pg .iti__country{
  background:transparent!important; color:var(--ink)!important; border:0!important;
  box-shadow:none!important; padding:0 6px!important; font-weight:400!important; transform:none!important;
}
.sos-v1 .pg .iti__selected-flag{ border-right:1px solid var(--line)!important; border-radius:9px 0 0 9px!important; }
.sos-v1 .pg .iti__country-list{ background:var(--card)!important; border:1px solid var(--line)!important; }

/* GF-Section-Ueberschrift: Titel sauber, Linie DARUNTER (kein Overlap mit .pg h2-Margins). */
.sos-v1 .pg .gsection{ border-bottom:1px solid var(--line)!important; padding:0 0 8px!important; margin:34px 0 20px!important; }
.sos-v1 .pg .gsection_title{ font-size:22px!important; font-weight:700!important; color:var(--ink)!important; margin:0!important; padding:0!important; line-height:1.3!important; }
/* GF-Buttons: weisser Text (GF nutzt -webkit-text-fill-color -> color allein reicht nicht,
 * darum beides forcieren). Sonst orange-auf-orange = unsichtbares Label. */
.sos-v1 .pg input.gform_next_button,
.sos-v1 .pg input.gform_button,
.sos-v1 .pg input[type=submit].button,
.sos-v1 .pg .gform_footer input[type=submit]{
  color:#fff!important; -webkit-text-fill-color:#fff!important; text-indent:0!important;
}
/* Zurueck/Secondary = Outline (hoehere Spezifitaet als die Basis-Button-Regel). */
.sos-v1 .pg input.gform_previous_button,
.sos-v1 .pg input.gform-theme-button--secondary{
  background:transparent!important; color:var(--o)!important; -webkit-text-fill-color:var(--o)!important;
  border:2px solid var(--o)!important;
}
.sos-v1 .pg input.gform_previous_button:hover,
.sos-v1 .pg input.gform-theme-button--secondary:hover{
  background:var(--o)!important; color:#fff!important; -webkit-text-fill-color:#fff!important;
}
/* ===== Chosen-Dropdown vollstaendig stylen. general.min.css (enthaelt Chosen v1.5.1-CSS)
 * ist auf v1-Seiten dequeued -> ohne diese Regeln hat das Widget KEIN Layout ("Gewusel":
 * ueberlappende Pfeile/X/Suche). Layout aus Chosen v1.5.1, Farben via v1-Tokens (light+dark).
 * Sprite-Icons durch CSS-Caret ersetzt (kein chosen-sprite.png noetig). ===== */
.sos-v1 .pg .chosen-container{ position:relative; display:block; width:100%!important; font-size:15px; text-align:left; -webkit-user-select:none; user-select:none; }
.sos-v1 .pg .chosen-container *{ box-sizing:border-box; }
.sos-v1 .pg .chosen-container-single .chosen-single{
  position:relative; display:flex; align-items:center; overflow:hidden;
  padding:0 36px 0 12px; height:46px; border:1.5px solid var(--line)!important; border-radius:9px!important;
  background:var(--card)!important; color:var(--ink)!important; text-decoration:none; white-space:nowrap; box-shadow:none!important;
}
.sos-v1 .pg .chosen-container-single .chosen-single span{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink)!important; text-shadow:none!important; }
.sos-v1 .pg .chosen-container-single .chosen-default span,
.sos-v1 .pg .chosen-container-single .chosen-default{ color:var(--mut)!important; }
.sos-v1 .pg .chosen-container-single .chosen-single abbr{ display:none!important; }  /* Clear-X (Sprite) aus */
.sos-v1 .pg .chosen-container-single .chosen-single div{ position:absolute; top:0; right:0; width:34px; height:100%; background:none!important; }
.sos-v1 .pg .chosen-container-single .chosen-single div b{ display:block; width:100%; height:100%; background:none!important; position:relative; }
.sos-v1 .pg .chosen-container-single .chosen-single div b::before{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-60%);
  border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid var(--mut);
}
.sos-v1 .pg .chosen-container-active.chosen-with-drop .chosen-single div b::before{ transform:translate(-50%,-40%) rotate(180deg); }
.sos-v1 .pg .chosen-container-active .chosen-single{ border-color:var(--o)!important; box-shadow:0 0 0 3px rgba(255,160,0,.16)!important; }
.sos-v1 .pg .chosen-container .chosen-drop{
  position:absolute; top:calc(100% + 4px); left:-9999px; z-index:1010; width:100%;
  border:1px solid var(--line)!important; border-radius:10px; background:var(--card)!important;
  box-shadow:0 14px 32px rgba(0,0,0,.18); overflow:hidden;
}
.sos-v1 .pg .chosen-container.chosen-with-drop .chosen-drop{ left:0; }
.sos-v1 .pg .chosen-container-single .chosen-search{ position:relative; z-index:1010; margin:0; padding:8px; white-space:nowrap; }
.sos-v1 .pg .chosen-container-single .chosen-search input[type=text]{
  margin:0!important; padding:9px 11px!important; width:100%; height:auto!important;
  border:1.5px solid var(--line)!important; border-radius:8px!important; background:var(--card)!important;
  color:var(--ink)!important; font-size:14px; outline:0; box-shadow:none!important;
}
.sos-v1 .pg .chosen-container .chosen-results{ position:relative; overflow-x:hidden; overflow-y:auto; margin:0; padding:4px; max-height:260px; color:var(--ink); }
.sos-v1 .pg .chosen-container .chosen-results li{ display:none; margin:0; padding:9px 12px; list-style:none; line-height:1.35; border-radius:7px; word-wrap:break-word; color:var(--ink); background:none; }
.sos-v1 .pg .chosen-container .chosen-results li.active-result{ display:list-item; cursor:pointer; }
.sos-v1 .pg .chosen-container .chosen-results li.result-selected{ color:var(--mut); }
.sos-v1 .pg .chosen-container .chosen-results li.disabled-result{ display:list-item; color:var(--mut); cursor:default; }
.sos-v1 .pg .chosen-container .chosen-results li.highlighted{ background:var(--o)!important; color:#fff!important; }
.sos-v1 .pg .chosen-container .chosen-results li.no-results{ color:var(--mut); }
.sos-v1 .pg .chosen-container .chosen-results li.group-result{ display:list-item; font-weight:700; cursor:default; }
/* Multi-Select (chosen-container-multi) — z.B. "Woher kennst du die SoS". */
.sos-v1 .pg .chosen-container-multi .chosen-choices{
  display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin:0; padding:6px 10px!important;
  width:100%; min-height:46px; border:1.5px solid var(--line)!important; border-radius:9px!important;
  background:var(--card)!important; background-image:none!important; box-shadow:none!important; cursor:text;
}
.sos-v1 .pg .chosen-container-multi .chosen-choices li{ float:none!important; list-style:none; margin:0; }
.sos-v1 .pg .chosen-container-multi .chosen-choices li.search-field input[type=text]{
  margin:0!important; padding:6px 4px!important; height:auto!important; border:0!important;
  background:transparent!important; color:var(--ink)!important; font-size:15px; box-shadow:none!important;
}
.sos-v1 .pg .chosen-container-multi .chosen-choices li.search-choice{
  position:relative; margin:0; padding:5px 24px 5px 9px!important; max-width:100%;
  border:1px solid var(--line)!important; border-radius:6px!important; background:var(--bg)!important;
  background-image:none!important; box-shadow:none!important; color:var(--ink)!important; line-height:1.3;
}
.sos-v1 .pg .chosen-container-multi .chosen-choices li.search-choice .search-choice-close{
  position:absolute; top:50%; right:6px; transform:translateY(-50%); width:14px; height:14px;
  background:none!important; cursor:pointer;
}
.sos-v1 .pg .chosen-container-multi .chosen-choices li.search-choice .search-choice-close::before{
  content:"\00d7"; color:var(--mut); font-size:16px; line-height:1;
}
.sos-v1 .pg .chosen-container-active .chosen-choices{ border-color:var(--o)!important; box-shadow:0 0 0 3px rgba(255,160,0,.16)!important; }
/* GF-Beschreibung/Validierung/Instruction sauber unter das Feld (kein Overlap). */
.sos-v1 .pg .gfield_description,
.sos-v1 .pg .gfield_validation_message,
.sos-v1 .pg .validation_message,
.sos-v1 .pg .instruction{
  display:block!important; position:static!important; margin:6px 0 0!important; padding:0!important;
  font-size:13px; line-height:1.4;
}
.sos-v1 .pg .gfield_validation_message, .sos-v1 .pg .validation_message{ color:#e05656!important; background:none!important; border:0!important; }
/* Radio/Checkbox-Reihen: kompakt links, nicht ueber die volle Breite verteilt (die "6" klebte rechts). */
.sos-v1 .pg .gfield_radio,
.sos-v1 .pg .gfield_checkbox,
.sos-v1 .pg .ginput_container_radio ul,
.sos-v1 .pg .ginput_container_checkbox ul{
  display:flex!important; flex-wrap:wrap; gap:8px 20px; list-style:none; margin:0; padding:0; justify-content:flex-start;
}
.sos-v1 .pg .gfield_radio .gchoice,
.sos-v1 .pg .gfield_checkbox .gchoice,
.sos-v1 .pg .ginput_container_radio li,
.sos-v1 .pg .ginput_container_checkbox li{
  display:flex!important; align-items:center; gap:6px; margin:0!important;
  width:auto!important; max-width:100%!important; flex:0 0 auto!important;  /* nicht schrumpfen -> Label nicht abgeschnitten */
}
/* Label voll anzeigen (GF/Ellipsis-Truncation aufheben). */
.sos-v1 .pg .gfield_radio label, .sos-v1 .pg .gfield_checkbox label,
.sos-v1 .pg .gfield_radio .gchoice label, .sos-v1 .pg .gfield_checkbox .gchoice label{
  display:inline!important; margin:0!important; font-weight:500;
  white-space:normal!important; overflow:visible!important; text-overflow:clip!important;
  max-width:none!important; width:auto!important;
}

@media(max-width:560px){
  .sos-v1 .pg{ padding:38px 5vw 60px; font-size:16px; }
}

/* ===== Chosen Single-Select: Such-Box ausblenden. GF markiert kurze Listen NICHT
 * als nosearch -> ohne diese Regel erscheint ueber den Optionen eine leere Box, die
 * wie ein zusaetzliches Eingabefeld aussieht (z.B. "Ort waehlen"). Multi-Select-
 * Suchfeld (Tippen zum Filtern) bleibt erhalten. ===== */
.sos-v1 .pg .chosen-container-single .chosen-search{ display:none!important; }
.sos-v1 .pg .chosen-container-single .chosen-drop{ margin-top:0; }

/* ===== Shortcodes-Ultimate-Galerie (su-custom-gallery, z.B. /fotos): 2 pro Zeile,
 * groessere Previews, beidseitig buendig (Grid mit gleichbreiten Spalten -> linke UND
 * rechte Kante flush). su-eigenes float/inline-block-Layout wird ueberschrieben. ===== */
.sos-v1 .pg .su-custom-gallery{
  display:grid!important; grid-template-columns:repeat(2,1fr); gap:16px; margin:0 0 26px;
}
.sos-v1 .pg .su-custom-gallery::after{ display:none!important; content:none!important; }  /* SU-Clearfix aus */
.sos-v1 .pg .su-custom-gallery-slide{
  float:none!important; width:auto!important; height:auto!important; margin:0!important; padding:0!important;
  aspect-ratio:16/9;  /* Ratio auf dem CONTAINER — su fixiert sonst 150px Hoehe (Thumbnail-Groesse) und clippt das Bild */
  background:var(--card); border-radius:12px; overflow:hidden;  /* kaputte Uploads -> Card-BG statt grellem Weiss */
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.sos-v1 .pg .su-custom-gallery-slide a{ display:block!important; width:100%!important; height:100%!important; }
.sos-v1 .pg .su-custom-gallery-slide img{
  width:100%!important; height:100%!important; object-fit:cover; display:block;
  border-radius:12px; filter:var(--img-grade); -webkit-filter:var(--img-grade);
  transition:filter .25s, -webkit-filter .25s, transform .3s;
}
.sos-v1 .pg .su-custom-gallery-slide:hover img{ filter:none; -webkit-filter:none; transform:scale(1.04); }
.sos-v1 .pg .su-custom-gallery-title{ display:none; }  /* Hover-Titel-Overlay der SU-Galerie aus (kein Layout dafuer) */
@media(max-width:560px){ .sos-v1 .pg .su-custom-gallery{ grid-template-columns:1fr; } }

/* ===== Legacy Course-Tiles ([remix]-Shortcode auf /remix-contests) als v1-Card-Grid.
 * general.min.css (Foundation-Grid + Hexagon-Overlays + BebasNeue) ist auf v1 dequeued
 * -> Kacheln stapelten als Liste. Sauberes 3-spaltiges v1-Card-Grid statt Legacy-Optik.
 * custom.js (js-link Klick + details-toggle) bleibt geladen -> Interaktion funktioniert. ===== */
.sos-v1 .pg .row:has(.column.course){ display:flex; flex-wrap:wrap; margin:0 -10px; }
.sos-v1 .pg .column.course{
  width:33.333%; float:none; box-sizing:border-box; padding:0 10px; margin:0 0 34px; text-align:left;
}
.sos-v1 .pg .column.course .image-wrapper{
  position:relative; border-radius:12px; overflow:hidden; cursor:pointer; margin:0 0 12px;
  box-shadow:0 6px 22px rgba(0,0,0,.10); aspect-ratio:1/1; background:var(--card);  /* uniforme Reihen; fehlendes Bild -> Card-BG */
}
.sos-v1 .pg .column.course .image-wrapper img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.sos-v1 .pg .column.course .image-wrapper:hover img{ transform:scale(1.05); }
.sos-v1 .pg .column.course .image-overlay{ display:none; }  /* Hexagon-PNG nicht geladen */
.sos-v1 .pg .column.course .overlay{
  position:absolute; inset:0; display:flex; align-items:flex-end; padding:16px;
  background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0) 62%);
  opacity:0; transition:opacity .25s;
}
.sos-v1 .pg .column.course .image-wrapper:hover .overlay{ opacity:1; }
.sos-v1 .pg .column.course .overlay h3,
.sos-v1 .pg .column.course .overlay h4{ color:#fff; font-size:16px; font-weight:800; margin:0; line-height:1.3; text-shadow:0 2px 6px rgba(0,0,0,.6); }
.sos-v1 .pg .column.course .details-toggle{ margin:0 0 10px; }
.sos-v1 .pg .column.course .details-toggle a{
  display:inline-block; padding:9px 18px; border:2px solid var(--o); border-radius:9px;
  color:var(--o); font-weight:700; font-size:14px; text-decoration:none; transition:background .15s,color .15s;
}
.sos-v1 .pg .column.course .details-toggle a.active,
.sos-v1 .pg .column.course .details-toggle a:hover{ background:var(--o); color:#fff; }
.sos-v1 .pg .column.course .details-outer-wrapper .details-wrapper > div{ display:none; }
.sos-v1 .pg .column.course .details-outer-wrapper .details-wrapper > div.active{ display:block; font-size:14px; color:var(--mut); }
@media(max-width:760px){ .sos-v1 .pg .column.course{ width:50%; } }
@media(max-width:480px){ .sos-v1 .pg .column.course{ width:100%; } }

/* ===== Spreadshirt-Widget (#myShop /merchandising) auf v1 =====
 * ROOT CAUSE Mobile-Layout: Der Shopclient waehlt Desktop/Mobile nach der CONTAINER-Breite
 * von #myShop. In .pg (max-width:1120px) ist #myShop nur ~952px breit -> unter dem Desktop-
 * Breakpoint -> Burger + Mobile-Nav + riesige Swatch-Buttons + Overlay ueber den Dropdowns.
 * Auf dem alten Template war #myShop full-width -> Desktop. Fix: #myShop aus dem .pg-Cap
 * ausbrechen auf breite Desktop-Breite -> Widget rendert wieder Desktop (loest alle 3 Symptome). */
.sos-v1 .pg #myShop{
  font-size:16px;                 /* Browser-Default -> Widget-em-Sizing normal */
  width:94vw; max-width:1300px;   /* breiter als der .pg-1120-Cap -> ueber Desktop-Breakpoint */
  margin-left:50%; transform:translateX(-50%);  /* auf Seitenmitte zentrieren (bricht .pg-Cap) */
  background:#fff; color:#333;    /* fuellt transparente Widget-Luecken (Breadcrumb-Band) weiss statt v1-Dunkel */
}
/* Unser .pg-Prose-Link-Orange (.pg a{color:var(--o)}) darf die Widget-eigenen <a> nicht faerben.
 * Widget-eigenes SoS-Orange (Buttons sprd-c-cta/sprd-bg-m2 = Brand-Config) bleibt. */
.sos-v1 .pg #myShop a{ color:#333; }
.sos-v1 .pg #myShop a:hover{ color:#111; }
/* Widget-Breadcrumb-nav (.sprd-breadcrumb-nav) bekommt sonst unsere Chrome-Regel
 * ".sos-v1 nav{background:var(--card);position:sticky;min-height:72px;z-index:50}" ab
 * (bare `nav` matcht den Widget-nav) -> dunkles, klebendes Band das Nav/Dropdowns
 * ueberdeckt. Nativ ist er transparent+statisch. Zuruecksetzen: */
.sos-v1 .pg #myShop .sprd-breadcrumb-nav{
  background:transparent !important; position:static !important; min-height:0 !important;
  border-bottom:none !important; padding:6px 0 !important; z-index:auto !important; top:auto !important;
}
/* Orange Swatch-Buttons in der Produktliste ausblenden. Quelle ist NICHT unsere CSS,
 * sondern das cross-origin Widget-/Shop-CSS (100065776.myspreadshop.ch, Brand-Farbe):
 * die .sprd-appearance-list__appearance-Buttons rendern 80x54px orange und laufen aus
 * ihrem 28px-Container -> grosse orange Bars, die die Kacheln zukleistern. */
.sos-v1 .pg #myShop .sprd-appearance-list--listpage,
.sos-v1 .pg #myShop .sprd-appearance-list__appearance{ display:none !important; }

/* ===== black-friday (page-id-25407): media-text-Angebote (Kurse/Diplome/Upgrades/
 * ONLINE-MC/Gutscheine) als Cards mit Hover-Shadow. Separatoren weg — Card-Abstand reicht. ===== */
.sos-v1.page-id-25407 .pg hr.wp-block-separator{ display:none; }
.sos-v1.page-id-25407 .pg .wp-block-media-text{
  background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.08); margin:0 0 22px; align-items:stretch;
  transition:box-shadow .25s, transform .25s;
}
.sos-v1.page-id-25407 .pg .wp-block-media-text:hover{ box-shadow:0 18px 44px rgba(0,0,0,.20); transform:translateY(-3px); }
.sos-v1.page-id-25407 .pg .wp-block-media-text__media{ margin:0; }
.sos-v1.page-id-25407 .pg .wp-block-media-text__media img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:0; }
.sos-v1.page-id-25407 .pg .wp-block-media-text__content{ padding:26px 30px; align-self:center; }
.sos-v1.page-id-25407 .pg .wp-block-media-text__content p{ margin:0 0 10px; }
.sos-v1.page-id-25407 .pg .wp-block-media-text__content p:first-child{ font-size:23px; font-weight:800; margin-bottom:12px; line-height:1.25; color:var(--ink); }  /* Titel neutral — nicht klickbar, also kein Orange */
/* Rabatt-Code als neutraler Chip (nicht orange = nicht klickbar) */
.sos-v1.page-id-25407 .pg .wp-block-media-text__content p:last-child strong{
  display:inline-block; background:var(--bg); border:1px solid var(--line); border-radius:6px;
  padding:2px 9px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px; letter-spacing:.03em;
}

/* ===== Keyboard-Diplom-Cards (.kb-cards, keyboard-januar): 3-spaltig, Hover-Shadow.
 * Content-seitig als wp:html-Kartengrid gesetzt (Diplom 3/5/7). ===== */
.sos-v1 .pg .kb-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:8px 0 28px; }
.sos-v1 .pg .kb-card{
  display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:24px 22px; box-shadow:0 4px 16px rgba(0,0,0,.08);
  transition:box-shadow .25s, transform .25s;
}
.sos-v1 .pg .kb-card:hover{ box-shadow:0 18px 44px rgba(0,0,0,.20); transform:translateY(-4px); }
.sos-v1 .pg .kb-card-lvl{ font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); margin:0 0 8px; }  /* Label neutral — nicht klickbar */
.sos-v1 .pg .kb-card-tag{ font-size:15px; color:var(--mut); margin:0 0 16px; }
.sos-v1 .pg .kb-card-img{ display:flex; align-items:center; justify-content:center; height:150px; margin:0 0 16px; }
.sos-v1 .pg .kb-card-img img{ max-width:100%; max-height:150px; width:auto; height:auto; object-fit:contain; }
.sos-v1 .pg .kb-card-name{ font-size:17px; font-weight:800; margin:0 0 8px; line-height:1.3; }
.sos-v1 .pg .kb-card-desc{ font-size:14px; color:var(--mut); line-height:1.5; margin:0 0 18px; flex:1 1 auto; }
.sos-v1 .pg a.kb-card-link{
  display:inline-block; align-self:flex-start; padding:10px 20px; border:2px solid var(--o); border-radius:9px;
  color:var(--o); font-weight:700; font-size:14px; text-decoration:none; transition:background .15s,color .15s;
}
.sos-v1 .pg a.kb-card-link:hover{ background:var(--o); color:#fff; }
@media(max-width:760px){ .sos-v1 .pg .kb-cards{ grid-template-columns:1fr; } }