.tiefsee-main {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
}

/* ---------- Dünne JUPI-Leiste (GUI-Richtlinie 3.13.2, Typ 1) ----------
   Links "Alle Spiele", mittig Spiel-Logo + Name, rechts Dark-Mode-Toggle.
   Bewusst KEIN Schullogo und KEIN Sprachumschalter: das Spiel hat kein
   i18n-Modul. Im Vollbild (body.ist_vollbild) verschwindet die Leiste
   ganz - dort gehört die ganze Fläche der Bühne. */
.tiefsee_leiste {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  padding: .4rem .9rem;
  border-bottom: 1px solid rgba(133, 230, 229, .22);
  background: linear-gradient(180deg, #072634, #041520);
}

body.ist_vollbild .tiefsee_leiste {
  display: none;
}

.tiefsee_leiste_zurueck {
  order: 1;
}

.tiefsee_leiste_titel {
  order: 2;
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 auto;
}

.tiefsee_leiste_titel img {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: .5rem;
}

.tiefsee_leiste_titel h1 {
  margin: 0;
  color: #bff3f2;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.tiefsee_leiste #jupi_theme_toggle {
  order: 3;
  margin-left: auto;
  width: 74px;
  height: 40px;
  padding: 0;
}

/* Den Schieber zusammen mit dem 40-px-Touchziel skalieren: sonst oval. */
.tiefsee_leiste .jupi_theme_switch .jts_thumb {
  top: 3px;
  bottom: auto;
  left: 3px;
  width: 32px;
  height: 32px;
}

html[data-theme="dark"] .tiefsee_leiste .jupi_theme_switch .jts_thumb {
  left: calc(100% - 35px);
}

.tiefsee_leiste .jupi_theme_switch .jts_icon {
  font-size: 18px;
}

.tiefsee_leiste .jupi_theme_switch .jts_sun {
  left: 9px;
}

.tiefsee_leiste .jupi_theme_switch .jts_moon {
  right: 9px;
}

/* Der Chip in der Leiste ist eine Nebenangabe: auf dem schmalen Handy
   hat die Leiste nur Platz für Zurück, Name und Dark-Mode. */
.tiefsee_leiste_chip {
  order: 2;
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 29.99rem) {
  .tiefsee_leiste_chip {
    display: none;
  }

  .tiefsee_leiste_titel {
    margin-left: 0;
  }
}

/* Schullogo im Fuß: die dünne Leiste hat keinen Platz mehr dafür. */
.tiefsee_fuss_schule {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0 auto .45rem;
  opacity: .55;
  filter: grayscale(1);
}

html[data-theme="dark"] .tiefsee_leiste_titel h1 {
  color: #d7fbfa;
}

.tiefsee_chip,
.tiefsee_kategorie {
  display: inline-block;
  border-radius: 999px;
  padding: .28rem .72rem;
  color: #075a6a;
  background: #dff4f3;
  font-size: .82rem;
  font-weight: 800;
}

/* Der Start-Chip sitzt unter den Startknöpfen und bekommt Abstand. */
.tiefsee_startchip {
  margin-top: .7rem;
}

.tiefsee_buehne {
  position: relative;
  width: 100%;
  height: clamp(500px, 70vh, 760px);
  min-height: 500px;
  overflow: hidden;
  border: 3px solid #092f43;
  border-radius: 1.15rem;
  background: #01070b;
  box-shadow: 0 12px 36px rgba(0, 12, 21, .36);
  isolation: isolate;
}

/* Ziehen und langes Antippen im Spiel dürfen keine Texte markieren. */
.tiefsee_buehne,
.tiefsee_buehne * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.tiefsee_stage {
  position: absolute;
  inset: 0;
  touch-action: none;
  cursor: grab;
}

.tiefsee_stage:active {
  cursor: grabbing;
}

.tiefsee_stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Tiefsee-Vignette ueber dem 3D-Bild: unten und an den Raenden dunkler,
   wie ein Blick durch ein Uboot-Bullauge (liegt UNTER den HUD-Elementen) */
.tiefsee_stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 52%, rgba(0, 6, 12, .44) 100%);
}

.tiefsee_buehne [hidden] {
  display: none !important;
}

.tiefsee_messwerte,
.tiefsee_auftrag,
.tiefsee_kompass,
.tiefsee_tiefenwaage,
.tiefsee_sonar,
.tiefsee_zielmarker,
.tiefsee_scan,
.tiefsee_meldung,
.tiefsee_aktionen,
.tiefsee_steuerung,
.tiefsee_werkzeugleiste {
  position: absolute;
  z-index: 5;
}

.tiefsee_messwerte {
  top: .75rem;
  left: .75rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(86px, 1fr));
  gap: .35rem;
  width: min(250px, 28vw);
  pointer-events: none;
}

.tiefsee_messwerte div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  border: 1px solid rgba(122, 218, 226, .22);
  border-radius: .55rem;
  padding: .34rem .5rem;
  color: #9cc0c9;
  background: rgba(2, 16, 25, .78);
  backdrop-filter: blur(8px);
  font-size: .7rem;
}

.tiefsee_messwerte strong {
  color: #e9ffff;
  font-size: .76rem;
}

/* Einheit und Näherungszeichen bleiben auch auf schmalen Anzeigen zusammen. */
.tiefsee_messwerte span,
.tiefsee_messwerte strong {
  white-space: nowrap;
}

