/* Optik der Community (Issue #327): Hub, Seekarte, Bestandsseiten, Routen,
 * Crewboerse, Ortsseiten, Reviere und Merkliste.
 *
 * Ausgelagert aus den Seiten: Vorher trugen community.php (886 Zeilen),
 * harbor.php (172), spot.php (120), place_detail.php (108), merkliste.php (89),
 * reviere.php und revier.php je ein eigenes Inline-CSS mit je eigener Fassung
 * derselben Kachel — und mit festen Farbwerten, die den Nachtmodus nicht
 * kannten. Muster: assets/bordkasse.css, assets/reference-content.css.
 *
 * Gefaerbt wird ausschliesslich ueber die Theme-Variablen aus assets/style.css;
 * Toenungen entstehen per color-mix aus diesen Variablen, damit sie in beiden
 * Modi stimmen. Feste Farben gibt es nur auf den Kartenkacheln (Marker und
 * Kartenbedienung — die Ausnahmen aus backend/DESIGN.md), und die stehen im
 * Kartenblock von style.css.
 *
 * Namensraum: `cm-` sind die Bausteine (includes/community_shell.php),
 * `community-` die Seitenhuelle (style.css) und die Crewboerse.
 */

.community-shell,
.cm-page {
    --cm-tint: color-mix(in srgb, var(--primary-brand) 8%, transparent);
    --cm-tint-strong: color-mix(in srgb, var(--primary-brand) 14%, transparent);
    --cm-line-strong: color-mix(in srgb, var(--primary-brand) 38%, var(--border-color));
    --cm-focus-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-brand) 18%, transparent);
    --cm-card-shadow: 0 6px 18px color-mix(in srgb, var(--text-primary) 8%, transparent);
}

/* --- Seitenkopf ---------------------------------------------------------- */
.cm-hero {
    margin-bottom: 1.5rem;
}

.cm-hero h1 {
    color: var(--primary-brand);
    font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
    letter-spacing: 0;
    line-height: 1.15;
    margin: 0 0 0.5rem;
}

.cm-kicker {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 0.35rem;
}

.cm-lead {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 62ch;
    margin: 0;
}

.cm-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-top: 1rem;
}

.cm-hero-actions .btn-primary {
    min-height: var(--touch-target-min);
    display: inline-flex;
    align-items: center;
}

/* --- Chips und Plaketten ---------------------------------------------------- */
.cm-chips,
.community-tags,
.community-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.75rem 0 0;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.cm-chip,
.community-tags span,
.community-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.2;
}

.community-tags span a,
.community-meta span a {
    color: inherit;
    text-decoration: none;
}

.cm-chip-link {
    text-decoration: none;
    transition: var(--transition-soft);
}

.cm-chip-link:hover,
.cm-chip-link:focus-visible {
    border-color: var(--primary-brand);
    color: var(--primary-brand);
}

.cm-chip-toggle {
    cursor: pointer;
    user-select: none;
    position: relative;
    min-height: 2.35rem;
    border-color: var(--cm-line-strong);
    background-color: var(--surface);
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.cm-chip-toggle input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.cm-chip-toggle.is-off {
    opacity: 0.5;
    border-color: var(--border-color);
}

.cm-chip-toggle:focus-within {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* Farbpunkt eines Ortstyps — dieselbe Kennung wie der Marker auf der Karte
   (feste Signalfarbe, siehe DESIGN.md), deshalb ohne Nachtmodus-Gegenstueck. */
.cm-dot {
    flex: 0 0 auto;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 999px;
    background-color: var(--map-cluster);
    box-shadow: 0 0 0 2px var(--surface);
}

.cm-dot-harbor { background-color: var(--map-cat-harbor); }
.cm-dot-spot { background-color: var(--map-cat-spot); }
.cm-dot-mooring_field { background-color: var(--map-cat-mooring); }
.cm-dot-anchorage { background-color: var(--map-cat-anchorage); }
.cm-dot-route { background-color: var(--map-cat-route); }

.cm-status,
.community-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    background-color: var(--status-info-bg);
    color: var(--status-info-text);
}

.cm-status.is-open,
.community-status.is-open {
    background-color: var(--status-success-bg);
    color: var(--status-success-text);
}

.cm-status.is-warning,
.community-status.is-full {
    background-color: var(--status-warning-bg);
    color: var(--status-warning-text);
}

.cm-status.is-muted,
.community-status.is-closed,
.community-status.is-cancelled {
    background-color: var(--bg-main);
    color: var(--text-muted);
}

/* --- Reiter der Bestandsseiten -------------------------------------------- */
.cm-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
}

