/* ==========================================================================
   FREEYOURBASE LABS - SHELL
   --------------------------------------------------------------------------
   Rahmen fuer die Labs-Werkzeuge: Kopfzeile, Karte, Fusszeile.

   Diese Datei stylt ausschliesslich den Rahmen. Sie weiss nichts ueber den
   Inhalt der Karte und darf nichts ueber ihn wissen. Der Inhalt steckt in
   genau einem Container: #labs-content. Alles darin gehoert dem jeweiligen
   Werkzeug und wird hier nicht angefasst.

   Uebernahme in ein weiteres Werkzeug:
     1. diese Datei kopieren
     2. den Block zwischen <!-- LABS SHELL START --> und <!-- LABS SHELL END -->
        aus der index.html kopieren
     3. eigenen Inhalt in #labs-content legen

   Bewusst kein Dark Mode und keine prefers-color-scheme-Regeln.
   ========================================================================== */

/* --- Schrift ------------------------------------------------------------
   Lokal ausgeliefert, keine externe Quelle. Gleiche URLs wie im Werkzeug,
   der Browser laedt sie deshalb nur einmal.
   -------------------------------------------------------------------- */
@font-face {
  font-family: 'Montserrat';
  src: url('montserrat-v31-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('montserrat-v31-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   TOKENS
   Alles Einstellbare steht hier. Weiter unten kommen keine festen Werte vor.
   ========================================================================== */
:root {
  /* --- Marke ---------------------------------------------------------- */
  --labs-primaer: #306586;          /* Links, Fokusrahmen, Flaechen */
  --labs-primaer-tief: #1f4a64;     /* Hover */
  --labs-primaer-dunst: #d9e5ec;    /* zarte Flaechen */

  /* Wortmarke. Fuer Logotypen gilt die Kontrastregel nicht (WCAG 1.4.3
     nimmt Markenschriftzuege ausdruecklich aus), deshalb steht hier das
     helle Ocker so, wie es gewuenscht ist. */
  --labs-wortmarke-name: #333333;
  --labs-wortmarke-labs: #cc9966;

  /* Akzent. Auf Weiss nur 2.84:1 - deshalb ausschliesslich als Flaeche
     (Linien, Balken ab 3 px), niemals als Textfarbe. Fuer farbigen Text
     ist --labs-akzent-tinte da, die kommt auf 5.91:1. */
  --labs-akzent: #cd8c32;
  --labs-akzent-tinte: #8a5a16;

  /* --- Flaechen ------------------------------------------------------- */
  --labs-grund: #eef3f6;            /* Seitenhintergrund */
  --labs-grund-tief: #e3ecf1;       /* unteres Ende des Verlaufs */
  --labs-karte: #ffffff;
  --labs-kopf-flaeche: #ffffff;

  /* --- Linien --------------------------------------------------------- */
  --labs-linie: #ccdae3;            /* durchgezogene Fusslinie */

  /* Kopfzeile: eigener, kuehlerer Verlauf plus eine farbige Kante, damit
     sie sich klar vom Rest der Seite absetzt. */
  --labs-kopf-von: #ffffff;
  --labs-kopf-bis: #e6eff4;
  --labs-kopf-kante: 3px;
  --labs-raster: rgba(48, 101, 134, 0.42);   /* Punktraster im Kopf */

  /* Ring und Punkt rechts im Kopfband. Rein dekorativ - dort steht kein
     Text, deshalb gelten keine Kontrastvorgaben. */
  --labs-kopf-ring: rgba(48, 101, 134, 0.16);
  --labs-kopf-ring-innen: 74px;
  --labs-kopf-ring-aussen: 104px;
  --labs-kopf-punkt: #cd8c32;
  --labs-kopf-punkt-klein: rgba(48, 101, 134, 0.34);

  /* Fusszeile: eigene Flaeche mit Textur.
     Die Basis ist bewusst heller als der Seitengrund - die Textur legt
     sich darueber und verdunkelt sie stellenweise. Am ungünstigsten Punkt
     (alle Schichten uebereinander) bleibt der Text bei 5.18:1. */
  --labs-fuss-von: #eef4f7;
  --labs-fuss-bis: #e6eff4;
  --labs-fuss-tinte: #44566a;

  /* Deckkraft der Texturschichten. Hoehere Werte druecken den Kontrast
     unter AA - vor dem Aendern build/pruefe_html.py laufen lassen. */
  --labs-fuss-gewebe: rgba(255, 255, 255, 0.13);
  --labs-fuss-kreuz: rgba(48, 101, 134, 0.06);
  --labs-fuss-wolke-a: rgba(205, 140, 50, 0.08);
  --labs-fuss-wolke-b: rgba(48, 101, 134, 0.08);

  /* Titelleiste der Karte */
  --labs-titel-von: #fbfdfe;
  --labs-titel-bis: #f2f7fa;
  --labs-titel-trenner: #e2ebf1;

  /* --- Karte: Glasrahmen ----------------------------------------------
     Ein heller, halbtransparenter Ring um die Karte. Er liegt ueber der
     Hintergrundgrafik und wirkt dadurch wie eine Fassung aus Milchglas.
     Umgesetzt als gestaffelte box-shadow statt mit backdrop-filter:
     kostet keine Rechenzeit beim Scrollen und macht keine Stapelprobleme. */
  --labs-karte-kante: rgba(48, 101, 134, 0.12);
  --labs-karte-glas: rgba(255, 255, 255, 0.55);
  --labs-karte-glas-kante: rgba(48, 101, 134, 0.08);
  --labs-karte-glas-breite: 10px;

  /* --- Text ----------------------------------------------------------- */
  --labs-tinte: #14252f;            /* 15.7:1 auf Weiss */
  --labs-tinte-leise: #55697a;      /* 5.7:1 auf Weiss */

  /* --- Schriftgroessen ------------------------------------------------ */
  --labs-schrift: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --labs-groesse-basis: 1rem;       /* 16px - darunter zoomt iOS beim Fokus */
  --labs-groesse-klein: 0.875rem;
  --labs-groesse-wortmarke: 1.125rem;
  --labs-groesse-spruch: 0.8125rem;

  /* --- Abstaende ------------------------------------------------------ */
  --labs-abstand-1: 8px;
  --labs-abstand-2: 16px;
  --labs-abstand-3: 24px;
  --labs-abstand-4: 40px;
  --labs-abstand-5: 64px;

  /* --- Karte ----------------------------------------------------------
     Auf dem Desktop schmaler als frueher: ein langer Text wirkt in einer
     engen Spalte kuerzer und ruhiger. Der Wert wird unten in der
     Desktop-Abfrage noch einmal gesenkt. */
  --labs-karte-breite: 860px;
  --labs-karte-radius: 20px;
  --labs-karte-polster: 48px;
  --labs-karte-polster-eng: 20px;
  --labs-karte-schatten:
    0 0 0 var(--labs-karte-glas-breite) var(--labs-karte-glas),
    0 0 0 calc(var(--labs-karte-glas-breite) + 1px) var(--labs-karte-glas-kante),
    0 2px 6px rgba(31, 74, 100, 0.05),
    0 28px 60px -24px rgba(31, 74, 100, 0.28);

  /* --- Bedienung ------------------------------------------------------ */
  --labs-touchziel: 44px;
  --labs-fokus-staerke: 2px;
  --labs-fokus-abstand: 2px;

  /* --- Bewegung ------------------------------------------------------- */
  --labs-uebergang: 200ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Umbruchpunkte --------------------------------------------------
     In Media Queries sind Custom Properties nicht erlaubt, die Werte
     stehen dort ausgeschrieben. Hier zur Dokumentation:
       40em = 640px   ab hier bekommt die Karte Rand und Rundung
       64em = 1024px  ab hier die enge Desktop-Fassung
     ------------------------------------------------------------------ */
}

/* ==========================================================================
   GRUNDGERUEST
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;

  background:
    linear-gradient(180deg, var(--labs-grund) 0%, var(--labs-grund-tief) 100%)
    fixed;
  color: var(--labs-tinte);
  font-family: var(--labs-schrift);
  font-size: var(--labs-groesse-basis);
  line-height: 1.6;

  overflow-x: hidden;

  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Abstrakte Hintergrundgrafik: konzentrische Kreise, sehr blass, hinter
   allem. Dasselbe Motiv wie das Markenzeichen und der Atem-Kreis im
   Werkzeug. Als data-URI eingebettet, also nichts nachzuladen. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760' viewBox='0 0 760 760'%3E%3Cg fill='none' stroke='%23306586' stroke-opacity='0.10' stroke-width='1.5'%3E%3Ccircle cx='380' cy='380' r='372'/%3E%3Ccircle cx='380' cy='380' r='296'/%3E%3Ccircle cx='380' cy='380' r='220'/%3E%3Ccircle cx='380' cy='380' r='144'/%3E%3Ccircle cx='380' cy='380' r='68'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'%3E%3Cg fill='none' stroke='%23cd8c32' stroke-opacity='0.10' stroke-width='1.5'%3E%3Ccircle cx='260' cy='260' r='252'/%3E%3Ccircle cx='260' cy='260' r='186'/%3E%3Ccircle cx='260' cy='260' r='120'/%3E%3Ccircle cx='260' cy='260' r='56'/%3E%3C/g%3E%3C/svg%3E");
  background-position:
    right -260px top -220px,
    left -200px bottom -180px;
  background-repeat: no-repeat, no-repeat;
}

/* Muss stehen, solange Elemente mit hidden-Attribut eine display-Regel aus
   einer Klasse bekommen: ein Klassenselektor schlaegt sonst die
   Standardregel des Browsers und das Element bleibt sichtbar. */
[hidden] {
  display: none !important;
}

/* Sichtbarer Fokus, ueberall und in derselben Form */
.labs-shell :focus-visible,
#labs-content :focus-visible {
  outline: var(--labs-fokus-staerke) solid var(--labs-primaer);
  outline-offset: var(--labs-fokus-abstand);
  border-radius: 4px;
}

/* ==========================================================================
   KOPFZEILE
   Durchgehendes Band ueber die volle Breite mit einer Linie, die komplett
   durchlaeuft. Der Inhalt sitzt in einem eigenen Container in Kartenbreite.
   ========================================================================== */
.labs-kopf {
  position: relative;
  width: 100%;
  padding-top: env(safe-area-inset-top);

  /* Verlauf plus dieselbe Kreisform wie im Markenzeichen, rechts
     angeschnitten. Beides sehr zurueckhaltend - der Kopf soll sich
     absetzen, nicht auffallen. */
  /* Schichten von oben nach unten:
       1. kleiner Punkt in der Markenfarbe
       2. Akzentpunkt, sitzt auf dem Ring - beide zusammen lesen sich als
          ein Zeichen statt als zwei getrennte Farbtupfer
       3. Ring, oben rechts angeschnitten. Als Radialverlauf mit harten
          Stopps gebaut, damit kein weiteres Element noetig ist.
       4. Grundverlauf
     Alles rechts vom Text: die Wortmarke steht links, dort liegt nichts. */
  background:
    radial-gradient(circle at 79% 82%,
      var(--labs-kopf-punkt-klein) 0 4px, transparent 4.5px),
    radial-gradient(circle at 88.5% 64%,
      var(--labs-kopf-punkt) 0 7px, transparent 7.5px),
    radial-gradient(circle at 93% -40%,
      transparent 0 var(--labs-kopf-ring-innen),
      var(--labs-kopf-ring) var(--labs-kopf-ring-innen) var(--labs-kopf-ring-aussen),
      transparent var(--labs-kopf-ring-aussen)),
    linear-gradient(160deg,
      var(--labs-kopf-von) 0%,
      var(--labs-kopf-von) 30%,
      var(--labs-kopf-bis) 100%);
  background-repeat: no-repeat;
}

/* Feines Punktraster, das von rechts hereinlaeuft und nach links
   ausblendet. Die Maske sorgt dafuer, dass unter der Wortmarke und dem
   Spruch nie Grafik liegt - Text auf Grafik liest sich schlecht. */
.labs-kopf::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image: radial-gradient(circle,
    var(--labs-raster) 1.3px, transparent 1.8px);
  background-size: 15px 15px;

  /* Blendet links aus, damit unter dem Text nie Grafik liegt, und rechts
     wieder etwas ab, damit Ring und Punkt frei stehen. */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 42%, #000 68%, rgba(0, 0, 0, 0.35) 100%);
  mask-image: linear-gradient(90deg,
    transparent 42%, #000 68%, rgba(0, 0, 0, 0.35) 100%);
}

/* Die durchgezogene Kante: laeuft ueber die volle Breite und traegt die
   beiden Markenfarben. */
.labs-kopf::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--labs-kopf-kante);
  background: linear-gradient(90deg,
    var(--labs-primaer) 0%,
    var(--labs-primaer) 34%,
    var(--labs-akzent) 78%,
    var(--labs-akzent) 100%);
  opacity: 0.85;
}

