/* =========================================================
   PlaceScout — Design-Tokens
   Leitidee: ein digitales Zeichenbrett. Tiefes Blaupausen-Blau,
   Konturlinien in Zyan, warmer Markierungs-Akzent für die
   eigentlichen "Points of Interest" — in einer ruhigeren,
   luftigeren Ausführung mit klarer Hierarchie.
   ========================================================= */
:root {
    /* Lässt sich per JS prüfen, um sicherzustellen, dass wirklich das
       aktuelle Stylesheet geladen ist (unabhängig vom JS-Build-Marker):
       getComputedStyle(document.documentElement).getPropertyValue('--build') */
    --build: "2026-07-13c";

    --navy-900: #0a1f33;
    --navy-800: #102a44;
    --navy-700: #14416b;
    --navy-600: #1c5688;

    --cyan-400: #7fe3ef;
    --cyan-500: #4fd1e5;

    --amber-500: #f2a541;
    --amber-600: #d98a28;

    --paper: #f7f8f6;
    --paper-raised: #ffffff;
    --line: #e4e9e7;
    --line-strong: #ccd5d3;

    --ink: #16283a;
    --ink-soft: #5b7080;
    --danger: #c94f4f;
    --danger-bg: #fbeaea;

    /* Abstandsskala: konsequent verwendet statt beliebiger Einzelwerte */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;

    --shadow-card: 0 1px 2px rgba(10, 31, 51, 0.04), 0 10px 30px -14px rgba(10, 31, 51, 0.16);
    --shadow-pop: 0 20px 60px -16px rgba(10, 31, 51, 0.32);

    --font-display: "Space Grotesk", "Inter", sans-serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

/* Sicherstellen, dass das native hidden-Attribut IMMER greift, auch bei
   Elementen mit eigener display-Regel (z.B. .btn, .selection-bar). Ohne
   dies gewinnt eine eigene "display"-Angabe gegenüber der Browser-Vorgabe
   [hidden]{display:none}, wodurch Elemente trotz hidden sichtbar bleiben. */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15.5px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* sehr feines, ruhiges Blaupausen-Raster im Hintergrund */
body {
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: -1px -1px;
}

a { color: var(--navy-700); }

h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--navy-900);
    margin: 0 0 8px;
    letter-spacing: -0.015em;
    line-height: 1.25;
}
h1 { font-size: 2rem; font-weight: 700; }
h2 { font-size: 1.3rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; margin-top: var(--space-5); }

.eyebrow {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: var(--navy-600);
    margin: 0 0 8px;
}
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }

.lede { color: var(--ink-soft); max-width: 60ch; margin: 0; }

/* ---------- App-Shell: linke Sidebar + Inhaltsbereich ---------- */
.app-shell {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

.sidebar {
    flex: 0 0 252px;
    width: 252px;
    background: var(--navy-900);
    color: #eaf3f5;
    box-shadow: 4px 0 24px -8px rgba(10,31,51,0.25);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 5;
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #fff;
    text-decoration: none;
    padding: 28px 24px 22px;
}
.sidebar__mark {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border-radius: 10px;
    background: var(--cyan-500);
    color: var(--navy-900);
    flex-shrink: 0;
}
.sidebar__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}

.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 16px 28px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #b9d3da;
    text-decoration: none;
    font-size: 0.89rem;
    font-weight: 500;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border-left: 2px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-link__icon { flex-shrink: 0; opacity: 0.8; }
