/* SH Insider – Website
   Alle Schriften liegen lokal in /assets/fonts (keine Verbindung zu Google). */

@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-semibold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3.woff") format("woff"); font-weight: 200 900; font-style: normal; font-display: swap; }

:root {
  --navy: #12263A;
  --navy-2: #1C3550;
  --red: #B0102A;
  --red-soft: #FFF0F2;
  --ink-2: #4A5B6B;
  --line: #DCE4EA;
  --mist: #F1F5F8;
  --white: #FFFFFF;
  --green: #1F6B3A;
  --green-soft: #E3F1E7;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --header-h: 136px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; background: var(--white); color: var(--navy); font-family: var(--body); font-size: 18px; line-height: 1.55; }
img { max-width: 100%; display: block; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--navy); color: var(--white); padding: 10px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }

/* ---------- Kopf + Linkmenü ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.96); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); }
.site-header .top { display: flex; align-items: center; gap: 16px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand-mark { width: 44px; height: 44px; border-radius: 10px; background: var(--navy); color: var(--white); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: 0.5px; position: relative; }
.brand-mark::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 7px; height: 3px; background: var(--red); }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; color: var(--navy); }
.brand-name span { color: var(--red); }

.menu-toggle { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--navy); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.menu-toggle svg { width: 20px; height: 20px; }

.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 16px; color: var(--navy); }
.nav a:hover { background: var(--mist); color: var(--navy); }
.nav a.active { color: var(--red); }
.nav a.cta { background: var(--red); color: var(--white); padding: 0 16px; margin-left: 6px; }
.nav a.cta:hover { background: #8E0C22; color: var(--white); }

@media (max-width: 1099px) {
  .menu-toggle { display: inline-flex; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(18,38,58,0.12); display: none; }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; padding: 8px 20px 16px; gap: 2px; }
  .nav a { font-size: 18px; }
  .nav a.cta { margin: 8px 0 0; justify-content: center; display: flex; }
}

/* ---------- Hero ---------- */
.hero { position: relative; color: var(--white); background: #5B3C4A; overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,38,58,0.80) 0%, rgba(18,38,58,0.5) 52%, rgba(18,38,58,0.12) 100%), linear-gradient(180deg, rgba(18,38,58,0) 55%, rgba(18,38,58,0.45) 100%); }
@media (max-width: 760px) { .hero::after { background: linear-gradient(180deg, rgba(18,38,58,0.45) 0%, rgba(18,38,58,0.72) 55%, rgba(18,38,58,0.88) 100%); } }
.hero .wrap { position: relative; z-index: 1; padding-top: 110px; padding-bottom: 56px; }
.eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: var(--red); color: var(--white); }
.hero h1 { margin: 14px 0 12px; font-family: var(--display); font-weight: 700; font-size: clamp(40px, 6.2vw, 76px); line-height: 1; max-width: 22ch; text-wrap: balance; text-shadow: 0 2px 12px rgba(18,38,58,0.45); }
.hero p.lead { margin: 0; font-size: clamp(18px, 2.2vw, 21px); max-width: 38em; color: #F3F6F9; text-shadow: 0 2px 12px rgba(18,38,58,0.45); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 12px; font: inherit; font-weight: 700; font-size: 17px; text-decoration: none; cursor: pointer; border: 0; }
.btn svg { width: 20px; height: 20px; }
.btn-red { background: var(--red); color: var(--white); }
.btn-red:hover { background: #8E0C22; color: var(--white); }
.btn-ghost { border: 2px solid rgba(255,255,255,0.8); color: var(--white); background: transparent; }
.btn-ghost:hover { background: rgba(255,255,255,0.12); color: var(--white); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-2); color: var(--white); }

/* ---------- Fortschritt ---------- */
.progress-card { margin-top: 32px; max-width: 620px; padding: 20px 22px 18px; border-radius: 16px; background: var(--white); color: var(--navy); box-shadow: 0 10px 30px rgba(18,38,58,0.25); }
.progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.progress-label { font-weight: 700; font-size: 17px; }
.progress-value { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; color: var(--red); font-variant-numeric: tabular-nums; }
.progress-track { position: relative; height: 14px; margin-top: 12px; border-radius: 999px; background: var(--line); overflow: hidden; }
.progress-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--red); transition: width 1.6s cubic-bezier(.22,.8,.24,1); }
.progress-fill::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.18) 0 8px, rgba(255,255,255,0) 8px 16px); background-size: 22.6px 22.6px; animation: stripes 1.2s linear infinite; }
@keyframes stripes { to { background-position: 22.6px 0; } }
.steps { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.steps li { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.dot { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; }
.dot svg { width: 14px; height: 14px; }
.done .dot { background: var(--navy); color: var(--white); }
.now .dot { background: var(--red-soft); border: 2px solid var(--red); }
.now .dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.todo .dot { border: 2px solid #B9C6D1; }
.todo { color: var(--ink-2); }
.tag { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--red); }

/* ---------- Abschnitte ---------- */
.section { padding: 72px 0; }
.section.alt { background: var(--mist); }
.section h2 { margin: 0 0 8px; font-family: var(--display); font-weight: 700; font-size: clamp(34px, 5vw, 50px); line-height: 1.05; }
.section .intro { margin: 0 0 32px; color: var(--ink-2); max-width: 42em; }
.kicker { display: block; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); margin-bottom: 6px; }

/* ---------- Orte ---------- */
.places { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.place { position: relative; min-height: 190px; border-radius: 16px; overflow: hidden; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; background: var(--navy); color: var(--white); grid-column: span 3; }
.place.featured { grid-column: span 6; min-height: 300px; padding: 26px; }
.place.featured img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.place.featured::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,38,58,0.92) 0%, rgba(18,38,58,0.6) 55%, rgba(18,38,58,0.1) 100%); }
.place > * { position: relative; z-index: 2; }
.place.featured img.bg { z-index: 0; }
.place.featured::before { z-index: 1; }
.place .badge { position: absolute; top: 16px; left: 16px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.place.featured .badge { top: 22px; left: 26px; background: var(--red); color: var(--white); }
.place.soon .badge { background: rgba(255,255,255,0.14); color: var(--white); }
.place h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1; }
.place.featured h3 { font-size: clamp(40px, 6vw, 60px); }
.place h3 span { color: #FF6B80; }
.place p { margin: 0; font-size: 16px; color: #D5DEE6; }
.place.featured p { font-size: 18px; max-width: 30em; color: #F3F6F9; }
.place .seal { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 150px; height: 150px; border-radius: 50%; }
.place.soon { background: var(--navy); }
.place.soon:nth-child(odd) { background: var(--navy-2); }
.place.more { grid-column: span 6; min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; background: var(--white); color: var(--navy); border: 2px dashed #B9C6D1; }
.place.more h3 { font-size: 28px; }
.place.more p { color: var(--ink-2); }
@media (max-width: 900px) {
  .place .seal { width: 96px; height: 96px; top: 22px; transform: none; }
}
@media (max-width: 560px) {
  .places { grid-template-columns: minmax(0, 1fr); }
  .place, .place.featured, .place.more { grid-column: auto; }
  .place { min-height: 150px; }
  .place.featured { min-height: 320px; }
}

/* ---------- Grundkacheln ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.tile { padding: 22px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.tile .icon { width: 48px; height: 48px; border-radius: 12px; background: var(--navy); color: var(--white); display: grid; place-items: center; }
.tile .icon svg { width: 24px; height: 24px; }
.tile h3 { margin: 6px 0 0; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.1; }
.tile p { margin: 0; font-size: 16px; }

.ticket { margin-top: 28px; display: grid; grid-template-columns: 280px minmax(0, 1fr); border: 2px solid var(--red); border-radius: 18px; overflow: hidden; background: var(--white); }
.ticket-img { position: relative; min-height: 200px; }
.ticket-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ticket-img .badge { position: absolute; left: 14px; top: 14px; font-size: 12px; font-weight: 700; letter-spacing: 1px; padding: 4px 10px; border-radius: 10px; background: var(--red); color: var(--white); }
.ticket-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.ticket-body h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1; }
.ticket-body .sub { color: var(--ink-2); font-size: 16px; margin: 0; }
.need { padding: 12px 14px; border-radius: 10px; background: var(--mist); font-size: 15px; display: grid; gap: 4px; }
.need strong { font-size: 15px; }
.need .muted { color: var(--ink-2); }
.ticket .soon-btn { align-self: flex-start; min-height: 48px; padding: 0 18px; border-radius: 12px; background: var(--line); color: var(--ink-2); font-weight: 700; display: inline-flex; align-items: center; }
@media (max-width: 700px) { .ticket { grid-template-columns: minmax(0, 1fr); } .ticket-img { min-height: 160px; } }

/* ---------- So funktioniert's ---------- */
.how { background: var(--navy); color: var(--white); }
.how .intro { color: #C9D5DF; }
.how ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; counter-reset: s; }
.how li { counter-increment: s; display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 2px solid rgba(255,255,255,0.25); font-size: 17px; }
.how li::before { content: counter(s); width: 36px; height: 36px; border-radius: 50%; background: var(--red); color: var(--white); display: grid; place-items: center; font-weight: 700; }

/* ---------- Sozial / Unterstützen ---------- */
.social-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 860px) { .social-grid { grid-template-columns: minmax(0, 1fr); } }

.split { padding: 24px; border-radius: 18px; background: var(--white); border: 1px solid var(--line); }
.split h3 { margin: 0 0 4px; font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1.1; }
.split .note { margin: 0 0 18px; color: var(--ink-2); font-size: 16px; }
.split-bar { display: flex; height: 56px; border-radius: 12px; overflow: hidden; }
.split-bar > div { display: flex; align-items: center; padding: 0 14px; font-weight: 700; font-size: 16px; }
.split-bar .s-social { flex: 70; background: var(--green); color: var(--white); }
.split-bar .s-us { flex: 30; background: var(--navy); color: var(--white); }
.legend { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.legend li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 16px; }
.legend .sw { width: 16px; height: 16px; border-radius: 4px; margin-top: 4px; }
.legend strong { display: block; font-size: 17px; }
.sw-social { background: var(--green); }
.sw-us { background: var(--navy); }
.sw-plus { background: var(--white); border: 2px dashed var(--green); }
.plus-box { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: var(--green-soft); color: #154A28; font-size: 16px; }
.plus-box strong { font-size: 17px; }

.causes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.causes li { padding: 8px 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 16px; font-weight: 600; }
.support-card { padding: 24px; border-radius: 18px; background: var(--navy); color: var(--white); display: flex; flex-direction: column; gap: 12px; }
.support-card h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.05; }
.support-card p { margin: 0; color: #D5DEE6; font-size: 16px; }
.support-card .btn { align-self: flex-start; }
.fineprint { font-size: 14px; color: var(--ink-2); margin: 14px 0 0; }

/* ---------- Fuß ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 32px 0 96px; font-size: 15px; color: var(--ink-2); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; }
.site-footer nav { display: flex; gap: 6px 22px; flex-wrap: wrap; }
.site-footer nav a, .site-footer nav button { font: inherit; font-weight: 700; color: var(--navy); min-height: 44px; display: inline-flex; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.site-footer nav button:hover { color: var(--red); }

/* ---------- Datenschutz-Button + Dialog ---------- */
.privacy-fab { position: fixed; left: 16px; bottom: 16px; z-index: 60; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--navy); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 18px rgba(18,38,58,0.18); }
.privacy-fab:hover { color: var(--red); }
.privacy-fab svg { width: 24px; height: 24px; }
dialog.privacy { width: min(460px, calc(100% - 32px)); border: 0; border-radius: 18px; padding: 24px; color: var(--navy); box-shadow: 0 24px 60px rgba(18,38,58,0.35); }
dialog.privacy::backdrop { background: rgba(18,38,58,0.5); }
dialog.privacy h2 { margin: 0 0 8px; font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.05; }
dialog.privacy ul { margin: 10px 0 14px; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 16px; }
dialog.privacy li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
dialog.privacy li svg { width: 22px; height: 22px; color: var(--green); }
dialog.privacy p { margin: 0 0 16px; font-size: 16px; color: var(--ink-2); }
dialog.privacy .row { display: flex; flex-wrap: wrap; gap: 10px; }
dialog.privacy .btn { min-height: 46px; font-size: 16px; }
.btn-line { border: 2px solid var(--navy); color: var(--navy); background: var(--white); }
.btn-line:hover { color: var(--red); border-color: var(--red); }

/* ---------- Rechtstexte ---------- */
.legal { padding: 48px 0 64px; }
.legal .wrap { max-width: 780px; }
.legal h1 { margin: 0 0 24px; font-family: var(--display); font-weight: 700; font-size: clamp(40px, 6vw, 56px); line-height: 1; }
.legal h2 { margin: 36px 0 8px; font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1.15; }
.legal h3 { margin: 22px 0 4px; font-size: 18px; }
.legal p, .legal ul { margin: 0 0 12px; }
.legal ul { padding-left: 22px; }
.legal address { font-style: normal; margin: 0 0 12px; }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; text-decoration: none; margin-bottom: 8px; }
.back svg { width: 18px; height: 18px; }
.updated { margin-top: 36px; font-size: 15px; color: var(--ink-2); }

@media (max-width: 560px) {
  body { font-size: 17px; }
  .brand-name { font-size: 26px; }
  .hero .wrap { padding-top: 72px; padding-bottom: 40px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .progress-card { padding: 18px 16px 16px; }
  .section { padding: 52px 0; }
  .split, .support-card { padding: 20px; }
  .split-bar > div { font-size: 15px; padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .progress-fill { transition: none; }
  .progress-fill::after { animation: none; }
}

/* ---------- Lieblingsorte (Kategorie) ---------- */
.lo-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; }
.lo-towns, .lo-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.lo-towns button, .lo-filters button { min-height: 44px; padding: 0 16px; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.lo-towns button { border: 2px solid var(--navy); background: var(--white); color: var(--navy); }
.lo-towns button[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.lo-towns button:disabled { border-color: var(--line); color: #7D8B98; cursor: not-allowed; }
.lo-towns button small { font-weight: 600; font-size: 12px; margin-left: 4px; }
.lo-filters button { border: 1px solid #B9C6D1; background: var(--white); color: var(--navy); }
.lo-filters button[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: var(--white); }
.lo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.lo-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--white); border: 1px solid var(--line); text-align: left; padding: 0; font: inherit; color: inherit; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.lo-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(18,38,58,0.14); }
.lo-card[hidden] { display: none; }
.lo-card .ph { position: relative; aspect-ratio: 3 / 2; background: var(--mist); }
.lo-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.lo-card .ex { position: absolute; right: 10px; top: 10px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,0.92); color: var(--navy); }
.lo-card .tx { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.lo-cat { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--red); }
.lo-card h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.05; }
.lo-card p { margin: 0; font-size: 16px; color: var(--ink-2); }
.lo-add { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 24px; border-radius: 16px; border: 2px dashed var(--red); background: var(--red-soft); }
.lo-add h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1.05; }
.lo-add p { margin: 0; font-size: 16px; }
.lo-note { margin: 18px 0 0; font-size: 15px; color: var(--ink-2); }

dialog.lo-detail { width: min(720px, calc(100% - 24px)); max-height: calc(100% - 24px); border: 0; border-radius: 18px; padding: 0; overflow: auto; color: var(--navy); box-shadow: 0 24px 60px rgba(18,38,58,0.35); }
dialog.lo-detail::backdrop { background: rgba(18,38,58,0.6); }
.lo-detail .ph { position: relative; }
.lo-detail .ph img { width: 100%; max-height: 60vh; object-fit: cover; }
.lo-detail .close { position: absolute; right: 12px; top: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--white); color: var(--navy); display: grid; place-items: center; cursor: pointer; }
.lo-detail .close svg { width: 20px; height: 20px; }
.lo-detail .tx { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 8px; }
.lo-detail h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 38px; line-height: 1; }
.lo-detail p { margin: 0; font-size: 17px; }
.lo-detail .soon { margin-top: 8px; padding: 12px 14px; border-radius: 12px; background: var(--mist); font-size: 15px; color: var(--ink-2); }

.free-box { margin-top: 24px; padding: 20px 22px; border-radius: 16px; background: var(--white); border: 2px solid var(--navy); display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; }
.free-box .icon { width: 48px; height: 48px; border-radius: 12px; background: var(--navy); color: var(--white); display: grid; place-items: center; }
.free-box .icon svg { width: 24px; height: 24px; }
.free-box h3 { margin: 0 0 4px; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.1; }
.free-box p { margin: 0; font-size: 16px; }
.support-card .rose { margin: -24px -24px 4px; height: 150px; object-fit: cover; width: calc(100% + 48px); max-width: none; }
@media (max-width: 560px) { .support-card .rose { margin: -20px -20px 4px; width: calc(100% + 40px); } }

