/* ===================================================================
   BdSAD KI-Plattform — Erscheinungsbild des Verbandes
   -------------------------------------------------------------------
   Farben aus den Stylesheets von bdsad.de und dem Verbandslogo:
     Orange (Primaer)  #DA6E33   rgb 218 110  51
     Orange (Hover)    #AE5829   rgb 174  88  41
     Grau   (Text)     #58585A   rgb  88  88  90
     Rot    (Akzent)   #9A141B   rgb 154  20  27

   LibreChat rechnet mit Zahlentripeln, nicht mit Hex-Werten, weil die
   Farben ueber rgb(var(--x) / <deckkraft>) verwendet werden.
   =================================================================== */

:root,
html,
[data-theme='light'] {
  /* !important ist noetig: LibreChat laedt sein Stylesheet aus dem
     JavaScript nach, also NACH diesem hier. Ohne !important verliert jede
     Regel bei gleicher Spezifitaet. */

  /* Flaechen: warmer Ton statt Neutralgrau. Sehr dezent - der Chatverlauf
     muss ruhig und lesbar bleiben. */
  --surface-primary: 255 253 252 !important;
  --surface-secondary: 250 246 243 !important;
  --surface-tertiary: 245 238 233 !important;
  --surface-dialog: 255 253 252 !important;

  /* Markierte und ueberfahrene Eintraege in Verbandsorange getoent. */
  --surface-active: 246 226 213 !important;
  --surface-active-alt: 241 214 197 !important;
  --surface-hover: 249 234 224 !important;
  --surface-hover-alt: 244 222 207 !important;

  /* Der Sendeknopf. LibreChat nimmt dafuer ein Gruen.
     Das DUNKLE Verbandsorange, nicht das helle: Auf dem Knopf steht weisse
     Schrift, und weiss auf #da6e33 ergibt gemessen nur 3,35:1 - WCAG 1.4.3
     verlangt 4,5. Weiss auf #ae5829 haelt 4,97:1. Das helle Orange bleibt
     Raendern, Fokusringen und Toenungen vorbehalten; dort steht kein Text
     darauf. */
  --surface-submit: 174 88 41 !important;
  --surface-submit-hover: 140 67 28 !important;

  /* Verweise: Blau ist nicht unsere Farbe. */
  --link: 174 88 41 !important;
  --link-hover: 154 20 27 !important;
  --link-visited: 154 20 27 !important;

  /* Linien warm statt kalt. */
  --border-light: 232 220 212 !important;
  --border-medium: 219 202 190 !important;

  /* Akzent und Fokusrahmen. */
  --accent-primary: 218 110 51 !important;
  --accent-primary-hover: 174 88 41 !important;
  --ring-primary: 218 110 51 !important;

  /* LibreChats Gruentoene, an denen mehrere Knoepfe haengen. */
  /* LibreChat setzt diese Gruentoene auf Flaechen mit weisser Schrift -
     deshalb ebenfalls das dunkle Orange. */
  --green-500: 174 88 41 !important;
  --green-600: 174 88 41 !important;
  --green-700: 140 67 28 !important;
  --green-800: 174 88 41 !important;
  --green-900: 174 88 41 !important;

  --brand-purple: 154 20 27 !important;
}

.dark,
[data-theme='dark'] {
  --surface-primary: 26 23 22 !important;
  --surface-secondary: 33 29 27 !important;
  --surface-tertiary: 42 36 33 !important;
  --surface-dialog: 26 23 22 !important;

  --surface-active: 74 47 32 !important;
  --surface-active-alt: 92 58 39 !important;
  --surface-hover: 62 42 30 !important;
  --surface-hover-alt: 80 52 36 !important;

  --surface-submit: 174 88 41 !important;
  --surface-submit-hover: 232 133 79 !important;

  --link: 232 150 105 !important;
  --link-hover: 244 178 141 !important;
  --link-visited: 232 150 105 !important;

  --border-light: 62 52 46 !important;
  --border-medium: 82 68 60 !important;

  --accent-primary: 226 138 90 !important;
  --accent-primary-hover: 240 165 122 !important;
  --brand-purple: 214 122 128 !important;
}

