/**
 * rich-content-engine.css  v3
 * ===========================================================================
 * PANZERUNG
 * ---------------------------------------------------------------------------
 * Der Anlass für diese Fassung: Bei einem Testbeitrag war die Gestaltung weg.
 * Grund war die Annahme, das Theme liefere die Grundgestaltung und dieses
 * Plugin ergänze sie nur. Diese Annahme trägt nicht. Ein Beitrag kann in
 * einem Elementor-Container landen, in einer anderen Vorlage, in einem
 * Theme-Update oder auf einer Seite, wo rich-content.css gar nicht geladen
 * wird. Dann steht der Text nackt da.
 *
 * Deshalb bringt das Plugin jetzt die vollständige Gestaltung mit und setzt
 * sie gegen alles durch, was aus Theme, Elementor oder WordPress kommt.
 * Dasselbe Vorgehen wie im Demo Configurator, das dort seit Monaten hält.
 *
 * Die vier Mittel, in dieser Reihenfolge:
 *
 * 1. EIGENER SCOPE. Alles hängt unter #sgce-a. Der Beitrag bringt diese
 *    Kennung selbst mit, das Theme kennt sie nicht und kann sie nicht
 *    versehentlich treffen.
 *
 * 2. RESET INNERHALB DES SCOPES. Themes setzen Abstände, Rahmen, Schriften
 *    und Grossschreibung auf blanken Elementen. Innerhalb des Scopes wird
 *    das einmal zurückgesetzt, danach gelten nur noch eigene Regeln.
 *
 * 3. ELEMENTOR-NEUTRALISIERUNG über :has(). Elementor bringt einen globalen
 *    Kit mit, dessen Typografie-Regeln (.elementor-kit-N h2 und so weiter)
 *    dieselbe Spezifität haben wie eine einfache eigene Klasse und später
 *    geladen werden. Die Regeln unten greifen ausschliesslich auf Seiten,
 *    die tatsächlich einen Engine-Beitrag enthalten.
 *
 * 4. SPEZIFITÄT STATT !important, wo möglich. Der Scope über eine ID gibt
 *    100 Punkte Vorsprung, das schlägt jede Klassenregel. !important steht
 *    nur dort, wo ein Theme selbst !important verwendet.
 *
 * Was das kostet: rund 40 Zeilen Reset und eine gewisse Redundanz zum Theme.
 * Was es bringt: der Beitrag sieht überall gleich aus, auch in fünf Jahren
 * und auch nach einem Theme-Wechsel. Das ist es wert.
 * ===========================================================================
 */

/* ---------------------------------------------------------------------------
   1. Marken-Token
   Bewusst am Element selbst und nicht an :root. Damit überlebt der Beitrag
   auch eine Seite, auf der ein anderes Plugin :root überschreibt.
   ------------------------------------------------------------------------ */
#sgce-a.sgce-article{
  --sg-navy:#16294a; --sg-navy-2:#1c3153; --sg-navy-deep:#0c1830;
  --sg-teal:#17a2ac; --sg-teal-lt:#2dc6cb; --sg-teal-dp:#0f7c84;
  --sg-magenta:#b82850; --sg-magenta-soft:rgba(184,40,80,.09);
  --sg-ink:#182338; --sg-grey:#525d6e; --sg-soft:#8892a1;
  --sg-line:#e7eaef; --sg-line-2:#d9dfe8; --sg-paper:#f6f8fb;
  --sg-tint:rgba(23,162,172,.08);
  --sg-fd:'Anek Latin','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sg-fb:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ---------------------------------------------------------------------------
   2. Reset innerhalb des Scopes
   Nur vererbbare und strukturelle Eigenschaften. Was danach kommt, gewinnt.
   ------------------------------------------------------------------------ */
#sgce-a.sgce-article, #sgce-a.sgce-article *, #sgce-a.sgce-article *::before, #sgce-a.sgce-article *::after{ box-sizing:border-box; }
#sgce-a.sgce-article{
  font-family:var(--sg-fb); font-size:16px; line-height:1.65; color:var(--sg-grey);
  letter-spacing:normal; word-spacing:normal; text-indent:0; text-transform:none;
  max-width:100%;
}
#sgce-a.sgce-article h1, #sgce-a.sgce-article h2, #sgce-a.sgce-article h3, #sgce-a.sgce-article h4, #sgce-a.sgce-article h5, #sgce-a.sgce-article h6,
#sgce-a.sgce-article p, #sgce-a.sgce-article ul, #sgce-a.sgce-article ol, #sgce-a.sgce-article li, #sgce-a.sgce-article figure, #sgce-a.sgce-article blockquote,
#sgce-a.sgce-article div, #sgce-a.sgce-article span, #sgce-a.sgce-article section, #sgce-a.sgce-article aside, #sgce-a.sgce-article nav,
#sgce-a.sgce-article details, #sgce-a.sgce-article summary, #sgce-a.sgce-article button, #sgce-a.sgce-article a{
  margin:0; padding:0; border:0; background:none; box-shadow:none;
}
/* Der Testlauf gegen ein absichtlich feindliches Stylesheet zeigte drei
   Lücken: ein Theme mit font-family auf h1 bis h4 mit !important schlug den
   ID-Scope, text-transform auf Überschriften schlug die Vererbung, und ein
   Rahmen auf summary blieb stehen, weil summary im Reset fehlte.
   Gegen fremdes !important hilft nur eigenes !important. Es steht deshalb
   ausschliesslich hier, auf den vier Eigenschaften, die ein Theme
   erfahrungsgemäss global setzt. */
