:root {
  --navy: #17325c;
  --accent: #2176c1;
  --bg: #f4f6f9;
  --card: #ffffff;
  --line: #e3e8ef;
  --text: #23303f;
  --muted: #7b8794;
  --danger: #b3261e;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: "Segoe UI", Tahoma, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }

.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  background: var(--navy); color: #fff; padding: 12px 16px;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .15);
}
.app-title { margin: 0; font-size: 1rem; font-weight: 700; }
.app-ver { flex: 1; font-size: .68rem; opacity: .6; font-weight: 600; white-space: nowrap; letter-spacing: .02em; }
.back-btn { border: 0; background: rgba(255, 255, 255, .15); color: #fff; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: .95rem; }
.back-btn:hover { background: rgba(255, 255, 255, .28); }
/* Kopfzeile des Profil-Pulldowns: die angemeldete Adresse, ungekuerzt.
   word-break, weil E-Mail-Adressen keine Trennstellen anbieten - ohne das
   sprengt eine lange Adresse das Menue nach rechts aus dem Bild. */
/* Kopf des Profil-Pulldowns: angemeldete Adresse, darunter die Stufe.
   Untereinander statt nebeneinander, weil eine E-Mail-Adresse fast immer
   breiter ist als das Menue - nebeneinander wuerde die Pille abgedraengt. */
.profil-kopf { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
/* ⚠ display schlaegt hidden: ohne diese Zeile bliebe der Kopf mitsamt
   Trennlinie stehen, auch wenn nichts darin steht (nicht angemeldet). */
.profil-kopf[hidden] { display: none; }
.profil-user { font-size: .82rem; font-weight: 700; color: var(--text); line-height: 1.35; word-break: break-all; max-width: min(70vw, 260px); }
.profil-user[hidden] { display: none; }
.topbar-logout { flex: 0 0 auto; font-size: .78rem; font-weight: 700; color: #fff; text-decoration: none; background: rgba(255,255,255,.15); padding: 5px 11px; border-radius: 8px; white-space: nowrap; }
.topbar-logout:hover { background: rgba(255,255,255,.3); }
.topbar-profil { flex: 0 0 auto; font-size: .78rem; font-weight: 700; color: #fff; border: 0; cursor: pointer; background: rgba(255,255,255,.15); padding: 5px 11px; border-radius: 8px; white-space: nowrap; }
.topbar-profil:hover { background: rgba(255,255,255,.3); }
/* Profil-Pulldown (enthält Statistik + Logout) */
.profil-wrap { position: relative; flex: 0 0 auto; }
.profil-menu { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(16, 24, 40, .22); padding: 6px; z-index: 30; min-width: 160px; }
.profil-menu[hidden] { display: none; }
.profil-item { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; border: 0; background: transparent; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: .9rem; color: var(--text); text-decoration: none; }
.profil-item:hover { background: #eef4fb; }
.profil-item.profil-logout { color: #c0392b; font-weight: 700; }
.topbar-profile { flex: 0 0 auto; font-size: .78rem; font-weight: 700; color: #fff; background: rgba(255,255,255,.15); border: 0; padding: 5px 11px; border-radius: 8px; cursor: pointer; white-space: nowrap; max-width: 32vw; overflow: hidden; text-overflow: ellipsis; }
.topbar-profile:hover { background: rgba(255,255,255,.3); }
.toern-card.skip-active { border-left: 3px solid #2176c1; }
/* Handbuch-Knopf (Fragezeichen) in der Topbar – rund, damit er sich von den
   eckigen Textknoepfen daneben abhebt und auch am Handy noch triffbar bleibt. */
.topbar-help { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-weight: 800; font-size: .9rem; line-height: 1; text-decoration: none; }
.topbar-help:hover { background: rgba(255,255,255,.32); }
.tier-pill { flex: 0 0 auto; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; background: #6b7683; color: #fff; white-space: nowrap; }
.tier-pill.tier-standard { background: #2176c1; }
.tier-pill.tier-pro { background: #b8860b; }
.tier-pill.tier-free { background: #6b7683; }

/* Sprach-Umschalter */
.lang-switch { position: relative; flex: 0 0 auto; }
.lang-btn { display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .28); color: #fff; padding: 4px 8px; border-radius: 8px; cursor: pointer; font-size: .8rem; }
.lang-btn:hover { background: rgba(255, 255, 255, .28); }
.lang-btn .flag { border-radius: 2px; display: block; }
.lang-code { font-weight: 700; }
.lang-caret { opacity: .8; font-size: .75rem; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(16, 24, 40, .22); padding: 6px; z-index: 30; min-width: 150px; }
.lang-menu[hidden] { display: none; }
.lang-menu button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: .9rem; color: var(--text); }
.lang-menu button:hover { background: #eef4fb; }
.lang-menu .flag { border-radius: 2px; }

main { max-width: 820px; margin: 0 auto; padding: 18px 16px 40px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px; box-shadow: 0 8px 24px rgba(16, 24, 40, .06); }
.msg { text-align: center; }
.login-card { max-width: 380px; margin: 24px auto; }
.login-card h2 { margin: 0 0 4px; color: var(--navy); }
.msg h2 { margin: 0 0 8px; }
/* ---- Beta-Fenster (app-cfg 'Status' => 'beta') ----
   ⚠️ ROT NUR HIER. Das Anmeldefenster ist keine Störung und „keine Lizenz"
      eine Auskunft - beides braucht kein Ausrufezeichen. Die Beta schon:
      Sie sagt, dass die App noch nicht offen ist. */
.beta-karte { max-width: 460px; margin: 24px auto; text-align: left; }
.beta-karte h2 { color: var(--navy); }
.beta-warn {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 14px;
  border-left: 4px solid var(--danger);
  border-radius: 0 8px 8px 0;
  background: rgba(179, 38, 30, .08);
}
.beta-warn svg { color: var(--danger); flex: none; margin-top: 1px; }
.beta-warn p { margin: 0; line-height: 1.45; }
/* ---- "Noch kein Konto?" im Anmeldefenster ----
   Bewusst NICHT in der Akzentfarbe: Der Hauptweg hier ist das Anmelden; zwei
   gleich starke Knöpfe untereinander hießen „such dir was aus". */
.login-frei { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.login-frei .muted { display: block; margin-bottom: 8px; }
/* ⚠️ ZWEI KLASSEN IM WÄHLER (.login-frei .login-frei-btn), nicht eine. Der Block
   steht hier oben bei den Karten, `.btn` erst ab Zeile ~309 – bei gleicher
   Gewichtung gewinnt die SPÄTERE Regel, der Knopf wäre also grau geblieben.
   ⚠️ text-decoration: none, weil das hier ein <a> ist: ohne die Angabe
   unterstreicht der Browser die Beschriftung. */
.login-frei .login-frei-btn {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  border: 1px solid var(--accent); color: var(--accent); background: #fff;
  font-weight: 600; text-decoration: none;
}
.login-frei .login-frei-btn:hover { background: #eef4fa; }
.muted { color: var(--muted); }
.err { color: var(--danger); font-weight: 600; }

/* Startmenue */
.menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.menu-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 26px 16px; cursor: pointer; text-align: center;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .06); transition: transform .12s, box-shadow .12s;
}
.menu-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(16, 24, 40, .12); }
.menu-ico { font-size: 2.2rem; }
.menu-lbl { font-weight: 700; font-size: 1.05rem; color: var(--navy); }
.menu-sub { font-size: .85rem; color: var(--muted); }

/* Startseite: maritim-blaue Button-Leiste + Hero im A4-Hochformat */
.main-menu {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: stretch; justify-content: center;
  position: sticky; top: 0; z-index: 4;                    /* globales 2. Menü, immer sichtbar (top per JS unter der Topbar) */
  background: linear-gradient(180deg, #5a90c6, #3f70a8);   /* hellblaue Bar (wie gehabt) */
  padding: 7px 14px;
  box-shadow: 0 3px 10px rgba(16, 24, 40, .12);
}
.main-menu[hidden] { display: none; }
/* Partner-Logo links in der Menüleiste – absolut, damit die zentrierten Buttons bleiben. */
.menu-partner { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); height: 30px; width: auto; max-width: 150px; object-fit: contain; }
.menu-partner.on-light { background: #fff; border-radius: 6px; padding: 2px 6px; } /* dunkles Logo → heller Hintergrund */
@media (max-width: 700px) { .menu-partner { position: static; transform: none; } } /* auf schmalen Screens im Fluss */
.menu-partner[hidden] { display: none; }
.start-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  background: #eef1f5; border: 1px solid #cfd8e3;          /* helles Grau nur für die Buttons */
  border-radius: 7px; padding: 5px 11px; font-size: .78rem; font-weight: 600;
  color: var(--navy); cursor: pointer; transition: background .12s;
}
.start-btn:hover { background: #ffffff; }
.start-ico { font-size: .95rem; }
.start-ico.home-ico { display: inline-flex; align-items: center; color: var(--navy); }
.start-ico.home-ico svg { display: block; }
.start-hero {
  position: relative; height: 760px;                      /* volle Breite (1180er Container) */
  margin: -18px -16px 0;                                   /* oben/seitlich bis an die Seite: schließt an die Menü-Bar an, kein Zwischenraum */
  width: auto;
  border-radius: 0 0 12px 12px; overflow: hidden;          /* nur unten gerundet */
  background-color: #14405f;
  background-image: url("images/start.svg"), linear-gradient(180deg, #7db8d8, #14405f);
  background-size: cover; background-position: center;
  box-shadow: 0 20px 50px rgba(16, 24, 40, .5), 0 6px 16px rgba(16, 24, 40, .3);
}
.start-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; display: block; }
.start-title { position: absolute; z-index: 1; top: 18px; left: 20px; color: #fff; font-size: 1.7rem; font-weight: 800; letter-spacing: .01em; text-shadow: 0 2px 10px rgba(0, 0, 0, .55); }
.start-claim { position: absolute; z-index: 1; top: 54px; left: 20px; color: rgba(255, 255, 255, .92); font-size: .95rem; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
@media (max-width: 560px) {
  .start-btn { flex: 1 1 auto; justify-content: center; }
  .start-hero { max-width: 100%; }
  /* Topbar am Handy etwas enger schnueren, damit der Handbuch-Knopf zusaetzlich
     Platz findet, ohne dass die E-Mail-Adresse daneben zusammenbricht. */
  .topbar { gap: 8px; }
  .topbar-help { width: 24px; height: 24px; font-size: .82rem; }
}

/* Handy HOCHKANT: Titel auf eine eigene Zeile.
   ---------------------------------------------------------------------
   Quer ist die Leiste breit genug; hochkant draengen sich Titel, Version,
   Profil, Rolle, Hilfe und Sprache in eine Zeile und schnueren einander ein
   (die E-Mail im Profilknopf wird dann auf wenige Zeichen gekuerzt).
   flex-wrap allein genuegt nicht - der Titel muss die erste Zeile GANZ
   fuellen, sonst zieht die Version noch mit hoch. Genau das macht
   flex: 1 1 100%. */
@media (max-width: 560px) and (orientation: portrait) {
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .app-title { flex: 1 1 100%; }
}

/* Seekarte (Route) als Modal */
.route-modal { position: fixed; inset: 0; z-index: 50; background: rgba(16, 24, 40, .55); display: flex; align-items: center; justify-content: center; padding: 18px; }
.route-modal-box { background: #fff; border-radius: 12px; width: min(1100px, 96vw); height: min(84vh, 900px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .4); }
/* Aufbau: [Titel] [‹ N/M ›] ………… [Knöpfe rechtsbündig]
   flex-wrap, damit auf schmalen Fenstern die Knopfgruppe in eine zweite Zeile rutscht,
   statt den Titel auf Breite 0 zu drücken (dann war er komplett unsichtbar). */
.route-modal-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px; background: var(--navy); color: #fff; font-weight: 700; }
.route-modal-head .rmh-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Knöpfe als EIN rechtsbündiger Block. Früher trug jeder Knopf margin-left:auto –
   dadurch verteilten sie sich über die ganze Kopfzeile statt beieinanderzustehen. */
.route-modal-head .rmh-actions { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.route-modal-head .route-edit-btn.active { background: #d62828; border-color: #b31f1f; color: #fff; }
/* Seiten-Navigation (‹ N/M ›) – steht LINKS gleich hinter dem Titel */
.rmh-pages { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; background: rgba(255, 255, 255, .16); border-radius: 7px; padding: 2px; }
.rmh-pages[hidden] { display: none; }
.rmh-page-btn { border: 0; background: transparent; color: #fff; width: 26px; height: 26px; border-radius: 5px; cursor: pointer; font-size: 1.15rem; line-height: 1; }
.rmh-page-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .28); }
.rmh-page-btn:disabled { opacity: .35; cursor: default; }
.rmh-page-lbl { font-size: .8rem; font-weight: 700; padding: 0 4px; min-width: 34px; text-align: center; }
.route-modal-x { border: 0; background: rgba(255, 255, 255, .16); color: #fff; width: 30px; height: 30px; border-radius: 7px; cursor: pointer; font-size: 1rem; line-height: 1; }
/* Köpfe OHNE Knopfgruppe (Bilder, Luftdruck, Profil, Position wählen): X rechtsbündig
   halten – das erledigte früher justify-content: space-between. */
.route-modal-head > .route-modal-x { margin-left: auto; }
.route-modal-x:hover { background: rgba(255, 255, 255, .32); }
.route-modal-body { position: relative; flex: 1; }
.route-modal-body #logMap { position: absolute; inset: 0; height: 100%; width: 100%; }
/* Profil-Kurzstatistik (kompaktes Modal, Auto-Höhe) */
.route-modal-box.stats-box { width: min(420px, 94vw); height: auto; }
.stats-body { padding: 14px 16px 18px; }
.stats-body .stat-mail { margin: 0 0 4px; word-break: break-all; }
.stats-body .stat-src  { margin: 0 0 10px; }
.stats-list { display: flex; flex-direction: column; gap: 6px; }
.stat-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: #f4f7fb; border: 1px solid var(--line); border-radius: 9px; }
.stat-row .stat-ico { font-size: 1.05rem; width: 22px; text-align: center; }
/* Inline-SVG (Bild-Symbol) in der Statistik auf Emoji-Groesse bringen und auf die
   Textlinie setzen - sonst sitzt es zu hoch neben den uebrigen Zeichen. */
.stat-row .stat-ico svg { width: 17px; height: 17px; vertical-align: -3px; display: inline-block; }
.stat-row .stat-label { flex: 1; font-weight: 600; color: var(--navy); }
.stat-row .stat-num { font-weight: 800; font-size: 1.05rem; color: #17325c; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-row .stat-num.stat-full { color: #c0392b; }
.route-modal-body #mapMsg { position: absolute; top: 10px; left: 12px; z-index: 401; margin: 0; background: rgba(255, 255, 255, .92); padding: 4px 9px; border-radius: 6px; }
.leaflet-tooltip.route-note { font-size: .68rem; line-height: 1.25; padding: 2px 6px; max-width: 170px; white-space: normal; background: rgba(255, 255, 255, .93); border: 1px solid #c9d6e5; color: #17325c; box-shadow: 0 1px 4px rgba(16, 24, 40, .15); }
/* Messen (2 Pins A/B) */
.leaflet-div-icon.measure-pin { background: transparent; border: 0; }
.measure-pin span { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 2px; border-radius: 50%; background: #8e44ad; color: #fff; font-weight: 800; font-size: .8rem; border: 2px solid #fff; box-shadow: 0 0 3px rgba(0, 0, 0, .55); cursor: grab; }
.measure-pin span:active { cursor: grabbing; }
.leaflet-tooltip.measure-label { font-weight: 800; font-size: .82rem; color: #fff; background: #8e44ad; border: 0; box-shadow: 0 1px 5px rgba(16, 24, 40, .35); padding: 3px 8px; }
.leaflet-tooltip.measure-label::before { border-top-color: #8e44ad; }
.leaflet-div-icon.poi-food { background: transparent; border: 0; box-shadow: none; }
.poi-food span { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid #e67e22; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); font-size: 14px; line-height: 1; }
.leaflet-div-icon.route-edit-pin { background: transparent; border: 0; }
.route-edit-pin span { display: block; width: 18px; height: 18px; margin: 4px; border-radius: 50%; background: #f39c12; border: 2px solid #fff; box-shadow: 0 0 3px rgba(0, 0, 0, .55); cursor: grab; }
.route-edit-pin span:active { cursor: grabbing; }
/* ▶ Wiedergabe: kleines Schiff faehrt die Route ab.
   Die Leiste liegt als Geschwister-Element UEBER der Karte (z-index ueber Leaflets
   eigenen Ebenen, die bis 800 gehen) – so faengt sie Klicks ab, ohne die Karte zu stoeren. */
.route-play { position: absolute; left: 12px; right: 12px; bottom: 20px; z-index: 1200; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, .95); border: 1px solid #c9d6e5; box-shadow: 0 3px 14px rgba(16, 24, 40, .28); }
.route-play[hidden] { display: none; }
.rp-btn { flex: 0 0 auto; width: 32px; height: 30px; border: 1px solid #c9d6e5; border-radius: 7px; background: #fff; color: var(--navy); font-size: .95rem; line-height: 1; cursor: pointer; }
.rp-btn:hover { background: #eef3f9; }
.rp-follow.off { opacity: .4; }
.rp-seek { flex: 1 1 160px; min-width: 110px; accent-color: #d62828; cursor: pointer; }
.rp-speed { flex: 0 0 auto; padding: 4px 6px; border: 1px solid #c9d6e5; border-radius: 7px; background: #fff; color: var(--navy); font-size: .78rem; }
.rp-info { flex: 0 0 auto; font-size: .78rem; font-weight: 700; color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.leaflet-div-icon.route-ship { background: transparent; border: 0; }
/* Groesse kommt als Inline-Stil aus app.js (SHIP_PX) – die Werte hier sind nur der
   Rueckfall, falls der Inline-Stil einmal fehlt. Zum Aendern SHIP_PX in app.js. */
.route-ship-rot { display: block; width: 38px; height: 38px; transform-origin: 50% 50%; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }
.route-ship-rot svg { display: block; margin: 2px; }
.leaflet-tooltip.route-ship-tip { padding: 2px 6px; font-size: .72rem; font-weight: 700; color: #fff; background: #d62828; border: 0; box-shadow: 0 1px 4px rgba(16, 24, 40, .35); }
.leaflet-tooltip.route-ship-tip::before { border-top-color: #d62828; }
@media (max-width: 560px) {
  .route-play { left: 8px; right: 8px; bottom: 18px; gap: 6px; padding: 6px 8px; }
  .rp-info { flex: 1 1 100%; order: 9; }
}
.route-modal-body #pickMap { position: absolute; inset: 0; height: 100%; width: 100%; cursor: crosshair; }
.route-modal-foot { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--line); background: #f6f8fb; }
.route-modal-foot .muted { flex: 1; }

/* Eintrag-Bilder (R2) */
.entry-imgs { border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.imgs-head { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--navy); font-size: .85rem; margin-bottom: 8px; flex-wrap: wrap; }
.imgs-head input[type="file"] { font-size: .8rem; font-weight: 400; }
.img-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.img-thumb { position: relative; width: 96px; height: 96px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: #f0f4f9; }
.img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }

/* Lightbox (Vollbild-Overlay über dem Modal) */
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(8, 12, 20, .92); display: flex; align-items: center; justify-content: center; }
.lightbox .lb-img { max-width: 94vw; max-height: 92vh; object-fit: contain; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.lightbox .lb-x { position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 1.2rem; cursor: pointer; }
.lightbox .lb-x:hover { background: rgba(255, 255, 255, .32); }
.lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 72px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.lightbox .lb-nav:hover { background: rgba(255, 255, 255, .3); }
.lightbox .lb-prev { left: 14px; }
.lightbox .lb-next { right: 14px; }
.img-del { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: 0; border-radius: 6px; background: rgba(200, 30, 30, .85); color: #fff; cursor: pointer; font-size: .8rem; line-height: 1; }
.img-del:hover { background: #c81e1e; }

/* Bilder-Modal (Galerie pro Tag) */
.route-modal-box.img-modal { height: min(84vh, 820px); }
.img-modal-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.img-upload { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Galerie als Justified-Layout (Google-Fotos-Stil): Reihen gleicher Höhe, Bilder je nach
   Seitenverhältnis UNTERSCHIEDLICH BREIT, füllen die Reihe randlos. flex-grow/flex-basis
   werden in JS aus dem Seitenverhältnis gesetzt (breites Bild = breite Kachel). */
/* Seiten-Galerie nach Eintrag gruppiert */
.img-groups { display: flex; flex-direction: column; gap: 14px; }
.img-group-title { font-weight: 700; color: var(--navy); font-size: .9rem; margin: 0 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.img-group-title .img-group-cnt { color: #7a8794; font-weight: 600; }
.img-thumbs.img-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.img-grid .img-thumb { position: relative; height: 170px; flex: 1 1 240px; margin: 0; }
.img-grid .img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-thumbs-wrap { display: block; }
/* Sortiermodus der Galerie: Leiste mit ⏮ ◀ ▶ unten in der Kachel, Kachel ziehbar. */
.img-thumb.sorting { cursor: grab; outline: 2px dashed rgba(30, 90, 160, .45); outline-offset: -2px; }
.img-thumb.sorting img { cursor: grab; }
.img-thumb.dragging { opacity: .45; }
.img-thumb.drag-over { outline: 3px solid var(--accent, #1e5aa0); outline-offset: -3px; }
.img-sort { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 6px; padding: 4px; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.img-sort button { width: 34px; height: 30px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .92); color: #123; font-size: .95rem; line-height: 1; cursor: pointer; }
.img-sort button:hover { background: #fff; }
#imgSortBtn.on { background: var(--accent, #1e5aa0); color: #fff; border-color: transparent; }

/* Diashow */
.slideshow { position: relative; flex: 1; min-height: 320px; display: flex; align-items: center; justify-content: center; background: #0b1622; border-radius: 8px; overflow: hidden; }
.slideshow[hidden] { display: none; }  /* hidden-Attribut muss die display:flex-Regel schlagen (sonst immer schwarze Box) */
/* zwei gestapelte Ebenen für echtes Überblenden (Crossfade) */
.slide-img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 68vh; width: auto; height: auto; object-fit: contain; opacity: 0; transition: opacity 1s ease; }
.slide-img.show { opacity: 1; }
.slide-sec { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 700; color: var(--navy); }
.slide-sec input { width: 52px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; font-size: .88rem; text-align: center; background: #fff; color: var(--text); }
.slide-count { position: absolute; left: 10px; bottom: 8px; color: #fff; font-size: .8rem; background: rgba(0, 0, 0, .45); padding: 2px 8px; border-radius: 6px; }
.slide-stop { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .18); color: #fff; cursor: pointer; font-size: 1rem; }
.slide-stop:hover { background: rgba(255, 255, 255, .34); }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-head h2 { margin: 0; font-size: 1.05rem; color: var(--navy); }
/* Seitenliste: "Nach Datum sortieren" + "Neue Seite" nebeneinander (2026-10-02) */
.page-head-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

.btn { border: 1px solid var(--line); background: #eef1f5; color: var(--text); padding: 9px 14px; border-radius: 9px; cursor: pointer; font-size: .92rem; }
.btn:hover { background: #e2e8f0; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: #1a5f9e; }
.btn.small { padding: 5px 10px; font-size: .82rem; }
/* Stufen-Limit-Hinweis (Free/Standard/Pro) */
.tier-hint { flex-basis: 100%; margin-top: 6px; font-size: .8rem; color: #8a6d00; background: #fff6e0; border: 1px solid #f0d98a; border-radius: 8px; padding: 5px 10px; }
/* Modal (Törn teilen) */
.modal-back { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 16px; }
.modal-box { background: #fff; border-radius: 12px; padding: 16px 18px; max-width: 580px; width: 100%; max-height: 90vh; overflow: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); color: var(--text); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.modal-x { border: 0; background: transparent; font-size: 1.15rem; cursor: pointer; color: var(--muted); line-height: 1; }
.share-create { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.share-create label { font-size: .85rem; font-weight: 600; color: var(--navy); display: inline-flex; align-items: center; gap: 6px; }
.share-create input { width: 70px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.share-new { display: flex; gap: 8px; margin: 8px 0 4px; }
.share-url { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font-size: .82rem; background: #f7f9fb; color: var(--text); }
.share-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.share-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.share-row.expired { opacity: .55; }
.share-doc { flex: 0 0 auto; font-size: .72rem; font-weight: 700; color: var(--navy); background: #eef1f5; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }

/* Gesperrter Button (Modul nicht in dieser Stufe): sichtbar, aber „locked" markiert */
.btn.tier-locked { opacity: .55; }
.btn.tier-locked:hover { opacity: .7; }
.lock-ico { margin-left: 2px; font-size: .82em; }
/* Kurzer Hinweis-Toast unten */
.app-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(10px); background: #1f2733; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: .9rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 50; max-width: 90vw; text-align: center; }
.app-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.btn .btn-ico { display: block; }                         /* Inline-SVG-Icon (Karte) */
.btn.btn-icoonly { display: inline-flex; align-items: center; justify-content: center; color: var(--navy); }
.btn.danger { color: var(--danger); border-color: #ecc7c5; }
.btn.danger:hover { background: #fbeceb; }

.list { display: flex; flex-direction: column; gap: 10px; }
.ship-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; box-shadow: 0 6px 18px rgba(16, 24, 40, .05); }
.ship-name { font-weight: 700; color: var(--navy); }
.ship-sub { font-size: .85rem; color: var(--muted); margin-top: 2px; }
.ship-actions { display: flex; gap: 6px; flex: 0 0 auto; }

.form { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.form input, .form select, .form textarea { border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; font-size: .95rem; color: var(--text); font-family: inherit; background: #fff; }
.form textarea { resize: vertical; }
/* Mini-Editor Bemerkungen (build 1.2.41): Toolbar + contenteditable; die Textarea darunter ist versteckt */
.note-ed { display: flex; flex-direction: column; gap: 4px; }
.note-tb { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.note-tb button { min-width: 30px; height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: #f4f6f9; color: var(--text); font-size: .9rem; cursor: pointer; line-height: 1; }
.note-tb button:hover { background: #e6ebf2; }
.note-tb button.note-col { width: 24px; min-width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); margin-left: 2px; }
.note-area { min-height: 64px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fff; font-weight: 400; font-size: .95rem; color: var(--text); line-height: 1.35; overflow-wrap: anywhere; resize: vertical; overflow: auto; }   /* resize braucht overflow != visible */
.note-area:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(33, 118, 193, .15); }
.note-area ul, .note-cell ul { margin: 2px 0 2px 1.1em; padding: 0; }
.note-area li, .note-cell li { margin: 0; }
.note-cell { white-space: normal; }
.oben-pin { font-size: .8em; opacity: .8; }
.form label.note-label { margin-bottom: -6px; }   /* Editor steht als Geschwister direkt unter dem Label (nicht darin: Label-Klick wuerde den ersten Button ausloesen) */
/* Griffleiste zum Ziehen der Hoehe - nur auf Touch-Geraeten (dort geht der native resize-Griff nicht) */
.note-grip { display: none; height: 18px; margin-top: -4px; align-items: center; justify-content: center; cursor: ns-resize; touch-action: none; }
.note-grip span { width: 44px; height: 5px; border-radius: 3px; background: #b7c5d8; }
@media (hover: none) and (pointer: coarse) { .note-grip { display: flex; } .note-area { resize: none; } }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(33, 118, 193, .15); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
/* Nur-Lese-Wert im Formular (berechnete Summen) – sieht aus wie ein Feld, ist aber Text. */
.form-ro { border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font-size: .9rem;
  font-weight: 700; color: var(--text); background: #f4f7fb; }

/* Crewliste */
.crew-box { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 12px; margin: 0; }
.crew-box legend { font-size: .82rem; font-weight: 700; color: var(--navy); padding: 0 6px; }
.crew-row { display: grid; grid-template-columns: 26px 1fr 1fr; gap: 8px; align-items: center; margin-top: 6px; }
.crew-nr { text-align: center; font-size: .8rem; font-weight: 700; color: var(--muted); }
.crew-row input { border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font-size: .9rem; color: var(--text); }
.crew-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(33, 118, 193, .15); }

/* Törn-Karten */
.toern-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; box-shadow: 0 6px 18px rgba(16, 24, 40, .05); }
.toern-main { flex: 1 1 auto; min-width: 0; }   /* Text füllt die Mitte, Thumb links / Buttons rechts */
.toern-title { font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toern-sub { font-size: .85rem; color: var(--muted); margin-top: 2px; }
.toern-actions { display: flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.badge { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; }
.badge.open { background: #e7f1fb; color: #1a5f9e; }
.badge.done { background: #e6f4ea; color: #1e7a3d; }

.small { font-size: .8rem; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.form-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.chk { flex-direction: row !important; align-items: center; gap: 8px !important; color: var(--text) !important; font-weight: 600; }
.chk input { flex: 0 0 auto; }
.chk-inline { display: inline-flex; margin: 0 0 12px; font-size: .85rem; }

/* ===== Tagesseite im Layout des Papierformulars (Bild 2) ===== */
main.wide { max-width: 1180px; }

.sheet-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: #e9edf2; border: 1px solid #d5dbe4; border-bottom: none;
  border-radius: 14px 14px 0 0;          /* nur oben gerundet, unten schließt ans Blatt an */
  padding: 10px 14px; margin-bottom: 0;
}
.sheet-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Record-Modus */
.rec-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rec-btn { display: inline-flex; align-items: center; gap: 6px; }
.rec-ico { width: 11px; height: 11px; border-radius: 50%; background: #d33; box-shadow: 0 0 0 2px rgba(221,51,51,.25); flex: 0 0 auto; }
.rec-btn.recording { background: #d62828; border-color: #b31f1f; color: #fff; }
.rec-btn.recording:hover { background: #c11f1f; }
.rec-btn.recording .rec-ico { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.45); animation: recPulse 1.1s ease-in-out infinite; }
@keyframes recPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.rec-min-lbl { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 700; color: var(--navy); }
/* Live-Werte waehrend der Aufnahme (COG/SOG).
   Zahlen in Tabellenziffern, damit die Anzeige bei jedem Fix nicht zappelt:
   ohne tabular-nums ist eine 1 schmaler als eine 8, und die ganze Zeile
   wackelt im Sekundentakt - auf einem schwankenden Boot besonders unruhig. */
.rec-live { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px;
  border: 1px solid var(--line); border-radius: 10px; background: #eef4fb;
  font-size: .86rem; font-weight: 700; color: var(--navy);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap; }
.rec-live .rl-k { font-size: .70rem; font-weight: 600; opacity: .65; letter-spacing: .04em; }
/* Kursänderung + zugehörige Checkbox sichtbar als EIN Block – sonst liest sich das
   „ins Logbuch" wie eine eigene Einstellung und nicht als Teil der Kursänderung. */
.rec-course-grp { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 10px; padding: 3px 8px; background: #f4f7fb; }
.rec-courselog-lbl { font-weight: 600; }
.rec-courselog-lbl input { margin: 0; }
.rec-min { width: 56px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; font-size: .88rem; text-align: center; background: #fff; color: var(--text); }
.rec-min:disabled { background: #eef1f5; color: var(--muted); }
.tmpl-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tmpl-bar label { font-size: .82rem; font-weight: 700; color: var(--navy); }
.tmpl-bar select { border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font-size: .88rem; color: var(--text); background: #fff; min-width: 160px; }

.sheet { background: #fff; border: 1.5px solid #222; border-radius: 4px; overflow: hidden; }

/* Kopf */
.log-head .lh-top { display: flex; border-bottom: 1px solid #222; }
.log-head .lh-cell { display: flex; align-items: baseline; gap: 6px; padding: 5px 8px; border-bottom: 1px solid #222; min-height: 26px; }
.log-head .lh-top .lh-cell { border-bottom: 0; border-right: 1px solid #222; }
.log-head .lh-top .lh-cell:last-child { border-right: 0; }
.log-head > .lh-cell:last-child { border-bottom: 0; }
.log-head label { font-size: .72rem; font-weight: 700; color: #111; white-space: nowrap; }
.log-head span { font-size: .82rem; color: #111; }
.log-head .grow { flex: 1; }
.log-head .seite { flex: 0 0 auto; }
.log-head .page-sm { font-size: .74rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.log-head .edit-pen { margin-left: auto; padding: 1px 8px; font-size: .9rem; line-height: 1.3; border-radius: 6px; }
.head-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.head-actions .head-btns { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
/* Kompakte, schmale Buttons im Törn-Kopf */
.head-btns .btn { padding: 3px 8px; font-size: .74rem; border-radius: 7px; line-height: 1.35; }
.head-btns .mini-sel { border: 1px solid #cfd8e3; border-radius: 7px; padding: 3px 5px; font-size: .72rem; background: #eef1f5; color: var(--navy); cursor: pointer; max-width: 110px; }
.toern-cover { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cover-img { width: min(150px, 40vw); aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; border: 2px solid rgba(255,255,255,.6); cursor: pointer; display: block; box-shadow: 0 3px 10px rgba(16, 24, 40, .28); }
/* Kleines quadratisches Titelbild in der Törn-Liste (vor dem Text) */
.toern-thumb { flex: 0 0 auto; width: 54px; height: 54px; object-fit: cover; border-radius: 8px; border: 2px solid rgba(255,255,255,.7); box-shadow: 0 2px 6px rgba(16,24,40,.25); cursor: pointer; }
/* Team-Boot-Kennzeichnung */
.team-badge { display: inline-block; font-size: .7rem; font-weight: 700; color: #0a6b3f; background: #e3f5ea; border: 1px solid #b7e2c8; border-radius: 999px; padding: 1px 8px; vertical-align: middle; margin-left: 6px; }
.ship-card.team-boat { border-left: 3px solid #2fae6a; }

/* Kundensicht (Supervisor S360-Trip-Read/Write) */
.cust-view { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cust-view label { font-size: .82rem; font-weight: 700; color: var(--navy); }
.cust-view input { flex: 1 1 220px; min-width: 160px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font-size: .9rem; background: #fff; color: var(--text); }
.cust-banner { margin: 0 0 12px; padding: 7px 12px; border-radius: 8px; font-size: .86rem;
  background: #fff6e0; border: 1px solid #f0d98a; color: #6b4e00; }
.cust-banner .cust-ro { color: #a15c00; font-weight: 700; }

/* Törn-Übersicht: grauer Rahmen (schließt an die blaue Menü-Bar an) */
.toern-panel {
  background: #e9edf2;
  border: 1px solid #d5dbe4;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 16px 38px rgba(16, 24, 40, .32);
  padding: 16px;
  margin: -18px -16px 0;                 /* oben bündig an die blaue Bar, seitlich bis Container-Rand */
}
/* Törn-Übersicht: graues Panel wie die Seitenliste, aber oben gerundet */
.toern-panel-top {
  border-radius: 14px 14px 0 0;
  margin: 0 -16px;                       /* nur seitlich bis zum Rand, oben gerundet sichtbar */
}
/* Kleine Seiten-Banner (Deckblatt / Seite N) im Menü-Blau, weiße Schrift */
.toern-card.page-card { background: linear-gradient(180deg, #5a90c6, #3f70a8); border: 0; box-shadow: 0 5px 14px rgba(16, 24, 40, .2); }
.page-card .toern-title { color: #fff; }
.page-card .toern-sub { color: #fff; opacity: .92; }
.page-card .btn.primary { background: #e9edf2; border: 1px solid #cfd8e3; color: var(--navy); }
.page-card .btn.primary:hover { background: #fff; }
/* Karten, die sich selbst oeffnen (Deckblatt, Seite N) - der Knopf "Oeffnen"
   daneben ist entfallen. Der Fokusrahmen ist Pflicht, nicht Zierde: ohne Knopf
   waere sonst nicht erkennbar, wo die Tastatur gerade steht. */
.card-klick { cursor: pointer; }
.card-klick:hover { box-shadow: 0 8px 20px rgba(16, 24, 40, .28); }
.card-klick:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Törn-Übersicht: Hero-Kopf mit Eckdaten */
.toern-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: #003269; color: #fff; border-radius: 14px; padding: 16px 18px; box-shadow: 0 10px 28px rgba(16, 24, 40, .16); }
.toern-hero-main { flex: 1 1 300px; min-width: 0; }
.toern-hero-title { font-size: 1.35rem; font-weight: 800; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toern-hero-sub { font-size: .98rem; font-weight: 500; opacity: .96; margin-top: 4px; }
.toern-hero-facts { font-size: .9rem; opacity: .97; margin-top: 12px; line-height: 1.6; }
.toern-hero-facts .fl { font-weight: 700; display: inline-block; min-width: 66px; }
.toern-hero .head-actions { flex: 0 0 auto; }

/* Bordkassa */
.kassa-form { margin-bottom: 16px; max-width: none; }   /* weißes Formular auf volle Panel-Breite */
.kassa-parts-wrap { margin: 4px 0; }
/* Luftdruck-Verlaufskurve (Modal) */
.route-modal-box.press-modal { width: min(720px, 96vw); height: auto; }
.press-modal-body { padding: 14px 16px 18px; }
.press-chart-svg { width: 100%; height: auto; display: block; }
.pc-grid { stroke: #e6ecf3; stroke-width: 1; }
.pc-line { fill: none; stroke: #2176c1; stroke-width: 2; }
.pc-dot { fill: #2176c1; }
.pc-yl { fill: #5a6b7b; font-size: 10px; text-anchor: end; }
.pc-xl { fill: #5a6b7b; font-size: 10px; text-anchor: middle; }
.kassa-scan-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.kassa-parts-head { display: flex; align-items: center; gap: 10px; font-size: .82rem; font-weight: 700; color: var(--navy); margin-bottom: 6px; flex-wrap: wrap; }
.kassa-parts { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.kassa-part { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; background: #eef1f5; border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; cursor: pointer; }
/* Kassa-Gaeste (29.09.2026): Personen nur fuer die Bordkassa - gelblich abgesetzt von der Crew */
.kassa-part.gast { background: #fff7e0; border-color: #ecd9a0; }
.kassa-gast-marke { font-size: .7rem; font-weight: 700; color: #8a6a00; background: #ffe9a8; border-radius: 6px; padding: 0 5px; }
.kassa-gaeste { margin: 0 0 12px; padding: 10px 12px; background: #fffbf0; border: 1px solid #f0e2b6; border-radius: 12px; }
.kassa-gaeste .kassa-parts-head .muted { font-weight: 400; }
.kassa-gast-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.kassa-gast-chip { display: inline-flex; align-items: center; gap: 2px; font-size: .9rem; background: #fff7e0; border: 1px solid #ecd9a0; border-radius: 8px; padding: 3px 4px 3px 9px; }
.kassa-gast-btn { border: 0; background: none; cursor: pointer; font-size: .9rem; line-height: 1; padding: 2px 5px; border-radius: 6px; color: #6b5a20; }
.kassa-gast-btn:hover { background: #f3e3b0; }
.kassa-gast-neu { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kassa-gast-neu input { width: 220px; max-width: 100%; }
.kassa-gaeste .err { margin: 6px 0 0; }
.kassa-list-wrap { overflow-x: auto; background: #e7f6ec; border: 1px solid rgba(16, 24, 40, .08); border-radius: 12px; padding: 6px 12px 10px; }
.kassa-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.kassa-table th, .kassa-table td { border-bottom: 1px solid var(--line); padding: 7px 8px; text-align: left; vertical-align: middle; }
.kassa-table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); border-bottom: 2px solid var(--line); white-space: nowrap; }
.kassa-table thead th.k-sort { cursor: pointer; user-select: none; }
.kassa-table thead th.k-sort:hover { color: var(--navy); }
.kassa-table thead th.k-sort.active { color: var(--navy); }
.kassa-table thead th .k-arrow { font-size: .7rem; }
.kassa-table tfoot td { font-weight: 700; border-top: 2px solid var(--line); border-bottom: 0; }
.kassa-table .k-amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kassa-table .k-date { white-space: nowrap; }
.kassa-table .k-desc { min-width: 140px; }
.kassa-table .k-parts { display: block; font-size: .74rem; color: var(--muted); }
.kassa-table .k-act { white-space: nowrap; text-align: right; }
.kassa-table .k-beleg { text-align: center; }
.kassa-beleg { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); cursor: pointer; display: inline-block; vertical-align: middle; }
.kassa-beleg.pdf { width: auto; height: auto; font-size: 1.4rem; text-decoration: none; border: 0; }
.kassa-table .k-amt.pos { color: #1a7f37; font-weight: 700; }
.kassa-table .k-amt.neg { color: #c0392b; font-weight: 700; }
.kassa-settle { margin-top: 22px; background: #eef4fb; border: 1px solid rgba(16, 24, 40, .08); border-radius: 12px; padding: 12px 14px 16px; }
.kassa-settle h3 { margin: 0 0 8px; }
.kassa-settle h4 { margin: 16px 0 6px; }
.kassa-tx { list-style: none; margin: 0; padding: 4px 0; background: #fff; border: 1px solid rgba(16, 24, 40, .12); border-radius: 10px; overflow: hidden; }
.kassa-tx li { padding: 9px 14px; border-bottom: 1px solid rgba(16, 24, 40, .08); font-size: .95rem; }
.kassa-tx li:last-child { border-bottom: 0; }
.kassa-tx li .k-amt { font-variant-numeric: tabular-nums; font-weight: 700; }

/* Tabelle */
.tbl-wrap { overflow-x: auto; }
.log-tbl { width: 100%; min-width: 820px; border-collapse: collapse; font-size: .64rem; }
.log-tbl th, .log-tbl td { border: 1px solid #222; padding: 2px 4px; text-align: center; color: #111; white-space: nowrap; }
.log-tbl thead th { background: #fff; font-size: .55rem; font-weight: 700; line-height: 1.12; }
.log-tbl td { height: 20px; }
.log-tbl td.lft { text-align: left; white-space: normal; min-width: 120px; }
.log-tbl td.col-press { text-align: left; white-space: nowrap; }
.log-tbl td.rt { text-align: right; font-variant-numeric: tabular-nums; }
/* Handschrift-Optik in ausgewählten Zellen */
.hand { font-family: "Segoe Script", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-size: 1.25em; color: #1a2f55; }
.log-tbl tbody tr:hover td { background: #f6f9fd; }
.log-tbl td.act { padding: 2px 4px; white-space: nowrap; text-align: center; }
/* Stift und Bild-Symbol auf EINER Linie. Grund fuer den Versatz: der Bild-Knopf ist
   inline-flex mit einem SVG darin – seine Grundlinie liegt an der Unterkante, waehrend
   der Textknopf (Stift) auf der Schrift-Grundlinie sitzt. Beide bekommen deshalb
   vertical-align:middle (Grundlinie spielt damit keine Rolle mehr) und dieselbe
   Mindesthoehe, damit sie gleich hoch und mittig zueinander stehen. */
.log-tbl td.act .btn { display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; min-height: 24px; padding: 2px 8px; font-size: .9rem; line-height: 1.3; border-radius: 6px; }
.log-tbl td.act .btn + .btn { margin-left: 3px; }
.log-tbl th.act { width: 34px; }
.auto-dot { color: var(--accent); font-weight: 900; }
.nf-badge { font-size: .58rem; font-weight: 800; background: #17325c; color: #fff; padding: 1px 4px; border-radius: 4px; letter-spacing: .03em; vertical-align: middle; }
.log-tbl th.col-nf, .log-tbl td.col-nf { padding: 2px 5px; text-align: center; white-space: nowrap; }
.log-tbl td.col-nf .nf-badge { display: inline-block; white-space: nowrap; }
.wx-wrap { display: inline-flex; vertical-align: middle; }
.wx-sym { vertical-align: middle; }

/* Fuß */
.log-foot { display: grid; grid-template-columns: 0.75fr 1fr 1.5fr; border-top: 1.5px solid #222; }
.log-foot > div { padding: 8px 10px; border-right: 1px solid #222; }
.log-foot > div:last-child { border-right: 0; }
.foot-motor div { display: flex; justify-content: space-between; gap: 10px; font-size: .74rem; padding: 2px 0; }
.foot-motor label { font-weight: 600; color: #111; }
.foot-motor span { font-variant-numeric: tabular-nums; }
.foot-motor-inp { width: 64px; border: 1px solid var(--accent); border-radius: 6px; padding: 1px 5px; font-size: .78rem; text-align: right; background: #fffdf3; color: #111; font-family: inherit; }
.foot-motor-inp:focus { outline: none; box-shadow: 0 0 0 2px rgba(33, 118, 193, .2); }
.foot-motor .tot { border-top: 1px solid #222; margin-top: 3px; padding-top: 4px; font-weight: 700; }
.foot-dist table { border-collapse: collapse; width: 100%; font-size: .72rem; }
.foot-dist th, .foot-dist td { border: 1px solid #bbb; padding: 2px 6px; text-align: right; font-variant-numeric: tabular-nums; }
.foot-dist th:first-child, .foot-dist td:first-child { text-align: left; border: 0; font-weight: 600; white-space: nowrap; }
.foot-dist tr.tot td { font-weight: 700; border-top: 1px solid #222; }
.foot-sign { min-width: 300px; }
.foot-sign label { display: block; font-size: .74rem; font-weight: 700; color: #111; margin-bottom: 10px; }
.foot-sign span { font-size: .82rem; color: #111; }

/* Deckblatt (Bild 1) – Papier-Layout, gleiche Optik wie die Tagesseite */
.deck-sheet { color: #111; min-width: 460px; }   /* schmaler wird horizontal gescrollt (tbl-wrap) */
.deck-title { text-align: center; font-size: .82rem; font-weight: 600; padding: 7px 8px; border-bottom: 1.5px solid #222; }
.deck-row { display: flex; border-bottom: 1px solid #222; }
.deck-cell { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-right: 1px solid #222; flex: 1 1 0; min-height: 30px; min-width: 0; }
.deck-cell:last-child { border-right: 0; }
.deck-cell.narrow { flex: 0 0 116px; }
.deck-cell.grow2 { flex: 2 1 0; }
.deck-cell > label { font-size: .72rem; font-weight: 700; white-space: nowrap; }
.deck-cell input, .deck-cell select { border: 0; border-bottom: 1px solid #cbd3dd; background: transparent; padding: 3px 2px; font-size: .82rem; color: #111; font-family: inherit; flex: 1 1 auto; min-width: 0; }
.deck-cell input[type="date"] { flex: 0 1 auto; }
.deck-cell input:focus, .deck-cell select:focus { outline: none; border-bottom-color: var(--accent); }
.deck-cell small { font-size: .7rem; color: var(--muted); }
.deck-cell span[id] { min-width: 24px; font-size: .82rem; }
.deck-dash { color: #111; }

.deck-crew-head { display: grid; grid-template-columns: 96px 1fr 1fr 1.2fr; border-bottom: 1px solid #222; background: #f0f4f9; }
/* Crewliste aus Foto (29.09.2026): Knopf + Status ueber der Crew-Tabelle */
.deck-crew-scan { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 8px; border-bottom: 1px solid #222; background: #fbfcfe; }
.deck-crew-scan label.btn { cursor: pointer; margin: 0; }
.deck-crew-head span { padding: 5px 8px; font-size: .72rem; font-weight: 700; border-right: 1px solid #222; }
.deck-crew-head span:last-child { border-right: 0; }
.deck-crew-row { display: grid; grid-template-columns: 96px 1fr 1fr 1.2fr; border-bottom: 1px solid #222; }
.deck-crew-nr { padding: 5px 8px; text-align: right; font-size: .78rem; font-weight: 700; border-right: 1px solid #222; }
.deck-crew-row input { border: 0; border-right: 1px solid #222; padding: 5px 8px; font-size: .82rem; color: #111; font-family: inherit; min-width: 0; }
.deck-crew-row input:last-child { border-right: 0; }
.deck-crew-row input:focus { outline: none; background: #f4f8fd; }

.deck-sum { border-top: 1.5px solid #222; }
.deck-sum-title { padding: 5px 8px; font-size: .72rem; font-weight: 700; border-bottom: 1px solid #222; }
.deck-sum-row { display: grid; grid-template-columns: 240px 1fr; border-bottom: 1px solid #222; }
.deck-sum-row:last-child { border-bottom: 0; }
.deck-sum-row > label { padding: 5px 8px; text-align: right; font-size: .75rem; font-weight: 600; border-right: 1px solid #222; }
.deck-sum-row input { border: 0; padding: 5px 8px; font-size: .82rem; color: #111; font-family: inherit; min-width: 0; }
.deck-sum-row input:focus { outline: none; background: #f4f8fd; }
/* Berechnete Werte (Seemeilen, Motorstunden, Nächte) – nicht editierbar, daher als Text
   statt als Feld; leicht hervorgehoben, damit man den Unterschied zum Eingabefeld sieht. */
.deck-sum-hint { font-weight: 400; color: var(--muted); }
.deck-calc { padding: 5px 8px; font-size: .82rem; font-weight: 700; color: #111; background: #f4f8fd; }
.deck-calc-note { font-weight: 400; font-size: .72rem; color: var(--muted); }
@media (max-width: 560px) {
  .deck-row { flex-wrap: wrap; }
  .deck-cell { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid #222; }
  .deck-sum-row { grid-template-columns: 1fr; }
  .deck-sum-row > label { text-align: left; border-right: 0; border-bottom: 1px solid #cbd3dd; }
}

/* Blättern zwischen Seiten */
.page-nav {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  margin-top: 0; padding: 10px 14px; border-radius: 0 0 10px 10px;   /* direkt anschließen, nur unten rund */
  background: linear-gradient(180deg, #5a90c6, #3f70a8);   /* blaues Banner (wie Menü-Leiste) */
  box-shadow: 0 4px 14px rgba(16, 24, 40, .14);
}
.page-nav .btn { padding: 5px 10px; font-size: .82rem; }   /* Blätter-Buttons kompakt */
.page-nav .page-ind { font-size: .85rem; font-weight: 700; color: #fff; min-width: 90px; text-align: center; }
.page-nav .nav-right { margin-left: auto; }   /* 🖼 / 🗺 nach rechts schieben */
.btn[disabled] { opacity: .45; cursor: not-allowed; }

@media (max-width: 720px) {
  main.wide { max-width: 100%; }
}
@media (max-width: 560px) {
  .ship-card { flex-direction: column; align-items: stretch; }
  .ship-actions { justify-content: flex-end; }
  /* Törn-Karte hochkant: Bild + Text nebeneinander lassen, nur die Buttons darunter umbrechen */
  .toern-card { flex-wrap: wrap; align-items: center; }
  .toern-card .toern-main { flex: 1 1 55%; }
  .toern-card .toern-actions { flex: 1 1 100%; justify-content: flex-end; }
  .form-row3 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }   /* zweispaltige Felder (z. B. Länge/Motor) untereinander */
  .log-head .lh-top { flex-wrap: wrap; }
  .log-foot { grid-template-columns: 1fr; }
  .log-foot > div { border-right: 0; border-bottom: 1px solid #222; }
  /* Törn-Kopf: Buttons + Titelbild umbrechen statt über den Rand zu laufen */
  .toern-hero { flex-direction: column; }
  .toern-hero .head-actions { align-self: stretch; align-items: flex-start; }
  .head-actions .head-btns { justify-content: flex-start; }
}

/* Eintragsformular: Zeile „📏 Distanz berechnen" unter den Distanzfeldern. */
.dist-calc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 8px; }
.dist-calc .muted { line-height: 1.3; }

/* ---------- Törnplaner (Soll-Route, SKT360_Plan) ---------- */
#planMap { height: 55vh; min-height: 320px; border-radius: 8px; overflow: hidden; margin: 8px 0; }
.plan-tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 6px 0; }
.plan-tools .chk { margin: 0; }
/* Nummerierter Pin für geplante Orte (Anker mittig -> direkt greifbar). */
.plan-pin span {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #2176c1; color: #fff; font-weight: 700; font-size: .8rem;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.plan-form { background: #f5f8fc; border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
.plan-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.plan-table th, .plan-table td { padding: 6px 8px; border-bottom: 1px solid #e3e8ee; vertical-align: top; }
.plan-table th { text-align: left; font-size: .8rem; color: #6b7a8c; font-weight: 600; }
.plan-table td.num, .plan-table th.num { text-align: right; white-space: nowrap; }
.plan-table tr.plan-wp td { color: #8a8f97; background: #fcfcfd; }
.plan-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: #2176c1; color: #fff; font-size: .78rem; font-weight: 700;
}
.plan-act { white-space: nowrap; text-align: right; }
.plan-act .btn { padding: 2px 7px; }
.plan-sum { margin: 8px 0 0; }
.plan-disclaimer { margin-top: 14px; font-style: italic; }
@media (max-width: 560px) {
  #planMap { height: 45vh; }
}

/* Törnplaner: extra breite Ansicht (mehr Karte) – setBack() nimmt die Klasse wieder weg. */
main.plan-wide { max-width: 1600px; }
main.plan-wide #planMap { height: 68vh; }
.plan-form { max-width: 900px; }
.plan-form .form-row3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
@media (max-width: 700px) {
  main.plan-wide { max-width: 100%; }
  main.plan-wide #planMap { height: 45vh; }
  .plan-form .form-row3 { grid-template-columns: 1fr; }
}

/* ---------- Törn-Aktionen: vertikale Icon-Leiste rechts ---------- */
/* Icon + Text, senkrecht untereinander, am rechten Rand.
   width:max-content -> die Leiste ist so breit wie ihr breitester Knopf,
   align-items:stretch -> ALLE Knöpfe bekommen genau diese Breite (gleich breit),
   margin-left:auto -> die Leiste sitzt rechtsbündig. */
.head-rail { display: flex; flex-direction: column; gap: 4px; align-items: stretch; width: max-content; margin-left: auto; }
.rail-btn { justify-content: flex-start; }
/* Der Aktionsblock (Leiste + Dokumentenzeile) war EIN Flex-Element und brach als Ganzes
   in eine eigene Zeile um -> der Hero wurde unnötig hoch und die Leiste rutschte nach unten.
   display:contents löst den Kasten auf: Leiste und Dokumentenzeile werden eigene Flex-Items
   des Hero. Damit sitzt die Leiste OBEN neben dem Text, die Dokumentenzeile bekommt per
   flex-basis:100% ihre eigene Zeile darunter. Der Hero ist nur noch so hoch wie sein Inhalt. */
.toern-hero .head-actions { display: contents; }
.toern-hero .head-rail { align-self: flex-start; }
.toern-hero .head-btns { flex: 1 1 100%; justify-content: flex-start; }  /* Dokumentenzeile linksbündig */
.rail-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  font-size: .92rem; line-height: 1.1; cursor: pointer; position: relative;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.rail-btn:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(33,118,193,.18); transform: translateY(-1px); }
.rail-btn:active { transform: none; }
.rail-ico { display: flex; align-items: center; justify-content: center; width: 17px; flex: 0 0 17px; }
.rail-ico svg { width: 15px; height: 15px; display: block; }
.rail-lbl { font-size: .74rem; font-weight: 600; color: var(--navy); white-space: nowrap; }
.rail-btn.tier-locked { opacity: .55; }

/* Schmale Bildschirme: Leiste klappt in eine Zeile um und beginnt wieder links. */
@media (max-width: 700px) {
  .head-rail { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; width: auto; margin-left: 0; }
  .toern-hero .head-rail { flex: 1 1 100%; }        /* eigene Zeile, linksbündig */
  .toern-hero .head-btns { justify-content: flex-start; }
  .rail-btn { padding: 6px 10px; font-size: 1rem; }
}

/* ---------- Handy HOCHKANT: Leiste zurueck an den rechten Rand ----------
   Hochkant blieb rechts neben "Schiff/Skipper" eine handbreit Platz leer,
   waehrend die vier Aktionen darunter zwei volle Zeilen belegten. Also wie am
   Desktop: die Leiste steht SENKRECHT rechts neben den Eckdaten, die
   Dokumentenzeile bleibt unten.

   ⚠ Drei Regeln von weiter oben muessen dafuer zurueckgenommen werden:
   - .toern-hero { flex-direction: column } (max-width 560) stapelte alles
   - .toern-hero .head-rail { flex: 1 1 100% } (max-width 700) gab der Leiste
     eine eigene volle Zeile
   - .toern-hero-main { flex: 1 1 300px } - 300px passen neben die Leiste NICHT
     mehr in ein Telefon, der Block waere sofort wieder umgebrochen. */
@media (max-width: 560px) and (orientation: portrait) {
  .toern-hero { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
  .toern-hero-main { flex: 1 1 160px; }
  .toern-hero .head-rail {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    width: max-content;
    margin-left: auto;
    align-self: flex-start;
  }
  .toern-hero .head-btns { flex: 1 1 100%; }
  .rail-btn { padding: 4px 8px; font-size: .9rem; }
  .rail-lbl { font-size: .72rem; }
}

/* Törnplaner: Umschalter Ort/Routenpunkt als Karten-Control (bleibt beim Scrollen sichtbar). */
.plan-mode-ctl { background: #fff; }
.plan-mode-ctl a {
  display: block; width: auto !important; height: auto !important;
  padding: 6px 10px; font-size: .78rem; font-weight: 600; line-height: 1.2;
  color: var(--navy); text-decoration: none; white-space: nowrap;
}
.plan-mode-ctl a.on { background: var(--accent); color: #fff; }
.plan-mode-ctl a.on:hover { background: var(--accent); color: #fff; }
/* Meldungszeile über der Karte. BEWUSST nicht sticky: Topbar und Hauptmenü kleben dort
   schon (z-index 4/5) – eine dritte klebende Leiste würde sich überlagern. Fehler sind
   ohnehin im Formular (#pfErr) und als Toast sichtbar. */
.plan-tools { min-height: 18px; }

/* Törnplaner: Hinweis „Strg + Mausrad zum Zoomen" (kurz eingeblendet beim Radeln). */
#planMap { position: relative; }
.plan-zoomhint {
  position: absolute; inset: 0; z-index: 800;   /* über den Markern, unter den Controls */
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 20px;
  background: rgba(23, 50, 92, .5); color: #fff; font-weight: 700; font-size: .95rem;
  opacity: 0; transition: opacity .18s; pointer-events: none;
}
.plan-zoomhint.on { opacity: 1; }

/* Törnplaner: Checkbox „Punkte zeigen" im Karten-Control */
.plan-mode-ctl .plan-wp-toggle {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 9px; font-size: .74rem; font-weight: 600; color: var(--navy);
  border-top: 1px solid var(--line); background: #fff; cursor: pointer; white-space: nowrap;
}
.plan-mode-ctl .plan-wp-toggle input { margin: 0; }

/* Törnplaner: Bilder am geplanten Ort */
.plan-imgs { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 8px; }
.plan-imgs-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.plan-img-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-img { position: relative; margin: 0; }
.plan-img img { width: 110px; height: 82px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); cursor: zoom-in; display: block; }
.plan-img-del {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
  border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--danger);
  font-size: .8rem; line-height: 1; cursor: pointer; padding: 0;
}
.plan-img-del:hover { background: var(--danger); color: #fff; }

/* Törnplaner: Vorschaubild über dem Ortspin */
.plan-pin { display: flex; flex-direction: column; align-items: center; }
.plan-pin-thumb {
  width: 56px; height: 38px; object-fit: cover; display: block;
  border-radius: 6px; border: 2px solid #fff; box-shadow: 0 2px 7px rgba(0,0,0,.45);
  background: #dfe6ee;
}
.plan-pin.has-thumb span { margin-top: 2px; }

/* Routenpunkt im Törnplaner – ziehbarer Marker (kein circleMarker, der laesst sich nicht ziehen).
   Leaflets Standard-divIcon bringt weissen Kasten + Rahmen mit, beides wird abgeraeumt. */
.leaflet-div-icon.plan-wp-pin { background: transparent; border: 0; }
.plan-wp-pin span {
  display: block; width: 14px; height: 14px; margin: 4px; border-radius: 50%;
  background: #f39c12; border: 2px solid #fff; box-shadow: 0 0 3px rgba(0, 0, 0, .55);
  cursor: grab;
}
.plan-wp-pin span:active { cursor: grabbing; }

/* Törnplaner: Aktivitäten-Feld mit Aufzählungs-Hilfe */
#pfActs, #pfRest { min-height: 110px; line-height: 1.45; font-family: inherit; }
.plan-acts-hint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -2px 0 6px; }

/* ---------------------------------------------------------------------------
   Overlays ÜBER Leaflet legen.
   Leaflet vergibt seinen Ebenen feste z-index-Werte (Panes 400–700, Controls 1000).
   Weil .leaflet-container keinen eigenen Stapelkontext aufmacht, konkurrieren diese
   Werte direkt mit unseren Overlays – ein Modal mit z-index 60 verschwindet dadurch
   HINTER der Karte (aufgefallen beim Teilen-Dialog im Törnplaner).
   Deshalb alle Vollbild-Overlays oberhalb von 1000 einsortieren.
--------------------------------------------------------------------------- */
.modal-back  { z-index: 1200; }   /* Teilen-Dialog & Co. */
.lightbox    { z-index: 1300; }   /* Bildbetrachter – über allem */
.route-modal { z-index: 1100; }   /* Kartenfenster (Route) */
.app-toast   { z-index: 1400; }   /* Hinweise immer sichtbar */

/* ---- Offline-Sicherung (Stufe 1) ----------------------------------------
   Chip in der Kopfzeile, Abzeichen am Record-Knopf, Stand-Hinweis auf einer
   gecachten Seite, Markierung ungesendeter Zeilen, Liste im Fenster. */
.netz-chip { flex: 0 0 auto; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.14); color: #fff; cursor: pointer; white-space: nowrap; }
.netz-chip.offline { background: #f39c12; border-color: #f39c12; color: #1f2733; }
.netz-chip.haengt  { background: #d62828; border-color: #d62828; color: #fff; }
/* In der Vorlagen-Zeile rechts aussen (margin-left:auto), die Record-Leiste bleibt frei. */
.tmpl-bar .rec-queue { margin-left: auto; }
.rec-queue { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 10px; border: 1px solid #e0b34d;
  background: #fff3d8; color: #6b4d00; font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.rec-queue.haengt { background: #fde2e2; border-color: #d62828; color: #8a1414; }
.net-stale { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: #fff3d8; border: 1px solid #e0b34d;
  color: #6b4d00; font-size: .85rem; font-weight: 600; }
.log-tbl tr.row-queued td { background: #fff8e6; }
.queued-dot { font-size: .8em; margin-left: 3px; }
.q-tbl { width: 100%; border-collapse: collapse; font-size: .85rem; }
.q-tbl th, .q-tbl td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.q-tbl td:last-child { text-align: right; }
.q-wartet { color: #6b4d00; }
.q-haengt { color: #b31f1f; font-weight: 700; white-space: normal; }
.btn.busy { outline: 2px solid #f39c12; animation: recPulse 1.1s ease-in-out infinite; }
/* "GPS bereit halten" in der Vorlagen-Zeile der Tagesseite */
.gps-warm-lbl { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; font-weight: 700; color: var(--navy); white-space: nowrap; cursor: pointer; }
.gps-warm-lbl input { margin: 0; }
.gps-warm-state { font-size: .72rem; font-weight: 600; color: #6b4d00; }
.gps-warm-state.ok { color: #1a7f37; }
/* ⚙ Einstellungen der Aufzeichnung
   Das Formular-Grundmuster (.form label) setzt Beschriftungen als SPALTE - Text oben,
   Feld darunter. Fuer Haekchen ist das falsch (Kaestchen ueber dem Text, doppelte
   Hoehe). Hier: jede Zeile ist eine ZEILE - Text links, Feld/Haken rechts. */
/* Der ⚙-Knopf soll als KNOPF lesbar sein - blauer Rand, weisser Grund, Zahnrad in Akzent,
   die Kurzform grau dahinter. Vorher sah er aus wie ein Textschnipsel. */
.rec-cfg { font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid var(--accent); color: var(--accent); font-weight: 700; }
.rec-cfg:hover { background: #eef4fb; }
.rec-cfg-ico { font-size: 1.05em; }
.rec-cfg-sum { font-weight: 600; color: var(--muted); }
.rec-cfg-box { max-width: 440px; height: auto; max-height: 90vh; }
.rec-cfg-box .route-modal-body { overflow: auto; padding: 10px 14px; }
.rec-cfg-form { gap: 4px; }
.rec-cfg-form label { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 4px 0; font-size: .9rem; font-weight: 700; color: var(--navy); }
.rec-cfg-form label.chk-inline { justify-content: flex-start; }
.rec-cfg-form label.chk-inline input { order: 2; margin-left: auto; width: 20px; height: 20px; }
.rec-cfg-form .rec-cfg-row { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.rec-cfg-form .rec-cfg-row input { width: 64px; padding: 5px 8px; text-align: right; }
.rec-cfg-form p.muted.small { margin: 0 0 6px; line-height: 1.3; font-size: .76rem; }
.rec-cfg-form hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.rec-cfg-note { margin: 0 0 6px; padding: 6px 10px; border-radius: 8px; background: #fde2e2; color: #8a1414; font-size: .82rem; font-weight: 600; }