/* ---------- Hinweis-Banner (Bestätigung) ---------- */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; max-width: 760px; margin: 0 auto; padding: 20px 22px; border-radius: 16px; background: var(--navy); color: var(--white); box-shadow: 0 16px 40px rgba(18,38,58,0.4); display: grid; gap: 12px; }
.consent[hidden] { display: none; }
.consent h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.1; }
.consent p { margin: 0; font-size: 16px; color: #D5DEE6; }
.consent a { color: var(--white); font-weight: 700; }
.consent .row { display: flex; flex-wrap: wrap; gap: 10px; }
.consent .btn { min-height: 46px; font-size: 16px; }
.btn-white { background: var(--white); color: var(--navy); }
.btn-white:hover { background: var(--mist); color: var(--navy); }
body.consent-open .privacy-fab { display: none; }

/* ---------- Suche im Kopf ---------- */
.searchbar { border-top: 1px solid var(--line); background: var(--white); }
.searchbar .wrap { position: relative; padding-top: 10px; padding-bottom: 10px; }
.search-field { position: relative; display: flex; align-items: center; }
.search-field svg { position: absolute; left: 14px; width: 20px; height: 20px; color: var(--ink-2); pointer-events: none; }
.search-field input { width: 100%; height: 44px; border: 1px solid #B9C6D1; border-radius: 12px; padding: 0 44px 0 44px; font: inherit; font-size: 16px; color: var(--navy); background: var(--white); }
.search-field input::placeholder { color: #6B7A88; }
.search-field input:focus { outline: 3px solid var(--red); outline-offset: 1px; border-color: var(--navy); }
.search-clear { position: absolute; right: 4px; width: 40px; height: 40px; border: 0; background: none; color: var(--ink-2); cursor: pointer; border-radius: 10px; display: grid; place-items: center; }
.search-clear svg { position: static; width: 18px; height: 18px; }
.search-results { position: absolute; left: 20px; right: 20px; top: calc(100% - 4px); z-index: 70; max-height: min(70vh, 560px); overflow: auto; background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px rgba(18,38,58,0.2); padding: 10px; }
.search-results[hidden] { display: none; }
.sr-group { padding: 6px 4px 8px; }
.sr-group h3 { margin: 4px 8px 6px; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-2); }
.sr-item { display: flex; width: 100%; align-items: center; gap: 12px; padding: 8px; min-height: 52px; border: 0; background: none; border-radius: 10px; text-align: left; font: inherit; color: var(--navy); cursor: pointer; }
.sr-item:hover, .sr-item:focus-visible { background: var(--mist); }
.sr-item img, .sr-item .ini { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.sr-item .ini { display: grid; place-items: center; background: var(--navy); color: var(--white); font-weight: 700; }
.sr-item strong { display: block; font-size: 16px; }
.sr-item span.sub { font-size: 14px; color: var(--ink-2); }
.sr-empty { margin: 8px; color: var(--ink-2); font-size: 16px; }
.sr-label { margin: 2px 8px 6px; font-size: 14px; color: var(--ink-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Beispiel-Hinweis ---------- */
.demo-note { display: inline-flex; align-items: center; gap: 8px; margin: -16px 0 24px; padding: 6px 12px; border-radius: 999px; background: #FBF3E8; color: #7A4E12; font-size: 14px; font-weight: 600; }
.badge-ex { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #FBF3E8; color: #7A4E12; border: 1px solid #E9D6BC; white-space: nowrap; }

/* ---------- Schaufenster ---------- */
.shop-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 18px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.shop-card { scroll-snap-align: start; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid #E9D6BC; background: #FBF3E8; color: var(--navy); text-decoration: none; text-align: left; padding: 0; font: inherit; cursor: pointer; }
.shop-card .ph { position: relative; aspect-ratio: 16 / 10; }
.shop-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.shop-card .ad { position: absolute; left: 10px; top: 10px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 10px; background: var(--white); border: 1px solid #7A4E12; color: #7A4E12; }
.shop-card .tx { padding: 14px 16px 18px; display: grid; gap: 4px; }
.shop-card strong { font-size: 18px; }
.shop-card span.t { font-size: 15px; color: var(--ink-2); }
.shop-cta { scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 22px; border-radius: 16px; background: var(--navy); color: var(--white); }
.shop-cta h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1.05; }
.shop-cta p { margin: 0; font-size: 15px; color: #D5DEE6; }
.shop-cta .btn { align-self: flex-start; }

/* ---------- Rubriken ---------- */
.rubriken { display: flex; flex-wrap: wrap; gap: 10px; }
.rubriken button { min-height: 48px; padding: 0 18px; border-radius: 999px; border: 0; background: #E6EEF4; color: var(--navy); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.rubriken button:hover { background: var(--navy); color: var(--white); }
.rubriken button svg { width: 18px; height: 18px; }

/* ---------- Karte ---------- */
.map-tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.seg { display: inline-flex; border: 1px solid #B9C6D1; border-radius: 12px; overflow: hidden; }
.seg button { min-height: 44px; padding: 0 16px; border: 0; background: var(--white); color: var(--navy); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--navy); background: var(--white); color: var(--navy); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.chips button[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.chips .k { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--white); box-shadow: 0 0 0 1px rgba(18,38,58,0.3); }
.map-wrap { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #EEF1EA; aspect-ratio: 16 / 9; min-height: 340px; }
.map-wrap svg.base { position: absolute; inset: 0; width: 100%; height: 100%; }
.pin { position: absolute; width: 36px; height: 36px; margin: -36px 0 0 -18px; border: 0; padding: 0; background: none; cursor: pointer; }
.pin span { position: absolute; inset: 0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid var(--white); box-shadow: 0 3px 8px rgba(18,38,58,0.35); }
.pin b { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%; color: var(--white); font-size: 13px; font-weight: 700; }
.pin:hover span, .pin[aria-pressed="true"] span { box-shadow: 0 0 0 4px rgba(255,255,255,0.9), 0 3px 10px rgba(18,38,58,0.45); }
.pin[hidden] { display: none; }
.map-note { position: absolute; left: 10px; top: 10px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 8px; background: rgba(255,255,255,0.9); color: var(--ink-2); }
.map-info { position: absolute; left: 14px; right: 14px; bottom: 14px; max-width: 460px; display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(18,38,58,0.18); text-align: left; font: inherit; color: var(--navy); cursor: pointer; }
.map-info[hidden] { display: none; }
.map-info img, .map-info .ini { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.map-info .ini { display: grid; place-items: center; background: var(--navy); color: var(--white); font-weight: 700; font-size: 20px; }
.map-info .typ { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.map-info strong { display: block; font-size: 17px; }
.map-info .sub { font-size: 14px; color: var(--ink-2); }
.map-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.map-list[hidden] { display: none; }
.map-list li + li { border-top: 1px solid var(--line); }
.map-list button { display: flex; width: 100%; gap: 14px; align-items: center; padding: 12px 16px; min-height: 64px; border: 0; background: none; text-align: left; font: inherit; color: var(--navy); cursor: pointer; }
.map-list button:hover { background: var(--mist); }
.map-list .dotk { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.map-list strong { display: block; font-size: 16px; }
.map-list .sub { font-size: 14px; color: var(--ink-2); }
.c-ort { background: #B0102A; } .c-profil { background: #12263A; } .c-event { background: #1F6B3A; } .c-oeffentlich { background: #7A4E12; }
.t-ort { color: #B0102A; } .t-profil { color: #12263A; } .t-event { color: #1F6B3A; } .t-oeffentlich { color: #7A4E12; }
@media (max-width: 560px) { .map-wrap { aspect-ratio: 4 / 5; } .pin { width: 32px; height: 32px; margin: -32px 0 0 -16px; } }

/* ---------- Kalender + Terminübersicht ---------- */
.cal-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .cal-grid { grid-template-columns: minmax(0, 1fr); } }
.month { padding: 18px; border-radius: 18px; background: var(--white); border: 1px solid var(--line); }
.month-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.month-head h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 26px; }
.month-head button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--navy); cursor: pointer; display: grid; place-items: center; }
.month-head button svg { width: 18px; height: 18px; }
.month table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.month th { font-size: 13px; font-weight: 700; color: var(--ink-2); padding: 4px 0 8px; }
.month td { padding: 2px; text-align: center; }
.month td button { position: relative; width: 100%; aspect-ratio: 1; max-height: 46px; border: 0; border-radius: 10px; background: none; color: var(--navy); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.month td button:hover { background: var(--mist); }
.month td button.today { outline: 2px solid var(--navy); outline-offset: -2px; }
.month td button.has::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--red); }
.month td button[aria-pressed="true"] { background: var(--red); color: var(--white); }
.month td button[aria-pressed="true"]::after { background: var(--white); }
.month td button:disabled { color: #A8B4BF; cursor: default; background: none; }
.month .legend-s { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.month .legend-s i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: inline-block; }
.planner-tools { display: grid; gap: 10px; margin-bottom: 16px; }
.planner-tools .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.planner-tools select { min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--navy); font: inherit; font-size: 15px; font-weight: 600; color: var(--navy); background: var(--white); }
.day-group h3 { margin: 14px 0 8px; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-2); }
.event { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; width: 100%; padding: 12px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); text-align: left; font: inherit; color: var(--navy); cursor: pointer; }
.event:hover { border-color: var(--navy); }
.event .d { width: 64px; height: 64px; border-radius: 12px; background: var(--mist); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.event .d small { font-size: 12px; font-weight: 700; color: var(--red); }
.event .d b { font-family: var(--display); font-size: 26px; line-height: 1; }
.event .top-l { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 14px; }
.event .zeit { font-weight: 700; color: var(--red); }
.event .kat { font-weight: 600; color: var(--ink-2); }
.event strong { display: block; font-size: 17px; margin: 2px 0; }
.event .sub { font-size: 14px; color: var(--ink-2); }
.event .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.event .tags span { font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 10px; background: #E6EEF4; }
.planner-empty { padding: 20px; border-radius: 14px; background: var(--white); border: 1px dashed #B9C6D1; color: var(--ink-2); }
.planner-cta { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 16px; }

/* ---------- Neu dabei ---------- */
.new-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.profile-card { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--white); text-align: left; font: inherit; color: var(--navy); cursor: pointer; }
.profile-card:hover { border-color: var(--navy); }
.profile-card img, .profile-card .ini { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.profile-card .ini { display: grid; place-items: center; background: var(--navy); color: var(--white); font-family: var(--display); font-weight: 700; font-size: 26px; }
.profile-card strong { display: block; font-size: 17px; line-height: 1.2; }
.profile-card .sub { font-size: 14px; color: var(--ink-2); }
.profile-card .free { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--green-soft); color: #154A28; }
.new-cta { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 18px; border-radius: 16px; border: 2px dashed var(--navy); }
.new-cta strong { font-size: 18px; }
.new-cta p { margin: 0; font-size: 15px; color: var(--ink-2); }

/* Detail-Dialog (Profile, Events, Schaufenster) */
.lo-detail .ph.none { display: none; }
.lo-detail .tx .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.flash { animation: flash 1.4s ease; }
@keyframes flash { 0%, 100% { box-shadow: none; } 20%, 60% { box-shadow: 0 0 0 4px var(--red); } }
.lo-detail .close { z-index: 3; }
.search-clear[hidden] { display: none; }
.search-field input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.map-wrap { aspect-ratio: auto; min-height: 0; }
.map-scroll { overflow-x: auto; }
.map-canvas { position: relative; width: max(100%, 760px); aspect-ratio: 1000 / 560; }
.map-canvas svg.base { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 560px) { .map-wrap { aspect-ratio: auto; } .map-info { position: static; margin: 10px; max-width: none; width: calc(100% - 20px); } }

/* =================== Konto-Button im Kopf =================== */
.account-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--navy); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; order: 2; }
.account-btn svg { width: 20px; height: 20px; }
.account-btn.in { background: var(--navy); color: var(--white); border-color: var(--navy); }
.site-header .nav { order: 1; }
.site-header .menu-toggle { order: 3; }
@media (max-width: 560px) { .account-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .account-btn { padding: 0 11px; } }

/* =================== Suchfeld im Rubriken-Bereich =================== */
.search-field.big { max-width: 720px; margin-bottom: 16px; }
.search-field.big input { height: 54px; font-size: 18px; border-radius: 14px; }
.inline-results { margin-top: 18px; }
.inline-results:empty { display: none; }
.inline-results .sr-group { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 8px; margin-bottom: 12px; }
.rubriken button[aria-pressed="true"] { background: var(--navy); color: var(--white); }

/* =================== Echte Karte (OpenStreetMap) =================== */
.osm-wrap { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.osm-wrap[hidden] { display: none; }
.osm-map { height: 520px; background: #EEF1EA; }
@media (max-width: 560px) { .osm-map { height: 440px; } }
.map-load { position: absolute; right: 12px; top: 10px; min-height: 40px; font-size: 14px; padding: 0 14px; z-index: 2; }
.shi-pin { width: 32px; height: 32px; }
.shi-pin span { position: absolute; inset: 0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 3px 8px rgba(18,38,58,0.35); }
.shi-pin b { position: relative; display: grid; place-items: center; width: 100%; height: 100%; color: #fff; font: 700 13px var(--body); }
.leaflet-popup-content { font: 15px/1.4 var(--body); color: var(--navy); margin: 12px 14px; }
.leaflet-popup-content strong { display: block; font-size: 16px; }
.leaflet-popup-content button { margin-top: 8px; min-height: 36px; padding: 0 12px; border-radius: 8px; border: 0; background: var(--navy); color: #fff; font: 700 14px var(--body); cursor: pointer; }
.leaflet-container a { color: var(--navy); }

/* =================== Dialog-Blatt (Ticket, Konto, Helfen) =================== */
dialog.sheet { width: min(680px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 0; border: 0; border-radius: 20px; color: var(--navy); box-shadow: 0 24px 60px rgba(18,38,58,0.35); overflow: hidden; }
dialog.sheet.small { width: min(480px, calc(100% - 24px)); }
dialog.sheet::backdrop { background: rgba(18,38,58,0.6); }
dialog.sheet form { display: flex; flex-direction: column; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
.sheet-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { margin: 4px 0 0; font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.05; }
.tk-step { margin: 2px 0 0; font-size: 15px; color: var(--ink-2); }
.tk-badge { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: var(--red-soft); color: var(--red); }
.icon-btn { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: 0; background: var(--mist); color: var(--navy); display: grid; place-items: center; cursor: pointer; }
.icon-btn svg { width: 20px; height: 20px; }
.tk-progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 12px 20px 0; }
.tk-progress span { height: 6px; border-radius: 3px; background: var(--line); }
.tk-progress span.on { background: var(--red); }
.sheet-body { padding: 18px 20px; overflow-y: auto; display: grid; gap: 16px; }
.sheet-foot { display: flex; justify-content: space-between; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--white); }
.sheet-foot .btn { min-height: 50px; }
.sheet-foot .btn[hidden] { display: none; }
.sheet-foot .grow { flex: 1; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.fld { display: grid; gap: 5px; }
.fld > label, .fld legend { font-size: 15px; font-weight: 700; }
.fld .opt { font-weight: 400; color: var(--ink-2); }
.fld input[type=text], .fld input[type=email], .fld input[type=tel], .fld input[type=url], .fld input[type=password], .fld input[type=date], .fld input[type=time], .fld input[type=number], .fld select, .fld textarea {
  width: 100%; min-height: 48px; border: 2px solid #B9C6D1; border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 16px; color: var(--navy); background: var(--white); }
.fld textarea { min-height: 120px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: 3px solid var(--red); outline-offset: 1px; border-color: var(--navy); }
.fld .hint { font-size: 14px; color: var(--ink-2); }
.fld .err { font-size: 14px; font-weight: 700; color: var(--red); }
.fld.bad input, .fld.bad textarea, .fld.bad select { border-color: var(--red); }
.fld .count { justify-self: end; font-size: 13px; color: var(--ink-2); margin-top: -2px; }
.fld-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 480px) { .fld-row { grid-template-columns: minmax(0, 1fr); } }
.check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 15px; font-weight: 400 !important; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--red); }
.consent-box { padding: 14px; border-radius: 12px; background: var(--mist); display: grid; gap: 8px; font-size: 15px; }
.photo-pick { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.photo-pick img { width: 120px; height: 84px; object-fit: cover; border-radius: 10px; }
.photo-pick label.btn { cursor: pointer; }
.photo-pick { border: 2px dashed transparent; border-radius: 14px; transition: border-color .15s, background-color .15s; }
.photo-pick .drop-hint { display: none; font-size: 14px; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) {
  .photo-pick { border-color: #B9C6D1; padding: 22px 18px; background: #FAFBFC; min-height: 96px; }
  .photo-pick .drop-hint { display: inline; font-size: 15px; }
  .photo-pick .drop-hint::before { content: "⤓ "; font-weight: 700; color: var(--navy); }
}
.zieht-datei .photo-pick { border-color: var(--navy); background: #EEF4FA; }
.photo-pick.drop-an { border-color: var(--red); border-style: solid; background: #FDF1F3; box-shadow: 0 0 0 4px rgba(176,16,42,.12); }
.photo-pick.drop-an .drop-hint { display: inline; color: var(--red); font-weight: 700; }

.loc-tabs { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid #B9C6D1; border-radius: 10px; overflow: hidden; }
.loc-tabs button { min-height: 44px; padding: 0 16px; border: 0; background: var(--white); color: var(--navy); font: inherit; font-weight: 700; cursor: pointer; }
.loc-tabs button[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.pick-map { height: 280px; border-radius: 12px; border: 2px solid #B9C6D1; overflow: hidden; background: #EEF1EA; }
.pick-consent { display: grid; gap: 10px; justify-items: start; padding: 16px; border-radius: 12px; border: 2px dashed #B9C6D1; background: var(--mist); font-size: 15px; }
.pick-info { font-size: 14px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.pick-info button { border: 0; background: none; color: var(--red); font: inherit; font-weight: 700; cursor: pointer; padding: 6px 0; }

.review { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.review div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; padding: 10px 14px; font-size: 15px; }
.review div + div { border-top: 1px solid var(--line); }
.review dt { font-weight: 700; color: var(--ink-2); }
.review dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 480px) { .review div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.form-error { padding: 12px 14px; border-radius: 10px; background: var(--red-soft); color: var(--red); font-weight: 700; font-size: 15px; }
.done { text-align: center; display: grid; gap: 10px; justify-items: center; padding: 10px 0; }
.done .ok { width: 64px; height: 64px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; }
.done .ok svg { width: 34px; height: 34px; }
.done h3 { margin: 0; font-family: var(--display); font-size: 30px; }
.done .nr { font-family: var(--display); font-size: 26px; padding: 6px 14px; border-radius: 10px; background: var(--mist); }
.done ol { text-align: left; margin: 6px 0 0; padding-left: 20px; font-size: 15px; color: var(--ink-2); }
.who { padding: 12px 14px; border-radius: 12px; background: var(--green-soft); color: #154A28; font-size: 15px; }
.linklike { border: 0; background: none; padding: 6px 0; color: var(--navy); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* =================== Ehrenamt-Börse =================== */
.ea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.ea-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--white); border: 1px solid var(--line); }
.ea-card .ph { position: relative; height: 150px; background: var(--navy); }
.ea-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.ea-card .ph .ini { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font-family: var(--display); font-weight: 700; font-size: 44px; }
.ea-card .ph .need { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: var(--white); font-size: 13px; font-weight: 700; color: var(--red); }
.ea-card .ph .badge-ex { position: absolute; right: 10px; top: 10px; }
.ea-card .tx { padding: 16px 18px 18px; display: grid; gap: 8px; flex: 1; }
.ea-card .org { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--red); }
.ea-card h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.05; }
.ea-card dl { margin: 0; display: grid; gap: 6px; font-size: 15px; }
.ea-card dt { font-weight: 700; }
.ea-card dd { margin: 0 0 4px; color: var(--ink-2); }
.ea-card .act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; padding-top: 6px; }
.ea-card .act .btn { min-height: 48px; }
.ea-card .act .done-tag { font-size: 14px; font-weight: 700; color: var(--green); }
.ea-cta { margin-top: 24px; padding: 20px 22px; border-radius: 16px; background: var(--white); border: 2px dashed var(--red); display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
.ea-cta strong { font-size: 19px; }
.ea-cta p { margin: 4px 0 0; color: var(--ink-2); font-size: 16px; }

/* =================== SH Insider werden =================== */
.join { background: var(--navy); color: var(--white); }
.join .intro { color: #C9D5DF; }
.join-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 36px; align-items: center; }
@media (max-width: 860px) { .join-grid { grid-template-columns: minmax(0, 1fr); } }
.join-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 18px; }
.join-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; }
.join-list svg { width: 24px; height: 24px; color: #7FD49A; margin-top: 2px; }
.join-card { padding: 26px; border-radius: 20px; background: var(--white); color: var(--navy); display: grid; gap: 12px; }
.join-card h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1.05; }
.join-card p { margin: 0; color: var(--ink-2); font-size: 16px; }
.join-card .row { display: flex; flex-wrap: wrap; gap: 10px; }
.join-card .btn-ghost { color: var(--navy); border-color: var(--navy); }
.join-card .btn-ghost:hover { background: var(--mist); color: var(--navy); }

/* =================== Hinweis-Toast =================== */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; max-width: min(520px, calc(100% - 32px)); padding: 14px 18px; border-radius: 14px; background: var(--navy); color: var(--white); font-weight: 600; box-shadow: 0 12px 30px rgba(18,38,58,0.35); }
.toast[hidden] { display: none; }
.consent .btn-white { min-width: 170px; }

/* =====================================================================
   Version 2: mehrere Seiten, Merkliste, Gefällt mir, Teilen, Verzeichnis, Konto
   ===================================================================== */
.brand-logo { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.icon-link { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); color: var(--navy); order: 2; }
.icon-link svg { width: 20px; height: 20px; }
.icon-link:hover { background: var(--mist); color: var(--navy); }
.icon-link .zahl { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--red); color: var(--white); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.icon-link .zahl[hidden] { display: none; }
.site-header .top { gap: 10px; }
.btn.sm, .btn-sm { min-height: 44px; padding: 0 14px; font-size: 15px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Seitenkopf der Unterseiten */
.page-head { background: var(--navy); color: var(--white); padding: 44px 0 40px; }
.page-head h1 { margin: 6px 0 8px; font-family: var(--display); font-weight: 700; font-size: clamp(38px, 6vw, 60px); line-height: 1; }
.page-head .intro { margin: 0; max-width: 46em; color: #D5DEE6; font-size: 18px; }
.page-head .kicker { color: #FF8A9A; }
.page-head .btn-line { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.8); }
.page-head .btn-line:hover { background: rgba(255,255,255,0.12); color: var(--white); border-color: var(--white); }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 10px 20px; margin-bottom: 8px; }
.sec-head h2 { margin-bottom: 0 !important; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
@media (max-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr); } }
.ev-preview { display: grid; gap: 0; margin-top: 12px; }
.ea-grid.one { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }

/* Orte mit runden Logos */
.place .ort-logo { position: absolute; right: 14px; top: 14px; width: 88px; height: 88px; border-radius: 50%; z-index: 2; box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
.place.soon { min-height: 210px; }
.place .seal { box-shadow: 0 10px 28px rgba(0,0,0,0.35); }
.place .btn-white { min-height: 46px; }
@media (max-width: 560px) { .place .ort-logo { width: 72px; height: 72px; } }

/* Kacheln zu den Unterseiten */
.nav-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 20px; }
.nav-tiles a { display: grid; gap: 4px; padding: 18px 20px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); text-decoration: none; color: var(--navy); min-height: 96px; }
.nav-tiles a:hover { border-color: var(--navy); color: var(--navy); box-shadow: 0 8px 20px rgba(18,38,58,0.1); }
.nav-tiles strong { font-family: var(--display); font-size: 26px; line-height: 1.05; }
.nav-tiles span { font-size: 15px; color: var(--ink-2); }
.social-teaser { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px 32px; }
.social-teaser .intro { margin-bottom: 0; }

/* Lieblingsorte-Karten mit Aktionen */
.lo-card { cursor: default; position: relative; }
.lo-card:hover { transform: none; box-shadow: none; }
.lo-open { display: flex; flex-direction: column; flex: 1; border: 0; padding: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.lo-open:hover .ph img { transform: scale(1.03); }
.lo-card .ph { overflow: hidden; }
.lo-card .ph img { transition: transform .3s ease; }
.lo-card .ex.neu { background: var(--red); color: var(--white); }
.fit { position: absolute; left: 10px; top: 10px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--green); color: var(--white); }
.fit-s { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--green-soft); color: #154A28; }
.red-tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--mist); color: var(--ink-2); border: 1px solid var(--line); }
.lo-card .red-tag { align-self: flex-start; margin-top: 4px; }
.card-acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 14px; }
.act-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid #B9C6D1; background: var(--white); color: var(--navy); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.act-btn svg { width: 18px; height: 18px; }
.act-btn:hover { border-color: var(--navy); }
.act-btn[data-merk][aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.act-btn[data-merk][aria-pressed="true"] svg { fill: currentColor; }
.act-btn.like[aria-pressed="true"] { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.act-btn.like[aria-pressed="true"] svg { fill: currentColor; }
.act-btn.like .n:empty { display: none; }
.act-btn.sm { min-height: 40px; padding: 0 12px; font-size: 14px; }
.ea-card .act .act-btn { min-height: 44px; }
.ea-hint { font-size: 14px; color: var(--ink-2); width: 100%; }
.ea-card .ph .fit { left: auto; right: 10px; top: 42px; }

/* Termine mit Merken-Knopf */
.event-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.event-row .event { margin-bottom: 0; flex: 1; min-width: 0; }
.event-row .act-btn .lbl { display: none; }
@media (min-width: 700px) { .event-row .act-btn .lbl { display: inline; } }

/* Detail-Dialog: Aktionen und Teilen */
.d-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.d-acts:empty { display: none; }
.d-acts .btn { min-height: 44px; }
.share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.share-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--white); color: var(--navy); font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
.share-btn svg { width: 18px; height: 18px; }
.share-btn:hover { border-color: var(--navy); color: var(--navy); }
.share-btn.fb svg { color: #1877F2; }
.share-btn.ig svg { color: #C13584; }
.share-btn.wa svg { color: #1F8A4C; }
.passt { display: flex; gap: 6px; align-items: center; margin: 4px 0 0 !important; font-size: 15px !important; font-weight: 700; color: #154A28; }
.passt svg { width: 18px; height: 18px; }
dl.kontakt { display: grid; gap: 6px; margin: 6px 0 0; font-size: 15px; }
dl.kontakt div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; }
dl.kontakt dt { font-weight: 700; color: var(--ink-2); }
dl.kontakt dd { margin: 0; overflow-wrap: anywhere; }
.done-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--green); }
.done-tag svg { width: 18px; height: 18px; }

/* Ort-Auswahl mit Logos */
.lo-towns button { display: inline-flex; align-items: center; gap: 8px; padding-left: 6px; }
.lo-towns button img { width: 30px; height: 30px; border-radius: 50%; }
.lo-towns button[aria-pressed="true"] img { box-shadow: 0 0 0 2px var(--white); }

/* Verzeichnis */
.vz-tools { display: grid; gap: 12px; margin-bottom: 22px; padding: 18px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); }
.vz-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.vz-fld { display: grid; gap: 4px; }
.vz-fld.grow { flex: 1 1 260px; }
.vz-fld label { font-size: 14px; font-weight: 700; }
.vz-fld select { min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid #B9C6D1; font: inherit; color: var(--navy); background: var(--white); min-width: 220px; }
.vz-h { margin: 18px 0 12px; font-family: var(--display); font-weight: 700; font-size: 30px; }
.vz-plus { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.vz-tile { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--white); border: 2px solid #E9C46A; }
.vz-foto { width: 100%; height: 150px; object-fit: cover; display: block; }
.vz-foto.leer { background: linear-gradient(135deg, var(--navy), var(--navy-2)); }
.vz-body { padding: 0 18px 18px; display: grid; gap: 8px; }
.vz-head { display: flex; gap: 12px; align-items: flex-end; margin-top: -32px; }
.vz-logo { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; background: var(--white); border: 3px solid var(--white); box-shadow: 0 4px 12px rgba(18,38,58,0.2); flex-shrink: 0; }
.vz-logo.ini { display: grid; place-items: center; background: var(--navy); color: var(--white); font-family: var(--display); font-weight: 700; font-size: 28px; }
.vz-meta { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--red); }
.vz-tile h4 { margin: 2px 0 0; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.05; }
.vz-tile p { margin: 0; font-size: 15px; color: var(--ink-2); }
.vz-tile .card-acts { padding: 4px 0 0; }
.plus-tag { display: inline-block; justify-self: start; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #FFF4D6; color: #7A4E12; border: 1px solid #E9C46A; }
.vz-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.vz-group { padding: 16px 18px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); }
.vz-group h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-2); display: flex; justify-content: space-between; }
.vz-group h4 span { color: var(--navy); }
.vz-group ul { list-style: none; margin: 0; padding: 0; }
.vz-group li { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); }
.vz-group li:first-child { border-top: 0; }
.vz-group li > button:first-child { flex: 1; min-width: 0; display: grid; gap: 1px; padding: 10px 0; min-height: 52px; border: 0; background: none; text-align: left; font: inherit; color: var(--navy); cursor: pointer; }
.vz-group li > button:first-child:hover strong { color: var(--red); }
.vz-group li strong { font-size: 16px; }
.vz-group li span { font-size: 14px; color: var(--ink-2); }
.vz-group .act-btn .lbl { display: none; }
.vz-pakete { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 36px; }
.paket { padding: 22px; border-radius: 18px; background: var(--white); border: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.paket.plus { border: 2px solid #E9C46A; }
.paket h3 { margin: 0; font-family: var(--display); font-size: 30px; line-height: 1.05; }
.paket ul { margin: 0 0 8px; padding-left: 20px; font-size: 16px; }
.paket .btn { justify-self: start; }

/* Für dich, Merkliste: kleine Karten */
.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.mini { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); }
.mini-open { flex: 1; min-width: 0; display: flex; gap: 12px; align-items: center; border: 0; background: none; padding: 0; text-align: left; font: inherit; color: var(--navy); cursor: pointer; }
.mini-open img, .mini-open .ini { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.mini-open .ini { display: grid; place-items: center; background: var(--navy); color: var(--white); font-weight: 700; }
.mini-open strong { display: block; font-size: 16px; line-height: 1.2; }
.mini-open .sub { font-size: 14px; color: var(--ink-2); }
.mini-typ { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--red); }
.mini .act-btn .lbl { display: none; }
.fd-cta { padding: 20px 22px; border-radius: 16px; background: var(--mist); display: grid; gap: 12px; }
.fd-cta p { margin: 0; }
.section.alt .fd-cta { background: var(--white); }

/* Mein Konto */
.tabs-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tabs-bar[hidden] { display: none; }
.tabs-bar button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--navy); background: var(--white); color: var(--navy); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.tabs-bar button[aria-selected="true"] { background: var(--navy); color: var(--white); }
.tab-h { margin: 0 0 14px; font-family: var(--display); font-weight: 700; font-size: 32px; }
.pf { display: grid; gap: 18px; }
.pf-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) { .pf-grid { grid-template-columns: minmax(0, 1fr); } }
.pf .fld { display: grid; gap: 4px; margin-bottom: 14px; }
.pf .fld > label, .pf legend { font-size: 15px; font-weight: 700; }
.pf input:not([type=checkbox]), .pf textarea { min-height: 46px; border: 1px solid #B9C6D1; border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 16px; color: var(--navy); background: var(--white); width: 100%; }
.pf textarea { min-height: 110px; resize: vertical; }
.pf fieldset { border: 0; padding: 0; margin: 0; }
.pf-int .hint { display: block; margin: 2px 0 10px; }
.chip-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-check { position: relative; }
.chip-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-check span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid #B9C6D1; background: var(--white); font-weight: 600; font-size: 15px; cursor: pointer; }
.chip-check input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--white); }
.chip-check input:checked + span::before { content: "✓"; margin-right: 6px; }
.chip-check input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }
.pf-sicht { padding: 18px !important; border-radius: 16px; background: var(--white); border: 1px solid var(--line) !important; display: grid; gap: 8px; }
.pf-sicht legend { float: left; width: 100%; margin-bottom: 4px; font-family: var(--display); font-size: 24px; }
.pf-sicht .hint { margin: 0 0 6px; font-size: 14px; color: var(--ink-2); }
.pf-sub { display: grid; gap: 4px; padding-left: 12px; border-left: 3px solid var(--line); }
.switch { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 600; cursor: pointer; }
.switch.main { font-weight: 700; font-size: 16px; }
.switch input { width: 44px; height: 26px; appearance: none; -webkit-appearance: none; border-radius: 13px; background: #B9C6D1; position: relative; cursor: pointer; flex-shrink: 0; transition: background .15s; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); transition: left .15s; }
.switch input:checked { background: var(--green); }
.switch input:checked::after { left: 21px; }
.switch input:disabled { opacity: .45; cursor: not-allowed; }
.switch input:disabled + span { color: #8A97A3; }
.switch input:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.mt-list { display: grid; gap: 12px; }
.mt { padding: 16px 18px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); display: grid; gap: 6px; }
.mt-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-size: 14px; }
.mt-art { color: var(--ink-2); font-weight: 600; }
.mt strong { font-size: 18px; }
.mt-notiz { margin: 0; padding: 10px 12px; border-radius: 10px; background: #FBF3E8; color: #5C3A0D; font-size: 15px; }
.mt .btn { justify-self: start; }
.mt .btn svg, .box-plain .btn svg { width: 18px; height: 18px; }
.st { font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--mist); }
.st-freigegeben { background: var(--green-soft); color: #154A28; } .st-abgelehnt { background: var(--red-soft); color: var(--red); } .st-rueckfrage { background: #FBF3E8; color: #7A4E12; }
.red-note { padding: 14px 16px; border-radius: 12px; background: #FBF3E8; color: #5C3A0D; border: 1px solid #E9D6BC; }
.red-note p { margin: 4px 0 0; white-space: pre-wrap; }
.box-plain { max-width: 720px; display: grid; gap: 14px; }
.box-plain h1 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(36px, 6vw, 52px); line-height: 1; }
.box-plain p { margin: 0; }
.box-plain .btn { justify-self: start; }

/* Öffentliches Profil */
.pp-head { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; }
.pp-ini { width: 96px; height: 96px; border-radius: 50%; background: var(--navy); color: var(--white); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 40px; flex-shrink: 0; box-shadow: 0 0 0 4px var(--white), 0 0 0 6px var(--navy); }
.pp-head h1 { margin: 2px 0; font-family: var(--display); font-weight: 700; font-size: clamp(38px, 6vw, 56px); line-height: 1; }
.pp-head .sub { margin: 0; color: var(--ink-2); }
.pp-ueber { font-size: 18px; max-width: 40em; }
.pp-h { margin: 28px 0 12px; font-family: var(--display); font-size: 28px; }
.chips.static span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--mist); font-weight: 600; font-size: 15px; }

/* Fuß */

.foot-grid { display: grid !important; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px 32px; align-items: start !important; }
@media (max-width: 960px) { .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot-grid { gap: 22px 12px; } .site-footer .foot-nav a, .site-footer .foot-nav button { font-size: 14px; } .foot-nav h2 { font-size: 12px; letter-spacing: .8px; } }
.foot-nav h2 { margin: 0 0 6px; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-2); }
.foot-nav a, .foot-nav button { text-align: left; }
.foot-brand { display: flex; gap: 14px; align-items: flex-start; }
.foot-brand img { border-radius: 50%; }
.foot-brand div { display: grid; gap: 2px; }
.foot-brand strong { font-family: var(--display); font-size: 24px; color: var(--navy); }
.foot-brand a { font-weight: 700; }
.foot-nav { display: grid !important; gap: 0 !important; }
.foot-nav a, .foot-nav button { justify-self: start; }
.foot-copy { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: block !important; font-size: 14px; }
[hidden] { display: none !important; }
.vz-head h4 { padding-bottom: 2px; }
.vz-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.foot-nav a, .foot-nav button { min-height: 36px !important; }
@media (max-width: 560px) {
  .brand-name { font-size: 22px; white-space: nowrap; }
  .brand-logo { width: 38px; height: 38px; }
  .menu-toggle { font-size: 0; gap: 0; padding: 0 11px; }
  .menu-toggle svg { width: 22px; height: 22px; }
  .site-header .top { gap: 6px; }
}

/* Schaufenster direkt unter dem Startbild */
.section.schaufenster-top { padding-top: 48px; padding-bottom: 48px; }

/* Kalender: Anzeigenplatz unter dem Monat */
.cal-side { display: grid; gap: 18px; align-content: start; }
.ad-slot { display: grid; gap: 8px; }
.ad-card { display: flex; flex-direction: column; width: 100%; padding: 0; border-radius: 18px; overflow: hidden; border: 1px solid #E9D6BC; background: #FBF3E8; text-align: left; font: inherit; color: var(--navy); cursor: pointer; }
.ad-card:hover { border-color: #7A4E12; box-shadow: 0 8px 20px rgba(18,38,58,0.12); }
.ad-card .ph { aspect-ratio: 16 / 10; overflow: hidden; }
.ad-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.ad-card .tx { padding: 14px 16px 16px; display: grid; gap: 4px; }
.ad-card strong { font-size: 18px; line-height: 1.2; }
.ad-card .t { font-size: 15px; color: var(--ink-2); }
.ad-label { justify-self: start; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 10px; background: var(--white); border: 1px solid #7A4E12; color: #7A4E12; }
.ad-foot { margin: 0; font-size: 14px; color: var(--ink-2); }
.ad-foot .linklike { font-size: 14px; padding: 0; min-height: 0; }
.ad-leer { display: grid; gap: 6px; padding: 18px; border-radius: 18px; border: 2px dashed #E9D6BC; background: #FBF3E8; }
.ad-leer strong { font-family: var(--display); font-size: 26px; }
.ad-leer p { margin: 0; font-size: 15px; color: var(--ink-2); }
.ad-leer .btn { justify-self: start; }
.shop-row { grid-auto-columns: minmax(240px, 1fr); }

/* =====================================================================
   Insider-Angebote
   ===================================================================== */
.an-filter { display: grid; gap: 10px; margin-bottom: 18px; }
.an-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.an-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--white); border: 1px solid var(--line); }
.an-top { position: relative; height: 130px; background: linear-gradient(135deg, var(--navy), var(--navy-2)); }
.an-top img { width: 100%; height: 100%; object-fit: cover; }
.an-ini { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,0.85); font-family: var(--display); font-weight: 700; font-size: 44px; }
.an-vorteil { position: absolute; right: 12px; bottom: -22px; min-width: 64px; height: 64px; padding: 0 10px; border-radius: 32px; background: var(--red); color: var(--white); font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1; display: grid; place-items: center; text-align: center; box-shadow: 0 6px 16px rgba(176,16,42,0.35); border: 3px solid var(--white); }
.an-top .badge-ex { position: absolute; left: 10px; top: 10px; }
.an-card .tx { padding: 16px 18px 18px; display: grid; gap: 4px; flex: 1; align-content: start; }
.an-meta { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--red); padding-right: 70px; }
.an-firma { font-size: 15px; font-weight: 700; color: var(--ink-2); }
.an-card h3 { margin: 2px 0 0; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.05; }
.an-card p { margin: 0; font-size: 15px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.an-bis { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.an-card .card-acts { padding: 10px 0 0; margin-top: auto; }

/* Gesperrt: verdeckt für Nicht-Insider */
.an-card.gesperrt { filter: blur(5px); opacity: .75; user-select: none; pointer-events: none; }
.an-card.gesperrt .an-ini { font-size: 54px; }
.balken { display: block; height: 14px; border-radius: 7px; background: #DCE4EA; margin-top: 8px; }
.balken.b1 { width: 70%; height: 18px; background: #C3CFD9; } .balken.b2 { width: 95%; } .balken.b3 { width: 85%; } .balken.b4 { width: 45%; }
.an-grid.zu { min-height: 520px; }
.an-schloss { position: absolute; inset: 0; display: grid; place-items: start center; padding-top: 60px; background: linear-gradient(180deg, rgba(241,245,248,0.35) 0%, rgba(241,245,248,0.85) 55%); z-index: 3; }
.an-schloss-box { max-width: 520px; margin: 0 16px; padding: 26px 26px 24px; border-radius: 20px; background: var(--white); border: 2px solid var(--navy); box-shadow: 0 20px 50px rgba(18,38,58,0.25); display: grid; gap: 10px; text-align: center; justify-items: center; }
.an-schloss-box h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(28px, 4vw, 36px); line-height: 1.05; }
.an-schloss-box p { margin: 0; font-size: 16px; color: var(--ink-2); }
.an-schloss-box .row { justify-content: center; margin-top: 6px; }
.an-lock { width: 64px; height: 64px; border-radius: 50%; background: var(--navy); color: var(--white); display: grid; place-items: center; }
.an-lock svg { width: 30px; height: 30px; }
.page-head strong { color: var(--white); }

/* Detail: Vorteil, Code, Ausweis */
.an-vorteil.gross { position: static; display: inline-grid; margin: 6px 0 4px; height: 56px; min-width: 96px; font-size: 26px; box-shadow: none; }
.an-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 16px; border-radius: 14px; border: 2px dashed var(--red); background: var(--red-soft); margin: 6px 0; }
.an-code span { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--red); width: 100%; }
.an-code strong { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 26px; letter-spacing: 2px; color: var(--navy); }
.an-pass { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-top: 10px; border-radius: 14px; background: var(--navy); color: var(--white); }
.an-pass img { border-radius: 50%; background: var(--white); }
.an-pass div { display: grid; }
.an-pass span { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #FF8A9A; }
.an-pass strong { font-family: var(--display); font-size: 24px; line-height: 1.1; }
.an-pass small { font-size: 13px; color: #D5DEE6; }
.nav-tiles a.nt-insider { background: var(--navy); border-color: var(--navy); }
.nav-tiles a.nt-insider strong { color: var(--white); }
.nav-tiles a.nt-insider span { color: #D5DEE6; }
/* Kopf: genug Platz für alle Menüpunkte */
.brand-name { white-space: nowrap; }
@media (min-width: 1261px) {
  .nav ul { gap: 0; }
  .nav a { padding: 0 9px; font-size: 15.5px; }
  .nav a.cta { padding: 0 14px; margin-left: 4px; }
}
@media (min-width: 1261px) and (max-width: 1440px) {
  .account-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .account-btn { padding: 0 11px; }
}
.icon-link { flex-shrink: 0; }

/* ---------- Insights (Unternehmensberichte) ---------- */
.in-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; margin-top: 18px; }
.in-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--white); border: 1px solid var(--line); text-decoration: none; color: var(--navy); transition: box-shadow .2s, transform .2s; }
.in-card:hover { color: var(--navy); box-shadow: 0 12px 28px rgba(18,38,58,0.14); transform: translateY(-2px); }
.in-card:hover .in-titel { color: var(--red); }
.in-ph { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--mist); }
.in-ph img { width: 100%; height: 100%; object-fit: cover; }
.in-ph .ini { display: grid; place-items: center; height: 100%; font-family: var(--display); font-size: 48px; color: var(--navy); }
.in-ph .badge-ex { position: absolute; right: 10px; top: 10px; }
.in-kenn { position: absolute; left: 10px; top: 10px; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; background: rgba(255,255,255,0.94); color: var(--ink-2); border: 1px solid var(--line); }
.in-card .tx { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; flex: 1; }
.in-meta { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--red); }
.in-dach { font-size: 15px; font-weight: 700; color: var(--ink-2); }
.in-titel { font-family: var(--display); font-weight: 700; font-size: 27px; line-height: 1.05; }
.in-vor { font-size: 16px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.in-mehr { margin-top: auto; padding-top: 8px; font-weight: 700; color: var(--red); }
.in-ort { margin-top: 30px; }
.in-ort h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font-family: var(--display); font-size: 34px; line-height: 1.05; }
.in-ort h2 img { width: 44px; height: 44px; }
.in-ort h2 small { font-family: var(--body); font-size: 15px; font-weight: 600; color: var(--ink-2); }
#in-orte { margin-top: 4px; }
#in-orte .zahl-in { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 2px; border-radius: 999px; background: var(--red); color: var(--white); font-size: 12px; }
.in-leer { margin-top: 22px; padding: 24px; border-radius: 16px; border: 2px dashed var(--line); background: var(--white); }
.in-leer p { margin: 4px 0 12px; color: var(--ink-2); }

/* Bericht */
.in-artikel-sec { padding: 28px 0 64px; }
.in-lesen { max-width: 920px; }
.in-crumb { font-size: 15px; font-weight: 600; color: var(--ink-2); margin: 0 0 18px; }
.in-crumb a { color: var(--ink-2); }
.in-art-kopf { max-width: 760px; }
.in-marken { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.in-kenn.gross { position: static; font-size: 13px; padding: 4px 10px; background: var(--mist); }
.in-art .in-dach { display: block; font-size: 17px; color: var(--red); letter-spacing: .3px; }
.in-h1 { margin: 4px 0 14px; font-family: var(--display); font-weight: 700; font-size: clamp(36px, 5.5vw, 58px); line-height: 1; }
.in-vorspann { margin: 0 0 12px; font-size: 21px; line-height: 1.5; font-weight: 700; }
.in-byline { margin: 0 0 22px; font-size: 15px; color: var(--ink-2); }
.in-bild { margin: 0; }
.in-bild img { width: 100%; border-radius: 14px; }
.in-bild figcaption { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.in-bild figcaption .q { color: #7D8B98; }
.in-bild.titel { margin: 0 0 28px; }
.in-bild.titel img { aspect-ratio: 16 / 9; object-fit: cover; }
.in-text { max-width: 720px; font-size: 19px; line-height: 1.65; }
.in-text::after { content: ""; display: block; clear: both; }
.in-text p { margin: 0 0 1.1em; }
.in-text h2 { margin: 1.6em 0 .5em; font-family: var(--display); font-size: 30px; line-height: 1.1; }
.in-text .in-bild.breit { margin: 1.6em 0; }
.in-text .in-bild.rechts { float: right; width: 46%; margin: .3em -120px 1em 28px; }
.in-zitat { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--red); }
.in-zitat p { margin: 0 0 6px !important; font-family: var(--display); font-size: 30px; line-height: 1.15; font-weight: 600; }
.in-zitat cite { font-style: normal; font-size: 15px; color: var(--ink-2); font-weight: 600; }
.in-info { clear: both; margin: 1.6em 0; padding: 18px 22px; border-radius: 14px; background: var(--mist); border-left: 5px solid var(--navy); font-size: 17px; }
.in-info strong { display: block; font-family: var(--display); font-size: 22px; margin-bottom: 4px; }
.in-info p:last-child { margin-bottom: 0; }
.in-kontakt { clear: both; max-width: 720px; margin: 32px 0 0; padding: 22px 24px; border-radius: 16px; background: var(--navy); color: var(--white); }
.in-kontakt .kicker { color: #FF8A9A; }
.in-kontakt h2 { margin: 2px 0 8px; font-family: var(--display); font-size: 30px; line-height: 1.05; }
.in-kontakt dl.kontakt dt { color: #B9C6D1; }
.in-kontakt a { color: var(--white); }
.in-kontakt a:hover { color: #FFD3DA; }
.in-kontakt-mehr { margin: 12px 0 0; font-size: 15px; }
.in-teilen { max-width: 720px; margin-top: 24px; }
.in-teilen > span { display: block; font-weight: 700; margin-bottom: 6px; }
.in-hinweis { max-width: 720px; margin: 20px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.in-weitere-h { margin: 44px 0 0; font-family: var(--display); font-size: 34px; }
.in-vorschau-band { position: sticky; top: var(--header-h); z-index: 5; padding: 10px 20px; background: #FBF3E8; color: #7A4E12; text-align: center; font-size: 15px; border-bottom: 1px solid #E9D6BC; }
@media (max-width: 1100px) { .in-text .in-bild.rechts { margin-right: 0; } }
@media (max-width: 700px) {
  .in-text { font-size: 18px; }
  .in-vorspann { font-size: 19px; }
  .in-text .in-bild.rechts { float: none; width: auto; margin: 1.4em 0; }
  .in-zitat p { font-size: 25px; }
  .in-grid { grid-template-columns: minmax(0, 1fr); }
  .in-kontakt dl.kontakt div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ---------- Karte: Sehenswert + Toiletten (OpenStreetMap-Orte) ---------- */
.c-sehens { background: #2E6FA8; } .c-wc { background: #4F6272; }
.t-sehens { color: #2E6FA8; } .t-wc { color: #4F6272; }
.shi-pin b, .pin b { letter-spacing: -0.5px; }
#map-filter small.n { margin-left: 4px; font-size: 12px; font-weight: 600; opacity: .75; }
.map-osm-info { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }

/* ---------- Melden ---------- */
.melden-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 0; min-height: 36px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.melden-link:hover { color: var(--red); }
.me-was { margin: 0; }
.me-gruende { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.me-gruende legend { font-weight: 700; font-size: 15px; margin-bottom: 6px; padding: 0; }
.me-grund { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 16px; }
.me-grund:hover { border-color: var(--navy); }
.me-grund input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--red); }
.me-grund:has(input:checked) { border-color: var(--red); background: var(--red-soft); }
.me-gruende.bad .me-grund { border-color: var(--red); }

/* ---------- Toplisten ---------- */
.tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.tl-card { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 20px 20px 14px; display: flex; flex-direction: column; }
.tl-card h2 { margin: 0; font-family: var(--display); font-size: 28px; line-height: 1.05; }
.tl-desc { margin: 4px 0 12px; font-size: 15px; color: var(--ink-2); }
.tl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tl-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; padding: 6px 0; border-top: 1px solid var(--line); }
.tl-list li:first-child { border-top: 0; }
.tl-rang { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mist); font-weight: 700; font-size: 14px; color: var(--ink-2); }
.tl-p1 .tl-rang { background: #E9B949; color: #4A3200; } .tl-p2 .tl-rang { background: #C9D2DA; color: #24323F; } .tl-p3 .tl-rang { background: #D9A07A; color: #4A2410; }
.tl-name { min-width: 0; display: flex; flex-direction: column; text-align: left; border: 0; background: none; padding: 0; font: inherit; color: var(--navy); cursor: pointer; text-decoration: none; overflow-wrap: anywhere; }
a.tl-name { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
button.tl-name:hover strong, a.tl-name:hover { color: var(--red); }
.tl-name small { font-size: 13px; color: var(--ink-2); }
.tl-wert { font-size: 14px; font-weight: 700; color: var(--red); white-space: nowrap; }
.tl-list li.tl-leer, .tl-list li.tl-lade { display: block; color: var(--ink-2); font-size: 15px; border: 0; }
.tl-list li.tl-summe { display: block; margin-top: 6px; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--green-soft); color: #154A28; font-size: 15px; }
.tl-hinweis { margin: 24px 0 0; font-size: 14px; color: var(--ink-2); max-width: 60em; }
@media (max-width: 420px) { .tl-grid { grid-template-columns: minmax(0, 1fr); } .tl-list li { grid-template-columns: 30px minmax(0, 1fr); } .tl-wert { grid-column: 2; } }

/* ---------- Unterstützen (sozial.html) ---------- */
.uz-hero { background: var(--navy); color: var(--white); padding: 52px 0 56px; }
.uz-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.uz-hero .kicker { color: #FF8A9A; }
.uz-hero h1 { margin: 8px 0 14px; font-family: var(--display); font-weight: 700; font-size: clamp(36px, 5vw, 56px); line-height: 1.02; }
.uz-hero .intro { margin: 0; color: #D5DEE6; font-size: 19px; max-width: 40em; }
.uz-hero .intro strong { color: var(--white); }
.uz-hero .btn-line { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.8); }
.uz-hero .btn-line:hover { background: rgba(255,255,255,0.12); color: var(--white); }
.uz-hero-bild { position: relative; margin: 0; }
.uz-hero-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; }
.uz-hero-bild figcaption { position: absolute; left: -16px; bottom: -18px; max-width: 240px; padding: 14px 18px; border-radius: 14px; background: var(--green); color: var(--white); font-size: 15px; line-height: 1.3; box-shadow: 0 10px 24px rgba(0,0,0,0.25); }
.uz-hero-bild figcaption strong { display: block; font-family: var(--display); font-size: 40px; line-height: 1; }
.uz-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--red-soft); color: var(--red); margin-bottom: 10px; }
.uz-ico svg { width: 26px; height: 26px; }
.uz-kosten, .uz-wert { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 22px; }
.uz-kosten article, .uz-wert article { padding: 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--white); }
.uz-kosten h3, .uz-wert h3 { margin: 0 0 6px; font-family: var(--display); font-size: 24px; line-height: 1.1; }
.uz-kosten p, .uz-wert p { margin: 0; font-size: 16px; color: var(--ink-2); }
.uz-wert .uz-ico { background: var(--green-soft); color: var(--green); }
.uz-hinweis { margin: 22px 0 0; padding: 14px 18px; border-radius: 12px; background: var(--green-soft); color: #154A28; font-weight: 600; }
.uz-zwei { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.uz-liste { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.uz-liste li { display: flex; gap: 12px; align-items: flex-start; }
.uz-liste li svg { flex-shrink: 0; width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--green); color: var(--white); margin-top: 2px; }
.uz-liste strong { display: block; font-size: 18px; }
.uz-liste span { color: var(--ink-2); font-size: 16px; }
.uz-liste span strong { color: var(--navy); }
.uz-beispiele { display: grid; gap: 14px; }
.uz-beispiele article { padding: 18px 20px; border-radius: 16px; background: var(--white); border-left: 5px solid var(--red); box-shadow: 0 6px 18px rgba(18,38,58,0.06); }
.uz-tag { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--red); }
.uz-beispiele p { margin: 4px 0; font-family: var(--display); font-size: 24px; line-height: 1.15; }
.uz-beispiele small { font-size: 14px; color: var(--ink-2); }
.uz-h3 { margin: 0 0 12px; font-family: var(--display); font-size: 28px; line-height: 1.1; }
.uz-schritte { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; counter-reset: none; }
.uz-schritte li { padding: 20px; border-radius: 16px; background: var(--mist); }
.uz-schritte li > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--red); color: var(--white); font-family: var(--display); font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.uz-schritte h3 { margin: 0 0 4px; font-family: var(--display); font-size: 24px; }
.uz-schritte p { margin: 0; color: var(--ink-2); font-size: 16px; }
.uz-faq details { max-width: 820px; border-bottom: 1px solid var(--line); }
.uz-faq details:first-of-type { margin-top: 16px; border-top: 1px solid var(--line); }
.uz-faq summary { cursor: pointer; padding: 16px 0; min-height: 44px; font-weight: 700; font-size: 18px; }
.uz-faq details p { margin: 0 0 16px; color: var(--ink-2); }
.uz-cta { background: var(--red); color: var(--white); }
.uz-cta-box { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; }
.uz-cta h2 { margin: 0 0 4px; font-family: var(--display); font-size: clamp(32px, 4vw, 44px); color: var(--white); }
.uz-cta p { margin: 0; font-size: 18px; color: #FFE3E8; }
.uz-cta .btn-red { background: var(--white); color: var(--red); }
.uz-cta .btn-red:hover { background: #FFE3E8; color: var(--red); }
.uz-cta .btn-ghost { color: var(--white); border-color: rgba(255,255,255,0.8); }
@media (max-width: 900px) {
  .uz-hero-grid, .uz-zwei { grid-template-columns: minmax(0, 1fr); }
  .uz-hero-bild figcaption { left: 12px; bottom: -14px; }
}

/* ---------- Kontoart (Rollen) ---------- */
.rolle-tag { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; background: var(--mist); color: var(--navy); }
.rolle-tag.r-verein { background: var(--green-soft); color: #154A28; }
.rolle-tag.r-unternehmen { background: #E6F0FA; color: #1D4F80; }
.rolle-tag.r-veranstalter { background: #FFF1E0; color: #7A4100; }
.rolle-tag.r-agentur { background: #F1ECFA; color: #4B2E83; }
.rolle-wechsel { margin-top: 10px; max-width: 520px; }
.rolle-wechsel summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.rolle-wechsel form { display: grid; gap: 12px; padding-top: 6px; }

/* ---------- Ehrenamt: Organisationen + kompakte Liste ---------- */
.ea-h { margin: 0 0 4px; font-family: var(--display); font-size: 32px; line-height: 1.05; }
.ea-intro { margin: 0 0 14px; color: var(--ink-2); font-size: 16px; }
.org-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.org-card { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--white); text-align: left; font: inherit; color: var(--navy); cursor: pointer; min-height: 76px; }
.org-card:hover { border-color: var(--navy); box-shadow: 0 6px 16px rgba(18,38,58,0.08); }
.org-ini { flex-shrink: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--navy); color: var(--white); font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .5px; }
.org-ini.sm { width: 38px; height: 38px; font-size: 14px; }
.b-feuerwehr .org-ini, .org-card.b-feuerwehr .org-ini { background: #C2271D; }
.b-hilfsorganisation .org-ini { background: #2E6FA8; }
.b-soziales .org-ini { background: var(--green); }
.org-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.org-tx strong { font-size: 16px; line-height: 1.25; }
.org-tx small { font-size: 13px; color: var(--ink-2); }
.org-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.org-tag { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--mist); color: var(--ink-2); }
.org-tag.such { background: var(--red-soft); color: var(--red); }
#ea-bereiche { margin: 10px 0 12px; }
.ea-liste { display: grid; gap: 8px; }
.ea-row { border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.ea-row[open] { border-color: var(--navy); box-shadow: 0 6px 16px rgba(18,38,58,0.08); }
.ea-row > summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto 20px; gap: 12px; align-items: center; padding: 10px 14px; min-height: 60px; cursor: pointer; }
.ea-row > summary::-webkit-details-marker { display: none; }
.ea-sum { min-width: 0; display: flex; flex-direction: column; }
.ea-sum strong { font-size: 16px; line-height: 1.3; }
.ea-sum small { font-size: 13px; color: var(--ink-2); }
.ea-badges { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.need-s, .fit-s, .done-s { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.need-s { background: var(--red-soft); color: var(--red); } .fit-s { background: var(--green-soft); color: #154A28; } .done-s { background: var(--mist); color: var(--ink-2); }
.ea-chev { width: 10px; height: 10px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); transition: transform .2s; justify-self: center; }
.ea-row[open] .ea-chev { transform: rotate(-135deg); }
.ea-body { padding: 0 14px 14px 64px; }
.ea-body dl { margin: 0 0 10px; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 12px; font-size: 15px; }
.ea-body dt { font-weight: 700; color: var(--ink-2); } .ea-body dd { margin: 0; }
.ea-body .act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ea-hint { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }
.org-h { margin: 16px 0 6px; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; color: var(--red); }
.org-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.org-mini button { width: 100%; display: flex; flex-direction: column; gap: 1px; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--white); font: inherit; color: var(--navy); cursor: pointer; }
.org-mini button:hover { border-color: var(--navy); }
.org-mini strong { font-size: 15px; } .org-mini span { font-size: 13px; color: var(--ink-2); }
@media (max-width: 640px) {
  .ea-row > summary { grid-template-columns: auto minmax(0, 1fr) 16px; }
  .ea-badges { grid-column: 2; justify-content: flex-start; grid-row: 2; }
  .ea-chev { grid-row: 1; grid-column: 3; }
  .ea-body { padding-left: 14px; }
  .ea-body dl { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Insights: Stichwortsuche ---------- */
.in-suche { max-width: 720px; margin: 0 0 14px; }
.in-suche .search-field input { height: 52px; font-size: 17px; border-radius: 14px; }
.in-treffer { margin: 0 0 16px; font-weight: 700; color: var(--navy); }
.in-treffer .linklike { margin-left: 8px; font-weight: 600; }

/* ---------- Kontakt ---------- */
.kontakt-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .kontakt-grid { grid-template-columns: minmax(0, 1fr); } }
.kontakt-form { display: grid; gap: 16px; padding: 24px; border-radius: 16px; background: var(--white); box-shadow: 0 6px 24px rgba(18,38,58,0.08); }
.kontakt-form .btn { justify-self: start; }
.kontakt-form .done { text-align: center; padding: 20px 0; }
.kontakt-form .done h2 { font-family: var(--display); font-size: 30px; margin: 10px 0 6px; }
.kontakt-info { padding: 22px; border-radius: 16px; background: var(--mist); }
.kontakt-info h2 { margin: 0 0 8px; font-family: var(--display); font-size: 26px; }
.kontakt-info p { margin: 0 0 12px; }
.kontakt-info .row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Startseite: Lieblingsort einreichen (Mitmach-Band) ---------- */
.btn-hero-lo { box-shadow: 0 8px 24px rgba(176,16,42,0.45); }
.btn-xl { min-height: 60px; padding: 0 28px; font-size: 19px; border-radius: 14px; }
.btn-xl svg { width: 24px; height: 24px; }
.lo-mm { position: relative; padding: 64px 0 72px; background: linear-gradient(135deg, #FFF0F2 0%, #FFF7EC 55%, #EEF6FB 100%); overflow: hidden; }
.lo-mm::before { content: ""; position: absolute; right: -120px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: rgba(176,16,42,0.07); }
.lo-mm-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.lo-mm h2 { margin: 0 0 12px; font-family: var(--display); font-weight: 700; font-size: clamp(36px, 5vw, 56px); line-height: 1; color: var(--navy); }
.lo-mm-lead { margin: 0 0 22px; font-size: 19px; max-width: 34em; }
.lo-mm-steps { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.lo-mm-steps li { display: flex; gap: 12px; align-items: flex-start; }
.lo-mm-steps .ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--white); color: var(--red); box-shadow: 0 4px 14px rgba(18,38,58,0.1); }
.lo-mm-steps .ic svg { width: 24px; height: 24px; }
.lo-mm-steps strong { display: block; color: var(--navy); font-size: 17px; }
.lo-mm-steps li > span:last-child { font-size: 15px; color: var(--ink-2); line-height: 1.35; }
.lo-mm-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lo-mm-klein { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); }
.lo-mm-wand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 8px; }
.pola { display: block; padding: 10px 10px 12px; border: 0; border-radius: 6px; background: var(--white); box-shadow: 0 10px 28px rgba(18,38,58,0.18); cursor: pointer; text-align: left; font: inherit; color: var(--navy); transition: transform .2s ease, box-shadow .2s ease; }
.pola.p0 { transform: rotate(-3deg); } .pola.p1 { transform: rotate(2.5deg) translateY(10px); } .pola.p2 { transform: rotate(1.5deg); } .pola-neu { transform: rotate(-2deg) translateY(10px); }
.pola:hover, .pola:focus-visible { transform: rotate(0) scale(1.04); box-shadow: 0 16px 36px rgba(18,38,58,0.26); z-index: 1; position: relative; }
.pola-ph { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 2px; background: var(--mist); }
.pola-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pola-tx { display: grid; gap: 1px; padding: 8px 2px 0; }
.pola-tx strong { font-family: var(--display); font-size: 20px; line-height: 1.05; }
.pola-tx small { font-size: 13px; color: var(--ink-2); }
.pola-neu .pola-ph { display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; border: 3px dashed rgba(176,16,42,0.45); background: var(--red-soft); color: var(--red); font-weight: 700; font-size: 16px; line-height: 1.2; }
.pola-neu .plus { font-family: var(--display); font-size: 56px; line-height: .9; }
.pola-neu:hover .pola-ph { background: #FFE2E7; }
@media (prefers-reduced-motion: reduce) { .pola { transition: none; } }
@media (max-width: 860px) {
  .lo-mm { padding: 44px 0 52px; }
  .lo-mm-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lo-mm-wand { order: -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0; }
  .pola { padding: 5px 5px 7px; }
  .pola-tx strong { font-size: 14px; } .pola-tx small { display: none; }
  .pola-neu .plus { font-size: 34px; } .pola-neu .pola-ph { font-size: 12px; border-width: 2px; }
}
@media (max-width: 560px) {
  .lo-mm-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lo-mm-lead { font-size: 17px; }
  .lo-mm-cta .btn { width: 100%; }
  .btn-xl { font-size: 18px; padding: 0 18px; }
}
.lo-fab { position: fixed; right: 16px; bottom: 16px; z-index: 70; display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: var(--red); color: var(--white); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; box-shadow: 0 10px 26px rgba(176,16,42,0.45); }
.lo-fab svg { width: 22px; height: 22px; }
.lo-fab:hover { background: #8E0C22; }

/* ---------- Stellenbörse ---------- */
.jb-suche { display: grid; gap: 12px; margin-bottom: 14px; }
.jb-suche .search-field input { height: 52px; font-size: 17px; border-radius: 14px; }
.jb-filter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.jb-filter .fld label { font-size: 14px; }
.jb-filter select { width: 100%; min-height: 44px; border: 1px solid #B9C6D1; border-radius: 10px; padding: 0 10px; font: inherit; font-size: 15px; color: var(--navy); background: var(--white); }
@media (max-width: 760px) { .jb-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jb-zahl { margin: 4px 0 12px; font-weight: 700; color: var(--navy); }
#jb-ag { margin: 0 0 10px; }
.jb-ag-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--navy); color: var(--white); font-size: 15px; }
.jb-ag-chip button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.18); color: var(--white); font-size: 18px; cursor: pointer; }
.jb-liste { display: grid; gap: 10px; }
.jb-card { display: flex; align-items: stretch; gap: 6px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; transition: box-shadow .15s ease, border-color .15s ease; }
.jb-card:hover { border-color: #B9C6D1; box-shadow: 0 6px 18px rgba(18,38,58,0.08); }
.jb-open { flex: 1; min-width: 0; display: flex; gap: 14px; align-items: flex-start; padding: 14px 6px 14px 14px; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: 14px; }
.jb-logo { flex-shrink: 0; width: 52px; height: 52px; border-radius: 12px; object-fit: cover; background: var(--mist); }
.jb-logo.ini { display: grid; place-items: center; background: var(--navy); color: var(--white); font-family: var(--display); font-weight: 700; font-size: 22px; }
.jb-tx { flex: 1; min-width: 0; display: grid; gap: 3px; }
.jb-ag { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.jb-tx strong { font-family: var(--display); font-size: 23px; line-height: 1.1; color: var(--navy); }
.jb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.jb-chips span { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--mist); font-size: 14px; font-weight: 600; color: var(--navy); }
.jb-chips .geld { background: var(--green-soft); color: var(--green); }
.jb-meta { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.jb-badges { display: grid; gap: 4px; justify-items: end; flex-shrink: 0; }
.jb-neu { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--red); color: var(--white); font-size: 12px; font-weight: 700; }
.jb-card .card-acts { display: flex; align-items: flex-start; padding: 12px 12px 0 0; }
.jb-chips span { border-radius: 10px; padding: 3px 10px; line-height: 1.3; }
@media (max-width: 560px) {
  .jb-card { flex-direction: column; gap: 0; }
  .jb-open { flex-wrap: wrap; gap: 10px 12px; padding: 14px 14px 8px; }
  .jb-badges { order: -1; width: 100%; display: flex; gap: 6px; justify-items: start; }
  .jb-badges:empty { display: none; }
  .jb-logo { width: 40px; height: 40px; font-size: 17px; }
  .jb-tx strong { font-size: 20px; }
  .jb-card .card-acts { padding: 0 14px 12px 66px; }
}
.jb-ag-box { margin-top: 28px; padding: 22px 24px; border-radius: 16px; background: var(--white); border: 2px dashed rgba(176,16,42,0.5); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; }
.jb-ag-box h2 { margin: 0 0 6px; font-family: var(--display); font-size: 30px; }
.jb-ag-box p { margin: 0 0 8px; }
.jb-regeln { margin: 0; padding-left: 20px; columns: 2; column-gap: 24px; font-size: 15px; color: var(--ink-2); }
@media (max-width: 760px) { .jb-ag-box { grid-template-columns: minmax(0, 1fr); } .jb-regeln { columns: 1; } }
.jb-fakten dd .linklike { font-weight: 700; }
.jb-wege { flex-wrap: wrap; gap: 8px; }
.jb-hinweis { margin: 0; font-weight: 700; color: var(--ink-2); }
.jb-recht { margin: 16px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.jb-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 13px; font-weight: 700; text-decoration: none; }
.jb-tag:hover { text-decoration: underline; }
.agg-warn { margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; background: #FFF4E5; border-left: 4px solid #C26A00; font-size: 15px; }
.agg-warn ul { margin: 4px 0 4px 18px; padding: 0; }
.agg-warn p { margin: 0; color: var(--ink-2); font-size: 14px; }
.st-beendet, .st-abgelaufen { background: var(--mist); color: var(--ink-2); }

/* ---------- Direkt bewerben + Postfach ---------- */
.jb-chips .direkt { background: var(--red-soft); color: var(--red); }
.bw-an { margin: 0; }
.bw-datei input[type=file] { font: inherit; font-size: 15px; padding: 10px; border: 2px dashed #B9C6D1; border-radius: 12px; background: var(--mist); width: 100%; }
.bw-datei input[type=file]:focus { outline: 3px solid var(--red); outline-offset: 1px; }
.bw-postfach { margin-bottom: 8px; }
.bw-liste { display: grid; gap: 10px; }
.bw-item { border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.bw-item.neu { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.bw-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.bw-item summary::-webkit-details-marker { display: none; }
.bw-kopf { display: grid; gap: 2px; min-width: 0; }
.bw-kopf strong { font-size: 18px; color: var(--navy); }
.bw-kopf span { font-size: 14px; color: var(--ink-2); }
.bw-inhalt { padding: 0 16px 16px; border-top: 1px solid var(--line); }
.bw-text { padding: 10px 14px; border-radius: 10px; background: var(--mist); }
.bw-text p { margin: 0 0 8px; } .bw-text p:last-child { margin: 0; }
.bw-dateien { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.bw-dateien a { font-weight: 700; }
.bw-dateien span { font-size: 13px; color: var(--ink-2); }
.bw-aktion { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-top: 14px; }
.bw-aktion select, .bw-aktion input { width: 100%; min-height: 44px; border: 1px solid #B9C6D1; border-radius: 10px; padding: 0 10px; font: inherit; font-size: 15px; }
@media (max-width: 640px) { .bw-aktion { grid-template-columns: minmax(0, 1fr); } }
.st-bw-neu { background: var(--red); color: var(--white); } .st-bw-gespraech { background: #E6F0FB; color: #1C4C80; } .st-bw-zusage { background: var(--green-soft); color: #154A28; } .st-bw-absage { background: var(--mist); color: var(--ink-2); }

/* ---------- Lieblingsort: anonym oder mit Profil ---------- */
.lw-body { display: grid; gap: 12px; }
.lw-opt { position: relative; display: grid; gap: 6px; text-align: left; padding: 16px 18px; border: 2px solid var(--line); border-radius: 14px; background: var(--white); font: inherit; color: var(--navy); cursor: pointer; }
.lw-opt:hover, .lw-opt:focus-visible { border-color: var(--navy); }
.lw-opt strong { font-family: var(--display); font-size: 22px; line-height: 1.1; }
.lw-opt > span { font-size: 15px; color: var(--ink-2); }
.lw-opt .lw-go { color: var(--red); font-weight: 700; font-size: 15px; }
.lw-profil { border-color: var(--red); background: var(--red-soft); }
.lw-tag { position: absolute; top: -11px; right: 14px; padding: 2px 10px; border-radius: 999px; background: var(--red); color: var(--white) !important; font-size: 12px !important; font-weight: 700; }
.lw-login { margin: 4px 0 0; font-size: 15px; }
.act-anon { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 999px; background: var(--mist); color: var(--ink-2); font-size: 13px; font-weight: 600; }
.act-anon.sm { min-height: 30px; font-size: 12px; }

/* ---------- Kennzeichnung KI-generierter Bilder ---------- */
.ki-tag { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(18,38,58,0.82); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: .2px; pointer-events: none; }
.ki-tag::before { content: "KI"; display: inline-grid; place-items: center; min-width: 18px; height: 16px; padding: 0 3px; border-radius: 4px; background: #fff; color: var(--navy); font-size: 10px; font-weight: 800; }
.ki-tag[hidden] { display: none !important; }
#lo-d-ph { position: relative; }
.pola-ph { position: relative; }
.pola .ki-tag { font-size: 10px; padding: 2px 6px; right: 4px; bottom: 4px; }
.ki-cap { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--mist); color: var(--navy); font-size: 12px; font-weight: 700; font-style: normal; }
.ki-check { margin-top: 4px; padding: 10px 12px; border-radius: 10px; background: var(--mist); font-size: 14px; }
.ki-check strong { color: var(--navy); }

/* ---------- Ausführliche Vereinsprofile ---------- */
.org-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.org-karte { padding: 12px 14px; border-radius: 12px; background: var(--mist); border: 1px solid var(--line); }
.org-karte strong { display: block; font-size: 16px; color: var(--navy); }
.org-karte .zeile { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--red); }
.org-karte p { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.org-card.b-sport .org-ini { background: var(--green); }

/* ---------- Lesbarkeit ohne Foto + Organisationsbilder ---------- */
/* Verzeichnis-Kachel: Name steht immer vollständig auf weißem Grund, nur das Logo ragt ins Bild */
.vz-head { flex-direction: column; align-items: flex-start !important; gap: 8px !important; margin-top: -36px !important; }
.vz-tile h4 { margin: 0; color: var(--navy); }
.vz-foto.leer { height: 96px; display: flex; align-items: flex-start; justify-content: flex-end; padding: 12px 14px; background: linear-gradient(135deg, var(--red-soft) 0%, #FFF7EC 55%, var(--mist) 100%) !important; }
.vz-foto.leer span { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--red); opacity: .75; }
.org-foto { object-fit: cover; padding: 0; }

/* ---------- Vereinsprofile im Verzeichnis (kostenfrei, ausführlich) ---------- */
.vz-verein { border-color: #9CCBA9; }
.verein-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 13px; font-weight: 700; }
.vz-logo.ini.verein { background: var(--green); }
.vz-verein .vz-foto.leer { background: linear-gradient(135deg, var(--green-soft) 0%, #F4FAF5 60%, var(--mist) 100%) !important; }
.vz-verein .vz-foto.leer span { color: var(--green); }
.vz-verein .vz-kurz { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.vz-tile { position: relative; }

/* ---------- Lieblingsorte: Suche & Hashtags ---------- */
.lo-suche { position: relative; max-width: 720px; margin: 0 0 12px; }
.lo-suche svg { position: absolute; left: 16px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: var(--navy); pointer-events: none; }
.lo-suche input { width: 100%; min-height: 54px; padding: 0 52px 0 50px; border: 2px solid var(--navy); border-radius: 999px; font: inherit; font-size: 17px; background: var(--white); color: var(--navy); }
.lo-suche input:focus { outline: 3px solid var(--red); outline-offset: 2px; }
.lo-suche input::-webkit-search-cancel-button { display: none; }
.lo-q-weg { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 50%; background: #E8EEF3; color: var(--navy); font-size: 24px; line-height: 1; cursor: pointer; }
.lo-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 20px; }
.lo-tags:empty { display: none; }
.lo-tags .lbl { font-size: 14px; font-weight: 700; color: var(--ink-2); margin-right: 4px; }
.hashtag { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid #B9C6D1; border-radius: 999px; background: var(--white); color: var(--navy); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.hashtag:hover, .hashtag:focus-visible { border-color: var(--navy); background: #EEF3F7; }
.hashtag[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.lo-hashtags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 6px; }
.lo-d-tags .lo-hashtags { padding: 0; }
.lo-treffer { margin: -6px 0 16px; font-size: 16px; color: var(--ink-2); }
.lo-treffer[hidden] { display: none; }
@media (max-width: 560px) { .lo-suche input { font-size: 16px; } .lo-hashtags { padding: 0 14px 4px; } }
.bildrechte-box { margin-top: 10px; padding: 12px 14px; border: 2px solid var(--navy); border-radius: 12px; background: #F6F9FB; }
.bildrechte-box .check span { font-size: 14px; line-height: 1.45; }
.bildrechte-box.bad { border-color: var(--red); background: #FFF5F6; }

/* ---------- Sammel-Orte ---------- */
.lo-sammel .ph { overflow: hidden; }
.lo-sammel .stapel { position: absolute; left: 10px; bottom: 44px; display: flex; }
.lo-sammel .stapel img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(18,38,58,.35); margin-right: -12px; }
.lo-sammel .stapel img:nth-child(2) { transform: rotate(4deg); } .lo-sammel .stapel img:nth-child(3) { transform: rotate(-5deg); }
.sammel-zahl { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(18,38,58,.88); color: #fff; font-size: 13px; font-weight: 700; }
.ex.neu { background: var(--red) !important; color: #fff !important; }
.gefuehle { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 2px; }
.gefuehl { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: #FFF4E5; color: #6B3A00; font-size: 13px; font-weight: 700; white-space: nowrap; }
.gefuehl b { font-size: 12px; background: #fff; border-radius: 999px; padding: 0 6px; }
.act-sum { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; min-height: 40px; color: var(--red); font-weight: 700; font-size: 15px; }
.act-sum svg { width: 18px; height: 18px; }
.lo-dazu { display: inline-flex; align-items: center; gap: 8px; }
.lo-galerie { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; margin: 0 0 8px; scroll-snap-type: x mandatory; }
.lo-galerie button { flex: 0 0 auto; width: 84px; height: 64px; padding: 0; border: 3px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; scroll-snap-align: start; background: var(--mist); }
.lo-galerie button[aria-pressed="true"] { border-color: var(--red); }
.lo-galerie img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lo-wolke { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px; background: #FFFAF2; }
.lo-wolke .lbl { width: 100%; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.lo-wolke .gefuehl { font-size: 15px; padding: 5px 12px; }
.lo-st-h { margin: 6px 0 10px; font-size: 19px; }
.lo-stimmen { display: grid; gap: 12px; margin-bottom: 8px; }
.stimme { display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.stimme.fokus { border-color: var(--red); box-shadow: 0 0 0 2px rgba(176,16,42,.15); }
.st-bild { width: 76px; height: 76px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--mist); }
.st-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-bild.leer { display: grid; place-items: center; font: 700 52px/1 Georgia, serif; color: #C9D3DC; cursor: default; }
.st-tx p { margin: 0 0 4px; font-size: 16px; }
.st-kopf { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 14px !important; }
.st-titel { font-weight: 700; }
.st-tx .lo-hashtags { padding: 4px 0 0; }
@media (max-width: 560px) { .stimme { grid-template-columns: 60px 1fr; } .st-bild { width: 60px; height: 60px; } .st-acts { grid-column: 2; } }
.ort-vorschlag { margin: 0 0 16px; padding: 14px 16px; border: 2px solid var(--red); border-radius: 14px; background: #FFF5F6; }
.ort-vorschlag p { margin: 0 0 8px; }
.ov-ort { display: flex; align-items: center; gap: 12px; margin: 6px 0 8px; }
.ov-ort img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; }
.ov-ort small { display: block; color: var(--ink-2); }
.ort-vorschlag .row { display: flex; flex-wrap: wrap; gap: 8px; }
.shi-pin .pin-n { position: absolute; right: -8px; top: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--navy); color: #fff; font: 700 12px/20px var(--body); font-style: normal; text-align: center; border: 2px solid #fff; }
.shi-cluster span { display: grid; place-items: center; border-radius: 50%; background: rgba(18,38,58,.9); color: #fff; border: 3px solid #fff; box-shadow: 0 0 0 5px rgba(18,38,58,.25), 0 4px 10px rgba(18,38,58,.35); cursor: pointer; position: relative; }
.shi-cluster b { font: 700 15px var(--body); }
.shi-cluster em { position: absolute; bottom: -7px; display: flex; gap: 2px; }
.shi-cluster em i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #fff; }

/* ---------- SH Kompass ---------- */
.km-rahmen { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; padding: 18px 20px; border-radius: 18px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(18,38,58,.06); margin-bottom: 26px; }
.km-feld { display: flex; flex-direction: column; gap: 4px; }
.km-feld label, .km-wer legend { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.km-feld input, .km-feld select { min-height: 46px; padding: 0 12px; border: 2px solid #B9C6D1; border-radius: 10px; font: inherit; font-size: 16px; background: #fff; color: var(--navy); }
.km-wer { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.km-wer legend { width: 100%; margin-bottom: 4px; padding: 0; }
.km-wer label { position: relative; }
.km-wer input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.km-wer span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 2px solid #B9C6D1; border-radius: 999px; font-weight: 700; color: var(--navy); background: #fff; }
.km-wer input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.km-wer input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }
.km-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.km-h { margin: 0 0 14px; font-family: var(--display); font-size: 34px; }
.km-guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.km-guide { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 14px 14px; min-height: 132px; border: 2px solid var(--line); border-radius: 16px; background: #fff; text-align: left; font: inherit; color: var(--navy); cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; }
.km-guide:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(18,38,58,.12); }
.km-guide[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: #fff; }
.km-guide.rot { border-color: #E7B6BF; background: #FFF5F6; }
.km-guide.rot[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.km-g-i { font-size: 30px; line-height: 1; }
.km-guide strong { font-size: 17px; }
.km-guide small { font-size: 13px; line-height: 1.35; opacity: .85; }
.km-guide em { position: absolute; right: 10px; top: 10px; font-style: normal; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #EEF3F7; color: var(--navy); }
.km-ergebnis { margin-top: 26px; padding: 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line); scroll-margin-top: 90px; }
.km-erg-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.km-erg-kopf h3 { margin: 0; font-family: var(--display); font-size: 28px; }
.km-suche input { min-height: 46px; width: min(340px, 100%); padding: 0 16px; border: 2px solid var(--navy); border-radius: 999px; font: inherit; font-size: 16px; }
.km-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.km-sub:empty { display: none; }
.km-sub .lbl { font-size: 14px; font-weight: 700; color: var(--ink-2); margin-right: 4px; }
.km-sub button { min-height: 40px; padding: 0 14px; border: 1px solid #B9C6D1; border-radius: 999px; background: #fff; font: inherit; font-size: 15px; font-weight: 700; color: var(--navy); cursor: pointer; }
.km-sub button[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.km-treffer { margin: 0 0 12px; color: var(--ink-2); font-size: 15px; }
.km-liste { display: grid; gap: 10px; }
.km-karte { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: 14px; }
.km-karte > img, .km-ini { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; }
.km-ini { display: grid; place-items: center; font-size: 36px; background: #EEF3F7; }
.km-k-tx h4 { margin: 0 0 2px; font-size: 18px; }
.km-k-tx h4 .badge-ex { font-size: 11px; vertical-align: 2px; }
.km-k-sub, .km-k-zeit { margin: 0 0 4px; font-size: 14px; color: var(--ink-2); }
.km-mm { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0; }
.km-mm span { font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #E9F4EC; color: #1F5A33; }
.km-k-tx .lo-hashtags { padding: 2px 0 0; }
.km-k-tx .hashtag { cursor: default; min-height: 26px; font-size: 13px; }
.km-k-acts { display: flex; flex-direction: column; gap: 6px; }
.km-add { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 10px 12px; border-radius: 12px; background: #F3F6F9; }
.km-add label { display: flex; flex-direction: column; font-size: 13px; font-weight: 700; gap: 3px; }
.km-add select { min-height: 40px; border: 2px solid #B9C6D1; border-radius: 8px; font: inherit; padding: 0 8px; }
.km-add .hint { width: 100%; margin: 0; color: var(--red); }
.km-hinweis { margin: 14px 0 0; font-size: 14px; color: var(--ink-2); }
.km-notfall { margin: 0 0 14px; padding: 14px 16px; border-radius: 14px; border: 2px solid var(--red); background: #FFF5F6; }
.km-notfall h4 { margin: 0 0 8px; font-size: 18px; color: var(--red); }
.km-nr { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.km-nr a { overflow-wrap: anywhere; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; border-radius: 10px; background: #fff; color: var(--navy); text-decoration: none; font-weight: 600; border: 1px solid #E7B6BF; }
.km-nr b { font-size: 20px; color: var(--red); white-space: nowrap; }
.km-plan { position: sticky; top: 90px; padding: 18px; border-radius: 18px; background: var(--navy); color: #fff; max-height: calc(100vh - 110px); overflow: auto; }
.km-plan-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.km-plan-kopf h2 { margin: 0; font-family: var(--display); font-size: 30px; color: #fff; }
.km-zahl { min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--red); font-weight: 700; display: grid; place-items: center; }
.km-tag { margin: 0 0 12px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.08); }
.km-tag h3 { margin: 0 0 8px; font-size: 17px; color: #fff; }
.km-slot { display: grid; gap: 4px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.12); }
.km-slot-n { font-size: 13px; font-weight: 700; opacity: .75; padding-top: 4px; }
.km-slot-n { padding-top: 0 !important; }
.km-leer { opacity: .4; font-size: 13px; }
.km-p { display: flex; gap: 6px; align-items: flex-start; justify-content: space-between; background: #fff; color: var(--navy); border-radius: 10px; padding: 6px 6px 6px 10px; }
.km-p-name { border: 0; background: none; padding: 0; text-align: left; font: inherit; font-weight: 700; font-size: 15px; color: var(--navy); cursor: pointer; }
.km-p-name small { display: block; font-weight: 500; font-size: 12.5px; color: var(--ink-2); }
.km-p-acts { display: flex; gap: 2px; flex: 0 0 auto; }
.km-p-acts button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: #EEF3F7; color: var(--navy); font-size: 15px; cursor: pointer; }
.km-tipp { margin: 8px 0 0; font-size: 13.5px; }
.km-tipp .linklike { color: #FFD7DE; }
.km-plan-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.km-plan-acts .btn-line { background: #fff; }
.km-plan-acts .linklike { color: #fff; }
.km-mini { font-size: 13px; opacity: .8; margin: 10px 0 0; }
.km-fab { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: none; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 8px 20px rgba(18,38,58,.35); }
.km-fab span { background: var(--red); border-radius: 999px; padding: 1px 8px; }
@media (max-width: 1000px) {
  .km-layout { grid-template-columns: 1fr; }
  .km-plan { position: static; max-height: none; scroll-margin-top: 80px; }
  .km-fab:not([hidden]) { display: inline-flex; }
}
@media (max-width: 560px) {
  .km-karte { grid-template-columns: 60px 1fr; }
  .km-karte > img, .km-ini { width: 60px; height: 60px; font-size: 28px; }
  .km-k-acts { grid-column: 1 / -1; flex-direction: row; }
  .km-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .km-guide { min-height: 118px; }
  .km-h { font-size: 28px; }
}
@media print {
  .km .km-rahmen, .km .km-haupt, .km-plan-acts, .km-fab, .site-header, .site-footer, .page-head, .km-p-acts, .km-mini, .km-tipp { display: none !important; }
  .km-layout { display: block; } .km-plan { position: static; background: #fff; color: #000; max-height: none; }
  .km-plan-kopf h2, .km-tag h3 { color: #000; } .km-tag { background: #fff; border: 1px solid #999; }
}

/* ---------- Regionen: Raum-Leiste, Raum-Chip, Raumwahl ---------- */
.raum-band { background: #EAF1F6; border-bottom: 1px solid var(--line); }
.raum-band .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 46px; padding-top: 6px; padding-bottom: 6px; font-size: 15px; color: var(--navy); }
.raum-pin { color: var(--red); display: inline-flex; }
.raum-orte { color: var(--ink-2); font-size: 14px; }
.raum-wechsel { margin-left: auto; min-height: 36px; padding: 0 14px; border: 2px solid var(--navy); border-radius: 999px; background: #fff; color: var(--navy); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.raum-wechsel:hover { background: var(--navy); color: #fff; }
.raum-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px 10px; padding: 3px 12px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .3px; vertical-align: 2px; }
.raum-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #fff; }
.raum-dlg { max-width: 920px; }
.raum-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.raum-karte { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 2px solid var(--line); border-radius: 14px; background: #fff; color: var(--navy); text-decoration: none; }
.raum-karte:hover, .raum-karte:focus-visible { border-color: var(--navy); box-shadow: 0 6px 16px rgba(18,38,58,.12); }
.raum-karte.an { border-color: var(--red); background: #FFF5F6; }
.raum-karte strong { font-size: 18px; }
.raum-karte .lage { font-size: 14px; color: var(--ink-2); }
.raum-karte .orte { font-size: 13.5px; }
.raum-karte .stand { margin-top: 4px; font-size: 13px; font-weight: 700; color: #7D8B98; }
.raum-karte .stand.live { color: #1F6B3A; }
.lo-towns button.alle { padding-left: 16px; }
.lo-towns[hidden], .vz-staedte[hidden] { display: none; }
.raum-kachel h3 { font-size: 24px; }
@media (max-width: 700px) { .raum-orte { display: none; } .raum-band .wrap { font-size: 14px; } .raum-chip { margin-left: 0; } }
@media print { .raum-band { display: none; } }
#vz-orte[hidden] { display: none; }
.raum-aufbau { min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--red); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }

/* ---------- Google-Maps-Navigation ---------- */
.btn-gm { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #1F1F1F; border: 1px solid #C7CDD3; box-shadow: 0 1px 3px rgba(0,0,0,.12); text-decoration: none; font-weight: 700; }
.btn-gm:hover { background: #F4F7FA; border-color: #8C99A6; }
.d-acts .btn-gm { min-height: 44px; }
.leaflet-popup-content .btn-gm { margin-top: 8px; padding: 6px 12px; font-size: 14px; }
.km-route { margin: 10px 0 0; }
.km-route .btn-gm { width: 100%; justify-content: center; }

.vb-tag { display: inline-block; margin: 0 0 8px; padding: 3px 12px; border-radius: 999px; background: #FFF1E0; color: #7A4100; font-size: 14px; font-weight: 700; }
.org-tag.osm { background: #EEF1F4; color: #5A6B7B; font-weight: 600; }
.osm-org .org-ini { background: #EAF1F6; color: var(--navy); }
.osm-org.b-feuerwehr .org-ini { background: #FDE8EA; color: var(--red); }

/* ---------- Beta-Phase ---------- */
.beta-tag { display: inline-flex; align-items: center; align-self: center; padding: 2px 8px 3px; border-radius: 999px; background: #F2C14E; color: #12263A; font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; line-height: 1.2; white-space: nowrap; }
.brand .beta-tag { margin-left: -2px; }
.aufbau-band .beta-tag, .aufbau-hinweis .beta-tag { flex: 0 0 auto; align-self: flex-start; margin-top: 3px; }
.beta-tag.gross { font-size: 15px; }
.tk-badge.beta { background: #F2C14E; color: #12263A; }
.aufbau-band a { color: #7A2E00; font-weight: 700; }
@media (max-width: 420px) { .brand .beta-tag { font-size: 11px; padding: 1px 6px 2px; } }
.aufbau-band { background: #FFF6DB; border-bottom: 1px solid #F0DFA6; color: #5A4500; }
.aufbau-band .wrap { display: flex; align-items: flex-start; gap: 10px; padding-top: 9px; padding-bottom: 9px; font-size: 15px; line-height: 1.45; }
.aufbau-band .linklike { color: #7A2E00; font-weight: 700; }
.aufbau-x { margin-left: auto; flex: 0 0 auto; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(0,0,0,.06); color: #5A4500; font-size: 20px; line-height: 1; cursor: pointer; }
.aufbau-hinweis { display: flex; gap: 10px; margin: 18px 0 0; padding: 12px 16px; border-radius: 12px; background: #FFF6DB; border: 1px solid #F0DFA6; color: #5A4500; font-size: 15.5px; line-height: 1.5; }
.aufbau-hinweis .linklike { color: #7A2E00; font-weight: 700; }
@media print { .aufbau-band, .aufbau-hinweis { display: none; } }

/* ---------- Fotos nie beschneiden: ganzes Bild zeigen, Rand mit unscharfer Kopie füllen ---------- */
.lo-card .ph, .pola-ph, .lo-detail .ph { position: relative; overflow: hidden; background: #1B2B3A; }
.lo-card .ph::before, .pola-ph::before, .lo-detail .ph::before {
  content: ''; position: absolute; inset: -24px; background-image: var(--bild); background-size: cover; background-position: center;
  filter: blur(18px) brightness(.85) saturate(1.1); transform: scale(1.08); z-index: 0;
}
.lo-card .ph img, .pola-ph img { position: relative; z-index: 1; object-fit: contain !important; }
.lo-card .ph > span, .pola-ph > span { z-index: 2; }
.lo-detail .ph img { position: relative; z-index: 1; display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; cursor: zoom-in; }
.lo-detail .ph .ki-tag, .lo-detail .ph > span { z-index: 2; }
.foto-gross { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8,14,20,.94); }
.foto-gross[open] { display: grid; place-items: center; }
.foto-gross::backdrop { background: rgba(8,14,20,.94); }
.foto-gross img { max-width: 96vw; max-height: 92vh; object-fit: contain; cursor: zoom-out; }
.fg-x { position: fixed; top: 14px; right: 14px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #fff; color: #12263A; font-size: 28px; line-height: 1; cursor: pointer; }

/* Konto-Menü am Konto-Knopf (angemeldet) */
.acc-menu { position: fixed; z-index: 400; min-width: 240px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px rgba(18,38,58,.22); padding: 8px; display: flex; flex-direction: column; }
.acc-menu[hidden] { display: none; }
.acc-menu .acc-wer { padding: 8px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; display: flex; flex-direction: column; line-height: 1.25; }
.acc-menu .acc-wer small { color: var(--ink-2); font-size: 13px; } .acc-menu .acc-wer strong { font-size: 17px; }
.acc-menu a { padding: 10px 12px; border-radius: 8px; text-decoration: none; font-weight: 600; color: var(--navy); }
.acc-menu a:hover, .acc-menu a:focus-visible { background: var(--mist, #F1F4F7); }
.acc-menu .acc-raus { margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 0; border-radius: 10px; background: var(--red); color: #fff; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }
.acc-menu .acc-raus svg { width: 18px; height: 18px; } .acc-menu .acc-raus:hover { filter: brightness(1.08); }
.account-btn.in::after { content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; margin-left: 2px; }
/* Konto-Zeile im Hauptmenü */
.nav li.nav-konto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 0 4px; border-top: 1px solid var(--line); margin-top: 6px; }
.nav li.nav-konto .nk-wer { flex-basis: 100%; font-size: 15px; color: var(--ink-2); }
.nav li.nav-konto .nk-raus { min-height: 40px; padding: 0 18px; border: 2px solid var(--red); border-radius: 999px; background: #fff; color: var(--red); font: inherit; font-weight: 700; cursor: pointer; }
@media (min-width: 1100px) { .nav li.nav-konto { display: none; } }

/* ---------- Vereinsbereich (verein.html) ---------- */
.vb { --vb-rand: #DCE3EA; }
.vb-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.vb-karte { background: #fff; border: 1px solid var(--vb-rand); border-radius: 16px; padding: 20px 22px; margin: 0 0 18px; }
.vb-karte h2, .vb-karte h3 { margin: 0 0 10px; } .vb-karte h3 { font-size: 22px; } .vb-karte h3 + .vb-zeile, .vb-profil h3 { margin-top: 14px; }
.vb-gross { background: var(--navy); color: #fff; border-color: var(--navy); } .vb-gross h2 { color: #fff; }
.vb-liste { margin: 0; padding-left: 20px; line-height: 1.7; }
.vb-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.vb-hint { display: block; font-size: 14.5px; color: var(--ink-2); margin-top: 3px; }
.vb-f { display: flex; flex-direction: column; margin: 0 0 12px; min-width: 0; } .vb-f > label { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.vb-f input, .vb-f select, .vb-f textarea { width: 100%; font: inherit; font-size: 16px; padding: 9px 11px; border: 1px solid #B9C6D1; border-radius: 10px; background: #fff; color: var(--navy); }
.vb-f textarea { resize: vertical; line-height: 1.5; }
.vb-err { color: var(--red); font-size: 14px; font-weight: 700; } .vb-err:empty { display: none; }
.vb-bad input, .vb-bad select, .vb-bad textarea { border-color: var(--red); box-shadow: 0 0 0 3px rgba(176,16,42,.12); }
.vb-zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 14px; }
.vb-msg { padding: 10px 14px; border-radius: 10px; background: #EAF1F7; margin: 0 0 14px; transition: opacity .6s; } .vb-msg.ok { background: #E5F3EA; color: #14532D; } .vb-msg.bad { background: #FDE7EA; color: #8E0C22; } .vb-msg.warn { background: #FFF6DB; color: #5A4500; } .vb-msg.weg { opacity: .55; }
.vb-treffer { list-style: none; margin: 8px 0 0; padding: 0; } .vb-treffer li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid #EEF2F5; }
.vb-treffer li > span { display: flex; flex-direction: column; } .vb-treffer small { color: var(--ink-2); } .vb-anfrage { flex-basis: 100%; }
.vb-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 14px; } .vb-kopf h2 { margin: 0; font-size: 30px; } .vb-unter { color: var(--ink-2); }
.vb-logo { width: 64px; height: 64px; border-radius: 14px; object-fit: contain; background: #fff; border: 1px solid var(--vb-rand); flex: none; }
.vb-logo.ini { display: grid; place-items: center; background: var(--navy); color: #fff; font-family: var(--display); font-weight: 700; font-size: 26px; border: 0; }
.vb-wahl select { font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid #B9C6D1; } .vb-weiterer { margin-left: auto; }
.vb-status { padding: 12px 16px; border-radius: 12px; margin-bottom: 14px; } .vb-status.online { background: #E5F3EA; color: #14532D; } .vb-status.warten { background: #FFF6DB; color: #5A4500; } .vb-status.entwurf { background: #EAF1F7; }
.vb-status a { font-weight: 700; }
.vb-schritte { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: s; } .vb-schritte li { counter-increment: s; display: flex; align-items: center; gap: 6px; }
.vb-schritte li::before { content: counter(s); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--navy); font-weight: 700; font-size: 13px; }
.vb-schritte li.ok::before { content: "✓"; background: #1F6B3A; border-color: #1F6B3A; color: #fff; } .vb-schritte li:last-child::before { display: none; }
.vb-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 2px solid var(--vb-rand); margin-bottom: 18px; }
.vb-tabs button { font: inherit; font-weight: 700; font-size: 16px; padding: 10px 16px; border: 0; background: none; color: var(--ink-2); border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; }
.vb-tabs button[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--red); }
.vb-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.vb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.vb-chips button, .vb-chip { font: inherit; font-size: 14px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid #B9C6D1; background: #fff; color: var(--navy); cursor: pointer; }
.vb-chips button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.vb-block { background: #fff; border: 1px solid var(--vb-rand); border-radius: 16px; padding: 16px 20px; margin-bottom: 16px; } .vb-block h3 { margin: 0 0 10px; font-size: 22px; } .vb-block h3 small { font-size: 15px; color: var(--ink-2); font-family: var(--body); }
.vb-gruppe h4 { margin: 14px 0 4px; font-size: 16px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-2); } .vb-gruppe:first-child h4 { margin-top: 0; }
.vb-leer { color: var(--ink-2); font-style: italic; margin: 6px 0; }
.vb-termin { display: grid; grid-template-columns: 190px minmax(0, 1fr) 110px 370px; gap: 6px 14px; align-items: center; padding: 10px 12px; border-radius: 10px; border-left: 4px solid #2E7DAF; background: #F7F9FB; margin: 0 0 6px; }
.vb-termin.art-spiel { border-left-color: var(--red); } .vb-termin.art-veranstaltung { border-left-color: #E9A23B; } .vb-termin.art-treffen { border-left-color: #8A5BB5; }
.vb-t-wann b { font-size: 17px; } .vb-rhythmus { display: block; font-size: 13px; color: var(--ink-2); }
.vb-t-was { display: flex; flex-direction: column; min-width: 0; } .vb-t-was small { color: var(--ink-2); } .vb-ausfall { color: var(--red) !important; font-weight: 700; }
.vb-t-akt { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-content: flex-end; } .vb-t-akt select { font: inherit; font-size: 14px; padding: 4px 6px; border-radius: 8px; border: 1px solid #B9C6D1; }
.linklike.rot { color: var(--red); }
.vb .vb-tag { display: inline-block; margin: 0; font-size: 12.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #EEF2F5; color: var(--ink-2); white-space: nowrap; } .vb .vb-tag.ok { background: #E5F3EA; color: #14532D; }
.vb-tform { border: 2px solid var(--navy); }
.vb-segs { display: flex; flex-wrap: wrap; gap: 6px; } .vb-seg input, .vb-tag-k input { position: absolute; opacity: 0; pointer-events: none; }
.vb-seg span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid #B9C6D1; font-weight: 700; font-size: 15px; cursor: pointer; background: #fff; }
.vb-seg input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; } .vb-seg input:focus-visible + span, .vb-tag-k input:focus-visible + span { outline: 3px solid #F2C14E; }
.vb-tage { display: flex; flex-wrap: wrap; gap: 6px; } .vb-tag-k span { display: grid; place-items: center; width: 48px; height: 44px; border-radius: 10px; border: 1px solid #B9C6D1; font-weight: 700; cursor: pointer; background: #fff; }
.vb-tag-k input:checked + span { background: var(--red); border-color: var(--red); color: #fff; }
.vb-check { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 4px; cursor: pointer; } .vb-check input { width: 20px; height: 20px; margin-top: 3px; flex: none; }
.vb-vorbei { margin-top: 10px; } .vb-vorbei summary { cursor: pointer; font-weight: 700; color: var(--ink-2); } .vb-vorbei .vb-termin { opacity: .65; }
.vb-sparte { border: 1px solid var(--vb-rand); border-radius: 14px; padding: 8px 16px 14px; margin: 0 0 14px; background: #fff; }
.vb-sparte legend { padding: 0 6px; } .vb-sparte-name { font-family: var(--display); font-weight: 700; font-size: 24px; border: 0; border-bottom: 2px dashed #B9C6D1; padding: 2px 4px; color: var(--navy); background: transparent; min-width: 260px; }
.vb-g-kopf, .vb-g { display: grid; grid-template-columns: 1.1fr 1fr 1.3fr 1.3fr 36px; gap: 8px; } .vb-g-kopf { font-size: 13px; font-weight: 700; color: var(--ink-2); padding: 0 2px 4px; }
.vb-g { margin-bottom: 6px; } .vb-g input { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid #B9C6D1; border-radius: 8px; min-width: 0; } .vb-g input[data-k=name] { font-weight: 700; }
.vb-x { width: 36px; height: 38px; border-radius: 8px; border: 1px solid #DCE3EA; background: #fff; color: var(--red); font-size: 20px; cursor: pointer; }
.vb-speichern { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px 0; background: linear-gradient(transparent, var(--mist, #F4F6F8) 30%); z-index: 5; }
.vb-profil .vb-speichern { background: linear-gradient(transparent, #fff 30%); }
.vb-bilder { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; } .vb-bild { display: flex; flex-direction: column; gap: 6px; }
.vb-bild .photo-pick img { width: 160px; height: 100px; object-fit: cover; } .vb-bild .photo-pick img.logo { width: 90px; height: 90px; object-fit: contain; background: #fff; }
.vb-bild-text { font: inherit; padding: 8px 10px; border: 1px solid #B9C6D1; border-radius: 8px; }
@media (max-width: 1100px) { .vb-termin { grid-template-columns: 170px minmax(0, 1fr) auto; } .vb-t-akt { grid-column: 2 / -1; justify-content: flex-start; } }
@media (max-width: 760px) {
  .vb-termin { grid-template-columns: minmax(0, 1fr) auto; } .vb-t-was { grid-column: 1 / -1; grid-row: 2; } .vb-t-akt { grid-column: 1 / -1; justify-content: flex-start; }
  .vb-g-kopf { display: none; } .vb-g { grid-template-columns: 1fr 1fr 36px; padding: 8px; border: 1px solid #EEF2F5; border-radius: 10px; } .vb-g input[data-k=trainer], .vb-g input[data-k=info] { grid-column: 1 / 3; }
  .vb-g .vb-x { grid-column: 3; grid-row: 1; } .vb-sparte-name { min-width: 0; width: 100%; font-size: 20px; } .vb-weiterer { margin-left: 0; }
}

/* Vereinsseite: Logo, Trainingsplan */
.org-logo-gross { width: 84px; height: 84px; object-fit: contain; border-radius: 14px; border: 1px solid var(--line); background: #fff; float: right; margin: 0 0 10px 14px; }
.org-ini.org-logo { object-fit: contain; background: #fff; border: 1px solid var(--line); }
.plan-sparte { margin: 14px 0 6px; font-size: 15px; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-2); }
.org-karte.plan .plan-z { list-style: none; margin: 6px 0 0; padding: 0; } .org-karte.plan .plan-z li { padding: 3px 0; border-top: 1px solid #EEF2F5; font-size: 15px; }
.org-karte.plan .plan-z li:first-child { border-top: 0; } .org-karte.plan .plan-z b { display: inline-block; min-width: 26px; color: var(--red); }
.org-karte.plan .leer { color: var(--ink-2); font-size: 14px; font-style: italic; margin: 6px 0 0; }

.pick-geo { font-size: 14.5px; margin: 4px 0 6px; min-height: 0; } .pick-geo:empty { display: none; }
.pick-geo.ok { color: #1F6B3A; font-weight: 700; } .pick-geo.warn { color: #8A5A00; font-weight: 700; }
/* Umland-Orte (Gemeinden rund um Schleswig/Kropp) */
.umland-wahl { display: inline-flex; align-items: center; }
.umland-wahl select { font: inherit; font-size: 15px; font-weight: 700; min-height: 40px; padding: 0 30px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--navy); cursor: pointer; }
.umland-wahl.an select { background: var(--navy); color: #fff; border-color: var(--navy); }
.raum-umland { white-space: nowrap; font-weight: 700; color: var(--navy); }

/* Absagen im Vereinsbereich */
.vb-absage-knopf { font: inherit; font-size: 14px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 2px solid var(--red); background: #fff; color: var(--red); cursor: pointer; white-space: nowrap; }
.vb-absage-knopf:hover { background: var(--red); color: #fff; }
.vb-absagen { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.vb-absage { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 5px 10px; border-radius: 8px; background: #FDE7EA; border: 1px solid #F3B5BF; font-size: 14px; }
.vb-absage-tag { font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: .3px; font-size: 13px; } .vb-absage-grund { color: #5A0A17; }
.vb-termin.vb-abgesagt { background: #FDF1F3; border-left-color: var(--red); } .vb-termin.vb-abgesagt .vb-t-wann, .vb-termin.vb-abgesagt .vb-t-was > strong { text-decoration: line-through; text-decoration-color: var(--red); }
.vb-absage-form { margin: -2px 0 10px; padding: 14px 16px; border: 2px solid var(--red); border-radius: 12px; background: #FFF8F9; }
.vb-absage-titel { display: block; color: var(--red); margin-bottom: 8px; } .vb-gruende { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 4px; }
/* Absagen öffentlich (Kalender, Termin, Vereinsseite) */
.event-row.abgesagt .event { background: #FDF1F3; border-color: #F3B5BF; } .event-row.abgesagt .event strong { text-decoration: line-through; text-decoration-color: var(--red); }
.absage-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--red); color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.absage-grund { display: block; color: #8E0C22; font-weight: 700; font-size: 14px; }
.absage-banner { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: #FDE7EA; border: 2px solid var(--red); color: #5A0A17; }
.absage-banner strong { color: var(--red); text-transform: uppercase; letter-spacing: .4px; display: block; }
.plan-z li.ausfall { color: #8E0C22; } .plan-z .ausfall-hinweis { display: block; font-size: 13.5px; font-weight: 700; color: var(--red); }
.org-mini li.abgesagt button { background: #FDF1F3; border-color: #F3B5BF; } .org-mini li.abgesagt strong { text-decoration: line-through; text-decoration-color: var(--red); }

/* Lieblingsorte: Redaktionstipp-Kennzeichnung, Kopf-Aktionen */
.lo-card .ex.red-tipp { background: var(--navy); color: #fff; }
.lo-kopf-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.mt-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.mt-acts .linklike.rot { color: var(--red); }

/* =====================================================================
   Ehrenamt-Seite: schnelle Hilfen, Suche, Organisationen in Gruppen
   ===================================================================== */
.ea-suche { position: relative; max-width: 760px; margin: 22px 0 0; }
.ea-suche svg { position: absolute; left: 18px; top: 50%; width: 24px; height: 24px; transform: translateY(-50%); color: var(--navy); pointer-events: none; }
.ea-suche input { width: 100%; min-height: 60px; padding: 0 54px 0 54px; border: 0; border-radius: 999px; font: inherit; font-size: 18px; background: var(--white); color: var(--navy); box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.ea-suche input:focus { outline: 3px solid #FF8A9A; outline-offset: 3px; }
.ea-suche input::-webkit-search-cancel-button { display: none; }
.ea-suche .lo-q-weg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.ea-kopf-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.ea-kopfzeile { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 14px; }
.ea-seite .ea-h { font-size: clamp(30px, 4.4vw, 40px); }
.ea-seite #ea-towns { margin-bottom: 14px; }
.ea-zeit { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ea-zeit button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid #B9C6D1; background: var(--white); color: var(--navy); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.ea-zeit button[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: var(--white); }
.ea-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 14px; }
.ea-tags-l { font-size: 14px; font-weight: 700; color: var(--ink-2); margin-right: 2px; }
.ea-tags button, .ea-k-tags button { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--mist); color: var(--navy); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.ea-tags button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.ea-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.ea-k { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); border-top: 5px solid #8FA3B5; box-shadow: 0 4px 14px rgba(18,38,58,0.05); }
.ea-k.e-einmalig { border-top-color: var(--red); }
.ea-k.e-regelmaessig { border-top-color: #2E7DAF; }
.ea-k.e-dauerhaft { border-top-color: var(--navy); }
.ea-k.blink { animation: ea-blink 1.6s ease 2; }
@keyframes ea-blink { 50% { box-shadow: 0 0 0 4px rgba(176,16,42,0.35); } }
.ea-k-kopf { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ea-art { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--mist); color: var(--navy); }
.e-einmalig .ea-art { background: var(--red); color: var(--white); }
.e-regelmaessig .ea-art { background: #E4F0F8; color: #1D5D86; }
.ea-k h3 { margin: 2px 0 0; font-family: var(--display); font-size: 25px; line-height: 1.08; }
.ea-k-titel { text-decoration: none; color: var(--navy); text-align: left; font: inherit; }
.ea-k-titel:hover { text-decoration: underline; }
.ea-k-org { margin: 0; font-size: 15px; color: var(--ink-2); font-weight: 600; }
.ea-k-org .linklike { font-weight: 700; }
.ea-k-zeit { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 15px; font-weight: 700; color: var(--navy); }
.ea-k-zeit svg { flex: none; margin-top: 3px; }
.ea-k-text { margin: 0; font-size: 15.5px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ea-k-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ea-k-tags button { min-height: 28px; font-size: 13px; padding: 0 10px; }
.ea-k .act { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ea-leer { grid-column: 1 / -1; text-align: center; }
.ea-leer p { margin: 0 0 10px; }
.ea-dauer { margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--white); border: 1px solid var(--line); font-size: 15.5px; color: var(--ink-2); }
.ea-dauer .linklike { font-weight: 700; }
.ea-eintragen { margin: 36px 0 0; padding: 28px; border-radius: 20px; background: var(--red); color: var(--white); display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: space-between; box-shadow: 0 16px 36px rgba(176,16,42,0.22); }
.ea-eintragen-tx { flex: 1 1 420px; }
.ea-eintragen .kicker { color: #FFD3DA; }
.ea-eintragen h2 { margin: 0 0 8px; font-family: var(--display); font-size: clamp(28px, 4vw, 38px); line-height: 1.05; }
.ea-eintragen p { margin: 0; font-size: 16.5px; color: #FFE7EB; max-width: 44em; }
.ea-eintragen .btn-red { background: var(--white); color: var(--red); border-color: var(--white); }
.ea-eintragen .btn-red:hover { background: #FFF0F2; color: var(--red); }
.ea-warum { margin: 40px 0 0; padding: 30px 28px; border-radius: 20px; background: var(--white); border: 1px solid var(--line); }
.ea-warum-kopf p { margin: 6px 0 0; font-size: 17.5px; color: var(--ink-2); max-width: 48em; line-height: 1.55; }
.ea-warum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin-top: 22px; }
.ea-warum-grid > div { padding: 16px; border-radius: 14px; background: var(--mist); }
.ea-warum-grid strong { display: block; font-size: 18px; margin: 8px 0 4px; }
.ea-warum-grid p { margin: 0; font-size: 15px; color: var(--ink-2); }
.ea-ic { display: inline-flex; width: 42px; height: 42px; border-radius: 50%; background: var(--navy); color: var(--white); align-items: center; justify-content: center; }
.ea-ic svg { width: 22px; height: 22px; }
.ea-schritte { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ea-schritte li { display: flex; gap: 12px; align-items: flex-start; }
.ea-schritte b { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--red); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.ea-schritte span { font-size: 15px; color: var(--ink-2); }
.ea-schritte strong { display: block; color: var(--navy); font-size: 16.5px; }
.ea-orgs { margin: 44px 0 0; }
.org-gruppen { display: grid; gap: 12px; margin-top: 8px; }
.org-gruppe { border-radius: 16px; background: var(--white); border: 1px solid var(--line); overflow: hidden; }
.org-gruppe > summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; }
.org-gruppe > summary::-webkit-details-marker { display: none; }
.org-gruppe > summary:hover { background: var(--mist); }
.og-ic { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--navy); }
.g-rettung .og-ic { background: var(--red); } .g-sozial .og-ic { background: #2E7DAF; } .g-jugend .og-ic { background: #C26A00; } .g-vereine .og-ic { background: var(--green); }
.og-ic { -webkit-mask: none; position: relative; }
.og-ic::after { content: ""; position: absolute; inset: 11px; background: var(--white); -webkit-mask: var(--og-m) center / contain no-repeat; mask: var(--og-m) center / contain no-repeat; }
.g-rettung .og-ic { --og-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1 3 4 5 4 9a4 4 0 0 1-8 0c0-2 1-3 2-4 0 2 1 3 2 3 0-3-1-5 0-8zM6 14c0 4 3 8 6 8s6-4 6-8c0-1 0-2-1-3 0 4-2 7-5 7s-5-3-5-7c-1 1-1 2-1 3z'/%3E%3C/svg%3E"); }
.g-sozial .og-ic { --og-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 6-8 11-8 11z'/%3E%3C/svg%3E"); }
.g-jugend .og-ic { --og-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6 6 .9-4.5 4.3 1 6.3L12 16.6 6.5 19.5l1-6.3L3 8.9 9 8z'/%3E%3C/svg%3E"); }
.g-vereine .og-ic { --og-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='8' r='3.5'/%3E%3Ccircle cx='16.5' cy='9' r='3'/%3E%3Cpath d='M1.5 20c.5-4 3-6 6.5-6s6 2 6.5 6zM13.5 20c.3-2.5-.5-4.4-1.6-5.6 1-.6 2.5-.9 4.1-.9 3 0 5.2 2 5.5 6.5z'/%3E%3C/svg%3E"); }
.og-tx { flex: 1; min-width: 0; }
.og-tx strong { display: block; font-size: 19px; }
.og-tx small { display: block; color: var(--ink-2); font-size: 14px; }
.og-zahl { text-align: right; font-size: 14px; font-weight: 700; color: var(--navy); white-space: nowrap; }
.og-zahl em { display: block; font-style: normal; color: var(--red); font-size: 13px; }
.org-gruppe .ea-chev { flex: none; width: 12px; height: 12px; border-right: 3px solid var(--navy); border-bottom: 3px solid var(--navy); transform: rotate(45deg); margin: -4px 6px 0 4px; transition: transform .2s; }
.org-gruppe[open] .ea-chev { transform: rotate(-135deg); margin-top: 6px; }
.org-gruppe .org-liste { padding: 4px 18px 18px; }
@media (max-width: 640px) {
  .ea-suche input { font-size: 16px; min-height: 56px; }
  .ea-karten { grid-template-columns: 1fr; }
  .og-zahl { display: none; }
  .ea-eintragen, .ea-warum { padding: 22px 18px; }
  .ea-kopf-acts .btn { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 640px) {
  .ea-seite #ea-towns, .ea-zeit, .ea-tags { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding: 2px 16px 4px 0; -webkit-overflow-scrolling: touch; }
  .ea-seite #ea-towns::-webkit-scrollbar, .ea-zeit::-webkit-scrollbar, .ea-tags::-webkit-scrollbar { display: none; }
  .ea-seite #ea-towns > *, .ea-zeit button, .ea-tags > * { flex: none; white-space: nowrap; }
}

/* Kalender: Suche, Kategorien, Beta-Kennzeichnung */
.beta-tag.klein { font-size: 10px; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; letter-spacing: .5px; }
.kal-suche { position: relative; margin: 0 0 14px; }
.kal-suche svg { position: absolute; left: 16px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: var(--navy); pointer-events: none; }
.kal-suche input { width: 100%; min-height: 54px; padding: 0 52px 0 50px; border: 2px solid var(--navy); border-radius: 999px; font: inherit; font-size: 17px; background: var(--white); color: var(--navy); }
.kal-suche input:focus { outline: 3px solid var(--red); outline-offset: 2px; }
.kal-suche input::-webkit-search-cancel-button { display: none; }
.kal-kats { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 10px 0 12px; }
.kal-kats button { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid #B9C6D1; background: var(--white); color: var(--navy); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.kal-kats button small { font-weight: 600; color: var(--ink-2); margin-left: 2px; }
.kal-kats button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.kal-kats button[aria-pressed="true"] small { color: #C9D5E0; }
#kal-treffer:empty { display: none; }
@media (max-width: 640px) {
  .kal-kats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .kal-kats::-webkit-scrollbar { display: none; }
  .kal-kats button { flex: none; white-space: nowrap; }
  .kal-suche input { font-size: 16px; }
}

/* Ehrenamt: unbezahlt-Hinweis, Wunschzettel, Aufteilung 50/50 */
.ea-unbezahlt { margin: -4px 0 16px; padding: 10px 14px; border-radius: 12px; background: #FFF8E6; border: 1px solid #F0D99A; font-size: 15px; color: #5B4410; }
.ea-unbezahlt a { color: inherit; font-weight: 700; }
.ea-k-geld { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--green); }
.tk-regel { margin: 0; padding: 12px 14px; border-radius: 12px; background: #FFF8E6; border: 1px solid #F0D99A; font-size: 15px; color: #5B4410; line-height: 1.45; }
.tk-regel a { color: inherit; font-weight: 700; }
.ea-eintragen-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ea-eintragen .btn-line { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.85); }
.ea-eintragen .btn-line:hover { background: rgba(255,255,255,0.14); color: var(--white); }
.sw-bereich { margin: 40px 0 0; padding: 28px 24px; border-radius: 22px; background: linear-gradient(160deg, #FFF6E8 0%, #FFFDF8 60%); border: 1px solid #F0DDB8; }
.sw-kopf .kicker { color: #A2560A; }
.sw-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-top: 8px; }
.sw-k { position: relative; display: flex; flex-direction: column; border-radius: 16px; background: var(--white); border: 1px solid #EBDDC4; box-shadow: 0 6px 18px rgba(120,80,20,0.08); overflow: hidden; }
.sw-k::before { content: ""; position: absolute; top: 14px; right: 16px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #E8D3AE; background: #FFF6E8; z-index: 1; }
.sw-bild img { display: block; width: 100%; height: 150px; object-fit: cover; }
.sw-tx { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.sw-kopfz { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sw-band { font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: #A2560A; color: var(--white); }
.sw-stempel { font-size: 12.5px; font-weight: 800; padding: 3px 10px; border-radius: 6px; border: 2px solid var(--green); color: var(--green); transform: rotate(-3deg); }
.sw-k h3 { margin: 0; font-family: var(--display); font-size: 24px; line-height: 1.08; }
.sw-org { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.sw-org .linklike { font-weight: 700; }
.sw-zweck { margin: 0; font-size: 15px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sw-stand p { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.sw-stand strong { color: var(--navy); font-size: 16px; }
.sw-bar { height: 12px; border-radius: 999px; background: #F1E6D3; overflow: hidden; }
.sw-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #E08A1E, #B0102A); }
.sw-k.fertig .sw-bar span { background: var(--green); }
.sw-geben { margin-top: auto; padding-top: 6px; display: grid; gap: 10px; }
.sw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sw-chips button { min-height: 38px; min-width: 62px; padding: 0 12px; border-radius: 999px; border: 1px solid #D9C6A4; background: var(--white); color: var(--navy); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.sw-chips button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.sp-balken { display: flex; height: 26px; border-radius: 8px; overflow: hidden; font-size: 12.5px; font-weight: 800; color: var(--white); }
.sp-balken span { flex: 1; display: flex; align-items: center; justify-content: center; }
.sp-vor { background: #2E7DAF; flex: 7 !important; } .sp-shi { flex: 3 !important; } .sp-shi { background: var(--navy); }
.sp-legende { display: grid; gap: 2px; margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); }
.sp-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.sp-legende i.vor { background: #2E7DAF; } .sp-legende i.shi { background: var(--navy); }
.sp-split-leer { margin: 0; font-size: 14px; color: var(--ink-2); }
.sp-wunsch { padding: 12px 14px; border-radius: 12px; background: #FFF6E8; border: 1px solid #F0DDB8; }
.sp-wunsch span { display: block; font-size: 13px; font-weight: 700; color: #A2560A; text-transform: uppercase; letter-spacing: .6px; }
.sp-wunsch strong { font-size: 17px; }
.sw-wie { margin-top: 18px; border-radius: 14px; background: var(--white); border: 1px solid #EBDDC4; }
.sw-wie > summary { cursor: pointer; padding: 14px 16px; font-weight: 700; list-style: none; }
.sw-wie > summary::-webkit-details-marker { display: none; }
.sw-wie > summary::after { content: " ▾"; color: #A2560A; }
.sw-wie[open] > summary::after { content: " ▴"; }
.sw-wie-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; padding: 0 16px; }
.sw-wie-grid b { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; background: #A2560A; color: var(--white); align-items: center; justify-content: center; font-size: 14px; }
.sw-wie-grid strong { display: block; margin: 6px 0 2px; }
.sw-wie-grid p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.sw-ehrlich { margin: 14px 16px 16px; padding: 10px 12px; border-radius: 10px; background: var(--mist); font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 640px) { .sw-bereich { padding: 22px 16px; margin-left: -4px; margin-right: -4px; } .sw-karten { grid-template-columns: 1fr; } }

/* Hauptmenü: Beta-Bereiche als Aufklappmenü */
.nav-beta { position: relative; }
.nav-beta-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.nav-beta-btn:hover, .nav-beta-btn[aria-expanded="true"] { background: var(--mist); color: var(--navy); }
.nav-beta-btn svg { transition: transform .2s; }
.nav-beta-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-beta.aktiv .nav-beta-btn { color: var(--red); }
.nav-beta .beta-tag { font-size: 11px; padding: 1px 6px 2px; }
.nav .nav-sub { display: none; list-style: none; margin: 0; padding: 8px; }
.nav-beta.open .nav-sub { display: block; }
.nav .nav-sub a { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-height: 52px; padding: 6px 12px; border-radius: 10px; }
.nav .nav-sub a strong { font-size: 16px; font-weight: 700; }
.nav .nav-sub a small { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.nav .nav-sub a.active strong { color: var(--red); }
.nav-sub-hinweis { padding: 4px 12px 8px; font-size: 13px; color: var(--ink-2); }
@media (min-width: 1100px) {
  .nav ul { gap: 2px; }
  .nav a { padding: 0 12px; font-size: 16px; }
  .nav .nav-sub { position: absolute; right: 0; top: calc(100% + 6px); min-width: 300px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 36px rgba(18,38,58,0.16); z-index: 60; flex-direction: column; align-items: stretch; }
}
@media (max-width: 1099px) {
  .nav-beta { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
  .nav-beta-btn { width: 100%; justify-content: flex-start; font-size: 17px; min-height: 48px; }
  .nav-beta-btn svg { margin-left: auto; }
  .nav .nav-sub { padding: 0 0 6px 8px; }
  .nav-beta.open .nav-sub { display: flex; flex-direction: column; align-items: stretch; }
}
.map-suche { max-width: 760px; }
.map-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; }
.map-tags span { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.map-tags button { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--mist); color: var(--navy); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
#map-treffer:empty { display: none; }
@media (max-width: 640px) { .map-tags { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; } .map-tags::-webkit-scrollbar { display: none; } .map-tags > * { flex: none; } }
/* Ehrenamt mobil: Gesuche und Wünsche als Wisch-Leiste statt langer Liste */
.wisch-info { display: none; }
@media (max-width: 640px) {
  .ea-karten, .sw-karten { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: -16px; padding: 4px 16px 6px 0; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .ea-karten::-webkit-scrollbar, .sw-karten::-webkit-scrollbar { display: none; }
  .ea-k, .sw-k { scroll-snap-align: start; }
  .ea-karten > .ea-leer, .sw-karten > .ea-leer { grid-column: auto; }
  .ea-k-text { -webkit-line-clamp: 2; }
  .sw-zweck { -webkit-line-clamp: 3; }
  .wisch-info { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
  .wisch-info[hidden] { display: none; }
  .wisch-punkte { display: flex; gap: 5px; flex-wrap: wrap; }
  .wisch-punkte i { width: 7px; height: 7px; border-radius: 50%; background: #C5D0DA; }
  .wisch-punkte i.an { background: var(--red); width: 18px; border-radius: 4px; }
}
.pf-sperre { display: block; margin-top: 4px; }
#pf-insider[readonly] { background: var(--mist); color: var(--ink-2); cursor: not-allowed; }
/* lange Nicknames (bis 25 Zeichen) sauber kürzen */
#account-label { display: inline-block; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.rolle-info { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--mist); font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.rolle-info strong { color: var(--navy); }

/* =====================================================================
   Klatsch & Tratsch – Lokalberichte
   ===================================================================== */
.kt-kopf-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.kt-rubriken { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 12px 0; }
.kt-rubriken button { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid #B9C6D1; background: var(--white); color: var(--navy); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.kt-rubriken button[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: var(--white); }
.kt-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.kt-karte { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--white); overflow: hidden; cursor: pointer; font: inherit; color: var(--navy); }
.kt-karte:hover { box-shadow: 0 10px 24px rgba(18,38,58,0.1); border-color: var(--navy); }
.kt-karte.gross { grid-column: 1 / -1; flex-direction: row; }
.kt-karte.gross .kt-ph { flex: 0 0 52%; } .kt-karte.gross .kt-ph img { height: 100%; min-height: 280px; }
.kt-karte.gross strong { font-size: 34px; }
.kt-ph img { display: block; width: 100%; height: 190px; object-fit: cover; }
.kt-tx { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.kt-meta { font-size: 12.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--red); }
.kt-karte strong { font-family: var(--display); font-size: 25px; line-height: 1.08; }
.kt-karte .kt-teaser { font-size: 15.5px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kt-fuss { font-size: 13.5px; color: var(--ink-2); margin-top: auto; }
.kt-wie { margin-top: 40px; padding: 26px 24px; border-radius: 20px; background: var(--white); border: 1px solid var(--line); }
.kt-wie p { font-size: 16.5px; color: var(--ink-2); max-width: 50em; }
.kt-regeln { margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: var(--mist); font-size: 15px !important; }
.kt-dlg { max-width: 760px; }
.kt-dlg .sheet-body { position: relative; padding-top: 22px; }
.kt-zu { position: sticky; top: 0; float: right; z-index: 2; background: var(--white); }
.kt-artikel h2 { font-family: var(--display); font-size: clamp(30px, 5vw, 42px); line-height: 1.04; margin: 4px 0 12px; }
.kt-artikel h3 { font-size: 21px; margin: 22px 0 6px; }
.kt-artikel p { font-size: 17px; line-height: 1.6; }
.kt-artikel .kt-meta { margin: 0; }
.kt-artikel .kt-teaser { font-weight: 700; font-size: 18.5px; }
.kt-artikel .kt-art { display: inline-block; margin: 0 0 8px; padding: 5px 12px; border-radius: 8px; background: #FFF4E5; color: #7A4E12; font-size: 14px; font-weight: 700; }
.kt-fig { margin: 16px 0; } .kt-fig img { display: block; width: 100%; border-radius: 12px; }
.kt-fig figcaption { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }
.kt-fig figcaption em { font-style: normal; opacity: .85; } .kt-fig figcaption strong { color: #7A4E12; }
.kt-artikel blockquote { margin: 18px 0; padding: 6px 0 6px 16px; border-left: 4px solid var(--red); font-size: 20px; font-style: italic; line-height: 1.45; }
.kt-artikel cite { display: block; margin-top: 4px; font-size: 14.5px; font-style: normal; color: var(--ink-2); }
.kt-artikel .kt-autor { font-weight: 700; margin-top: 18px; }
.kt-artikel .kt-transparenz { font-size: 14.5px; color: var(--ink-2); padding: 8px 12px; background: var(--mist); border-radius: 10px; }
.kt-teilen { margin-top: 16px; }
@media (max-width: 760px) { .kt-karte.gross { flex-direction: column; } .kt-karte.gross .kt-ph img { min-height: 0; height: 210px; } .kt-karte.gross strong { font-size: 27px; } }

/* Baukasten */
.sb-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.sb-kopf h2 { font-family: var(--display); font-size: 34px; margin: 4px 0; }
.sb-kopf-acts, .sb-fuss { display: flex; flex-wrap: wrap; gap: 10px; }
.sb-fuss { justify-content: flex-end; padding: 16px 0 6px; position: sticky; bottom: 0; background: linear-gradient(transparent, var(--mist) 30%); }
.sb-liste { display: grid; gap: 10px; }
.sb-zeile { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); }
.sb-zeile strong { display: block; font-size: 18px; }
.sb-acts { display: flex; gap: 8px; align-items: center; }
.sb-weg { color: var(--red); }
.sb-status { font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--mist); white-space: nowrap; }
.sb-status.ok { background: var(--green-soft); color: #154A28; } .sb-status.warn { background: #FFF4E5; color: #7A4E12; } .sb-status.bad { background: var(--red-soft); color: var(--red); }
.sb-form .vb-karte { margin-bottom: 16px; }
.sb-form h3 { margin: 0 0 12px; font-size: 19px; }
.sb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }
.sb-form input[type=text], .sb-form input:not([type]), .sb-form select, .sb-form textarea { width: 100%; }
.sb-bloecke { display: grid; gap: 12px; }
.sb-block { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: #FBFCFD; display: grid; gap: 8px; }
.sb-block textarea, .sb-block input:not([type=checkbox]):not([type=file]) { width: 100%; padding: 10px 12px; border: 1px solid #B9C6D1; border-radius: 10px; font: inherit; font-size: 16px; }
.sb-block.b-zwischen input { font-weight: 700; font-size: 18px; }
.sb-block.b-zitat textarea { font-style: italic; }
.sb-bk { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-2); }
.sb-bk-acts button { min-width: 34px; min-height: 32px; margin-left: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); cursor: pointer; font: inherit; }
.sb-bk-acts button:disabled { opacity: .35; cursor: default; }
.sb-neu { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; font-weight: 700; }
.sb-bild { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px; border: 2px dashed #C5D0DA; border-radius: 12px; }
.sb-bild.drag { border-color: var(--red); background: var(--red-soft); }
.sb-bild.laedt { opacity: .5; }
.sb-bild img { width: 180px; height: 120px; object-fit: cover; border-radius: 8px; }
.sb-bild-leer { width: 180px; height: 120px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--mist); color: var(--ink-2); font-size: 14px; }
.sb-recht .check span { font-size: 14.5px; }
.sb-tipps { margin-top: 20px; padding: 14px 16px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); }
.sb-tipps summary { cursor: pointer; font-weight: 700; }
@media (max-width: 640px) { .sb-zeile { grid-template-columns: 1fr; } }

/* ===== Vereinsbereich: Vorstand & Ämter, interner Bereich ===== */
.vb-zahl { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--red); color: #fff; font-size: 12px; }
.vb .vb-tag.intern, .vb-tag.intern { background: #1D3557; color: #fff; }
.vb-amt-gruppe { background: #fff; border: 1px solid var(--vb-rand, #D9E1E8); border-radius: 16px; padding: 14px 16px; margin: 0 0 16px; }
.vb-amt-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.vb-amt-titel { flex: 1 1 220px; font-size: 20px; font-weight: 800; color: var(--navy); border: 1px dashed transparent; border-radius: 8px; padding: 6px 8px; background: var(--mist); }
.vb-amt-titel:hover, .vb-amt-titel:focus { border-color: #B9C6D1; background: #fff; }
.vb-amt-zahl { font-size: 13px; font-weight: 700; color: var(--ink-2); background: var(--mist); border-radius: 999px; padding: 2px 10px; }
.vb-mini { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #B9C6D1; background: #fff; font-weight: 700; cursor: pointer; }
.vb-mini:disabled { opacity: .35; cursor: default; } .vb-mini.rot { color: var(--red); }
.vb-amt-liste { display: grid; gap: 10px; }
.vb-person { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: start; padding: 10px; border-radius: 12px; border: 1px solid #E3E9EE; background: #FBFCFD; }
.vb-person.platzhalter { border-style: dashed; background: #fff; }
.vb-p-foto { display: grid; justify-items: center; gap: 4px; text-align: center; }
.vb-p-foto img, .vb-p-ph { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: var(--mist); display: grid; place-items: center; font-size: 34px; border: 2px solid #fff; box-shadow: 0 0 0 1px #D9E1E8; }
.vb-p-foto-knopf { font-size: 13px; font-weight: 700; color: var(--red); cursor: pointer; text-decoration: underline; }
.vb-p-foto .linklike { font-size: 12px; }
.vb-p-felder { display: grid; gap: 6px; min-width: 0; }
.vb-p-felder input { width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid #B9C6D1; border-radius: 8px; font: inherit; }
.vb-p-felder input[data-k=rang] { font-weight: 700; color: var(--red); }
.vb-p-felder input[data-k=name] { font-weight: 700; }
.vb-p-platz { font-size: 12.5px; color: #7A4100; }
.vb-p-akt { display: flex; flex-direction: column; gap: 4px; }
.vb-p-upload { grid-column: 1 / -1; display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: start; padding: 10px; border-radius: 10px; background: #FFF8EC; }
.vb-p-upload[hidden] { display: none; }
.vb-p-upload .vb-knoepfe { grid-column: 1 / -1; }
.vb-p-vorschau { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.vb-amt-neu { border: 2px dashed #B9C6D1; background: none; border-radius: 12px; padding: 12px; font-weight: 700; color: var(--navy); cursor: pointer; }
.vb-amt-neu:hover { border-color: var(--red); color: var(--red); }
@media (max-width: 560px) { .vb-person { grid-template-columns: 72px 1fr; } .vb-p-akt { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; } .vb-p-foto img, .vb-p-ph { width: 64px; height: 64px; font-size: 26px; } }
.vb-sicht { border: 0; padding: 0; margin: 10px 0; } .vb-sicht legend { font-weight: 700; margin-bottom: 4px; }
.vb-mitgl { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.vb-mitgl li { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--mist); }
.vb-info { padding: 10px 12px; border-radius: 10px; border: 1px solid #E3E9EE; margin: 0 0 10px; }
.vb-info.oben { border-color: #E9C46A; background: #FFFBF0; }
.vb-info small { display: block; color: var(--ink-2); } .vb-info p { margin: 6px 0; }
/* Profilseite: Ämter mit Foto */
.org-aemter { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.org-amt { text-align: center; padding: 12px 8px; border-radius: 12px; background: var(--mist); border: 1px solid var(--line); }
.org-amt img, .org-amt-ph { width: 88px; height: 88px; margin: 0 auto 8px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: #fff; color: var(--navy); font-weight: 800; font-size: 26px; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.org-amt-rang { display: block; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--red); }
.org-amt strong { display: block; color: var(--navy); font-size: 15.5px; }
.org-amt small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-2); }
/* Profilseite: interner Bereich */
.org-intern { margin-top: 14px; padding: 2px 14px 14px; border-radius: 14px; background: #F2F5F9; border: 1px solid #D9E1E8; }
.org-intern-zu p { margin: 6px 0 10px; }
.org-intern-name { display: grid; gap: 4px; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.org-intern-name input { min-height: 42px; padding: 6px 10px; border: 1px solid #B9C6D1; border-radius: 8px; font: inherit; font-weight: 400; }
.org-intern-hinweis { margin: 0 0 8px; font-size: 13px; color: var(--ink-2); }
.org-intern-infos { display: grid; gap: 8px; margin-bottom: 10px; }
.org-intern-infos article { padding: 10px 12px; background: #fff; border-radius: 10px; border: 1px solid #E3E9EE; }
.org-intern-infos article.oben { border-color: #E9C46A; }
.org-intern-infos small { display: block; color: var(--ink-2); font-size: 12.5px; } .org-intern-infos p { margin: 4px 0 0; font-size: 14.5px; }
.org-intern-t { padding: 8px 10px; } .org-intern-t strong, .org-intern-t span, .org-intern-t small { display: block; } .org-intern-t small { color: var(--ink-2); font-size: 13px; }
/* SH-Admin */
.sa-rollen { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-rollen button { border: 1px solid #B9C6D1; background: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; font-weight: 700; color: var(--navy); cursor: pointer; }
.sa-rollen button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.sa-box { padding: 4px 16px 16px; margin: 0 0 8px; border-radius: 14px; border: 2px dashed #1D3557; background: #F4F7FA; }
.acc-sa { padding: 8px 12px 10px; border-bottom: 1px solid var(--line); background: #F4F7FA; display: grid; gap: 6px; }
.acc-sa small { font-weight: 700; color: var(--ink-2); }
.acc-sa .sa-rollen button { padding: 4px 9px; font-size: 12.5px; }
.acc-wer small + small { display: block; margin-top: 2px; }
.vb-admin-hinweis { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: #1D3557; color: #fff; }
.vb-wahl-admin { display: grid; gap: 2px; font-size: 12.5px; font-weight: 700; } .vb-wahl-admin select { max-width: 320px; }
.acc-menu a.acc-schreiben { background: #FFF1E0; color: #7A4100; font-weight: 800; }
.em-wartet { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: #FFF8EC; border: 1px solid #E9C46A; }
/* Rollen im Konto */
.tabs-bar .tab-rolle { color: #7A4100; }
.tabs-bar .tab-rolle[aria-selected="true"] { color: #fff; }
.rl-kopf { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin: 6px 0 16px; }
.rl-kopf > div:first-child { flex: 1 1 420px; }
.rl-jetzt { display: grid; gap: 4px; justify-items: start; padding: 12px 16px; border-radius: 14px; background: var(--mist); border: 1px solid var(--line); }
.rl-jetzt small { color: var(--ink-2); font-weight: 700; }
.rl-anfrage { padding: 14px 18px; border-radius: 14px; background: #FFF8EC; border: 1px solid #E9C46A; margin: 0 0 16px; }
.rl-anfrage p { margin: 4px 0 6px; }
.rl-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.rl-karte { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(19,35,58,.04); }
.rl-karte.offen { grid-column: 1 / -1; border: 2px solid var(--red); }
.rl-karte.wartet { border-color: #E9C46A; background: #FFFBF0; }
.rl-icon { font-size: 30px; line-height: 1; }
.rl-karte h3 { margin: 2px 0 0; font-size: 21px; color: var(--navy); }
.rl-fuer { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.rl-karte ul { margin: 4px 0 10px; padding-left: 18px; font-size: 14.5px; line-height: 1.45; }
.rl-karte > .btn { margin-top: auto; align-self: flex-start; }
.rl-form { margin-top: 6px; max-width: 620px; }
.rl-wartet { margin: auto 0 0; font-weight: 700; color: #7A4100; }
span.rl-wartet { margin: 0; }
.acc-menu a.acc-rolle { background: #FFF1E0; color: #7A4100; font-weight: 800; }
.acc-menu a.acc-rolle small { display: block; font-weight: 600; font-size: 12.5px; }
.rn-rollen { display: flex; flex-wrap: wrap; gap: 6px; }
#ks-raus-oben:not([hidden]) { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* ===== Startseite: Ehrenamt im Fokus ===== */
.hero-ea .wrap { padding-top: 84px; padding-bottom: 64px; }
.hero-ea-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.8fr); gap: 36px; align-items: end; }
.hero-ea h1 { max-width: 14ch; }
.hero-suche { display: flex; align-items: center; gap: 8px; margin-top: 26px; max-width: 620px; padding: 6px 6px 6px 16px; border-radius: 16px; background: var(--white); box-shadow: 0 12px 30px rgba(18,38,58,0.35); }
.hero-suche svg { width: 22px; height: 22px; flex: none; color: var(--ink-2); }
.hero-suche input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 18px; padding: 10px 4px; color: var(--navy); background: transparent; }
.hero-suche .btn { min-height: 48px; padding: 0 20px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hero-chips a { padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.45); color: var(--white); font-size: 15px; font-weight: 700; text-decoration: none; backdrop-filter: blur(4px); }
.hero-chips a:hover { background: rgba(255,255,255,0.28); }
.hero-zahlen { display: grid; gap: 10px; padding: 18px; border-radius: 18px; background: rgba(255,255,255,0.96); color: var(--navy); box-shadow: 0 14px 36px rgba(18,38,58,0.35); }
.hz-kopf { font-size: 13px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--red); }
.hz { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; background: var(--mist); color: var(--navy); text-decoration: none; }
.hz:hover { background: #E7EDF3; }
.hz b { font-family: var(--display); font-size: 40px; line-height: 1; color: var(--red); min-width: 1.4em; text-align: center; }
.hz span { font-weight: 700; font-size: 15px; line-height: 1.3; }
.hz-fuss { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); text-align: center; }
.region-trenner { padding: 56px 0 8px; background: linear-gradient(180deg, #EEF6FB 0%, var(--bg, #F2F5F9) 100%); }
.region-trenner h2 { margin: 4px 0 6px; font-family: var(--display); font-size: clamp(30px, 4.4vw, 44px); }
.region-trenner + .section.alt { padding-top: 24px; }
.ev-preview-breit { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); column-gap: 24px; }
@media (max-width: 860px) {
  .hero-ea-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .hero-ea .wrap { padding-top: 56px; padding-bottom: 40px; }
  .hero-zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px; gap: 8px; }
  .hz-kopf, .hz-fuss { grid-column: 1 / -1; }
  .hz { flex-direction: column; gap: 4px; text-align: center; padding: 10px 6px; }
  .hz b { font-size: 32px; } .hz span { font-size: 12.5px; }
}
@media (max-width: 520px) {
  .hero-suche { padding-left: 12px; } .hero-suche input { font-size: 16px; } .hero-suche .btn { padding: 0 14px; }
  .hero-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; } .hero-chips::-webkit-scrollbar { display: none; } .hero-chips a { flex: none; }
  .hero-ea .hero-actions .btn { flex: 1 1 100%; }
}
.region-start { background: linear-gradient(180deg, #EEF6FB 0%, #fff 70%); }
/* ===== Startseite: SH Insider erklärt ===== */
.hero-si .wrap { padding-top: 96px; padding-bottom: 64px; }
.hero-fakten { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 22px 0 0; padding: 0; font-weight: 700; font-size: 15.5px; color: #F3F6F9; }
.hero-fakten li { display: inline-flex; align-items: center; gap: 6px; }
.hero-fakten svg { width: 18px; height: 18px; color: #7EE0A1; }
.si-bereiche { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.si-b { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 20px 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; box-shadow: 0 2px 0 rgba(19,35,58,.04); transition: transform .15s, box-shadow .15s; }
.si-b:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(19,35,58,.12); color: var(--ink); }
.si-b h3 { margin: 4px 0 0; font-family: var(--display); font-size: 28px; color: var(--navy); }
.si-b p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.si-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--red); }
.si-ic svg { width: 28px; height: 28px; }
.b-karte .si-ic { background: #2E7DB5; } .b-ea .si-ic { background: #1F8A5B; } .b-sozial .si-ic { background: var(--navy); }
.si-tag { position: absolute; top: 18px; right: 16px; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #E5F3EA; color: #14532D; }
.si-mehr { margin-top: auto; padding-top: 8px; font-weight: 800; color: var(--red); }
.si-mw { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 36px; align-items: start; }
.si-mw-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.si-mw-liste li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.si-mw-liste b { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #FFF0F2; color: var(--red); }
.si-mw-liste b svg { width: 22px; height: 22px; }
.si-mw-liste span { font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.si-mw-liste strong { display: block; font-size: 17px; color: var(--navy); }
.si-ea { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr); gap: 32px; align-items: center; padding: 30px; border-radius: 22px; background: linear-gradient(135deg, #F0FAF4 0%, #FFFFFF 70%); border: 1px solid #CDE9D8; }
.si-ea h2 { margin: 4px 0 10px; }
.si-ea-text > p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 46em; }
.si-ea-zahlen { display: grid; gap: 10px; padding: 16px; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(18,38,58,0.10); }
.si-aufbau { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.si-aufbau > div { padding: 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.si-aufbau b { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 16px; }
.si-aufbau strong { display: block; margin: 10px 0 4px; font-size: 18px; color: var(--navy); }
.si-aufbau p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.si-plan { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 0; border-left: 3px solid var(--line); }
.si-plan li { position: relative; padding: 4px 0 22px 26px; }
.si-plan li::before { content: ""; position: absolute; left: -10px; top: 6px; width: 17px; height: 17px; border-radius: 50%; background: #fff; border: 3px solid #B9C6D1; }
.si-plan li.jetzt::before { background: #1F8A5B; border-color: #1F8A5B; }
.si-plan li.bald::before { border-color: var(--red); }
.si-plan-st { display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: var(--mist); color: var(--ink-2); }
.si-plan li.jetzt .si-plan-st { background: #E5F3EA; color: #14532D; } .si-plan li.bald .si-plan-st { background: #FFF0F2; color: var(--red); }
.si-plan strong { display: block; margin: 6px 0 2px; font-size: 19px; color: var(--navy); }
.si-plan p { margin: 0; font-size: 15.5px; color: var(--ink-2); max-width: 52em; line-height: 1.5; }
@media (max-width: 1000px) { .si-bereiche, .si-aufbau { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .si-mw, .si-ea { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .si-ea { padding: 20px 16px; }
  .si-ea-zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px; gap: 8px; }
  .si-ea-zahlen .hz-kopf, .si-ea-zahlen .hz-fuss { grid-column: 1 / -1; }
  .si-ea-zahlen .hz { flex-direction: column; gap: 4px; text-align: center; padding: 10px 6px; } .si-ea-zahlen .hz b { font-size: 30px; } .si-ea-zahlen .hz span { font-size: 12.5px; }
  .hero-si .wrap { padding-top: 56px; padding-bottom: 40px; }
}
@media (max-width: 560px) { .si-bereiche, .si-aufbau { grid-template-columns: minmax(0, 1fr); } .si-b h3 { font-size: 25px; } }
/* Baukasten: Notizblock & Bildablage */
.sb-notiz { background: #FFFDF6; border-color: #EADFB8; }
.sb-notiz-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.sb-notiz-kopf h3 { margin: 0; }
.sb-notizen { width: 100%; min-height: 300px; resize: vertical; padding: 14px 16px; border-radius: 12px; border: 1px solid #D9CFA8; background: #F5F2E8; font: 15.5px/1.6 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--ink); }
.sb-notizen::placeholder { color: #8C8A80; opacity: 1; }
.sb-notizen:focus { background: #fff; outline: 2px solid #E9C46A; outline-offset: 1px; }
.sb-notiz-z { margin: 6px 0 16px; }
.sb-ablage-kopf { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 8px; }
.sb-ablage { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 10px; border-radius: 12px; border: 2px dashed #D9CFA8; background: #fff; }
.sb-ablage.drag { border-color: var(--red); background: #FFF6F7; }
.sb-ablage.laedt { opacity: .6; pointer-events: none; }
.sb-ab { position: relative; margin: 0; border-radius: 10px; overflow: hidden; background: var(--mist); border: 1px solid var(--line); cursor: grab; }
.sb-ab img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sb-ab-tag { position: absolute; top: 6px; left: 6px; font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: rgba(19,35,58,.85); color: #fff; }
.sb-ab figcaption { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; }
.sb-ab figcaption button { flex: 1 1 auto; font: inherit; font-size: 12.5px; font-weight: 700; padding: 5px 6px; border-radius: 8px; border: 1px solid #B9C6D1; background: #fff; color: var(--navy); cursor: pointer; }
.sb-ab figcaption button.rot { flex: 0 0 auto; color: var(--red); }
.sb-ab-neu { display: grid; place-items: center; align-content: center; gap: 4px; min-height: 150px; border-radius: 10px; background: #F5F2E8; color: var(--navy); text-align: center; cursor: pointer; padding: 10px; }
.sb-ab-neu span { font-weight: 800; } .sb-ab-neu small { color: var(--ink-2); font-size: 12.5px; }
.ab-zieht .sb-block, .ab-zieht .sb-bild[data-ziel="titel"], .ab-zieht .sb-neu { outline: 2px dashed #B9C6D1; outline-offset: 2px; }
.sb-block.ab-drop, .sb-neu.ab-drop { outline: 3px solid var(--red) !important; background: #FFF6F7; }
.kt-notizen { margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: #FFFDF6; border: 1px solid #EADFB8; }
.kt-notizen summary { cursor: pointer; font-weight: 700; }
.kt-notizen pre { white-space: pre-wrap; font: 14px/1.55 ui-monospace, Menlo, Consolas, monospace; margin: 10px 0 0; }
.kt-ablage { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.kt-ablage img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
/* Bildnachweis unter Fotos (redaktionell) */
.kt-fig figcaption .kt-credit, .kt-vorschau figcaption .kt-credit { display: block; margin-top: 2px; font-size: 11.5px; letter-spacing: .02em; color: #7D8B98; text-align: right; }
.sb-ab-info { display: grid; gap: 4px; padding: 6px 6px 0; }
.sb-ab-info input:not([type=checkbox]) { width: 100%; min-height: 32px; padding: 4px 8px; border: 1px solid #B9C6D1; border-radius: 7px; font: inherit; font-size: 13px; }
.sb-ab-info input[data-abq] { font-weight: 700; }
.sb-ab.ohne-q input[data-abq] { border-color: var(--red); background: #FFF6F7; }
.sb-ab-ki { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); }
.sb-ab-credit { font-size: 11.5px; color: #7D8B98; text-align: right; }
.sb-ab.ohne-q .sb-ab-credit { color: var(--red); font-weight: 700; text-align: left; }
.sb-ab.wackel { animation: sbwackel .5s; }
@keyframes sbwackel { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.sb-ablage { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.kt-ablage figure { margin: 0; } .kt-ablage figcaption { font-size: 12px; color: var(--ink-2); } .kt-ablage em { display: block; font-style: normal; color: #7D8B98; }
/* ===== Unternehmensbereich ===== */
.fb .vb-status { margin: 12px 0 18px; }
.fb-admin { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; font-size: 14px; margin-bottom: 12px; padding: 8px 12px; border-radius: 10px; background: #1D3557; color: #fff; }
.fb-admin select { max-width: 280px; }
.fb-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; }
.fb-kopf h2 { margin: 0; font-family: var(--display); font-size: 36px; }
.fb-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-chip { font-size: 13px; font-weight: 800; padding: 5px 12px; border-radius: 999px; background: var(--mist); color: var(--ink-2); }
.fb-chip.online { background: #E5F3EA; color: #14532D; } .fb-chip.eingereicht { background: #FFF4E5; color: #7A4E12; }
.fb-chip.prem { background: linear-gradient(135deg, #F6D365, #F2B33D); color: #4A3200; } .fb-chip.basis { background: #EEF2F5; }
.fb-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); gap: 20px; align-items: start; }
.fb-form .vb-karte { margin-bottom: 16px; }
.fb-sec-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; margin-bottom: 6px; }
.fb-sec-kopf h3 { margin: 0; font-size: 20px; }
.fb-badge { font-size: 12.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.fb-badge.gruen { background: #E5F3EA; color: #14532D; } .fb-badge.gold { background: #FFF1C9; color: #7A4E12; }
.fb-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 10px; }
.fb-f[data-f=beschreibung], .fb-f[data-f=leistungen], .fb-f[data-f=oeffnungszeiten], .fb-f[data-f=name] { grid-column: 1 / -1; }
.fb-f input, .fb-f select, .fb-f textarea { width: 100%; }
.fb-f label { display: flex; align-items: center; gap: 8px; }
.fb-lock { margin-left: auto; font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #FFF1C9; color: #7A4E12; white-space: nowrap; }
.fb-lock.an { background: #E5F3EA; color: #14532D; }
.fb-prem-sec { position: relative; border: 2px solid #F2D27A; background: linear-gradient(180deg, #FFFCF2 0%, #fff 140px); }
.fb-prem-sec:not(.aktiv) .fb-f.prem input, .fb-prem-sec:not(.aktiv) .fb-f.prem select, .fb-prem-sec:not(.aktiv) .fb-f.prem textarea { background: #FFFDF6; border-style: dashed; }
.fb-prem-sec.aktiv { border-color: #9BD3AE; background: linear-gradient(180deg, #F3FBF6 0%, #fff 140px); }
.fb-prem-info { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 12px 14px; margin: 8px 0 4px; border-radius: 12px; background: #FFF6DB; }
.fb-prem-info p { margin: 0; flex: 1 1 300px; font-size: 14.5px; }
.btn-gold { background: linear-gradient(135deg, #F6D365, #F2A93B); color: #3B2A00; border: 0; }
.btn-gold:hover { filter: brightness(1.05); color: #3B2A00; }
.fb-fuss { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; padding: 14px 0 4px; position: sticky; bottom: 0; background: linear-gradient(transparent, var(--mist) 35%); z-index: 2; }
.fb-fuss .vb-hint { margin-right: auto; }
.fb-seite { position: sticky; top: 90px; display: grid; gap: 16px; }
.fb-umschalter { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--mist); margin: 6px 0 12px; }
.fb-umschalter button { border: 0; background: none; font: inherit; font-weight: 700; font-size: 14px; padding: 6px 14px; border-radius: 999px; cursor: pointer; color: var(--ink-2); }
.fb-umschalter button[aria-pressed="true"] { background: #fff; color: var(--navy); box-shadow: 0 1px 4px rgba(19,35,58,.15); }
.fb-vs-basis { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-size: 14.5px; }
.fb-vs-basis strong { font-size: 17px; color: var(--navy); } .fb-vs-basis span { color: var(--ink-2); }
.fb-vs-prem { padding: 14px; border-radius: 14px; border: 2px solid #F2D27A; background: #fff; }
.fb-vs-kopf { display: flex; align-items: center; gap: 10px; }
.fb-vs-kopf strong { display: block; font-size: 18px; color: var(--navy); } .fb-vs-kopf span:not(.plus-tag) { font-size: 13px; color: var(--ink-2); }
.fb-vs-kopf .plus-tag { margin-left: auto; }
.fb-vs-logo { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--navy); color: #fff; font-weight: 800; }
.fb-vs-prem p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; } .fb-vs-prem p.leer { color: #9AA6B2; font-style: italic; }
.fb-vs-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .fb-vs-tags span { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--mist); }
.fb-vs-prem dl { display: grid; gap: 4px; margin: 10px 0 0; font-size: 13.5px; } .fb-vs-prem dl div { display: flex; gap: 8px; } .fb-vs-prem dt { flex: none; width: 110px; color: var(--ink-2); } .fb-vs-prem dd { margin: 0; white-space: pre-line; }
.fb-aktuell h3 { margin: 0 0 6px; font-size: 18px; } .fb-aktuell p { margin: 0 0 8px; font-size: 14.5px; }
.fb-bausteine { margin-top: 24px; }
.fb-rechnungen { margin-top: 24px; } .fb-re-liste { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.fb-re-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.fb-re-st { font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--green-soft); color: #154A28; } .fb-re-st.offen { background: #FFF4D6; color: #7A4E12; }
.fb-re-b { font-weight: 700; margin-left: auto; } .fb-agb { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 4px; font-size: 15px; line-height: 1.4; } .fb-agb input { margin-top: 4px; flex-shrink: 0; }

.fb-bs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 12px; }
.fb-bs { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.fb-bs-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #FFF1C9; color: #7A4E12; } .fb-bs-ic svg { width: 24px; height: 24px; }
.fb-bs-tag { font-size: 12px; font-weight: 800; color: #7A4E12; }
.fb-bs h4 { margin: 0; font-size: 18px; color: var(--navy); } .fb-bs p { margin: 0 0 6px; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.fb-bs .btn { margin-top: auto; align-self: flex-start; } .fb-bs .btn.an { border-color: #1F8A5B; color: #14532D; background: #E5F3EA; }
.fb-preis { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, #FFF6DB, #FFEFC2); margin-bottom: 12px; }
.fb-preis b { font-family: var(--display); font-size: 34px; color: #4A3200; } .fb-preis span { font-size: 13.5px; color: #7A4E12; }
.fb-vorteile { margin: 0 0 14px; padding-left: 20px; line-height: 1.55; }
.fb-up-l { display: block; font-weight: 700; margin-bottom: 4px; } #fb-up-n { width: 100%; margin-bottom: 12px; }
@media (max-width: 900px) { .fb-grid { grid-template-columns: minmax(0, 1fr); } .fb-seite { position: static; } }
@media (max-width: 560px) { .fb-felder { grid-template-columns: minmax(0, 1fr); } .fb-kopf h2 { font-size: 28px; } }

/* ---------- Premium-Unternehmensprofil: anklickbare Kachel + ausführliches Profil ---------- */
.vz-tile.vz-klick { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.vz-tile.vz-klick:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(18,38,58,.14); }
.vz-tile.vz-klick:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.vz-logo.bild { object-fit: contain; padding: 6px; background: #fff; }
.fp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-chip { font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #FFF6DA; color: #6B4A0E; }
.det-logo { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 4px 12px rgba(18,38,58,.12); overflow: hidden; margin: 4px 0 8px; flex: none; }
.det-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.det-logo.ini { background: var(--navy); color: #fff; font-family: var(--display); font-weight: 700; font-size: 24px; border: 0; }
.det-logo[hidden] { display: none; }
.fp { display: grid; gap: 4px; }
.fp-sec { padding-top: 14px; margin-top: 10px; border-top: 1px solid var(--line); }
.fp-sec .org-h { margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.fp-leist { margin: 4px 0 0; }
.fp-kontakt { display: grid; gap: 10px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.fp-kontakt .kontakt { margin: 0; }
.fp-oz { padding: 10px 12px; border-radius: 12px; background: var(--mist); font-size: 14.5px; display: grid; gap: 2px; }
.fp-oz span { white-space: pre-line; }
.fp-blick { display: flex; flex-wrap: wrap; gap: 10px; }
.fp-blick div { padding: 8px 14px; border-radius: 12px; background: var(--mist); display: grid; }
.fp-blick b { font-size: 18px; color: var(--navy); } .fp-blick span { font-size: 12.5px; color: var(--ink-2); }
.fp-socs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.fp-soc { font-size: 14px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; }
.fp-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fp-liste button { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font: inherit; color: inherit; cursor: pointer; }
.fp-liste button:hover { border-color: var(--navy); }
.fp-liste button > span:nth-child(2) { flex: 1; display: grid; gap: 1px; min-width: 0; }
.fp-liste small { color: var(--ink-2); font-size: 13.5px; }
.fp-vort { flex: none; min-width: 54px; text-align: center; padding: 8px 6px; border-radius: 10px; background: var(--red); color: #fff; font-weight: 800; font-size: 14px; }
.fp-vort.job { background: var(--navy); }
.fp-dat { flex: none; width: 50px; text-align: center; border-radius: 10px; background: var(--mist); padding: 4px 0; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--ink-2); display: grid; }
.fp-dat b { font-size: 19px; color: var(--navy); line-height: 1.1; }
.fp-insight { display: flex; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); text-decoration: none; color: inherit; background: #fff; margin-bottom: 8px; align-items: flex-start; }
.fp-insight:hover { border-color: var(--navy); }
.fp-insight img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; flex: none; }
.fp-insight > span:not(.badge-ex) { flex: 1; display: grid; gap: 3px; }
.fp-insight > .badge-ex, .fp-liste .badge-ex { flex: none; align-self: flex-start; }
.fp-insight small { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.fp-insight strong { font-size: 16.5px; color: var(--navy); line-height: 1.25; } .fp-insight > span:not(.badge-ex) > span { font-size: 14px; color: var(--ink-2); }
.fp-insight em { font-style: normal; font-weight: 700; font-size: 14px; color: var(--red); }
.fp-zu { margin: 0; padding: 10px 12px; border-radius: 12px; background: #FFF6DA; font-size: 14.5px; }
@media (max-width: 640px) { .fp-kontakt { grid-template-columns: 1fr; } .fp-insight img { width: 72px; height: 60px; } }

/* Unternehmensbereich: Logo + Premium-Vorschau in zwei Schritten */
.fb-logo { display: flex; gap: 14px; align-items: flex-start; padding: 12px; margin: 0 0 14px; border-radius: 14px; background: #FFFBEE; border: 1px dashed #E9C46A; }
.fb-logo-bild { flex: none; width: 84px; height: 84px; border-radius: 16px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.fb-logo-bild img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.fb-logo-bild span { font-size: 13px; color: #9AA6B2; font-weight: 700; }
.fb-logo .vb-hint { margin: 4px 0 8px; }
.fb-logo-wahl { cursor: pointer; }
.fb-logo-recht { margin: 0 0 8px; font-size: 14px; }
.fb-vs-kachel .vz-tile { pointer-events: none; }
.fb-vs-kachel .vz-tile h4 { font-size: 21px; }
.fb-pv { margin: 22px 0; padding: 20px; border-radius: 20px; background: linear-gradient(180deg, #FFF8E4, #fff 60%); border: 2px solid #F2D27A; }
.fb-pv-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 12px; }
.fb-pv-schritt { position: relative; display: grid; gap: 10px; }
.fb-pv-schritt > h4 { margin: 0 0 0 40px; font-size: 16px; color: var(--navy); line-height: 30px; }
.fb-pv-nr { position: absolute; top: 0; left: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; display: grid; place-items: center; }
.fb-pv-schritt .vz-tile { pointer-events: none; }
.fb-pv-schritt > .btn { justify-self: start; }
.fb-pv-fenster { padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: 0 18px 40px rgba(18,38,58,.16); border: 1px solid var(--line); max-height: 640px; overflow: auto; }
.fb-pv-fenster .fp-liste button, .fb-pv-fenster a { pointer-events: none; }
.fb-pv-kopf { display: flex; gap: 14px; align-items: center; }
.fb-pv-kopf .det-logo { margin: 0; }
.fb-pv-kopf h3 { margin: 2px 0 0; font-family: var(--display); font-size: 26px; line-height: 1.1; color: var(--navy); }
.fb-pv-text { margin: 12px 0 0; font-size: 15.5px; line-height: 1.55; white-space: pre-line; } .fb-pv-text.leer { color: #9AA6B2; font-style: italic; }
.fb-pv-bsp { margin: 14px 0 0; }
@media (max-width: 860px) { .fb-pv-grid { grid-template-columns: 1fr; } .fb-pv { padding: 14px; } }

/* ---------- Mitglied werden / Nachrichten an Vereine ---------- */
.af-arten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.af-art input { position: absolute; opacity: 0; pointer-events: none; }
.af-art span { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border-radius: 14px; border: 2px solid var(--line); background: #fff; font-weight: 700; font-size: 14.5px; text-align: center; cursor: pointer; color: var(--navy); }
.af-art span b { font-size: 22px; }
.af-art input:checked + span { border-color: var(--red); background: #FFF3F4; }
.af-art input:focus-visible + span { outline: 3px solid var(--navy); outline-offset: 2px; }
.af-fuer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0 0 12px; }
.af-fuer > span { font-weight: 700; font-size: 15px; }
.af-fuer .check { margin: 0; }
[data-af-ich][hidden], [data-af-kind][hidden], [data-af-mitglied][hidden] { display: none !important; }
.af-hinweis { font-size: 14px; color: var(--ink-2); margin: 6px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--mist); }
.af-fertig p { font-size: 16px; line-height: 1.55; }
.acc-zahl { display: inline-block; min-width: 20px; padding: 1px 7px; margin-left: 4px; border-radius: 999px; background: var(--red); color: #fff; font-size: 12px; font-weight: 800; text-align: center; }

/* Gesprächsverlauf (Vereinsbereich und Nachrichten-Seite) */
.na-verlauf { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: #F4F7FA; max-height: 460px; overflow: auto; margin: 12px 0; }
.na-msg { display: grid; gap: 3px; max-width: 82%; }
.na-msg.wir { justify-self: end; justify-items: end; }
.na-blase { padding: 10px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--line); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.na-msg.wir .na-blase { background: var(--navy); color: #fff; border-color: var(--navy); border-bottom-right-radius: 4px; }
.na-msg.sie .na-blase { border-bottom-left-radius: 4px; }
.na-msg small { font-size: 12px; color: var(--ink-2); padding: 0 4px; }
.na-antwort, .vb-antwort { display: grid; gap: 8px; }
.na-antwort textarea, .vb-antwort textarea { font: inherit; padding: 10px 12px; border: 1px solid #B9C6D1; border-radius: 12px; resize: vertical; min-height: 80px; width: 100%; box-sizing: border-box; }
.na-antwort .btn { justify-self: end; }
.na-grid, .vb-post { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.na-liste, .vb-post-liste { display: grid; gap: 6px; }
.na-faden, .vb-post-faden, .na-einzeln { padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); min-width: 0; }
.na-einzeln { max-width: 760px; margin: 0 auto; }
.na-link-hinweis { text-align: center; margin-top: 12px; }
.na-kopf, .vb-faden-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.na-kopf h3, .vb-faden-kopf h4 { margin: 2px 0; font-family: var(--display); font-size: 26px; color: var(--navy); line-height: 1.1; }
.na-art { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--red); }
.na-st, .vb-post-st { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--mist); color: var(--ink-2); }
.na-st.neu, .vb-post-st.neu { background: #FFE3E6; color: #8A0F22; } .na-st.offen, .vb-post-st.offen { background: #FFF1C9; color: #6B4A0E; }
.na-st.aufgenommen, .vb-post-st.aufgenommen { background: #E5F3EA; color: #14532D; }
.na-leer, .vb-post-leer { text-align: center; padding: 30px 16px; color: var(--ink-2); }
.na-leer span, .vb-post-leer.gross span { font-size: 40px; display: block; }
.vb-post-eintrag { display: grid; gap: 4px; text-align: left; width: 100%; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: #fff; font: inherit; color: inherit; cursor: pointer; position: relative; }
.vb-post-eintrag:hover { border-color: var(--navy); }
.vb-post-eintrag.an { border: 2px solid var(--navy); padding: 9px 11px; background: #F4F7FA; }
.vb-post-eintrag.neu::before { content: ''; position: absolute; left: -4px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); }
.vb-post-eintrag.neu strong { font-weight: 800; }
.vb-post-z1 { display: flex; justify-content: space-between; gap: 8px; } .vb-post-z1 strong { color: var(--navy); } .vb-post-z1 small { color: var(--ink-2); white-space: nowrap; }
.vb-post-z2 { display: flex; gap: 6px; flex-wrap: wrap; }
.vb-post-art { display: inline-block; font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: #E8EEF6; color: var(--navy); }
.vb-post-art.mitglied { background: #FFE9EC; color: #8A0F22; } .vb-post-art.probetraining { background: #E5F3EA; color: #14532D; }
.vb-post-vs { font-size: 13.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-post-kopf { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 12px; }
.vb-post-kopf h3 { margin: 0 0 4px; }
.vb-post-filter { display: flex; gap: 6px; margin-bottom: 4px; }
.vb-post-filter button { font: inherit; font-size: 14px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.vb-post-filter button[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.vb-schalter { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); cursor: pointer; }
.vb-schalter input { width: 20px; height: 20px; accent-color: var(--red); }
.vb-schalter span { display: grid; } .vb-schalter small { color: var(--ink-2); font-size: 13px; }
.vb-faden-st { display: grid; gap: 2px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.vb-faden-st select { font: inherit; font-size: 14.5px; padding: 6px 10px; border-radius: 10px; border: 1px solid #B9C6D1; }
.vb-faden-daten { margin-top: 10px; padding: 10px 14px; border-radius: 14px; background: #FFFBEE; border: 1px solid #F2E2B0; }
.vb-faden-daten summary { font-weight: 700; cursor: pointer; }
.vb-faden-daten dl { display: grid; gap: 4px; margin: 8px 0; font-size: 14.5px; } .vb-faden-daten dl div { display: flex; gap: 10px; } .vb-faden-daten dt { flex: none; width: 130px; color: var(--ink-2); } .vb-faden-daten dd { margin: 0; overflow-wrap: anywhere; }
.vb-ok-tag { margin: 4px 0 0; font-weight: 700; color: #14532D; }
.vb-loeschen { color: var(--red); margin-left: auto; }
@media (max-width: 760px) { .na-grid, .vb-post { grid-template-columns: 1fr; } .na-msg { max-width: 92%; } .af-arten { grid-template-columns: 1fr 1fr 1fr; } .af-art span { font-size: 13px; padding: 10px 4px; } }

/* ---------- Top-Unterstützer-Badges ---------- */
.ub-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.ub-tag.bronze { background: #F7E3D2; color: #7A3E12; } .ub-tag.silber { background: #E7ECF2; color: #34465C; }
.ub-tag.gold { background: #FFEDB3; color: #6B4A0E; } .ub-tag.platin { background: linear-gradient(90deg, #E9E4FF, #DDF3F7); color: #3A2F7A; }
.vz-group li .ub-tag { font-size: 11px; padding: 1px 7px; margin-left: 4px; }
.ub-medaille { position: relative; display: inline-grid; justify-items: center; width: 74px; height: 92px; flex: none; }
.ub-band { position: absolute; top: 0; left: 50%; width: 34px; height: 30px; transform: translateX(-50%); background: linear-gradient(90deg, var(--red) 0 45%, #fff 45% 55%, var(--red) 55%); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%); }
.ub-rund { position: absolute; bottom: 0; width: 70px; height: 70px; border-radius: 50%; display: grid; place-content: center; text-align: center; line-height: 1; box-shadow: inset 0 0 0 4px rgba(255,255,255,.55), 0 4px 10px rgba(18,38,58,.18); }
.ub-rund b { font-family: var(--display); font-size: 21px; letter-spacing: -.02em; } .ub-rund small { font-size: 11px; font-weight: 800; opacity: .8; margin-top: 1px; }
.ub-medaille.bronze .ub-rund { background: radial-gradient(circle at 35% 30%, #F4C9A0, #C27A3E 70%); color: #4A230A; }
.ub-medaille.silber .ub-rund { background: radial-gradient(circle at 35% 30%, #FFFFFF, #A9B6C4 70%); color: #26364A; }
.ub-medaille.gold .ub-rund { background: radial-gradient(circle at 35% 30%, #FFF1B8, #E2A92B 70%); color: #5A3A05; }
.ub-medaille.platin .ub-rund { background: radial-gradient(circle at 35% 30%, #FFFFFF, #B8A9F0 55%, #7FC8D6 90%); color: #2A2160; }
.ub-medaille.leer .ub-band { background: #D3DAE2; } .ub-medaille.leer .ub-rund { background: #EEF2F5; color: #9AA6B2; box-shadow: inset 0 0 0 2px #D3DAE2; }
.fp-badge { display: flex; gap: 14px; align-items: center; padding: 12px 14px; margin: 10px 0 4px; border-radius: 16px; background: #FFFBEE; border: 1px solid #F2E2B0; }
.fp-badge p { margin: 0; font-size: 14.5px; line-height: 1.45; } .fp-badge p strong { display: block; font-size: 16px; color: var(--navy); }
.fb-ubs { margin: 22px 0; padding: 20px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.fb-ub-stand { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--mist); margin: 12px 0 16px; }
.fb-ub-stand > div:first-child { display: grid; } .fb-ub-stand > div:first-child span { font-size: 13px; color: var(--ink-2); } .fb-ub-stand > div:first-child b { font-family: var(--display); font-size: 30px; color: var(--navy); }
.fb-ub-weg { display: grid; gap: 6px; font-size: 15px; } .fb-ub-weg small { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.fb-ub-bar { display: block; height: 8px; border-radius: 999px; background: #E3E9EE; overflow: hidden; width: 100%; }
.fb-ub-bar.gross { height: 14px; }
.fb-ub-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #E9C46A, var(--red)); transition: width .6s ease; }
.fb-ub-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.fb-ub { display: grid; justify-items: center; gap: 6px; padding: 14px 8px 12px; border-radius: 16px; border: 1px solid var(--line); background: #fff; text-align: center; }
.fb-ub > strong { font-size: 15px; color: var(--navy); } .fb-ub > small { font-size: 12.5px; color: var(--ink-2); font-weight: 700; }
.fb-ub.erreicht { background: #FFFBEE; border-color: #F2D27A; } .fb-ub.erreicht > small { color: #14532D; }
.fb-ub.naechste { border: 2px solid var(--red); padding: 13px 7px 11px; } .fb-ub.naechste > small { color: var(--red); }
.fb-ub.zu { opacity: .75; }
.fb-ub-fuss { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 14px; }
.fb-ub-fuss .vb-check { margin: 0; }
@media (max-width: 860px) { .fb-ub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fb-ub-stand { grid-template-columns: 1fr; gap: 10px; } }

/* Anfragen: Archiv, Zurückziehen, Bearbeiten mit Verlauf, Melden */
.na-sys { justify-self: center; text-align: center; display: grid; gap: 2px; max-width: 90%; }
.na-sys span { font-size: 13.5px; padding: 6px 12px; border-radius: 12px; background: #E8EEF4; color: var(--ink-2); line-height: 1.45; }
.na-sys small { font-size: 11.5px; color: var(--ink-2); }
.na-msg small .linklike { font-size: 12px; } .na-gemeldet { color: #8A0F22; font-weight: 700; }
.na-vers { font-size: 12.5px; color: var(--ink-2); max-width: 100%; }
.na-vers summary { cursor: pointer; font-weight: 700; } .na-vers div { margin: 6px 0 0; padding: 6px 10px; border-left: 3px solid #D3DAE2; background: #fff; border-radius: 0 8px 8px 0; text-align: left; }
.na-vers p { margin: 2px 0 0; text-decoration: line-through; text-decoration-color: rgba(18,38,58,.3); color: var(--ink-2); }
.na-edit { display: grid; gap: 6px; width: min(520px, 80vw); } .na-edit textarea { font: inherit; padding: 10px 12px; border: 2px solid var(--navy); border-radius: 12px; resize: vertical; }
.na-edit-k { display: flex; gap: 6px; justify-content: flex-end; } .na-edit small { text-align: right; }
.na-archiv-band { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 14px; margin-bottom: 12px; border-radius: 14px; background: #EEF2F5; border: 1px dashed #9AA6B2; font-size: 14.5px; }
.na-warn { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 14px; margin: 10px 0; border-radius: 14px; background: #FFF6DA; border: 1px solid #F2D27A; }
.na-warn p { margin: 0; font-size: 14.5px; flex: 1 1 260px; }
.na-werkzeuge { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.na-werkzeuge .na-weg { color: var(--red); }
.na-angaben { margin: 12px 0; padding: 14px 16px; border-radius: 16px; background: #fff; border: 2px solid var(--navy); }
.na-angaben h4 { margin: 0; } .na-angaben .hint { margin: 2px 0 10px; }
.na-st.zurueckgezogen, .vb-post-st.zurueckgezogen { background: #EEF2F5; color: #4A5B70; text-decoration: line-through; }
.na-tabs { margin-bottom: 12px; }
.vb-faden-fuss { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; }

/* ---------- Umbau: Lieblingsorte mit Karte, Hilfebörse / Ehrenamt, Sozialkompass ---------- */
.lo-ansicht { display: inline-flex; gap: 4px; margin-top: 18px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); }
.lo-ansicht button { font: inherit; font-weight: 800; font-size: 16px; padding: 10px 20px; border-radius: 999px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.lo-ansicht button[aria-selected="true"] { background: #fff; color: var(--navy); box-shadow: 0 4px 12px rgba(18,38,58,.18); }
.lo-ansicht button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lo-karte-tipp { text-align: center; margin: 22px 0 0; }
.map-ebenen-hinweis { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: #FFF6DA; font-size: 14.5px; }
#map-filter button[aria-pressed="false"] { opacity: .78; }
#map-filter button[aria-pressed="true"] { opacity: 1; }
.ea-zu-orgs { display: flex; gap: 14px; align-items: center; margin: 26px 0 0; padding: 16px 18px; border-radius: 18px; background: #fff; border: 2px solid var(--line); text-decoration: none; color: inherit; transition: border-color .15s; }
.ea-zu-orgs:hover { border-color: var(--navy); }
.ea-zu-orgs > span:first-child { font-size: 30px; } .ea-zu-orgs > span:nth-child(2) { flex: 1; display: grid; gap: 2px; font-size: 15px; color: var(--ink-2); }
.ea-zu-orgs strong { font-size: 17px; color: var(--navy); } .ea-zu-orgs b { font-size: 22px; color: var(--red); }
.eh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.eh-chips button { font: inherit; font-weight: 700; font-size: 15px; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--line); background: #fff; color: var(--navy); cursor: pointer; }
.eh-chips button small { font-weight: 800; color: var(--ink-2); margin-left: 3px; }
.eh-chips button[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); } .eh-chips button[aria-pressed="true"] small { color: #fff; }
.eh-chips button:disabled { opacity: .45; cursor: default; }
.km-gruppe { grid-column: 1 / -1; margin: 10px 0 0; font-size: 18px; color: var(--navy); display: flex; align-items: baseline; gap: 8px; }
.km-gruppe small { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.km-gruppe.freizeit { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.km-guide.g-sozial { border-color: #CFE3D6; background: #F4FAF6; }

/* ---------- Kalender: Terminliste links, Monatskalender und Anzeige rechts ---------- */
body[data-seite="kalender"] .cal-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
body[data-seite="kalender"] .cal-grid > .cal-side { order: 2; position: sticky; top: 90px; }
@media (max-width: 860px) { body[data-seite="kalender"] .cal-grid { grid-template-columns: minmax(0, 1fr); } body[data-seite="kalender"] .cal-grid > .cal-side { position: static; } }

/* ---------- Aufklappende Fenster: am PC deutlich breiter, am Handy bildschirmfüllend ---------- */
dialog.lo-detail { width: min(1120px, calc(100% - 64px)); max-height: calc(100% - 48px); }
dialog.sheet { width: min(860px, calc(100% - 48px)); }
dialog.sheet.small { width: min(580px, calc(100% - 48px)); }
@media (min-width: 900px) {
  dialog.lo-detail .tx { padding: 26px 36px 30px; }
  .lo-detail .org-aemter { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .lo-detail .org-karten { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .lo-detail .fp-liste { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
@media (max-width: 640px) {
  dialog.lo-detail, dialog.sheet, dialog.sheet.small { width: 100%; max-width: 100%; height: 100%; height: 100dvh; max-height: 100%; max-height: 100dvh; margin: 0; border-radius: 0; }
  dialog.sheet form { max-height: 100vh; max-height: 100dvh; height: 100%; }
  dialog.lo-detail .tx { padding: 18px 16px 28px; }
  dialog.lo-detail h3 { font-size: 32px; }
  .lo-detail .close { position: fixed; top: max(10px, env(safe-area-inset-top)); right: 10px; box-shadow: 0 2px 10px rgba(18,38,58,.25); }
}
@media (max-width: 640px) {
  dialog.sheet[open] { display: flex; flex-direction: column; }
  dialog.sheet[open] > form { flex: 1; min-height: 0; }
  dialog.sheet[open] .sheet-body { flex: 1; min-height: 0; align-content: start; }
}

/* ---------- Hilfebörse: schlanke, aufklappbare Gesuche ---------- */
.ea-karten:has(> .ea-schlank) { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; gap: 8px; overflow: visible; margin-right: 0; padding: 0; scroll-snap-type: none; }
@media (min-width: 900px) { .ea-karten:has(> .ea-schlank) { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.ea-schlank { border-radius: 14px; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--line); padding: 0; box-shadow: none; }
.ea-schlank.e-einmalig { border-left-color: var(--red); } .ea-schlank.e-regelmaessig { border-left-color: #2E7DAF; } .ea-schlank.e-dauerhaft { border-left-color: var(--navy); }
.ea-schlank > summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 14px; cursor: pointer; }
.ea-schlank > summary::-webkit-details-marker { display: none; }
.ea-schlank > summary:hover { background: #F7F9FB; border-radius: 0 14px 14px 0; }
.ea-schlank .ea-art { white-space: nowrap; font-size: 11px; }
.ea-s-titel strong { font-size: 16.5px; color: var(--navy); line-height: 1.3; }
.ea-s-titel .badge-ex, .ea-s-titel .fit-s, .done-s { font-size: 11px; vertical-align: 1px; }
.done-s { font-weight: 800; color: #14532D; }
.ea-schlank[open] .ea-chev { transform: rotate(-135deg); }
.ea-s-mehr { padding: 0 16px 14px; display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.ea-s-mehr p { margin: 0; font-size: 15px; } .ea-s-mehr .ea-k-zeit { color: var(--ink-2); font-size: 14px; }
.ea-s-mehr .act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 640px) { .ea-schlank > summary { grid-template-columns: minmax(0, 1fr) auto; } .ea-schlank .ea-art { grid-column: 1; justify-self: start; } .ea-s-titel { grid-column: 1; } .ea-schlank .ea-chev { grid-row: 1 / span 2; grid-column: 2; } }

/* ---------- Detail-Fenster: Bild oben mittig, Wappen/Logo unten rechts, Platzhalter, Teilen abgesetzt ---------- */
.lo-detail .ph img { margin: 0 auto; max-height: min(460px, 60vh); }
@media (max-width: 640px) { .lo-detail .ph img { max-height: 42vh; } }
.lo-detail .ph.platzhalter { display: block; height: 200px; background: linear-gradient(135deg, #16283A 0%, #24425E 55%, #2F5677 100%); }
.lo-detail .ph.platzhalter::before { content: ''; position: absolute; inset: 0; filter: none; transform: none; opacity: .12; background: url("../img/logo/sh-insider-bildmarke-rund-dunkel.svg") center / 120px no-repeat, repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 22px); }
.lo-detail .ph.platzhalter img { display: none; }
@media (max-width: 640px) { .lo-detail .ph.platzhalter { height: 150px; } }
.ph-logo { position: absolute; right: 16px; bottom: 16px; z-index: 3; width: 92px; height: 92px; border-radius: 18px; background: #fff; display: grid; place-items: center; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.28); border: 3px solid #fff; }
.ph-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; max-height: none !important; cursor: default !important; }
.ph-logo.ini { background: var(--navy); color: #fff; font-family: var(--display); font-weight: 700; font-size: 30px; border-color: rgba(255,255,255,.85); }
.ph-logo[hidden] { display: none; }
@media (max-width: 640px) { .ph-logo { width: 68px; height: 68px; right: 12px; bottom: 12px; border-radius: 14px; } .ph-logo.ini { font-size: 22px; } }
/* langer Beschreibungstext: gekürzt, aufklappbar */
#lo-d-text.lang { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
#lo-d-text.lang.auf { display: block; -webkit-line-clamp: unset; }
.d-weiter { align-self: flex-start; font-weight: 700; font-size: 15px; margin-top: -2px; }
/* Steckbrief: Bezeichnung und Wert sauber nebeneinander, auf breiten Fenstern zweispaltig */
.lo-detail .kontakt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 28px; margin: 10px 0 0; }
.lo-detail .kontakt > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid #EEF2F5; }
.lo-detail .kontakt dt { margin: 0; } .lo-detail .kontakt dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 900px) { .lo-detail .kontakt.steckbrief { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lo-detail .kontakt > div { grid-template-columns: 112px minmax(0, 1fr); } }
/* Nächste Termine: eigener, hervorgehobener Kasten */
.org-termine { margin: 16px 0 6px; padding: 14px 16px 12px; border-radius: 16px; background: #F1F6FB; border: 1px solid #CFE0EE; border-left: 5px solid var(--red); }
.org-termine .org-h { margin: 0 0 10px; }
.org-termine ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 900px) { .org-termine ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.org-termine li button { width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 12px; border: 1px solid #DCE6EF; background: #fff; font: inherit; color: inherit; cursor: pointer; }
.org-termine li button:hover { border-color: var(--navy); }
.ot-dat { flex: none; width: 52px; display: grid; justify-items: center; line-height: 1.05; padding: 5px 0; border-radius: 10px; background: var(--navy); color: #fff; }
.ot-dat small { font-size: 11px; font-weight: 700; text-transform: uppercase; opacity: .85; } .ot-dat b { font-family: var(--display); font-size: 22px; }
.ot-tx { display: grid; gap: 1px; min-width: 0; } .ot-tx strong { font-size: 15.5px; color: var(--navy); } .ot-tx > span { font-size: 13.5px; color: var(--ink-2); }
.org-termine li.abgesagt .ot-dat { background: #9AA6B2; } .org-termine li.abgesagt .ot-tx strong { text-decoration: line-through; }
.ot-absage { font-size: 13px; color: #8A0F22; }
.ot-alle { display: inline-block; margin-top: 10px; font-weight: 700; font-size: 14.5px; }
/* Teilen: klar abgesetzt – teilt die Seite, gehört nicht zu den Vereinsangaben */
.d-teilen { margin-top: 22px; padding: 14px 16px 16px; border-radius: 16px; background: #F4F7FA; border: 2px dashed #C9D4DE; }
.d-teilen-kopf { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.d-teilen-ic { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; }
.d-teilen-ic svg { width: 20px; height: 20px; }
.d-teilen-kopf strong { display: block; font-size: 16px; color: var(--navy); } .d-teilen-kopf small { font-size: 13.5px; color: var(--ink-2); }
.d-teilen .share { margin: 0; border: 0; padding: 0; }
#lo-d-share > .melden-link { margin-top: 12px; }

/* ---------- Hilfebörse: Reiter „Hilfe gesucht“ / „Hilfe angeboten“ ---------- */
.hb-tabs { display: flex; gap: 8px; margin: 0 0 18px; padding: 6px; border-radius: 18px; background: #fff; border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.hb-tabs button { font: inherit; font-weight: 800; font-size: 17px; padding: 11px 20px; border-radius: 13px; border: 0; background: transparent; color: var(--navy); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.hb-tabs button small { font-size: 12.5px; font-weight: 800; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--mist); color: var(--ink-2); }
.hb-tabs button[aria-selected="true"] { background: var(--navy); color: #fff; }
.hb-tabs button[aria-selected="true"] small { background: rgba(255,255,255,.2); color: #fff; }
.hb-tabs button[data-hb="angebote"][aria-selected="true"] { background: #1F7A4D; }
@media (max-width: 640px) { .hb-tabs { width: 100%; } .hb-tabs button { flex: 1; justify-content: center; font-size: 15px; padding: 10px 8px; } }
.hb-arten { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }
.hb-arten button { font: inherit; font-weight: 700; font-size: 14.5px; padding: 7px 13px; border-radius: 999px; border: 2px solid var(--line); background: #fff; color: var(--navy); cursor: pointer; }
.hb-arten button small { color: var(--ink-2); font-weight: 800; margin-left: 2px; }
.hb-arten button[aria-pressed="true"] { background: #1F7A4D; border-color: #1F7A4D; color: #fff; } .hb-arten button[aria-pressed="true"] small { color: #fff; }
.hb-k { border-left-color: #1F7A4D !important; }
.hb-art { background: #E5F3EA !important; color: #14532D !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12.5px !important; }
.hb-firma-z { display: block; font-size: 13px; color: var(--ink-2); font-weight: 600; margin-top: 2px; }
.hb-dl { display: grid; gap: 4px; margin: 0; font-size: 14.5px; } .hb-dl div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; } .hb-dl dt { color: var(--ink-2); font-weight: 700; } .hb-dl dd { margin: 0; }
.ea-zu-orgs.hb-firma { border-color: #CFE3D6; background: #F4FAF6; }
.fp-vort.hb { background: #1F7A4D; font-size: 18px; } .fp-hilfe { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; text-decoration: none; color: inherit; } .fp-hilfe > span:nth-child(2) { display: grid; gap: 1px; } .fp-hilfe small { color: var(--ink-2); font-size: 13.5px; }
/* Unternehmensbereich: Hilfsangebote eintragen */
.fb-hilfe { margin: 22px 0; padding: 20px; border-radius: 20px; background: #F4FAF6; border: 2px solid #CFE3D6; }
.fb-hilfe-leer { margin: 6px 0 12px; color: var(--ink-2); font-style: italic; }
.fb-hk { margin: 12px 0; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); border-left: 5px solid #1F7A4D; }
.fb-hk.aus { border-left-color: #9AA6B2; opacity: .85; }
.fb-hk-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.fb-hk-ic { font-size: 22px; } .fb-hk-kopf strong { flex: 1; font-size: 16px; color: var(--navy); min-width: 160px; }
.fb-hk-an { display: flex; gap: 6px; align-items: center; font-size: 14px; font-weight: 700; } .fb-hk-an input { width: 18px; height: 18px; accent-color: #1F7A4D; }
.fb-hk-weg { color: var(--red); font-size: 14px; }
.fb-hk-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.fb-hk-felder label { display: grid; gap: 4px; font-size: 14px; font-weight: 700; color: var(--navy); }
.fb-hk-felder label.breit { grid-column: 1 / -1; }
.fb-hk-felder input, .fb-hk-felder select, .fb-hk-felder textarea { font: inherit; font-weight: 400; font-size: 15px; padding: 9px 11px; border: 1px solid #B9C6D1; border-radius: 10px; width: 100%; box-sizing: border-box; }
.fb-hk-felder [hidden] { display: none; }
@media (max-width: 640px) { .fb-hk-felder { grid-template-columns: 1fr; } }

/* ---------- Badge „Insider der ersten Stunde“ ---------- */
.gr-tag { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 9px 2px 3px; border-radius: 999px; background: linear-gradient(90deg, #FFF3CC, #FFE6A0); border: 1px solid #E9C46A; color: #6B4A0E; font-size: 12.5px; font-weight: 800; vertical-align: middle; white-space: nowrap; line-height: 1.4; }
.gr-tag svg { width: 20px; height: 20px; flex: none; }
.gr-tag.klein { font-size: 11px; padding: 1px 7px 1px 2px; } .gr-tag.klein svg { width: 16px; height: 16px; }
.gr-karte { display: flex; gap: 16px; align-items: center; margin: 16px 0; padding: 16px 18px; border-radius: 18px; background: linear-gradient(135deg, #FFF8E1, #FFEFC2); border: 2px solid #E9C46A; }
.gr-karte .gr-medaille svg { width: 76px; height: 76px; display: block; filter: drop-shadow(0 4px 8px rgba(140,94,16,.25)); }
.gr-karte > div { display: grid; gap: 2px; }
.gr-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8C5E10; }
.gr-karte strong { font-family: var(--display); font-size: 24px; color: var(--navy); line-height: 1.1; }
.gr-karte p { margin: 2px 0 0; font-size: 15px; } .gr-karte small { font-size: 12.5px; color: #6B4A0E; font-weight: 700; }
.gr-werbung { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 14px; background: #FFF6DA; border: 1px solid #E9C46A; }
.gr-werbung p { margin: 0; font-size: 14.5px; } .gr-medaille.klein svg { width: 44px; height: 44px; display: block; }
@media (max-width: 640px) { .gr-karte { gap: 12px; padding: 14px; } .gr-karte .gr-medaille svg { width: 58px; height: 58px; } .gr-karte strong { font-size: 20px; } }

/* Lieblingsorte: Fenster passt sich dem Foto an (Breite per JS), Foto füllt den Rahmen ohne Ränder */
dialog.lo-detail.foto-rahmen { transition: width .2s ease; }
@media (min-width: 641px) {
  dialog.lo-detail.foto-rahmen .ph img { width: 100%; height: var(--foto-h, auto); max-height: none; object-fit: contain; }
  dialog.lo-detail.foto-rahmen .tx { padding: 22px 28px 26px; }
}

/* ---------- Creator / Influencer ---------- */
.rolle-tag.r-creator { background: #FCE8F3; color: #8A1F5C; }
.cr-pl { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--pl, var(--navy)); color: #fff; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .3px; }
.cr-offen { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: var(--green-soft); color: #154A28; font-size: 13px; font-weight: 700; }
.cr-zu { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--mist); color: var(--ink-2); font-size: 13px; font-weight: 700; }
/* Karte in der Übersicht */
.cr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.cr-karte { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; color: var(--navy); text-decoration: none; box-shadow: 0 6px 18px rgba(18,38,58,.06); transition: transform .15s, box-shadow .15s; }
.cr-karte:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(18,38,58,.12); }
.cr-k-titel { height: 96px; background: linear-gradient(135deg, #12263A, #2F5677 60%, #B0102A) center / cover; }
.cr-k-bild { width: 84px; height: 84px; margin: -42px 0 0 18px; border-radius: 50%; border: 4px solid #fff; background: var(--navy); color: #fff; display: grid; place-items: center; overflow: hidden; font-family: var(--display); font-weight: 700; font-size: 30px; box-shadow: 0 6px 16px rgba(18,38,58,.2); }
.cr-k-bild img { width: 100%; height: 100%; object-fit: cover; }
.cr-k-tx { display: flex; flex-direction: column; gap: 2px; padding: 8px 18px 0; }
.cr-k-tx strong { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.05; }
.cr-k-tx .gr-tag { align-self: flex-start; margin: 4px 0; }
.cr-k-tx small { color: var(--ink-2); font-size: 15px; line-height: 1.35; }
.cr-k-kan { display: flex; flex-wrap: wrap; gap: 10px 14px; padding: 12px 18px 0; font-weight: 700; font-size: 15px; }
.cr-k-kan > span { display: inline-flex; align-items: center; gap: 6px; }
.cr-k-kan .cr-pl { width: 24px; height: 24px; border-radius: 7px; font-size: 12px; }
.cr-k-themen { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px 0; }
.cr-k-themen em { font-style: normal; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--mist); }
.cr-k-fuss { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 18px 16px; color: var(--ink-2); font-size: 15px; }
.cr-k-fuss b { color: var(--navy); font-size: 17px; }
.cr-mein { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 22px; margin: 0 0 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.cr-mein p { margin: 4px 0 0; color: var(--ink-2); max-width: 680px; }
.cr-mein.cr-werben { background: linear-gradient(135deg, #FFF6DA, #FCE8F3); border-color: #F0D4A0; }
.cr-filter { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin: 0 0 12px; }
.cr-suche { flex: 1 1 320px; min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; font: inherit; background: #fff; }
.cr-themen-f { margin: 0 0 20px; }
.cr-themen-f small { opacity: .65; font-weight: 600; }
.cr-leer { text-align: center; padding: 48px 20px; background: #fff; border: 1px dashed var(--line); border-radius: 18px; }
.cr-leer span { font-size: 44px; } .cr-leer h3 { font-family: var(--display); font-size: 30px; margin: 8px 0 4px; } .cr-leer p { margin: 0; color: var(--ink-2); }
/* Öffentliches Creator-Profil */
.cr-profil { margin: 0 0 30px; }
.cr-cover { height: clamp(150px, 26vw, 280px); border-radius: 20px; background: linear-gradient(135deg, #12263A, #2F5677 55%, #B0102A) center / cover; }
.cr-kopf { display: grid; grid-template-columns: auto 1fr auto; gap: 18px 22px; align-items: end; padding: 0 8px; margin-top: -64px; }
.cr-bild { width: 148px; height: 148px; border-radius: 50%; border: 6px solid #fff; background: var(--navy); color: #fff; display: grid; place-items: center; overflow: hidden; font-family: var(--display); font-weight: 700; font-size: 52px; box-shadow: 0 10px 26px rgba(18,38,58,.22); }
.cr-bild img { width: 100%; height: 100%; object-fit: cover; }
.cr-kopf-tx { padding-top: 78px; }
.cr-profil .pp-h { margin-top: 30px; }
.cr-kopf-tx h1 { margin: 2px 0 4px; font-family: var(--display); font-weight: 700; font-size: clamp(38px, 6vw, 60px); line-height: .95; }
.cr-tagline { margin: 0 0 8px; font-size: 19px; color: var(--ink-2); }
.cr-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0; font-weight: 600; }
.cr-aktion { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding-bottom: 6px; }
.cr-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 24px 0 6px; }
.cr-zahlen > div { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; }
.cr-zahlen b { display: block; font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1; }
.cr-zahlen small { color: var(--ink-2); font-size: 14px; font-weight: 600; }
.cr-kanaele { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 10px; }
.cr-kanal { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; color: var(--navy); text-decoration: none; }
a.cr-kanal:hover { border-color: var(--navy); }
.cr-kanal .cr-pl { width: 42px; height: 42px; border-radius: 12px; font-size: 18px; }
.cr-kan-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; } .cr-kan-tx small { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-kan-z { text-align: right; } .cr-kan-z b { display: block; font-family: var(--display); font-size: 24px; line-height: 1; } .cr-kan-z small { color: var(--ink-2); font-size: 12px; }
.cr-ueber { white-space: pre-line; }
.cr-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 28px; }
.cr-highlights { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.cr-highlights a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: var(--navy); font-weight: 700; text-decoration: none; }
.cr-highlights a span { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--red); color: #fff; font-size: 13px; }
.cr-koop { margin: 26px 0 0; padding: 20px 22px; border-radius: 18px; background: linear-gradient(135deg, #FFF8E6, #FFFFFF); border: 1px solid #F0D9A6; }
.cr-koop p { margin: 8px 0; }
.cr-koop dl { margin: 10px 0 14px; display: grid; gap: 6px; }
.cr-koop dl > div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; } .cr-koop dt { font-weight: 700; } .cr-koop dd { margin: 0; }
.cr-l { margin: 14px 0 6px; font-weight: 700; font-size: 15px; } .cr-l small { font-weight: 600; color: var(--ink-2); }
.cr-stand { margin-top: 10px; font-size: 13px; }
@media (max-width: 760px) {
  .cr-kopf { grid-template-columns: 1fr; margin-top: -60px; padding: 0; }
  .cr-bild { width: 116px; height: 116px; font-size: 40px; }
  .cr-kopf-tx { padding-top: 0; }
  .cr-aktion { justify-content: flex-start; }
  .cr-koop dl > div { grid-template-columns: 1fr; gap: 0; }
}
/* Editor */
.cr-zurueck { margin: 0 0 14px; }
.cr-editor { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.cr-vorschau { position: sticky; top: calc(var(--header-h) + 12px); }
.cr-vorschau .cr-karte { pointer-events: none; }
.cr-sek { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; margin: 0 0 16px; }
.cr-sek h2 { margin: 0 0 10px; font-family: var(--display); font-weight: 700; font-size: 26px; }
.cr-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.cr-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cr-bildbox { display: flex; gap: 14px; align-items: center; }
.cr-bildbox p { margin: 2px 0 8px; }
.cr-bb-vorschau { flex: none; display: grid; place-items: center; overflow: hidden; background: var(--mist) center / cover; color: var(--ink-2); font-weight: 700; font-size: 13px; text-align: center; }
.cr-bb-bild .cr-bb-vorschau { width: 84px; height: 84px; border-radius: 50%; background-color: var(--navy); color: #fff; font-family: var(--display); font-size: 28px; }
.cr-bb-bild .cr-bb-vorschau img { width: 100%; height: 100%; object-fit: cover; }
.cr-bb-titel .cr-bb-vorschau { width: 130px; height: 74px; border-radius: 12px; }
.cr-datei { cursor: pointer; }
.cr-rechte { margin-top: 12px; font-size: 15px; }
.cr-kan-zeile, .cr-hl-zeile { display: grid; grid-template-columns: 160px minmax(0, 1fr) 140px 40px; gap: 8px; margin: 0 0 8px; }
.cr-hl-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; }
.cr-kan-zeile select, .cr-kan-zeile input, .cr-hl-zeile input { min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fff; min-width: 0; }
.cr-x { border: 0; background: var(--mist); border-radius: 10px; font-size: 22px; cursor: pointer; color: var(--navy); }
.cr-x:hover { background: var(--red-soft); color: var(--red); }
.cr-wahl { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.cr-wahl button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--navy); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.cr-wahl button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.schalter { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 16px; }
.schalter input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--red); flex: none; }
.cr-sicht { background: #F6FAF7; border-color: #CFE3D5; }
.cr-speichern { position: sticky; bottom: 0; display: flex; gap: 14px; align-items: center; padding: 14px 0; background: linear-gradient(transparent, var(--mist) 35%); }
.cr-msg { font-weight: 600; color: var(--green); } .cr-msg.bad { color: var(--red); }
.cr-sek .err:not(:empty), [data-f-err]:not(:empty) { display: block; color: var(--red); font-weight: 600; margin-top: 6px; }
@media (max-width: 900px) {
  .cr-editor { grid-template-columns: 1fr; }
  .cr-vorschau { position: static; order: -1; }
  .cr-2, .cr-bilder { grid-template-columns: 1fr; }
  .cr-kan-zeile { grid-template-columns: 1fr 1fr 40px; } .cr-kan-zeile .k-handle { grid-column: 1 / -1; grid-row: 1; }
  .cr-hl-zeile { grid-template-columns: 1fr 40px; } .cr-hl-zeile .h-url { grid-column: 1; }
}

/* ---------- Teamseite ---------- */
.tm-bereich { margin: 0 0 34px; }
.tm-h { font-family: var(--display); font-weight: 700; font-size: 34px; margin: 0 0 14px; display: flex; align-items: center; gap: 14px; }
.tm-h::after { content: ''; flex: 1; height: 2px; background: var(--line); }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.tm-grid.tm-gross { grid-template-columns: repeat(auto-fill, minmax(260px, 340px)); }
.tm-karte { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; cursor: pointer; font: inherit; color: var(--navy); box-shadow: 0 6px 18px rgba(18,38,58,.06); transition: transform .15s, box-shadow .15s; }
.tm-karte:hover, .tm-karte:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(18,38,58,.14); }
.tm-foto { display: block; aspect-ratio: 4 / 5; background: linear-gradient(135deg, #16283A, #2F5677); overflow: hidden; }
.tm-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.tm-karte:hover .tm-foto img { transform: scale(1.03); }
.tm-foto > span { width: 100%; height: 100%; display: grid; place-items: center; color: #fff; font-family: var(--display); font-weight: 700; font-size: 64px; opacity: .9; }
.tm-tx { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 16px; flex: 1; }
.tm-tx strong { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.05; }
.tm-tx em { font-style: normal; font-weight: 700; color: var(--red); font-size: 15px; }
.tm-tx small { color: var(--ink-2); font-size: 15px; line-height: 1.4; margin-top: 4px; }
.tm-mehr { margin-top: auto; padding-top: 10px; font-weight: 700; font-size: 14px; color: var(--navy); opacity: .7; }
.tm-karte:hover .tm-mehr { opacity: 1; text-decoration: underline; }
.tm-leer { text-align: center; padding: 56px 20px; background: #fff; border: 1px dashed var(--line); border-radius: 18px; }
.tm-leer span { font-size: 46px; } .tm-leer h2 { font-family: var(--display); font-size: 32px; margin: 8px 0 4px; } .tm-leer p { margin: 0; color: var(--ink-2); }
@media (max-width: 560px) { .tm-grid, .tm-grid.tm-gross { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .tm-tx strong { font-size: 21px; } .tm-tx small { display: none; } }

/* ---------- Sozialkompass 2 (Entwurf) ---------- */
.rolle-tag.r-beratung { background: #E6F4F1; color: #0F5446; }
.sk-notfall { background: #8E0C22; color: #fff; font-size: 15px; }
.sk-notfall .wrap { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding-top: 10px; padding-bottom: 10px; }
.sk-notfall a { color: #fff; text-decoration: none; white-space: nowrap; } .sk-notfall a b { font-size: 17px; margin-right: 4px; } .sk-notfall a:hover { text-decoration: underline; }
.sk-entwurf { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: #FFF6DA; border: 1px solid #F0D9A6; font-size: 15px; }
.sk-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.sk-tabs a { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--navy); color: var(--navy); font-weight: 700; text-decoration: none; background: #fff; }
.sk-tabs a.on { background: var(--navy); color: #fff; }
.sk-tabs span { display: inline-block; min-width: 22px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--red); color: #fff; font-size: 13px; text-align: center; }
.sk-suche input, .sk-ber-suche { width: 100%; min-height: 54px; padding: 0 18px; border: 2px solid var(--navy); border-radius: 14px; font: inherit; font-size: 18px; background: #fff; }
.sk-h { font-family: var(--display); font-weight: 700; font-size: 32px; margin: 26px 0 12px; }
.sk-h3 { font-family: var(--display); font-weight: 700; font-size: 26px; margin: 26px 0 10px; } .sk-h3 small { font-size: 16px; color: var(--ink-2); }
.sk-h4 { font-size: 16px; margin: 16px 0 8px; }
.sk-text { color: var(--ink-2); margin: -4px 0 14px; max-width: 760px; }
.sk-nix { padding: 18px; background: #fff; border: 1px dashed var(--line); border-radius: 14px; }
.sk-rubriken { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.sk-rubrik { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); color: var(--navy); text-decoration: none; transition: transform .12s, box-shadow .12s; }
.sk-rubrik:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(18,38,58,.1); border-color: var(--navy); }
.sk-rubrik > span { font-size: 30px; } .sk-rubrik strong { font-size: 19px; } .sk-rubrik small { color: var(--ink-2); font-size: 15px; } .sk-rubrik em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--red); margin-top: 4px; }
.sk-listen { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.sk-liste-karte { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(135deg, #F2F8F6, #fff); border: 1px solid #CFE3DC; }
.sk-liste-karte.sk-alt { background: linear-gradient(135deg, #FFF7EC, #fff); border-color: #F0D4A6; }
.sk-lk-link { display: flex; flex-direction: column; gap: 3px; color: var(--navy); text-decoration: none; }
.sk-lk-link strong { font-family: var(--display); font-size: 24px; line-height: 1.05; } .sk-lk-link:hover strong { text-decoration: underline; }
.sk-lk-kicker { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #0F5446; }
.sk-lk-meta { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.sk-pruef { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #FBE3C2; color: #7A4100; }
.sk-stellen { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.sk-stelle { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.sk-stelle.sk-bund { border-left: 4px solid var(--red); }
.sk-st-kopf { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.sk-st-kopf strong { display: block; font-size: 18px; line-height: 1.25; } .sk-st-kopf small { color: var(--ink-2); font-size: 14px; }
.sk-stelle p { margin: 0; }
.sk-bsp { flex: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 8px; border-radius: 999px; background: var(--mist); color: var(--ink-2); }
.sk-merkmale { display: flex; flex-wrap: wrap; gap: 6px; } .sk-merkmale span { font-size: 13px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #EEF6F2; color: #154A28; } .sk-merkmale .sk-spr { background: #EEF2FA; color: #1D4F80; }
.sk-fakten { margin: 0; display: grid; gap: 3px; font-size: 15px; } .sk-fakten > div { display: grid; grid-template-columns: 92px 1fr; gap: 8px; } .sk-fakten dt { font-weight: 700; color: var(--ink-2); } .sk-fakten dd { margin: 0; }
.sk-st-acts, .sk-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; }
.sk-zurueck { margin: 0 0 10px; font-weight: 700; }
.sk-r-kopf { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.sk-r-kopf > span { font-size: 46px; line-height: 1; } .sk-r-kopf h2 { font-family: var(--display); font-size: 38px; margin: 0 0 6px; } .sk-r-kopf p { margin: 0; max-width: 760px; font-size: 17px; }
.sk-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.sk-f-lbl { font-weight: 700; } .sk-filter button, .sk-ber-rub button, .sk-sprachen button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--navy); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.sk-filter button[aria-pressed="true"], .sk-ber-rub button[aria-pressed="true"], .sk-sprachen button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.sk-filter select { min-height: 40px; border-radius: 999px; border: 1px solid var(--line); padding: 0 12px; font: inherit; background: #fff; }
.sk-themenliste { padding: 22px 24px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.sk-themenliste h2 { font-family: var(--display); font-size: 40px; margin: 4px 0 6px; } .sk-themenliste header p { margin: 0; font-size: 18px; color: var(--ink-2); }
.sk-herausgeber { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 12px; font-size: 15px; }
.sk-stand { font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #E3F1E7; color: #154A28; } .sk-stand.alt { background: #FBE3C2; color: #7A4100; }
.sk-warn { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: #FFF4E5; color: #7A4100; font-weight: 600; }
.sk-schritte { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 4px; }
.sk-schritte li { display: grid; grid-template-columns: 46px 1fr; gap: 14px; position: relative; padding-bottom: 16px; }
.sk-schritte li:not(:last-child)::before { content: ''; position: absolute; left: 22px; top: 46px; bottom: 0; width: 2px; background: #CFE3DC; }
.sk-nr { width: 46px; height: 46px; border-radius: 50%; background: #0F5446; color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 24px; }
.sk-wort { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #0F5446; } .sk-schritte h3 { margin: 2px 0 4px; font-size: 20px; } .sk-schritte p { margin: 0; }
.sk-mini { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .sk-mini span { font-size: 14px; padding: 5px 10px; border-radius: 10px; background: var(--mist); }
.sk-unterlagen { padding: 16px 18px; border-radius: 14px; background: #F6FAF8; border: 1px solid #CFE3DC; } .sk-unterlagen h3 { margin: 0 0 8px; } .sk-unterlagen ul { list-style: none; margin: 0; padding: 0; columns: 2 260px; } .sk-unterlagen li { padding: 3px 0; break-inside: avoid; } .sk-unterlagen input { width: 18px; height: 18px; vertical-align: -3px; accent-color: #0F5446; }
.sk-netz { font-size: 15px; color: var(--ink-2); }
.sk-box { padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.sk-sprachen { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.sk-leer { text-align: center; } .sk-leer > span { font-size: 44px; }
/* Beratung */
.sk-ber-hinweis { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: #E6F4F1; border: 1px solid #BFDCD3; font-size: 15px; }
.sk-ok { font-weight: 700; color: #154A28; } .sk-info { color: var(--ink-2); }
.sk-ber { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 20px; align-items: start; }
.sk-ber-links, .sk-ber-rechts { padding: 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.sk-ber-rechts { position: sticky; top: calc(var(--header-h) + 10px); max-height: calc(100vh - var(--header-h) - 20px); overflow: auto; border: 2px solid #0F5446; }
.sk-ber-suche { min-height: 46px; font-size: 16px; border-width: 1px; }
.sk-ber-rub { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; } .sk-ber-rub button { min-height: 34px; font-size: 13px; padding: 0 10px; }
.sk-listen.kompakt, .sk-stellen.kompakt { grid-template-columns: 1fr; }
.kompakt .sk-stelle .sk-fakten, .kompakt .sk-stelle > p:not(.sk-merkmale) { display: none; }
.kompakt .sk-liste-karte { flex-direction: row; justify-content: space-between; align-items: center; } .kompakt .sk-lk-link strong { font-size: 20px; } .kompakt .sk-lk-link small { display: none; }
.sk-zf { margin: 0 0 14px; } .sk-zf > label { display: block; font-weight: 700; margin: 0 0 6px; }
.sk-zf textarea, .sk-zeile input, .sk-termin input, .sk-link-box select { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.sk-zeile, .sk-termin { display: flex; gap: 6px; margin: 0 0 6px; } .sk-termin { flex-wrap: wrap; } .sk-termin input[type=date] { flex: 1 1 140px; } .sk-termin input[type=time] { flex: 0 1 110px; } .sk-termin input[type=text] { flex: 1 1 100%; }
.sk-termin { padding: 8px; border-radius: 10px; background: var(--mist); position: relative; } .sk-termin .sk-x { position: absolute; top: 8px; right: 8px; }
.sk-x { flex: none; width: 40px; min-height: 40px; border: 0; border-radius: 10px; background: var(--mist); font-size: 20px; cursor: pointer; } .sk-x:hover { background: var(--red-soft); color: var(--red); }
.sk-chips { display: flex; flex-wrap: wrap; gap: 6px; } .sk-chips span { display: inline-flex; gap: 6px; align-items: center; padding: 4px 6px 4px 10px; border-radius: 999px; background: #E6F4F1; font-size: 14px; font-weight: 600; } .sk-chips button { border: 0; background: #fff; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; } .sk-chips em { color: var(--ink-2); font-size: 14px; }
.sk-warnung { display: block; margin-top: 6px; font-size: 14px; font-weight: 700; color: #7A4100; }
.sk-ausgabe { padding-top: 12px; border-top: 1px solid var(--line); }
.sk-link-box { margin: 12px 0; padding: 12px; border-radius: 12px; background: var(--mist); } .sk-link-box select { width: auto; flex: 1; }
.sk-qr-erg { display: grid; grid-template-columns: 150px 1fr; gap: 14px; margin-top: 12px; } .sk-qr svg { width: 150px; height: 150px; display: block; }
.sk-link-text { font-size: 13px; overflow-wrap: anywhere; color: var(--ink-2); }
.sk-vorschau { margin-top: 24px; }
@media (max-width: 960px) { .sk-ber { grid-template-columns: 1fr; } .sk-ber-rechts { position: static; max-height: none; } }
@media (max-width: 560px) { .sk-qr-erg { grid-template-columns: 1fr; } .sk-r-kopf { flex-direction: column; } .sk-stellen { grid-template-columns: 1fr; } }
/* Laufzettel (Bildschirm wie Papier, Druck als Hauptausgabe) */
.lz-werkzeug { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; max-width: 820px; margin: 0 auto 12px; }
.lz { max-width: 820px; margin: 0 auto; padding: 34px 40px; background: #fff; color: #111; border-radius: 6px; box-shadow: 0 10px 30px rgba(18,38,58,.12); font-size: 16px; line-height: 1.45; }
.lz-kopf { display: flex; justify-content: space-between; gap: 20px; border-bottom: 3px solid #111; padding-bottom: 14px; margin-bottom: 10px; }
.lz-marke { font-family: var(--display); font-size: 18px; letter-spacing: .5px; } .lz-marke b { color: var(--red); }
.lz h1 { font-family: var(--display); font-size: 40px; line-height: 1; margin: 6px 0 4px; } .lz-kopf p { margin: 0; }
.lz-qr { text-align: center; flex: none; } .lz-qr svg { width: 120px; height: 120px; display: block; } .lz-qr small { display: block; font-size: 12px; max-width: 130px; }
.lz-meta { margin: 0 0 6px; font-size: 14px; }
.lz section { margin: 18px 0 0; break-inside: avoid; } .lz h2 { font-size: 20px; margin: 0 0 8px; padding-bottom: 4px; border-bottom: 1px solid #bbb; }
.lz-schritte, .lz-unterlagen { list-style: none; margin: 0; padding: 0; } .lz-schritte li, .lz-unterlagen li { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; font-size: 17px; }
.lz-box { flex: none; width: 18px; height: 18px; border: 2px solid #111; border-radius: 3px; margin-top: 3px; }
.lz-unterlagen { columns: 2 260px; } .lz-unterlagen li { break-inside: avoid; }
.lz-termine { list-style: none; margin: 0; padding: 0; } .lz-termine li { display: flex; flex-direction: column; padding: 8px 12px; margin-bottom: 6px; border: 2px solid #111; border-radius: 8px; } .lz-termine strong { font-size: 18px; }
.lz-liste { margin: 0; padding-left: 22px; } .lz-liste li { margin: 0 0 8px; } .lz-liste li strong, .lz-liste li span, .lz-liste li small { display: block; } .lz-liste small { color: #444; }
.lz-quelle { font-size: 13px; color: #555; margin: 4px 0 0; }
.lz-stellen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .lz-stelle { padding: 10px 12px; border: 1px solid #999; border-radius: 8px; break-inside: avoid; } .lz-stelle strong { font-size: 16px; } .lz-stelle em { font-weight: 400; color: #666; font-size: 13px; }
.lz-stelle p { margin: 4px 0; font-size: 14px; } .lz-stelle dl { margin: 4px 0; font-size: 14px; } .lz-stelle dl div { display: grid; grid-template-columns: 90px 1fr; gap: 6px; } .lz-stelle dt { font-weight: 700; } .lz-stelle dd { margin: 0; }
.lz-merk span { display: inline-block; font-size: 12px; border: 1px solid #999; border-radius: 999px; padding: 0 7px; margin: 2px 4px 0 0; }
.lz-notiz { white-space: pre-line; padding: 10px 12px; background: #f4f4f4; border-radius: 8px; }
.lz-notfall { padding: 10px 14px; border: 2px solid #8E0C22; border-radius: 8px; } .lz-notfall h2 { border: 0; color: #8E0C22; } .lz-notfall ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; } .lz-notfall b a { color: #111; text-decoration: none; }
.lz-fuss { margin-top: 18px; padding-top: 10px; border-top: 1px solid #bbb; font-size: 13px; color: #444; } .lz-fuss p { margin: 2px 0; } .lz-link { overflow-wrap: anywhere; }
.lz-leicht { font-size: 19px; } .lz-leicht .lz-schritte li, .lz-leicht .lz-unterlagen li { font-size: 20px; }
.lz[dir="rtl"] .lz-liste { padding-left: 0; padding-right: 22px; }
@media (max-width: 640px) { .lz { padding: 20px 16px; } .lz-kopf { flex-direction: column; } .lz-stellen { grid-template-columns: 1fr; } }
#sk-druck { display: none; }
@media print {
  body.sk-drucken > *:not(#sk-druck) { display: none !important; }
  body.sk-drucken #sk-druck { display: block; }
  body.sk-drucken { background: #fff !important; }
  #sk-druck .lz { box-shadow: none; padding: 0; max-width: none; border-radius: 0; }
  #sk-druck a { color: #111; text-decoration: none; }
  @page { margin: 14mm; }
}
/* Arabisch: deutsche Inhalte (Texte der Stellen, Telefonnummern) behalten ihre eigene Leserichtung */
.lz[dir="rtl"] li, .lz[dir="rtl"] p, .lz[dir="rtl"] dd, .lz[dir="rtl"] strong, .lz[dir="rtl"] span, .lz[dir="rtl"] small, .lz[dir="rtl"] a { unicode-bidi: plaintext; }
/* Beratungsbereich */
.sk-lk-link .sk-bsp { align-self: flex-start; }
.bz-kopf .sk-tabs span { background: #E0A458; }
.bz-liste { display: grid; gap: 10px; margin: 0 0 16px; }
.bz-eintrag { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.bz-eintrag.bz-alt { border-color: #E0A458; background: #FFFBF4; }
.bz-eintrag strong { font-size: 18px; } .bz-eintrag small { display: block; color: var(--ink-2); margin-top: 2px; }
.bz-notiz { margin: 6px 0 0; padding: 6px 10px; border-radius: 8px; background: #FFF4E5; color: #7A4100; font-size: 14px; }
.bz-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.bz-st { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--mist); color: var(--ink-2); vertical-align: 2px; }
.bz-st.st-online { background: #E3F1E7; color: #154A28; } .bz-st.st-eingereicht { background: #FFF1D6; color: #7A4E12; } .bz-st.st-ausgeblendet { background: var(--red-soft); color: var(--red); }
.bz-form { padding: 20px 22px; border-radius: 18px; background: #fff; border: 2px solid #0F5446; }
.bz-form .fld textarea, .bz-form .fld input, .bz-form .fld select { width: 100%; }
.bz-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.bz-checks { display: flex; flex-wrap: wrap; gap: 0 18px; }
.bz-schritte { display: grid; gap: 10px; margin: 0 0 8px; }
.bz-schritt { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; padding: 12px; border-radius: 12px; background: #F6FAF8; border: 1px solid #CFE3DC; }
.bz-schritt input, .bz-schritt textarea { width: 100%; margin: 0 0 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.bz-schritt .s-t { font-weight: 700; } .bz-schritt .s-leicht { font-size: 14px; background: #FFFDF5; }
.bz-s-acts { display: flex; flex-direction: column; gap: 6px; }
.bz-refs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; } .bz-refs > span:first-child { font-weight: 700; }
.bz-ref { display: inline-flex; gap: 4px; align-items: center; padding: 3px 4px 3px 10px; border-radius: 999px; background: #E6F4F1; font-weight: 600; } .bz-ref button { border: 0; background: #fff; border-radius: 50%; width: 22px; height: 22px; cursor: pointer; }
.bz-refs select { min-height: 34px; border-radius: 999px; border: 1px dashed #0F5446; padding: 0 10px; font: inherit; font-size: 14px; background: #fff; max-width: 100%; }
.bz-speichern { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; } .bz-weg { margin-left: auto; color: var(--red); }
@media (max-width: 700px) { .bz-2 { grid-template-columns: 1fr; } .bz-schritt { grid-template-columns: 1fr; } .bz-schritt .sk-nr { width: 34px; height: 34px; font-size: 18px; } .bz-s-acts { flex-direction: row; } }
/* Local News: Artikel im Fenster vollständig scrollbar, Merken + Teilen */
.kt-dlg .sheet-body { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overscroll-behavior: contain; }
@media (max-width: 640px) { .kt-dlg .sheet-body { max-height: 100vh; max-height: 100dvh; height: 100%; padding-bottom: 40px; } }
.kt-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
#klatsch .lo-suche { margin-bottom: 14px; }
/* Toplisten: Reiter je Thema, ruhige Karten */
.tl-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 0 14px; scrollbar-width: thin; }
.tl-tabs button { flex: none; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--navy); font: inherit; font-weight: 700; cursor: pointer; }
.tl-tabs button[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.tl-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.tl-card { padding: 18px 20px 12px; box-shadow: none; }
.tl-card h2 { font-size: 24px; }
.tl-desc { font-size: 14px; margin: 2px 0 8px; }
.tl-list li { min-height: 44px; }
.tl-mehr { align-self: flex-start; margin: 6px 0 4px; font-size: 14px; font-weight: 700; }
.tl-hinweis { margin-top: 18px; font-size: 14px; }
/* Merkliste nach Rubriken */
.mk-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.mk-filter button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--navy); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.mk-filter button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.mk-filter small { opacity: .7; font-weight: 600; margin-left: 2px; }
.mk-gruppe { margin: 0 0 26px; }
.mk-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 2px solid var(--line); font-family: var(--display); font-size: 26px; }
.mk-h small { font-family: var(--body); font-size: 15px; color: var(--ink-2); font-weight: 600; }
/* Bericht-Baukasten: Bausteine frei verschieben + Live-Vorschau */
body[data-seite="schreiben"] .wrap { max-width: 1440px; }
.sb-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 24px; align-items: start; }
.sb-live-spalte { position: sticky; top: calc(var(--header-h) + 12px); max-height: calc(100vh - var(--header-h) - 24px); display: flex; flex-direction: column; border-radius: 16px; background: #E9EEF2; border: 1px solid var(--line); overflow: hidden; }
.sb-live-kopf { display: flex; flex-direction: column; padding: 10px 16px; background: var(--navy); color: #fff; } .sb-live-kopf span { font-size: 13px; opacity: .8; }
.sb-live-blatt { overflow: auto; padding: 18px 20px 26px; margin: 12px; border-radius: 10px; background: #fff; box-shadow: 0 6px 18px rgba(18,38,58,.1); }
.sb-live-blatt .kt-artikel h2 { font-size: 30px; } .sb-live-blatt .kt-artikel p { font-size: 15.5px; } .sb-live-blatt .kt-artikel blockquote { font-size: 17px; }
.sb-bau-hinweis { margin: -4px 0 10px; }
.sb-bloecke { gap: 0; }
.sb-block { margin: 0; transition: box-shadow .15s, opacity .15s; position: relative; }
.sb-block.neu { animation: sbNeu 1.2s ease; } @keyframes sbNeu { 0% { box-shadow: 0 0 0 3px var(--red); } 100% { box-shadow: 0 0 0 0 transparent; } }
.sb-block.zieht { opacity: .35; }
.sb-block.drop-vor { box-shadow: 0 -4px 0 0 var(--red); } .sb-block.drop-nach { box-shadow: 0 4px 0 0 var(--red); }
.sb-bk { gap: 8px; justify-content: flex-start; } .sb-bk-acts { margin-left: auto; }
.sb-griff { cursor: grab; font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: 6px; color: var(--navy); user-select: none; } .sb-griff:hover { background: var(--mist); } .sb-griff:active { cursor: grabbing; }
.sb-einf { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 22px; margin: 2px 0; }
.sb-einf::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed transparent; }
.sb-einf:hover::before, .sb-einf.auf::before { border-top-color: #B9C6D1; }
.sb-einf-plus { position: relative; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #B9C6D1; background: #fff; color: var(--navy); font-size: 16px; line-height: 1; cursor: pointer; opacity: .55; }
.sb-einf:hover .sb-einf-plus, .sb-einf.auf .sb-einf-plus { opacity: 1; border-color: var(--navy); }
.sb-einf-wahl { position: relative; display: none; flex-wrap: wrap; gap: 6px; } .sb-einf.auf .sb-einf-wahl { display: flex; }
.sb-einf-wahl button { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--navy); background: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .sb-einf-wahl button:hover { background: var(--navy); color: #fff; }
.block-zieht .sb-einf { visibility: hidden; }
@media (max-width: 1180px) { .sb-layout { grid-template-columns: minmax(0, 1fr); } .sb-live-spalte { display: none; } .sb-einf-plus { opacity: 1; } }
.sb-griff { touch-action: none; }
.sb-bk { cursor: grab; touch-action: none; user-select: none; padding: 2px 0; } .sb-bk:active { cursor: grabbing; } .sb-bk button { cursor: pointer; }
/* Sozialkompass: Seelische Krisen hervorgehoben */
.sk-rubrik.wichtig { grid-column: span 2; background: linear-gradient(135deg, #E9F6EF, #fff); border: 2px solid #2E9A63; }
.sk-rubrik.wichtig strong { font-size: 22px; } .sk-rubrik.wichtig em { color: #1F6B3A; }
@media (max-width: 560px) { .sk-rubrik.wichtig { grid-column: auto; } }
.sk-krise { margin: 0 0 16px; padding: 14px 18px; border-radius: 14px; background: #FFF0F2; border: 2px solid var(--red); }
.sk-krise strong { display: block; font-size: 18px; color: var(--red); margin-bottom: 4px; } .sk-krise p { margin: 0; } .sk-krise a { color: var(--navy); white-space: nowrap; }
/* Sozialkompass – Seelische Krisen: Zusatzwissen */
.sk-sp{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.6rem 0 .4rem}
.sk-sp a{padding:.45rem .8rem;border-radius:999px;background:var(--flaeche,#f1f5f4);border:1px solid rgba(0,0,0,.08);text-decoration:none;font-size:.92rem;color:inherit}
.sk-sp a:hover{border-color:currentColor}
.sk-weg,.sk-finden{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.8rem;margin:.6rem 0 1.2rem}
.sk-weg article,.sk-finden>div,.sk-linkgr section{background:var(--karte,#fff);border:1px solid rgba(0,0,0,.09);border-radius:14px;padding:1rem 1.1rem}
.sk-weg h4,.sk-linkgr h4{margin:0 0 .4rem;font-size:1.02rem}
.sk-weg p,.sk-finden p{margin:.3rem 0;font-size:.93rem;line-height:1.5}
.sk-weg-w{color:#2f6b53}
.sk-finden a{word-break:break-word}
.sk-finden .sk-tel{font-weight:700;margin-right:.4rem}
.sk-linkgr{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.8rem;margin:.6rem 0 1.2rem}
.sk-linkgr ul{list-style:none;margin:0;padding:0}
.sk-linkgr li{padding:.5rem 0;border-top:1px solid rgba(0,0,0,.07)}
.sk-linkgr li:first-child{border-top:0}
.sk-linkgr li a{font-weight:700}
.sk-linkgr li span{display:block;font-size:.88rem;opacity:.85;margin-top:.15rem}
.sk-med-hinweis{background:#eef4fb;border-left:4px solid #3b6fa8;border-radius:10px;padding:.8rem 1rem;margin:.6rem 0 1rem}
.sk-med-hinweis p{margin:.3rem 0 0;font-size:.93rem;line-height:1.5}
.sk-med details{border:1px solid rgba(0,0,0,.1);border-radius:12px;margin:.5rem 0;background:var(--karte,#fff)}
.sk-med summary{cursor:pointer;padding:.8rem 1rem;font-weight:700}
.sk-med dl{margin:0;padding:0 1rem 1rem}
.sk-med dt{font-weight:700;font-size:.85rem;margin-top:.6rem;opacity:.8}
.sk-med dd{margin:.15rem 0 0;line-height:1.5}
.sk-h4{margin:1.2rem 0 .4rem;font-size:1rem}
.sk-regeln{margin:.3rem 0 1rem;padding-left:1.2rem;line-height:1.6}
.sk-klein{font-size:.88rem}
@media (prefers-color-scheme:dark){.sk-med-hinweis{background:rgba(59,111,168,.18)}.sk-weg-w{color:#8fd1b2}}
.sk-stellen>*{min-width:0}.sk-stelle{overflow-wrap:anywhere}
.sk-weg,.sk-finden{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}.sk-linkgr{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
/* Sozialkompass – Kita & Kinderbetreuung */
.sk-art-wahl{display:flex;flex-wrap:wrap;gap:.45rem;margin:.4rem 0 .7rem}
.sk-art-wahl button{font:inherit;font-size:.92rem;padding:.45rem .85rem;border-radius:999px;border:1px solid rgba(0,0,0,.15);background:var(--karte,#fff);cursor:pointer;color:inherit}
.sk-art-wahl button[aria-pressed=true]{background:#14324a;color:#fff;border-color:#14324a}
.sk-arten{display:flex;flex-wrap:wrap;gap:.35rem;margin:.5rem 0 0}
.sk-arten span{font-size:.78rem;font-weight:600;padding:.15rem .55rem;border-radius:999px;background:#fff4dc;color:#6b4a00}
@media (prefers-color-scheme:dark){.sk-arten span{background:rgba(255,196,64,.16);color:#ffd88a}}
/* Kommunal-Portal: Hinweis-Leiste der Kommune */
.portal-hinweis { background: #14324a; color: #fff; font-size: 15px; line-height: 1.45; }
.portal-hinweis .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-top: 9px; padding-bottom: 9px; padding-right: 44px; position: relative; }
.portal-hinweis-von { font-weight: 700; white-space: nowrap; }
.portal-hinweis-text { flex: 1 1 280px; min-width: 0; }
.portal-hinweis a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.portal-hinweis-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.portal-hinweis-x:hover { background: rgba(255,255,255,.25); }
/* Schreib-Tool: Lektorat */
.sb-lk-zahl { display: inline-block; min-width: 22px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--red, #B0102A); color: #fff; font-size: 13px; line-height: 22px; text-align: center; }
.sb-lektorat { border: 2px solid #12263A; }
.sb-lektorat:focus { outline: none; } .sb-lektorat:focus-visible { outline: 3px solid #2E7DAF; outline-offset: 3px; }
.sb-lk-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .sb-lk-kopf h3 { margin: 0; }
.sb-lk-sum { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 8px 0; }
.sb-lk-tag { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 13px; font-weight: 700; background: #EEF2F5; color: #12263A; white-space: nowrap; }
.sb-lk-tag.lk-recht { background: #FDE2E6; color: #8A0C21; } .sb-lk-tag.lk-zeichen { background: #FFF0D6; color: #7A4100; } .sb-lk-tag.lk-typo { background: #E3EEF8; color: #1D4F7A; } .sb-lk-tag.lk-pruefen { background: #F1E6FA; color: #5B2A86; } .sb-lk-tag.lk-stil { background: #E5F3EA; color: #1F5E3A; }
.sb-lk-lesb { display: flex; gap: 12px; align-items: center; font-size: 15px; margin: 6px 0 10px; }
.sb-lk-meter { flex: none; width: 110px; height: 10px; border-radius: 5px; background: #E3E8ED; overflow: hidden; } .sb-lk-meter i { display: block; height: 100%; background: linear-gradient(90deg, #C2410C, #E0A458 40%, #2E7D4F 70%); }
.sb-lk-feld { border-top: 1px solid #E6EAEE; padding-top: 8px; margin-top: 8px; } .sb-lk-feld h4 { margin: 0 0 4px; font-size: 15px; }
.sb-lk-feld ul { list-style: none; margin: 0; padding: 0; } .sb-lk-feld li { padding: 8px 0; border-bottom: 1px dashed #E6EAEE; display: grid; gap: 4px; }
.sb-lk-msg { font-size: 15px; } .sb-lk-ctx { font-size: 14px; color: #4A5D70; background: #F7F9FB; border-radius: 6px; padding: 4px 8px; overflow-wrap: anywhere; }
.sb-lk-ctx mark { background: #FDE68A; color: #12263A; border-radius: 3px; padding: 0 2px; }
.sb-lk-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sb-lk-lt { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #F3F6F9; font-size: 14px; } .sb-lk-lt p { margin: 0 0 6px; }
@media (prefers-color-scheme: dark) { .sb-lk-ctx { background: rgba(255,255,255,.06); color: inherit; } .sb-lk-lt { background: rgba(255,255,255,.06); } }
.sb-lk-feld li > .sb-lk-tag { justify-self: start; } .sb-lk-feld li { gap: 5px; } .sb-lk-acts .btn.sm { min-height: 34px; padding: 4px 12px; font-size: 14px; }
/* ===== Dachportal SH Insider / Ortsportal Schleswig Insider ===== */
html[data-portal="schleswig"] [data-nur="sh"], html:not([data-portal="schleswig"]) [data-nur="schleswig"] { display: none !important; }
html[data-portal="schleswig"] .beta-tag, html[data-portal="schleswig"] .nav-sub-hinweis, html[data-portal="schleswig"] .aufbau-band, html[data-portal="schleswig"] .aufbau-hinweis { display: none !important; }
.sl-eyebrow { display: inline-flex; align-items: center; gap: 8px; } .sl-eyebrow img { width: 28px; height: 28px; }
.sl-module { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; margin-top: 20px; }
.sl-mod { display: grid; gap: 4px; padding: 18px 18px 16px; border-radius: 18px; background: var(--white, #fff); border: 1px solid var(--line, #E1E6EB); text-decoration: none; color: inherit; box-shadow: 0 6px 18px rgba(18,38,58,.06); transition: transform .15s, box-shadow .15s; }
.sl-mod:hover, .sl-mod:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(18,38,58,.12); }
.sl-mod-ic { font-size: 30px; line-height: 1; } .sl-mod strong { font-size: 19px; } .sl-mod small { color: var(--ink-2, #4A5D70); font-size: 15px; }
.sh-live { padding-top: 0; }
.sh-live-karte { display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center; padding: 22px 26px; border-radius: 22px; background: linear-gradient(135deg, #FFF3CC, #FDE6EA); border: 1px solid #E9C46A; }
.sh-live-karte > div { flex: 1 1 320px; } .sh-live-karte h2 { margin: 2px 0 6px; } .sh-live-karte p { margin: 0; }
.sh-live-karte img { flex: none; width: 96px; height: 96px; }
.portal-wechsel { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; white-space: nowrap; }
.raum-band .sl-chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; } .raum-band .sl-chip img { width: 22px; height: 22px; }
.raum-sl { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 12px; border-radius: 999px; background: #FFF3CC; border: 1px solid #E9C46A; color: #12263A; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.raum-sl img { width: 20px; height: 20px; } .raum-sl + .raum-wechsel { margin-left: 8px; }
@media (max-width: 640px) { .raum-sl { order: 5; margin-left: 0; } }
html[data-portal="schleswig"] .demo-note, html[data-portal="schleswig"] #jb-muster, html[data-portal="schleswig"] #in-muster, html[data-portal="schleswig"] .sk-beispiel-hinweis, html[data-portal="schleswig"] #sk-beispiel-hinweis { display: none !important; }
.ev-quelle { font-size: 14px; color: var(--ink-2, #4A5D70); margin: 6px 0; }

/* ---- Sozialkompass kompakt (V13.2) ---- */
.sk-zeilen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 8px; align-items: start; }
.sk-st { background: #fff; border: 1px solid var(--line); border-radius: 14px; min-width: 0; overflow-wrap: anywhere; }
.sk-st.sk-bund { border-left: 4px solid var(--red); }
.sk-st > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; min-height: 56px; }
.sk-st > summary::-webkit-details-marker { display: none; }
.sk-st > summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 12px; }
.sk-st-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sk-st-tx strong { font-size: 16.5px; line-height: 1.25; color: var(--navy); }
.sk-st-tx small { font-size: 13.5px; color: var(--ink-2); line-height: 1.3; }
.sk-st-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.sk-st-tags span { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #EEF3F7; color: var(--navy); }
.sk-st-anruf { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #E5F3EA; text-decoration: none; font-size: 19px; }
.sk-st-anruf:hover { background: #CDE9D6; }
.sk-st-pf { flex: none; width: 10px; height: 10px; border-right: 2.5px solid var(--navy); border-bottom: 2.5px solid var(--navy); transform: rotate(45deg); margin: 0 4px 4px; transition: transform .15s; }
.sk-st[open] .sk-st-pf { transform: rotate(-135deg); margin-bottom: -4px; }
.sk-st[open] { box-shadow: 0 8px 22px rgba(18,38,58,.08); border-color: var(--navy); }
.sk-st-inhalt { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.sk-st-inhalt p { margin: 0; }
.sk-gr { margin: 0 0 14px; } .sk-gr[hidden] { display: none; }
.sk-gr-h { font-size: 16px; margin: 6px 0 8px; color: var(--navy); font-weight: 700; }
.sk-gr-h small, .sk-h3 small { font-weight: 700; font-size: 13px; background: #EEF3F7; border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
details.sk-gr-bund > summary { cursor: pointer; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 14px; background: #FBFCFD; list-style-position: inside; }
details.sk-gr-bund[open] > summary { margin-bottom: 8px; }
.sk-r-suche input { width: 100%; min-height: 48px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 12px; font: inherit; font-size: 16px; background: #fff; margin: 0 0 10px; }
.sk-r-suche input:focus { border-color: var(--navy); outline: none; box-shadow: 0 0 0 3px rgba(18,38,58,.12); }
.sk-filterbox { margin: 0 0 12px; }
.sk-filterbox > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 700; color: var(--navy); list-style: none; }
.sk-filterbox > summary::-webkit-details-marker { display: none; }
.sk-filterbox > summary small { font-weight: 400; color: var(--ink-2); }
.sk-filterbox[open] > summary { margin-bottom: 8px; background: #EEF3F7; }
.sk-f-n { background: var(--red); color: #fff; border-radius: 999px; padding: 0 8px; font-size: 13px; }
.sk-filterbox .sk-f-lbl { display: none; }
.sk-lk-mini { list-style: none; padding: 0; margin: 0 0 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 8px; }
.sk-lk-mini a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, #F2F8F6, #fff); border: 1px solid #CFE3DC; text-decoration: none; color: var(--navy); min-height: 56px; }
.sk-lk-mini a > span:first-child { font-size: 22px; } .sk-lk-mini a > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.sk-lk-mini strong { font-size: 16px; } .sk-lk-mini small { font-size: 13px; color: var(--ink-2); } .sk-lk-mini b { font-size: 22px; }
.sk-mehr-liste { display: grid; gap: 8px; }
.sk-mehr { background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.sk-mehr > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 56px; }
.sk-mehr > summary::-webkit-details-marker { display: none; }
.sk-mehr > summary::after { content: '+'; margin-left: auto; font-size: 24px; font-weight: 700; color: var(--navy); }
.sk-mehr[open] > summary::after { content: '–'; }
.sk-mehr > summary > span:first-child { font-size: 24px; } .sk-mehr > summary > span:nth-child(2) { display: flex; flex-direction: column; }
.sk-mehr summary small { color: var(--ink-2); font-size: 13.5px; }
.sk-mehr-in { padding: 0 14px 14px; }
@media (max-width: 560px) {
  .sk-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin-bottom: 14px; scrollbar-width: none; }
  .sk-tabs a { padding: 8px 12px; font-size: 14px; white-space: nowrap; }
  .sk-rubriken { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sk-rubrik { padding: 12px; gap: 2px; } .sk-rubrik > span { font-size: 24px; } .sk-rubrik strong { font-size: 15.5px; line-height: 1.2; }
  .sk-rubrik small { display: none; } .sk-rubrik em { font-size: 12px; }
  .sk-rubrik.wichtig { grid-column: span 2; } .sk-rubrik.wichtig small { display: block; font-size: 13px; }
  .sk-r-kopf { flex-direction: row; gap: 12px; padding: 14px; } .sk-r-kopf > span { font-size: 32px; } .sk-r-kopf h2 { font-size: 26px; margin-bottom: 4px; } .sk-r-kopf p { font-size: 14.5px; }
  .sk-art-wahl { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .sk-art-wahl button { white-space: nowrap; }
  .sk-h { font-size: 26px; }
}
@media (max-width: 560px) { .sk-intro:not(.offen) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; } }
body.sk-unterseite .page-head { padding-top: 18px; padding-bottom: 18px; }
body.sk-unterseite .page-head h1 { font-size: clamp(24px, 3vw, 32px); margin: 0; }
body.sk-unterseite .page-head p, body.sk-unterseite .page-head .kicker { display: none; }

/* ---- Kalender: Eintragen oben, Weitere Termine (V13.3) ---- */
.kal-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin: 0 0 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(18,38,58,.06); }
.kal-cta > div { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; }
.kal-cta strong { font-size: 18px; color: var(--navy); } .kal-cta span { font-size: 14.5px; color: var(--ink-2); }
.kal-cta .btn { white-space: nowrap; }
@media (max-width: 560px) { .kal-cta { padding: 12px 14px; } .kal-cta .btn { width: 100%; justify-content: center; } }
.kal-mehr { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 18px 0 4px; }
.kal-mehr p { margin: 0; font-size: 14px; color: var(--ink-2); }
.tk-regeln { padding: 12px 14px; border-radius: 12px; background: #F2F8F6; border: 1px solid #CFE3DC; font-size: 14.5px; }
.tk-regeln p { margin: 0 0 6px; } .tk-regeln p:last-child { margin: 0; }
.tk-regel-liste { padding-left: 18px; } .tk-regel-liste li { margin-bottom: 6px; }

/* ---- Bürgermeister:in (V13.5) ---- */
.bg-karte { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--navy); transition: transform .15s, box-shadow .15s; }
.bg-karte:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(18,38,58,.12); }
.bg-k-amt { color: var(--red) !important; font-weight: 700; }
.bg-sprung { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.bg-sprung a { padding: 8px 14px; border-radius: 999px; background: #EEF3F7; color: var(--navy); font-weight: 700; text-decoration: none; font-size: 14.5px; }
.bg-gruss { background: linear-gradient(135deg, #FFF9F2, #fff); border: 1px solid #F0E2CC; border-radius: 18px; padding: 6px 22px 18px; margin-top: 18px; }
.bg-gruss p { font-size: 17px; line-height: 1.6; }
.bg-unterschrift { font-family: var(--display); font-size: 22px !important; margin-top: 14px; }
.bg-unterschrift small { display: block; font-family: inherit; font-size: 14px; color: var(--ink-2); }
.bg-posts { display: grid; gap: 14px; }
.bg-post { display: grid; grid-template-columns: 220px 1fr; gap: 16px; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.bg-post:not(:has(img)) { grid-template-columns: 1fr; }
.bg-post[hidden] { display: none; }
.bg-post img { width: 100%; height: 100%; min-height: 160px; object-fit: cover; }
.bg-post > div { padding: 14px 18px 16px 0; } .bg-post:not(:has(img)) > div { padding-left: 18px; }
.bg-post time { font-size: 13px; font-weight: 700; color: var(--red); }
.bg-post h3 { margin: 4px 0 8px; font-size: 20px; } .bg-post p { margin: 0 0 8px; }
.bg-post-link { font-weight: 700; }
.bg-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.bg-person { display: flex; gap: 14px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.bg-foto { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: #EEF3F7; display: grid; place-items: center; font-weight: 800; color: var(--navy); font-size: 22px; }
.bg-foto img { width: 100%; height: 100%; object-fit: cover; }
.bg-person strong { display: block; font-size: 16.5px; } .bg-person em { display: block; font-style: normal; color: var(--red); font-weight: 700; font-size: 14px; }
.bg-person p { margin: 6px 0 0; font-size: 14.5px; } .bg-p-kontakt { display: flex; flex-direction: column; gap: 2px; font-size: 14px !important; overflow-wrap: anywhere; }
@media (max-width: 640px) { .bg-post { grid-template-columns: 1fr; } .bg-post > div { padding: 0 16px 16px; } .bg-post img { max-height: 220px; } }
/* Editor */
.bg-e-team { display: flex; flex-direction: column; gap: 12px; margin: 10px 0; }
.bg-e-person { display: grid; grid-template-columns: 84px 1fr auto; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #FBFCFD; }
.bg-e-foto { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: #EEF3F7; display: grid; place-items: center; cursor: pointer; border: 2px dashed #C9D3DC; font-size: 26px; }
.bg-e-foto img { width: 100%; height: 100%; object-fit: cover; }
.bg-e-knoepfe { display: flex; flex-direction: column; gap: 6px; }
.bg-e-posts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.bg-e-post { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.bg-e-post > summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.bg-e-post > summary span { font-size: 13px; color: var(--ink-2); min-width: 78px; } .bg-e-post > summary strong { flex: 1; }
.bg-e-post-in { padding: 0 12px 12px; }
.bg-e-postbild { display: flex; align-items: center; gap: 12px; } .bg-e-postbild .bg-e-foto { border-radius: 12px; }
@media (max-width: 640px) { .bg-e-person { grid-template-columns: 64px 1fr; } .bg-e-foto { width: 64px; height: 64px; } .bg-e-knoepfe { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; } }
.sk-krise.sk-notfall-vorsorge { background: #F1F5F9; border-color: #9FB3C8; color: var(--navy); }
.sk-krise.sk-notfall-vorsorge a { color: var(--navy); }

/* ---- Kampagnen „Hilfe hilft“ (V14.0) ---- */
.kmp-bereich { --kz: #B0102A; --kf: #1F6B8C; --kg: #2E8B57; margin: 0 0 34px; padding: 26px 26px 22px; border-radius: 22px; background: linear-gradient(140deg, #FFF8EE 0%, #FFFFFF 55%, #EEF7F2 100%); border: 1px solid #EBDDC4; }
.kmp-kopf { display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px; align-items: center; }
.kmp-schritte { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; gap: 10px; }
.kmp-schritte li { display: flex; gap: 12px; align-items: flex-start; }
.kmp-schritte b { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; }
.kmp-schritte li:nth-child(1) b { background: var(--kz); } .kmp-schritte li:nth-child(2) b { background: var(--kf); } .kmp-schritte li:nth-child(3) b { background: var(--kg); }
.kmp-cta { gap: 10px; flex-wrap: wrap; }
.kmp-figur { margin: 0; text-align: center; }
.kmp-dreieck { width: 100%; max-width: 320px; height: auto; overflow: visible; }
.kmp-dreieck .kmp-flaeche { fill: rgba(255,255,255,.75); stroke: #E7D9C1; stroke-width: 2; }
.kmp-dreieck .kmp-kante { stroke-width: 5; stroke-linecap: round; }
.kmp-dreieck .k-firma { stroke: var(--kf); color: var(--kf); } .kmp-dreieck .k-gem { stroke: var(--kg); color: var(--kg); } .kmp-dreieck .k-anstoss { stroke: #C9A86A; color: #C9A86A; stroke-dasharray: 2 9; stroke-width: 4; }
.kmp-dreieck .kmp-ecke { stroke: #fff; stroke-width: 4; } .kmp-dreieck .e-ziel { fill: var(--kz); } .kmp-dreieck .e-firma { fill: var(--kf); } .kmp-dreieck .e-gem { fill: var(--kg); }
.kmp-dreieck .kmp-icon { font-size: 24px; text-anchor: middle; }
.kmp-dreieck .kmp-mitte { font-family: var(--display); font-size: 26px; font-weight: 700; text-anchor: middle; fill: var(--navy); }
.kmp-dreieck .kmp-kl { font-size: 12.5px; font-weight: 700; text-anchor: middle; fill: #5B6B7B; }
.kmp-legende { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; text-align: center; }
.kmp-legende div { display: flex; flex-direction: column; padding: 8px 6px; border-radius: 12px; background: #fff; border-top: 4px solid; }
.kmp-legende .l-ziel { border-color: var(--kz); } .kmp-legende .l-firma { border-color: var(--kf); } .kmp-legende .l-gem { border-color: var(--kg); }
.kmp-legende b { font-size: 17px; color: var(--navy); } .kmp-legende span { font-size: 12.5px; color: var(--ink-2); line-height: 1.3; }
.kmp-karten { display: grid; gap: 18px; margin-top: 22px; }
.kmp-k { display: flex; flex-direction: column; background: #fff; border-radius: 18px; border: 1px solid #EBDDC4; box-shadow: 0 10px 26px rgba(120,80,20,.08); overflow: hidden; }
.kmp-k.fertig { opacity: .9; }
.kmp-bild img { width: 100%; height: 190px; object-fit: cover; display: block; }
.kmp-tx { padding: 18px 20px 20px; }
.kmp-tx h3 { margin: 6px 0 2px; font-family: var(--display); font-size: 26px; line-height: 1.1; }
.kmp-band { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #FDECEE; color: var(--kz); font-weight: 800; font-size: 12.5px; }
.kmp-grid { display: grid; grid-template-columns: 300px 1fr; gap: 22px; margin-top: 12px; align-items: start; }
.kmp-bild-dreieck .kmp-dreieck { max-width: 300px; }
.kmp-start { display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #EEF5F9; border-left: 4px solid var(--kf); margin: 10px 0; }
.kmp-start span { font-size: 22px; } .kmp-start p { margin: 0; } .kmp-start q { display: block; margin-top: 4px; font-style: italic; color: #33475B; }
.kmp-stand { margin: 12px 0; } .kmp-stand p { margin: 6px 0 0; }
.kmp-bar { display: flex; height: 14px; border-radius: 999px; background: #EFE7DA; overflow: hidden; }
.kmp-bar .b-firma { background: var(--kf); } .kmp-bar .b-firma.zugesagt { background: repeating-linear-gradient(45deg, var(--kf) 0 6px, #6FA5BE 6px 12px); } .kmp-bar .b-gem { background: var(--kg); }
.kmp-acts { gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.kmp-leer { padding: 18px; border-radius: 16px; background: #fff; border: 1px dashed #D9C7A6; } .kmp-leer p { margin: 0 0 10px; }
.kmp-wie { margin-top: 16px; }
@media (max-width: 860px) { .kmp-kopf { grid-template-columns: 1fr; } .kmp-figur { order: -1; } .kmp-grid { grid-template-columns: 1fr; } .kmp-bild-dreieck { max-width: 340px; margin: 0 auto; width: 100%; } }
@media (max-width: 560px) { .kmp-bereich { padding: 18px 14px; margin-left: -4px; margin-right: -4px; } .kmp-tx { padding: 14px; } .kmp-tx h3 { font-size: 22px; } .kmp-legende b { font-size: 15px; } .kmp-cta .btn { width: 100%; justify-content: center; } }
@media (max-width: 560px) { .kmp-figur .kmp-dreieck { max-width: 250px; } }
.kmp-dreieck .k-firma, .kmp-dreieck .k-gem { color: inherit; }

/* ---- Kopf: kein Überstand zwischen 1100 und 1440 px (V14.1) ---- */
@media (min-width: 1100px) and (max-width: 1439px) {
  .site-header .top { gap: 8px; }
  .brand-name { font-size: 26px; }
  .nav ul { gap: 0; }
  .nav a { padding: 0 7px; font-size: 14.5px; }
  .nav a.cta { padding: 0 12px; margin-left: 2px; }
  .nav .beta-tag { display: none; }
  .account-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .account-btn { padding: 0 10px; }
}

/* ---------- Insight buchen (insight-buchen.html) ---------- */
.ib { max-width: 860px; margin: 0 auto; padding-bottom: 96px; }
.ib-tor { text-align: left; }
.ib-firma { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin-bottom: 14px; }
.ib-firma strong { display: block; font-size: 20px; line-height: 1.2; }
.ib-badge-plus { background: #FFF1C9; color: #7A4E12; font-weight: 800; font-size: 14px; padding: 6px 12px; border-radius: 999px; }
.ib-plus-tipp { font-weight: 700; font-size: 15px; color: #7A4E12; }
.ib-bisher { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 16px; margin-bottom: 14px; font-size: 16px; }
.ib-bisher summary { cursor: pointer; font-weight: 700; }
.ib-bisher ul { margin: 8px 0 4px; padding-left: 18px; } .ib-bisher li { margin-bottom: 6px; }
.ib-st { font-weight: 700; } .ib-st-freigegeben { color: var(--green); } .ib-st-ueberarbeitung { color: #9A5B00; }
.ib-schritte { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 14px; overflow-x: auto; }
.ib-schritte li { flex: 1 0 auto; }
.ib-schritte a { display: flex; align-items: center; gap: 6px; justify-content: center; padding: 8px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.ib-schritte a span { width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 13px; }
.ib-ab { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; margin-bottom: 14px; scroll-margin-top: calc(var(--header-h) + 16px); }
.ib-ab h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 26px; }
.ib-nr { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-size: 18px; font-family: var(--body); font-weight: 800; }
.ib-intro { margin: 0 0 14px; color: var(--ink-2); font-size: 16.5px; }
.ib-pakete { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ib-paket { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 14px; border: 2px solid var(--line); background: #fff; cursor: pointer; }
.ib-paket input { position: absolute; opacity: 0; pointer-events: none; }
.ib-paket.an { border-color: var(--red); background: var(--red-soft); }
.ib-paket:has(input:focus-visible) { outline: 3px solid var(--red); outline-offset: 2px; }
.ib-paket strong { font-size: 18px; }
.ib-preis { font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1.1; }
.ib-preis s { font-size: 20px; color: var(--ink-2); font-weight: 600; margin-right: 4px; }
.ib-pp { font-size: 14px; color: #7A4E12; font-weight: 700; }
.ib-paket p { margin: 4px 0 0; font-size: 15px; color: var(--ink-2); line-height: 1.4; }
.ib-paket ul { margin: 6px 0 0; padding-left: 18px; font-size: 14.5px; color: var(--ink-2); }
.ib-pakete-info { margin-top: 14px; } .ib-pakete-info .ib-paket { cursor: default; }
.ib-netto { margin: 10px 0 0; }
.ib-feld { margin-bottom: 14px; }
.ib-label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 17px; } .ib-label small, .ib-texte small { font-weight: 400; color: var(--ink-2); }
.ib-feld input[type=text], .ib-feld input[type=tel], .ib-feld input[type=date], .ib-feld select, .ib-feld textarea { width: 100%; max-width: 100%; font: inherit; font-size: 17px; padding: 10px 12px; border: 1px solid #B8C6D2; border-radius: 10px; background: #fff; color: var(--navy); }
.ib-feld input + input { margin-top: 8px; }
.ib-feld textarea { resize: vertical; line-height: 1.45; }
.ib-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ib-chip { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; border: 1px solid #B8C6D2; background: #fff; cursor: pointer; font-size: 16px; user-select: none; }
.ib-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ib-chip.an { background: var(--navy); border-color: var(--navy); color: #fff; }
.ib-chip:has(input:focus-visible) { outline: 3px solid var(--red); outline-offset: 2px; }
.ib-texte { border: 1px dashed #B8C6D2; border-radius: 12px; padding: 10px 14px; }
.ib-texte summary { cursor: pointer; font-weight: 700; }
.ib-texte[open] summary { margin-bottom: 10px; }
.ib-pflicht { color: var(--red); font-size: 14px; margin-left: 6px; }
.ib-zz { display: block; text-align: right; font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.ib-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 600px) { .ib-zwei { grid-template-columns: 1fr; } .ib-ab { padding: 16px; } .ib-ab h2 { font-size: 23px; } }
.ib-rechte { margin-bottom: 8px; }
.ib-rechte-text { background: var(--mist); padding: 10px 12px; border-radius: 10px; }
.ib-bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 4px; border-radius: 14px; }
.ib-bilder.ziehen { outline: 3px dashed var(--red); }
.ib-bild { margin: 0; }
.ib-bild-rahmen { position: relative; border-radius: 12px; overflow: hidden; background: var(--mist); aspect-ratio: 4/3; }
.ib-bild-rahmen img { width: 100%; height: 100%; object-fit: cover; }
.ib-titel { position: absolute; left: 8px; top: 8px; background: var(--red); color: #fff; font-size: 13px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.ib-bild-knoepfe { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 4px; }
.ib-bild-knoepfe button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(18,38,58,.85); color: #fff; font-size: 16px; cursor: pointer; }
.ib-bild-knoepfe button:hover { background: var(--red); }
.ib-bild input { width: 100%; margin-top: 6px; font: inherit; font-size: 14.5px; padding: 6px 8px; border: 1px solid #B8C6D2; border-radius: 8px; }
.ib-drop { aspect-ratio: 4/3; border: 2px dashed #B8C6D2; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; text-align: center; padding: 8px; background: #FAFCFD; }
.ib-drop:hover, .ib-drop:focus-within { border-color: var(--red); background: var(--red-soft); }
.ib-drop.laed { opacity: .7; pointer-events: none; }
.ib-drop-ic { font-size: 30px; line-height: 1; color: var(--red); }
.ib-drop small { color: var(--ink-2); font-size: 13.5px; }
.ib-ende { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; }
.ib-ablauf { margin: 0 0 12px; font-size: 16.5px; }
.ib-meldung { margin: 12px 0 0; font-weight: 700; color: var(--red); }
.ib-fehler { margin: 6px 0 0; color: var(--red); font-weight: 700; font-size: 15px; }
.ib-hat-fehler input[type=text], .ib-hat-fehler textarea, .ib-hat-fehler select, .ib-hat-fehler input[type=date] { border-color: var(--red); box-shadow: 0 0 0 2px var(--red-soft); }
label.ib-hat-fehler { color: var(--red); font-weight: 700; }
.ib-leiste { position: sticky; bottom: 0; z-index: 20; margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; background: var(--navy); color: #fff; padding: 12px 16px; border-radius: 16px 16px 0 0; box-shadow: 0 -6px 20px rgba(18,38,58,.18); }
.ib-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ib-sum-name { font-weight: 700; }
.ib-sum-preis b { font-family: var(--display); font-size: 26px; } .ib-sum-preis s { opacity: .7; } .ib-sum-preis small { opacity: .8; }
.ib-sum-rabatt { background: #FFF1C9; color: #7A4E12; font-weight: 800; font-size: 13px; padding: 2px 8px; border-radius: 999px; }
.ib-fertig { text-align: center; padding: 32px 22px; }
.ib-fertig .vb-knoepfe { justify-content: center; }
.ib-haken { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; font-size: 34px; font-weight: 800; }

/* ---------- Preise für Unternehmen (preise.html) und Preis-Hinweise ---------- */
.pr { max-width: 980px; margin: 0 auto; }
.pr-sprung { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pr-sprung a { padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 700; text-decoration: none; font-size: 16px; }
.pr-sprung a:hover { border-color: var(--red); }
.pr-block { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; margin-bottom: 18px; scroll-margin-top: calc(var(--header-h) + 16px); }
.pr-block h2 { margin: 0 0 4px; font-size: 30px; }
.pr-lead { margin: 0 0 16px; color: var(--ink-2); }
.pr-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 16px; }
.pr-karte { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.pr-karte.pr-top { border: 2px solid #E8C25A; background: #FFFBEF; }
.pr-karte h3 { margin: 2px 0 4px; font-size: 20px; }
.pr-gross { font-family: var(--display); font-size: 38px; font-weight: 700; margin: 0; line-height: 1.1; }
.pr-gross small { font-size: 18px; font-family: var(--body); font-weight: 600; color: var(--ink-2); }
.pr-klein { margin: 0; font-size: 15px; color: var(--ink-2); }
.pr-karte ul { margin: 10px 0 0; padding-left: 18px; font-size: 15.5px; color: var(--ink-2); }
.pr-tab-wrap { overflow-x: auto; margin-bottom: 16px; }
.pr-tab { width: 100%; border-collapse: collapse; font-size: 16.5px; }
.pr-tab th, .pr-tab td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pr-tab thead th { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); border-bottom: 2px solid var(--line); }
.pr-tab tbody th { font-weight: 700; white-space: nowrap; }
.pr-tab td { color: var(--ink-2); }
.pr-z { text-align: right !important; white-space: nowrap; }
.pr-tab td.pr-z b { color: var(--navy); font-size: 18px; }
.pr-plus { color: #7A4E12 !important; font-weight: 700; }
@media (max-width: 640px) {
  .pr-block { padding: 16px; } .pr-block h2 { font-size: 25px; }
  .pr-tab thead { display: none; }
  .pr-tab, .pr-tab tbody, .pr-tab tr, .pr-tab th, .pr-tab td { display: block; width: 100%; }
  .pr-tab tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
  .pr-tab th, .pr-tab td { border: 0; padding: 2px 0; text-align: left !important; white-space: normal; }
  .pr-tab td.pr-z { display: inline-block; width: auto; margin-right: 14px; }
  .pr-tab td.pr-plus::before { content: "Premium: "; font-weight: 400; }
}
.pr-faq details { border-bottom: 1px solid var(--line); padding: 10px 0; }
.pr-faq summary { cursor: pointer; font-weight: 700; }
.pr-faq p { margin: 8px 0 0; color: var(--ink-2); }
.pr-fuss { text-align: center; color: var(--ink-2); font-size: 15px; }
.paket-preis { margin: 0 0 6px; font-size: 16px; } .paket-preis b { font-family: var(--display); font-size: 26px; }
.paket-alle { margin-top: 14px; text-align: center; }
.jb-preise { font-size: 16px; }
.ad-preise { display: block; margin-top: 8px; font-size: 14px; font-weight: 700; }

/* Kalender: Anzeigenplatz quer über dem Kalender */
.kal-anzeige { margin: 0 0 22px; }
.kal-anzeige .ad-card { flex-direction: row; align-items: stretch; }
.kal-anzeige .ad-card .ph { aspect-ratio: auto; width: 240px; flex: 0 0 240px; min-height: 140px; }
.kal-anzeige .ad-card .tx { align-content: center; padding: 16px 20px; }
.kal-anzeige .ad-leer { grid-template-columns: 1fr auto; align-items: center; column-gap: 18px; }
.kal-anzeige .ad-leer > * { grid-column: 1; }
.kal-anzeige .ad-leer .btn { grid-column: 2; grid-row: 1 / span 3; justify-self: end; }
.kal-anzeige .ad-leer .ad-preise { grid-column: 2; justify-self: end; }
@media (max-width: 640px) {
  .kal-anzeige .ad-card .ph { width: 110px; flex-basis: 110px; min-height: 0; }
  .kal-anzeige .ad-card .tx { padding: 12px 14px; }
  .kal-anzeige .ad-card strong { font-size: 16px; }
  .kal-anzeige .ad-card .t { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .kal-anzeige .ad-leer { grid-template-columns: 1fr; }
  .kal-anzeige .ad-leer .btn, .kal-anzeige .ad-leer .ad-preise { grid-column: 1; grid-row: auto; justify-self: start; }
}
.premium-hinweis { display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; background: #FFFBEF; border: 2px solid #E8C25A; margin-bottom: 14px; }
.premium-hinweis p { margin: 0; font-size: 16px; }
.premium-hinweis .btn { justify-self: start; }

/* ---------- Rollen (rollen.html) ---------- */
.ro { max-width: 1040px; margin: 0 auto; }
.ro-ablauf { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; margin-bottom: 18px; }
.ro-ablauf h2 { margin: 0 0 8px; font-size: 26px; }
.ro-ablauf ol { margin: 0; padding-left: 22px; display: grid; gap: 4px; }
.ro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.ro-karte { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; scroll-margin-top: calc(var(--header-h) + 16px); }
.ro-kopf { display: flex; gap: 12px; align-items: flex-start; }
.ro-ic { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px; background: var(--mist); display: grid; place-items: center; font-size: 24px; }
.ro-kopf h3 { margin: 0; font-size: 22px; line-height: 1.15; }
.ro-fuer { margin: 2px 0 0; font-size: 15px; color: var(--ink-2); line-height: 1.35; }
.ro-karte ul { margin: 0; padding-left: 18px; font-size: 15.5px; display: grid; gap: 3px; }
.ro-kosten { margin: auto 0 0; font-size: 14.5px; font-weight: 700; color: #7A4E12; }
.ro-karte .btn { align-self: flex-start; }
.ro-fuss { text-align: center; margin-top: 18px; color: var(--ink-2); }
.fb-stellen { margin-top: 18px; scroll-margin-top: calc(var(--header-h) + 16px); }
.fb-bew { margin-top: 16px; } .fb-bew h4 { margin: 0 0 8px; font-size: 18px; }

/* Verzeichnis: Vereine & Organisationen eingeklappt nach Bereich */
.vz-anz { font-family: var(--body); font-size: 15px; font-weight: 700; color: var(--ink-2); background: var(--mist); border-radius: 999px; padding: 2px 10px; vertical-align: middle; }
.vz-hinweis { margin: -6px 0 12px; font-size: 15px; color: var(--ink-2); }
.vz-vgruppen { display: grid; gap: 8px; margin-bottom: 28px; }
.vz-vg { background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.vz-vg summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; cursor: pointer; font-weight: 700; font-size: 17px; list-style: none; min-height: 48px; }
.vz-vg summary::-webkit-details-marker { display: none; }
.vz-vg summary::after { content: "▾"; color: var(--ink-2); transition: transform .15s; }
.vz-vg[open] summary::after { transform: rotate(180deg); }
.vz-vg summary b { margin-left: auto; font-size: 14px; background: var(--mist); border-radius: 999px; padding: 2px 10px; }
.vz-vliste { list-style: none; margin: 0; padding: 0 8px 8px; display: grid; gap: 2px; }
.vz-vliste li { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--line); }
.vz-vliste li > button:first-child { flex: 1; display: flex; align-items: center; gap: 10px; padding: 8px; background: none; border: 0; text-align: left; font: inherit; color: var(--navy); cursor: pointer; border-radius: 10px; min-height: 48px; }
.vz-vliste li > button:first-child:hover { background: var(--mist); }
.vz-vlogo { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--line); }
.vz-vlogo.ini { display: grid; place-items: center; background: var(--green-soft); color: var(--green); font-weight: 800; font-size: 13px; border: 0; }
.vz-vt { display: grid; line-height: 1.25; min-width: 0; }
.vz-vt strong { font-size: 16px; }
.vz-vt span { font-size: 14px; color: var(--ink-2); }

/* ---------- Werbeplätze (Redaktion › Werbung) ---------- */
.section.werbe-start { padding: 28px 0 8px; }
.wb-raster { display: grid; gap: 14px; }
.werbe-start-platz .wb-raster { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.werbe-start-platz .wb-raster.wb-n1 { grid-template-columns: minmax(0, 1fr); }
.werbe-start-platz .wb-n1 .ad-card { flex-direction: row; } .werbe-start-platz .wb-n1 .ad-card .ph { aspect-ratio: 16 / 10; width: min(42%, 420px); flex: 0 0 auto; }
.werbe-start-platz .wb-n1 .ad-card .tx { align-content: center; padding: 18px 22px; } .werbe-start-platz .wb-n1 .ad-card strong { font-size: 22px; }
.kal-anzeige .wb-raster { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
a.ad-card { text-decoration: none; } a.ad-card:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.wb-raster + .ad-foot { margin-top: 8px; }
.werbe-start-platz .ad-leer { grid-template-columns: 1fr auto; align-items: center; column-gap: 18px; }
.werbe-start-platz .ad-leer > * { grid-column: 1; } .werbe-start-platz .ad-leer .btn { grid-column: 2; grid-row: 1 / span 3; justify-self: end; } .werbe-start-platz .ad-leer .ad-preise { grid-column: 2; justify-self: end; }
@media (max-width: 640px) {
  .kal-anzeige .wb-raster { grid-template-columns: minmax(0, 1fr); }
  .werbe-start-platz .wb-raster { grid-template-columns: minmax(0, 1fr); }
  .werbe-start-platz .ad-card { flex-direction: row; } .werbe-start-platz .ad-card .ph { aspect-ratio: auto; width: 116px; flex: 0 0 116px; } .werbe-start-platz .wb-n1 .ad-card .ph { width: 116px; }
  .werbe-start-platz .ad-card .tx { padding: 12px 14px; } .werbe-start-platz .ad-card strong, .werbe-start-platz .wb-n1 .ad-card strong { font-size: 16px; }
  .werbe-start-platz .ad-card .t { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .werbe-start-platz .ad-leer { grid-template-columns: 1fr; } .werbe-start-platz .ad-leer .btn, .werbe-start-platz .ad-leer .ad-preise { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* Werbekachel zwischen den Lieblingsorten */
a.lo-card.lo-anzeige { text-decoration: none; color: inherit; background: #FBF3E8; border-color: #E9D6BC; }
.lo-anzeige .ad-ex { background: #fff; color: #7A4E12; border: 1px solid #7A4E12; }
.lo-anzeige .lo-cat { color: #7A4E12; }
.lo-anz-mehr { margin-top: 6px; font-weight: 700; color: var(--navy); }
a.lo-card.lo-anzeige:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.lo-card.lo-anzeige.leer { cursor: default; border: 2px dashed #E9D6BC; justify-content: center; }
.lo-card.lo-anzeige.leer:hover { transform: none; box-shadow: none; }
.lo-card.lo-anzeige.leer h3 { font-size: 24px; }

/* Datenschutz-Banner mit Kategorien */
.consent { max-height: calc(100vh - 32px); overflow-y: auto; }
.consent-mehr summary { cursor: pointer; font-weight: 700; color: var(--white); min-height: 44px; display: flex; align-items: center; }
.consent-mehr[open] summary { margin-bottom: 6px; }
.consent-kat { display: grid; gap: 8px; margin-bottom: 12px; }
.consent .ck { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.08); cursor: pointer; }
.consent .ck input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 20px; accent-color: #F2A93B; }
.consent .ck span { display: grid; gap: 2px; }
.consent .ck b { font-size: 16px; }
.consent .ck em { font-style: normal; font-size: 12.5px; font-weight: 700; color: #F6D365; }
.consent .ck small { font-size: 14px; color: #D5DEE6; line-height: 1.4; }
.consent .ck.aus { opacity: .85; cursor: default; } .consent .ck.aus em { color: #FFB3BE; }

/* Rechtstexte: Tabelle Cookies und Speicher */
.legal-tabelle { overflow-x: auto; margin: 12px 0 16px; }
.legal-tabelle table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 560px; }
.legal-tabelle th, .legal-tabelle td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-tabelle th { border-bottom: 2px solid var(--navy); font-size: 14px; }
.legal-tabelle td:first-child { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; white-space: nowrap; }

/* Social Media teilen (Beiträge von Creator und Bürgermeister) */
.soc-zeile { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.bg-e-posts { display: grid; gap: 8px; margin-top: 10px; }

/* ===================== Web-App: flüssige Seitenwechsel =====================
   Moderne Browser blenden beim Wechsel zwischen Seiten weich über, Kopfzeile und Menü bleiben stehen. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: shi-kopf; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; animation-timing-function: ease; }
::view-transition-old(shi-kopf), ::view-transition-new(shi-kopf) { animation: none; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* Als installierte App: kein Gummiband-Effekt, Tipp-Hervorhebung dezent */
@media (display-mode: standalone) { html { overscroll-behavior-y: none; } body { -webkit-tap-highlight-color: transparent; } }
a[data-kein-link] { cursor: default; }

/* ===================== Sozialkompass: Startseite nach Lebensbereichen ===================== */
.sk-sofort { grid-template-columns: 1fr; margin-bottom: 4px; }
.sk-sofort .sk-rubrik.wichtig { grid-column: auto; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 14px; }
.sk-sofort .sk-rubrik.wichtig > span { font-size: 34px; }
.sk-sofort .sk-rubrik.wichtig small { flex: 1 1 260px; }
.sk-sofort .sk-rubrik.wichtig em { margin: 0; }
.sk-oft { margin: 18px 0 6px; }
.sk-h4, .sk-oft h3 { font-family: var(--display); font-weight: 700; font-size: 21px; margin: 0 0 10px; color: var(--navy); }
.sk-oft-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-oft-liste a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--navy); font-weight: 700; font-size: 15px; text-decoration: none; }
.sk-oft-liste a:hover, .sk-oft-liste a:focus-visible { border-color: var(--navy); background: #F7FAFC; }
.sk-oft-liste a span { font-size: 18px; }
.sk-bereich { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.sk-bereich-kopf { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.sk-bereich-kopf > span { width: 52px; height: 52px; border-radius: 14px; background: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 26px; flex: none; }
.sk-bereich-kopf h3 { font-family: var(--display); font-weight: 700; font-size: 28px; margin: 0; line-height: 1.05; color: var(--navy); }
.sk-bereich-kopf p { margin: 3px 0 0; color: var(--ink-2); font-size: 15px; }
.sk-alle-ratgeber { margin-top: 34px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 4px 18px; }
.sk-alle-ratgeber > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; min-height: 56px; font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--navy); }
.sk-alle-ratgeber > summary::-webkit-details-marker { display: none; }
.sk-alle-ratgeber > summary::after { content: '▾'; margin-left: auto; font-size: 18px; transition: transform .15s; }
.sk-alle-ratgeber[open] > summary::after { transform: rotate(180deg); }
.sk-alle-ratgeber > summary small { font-family: var(--body, inherit); font-size: 13px; font-weight: 700; background: #EEF3F7; border-radius: 999px; padding: 1px 9px; }
.sk-alle-b { margin: 6px 0 18px; }
.sk-alle-b h4 { font-family: var(--display); font-size: 20px; margin: 16px 0 6px; color: var(--navy); border-bottom: 2px solid var(--line); padding-bottom: 4px; }
.sk-alle-r { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); margin: 12px 0 6px; }
.sk-geschwister { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.sk-geschwister a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--navy); font-weight: 700; font-size: 14px; text-decoration: none; }
.sk-geschwister a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.sk-mehr { margin: 0 0 8px; }
.sk-mehr > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--red); }
.sk-mehr[open] > summary { margin-bottom: 8px; }
@media (max-width: 560px) {
  .sk-bereich { margin-top: 22px; padding-top: 16px; }
  .sk-bereich-kopf > span { width: 42px; height: 42px; font-size: 22px; border-radius: 12px; }
  .sk-bereich-kopf h3 { font-size: 23px; }
  .sk-oft-liste a { font-size: 14px; padding: 7px 12px; }
  .sk-sofort .sk-rubrik.wichtig { grid-column: auto; }
}
@media (max-width: 720px) {
  .sk-geschwister { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px 4px; }
  .sk-geschwister::-webkit-scrollbar { display: none; }
  .sk-geschwister a { flex: none; white-space: nowrap; }
}
.vb-status.ok { background: #FFF6DB; color: #5A4500; border: 1px solid #E9C46A; }

/* ---------- Verträge kündigen / widerrufen, Rechtstexte (v16.7) ---------- */
.foot-copy { display: flex !important; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; }
.foot-vertrag { display: flex; flex-wrap: wrap; gap: 8px; }
.foot-vb { display: inline-block; padding: 6px 14px; border: 1.5px solid currentColor; border-radius: 999px; font-weight: 700; text-decoration: none; font-size: 14px; }
.foot-vb:hover, .foot-vb:focus-visible { background: rgba(255, 255, 255, .12); }
.vb-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .vb-grid { grid-template-columns: minmax(0, 1fr); } }
.vb-fs { border: 0; padding: 0; margin: 0 0 16px; } .vb-fs legend { font-weight: 700; margin-bottom: 6px; } .vb-fs .check { display: flex; gap: 8px; align-items: center; margin: 4px 0; } .vb-fs input[type=date] { margin-top: 6px; max-width: 220px; }
.vb-ergebnis { grid-column: 1; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.vb-beleg { white-space: pre-wrap; font: 15px/1.5 var(--body, system-ui), sans-serif; background: var(--mist); border-radius: 10px; padding: 14px 16px; margin: 14px 0; overflow-wrap: anywhere; }
@media print { body > header, .site-head, footer, .vb-grid > aside, .vb-ergebnis .row, .page-head .intro { display: none !important; } .vb-ergebnis { border: 0; padding: 0; } }
.legal .lead { font-size: 19px; line-height: 1.5; }
.legal-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 8px; } .legal-toc a { padding: 4px 10px; border-radius: 999px; background: var(--mist); text-decoration: none; font-size: 14px; font-weight: 600; }
.legal-tabelle { overflow-x: auto; margin: 12px 0; } .legal-tabelle table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 15px; } .legal-tabelle th, .legal-tabelle td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; } .legal-tabelle th { background: var(--mist); }
.legal-formular { border: 1px dashed var(--line); border-radius: 12px; padding: 6px 18px; background: var(--white); }
.foot-nav a { overflow-wrap: anywhere; hyphens: auto; }
.acc-menu a.acc-red { background: var(--navy); color: #fff; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .acc-menu a.acc-red small { font-weight: 600; opacity: .8; font-size: 13px; } .acc-menu a.acc-red:hover, .acc-menu a.acc-red:focus-visible { background: #0B1A2A; }
.tm-link { border-top: 1px solid #EEF2F5; margin-top: 12px; padding-top: 10px; }
/* Menüs am Handy / in der App: in sich scrollbar, ohne die Seite mitzuziehen */
.acc-menu { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (max-width: 1099px) { .nav.open { max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } }
/* Web-App installieren */
button.foot-vb { background: transparent; color: inherit; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
button.foot-app { border-color: transparent; background: rgba(255,255,255,.14); }
.nav-app-btn { width: 100%; text-align: left; border: 0; background: var(--mist); color: var(--navy); font: inherit; font-weight: 700; font-size: 18px; padding: 10px 12px; border-radius: 10px; cursor: pointer; margin-top: 6px; }
@media (min-width: 1100px) { .nav li.nav-app { display: none; } }
.app-banner { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 380; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 14px 36px rgba(18,38,58,.25); padding: 10px 10px 10px 12px; max-width: 520px; margin: 0 auto; animation: app-rein .35s ease-out; }
.app-banner img { border-radius: 10px; flex-shrink: 0; } .app-banner div { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; } .app-banner span { font-size: 14px; color: var(--ink-2); }
@keyframes app-rein { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .app-banner { animation: none; } }
.app-schritte { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: 17px; } .app-sym { display: inline-block; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; }
.ist-app .app-banner, .ist-app [data-app-install] { display: none !important; }

/* ---------- Seiten für Suchmaschinen (seite.php) ---------- */
.seo { padding-top: 24px; } .seo-wrap { max-width: 980px; }
.seo-krumen { font-size: 14px; color: var(--ink-2); margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 4px; } .seo-krumen a { color: var(--ink-2); }
.seo-h1 { font-family: var(--display); font-size: clamp(34px, 6vw, 56px); line-height: 1.02; margin: 4px 0 12px; }
.seo-kicker { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--red); margin: 0; }
.seo .lead { font-size: 19px; line-height: 1.5; max-width: 760px; }
.seo-ortnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; } .seo-ortnav a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; text-decoration: none; font-weight: 700; color: var(--navy); font-size: 15px; }
.seo-ortnav a[aria-current] { background: var(--navy); color: #fff; border-color: var(--navy); } .seo-ortnav small { opacity: .7; font-weight: 600; }
.seo-block { margin-top: 30px; } .seo-block h2, .seo-artikel h2 { font-family: var(--display); font-size: 28px; margin: 0 0 12px; }
.seo-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.seo-karte { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-decoration: none; color: var(--navy); min-height: 64px; }
.seo-karte:hover { border-color: var(--navy); } .seo-karte img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; flex-shrink: 0; } .seo-karte span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .seo-karte small { color: var(--ink-2); font-size: 14px; }
.seo-termine { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .seo-termine li { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2px 14px; padding: 10px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.seo-termine time { font-weight: 700; color: var(--red); font-size: 15px; } .seo-termine a { font-weight: 700; color: var(--navy); } .seo-termine span { grid-column: 2; color: var(--ink-2); font-size: 14px; }
@media (max-width: 640px) { .seo-termine li { grid-template-columns: 1fr; } .seo-termine span { grid-column: 1; } }
.seo-dl { display: grid; gap: 6px; margin: 16px 0; padding: 14px 16px; background: var(--mist); border-radius: 14px; } .seo-dl div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; } .seo-dl dt { font-weight: 700; } .seo-dl dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .seo-dl div { grid-template-columns: 1fr; gap: 0; } }
.seo-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; align-items: center; } .seo-knoepfe > a:not(.btn) { font-weight: 700; }
.seo-bild { width: 100%; max-height: 460px; object-fit: cover; border-radius: 16px; margin: 8px 0 14px; } .seo-logo { max-width: 160px; max-height: 120px; object-fit: contain; }
.seo-hinweis { padding: 10px 14px; border-radius: 12px; background: #FFF4D6; color: #7A4E12; } .seo-leicht { padding: 10px 14px; border-left: 4px solid var(--navy); background: var(--mist); border-radius: 0 10px 10px 0; }
.seo-chips { display: flex; flex-wrap: wrap; gap: 6px; } .seo-chips a { padding: 5px 12px; border-radius: 999px; background: var(--mist); text-decoration: none; font-weight: 600; font-size: 15px; } .seo-chips small { opacity: .7; }
.seo-links { columns: 2 280px; padding-left: 18px; } .seo-links li { margin: 4px 0; break-inside: avoid; }
.seo-schritte { padding-left: 22px; } .seo-schritte > li { margin-bottom: 18px; } .seo-schritte h2 { font-size: 24px !important; margin-bottom: 4px !important; }
.seo-orte { list-style: none; padding: 0; display: grid; gap: 8px; } .seo-orte li { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; } .seo-ortname { font-weight: 800; font-size: 19px; color: var(--navy); }

/* ---------- Startseite: Sozialkompass (v16.11) ---------- */
.sk-start { background: linear-gradient(180deg, #EAF3EE 0%, #F4F8F6 100%); border-top: 1px solid #D4E6DA; border-bottom: 1px solid #D4E6DA; }
.sk-start .kicker { color: var(--green); }
.sk-start-kopf { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px 40px; align-items: end; }
.sk-start-kopf h2 { margin-bottom: 8px; }
.sk-start-kopf .intro { margin: 0; }
.sk-start-suche { background: var(--white); border: 1px solid #CFE2D5; border-radius: 20px; padding: 18px 18px 20px; box-shadow: 0 10px 28px rgba(18,38,58,.08); }
.sk-start-suche label { display: block; font-weight: 700; font-size: 19px; margin-bottom: 10px; }
.sk-start-suche div { display: flex; gap: 8px; }
.sk-start-suche input { flex: 1; min-width: 0; font: inherit; font-size: 18px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--white); color: var(--navy); }
.sk-start-suche input:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px rgba(31,107,58,.2); }
.sk-start-themen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; margin-top: 28px; }
.sk-start-themen a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 14px 14px; border-radius: 16px; background: var(--white); border: 1px solid #D4E6DA; text-decoration: none; color: var(--navy); transition: transform .15s, box-shadow .15s, border-color .15s; }
.sk-start-themen a:hover, .sk-start-themen a:focus-visible { transform: translateY(-2px); border-color: var(--green); box-shadow: 0 10px 22px rgba(18,38,58,.10); color: var(--navy); }
.sk-start-themen span { grid-row: 1 / 3; font-size: 28px; line-height: 1; }
.sk-start-themen strong { font-size: 17px; line-height: 1.2; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.sk-start-themen small { color: var(--ink-2); font-size: 14px; }
.sk-start-themen .sk-start-alle { background: var(--green); border-color: var(--green); color: var(--white); }
.sk-start-themen .sk-start-alle small, .sk-start-themen .sk-start-alle:hover { color: var(--white); }
.sk-start-unten { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-top: 28px; align-items: start; }
.sk-start-oft h3, .sk-start-not h3 { margin: 0 0 10px; font-size: 22px; }
.sk-start-oft ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.sk-start-oft li a { display: block; padding: 9px 0 9px 22px; position: relative; border-bottom: 1px solid #D4E6DA; text-decoration: none; font-size: 17px; line-height: 1.3; }
.sk-start-oft li a::before { content: "→"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.sk-start-oft li a:hover { color: var(--red); }
.sk-start-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.sk-start-not { background: var(--white); border: 2px solid var(--red); border-radius: 20px; padding: 18px 18px 12px; }
.sk-start-not p { margin: 0 0 8px; font-size: 16px; color: var(--ink-2); }
.sk-start-not a { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--navy); }
.sk-start-not a b { font-size: 19px; color: var(--red); white-space: nowrap; min-width: 9.5ch; }
.sk-start-not a span { font-size: 16px; }
@media (max-width: 860px) {
  .sk-start-kopf, .sk-start-unten { grid-template-columns: 1fr; }
  .sk-start-oft ul { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .sk-start-suche div { flex-direction: column; }
  .sk-start-suche .btn { width: 100%; }
  .sk-start-themen { grid-template-columns: 1fr 1fr; }
  .sk-start-themen a { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 4px; }
  .sk-start-themen span { grid-row: auto; }
}

/* ---------- Unterstützen: Kontaktbereich (v16.12) ---------- */
.uz-kontakt { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px 48px; align-items: center; }
.uz-kontakt .kicker { color: #FFE3E8; }
.uz-kontakt-text p { margin: 0 0 16px; }
.uz-kontakt-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.uz-kontakt-punkte li { display: flex; gap: 10px; align-items: flex-start; font-size: 18px; }
.uz-kontakt-punkte svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; color: var(--white); }
.uz-kontakt-karte { background: var(--white); color: var(--navy); border-radius: 22px; padding: 26px 24px; display: grid; gap: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.uz-cta .uz-kontakt-karte p { color: var(--ink-2); }
.uz-kontakt-wer { margin: 0 0 4px !important; display: grid; gap: 2px; }
.uz-cta .uz-kontakt-wer strong { font-size: 22px; color: var(--navy); }
.uz-kontakt-wer span { font-size: 16px; }
.uz-cta .uz-kontakt-karte .btn-red { background: var(--red); color: var(--white); width: 100%; justify-content: center; }
.uz-cta .uz-kontakt-karte .btn-red:hover { background: #8E0C22; color: var(--white); }
.uz-kontakt-karte .btn-line { width: 100%; justify-content: center; }
.uz-cta .uz-kontakt-klein { font-size: 15px !important; margin: 4px 0 0 !important; }
.uz-kontakt-karte a:not(.btn) { color: var(--navy); }
@media (max-width: 820px) { .uz-kontakt { grid-template-columns: 1fr; } }

/* ---------- Fußzeile aufgeräumt (v16.13) ---------- */
.site-footer.sf { padding: 28px 0 96px; }
.sf .wrap { display: block; }
.sf .sf-oben { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; }
.sf-marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); }
.sf-marke img { border-radius: 50%; }
.sf-marke span { display: grid; line-height: 1.2; }
.sf-marke strong { font-family: var(--display); font-size: 24px; }
.sf-marke small { font-size: 14px; color: var(--ink-2); }
.site-footer .sf-kurz { display: flex; flex-wrap: wrap; gap: 0 22px; }
.site-footer .sf-kurz a { font-weight: 700; min-height: 44px; text-decoration: none; }
.site-footer .sf-kurz a:hover { text-decoration: underline; }
.sf-spalten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; padding: 4px 0 20px; }
.site-footer .sf-spalten nav { display: grid; gap: 0; align-content: start; }
.sf-spalten h2 { margin: 0 0 4px; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-2); }
.site-footer .sf-spalten a { font-weight: 600; min-height: 36px; justify-self: start; text-decoration: none; overflow-wrap: anywhere; }
.site-footer .sf-spalten a:hover { text-decoration: underline; }
.sf .sf-unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-top: 14px; font-size: 14px; }
.site-footer .sf-recht { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.site-footer .sf-recht a, .site-footer .sf-recht button { font-weight: 600; font-size: 14px; min-height: 40px; text-decoration: none; }
.site-footer .sf-recht a:hover, .site-footer .sf-recht button:hover { text-decoration: underline; }
@media (max-width: 760px) { .sf-spalten { grid-template-columns: 1fr 1fr; } .site-footer .sf-kurz { gap: 0 18px; } }

/* Fußzeile: Kategorien zum Aufklappen (v16.14) */
.sf-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 14px; padding: 4px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sf-leiste button { font: inherit; font-weight: 700; font-size: 15px; color: var(--navy); background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 10px; }
.sf-leiste button:hover, .sf-gruppe.offen .sf-kat { color: var(--red); background: var(--mist); }
.sf-leiste .sf-alle { padding-left: 0; margin-right: 10px; }
.sf-leiste .sf-alle:hover { background: none; }
.sf-leiste button svg { width: 16px; height: 16px; transition: transform .2s; }
.sf-alle[aria-expanded="true"] svg, .sf-gruppe.offen .sf-kat svg { transform: rotate(180deg); }
.sf-gruppe { position: relative; }
.site-footer .sf-drop { display: none; position: absolute; left: 0; top: 100%; z-index: 30; min-width: 220px; padding: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 36px rgba(18,38,58,.16); }
.site-footer .sf-drop a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 8px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.site-footer .sf-drop a:hover, .site-footer .sf-drop a:focus-visible { background: var(--mist); color: var(--red); }
.sf-gruppe.offen .sf-drop { display: grid; }
@media (hover: hover) { .sf-gruppe:hover .sf-drop { display: grid; } .sf-gruppe:hover .sf-kat svg { transform: rotate(180deg); } }
.sf-gruppe::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
.sf-alle-auf .sf-gruppe { display: none; }
.sf-spalten[hidden] { display: none; }
.sf-spalten { padding-top: 16px; border-bottom: 1px solid var(--line); }
.sf-gruppe:last-child .sf-drop { left: auto; right: 0; }
@media (max-width: 560px) { .sf-gruppe .sf-drop { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; min-width: 0; } .sf-gruppe:last-child .sf-drop { left: 16px; right: 16px; } }
.site-footer.sf { padding: 0 0 110px; }
.sf-leiste { margin-top: 0; border-top: 0; }
.sf .sf-oben { margin-top: 18px; }
.sf-spalten { border-bottom: 0; padding-bottom: 6px; }
.sf-alle-auf .sf-leiste { border-bottom-color: transparent; }
.site-footer.sf { padding-bottom: 140px; }
.sf-alle-auf .sf-spalten { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
@media (max-width: 560px) { .site-footer .sf-gruppe .sf-drop { bottom: 84px; z-index: 60; } }