:root {
  --navy-1000: #010912;
  --navy-950: #03131f;
  --navy-900: #06243a;
  --navy-850: #082e47;
  --navy-800: #0a3b57;
  --cyan-500: #38d9ee;
  --cyan-400: #70e4f4;
  --cyan-300: #a6edf7;
  --foam: #f5fbff;
  --mist: #c9dce5;
  --muted: #9ab4c2;
  --amber: #f3b45e;
  --danger: #ff7b77;
  --success: #63e6be;
  --glass: rgba(4, 26, 43, .72);
  --glass-strong: rgba(3, 22, 37, .89);
  --glass-soft: rgba(9, 42, 63, .58);
  --line: rgba(137, 220, 235, .30);
  --line-strong: rgba(112, 228, 244, .62);
  --shadow: 0 24px 80px rgba(0, 0, 0, .38);
  --glow: 0 0 0 1px rgba(112, 228, 244, .22), 0 0 32px rgba(56, 217, 238, .13);
  --radius-xl: 24px;
  --radius: 17px;
  --radius-sm: 11px;
  --shell: 1510px;
  --header-h: 92px;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: Rockwell, "Roboto Slab", "Courier New", Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --base-font: 16px;
  --content-opacity: .72;
}

html[data-site-size="small"] { --base-font: 14px; --shell: 1320px; }
html[data-site-size="normal"] { --base-font: 16px; --shell: 1510px; }
html[data-site-size="large"] { --base-font: 18px; --shell: 1660px; }
html[data-contrast="soft"] { --glass: rgba(8, 37, 56, .62); --glass-strong: rgba(6, 30, 48, .80); --line: rgba(171, 222, 232, .20); --content-opacity: .64; }
html[data-contrast="high"] { --glass: rgba(0, 14, 25, .92); --glass-strong: rgba(0, 10, 20, .97); --line: rgba(191, 243, 250, .58); --line-strong: rgba(255,255,255,.82); --muted: #e0eef3; --content-opacity: .88; }

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; background: var(--navy-1000); font-size: var(--base-font); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--foam);
  background: var(--navy-1000);
  font-family: var(--sans);
  line-height: 1.58;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(56, 217, 238, .09), transparent 34rem),
    linear-gradient(180deg, transparent 0%, rgba(0, 7, 14, .12) 40%, rgba(0, 7, 14, .90) 100%);
}

.site-backdrop {
  position: fixed;
  inset: 0;
  z-index: -3;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.012);
  filter: saturate(.98) contrast(1.04);
}
.site-vignette {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 10, 20, .55), rgba(0, 15, 26, .08) 52%, rgba(0, 10, 20, .28)),
    linear-gradient(180deg, rgba(0, 9, 17, .25), transparent 35%, rgba(0, 7, 14, .88));
}
.scene-home .site-backdrop { background-image: url('../backgrounds/home.jpg'); }
.scene-logbook .site-backdrop { background-image: url('../backgrounds/logbook.jpg'); }
.scene-gallery .site-backdrop { background-image: url('../backgrounds/gallery.jpg'); }
.scene-downloads .site-backdrop { background-image: url('../backgrounds/downloads.jpg'); }
.scene-forum .site-backdrop { background-image: url('../backgrounds/forum.jpg'); }
.scene-contact .site-backdrop { background-image: url('../backgrounds/contact.jpg'); }
.scene-legal .site-backdrop { background-image: url('../backgrounds/legal.jpg'); }
.scene-privacy .site-backdrop { background-image: url('../backgrounds/privacy.jpg'); }
.scene-auth .site-backdrop { background-image: url('../backgrounds/auth.jpg'); }
.scene-dashboard .site-backdrop { background-image: url('../backgrounds/dashboard.jpg'); }
.scene-generic .site-backdrop { background-image: url('../backgrounds/generic.jpg'); }

::selection { background: var(--cyan-400); color: var(--navy-950); }
a { color: var(--cyan-300); text-decoration: none; }
a:hover { color: #fff; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
svg.icon { flex: 0 0 auto; vertical-align: middle; }
code { font-family: var(--mono); color: var(--cyan-300); background: rgba(0,0,0,.28); padding: .1rem .35rem; border-radius: 6px; }

.shell { width: min(calc(100% - 2.4rem), var(--shell)); margin-inline: auto; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 1000; padding: .75rem 1rem; border-radius: 9px; color: var(--navy-950); background: var(--cyan-400); font-weight: 850; }
.skip-link:focus { top: 1rem; }
.glass-frame, .glass-card, .panel {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(9, 46, 69, .74), var(--glass));
  box-shadow: var(--shadow), var(--glow);
  backdrop-filter: blur(18px) saturate(1.16);
  -webkit-backdrop-filter: blur(18px) saturate(1.16);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 70;
  padding: 1.05rem 0 .55rem;
  background: linear-gradient(180deg, rgba(0, 11, 20, .66), transparent);
}
.header-inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1.35rem;
  padding: .75rem 1.05rem;
  border-radius: 18px;
}
.brand { display: inline-flex; align-items: center; gap: .85rem; min-width: max-content; color: white; }
.brand:hover { color: white; }
.brand-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--foam);
  background: linear-gradient(155deg, rgba(14, 72, 101, .92), rgba(2, 21, 35, .92));
  border: 1px solid rgba(112, 228, 244, .38);
  box-shadow: inset 0 0 18px rgba(112,228,244,.10), 0 0 22px rgba(56,217,238,.14);
}
.brand-copy { display: grid; line-height: 1.05; }
.brand-copy strong { font-size: 1.35rem; letter-spacing: -.025em; }
.brand-copy small { margin-top: .35rem; color: var(--cyan-400); font-size: .61rem; font-weight: 850; letter-spacing: .17em; text-transform: uppercase; }
.site-nav { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: .1rem; }
.site-nav a, .nav-form button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .48rem;
  padding: .65rem .74rem;
  border: 0;
  border-radius: 10px;
  color: #f0f8fb;
  background: transparent;
  font-size: .78rem;
  font-weight: 760;
  white-space: nowrap;
  transition: .2s ease;
}
.site-nav a:hover, .nav-form button:hover { color: white; background: rgba(112,228,244,.10); }
.site-nav a.active { color: var(--cyan-300); background: rgba(56,217,238,.08); box-shadow: inset 0 -2px 0 var(--cyan-400); }
.site-nav .nav-join, .site-nav .nav-admin {
  margin-left: .35rem;
  padding-inline: 1rem;
  border: 1px solid rgba(112,228,244,.70);
  color: white;
  background: linear-gradient(160deg, rgba(0, 142, 174, .45), rgba(4, 34, 53, .72));
  box-shadow: 0 0 22px rgba(56,217,238,.15);
}
.site-nav .nav-join:hover, .site-nav .nav-admin:hover { background: rgba(20, 152, 181, .55); }
.site-nav .nav-search { width: 42px; justify-content: center; padding-inline: 0; }
.nav-separator { width: 1px; height: 30px; margin: 0 .45rem; background: var(--line); }
.nav-form { margin: 0; }


/* Main, hero and page headings */
.site-main { min-height: calc(100vh - 180px); padding-block: 1.2rem 8rem; }
.hero {
  min-height: min(680px, calc(100vh - 150px));
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(270px, .55fr);
  align-items: center;
  gap: 2.5rem;
  position: relative;
  padding: 3.5rem 1rem 4rem;
}
.hero__content { max-width: 780px; }
.eyebrow, .hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.2rem;
  color: var(--cyan-400);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.hero h1, .page-header h1, .article h1 {
  margin: 0;
  max-width: 980px;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(3rem, 6.2vw, 6.1rem);
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
  text-shadow: 0 3px 0 rgba(0,0,0,.35), 0 10px 34px rgba(0,0,0,.45);
}
.hero__content > p, .page-header__copy > p, .lead {
  max-width: 680px;
  margin: 1.25rem 0 0;
  color: #d9e8ee;
  font-size: clamp(1rem, 1.35vw, 1.23rem);
  line-height: 1.68;
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
}
.hero__actions, .button-row { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-top: 1.55rem; }
.hero__panel {
  align-self: end;
  justify-self: end;
  max-width: 360px;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(3, 25, 41, .64);
  box-shadow: var(--glow);
  backdrop-filter: blur(13px);
}
.hero__panel strong { display: flex; align-items: center; gap: .5rem; color: var(--cyan-300); font-size: 1.05rem; }
.hero__panel p { margin: .6rem 0 0; color: var(--mist); }
.page-header {
  min-height: 350px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: 3.4rem .75rem 2.4rem;
}
.page-header__copy { max-width: 840px; }
.page-header h1 { font-size: clamp(3rem, 5.3vw, 5.2rem); }
.page-header__icon { width: 86px; height: 86px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 24px; color: var(--cyan-400); background: rgba(3,26,43,.58); box-shadow: var(--glow); }
.page-header__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.45rem; }

/* Buttons */
.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .68rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: #effcff;
  background: rgba(5, 36, 55, .68);
  box-shadow: inset 0 0 12px rgba(112,228,244,.04);
  font-weight: 800;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { color: white; transform: translateY(-2px); background: rgba(11, 75, 101, .78); box-shadow: 0 0 24px rgba(56,217,238,.18); }