/* -------------------------------------------------------------------
   Logo auf der Anmeldeseite
   LibreChat gibt dem Rahmen fest 40 Pixel Hoehe (Klasse h-10). Fuer ein
   Wort-Bild-Zeichen mit Zusatzzeile ist das zu klein.
   ------------------------------------------------------------------- */
div.h-10:has(> img[src*='logo.svg']) {
  height: auto !important;
  margin-top: 2.5rem !important;
}

img[src*='logo.svg'] {
  width: min(320px, 68vw) !important;
  height: auto !important;
  margin: 0 auto !important;
  display: block !important;
}

/* -------------------------------------------------------------------
   Anmeldefenster
   ------------------------------------------------------------------- */
h1 {
  color: rgb(88 88 90);
}

/* Knopf "Fortfahren" und alle Hauptknoepfe.
   Dieselbe Begruendung wie beim Sendeknopf: weisse Schrift verlangt die
   dunkle Flaeche. */
button[type='submit'],
.btn-primary {
  background-color: #ae5829 !important;
  border-color: #ae5829 !important;
  color: #ffffff !important;
  transition: background-color 0.15s ease;
}

button[type='submit']:hover,
.btn-primary:hover {
  background-color: #8c431c !important;
  border-color: #8c431c !important;
}

/* Eingabefelder: Fokus in Verbandsfarbe statt Systemblau */
input:focus,
textarea:focus,
select:focus {
  outline-color: #da6e33 !important;
  border-color: #da6e33 !important;
  box-shadow: 0 0 0 1px rgb(218 110 51 / 0.35) !important;
}

/* Verweise (Datenschutz, Nutzungsbedingungen) */
a {
  color: #ae5829;
}

a:hover {
  color: #9a141b;
}

/* -------------------------------------------------------------------
   Fusszeile: der Pflichthinweis nach Teil D.3 soll lesbar sein,
   nicht Kleingedrucktes.
   ------------------------------------------------------------------- */
footer,
footer * {
  color: rgb(88 88 90) !important;
}

.dark footer,
.dark footer * {
  color: rgb(200 200 202) !important;
}


/* ===================================================================
   Wasserzeichen: Verbandslogo auf jeder Seite
   -------------------------------------------------------------------
   Liegt HINTER dem Inhalt (z-index -1) und faengt keine Klicks ab.
   Deckkraft 0,04 im hellen, 0,07 im dunklen Erscheinungsbild - ein
   Wasserzeichen, das den Text schwerer lesbar macht, waere ein
   Barrierefreiheitsproblem und kein Erkennungswert.

   `position: fixed` statt `background-attachment: fixed`, weil letzteres
   auf iOS nicht zuverlaessig arbeitet - und die Plattform wird laut
   Bauauftrag ausdruecklich auch mobil genutzt.
   =================================================================== */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background-image: url('/assets/logo.svg');
  background-repeat: no-repeat;
  background-position: center 64%;
  background-size: min(46vw, 420px) auto;
  opacity: 0.045;
}

.dark body::before {
  opacity: 0.08;
}

/* Auf schmalen Geraeten kleiner und weiter oben, damit es nicht mit der
   Eingabezeile zusammenfaellt. */
@media (max-width: 640px) {
  body::before {
    background-size: 62vw auto;
    background-position: center 38%;
  }
}

/* Wer Bewegung oder starke Kontraste reduziert haben will, bekommt kein
   Wasserzeichen - Vorrang fuer Lesbarkeit. */
@media (prefers-contrast: more) {
  body::before {
    display: none;
  }
}

/* ===================================================================
   CI-Farben in der Flaeche
   -------------------------------------------------------------------
   Bisher waren nur Knoepfe und Verweise eingefaerbt. Hier kommen die
   Flaechen dazu, die den Gesamteindruck bestimmen.
   =================================================================== */

/* Aktiver Eintrag in der Seitenleiste in Verbandsorange statt Grau */
nav a[data-active='true'],
nav li[data-active='true'] > a,
[role='navigation'] [aria-current='page'] {
  background-color: rgb(218 110 51 / 0.12) !important;
  border-left: 3px solid #da6e33 !important;
}

