/* Die Gestalt der Startseite fuer Rechner (11.09.2026, Runde 1109c).

   GEHOERT ZU lab/brand/anmeldeseite.html: dort das Markup, hier die
   Gestalt, getrennt (Ansage Cedric, 11.09.2026). chat/element/sea.js holt
   beide Dateien und setzt dieses CSS als <style> vor das Markup in
   <div id="sea-landing">, in Elements Dokument. Aendern heisst: Datei
   auf die VM kopieren, kein Abbild-Neubau.

   ALLE SELEKTOREN HAENGEN AN #sea-landing oder an .mx_AuthPage. Die
   Regeln landen im Dokument von Element; ohne den Vorsatz traefen sie
   dessen Oberflaeche. verify prueft das.

   DAS SCHAUFENSTER ist eine Buehne (.sea-l-buehne) mit dem
   Seitenverhaeltnis des Banners; ihre Breite rechnet sich aus der Hoehe
   UND der Breite des Rahmens (Container-Einheiten cqw/cqh, darum
   container-type: size auf .sea-l-schau). So liegt die Buehne immer
   genau auf dem Banner, und die Telefone, absolut in der Buehne, sitzen
   immer an derselben Ecke des Banners, ob das Fenster nun flach oder
   schmal ist. Mit einem img und max-height: 100 % ging das nicht: das
   Bild wusste seine Kante, der Rahmen drumherum nicht.

   DIE ZWEI TELEFONE stehen als V vor der rechten unteren Ecke des
   Banners: iPhone vorn rechts, Android hinten links, beide um ihre
   Unterkante gedreht. Beim ROLLEN tauschen sie die Plaetze: das hintere
   zieht von links nach rechts nach vorn. Der Tausch ist die Klasse
   sea-l-getauscht auf .sea-l-buehne (gesetzt von sea.js), den Weg
   zeichnen die Uebergaenge unten.

   DIE SCHILDFORM DER PLATTE ist ein clipPath im SVG am Anfang des
   Markups (objectBoundingBox, skaliert also mit). clip-path schneidet
   den Schatten mit ab, darum liegt der Schatten als drop-shadow auf dem
   UMHUELLENDEN span: der folgt der geschnittenen Form.

   DIE SCHRIFT kommt aus sea.css (@font-face Plus Jakarta Sans), hier
   steht nur der Name. Bilder: siehe Kopf von anmeldeseite.html. */

/* Elements Willkommenskarte und Fusszeile weichen, solange die Landing da
   ist. Nur auf #/welcome (.mx_Welcome), nie auf #/login. */
.mx_AuthPage:has(.mx_Welcome) .mx_AuthPage_modal,
.mx_AuthPage:has(.mx_Welcome) .mx_AuthFooter { display: none; }

/* Die Buehne: eine Bildschirmhoehe, drei Zeilen (Kopf, Held, Karten).
   Rollen nur als Rueckfall, wenn das Fenster zu flach oder zu schmal ist. */
#sea-landing {
  position: fixed;
  inset: 0;
  z-index: 30;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(14px, 2.4vh, 30px);
  padding: clamp(16px, 2.6vh, 30px) clamp(24px, 4.6vw, 76px) clamp(16px, 2.6vh, 28px);
  overflow-y: auto;
  overflow-x: hidden;
  background: #141d3a url(/brand/anmelde-hintergrund-karte.jpg) center / cover no-repeat;
  color: rgba(243, 244, 246, .94);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
}

/* Ein Schleier links, damit der Text nicht gegen die Karte anschreibt, und
   ein Schein oben rechts hinter dem Schaufenster. */
#sea-landing::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 16, 36, .62) 0%, rgba(10, 16, 36, .25) 48%, rgba(10, 16, 36, 0) 70%),
    radial-gradient(60rem 36rem at 88% 8%, rgba(23, 160, 148, .16), transparent 62%);
}
#sea-landing > * { position: relative; }
#sea-landing a { color: inherit; text-decoration: none; }

