:root {
  --bg: #eaf5f8;
  --panel: rgba(255,255,255,.93);
  --navy: #0b3554;
  --blue: #226f98;
  --teal: #63b7c9;
  --water1: #b7e7f2;
  --water2: #69b9d4;
  --water3: #2f82ab;
  --sand: #d9c39d;
  --shore: #b88a5a;
  --wood1: #6f5738;
  --wood2: #98794f;
  --line: #bdd4df;
  --text: #163244;
  --muted: #5f7887;
  --danger: #b24a4a;
  --success: #2c7c63;
  --shadow: 0 12px 28px rgba(16,59,93,.14);
}
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif; color:var(--text); background:linear-gradient(180deg,#f8fcff,#dceff7 48%,#f5f0e6); }
a { color:var(--navy); text-decoration:none; }
a:hover { text-decoration:underline; }
.app-shell { max-width:1500px; margin:0 auto; padding:clamp(14px, 2.5vw, 28px); }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.topbar > div:first-child { display:flex; align-items:center; gap:14px; }
.brand-mark { width:54px; height:54px; border-radius:18px; display:grid; place-items:center; font-size:28px; background:linear-gradient(180deg,var(--navy),var(--blue)); color:white; box-shadow:var(--shadow); }
.topbar h1 { margin:0; font-size:clamp(1.25rem,2.5vw,1.75rem); }
.topbar p { margin:.2rem 0 0; color:var(--muted); }
.nav-links { display:flex; gap:10px; flex-wrap:wrap; }
.nav-links a, .user-badge { background:var(--panel); border:1px solid rgba(16,59,93,.08); padding:10px 14px; border-radius:999px; box-shadow:var(--shadow); }
.user-badge { color:var(--muted); }
.main-content { display:grid; gap:20px; }
.flash { padding:14px 18px; border-radius:16px; margin-bottom:18px; box-shadow:var(--shadow); }
.flash.success { background:#e7f8f0; color:#14543f; }
.flash.error { background:#fdeceb; color:#812c2c; }
.intro-card, .table-card, .detail-card, .login-card { background:var(--panel); border:1px solid rgba(16,59,93,.08); border-radius:24px; padding:clamp(16px,2.5vw,24px); box-shadow:var(--shadow); }
.intro-card { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.intro-card h2 { margin:.1rem 0 .4rem; }
.intro-card p { margin:0; color:var(--muted); max-width:760px; line-height:1.5; }
.legend { display:flex; gap:14px; flex-wrap:wrap; color:var(--muted); }
.legend span { display:flex; align-items:center; gap:8px; }
.legend-dot { width:14px; height:14px; border-radius:50%; display:inline-block; border:1px solid rgba(16,59,93,.18); }
.harbor-map { position:relative; isolation:isolate; overflow:hidden; border-radius:34px; padding:28px clamp(14px,2vw,30px) 0; min-height:620px; background: radial-gradient(circle at 18% 12%, rgba(255,255,255,.58), transparent 22%), linear-gradient(180deg,var(--water1) 0%, var(--water2) 48%, var(--water3) 78%, #276f94 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), var(--shadow); }
.harbor-water-lines { position:absolute; inset:0 0 110px 0; z-index:-1; opacity:.42; background: repeating-linear-gradient(172deg, transparent 0 25px, rgba(255,255,255,.55) 26px 28px, transparent 29px 55px); }
.open-water-label { width:max-content; margin:0 auto 22px; color:white; font-weight:700; letter-spacing:.02em; text-shadow:0 2px 8px rgba(0,0,0,.26); background:rgba(11,53,84,.28); border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:8px 16px; }
.piers-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(16px,2.6vw,32px); align-items:end; }
.pier-card { min-width:0; }
.vessel-map-card { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:28px; padding:clamp(12px,1.8vw,18px); backdrop-filter:blur(2px); }
.pier-header { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; color:white; margin:0 0 14px; text-shadow:0 1px 2px rgba(0,0,0,.22); }
.pier-header h3 { margin:0; font-size:clamp(1.05rem,2vw,1.35rem); }
.pier-header p { margin:0; font-size:.9rem; opacity:.9; }
.real-pier-plan { display:grid; grid-template-columns:minmax(110px,1fr) minmax(64px,104px) minmax(110px,1fr); gap:clamp(10px,1.6vw,16px); align-items:stretch; }
.berth-column { display:flex; flex-direction:column; gap:8px; justify-content:flex-start; min-width:0; }
.side-label { text-align:center; color:white; font-weight:700; font-size:.85rem; opacity:.92; text-shadow:0 1px 2px rgba(0,0,0,.22); margin-bottom:2px; }
.pier-spine { position:relative; min-height:560px; border-radius:24px 24px 8px 8px; background: repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 5px, transparent 5px 42px), linear-gradient(90deg,var(--wood1), var(--wood2) 45%, #80613e); box-shadow:inset 0 0 0 2px rgba(255,255,255,.16), 0 14px 26px rgba(0,0,0,.18); }
.pier-spine::before, .pier-spine::after { content:""; position:absolute; top:18px; bottom:18px; width:8px; border-radius:20px; background:rgba(255,255,255,.16); }
.pier-spine::before { left:16px; }
.pier-spine::after { right:16px; }
.pier-nameplate { position:absolute; inset:72px 0 72px; display:grid; place-items:center; writing-mode:vertical-rl; text-orientation:mixed; letter-spacing:.08em; color:#f4ead8; font-weight:800; text-transform:uppercase; font-size:.9rem; }
.water-end, .land-end { position:absolute; left:50%; transform:translateX(-50%); z-index:2; padding:4px 8px; border-radius:999px; font-size:.72rem; font-weight:800; letter-spacing:.03em; white-space:nowrap; }
.water-end { top:8px; color:#0b3554; background:rgba(255,255,255,.84); }
.land-end { bottom:8px; color:#4e351c; background:#ead9ba; }
.berth-box { display:flex; flex-direction:column; gap:3px; min-height:58px; padding:10px 12px; border-radius:15px; color:var(--text); box-shadow:0 8px 16px rgba(16,59,93,.12); border:2px solid rgba(255,255,255,.58); position:relative; overflow:hidden; }
.berth-box::after { content:""; position:absolute; top:50%; width:18px; height:3px; background:rgba(255,255,255,.82); box-shadow:0 1px 3px rgba(0,0,0,.08); }
.berth-column.left .berth-box::after { right:-16px; }
.berth-column.right .berth-box::after { left:-16px; }
.berth-box strong { font-size:.98rem; }
.berth-thumb { width:100%; max-height:54px; object-fit:cover; border-radius:10px; border:1px solid rgba(255,255,255,.75); margin-bottom:4px; background:#fff; }
.table-thumb { width:54px; height:40px; object-fit:cover; border-radius:8px; border:1px solid var(--line); display:block; }
.boat-photo-large { margin:0 0 16px; }
.boat-photo-large img { width:100%; max-height:360px; object-fit:cover; border-radius:18px; border:1px solid var(--line); box-shadow:var(--shadow); }
.boat-photo-large figcaption { margin-top:6px; color:var(--muted); font-size:.9rem; }
.field-hint { color:var(--muted); font-size:.9rem; font-weight:400; }
.check-row { display:flex; grid-template-columns:auto 1fr; align-items:center; gap:10px; font-weight:600; }
.check-row input { width:auto; }
.form-gap { height:1.75rem; }
.site-footer { margin-top:24px; padding:18px 4px 0; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:.92rem; }
.legal-card { line-height:1.6; max-width:980px; }
.legal-card h3 { margin-top:1.5rem; }
.berth-box span { font-size:.82rem; line-height:1.2; color:inherit; opacity:.95; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.status-mitglied { background:#0057b8; border-color:#002f6c; color:#fff; }
.status-gast { background:#f28c00; border-color:#9a5600; color:#1f1600; }
.status-verein { background:#208a35; border-color:#0f4f1d; color:#fff; }
.status-offen { background:#f4f7fb; border-color:#334155; color:#0f172a; }
.land-strip { margin:30px calc(clamp(14px,2vw,30px) * -1) 0; min-height:96px; padding:22px 28px; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; color:#513a1f; background:repeating-linear-gradient(-45deg,var(--sand),var(--sand) 18px,#ceb58d 18px,#ceb58d 36px); border-top:6px solid var(--shore); box-shadow:inset 0 12px 20px rgba(255,255,255,.18); }
.land-strip strong { font-size:1.05rem; }
.land-strip span { color:#684b29; }
.pill { display:inline-block; padding:6px 10px; border-radius:999px; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; min-width:760px; }
th, td { padding:12px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { color:var(--muted); font-weight:700; }
.stack-form { display:grid; gap:14px; }
label { display:grid; gap:8px; font-weight:700; }
input, select, textarea, button { font:inherit; }
input, select, textarea { width:100%; padding:12px 14px; border-radius:14px; border:1px solid var(--line); background:white; }
button { border:none; background:linear-gradient(180deg,var(--navy),var(--blue)); color:white; padding:12px 16px; border-radius:14px; cursor:pointer; box-shadow:var(--shadow); }
button:hover { filter:brightness(1.05); }
.danger-btn, .danger-link { background:var(--danger); color:white; }
.small-link { padding:8px 10px; border-radius:10px; border:none; cursor:pointer; }
.detail-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); gap:20px; align-items:start; }
.detail-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:0; }
.detail-list div { background:#f7fbfd; border:1px solid var(--line); padding:14px; border-radius:16px; }
.detail-list dt { font-size:.85rem; color:var(--muted); margin-bottom:6px; }
.detail-list dd { margin:0; font-weight:700; }
.login-wrap { min-height:70vh; display:grid; place-items:center; }
.login-card { width:min(460px,100%); }
.demo-box { margin-top:18px; background:#f3f8fb; border:1px solid var(--line); padding:14px; border-radius:16px; color:var(--muted); }
.print-body { background:white; }
.print-sheet { padding:10mm; }
.print-sheet h1, .print-sheet p { margin:0 0 8px; }
.print-harbor { min-height:auto; border-radius:18px; padding:10px 12px 0; box-shadow:none; }
.print-harbor .piers-grid { gap:14px; }
.print-harbor .vessel-map-card { padding:8px; }
.print-harbor .pier-spine { min-height:500px; }
.print-harbor .berth-box { min-height:45px; padding:6px 8px; box-shadow:none; }
.print-harbor .berth-box span { font-size:.72rem; }
@media (max-width: 1000px) {
  .piers-grid { grid-template-columns:1fr; }
  .pier-spine { min-height:520px; }
  .detail-grid { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .app-shell { padding:12px; }
  .topbar { align-items:flex-start; }
  .nav-links { width:100%; }
  .nav-links a, .user-badge { padding:9px 11px; font-size:.92rem; }
  .harbor-map { border-radius:22px; padding:18px 8px 0; min-height:0; }
  .real-pier-plan { grid-template-columns:minmax(86px,1fr) 54px minmax(86px,1fr); gap:8px; }
  .pier-spine { min-height:480px; border-radius:18px 18px 8px 8px; }
  .pier-spine::before { left:10px; }
  .pier-spine::after { right:10px; }
  .pier-nameplate { font-size:.72rem; }
  .berth-box { min-height:54px; padding:8px 9px; border-radius:12px; }
  .berth-box strong { font-size:.9rem; }
  .berth-box span { font-size:.74rem; }
  .pier-header { display:block; }
  .pier-header p { margin-top:4px; }
  .land-strip { margin-top:18px; padding:18px 12px; }
  .detail-list { grid-template-columns:1fr; }
}
@media print {
  body { background:white; }
  .topbar, .intro-card, .nav-links, .user-badge, .flash { display:none !important; }
  .app-shell { max-width:none; padding:0; }
  .harbor-map { box-shadow:none; page-break-inside:avoid; }
  .berth-box { box-shadow:none; break-inside:avoid; }
  .land-strip { min-height:54px; padding:10px; }
}

@media (max-width: 820px) {
  .table-wrap { overflow:visible; }
  .table-card table:not(.print-table) { min-width:0; border-collapse:separate; border-spacing:0 12px; }
  .table-card table:not(.print-table) thead { display:none; }
  .table-card table:not(.print-table) tr { display:block; background:#fff; border:1px solid var(--line); border-radius:16px; padding:10px; box-shadow:0 8px 18px rgba(16,59,93,.08); }
  .table-card table:not(.print-table) td { display:grid; grid-template-columns:9rem minmax(0,1fr); gap:10px; border:0; padding:8px 6px; }
  .table-card table:not(.print-table) td:nth-child(1)::before { content:"Bild"; color:var(--muted); font-weight:700; }
  .table-card table:not(.print-table) td:nth-child(2)::before { content:"Box"; color:var(--muted); font-weight:700; }
  .table-card table:not(.print-table) td:nth-child(3)::before { content:"Steg"; color:var(--muted); font-weight:700; }
  .table-card table:not(.print-table) td:nth-child(4)::before { content:"Seite"; color:var(--muted); font-weight:700; }
  .table-card table:not(.print-table) td:nth-child(5)::before { content:"Name"; color:var(--muted); font-weight:700; }
  .table-card table:not(.print-table) td:nth-child(6)::before { content:"Vorname"; color:var(--muted); font-weight:700; }
  .table-card table:not(.print-table) td:nth-child(7)::before { content:"Bootstyp"; color:var(--muted); font-weight:700; }
  .table-card table:not(.print-table) td:nth-child(8)::before { content:"Bootsname"; color:var(--muted); font-weight:700; }
  .table-card table:not(.print-table) td:nth-child(9)::before { content:"Merkmale"; color:var(--muted); font-weight:700; }
  .table-card table:not(.print-table) td:nth-child(10)::before { content:"Telefon"; color:var(--muted); font-weight:700; }
  .table-card table:not(.print-table) td:nth-child(11)::before { content:"Status"; color:var(--muted); font-weight:700; }
  .table-card table:not(.print-table) td:nth-child(12)::before { content:"Aktion"; color:var(--muted); font-weight:700; }
}
@media (max-width: 520px) {
  .table-card table:not(.print-table) td { grid-template-columns:1fr; gap:4px; }
  .table-thumb { width:88px; height:62px; }
}
.print-table-sheet { padding:10mm; }
.print-table { width:100%; border-collapse:collapse; font-size:9.5pt; }
.print-table th, .print-table td { border:1px solid #888; padding:4px 5px; }
.print-table th { background:#f1f5f9; color:#111; }
.copyright-line { margin-top:10mm; font-size:9pt; color:#555; }
@media print {
  @page { size:A4 landscape; margin:10mm; }
  .print-table { font-size:8.5pt; }
  .print-table th, .print-table td { padding:3px 4px; }
  .site-footer { display:none !important; }
}
.button-link { display:inline-block; background:linear-gradient(180deg,var(--navy),var(--blue)); color:#fff; padding:12px 16px; border-radius:14px; box-shadow:var(--shadow); font-weight:700; }
.button-link:hover { text-decoration:none; filter:brightness(1.05); }
.inline-password-form { display:grid; grid-template-columns:minmax(160px,1fr) auto; gap:8px; align-items:center; }
.inline-password-form input { padding:8px 10px; border-radius:10px; }
.site-footer { display:none; }
@media (max-width: 700px) {
  .inline-password-form { grid-template-columns:1fr; }
}

/* Anpassungen v5 */
.boat-photo-preview {
  margin: 0 0 16px;
  max-width: 220px;
}
.boat-photo-preview img {
  width: 100%;
  max-width: 220px;
  height: 150px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 18px rgba(16,59,93,.12);
  background: #fff;
  display: block;
}
.boat-photo-preview figcaption {
  margin-top: 6px;
  color: var(--muted);
  font-size: .9rem;
  overflow-wrap: anywhere;
}
.image-edit-box {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f7fbfd;
}
.image-delete-row {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  width: fit-content;
  max-width: 100%;
}
.image-delete-row input {
  width: auto;
  min-width: 18px;
  height: 18px;
  margin: 0;
}
.image-delete-row span {
  line-height: 1.25;
}
.form-gap { height: 2.4rem !important; }
@media (max-width: 520px) {
  .boat-photo-preview,
  .boat-photo-preview img { max-width: 160px; }
  .boat-photo-preview img { height: 110px; }
  .image-delete-row { width: 100%; }
}

/* Anpassungen v6: Bildvorschau, Checkbox und mobile Darstellung */
.detail-card { min-width: 0; overflow-wrap: anywhere; }
.detail-summary-card { overflow: hidden; }
.detail-summary-card .boat-photo-preview {
  float: left;
  width: 160px;
  max-width: 42%;
  margin: 0 18px 12px 0;
}
.detail-summary-card .boat-photo-preview img {
  width: 160px;
  max-width: 100%;
  height: 112px;
  object-fit: cover;
}
.detail-summary-card .detail-list { clear: both; }
.image-delete-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
}
.image-delete-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
}
.image-delete-row label {
  display: inline !important;
  margin: 0;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
}
.stack-form button[type="submit"] { width: fit-content; min-width: 160px; }
.form-gap { height: 2.8rem !important; }
@media (max-width: 760px) {
  .detail-summary-card .boat-photo-preview {
    float: none;
    width: 140px;
    max-width: 100%;
    margin: 0 0 14px;
  }
  .detail-summary-card .boat-photo-preview img {
    width: 140px;
    height: 98px;
  }
  .stack-form button[type="submit"], .danger-btn { width: 100%; }
}
@media (max-width: 420px) {
  .real-pier-plan { grid-template-columns: minmax(76px,1fr) 46px minmax(76px,1fr); gap: 6px; }
  .berth-box { padding: 7px 7px; }
  .berth-thumb { max-height: 44px; }
  .table-card table:not(.print-table) tr { padding: 8px; }
  .table-card table:not(.print-table) td { padding: 7px 4px; }
  .image-delete-row { max-width: 100%; }
}

/* Anpassungen v7: Bild als gleichgroßes Feld in der Box-Detailansicht */
.detail-image-field dd {
  display: flex;
  align-items: center;
  min-height: 76px;
}
.detail-thumb {
  width: 96px;
  height: 64px;
  max-width: 100%;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  display: block;
}
@media (max-width: 760px) {
  .detail-image-field dd { min-height: auto; }
  .detail-thumb { width: 84px; height: 56px; }
}

/* Anpassungen v10: Benutzerformulare untereinander und Druck-Thumbnails */
.users-stack { grid-template-columns: 1fr !important; }
.users-stack .detail-card { width: 100%; }
.print-thumb {
  width: 42px;
  height: 32px;
  object-fit: cover;
  border: 1px solid #777;
  border-radius: 4px;
  display: block;
}
@media print {
  .print-thumb { width: 38px; height: 28px; }
}

/* Anpassungen v11: mobile Navigation als Dropdown */
.mobile-menu { display:none; position:relative; }
.mobile-menu summary { list-style:none; cursor:pointer; user-select:none; background:var(--panel); border:1px solid rgba(16,59,93,.08); padding:10px 14px; border-radius:999px; box-shadow:var(--shadow); font-weight:700; color:var(--navy); }
.mobile-menu summary::-webkit-details-marker { display:none; }
.mobile-menu summary::after { content:" ▾"; font-size:.9em; }
.mobile-menu[open] summary::after { content:" ▴"; }
.mobile-menu-panel { position:absolute; right:0; top:calc(100% + 8px); z-index:20; min-width:230px; display:grid; gap:6px; padding:10px; background:rgba(255,255,255,.98); border:1px solid rgba(16,59,93,.12); border-radius:18px; box-shadow:0 18px 34px rgba(16,59,93,.22); }
.mobile-menu-panel a { display:block; padding:11px 12px; border-radius:12px; font-weight:700; color:var(--text); }
.mobile-menu-panel a:hover { background:#eaf5f8; text-decoration:none; }
@media (max-width: 720px) {
  .topbar { align-items:center; }
  .topbar > div:first-child { min-width:0; flex:1 1 auto; }
  .nav-links { display:none; }
  .mobile-menu { display:block; margin-left:auto; }
  .user-badge { width:100%; text-align:center; }
}
@media print {
  .mobile-menu { display:none !important; }
}

/* Anpassungen v12: größere Bildanzeige im Box-Detail und Importbereich */
.detail-image-field {
  grid-column: 1 / -1;
}
.detail-image-field dd {
  min-height: 180px;
}
.detail-thumb {
  width: min(100%, 320px) !important;
  height: 220px !important;
  object-fit: cover;
}
.export-grid { grid-template-columns: 1fr; }
@media (max-width: 760px) {
  .detail-image-field dd { min-height: auto; }
  .detail-thumb {
    width: min(100%, 260px) !important;
    height: 180px !important;
  }
}
@media (max-width: 420px) {
  .detail-thumb {
    width: 100% !important;
    height: auto !important;
    max-height: 220px;
  }
}