.nav-link:hover { background: rgba(255,255,255,0.05); color: #fff; }
.nav-link.is-active {
    background: rgba(79,209,229,0.10);
    color: var(--cyan-400);
    font-weight: 600;
    border-left-color: var(--cyan-500);
}
.nav-link--sub {
    padding-left: 22px;
    font-size: 0.86rem;
}

.nav-group { margin-top: 22px; }
.nav-group__label {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.11em;
    color: #5c7885;
    padding: 0 14px 8px;
}

.sidebar__user {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.sidebar__user-info { flex: 1; min-width: 0; }
.sidebar__user-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar__user-role {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: #7fa0ac;
}
.sidebar__logout {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    color: #b9d3da;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}
.sidebar__logout:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* ---------- Layout ---------- */
.app-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.app-main {
    flex: 1 1 auto;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 48px 40px 72px;
}
.app-footer {
    text-align: center;
    padding: 28px;
    color: var(--ink-soft);
    font-size: 0.8rem;
    font-family: var(--font-mono);
}

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}
.page-head--tight { margin-bottom: 24px; }
.page-head__actions { display: flex; gap: 10px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.88rem;
    padding: 11px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .1s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--navy-900); color: #fff; }
.btn--primary:hover { background: var(--navy-700); box-shadow: 0 4px 14px -4px rgba(10,31,51,0.4); }
.btn--accent { background: var(--amber-500); color: var(--navy-900); }
.btn--accent:hover { background: var(--amber-600); }
.btn--accent.is-active { background: var(--navy-900); color: var(--cyan-400); box-shadow: 0 0 0 3px rgba(79,209,229,0.22); }
.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--navy-800); }
.btn--ghost.is-active { background: var(--navy-900); color: var(--cyan-400); border-color: var(--navy-900); }
.btn--ghost:hover { background: #fff; border-color: var(--navy-600); }
.btn--danger-ghost { background: transparent; border-color: #e3c3c3; color: var(--danger); }
.btn--danger-ghost:hover { background: var(--danger-bg); border-color: var(--danger); }
.btn--small { padding: 7px 12px; font-size: 0.78rem; }
.linklike {
    background: none; border: none; padding: 0; color: var(--navy-700);
    text-decoration: underline; cursor: pointer; font: inherit;
}

/* ---------- Grafiken-Grid (Übersicht) ---------- */
.grid-sheets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 24px;
}
.sheet-card {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sheet-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); border-color: var(--line-strong); }
.sheet-card__thumb {
    aspect-ratio: 4/3;
    background: var(--navy-900) repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 10px, transparent 10px 20px);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.sheet-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sheet-card__body { padding: 18px 20px 20px; }
.sheet-card__label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--navy-600);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.sheet-card__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.08rem;
    color: var(--navy-900);
    margin: 3px 0 8px;
}
.sheet-card__meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--ink-soft);
}
.sheet-card__count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--amber-600);
}

.empty-hint {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 20px;
    color: var(--ink-soft);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.5);
}
.empty-hint--small { padding: 24px 12px; grid-column: auto; }

/* ---------- Editor Layout ---------- */
.editor-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 900px) {
    .editor-layout { grid-template-columns: 1fr; }
}

.canvas-panel {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.canvas-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    background: #fbfcfa;
}
.canvas-toolbar__hint {
    font-size: 0.8rem;
    color: var(--ink-soft);
    font-family: var(--font-mono);
}
.canvas-toolbar__count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--navy-600);
}

.canvas-frame {
    position: relative;
    line-height: 0;
    background:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 24px 24px;
    background-color: #f2f4f1;
}
.canvas-frame img { display: block; width: 100%; height: auto; }
.canvas-frame.is-placing { cursor: crosshair; }
.canvas-frame.is-multiselect { cursor: cell; }
.canvas-frame.is-multiplace { cursor: copy; }