#sgce-a.sgce-article, #sgce-a.sgce-article h1, #sgce-a.sgce-article h2, #sgce-a.sgce-article h3, #sgce-a.sgce-article h4, #sgce-a.sgce-article h5, #sgce-a.sgce-article h6,
#sgce-a.sgce-article p, #sgce-a.sgce-article li, #sgce-a.sgce-article span, #sgce-a.sgce-article div, #sgce-a.sgce-article summary, #sgce-a.sgce-article a{
  text-transform:none!important;
  letter-spacing:normal!important;
  font-style:normal!important;
  text-shadow:none!important;
}
#sgce-a.sgce-article h1, #sgce-a.sgce-article h2, #sgce-a.sgce-article h3, #sgce-a.sgce-article h4, #sgce-a.sgce-article h5, #sgce-a.sgce-article h6{
  font-family:var(--sg-fd)!important;
}
#sgce-a.sgce-article, #sgce-a.sgce-article p, #sgce-a.sgce-article li, #sgce-a.sgce-article span, #sgce-a.sgce-article summary,
#sgce-a.sgce-article input, #sgce-a.sgce-article button, #sgce-a.sgce-article select, #sgce-a.sgce-article textarea{
  font-family:var(--sg-fb)!important;
}
#sgce-a.sgce-article em, #sgce-a.sgce-article i, #sgce-a.sgce-article .rc-figure-src{ font-style:italic!important; }
#sgce-a.sgce-article .rc-figure-src{ font-style:normal!important; }
#sgce-a.sgce-article ul, #sgce-a.sgce-article ol{ list-style:none; }
#sgce-a.sgce-article a{ text-decoration:none; box-shadow:none; }
#sgce-a.sgce-article img, #sgce-a.sgce-article svg{ max-width:100%; height:auto; display:block; }
#sgce-a.sgce-article strong, #sgce-a.sgce-article b{ font-weight:700; color:var(--sg-ink); }
#sgce-a.sgce-article em, #sgce-a.sgce-article i{ font-style:italic; }
/* Themes setzen white-space:nowrap gern global auf Buttons und Summary. Das
   sprengt jede Karte auf dem Handy. */
#sgce-a.sgce-article, #sgce-a.sgce-article *{ white-space:normal; }
#sgce-a.sgce-article summary{ list-style:none; }
#sgce-a.sgce-article summary::-webkit-details-marker{ display:none; }

/* ---------------------------------------------------------------------------
   3. Umgebung neutralisieren
   Greift ausschliesslich auf Seiten mit einem Engine-Beitrag.
   ------------------------------------------------------------------------ */