/* 1. Der Kopf: Wappen auf heller Platte, daneben der Absender. */
.sea-l-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.sea-l-marke {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.sea-l-schild-schatten {
  display: inline-block;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .55))
          drop-shadow(0 0 1px rgba(255, 255, 255, .6));
}
.sea-l-schild {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  padding: 14px 24px 38px;
  clip-path: url(#sea-l-schildform);
  background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(223, 238, 236, .94) 100%);
}
.sea-l-schild img { display: block; height: clamp(88px, 11vh, 124px); width: auto; }
.sea-l-augenbraue {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6fe3d6;
  padding-left: 14px;
  border-left: 1px solid rgba(111, 227, 214, .35);
}
.sea-l-kopf .sea-l-leise {
  font-size: 13px;
  color: rgba(243, 244, 246, .62);
}
.sea-l-kopf .sea-l-leise a { border-bottom: 1px solid rgba(255, 255, 255, .22); }
.sea-l-kopf .sea-l-leise a:hover { color: #fff; border-bottom-color: #6fe3d6; }

/* 2. Der Held: Text links, Schaufenster rechts. */
.sea-l-held {
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  min-height: 0;
}
.sea-l-text { min-width: 0; }
.sea-l-claim {
  margin: 0 0 clamp(10px, 1.6vh, 18px);
  font-weight: 800;
  font-size: clamp(34px, 3.7vw, 60px);
  line-height: 1.04;
  letter-spacing: -.024em;
  color: #ffffff;
  background: linear-gradient(96deg, #ffffff 0%, #d5f2ee 44%, #6fe3d6 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #sea-landing .sea-l-claim { color: transparent; }
}
.sea-l-unter {
  margin: 0 0 clamp(18px, 3vh, 30px);
  max-width: 44ch;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.55;
  color: rgba(243, 244, 246, .78);
}
.sea-l-tat {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin: 0;
}
.sea-l-knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .82rem 1.45rem .88rem;
  border-radius: 13px;
  font-size: 15px;
  font-weight: 700;
  color: #04231f;
  background: linear-gradient(180deg, #7ff0e2 0%, #17a094 100%);
  box-shadow: 0 12px 28px -12px rgba(23, 160, 148, .95),
              inset 0 0 0 1px rgba(255, 255, 255, .18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.sea-l-knopf:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 18px 36px -14px rgba(23, 160, 148, 1),
              inset 0 0 0 1px rgba(255, 255, 255, .28);
}
.sea-l-knopf:active { transform: translateY(0); }
/* Der zweite Knopf ist Glas: da, aber nicht der Hauptweg. */
.sea-l-knopf.sea-l-zweit {
  color: #f3f4f6;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
  backdrop-filter: blur(8px);
}
.sea-l-knopf.sea-l-zweit:hover {
  background: rgba(255, 255, 255, .13);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
  filter: none;
}
/* Andere Apps: ein leiser Aufklapper unter den Knoepfen, fuer wer schon
   eine Matrix-App hat oder einen anderen Browser nimmt. Auf dem Rechner
   schwebt die Tafel ueber dem Banner (die Seite ist eine Bildschirmhoehe,
   aufklappen darf nichts verschieben); auf der Handy-Seite klappt sie in
   der Tafel auf. */
.sea-l-andere {
  position: relative;
  margin-top: 14px;
  font-size: 13.5px;
  color: rgba(243, 244, 246, .7);
}
.sea-l-andere summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.sea-l-andere summary::-webkit-details-marker { display: none; }
.sea-l-andere summary::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.sea-l-andere[open] summary::before { content: "\2212"; }
.sea-l-andere summary:hover { color: #fff; }
.sea-l-andere summary:focus-visible { outline: 2px solid #6fe3d6; outline-offset: 3px; border-radius: 6px; }
.sea-l-andere-tafel {
  position: absolute;
  z-index: 5;
  top: calc(100% + 8px);
  left: 0;
  width: min(380px, 86vw);
  padding: 14px 16px;
  border-radius: 16px;
  line-height: 1.5;
  background: rgba(10, 22, 46, .9);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14),
              0 24px 48px -24px rgba(0, 0, 0, .9);
  backdrop-filter: blur(10px);
}
.sea-l-andere-tafel p { margin: 0 0 8px; }
.sea-l-andere-tafel p:last-child { margin-bottom: 0; }
.sea-l-andere-liste { font-weight: 700; color: #fff; }
.sea-l-andere-leise { color: rgba(243, 244, 246, .55); }
/* Mit #sea-landing davor: die allgemeine Regel nimmt jedem Verweis den
   Unterstrich. */
#sea-landing .sea-l-andere-tafel a {
  color: #6fe3d6;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#sea-landing .sea-l-andere-tafel a:hover { color: #fff; }
.sea-l-andere code {
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .1);
  font-size: .92em;
}
#sea-landing a:focus-visible {
  outline: 2px solid #6fe3d6;
  outline-offset: 3px;
  border-radius: 8px;
}

/* DAS SCHAUFENSTER: gross, aber nicht bildfuellend (Ansage Cedric). Die
   Hoehe haengt am Fenster, damit die Karten darunter noch Platz haben.
   .sea-l-schau ist der Rahmen (und der Container fuer cqw/cqh), die
   Buehne darin hat das Seitenverhaeltnis des Banners und ist so breit,
   wie Hoehe und Breite des Rahmens erlauben. Das Banner fuellt die Buehne,
   leicht zum Text hin gekippt, mit Schein und langsamem Schweben; das
   Telefon steht davor an der rechten unteren Ecke, aufrecht. */
.sea-l-schau {
  position: relative;
  display: grid;
  place-items: center;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  max-height: min(62vh, 720px);
  container-type: size;
}
.sea-l-buehne {
  position: relative;
  width: 100%;
  width: min(100cqw, calc(100cqh * 1400 / 788));
  max-width: 100%;
  aspect-ratio: 1400 / 788;
  perspective: 1800px;
}
.sea-l-buehne::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -18px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(23, 160, 148, .42) 0%, rgba(23, 160, 148, 0) 70%);
  filter: blur(8px);
  pointer-events: none;
}
.sea-l-banner {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  transform: rotateY(9deg) rotateX(2.5deg) translateZ(0);
  transform-origin: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12),
              0 48px 86px -34px rgba(0, 0, 0, .88),
              0 0 76px -28px rgba(23, 160, 148, .6);
  transition: transform .55s cubic-bezier(.2, .7, .3, 1), box-shadow .55s ease;
  animation: sea-l-schweben 9s ease-in-out infinite;
}
.sea-l-buehne:hover .sea-l-banner {
  transform: rotateY(0deg) rotateX(0deg) scale(1.012);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18),
              0 54px 96px -34px rgba(0, 0, 0, .92),
              0 0 96px -24px rgba(23, 160, 148, .75);
  animation-play-state: paused;
}
/* Die zwei Telefone: ein Kasten an der rechten unteren Ecke, darin beide
   als Verweise (App Store, Play Store) absolut, um die Unterkante gedreht
   (transform-origin unten): das V oeffnet sich nach oben. Die Bilder
   bringen ihre runden Ecken mit (Alpha), darum drop-shadow statt
   box-shadow: der Schatten folgt der Form. Das Schweben liegt auf dem
   Kasten, nicht auf den Verweisen: dort wuerde sich translate mit dem
   transform des Tauschs streiten. */