.tiefsee_auftrag {
  top: .75rem;
  left: 50%;
  width: min(440px, 38vw);
  transform: translateX(-50%);
  border: 1px solid rgba(96, 222, 220, .28);
  border-radius: .8rem;
  padding: .55rem .8rem;
  color: #d8ffff;
  background: rgba(2, 19, 29, .84);
  box-shadow: 0 7px 22px rgba(0, 0, 0, .22);
  backdrop-filter: blur(9px);
  text-align: center;
  pointer-events: none;
}

.tiefsee_auftrag span,
.tiefsee_auftrag small {
  display: block;
  color: #8fbcc4;
  font-size: .66rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tiefsee_auftrag strong {
  display: block;
  margin: .08rem 0;
  font-size: .88rem;
}

.tiefsee_kompass {
  top: .85rem;
  right: 9.4rem;
  width: 4.4rem;
  color: #d9ffff;
  text-align: center;
  pointer-events: none;
}

.tiefsee_kompass span {
  display: block;
  margin-bottom: .2rem;
  font-size: .82rem;
  font-weight: 900;
}

.tiefsee_kompasslinie {
  position: relative;
  height: 2px;
  background: linear-gradient(90deg, transparent, #7ff2e7 45%, #fff 50%, #7ff2e7 55%, transparent);
}

.tiefsee_kompasslinie::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-right: 5px solid transparent;
  border-bottom: 8px solid #fff;
}

/* Amberfarbene Peilnadel: Richtung des aktuellen Ziels (dreht um die Kompasslinie) */
#tiefsee_kompass_ziel {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  width: 0;
  height: 0;
  border-right: 5px solid transparent;
  border-bottom: 9px solid #ffd166;
  border-left: 5px solid transparent;
  transform: translateX(-50%) rotate(0deg);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 4px rgba(255, 209, 102, .65));
}

.tiefsee_tiefenwaage {
  top: 6.6rem;
  bottom: 6.2rem;
  left: .8rem;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  justify-items: center;
  width: 3.4rem;
  color: #a7cbd0;
  font-size: .63rem;
  pointer-events: none;
}

.tiefsee_tiefenstrasse {
  position: relative;
  width: .34rem;
  height: 100%;
  min-height: 100px;
  margin: .35rem 0;
  border-radius: 999px;
  background: linear-gradient(#48b8d5, #1a6683 30%, #1a2850 62%, #16122b);
  box-shadow: 0 0 10px rgba(62, 188, 210, .3);
}

.tiefsee_tiefenzeiger {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2.4rem;
  height: .45rem;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #fff5a8;
  box-shadow: 0 0 9px rgba(255, 245, 168, .8);
}

.tiefsee_tiefenwaage strong {
  color: #f3ffff;
  font-size: .72rem;
}

.tiefsee_sonar {
  top: .75rem;
  right: .75rem;
  display: grid;
  justify-items: center;
  width: 7.3rem;
  color: #d8ffff;
  pointer-events: none;
}

.tiefsee_sonarring {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border: 1px solid rgba(103, 237, 226, .55);
  border-radius: 50%;
  background:
    linear-gradient(transparent 49%, rgba(99, 235, 225, .2) 50%, transparent 51%),
    linear-gradient(90deg, transparent 49%, rgba(99, 235, 225, .2) 50%, transparent 51%),
    rgba(2, 25, 35, .74);
  box-shadow: inset 0 0 18px rgba(53, 214, 204, .15), 0 0 13px rgba(44, 194, 197, .18);
}

.tiefsee_sonarring::before,
.tiefsee_sonarring::after,
.tiefsee_sonarring i {
  content: '';
  position: absolute;
  border: 1px solid rgba(103, 237, 226, .35);
  border-radius: 50%;
}

.tiefsee_sonarring::before {
  width: 3rem;
  height: 3rem;
}

.tiefsee_sonarring::after {
  width: 1.5rem;
  height: 1.5rem;
}

.tiefsee_sonarring i {
  top: 1.45rem;
  left: 1.45rem;
  width: 1.5rem;
  height: 1.5rem;
  background: rgba(99, 235, 225, .12);
  box-shadow: 0 0 12px rgba(99, 235, 225, .4);
}

.tiefsee_sonar.is_aktiv .tiefsee_sonarring {
  animation: tiefsee_sonar_ping .9s ease-out;
}

.tiefsee_sonar strong {
  margin-top: .2rem;
  font-size: .75rem;
}

.tiefsee_sonar span {
  max-width: 7.3rem;
  color: #9fc9ce;
  font-size: .62rem;
  text-align: center;
}

.tiefsee_zielmarker {
  max-width: 10rem;
  transform: translate(-50%, -100%);
  border: 1px solid #8df7e9;
  border-radius: .65rem;
  padding: .3rem .48rem;
  color: #dffffb;
  background: rgba(1, 29, 38, .87);
  box-shadow: 0 0 14px rgba(74, 231, 218, .25);
  text-align: center;
  pointer-events: none;
}

/* Ziel liegt auerhalb des Blicks: Karte klemmt am Bildrand, Pfeil zeigt hinein */
.tiefsee_zielmarker.ist_am_rand {
  border-color: #ffd166;
  box-shadow: 0 0 14px rgba(255, 209, 102, .3);
}

.tiefsee_zielpfeil {
  position: absolute;
  top: -.85rem;
  left: 50%;
  display: none;
  width: 0;
  height: 0;
  border-right: .55rem solid transparent;
  border-bottom: .8rem solid #ffd166;
  border-left: .55rem solid transparent;
  transform-origin: 50% 100%;
}

.tiefsee_zielmarker.ist_am_rand .tiefsee_zielpfeil {
  display: block;
}

.tiefsee_zielmarker::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-top: 10px solid #8df7e9;
}