/* Umrandung der Eingabezeile in Verbandsfarbe, sobald sie benutzt wird */
form:focus-within textarea,
form:focus-within [contenteditable='true'] {
  border-color: #da6e33 !important;
}

/* Ladebalken und Fortschritt */
progress::-webkit-progress-value,
[role='progressbar'] > div {
  background-color: #da6e33 !important;
}

/* Auswahlfarbe beim Markieren von Text */
::selection {
  background: rgb(218 110 51 / 0.28);
}

/* Bildlaufleisten dezent in Verbandsgrau statt Systemblau */
* {
  scrollbar-color: rgb(218 110 51 / 0.45) transparent;
}


/* ===================================================================
   Verweisleiste fuer Passwort und Verwaltung
   -------------------------------------------------------------------
   Vorher lag sie unten links und verdeckte das Eingabefeld. Jetzt als
   schmale Zeile ganz oben - und die Anwendung bekommt oben denselben
   Platz als Innenabstand, damit nichts uebereinander liegt. Das ist der
   Unterschied zwischen "darueber" und "davor": Ein Abstand verschiebt,
   eine Auflage verdeckt.

   Tailwind setzt border-box global, deshalb verkleinert der Innenabstand
   die Hoehe des Wurzelelements, statt es ueber den Rand zu schieben.
   =================================================================== */
:root {
  /* Dieselbe Hoehe, die der Modulkopf einnimmt: 0,75rem Innenabstand oben
     und unten plus eine Zeile. Beide Koepfe muessen gleich hoch sein, sonst
     springt die Seite beim Wechsel zwischen Chat und Modul. */
  --bdsad-leiste: 48px;
}

/* Die Leiste ist der Kopf der Plattform - und muss ueber LibreChat GENAU so
   aussehen wie im Modul. Deshalb hier dieselben Werte wie in `seite.ts`:
   derselbe zentrierte Container (60rem), dieselbe Dreiteilung
   Marke / Module / Konto, dieselben Pillen, dieselbe Hervorhebung des
   aktiven Moduls. Zwei Koepfe, die sich unterscheiden, sind keine
   uebergeordnete Menuefuehrung, sondern zwei Menues. */
#bdsad-leiste {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bdsad-leiste);
  z-index: 60;
  box-sizing: border-box;
  padding: 0 1rem;
  background: #fffdfc;
  border-bottom: 1px solid #e8dcd4;
  font: 1rem/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif;
}

#bdsad-leiste .bdsad-zeile {
  /* 82rem, nicht 60rem. Die Redaktionsseiten setzen ihren Kopf seit dem
     03.09.2026 auf 82rem; mit 60rem stand die Wortmarke im Chat eingerueckt
     und wanderte beim Modulwechsel sichtbar nach rechts. */
  max-width: 82rem;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

#bdsad-leiste .bdsad-module,
#bdsad-leiste .bdsad-konto {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Name und Rolle wie im Kopf der Redaktionsseiten: Name in der Grundfarbe,
   Rolle gedaempft, beides ohne Unterstreichung - nur die Verweise daneben
   sind unterstrichen. */
#bdsad-leiste #bdsad-wer { color: #151515; white-space: nowrap; }
#bdsad-leiste #bdsad-wer .bdsad-rolle { color: #4d4c4e; }
/* Rueckmeldung vom 04.09.2026: "bei KI-Chat aendert sich der Kopf, warum?"
   Ursache: Der Kopf der Redaktionsseiten steht beim ersten Bild schon
   vollstaendig da (server-gerendert). Dieser hier fuellt Name und Rolle erst
   nach einem eigenen Abruf (fetch /start/wer) - auf einem echten Telefon mit
   spuerbarer Latenz poppt der Text sichtbar auf. Ganz beheben liesse sich das
   nur, wenn LibreChats eigener Server den Namen mitrendert - das ist eine
   tiefere Aenderung an LibreChat selbst und stand hier nicht zur Debatte.
   Mit sanftem Einblenden statt hartem Auftauchen wird der Sprung wenigstens
   nicht mehr als Ruckler wahrgenommen. */
#bdsad-leiste #bdsad-wer {
  opacity: 0;
  transition: opacity 0.15s ease-in;
}
#bdsad-leiste #bdsad-wer:not(:empty) { opacity: 1; }