.cm-tab {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target-min);
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background-color: var(--surface);
    color: var(--text-primary);
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition-soft);
}

.cm-tab:hover,
.cm-tab:focus-visible {
    border-color: var(--primary-brand);
    color: var(--primary-brand);
}

.cm-tab.is-active {
    background-color: var(--primary-brand);
    border-color: var(--primary-brand);
    color: var(--on-primary);
}

/* --- Kennzahlen ------------------------------------------------------------ */
.cm-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin: 0 0 1.25rem;
}

.cm-stat {
    display: block;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-main);
    background-color: var(--surface);
    color: inherit;
    text-decoration: none;
    box-shadow: var(--shadow-soft);
    transition: var(--transition-soft);
}

a.cm-stat:hover,
a.cm-stat:focus-visible {
    border-color: var(--primary-brand);
}

.cm-stat strong {
    display: block;
    color: var(--primary-brand);
    font-size: 1.6rem;
    line-height: 1.1;
}

.cm-stat span {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* --- Abschnitte ------------------------------------------------------------ */
.cm-section {
    background-color: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-main);
    box-shadow: var(--shadow-soft);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    scroll-margin-top: 1.25rem;
}

.cm-section > h2:first-child,
.cm-section-head h2,
.cm-section-head h3 {
    margin: 0 0 0.3rem;
}

.cm-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.cm-section-head p,
.cm-section-text {
    color: var(--text-muted);
    margin: 0;
}

.cm-section-aside {
    flex: 0 0 auto;
}

.cm-muted {
    color: var(--text-muted);
}

.cm-note {
    margin-top: 0.85rem;
    padding: 0.8rem 0.95rem;
    border-radius: var(--border-radius-small);
    background-color: var(--bg-main);
    color: var(--text-muted);
}

.cm-callout {
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    border-left: 4px solid var(--primary-brand);
    border-radius: var(--border-radius-small);
    background-color: var(--status-info-bg);
    color: var(--text-primary);
}

/* --- Raster und Kacheln --------------------------------------------------- */
.cm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.cm-grid-wide {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.cm-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
    padding: 1rem 1.05rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-main);
    background-color: var(--surface);
    box-shadow: var(--shadow-soft);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.cm-card:hover,
.cm-card:focus-within {
    border-color: var(--cm-line-strong);
    box-shadow: var(--cm-card-shadow);
}

.cm-card[hidden] {
    display: none;
}

.cm-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.cm-card-head .cm-kicker {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-rank {
    display: inline-flex;
    min-width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background-color: var(--cm-tint-strong);
    color: var(--primary-brand);
    font-size: 0.82rem;
    font-weight: 800;
    flex: 0 0 auto;
}

.cm-card-title {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.3;
}

.cm-card-title a {
    color: var(--text-primary);
    text-decoration: none;
}

.cm-card-title a:hover,
.cm-card-title a:focus-visible {
    color: var(--primary-brand);
    text-decoration: underline;
}

.cm-card-facts,
.cm-card-text {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.cm-card-facts .cm-sep {
    color: var(--border-color);
}

.cm-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.cm-card.is-compact .cm-card-actions {
    padding-top: 0.2rem;
}

.cm-inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
}

.cm-inline-form select {
    width: auto;
    min-height: 2.4rem;
    margin: 0;
    padding: 0.35rem 0.6rem;
    font-size: 0.9rem;
}

.cm-ghost-btn {
    display: inline-flex;
    align-items: center;
    min-height: 2.4rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background-color: transparent;
    color: var(--primary-brand);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-soft);
}

.cm-ghost-btn:hover,
.cm-ghost-btn:focus-visible {
    border-color: var(--primary-brand);
    background-color: var(--cm-tint);
}