.tiefsee_zielmarker span,
.tiefsee_zielmarker small {
  display: block;
  color: #94c4c8;
  font-size: .6rem;
}

.tiefsee_zielmarker strong {
  display: block;
  font-size: .72rem;
}

.tiefsee_scan {
  bottom: 6.3rem;
  left: 50%;
  width: min(320px, 60vw);
  transform: translateX(-50%);
  border: 1px solid rgba(102, 235, 227, .38);
  border-radius: .75rem;
  padding: .55rem .7rem;
  color: #e4ffff;
  background: rgba(2, 21, 31, .88);
  pointer-events: none;
}

.tiefsee_scan > div {
  height: .45rem;
  margin-top: .35rem;
  overflow: hidden;
  border-radius: 999px;
  background: #18333d;
}

.tiefsee_scan i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #33b7ba, #88f5bd);
}

.tiefsee_meldung {
  bottom: 5rem;
  left: 50%;
  max-width: min(480px, 70vw);
  transform: translate(-50%, .5rem);
  border-radius: 999px;
  padding: .45rem .8rem;
  color: #efffff;
  background: rgba(2, 28, 39, .9);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  text-align: center;
}

.tiefsee_meldung.is_sichtbar {
  transform: translate(-50%, 0);
  opacity: 1;
}

.tiefsee_aktionen {
  bottom: .8rem;
  left: 50%;
  display: flex;
  align-items: center;
  gap: .45rem;
  transform: translateX(-50%);
}

.tiefsee_hudknopf,
.tiefsee_hauptaktion,
.tiefsee_werkzeugleiste button,
.tiefsee_touch button,
.tiefsee_kompass button {
  border: 1px solid rgba(133, 230, 229, .35);
  border-radius: 999px;
  color: #dcffff;
  background: rgba(3, 27, 39, .9);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .24);
  font-weight: 800;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.tiefsee_hudknopf,
.tiefsee_werkzeugleiste button {
  min-height: 2.4rem;
  padding: .5rem .72rem;
  font-size: .72rem;
}

/* Spiel-Info als Untermenü: Kopf und Zurück-Knopf bleiben beim Lesen sichtbar. */
.tiefsee_infomenue {
  position: fixed;
  inset: 0;
  width: min(620px, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #4194a5;
  border-radius: 1rem;
  color: #d9f1f3;
  background: #08222d;
  box-shadow: 0 16px 60px rgba(0, 0, 0, .6);
}

.tiefsee_infomenue[open] {
  display: flex;
  flex-direction: column;
}

.tiefsee_infomenue::backdrop {
  background: rgba(0, 10, 18, .75);
}

.tiefsee_infokopf,
.tiefsee_infoaktionen {
  flex: 0 0 auto;
  padding: .8rem 1rem;
  background: #0b303d;
}

.tiefsee_infokopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  border-bottom: 1px solid #235668;
}

.tiefsee_infokopf h2 {
  margin: 0;
  color: #a4efef;
  font-size: 1.2rem;
}

.tiefsee_infokopf button {
  width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  border: 1px solid #5da6b7;
  border-radius: .6rem;
  color: #ecffff;
  background: #144655;
  font-size: 1.5rem;
  cursor: pointer;
}

.tiefsee_infoinhalt {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .2rem 1rem 1rem;
  line-height: 1.55;
}

.tiefsee_infomenue .tiefsee_infoinhalt .tiefsee_lernbox {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
}

.tiefsee_infoaktionen {
  border-top: 1px solid #235668;
  text-align: right;
}

.tiefsee_infoaktionen button {
  min-height: 2.6rem;
}