/* Verborgenes bleibt verborgen - manche Rahmenwerke setzen
   display auf Elemente mit hidden-Attribut zurueck. */
#bdsad-leiste a[hidden] {
  display: none !important;
}

/* SCHWARZ, wie "header a" auf den Redaktionsseiten. Hier stand das
   Verbandsorange und faerbte die Modulverweise, "Passwort" und "Verwaltung" -
   damit sah der Kopf im Chat anders aus als in Social Media und Newsletter.
   Farbe bleibt der Bildmarke und der Flaeche des aktiven Moduls vorbehalten. */
#bdsad-leiste a {
  color: #151515 !important;
  text-decoration: none;
  display: inline-block;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
}

/* Die beiden Kontoverweise sind unterstrichen - genau wie drueben
   "header .konto a". Ohne das haengt ihre Erkennbarkeit allein an der Farbe
   (WCAG 1.4.1), und sie saehen anders aus als in den anderen Modulen. */
#bdsad-leiste .bdsad-konto a { text-decoration: underline; padding: 0.4rem 0.35rem; }

#bdsad-leiste a:hover {
  background: rgb(218 110 51 / 0.1);
}

/* Die Wortmarke steht NACH der allgemeinen Verweisregel und traegt beide
   Kennungen. Grund: `#bdsad-leiste a` ist spezifischer als `#bdsad-marke`
   (Kennung + Element schlaegt Kennung allein) und hat vorher display und
   Farbe still ueberschrieben - die Marke wurde dadurch zweizeilig, und der
   Name lag ueber der Bildmarke. Im Quelltext sah beides richtig aus. */
#bdsad-leiste #bdsad-marke {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  flex: 0 0 auto;
  font-size: 1rem;
  font-weight: 700;
  /* SCHWARZ, wie im Kopf der Redaktionsseiten. Hier stand noch das
     Verbandsorange - ein Rest der Beanstandung "die schriften im Header sind
     noch immer nicht schwarz" vom 03.09.2026, der an dieser Stelle stehen
     geblieben war. Farbe bleibt der Bildmarke vorbehalten. */
  color: #151515 !important;
  text-decoration: none;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#bdsad-leiste #bdsad-marke img {
  /* Eng beschnittene Bildmarke: In der Vorlage nahmen die Boegen nur 13 %
     der Zeichenflaeche ein, die Marke wirkte deshalb in jeder Groesse
     winzig. Jetzt fuellt sie die angegebene Hoehe wirklich aus. */
  height: 30px;
  width: auto;
  display: block;
}

#bdsad-leiste #bdsad-marke:hover {
  opacity: 0.75;
}

/* Fokus sichtbar und mit ausreichendem Kontrast - WCAG 2.4.7 und 1.4.11.
   Dieselbe Darstellung wie im Modul. */
#bdsad-leiste a:focus-visible {
  outline: 3px solid #da6e33;
  outline-offset: 2px;
}

/* Das aktive Modul: Flaeche UND Balken. Allein ueber Farbe waere es ein
   Verstoss gegen WCAG 1.4.1. */
#bdsad-leiste a.bdsad-aktiv {
  background: rgb(218 110 51 / 0.18);
  box-shadow: inset 0 -3px 0 #da6e33;
  font-weight: 600;
}

/* Auf schmalen Geraeten haben nicht alle Bestandteile Platz. Weichen muss
   das NACHRANGIGE, nicht die Menuefuehrung und nicht "Abmelden": Erster
   Anlauf hatte die uebergeordnete Menuefuehrung auf dem Telefon versteckt -
   genau dort, wo der Vorstand ueberwiegend arbeitet. Zweiter Anlauf (Fund
   vom 12.09.2026: "In der mobilen Ansicht gibt es kein Abmeldefunktion")
   versteckte stattdessen die GESAMTE Kontoleiste samt "Abmelden" - die
   Behauptung im damaligen Kommentar, Passwort/Verwaltung/Abmelden stuenden
   "ohnehin in der Fusszeile", war schlicht falsch: Diese Leiste hat gar
   keine Fusszeile, anders als der Modulkopf in `seite.ts`. Jetzt weicht nur
   noch Name/Rolle (rein informativ, ohne eigene Funktion) - Passwort,
   Verwaltung und vor allem Abmelden bleiben auf jeder Geraetebreite
   erreichbar, nur schmaler gesetzt. */