body:has(#sgce-a) .elementor-widget-theme-post-content .elementor-widget-container{ padding:0; }
body:has(#sgce-a) .entry-content > #sgce-a.sgce-article,
body:has(#sgce-a) .elementor-widget-container > #sgce-a.sgce-article{ margin:0; }

/* ZWISCHENLOESUNG fuer einen Fehler in single-post.css des Themes.
   Dort steht in der Handy-Abfrage:

     #sgblog-body .sgblog-layout{ grid-template-columns:1fr; padding:40px 0 56px; }

   Die Kurzschreibweise setzt links und rechts auf null und loescht damit den
   seitlichen Abstand, den .wrap zuvor gesetzt hat. Der Text steht auf dem
   Handy randlos am Bildschirmrand. Das betrifft JEDEN Beitrag, nicht nur die
   dieses Plugins.

   Die saubere Behebung gehoert ins Theme: dort die Kurzschreibweise durch
   padding-top und padding-bottom ersetzen. Danach kann dieser Block weg.
   Solange er steht, richtet er keinen Schaden an, weil er denselben Wert
   setzt, den .wrap ohnehin vorsieht. */
@media (max-width:1000px){
  body:has(#sgce-a) #sgblog-body .sgblog-layout,
  body:has(#sgce-a) #sgblogf-body .sgblog-layout{
    padding-left:20px; padding-right:20px;
  }
}
/* Elementor-Kit-Typografie trifft blanke Elemente mit derselben Spezifität
   wie eine einfache Klasse und lädt später. Der ID-Scope schlägt beides,
   diese Zeile sichert nur die Elemente, die der Kit direkt anspricht. */
body:has(#sgce-a) #sgce-a.sgce-article h2,
body:has(#sgce-a) #sgce-a.sgce-article h3,
body:has(#sgce-a) #sgce-a.sgce-article p,
body:has(#sgce-a) #sgce-a.sgce-article li{ font-family:inherit; }

/* ---------------------------------------------------------------------------
   4. Grundtypografie des Beitrags
   ------------------------------------------------------------------------ */
/* Die Grundtypografie mit !important, weil das Theme in single-post.css
   Regeln der Form #sgblog-body .prose h2 fuehrt. Sie haben dieselbe
   Spezifitaet wie unsere und laden spaeter, gewinnen also ohne diesen
   Zusatz. Das betraf Schriftgroesse und Farbe jeder Ueberschrift und jedes
   Absatzes im Beitrag. */
#sgce-a.sgce-article > p{
  font-size:16px!important; line-height:1.7!important; color:var(--sg-grey)!important;
  margin:0 0 20px!important;
}
#sgce-a.sgce-article .rc-lede{
  font-size:19px!important; line-height:1.55!important; color:var(--sg-ink)!important;
  font-weight:500!important; margin:0 0 26px!important;
}
#sgce-a.sgce-article h2{
  font-family:var(--sg-fd)!important; font-size:22px!important; font-weight:700!important;
  line-height:1.3!important; color:var(--sg-ink)!important; margin:44px 0 14px!important;
  text-wrap:balance;
}
#sgce-a.sgce-article h3{
  font-family:var(--sg-fd)!important; font-size:18px!important; font-weight:700!important;
  line-height:1.35!important; color:var(--sg-ink)!important; margin:30px 0 10px!important;
}
#sgce-a.sgce-article h2 + p, #sgce-a.sgce-article h3 + p{ margin-top:0; }
/* Auch hier fremdes !important: viele Themes setzen a{color:...!important}
   und ein Schriftgewicht dazu. */
#sgce-a.sgce-article a{
  color:var(--sg-teal-dp)!important; font-weight:inherit!important;
  text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;
}
#sgce-a.sgce-article a:hover{ color:var(--sg-navy)!important; }
#sgce-a.sgce-article > ul, #sgce-a.sgce-article > ol{
  margin:18px 0 22px; padding:0; display:flex; flex-direction:column; gap:10px;
}
#sgce-a.sgce-article > ul > li, #sgce-a.sgce-article > ol > li{
  display:flex; align-items:flex-start; gap:11px;
  font-size:15.5px; line-height:1.6; color:var(--sg-ink); font-weight:500;
}
#sgce-a.sgce-article > ul > li::before, #sgce-a.sgce-article > ol > li::before{
  content:""; flex:none; width:6px; height:6px; margin-top:9px;
  border-radius:50%; background:var(--sg-teal);
}
#sgce-a.sgce-article .rc-callout{
  margin:28px 0; padding:20px 24px; border-radius:14px;
  background:var(--sg-tint); border-left:3px solid var(--sg-teal);
}
#sgce-a.sgce-article .rc-callout p{
  margin:0; font-size:16px; line-height:1.6; color:var(--sg-ink); font-weight:600;
}

/* ===========================================================================
   0b. Lesefortschritt
   Drei Pixel, kein Prozentwert, keine Zahl. Die Leiste beantwortet eine
   einzige Frage: wie viel kommt noch.
   =========================================================================== */
#sgce-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:9999;
  background:transparent; pointer-events:none;
}
#sgce-progress span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,#17a2ac,#2dc6cb);
  transition:width .12s linear;
}
@media (prefers-reduced-motion:reduce){ #sgce-progress span{ transition:none; } }

/* ===========================================================================
   1. Zusammenfassung
   Steht direkt nach dem Einstieg. Der Text ist eigenständig lesbar und wird
   von Sprachmodellen bevorzugt als Antwortblock übernommen, deshalb keine
   Verweise auf den Artikel darin.
   =========================================================================== */
#sgce-a.sgce-article .rc-tldr{
  position:relative; margin:2rem 0 2.4rem; padding:24px 26px 24px 28px;
  background:var(--sg-paper); border:1px solid var(--sg-line); border-radius:16px;
}
#sgce-a.sgce-article .rc-tldr::before{
  content:""; position:absolute; left:0; top:26px; bottom:26px; width:3px;
  border-radius:0 3px 3px 0; background:linear-gradient(180deg,var(--sg-teal),var(--sg-teal-dp));
}
#sgce-a.sgce-article .rc-tldr-label{
  display:flex; align-items:center; gap:8px; margin-bottom:12px;
  font-family:'Inter',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--sg-teal-dp);
}
#sgce-a.sgce-article .rc-tldr-label::after{ content:""; flex:1; height:1px; background:var(--sg-line); }
#sgce-a.sgce-article .rc-tldr p,
#sgce-a.sgce-article .rc-tldr p,
#sgce-a.sgce-article .rc-tldr p{
  margin:0!important; font-size:17px!important; line-height:1.6!important;
  color:var(--sg-ink)!important; font-weight:500!important;
}

/* ===========================================================================
   2. Inhaltsverzeichnis
   Zwei Spalten ab Tablet, weil die Beiträge vier bis sechs Abschnitte haben
   und eine einspaltige Liste sonst unnötig hoch wird.
   =========================================================================== */