.selection-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 20px;
    background: #eaf6f8;
    border-bottom: 1px solid var(--line);
    font-size: 0.82rem;
    color: var(--navy-800);
    font-weight: 600;
}
.selection-bar--pending { background: #fdf1e2; }

.pins-layer { position: absolute; inset: 0; }

.pin {
    position: absolute;
    transform: translate(-50%, -100%);
    cursor: grab;
    filter: drop-shadow(0 2px 3px rgba(10,31,51,0.35));
    touch-action: none;
    z-index: 1;
}
/* .pin hat ein "transform" und bildet dadurch einen eigenen Stacking-Context
   (CSS-Spezifikation) — der z-index des Tooltips wirkt sonst NUR innerhalb
   seines eigenen Pins, nicht gegenüber benachbarten Pins. Ohne diese Regel
   kann ein danebenliegender Pin über den Tooltip rendern und ihn teilweise
   verdecken. Beim Hover/Fokus wird der aktive Pin daher explizit vor alle
   Geschwister-Pins gehoben. */
.pin:hover,
.pin:focus-within {
    z-index: 30;
}
/* Unsichtbare, großzügige Klickfläche rundum (auch unterhalb der Spitze!).
   Als eigenes Pseudo-Element umgesetzt, damit die sichtbare Position der
   Pin-Spitze exakt auf der gespeicherten Koordinate bleibt — nur die
   klickbare Fläche drumherum wird vergrößert. */
.pin::before {
    content: "";
    position: absolute;
    top: -14px;
    right: -14px;
    bottom: -14px;
    left: -14px;
}
.pin:active { cursor: grabbing; }
.pin__dot {
    position: relative;
    width: 26px; height: 26px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--pin-color, var(--amber-500));
    border: 2px solid rgba(10,31,51,0.55);
    display: grid;
    place-items: center;
}
.pin__dot svg { transform: rotate(45deg); width: 13px; height: 13px; color: var(--navy-900); }
.pin:hover .pin__dot { box-shadow: 0 0 0 6px rgba(79,209,229,0.28); }

.pin--selected .pin__dot,
.pin--selected:hover .pin__dot {
    box-shadow: 0 0 0 4px var(--navy-900), 0 0 0 7px var(--cyan-500);
}
.pin--selected .pin__dot::after {
    content: "";
    position: absolute;
    top: -6px;
    right: -6px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--cyan-500);
    border: 2px solid var(--navy-900);
    box-shadow: 0 1px 3px rgba(10,31,51,0.5);
    transform: rotate(45deg); /* Rotation des Elternelements ausgleichen, damit das Badge aufrecht steht */
}

.pin--ghost { opacity: 0.55; }

/* Vorläufige, noch nicht gespeicherte Punkte (Mehrfach-Setzen-Modus) */
.pin--pending { cursor: pointer; }
.pin--pending .pin__dot {
    background: transparent;
    border: 2.5px dashed var(--navy-900);
    box-shadow: none;
}
.pin--pending:hover .pin__dot { box-shadow: 0 0 0 6px rgba(242,165,65,0.3); border-color: var(--amber-600); }
.pin--pending .pin__badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--navy-900);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    transform: rotate(45deg);
}

/* ---------- Side panel ---------- */
.side-panel {
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 20px;
    max-height: 640px;
    overflow-y: auto;
}
.side-panel__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.side-panel__head h2 { margin: 0; font-size: 1rem; }
.badge {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    background: var(--navy-900);
    color: var(--cyan-400);
    padding: 3px 9px;
    border-radius: 999px;
}

.point-list { display: flex; flex-direction: column; gap: 10px; }
.point-row-wrap {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fbfcfa;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.point-row-wrap:hover { border-color: var(--navy-600); box-shadow: var(--shadow-card); }
.point-row-wrap--highlight {
    border-color: var(--cyan-500);
    background: #eaf6f8;
    box-shadow: 0 0 0 2px rgba(79,209,229,0.35), var(--shadow-card);
}
.point-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    cursor: pointer;
}
.point-row--selectable { padding-left: 10px; }
.point-row__check {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    accent-color: var(--navy-900);
    cursor: pointer;
}
.point-row__swatch {
    width: 14px; height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(10,31,51,0.3);
}
.point-row__main { flex: 1; min-width: 0; }
.point-row__title { font-weight: 600; font-size: 0.88rem; color: var(--navy-900); }
.point-row__sub { font-size: 0.72rem; color: var(--ink-soft); font-family: var(--font-mono); }
.point-row__expand {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    flex-shrink: 0;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    cursor: pointer;
    transition: transform .18s ease, background .15s ease, color .15s ease;
}
.point-row__expand:hover { background: var(--line); color: var(--navy-800); }
.point-row__expand.is-open { transform: rotate(180deg); color: var(--navy-800); }