.labs-kopf__innen {
  position: relative;
  z-index: 1;
  max-width: var(--labs-karte-breite);
  margin: 0 auto;
  padding: var(--labs-abstand-2);

  display: flex;
  align-items: center;
  gap: var(--labs-abstand-2);
  flex-wrap: nowrap;
  min-height: 72px;
}

/* --- Marke: Wortmarke mit Spruch darunter ------------------------------- */
.labs-marke {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.labs-wortmarke {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;                       /* Labs sitzt dicht am Namen */

  font-size: var(--labs-groesse-wortmarke);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-decoration: none;
  white-space: nowrap;

  /* Trefferflaeche auf 44px bringen, ohne die Kopfzeile zu strecken:
     das Polster vergroessert das anklickbare Feld, der negative
     Aussenabstand nimmt die zusaetzliche Hoehe im Layout wieder heraus. */
  padding: 9px 0;
  margin: -9px 0;
  align-self: flex-start;
}

/* Das Logo traegt den Namen selbst, deshalb erscheint es nur am
   Schreibtisch und ersetzt dort den Schriftzug. Auf schmalen Geraeten
   bleibt die Textfassung, sie braucht weniger Platz. */
/* Erscheint erst am Schreibtisch, wo links neben dem mittigen Container
   genug Platz ist. Aus dem Fokuslauf genommen: es fuehrt an dieselbe
   Stelle wie die Wortmarke daneben. */
.labs-logo-link {
  display: none;
}

.labs-logo {
  width: auto;
}

.labs-wortmarke__name {
  color: var(--labs-wortmarke-name);
  transition: color var(--labs-uebergang);
}

.labs-wortmarke__labs {
  color: var(--labs-wortmarke-labs);
  font-weight: 600;
}

.labs-wortmarke:hover .labs-wortmarke__name {
  color: var(--labs-primaer);
}

/* --- Spruch: sitzt als Unterzeile unter der Wortmarke ------------------- */
.labs-spruch {
  margin: 0;
  font-size: var(--labs-groesse-spruch);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--labs-tinte-leise);
  white-space: nowrap;
}

