/* ================= Schwebende Menüleiste =================

   Statt einer durchgehenden Leiste am oberen Rand eine schwebende Pille,
   die beim Herunterscrollen verschwindet und beim Hochscrollen zurückkommt.

   Zwei Zustände, weil die Seite oben dunkel und weiter unten hell ist:
   auf dem Hero durchscheinend hell auf dunkel, danach weiß mit Schatten.
   Ohne diesen Wechsel wäre die Leiste auf einem der beiden unlesbar.

   Schriftgewichte bewusst leicht: 500 statt 600, damit die Leiste
   zurücktritt statt zu dominieren.
*/

body.pille .kopf-fix{
  position:fixed;
  top:0; left:0; right:0;
  z-index:90;
  background:none;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  pointer-events:none;            /* nur die Pille selbst reagiert */
  transition:transform .34s cubic-bezier(.4,0,.2,1), opacity .28s ease;
}
body.pille .kopf-fix > *{pointer-events:auto}

/* ---------- Das Messeband ----------
   Vorher blendete es sich aus und ließ eine Lücke: Die Pille blieb, wo
   sie war, und schwebte über einem leeren Streifen.

   Jetzt schrumpft das Band in der Höhe, statt nur durchsichtig zu werden.
   Dadurch rückt die Pille von selbst nach oben nach, weil sie im
   normalen Fluss darunter liegt. */
body.pille .balken{
  border-radius:0;
  background:var(--navy);
  overflow:hidden;
  max-height:72px;
  transition:max-height .32s var(--e), opacity .24s ease,
             padding-top .32s var(--e), padding-bottom .32s var(--e);
}
body.pille.gescrollt .balken{
  max-height:0;
  opacity:0;
  padding-top:0;
  padding-bottom:0;
  border:0;                      /* sonst bleibt eine Linie stehen */
  pointer-events:none;
}