.sea-l-handys {
  position: absolute;
  right: 1%;
  bottom: -6%;
  height: 68%;
  aspect-ratio: 0.86;
  animation: sea-l-schweben 9s ease-in-out -3.5s infinite;
}
/* left: 50 % plus translateX(-50 %) im transform: beide drehen um dieselbe
   Mitte, auch wenn sie nicht gleich breit sind. */
.sea-l-handy {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: block;
  height: 100%;
  width: auto;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 34px 40px rgba(0, 0, 0, .62))
          drop-shadow(0 0 1px rgba(255, 255, 255, .3));
  transition: transform .9s cubic-bezier(.2, .7, .2, 1),
              filter .9s ease,
              z-index 0s .45s;
}
/* Grundstellung: a (iPhone) vorn rechts, b (Android) hinten links. */
.sea-l-handy-a {
  z-index: 2;
  transform: translateX(-34%) rotate(8deg);
}
.sea-l-handy-b {
  z-index: 1;
  transform: translateX(-68%) rotate(-9deg) scale(.94);
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .55)) brightness(.82);
}
/* Getauscht: b kommt von links nach rechts nach vorn, a weicht nach hinten
   links. Der z-index springt in der Mitte des Wegs (transition-delay). */
.sea-l-getauscht .sea-l-handy-a {
  z-index: 1;
  transform: translateX(-68%) rotate(-9deg) scale(.94);
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .55)) brightness(.82);
}
.sea-l-getauscht .sea-l-handy-b {
  z-index: 2;
  transform: translateX(-34%) rotate(8deg);
  filter: drop-shadow(0 34px 40px rgba(0, 0, 0, .62))
          drop-shadow(0 0 1px rgba(255, 255, 255, .3));
}
.sea-l-handy img {
  display: block;
  height: 100%;
  width: auto;
}
/* Das Wort zum Verweis: unten im Telefon, erst beim Zeigen oder mit der
   Tastatur zu sehen. */