.point-row__details {
    padding: 4px 14px 14px;
    border-top: 1px solid var(--line);
    background: #fff;
}
.point-detail__desc { color: var(--ink-soft); font-size: 0.82rem; line-height: 1.5; margin: 10px 0 4px; }
.point-detail__row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 0.82rem; }
.point-detail__row:last-of-type { border-bottom: none; }
.point-detail__key { color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.72rem; }
.point-detail__val { font-weight: 600; color: var(--navy-900); text-align: right; word-break: break-word; }
.point-detail__empty { color: var(--ink-soft); font-style: italic; font-size: 0.82rem; padding: 8px 0; }
.point-row__book { margin-top: 14px; width: 100%; justify-content: center; }
.point-row__book-error, .point-row__book-success { margin-top: 8px; margin-bottom: 0; }

/* Footer-Buttons (Link-/Download-Felder) im hellen Kontext der Punkteliste —
   überschreibt die dunkle Standardausführung, die eigentlich für den
   Karten-Tooltip gedacht ist (dort sonst kaum lesbar: helle Schrift auf
   hellem Grund). */
.point-row__details .tooltip-footer {
    border-top-color: var(--line);
}
.point-row__details .tooltip-footer__link {
    background: #fff;
    color: var(--navy-800);
    border-color: var(--line-strong);
}
.point-row__details .tooltip-footer__link:hover { background: var(--paper); border-color: var(--navy-600); }
.point-row__details .tooltip-footer__link--download {
    background: var(--navy-900);
    color: #fff;
}
.point-row__details .tooltip-footer__link--download:hover { background: var(--navy-700); }

/* ---------- Dialogs ---------- */
dialog.sheet-dialog {
    border: none;
    border-radius: var(--radius-lg);
    padding: 0;
    box-shadow: var(--shadow-pop);
    width: min(500px, 92vw);
    background: var(--paper-raised);
}
dialog.sheet-dialog--wide { width: min(660px, 94vw); }
dialog.sheet-dialog::backdrop { background: rgba(10, 31, 51, 0.5); backdrop-filter: blur(3px); }
.sheet-form { padding: 32px 34px; max-height: 80vh; overflow-y: auto; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; font-size: 0.85rem; font-weight: 600; color: var(--navy-800); }
.field--inline { flex-direction: row; align-items: center; gap: 8px; }