/* ---------- Die Pille ---------- */
body.pille nav{
  position:relative;
  width:min(1340px, calc(100% - 2 * clamp(12px, 2.2vw, 26px)));
  margin:clamp(12px, 1.6vw, 18px) auto 0;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease,
             padding .3s ease, margin .32s var(--e);
  padding:9px 9px 9px 20px;
  display:flex;
  align-items:center;
  gap:clamp(10px, 1.4vw, 18px);
  border-radius:100px;
  background:rgba(8,31,68,.66);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(32px) saturate(1.9) brightness(1.06);
  -webkit-backdrop-filter:blur(32px) saturate(1.9) brightness(1.06);
  /* Zwei innere Kanten erzeugen den Eindruck von Glasdicke: oben eine
     Lichtkante, unten ein weicher Schatten. Ohne das wirkt eine
     durchscheinende Fläche flach statt wie eine Scheibe. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 10px 40px rgba(2,10,26,.30);
}

/* Die Pille bleibt über die ganze Seite dunkel. Ein Wechsel auf Weiß
   wirkt bei einer schwebenden Leiste wie ein Sprung, weil sie dabei ihre
   Gestalt ändert statt nur ihre Umgebung.

   Damit sie auf hellem Grund trägt, ist der Grund kein reines Schwarz,
   sondern das Marken-Navy mit hoher Deckkraft. Der Weichzeichner bleibt,
   dadurch schimmert der Inhalt darunter noch durch. */
body.pille.hell nav{
  background:rgba(8,31,68,.82);
  border-color:rgba(255,255,255,.10);
  backdrop-filter:blur(32px) saturate(1.7);
  -webkit-backdrop-filter:blur(32px) saturate(1.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 14px 44px rgba(8,31,68,.28);
}

/* ---------- Zeichen ---------- */
body.pille .marke{display:flex;align-items:center;flex:0 0 auto}
body.pille .marke img{height:30px;width:auto;transition:height .3s ease}

/* Auf dem dunklen Hero die helle Fassung, über hellem Inhalt die dunkle.
   Ohne den Wechsel verschwindet der weiße Schriftzug auf der weißen
   Glasscheibe und nur das Bildzeichen bleibt übrig. */
body.pille .marke .logo-hell{display:block}
body.pille .marke .logo-dunkel{display:none}
/* Die Leiste bleibt dunkel, also bleibt auch das helle Logo. */
body.pille.hell .marke .logo-hell{display:block}
body.pille.hell .marke .logo-dunkel{display:none}
@media(max-width:900px){body.pille .marke img{height:27px}}

/* ---------- Menüpunkte ---------- */
/* Drei Bereiche: Zeichen links, Menü mittig, Knöpfe rechts.
   flex:1 auf der Mitte verhindert, dass die Menüpunkte unter die
   Knöpfe rutschen, sobald der Platz knapp wird. */
/* overflow:hidden ist entscheidend: Ohne das schrumpft die Mitte zwar
   im Layout, ihr Inhalt läuft aber trotzdem über die Kanten hinaus und
   schiebt sich über Zeichen und Knöpfe. */
body.pille .nav-l{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  flex:1 1 0;
  min-width:0;
  overflow:hidden;
  margin:0;
}
/* Diese Verweise sind Ersatz für das Klappmenü und gehören
   auf breiten Bildschirmen nicht in die Leiste. */
body.pille .nav-l > a.nur-mobil{display:none}
body.pille .nav-l > a,
body.pille .mega-knopf{
  font-family:inherit;
  font-size:.84rem;
  font-weight:500;
  letter-spacing:-.005em;
  color:rgba(255,255,255,.78);
  background:none;
  border:0;
  border-radius:100px;
  padding:9px 9px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
  transition:color .2s ease, background .2s ease;
}
body.pille.hell .nav-l > a,
body.pille.hell .mega-knopf{color:rgba(255,255,255,.78)}

body.pille .nav-l > a:hover,
body.pille .mega-knopf:hover,
body.pille .mega-halter.offen .mega-knopf{
  color:#fff;
  background:rgba(255,255,255,.12);
}
body.pille.hell .nav-l > a:hover,
body.pille.hell .mega-knopf:hover,
body.pille.hell .mega-halter.offen .mega-knopf{
  color:#fff;
  background:rgba(255,255,255,.12);
}

/* ---------- Knöpfe rechts ---------- */
body.pille .nav-r{display:flex;align-items:center;gap:8px;flex:0 0 auto;
  position:static;margin-left:clamp(10px, 1.4vw, 18px)}
body.pille .nav-r .btn{
  font-size:.82rem;
  font-weight:500;
  padding:10px 16px;
  border-radius:100px;
}
body.pille .nav-r .btn-linie{
  color:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.24);
  background:none;
}
body.pille.hell .nav-r .btn-linie{
  color:rgba(255,255,255,.86);
  border-color:rgba(255,255,255,.24);
}
body.pille .nav-r .btn-linie:hover{background:rgba(255,255,255,.12)}
body.pille.hell .nav-r .btn-linie:hover{background:rgba(255,255,255,.12)}
body.pille .nav-r .btn-rot{box-shadow:0 4px 16px rgba(227,26,62,.32)}

/* ---------- Mega-Menü innerhalb der Pille ---------- */
body.pille .mega{
  top:calc(100% + 12px);
  border-radius:var(--r-l);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(24px) saturate(1.3);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);
  border:1px solid rgba(8,31,68,.08);
  box-shadow:0 24px 60px rgba(8,31,68,.18);
}