.sea-l-handy-wort {
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  padding: .4em .9em .45em;
  border-radius: 999px;
  white-space: nowrap;
  font-size: clamp(11px, .8vw, 13px);
  font-weight: 700;
  letter-spacing: .01em;
  color: #04231f;
  background: linear-gradient(180deg, #7ff0e2 0%, #17a094 100%);
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .8);
  opacity: 0;
  transition: opacity .2s ease;
}
.sea-l-handy:hover .sea-l-handy-wort,
.sea-l-handy:focus-visible .sea-l-handy-wort { opacity: 1; }
.sea-l-buehne:hover .sea-l-handys { animation-play-state: paused; }
@keyframes sea-l-schweben {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -9px; }
}
/* Wer weniger Bewegung will, bekommt weniger Bewegung. */
@media (prefers-reduced-motion: reduce) {
  .sea-l-banner, .sea-l-handys { animation: none; }
  .sea-l-banner, .sea-l-handy { transition: none; }
  .sea-l-karte, .sea-l-knopf { transition: none; }
}

/* 3. Die drei Karten: Anleitung, Fragen, Registrierung. Glas auf der
   Karte, ein Farbton je Karte (dieselben Toene wie die Kacheln auf #/home),
   die ganze Karte ist der Verweis. Das Symbol gross und mittig oben,
   darunter Titel und Satz, unten rechts der Pfeil: hoeher als breit ist
   sie nicht, aber naeher am Quadrat als eine Zeile (Ansage Cedric,
   11.09.2026; am selben Tag noch einmal kleiner, damit das Schaufenster
   mit dem Telefon die Hoehe bekommt). */
.sea-l-karten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}
.sea-l-karte {
  --sea-ton: #17a094;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  justify-items: center;
  row-gap: 4px;
  min-height: clamp(80px, 21vh, 150px);
  padding: clamp(12px, 1.8vh, 18px) clamp(16px, 1.6vw, 24px) clamp(10px, 1.6vh, 14px);
  text-align: center;
  border-radius: 26px;
  background: rgba(10, 22, 46, .58);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .10),
              0 24px 48px -30px rgba(0, 0, 0, .8);
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.sea-l-karte::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sea-ton), transparent 85%);
  opacity: .9;
}
.sea-l-karte:nth-child(1) { --sea-ton: #4b86df; }
.sea-l-karte:nth-child(2) { --sea-ton: #17a094; }
.sea-l-karte:nth-child(3) { --sea-ton: #8e6ede; }
.sea-l-karte:hover {
  transform: translateY(-3px);
  background: rgba(14, 30, 60, .72);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22),
              0 30px 60px -30px rgba(0, 0, 0, .9),
              0 0 40px -20px var(--sea-ton);
}
.sea-l-symbol {
  display: block;
  width: clamp(52px, 8vh, 78px);
  height: clamp(52px, 8vh, 78px);
  margin: 0 0 clamp(4px, .8vh, 10px);
  font-style: normal;
}
.sea-l-symbol img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .5));
  transition: transform .25s ease;
}
.sea-l-karte:hover .sea-l-symbol img { transform: translateY(-3px) scale(1.04); }
.sea-l-karte strong {
  font-size: clamp(16px, 1.25vw, 19px);
  font-weight: 700;
  letter-spacing: -.012em;
  color: #fff;
}
.sea-l-karte span {
  align-self: start;
  max-width: 34ch;
  font-size: clamp(13px, .95vw, 14.5px);
  line-height: 1.45;
  color: rgba(243, 244, 246, .74);
}
/* Der Pfeil sitzt in der Ecke, ausserhalb des Rasters. */
.sea-l-pfeil {
  position: absolute;
  right: clamp(18px, 1.8vw, 26px);
  bottom: clamp(10px, 1.6vh, 14px);
  font-weight: 700;
  font-size: clamp(18px, 1.3vw, 24px);
  color: var(--sea-ton);
  transition: transform .18s ease;
}
.sea-l-karte:hover .sea-l-pfeil { transform: translateX(4px); }

/* Flache Fenster: das Schaufenster wird kleiner, nicht die Karten. */
@media (max-height: 759px) {
  .sea-l-schau { max-height: 44vh; }
  .sea-l-claim { font-size: clamp(30px, 3vw, 44px); }
  .sea-l-unter { margin-bottom: 14px; }
  .sea-l-karte { min-height: 0; }
  .sea-l-schild img { height: 80px; }
}

/* Schmale Rechnerfenster (kein Telefon, dort haengt sea.js nichts ein):
   alles untereinander, die Seite rollt. */