/* --- Ruecklink ---------------------------------------------------------- */
.labs-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;

  font-size: var(--labs-groesse-klein);
  font-weight: 600;
  color: var(--labs-primaer);
  text-decoration: none;
  white-space: nowrap;

  padding: 0 var(--labs-abstand-2);
  min-height: var(--labs-touchziel);
  border: 1px solid var(--labs-linie);
  border-radius: 999px;
  transition: color var(--labs-uebergang),
              border-color var(--labs-uebergang),
              background-color var(--labs-uebergang);
}

.labs-zurueck:hover {
  color: var(--labs-primaer-tief);
  border-color: var(--labs-primaer);
  background: var(--labs-primaer-dunst);
}

.labs-zurueck__pfeil {
  font-size: 1.05em;
  line-height: 1;
}

/* ==========================================================================
   KARTE
   ========================================================================== */
.labs-karte {
  width: 100%;
  max-width: var(--labs-karte-breite);

  /* Die Karte umschliesst nur ihren Inhalt. Frueher streckte sie sich
     ueber die volle Hoehe, wodurch unter kurzen Bildschirmen eine grosse
     leere Flaeche in der Karte stand. Der Rest des Platzes geht jetzt
     zwischen Karte und Fusszeile. */
  margin: 0 auto auto;
  flex: 0 0 auto;

  background: var(--labs-karte);
  border: 1px solid var(--labs-karte-kante);
  border-radius: var(--labs-karte-radius);
  box-shadow: var(--labs-karte-schatten);
  padding: 0;
}