#sgce-a.sgce-article .rc-toc{
  margin:2.2rem 0; padding:20px 22px;
  background:#fff; border:1px solid var(--sg-line); border-radius:14px;
}
#sgce-a.sgce-article .rc-toc-label{
  font-family:'Inter',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--sg-soft); margin-bottom:14px;
}
#sgce-a.sgce-article .rc-toc ol,
#sgce-a.sgce-article .rc-toc ol,
#sgce-a.sgce-article .rc-toc ol{
  margin:0!important; padding:0!important; list-style:none!important;
  display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 24px!important;
}
#sgce-a.sgce-article .rc-toc li,
#sgce-a.sgce-article .rc-toc li,
#sgce-a.sgce-article .rc-toc li{
  display:block!important; margin:0!important; padding:0!important;
}
#sgce-a.sgce-article .rc-toc li::before,
#sgce-a.sgce-article .rc-toc li::before,
#sgce-a.sgce-article .rc-toc li::before{ content:none!important; display:none!important; }
#sgce-a.sgce-article .rc-toc a,
#sgce-a.sgce-article .rc-toc a,
#sgce-a.sgce-article .rc-toc a{
  display:flex!important; align-items:flex-start; gap:9px; padding:7px 6px;
  font-size:14px!important; font-weight:600!important; line-height:1.45;
  color:var(--sg-ink)!important; text-decoration:none!important;
  border-radius:8px; transition:color .15s ease, background .15s ease;
}
#sgce-a.sgce-article .rc-toc a::before{
  content:""; flex:none; width:5px; height:5px; margin-top:7px; border-radius:50%;
  background:var(--sg-teal); opacity:.45; transition:opacity .15s ease, transform .15s ease;
}
#sgce-a.sgce-article .rc-toc a:hover,
#sgce-a.sgce-article .rc-toc a:hover,
#sgce-a.sgce-article .rc-toc a:hover{
  color:var(--sg-teal-dp)!important; background:color-mix(in srgb, var(--sg-teal) 8%, transparent);
}
#sgce-a.sgce-article .rc-toc a:hover::before{ opacity:1; transform:scale(1.25); }
#sgce-a.sgce-article .rc-toc a.is-current,
#sgce-a.sgce-article .rc-toc a.is-current,
#sgce-a.sgce-article .rc-toc a.is-current{
  color:var(--sg-teal-dp)!important; background:var(--sg-tealtint);
}
#sgce-a.sgce-article .rc-toc a.is-current::before{ opacity:1; transform:scale(1.5); }
#sgce-a.sgce-article .rc-toc a.is-read::before{ opacity:.7; }
@media (max-width:640px){
  #sgce-a.sgce-article .rc-toc ol,
  #sgce-a.sgce-article .rc-toc ol,
  #sgce-a.sgce-article .rc-toc ol{ grid-template-columns:1fr; }
}

/* ===========================================================================
   3. Das Wichtigste in Kürze
   Der einzige dunkle Block im Textkörper. Bewusst nur hier, damit er als
   Zusammenfassung am Ende Gewicht hat und nicht mit dem Hero konkurriert.
   =========================================================================== */
#sgce-a.sgce-article .rc-takeaways{
  margin:3rem 0 2.4rem; padding:30px 32px; border-radius:18px;
  background:linear-gradient(165deg, var(--sg-navy) 0%, var(--sg-navy-deep) 100%);
  box-shadow:0 24px 48px -30px rgba(12,24,48,.75);
}
#sgce-a.sgce-article .rc-takeaways-label{
  font-family:'Inter',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--sg-teal-lt); margin-bottom:8px;
}
#sgce-a.sgce-article .rc-takeaways h2,
#sgce-a.sgce-article .rc-takeaways h2,
#sgce-a.sgce-article .rc-takeaways h2{
  font-family:'Anek Latin','Inter',sans-serif!important; font-size:21px!important;
  font-weight:700!important; color:#fff!important; margin:0 0 20px!important;
  line-height:1.3!important; text-transform:none!important; letter-spacing:normal!important;
}
#sgce-a.sgce-article .rc-takeaways ul,
#sgce-a.sgce-article .rc-takeaways ul,
#sgce-a.sgce-article .rc-takeaways ul{
  margin:0!important; padding:0!important; list-style:none!important;
  display:flex!important; flex-direction:column; gap:14px!important;
}
#sgce-a.sgce-article .rc-takeaways li,
#sgce-a.sgce-article .rc-takeaways li,
#sgce-a.sgce-article .rc-takeaways li{
  display:flex!important; align-items:flex-start; gap:13px;
  font-size:15px!important; line-height:1.6!important; font-weight:500!important;
  color:#dce4f0!important; margin:0!important;
}
#sgce-a.sgce-article .rc-takeaways li::before,
#sgce-a.sgce-article .rc-takeaways li::before,
#sgce-a.sgce-article .rc-takeaways li::before{
  content:""!important; flex:none!important; width:18px!important; height:18px!important;
  margin-top:2px!important; border-radius:50%!important;
  background:rgba(45,198,203,.16)!important;
  /* Haken, damit die Liste als Handlungsempfehlung lesbar bleibt */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232dc6cb' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat; background-position:center; background-size:11px 11px;
}
@media (max-width:640px){
  #sgce-a.sgce-article .rc-takeaways{ padding:24px 22px; border-radius:16px; }
}