.tiefsee_hauptaktion {
  min-width: 8.5rem;
  min-height: 3rem;
  padding: .65rem 1.1rem;
  border-color: #8af2b5;
  color: #062b27;
  background: linear-gradient(135deg, #80e7c3, #c5ff92);
  font-size: .86rem;
}

.tiefsee_hauptaktion:disabled,
.tiefsee_hudknopf:disabled {
  opacity: .48;
  cursor: default;
}

.tiefsee_steuerung {
  right: .8rem;
  bottom: .8rem;
  display: flex;
  max-width: 15rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .28rem .55rem;
  color: #8fb5bc;
  font-size: .62rem;
  pointer-events: none;
}

.tiefsee_steuerung kbd {
  display: inline-grid;
  min-width: 1.15rem;
  min-height: 1.15rem;
  place-items: center;
  margin-right: .12rem;
  border: 1px solid rgba(145, 215, 220, .28);
  border-radius: .25rem;
  color: #d7f4f4;
  background: rgba(2, 23, 31, .78);
  font-size: .58rem;
}

.tiefsee_werkzeugleiste {
  top: 7.8rem;
  right: .75rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.tiefsee_werkzeugleiste button {
  background: rgba(3, 25, 35, .78);
  font-size: .65rem;
}

.tiefsee_touch {
  position: absolute;
  z-index: 8;
  inset: auto 1rem 1rem;
  display: none;
  align-items: flex-end;
  justify-content: space-between;
  pointer-events: none;
}

.tiefsee_joystick {
  position: relative;
  width: 8rem;
  height: 8rem;
  border: 2px solid rgba(137, 228, 230, .32);
  border-radius: 50%;
  background: rgba(2, 24, 34, .35);
  box-shadow: inset 0 0 25px rgba(52, 194, 203, .12);
  pointer-events: auto;
  touch-action: none;
}

.tiefsee_joystick::before,
.tiefsee_joystick::after {
  content: '';
  position: absolute;
  background: rgba(113, 225, 225, .2);
}

.tiefsee_joystick::before {
  top: 50%;
  left: 12%;
  width: 76%;
  height: 1px;
}

.tiefsee_joystick::after {
  top: 12%;
  left: 50%;
  width: 1px;
  height: 76%;
}

.tiefsee_joystick i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.2rem;
  height: 3.2rem;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(188, 255, 248, .62);
  border-radius: 50%;
  background: rgba(41, 143, 148, .58);
  box-shadow: 0 0 18px rgba(67, 218, 213, .32);
}

.tiefsee_hebel {
  display: grid;
  gap: .55rem;
  pointer-events: auto;
}

.tiefsee_touch button {
  min-width: 4.7rem;
  min-height: 3.1rem;
  padding: .6rem .8rem;
  touch-action: none;
}

.tiefsee_touch button.is_gedrueckt {
  color: #062a29;
  background: #8fe9cf;
}

.tiefsee_startoverlay {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  /* minmax(0,1fr) gibt der Zeile eine BESTIMMTE Hoehe (= Overlay-Hoehe),
     damit das max-height:96% der Karte greifen kann. Ohne sie richtet sich
     die Zeile nach dem Inhalt, und Prozent gegen eine unbestimmte Hoehe ist
     "auto". Im eigenstaendigen Paket (ohne konsole.css, das max-height:none
     setzt und stattdessen das Overlay scrollen laesst) haelt das die Karte
     im kurzen Querformat im Bild. Die Ladeanzeige selbst wird dort in der
     Querformat-Regel von konsole.css festgenagelt. */
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  padding: 1rem;
  background: radial-gradient(circle at 50% 35%, rgba(8, 58, 72, .75), rgba(0, 5, 9, .95));
  backdrop-filter: blur(5px);
}

.tiefsee_startkarte,
.tiefsee_arbeitspanel,
.tiefsee_infokarte,
.tiefsee_tagebuch {
  border: 1px solid rgba(113, 218, 220, .35);
  border-radius: 1rem;
  color: #d9f5f4;
  background: linear-gradient(145deg, rgba(8, 43, 56, .97), rgba(5, 22, 32, .98));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .48);
}

.tiefsee_startkarte {
  width: min(610px, 96%);
  max-height: 96%;
  overflow: auto;
  padding: clamp(1.1rem, 3vw, 2rem);
}

.tiefsee_startkarte h2,
.tiefsee_arbeitspanel h2,
.tiefsee_infokarte h2,
.tiefsee_tagebuch h2 {
  margin: .45rem 0 .65rem;
  color: #a8f5ef;
}

.tiefsee_startkarte p,
.tiefsee_startkarte li {
  color: #c4dcdf;
  line-height: 1.48;
}

.tiefsee_startkarte ul {
  padding-left: 1.2rem;
}

.tiefsee_startkarte li + li {
  margin-top: .3rem;
}

/* ---------- Ladeanzeige (Muster EcoSphere / Stadt im Wandel) ----------
   Der Balken steht schon im ersten Bild da - vor jedem Spielmodul. Wie weit
   er steht, bestimmen nur zwei Stellen: das Inline-Skript in index.html
   (Dateien, 4 - 38 %) und game.js (Tiermodelle, 38 - 100 %). Beide rufen
   window.TiefseeLaden.setzen(anteil, phase) auf; der Balken laeuft nie
   rueckwaerts. Der Verlauf ist die Abnahme (tiefsee.laden() unter ?debug). */
.tiefsee_ladeblock {
  margin: .8rem 0;
}

.tiefsee_ladekopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
}

.tiefsee_ladephase {
  color: #9fc5cb;
  font-size: .78rem;
  line-height: 1.35;
}

.tiefsee_ladephase.is_langsam {
  color: #f0d79a;
}

.tiefsee_ladeprozent {
  flex: none;
  color: #a8f5ef;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

/* Der Balken ist ein eigenes Element statt <progress>: so laesst er sich
   fluessig schieben und sieht in jedem Browser gleich aus.
   Wichtig: aufgedeckt wird mit clip-path, nicht mit transform:scaleX(). Ein
   scaleX stauchen den Farbverlauf mit - bei 27 % waere der ganze Verlauf
   schon auf einem kurzen Stueck zu sehen und der Balken wirkte "fast fertig".
   (Lehre aus dem Ladebalken von Neumark 1400, 31.10.2026.) */
.tiefsee_ladeschiene {
  width: 100%;
  height: 9px;
  margin: .45rem 0 0;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, .38);
  box-shadow: inset 0 0 0 1px rgba(113, 218, 220, .28);
}