/* --- Titelleiste der Karte ---------------------------------------------
   Traegt den Namen des Werkzeugs. Der Wert steht im Markup, die Shell
   kennt ihn nicht. */
.labs-karte__kopf {
  display: flex;
  align-items: center;
  gap: var(--labs-abstand-2);

  padding: 14px var(--labs-karte-polster-eng);
  border-bottom: 1px solid var(--labs-titel-trenner);
  border-radius: calc(var(--labs-karte-radius) - 1px)
                 calc(var(--labs-karte-radius) - 1px) 0 0;
  background: linear-gradient(180deg,
    var(--labs-titel-von) 0%, var(--labs-titel-bis) 100%);
}

.labs-karte__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.labs-karte__titel {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--labs-tinte);
}

/* Kleiner Akzentstrich vor dem Titel */
.labs-karte__marke {
  flex: 0 0 auto;
  width: 4px;
  height: 28px;
  border-radius: 2px;
  background: var(--labs-akzent);
}

/* --- Brotkrumen ---------------------------------------------------------
   Zeigen den Abschnitt des Ablaufs. Bewusst keine Links: ein Ruecksprung
   ist im Ablauf nicht vorgesehen. */
.labs-krumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--labs-tinte-leise);
}

.labs-krume--erledigt {
  color: var(--labs-primaer);
}