/* ===========================================================================
   4. Häufige Fragen
   Aufklapper auf Basis von <details>. Der Antworttext steht dadurch immer im
   Dokument, auch im geschlossenen Zustand, und bleibt für Suchmaschinen und
   Sprachmodelle vollständig lesbar. Das Plus dreht beim Öffnen um 45 Grad
   und wird so zum Schliessen-Zeichen, ohne zweites Symbol.
   =========================================================================== */
#sgce-a.sgce-article .rc-faq{ margin:3rem 0 2.4rem; }
#sgce-a.sgce-article .rc-faq-head{ margin-bottom:20px; }
#sgce-a.sgce-article .rc-faq-label{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:9px;
  font-family:'Inter',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--sg-teal-dp);
}
#sgce-a.sgce-article .rc-faq-label::before{
  content:""; width:16px; height:2px; border-radius:2px; background:var(--sg-teal);
}
#sgce-a.sgce-article .rc-faq h2,
#sgce-a.sgce-article .rc-faq h2,
#sgce-a.sgce-article .rc-faq h2{
  font-family:'Anek Latin','Inter',sans-serif!important; font-size:22px!important;
  font-weight:700!important; color:var(--sg-ink)!important; margin:0!important;
  line-height:1.3!important; text-transform:none!important; letter-spacing:normal!important;
}
#sgce-a.sgce-article .rc-faq-list{ display:flex; flex-direction:column; gap:10px; }

#sgce-a.sgce-article .rc-faq-item{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--sg-line); border-radius:14px;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
#sgce-a.sgce-article .rc-faq-item::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--sg-teal),var(--sg-teal-dp));
  transform:scaleY(0); transform-origin:top; transition:transform .22s ease;
}
#sgce-a.sgce-article .rc-faq-item:hover{ border-color:#cfd9e4; }
#sgce-a.sgce-article .rc-faq-item[open]{
  background:var(--sg-paper); border-color:color-mix(in srgb, var(--sg-teal) 32%, var(--sg-line));
  box-shadow:0 14px 30px -22px rgba(20,37,63,.45);
}
#sgce-a.sgce-article .rc-faq-item[open]::before{ transform:scaleY(1); }

#sgce-a.sgce-article .rc-faq-item summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:17px 20px; cursor:pointer; list-style:none;
}
#sgce-a.sgce-article .rc-faq-item summary::-webkit-details-marker{ display:none; }
#sgce-a.sgce-article .rc-faq-item summary:focus-visible{
  outline:2px solid var(--sg-teal); outline-offset:-2px; border-radius:14px;
}
#sgce-a.sgce-article .rc-faq-item summary .rc-faq-frage,
#sgce-a.sgce-article .rc-faq-item summary h3{
  font-family:'Anek Latin','Inter',sans-serif!important; font-size:16px!important;
  font-weight:700!important; line-height:1.45!important; color:var(--sg-ink)!important;
  margin:0!important; text-transform:none!important; letter-spacing:normal!important;
  transition:color .15s ease;
}
#sgce-a.sgce-article .rc-faq-item[open] summary .rc-faq-frage,
#sgce-a.sgce-article .rc-faq-item[open] summary h3{
  color:var(--sg-teal-dp)!important;
}
#sgce-a.sgce-article .rc-faq-item summary:hover .rc-faq-frage,
#sgce-a.sgce-article .rc-faq-item summary:hover h3{ color:var(--sg-teal-dp)!important; }

/* Das Pluszeichen mit fester Grösse und als Blockelement. Der Auslöser war
   wpautop: WordPress hatte den Span in einen Absatz verpackt, damit war er
   inline, und Breite und Höhe griffen nicht. Sichtbar war ein zwei Pixel
   breiter Strich statt eines Kreises. Die Ursache ist abgestellt, diese
   Zeilen sind das Netz darunter, falls ein anderer Filter dasselbe tut. */
#sgce-a.sgce-article .rc-faq-mark{
  position:relative; display:block!important; flex:0 0 26px!important;
  width:26px!important; height:26px!important; min-width:26px!important;
  margin-top:1px; align-self:flex-start; border-radius:50%;
  border:1px solid var(--sg-line); background:#fff;
  transition:transform .24s ease, border-color .18s ease, background .18s ease;
}
/* Falls doch ein Absatz dazwischenkommt, darf er die Grösse nicht schlucken. */
#sgce-a.sgce-article .rc-faq-item summary > p{
  margin:0!important; padding:0!important; flex:0 0 26px!important; display:block!important;
}
#sgce-a.sgce-article .rc-faq-mark::before,
#sgce-a.sgce-article .rc-faq-mark::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--sg-soft);
  border-radius:1px; transition:background .18s ease;
}
#sgce-a.sgce-article .rc-faq-mark::before{ width:10px; height:1.6px; transform:translate(-50%,-50%); }
#sgce-a.sgce-article .rc-faq-mark::after{ width:1.6px; height:10px; transform:translate(-50%,-50%); }
#sgce-a.sgce-article .rc-faq-item summary:hover .rc-faq-mark{ border-color:var(--sg-teal); }
#sgce-a.sgce-article .rc-faq-item summary:hover .rc-faq-mark::before,
#sgce-a.sgce-article .rc-faq-item summary:hover .rc-faq-mark::after{ background:var(--sg-teal-dp); }
#sgce-a.sgce-article .rc-faq-item[open] .rc-faq-mark{
  transform:rotate(45deg); border-color:var(--sg-teal); background:color-mix(in srgb, var(--sg-teal) 12%, #fff);
}
#sgce-a.sgce-article .rc-faq-item[open] .rc-faq-mark::before,
#sgce-a.sgce-article .rc-faq-item[open] .rc-faq-mark::after{ background:var(--sg-teal-dp); }