@media (max-width: 700px) {
  #bdsad-leiste #bdsad-wer { display: none; }
  #bdsad-leiste #bdsad-marke span { display: none; }
  #bdsad-leiste a.bdsad-modul { padding: 0.35rem 0.5rem; font-size: 0.9rem; }
  #bdsad-leiste .bdsad-konto a { padding: 0.35rem 0.4rem; font-size: 0.85rem; }
  #bdsad-leiste .bdsad-zeile { gap: 0.4rem; justify-content: flex-start; }
  #bdsad-leiste .bdsad-module { gap: 0.15rem; }
  #bdsad-leiste .bdsad-konto { gap: 0.1rem; }
}

/* Ganz schmale Geraete: die Bildmarke tritt zurueck, "Passwort" ebenfalls
   (aendern laesst sich das Passwort seltener als sich abzumelden) -
   Verwaltung und Abmelden bleiben auch hier stehen. */
@media (max-width: 360px) {
  #bdsad-leiste #bdsad-marke { display: none; }
  #bdsad-leiste .bdsad-konto a[href$="/verwaltung/passwort"] { display: none; }
}

.dark #bdsad-leiste {
  background: #1a1716;
  border-bottom-color: #3e342e;
}

.dark #bdsad-leiste a { color: #e28a5a !important; }
.dark #bdsad-leiste #bdsad-marke { color: #e28a5a !important; }

/* Die Anwendung in einen Rahmen UNTERHALB der Leiste sperren.
   -------------------------------------------------------------------
   Ein blosser Innenabstand genuegte nicht: LibreChats Kopfzeile
   positioniert sich am Fenster (position: fixed) und ignoriert damit
   jeden Abstand am Wurzelelement - sie lag weiter unter der Leiste.

   Ein `transform` am Wurzelelement macht dieses zum Bezugsrahmen fuer
   ALLE fest positionierten Elemente darin. Damit rutscht auch die
   Kopfzeile mit nach unten. Das ist der entscheidende Kniff; ohne ihn
   bleibt jedes fixierte Element am Fensterrand kleben. */
#root {
  position: fixed;
  top: var(--bdsad-leiste);
  left: 0;
  right: 0;
  bottom: 0;
  /* LibreChat setzt selbst `#root { height: 100% }`. Bei einem fest
     positionierten Element bezieht sich 100 % auf das FENSTER, nicht auf
     den Rahmen - der Rahmen wurde damit volle Fensterhoehe hoch und ragte
     um die Leistenhoehe unten heraus. Weil `top` und `height` zusammen
     bereits eindeutig sind, wurde `bottom: 0` stillschweigend verworfen.
     `height: auto` gibt die Entscheidung an das Paar top/bottom zurueck. */
  height: auto !important;
  transform: translateZ(0);
  box-sizing: border-box;
  overflow: hidden;
}

/* Fensterhoehe ist nicht Rahmenhoehe.
   -------------------------------------------------------------------
   Der eigentliche Fehler auf dem Telefon lag hier: LibreChat rechnet an
   mehreren Stellen mit der vollen Fensterhoehe - als Inline-Angabe
   `height: calc(100dvh - Bannerhoehe)` an der Hauptzeile, als
   Tailwind-Klassen `h-screen`, `min-h-screen`, `h-[100dvh]` an
   Anmeldeseite und mobilen Dialogen.

   Diese Elemente wurden damit um genau die Leistenhoehe hoeher als der
   Rahmen, der sie enthaelt. Der Ueberstand faellt unten heraus und wird
   von `overflow: hidden` abgeschnitten - unsichtbar UND unerreichbar,
   weil ein abgeschnittener Rahmen nicht rollt. Am Schreibtisch faellt
   das kaum auf; auf dem Telefon verschwindet damit die Unterkante der
   Eingabezeile und bei Dialogen die Knopfzeile.

   Deshalb: ueberall dieselbe Hoehe abziehen, die die Leiste einnimmt.
   `max-height` statt `height` bei der Hauptzeile, damit ein eventuell
   eingeblendetes Banner weiter korrekt abgezogen bleibt - die Angabe
   deckelt dann nur, statt zu ueberschreiben. Inline-Angaben lassen sich
   ausschliesslich mit `!important` uebersteuern. */