.labs-krume--hier {
  font-weight: 600;
  color: var(--labs-tinte);
}

.labs-krume__trenner {
  color: var(--labs-linie);
}

/* Nummerierte Unterschritte hinter einem Abschnitt */
.labs-krume__unter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
}

.labs-ziffer {
  min-width: 20px;
  padding: 1px 4px;
  border-radius: 4px;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--labs-tinte-leise);
  background: transparent;
  border: 1px solid transparent;
}

.labs-ziffer--erledigt {
  color: var(--labs-primaer);
  border-color: var(--labs-primaer-dunst);
}

.labs-ziffer--hier {
  color: #ffffff;
  background: var(--labs-primaer);
  border-color: var(--labs-primaer);
}

/* --- Kartentitel zweifarbig ------------------------------------------- */
.labs-karte__titel-akzent {
  color: var(--labs-akzent-tinte);
}

#labs-content {
  display: block;
  padding: var(--labs-karte-polster-eng);
}

/* ==========================================================================
   ZUSTAENDE INNERHALB DER KARTE
   ========================================================================== */
.labs-zustand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--labs-abstand-2);
  padding: var(--labs-abstand-5) var(--labs-abstand-2);
  text-align: center;
  color: var(--labs-tinte-leise);
}

.labs-zustand__text {
  margin: 0;
  font-size: var(--labs-groesse-klein);
}

.labs-zustand__titel {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--labs-tinte);
}

.labs-spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--labs-primaer-dunst);
  border-top-color: var(--labs-primaer);
  animation: labs-drehen 900ms linear infinite;
}