.btn.primary{
    border-color:rgba(112,228,244,.82);

    background:linear-gradient(
        145deg,
        rgba(12,156,185,.72),
        rgba(5,75,103,.76)
    );

    box-shadow:0 0 25px rgba(56,217,238,.22);

    min-height:46px;

    padding:.75rem 1rem;

    font-size:.98rem;

    border-radius:14px;
}
.btn.secondary { background: rgba(2,24,40,.62); }
.btn.danger { color: #fff; border-color: rgba(255,123,119,.58); background: rgba(137,33,35,.62); }
.btn.small { min-height: 36px; padding: .45rem .7rem; font-size: .78rem; }
.text-link { color: var(--cyan-400); font-weight: 800; }

/* Home feature cards */
.stats-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .8rem; margin: -3.8rem 0 1rem; position: relative; z-index: 2; }
.stats-strip > div { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 15px; background: rgba(2,24,40,.68); box-shadow: var(--glow); backdrop-filter: blur(14px); }
.stats-strip strong { display: block; color: white; font-family: var(--display); font-size: 1.65rem; line-height: 1; }
.stats-strip span { display: block; margin-top: .35rem; color: var(--muted); font-size: .76rem; }
.feature-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: .8rem; margin: 1rem 0 1.4rem; }
.feature-card {
  min-height: 210px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.05rem;
  border: 1px solid var(--line);
  border-radius: 17px;
  color: white;
  background: rgba(4,33,51,.76);
  box-shadow: var(--glow);
  isolation: isolate;
  transition: transform .2s ease, border-color .2s ease;
}
.feature-card::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--feature-bg, linear-gradient(145deg,#07324c,#051b2d)) center/cover; filter: saturate(.85); transform: scale(1.03); transition: transform .35s ease; }
.feature-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(1,10,18,.08), rgba(1,12,22,.94)); }
.feature-card:hover { color: white; transform: translateY(-5px); border-color: var(--line-strong); }
.feature-card:hover::before { transform: scale(1.09); }
.feature-card:nth-child(1) { --feature-bg: url('../backgrounds/thumb-logbook.jpg'); }
.feature-card:nth-child(2) { --feature-bg: url('../backgrounds/thumb-gallery.jpg'); }
.feature-card:nth-child(3) { --feature-bg: url('../backgrounds/thumb-chat.jpg'); }
.feature-card:nth-child(4) { --feature-bg: url('../backgrounds/thumb-forum.jpg'); }
.feature-card:nth-child(5) { --feature-bg: url('../backgrounds/thumb-downloads.jpg'); }
.feature-card:nth-child(6) { --feature-bg: url('../backgrounds/thumb-contact.jpg'); }
.feature-card__icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: .7rem; border-radius: 12px; color: var(--cyan-300); background: rgba(3,30,48,.76); border: 1px solid var(--line); }
.feature-card strong { font-size: 1rem; }
.feature-card p { margin: .4rem 0 0; color: #d4e5eb; font-size: .78rem; line-height: 1.5; }

/* Panels and grids */
.content-grid { display: grid; gap: 1rem; }
.two-columns { grid-template-columns: repeat(2, minmax(0,1fr)); }
.three-columns { grid-template-columns: repeat(3, minmax(0,1fr)); }
.panel { padding: 1.2rem; border-radius: var(--radius); }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .95rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.panel-heading > span { display: inline-flex; align-items: center; gap: .55rem; color: white; font-weight: 850; }
.panel h2, .panel h3 { color: white; }
.panel p { color: #c9dce4; }
.panel-note{
    color:var(--muted);
    font-size:.82rem;
    line-height:1.35;
    margin:.25rem 0 .8rem;
}
.tag, .status-pill { display: inline-flex; align-items: center; gap: .3rem; width: max-content; padding: .25rem .48rem; border: 1px solid rgba(112,228,244,.24); border-radius: 7px; color: var(--cyan-300); background: rgba(16,105,130,.16); font-size: .67rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.status-pill.draft { color: #ffe3a8; border-color: rgba(243,180,94,.35); background: rgba(141,89,25,.22); }
.status-pill.offline { color: #ffc0bd; border-color: rgba(255,123,119,.36); background: rgba(124,31,34,.24); }

.news-card { position: relative; padding: 1.15rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(5,35,53,.62); }
.news-card + .news-card { margin-top: .75rem; }
.news-card time { color: var(--cyan-400); font-size: .7rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.news-card h2 { margin: .35rem 0 .45rem; font-family: var(--display); font-size: clamp(1.35rem,2vw,2rem); }
.news-card p { margin: 0 0 .65rem; }
.file-row { display: grid; grid-template-columns: auto 1fr auto; gap: .85rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.file-row:last-child { border-bottom: 0; }
.file-row small { display: block; color: var(--muted); }
.file-icon, .download-symbol { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 11px; color: var(--cyan-300); border: 1px solid var(--line); background: rgba(16,105,130,.15); }

/* Download cards */
.filter-bar { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; margin-bottom: 1rem; }
.filter-bar input { flex: 1 1 280px; }
.filter-bar select { min-width: 190px; }
.file-grid { display: grid; gap: .75rem; }
.download-card { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(2,24,40,.54); }
.download-card.featured { border-color: var(--line-strong); box-shadow: 0 0 20px rgba(56,217,238,.08); }
.download-card h2 { margin: .45rem 0 .3rem; font-size: 1.05rem; }
.download-card p { margin: 0; }
.file-meta { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .65rem; color: var(--muted); font-size: .73rem; }
.file-meta span { display: inline-flex; align-items: center; gap: .3rem; }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .85rem; }
.gallery-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: rgba(3,27,43,.72); box-shadow: var(--glow); }
.gallery-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform .35s ease; }
.gallery-card:hover img { transform: scale(1.045); }
.gallery-card__body { padding: .9rem; }
.gallery-card__body h2 { margin: 0 0 .35rem; font-family: var(--display); }
.gallery-card__body p { margin: 0 0 .5rem; }
.gallery-card__body small { color: var(--muted); }

/* Forum */
.forum-category, .topic-card { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: 13px; background: rgba(3,28,45,.62); }
.forum-category + .forum-category, .topic-card + .topic-card { margin-top: .65rem; }
.forum-category h2, .topic-card h2 { margin: 0; font-size: 1rem; }
.forum-category p, .topic-card p { margin: .28rem 0 0; font-size: .82rem; }
.forum-icon { width: 47px; height: 47px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--cyan-300); background: rgba(9,65,89,.35); }
.post { display: grid; grid-template-columns: 185px 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: rgba(3,27,43,.68); }
.post + .post { margin-top: .75rem; }
.post__author { padding: 1rem; border-right: 1px solid var(--line); background: rgba(3,19,32,.56); }
.post__body { padding: 1rem; }

/* Members, dashboard, admin */
.member-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .8rem; }
.member-card, .menu-tile, .list-card, .plugin-card { padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(3,28,45,.68); box-shadow: var(--glow); }
.avatar { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; color: white; background: linear-gradient(145deg, #0e7695, #06243a); border: 1px solid var(--line-strong); font-weight: 900; }
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .8rem; }
.dashboard-menu { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; }
.menu-tile { min-height: 150px; color: white; }
.menu-tile:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.menu-tile h2 { margin: .65rem 0 .2rem; }
.admin-nav { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .55rem; margin: 1rem 0; }
.admin-nav a { display: flex; align-items: center; gap: .45rem; padding: .75rem; border: 1px solid var(--line); border-radius: 10px; color: white; background: rgba(3,28,45,.7); font-weight: 800; }
.admin-nav a:hover { border-color: var(--line-strong); }
.plugin-card { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; }
.plugin-card + .plugin-card { margin-top: .7rem; }
.plugin-status { display: inline-flex; align-items: center; gap: .35rem; color: var(--success); font-weight: 850; }
.plugin-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* Forms */
.stack-form { display: grid; gap:.65rem; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
label { display: grid; gap: .35rem; color: #eaf5f8; font-size: .79rem; font-weight: 760; }
input, textarea, select {
  width: 100%;
  min-height: 44px;
  padding: .68rem .78rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: 0;
  color: white;
  background: rgba(0, 16, 28, .68);
  box-shadow: inset 0 1px 8px rgba(0,0,0,.18);
}
textarea { resize: vertical; min-height: 140px; }
input::placeholder, textarea::placeholder { color: #7f9aa8; }
input:focus, textarea:focus, select:focus { border-color: var(--cyan-400); box-shadow: 0 0 0 3px rgba(56,217,238,.12); }
select option { color: white; background: var(--navy-900); }
.password-wrap { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.password-toggle { border: 1px solid var(--line); border-radius: 8px; color: white; background: rgba(3,28,45,.7); }
.honeypot { position: absolute; left: -9999px; }
.hint { color: var(--muted); font-size: .75rem; }
.upload-plugin { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: rgba(3,27,43,.7); }
.upload-plugin__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.upload-dropzone { margin: 1rem; padding: 2rem 1rem; border: 2px dashed var(--line-strong); border-radius: 13px; text-align: center; background: rgba(0,15,26,.38); }
.upload-dropzone.is-dragging { background: rgba(16,105,130,.22); transform: scale(1.01); }
.upload-dropzone input { position: absolute; opacity: 0; pointer-events: none; }
.upload-dropzone label { align-items: center; cursor: pointer; }
.file-preview { margin: 0 1rem 1rem; padding: .8rem; border-radius: 9px; color: var(--muted); background: rgba(0,13,24,.45); }
.file-preview.has-file { color: white; border-left: 3px solid var(--cyan-400); }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 13px; }
table { width: 100%; border-collapse: collapse; background: rgba(2,22,37,.62); }
th, td { padding: .76rem .7rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--cyan-300); background: rgba(1,16,28,.78); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; }
tr:last-child td { border-bottom: 0; }
tr.unread td { background: rgba(56,217,238,.07); font-weight: 750; }
table small { display: block; color: var(--muted); }
.inline-form { display: inline; }
.reject-form { display: flex; gap: .4rem; margin-block: .35rem; }

/* Auth and articles */
.auth-grid {
    min-height:480px;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(360px,520px);
    gap:1.5rem;
    align-items:stretch;
}
.auth-scene { max-width: 700px; }
.auth-scene h1 { font-family: var(--display); font-size: clamp(3rem,6vw,5.6rem); line-height: 1; }
.article { max-width: 1320px; margin-inline: auto; }
.article-header { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.prose { color: #d7e6eb; }
.prose h2 { margin: 1.8rem 0 .55rem; color: white; font-family: var(--display); font-size: 1.55rem; }
.prose h3 { color: var(--cyan-300); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose ul { padding-left: 1.25rem; }
.prose li + li { margin-top: .35rem; }
.legal-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .85rem; }
.legal-card { padding: 1.1rem; border: 1px solid var(--line); border-radius: 15px; background: rgba(3,27,43,.72); box-shadow: var(--glow); }
.legal-card h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .65rem; font-family: var(--display); font-size: 1.18rem; }
.legal-card p, .legal-card li { color: #c9dce4; font-size: .86rem; }
.legal-card.wide { grid-column: span 2; }
.legal-warning { padding: 1rem; border: 1px solid rgba(243,180,94,.58); border-radius: 13px; color: #ffe4b3; background: rgba(91,55,12,.55); }

/* Page-specific compositions */
.mhl-section { margin-top: 1rem; }
.mhl-kicker { display: inline-flex; align-items: center; gap: .45rem; color: var(--cyan-400); font-size: .72rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.mhl-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .85rem; }
.mhl-card { position: relative; overflow: hidden; min-height: 230px; padding: 1rem; border: 1px solid var(--line); border-radius: 15px; background: rgba(3,27,43,.72); box-shadow: var(--glow); }
.mhl-card h2 { font-family: var(--display); }
.mhl-side-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,380px); gap: 1rem; }
.mhl-side-stack { display: grid; gap: .8rem; align-content: start; }
.mhl-callout { padding: 1rem; border: 1px solid var(--line-strong); border-radius: 15px; background: rgba(3,28,45,.82); box-shadow: var(--glow); }
.mhl-callout h2 { display: flex; align-items: center; gap: .5rem; margin-top: 0; font-family: var(--display); }
.mhl-category-row { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: .6rem; }
.mhl-category-chip { min-height: 76px; display: flex; align-items: center; gap: .55rem; padding: .75rem; border: 1px solid var(--line); border-radius: 12px; color: white; background: rgba(3,27,43,.62); }
.mhl-category-chip:hover { border-color: var(--line-strong); }
.gull-card { position: relative; min-height: 210px; overflow: hidden; }

/* Flash and empty */
.flash { max-width: 980px; margin: 0 auto 1rem; display: flex; gap: .65rem; align-items: flex-start; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--glass-strong); box-shadow: var(--glow); }
.flash.success { border-color: rgba(99,230,190,.5); color: #c9ffe9; }
.flash.error { border-color: rgba(255,123,119,.5); color: #ffd2d0; }
.flash ul { margin: .35rem 0 0; }
.empty-state { padding: 2rem; text-align: center; color: var(--muted); }
.empty-state .icon { color: var(--cyan-400); }
.error-page { min-height: 60vh; display: grid; place-items: center; text-align: center; }

/* Display controls */
.display-toggle { position: fixed; right: 1.2rem; top: 8.5rem; z-index: 91; width: 44px; height: 44px; display: none; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: white; background: var(--glass-strong); box-shadow: var(--glow); }
.display-panel { position: fixed; right: max(1.4rem, calc((100vw - var(--shell))/2)); top: 9.5rem; z-index: 90; width: 220px; padding: .9rem; border-radius: 15px; }
.display-panel__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); color: white; font-size: .68rem; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.display-panel__head > span { display: flex; align-items: center; gap: .4rem; }
.display-panel__head button { border: 0; color: white; background: transparent; font-size: 1.2rem; }
.display-panel fieldset { margin: .75rem 0 0; padding: 0; border: 0; }
.display-panel legend { margin-bottom: .4rem; color: var(--muted); font-size: .68rem; }
.segmented-control { display: grid; grid-template-columns: repeat(3,1fr); gap: .4rem; }
.segmented-control button { min-height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: white; background: rgba(0,15,27,.48); }
.segmented-control button.active { border-color: var(--cyan-400); color: var(--cyan-300); background: rgba(10,100,128,.32); box-shadow: 0 0 14px rgba(56,217,238,.12); }
.contrast-control button:nth-child(1) { font-size: .8rem; }
.contrast-control button:nth-child(2) { font-size: 1rem; }
.contrast-control button:nth-child(3) { font-size: 1.2rem; font-weight: 900; }

/* Footer and waves */
.site-footer { position: relative; margin-top: auto; padding: 5.2rem 0 1.25rem; background: linear-gradient(180deg, transparent, rgba(0,9,18,.92) 45%, #010a12); }
.wave-field { position: absolute; inset: 0 0 auto; height: 92px; overflow: hidden; pointer-events: none; }
.wave-field span { position: absolute; left: -5%; width: 110%; height: 70px; border-radius: 48% 52% 0 0; border-top: 2px solid rgba(112,228,244,.75); background: transparent; filter: drop-shadow(0 0 8px rgba(56,217,238,.35)); }
.wave-field span:nth-child(1) { top: 20px; transform: rotate(-1deg); }
.wave-field span:nth-child(2) { top: 35px; opacity: .65; transform: rotate(1.2deg); }
.wave-field span:nth-child(3) { top: 50px; opacity: .35; transform: rotate(-.4deg); }
.footer-inner { display: grid; justify-items: center; gap: .65rem; text-align: center; }
.footer-links { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.footer-links a { color: var(--muted); font-size: .76rem; }
.footer-social { display: flex; align-items: center; gap: .85rem; color: var(--cyan-300); }
.copyright { margin: 0; color: #dbe8ed; font-size: .78rem; }
.copyright span { margin-inline: .35rem; color: var(--cyan-400); }
.back-to-top { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 60; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--cyan-300); background: var(--glass-strong); box-shadow: var(--glow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s ease; }
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.page-link { display: grid; place-items: center; min-width: 38px; min-height: 38px; padding: .4rem; border: 1px solid var(--line); border-radius: 8px; color: white; background: rgba(2,23,38,.62); }
.page-item.active .page-link { color: var(--navy-950); background: var(--cyan-400); }
.page-item.disabled .page-link { opacity: .45; }

/* Responsiveness */




@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

.full-span { grid-column: 1 / -1; }

/* Initial glass preloader */
.mhl-preloader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(1, 13, 23, .58);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  opacity: 1;
  visibility: visible;
  transition: opacity .46s ease, visibility .46s ease;
}
.mhl-preloader.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.mhl-preloader__glass {
  width: min(92vw, 440px);
  display: grid;
  justify-items: center;
  gap: .6rem;
  padding: 2.2rem 2rem 1.7rem;
  border: 1px solid rgba(166, 237, 247, .42);
  border-radius: 28px;
  color: white;
  text-align: center;
  background: linear-gradient(145deg, rgba(12, 55, 78, .72), rgba(2, 18, 31, .82));
  box-shadow: 0 30px 110px rgba(0,0,0,.52), inset 0 0 45px rgba(112,228,244,.07), 0 0 44px rgba(56,217,238,.16);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.mhl-preloader__bird {
  display: grid;
  place-items: center;
  color: var(--cyan-300);
  filter: drop-shadow(0 0 18px rgba(112, 228, 244, .4));
  animation: mhl-gull 1.8s ease-in-out infinite;
}
.mhl-preloader__glass strong {
  font-family: var(--display);
  font-size: clamp(1.7rem, 6vw, 2.6rem);
  letter-spacing: -.025em;
}
.mhl-preloader__glass > span:not(.mhl-preloader__bird) { color: var(--mist); font-size: .88rem; }
.mhl-preloader__glass i {
  width: min(250px, 72%);
  height: 3px;
  margin-top: .65rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}
.mhl-preloader__glass i::after {
  content: "";
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--cyan-400), transparent);
  animation: mhl-loader 1.15s ease-in-out infinite;
}
@keyframes mhl-gull { 50% { transform: translateY(-8px) rotate(-2deg); } }
@keyframes mhl-loader { from { transform: translateX(-140%); } to { transform: translateX(330%); } }

/* Context-menu deterrence notice. This is intentionally not described as a security control. */
.ui-protection-toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 1600;
  width: max-content;
  max-width: calc(100vw - 2rem);
  padding: .75rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: white;
  background: rgba(1, 18, 31, .94);
  box-shadow: var(--shadow), var(--glow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  transform: translate(-50%, 18px);
  pointer-events: none;
  transition: .22s ease;
  font-size: .8rem;
  text-align: center;
}
.ui-protection-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.legal-address { font-style: normal; }
.cookie-table th:first-child { min-width: 260px; }

@media (prefers-reduced-motion: reduce) {
  .mhl-preloader__bird,
  .mhl-preloader__glass i::after { animation: none !important; }
}

/* MeerHeimatLiebe 2.5.0: Küstenkodex, lokales CAPTCHA und Zwei-Faktor-Sicherheit */
.captcha-box {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding:.45rem .75rem .55rem;
  background: linear-gradient(135deg, rgba(56,217,238,.09), rgba(5,25,41,.62));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.captcha-box legend {
  padding: 0 .45rem;
  color: var(--cyan-300);
  font-weight: 800;
  display:flex;
  align-items:center;
  gap:.35rem;
}

.captcha-box label {
  margin:.2rem 0 .4rem;
}

.captcha-box small {
  color: var(--muted);
  line-height:1.45;
}

.captcha-box strong {
  color: var(--foam);
  font-family: var(--display);
  letter-spacing:.06em;
}

/* ===== Premium Login CAPTCHA ===== */

.captcha-intro{
    margin:.35rem 0 .9rem;
    color:rgba(255,255,255,.72);
    font-size:.92rem;
    line-height:1.5;
}

.captcha-label{
    display:flex;
    flex-direction:column;
    gap:.65rem;
}

.captcha-question{
    font-size:1rem;
    font-weight:600;
    color:var(--foam);
}

.captcha-question strong{
    color:var(--cyan-300);
}

.captcha-box small{
    display:flex;
    align-items:flex-start;
    gap:.45rem;
}

.captcha-box small svg{
    flex:none;
    margin-top:2px;
}

.security-status { display:flex; align-items:flex-start; gap:1rem; padding:1rem; border:1px solid var(--line); border-radius:var(--radius); background:rgba(255,255,255,.035); margin-bottom:1rem; }
.security-status.active { border-color:rgba(99,230,190,.55); background:rgba(99,230,190,.08); }
.security-status strong { color:var(--foam); font-size:1.05rem; }
.security-status p { margin:.25rem 0 0; color:var(--muted); }
.setup-steps h3 { margin:1.2rem 0 .55rem; color:var(--cyan-300); }
.secret-box { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; padding:.85rem; border-radius:var(--radius-sm); background:rgba(0,0,0,.28); border:1px solid var(--line); }
.secret-box code, .uri-code { overflow-wrap:anywhere; color:var(--foam); letter-spacing:.08em; }
.uri-code { display:block; margin-top:.65rem; padding:.8rem; border-radius:var(--radius-sm); background:rgba(0,0,0,.35); }
.recovery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
.recovery-grid code { text-align:center; padding:.7rem; border:1px dashed var(--line-strong); border-radius:10px; background:rgba(1,9,18,.55); color:var(--foam); letter-spacing:.08em; }
.recovery-highlight { border-color:rgba(243,180,94,.55); }
.danger-zone { margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid rgba(255,123,119,.32); }
.btn.danger { background:linear-gradient(135deg, rgba(180,50,50,.9), rgba(115,25,35,.95)); color:#fff; border-color:rgba(255,123,119,.55); }
.btn.tiny { min-height:2rem; padding:.35rem .65rem; font-size:.72rem; }
.policy-list { display:grid; gap:.7rem; padding-left:1.2rem; color:var(--mist); }
.policy-list li::marker { color:var(--cyan-400); }

.code-hero { display:grid; grid-template-columns:auto 1fr; gap:1.25rem; align-items:center; }
.code-emblem { width:120px; height:120px; display:grid; place-items:center; border-radius:50%; color:var(--cyan-300); background:radial-gradient(circle,rgba(56,217,238,.18),rgba(3,19,31,.4) 70%); border:1px solid var(--line-strong); box-shadow:0 0 55px rgba(56,217,238,.18); }
.code-hero h2 { margin:0 0 .35rem; font-family:var(--display); color:var(--foam); }
.code-hero p { margin:0; color:var(--mist); max-width:80ch; }

.detail-list { display:grid; grid-template-columns:minmax(110px,.35fr) 1fr; gap:.55rem .9rem; margin:0 0 1rem; }
.detail-list dt { color:var(--muted); font-weight:700; }
.detail-list dd { margin:0; overflow-wrap:anywhere; }
.message-body { padding:1rem; border-radius:var(--radius-sm); background:rgba(0,0,0,.25); line-height:1.65; }

.footer-grid { width:100%; grid-template-columns:1fr auto 1fr auto; align-items:end; justify-items:stretch; gap:.9rem 1.2rem; text-align:left; }
.footer-revision { margin:0; justify-self:start; align-self:end; color:rgba(201,220,229,.72); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; }
.footer-grid .copyright { justify-self:center; align-self:end; white-space:nowrap; }
.footer-grid .footer-links { justify-self:end; justify-content:flex-end; align-self:end; }
.footer-grid .footer-social { justify-self:end; align-self:end; }





/* Revision 2.5.0-r1 refinements */
:root { --base-font-size: 15px; }
html { font-size: var(--base-font-size); }
html[data-site-size="small"] { --base-font-size: 13.5px; }
html[data-site-size="normal"] { --base-font-size: 15px; }
html[data-site-size="large"] { --base-font-size: 17px; }
.hero h1, .page-hero h1 { font-size: clamp(2rem, 4.4vw, 4.8rem); }
.hero p, .page-hero p { font-size: clamp(.98rem, 1.2vw, 1.15rem); }

/* Every scene has its own responsive background */
body.scene-chat { --scene-image: url('../backgrounds/chat.jpg'); }
.site-backdrop { background-image: linear-gradient(180deg, rgba(1,12,22,.36), rgba(1,12,22,.78)), var(--scene-image); background-size: cover; background-position: center; }



/* Display panel closes reliably and never traps pointer input */
.display-panel { pointer-events: none; opacity: 0; transform: translateY(-12px) scale(.98); }
.display-panel.open { pointer-events: auto; opacity: 1; transform: none; }
.display-panel__head button { position: relative; z-index: 4; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; font-size: 1.6rem; }

/* Real seagull silhouette */
.gull-card { position: relative; overflow: hidden; }
.gull-card p { padding-right: 7rem; }

/* Footer: revision stays visible at the extreme left; animated water and beach */
.site-footer { position: relative; margin-top: 5rem; padding-top: 5.2rem; background: linear-gradient(to bottom, transparent 0, rgba(4,34,49,.25) 24%, rgba(181,146,91,.28) 57%, rgba(6,25,38,.98) 58%); overflow: hidden; }
.site-footer::before { content:''; position:absolute; left:0; right:0; top:2.9rem; height:3.2rem; background: linear-gradient(180deg, rgba(227,198,145,.78), rgba(143,103,52,.7)); clip-path: polygon(0 45%,8% 33%,17% 46%,27% 29%,38% 43%,49% 31%,61% 47%,72% 30%,84% 45%,100% 28%,100% 100%,0 100%); }
.footer-inner { width: 100%; max-width: none; padding-inline: clamp(.55rem, 1.2vw, 1.3rem); }
.footer-revision { justify-self: start; white-space: nowrap; margin-left: 0; }
.wave-field { top: 0; height: 4.2rem; }
.wave-field span { animation: waveFlow 9s linear infinite; }
.wave-field span:nth-child(2) { animation-duration: 13s; animation-direction: reverse; }
.wave-field span:nth-child(3) { animation-duration: 17s; }
@keyframes waveFlow { from { transform: translateX(-4%) translateY(0); } 50% { transform: translateX(4%) translateY(5px); } to { transform: translateX(-4%) translateY(0); } }


/* Privacy address anti-scraping presentation (still accessible on interaction) */
.private-address { display:inline-block; padding:.35rem .55rem; border-radius:10px; filter: blur(7px); user-select:none; transition: filter .25s ease, background .25s ease; background: rgba(112,228,244,.06); }
.private-address:hover, .private-address:focus, .private-address:focus-within { filter:none; user-select:text; background:rgba(112,228,244,.11); outline:1px solid rgba(112,228,244,.35); }
.privacy-hint { font-size:.78rem; color:var(--muted); }

/* Preloader: sun, lighthouse, lifebuoy, anchor and seagull */
.mhl-preloader { background:linear-gradient(rgba(1,15,26,.48),rgba(1,15,26,.72)),url('../backgrounds/preloader.jpg') center/cover fixed; backdrop-filter:blur(13px); }
.mhl-preloader__glass { position:relative; overflow:hidden; min-width:min(92vw,460px); padding:2rem; }
.preloader-sun { width:84px; height:84px; margin:0 auto -50px; border-radius:50%; background:radial-gradient(circle, #fff7bd 0 23%, #ffc95f 45%, rgba(255,177,58,.05) 72%); box-shadow:0 0 55px rgba(255,202,92,.75); animation:sunPulse 2.4s ease-in-out infinite; }
.preloader-lighthouse { position:relative; z-index:2; display:grid; place-items:center; color:#e7fbff; filter:drop-shadow(0 0 16px var(--cyan-400)); }
.preloader-emblems { display:flex; justify-content:center; align-items:center; gap:1.1rem; margin:.7rem 0; color:var(--cyan-300); }
.preloader-emblems span { animation:floatEmblem 2.6s ease-in-out infinite; }
.preloader-emblems span:nth-child(2){animation-delay:.25s}.preloader-emblems span:nth-child(3){animation-delay:.5s}
@keyframes sunPulse { 50% { transform:scale(1.08); opacity:.88; } }
@keyframes floatEmblem { 50% { transform:translateY(-7px) rotate(3deg); } }

/* Kajüte */
.chat-shell { display:grid; grid-template-columns:280px minmax(0,1fr); min-height:610px; overflow:hidden; }
.chat-sidebar { padding:1.25rem; border-right:1px solid var(--line); background:rgba(3,25,40,.75); }
.rule-list { padding-left:1.15rem; color:#c9dce4; line-height:1.8; }
.chat-main { display:grid; grid-template-rows:1fr auto; min-width:0; }
.chat-stream { padding:1.2rem; overflow-y:auto; max-height:64vh; display:flex; flex-direction:column; gap:.75rem; }
.chat-message { max-width:min(78%,720px); padding:.75rem 1rem; border:1px solid var(--line); border-radius:16px 16px 16px 4px; background:rgba(4,40,61,.84); box-shadow:var(--shadow-soft); }
.chat-message.own { align-self:flex-end; border-radius:16px 16px 4px 16px; background:linear-gradient(135deg,rgba(11,100,126,.88),rgba(5,55,80,.9)); }
.chat-message header { display:flex; gap:1rem; justify-content:space-between; color:var(--cyan-300); font-size:.78rem; }
.chat-message p { margin:.35rem 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.chat-form { display:grid; grid-template-columns:1fr auto; gap:.75rem; padding:1rem; border-top:1px solid var(--line); background:rgba(2,18,29,.9); }
.chat-form textarea { resize:none; }
.empty-chat { margin:auto; text-align:center; color:var(--muted); }



/* ===== MeerHeimatLiebe 2.5.0-r1 final visual system ===== */
:root {
  --base-font-size: 14.5px;
  --glass: rgba(3, 24, 39, .58);
  --glass-strong: rgba(2, 18, 31, .82);
  --glass-soft: rgba(8, 43, 64, .48);
  --shore-sand-1: #c7a56f;
  --shore-sand-2: #7c5d36;
}
html[data-site-size="small"] { --base-font-size: 13px; --shell: 1280px; }
html[data-site-size="normal"] { --base-font-size: 14.5px; --shell: 1510px; }
html[data-site-size="large"] { --base-font-size: 16.5px; --shell: 1680px; }
body { font-size: 1rem; }
.site-backdrop {
  background-image: var(--scene-image) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  filter: saturate(1.12) contrast(1.05) brightness(.91);
  transform: scale(1.018);
}
.scene-home { --scene-image: url('../backgrounds/home.jpg'); }
.scene-logbook { --scene-image: url('../backgrounds/logbook.jpg'); }
.scene-gallery { --scene-image: url('../backgrounds/gallery.jpg'); }
.scene-chat { --scene-image: url('../backgrounds/chat.jpg'); }
.scene-downloads { --scene-image: url('../backgrounds/downloads.jpg'); }
.scene-forum { --scene-image: url('../backgrounds/forum.jpg'); }
.scene-contact { --scene-image: url('../backgrounds/contact.jpg'); }
.scene-legal { --scene-image: url('../backgrounds/legal.jpg'); }
.scene-privacy { --scene-image: url('../backgrounds/privacy.jpg'); }
.scene-auth { --scene-image: url('../backgrounds/auth.jpg'); }
.scene-dashboard { --scene-image: url('../backgrounds/dashboard.jpg'); }
.scene-generic { --scene-image: url('../backgrounds/generic.jpg'); }
.site-vignette {
  background:
    linear-gradient(90deg, rgba(0,8,16,.34), rgba(0,12,22,.04) 48%, rgba(0,8,16,.22)),
    linear-gradient(180deg, rgba(0,8,16,.15), transparent 42%, rgba(0,6,13,.68));
}
.glass-frame, .glass-card, .panel, .legal-card {
  background: linear-gradient(145deg, rgba(8,45,66,.58), rgba(2,20,34,.67));
  backdrop-filter: blur(12px) saturate(1.12);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
}
.hero h1, .page-header h1, .page-hero h1, .article h1 { font-size: clamp(2.1rem, 4.2vw, 4.7rem); line-height: .98; }
.hero p, .page-header p, .page-hero p { font-size: clamp(.94rem, 1.05vw, 1.08rem); }
body.scene-auth .site-main {
    min-height: auto !important;
}

/* The settings button is always available and the panel really closes. */
.display-toggle {
  display: grid !important;
  top: auto;
  right: 1rem;
  bottom: 1rem;
  z-index: 150;
  width: 48px;
  height: 48px;
}
.display-panel {
  display: block !important;
  top: auto;
  right: 1rem;
  bottom: 4.9rem;
  width: min(320px, calc(100vw - 2rem));
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(.98);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.display-panel.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.display-panel__head button:hover { background: rgba(112,228,244,.12); }
.segmented-control button small { display:block; font-size:.62rem; color:var(--muted); }
.display-reset { width:100%; margin-top:.8rem; }
.device-dock {
  position: fixed;
  right: 4.8rem;
  bottom: 1rem;
  z-index: 145;
  display: flex;
  padding: .28rem;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(2,18,31,.86);
  box-shadow: var(--glow);
  backdrop-filter: blur(14px);
}
.device-dock button {
  width: 43px; height: 40px; display:grid; place-items:center;
  border:0; border-radius:9px; color:#d9edf4; background:transparent;
}
.device-dock button.active { color:var(--cyan-300); background:rgba(20,121,147,.34); box-shadow:inset 0 0 0 1px var(--line-strong); }

/* Stronger cards and images */
.feature-card { min-height: 245px; background: rgba(2,20,33,.58); }
.feature-card::before { filter: saturate(1.12) brightness(1.08); }
.feature-card::after { background: linear-gradient(180deg, rgba(1,10,18,.01) 25%, rgba(1,12,22,.92) 84%); }
.feature-card:nth-child(3) { --feature-bg: url('../backgrounds/thumb-chat.jpg'); }
.gull-card { display:grid; grid-template-columns:1fr minmax(120px,220px); gap:1rem; align-items:center; min-height:250px; }
.gull-card p { padding-right:0; }
.gull-illustration { width:100%; max-height:180px; object-fit:contain; filter:drop-shadow(0 0 18px rgba(112,228,244,.44)); animation:gullFloat 4s ease-in-out infinite; }
@keyframes gullFloat { 50% { transform:translate(5px,-8px) rotate(-2deg); } }
.gallery-grid-showcase { grid-template-columns: repeat(3, minmax(0,1fr)); }
.gallery-card { overflow:hidden; background:rgba(2,20,33,.72); }
.gallery-image-link { display:block; aspect-ratio:16/10; overflow:hidden; background:#01101d; }
.gallery-card img { width:100%; height:100%; object-fit:cover; filter:saturate(1.12) contrast(1.04) brightness(1.04); transition:transform .45s ease, filter .3s ease; }
.gallery-card:hover img { transform:scale(1.055); filter:saturate(1.2) contrast(1.05) brightness(1.1); }
.gallery-card__body { padding:1rem; }

/* Professional Kajüte layout */
.chat-shell { grid-template-columns: 280px minmax(0,1fr); min-height: 660px; }
.chat-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.2rem; border-bottom:1px solid var(--line); background:rgba(2,20,33,.83); }
.chat-toolbar strong { display:flex; align-items:center; gap:.5rem; color:#fff; }
.chat-toolbar span { color:var(--muted); font-size:.76rem; }
.online-crew { display:grid; gap:.45rem; margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line); }
.online-crew strong { display:flex; align-items:center; gap:.45rem; margin-bottom:.25rem; }
.online-crew span { display:flex; align-items:center; gap:.45rem; color:#d5e8ee; font-size:.78rem; }
.online-crew span i { width:7px; height:7px; border-radius:50%; background:#62e6b6; box-shadow:0 0 8px #62e6b6; }

/* Address is blurred until intentional hover/focus/click. */
.private-address {
  position:relative;
  display:inline-block;
  min-width:min(100%,340px);
  padding:.7rem .8rem;
  border:1px dashed rgba(112,228,244,.35);
  filter:blur(7px);
  user-select:none;
  cursor:pointer;
  transition:filter .22s ease, background .22s ease;
  background:rgba(2,20,33,.54);
}
.private-address:hover, .private-address:focus, .private-address:focus-within, .private-address.revealed {
  filter:none;
  user-select:text;
  background:rgba(8,49,70,.72);
  outline:1px solid rgba(112,228,244,.48);
}

/* Full-screen maritime loader */
.mhl-preloader { background:linear-gradient(rgba(1,12,22,.30),rgba(1,12,22,.56)),url('../backgrounds/preloader.jpg') center/cover no-repeat fixed; }
.mhl-preloader__glass { width:min(92vw,580px); padding:2.25rem; border:1px solid var(--line-strong); border-radius:28px; background:rgba(2,24,39,.58); box-shadow:0 28px 90px rgba(0,0,0,.56),0 0 44px rgba(56,217,238,.18); backdrop-filter:blur(18px); }
.preloader-progress { width:min(100%,390px); height:13px; margin:1rem auto 0; overflow:hidden; border:1px solid var(--line-strong); border-radius:99px; background:rgba(0,8,16,.65); }
.preloader-progress i { display:block; width:7%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#1bb8d4,#9ef3fa); box-shadow:0 0 16px rgba(56,217,238,.65); transition:width .22s ease; }

/* Real animated shoreline on every page. */
.site-footer {
  position:relative;
  min-height:190px;
  margin-top:4rem;
  padding:8.4rem 1rem 1.15rem;
  overflow:hidden;
  background:linear-gradient(180deg,transparent 0,rgba(2,15,25,.4) 45%,rgba(2,14,24,.96) 74%);
}
.shoreline { position:absolute; inset:0 0 auto; height:150px; overflow:hidden; pointer-events:none; }
.shoreline-wave { position:absolute; left:-4%; width:108%; height:125px; fill:rgba(3,62,86,.80); filter:drop-shadow(0 -2px 6px rgba(109,235,248,.38)); }
.wave-one { top:0; animation:shoreMoveOne 8s ease-in-out infinite; }
.wave-two { top:23px; fill:rgba(5,38,56,.88); opacity:.88; animation:shoreMoveTwo 11s ease-in-out infinite; }
.foam-line { position:absolute; left:-5%; right:-5%; top:82px; height:18px; opacity:.92; background:repeating-radial-gradient(ellipse at 50% 100%,rgba(244,252,255,.92) 0 2px,rgba(170,231,239,.5) 3px 5px,transparent 7px 18px); filter:drop-shadow(0 0 8px rgba(190,245,250,.65)); animation:foamDrift 7s linear infinite; }
.sand-line { position:absolute; left:0; right:0; top:96px; height:65px; background:linear-gradient(180deg,rgba(211,181,126,.88),rgba(127,91,49,.92)); clip-path:polygon(0 18%,8% 8%,17% 19%,26% 9%,37% 20%,48% 8%,60% 19%,72% 7%,84% 17%,93% 9%,100% 16%,100% 100%,0 100%); }
@keyframes shoreMoveOne { 0%,100%{transform:translateX(-1.8%) translateY(0)} 50%{transform:translateX(1.8%) translateY(7px)} }
@keyframes shoreMoveTwo { 0%,100%{transform:translateX(1.4%) translateY(4px)} 50%{transform:translateX(-1.4%) translateY(-3px)} }
@keyframes foamDrift { from{transform:translateX(-2%)} to{transform:translateX(2%)} }
.footer-revision {
  position:absolute;
  left:max(.45rem,env(safe-area-inset-left));
  bottom:max(.55rem,env(safe-area-inset-bottom));
  z-index:4;
  margin:0;
  padding:.34rem .55rem;
  border:1px solid var(--line);
  border-radius:9px;
  color:rgba(220,241,246,.78);
  background:rgba(1,14,24,.78);
  font:700 .63rem/1 var(--mono);
  letter-spacing:.07em;
  text-transform:uppercase;
  white-space:nowrap;
}
.footer-grid { position:relative; z-index:3; display:grid; grid-template-columns:1fr; justify-items:center; gap:.55rem; text-align:center; }
.footer-grid .footer-links { justify-self:center; justify-content:center; }
.footer-grid .footer-social { justify-self:center; }





/* ===== 2.5.1-r1 corrective patch ===== */
html[data-site-size="small"] { --base-font: 13px; --base-font-size:13px; --shell: 1180px; }
html[data-site-size="normal"] { --base-font: 14px; --base-font-size:14px; --shell: 1440px; }
html[data-site-size="large"] { --base-font: 15px; --base-font-size:15px; --shell: 1760px; }
html { font-size: var(--base-font-size,14px); }
.shell { width:min(calc(100% - 2rem),var(--shell)); }
.site-main { width:min(calc(100% - 2rem),var(--shell)); margin-inline:auto; }
.site-backdrop { opacity:1 !important; visibility:visible !important; background-attachment:fixed; }
.site-vignette { background:linear-gradient(90deg,rgba(0,8,16,.44),rgba(0,12,22,.05) 50%,rgba(0,8,16,.26)),linear-gradient(180deg,rgba(0,8,16,.18),transparent 48%,rgba(0,6,13,.57)); }
.panel,.glass-card,.glass-frame { background:linear-gradient(145deg,rgba(5,37,56,.70),rgba(2,17,29,.76)); }
.hero h1,.page-header h1,.page-hero h1,.article h1 { font-size:clamp(1.9rem,3.5vw,4rem); }

/* Settings stays at top right and is always collapsible. */
.display-toggle { top:7.2rem; bottom:auto; right:1rem; }
.display-panel { top:10.7rem; bottom:auto; right:1rem; max-height:calc(100vh - 12rem); overflow:auto; }

.auth-panel h1{

    font-size:2.35rem;

    line-height:1.05;

    margin:0 0 .45rem;

}
.stack-form label{

    display:block;

    margin-bottom:.15rem;

}
.auth-welcome p { max-width:58ch; font-size:1.08rem; }
.auth-symbols{
    display:flex;
    gap:1.4rem;
    margin-top:1.8rem;
    color:var(--cyan-300);

    opacity:.9;
}
.auth-symbols svg{
    width:42px;
    height:42px;
}
/* ---------- Login Features ---------- */

/* ==========================================
   Login Hero / Feature Cards
========================================== */

.auth-features{

    display:flex;
    flex-direction:column;

    gap:.45rem;

    margin-top:1.2rem;

}

.auth-feature:hover{

    transform:translateY(-2px);

    border-color:rgba(56,217,238,.18);

    background:rgba(255,255,255,.065);

}

.auth-feature-icon{

    width:54px;
    height:54px;

    border-radius:16px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(56,217,238,.10);

    color:var(--cyan-300);

    flex:none;

}

.auth-feature-content{

    display:flex;
    flex-direction:column;

}

.auth-feature-content h3{

    margin:0 0 .25rem;

    color:#fff;

    font-size:1rem;

    font-weight:700;

}

.auth-feature-content p{

    margin:0;

    color:rgba(255,255,255,.72);

    line-height:1.5;

    font-size:.93rem;

}

.auth-lead{

    margin:.9rem 0 2rem;

    max-width:34rem;

    font-size:1.05rem;

    line-height:1.7;

    color:rgba(255,255,255,.82);

}

.auth-quote{

    margin-top:2rem;

    text-align:center;

    color:var(--cyan-300);

    font-style:italic;

    font-size:1.05rem;

    opacity:.9;

}
.auth-lead{

    margin:.75rem 0 2rem;

    max-width:34rem;

    color:rgba(255,255,255,.82);

    line-height:1.7;

    font-size:1.05rem;

}

.auth-feature{

    display:flex;

    align-items:center;

    gap:.75rem;

    padding:.55rem .85rem;

    margin-bottom:.45rem;

    border:1px solid rgba(255,255,255,.08);

    border-radius:14px;

    background:rgba(255,255,255,.035);

    transition:.25s ease;

}

.auth-feature:hover{

    transform:translateY(-2px);

    border-color:rgba(56,217,238,.22);

    background:rgba(255,255,255,.055);

}

.auth-feature-icon{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:rgba(56,217,238,.10);

    color:var(--cyan-300);

    flex:none;

}

.auth-feature-content h3{

    margin:0 0 .35rem;

    font-size:1rem;

    color:#fff;

}

.auth-feature-content p{

    margin:0;

    color:rgba(255,255,255,.72);

    line-height:1.5;

}

.auth-quote{

    margin-top:2rem;

    text-align:center;

    font-size:1.1rem;

    font-style:italic;

    color:var(--cyan-300);

    opacity:.9;

}
/* ============================
   Premium Login
============================ */

.input-icon{
    display:flex;
    align-items:center;
    gap:.8rem;

    min-height:52px;

    padding:0 1rem;

    border:1px solid var(--line);
    border-radius:12px;

    background:rgba(1,18,30,.45);

    transition:.2s ease;
}

.input-icon:focus-within{

    border-color:var(--cyan-400);

    box-shadow:0 0 0 3px rgba(56,217,238,.12);

}

.input-icon svg{

    color:var(--cyan-300);

    flex:none;

}

.input-icon input{

    width:100%;

    border:0 !important;

    background:transparent !important;

    box-shadow:none !important;

    padding:0;

}

.password-wrap{

    display:flex;

    align-items:center;

    min-height:52px;

    border:1px solid var(--line);

    border-radius:12px;

    background:rgba(1,18,30,.45);

    overflow:hidden;

    transition:.2s ease;

}

.password-wrap:focus-within{

    border-color:var(--cyan-400);

    box-shadow:0 0 0 3px rgba(56,217,238,.12);

}

.password-wrap input{

    flex:1;

    border:0 !important;

    background:transparent !important;

    box-shadow:none !important;

    padding:0;

}

.input-icon-left{

    width:48px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--cyan-300);

}

.password-toggle{

    width:48px;

    height:48px;

    border:0;

    background:transparent;

    color:var(--cyan-300);

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

}

.password-toggle:hover{

    background:rgba(56,217,238,.08);

}
/* Premium Login */

.input-icon{

    display:flex;

    align-items:center;

    gap:.8rem;

    padding:0 .9rem;

    border:1px solid var(--line);

    border-radius:12px;

    background:rgba(0,15,25,.45);

}

.input-icon svg{

    color:var(--cyan-300);

    flex:none;

}

.input-icon input{

    border:0;

    background:transparent;

    width:100%;

}

.password-wrap{

    display:flex;

    align-items:center;

    border:1px solid var(--line);

    border-radius:12px;

    overflow:hidden;

    background:rgba(0,15,25,.45);

}

.password-wrap input{

    border:0;

    background:transparent;

    flex:1;

}

.input-icon-left{

    display:flex;

    align-items:center;

    justify-content:center;

    width:48px;

    color:var(--cyan-300);

}

.password-toggle{

    width:52px;

    border:0;

    background:transparent;

    color:var(--cyan-300);

    cursor:pointer;

}

.password-toggle:hover{

    background:rgba(56,217,238,.08);

}
/* Gallery images are prominent and never collapse to empty placeholders. */
.gallery-panel { padding:clamp(1rem,2vw,1.5rem); }
.gallery-grid-showcase { grid-template-columns:repeat(3,minmax(280px,1fr)); gap:1.1rem; }
.gallery-image-link { min-height:250px; aspect-ratio:16/10; }
.gallery-card img { min-height:250px; background:linear-gradient(135deg,#06314a,#03111d); }

/* Footer only shows copyright until service menu is opened. */
.site-footer { min-height:210px; padding-top:9.2rem; }
.footer-menu-wrap { position:relative; }
.footer-menu-toggle { display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .85rem; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:rgba(2,18,30,.82); }
.footer-menu-toggle svg:last-child { transition:transform .2s ease; }
.footer-menu-toggle[aria-expanded="true"] svg:last-child { transform:rotate(180deg); }
.footer-links-collapsible { position:absolute; left:50%; bottom:calc(100% + .65rem); transform:translate(-50%,10px); width:max-content; max-width:min(92vw,760px); padding:.75rem 1rem; border:1px solid var(--line); border-radius:14px; background:rgba(2,17,29,.96); box-shadow:var(--shadow),var(--glow); opacity:0; visibility:hidden; pointer-events:none; transition:.18s ease; }
.footer-links-collapsible.open { transform:translate(-50%,0); opacity:1; visibility:visible; pointer-events:auto; }
.footer-revision,.device-dock { display:none !important; }

/* Kajüte is a real full-width chat, no decorative screenshot image. */
.chat-page .site-main { width:min(calc(100% - 2rem),1760px); }
.chat-shell { min-height:70vh; grid-template-columns:270px minmax(0,1fr); }
.chat-stream { min-height:480px; max-height:62vh; }




/* ===== 2.5.2-r1 maritime visibility, plugins and responsive correction ===== */
:root {
  --header-h: 86px;
  --glass: rgba(3, 24, 39, .58);
  --glass-strong: rgba(2, 17, 30, .78);
  --line: rgba(132, 222, 237, .34);
  --line-strong: rgba(112, 228, 244, .68);
}

html { background:#03131f; }
body {
  position:relative;
  isolation:isolate;
  background:transparent !important;
  font-size:var(--base-font,14px);
}
body::before { display:none !important; }
.site-backdrop {
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:none;
  background-image:var(--scene-desktop) !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:var(--scene-position,center center) !important;
  background-attachment:fixed !important;
  filter:saturate(1.11) contrast(1.04) brightness(1.02) !important;
  transform:scale(1.012);
}
.site-vignette {
  position:fixed !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,9,17,.22),rgba(0,12,21,.02) 48%,rgba(0,8,16,.18)),
    linear-gradient(180deg,rgba(0,8,16,.10),rgba(0,8,16,.02) 42%,rgba(0,7,14,.44)) !important;
}
.site-header,.site-main,.site-footer,.top-panel,.back-to-top,.maritime-decor,.skip-link { z-index:3; }
.site-header { position:sticky; }
.site-main { position:relative; padding-top:.35rem; }
.site-footer { position:relative; }

.scene-home { --scene-desktop:url('../backgrounds/home-desktop.webp'); --scene-position:55% center; }
.scene-logbook { --scene-desktop:url('../backgrounds/logbook-desktop.webp'); --scene-position:center center; }
.scene-gallery { --scene-desktop:url('../backgrounds/gallery-desktop.webp'); --scene-position:center center; }
.scene-chat { --scene-desktop:url('../backgrounds/chat-desktop.webp'); --scene-position:58% center; }
.scene-downloads { --scene-desktop:url('../backgrounds/downloads-desktop.webp'); --scene-position:center center; }
.scene-forum { --scene-desktop:url('../backgrounds/forum-desktop.webp'); --scene-position:center center; }
.scene-contact { --scene-desktop:url('../backgrounds/contact-desktop.webp'); --scene-position:58% center; }
.scene-legal { --scene-desktop:url('../backgrounds/legal-desktop.webp'); --scene-position:center center; }
.scene-privacy { --scene-desktop:url('../backgrounds/privacy-desktop.webp'); --scene-position:center center; }
.scene-auth { --scene-desktop:url('../backgrounds/auth-desktop.webp'); --scene-position:center center; }
.scene-dashboard { --scene-desktop:url('../backgrounds/dashboard-desktop.webp'); --scene-position:center center; }
.scene-generic { --scene-desktop:url('../backgrounds/generic-desktop.webp'); --scene-position:center center; }

.glass-frame,.glass-card,.panel,.mhl-callout,.legal-card,.article-card,.forum-category {
  background:linear-gradient(145deg,rgba(5,39,59,.62),rgba(2,18,31,.70)) !important;
  backdrop-filter:blur(13px) saturate(1.14);
  -webkit-backdrop-filter:blur(13px) saturate(1.14);
}
.page-header,.page-hero,.hero { text-shadow:0 3px 24px rgba(0,0,0,.62); }
.page-header { margin-top:.2rem; }
.page-header h1,.page-hero h1,.hero h1,.article h1 { font-size:clamp(1.85rem,3.2vw,3.85rem) !important; }
.page-header p,.page-hero p,.hero p { max-width:68ch; }

/* Header utility menus are at the top instead of the footer. */
.header-inner { gap:.75rem; padding:.65rem .85rem; }
.header-tools { display:flex; gap:.35rem; flex:0 0 auto; }
.header-tool {
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:.55rem .7rem;
  border:1px solid var(--line);
  border-radius:11px;
  color:var(--cyan-300);
  background:rgba(2,22,36,.72);
  transition:.18s ease;
}
.header-tool:hover,.header-tool[aria-expanded="true"] { color:#fff; border-color:var(--line-strong); background:rgba(10,72,94,.70); box-shadow:var(--glow); }
.header-tool span { font-size:.68rem; font-weight:800; }
.top-panel {
  position:fixed !important;
  top:calc(var(--header-h) + 2rem) !important;
  right:max(1rem,env(safe-area-inset-right)) !important;
  bottom:auto !important;
  z-index:160 !important;
  width:min(370px,calc(100vw - 2rem));
  max-height:calc(100vh - var(--header-h) - 3rem);
  overflow:auto;
  padding:1rem;
  border-radius:18px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-10px) scale(.98);
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
}
.top-panel.open { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.top-panel__head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-bottom:.75rem; margin-bottom:.75rem; border-bottom:1px solid var(--line); }
.top-panel__head strong { display:flex; align-items:center; gap:.5rem; }
.top-panel__head button { width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:50%; color:#fff; background:rgba(255,255,255,.06); font-size:1.5rem; }
.service-panel { right:7.6rem !important; }
.service-grid { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.service-grid a { display:flex; align-items:center; gap:.55rem; min-height:50px; padding:.7rem; border:1px solid rgba(132,222,237,.18); border-radius:12px; color:#eaf8fb; background:rgba(0,12,22,.34); }
.service-grid a:hover { border-color:var(--line-strong); background:rgba(16,83,105,.48); }
.display-toggle,.footer-menu-wrap,.device-dock,.footer-revision { display:none !important; }

/* Maritime ornaments remain subtle and do not block interaction. */
.maritime-decor { position:fixed; bottom:9rem; display:flex; align-items:center; gap:.6rem; color:rgba(121,231,244,.20); pointer-events:none; filter:drop-shadow(0 0 14px rgba(56,217,238,.18)); }
.maritime-decor-left { left:1.25rem; transform:rotate(-12deg); }
.maritime-decor-right { right:1.25rem; transform:rotate(9deg); }

/* Gallery starts honestly empty and becomes a real managed gallery after uploads. */
.gallery-empty {
  min-height:430px;
  display:grid;
  place-items:center;
  padding:2rem;
  border:1px dashed rgba(142,229,241,.42);
  border-radius:22px;
  text-align:center;
  background:linear-gradient(145deg,rgba(4,36,54,.56),rgba(1,15,26,.64));
}
.gallery-empty__inner { max-width:620px; }
.gallery-empty__icon { width:92px; height:92px; display:grid; place-items:center; margin:0 auto 1rem; border:1px solid var(--line-strong); border-radius:50%; color:var(--cyan-300); background:rgba(8,61,82,.55); box-shadow:0 0 34px rgba(56,217,238,.18); }
.gallery-empty h2 { margin:.4rem 0; font-size:clamp(1.55rem,2.4vw,2.25rem); }
.gallery-empty p { color:var(--mist); }
.gallery-grid-showcase { grid-template-columns:repeat(3,minmax(250px,1fr)); gap:1rem; }
.gallery-card { overflow:hidden; border:1px solid var(--line); border-radius:17px; background:rgba(2,18,30,.76); box-shadow:var(--shadow); }
.gallery-image-link { display:grid; place-items:center; height:clamp(250px,28vw,410px); aspect-ratio:auto !important; padding:.55rem; background:linear-gradient(135deg,rgba(5,48,68,.82),rgba(1,12,22,.90)); cursor:zoom-in; }
.gallery-card img { width:100%; height:100%; min-height:0 !important; object-fit:contain !important; border-radius:11px; filter:saturate(1.03) contrast(1.02) brightness(1.03); }
.gallery-card:hover img { transform:scale(1.018); filter:saturate(1.08) brightness(1.07); }
.gallery-lightbox { position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:2rem; background:rgba(0,7,13,.91); backdrop-filter:blur(14px); opacity:0; visibility:hidden; pointer-events:none; transition:.2s ease; }
.gallery-lightbox.open { opacity:1; visibility:visible; pointer-events:auto; }
.gallery-lightbox figure { width:min(94vw,1500px); max-height:90vh; margin:0; display:grid; gap:.7rem; }
.gallery-lightbox img { width:100%; max-height:82vh; object-fit:contain; border-radius:16px; box-shadow:0 30px 100px rgba(0,0,0,.65); }
.gallery-lightbox figcaption { color:#d9edf2; text-align:center; }
.gallery-lightbox__close { position:absolute; top:1rem; right:1rem; width:48px; height:48px; border:1px solid var(--line-strong); border-radius:50%; color:#fff; background:rgba(4,33,49,.9); font-size:1.8rem; }

/* Kajüte is only the live member chat, never a screenshot panel. */
.chat-page .page-hero { max-width:900px; }
.chat-shell { grid-template-columns:minmax(230px,280px) minmax(0,1fr) !important; min-height:68vh; background:rgba(2,17,29,.72) !important; }
.chat-stream { min-height:460px; max-height:58vh; background:linear-gradient(180deg,rgba(1,17,29,.48),rgba(1,10,18,.66)); }
.chat-message { border:1px solid rgba(132,222,237,.14); background:rgba(5,43,62,.48); }
.chat-message.own { background:rgba(12,93,116,.34); border-color:rgba(112,228,244,.36); }

/* Forum category administration. */
.admin-form-card { max-width:920px; }
.forum-admin-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1rem; }
.forum-category__admin { display:flex; gap:.45rem; align-items:center; justify-content:flex-end; }

/* A slower multi-image preloader. */
.mhl-preloader { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; overflow:hidden; background:#01101c !important; }
.preloader-slides { position:absolute; inset:0; }
.preloader-slides span { position:absolute; inset:-2%; background-image:linear-gradient(rgba(0,10,18,.23),rgba(0,10,18,.55)),var(--slide-image); background-size:cover; background-position:center; opacity:0; transform:scale(1.045); animation:preloaderSlideshow 14s infinite; }
.preloader-slides span:nth-child(2){animation-delay:3.5s}.preloader-slides span:nth-child(3){animation-delay:7s}.preloader-slides span:nth-child(4){animation-delay:10.5s}
.mhl-preloader__glass { position:relative; z-index:2; width:min(92vw,590px); padding:2.35rem; border:1px solid rgba(145,234,246,.62); border-radius:28px; background:rgba(2,24,39,.55) !important; box-shadow:0 34px 110px rgba(0,0,0,.62),0 0 54px rgba(56,217,238,.20); backdrop-filter:blur(20px) saturate(1.16); }
@keyframes preloaderSlideshow { 0%{opacity:0;transform:scale(1.06)} 8%,24%{opacity:1} 32%,100%{opacity:0;transform:scale(1.015)} }

/* Professional moving water and beach on every page. */
.site-footer { min-height:245px !important; margin-top:3.2rem !important; padding:11.8rem 1rem 1.2rem !important; overflow:hidden; background:linear-gradient(180deg,transparent 0,rgba(2,15,25,.08) 28%,rgba(2,15,25,.92) 83%) !important; }
.shoreline { position:absolute; inset:0 0 auto; height:205px; overflow:hidden; pointer-events:none; }
.shoreline-wave { position:absolute; left:-6%; width:112%; height:160px; filter:drop-shadow(0 -3px 10px rgba(128,239,249,.36)); }
.wave-far { top:4px; fill:rgba(7,89,119,.60); animation:seaFar 10s ease-in-out infinite; }
.wave-near { top:35px; fill:rgba(4,50,73,.86); animation:seaNear 7.5s ease-in-out infinite; }
.foam-belt { position:absolute; left:-8%; right:-8%; top:105px; height:36px; background:repeating-radial-gradient(ellipse at 50% 100%,rgba(247,253,255,.97) 0 3px,rgba(175,232,239,.66) 4px 7px,transparent 9px 23px); filter:drop-shadow(0 0 10px rgba(205,249,252,.75)); animation:foamBelt 6s linear infinite; }
.wet-sand { position:absolute; left:0; right:0; top:126px; height:46px; background:linear-gradient(180deg,rgba(113,109,91,.42),rgba(178,145,94,.90)); clip-path:polygon(0 28%,8% 14%,17% 32%,27% 13%,39% 31%,51% 12%,62% 29%,74% 10%,86% 27%,100% 12%,100% 100%,0 100%); }
.dry-sand { position:absolute; left:0; right:0; top:161px; height:64px; background:radial-gradient(circle at 20% 45%,rgba(255,238,196,.28) 0 2px,transparent 3px),radial-gradient(circle at 73% 48%,rgba(86,55,27,.35) 0 2px,transparent 3px),linear-gradient(180deg,#c9a56f,#705033); background-size:52px 42px,67px 54px,auto; }
.shore-starfish,.shore-anchor { position:absolute; z-index:2; color:rgba(43,31,18,.66); filter:drop-shadow(0 2px 2px rgba(255,230,174,.18)); }
.shore-starfish { left:8%; top:166px; transform:rotate(-18deg); }
.shore-anchor { right:9%; top:157px; transform:rotate(12deg); }
.footer-inner { position:relative; z-index:4; display:flex; align-items:center; justify-content:center; gap:1.2rem; }
.footer-social { display:flex; gap:.65rem; color:var(--cyan-300); }
@keyframes seaFar { 0%,100%{transform:translateX(-1.5%) translateY(0) scaleY(1)} 50%{transform:translateX(1.5%) translateY(7px) scaleY(1.05)} }
@keyframes seaNear { 0%,100%{transform:translateX(1.8%) translateY(5px)} 50%{transform:translateX(-1.8%) translateY(-4px)} }
@keyframes foamBelt { 0%{transform:translateX(-2.5%)} 50%{transform:translateX(2.5%)} 100%{transform:translateX(-2.5%)} }





@media (prefers-reduced-motion:reduce) {
  .preloader-slides span,.wave-far,.wave-near,.foam-belt { animation:none !important; }
  .preloader-slides span:first-child { opacity:1; }
}

/* Patch 2.5.2-r1 final refinements */
.scene-contact .site-main { padding-top: .15rem !important; }
.scene-contact .page-header { min-height: 245px !important; padding-top: .35rem !important; align-items: center; }
.scene-contact .page-header__copy { max-width: 920px; }
.plugin-grid { display:grid; gap:1rem; }
.plugin-grid .plugin-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:1rem; align-items:start; }
.compact-list { margin:.75rem 0 0; }
.compact-list li { margin:.25rem 0; }

    margin-bottom:.45rem !important;


.auth-quote{

    margin-top:.9rem !important;

}

.stack-form{

    gap:.55rem !important;

}

.captcha-box{

    padding:.45rem .7rem !important;

}

.btn.primary{

    min-height:44px !important;

    padding:.72rem 1rem !important;

}
.login-security-left {
    width:100% !important;
    max-width:900px !important;
    margin-top:40px;
}

.login-security-left .captcha-box {
    width:100%;
    box-sizing:border-box;
}
/* =====================================
LOGIN FINAL TWO COLUMN LAYOUT
===================================== */

.auth-grid {

    display:grid !important;

    grid-template-columns:
        minmax(520px, 1fr)
        420px !important;

    gap:80px !important;

    align-items:start !important;

    width:100% !important;

    max-width:1200px !important;

    margin:0 auto !important;

}


/* linke Seite */

.auth-welcome {

    width:100% !important;

}


/* rechte Loginbox */

.auth-panel {

    width:420px !important;

}


/* Sicherheitsprüfung links */

.login-security-left {

    width:100% !important;

    max-width:650px !important;

    margin-top:40px !important;

}


/* CAPTCHA Inhalt */

.login-security-left .captcha {

    width:100% !important;

}


/* mobil */


/* =========================================================
   GOODBYE – FINALER LOOK
   Keine runden Ecken / kein alter Kreis / Seestern rechts
   ========================================================= */

body.goodbye-page .goodbye-card {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 32px !important;
}

body.goodbye-page .goodbye-card::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

body.goodbye-page .goodbye-card__starfish {
    position: absolute !important;
    top: 50% !important;
    right: clamp(55px, 8vw, 130px) !important;

    width: 250px !important;
    height: 250px !important;

    display: grid !important;
    place-items: center !important;

    margin: 0 !important;
    transform: translateY(-50%) !important;

    pointer-events: none !important;
    z-index: 1 !important;

    color: #f4c95d !important;
    opacity: .96 !important;

    filter:
        drop-shadow(0 4px 7px rgba(0,0,0,.24))
        drop-shadow(0 0 16px rgba(244,201,93,.16));
}

body.goodbye-page .goodbye-card__starfish svg {
    display: block !important;

    width: 215px !important;
    height: 215px !important;

    color: #f4c95d !important;
    fill: #e9b949 !important;
    stroke: #f8d77a !important;
    stroke-width: 1.2 !important;

    filter:
        drop-shadow(0 3px 4px rgba(0,0,0,.24)) !important;
}

body.goodbye-page .goodbye-card__starfish svg circle {
    fill: #d79d2d !important;
    stroke: #f8d77a !important;
    stroke-width: 1 !important;
}

body.goodbye-page .goodbye-card > *:not(.goodbye-card__starfish) {
    position: relative;
    z-index: 2;
}





/* =========================================================
   MEERHEIMATLIEBE – 2FA FINAL
   Ausschließlich /login/2fa
   Keine Auswirkung auf Login / Goodbye / andere Seiten
   ========================================================= */

/* ---------------------------------------------------------
   Hintergrund
   --------------------------------------------------------- */

body:has(.twofa-panel) .site-backdrop {
    background-image:
        linear-gradient(
            180deg,
            rgba(3, 25, 38, .18),
            rgba(3, 25, 38, .40)
        ),
        url('../pastell/pastell-heimatliebe-sh.webp') !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}


/* ---------------------------------------------------------
   Der normale Shell-Container darf die 2FA-Seite NICHT
   mehr horizontal begrenzen.
   --------------------------------------------------------- */

body:has(.twofa-panel) .site-main {
    position: relative !important;

    width: 100vw !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    min-height: calc(100vh - var(--header-h, 56px)) !important;
}


/* ---------------------------------------------------------
   Leeren auth-scene Platzhalter entfernen
   --------------------------------------------------------- */

body:has(.twofa-panel) .auth-scene {
    display: none !important;
}


/* ---------------------------------------------------------
   2FA-PANEL
   ABSOLUT unabhängig vom Shell-Container.
   --------------------------------------------------------- */

body:has(.twofa-panel) .twofa-panel {
    position: fixed !important;

    left: 50% !important;
    top: calc(50% + 28px) !important;

    right: auto !important;
    bottom: auto !important;

    transform: translate(-50%, -50%) !important;

    width: min(920px, calc(100vw - 48px)) !important;
    max-width: 920px !important;

    margin: 0 !important;
    padding: 52px 60px !important;

    box-sizing: border-box !important;

    border-radius: 28px !important;

    border: 1px solid rgba(121, 230, 239, .70) !important;

    background:
        linear-gradient(
            135deg,
            rgba(18, 63, 78, .70),
            rgba(3, 30, 44, .78)
        ) !important;

    box-shadow:
        0 24px 70px rgba(0, 20, 30, .32),
        inset 0 1px 0 rgba(255,255,255,.13) !important;

    backdrop-filter: blur(12px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.12) !important;

    z-index: 20 !important;
}


/* ---------------------------------------------------------
   Inhalt
   --------------------------------------------------------- */

body:has(.twofa-panel) .twofa-panel h1 {
    margin-bottom: 1rem !important;
}

body:has(.twofa-panel) .twofa-panel .stack-form {
    width: 100% !important;
    max-width: none !important;
}

body:has(.twofa-panel) .twofa-panel input {
    width: 100% !important;
    max-width: none !important;

    box-sizing: border-box !important;
}

body:has(.twofa-panel) .twofa-panel .btn.primary {
    width: 100% !important;
    max-width: none !important;
}

body:has(.twofa-panel) .twofa-panel .inline-form {
    margin-top: .5rem !important;
}


/* ---------------------------------------------------------
   Desktop / große Displays
   --------------------------------------------------------- */

@media (min-width: 1200px) {

    body:has(.twofa-panel) .twofa-panel {
        width: 920px !important;
    }

}


/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */




/* ---------------------------------------------------------
   Mobil
   --------------------------------------------------------- */



/* ==========================================================
   Goodbye Page
   ========================================================== */

.goodbye-page .site-main{
    display:flex;
    justify-content:center;
    align-items:center;
    flex:1;
    padding:3rem 1.5rem;
}

.goodbye-stage {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.goodbye-card {
    width: min(100%, 980px);
    padding: clamp(2.5rem, 5vw, 4.5rem);
    border-radius: 32px;
    text-align: center;

    background: var(--glass-strong);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.goodbye-card__symbols {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    opacity: .92;
}

.goodbye-card .eyebrow {
    justify-content: center;
    margin-bottom: 1rem;
}

.goodbye-card h1 {
    margin-bottom: 1rem;
}

.goodbye-card > p {
    max-width: 720px;
    margin-inline: auto;
}

.goodbye-card .button-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 2.5rem 0;
}

.goodbye-card__note {
    margin-top: 2rem;
    opacity: .75;
    font-style: italic;
}


/* =========================================================
   MHL – LOGBUCH & TERMINE
   Kompakte Karten im gleichen Stil wie die oberen Themenkarten
   ========================================================= */

/* Gemeinsamer Kartencontainer */
.home-content-grid,
.dashboard-content-grid,
.home-panels {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .9fr);
    gap: 14px;
    width: 100%;
}

/* =========================================================
   GEMEINSAME PANEL-KARTE
   ========================================================= */

.home-content-grid > *,
.dashboard-content-grid > *,
.home-panels > * {
    position: relative;
    overflow: hidden;

    border-radius: 18px !important;

    border: 1px solid rgba(120, 218, 235, .38) !important;

    background:
        linear-gradient(
            135deg,
            rgba(8, 69, 91, .84),
            rgba(3, 35, 51, .90)
        ) !important;

    box-shadow:
        0 12px 28px rgba(0, 12, 20, .22),
        inset 0 1px 0 rgba(255,255,255,.07),
        inset 0 -1px 0 rgba(92,196,215,.06) !important;

    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

/* leichter Hover-Effekt */
.home-content-grid > *:hover,
.dashboard-content-grid > *:hover,
.home-panels > *:hover {
    transform: translateY(-2px);

    border-color: rgba(120, 218, 235, .58) !important;

    box-shadow:
        0 16px 34px rgba(0, 12, 20, .28),
        inset 0 1px 0 rgba(255,255,255,.08);
}


/* =========================================================
   PANEL-KOPF
   ========================================================= */

.home-content-grid .panel-header,
.dashboard-content-grid .panel-header,
.home-panels .panel-header,
.home-content-grid .section-header,
.dashboard-content-grid .section-header,
.home-panels .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 42px;

    padding: 10px 14px;

    border-bottom: 1px solid rgba(120, 218, 235, .18);
}


/* =========================================================
   LOGBUCH – KOMPAKTE EINTRÄGE MIT BILD
   ========================================================= */

.home-content-grid .logbook-item,
.dashboard-content-grid .logbook-item,
.home-panels .logbook-item,
.logbook-item {
    display: grid;

    grid-template-columns: 82px minmax(0, 1fr);

    gap: 12px;

    align-items: center;

    padding: 9px 12px;

    border-bottom: 1px solid rgba(120, 218, 235, .12);
}


/* letztes Element ohne Linie */
.home-content-grid .logbook-item:last-child,
.dashboard-content-grid .logbook-item:last-child,
.home-panels .logbook-item:last-child,
.logbook-item:last-child {
    border-bottom: 0;
}


/* Vorschaubild */
.logbook-item img,
.logbook-item__image,
.logbook-item .thumbnail {
    width: 82px;
    height: 58px;

    object-fit: cover;

    border-radius: 11px;

    border: 1px solid rgba(120, 218, 235, .25);

    box-shadow:
        0 5px 12px rgba(0,0,0,.20);
}


/* Logbuch-Titel */
.logbook-item h3,
.logbook-item__title {
    margin: 0 0 3px;

    font-size: .96rem;
    line-height: 1.2;
}


/* Beschreibung */
.logbook-item p,
.logbook-item__excerpt {
    margin: 0;

    font-size: .76rem;
    line-height: 1.35;

    opacity: .72;
}


/* Kategorie */
.logbook-item .eyebrow,
.logbook-item__category {
    margin-bottom: 3px;

    font-size: .58rem;
    letter-spacing: .08em;
    text-transform: uppercase;

    color: #7fe1ed;
}


/* =========================================================
   TERMINE – KOMPAKTE KARTEN
   ========================================================= */

.events-list,
.event-list {
    padding: 4px 10px 8px;
}


/* einzelner Termin */
.event-item,
.events-list .event,
.event-list .event {
    display: grid;

    grid-template-columns: 46px minmax(0, 1fr) auto;

    gap: 10px;

    align-items: center;

    padding: 8px 4px;

    border-bottom: 1px solid rgba(120, 218, 235, .12);
}


/* letzter Termin */
.event-item:last-child,
.events-list .event:last-child,
.event-list .event:last-child {
    border-bottom: 0;
}


/* Datumskarte */
.event-date {
    width: 42px;
    min-height: 44px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    border: 1px solid rgba(120, 218, 235, .35);

    background:
        linear-gradient(
            180deg,
            rgba(11, 91, 116, .72),
            rgba(4, 49, 68, .78)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06);
}


.event-date strong {
    font-size: 1rem;
    line-height: 1;
}


.event-date span {
    margin-top: 2px;

    font-size: .55rem;

    text-transform: uppercase;

    opacity: .72;
}


/* Terminname */
.event-item h3,
.event-item__title {
    margin: 0;

    font-size: .84rem;
    line-height: 1.2;
}


/* Terminbeschreibung */
.event-item p,
.event-item__meta {
    margin: 3px 0 0;

    font-size: .68rem;

    opacity: .65;
}


/* Termin-Button */
.event-item .btn,
.event-item button {
    min-height: 30px;

    padding: 5px 9px;

    border-radius: 9px;

    font-size: .65rem;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */





/* =========================================================
   MHL HOME – LOGBUCH & DOWNLOADS
   Kompakte Karten mit Bild
   ========================================================= */

.home-content-card {
    position: relative;
    overflow: hidden;

    border-radius: 22px !important;

    border: 1px solid rgba(120, 218, 235, .32);

    background:
        linear-gradient(
            145deg,
            rgba(8, 67, 88, .78),
            rgba(3, 34, 50, .88)
        );

    box-shadow:
        0 14px 32px rgba(0, 12, 20, .20),
        inset 0 1px 0 rgba(255,255,255,.06);

    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


/* ---------------------------------------------------------
   Bildbereich
   --------------------------------------------------------- */

.home-content-card__image {
    position: relative;

    width: 100%;
    height: 112px;

    overflow: hidden;

    background: rgba(2, 25, 37, .35);
}


/* Bild */
.home-content-card__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center 52%;

    opacity: .90;

    transition:
        transform .35s ease,
        opacity .25s ease;
}


/* dezenter Verlauf über dem Bild */
.home-content-card__image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(2, 28, 42, .05) 0%,
            rgba(2, 28, 42, .18) 55%,
            rgba(2, 28, 42, .72) 100%
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   Hover
   --------------------------------------------------------- */

.home-content-card:hover {
    transform: translateY(-2px);

    border-color: rgba(120, 218, 235, .48);

    box-shadow:
        0 18px 38px rgba(0, 12, 20, .28),
        inset 0 1px 0 rgba(255,255,255,.08);
}


.home-content-card:hover .home-content-card__image img {
    transform: scale(1.025);
    opacity: .96;
}


/* ---------------------------------------------------------
   Überschrift
   --------------------------------------------------------- */

.home-content-card .panel-heading {
    position: relative;
    z-index: 2;

    min-height: 46px;

    margin: 0;

    padding: 10px 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    border-bottom: 1px solid rgba(120, 218, 235, .14);
}


/* Überschrift links */
.home-content-card .panel-heading > span {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    font-size: .88rem;

    font-weight: 700;
}


/* Link rechts */
.home-content-card .panel-heading .text-link {
    flex-shrink: 0;

    font-size: .68rem;
}


/* ---------------------------------------------------------
   Logbuch-Einträge kompakter
   --------------------------------------------------------- */

.home-content-card--logbook .news-card {
    padding: 11px 14px;

    border-bottom: 1px solid rgba(120, 218, 235, .10);
}


.home-content-card--logbook .news-card:last-child {
    border-bottom: 0;
}


.home-content-card--logbook .news-card time {
    display: block;

    margin-bottom: 3px;

    font-size: .62rem;

    opacity: .58;
}


.home-content-card--logbook .news-card h2 {
    margin: 0 0 3px;

    font-size: .88rem;

    line-height: 1.25;
}


.home-content-card--logbook .news-card p {
    margin: 0;

    font-size: .72rem;

    line-height: 1.4;

    opacity: .68;
}


/* ---------------------------------------------------------
   Download-Einträge kompakter
   --------------------------------------------------------- */

.home-content-card--downloads .file-row {
    min-height: 54px;

    padding: 8px 12px;

    border-bottom: 1px solid rgba(120, 218, 235, .10);
}


.home-content-card--downloads .file-row:last-child {
    border-bottom: 0;
}


.home-content-card--downloads .file-icon {
    width: 34px;
    height: 34px;

    border-radius: 9px;

    display: grid;
    place-items: center;

    background: rgba(23, 113, 139, .32);

    border: 1px solid rgba(120, 218, 235, .22);
}


.home-content-card--downloads .file-row strong {
    display: block;

    font-size: .78rem;

    line-height: 1.25;
}


.home-content-card--downloads .file-row small {
    display: block;

    margin-top: 2px;

    font-size: .62rem;

    opacity: .62;
}


.home-content-card--downloads .file-row .btn.small {
    min-height: 29px;

    padding: 4px 8px;

    border-radius: 8px;

    font-size: .62rem;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */





/* =========================================================
   MHL HOME – EINKLAPPBARE LOGBUCH / DOWNLOAD KARTEN
   Standard: ZUGEKLAPPT
   ========================================================= */

.home-content-collapsible {
    align-items: start;
}


/* ---------------------------------------------------------
   Karte
   --------------------------------------------------------- */

.home-content-card[data-home-content-card] {
    position: relative;
    overflow: hidden;

    border-radius: 22px !important;

    border: 1px solid rgba(120, 218, 235, .34);

    background:
        linear-gradient(
            145deg,
            rgba(8, 67, 88, .82),
            rgba(3, 34, 50, .92)
        );

    box-shadow:
        0 14px 32px rgba(0, 12, 20, .22),
        inset 0 1px 0 rgba(255,255,255,.06);

    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}


/* ---------------------------------------------------------
   Kopfzeile
   --------------------------------------------------------- */

.home-content-card__header {
    position: relative;
    z-index: 5;

    min-height: 78px;

    padding: 13px 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    cursor: default;
}


/* ---------------------------------------------------------
   Titel
   --------------------------------------------------------- */

.home-content-card__title {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 12px;
}


.home-content-card__icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    color: #bceff8;

    background:
        linear-gradient(
            145deg,
            rgba(24, 128, 153, .55),
            rgba(5, 65, 86, .62)
        );

    border: 1px solid rgba(120, 218, 235, .28);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08);
}


.home-content-card__title-text {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


.home-content-card__title-text strong {
    display: block;

    color: #fff;

    font-family: var(--display);

    font-size: .98rem;
    line-height: 1.15;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.home-content-card__title-text small {
    display: block;

    color: rgba(255,255,255,.62);

    font-size: .68rem;
    line-height: 1.3;
}


/* ---------------------------------------------------------
   Roter Pfeil
   --------------------------------------------------------- */

.home-content-card__toggle {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    padding: 0;

    display: grid;
    place-items: center;

    border-radius: 50%;

    border: 2px solid rgba(255, 59, 59, .90);

    background:
        radial-gradient(
            circle,
            rgba(255, 54, 54, .22),
            rgba(80, 0, 0, .10)
        );

    color: #ff3b3b;

    cursor: pointer;

    box-shadow:
        0 0 0 rgba(255, 45, 45, 0),
        inset 0 0 12px rgba(255, 45, 45, .08);

    transition:
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}


.home-content-card__arrow {
    display: block;

    font-size: 1.45rem;
    line-height: 1;

    font-weight: 900;

    transform: translateY(-1px);

    transition:
        transform .35s cubic-bezier(.22,.61,.36,1);
}


/* Animation solange Karte geschlossen ist */
.home-content-card.is-collapsed
.home-content-card__arrow {
    animation:
        mhl-card-arrow-bounce 1.35s ease-in-out infinite;
}


/* Hover */
.home-content-card__toggle:hover {
    background:
        radial-gradient(
            circle,
            rgba(255, 54, 54, .34),
            rgba(80, 0, 0, .18)
        );

    border-color: #ff5050;

    box-shadow:
        0 0 18px rgba(255, 45, 45, .28),
        inset 0 0 14px rgba(255, 45, 45, .10);

    transform: scale(1.06);
}


/* Tastatur */
.home-content-card__toggle:focus-visible {
    outline: 2px solid #ff5a5a;
    outline-offset: 4px;
}


/* ---------------------------------------------------------
   Geschlossen
   --------------------------------------------------------- */

.home-content-card.is-collapsed {
    min-height: 78px;
}


.home-content-card.is-collapsed
.home-content-card__content {
    max-height: 0;

    opacity: 0;

    overflow: hidden;

    visibility: hidden;

    transform: translateY(-10px);
}


/* ---------------------------------------------------------
   Geöffnet
   --------------------------------------------------------- */

.home-content-card:not(.is-collapsed)
.home-content-card__content {
    max-height: 1000px;

    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}


.home-content-card:not(.is-collapsed)
.home-content-card__arrow {
    transform: rotate(180deg) translateY(1px);
}


/* ---------------------------------------------------------
   Inhalt
   --------------------------------------------------------- */

.home-content-card__content {
    max-height: 1000px;

    opacity: 1;

    overflow: hidden;

    transition:
        max-height .55s cubic-bezier(.22,.61,.36,1),
        opacity .28s ease,
        transform .45s cubic-bezier(.22,.61,.36,1),
        visibility .55s;

    transform-origin: top center;
}


/* ---------------------------------------------------------
   Bild
   --------------------------------------------------------- */

.home-content-card__image {
    position: relative;

    width: 100%;
    height: 112px;

    overflow: hidden;
}


.home-content-card__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 52%;

    opacity: .90;

    transition:
        transform .5s ease,
        opacity .35s ease;
}


.home-content-card:not(.is-collapsed)
.home-content-card__content:hover
.home-content-card__image img {
    transform: scale(1.025);

    opacity: .97;
}


.home-content-card__image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(2, 28, 42, .04) 0%,
            rgba(2, 28, 42, .18) 55%,
            rgba(2, 28, 42, .72) 100%
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   Panel Heading innerhalb des geöffneten Inhalts
   --------------------------------------------------------- */

.home-content-card__content .panel-heading {
    min-height: 46px;

    margin: 0;

    padding: 10px 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    border-bottom:
        1px solid rgba(120, 218, 235, .14);
}


.home-content-card__content .panel-heading > span {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #fff;

    font-size: .88rem;
    font-weight: 700;
}


.home-content-card__content .panel-heading .text-link {
    flex-shrink: 0;

    font-size: .68rem;
}


/* ---------------------------------------------------------
   Einträge
   --------------------------------------------------------- */

.home-content-card__entries {
    padding-bottom: 4px;
}


/* Logbuch */
.home-content-card--logbook .news-card {
    padding: 11px 14px;

    border-bottom:
        1px solid rgba(120, 218, 235, .10);

    background: transparent;
}


.home-content-card--logbook .news-card:last-child {
    border-bottom: 0;
}


.home-content-card--logbook .news-card time {
    display: block;

    margin-bottom: 3px;

    color: var(--cyan-400);

    font-size: .62rem;

    opacity: .68;
}


.home-content-card--logbook .news-card h2 {
    margin: 0 0 3px;

    font-size: .88rem;

    line-height: 1.25;
}


.home-content-card--logbook .news-card p {
    margin: 0;

    font-size: .72rem;

    line-height: 1.4;

    opacity: .68;
}


/* Downloads */
.home-content-card--downloads .file-row {
    min-height: 54px;

    padding: 8px 12px;

    border-bottom:
        1px solid rgba(120, 218, 235, .10);
}


.home-content-card--downloads .file-row:last-child {
    border-bottom: 0;
}


.home-content-card--downloads .file-icon {
    width: 34px;
    height: 34px;

    border-radius: 9px;

    display: grid;
    place-items: center;

    background: rgba(23, 113, 139, .32);

    border:
        1px solid rgba(120, 218, 235, .22);
}


.home-content-card--downloads .file-row strong {
    display: block;

    font-size: .78rem;

    line-height: 1.25;
}


.home-content-card--downloads .file-row small {
    display: block;

    margin-top: 2px;

    font-size: .62rem;

    opacity: .62;
}


.home-content-card--downloads .file-row .btn.small {
    min-height: 29px;

    padding: 4px 8px;

    border-radius: 8px;

    font-size: .62rem;
}


/* ---------------------------------------------------------
   Pfeil-Animation
   --------------------------------------------------------- */

@keyframes mhl-card-arrow-bounce {

    0%,
    100% {
        transform: translateY(-2px);
    }

    50% {
        transform: translateY(4px);
    }
}


/* ---------------------------------------------------------
   Screenreader
   --------------------------------------------------------- */

.home-content-card .sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */




/* =========================================================
   MHL HOME – FINAL COLLAPSIBLE CARDS
   Downloads links / Logbuch rechts
   ========================================================= */

.home-content-collapsible {
    align-items: start;
}


/* ---------------------------------------------------------
   Karten-Grundlayout
   --------------------------------------------------------- */

.home-content-card[data-home-content-card] {
    position: relative;
    overflow: hidden;

    min-height: 78px !important;

    padding: 0 !important;

    border-radius: 22px !important;

    border: 1px solid rgba(120, 218, 235, .34);

    background:
        linear-gradient(
            145deg,
            rgba(8, 67, 88, .84),
            rgba(3, 34, 50, .94)
        );

    box-shadow:
        0 14px 32px rgba(0, 12, 20, .22),
        inset 0 1px 0 rgba(255,255,255,.06);

    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}


/* ---------------------------------------------------------
   Kopfzeile
   --------------------------------------------------------- */

.home-content-card__header {
    min-height: 78px;

    box-sizing: border-box;

    padding: 13px 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;
}


/* ---------------------------------------------------------
   Titel
   --------------------------------------------------------- */

.home-content-card__title {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 12px;
}


.home-content-card__icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    color: #c3f2f8;

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(24, 128, 153, .55),
            rgba(5, 65, 86, .65)
        );

    border: 1px solid rgba(120, 218, 235, .30);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08);
}


.home-content-card__title-text {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


.home-content-card__title-text strong {
    display: block;

    color: #fff;

    font-family: var(--display);

    font-size: .98rem;
    line-height: 1.15;
}


.home-content-card__title-text small {
    display: block;

    color: rgba(255,255,255,.62);

    font-size: .68rem;
    line-height: 1.3;
}


/* ---------------------------------------------------------
   Roter Pfeil
   --------------------------------------------------------- */

.home-content-card__toggle {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    padding: 0;

    display: grid;
    place-items: center;

    border: 2px solid rgba(255, 59, 59, .95);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 59, 59, .20),
            rgba(80, 0, 0, .08)
        );

    color: #ff3b3b;

    cursor: pointer;

    box-shadow:
        0 0 14px rgba(255, 45, 45, .12);

    transition:
        transform .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}


.home-content-card__toggle:hover {
    transform: scale(1.08);

    background:
        radial-gradient(
            circle,
            rgba(255, 59, 59, .34),
            rgba(80, 0, 0, .14)
        );

    box-shadow:
        0 0 22px rgba(255, 45, 45, .32);
}


.home-content-card__toggle:focus-visible {
    outline: 2px solid #ff5b5b;
    outline-offset: 4px;
}


.home-content-card__arrow {
    display: block;

    font-size: 1.35rem;
    font-weight: 900;

    line-height: 1;

    transform: translateY(-1px);

    transition:
        transform .38s cubic-bezier(.22,.61,.36,1);
}


/* Geschlossen → Pfeil nach unten */
.home-content-card.is-collapsed
.home-content-card__arrow {
    animation:
        mhl-home-arrow-pulse 1.35s ease-in-out infinite;
}


/* Geöffnet → Pfeil nach oben */
.home-content-card:not(.is-collapsed)
.home-content-card__arrow {
    transform: rotate(180deg);
    animation: none;
}


/* ---------------------------------------------------------
   Inhalt
   --------------------------------------------------------- */

.home-content-card__content {
    max-height: 1200px;

    opacity: 1;

    overflow: hidden;

    visibility: visible;

    transform: translateY(0);

    transition:
        max-height .55s cubic-bezier(.22,.61,.36,1),
        opacity .30s ease,
        transform .45s ease,
        visibility .55s;
}


/* Geschlossen */
.home-content-card.is-collapsed
.home-content-card__content {
    max-height: 0;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-8px);
}


/* ---------------------------------------------------------
   Bild
   --------------------------------------------------------- */

.home-content-card__image {
    position: relative;

    width: 100%;
    height: 112px;

    overflow: hidden;
}


.home-content-card__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center 52%;

    opacity: .92;

    transition:
        transform .45s ease,
        opacity .30s ease;
}


.home-content-card__image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(2,28,42,.03),
            rgba(2,28,42,.20) 55%,
            rgba(2,28,42,.76)
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   Inhalte
   --------------------------------------------------------- */

.home-content-card__content .panel-heading {
    margin: 0;

    padding: 10px 14px;

    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom:
        1px solid rgba(120,218,235,.14);
}


.home-content-card__content .panel-heading > span {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    font-size: .88rem;
    font-weight: 700;
}


.home-content-card__content .panel-heading .text-link {
    font-size: .68rem;
}


/* ---------------------------------------------------------
   Pfeil Animation
   --------------------------------------------------------- */

@keyframes mhl-home-arrow-pulse {

    0%,
    100% {
        transform: translateY(-2px);
    }

    50% {
        transform: translateY(4px);
    }
}


/* ---------------------------------------------------------
   Screenreader
   --------------------------------------------------------- */

.home-content-card .sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */


/* ============================================================
   MHL HOME – LOGBUCH / DOWNLOAD-KARTEN
   EQUAL HEIGHT – COMPACT CONTENT
   ============================================================ */

.content-grid.two-columns.mhl-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}


/* ------------------------------------------------------------
   KARTEN
   ------------------------------------------------------------ */

.home-content-card {
    min-width: 0;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}


/*
 * Beide Karten haben im geöffneten Zustand dieselbe Höhe.
 * Die Höhe wird NICHT über Flex-Shrinking der Inhalte erzeugt.
 */
.home-content-card:not(.is-collapsed) {
    min-height: 390px;
}


/* ------------------------------------------------------------
   KARTENKOPF
   ------------------------------------------------------------ */

.home-content-card > .home-content-card__header {
    min-height: 76px;
    height: 76px;
    box-sizing: border-box;

    padding: 12px 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}


/* Titel im Kartenkopf */

.home-content-card__header strong {
    font-size: .95rem;
    line-height: 1.2;
    font-weight: 700;
}


/* Untertitel */

.home-content-card__header small {
    display: block;

    margin-top: 3px;

    font-size: .68rem;
    line-height: 1.25;

    opacity: .72;
}


/* ------------------------------------------------------------
   ROTER TOGGLE-PFEIL
   ------------------------------------------------------------ */

.home-content-card__toggle {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
}


/* ------------------------------------------------------------
   GEÖFFNETER CONTENT
   ------------------------------------------------------------ */

.home-content-card:not(.is-collapsed)
.home-content-card__content {
    display: block;

    width: 100%;
    min-height: 0;

    box-sizing: border-box;

    overflow: hidden;
}


/* ------------------------------------------------------------
   BILD
   ------------------------------------------------------------ */

.home-content-card__content
.home-content-card__image {
    width: 100%;
    height: 112px;

    overflow: hidden;

    box-sizing: border-box;
}


.home-content-card__content
.home-content-card__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ------------------------------------------------------------
   INNERE ÜBERSCHRIFT
   ------------------------------------------------------------ */

.home-content-card__content > .panel-heading {
    min-height: 44px;

    padding: 8px 13px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}


.home-content-card__content > .panel-heading > span {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    min-width: 0;

    font-size: .8rem;
    line-height: 1.2;
    font-weight: 700;
}


.home-content-card__content > .panel-heading .text-link {
    flex: 0 0 auto;

    font-size: .66rem;
    font-weight: 700;

    white-space: nowrap;
}


/* ============================================================
   LOGBUCH
   ============================================================ */


/*
 * Keine Flex-Schrumpfung mehr.
 * Die Beiträge behalten ihre natürliche Höhe.
 */
.home-content-card--logbook .home-content-card__entries {
    display: block;

    width: 100%;

    overflow: hidden;
}


/*
 * Kompakte News-Karte
 */
.home-content-card--logbook .news-card {
    display: block;

    width: 100%;
    min-height: 0;

    margin: 0 !important;

    padding: 9px 13px !important;

    box-sizing: border-box;

    border-radius: 0 !important;
}


/*
 * Trennlinien zwischen den Beiträgen
 */
.home-content-card--logbook .news-card + .news-card {
    border-top: 1px solid rgba(120, 218, 235, .18);
}


/*
 * Datum
 */
.home-content-card--logbook .news-card time {
    display: block;

    margin: 0 0 3px;

    font-size: .6rem;
    line-height: 1.2;

    font-weight: 700;

    opacity: .65;
}


/*
 * Titel
 */
.home-content-card--logbook .news-card h2 {
    margin: 0;

    font-size: .78rem;
    line-height: 1.25;

    font-weight: 700;
}


/*
 * Beschreibung
 */
.home-content-card--logbook .news-card p {
    margin: 3px 0 0;

    font-size: .64rem;
    line-height: 1.3;

    opacity: .7;
}


/* ============================================================
   DOWNLOADS
   ============================================================ */


/*
 * GANZ WICHTIG:
 *
 * Die Download-Zeilen dürfen NICHT flex: 1 1 0 bekommen.
 * Genau das hat die vorherige Version zerstört.
 */
.home-content-card--downloads .file-row {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 50px;

    padding: 7px 11px !important;

    box-sizing: border-box;

    gap: 9px;

    flex: none !important;
}


/*
 * Datei-Icon
 */
.home-content-card--downloads .file-icon {
    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/*
 * Mittlerer Textbereich
 */
.home-content-card--downloads .file-row > div:nth-child(2) {
    flex: 1 1 auto;

    min-width: 0;
}


/*
 * Dateiname
 */
.home-content-card--downloads .file-row strong {
    display: block;

    font-size: .74rem;
    line-height: 1.25;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*
 * Kategorie / Größe
 */
.home-content-card--downloads .file-row small {
    display: block;

    margin-top: 2px;

    font-size: .6rem;
    line-height: 1.2;

    opacity: .58;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*
 * Download-Button
 */
.home-content-card--downloads .file-row .btn.small {
    flex: 0 0 auto;

    min-height: 31px;

    padding: 4px 9px;

    font-size: .64rem;

    white-space: nowrap;
}


/* ============================================================
   HÖHENANGLEICHUNG
   ============================================================ */


/*
 * Desktop:
 *
 * Beide Karten bekommen eine identische Außenhöhe.
 *
 * Der Inhalt wird NICHT künstlich gestreckt.
 */
@media (min-width: 1200px) {

    .home-content-card:not(.is-collapsed) {
        height: 390px;
        min-height: 390px;
        max-height: 390px;
    }

    /*
     * Dadurch bleibt das Kartenpaar exakt gleich hoch.
     */
    .home-content-card__content {
        max-height: calc(390px - 76px);
        overflow: hidden;
    }

    /*
     * Bild
     */
    .home-content-card__content
    .home-content-card__image {
        height: 108px;
    }

    /*
     * Logbuch:
     * 3 Beiträge kompakt innerhalb der verbleibenden Fläche.
     */
    .home-content-card--logbook .news-card {
        min-height: 67px;
    }

    /*
     * Downloads:
     * normale, sichtbare Zeilen.
     */
    .home-content-card--downloads .file-row {
        min-height: 50px;
    }
}


/* ============================================================
   TABLET
   ============================================================ */




/* ============================================================
   MOBILE
   ============================================================ */




/* ============================================================
   KLEINE SMARTPHONES
   ============================================================ */


/* ============================================================
   MEERHEIMATLIEBE
   FEATURE GRID – 6 KARTEN IN EINER REIHE
   ============================================================ */

.feature-grid.feature-grid-maritime {
    display: grid;

    grid-template-columns: repeat(6, minmax(0, 1fr));

    width: 100%;
    max-width: 100%;

    gap: 14px;

    align-items: stretch;
}


/* ============================================================
   FEATURE CARDS
   ============================================================ */

.feature-grid.feature-grid-maritime .feature-card {
    width: 100%;
    min-width: 0;

    box-sizing: border-box;

    /*
     * Alle Karten exakt gleich hoch.
     */
    min-height: 205px;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}


/*
 * Überschrift nicht umbrechen lassen.
 */
.feature-grid.feature-grid-maritime .feature-card strong {
    display: block;

    font-size: .88rem;
    line-height: 1.2;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*
 * Beschreibung kompakt halten.
 */
.feature-grid.feature-grid-maritime .feature-card p {
    margin-top: 5px;

    font-size: .67rem;
    line-height: 1.35;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
}


/* ============================================================
   GROSSE DESKTOPS
   ============================================================ */

@media (min-width: 1500px) {

    .feature-grid.feature-grid-maritime {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 16px;
    }

    .feature-grid.feature-grid-maritime .feature-card {
        min-height: 205px;
    }
}


/* ============================================================
   NORMALE DESKTOPS
   ============================================================ */




/* ============================================================
   TABLET
   ============================================================ */




/* ============================================================
   MOBIL
   ============================================================ */




/* ============================================================
   KLEINE SMARTPHONES
   ============================================================ */


/* ============================================================
   MHL FEATURE CARDS
   FINAL DESKTOP GRID – 6 KARTEN IN EINER REIHE
   ============================================================ */

/*
 * Der bestehende CSS-Code gibt den Feature-Karten offenbar
 * eine zu große Mindestbreite. Dadurch wird die 6. Karte
 * auf eine zweite Zeile verschoben.
 *
 * Dieser Block überschreibt diese Vorgabe gezielt.
 */

.feature-grid.feature-grid-maritime {
    display: grid !important;

    /*
     * Desktop:
     * exakt 6 gleich breite Spalten.
     */
    grid-template-columns:
        repeat(6, minmax(0, 1fr)) !important;

    grid-auto-flow: row !important;

    width: 100% !important;
    max-width: 100% !important;

    gap: 16px !important;

    align-items: stretch !important;

    box-sizing: border-box !important;
}


/* ============================================================
   KARTEN
   ============================================================ */

.feature-grid.feature-grid-maritime > .feature-card {
    /*
     * Entscheidend:
     * Die bisherige Mindestbreite darf das Grid nicht
     * mehr aufbrechen.
     */
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    box-sizing: border-box !important;

    /*
     * Gleiche Höhe für alle Karten.
     */
    min-height: 205px !important;

    height: 205px !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    /*
     * Verhindert, dass Inhalt die Grid-Spalte verbreitert.
     */
    contain: layout paint !important;
}


/* ============================================================
   BILD / BACKGROUND
   ============================================================ */

.feature-grid.feature-grid-maritime > .feature-card::before {
    max-width: 100% !important;
}


/* ============================================================
   ICON
   ============================================================ */

.feature-grid.feature-grid-maritime
> .feature-card
> .feature-card__icon {
    flex: 0 0 auto !important;
}


/* ============================================================
   TITEL
   ============================================================ */

.feature-grid.feature-grid-maritime
> .feature-card
> strong {

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    font-size: .90rem !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* ============================================================
   BESCHREIBUNG
   ============================================================ */

.feature-grid.feature-grid-maritime
> .feature-card
> p {

    width: 100% !important;
    min-width: 0 !important;

    margin-top: 5px !important;

    font-size: .68rem !important;
    line-height: 1.35 !important;

    overflow: hidden !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}


/* ============================================================
   DESKTOP >= 1400px
   ============================================================ */

@media (min-width: 1400px) {

    .feature-grid.feature-grid-maritime {
        grid-template-columns:
            repeat(6, minmax(0, 1fr)) !important;

        gap: 16px !important;
    }

    .feature-grid.feature-grid-maritime
    > .feature-card {

        height: 205px !important;
        min-height: 205px !important;
    }
}


/* ============================================================
   DESKTOP 1101–1399px
   ============================================================ */




/* ============================================================
   TABLET
   ============================================================ */




/* ============================================================
   MOBILE
   ============================================================ */




/* ============================================================
   KLEINES SMARTPHONE
   ============================================================ */




/* MHL Banner – kompakte Kartenbilder */

.home-content-card__image--banner {
    width: 100%;
    height: 112px;
    overflow: hidden;
    position: relative;
    background: rgba(5, 35, 48, .65);
}

.home-content-card__image--banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/*
 * Desktop:
 * etwas mehr Bildfläche, ohne dass das Motiv unnötig
 * groß wirkt.
 */
@media (min-width: 1200px) {
    .home-content-card__image--banner {
        height: 112px;
    }
}

/*
 * Tablet
 */


/*
 * Smartphone
 */




/* MHL Banner – Ende */


/* MHL BANNER PREVIEW SIZE START */

/*
 * ============================================================
 * MeerHeimatLiebe
 * Banner-Darstellung der aufklappbaren Karten
 *
 * Ziel:
 * - exakt kompakte Bannerhöhe wie in der Vorschau
 * - Segelboot / Robbe vollständig erkennbar
 * - keine übergroße Bildfläche
 * - Kartenhöhe bleibt durch den eigentlichen Inhalt bestimmt
 * ============================================================
 */

.home-content-card .home-content-card__content > .home-content-card__image {
    width: 100% !important;
    height: 125px !important;

    min-height: 108px !important;
    max-height: 125px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    position: relative !important;
    display: block !important;

    background: rgba(5, 35, 48, .55);
}

.home-content-card .home-content-card__content > .home-content-card__image img {
    display: block !important;

    width: 100% !important;
    height: 125px !important;

    min-height: 108px !important;
    max-height: 125px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;

    border: 0 !important;
}

/*
 * Downloads:
 * Segelboot leicht mittig halten, damit das Motiv
 * auch im schmalen Banner gut erkennbar bleibt.
 */
.home-content-card--downloads
    .home-content-card__content
    > .home-content-card__image img {
    object-position: center center !important;
}

/*
 * Logbuch:
 * Robbe und Leuchtturm gemeinsam im sichtbaren Bereich halten.
 */
.home-content-card--logbook
    .home-content-card__content
    > .home-content-card__image img {
    object-position: center center !important;
}


/* Tablet */



/* Smartphone */



/* Sehr kleine Displays */


/* MHL BANNER PREVIEW SIZE END */


/* ============================================================
   MHL GOODBYE – POSITION FINAL
   Nur Goodbye-Seite.
   Header bleibt unverändert.
   ============================================================ */

body.goodbye-page .site-main {
    position: relative;
    width: 100%;
    min-height: calc(100vh - var(--header-offset, 56px));
    margin: 0;
    padding: 0 1rem 3rem !important;
    box-sizing: border-box;
}

body.goodbye-page .goodbye-stage {
    width: 100%;
    min-height: calc(100vh - var(--header-offset, 56px));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;

    /* Abstand zwischen fixiertem Header und Karte */
    padding-top: 4.5rem;
}

body.goodbye-page .goodbye-card {
    position: relative;
    width: min(94vw, 1560px);
    margin: 0 auto !important;
    box-sizing: border-box;
}

/* Auf kleineren Bildschirmen weniger Abstand */





/* ============================================================
   MHL GOODBYE – FINAL POSITION
   Header bleibt unangetastet.
   Karte: horizontal mittig + definierter Abstand nach oben.
   ============================================================ */

body.goodbye-page .site-main {
    display: block !important;
    width: 100% !important;
    min-height: calc(100vh - var(--header-offset, 56px)) !important;
    margin: 0 !important;

    /*
     * Abstand zwischen fixiertem Header und Goodbye-Karte.
     * 80px unterhalb des Headers.
     */
    padding: 80px 1.5rem 3rem !important;

    box-sizing: border-box !important;
}

body.goodbye-page .goodbye-stage {
    width: 100% !important;
    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: flex-start !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

body.goodbye-page .goodbye-card {
    position: relative !important;

    width: min(100%, 1560px) !important;
    max-width: 1560px !important;

    margin: 0 auto !important;

    box-sizing: border-box !important;
}

/* Tablet */


/* Smartphone */


/* ==========================================================
   MHL EXACT logo.png v5 - isolated
   ========================================================== */
.mhl-brand-logo-image {
    display: block !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    object-fit: contain !important;
    object-position: center !important;
    flex: 0 0 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.brand-mark {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    overflow: visible !important;
    flex: 0 0 56px !important;
}

/* ==========================================================
   MHL LOGO POSITION / CLEAN v6
   Nur das aktive Header-Logo.
   Kein grauer Kreis, kein Container-Hintergrund.
   ========================================================== */

.brand-mark:has(.mhl-brand-logo-image) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;

    padding: 0 !important;
    margin: 0 10px 0 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    overflow: visible !important;
    flex: 0 0 60px !important;
}

.brand-mark:has(.mhl-brand-logo-image)::before,
.brand-mark:has(.mhl-brand-logo-image)::after {
    content: none !important;
    display: none !important;
}

.brand-mark .mhl-brand-logo-image {
    display: block !important;

    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: center center !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    flex: 0 0 58px !important;
}

/* ==========================================================
   MHL LOGO NO BOX v7
   Ausschließlich der vorhandene Logo-Container.
   Das PNG selbst wird NICHT verändert.
   ========================================================== */

/* Entfernt jede sichtbare Fläche des Logo-Containers. */
.brand-mark:has(.mhl-brand-logo-image),
.mhl-brand-r100 .brand-mark:has(.mhl-brand-logo-image) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;

    margin: 0 10px 0 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    border-radius: 0 !important;

    outline: 0 !important;
    outline-style: none !important;

    box-shadow: none !important;
    text-shadow: none !important;

    overflow: visible !important;
    flex: 0 0 58px !important;
}

/* Entfernt mögliche dekorative Pseudo-Elemente. */
.brand-mark:has(.mhl-brand-logo-image)::before,
.brand-mark:has(.mhl-brand-logo-image)::after,
.mhl-brand-r100 .brand-mark:has(.mhl-brand-logo-image)::before,
.mhl-brand-r100 .brand-mark:has(.mhl-brand-logo-image)::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Nur das tatsächliche PNG. */
.brand-mark .mhl-brand-logo-image,
.mhl-brand-r100 .brand-mark .mhl-brand-logo-image {
    display: block !important;

    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    object-fit: contain !important;
    object-position: center center !important;
    flex: 0 0 58px !important;
}

/* ==========================================================
   MHL LOGO NO BOX v8
   Der Kasten kann auf dem Brand-Link/Wrapper liegen.
   Daher werden ausschließlich die Vorfahren des aktiven
   Logo-Markups transparent gesetzt.
   ========================================================== */

/* Aktiver Brand-Link / Brand-Wrapper */
a.brand:has(.mhl-brand-logo-image),
.brand:has(.mhl-brand-logo-image),
.mhl-brand-r100:has(.mhl-brand-logo-image),
.mhl-brand-r100 .brand:has(.mhl-brand-logo-image) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: none !important;
}

/* Logo-Mark selbst */
.brand-mark:has(.mhl-brand-logo-image),
.mhl-brand-r100 .brand-mark:has(.mhl-brand-logo-image) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    padding: 0 !important;
}

/* Keine dekorativen Pseudo-Elemente */
a.brand:has(.mhl-brand-logo-image)::before,
a.brand:has(.mhl-brand-logo-image)::after,
.brand:has(.mhl-brand-logo-image)::before,
.brand:has(.mhl-brand-logo-image)::after,
.brand-mark:has(.mhl-brand-logo-image)::before,
.brand-mark:has(.mhl-brand-logo-image)::after,
.mhl-brand-r100:has(.mhl-brand-logo-image)::before,
.mhl-brand-r100:has(.mhl-brand-logo-image)::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Das PNG selbst bleibt unverändert. */
.brand-mark .mhl-brand-logo-image {
    display: block !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================
   MHL LOGO FINAL NO-BOX v9
   Alte .brand-mark-Dekoration vollständig neutralisieren.
   Das eigentliche logo.png bleibt unverändert.
   ========================================================== */

.site-header .brand.mhl-brand-r100 .brand-mark:has(.mhl-brand-logo-image),
.site-header .brand.mhl-brand-r100 .brand-mark:has(.mhl-brand-logo-image)::before,
.site-header .brand.mhl-brand-r100 .brand-mark:has(.mhl-brand-logo-image)::after,
.site-header .brand-mark:has(.mhl-brand-logo-image),
.site-header .brand-mark:has(.mhl-brand-logo-image)::before,
.site-header .brand-mark:has(.mhl-brand-logo-image)::after {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;

    outline: 0 !important;
    box-shadow: none !important;

    content: none !important;
    display: flex !important;
}

.site-header .brand-mark:has(.mhl-brand-logo-image)::before,
.site-header .brand-mark:has(.mhl-brand-logo-image)::after {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.site-header .brand-mark:has(.mhl-brand-logo-image) {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;

    margin: 0 10px 0 0 !important;
    padding: 0 !important;

    border-radius: 0 !important;
    overflow: visible !important;

    flex: 0 0 58px !important;
}

.site-header .brand-mark:has(.mhl-brand-logo-image)
.mhl-brand-logo-image {
    width: 58px !important;
    height: 58px !important;

    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    object-fit: contain !important;
    object-position: center !important;
}

/* ==========================================================
   MHL DIRECT LOGO v12
   Nur das direkte PNG positionieren.
   Kein brand-mark-Wrapper mehr.
   ========================================================== */

.site-header .brand .mhl-brand-logo-image {
    display: block !important;

    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: 0 10px 0 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    flex: 0 0 58px !important;
}