/* Toggle-Slider (z.B. "Buchung möglich") */
.field--switch { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.switch { position: relative; display: inline-flex; width: 44px; height: 25px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch__track {
    position: absolute; inset: 0;
    background: var(--line-strong);
    border-radius: 999px;
    transition: background .15s ease;
    pointer-events: none;
}
.switch__thumb {
    position: absolute; top: 2.5px; left: 3px;
    width: 20px; height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(10,31,51,0.4);
    transition: transform .15s ease;
}
.switch input:checked ~ .switch__track { background: var(--navy-900); }
.switch input:checked ~ .switch__track .switch__thumb { transform: translateX(18px); }
.switch input:focus-visible ~ .switch__track { box-shadow: 0 0 0 3px rgba(79,209,229,0.35); }
.field--checkgroup__toggle { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.field--checkgroup__toggle input[type="checkbox"] { width: 15px; height: 15px; }
.field--checkgroup select:disabled, .field--checkgroup input:disabled, .field--checkgroup textarea:disabled {
    opacity: 0.5; background: #f2f3f1; cursor: not-allowed;
}
.field input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),
.field textarea, .field select {
    font: inherit;
    font-weight: 400;
    padding: 10px 13px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink);
    width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none;
    border-color: var(--cyan-500);
    box-shadow: 0 0 0 3px rgba(79,209,229,0.22);
}
.field input[type=color] { width: 54px; height: 38px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.field input[type=file] { font-size: 0.82rem; }
.field input[type=checkbox] { width: 16px; height: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-hint { font-size: 0.78rem; color: var(--ink-soft); margin: -8px 0 18px; }
.field-hint--warning {
    color: var(--amber-600);
    background: #fdf1e2;
    border: 1px solid #f3d9ac;
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin: 6px 0 0;
}

.dynamic-fields { display: flex; flex-direction: column; gap: 4px; border-top: 1px dashed var(--line-strong); padding-top: 14px; margin-top: 6px; }

.image-upload-row { display: flex; align-items: center; gap: 12px; }
.image-upload-preview {
    width: 64px; height: 64px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    border: 1px solid var(--line-strong);
    flex-shrink: 0;
}
.image-upload-controls { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.image-upload-controls input[type=file] { font-size: 0.8rem; }

.download-field { display: flex; flex-direction: column; gap: 8px; }
.download-current {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #fbfcfa;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
}
.download-current a { color: var(--navy-700); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.download-current a:hover { text-decoration: underline; }
.download-field input[type=file] { font-size: 0.8rem; }

.form-error {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid #e3c3c3;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    margin-bottom: 14px;
}
.form-success {
    background: #eaf7ee;
    color: #2f7a45;
    border: 1px solid #bfe3c9;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    margin-bottom: 14px;
}

.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.dialog-actions--split { justify-content: space-between; align-items: center; }
.dialog-actions__group { display: flex; gap: 10px; }

/* Property management table (Zuordnung Grafik <-> Feld) */
.props-table { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 8px; }
.prop-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fbfcfa;
    transition: border-color .15s ease;
}
.prop-row:hover { border-color: var(--line-strong); }
.prop-row__order { display: flex; flex-direction: column; gap: 1px; }
.prop-row__order button {
    background: none; border: 1px solid var(--line-strong); border-radius: 4px;
    width: 20px; height: 16px; display: grid; place-items: center; cursor: pointer; color: var(--ink-soft);
    padding: 0; line-height: 1;
}
.prop-row__order button:hover { background: #fff; color: var(--navy-800); }
.prop-row__main { flex: 1; }
.prop-row__label { font-weight: 600; font-size: 0.88rem; color: var(--navy-900); }
.prop-row__meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-soft); }
.prop-row__req { color: var(--amber-600); font-weight: 700; margin-left: 4px; }
.prop-row__required-toggle { display: flex; align-items: center; gap: 5px; font-size: 0.76rem; color: var(--ink-soft); white-space: nowrap; }
.prop-row__actions { display: flex; align-items: center; gap: 10px; }

.prop-form { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 14px; }
.prop-form h3 { margin-top: 0; }

/* ---------- Eigenschaftsfelder-Katalog-Seite ---------- */
.fields-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 900px) {
    .fields-layout { grid-template-columns: 1fr; }
}
.fields-list-panel { max-height: none; }
.fields-table { display: flex; flex-direction: column; gap: 10px; }
.field-row-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fbfcfa;
    transition: border-color .15s ease;
}
.field-row-card:hover { border-color: var(--line-strong); }
.field-row-card__main { flex: 1; }
.field-row-card__label { font-weight: 600; font-size: 0.92rem; color: var(--navy-900); }
.field-row-card__meta { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-soft); margin-top: 2px; }
.field-row-card__usage {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--navy-600);
    background: #e7f6f8;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.field-row-card__actions { display: flex; gap: 6px; }

/* ---------- Veröffentlichen-Dialog ---------- */
.publish-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fbfcfa;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin: 14px 0 18px;
}
.publish-status .badge { background: var(--ink-soft); }
.copy-row { display: flex; gap: 8px; }
.copy-row input {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    padding: 8px 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: #f7f8f6;
    color: var(--ink);
}
.bookings-table { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; margin-top: 8px; }
.booking-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fbfcfa;
}
.booking-row__status {
    width: 20px; height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
    color: #fff;
}
.booking-row__status.is-ok { background: #2f7a45; }
.booking-row__status.is-fail { background: var(--danger); }
.booking-row__main { flex: 1; }
.booking-row__title { font-weight: 600; font-size: 0.85rem; color: var(--navy-900); }
.booking-row__meta { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-soft); }


/* ---------- Punkt-Tooltip auf der Grafik ---------- */
.floating-tooltip {
    position: fixed;
    z-index: 500;
    pointer-events: none;
    top: 0;
    left: 0;
}
.floating-tooltip[hidden] { display: none; }

