/* ===========================================================================
   Swiss GRC, Blogbeitrag
   ---------------------------------------------------------------------------
   EIGENE KENNUNGEN, nicht die des Themes.

   Die erste Fassung nutzte #sgblog-hero, #sgblog-body und #sgblog-related,
   also genau die Kennungen der Theme-Vorlage. Solange beide Stylesheets
   geladen sind, gestalten sie dieselben Elemente, und wer gewinnt, haengt an
   der Ladereihenfolge. Sichtbar wurde das am Hero: das Theme setzt 96 und 108
   Pixel Abstand, diese Datei 70 und 60, und je nach Reihenfolge sah der
   Beitrag zusammengedrueckt aus.

   Mit eigenen Kennungen gibt es diese Ueberschneidung nicht mehr. Beide
   Vorlagen koennen nebeneinander bestehen, ohne sich zu stoeren
   ---------------------------------------------------------------------------
   Vorlage fuer die Beitragsseite. Drei Bereiche:

     #sgce-hero     Titel, Datum, Lesezeit, Autor mit Bild
     #sgce-body     Beitrag links, Spotlight und Autorenkarte rechts
     #sgce-related  Weitere Beitraege

   Die Marken-Token stehen an den Bereichen selbst, nicht an :root. Damit
   ueberlebt die Seite auch, wenn ein anderes Plugin :root ueberschreibt.

   Der Beitragsinhalt haengt unter #sgce-a.sgce-article und bringt seine
   Gestaltung aus rich-content-engine.css mit. Diese Datei gestaltet nur den
   Rahmen darum.
   ======================================================================== */

#sgce-hero, #sgce-body, #sgce-related{
  --navy:#16294a; --navy-2:#1c3153; --navy-deep:#0c1830;
  --teal:#17a2ac; --teal-light:#2dc6cb; --teal-deep:#0f7c84;
  --magenta:#b82850;
  --ink:#182338; --grey:#616d80; --grey-soft:#8892a1;
  --line:#e1e7f0; --card:#fff; --card-grey:#eef1f6;
  --fd:'Anek Latin','Inter',-apple-system,sans-serif;
  --fb:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-family:var(--fb); line-height:1.6;
}
#sgce-hero *, #sgce-body *, #sgce-related *{ box-sizing:border-box; }
#sgce-hero h1, #sgce-body h2, #sgce-body h3, #sgce-related h2, #sgce-related h3{
  font-family:var(--fd); font-weight:700; margin:0; color:var(--ink); text-wrap:balance;
}
#sgce-hero p, #sgce-body p, #sgce-related p{ margin:0; }
#sgce-hero a, #sgce-body a, #sgce-related a{ color:inherit; text-decoration:none; }
#sgce-hero img, #sgce-body img, #sgce-related img{ max-width:100%; display:block; }
#sgce-hero .wrap, #sgce-body .wrap, #sgce-related .wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }
@media (max-width:640px){ #sgce-hero .wrap, #sgce-body .wrap, #sgce-related .wrap{ padding:0 20px; } }

/* ---------------------------------------------------------------- Hero --- */
#sgce-hero{
  position:relative; overflow:hidden; color:#eef2f9;
  background:linear-gradient(158deg, var(--navy) 0%, var(--navy-2) 52%, var(--navy-deep) 100%);
  padding:70px 0 60px;
}
#sgce-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(760px 320px at 88% -14%, rgba(45,198,203,.22), transparent 62%);
}
#sgce-hero .wrap{ position:relative; }
#sgce-hero .kicker{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:18px;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-light);
}
#sgce-hero .kicker::before{ content:""; width:22px; height:2px; background:var(--teal-light); flex:none; }
/* Der erste Teil der Brotkrume fuehrt zurueck zur Blogseite. Aus einem
   einzelnen Beitrag gab es sonst keinen Weg dorthin ausser dem Hauptmenue. */