/* --- Bewertung ------------------------------------------------------------- */
.cm-rating {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
    color: var(--text-primary);
    font-weight: 700;
}

.cm-rating-star {
    color: var(--status-warning-solid);
}

.cm-rating-scale,
.cm-rating-count {
    color: var(--text-muted);
    font-weight: 500;
}

.cm-rating-empty {
    color: var(--text-muted);
    font-style: italic;
}

/* --- Leerzustand, Anmeldung an der Aktion ---------------------------------- */
.cm-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-main);
    background-color: var(--bg-main);
    padding: 1rem 1.1rem;
    color: var(--text-muted);
}

.cm-empty p {
    margin: 0;
    flex: 1 1 260px;
}

.cm-login-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.9rem;
    padding: 0.8rem 1rem;
    border-radius: var(--border-radius-small);
    background-color: var(--cm-tint);
    color: var(--text-primary);
}

.cm-login-cta p {
    margin: 0;
    flex: 1 1 240px;
}

/* --- Filterleiste (Bestandsseiten) ----------------------------------------- */
.cm-toolbar {
    display: grid;
    grid-template-columns: minmax(200px, 1.6fr) repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    align-items: end;
    margin-bottom: 1rem;
}

.cm-toolbar .form-group {
    margin-bottom: 0;
}

.cm-toolbar label {
    font-size: 0.82rem;
}

.cm-toolbar-row {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.cm-toolbar-row .cm-chip-toggle {
    min-height: 2.5rem;
}

.cm-toolbar-status {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
    min-height: 1.2rem;
}

/* Element plus Klasse: `.form-group input` aus style.css ist spezifischer als
   eine reine Klasse und setzte sonst die Innenabstaende zurueck. */
input.cm-search,
.form-group input.cm-search {
    width: 100%;
    margin: 0;
    min-height: 2.9rem;
    padding: 0.6rem 1rem 0.6rem 2.6rem;
    border: 1px solid var(--cm-line-strong);
    border-radius: 999px;
    background-color: var(--surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.9rem center;
    color: var(--text-primary);
    font: inherit;
    appearance: none;
    transition: var(--transition-soft);
}

input.cm-search:focus,
.form-group input.cm-search:focus {
    border-color: var(--primary-brand);
    outline: none;
    box-shadow: var(--cm-focus-shadow);
}

input.cm-search::-webkit-search-cancel-button {
    cursor: pointer;
}

.cm-result-count {
    color: var(--text-muted);
    font-weight: 700;
    margin: 0 0 0.75rem;
}

/* --- Seekarte ---------------------------------------------------------------- */
.cm-map-scope {
    display: grid;
    gap: 0.75rem;
}

.cm-map-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.cm-map-toolbar .cm-search {
    flex: 1 1 260px;
}

.cm-map-filters {
    margin: 0;
}

.cm-map-panel {
    display: grid;
    gap: 0.75rem;
}

.cm-map {
    height: 420px;
    border-radius: var(--border-radius-main);
}

.cm-map-tall {
    height: min(68vh, 640px);
}

.cm-map-place {
    height: 340px;
}

.cm-map-route {
    height: 400px;
}

.cm-map-compact {
    height: 280px;
}

.cm-map .lb-map-empty {
    background-color: var(--bg-main);
}

/* Auf der kleinen Ortskarte kollidierte der Bedienhinweis mit der
   Quellenangabe; die Tastaturfuehrung bleibt ueber aria-describedby erhalten. */
.cm-map-place .lb-map-hint,
.cm-map-compact .lb-map-hint {
    display: none;
}

.cm-hero-rating {
    margin: 0.75rem 0 0;
    font-size: 1.05rem;
}

.cm-map-detail {
    min-height: 3.6rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    background-color: var(--bg-main);
    color: var(--text-muted);
}

.cm-map-detail-empty {
    margin: 0;
}

.cm-map-detail-title {
    display: block;
    color: var(--text-primary);
    font-size: 1.05rem;
    margin-bottom: 0.15rem;
}

.cm-map-detail-meta {
    display: block;
    font-size: 0.9rem;
}

.cm-map-detail-text {
    margin: 0.45rem 0 0;
    font-size: 0.9rem;
}

.cm-map-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.7rem;
}

.cm-map-count {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.cm-map-list {
    display: grid;
    gap: 0.55rem;
}

.cm-map-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-main);
    background-color: var(--surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cm-map-item:hover,
.cm-map-item:focus-within,
.cm-map-item.is-active {
    border-color: var(--cm-line-strong);
    box-shadow: var(--cm-card-shadow);
}

.cm-map-item-body {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 0.15rem;
    padding: 0.2rem 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cm-map-item-body:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--border-radius-small);
}

.cm-map-item-title {
    color: var(--text-primary);
    font-weight: 700;
}

.cm-map-item-meta {
    color: var(--text-muted);
    font-size: 0.84rem;
}

.cm-map-item-link {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* --- Kennzahlenraster, FAQ ---------------------------------------------------- */
.cm-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.7rem;
    margin: 0.9rem 0 0;
}

.cm-meta-item {
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    background-color: var(--bg-main);
}

.cm-meta-item dt {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}

.cm-meta-item dd {
    margin: 0;
    color: var(--text-primary);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.cm-meta-item dd a {
    color: var(--primary-brand);
}

.cm-faq-item {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    background-color: var(--bg-main);
    padding: 0.75rem 0.95rem;
    margin-top: 0.6rem;
}

.cm-faq-item summary {
    cursor: pointer;
    font-weight: 700;
    min-height: 1.6rem;
}

.cm-faq-item p {
    margin: 0.55rem 0 0;
    color: var(--text-muted);
    line-height: 1.6;
}

/* --- Ortsseite ----------------------------------------------------------------- */
.cm-place-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr);
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1.25rem;
}