@keyframes labs-drehen {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   FUSSZEILE
   Wie die Kopfzeile ein durchgehendes Band mit durchlaufender Linie.
   ========================================================================== */
.labs-fuss {
  position: relative;
  width: 100%;
  margin-top: var(--labs-abstand-5);

  /* Setzt sich vom Rest ab: eigene, dunklere Flaeche mit farbiger
     Oberkante - dasselbe Mittel wie in der Kopfzeile, gespiegelt. */
  background: linear-gradient(180deg,
    var(--labs-fuss-von) 0%, var(--labs-fuss-bis) 100%);
  border-top: 1px solid var(--labs-linie);
}

.labs-fuss::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--labs-kopf-kante);
  background: linear-gradient(90deg,
    var(--labs-akzent) 0%,
    var(--labs-akzent) 22%,
    var(--labs-primaer) 66%,
    var(--labs-primaer) 100%);
  opacity: 0.85;
  z-index: 1;
}

/* Textur aus vier Schichten, von oben nach unten:
     1. helles Gewebe, feine Schraegstreifen
     2. gegenlaeufiges Kreuzraster in der Markenfarbe
     3. warme Wolke rechts oben
     4. kuehle Wolke links unten
   Die Wolken sind Farbverlaeufe mit weichem Auslauf statt einer
   gefilterten Form - das spart die Rechenzeit von filter: blur() und
   kommt ohne zusaetzliches Element aus. */
.labs-fuss::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image:
    repeating-linear-gradient(25deg,
      var(--labs-fuss-gewebe) 0 2px,
      transparent 2px 11px),
    repeating-linear-gradient(-29deg,
      var(--labs-fuss-kreuz) 0 1px,
      transparent 1px 9px),
    radial-gradient(ellipse 60% 120% at 82% 12%,
      var(--labs-fuss-wolke-a), transparent 60%),
    radial-gradient(ellipse 70% 130% at 12% 92%,
      var(--labs-fuss-wolke-b), transparent 62%);
}

.labs-fuss__innen {
  position: relative;
  max-width: var(--labs-karte-breite);
  margin: 0 auto;
  z-index: 1;
  padding: var(--labs-abstand-2);

  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--labs-abstand-1) var(--labs-abstand-3);

  font-size: var(--labs-groesse-klein);
  color: var(--labs-fuss-tinte);
}

/* Impressum und Datenschutz ganz links */
.labs-fuss__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--labs-abstand-1) var(--labs-abstand-3);
}

/* Standortangabe und Ruecklink ganz rechts */
.labs-fuss__rechts {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--labs-abstand-1);
  text-align: right;
}

/* Steht auf derselben Linie wie Impressum. Die Links dort sind 44px hohe
   Trefferflaechen mit mittig sitzendem Text - ohne die gleiche Hoehe hier
   saesse die Zeile weiter oben. */
.labs-fuss__ort {
  display: flex;
  align-items: center;
  min-height: var(--labs-touchziel);
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.labs-fuss a {
  color: var(--labs-fuss-tinte);
  text-decoration: underline;
  text-decoration-color: var(--labs-linie);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;

  display: inline-flex;
  align-items: center;
  min-height: var(--labs-touchziel);
  transition: color var(--labs-uebergang);
}

.labs-fuss a:hover {
  /* Dunkler als --labs-primaer: die Textur senkt den Untergrund ab. */
  color: var(--labs-primaer-tief);
  text-decoration-color: currentColor;
}

/* Der Copyright-Hinweis steht bewusst auf einer eigenen Zeile. Zusammen
   mit den Links waere die Reihe 780px breit und wuerde bei 720px
   Kartenbreite unkontrolliert umbrechen. */
.labs-fuss__marke {
  width: 100%;
  margin: 0;
  padding-top: var(--labs-abstand-1);
  border-top: 1px solid var(--labs-linie);

  /* Die ganze Zeile steht kleiner als die uebrige Fusszeile. */
  font-size: 0.75rem;
  line-height: 1.5;
}

.labs-fuss__marke b {
  font-weight: 600;
}

/* Der Ruecklink sitzt in der Fusszeile und behaelt dort seine Pillenform. */
.labs-fuss .labs-zurueck {
  font-size: var(--labs-groesse-klein);
  margin-right: var(--labs-abstand-1);
}

/* ==========================================================================
   AB TABLET (640px)
   Karte bekommt Rand, Rundung und grosszuegiges Polster.
   ========================================================================== */
@media (min-width: 40em) {
  .labs-kopf__innen,
  .labs-fuss__innen {
    padding-left: var(--labs-abstand-3);
    padding-right: var(--labs-abstand-3);
  }

  .labs-karte {
    margin-top: var(--labs-abstand-4);
    width: calc(100% - 2 * var(--labs-abstand-3));
  }

  .labs-karte__kopf {
    padding: 16px var(--labs-karte-polster);
  }

  #labs-content {
    padding: var(--labs-karte-polster);
  }
}