#sgce-a.sgce-article .rc-faq-answer{ padding:0 20px 18px 20px; }
#sgce-a.sgce-article .rc-faq-answer p,
#sgce-a.sgce-article .rc-faq-answer p,
#sgce-a.sgce-article .rc-faq-answer p{
  margin:0!important; font-size:14.5px!important; line-height:1.68!important;
  color:var(--sg-grey)!important;
}
#sgce-a.sgce-article .rc-faq-answer p + p,
#sgce-a.sgce-article .rc-faq-answer p + p,
#sgce-a.sgce-article .rc-faq-answer p + p{ margin-top:.8rem!important; }

/* Sanftes Aufklappen. details lässt sich nicht animieren, deshalb fährt
   nur der Antwortblock ein. */
#sgce-a.sgce-article .rc-faq-item[open] .rc-faq-answer{ animation:rcFaqIn .22s ease both; }
@keyframes rcFaqIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  #sgce-a.sgce-article .rc-faq-item,
  #sgce-a.sgce-article .rc-faq-item::before,
  #sgce-a.sgce-article .rc-faq-mark,
  #sgce-a.sgce-article .rc-toc a,
  #sgce-a.sgce-article .rc-toc a::before{ transition:none!important; }
  #sgce-a.sgce-article .rc-faq-item[open] .rc-faq-answer{ animation:none!important; }
}
@media (max-width:640px){
  #sgce-a.sgce-article .rc-faq-item summary{ padding:15px 16px; gap:12px; }
  #sgce-a.sgce-article .rc-faq-answer{ padding:0 16px 16px; }
}

/* ===========================================================================
   5. Quellen
   Bewusst schlicht. Die Liste ist Beleg, nicht Gestaltungsfläche. Es wird
   nur ausgegeben, was die Positivliste bestätigt hat.
   =========================================================================== */
#sgce-a.sgce-article .rc-sources{ margin:2.8rem 0 1rem; padding-top:26px; border-top:1px solid var(--sg-line); }
#sgce-a.sgce-article .rc-sources-label{
  font-family:'Inter',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--sg-soft); margin-bottom:14px;
}
#sgce-a.sgce-article .rc-sources ol,
#sgce-a.sgce-article .rc-sources ol,
#sgce-a.sgce-article .rc-sources ol{
  margin:0!important; padding:0!important; list-style:none!important;
  display:flex!important; flex-direction:column; gap:0!important;
}
#sgce-a.sgce-article .rc-sources li,
#sgce-a.sgce-article .rc-sources li,
#sgce-a.sgce-article .rc-sources li{
  display:flex!important; align-items:baseline; flex-wrap:wrap; gap:4px 10px;
  padding:10px 0!important; margin:0!important; border-bottom:1px solid var(--sg-line);
  font-size:14px!important; line-height:1.5!important;
}
#sgce-a.sgce-article .rc-sources li:last-child{ border-bottom:0; }
#sgce-a.sgce-article .rc-sources li::before,
#sgce-a.sgce-article .rc-sources li::before,
#sgce-a.sgce-article .rc-sources li::before{ content:none!important; display:none!important; }
#sgce-a.sgce-article .rc-sources a,
#sgce-a.sgce-article .rc-sources a,
#sgce-a.sgce-article .rc-sources a{
  color:var(--sg-teal-dp)!important; font-weight:600!important;
  text-decoration:none!important; border-bottom:1px solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
#sgce-a.sgce-article .rc-sources a:hover,
#sgce-a.sgce-article .rc-sources a:hover,
#sgce-a.sgce-article .rc-sources a:hover{
  color:var(--sg-navy)!important; border-bottom-color:currentColor;
}
#sgce-a.sgce-article .rc-sources .rc-source-pub{
  margin-left:auto; font-size:12.5px; font-weight:600; color:var(--sg-soft);
  letter-spacing:.01em; white-space:nowrap;
}
@media (max-width:520px){
  #sgce-a.sgce-article .rc-sources .rc-source-pub{ margin-left:0; }
}

/* ===========================================================================
   6. Kennzahlen
   Zählen beim Sichtbarwerden hoch. Jede Zahl trägt ihre Quelle unter sich,
   sonst ist sie im GRC-Umfeld wertlos.
   =========================================================================== */