.tiefsee_ladebalken {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  clip-path: inset(0 100% 0 0);
  background: linear-gradient(90deg, #46b8cf, #8fe9cf);
  box-shadow: 0 0 12px rgba(113, 218, 220, .45);
  /* KEINE Transition: die Modelle melden ihren Fortschritt in schneller
     Folge. Mit transition: clip-path .25s lief der Balken den Zahlen
     dauerhaft nach (gemessen 48 % angezeigt, Balken erst bei 30 % - genau
     der Eindruck "haengt", den die Anzeige verhindern soll). Ohne Transition
     springt der Balken in kleinen Stufen mit und bleibt synchron. */
}

.tiefsee_ladeblock.is_fertig .tiefsee_ladeprozent,
.tiefsee_ladeblock.is_fertig .tiefsee_ladephase {
  color: #bdf7b9;
}

.tiefsee_ladeblock.is_fertig .tiefsee_ladebalken {
  background: linear-gradient(90deg, #58c98a, #bdf7b9);
}

/* Der genaue Modellzaehler. Er bleibt leer, bis game.js den ersten Stand
   meldet - ein leerer Kasten waere nur eine zusaetzliche Zeile. */
.tiefsee_ladetext {
  margin: .45rem 0 0;
  border-radius: .55rem;
  padding: .5rem .65rem;
  color: #9fc5cb;
  background: rgba(0, 0, 0, .2);
  font-size: .78rem;
}

.tiefsee_ladetext:empty {
  display: none;
}

.tiefsee_ladetext.is_fertig {
  color: #bdf7b9;
}

@media (prefers-reduced-motion: reduce) {
  .tiefsee_ladebalken {
    transition: none;
  }
}

.tiefsee_startaktionen,
.tiefsee_berichtaktionen {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

/* ---------- Bedienziele mindestens 40 x 40 px ----------
   GUI_DESIGN_CHECKLISTE.md 3.13.6. Gemessen war vorher:
     - der Zurueck-Link der Leiste  37 px hoch (39 px am Handy)
     - der Dark-Mode-Schalter        30 px hoch
     - "Tauchgang starten"           36 px hoch, am Handy nur 36 px
     - Ton / Hilfe / Ueber das Spiel am Handy gar 23 px hoch
   Unter 36 px ist laut Liste verboten, ab 40 px ist die Zielgroesse
   erreicht. Deshalb hier zentral fuer Leiste und Startmenue. */
.tiefsee_leiste .tiefsee_leiste_zurueck,
.tiefsee_leiste_zurueck,
.tiefsee_leiste #jupi_theme_toggle,
.tiefsee_startaktionen .jupi_btn,
.tiefsee_startaktionen .jupi_btn_alt,
.tiefsee_berichtaktionen .jupi_btn,
.tiefsee_berichtaktionen .jupi_btn_alt {
  min-height: 2.5rem;
  min-width: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tiefsee_startaktionen .jupi_btn { min-height: 3rem; }
.tiefsee_leiste_zurueck:focus-visible,
#jupi_theme_toggle:focus-visible,
.tiefsee_startaktionen button:focus-visible {
  outline: 2px solid #8af2b5;
  outline-offset: 2px;
}

.tiefsee_infokarte {
  position: absolute;
  z-index: 22;
  top: 4.8rem;
  right: .8rem;
  bottom: .8rem;
  width: min(350px, 34vw);
  overflow: auto;
  padding: .9rem;
}

.tiefsee_infokarte_zu,
.tiefsee_tagebuchkopf button {
  position: absolute;
  top: .55rem;
  right: .55rem;
  z-index: 3; /* liegt ueber dem Karten-Bild, sonst frisst das img den Klick */
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid rgba(150, 230, 230, .3);
  border-radius: 50%;
  color: #e7ffff;
  background: rgba(0, 12, 18, .7);
  font-size: 1.25rem;
  cursor: pointer;
}

.tiefsee_infokarte_bild {
  position: relative;
  height: 10.5rem;
  margin: -.9rem -.9rem .8rem;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, #174b5a, #04141c 72%);
}

.tiefsee_infokarte_bild::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 3rem;
  background: linear-gradient(transparent, #08222d);
}

.tiefsee_infokarte_bild img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .5));
}

.tiefsee_infokarte_bild span {
  position: absolute;
  z-index: 2;
  right: .65rem;
  bottom: .5rem;
  border-radius: 999px;
  padding: .25rem .55rem;
  color: #efffff;
  background: rgba(0, 18, 25, .84);
  font-size: .72rem;
  font-weight: 800;
}

.tiefsee_wissenschaftlich {
  margin: -.3rem 0 .6rem;
  color: #9fc4ca;
  font-size: .82rem;
  font-style: italic;
}

.tiefsee_infokarte_fund {
  color: #c8f6e4;
  font-weight: 700;
}

.tiefsee_fakten {
  margin-top: .65rem;
}

.tiefsee_fakt {
  padding: .5rem 0;
  border-top: 1px solid rgba(128, 216, 218, .13);
}

.tiefsee_fakt b,
.tiefsee_fakt span {
  display: block;
}

.tiefsee_fakt b {
  margin-bottom: .15rem;
  color: #89e6e0;
  font-size: .75rem;
}

.tiefsee_fakt span,
.tiefsee_quellen,
.tiefsee_quellenhinweis {
  color: #bad2d6;
  font-size: .76rem;
  line-height: 1.42;
}

.tiefsee_quellen {
  display: grid;
  gap: .35rem;
  margin: .65rem 0;
}

.tiefsee_quellen a {
  overflow: hidden;
  border: 1px solid rgba(115, 220, 218, .18);
  border-radius: .5rem;
  padding: .4rem .5rem;
  color: #99e5df;
  background: rgba(0, 20, 28, .35);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tiefsee_infokarte > .jupi_btn {
  width: 100%;
}

.tiefsee_arbeitspanel {
  position: absolute;
  z-index: 24;
  top: 50%;
  left: 50%;
  width: min(520px, calc(100% - 2rem));
  max-height: 86%;
  overflow: auto;
  transform: translate(-50%, -50%);
  padding: 1.2rem;
}

.tiefsee_arbeitspanel h2 {
  padding-right: 2rem;
}

.tiefsee_arbeitspanel > p {
  color: #c4dcdf;
  line-height: 1.48;
}

.tiefsee_arbeitsschritte {
  display: grid;
  gap: .45rem;
  margin: .8rem 0;
}

.tiefsee_arbeitsschritte div {
  display: flex;
  align-items: center;
  gap: .6rem;
  border-radius: .55rem;
  padding: .55rem .65rem;
  color: #9ebfc5;
  background: rgba(0, 15, 22, .32);
  font-size: .78rem;
}

.tiefsee_arbeitsschritte div::before {
  content: '';
  width: .75rem;
  height: .75rem;
  flex: 0 0 auto;
  border: 2px solid #5d7b81;
  border-radius: 50%;
}

.tiefsee_arbeitsschritte div.ist_aktiv {
  color: #efffff;
  background: rgba(41, 135, 141, .24);
}

.tiefsee_arbeitsschritte div.ist_aktiv::before {
  border-color: #8ff4be;
  box-shadow: 0 0 9px rgba(143, 244, 190, .5);
}

.tiefsee_arbeitsschritte div.ist_fertig {
  color: #b9efc5;
}

.tiefsee_arbeitsschritte div.ist_fertig::before {
  border-color: #6ee89a;
  background: #6ee89a;
}

.tiefsee_arbeitsaktionen {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.tiefsee_arbeitsaktionsbutton,
.tiefsee_falschwahl {
  border: 1px solid rgba(129, 222, 222, .35);
  border-radius: .65rem;
  padding: .6rem .75rem;
  color: #eaffff;
  background: #124b59;
  font-weight: 800;
  cursor: pointer;
}

.tiefsee_falschwahl {
  border-color: #c56c64;
  background: #633633;
}

.tiefsee_pruefbalken {
  height: .6rem;
  margin-top: .7rem;
  overflow: hidden;
  border-radius: 999px;
  background: #17313a;
}

.tiefsee_pruefbalken i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #52d6c6, #d5f47f);
}

.tiefsee_feedback {
  min-height: 1.4rem;
  margin: .65rem 0 0;
  color: #ffd0a0;
  font-weight: 700;
}

.tiefsee_feedback.ist_richtig {
  color: #a9f0ad;
}

.tiefsee_tagebuch {
  position: absolute;
  z-index: 26;
  inset: 5rem 50% auto auto;
  width: min(560px, calc(100% - 2rem));
  max-height: calc(100% - 6rem);
  overflow: auto;
  transform: translateX(50%);
  padding: 1rem;
}

.tiefsee_tagebuchkopf {
  position: relative;
  padding-right: 2.2rem;
}

.tiefsee_tagebuchkopf h2 {
  margin-bottom: .2rem;
}

.tiefsee_tagebuchkopf button {
  position: static;
  float: right;
}

.tiefsee_tagebuchliste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin-top: .7rem;
}

.tiefsee_tagebucheintrag {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 3.7rem;
  border: 1px solid rgba(122, 215, 215, .18);
  border-radius: .65rem;
  padding: .45rem;
  color: #b8d2d6;
  background: rgba(0, 18, 25, .32);
  text-align: left;
}

.tiefsee_tagebucheintrag img {
  width: 3.1rem;
  height: 3.1rem;
  flex: 0 0 auto;
  object-fit: contain;
}

.tiefsee_tagebucheintrag strong,
.tiefsee_tagebucheintrag span {
  display: block;
}

.tiefsee_tagebucheintrag strong {
  color: #eaffff;
  font-size: .78rem;
}

.tiefsee_tagebucheintrag span {
  font-size: .65rem;
}

.tiefsee_tagebucheintrag:disabled {
  opacity: .48;
}

.tiefsee_hilfe,
.tiefsee_lernbox,
.tiefsee_bericht {
  margin: .75rem 0 0;
  border-radius: .9rem;
}

.tiefsee_hilfe {
  padding: .7rem .9rem;
  border: 1px solid #afd2b7;
  color: #244b34;
  background: #eff9f0;
}

.tiefsee_hilfe summary {
  cursor: pointer;
  font-weight: 800;
}

.tiefsee_hilfe ol {
  margin: .7rem 0 .1rem;
  padding-left: 1.35rem;
}

.tiefsee_hilfe li + li {
  margin-top: .35rem;
}

.tiefsee_lernbox {
  padding: .8rem .95rem;
  border-left: 5px solid #1a93a2;
  color: #174b62;
  background: #e7f7f8;
  line-height: 1.5;
}

/* Der Expeditionsbericht ist KEIN Infotext unter dem Spiel (Goldene
   Negativ-Regel), sondern das Abschluss-Overlay des Einsatzes - deshalb
   liegt er jetzt in der Bühne, mittig wie Startkarte und Tagebuch. */
.tiefsee_bericht {
  position: absolute;
  z-index: 28;
  inset: 50% auto auto 50%;
  width: min(560px, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  overflow: auto;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(113, 218, 220, .35);
  color: #d9f5f4;
  background: linear-gradient(145deg, rgba(8, 43, 56, .97), rgba(5, 22, 32, .98));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .48);
  padding: 1rem clamp(.9rem, 3vw, 1.6rem);
}

.tiefsee_bericht h2 {
  color: #a8f5ef;
}

.tiefsee_berichtsgitter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin: .8rem 0;
}