/* ==========================================================================
   AB DESKTOP (1024px)
   Engere Fassung: schmalere Karte, weniger Polster. Der Text wird im
   Werkzeug-Stylesheet kleiner gesetzt, nicht hier.
   ========================================================================== */
@media (min-width: 64em) {
  :root {
    --labs-karte-breite: 720px;
    --labs-karte-polster: 40px;
  }

  /* Das Logo sitzt am linken Rand des Kopfbands, deutlich abgesetzt von
     der Wortmarke. Es steht ausserhalb des mittigen Containers, deshalb
     absolut positioniert - so bleibt die Wortmarke buendig mit der Karte.
     Der Schriftzug bleibt unveraendert daneben stehen. */
  .labs-logo-link {
    display: block;
    position: absolute;
    left: var(--labs-abstand-4);
    top: 50%;
    transform: translateY(-50%);
    line-height: 0;
  }

  /* Groesser, ohne die Kopfzeile zu strecken: das Logo ist absolut
     positioniert, seine Hoehe geht deshalb nicht in die Zeilenhoehe ein.
     48px passen neben die 72px hohe Kopfzeile. */
  .labs-logo {
    display: block;
    height: 48px;
  }

  .labs-karte {
    margin-top: var(--labs-abstand-3);
  }

  .labs-fuss {
    margin-top: var(--labs-abstand-4);
  }
}

/* ==========================================================================
   UNTER 640px
   Karte ueber die volle Breite, ohne Ecken. Kopfzeile flach und einzeilig.
   ========================================================================== */
@media (max-width: 39.99em) {
  .labs-karte {
    border-radius: 0;
    box-shadow: none;
    /* Randlos: kein Glasring, keine Seitenkanten */
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid var(--labs-linie);
  }

  .labs-kopf__innen {
    padding-top: var(--labs-abstand-1);
    padding-bottom: var(--labs-abstand-1);
    min-height: 0;
  }

  /* Das Kopfband ist hier flacher, Ring und Punkt schrumpfen mit. */
  :root {
    --labs-kopf-ring-innen: 52px;
    --labs-kopf-ring-aussen: 72px;
  }

  /* Der Spruch steht als Unterzeile und konkurriert nicht mehr um
     Breite, er darf deshalb auch auf dem Handy bleiben. */
  .labs-spruch {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
  }

  /* Die Wortmarke darf nie schrumpfen - mit nowrap wuerde sie sonst
     abgeschnitten statt umgebrochen. Platz macht der Ruecklink. */
  .labs-wortmarke {
    font-size: 1rem;
    flex: 0 0 auto;
  }

  .labs-zurueck {
    font-size: 0.75rem;
    padding: 0 12px;
  }

  /* Standortangabe und Ruecklink stehen auf dem Handy links, nicht
     rechts - sonst springt der Blick in der schmalen Spalte hin und her. */
  .labs-fuss__rechts {
    margin-left: 0;
    align-items: flex-start;
    text-align: left;
    width: 100%;
  }


}

/* Sehr schmal: der Ruecklink verliert seinen Rahmen, sonst wird es eng */
@media (max-width: 22.5em) {
  .labs-zurueck {
    border-color: transparent;
    padding: 0;
  }
}

/* ==========================================================================
   BEWEGUNG REDUZIEREN
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .labs-shell *,
  .labs-shell *::before,
  .labs-shell *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .labs-spinner {
    animation: none;
    border-top-color: var(--labs-primaer-dunst);
  }
}