#sgce-hero .kicker a{ color:var(--teal-light); border-bottom:1px solid transparent; transition:border-color .16s ease; }
#sgce-hero .kicker a:hover{ border-bottom-color:currentColor; }
#sgce-hero .kicker .sep{ color:rgba(255,255,255,.34); }
#sgce-hero .kicker span:not(.sep){ color:#c3d2e5; }
#sgce-hero h1{
  color:#fff; font-size:clamp(30px,4.4vw,46px); line-height:1.12; letter-spacing:-.015em;
  max-width:19ch;
}
#sgce-hero .lede{
  margin-top:18px; max-width:60ch; font-size:17px; line-height:1.6; color:#b9c7db;
}

/* Autorenzeile im Hero. Bild, Name, Funktion, daneben Datum und Lesezeit.
   Die Kurzbiografie steht bewusst nicht hier, sondern auf der Autorenkarte
   in der Seitenleiste. Im Hero zaehlt, wer schreibt, nicht der Lebenslauf. */
#sgce-hero .meta{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-top:32px; padding-top:26px; border-top:1px solid rgba(255,255,255,.14);
}
#sgce-hero .autor{ display:flex; align-items:center; gap:13px; }
#sgce-hero .autor img{
  width:46px; height:46px; border-radius:50%; object-fit:cover; flex:none;
  border:2px solid rgba(255,255,255,.2);
}
#sgce-hero .autor .initialen{
  width:46px; height:46px; border-radius:50%; flex:none; display:flex; align-items:center;
  justify-content:center; background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.2);
  font-family:var(--fd); font-size:16px; font-weight:700; color:#fff;
}
#sgce-hero .autor b{ display:block; font-size:14.5px; font-weight:600; color:#fff; line-height:1.3; }
#sgce-hero .autor span{ display:block; font-size:12.5px; color:#9fb0c7; margin-top:2px; }
/* Rechte Spalte im Kopfbereich: Datum und Lesezeit, darunter das Teilen.
   Sie stehen zusammen, weil beides Randangaben zum Beitrag sind und nicht
   zum Autor. */
#sgce-hero .meta-rechts{
  display:flex; flex-direction:column; align-items:flex-end; gap:12px; margin-left:auto;
}
#sgce-hero .stamp{
  display:flex; align-items:center; gap:14px;
  font-size:12.5px; color:#9fb0c7; font-weight:500;
}
#sgce-hero .stamp i{ font-style:normal; width:3px; height:3px; border-radius:50%; background:#5c718c; }
#sgce-hero .stamp .dot{ width:3px; height:3px; border-radius:50%; background:#5c718c; }
@media (max-width:640px){
  #sgce-hero{ padding:52px 0 44px; }
  /* Auf dem Handy stehen alle Angaben untereinander und linksbuendig.
     Rechtsbuendig auf schmalem Bildschirm wirkt wie ein Versehen. */
  #sgce-hero .meta-rechts{ margin-left:0; align-items:flex-start; width:100%; }
  #sgce-hero .teilen{ justify-content:flex-start; }
}

/* Teilen im Hero, unter der Autorenzeile.

   Vorher stand es unten in der Seitenleiste, wo es niemand sieht, bevor er
   den Beitrag gelesen hat, und wo es die klebende Spalte hoeher machte, als
   der Bildschirm hergibt. Oben ist es sichtbar, ohne aufdringlich zu sein. */
#sgce-hero .teilen{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap; justify-content:flex-end;
  font-size:12.5px; color:#9fb0c7;
}
#sgce-hero .teilen a{
  width:32px; height:32px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.18); color:#dbe4f0;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
#sgce-hero .teilen a:hover{
  background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.34); color:#fff;
}
#sgce-hero .teilen svg{ width:15px; height:15px; }