.tiefsee_berichtsgitter div {
  border-radius: .65rem;
  padding: .7rem;
  color: #cfe6ea;
  background: rgba(0, 18, 25, .34);
  text-align: center;
}

.tiefsee_berichtsgitter strong,
.tiefsee_berichtsgitter span {
  display: block;
}

.tiefsee_berichtsgitter strong {
  font-size: 1.2rem;
}

.tiefsee_berichtsgitter span {
  font-size: .72rem;
}

.tiefsee_berichtaktionen {
  margin-top: .8rem;
}

.tiefsee_buehne button:focus-visible,
.tiefsee_hilfe summary:focus-visible,
.tiefsee_bericht button:focus-visible,
.tiefsee_lernbox:focus-visible {
  outline: 3px solid #f6c956;
  outline-offset: 2px;
}

.tiefsee_buehne:fullscreen {
  width: 100vw;
  height: 100vh;
  border: 0;
  border-radius: 0;
  background: #01070b;
}

/* Der Bericht ist jetzt ein Bühne-Overlay und damit wie Startkarte, Tagebuch
   und Infokarte in BEIDEN Modi dunkel - deshalb keine eigene Dark-Mode-Fassung
   mehr (vorher war er eine helle Karte unter dem Spiel). */
html[data-theme="dark"] .tiefsee_hilfe {
  color: #d0e8d1;
  background: #193b2d;
  border-color: #3d6b4a;
}