.cm-place-hero .cm-section {
    margin-bottom: 0;
}

.cm-place-hero .cm-hero {
    margin-bottom: 0;
}

.cm-place-map-card {
    display: grid;
    gap: 0.6rem;
    align-content: start;
}

.cm-place-map-card .cm-map-scope {
    gap: 0.6rem;
}

.cm-place-map-card .cm-map-place {
    height: 100%;
    min-height: 320px;
}

.cm-place-map-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.86rem;
    color: var(--text-muted);
}

.cm-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.cm-actions form {
    margin: 0;
}

.cm-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.cm-form-grid .form-group {
    margin-bottom: 0.5rem;
}

.cm-checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: var(--touch-target-min);
}

.cm-checkbox-row input {
    width: auto;
    margin: 0;
}

.cm-review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.cm-review {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-main);
    background-color: var(--surface);
}

.cm-review.is-hidden {
    opacity: 0.85;
    border-color: var(--status-warning-border);
    background-color: var(--status-warning-bg);
}

.cm-review-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem 0.8rem;
}

.cm-review-meta {
    color: var(--text-muted);
    font-size: 0.86rem;
}

.cm-review-text {
    margin: 0;
    color: var(--text-primary);
    line-height: 1.55;
}

.cm-review-image {
    display: block;
    margin-top: 0.25rem;
}

.cm-review-image img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    height: auto;
    max-height: 360px;
    object-fit: cover;
    border-radius: var(--border-radius-small);
    border: 1px solid var(--border-color);
    background-color: var(--bg-main);
}

.cm-review-tools {
    display: grid;
    gap: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-color);
}

.cm-review-tools details summary {
    cursor: pointer;
    color: var(--primary-brand);
    font-weight: 700;
}

.cm-review-tools form {
    margin: 0;
}

.cm-fee-list {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.85rem;
}

.cm-fee-row {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    background-color: var(--bg-main);
}

.cm-fee-row strong {
    color: var(--primary-brand);
}