@media (max-width: 1179px) {
  #sea-landing {
    grid-template-rows: auto auto auto;
    padding-inline: clamp(18px, 4vw, 40px);
  }
  /* min-height: 0 gilt nur fuer die eine Bildschirmhoehe: hier duerfen die
     Zeilen nicht unter ihren Inhalt schrumpfen, sonst schoebe sich das
     Schaufenster ueber Knoepfe und Karten (gemessen bei 1000 x 1400). */
  .sea-l-held { grid-template-columns: minmax(0, 1fr); min-height: auto; }
  .sea-l-schau { order: 2; margin-top: 8px; max-height: none; min-height: auto; align-self: auto; container-type: normal; display: block; }
  .sea-l-buehne { width: min(100%, 720px); margin-inline: auto; }
  .sea-l-banner { transform: none; animation: none; }
  .sea-l-handys { right: 0; animation: none; }
  .sea-l-karten { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Die Handy-Seite (/mobile_guide, verwaltung/templates/mobil.html), seit
   dem 11.09.2026 abends dieselbe Startseite, gestapelt (Ansage Cedric).
   Die Wurzel traegt die Zusatzklasse sea-l-handy-seite: die Ebene liegt
   nicht mehr fest ueber Element, sondern ist die Seite selbst und rollt
   mit dem Fenster. Die Stapel-Regeln oben (max-width: 1179px) greifen auf
   dem Telefon ohnehin; hier steht nur, was darueber hinaus anders ist.
   Den Grund (Karte, Schleier) traegt body.landung in static/sea.css.
   ========================================================================== */
#sea-landing.sea-l-handy-seite {
  position: relative;
  inset: auto;
  z-index: auto;
  min-height: 100svh;
  align-content: start;
  overflow: visible;
  background: none;
  padding: 26px 18px calc(28px + env(safe-area-inset-bottom, 0px));
  gap: 22px;
}
#sea-landing.sea-l-handy-seite::before { display: none; }
.sea-l-handy-seite .sea-l-kopf { justify-content: center; }
.sea-l-handy-seite .sea-l-marke { flex-direction: column; gap: 12px; }
.sea-l-handy-seite .sea-l-augenbraue { padding-left: 0; border-left: 0; }
.sea-l-handy-seite .sea-l-schild img { height: 78px; }
.sea-l-handy-seite .sea-l-text { text-align: center; }
.sea-l-handy-seite .sea-l-claim { font-size: clamp(30px, 8.6vw, 38px); }
.sea-l-handy-seite .sea-l-unter { margin-inline: auto; }
.sea-l-handy-seite .sea-l-tat { justify-content: center; }
.sea-l-handy-seite .sea-l-schau { margin-top: 4px; }
/* Die Telefone groesser als im schmalen Rechnerfenster: das Banner ist
   hier nur eine Handbreit breit. */
.sea-l-handy-seite .sea-l-handys { right: -2%; bottom: -8%; height: 82%; }
.sea-l-handy-seite .sea-l-handy-wort { display: none; }
.sea-l-handy-seite .sea-l-karte { min-height: 0; }
.sea-l-handy-seite .sea-l-karten { gap: 12px; }

/* Die Tafel mit den Store-Abzeichen: Glas wie die Karten, aber Text und
   kein Verweis. Die Abzeichen selbst ordnet .laden in static/sea.css. */
.sea-l-tafel {
  padding: 18px 18px 16px;
  border-radius: 22px;
  text-align: center;
  background: rgba(10, 22, 46, .58);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .10),
              0 24px 48px -30px rgba(0, 0, 0, .8);
  backdrop-filter: blur(10px);
}
.sea-l-tafel .sea-l-andere { margin: 4px 0 12px; }
.sea-l-tafel .sea-l-andere-tafel {
  position: static;
  width: auto;
  margin-top: 10px;
  text-align: left;
  background: rgba(255, 255, 255, .05);
}
.sea-l-tafel p { margin: 0 0 10px; }
.sea-l-tafel p:last-child { margin-bottom: 0; }
/* Reset-Pille (Stil .reset-pille aus sea.css wie auf /guide). */
.sea-l-tafel .sea-l-reset { margin: 0 0 14px; text-align: center; }
.sea-l-tafel-titel { font-size: 15.5px; line-height: 1.5; }
.sea-l-tafel .leise { font-size: 13.5px; line-height: 1.5; color: rgba(243, 244, 246, .74); }
.sea-l-tafel code {
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .1);
  font-size: .92em;
}
/* Mit #sea-landing davor: die allgemeine Regel oben nimmt jedem Verweis
   den Unterstrich, und sie traegt die ID. */
#sea-landing .sea-l-tafel .leise a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
#sea-landing .sea-l-tafel .leise a:hover { color: #6fe3d6; }