html[data-theme="dark"] .tiefsee_lernbox {
  color: #cceef0;
  background: #123a4c;
}

@keyframes tiefsee_sonar_ping {
  0% { box-shadow: 0 0 0 0 rgba(103, 237, 226, .7), inset 0 0 18px rgba(53, 214, 204, .15); }
  100% { box-shadow: 0 0 0 24px rgba(103, 237, 226, 0), inset 0 0 18px rgba(53, 214, 204, .15); }
}

@media (max-width: 900px) {
  .tiefsee_buehne {
    height: min(76vh, 680px);
    min-height: 540px;
  }

  .tiefsee_auftrag {
    top: 6.6rem;
    width: min(430px, calc(100% - 2rem));
  }

  .tiefsee_messwerte {
    width: 230px;
  }

  .tiefsee_kompass,
  .tiefsee_steuerung {
    display: none;
  }

  .tiefsee_werkzeugleiste {
    top: .75rem;
    right: 8.5rem;
    display: grid;
    grid-template-columns: repeat(2, auto);
  }

  .tiefsee_tiefenwaage {
    top: 10.8rem;
  }

  .tiefsee_infokarte {
    width: min(340px, 44vw);
  }
}

@media (pointer: coarse) {
  .tiefsee_touch {
    display: flex;
  }

  .tiefsee_steuerung {
    display: none;
  }

  .tiefsee_aktionen {
    bottom: 1.2rem;
  }

  .tiefsee_meldung,
  .tiefsee_scan {
    bottom: 10.2rem;
  }
}

/* Auf schmalen Touch-Geräten braucht die Fahrsteuerung ihre eigene Zeile. */
@media (max-width: 650px) and (pointer: coarse) {
  .tiefsee_buehne .tiefsee_aktionen {
    bottom: 8.4rem;
  }

  .tiefsee_buehne .tiefsee_meldung,
  .tiefsee_buehne .tiefsee_scan {
    bottom: 12.2rem;
  }
}