/* ---------------------------------------------------------------- Body --- */
#sgce-body{ background:#fff; padding:56px 0 80px; }
#sgce-body .layout{
  display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:56px; align-items:start;
}
@media (max-width:1000px){ #sgce-body .layout{ grid-template-columns:1fr; gap:44px; } }

#sgce-body .cover{ border-radius:16px; overflow:hidden; margin-bottom:36px; }
#sgce-body .cover img{ width:100%; height:auto; }

/* Die Seitenleiste bleibt beim Scrollen stehen. Immer.

   Sie beginnt oben mit dem Inhaltsverzeichnis, darunter das Spotlight,
   darunter die Autorenkarte, und in dieser Reihenfolge bleibt sie stehen.

   Ist die Spalte hoeher als der Bildschirm, ist ihr unteres Ende waehrend
   des Lesens nicht zu sehen. Das ist in Ordnung: sobald der Beitrag zu Ende
   ist, loest sich die Spalte und wandert mit nach oben, und dann wird die
   Autorenkarte sichtbar. Genau dort gehoert sie auch hin.

   Zwei fruehere Versuche waren komplizierter und beide schlechter. Der erste
   begrenzte die Hoehe und gab der Spalte einen eigenen Scrollbereich: der
   schnitt die unterste Karte mitten durch. Der zweite unterschied nach
   Bildschirmhoehe und liess mal die ganze Spalte kleben, mal nur das
   Verzeichnis: das war unvorhersehbar, und dieselbe Seite sah auf zwei
   Rechnern verschieden aus.

   Der Abstand nach oben wird gemessen, damit nichts unter einer klebenden
   Kopfzeile verschwindet. Siehe das Skript am Seitenende. */
#sgce-body .side{
  position:sticky;
  /* Der Abstand kommt vom Theme, wenn es ihn liefert.

     Das Theme misst in share.js die Unterkante von #sgheader und schreibt sie
     als --sgblog-rail-top an das Wurzelelement, bei Laden, Groessenaenderung
     und Scrollen. Es benutzt dafuer rect.bottom statt rect.height, damit die
     Werkzeugleiste von WordPress mitgezaehlt wird, die den fixierten Kopf nach
     unten schiebt.

     Diese Vorlage schliesst sich daran an, statt danebenher zu messen. Was
     immer im Kopf dazukommt, ein Aktionsbalken, eine zweite Zeile, eine
     Ankuendigung: die Seitenleiste folgt automatisch, weil es nur eine Quelle
     gibt.

     --sgce-oben ist der Rueckfall, falls die Vorlage einmal ohne dieses Theme
     laeuft. Dann misst das Skript am Seitenende selbst. */
  top:calc(var(--sgblog-rail-top, var(--sgce-oben, 28px)) + 20px);
  align-self:start;
  display:flex; flex-direction:column; gap:18px;
}

/* Die Karten behalten ihre natuerliche Hoehe. Ohne diese Zeile schrumpfen
   Flex-Elemente, sobald der Platz knapp wird, und ein zusammengedruecktes
   Spotlight verliert seinen Knopf. */
#sgce-body .side > *{ flex:none; }

@media (max-width:1000px){
  /* Auf dem Handy steht die Leiste unter dem Beitrag und klebt nicht. */
  #sgce-body .side{ position:static; }

  /* Reihenfolge auf dem Handy: Inhalt, Spotlight, Autorenkarte zuletzt.
     Im Quelltext bleibt die Reihenfolge unveraendert, damit der Vorleser sie
     wie am Bildschirm vorliest. */
  #sgce-body .side .rc-toc{ order:1; }
  #sgce-body .side .spotlight{ order:2; }
  #sgce-body .side .author-card{ order:3; }
}

/* Inhaltsverzeichnis auf dem Handy, zugeklappt und ueber dem Beitrag.

   Es steht dort ein zweites Mal im Quelltext, weil CSS ein Element nicht von
   einem Behaelter in einen anderen verschieben kann. Jeweils eines der beiden
   ist mit display:none abgeschaltet, und display:none nimmt ein Element auch
   aus dem Baum, den ein Vorleser liest. Doppelt vorgelesen wird also nichts. */
#sgce-body .rc-toc--mobil{ display:none; }