#root [style*='100dvh'] {
  max-height: calc(100dvh - var(--bdsad-leiste)) !important;
}

#root .h-screen {
  height: calc(100dvh - var(--bdsad-leiste)) !important;
}

#root .min-h-screen {
  min-height: calc(100dvh - var(--bdsad-leiste)) !important;
}

#root .max-h-screen,
#root .max-h-\[100vh\],
#root .max-h-\[100dvh\] {
  max-height: calc(100dvh - var(--bdsad-leiste)) !important;
}

#root .h-\[100dvh\] {
  height: calc(100dvh - var(--bdsad-leiste)) !important;
}

/* Das Wasserzeichen liegt im Rahmen der Anwendung und braucht keinen
   eigenen Abzug mehr. */
body::before {
  top: var(--bdsad-leiste);
}

@media print {
  #bdsad-leiste { display: none; }
  #root { position: static; transform: none; }
}

/* ===================================================================
   Sting - plattformweite Feedback-Erfassung (Anlage vom 08.09.2026).
   Dieselbe Platte wie im Redaktionsmodul (seite.ts) und im Videodienst
   (verwaltung.py) - identisches Aussehen an allen drei Stellen. */
.sting-kasten { position: fixed; bottom: 1rem; left: 1rem; z-index: 900;
  background: #fff; border: 1px solid #e8dcd4; border-radius: .6rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.15); max-width: 20rem; }
.sting-kasten > summary { display: flex; align-items: center; gap: .4rem;
  cursor: pointer; padding: .6rem 1rem; min-height: 1.5rem;
  font-weight: 600; color: #96481f; list-style: none; }
.sting-kasten > summary::-webkit-details-marker { display: none; }
.sting-kasten > summary::marker { content: ''; }
.sting-symbol { flex: 0 0 auto; }
.sting-beschriftung { display: flex; flex-direction: column; line-height: 1.2; }
.sting-marke { font-size: 1.05rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: #ae5829; }
.sting-aktion { font-size: .75rem; font-weight: 500; color: #96481f; }
.sting-feld { padding: 0 1rem 1rem; }
.sting-feld p { margin: .4rem 0; }
.sting-feld input, .sting-feld textarea { width: 100%; font: inherit;
  padding: .4rem .5rem; border: 1px solid #e8dcd4; border-radius: .35rem; box-sizing: border-box; }
.sting-feld button { font: inherit; cursor: pointer; min-height: 2.25rem;
  padding: .4rem .9rem; border-radius: 999px; background: #ae5829; border: 1px solid #ae5829; color: #fff; }
.sting-feld button:hover { background: #8c431c; border-color: #8c431c; }
.sting-ziel-anzeige { background: #fbf3ec; border-radius: .4rem; padding: .4rem .6rem; }
.knopf-verweis { background: none; border: none; color: #96481f; text-decoration: underline;
  cursor: pointer; font: inherit; min-height: auto; padding: 0; border-radius: 0; }
.sting-hinweis { position: fixed; top: 0; left: 0; right: 0; z-index: 950;
  background: #96481f; color: #fff; text-align: center; padding: .5rem 1rem;
  font-weight: 600; }
body.sting-platzieren-aktiv { cursor: crosshair; }
body.sting-platzieren-aktiv [data-sting-zone] { outline: 2px dashed #ae5829; outline-offset: 2px; }
[data-sting-zone] { position: relative; }
.sting-pin { position: absolute; z-index: 850; transform: translate(-50%,-100%);
  background: none; border: none; padding: 0; cursor: pointer; line-height: 0;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)); }
.sting-pin-info { position: absolute; z-index: 920; transform: translate(-50%, .5rem);
  background: #fff; border: 1px solid #e8dcd4; border-radius: .5rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.2); padding: .6rem .8rem; max-width: 16rem;
  font-size: .9rem; }
.sting-pin-info p { margin: .3rem 0 0; }
.sting-pin-info-schliessen { float: right; background: none; border: none;
  font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 0 0 .5rem; }