@media (max-width: 650px) {
  .tiefsee-main {
    padding: .7rem .5rem 1.3rem;
  }

  .tiefsee_buehne {
    height: 76vh;
    min-height: 540px;
    border-width: 2px;
  }

  .tiefsee_messwerte {
    top: .55rem;
    left: .55rem;
    width: 190px;
    gap: .22rem;
  }

  .tiefsee_messwerte div {
    padding: .26rem .36rem;
    font-size: .58rem;
  }

  .tiefsee_messwerte strong {
    font-size: .65rem;
  }

  .tiefsee_auftrag {
    top: 7.2rem;
  }

  .tiefsee_auftrag strong {
    font-size: .76rem;
  }

  .tiefsee_sonar {
    display: none;
  }

  .tiefsee_werkzeugleiste {
    top: .55rem;
    right: .55rem;
    gap: .2rem;
  }

  .tiefsee_werkzeugleiste button {
    min-height: 2rem;
    padding: .32rem .48rem;
    font-size: .58rem;
  }

  .tiefsee_tiefenwaage {
    top: 10.1rem;
    bottom: 10.4rem;
    left: .45rem;
    width: 2.7rem;
  }

  .tiefsee_aktionen {
    width: calc(100% - 1rem);
    justify-content: center;
  }

  .tiefsee_hudknopf,
  .tiefsee_hauptaktion {
    min-height: 2.7rem;
    padding: .52rem .72rem;
    font-size: .7rem;
  }

  .tiefsee_touch {
    right: .7rem;
    bottom: .7rem;
    left: .7rem;
  }

  .tiefsee_joystick {
    width: 7rem;
    height: 7rem;
  }

  .tiefsee_joystick i {
    width: 2.8rem;
    height: 2.8rem;
  }

  .tiefsee_touch button {
    min-width: 4rem;
    min-height: 2.8rem;
  }

  .tiefsee_infokarte,
  .tiefsee_tagebuch {
    top: auto;
    right: .55rem;
    bottom: .55rem;
    left: .55rem;
    width: auto;
    max-height: 62%;
    transform: none;
  }

  .tiefsee_infokarte_bild {
    height: 8.5rem;
  }

  .tiefsee_tagebuchliste {
    grid-template-columns: 1fr;
  }

  .tiefsee_arbeitspanel {
    max-height: 76%;
    padding: 1rem;
  }

  .tiefsee_berichtsgitter {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .tiefsee_buehne {
    height: calc(100vh - 9.5rem);
    min-height: 340px;
  }

  .tiefsee_messwerte {
    grid-template-columns: repeat(4, 1fr);
    width: min(390px, 46vw);
  }

  .tiefsee_messwerte div {
    display: block;
  }

  .tiefsee_messwerte span,
  .tiefsee_messwerte strong {
    display: block;
  }

  .tiefsee_auftrag {
    /* Eigene Zeile unter den Messwerten und Werkzeugen im Querformat. */
    top: 4.5rem;
    width: min(440px, calc(100% - 2rem));
  }

  .tiefsee_tiefenwaage {
    top: 4.2rem;
    bottom: 1rem;
  }

  .tiefsee_sonar {
    transform: scale(.75);
    transform-origin: top right;
  }

  .tiefsee_werkzeugleiste {
    top: .55rem;
    right: 6.4rem;
    display: flex;
    flex-direction: row;
  }

  .tiefsee_werkzeugleiste button {
    min-height: 2rem;
    padding: .32rem .48rem;
    font-size: .58rem;
  }

  .tiefsee_touch {
    bottom: .5rem;
  }

  .tiefsee_joystick {
    width: 6.5rem;
    height: 6.5rem;
  }

  .tiefsee_touch button {
    min-height: 2.6rem;
  }

  .tiefsee_infokarte,
  .tiefsee_tagebuch {
    top: .6rem;
    right: .6rem;
    bottom: .6rem;
    left: auto;
    width: min(360px, 46vw);
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tiefsee_sonar.is_aktiv .tiefsee_sonarring {
    animation: none;
  }

  .tiefsee_meldung,
  .tiefsee_scan i,
  .tiefsee_pruefbalken i {
    transition: none;
  }
}

/* Fernsteuerbild des unbemannten ROV; HUD und Touch bleiben darüber bedienbar. */
.tiefsee_drohnenbild {position:absolute;inset:12px;border:1px solid #8ae5df80;pointer-events:none;color:#b6fff1;font:11px monospace;z-index:2;box-shadow:inset 0 0 45px #061d2480;}
.tiefsee_drohnenbild[hidden] {display:none;}
.tiefsee_kamerawerkzeuge {position:absolute;left:16px;top:52%;z-index:5;
  display:grid;gap:.35rem;max-width:140px;padding:.5rem;border-radius:.7rem;
  background:#082936df;color:#c7fff7;font:11px monospace;}
.tiefsee_kamerawerkzeuge[hidden] {display:none;}
.tiefsee_kamerawerkzeuge .tiefsee_hudknopf {min-height:34px;}
@media(max-width:650px) {
  .tiefsee_kamerawerkzeuge {left:12px;top:41%;max-width:120px;padding:.35rem;}
}
@media(max-height:500px) and (min-width:651px) {
  .tiefsee_kamerawerkzeuge {top:22%;max-width:130px;}
}
.tiefsee_drohnenbild span {position:absolute;top:32%;left:12px;letter-spacing:.1em;}
.tiefsee_drohnenbild small {position:absolute;bottom:25%;right:12px;font:10px monospace;}
.tiefsee_drohnenbild i {position:absolute;left:50%;top:50%;width:28px;height:28px;border:1px solid #b6fff199;border-radius:50%;transform:translate(-50%,-50%);}
.tiefsee_drohnenbild i::before,.tiefsee_drohnenbild i::after {content:'';position:absolute;background:#b6fff199;}
.tiefsee_drohnenbild i::before {width:40px;height:1px;left:-7px;top:13px;}
.tiefsee_drohnenbild i::after {height:40px;width:1px;left:13px;top:-7px;}
@media(max-width:650px) {
  .tiefsee_meldung {bottom:7.8rem;width:max-content;max-width:calc(100% - 2rem);font-size:.82rem;}
  .tiefsee_scan {bottom:7.8rem;}
  .tiefsee_aktionen {display:grid;grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);}
  .tiefsee_aktionen .tiefsee_hauptaktion {grid-column:1/-1;min-width:0;}
  .tiefsee_aktionen .tiefsee_hudknopf {min-width:0;padding-inline:.35rem;}
}
@media(max-width:650px) and (pointer:coarse) {
  .tiefsee_buehne .tiefsee_meldung,.tiefsee_buehne .tiefsee_scan {bottom:15.4rem;}
}

/* ---------- Schlanke Leiste: der Chip verschwindet am schmalen Handy ----------
   Der Chip ist eine Nebenangabe und steht ausserdem im Startmenue
   (#tiefsee_startfortschritt) - dort ist er immer sichtbar. Auf dem Handy
   kostete er eine zweite Zeile (Leiste 102 px statt 54 px).
   Diese Regel steht ganz hinten und mit ZWEI Klassen: die spaetere
   Definition von ".tiefsee_chip { display:inline-block }" (Zeile 93) hat
   vorher die Regel aus dem Media-Block bei Zeile 69 wieder ausgehebelt. */
@media (max-width: 29.99rem) {
  .tiefsee_leiste .tiefsee_leiste_chip { display: none; }
  .tiefsee_leiste .tiefsee_leiste_titel { margin-left: 0; }
  /* Mit 40-px-Bedienzielen passt auf 390 px nur eine Zeile, wenn das
     Titel-Logo weggelassen wird. Der Name bleibt - das Logo steht
     gross im Startmenü und als PWA-Icon. */
  .tiefsee_leiste .tiefsee_leiste_titel img { display: none; }
  .tiefsee_leiste .tiefsee_leiste_titel h1 { font-size: .95rem; }
}