@media (max-width:1000px){
  #sgce-body .rc-toc--mobil{
    display:block; margin:0 0 30px; padding:0;
    border:1px solid var(--line); border-radius:14px; background:var(--card);
    overflow:hidden;
  }
  #sgce-body .rc-toc--mobil summary{
    display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none;
    padding:15px 18px; user-select:none;
  }
  #sgce-body .rc-toc--mobil summary::-webkit-details-marker{ display:none; }
  #sgce-body .rc-toc--mobil .rc-toc-label{
    font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
    color:var(--grey-soft); margin:0;
  }
  #sgce-body .rc-toc--mobil .rc-toc-zahl{
    font-size:11px; font-weight:700; color:var(--teal-deep);
    background:color-mix(in srgb, var(--teal) 12%, #fff);
    border-radius:999px; padding:2px 9px; line-height:1.5;
  }
  /* Der Pfeil rechts, gedreht wenn offen. */
  #sgce-body .rc-toc--mobil summary::after{
    content:""; margin-left:auto; width:9px; height:9px; flex:none;
    border-right:2px solid var(--grey-soft); border-bottom:2px solid var(--grey-soft);
    transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s ease;
  }
  #sgce-body .rc-toc--mobil[open] summary::after{ transform:rotate(-135deg) translate(-2px,-2px); }
  #sgce-body .rc-toc--mobil ol{
    list-style:none; margin:0; padding:0 18px 16px; counter-reset:sgce-toc-m;
    display:flex; flex-direction:column; gap:2px;
  }
  #sgce-body .rc-toc--mobil li{ counter-increment:sgce-toc-m; margin:0; }
  #sgce-body .rc-toc--mobil a{
    display:grid; grid-template-columns:22px minmax(0,1fr); gap:8px; align-items:start;
    padding:8px 0; font-size:14px; line-height:1.45; color:var(--grey);
  }
  #sgce-body .rc-toc--mobil a::before{
    content:counter(sgce-toc-m, decimal-leading-zero);
    font-size:11px; font-weight:700; color:var(--grey-soft); padding-top:2px;
    font-variant-numeric:tabular-nums;
  }
  #sgce-body .rc-toc--mobil a.is-current{ color:var(--ink); font-weight:600; }

  /* In der Leiste ist es dann ueberfluessig. */
  #sgce-body .side .rc-toc{ display:none; }
}

/* Inhaltsverzeichnis in der Seitenleiste.

   Es steht dort statt im Beitrag, weil es beim Lesen mitlaufen soll. Im
   Beitrag ist es nach dem ersten Abschnitt aus dem Blick, und genau dann wird
   es gebraucht.

   Die Klasse rc-toc ist dieselbe wie im Beitrag, damit das Skript des
   Beitrags den gerade gelesenen Abschnitt hervorhebt, ohne dass dieselbe
   Logik ein zweites Mal geschrieben werden muss. Die Gestaltung hier
   ueberschreibt die des Beitrags, weil sie enger sitzt. */
#sgce-body #sgce-a .rc-toc{ display:none; }

#sgce-body .side .rc-toc{
  border:1px solid var(--line); border-radius:16px; padding:20px 22px; background:var(--card);
  margin:0;
}
#sgce-body .side .rc-toc-label{
  font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--grey-soft); margin-bottom:12px;
}
#sgce-body .side .rc-toc ol{
  list-style:none; margin:0; padding:0; counter-reset:sgce-toc;
  display:flex; flex-direction:column; gap:2px;
}
#sgce-body .side .rc-toc li{ counter-increment:sgce-toc; margin:0; }
#sgce-body .side .rc-toc a{
  display:grid; grid-template-columns:22px minmax(0,1fr); gap:8px; align-items:start;
  padding:7px 0; font-size:13.5px; line-height:1.45; color:var(--grey);
  border-left:2px solid transparent; padding-left:10px; margin-left:-12px;
  transition:color .16s ease, border-color .16s ease;
}
#sgce-body .side .rc-toc a::before{
  content:counter(sgce-toc, decimal-leading-zero);
  font-size:11px; font-weight:700; color:var(--grey-soft); padding-top:2px;
  font-variant-numeric:tabular-nums;
}
#sgce-body .side .rc-toc a:hover{ color:var(--ink); }

/* Der gerade gelesene Abschnitt. Die Markierung setzt das Skript des
   Beitrags, hier steht nur, wie sie aussieht. */