.pin-tooltip {
    position: relative;
    display: flex;
    align-items: stretch;
    min-width: 420px;
    max-width: 620px;
    min-height: 190px;
    background: var(--navy-900);
    color: #eaf3f5;
    border-radius: var(--radius-md);
    border-top: 3px solid var(--pin-color, var(--amber-500));
    overflow: hidden;
    box-shadow: var(--shadow-pop);
    font-size: 0.85rem;
    line-height: 1.5;
}
/* Deutlicher Verbindungspfeil in der Farbe des jeweiligen Punkts, damit bei
   dicht benachbarten POIs eindeutig erkennbar bleibt, zu welchem Pin ein
   Tooltip gehört. --arrow-left wird per JS gesetzt und zeigt immer exakt
   auf die Pin-Spitze, auch wenn der Tooltip horizontal an den Bildschirmrand
   geklemmt werden musste. */
.pin-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: var(--arrow-left, 50%);
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--pin-color, var(--amber-500));
}
.pin-tooltip::before {
    content: "";
    position: absolute;
    top: calc(100% - 3px);
    left: var(--arrow-left, 50%);
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--navy-900);
    z-index: 1;
}

/* Falls unterhalb des Pins mehr Platz ist als oberhalb: Tooltip klappt nach
   unten auf, Pfeil zeigt dann nach oben zum Pin. */
.floating-tooltip.is-below .pin-tooltip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--pin-color, var(--amber-500));
}
.floating-tooltip.is-below .pin-tooltip::before {
    top: auto;
    bottom: calc(100% - 3px);
    border-top-color: transparent;
    border-bottom-color: var(--navy-900);
}

/* Linke Spalte: randloses Bild, exakt hälftig neben dem Textbereich */
.pin-tooltip__media {
    flex: 0 0 50%;
    align-self: stretch;
    background: rgba(255,255,255,0.04);
}
.pin-tooltip__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.pin-tooltip__body {
    flex: 1 1 50%;
    min-width: 0;
    padding: 16px 18px;
}
.pin-tooltip__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.18);
}
.pin-tooltip__desc {
    color: #c3d6db;
    font-size: 0.8rem;
    line-height: 1.55;
    margin: 8px 0;
}
.pin-tooltip__row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; }
.pin-tooltip__key { color: var(--cyan-400); font-family: var(--font-mono); font-size: 0.74rem; white-space: nowrap; }
.pin-tooltip__val { text-align: right; word-break: break-word; }
.pin-tooltip__empty { color: #a9bdc4; font-style: italic; }

/* Footer für Link-/Download-Link-Felder: eigene, klickbare Buttons statt
   normaler Eigenschaftszeilen — Standardausführung für dunklen Kontext
   (Karten-Tooltip). Wird auf der öffentlichen Seite (heller Kontext) in
   public.css überschrieben. */
.tooltip-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.15);
}
.tooltip-footer__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
    background: rgba(255,255,255,0.08);
    color: #eaf3f5;
    border: 1px solid rgba(255,255,255,0.18);
    transition: background .15s ease, border-color .15s ease;
    white-space: nowrap;
}
.tooltip-footer__link:hover { background: rgba(255,255,255,0.18); }
.tooltip-footer__link--download {
    background: var(--amber-500);
    color: var(--navy-900);
    border-color: transparent;
}
.tooltip-footer__link--download:hover { background: var(--amber-600); }

@media (max-width: 820px) {
    .app-shell { flex-direction: column; }
    .sidebar {
        position: static;
        height: auto;
        width: 100%;
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 3px solid var(--cyan-500);
    }
    .sidebar__nav { flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 0 16px 16px; }
    .nav-group { margin-top: 0; display: flex; align-items: center; gap: 6px; }
    .nav-group__label { padding: 0; }
    .nav-link--sub { padding-left: 12px; }
}

@media (max-width: 560px) {
    .app-main { padding: 24px 16px 48px; }
    .field-row { grid-template-columns: 1fr; }
    .sidebar__brand { padding: 16px 16px 12px; }
}

/* ---------- Fehler-Banner (Sicherheitsnetz bei JS-Fehlern) ---------- */
.fatal-error-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    background: #fff3f3;
    color: var(--danger);
    border-bottom: 2px solid var(--danger);
    padding: 12px 20px;
    font-size: 0.85rem;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.fatal-error-banner strong { color: #8a2f2f; }