.cm-fee-row span {
    display: block;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* --- Route --------------------------------------------------------------------- */
.cm-route-legs {
    display: grid;
    gap: 0.6rem;
    margin: 0.75rem 0 0;
}

.cm-route-leg {
    display: grid;
    grid-template-columns: minmax(90px, 0.35fr) minmax(180px, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    background-color: var(--bg-main);
}

.cm-route-leg small {
    display: block;
    color: var(--text-muted);
}

.cm-route-points {
    display: grid;
    gap: 0.4rem;
    margin: 0.75rem 0 0;
}

.cm-route-point {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    color: var(--text-muted);
    font-size: 0.92rem;
}

.cm-route-point strong {
    min-width: 6.5rem;
    color: var(--text-primary);
}

.cm-rating-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.65rem;
}

.cm-rating-form .form-group {
    margin: 0;
}

.cm-rating-form select {
    width: auto;
    min-width: 7rem;
}

/* --- Hub --------------------------------------------------------------------- */
.cm-entry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.cm-entry {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 170px;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-main);
    background-color: var(--surface);
    color: inherit;
    text-decoration: none;
    box-shadow: var(--shadow-soft);
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.cm-entry:hover,
.cm-entry:focus-visible {
    border-color: var(--primary-brand);
    box-shadow: var(--cm-card-shadow);
}

.cm-entry.is-primary {
    background: linear-gradient(160deg, var(--cm-tint-strong), var(--surface) 70%);
    border-color: var(--cm-line-strong);
}

.cm-entry-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--border-radius-small);
    background-color: var(--cm-tint-strong);
    color: var(--primary-brand);
    font-size: 1.15rem;
    font-weight: 800;
}

.cm-entry h2,
.cm-entry h3 {
    margin: 0.35rem 0 0;
    font-size: 1.15rem;
}

.cm-entry p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.cm-entry-action {
    margin-top: auto;
    padding-top: 0.5rem;
    color: var(--primary-brand);
    font-weight: 800;
}

.cm-collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.cm-collection {
    padding: 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    background-color: var(--bg-main);
}

.cm-collection h3 {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
}

.cm-collection p {
    margin: 0 0 0.5rem;
    color: var(--text-muted);
}

.cm-quote {
    margin: 0;
    color: var(--text-muted);
    font-style: italic;
}

/* --- Listenzeile (Merkliste, Reviere) ----------------------------------------- */
.cm-list {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.6rem;
}

.cm-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    background-color: var(--surface);
}

.cm-list-item.is-unavailable {
    opacity: 0.75;
}

.cm-list-item-body {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    flex: 1 1 240px;
}

.cm-list-item-body a {
    color: var(--primary-brand);
    text-decoration: none;
}

.cm-list-item-body a:hover,
.cm-list-item-body a:focus-visible {
    text-decoration: underline;
}

.cm-list-item-meta {
    color: var(--text-muted);
    font-size: 0.88rem;
}

.cm-list-item form {
    margin: 0;
}

.cm-block {
    padding: 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    background-color: var(--bg-main);
    margin-top: 0.9rem;
}

.cm-block > h3 {
    margin: 0 0 0.15rem;
}

.cm-block-sub {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0 0 0.35rem;
}

.cm-tile {
    display: block;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    background-color: var(--bg-main);
    color: inherit;
    text-decoration: none;
    transition: var(--transition-soft);
}

.cm-tile:hover,
.cm-tile:focus-visible {
    border-color: var(--primary-brand);
}

.cm-tile strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--primary-brand);
}

.cm-tile span {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.cm-offline-status {
    color: var(--text-muted);
    margin: 0.4rem 0 0.75rem;
}

/* --- Crewboerse (community-*): unveraenderte Struktur, Farben ueber Tokens --- */
.community-board {
    border: 1px solid var(--cm-line-strong);
    background: linear-gradient(180deg, var(--cm-tint), var(--surface) 190px);
}

.community-board-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.7fr);
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1rem;
}

.community-board-hero h2 {
    font-size: 1.8rem;
    margin-bottom: 0.45rem;
}

.community-board-hero p {
    color: var(--text-muted);
    margin: 0;
}

.community-board-panel {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-main);
    background-color: var(--bg-main);
    padding: 1rem;
}

.community-board-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0.9rem 0 0;
}

.community-board-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 2.4rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background-color: var(--surface);
    color: var(--text-primary);
    padding: 0.35rem 0.8rem;
    font-weight: 800;
    text-decoration: none;
}

.community-board-tabs a:hover,
.community-board-tabs a:focus-visible {
    border-color: var(--primary-brand);
    color: var(--primary-brand);
}