/* ---------- Menütaste auf schmalen Geräten ---------- */
body.pille .burger{
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
}
body.pille.hell .burger{
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
}
body.pille .burger span,
body.pille .burger span::before,
body.pille .burger span::after{background:#fff}
body.pille.hell .burger span,
body.pille.hell .burger span::before,
body.pille.hell .burger span::after{background:#fff}

/* Zwischen 1100 und 1250 wird es eng: die beiden letzten Punkte
   wandern ins Klappmenü, statt zu überlappen. */
/* Erst wenn der Platz wirklich nicht reicht, weicht zuerst der zweite
   Knopf und danach der Rest ins Klappmenü. Kein Menüpunkt verschwindet
   dauerhaft, nur weil die Pille schmal ist. */
@media(max-width:1320px){
  body.pille .nav-r .btn-linie{display:none}
}
/* Zwischen 1100 und 1120 Pixeln wird es eng: Dort weicht Sicherheit.
   Darunter greift das Klappmenü, und der Punkt gehört wieder dazu. */
@media(min-width:1101px) and (max-width:1120px){
  body.pille .nav-l > a[href*="sicherheit"]{display:none}
}

@media(max-width:1100px){
  body.pille nav{padding:8px 8px 8px 16px}
  body.pille .nav-l{
    position:absolute;
    top:calc(100% + 10px);
    left:0; right:0;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    /* Voll deckendes Navy statt Weiß mit Weichzeichner. Zwei Gründe:
       Die Leiste ist inzwischen durchgehend dunkel, ein weißes
       Auszugsfeld passte nicht mehr dazu. Und ein großflächiger
       backdrop-filter wird auf Mobilgeräten häufig als weißer Block
       dargestellt, dann wirkt das Menü leer. */
    background:#0A234C;
    border-radius:var(--r-l);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 24px 60px rgba(2,10,26,.5);
    padding:10px;
    margin:0;
    display:none;
    /* Über dem Einwilligungsbanner, sonst lässt es sich nicht bedienen */
    z-index:1200;
    max-height:calc(100dvh - 130px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  body.pille .nav-l.offen{display:flex}
  body.pille .nav-l > a.nur-mobil{display:flex}

  /* Für Produkt, Anwendungsfälle und Ressourcen gibt es eigene
     Verweise mit der Klasse nur-mobil. Die Klappmenüs bleiben deshalb
     aus, sonst stünde jeder Eintrag doppelt. */
  body.pille .mega-halter{display:none}

  body.pille .nav-l > a,
  body.pille .mega-knopf{
    color:rgba(255,255,255,.88);
    justify-content:flex-start;
    padding:13px 14px;
    font-size:1rem;
    width:100%;
    text-align:left;
    border-radius:10px;
  }
  body.pille .nav-l > a:hover,
  body.pille .nav-l > a:active,
  body.pille .mega-knopf:hover,
  body.pille .mega-knopf:active{
    color:#fff;
    background:rgba(255,255,255,.1);
  }
  body.pille .nav-r .btn-linie{display:none}
}

@media(max-width:560px){
  body.pille nav{width:calc(100% - 24px);padding:7px 7px 7px 14px;gap:8px}
  body.pille .marke img{height:24px}
  body.pille .nav-r .btn{font-size:.78rem;padding:9px 14px}
}

/* Wer wenig Bewegung möchte, bekommt keine verschwindende Leiste */
@media(prefers-reduced-motion:reduce){
  body.pille .kopf-fix{transition:none}
  body.pille .balken{transition:none}
}

/* ---------- Siegel filigraner ----------
   Die Schriftgröße war durch ein fehlendes Komma im clamp unwirksam,
   dadurch wirkte das Siegel schwer. Hier zusätzlich zurückgenommen:
   dünnere Linien, leichtere Schrift, etwas kleiner. */
body.pille .stempel{
  width:clamp(128px, 10.5vw, 156px);
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
body.pille .stempel::before{
  inset:9px;
  border:1px dashed rgba(255,255,255,.14);
}
body.pille .st-innen{
  font-size:clamp(.5rem, .58vw, .58rem);
  font-weight:400;
  letter-spacing:.09em;
  line-height:1.5;
  color:rgba(255,255,255,.68);
}
body.pille .st-innen b{
  font-size:1.55em;
  font-weight:600;
  letter-spacing:.2em;
  margin-bottom:7px;
}
body.pille .st-innen em{
  font-size:.82em;
  font-weight:400;
  letter-spacing:.13em;
  color:rgba(255,255,255,.42);
  border-top-color:rgba(255,255,255,.14);
  margin-top:7px;
  padding-top:6px;
}
@media(max-width:900px){
  body.pille .stempel{width:112px}
}

/* ---------- Abstand zwischen Zeichen und Text ----------
   Position und Größe des Zeichens setzt das Hero-Skript direkt am Element,
   CSS kann dagegen nichts ausrichten. Die Anpassung steht deshalb in
   startseite.js in der Funktion geo(). Hier nur der untere Anker. */
body.pille .h-text{bottom:clamp(24px, 4vh, 56px)}

/* ---------- Flache Fenster ----------
   Bei 800 Pixeln Höhe braucht allein der Textblock über 600 Pixel. Für
   Leiste, Zeichen und Text zusammen reicht das nicht. Statt zu überlappen,
   fallen zuerst die Vertrauenszeile und dann die Folgen-Marken weg: Beide
   stehen weiter unten auf der Seite ohnehin noch einmal. */
@media(max-height:900px){
  body.pille .h-trust{display:none}
  body.pille .h-fuss p{font-size:.92rem}
}
/* Auf schmalen Geräten bricht jede Zeile mehrfach um, dadurch wächst der
   Block auch bei mehr Höhe über den Platz. Deshalb dort unabhängig von
   der Fensterhöhe kürzen. */
@media(max-width:640px){
  body.pille .h-trust{display:none}
  body.pille .h-folge{display:none}
  body.pille .h-bruecke{margin-top:14px!important;padding-top:14px}
}
@media(max-height:820px){
  body.pille .h-folge{display:none}
  body.pille .h-bruecke{margin-top:14px!important;padding-top:14px}
}
@media(max-height:720px){
  body.pille .h-bruecke{display:none}
  body.pille .kz{font-size:clamp(1.5rem, 3.4vw, 2.2rem)}
}

/* Der Scroll-Hinweis saß mittig und lag dadurch auf den Knöpfen.
   Bei knappem Platz weglassen, sonst nach ganz unten. */
body.pille .hero3-hinweis{
  bottom:10px;
  opacity:.5;
}
@media(max-height:940px){
  body.pille .hero3-hinweis{display:none}
}

/* Bei sehr flachen Fenstern wird auch die Überschrift kleiner, damit
   der Block nicht über den Rand läuft. */
@media(max-height:660px){
  body.pille .kz{font-size:clamp(1.25rem, 3vw, 1.8rem)}
  body.pille .h1-kicker{display:none}
}

/* ---------- Fortschrittslinie ----------
   Am unteren Rand der Pille, aber mittig ausgerichtet statt von links
   wachsend. Eine Linie, die links klebt, wirkt in einer schwebenden
   Leiste wie ein Fehler. Von der Mitte aus wächst sie symmetrisch und
   passt zur Form. */
body.pille .fortleiste{
  position:absolute;
  top:auto;
  bottom:7px;
  left:50%;
  transform:translateX(-50%);
  width:calc(100% - 64px);
  max-width:420px;
  height:2px;
  border-radius:2px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
  z-index:2;
  display:flex;
  justify-content:center;
}
body.pille .fortleiste i{
  border-radius:2px;
  background:var(--rot);
  box-shadow:0 0 8px rgba(227,26,62,.6);
  transform-origin:center;
}
@media(max-width:640px){
  body.pille .fortleiste{width:calc(100% - 40px);bottom:6px}
}

/* ---------- Hero auf genau eine Bildschirmhöhe ----------
   dvh statt vh: Auf Mobilgeräten ändert sich die sichtbare Höhe, wenn die
   Adressleiste ein- und ausfährt. vh rechnet mit der größten Höhe und
   schiebt Inhalt unter den Rand, dvh folgt dem, was gerade sichtbar ist. */
body.pille .hero3{
  height:100dvh;
  min-height:560px;
  max-height:1100px;
  overflow:hidden;
}
body.pille .hero3-sticky{
  height:100%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
body.pille .h-text{
  position:absolute;
  left:0; right:0;
  bottom:clamp(24px, 5vh, 64px);
}
@supports not (height: 100dvh){
  body.pille .hero3{height:100vh}
}

/* ---------- Tiefenwirkung beim Scrollen ----------
   Der Wert kommt aus dem Skript, damit die Bewegung an die tatsächliche
   Scrollposition gekoppelt ist und nicht an eine Zeitachse. */
body.pille .raster-hg{
  transform:translate3d(0, calc(var(--tiefe, 0) * 34px), 0);
  will-change:transform;
}
body.pille .h-schein{
  transform:translate3d(0, calc(var(--tiefe, 0) * 62px), 0);
  will-change:transform;
}
body.pille .h-text{
  transform:translate3d(0, calc(var(--tiefe, 0) * -22px), 0);
  opacity:calc(1 - var(--tiefe, 0) * .55);
}
body.pille .stempel{
  transform:translate3d(0, calc(var(--tiefe, 0) * 48px), 0) rotate(-9deg);
}

/* ---------- Die Positionierung als Blickfang ----------
   Sie ist die Kategorieaussage und muss vor allem anderen gelesen werden.
   Deshalb erscheint sie zeilenweise, das entscheidende Wort in Rot mit
   einer Linie, die sich darunter aufzieht. */
body.pille .h-position{
  display:block;
  margin-bottom:clamp(16px, 2.4vw, 26px);
}
body.pille .h-position .hp-1,
body.pille .h-position .hp-2{
  display:block;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .8s var(--e), transform .8s var(--e);
}
body.pille .h-position.da .hp-1{opacity:1;transform:none}
body.pille .h-position.da .hp-2{opacity:1;transform:none;transition-delay:.22s}
body.pille .hp-1{
  font-size:clamp(1rem, 1.7vw, 1.28rem);
  font-weight:300;
  letter-spacing:.01em;
  color:rgba(255,255,255,.62);
  margin-bottom:4px;
}
body.pille .hp-2{
  font-size:clamp(1.32rem, 2.6vw, 2.05rem);
  font-weight:700;
  letter-spacing:-.032em;
  line-height:1.2;
  color:#fff;
}
body.pille .hp-2 em{
  position:relative;
  font-style:normal;
  color:var(--rot);
  white-space:nowrap;
}
body.pille .hp-2 em::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-.08em;
  height:3px;
  border-radius:3px;
  background:var(--rot);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .7s var(--e);
  transition-delay:.9s;
}
body.pille .h-position.da .hp-2 em::after{transform:scaleX(1)}

/* ---------- Das Zielbild ----------
   Vier Marken, die sagen, wie es nach der Einführung aussieht. */
body.pille .h-ziel{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(8px,1.2vw,12px);
  margin:0 0 clamp(18px,2.4vw,26px);
}
body.pille .h-ziel span{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.86rem;font-weight:500;color:rgba(255,255,255,.86);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);
  border-radius:100px;padding:8px 17px;white-space:nowrap;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
body.pille .h-ziel i{
  font-style:normal;font-size:1rem;line-height:1;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
}

/* ---------- Flache Fenster ----------
   Bei 800 Pixeln Höhe braucht allein der Textblock über 600 Pixel. Statt
   zu überlappen, fallen zuerst die Vertrauenszeile und dann die
   Zielmarken weg: Beide stehen weiter unten ohnehin noch einmal. */
@media(max-height:900px){
  body.pille .h-trust{display:none}
  body.pille .h-fuss p{font-size:.92rem}
}
@media(max-width:640px){
  body.pille .h-trust{display:none}
  body.pille .h-ziel{display:none}
}
@media(max-height:820px){
  body.pille .h-ziel{display:none}
  body.pille .h-position{font-size:clamp(.98rem,1.7vw,1.24rem);margin-bottom:14px}
}
@media(max-height:660px){
  body.pille .kz{font-size:clamp(1.25rem, 3vw, 1.8rem)}
}
@media(max-width:560px){
  body.pille .h-position{font-size:1.04rem;margin-bottom:14px}
  body.pille .h-position br{display:none}
}

/* Der Scroll-Hinweis lag auf den Knöpfen. */
body.pille .hero3-hinweis{bottom:10px;opacity:.5}
@media(max-height:940px){
  body.pille .hero3-hinweis{display:none}
}

@media(prefers-reduced-motion:reduce){
  body.pille .raster-hg,
  body.pille .h-schein,
  body.pille .h-text,
  body.pille .stempel{transform:none;opacity:1}
  body.pille .h-position .hp-1,
  body.pille .h-position .hp-2{opacity:1;transform:none}
  body.pille .hp-2 em::after{transform:scaleX(1)}
}

/* ---------- Sprachschalter ----------
   Sitzt zwischen den Menüpunkten und den Knöpfen. Bewusst schmal:
   Er ist wichtig für die, die ihn brauchen, und soll den anderen
   nicht im Weg stehen. */
body.pille .spr{position:relative;flex:0 0 auto;margin-left:clamp(6px,.8vw,12px)}
body.pille .spr-knopf{
  display:flex;align-items:center;gap:6px;
  font-family:inherit;font-size:.82rem;font-weight:500;
  color:rgba(255,255,255,.8);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:100px;padding:8px 12px;cursor:pointer;
  transition:background .18s var(--e),border-color .18s var(--e),color .18s var(--e);
}
body.pille .spr-knopf:hover{background:rgba(255,255,255,.13);color:#fff}
body.pille .spr-f{font-size:.95rem;line-height:1;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
body.pille .spr-knopf svg{transition:transform .2s var(--e);opacity:.7}
body.pille .spr[data-offen] .spr-knopf svg{transform:rotate(180deg)}

body.pille .spr-liste{
  position:absolute;top:calc(100% + 9px);right:0;min-width:172px;
  background:#0A234C;border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-m);padding:6px;
  box-shadow:0 20px 48px rgba(2,10,26,.5);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s var(--e),transform .18s var(--e),visibility .18s;
  z-index:1300;
}
body.pille .spr[data-offen] .spr-liste{opacity:1;visibility:visible;transform:none}
body.pille .spr-liste a{
  display:flex;align-items:center;gap:10px;
  font-size:.9rem;font-weight:500;color:rgba(255,255,255,.82);
  text-decoration:none;padding:10px 12px;border-radius:9px;
  transition:background .16s var(--e),color .16s var(--e);
}
body.pille .spr-liste a:hover{background:rgba(255,255,255,.1);color:#fff}
body.pille .spr-liste a.an{color:#fff;background:rgba(227,26,62,.18)}
body.pille .spr-liste a span{font-size:1.05rem;line-height:1;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}

/* Auf dem Handy wandert er ins Klappmenü */
@media(max-width:1100px){
  body.pille .spr{margin-left:0}
  body.pille .spr-knopf{padding:8px 10px}
  body.pille .spr-liste{right:auto;left:0}
}

/* Angekündigte Sprache: sichtbar, aber nicht anklickbar. Ein Verweis
   auf eine Seite, die es noch nicht gibt, führt ins Leere und wird von
   Suchmaschinen gefunden. */
body.pille .spr-bald{
  display:flex;align-items:center;gap:10px;
  font-size:.9rem;font-weight:400;color:rgba(255,255,255,.4);
  padding:10px 12px;border-radius:9px;cursor:default;
}
body.pille .spr-bald > span:first-child{font-size:1.05rem;line-height:1;opacity:.5;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
body.pille .spr-bald em{
  margin-left:auto;font-style:normal;font-size:.63rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.5);background:rgba(255,255,255,.08);
  border-radius:100px;padding:3px 8px;
}
body.pille .spr-liste{min-width:196px}