#sgce-body .side .rc-toc a.is-current{
  color:var(--ink); font-weight:600; border-left-color:var(--teal);
}
#sgce-body .side .rc-toc a.is-current::before{ color:var(--teal-deep); }
#sgce-body .side .rc-toc a.is-read{ color:var(--grey-soft); }

/* Spotlight. Genau EINE Loesung, nicht die ganze Modulliste. Eine
   Empfehlung, die immer gleich lautet, ist keine Empfehlung. */
#sgce-body .spotlight{
  position:relative; overflow:hidden; border-radius:16px; padding:26px 26px 28px;
  background:linear-gradient(162deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#dbe4f0;
}
#sgce-body .spotlight::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:radial-gradient(420px 200px at 100% -10%, rgba(45,198,203,.24), transparent 64%);
}
#sgce-body .spotlight > *{ position:relative; }
#sgce-body .spotlight .label{
  font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--teal-light); margin-bottom:14px;
}
#sgce-body .spotlight h3{
  font-family:var(--fd); font-size:21px; font-weight:700; line-height:1.25; color:#fff; margin-bottom:12px;
}
#sgce-body .spotlight p{ font-size:14px; line-height:1.65; color:#aebdd1; margin-bottom:20px; }
#sgce-body .spotlight .btn{
  display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:999px;
  background:var(--teal); color:#fff; font-size:14px; font-weight:700; line-height:1;
  transition:background .16s ease, transform .16s ease;
}
#sgce-body .spotlight .btn:hover{ background:var(--teal-light); transform:translateY(-1px); }
#sgce-body .spotlight .btn svg{ width:15px; height:15px; flex:none; }

/* Autorenkarte, unter dem Spotlight. Hier steht die Kurzbiografie. */
#sgce-body .author-card{
  border:1px solid var(--line); border-radius:16px; padding:22px 24px; background:var(--card);
}
#sgce-body .author-card .pic{
  width:56px; height:56px; border-radius:50%; object-fit:cover; margin-bottom:14px;
}
#sgce-body .author-card .pic-initials{
  width:56px; height:56px; border-radius:50%; margin-bottom:14px; display:flex;
  align-items:center; justify-content:center; background:var(--navy); color:#fff;
  font-family:var(--fd); font-size:21px; font-weight:700;
}
#sgce-body .author-card .label{
  font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--grey-soft); margin-bottom:6px;
}
#sgce-body .author-card h3{ font-size:17px; margin-bottom:3px; }
#sgce-body .author-card .role{ font-size:13px; font-weight:600; color:var(--teal-deep); margin-bottom:12px; }
#sgce-body .author-card .bio{ font-size:13.5px; line-height:1.65; color:var(--grey); }

/* ------------------------------------------------------------- Related --- */
#sgce-related{ background:var(--card-grey); padding:64px 0 76px; }
#sgce-related .kopf{ margin-bottom:28px; }
#sgce-related .label{
  font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--teal-deep); margin-bottom:8px;
}
#sgce-related h2{ font-size:26px; }
#sgce-related .grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
@media (max-width:880px){ #sgce-related .grid{ grid-template-columns:1fr; } }
#sgce-related .karte{
  background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease;
}
#sgce-related .karte:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -26px rgba(12,24,48,.5); }
#sgce-related .karte img{ width:100%; aspect-ratio:1200/630; object-fit:cover; }
#sgce-related .karte .inhalt{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
#sgce-related .karte .rubrik{
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--teal-deep); margin-bottom:9px;
}
#sgce-related .karte h3{ font-size:16.5px; line-height:1.35; margin-bottom:10px; }
#sgce-related .karte p{ font-size:13.5px; line-height:1.6; color:var(--grey); margin-bottom:16px; }
#sgce-related .karte .mehr{
  margin-top:auto; font-size:13px; font-weight:700; color:var(--teal-deep);
  display:inline-flex; align-items:center; gap:7px;
}

@media (prefers-reduced-motion: reduce){
  #sgce-hero *, #sgce-body *, #sgce-related *{ transition:none!important; animation:none!important; }
}