.community-board-search {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-main);
    background-color: var(--surface);
    padding: 1rem;
    margin-bottom: 1rem;
}

.community-search {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.community-search .form-group {
    margin-bottom: 0;
}

.community-board-list {
    display: grid;
    gap: 1rem;
}

.community-board-subsection {
    scroll-margin-top: 1.25rem;
}

.community-offer-card {
    display: grid;
    gap: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-main);
    background-color: var(--surface);
    padding: 1rem;
}

.community-offer-topline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
}

.community-offer-topline h3 {
    margin: 0;
}

.community-offer-topline p {
    margin: 0.2rem 0 0;
    color: var(--text-muted);
}

.community-offer-route {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: var(--text-muted);
}

.community-offer-route strong {
    color: var(--text-primary);
}

.community-shared-copy {
    color: var(--text-muted);
    margin: 0;
}

.community-shared-request-form {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border-color);
}

.community-shared-request-form textarea {
    min-height: 96px;
}

.community-shared-request-form .form-group {
    margin-bottom: 0.45rem;
}

.community-shared-actions,
.community-request-actions {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
}

.community-shared-actions form,
.community-request-actions form {
    margin: 0;
}

.community-withdraw-form {
    margin-top: 0.6rem;
}

.community-profile-hint {
    display: block;
    color: var(--text-muted);
    margin-bottom: 0.45rem;
}

.community-thread,
.community-safety-tools {
    margin-top: 0.75rem;
}

.community-thread summary,
.community-safety-tools summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--primary-brand);
    min-height: 1.8rem;
}

.community-safety-tools form {
    margin-top: 0.75rem;
}

.community-msg-list {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.7rem;
}

.community-msg {
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    padding: 0.6rem 0.75rem;
}

.community-msg.is-own {
    background-color: var(--cm-tint);
}

.community-msg-meta {
    display: block;
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.community-msg p {
    margin: 0;
}

.community-msg-empty {
    color: var(--text-muted);
    margin: 0.7rem 0 0;
}

.community-msg-form {
    margin-top: 0.7rem;
}

.community-msg-form .form-group {
    margin-bottom: 0.45rem;
}

.community-request-list {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    display: grid;
    gap: 0.8rem;
}

.community-request-card {
    background-color: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-small);
    padding: 0.85rem;
}

.community-request-card p {
    margin: 0.55rem 0 0;
    color: var(--text-primary);
}

.community-request-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.community-inline-note {
    margin-top: 0.85rem;
    padding: 0.8rem;
    border-radius: var(--border-radius-small);
    background-color: var(--bg-main);
    color: var(--text-muted);
}

.community-empty {
    background-color: var(--bg-main);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-main);
    padding: 1rem;
    color: var(--text-muted);
}

.community-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.community-metric {
    background-color: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-main);
    padding: 1rem;
}

.community-metric strong {
    display: block;
    color: var(--primary-brand);
    font-size: 1.8rem;
    line-height: 1.1;
}

.community-metric span {
    color: var(--text-muted);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* --- Mobil: Karte als Hauptansicht --------------------------------------------- */
@media (max-width: 880px) {
    .cm-place-hero {
        grid-template-columns: 1fr;
    }

    .cm-place-map-card .cm-map-place {
        min-height: 280px;
    }

    .cm-map-tall {
        height: min(72vh, 560px);
    }

    .cm-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .cm-toolbar > .form-group:first-child {
        grid-column: 1 / -1;
    }

    .community-board-hero {
        grid-template-columns: 1fr;
    }

    .cm-route-leg {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .cm-toolbar {
        grid-template-columns: 1fr;
    }

    .cm-map-item {
        flex-wrap: wrap;
    }

    .cm-map-item-link {
        width: 100%;
        text-align: center;
    }

    .cm-section {
        padding: 1rem;
    }

    .cm-map-place,
    .cm-map-compact {
        height: 260px;
    }
}

/* Reduzierte Bewegung: der globale Block in style.css nimmt Uebergaengen die
   Dauer; hier gibt es keine eigenen Animationen, die ihn umgehen koennten. */