#sgce-a.sgce-article .rc-figures{
  margin:2.6rem 0; padding:26px 4px;
  border-top:1px solid var(--sg-line); border-bottom:1px solid var(--sg-line);
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
#sgce-a.sgce-article .rc-figure-cell{ padding:0 22px; border-left:1px solid var(--sg-line); }
#sgce-a.sgce-article .rc-figure-cell:first-child{ border-left:0; padding-left:4px; }
#sgce-a.sgce-article .rc-figure-value{
  font-family:'Anek Latin','Inter',sans-serif; font-size:clamp(30px,3.6vw,40px); font-weight:800;
  line-height:1.05; color:var(--sg-navy); letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
#sgce-a.sgce-article .rc-figure-value .unit{ font-size:.52em; font-weight:700; color:var(--sg-teal-dp); margin-left:3px; }
#sgce-a.sgce-article .rc-figure-label{ margin-top:9px; font-size:13.5px; font-weight:600; line-height:1.45; color:var(--sg-ink); }
#sgce-a.sgce-article .rc-figure-src{ margin-top:6px; font-size:11.5px; line-height:1.4; color:var(--sg-soft); }
@media (max-width:640px){
  #sgce-a.sgce-article .rc-figures{ grid-template-columns:1fr; gap:22px; padding:22px 4px; }
  #sgce-a.sgce-article .rc-figure-cell{ border-left:0; border-top:1px solid var(--sg-line); padding:18px 4px 0; }
  #sgce-a.sgce-article .rc-figure-cell:first-child{ border-top:0; padding-top:0; }
}

/* ===========================================================================
   10. Brücke zur Lösung
   Steht nach den Erkenntnissen, nicht davor. Nennt das Modul beim Namen und
   sagt in einem Satz, welchen Teil des Problems es übernimmt.
   =========================================================================== */
#sgce-a.sgce-article .rc-bridge{
  display:flex; gap:22px; align-items:flex-start; margin:2.6rem 0;
  padding:26px 28px; border-radius:18px;
  background:#fff; border:1px solid var(--sg-line);
  box-shadow:0 18px 40px -32px rgba(20,37,63,.5);
}
#sgce-a.sgce-article .rc-bridge-mark{
  flex:none; width:44px; height:44px; border-radius:13px;
  background:var(--sg-tealtint); display:flex; align-items:center; justify-content:center;
}
/* Symbole als CSS-Hintergrund, nicht als SVG im Markup.

   WordPress entfernt svg und path beim Speichern, sobald die Person kein
   unfiltered_html hat, und in einer Multisite hat das nur der
   Netzwerkadministrator. Ein Redakteur, der das Beitragsbild austauscht,
   loeschte damit unbemerkt alle Symbole im Beitrag.

   Als Hintergrundbild einer leeren Spanne liegt die Zeichnung im
   Stylesheet und kann beim Speichern nicht verlorengehen. */
#sgce-a.sgce-article .rc-bridge-mark{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23179ba0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6z'/%3E%3Cpath d='M9.5 12l1.8 1.8L15 10'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:21px 21px;
}

/* Der Pfeil als Maske, nicht als Hintergrundbild.
   Nur so erbt er die Textfarbe. Als Hintergrundbild muesste die Farbe fest
   im SVG stehen, und ein weisser Pfeil auf weissem Grund ist unsichtbar. */
#sgce-a.sgce-article .rc-pfeil{
  display:inline-block; width:15px; height:15px; flex:none; vertical-align:-2px;
  background-color:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
#sgce-a.sgce-article .rc-bridge-label{
  font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--sg-soft); margin-bottom:7px;
}
#sgce-a.sgce-article .rc-bridge h3,
#sgce-a.sgce-article .rc-bridge h3,
#sgce-a.sgce-article .rc-bridge h3{
  font-family:'Anek Latin','Inter',sans-serif!important; font-size:18px!important; font-weight:700!important;
  color:var(--sg-ink)!important; margin:0 0 9px!important; line-height:1.4!important;
}
#sgce-a.sgce-article .rc-bridge p,
#sgce-a.sgce-article .rc-bridge p,
#sgce-a.sgce-article .rc-bridge p{
  margin:0 0 14px!important; font-size:14.5px!important; line-height:1.65!important; color:var(--sg-grey)!important;
}
#sgce-a.sgce-article .rc-bridge a,
#sgce-a.sgce-article .rc-bridge a,
#sgce-a.sgce-article .rc-bridge a{
  display:inline-flex!important; align-items:center; gap:7px;
  font-size:13.5px!important; font-weight:700!important; color:var(--sg-teal-dp)!important;
  text-decoration:none!important; border-bottom:1px solid transparent;
  transition:border-color .15s ease, gap .15s ease;
}
#sgce-a.sgce-article .rc-bridge a:hover,
#sgce-a.sgce-article .rc-bridge a:hover,
#sgce-a.sgce-article .rc-bridge a:hover{ border-bottom-color:currentColor; gap:11px; }
@media (max-width:640px){ #sgce-a.sgce-article .rc-bridge{ flex-direction:column; gap:16px; padding:22px; } }

/* ===========================================================================
   11. Bewegung zurückhaltend halten
   =========================================================================== */
@media (prefers-reduced-motion:reduce){
  #sgce-a.sgce-article *, #sgce-a.sgce-article *::before, #sgce-a.sgce-article *::after{ transition:none!important; animation:none!important; }
}

/* ===========================================================================
   13. Theme-Korrektur, gehört nach single-post.css
   ---------------------------------------------------------------------------
   Die Seitenschiene setzt .side-label auf Grossbuchstaben. Das ist für
   Rubrikenbezeichner richtig, für einen eingetragenen Markennamen nicht:
   aus "SwissGRC® Plattform" wird sonst "SWISSGRC® PLATTFORM". Die
   Schreibweise der Marke ist festgelegt und wird nicht durch eine
   Gestaltungsregel verändert.

   Das Markup setzt dafür data-brand="ja" auf das Label. Alle übrigen
   Labels bleiben unverändert.
   =========================================================================== */
#sgce-nope .side-label[data-brand="ja"],
#sgce-nope2 .side-label[data-brand="ja"]{
  text-transform:none;
  letter-spacing:.02em;
  font-size:12px;
}

/* ===========================================================================
   14. Abschlusshinweis auf die Sales-Seite
   Steht ganz am Ende, nach den Quellen. Ein Fachtext soll nicht in einen
   Verkaufstext auslaufen, deshalb erst der Beleg, dann das Angebot.
   Teal traegt den Knopf, so verlangt es der Corporate Design Guide.
   =========================================================================== */
#sgce-a.sgce-article .rc-cta{
  margin:3rem 0 1rem; padding:32px 34px; border-radius:20px; text-align:left;
  background:linear-gradient(160deg, var(--sg-navy) 0%, var(--sg-navy-deep) 100%);
  box-shadow:0 26px 54px -34px rgba(12,24,48,.8);
}
#sgce-a.sgce-article .rc-cta-kicker{
  font-family:'Inter',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--sg-teal-lt); margin-bottom:9px;
}
#sgce-a.sgce-article .rc-cta-title,
#sgce-a.sgce-article .rc-cta-title,
#sgce-a.sgce-article .rc-cta-title{
  font-family:'Anek Latin','Inter',sans-serif!important; font-size:22px!important; font-weight:700!important;
  color:#fff!important; margin:0 0 10px!important; line-height:1.3!important;
  text-transform:none!important; letter-spacing:normal!important;
}
#sgce-a.sgce-article .rc-cta-sub,
#sgce-a.sgce-article .rc-cta-sub,
#sgce-a.sgce-article .rc-cta-sub{
  margin:0 0 22px!important; font-size:14.5px!important; line-height:1.65!important;
  color:#b7c4da!important; max-width:56ch;
}
#sgce-a.sgce-article .rc-cta-btn,
#sgce-a.sgce-article .rc-cta-btn,
#sgce-a.sgce-article .rc-cta-btn{
  display:inline-flex!important; align-items:center; gap:8px;
  font-size:14px!important; font-weight:700!important; color:#fff!important;
  background:var(--sg-teal); padding:13px 24px; border-radius:99px;
  text-decoration:none!important; border-bottom:0!important; white-space:nowrap;
  box-shadow:0 18px 36px -16px rgba(23,162,172,.7);
  transition:background .18s ease, transform .18s ease;
}
#sgce-a.sgce-article .rc-cta-btn:hover,
#sgce-a.sgce-article .rc-cta-btn:hover,
#sgce-a.sgce-article .rc-cta-btn:hover{
  background:var(--sg-teal-dp)!important; transform:translateY(-2px);
}
@media (max-width:640px){
  #sgce-a.sgce-article .rc-cta{ padding:26px 22px; }
  #sgce-a.sgce-article .rc-cta-btn{ width:100%; justify-content:center; }
}

/* -----------------------------------------------------------------------------
   Transparenzhinweis zur KI-Unterstuetzung
   Zurueckhaltend, aber lesbar. Er soll nicht wie ein Kleingedrucktes wirken,
   das man uebersieht, und auch nicht wie eine Warnung.
   -------------------------------------------------------------------------- */
#sgce-a.sgce-article .rc-ki-hinweis{
  margin:2.4rem 0 0!important; padding-top:20px;
  border-top:1px solid var(--sg-line);
  font-size:13px!important; line-height:1.6!important; color:var(--sg-soft)!important;
  font-style:normal!important;
}

/* -----------------------------------------------------------------------------
   Screenshot aus der Loesung
   Steht nach der Bruecke zum Modul, wo das Modul eingefuehrt wird.
   -------------------------------------------------------------------------- */
#sgce-a.sgce-article .rc-shot{
  margin:2.4rem 0!important; padding:0!important;
}
#sgce-a.sgce-article .rc-shot img{
  display:block; width:100%; height:auto; border-radius:14px;
  border:1px solid var(--sg-line);
  box-shadow:0 18px 40px -30px rgba(12,24,48,.55);
}
#sgce-a.sgce-article .rc-shot figcaption{
  margin-top:11px!important; font-size:12.5px!important; line-height:1.55!important;
  color:var(--sg-soft)!important; text-align:left!important;
}