/* ══════════════════════════════════════════════
   Odenwaldklick 3.0 — Projekt-spezifische Komponenten
   (lädt NACH common.css, überschreibt nichts Strukturelles)
   ══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   STARTSEITE
   ══════════════════════════════════════════════ */

/* ── HERO ──────────────────────────────────── */
.ok-hero {
  background:
    radial-gradient(circle at 20% 0%, rgba(169, 183, 162, 0.18), transparent 60%),
    linear-gradient(135deg, var(--green-dark) 0%, var(--green) 100%);
  color: var(--white);
  padding: 72px 20px 88px;
  text-align: center;
}
/* Event-fokussierte Hero-Variante: knapper, CTA-orientiert (kein Suchformular). */
.ok-hero--events { padding: 48px 20px 56px; }
.ok-hero--events .ok-hero-inner { max-width: 880px; }
.ok-hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
@media (max-width: 560px) {
  .ok-hero--events { padding: 32px 14px 40px; }
  .ok-hero-cta .btn { width: 100%; }
}

/* Hero-Plakate (bis zu 3 nebeneinander, auch auf Mobile) */
.ok-hero-posters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 22px auto 26px;
  max-width: 720px;
}
.ok-hero-poster {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  box-shadow: 0 6px 18px rgba(0, 49, 42, 0.20);
  transition: transform .15s, box-shadow .15s;
}
.ok-hero-poster:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 49, 42, 0.30);
}
.ok-hero-poster-img {
  aspect-ratio: 2 / 3;
  background: var(--bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ok-hero-poster-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.ok-hero-poster-empty {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
  padding: 0 6px;
}
.ok-hero-poster-meta {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ok-hero-poster-when {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--green-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ok-hero-poster-title {
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 560px) {
  .ok-hero-posters { gap: 6px; margin: 16px auto 20px; }
  .ok-hero-poster-meta { padding: 6px 8px 8px; }
  .ok-hero-poster-when { font-size: 0.66rem; }
  .ok-hero-poster-title { font-size: 0.74rem; -webkit-line-clamp: 2; }
}
.ok-hero-inner {
  max-width: 760px;
  margin: 0 auto;
}
.ok-hero-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  padding: 5px 16px;
  margin-bottom: 22px;
}
.ok-hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  color: var(--white);
}
.ok-hero h1 span {
  font-family: 'Source Serif 4', serif;
  font-weight: 400;
  font-style: italic;
  color: rgba(255,255,255,.85);
}
.ok-hero-sub {
  font-family: 'Source Serif 4', serif;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.65;
  color: rgba(255,255,255,.85);
  max-width: 560px;
  margin: 0 auto 36px;
}

.ok-hero-search {
  display: flex;
  gap: 10px;
  max-width: 620px;
  margin: 0 auto 28px;
  background: var(--white);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 12px 40px rgba(0, 49, 42, 0.30);
}
.ok-hero-search input[type="search"] {
  flex: 1;
  padding: 14px 18px;
  border: none;
  background: transparent;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  color: var(--text);
}
.ok-hero-search input[type="search"]:focus { outline: none; }
.ok-hero-search input[type="search"]::placeholder { color: var(--text-muted); }
.ok-hero-search button {
  padding: 14px 28px;
  background: var(--green);
  color: var(--white);
  border: 0;
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.ok-hero-search button:hover { background: var(--green-dark); }

.ok-hero-stats {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: rgba(255,255,255,.7);
}
.ok-hero-stats strong { color: var(--white); font-weight: 700; }
.ok-hero-stats .dot { color: rgba(255,255,255,.35); }

@media (max-width: 560px) {
  .ok-hero { padding: 48px 16px 60px; }
  .ok-hero-search { flex-direction: column; padding: 12px; }
  .ok-hero-search input[type="search"] { padding: 12px 14px; }
  .ok-hero-search button { width: 100%; }
}

/* ── HOME-SEKTIONEN ────────────────────────── */
.ok-section {
  padding: 64px 20px;
}
.ok-section--alt {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ── „Was ist Odenwaldklick" auf der Startseite ──── */
.ok-section--was-ist .ok-section-head em {
  font-style: normal;
  color: var(--text-muted);
}
.ok-was-ist-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.ok-was-ist-arg {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 24px;
}
.ok-was-ist-arg h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 8px;
}
.ok-was-ist-arg p {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text);
}
.ok-was-ist-cta {
  max-width: 1100px;
  margin: 28px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
@media (max-width: 800px) {
  .ok-was-ist-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ── FAQ-Akkordion auf der Startseite ──────────── */
.ok-section--faq {
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.ok-faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ok-faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.ok-faq-item > summary {
  cursor: pointer;
  padding: 16px 20px 16px 44px;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  position: relative;
  transition: background .15s, color .15s;
}
.ok-faq-item > summary::-webkit-details-marker { display: none; }
.ok-faq-item > summary::before {
  content: "›";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--green);
  transition: transform .15s;
  line-height: 1;
}
.ok-faq-item[open] > summary::before { transform: translateY(-50%) rotate(90deg); }
.ok-faq-item > summary:hover { background: var(--bg-muted); color: var(--green-dark); }
.ok-faq-item[open] > summary {
  border-bottom: 1px solid var(--border);
  color: var(--green-dark);
}
.ok-faq-answer {
  padding: 16px 20px 20px 44px;
}
.ok-faq-answer p {
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--text);
  font-family: 'Source Serif 4', serif;
}
.ok-section--head {
  padding-top: 32px;
  padding-bottom: 8px;
}
/* Suchformular auf /entdecken (im Kopfbereich) — volle Breite auf PC */
.entdecken-search {
  display: flex;
  gap: 10px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 6px 18px rgba(0, 49, 42, 0.06);
}
.entdecken-search input[type="search"] {
  flex: 1;
  padding: 12px 16px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
}
.entdecken-search input[type="search"]:focus { outline: none; }
.entdecken-search button {
  padding: 12px 24px;
  background: var(--green);
  color: var(--white);
  border: 0;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.entdecken-search button:hover { background: var(--green-dark); }
@media (max-width: 560px) {
  .entdecken-search { flex-direction: column; padding: 8px; }
  .entdecken-search button { width: 100%; }
}
.ok-section--events {
  background: var(--green-light);
  border-top: 1px solid var(--green-mid);
  border-bottom: 1px solid var(--green-mid);
}

/* Featured-Events-Grid auf der Startseite (bis zu 6 Karten, 3-spaltig auf Desktop) */
.home-event-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .home-event-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .home-event-grid { grid-template-columns: 1fr; } }

.home-event-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.home-event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(1, 70, 57, 0.10);
  border-color: var(--green-mid);
}
.home-event-thumb {
  aspect-ratio: 4 / 3;
  background: var(--bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.home-event-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center; /* Plakat-Titel sitzt typisch oben — Top-Crop bewahrt ihn */
  display: block;
}
.home-event-thumb-fallback {
  font-size: 0.86rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.home-event-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.home-event-when {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--green-dark);
  font-variant-numeric: tabular-nums;
}
.home-event-title {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--text);
}
.home-event-where {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.home-event-tags {
  margin: 6px 0 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.home-event-cta {
  text-align: center;
  margin-top: 32px;
}
.ok-section-inner {
  max-width: 1160px;
  margin: 0 auto;
}
.ok-section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}
.ok-section-head h2 {
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.ok-section-head p {
  font-family: 'Source Serif 4', serif;
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ── KACHEL-GRID (Branchen / Gemeinden) ───── */
.ok-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
/* Feste 4-Spalten-Variante (z.B. Gemeinden auf der Startseite) */
.ok-tile-grid--4col {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .ok-tile-grid--4col { grid-template-columns: repeat(3, 1fr); }
}
.ok-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 22px 20px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color .15s, transform .2s, box-shadow .2s;
  position: relative;
  overflow: hidden;
}
.ok-tile:hover {
  border-color: var(--green-mid);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(1, 70, 57, 0.10);
}
.ok-tile-count {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
}
.ok-tile-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  /* iOS-Chrome bricht lange dt. Woerter ohne hyphens nicht zuverlaessig
     um (Safari macht das aggressiver). overflow-wrap: anywhere als
     Sicherheitsnetz, hyphens: auto fuer schoenere Trennung. */
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.ok-tile-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── PAGE LAYOUT ───────────────────────────── */
.page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 16px 20px 48px;
  /* clip statt hidden: erzeugt keinen Scroll-Container, also bleiben
     position:sticky-Elemente in Children (z.B. .firma-edit-actions)
     funktional. Verhindert horizontales Rutschen, falls ein einzelnes
     inneres Element die Viewport-Breite sprengen würde. */
  overflow-x: clip;
}
.page-narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 20px 48px;
  overflow-x: clip;
}

/* ── BREADCRUMB ────────────────────────────── */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb .sep { color: var(--green-mid); }
.breadcrumb .current { color: var(--text); font-weight: 600; }

/* ── ZURÜCK-BUTTON (Detailseiten, Mobile-only) ──
   Auf Desktop reicht die Breadcrumb. Auf Mobile braucht der Nutzer einen
   eindeutigen Weg zurück — vor allem im PWA-Modus, wo es keinen Browser-
   Pfeil gibt. JS macht history.back() wenn der Referrer von der eigenen
   Domain kommt; sonst greift der href-Fallback (Branche oder Start). */
.firma-detail-back { display: none; }
@media (max-width: 919px) {
  .breadcrumb { display: none; }
  .firma-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    padding: 8px 14px 8px 12px;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    transition: border-color .15s, color .15s;
    max-width: 100%;
  }
  .firma-detail-back:hover { border-color: var(--green); color: var(--green); }
  .firma-detail-back .lucide { width: 14px; height: 14px; flex-shrink: 0; }
  .firma-detail-back span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ── PAGE HEADER (Listing-Kopf) ─────────────── */
.listing-header {
  margin-bottom: 32px;
}
.listing-header h1 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 8px;
}
.listing-header .listing-sub {
  font-family: 'Source Serif 4', serif;
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 60ch;
}
.listing-header .listing-count {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--green-light);
  border: 1px solid var(--green-mid);
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 14px;
}
/* Kompaktvariante (z.B. /veranstaltungen): nur H1 + Inline-Link */
.listing-header--compact { margin-bottom: 14px; }
.listing-header--compact h1 {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.listing-header-back {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
}
.listing-header-back:hover { color: var(--green-dark); }

/* ── UNTER-BRANCHEN-FILTER ──────────────────── */
/* Wrapper ist <details>, klappt auf Mobile zu (Default), auf Desktop offen.
   Pattern analog zu .event-filter-more auf /veranstaltungen. */
.subbranch-filter {
  margin: 18px 0 24px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.subbranch-filter > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--green-dark);
  list-style: none;
}
.subbranch-filter > summary::-webkit-details-marker { display: none; }
.subbranch-filter > summary::before {
  content: "›";
  display: inline-block;
  font-weight: 700;
  transition: transform .15s;
  color: var(--green);
}
.subbranch-filter[open] > summary::before { transform: rotate(90deg); }
.subbranch-filter-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--white);
  background: var(--green);
  padding: 3px 10px;
  border-radius: 12px;
}
@media (min-width: 800px) {
  /* Auf Desktop immer aufgeklappt, Toggle-UI verschwindet.
     Browser hidet <details>-Content per User-Agent-CSS (`details:not([open])
     > *:not(summary) { display: none; }`) — mit !important überschreiben,
     plus JS setzt open=true für hartnäckige Browser. */
  .subbranch-filter > summary { display: none; }
  .subbranch-filter { border-top: none; padding-top: 0; margin-top: 0; }
  .subbranch-filter > .subbranch-chips { display: flex !important; }
}
.subbranch-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}
@media (min-width: 800px) {
  .subbranch-chips { margin: 18px 0 28px; }
}
.subbranch-chips a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}
.subbranch-chips a:hover {
  border-color: var(--green);
  color: var(--green);
}
.subbranch-chips a.active {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.subbranch-chips a .count {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.7;
}

/* ── EVENT-FILTER-CHIPS (auf /veranstaltungen) ─────────── */
.event-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 6px;
}
.event-filter-row--secondary { margin-top: 8px; }
.event-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}
.event-filter-chip:hover {
  border-color: var(--green);
  color: var(--green);
}
.event-filter-chip.is-active {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.event-filter-chip .count {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.7;
}
.event-filter-chip.is-active .count { opacity: 0.85; }

/* Eingeklappter Filter-Block für Kategorie + Gemeinde auf /veranstaltungen */
.event-filter-more {
  margin: 12px 0 0;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.event-filter-more > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--green-dark);
  list-style: none;
}
.event-filter-more > summary::-webkit-details-marker { display: none; }
.event-filter-more > summary::before {
  content: "›";
  display: inline-block;
  font-weight: 700;
  transition: transform .15s;
  color: var(--green);
}
.event-filter-more[open] > summary::before { transform: rotate(90deg); }
.event-filter-more-active {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--white);
  background: var(--green);
  padding: 3px 10px;
  border-radius: 12px;
}
.event-filter-row-label {
  margin: 14px 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* Datum-Sektions-Heading auf /veranstaltungen */
.event-section-heading {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--green-dark);
  margin: 28px 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--green-mid);
}
.event-section-heading:first-of-type { margin-top: 32px; }

/* ── FIRMEN-GRID ───────────────────────────── */
.firma-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* ── FIRMEN-KACHEL ─────────────────────────── */
.firma-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}
.firma-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(1, 70, 57, 0.10);
  border-color: var(--green-mid);
}
.firma-card--lokalplus { border-color: var(--green); border-width: 2px; }
.firma-card--lokalplus:hover { box-shadow: 0 16px 40px rgba(1, 70, 57, 0.18); }

/* Business + Business-Light: dezente visuelle Hervorhebung gegenüber Gratis.
   Frank-Vorgabe 2026-05-13: Business-Einträge stehen zwar via Sort oben, sahen
   aber wie Gratis aus — „bevorzugte Position" nicht erkennbar. Subtiler Border
   in Markenfarbe + leichter Schatten. Premium-Slot überschreibt das mit
   stärkerem Akzent. */
.firma-card--business,
.firma-card--business_light {
  border-color: var(--green-mid);
  box-shadow: 0 2px 8px rgba(1, 70, 57, 0.06);
}
.firma-card--business:hover,
.firma-card--business_light:hover {
  border-color: var(--green);
  box-shadow: 0 10px 26px rgba(1, 70, 57, 0.12);
}

/* ── Premium-Position (Migration 026) ──
   Premium-Karten heben sich deutlich ab: dicker Akzentrahmen, leichter
   Box-Shadow, größerer Logo-Bereich. „Empfehlung"-Badge sitzt rechts oben. */
.firma-card--premium {
  border-color: var(--green);
  border-width: 2.5px;
  box-shadow: 0 8px 24px rgba(1, 70, 57, 0.12);
}
.firma-card--premium:hover {
  box-shadow: 0 16px 44px rgba(1, 70, 57, 0.20);
  border-color: var(--green-dark);
}
.firma-card--premium .firma-card-logo {
  background: linear-gradient(135deg, var(--bg) 0%, rgba(1, 70, 57, 0.05) 100%);
  height: 130px;
}
.firma-card--premium .firma-card-title { font-size: 1.15rem; }
/* Redaktionstipp ohne Premium: dezenter Akzent (orange) */
.firma-card--tipp:not(.firma-card--premium) {
  border-color: #f1c891;
}
.firma-card--tipp:not(.firma-card--premium):hover {
  border-color: #e6a14a;
}

/* Badges-Container (oben rechts auf der Karte) */
.firma-card-badges {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  z-index: 2;
  pointer-events: none; /* Klicks gehen aufs darunterliegende a.firma-card-cover */
}
.firma-card-badges .firma-card-badge {
  position: static;
  pointer-events: auto;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}
.firma-card-badge--empfehlung {
  background: var(--green);
  color: var(--white);
}
.firma-card-badge--tipp {
  background: #fdebd2;
  color: #7a4a07;
  border: 1px solid #f1c891;
  box-shadow: 0 2px 6px rgba(122, 74, 7, 0.12);
}
/* Tipp-Kategorien aus Migration 028 — eigene Farb-Palette pro Kategorie */
.firma-card-badge--kinder {
  background: #fde2ec;
  color: #8a1a45;
  border: 1px solid #f5b3c8;
  box-shadow: 0 2px 6px rgba(138, 26, 69, 0.12);
}
.firma-card-badge--uebernachtung {
  background: #dbeafe;
  color: #1e3a8a;
  border: 1px solid #93c5fd;
  box-shadow: 0 2px 6px rgba(30, 58, 138, 0.12);
}
.firma-card-badge--insidertipp {
  background: #ede9fe;
  color: #5b21b6;
  border: 1px solid #c4b5fd;
  box-shadow: 0 2px 6px rgba(91, 33, 182, 0.12);
}
/* Fallback für unbekannte badge_color-Werte */
.firma-card-badge--default {
  background: var(--green-light);
  color: var(--green-dark);
  border: 1px solid var(--green-mid);
}

/* Admin: Tipp-Kategorien-Multi-Auswahl */
.tipp-kategorie-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tipp-kategorie-row {
  display: grid;
  grid-template-columns: 24px 1fr 280px;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.tipp-kategorie-row:hover { border-color: var(--green-mid); background: var(--white); }
.tipp-kategorie-row.is-active {
  border-color: var(--green);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(1, 70, 57, 0.06);
}
.tipp-kategorie-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.tipp-kategorie-meta { min-width: 0; }
.tipp-kategorie-meta .firma-card-badge {
  position: static;
  pointer-events: auto;
  display: inline-block;
}
.tipp-notiz-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.88rem;
  background: var(--white);
}
@media (max-width: 700px) {
  .tipp-kategorie-row {
    grid-template-columns: 24px 1fr;
  }
  .tipp-notiz-input {
    grid-column: 1 / -1;
  }
}

.firma-card-cover {
  display: block;
  text-decoration: none;
  color: inherit;
}
.firma-card-logo {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
}
.firma-card-logo img {
  max-height: 78px;
  max-width: 80%;
  object-fit: contain;
  width: auto;
  height: auto;
  display: block;
}
.firma-card-logo-fallback {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--green-mid);
  font-family: 'Outfit', sans-serif;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--green-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.firma-card-body {
  padding: 18px 20px 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.firma-card-badge {
  position: absolute;
  top: -12px;
  right: 16px;
  background: var(--green);
  color: var(--white);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
}
.firma-card-badge--business {
  background: var(--green-mid);
  color: var(--green-dark);
}
.firma-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.25;
  color: var(--text);
}
.firma-card-title a {
  color: inherit;
  text-decoration: none;
}
.firma-card-title a:hover { color: var(--green); }
.firma-card-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.firma-card-meta .firma-card-sep { color: var(--green-mid); }
.firma-card-branche { font-weight: 600; color: var(--green); }
.firma-card-teaser {
  font-family: 'Source Serif 4', serif;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 10px;
}

/* ── FOOTER-ROW: Actions links, Rating+Status rechts ── */
.firma-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  flex-wrap: wrap;
}
.firma-card-meta-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  font-size: 0.74rem;
  text-align: right;
}
.firma-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  white-space: nowrap;
}
.firma-card-stars { color: #f5a623; letter-spacing: 1px; font-size: 0.84rem; }
.firma-card-rating-num { font-weight: 700; color: var(--text); }

/* ── SUCHE-FORMULAR ────────────────────────── */
.search-form {
  display: flex;
  gap: 10px;
  margin: 12px 0 28px;
}
.search-form input[type="search"] {
  flex: 1;
  padding: 14px 18px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.search-form input[type="search"]:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(1, 70, 57, 0.10);
}
.search-form input[type="search"]::placeholder { color: var(--text-muted); }
.search-form button {
  padding: 14px 26px;
  background: var(--green);
  color: var(--white);
  border: 2px solid var(--green);
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.search-form button:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Kompakte Variante für In-Segment-Suche */
.search-form--inline {
  margin: 4px 0 18px;
  align-items: center;
}
.search-form--inline input[type="search"] {
  padding: 10px 14px;
  font-size: 0.92rem;
}
.search-form--inline button {
  padding: 10px 18px;
  font-size: 0.88rem;
}
.search-form-clear {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  align-self: center;
  white-space: nowrap;
}
.search-form-clear:hover {
  color: var(--green);
  border-bottom-color: var(--green-mid);
}
@media (max-width: 560px) {
  /* In-Segment- und Listing-Suche bleiben auf einer Zeile, Button kompakt
     (kein Vollbreit-CTA). Hero-Suche auf der Startseite hat eigene Regeln. */
  .search-form { gap: 8px; }
  .search-form input[type="search"] { padding: 11px 14px; font-size: 0.92rem; }
  .search-form button { padding: 11px 16px; font-size: 0.86rem; }
  .search-form--inline input[type="search"] { padding: 9px 12px; font-size: 0.88rem; }
  .search-form--inline button { padding: 9px 14px; font-size: 0.82rem; }
  .search-form-clear { align-self: flex-start; margin-top: 2px; }
}

/* ── MOBILE: Kompaktes 3er-Grid wie meinOrt-App ───
   Tiles werden quadratisch, Anzahl als kleine Badge oben rechts,
   Titel zentriert. Greift für Branchen- UND Gemeinden-Grid.            */
@media (max-width: 640px) {
  .ok-tile-grid,
  .ok-tile-grid--4col {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .ok-tile {
    padding: 14px 8px;
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    /* Mobile: enger Raum → Sicherheitsnetz fuer lange Woerter wirkt nur
       hier wirklich. Auf Desktop sind die Tiles breit genug. */
    word-break: break-word;
  }
  .ok-tile-count {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-muted);
  }
  /* "Firma/Firmen" ausblenden — Mobile-Badge zeigt nur die Zahl */
  .ok-tile-count-word { display: none; }
  .ok-tile-title {
    font-size: 0.78rem;
    line-height: 1.25;
  }
  .ok-tile-meta { display: none; } /* Landkreis weg auf Mobile */

  /* Sektionen kompakter, weniger Luft oben */
  .ok-section { padding: 32px 16px; }
  .ok-section-head { margin-bottom: 20px; }
  .ok-section-head h2 { font-size: 1.25rem; }
  .ok-section-head p { font-size: 0.85rem; line-height: 1.5; }
}

/* Notausgang für sehr schmale Geräte (alte iPhones SE u.ä.) */
@media (max-width: 360px) {
  .ok-tile-grid,
  .ok-tile-grid--4col { grid-template-columns: repeat(2, 1fr); }
}

/* ── FIRMEN-KACHEL: QUICK-ACTIONS (im Footer links) ── */
.firma-card-actions {
  display: flex;
  gap: 6px;
}
.firma-card-action {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--green-light);
  color: var(--green);
  text-decoration: none;
  transition: background .15s, color .15s, transform .15s;
}
.firma-card-action:hover {
  background: var(--green);
  color: var(--white);
  transform: translateY(-1px);
}
.firma-card-action .lucide {
  width: 14px;
  height: 14px;
}

/* ── EMPTY STATE ───────────────────────────── */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  background: var(--white);
  border: 1.5px dashed var(--border);
  border-radius: 14px;
  color: var(--text-muted);
}
.empty-state h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.empty-state p {
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ── PAGINATION ────────────────────────────── */
.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}
.pagination a:hover { border-color: var(--green); color: var(--green); }
.pagination .current {
  background: var(--green);
  border-color: var(--green);
  color: var(--white);
}
.pagination .disabled { opacity: 0.4; cursor: not-allowed; }

/* ══════════════════════════════════════════════
   FIRMEN-DETAILSEITE
   ══════════════════════════════════════════════ */

.firma-detail {
  max-width: 1160px;
  margin: 0 auto;
}

/* ── 2-SPALTEN-LAYOUT (Desktop) ────────────── */
.firma-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 920px) {
  .firma-detail-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
  }
  .firma-detail-sidebar {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}
.firma-detail-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
@media (max-width: 919px) {
  .firma-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 0;
    margin-bottom: 16px;
    order: -1; /* Kontakt/Social/Öffnungszeiten/Standort vor Beschreibung */
  }
}

/* ── HEADER ────────────────────────────────── */
.firma-detail-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: start;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 16px;
  position: relative;
}
.firma-detail-logo {
  width: 140px;
  height: 110px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  flex-shrink: 0;
  overflow: hidden;
}
.firma-detail-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.firma-detail-eyebrow {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 6px;
}
.firma-detail-laden-hint {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  margin-bottom: 8px;
  border: 1px solid;
}
.firma-detail-laden-hint--b2b {
  color: #6e3a00;
  background: #fff5e6;
  border-color: #f0c789;
}
.firma-detail-laden-hint--none {
  color: #4a4a4a;
  background: #f1f1f1;
  border-color: #d4d4d4;
}
.firma-detail-headline h1 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.firma-detail-person {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 12px;
}
.firma-detail-addr {
  font-size: 0.92rem;
  color: var(--text);
  margin-bottom: 12px;
}
.firma-detail-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--text);
  flex-wrap: wrap;
}
.firma-detail-rating strong { font-weight: 700; }
.firma-detail-rating-count { color: var(--text-muted); }
.firma-detail-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.firma-detail-stars .lucide,
.firma-review-stars .lucide {
  width: 1.05em;
  height: 1.05em;
  stroke-width: 1.5;
}
.firma-detail-stars .star-filled,
.firma-review-stars .star-filled { color: #f5a623; fill: #f5a623; }
.firma-detail-stars .star-empty,
.firma-review-stars .star-empty  { color: var(--green-mid); fill: none; }

@media (max-width: 640px) {
  .firma-detail-header {
    grid-template-columns: 1fr;
    padding: 24px;
    gap: 20px;
  }
  .firma-detail-logo {
    width: 100%;
    height: 100px;
  }
}

/* ── MARKEN INLINE (als Meta-Line, ohne eigene Box) ── */
.firma-detail-meta-line .firma-marken {
  gap: 8px;
  margin-top: 8px;
}
.firma-detail-prose--marken {
  margin-top: 8px;
  font-size: 0.92rem;
  color: var(--text-muted);
}

/* ── LEISTUNGSMERKMALE (Icon-Liste) ─────────── */
.firma-leistungen-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 8px 0 0;
  padding: 0;
}
.firma-leistungen-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 0.84rem;
  color: var(--text);
}
.firma-leistung-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ── BESCHREIBUNG: Listen-Einrückung ─────────── */
.firma-detail-prose ul,
.firma-detail-prose ol {
  margin: 12px 0;
  padding-left: 24px;
}
.firma-detail-prose ul { list-style: disc; }
.firma-detail-prose ol { list-style: decimal; }
.firma-detail-prose li {
  margin-bottom: 6px;
  line-height: 1.6;
}
.firma-detail-prose p { margin-bottom: 12px; }
.firma-detail-prose p:last-child { margin-bottom: 0; }
.firma-detail-prose a { color: var(--green); text-decoration: underline; }
.firma-detail-prose a:hover { color: var(--green-dark); }

/* ── DIREKTLINK-CTA (im Header, prominent) ──── */
.firma-detail-direktlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 22px;
  background: var(--green);
  color: var(--white);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  transition: background .15s, transform .15s;
}
.firma-detail-direktlink:hover {
  background: var(--green-dark);
  color: var(--white);
  transform: translateY(-1px);
}
.firma-detail-direktlink .lucide { width: 16px; height: 16px; }

/* ── ECHTZEIT-STATUS IM HEADER (oben rechts) ── */
.firma-detail-status {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.84rem;
  z-index: 1;
}
@media (max-width: 640px) {
  .firma-detail-status {
    position: static;
    margin-bottom: 12px;
    align-self: flex-start;
  }
}
.firma-detail-status strong { font-weight: 700; }
.firma-detail-status span { color: inherit; opacity: 0.8; }
.firma-detail-status--open {
  background: rgba(10, 127, 46, 0.10);
  color: #0a7f2e;
}
.firma-detail-status--closed {
  background: var(--red-light);
  color: var(--red);
}

/* ── ECHTZEIT-STATUS IN FIRMEN-KACHEL ────── */
.firma-card-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.74rem;
  font-weight: 600;
}
.firma-card-status--open {
  background: rgba(10, 127, 46, 0.10);
  color: #0a7f2e;
}
.firma-card-status--closed {
  background: var(--red-light);
  color: var(--red);
}
.firma-card-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.firma-card-status--open  .firma-card-status-dot { background: #0a7f2e; }
.firma-card-status--closed .firma-card-status-dot { background: var(--red); }

/* ── SOCIAL-MEDIA-LINKS ────────────────────── */
.firma-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.firma-social-link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--green-light);
  color: var(--green);
  text-decoration: none;
  transition: background .15s, color .15s, transform .15s;
}
.firma-social-link:hover {
  background: var(--green);
  color: var(--white);
  transform: translateY(-1px);
}
.social-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ── ECHTZEIT-STATUS (Geöffnet/Geschlossen) ── */
.firma-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.86rem;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.firma-status strong { font-weight: 700; }
.firma-status span { color: var(--text-muted); }
.firma-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.firma-status--open {
  background: rgba(10, 127, 46, 0.08);
  color: #0a7f2e;
}
.firma-status--open .firma-status-dot {
  background: #0a7f2e;
  box-shadow: 0 0 0 3px rgba(10, 127, 46, 0.15);
}
.firma-status--closed {
  background: var(--red-light);
  color: var(--red);
}
.firma-status--closed .firma-status-dot {
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(184, 50, 50, 0.15);
}

/* ── SIDEBAR-KARTEN ────────────────────────── */
.firma-side-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
}
.firma-side-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.firma-side-title .lucide {
  width: 16px;
  height: 16px;
  color: var(--green);
}
.firma-side-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  padding: 0;
}
.firma-side-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.4;
  word-break: break-word;
}
.firma-side-list a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}
.firma-side-list a:hover {
  color: var(--green);
  border-bottom-color: var(--green-mid);
}
.firma-side-list small { color: var(--text-muted); font-weight: 500; }
.firma-side-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
}
.firma-side-icon .lucide { width: 16px; height: 16px; }

.firma-side-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.firma-side-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  background: var(--green);
  color: var(--white);
  border: 1.5px solid var(--green);
  border-radius: 10px;
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  transition: background .15s, border-color .15s, color .15s;
}
.firma-side-btn:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: var(--white);
}
.firma-side-btn .lucide { width: 14px; height: 14px; }
.firma-side-btn--ghost {
  background: transparent;
  color: var(--green);
}
.firma-side-btn--ghost:hover {
  background: var(--green-light);
  color: var(--green-dark);
}

/* ── QUICK-ACTIONS (alt — wird auf der neuen Seite nicht mehr verwendet) ── */
.firma-detail-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 28px;
}
.firma-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s, transform .2s, box-shadow .2s;
}
.firma-action:hover {
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(1, 70, 57, 0.08);
}
.firma-action-icon {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--green);
  flex-shrink: 0;
}
.firma-action-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.firma-action-value {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}

/* ── SEKTIONEN ─────────────────────────────── */
.firma-detail-section {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 28px 32px;
  margin-bottom: 16px;
}
.firma-detail-section-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 16px;
  color: var(--text);
}
.firma-detail-lead {
  font-family: 'Source Serif 4', serif;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 12px;
}
.firma-detail-prose {
  font-family: 'Source Serif 4', serif;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text);
}
.firma-detail-meta-line {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-top: 14px;
}
.firma-detail-meta-line strong {
  color: var(--text);
  font-weight: 700;
}
.firma-detail-source {
  margin-top: 12px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

@media (max-width: 640px) {
  .firma-detail-section { padding: 22px 22px; }
}

/* ── ÖFFNUNGSZEITEN ────────────────────────── */
.firma-hours {
  width: 100%;
  border-collapse: collapse;
}
.firma-hours th, .firma-hours td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
.firma-hours th {
  font-weight: 600;
  color: var(--text-muted);
  width: 40%;
}
.firma-hours tr:last-child th, .firma-hours tr:last-child td { border-bottom: 0; }

/* ── MARKEN ────────────────────────────────── */
.firma-marken {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.firma-marke {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
a.firma-marke:hover { border-color: var(--green); background: var(--green-light); color: var(--green-dark); }
.firma-marke img { max-height: 18px; max-width: 60px; object-fit: contain; }

/* ── FAQ-AKKORDEON (native <details>) ──────── */
.firma-faq { display: flex; flex-direction: column; gap: 8px; }
.firma-faq-item {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  overflow: hidden;
}
.firma-faq-item[open] { border-color: var(--green-mid); background: var(--white); }
.firma-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.firma-faq-item summary::-webkit-details-marker { display: none; }
.firma-faq-item summary::after {
  content: '+';
  font-size: 1.3rem;
  color: var(--green);
  font-weight: 400;
  transition: transform .2s;
}
.firma-faq-item[open] summary::after { content: '−'; }
.firma-faq-answer {
  padding: 0 18px 18px;
  font-family: 'Source Serif 4', serif;
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--text);
}

/* ── REVIEWS ───────────────────────────────── */
.firma-reviews-note {
  margin: -6px 0 14px;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}
.firma-reviews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.firma-review {
  padding: 18px 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.firma-review-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.firma-review-author { font-weight: 700; font-size: 0.9rem; color: var(--text); }
.firma-review-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}
.firma-review-text {
  font-family: 'Source Serif 4', serif;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 10px;
}
.firma-review-time { font-size: 0.78rem; color: var(--text-muted); }

/* ── KONTAKT-STUB (Karte ist jetzt eingebettet, siehe unten) ── */
.firma-contact-stub {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

/* ── KARTE: Click-to-Load (Leaflet/OSM) ──────────
   Initial: Platzhalter mit Hinweis + Button. Erst nach Klick
   werden Tiles von tile.openstreetmap.org geladen — DSGVO-friendly. */
.firma-map-placeholder {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.firma-map-overlay {
  text-align: center;
  padding: 20px 18px;
  max-width: 280px;
}
.firma-map-overlay .lucide {
  width: 36px;
  height: 36px;
  color: var(--green);
  margin: 0 auto 10px;
  display: block;
}
.firma-map-info {
  margin-bottom: 14px;
}
.firma-map-info strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.firma-map-info span {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.firma-map-load-btn {
  cursor: pointer;
  font-family: inherit;
  border: 0;
}
.firma-map-canvas {
  width: 100%;
  height: 280px;
  background: var(--bg);
}
/* Leaflet-Popups stilistisch an die Site angleichen */
.leaflet-popup-content { font-family: 'Outfit', sans-serif; font-size: 0.88rem; line-height: 1.45; }
.leaflet-popup-content strong { color: var(--green-dark); }

/* YouTube Click-to-Load — Vorschaubild mit Play-Button im 16:9-Container.
   Erst nach Klick wird YouTube-Iframe (nocookie-Variante) eingebunden. */
.firma-video-placeholder {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  cursor: pointer;
}
.firma-video-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.firma-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
  text-align: center;
  padding: 20px;
  color: #fff;
  pointer-events: none;
}
.firma-video-play {
  pointer-events: auto;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: transform .12s ease;
}
.firma-video-play:hover { transform: scale(1.08); }
.firma-video-play svg {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.firma-video-info {
  margin: 0;
  max-width: 320px;
}
.firma-video-info strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.firma-video-info span {
  display: block;
  font-size: 0.78rem;
  opacity: .85;
  line-height: 1.45;
}
.firma-video-placeholder.firma-video-loaded { aspect-ratio: 16 / 9; cursor: default; }
.firma-video-placeholder iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ── Event-Detailseite ─────────────────────────────────────────── */
.breadcrumb {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--green-dark); text-decoration: underline; }
.breadcrumb .sep { margin: 0 8px; color: var(--border); }

.event-detail .event-hero {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 32px;
  margin-bottom: 32px;
  align-items: start;
}
@media (max-width: 720px) {
  .event-detail .event-hero { grid-template-columns: 1fr; gap: 20px; }
}
.event-hero-plakat {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.event-hero-plakat img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
.event-hero-plakat-credit {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted, #6b7280);
  text-align: center;
  line-height: 1.3;
  width: 100%;
}
.event-hero-info h1 {
  margin: 8px 0 14px;
  line-height: 1.15;
}
.event-kategorie-badge {
  display: inline-block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg-muted);
  color: var(--text);
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 600;
}
.event-when {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--green-dark);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.event-when .lucide,
.event-organizer-line .lucide {
  width: 18px;
  height: 18px;
}
.event-organizer-line {
  margin: 0;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
}
.event-organizer-line a { color: var(--text); font-weight: 600; }

/* Teilen-Block auf der Veranstaltungs-Detailseite.
   Mobile: Klick auf Summary öffnet natives OS-Share-Sheet (Web Share API).
   Desktop / no-JS: <details> klappt auf, zeigt explizite Buttons. */
.event-share {
  margin-top: 16px;
  display: inline-block;
}
.event-share[open] .event-share-toggle::after { transform: rotate(180deg); }
.event-share-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--white);
  border: 1.5px solid var(--green);
  border-radius: 8px;
  color: var(--green-dark);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background .15s;
}
.event-share-toggle::-webkit-details-marker { display: none; }
.event-share-toggle::after {
  content: "▾";
  font-size: 0.7rem;
  margin-left: 4px;
  transition: transform .15s;
}
.event-share-toggle:hover { background: var(--green-light); }
.event-share-toggle .lucide { width: 14px; height: 14px; }
.event-share-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.event-share-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .12s, background .12s, color .12s;
}
.event-share-btn:hover { border-color: var(--green); color: var(--green-dark); }
.event-share-btn:disabled { opacity: 0.6; cursor: default; }
.event-share-btn--whatsapp:hover { background: #25d366; color: #fff; border-color: #25d366; }
.event-share-btn--facebook:hover { background: #1877f2; color: #fff; border-color: #1877f2; }
.event-share-btn--mail:hover     { background: var(--green); color: #fff; border-color: var(--green); }
/* Wenn Web Share API verfügbar ist und der User auf Mobile klickt, öffnet das
   native OS-Share-Sheet. Das Dropdown bleibt trotzdem sichtbar (falls der User
   doch lieber explizit wählt) — Web Share läuft "on top". */

.event-status-banner {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.92rem;
}
.event-status-banner--cancelled    { background: #fde2e2; color: #8a1a1a; border: 1px solid #f3a8a8; }
.event-status-banner--postponed    { background: #fdebd2; color: #7a4a07; border: 1px solid #f1c891; }
.event-status-banner--rescheduled  { background: #e2efff; color: #1a4a8a; border: 1px solid #aac6ee; }

.event-detail-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
}
@media (max-width: 900px) {
  .event-detail-grid { grid-template-columns: 1fr; }
}

.event-detail-section {
  margin-bottom: 28px;
}
.event-detail-section h2 {
  font-size: 1.15rem;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.event-detail-prose { line-height: 1.6; }
.event-detail-prose p { margin: 0 0 1em; }
.event-detail-prose ul, .event-detail-prose ol { padding-left: 1.4em; }

.event-meta-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.event-meta-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.45;
}
.event-doors-open {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.86rem;
  color: var(--text-muted);
}
.event-meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: var(--bg-muted);
  border-radius: 6px;
  color: var(--green-dark);
}
.event-meta-icon .lucide { width: 16px; height: 16px; }

.event-side-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 16px;
}
.event-side-title {
  font-size: 0.95rem;
  margin: 0 0 14px;
  color: var(--text);
}
.event-organizer {
  display: flex;
  gap: 14px;
  align-items: center;
}
.event-organizer-logo {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
}
.event-organizer-logo img { max-width: 100%; max-height: 100%; }
.event-organizer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.event-organizer-list li { line-height: 1.4; }

/* ── Events-Liste auf Firmenprofil ─────────────────────────────── */
.firma-events-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.firma-event-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.firma-event-card:hover {
  border-color: var(--green);
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  transform: translateY(-1px);
}
.firma-event-link {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  padding: 10px;
  text-decoration: none;
  color: inherit;
  align-items: center;
}
@media (max-width: 560px) {
  .firma-event-link { grid-template-columns: 56px 1fr; gap: 10px; }
}
.firma-event-thumb {
  width: 80px;
  height: 110px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
@media (max-width: 560px) {
  .firma-event-thumb { width: 56px; height: 78px; }
}

/* Akkordeon: Default-versteckt, mit zusätzlicher --shown-Klasse wieder sichtbar */
.firma-events-list .firma-event-card--hidden { display: none; }
.firma-events-list .firma-event-card--hidden.firma-event-card--shown { display: block; }
.firma-events-more-btn {
  margin-top: 12px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 6px;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.firma-events-more-btn:hover {
  border-color: var(--green);
  color: var(--green-dark);
  background: var(--bg-muted);
}
.firma-event-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.firma-event-thumb-fallback {
  color: var(--text-muted);
}
.firma-event-thumb-fallback .lucide { width: 32px; height: 32px; }

.firma-event-meta { min-width: 0; }
.firma-event-title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
.firma-event-when,
.firma-event-where {
  margin: 0 0 4px;
  font-size: 0.85rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.firma-event-when .lucide,
.firma-event-where .lucide {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.firma-event-tags {
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.firma-event-status {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.firma-event-status--cancelled   { background: #fde2e2; color: #8a1a1a; }
.firma-event-status--postponed   { background: #fdebd2; color: #7a4a07; }
.firma-event-status--rescheduled { background: #e2efff; color: #1a4a8a; }

/* ──────────────────────────────────────────────────────────────────
   FIRMA-HUB (Mein Eintrag · Übersicht mit Boxen)
   2-Spalten-Grid mit responsivem Fallback. Jede Box hat Head + Body
   + Edit-Link am Ende rechts. Box „--wide" geht über beide Spalten
   (z.B. Veranstaltungen).
   ────────────────────────────────────────────────────────────────── */
.firma-hub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 800px) {
  .firma-hub-grid { grid-template-columns: 1fr; }
}

.firma-hub-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  /* min-width: 0 verhindert, dass lange Inhalte (URLs, Code, Tag-Listen)
     den Grid-Track sprengen und das Layout horizontal scrollen lassen. */
  min-width: 0;
}
.firma-hub-box--wide   { grid-column: 1 / -1; }
.firma-hub-box--coming { opacity: .65; }
.firma-hub-box--locked {
  opacity: .75;
  background: repeating-linear-gradient(
    -45deg,
    var(--bg) 0,
    var(--bg) 12px,
    var(--bg-muted) 12px,
    var(--bg-muted) 14px
  );
}
.firma-hub-box--locked .firma-hub-edit-link {
  color: var(--text-muted);
}
.firma-hub-locked-badge {
  display: inline-block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  background: var(--green-dark);
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
}

.firma-hub-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.firma-hub-box-head h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
}
.firma-hub-count {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 400;
  background: var(--bg-muted);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 6px;
}

/* Empty / Help-Texte in den Boxen */
.firma-hub-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0 0 12px;
  line-height: 1.45;
}
.firma-hub-help {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 6px 0 0;
  line-height: 1.4;
}
.firma-hub-prose {
  margin: 0 0 12px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text);
}

/* Edit-Link unten rechts in der Box */
.firma-hub-edit-link {
  margin-top: auto;
  align-self: flex-end;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--green-dark);
  text-decoration: none;
  padding-top: 10px;
}
.firma-hub-edit-link:hover { text-decoration: underline; }
.firma-hub-edit-link--disabled {
  color: var(--text-muted);
  font-style: italic;
  cursor: default;
}

/* Key-Value-Liste (Stammdaten-Box) */
.firma-hub-kv {
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  font-size: 0.9rem;
}
.firma-hub-kv dt {
  color: var(--text-muted);
  font-weight: 600;
}
.firma-hub-kv dd {
  margin: 0;
  /* Lange URLs / Mailadressen ohne Trennzeichen brechen sonst die Box. */
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Liste in Boxen (Branche, Organisationen, Events) */
.firma-hub-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.9rem;
}

/* Tag-Badges (Marken, Suchbegriffe, Leistungsmerkmale, LokalPlus) */
.firma-hub-tag-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin: 0 0 6px;
}
.firma-hub-tags {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.firma-hub-tag {
  display: inline-block;
  font-size: 0.78rem;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--bg-muted);
  color: var(--text);
  white-space: nowrap;
}
.firma-hub-tag--marken    { background: #e8f5e8; color: #2d5016; border: 1px solid #c5e3c5; }
.firma-hub-tag--suche     { background: #e2efff; color: #1a4a8a; border: 1px solid #aac6ee; }
.firma-hub-tag--leist     { background: #fdebd2; color: #7a4a07; border: 1px solid #f1c891; }
.firma-hub-tag--lokalplus { background: var(--green); color: #fff; }
.firma-hub-tag--more      { background: transparent; color: var(--text-muted); font-style: italic; }

/* Leistungsmerkmale-Chips mit Icon (Hub-Box) */
.firma-hub-leist-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.firma-hub-leist-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fdebd2;
  color: #7a4a07;
  border: 1px solid #f1c891;
  border-radius: 12px;
  padding: 3px 10px 3px 6px;
  font-size: 0.78rem;
}
.firma-hub-leist-chip img {
  width: 16px;
  height: 16px;
  display: block;
  object-fit: contain;
}

/* Logo-Box */
.firma-hub-logo-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.firma-hub-logo-thumb {
  flex: 0 0 110px;
  width: 110px;
  height: 110px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: hidden;
}
.firma-hub-logo-thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.firma-hub-logo-empty {
  color: var(--text-muted);
  font-size: 0.78rem;
  text-align: center;
}
.firma-hub-logo-actions { flex: 1; min-width: 0; }
.firma-hub-logo-actions input[type="file"] {
  font-size: 0.82rem;
  margin-bottom: 8px;
  max-width: 100%;
}

/* Kleine Button-Variante */
.btn--sm { padding: 5px 12px !important; font-size: 0.82rem !important; }

/* ──────────────────────────────────────────────────────────────────
   TAG-EDITOR (Marken & Suchbegriffe)
   ────────────────────────────────────────────────────────────────── */
.tag-editor {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.tag-editor-input-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tag-editor-input {
  flex: 1;
  min-width: 200px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 0.92rem;
}
.tag-editor-input:focus { outline: 2px solid var(--green); outline-offset: -2px; }
.tag-editor-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 4px;
}
.tag-editor-list:empty { margin-top: 0; }
.tag-editor-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 4px 4px 4px 12px;
  font-size: 0.86rem;
  line-height: 1.2;
}
.tag-editor-remove {
  background: var(--bg-muted);
  border: 0;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.tag-editor-remove:hover { background: var(--red); color: #fff; }

.tag-editor-suggestions {
  margin-top: 16px;
  padding: 12px 14px;
  background: #f5f9f5;
  border: 1px solid #c5e3c5;
  border-radius: 8px;
}
.tag-editor-suggestion-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag-editor-suggestion {
  background: #e8f5e8;
  color: #2d5016;
  border: 1px solid #a8d5a8;
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background .12s ease;
}
.tag-editor-suggestion:hover { background: #c5e3c5; }
.tag-editor-suggestion--used {
  opacity: 0.45;
  cursor: default;
  background: #e8f5e8;
}
.tag-editor-suggestion--used:hover { background: #e8f5e8; }

/* ──────────────────────────────────────────────────────────────────
   FAQ-EDITOR (Mitglieder-Bereich · Häufige Fragen)
   ────────────────────────────────────────────────────────────────── */
.faq-editor { display: flex; flex-direction: column; gap: 14px; }
.faq-row {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px 16px;
}
.faq-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.faq-row-num {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.faq-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.faq-row-actions .btn:disabled { opacity: 0.35; cursor: not-allowed; }
.faq-row label { margin-top: 10px; }
.faq-row input[type="text"],
.faq-row textarea { background: #fff; }

/* Hub-Veranstaltungen-Vorschau (3 Zeilen, kompakt) */
.hub-event-preview {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.hub-event-preview li {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  line-height: 1.35;
}
.hub-event-preview li:last-child { border-bottom: 0; }
.hub-event-preview li.is-cancelled { opacity: 0.55; }
.hub-event-when {
  font-size: 0.8rem;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.hub-event-title {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ──────────────────────────────────────────────────────────────────
   MEMBER-EVENT-GRID (Mitglieder-Bereich · Veranstaltungen-Sub-Page)
   Eigener Namespace `.mem-event-*` — kollidierte vorher mit dem
   öffentlichen .firma-event-card auf der Profilseite (Z. ~1671).
   ────────────────────────────────────────────────────────────────── */
.mem-event-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.mem-event-card {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color .15s, background .15s;
}
.mem-event-card:hover { border-color: var(--green-mid); }
.mem-event-card.is-cancelled { opacity: 0.55; }
.mem-event-card-thumb {
  width: 80px;
  height: 110px;
  background: var(--bg-muted);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mem-event-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.mem-event-card-thumb-empty {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
  padding: 0 4px;
}
.mem-event-card-body { min-width: 0; }
.mem-event-card-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.mem-event-card-when {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--green-dark);
}
.mem-event-card-title {
  margin: 0 0 4px;
  font-size: 1.02rem;
  line-height: 1.3;
}
.mem-event-card-location { margin: 0; color: var(--text-muted); }
.mem-event-card-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
@media (max-width: 640px) {
  .mem-event-card {
    grid-template-columns: 60px 1fr;
    grid-template-areas: "thumb body" "actions actions";
  }
  .mem-event-card-thumb { width: 60px; height: 82px; grid-area: thumb; }
  .mem-event-card-body { grid-area: body; }
  .mem-event-card-actions {
    grid-area: actions;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* ══════════════════════════════════════════════
   GALERIE (Impressionen) + LIGHTBOX
   ══════════════════════════════════════════════ */

.firma-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.firma-galerie-item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: var(--bg);
  cursor: zoom-in;
  text-decoration: none;
}
.firma-galerie-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}
.firma-galerie-item:hover img {
  transform: scale(1.04);
}
.firma-galerie-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 10px 8px;
  font-size: 0.76rem;
  color: white;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  line-height: 1.35;
}

/* Lightbox-Container — wird durch JS sichtbar gemacht */
.firma-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: none;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 40px 20px;
}
.firma-lightbox.open { display: flex; }
.firma-lightbox img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
}
.firma-lightbox-caption {
  color: white;
  font-size: 0.92rem;
  margin-top: 16px;
  text-align: center;
  max-width: 720px;
  line-height: 1.5;
}
.firma-lightbox-close,
.firma-lightbox-prev,
.firma-lightbox-next {
  position: absolute;
  background: rgba(255,255,255,0.12);
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  font-family: inherit;
}
.firma-lightbox-close:hover,
.firma-lightbox-prev:hover,
.firma-lightbox-next:hover {
  background: rgba(255,255,255,0.25);
}
.firma-lightbox-close { top: 16px; right: 16px; }
.firma-lightbox-prev  { left: 16px;  top: 50%; transform: translateY(-50%); }
.firma-lightbox-next  { right: 16px; top: 50%; transform: translateY(-50%); }
.firma-lightbox-counter {
  color: white;
  position: absolute;
  top: 22px;
  left: 22px;
  font-size: 0.84rem;
  opacity: 0.65;
  font-weight: 600;
  letter-spacing: 0.05em;
}
@media (max-width: 640px) {
  .firma-galerie { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
  .firma-lightbox-prev  { left: 8px; }
  .firma-lightbox-next  { right: 8px; }
  .firma-lightbox-close { top: 8px; right: 8px; }
}

/* ══════════════════════════════════════════════
   KONTAKTFORMULAR
   ══════════════════════════════════════════════ */

.kontakt-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kontakt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.kontakt-form label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.kontakt-form input[type="text"],
.kontakt-form input[type="email"],
.kontakt-form input[type="tel"],
.kontakt-form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  font-family: inherit;
  font-size: 0.94rem;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.kontakt-form textarea {
  resize: vertical;
  min-height: 120px;
  font-family: 'Source Serif 4', serif;
  line-height: 1.55;
}
.kontakt-form input:focus,
.kontakt-form textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(1, 70, 57, 0.10);
}
.kontakt-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.kontakt-disclaimer {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 4px 0 0;
}
.kontakt-disclaimer a { color: var(--green); }
.kontakt-success {
  background: rgba(10, 127, 46, .08);
  color: #0a7f2e;
  border: 1.5px solid #0a7f2e;
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 0.95rem;
}
.kontakt-errors {
  background: var(--red-light);
  color: var(--red);
  border: 1.5px solid var(--red);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 0.9rem;
}
.kontakt-errors p { margin: 0; }
.kontakt-errors p + p { margin-top: 4px; }
.kontakt-submit { align-self: flex-start; }

@media (max-width: 640px) {
  .kontakt-row { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   BUTTON-MODIFIER (BEM-Stil, nutzt .btn aus common.css)
   ══════════════════════════════════════════════ */
.btn--primary {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}
.btn--primary:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: var(--white);
}
.btn--ghost {
  background: transparent;
  color: var(--green);
  border-color: var(--green);
}
.btn--ghost:hover {
  background: var(--green-light);
  color: var(--green-dark);
}
/* Helle Ghost-Variante fuer dunkle Hintergruende (Hero, CTA-Band) */
.btn--ghost-light {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,.55);
}
.btn--ghost-light:hover {
  background: rgba(255,255,255,.12);
  border-color: var(--white);
  color: var(--white);
}
.btn--danger {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}
.btn--danger:hover {
  background: #8c1f1f;
  border-color: #8c1f1f;
  color: var(--white);
}

/* Konto-Section: Danger-Variante (Konto löschen) hat roten Akzent */
.konto-section--danger {
  border: 1.5px solid var(--red);
  border-radius: 12px;
  padding: 22px 24px;
  background: rgba(184, 50, 50, 0.04);
}
.konto-section--danger h2 {
  color: var(--red);
}

/* Meine Firmen + Business-Buchung */
.konto-firmen-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.konto-firma-row {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
}
.konto-firma-head {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
/* Title nimmt den verfügbaren Platz, Action springt rechts */
.konto-firma-title { flex: 1 1 auto; min-width: 0; }
.konto-firma-action { margin-left: auto; }

/* Komplette gratis-Zeile ist <details>: summary = head, content = form */
.konto-firma-details > summary {
  cursor: pointer;
  list-style: none;
}
.konto-firma-details > summary::-webkit-details-marker { display: none; }
.konto-firma-details[open] > summary .konto-firma-action::after {
  content: " ▴";
}
.konto-firma-details:not([open]) > summary .konto-firma-action::after {
  content: " ▾";
}
@media (max-width: 600px) {
  /* Auf Mobile: Action rutscht in eigene Zeile, volle Breite */
  .konto-firma-head { gap: 8px; }
  .konto-firma-action {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}

.konto-business-form {
  margin-top: 14px;
  padding: 18px;
  background: var(--white);
  border: 1.5px solid var(--green-mid);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Sektions-Headlines im Buchungs-Form trennen die Blöcke optisch */
.konto-business-form .konto-form-section {
  margin: 14px 0 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--green-dark);
}
.konto-business-form .konto-form-section:first-of-type {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}
/* kontakt-row innerhalb des Buchungs-Forms greift auf .auth-form .kontakt-row */

/* Filialen-Checkboxen */
.konto-filialen-fieldset {
  border: 1px dashed var(--green-mid);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 8px 0 4px;
  background: rgba(1, 70, 57, 0.02);
}
.konto-filialen-fieldset legend {
  font-size: 0.84rem;
  font-weight: 600;
  padding: 0 6px;
}
.konto-filiale-option {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  font-size: 0.92rem;
}
.konto-filiale-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.konto-business-preis {
  font-size: 1.05rem;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.konto-business-features {
  margin: 0 0 6px;
  line-height: 1.5;
}

/* Zahlungsweise — radio cards nebeneinander */
.konto-zahlung-fieldset {
  border: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.konto-zahlung-fieldset legend {
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 6px;
  padding: 0;
}
.konto-zahlung-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  background: var(--bg);
  transition: border-color .15s, background .15s;
}
.konto-zahlung-option:hover { border-color: var(--green-mid); background: var(--white); }
.konto-zahlung-option input[type="radio"] { margin-top: 3px; }
.konto-zahlung-option input[type="radio"]:checked ~ * { color: var(--text); }
.konto-zahlung-option:has(input:checked) {
  border-color: var(--green);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(1, 70, 57, 0.08);
}
@media (max-width: 520px) {
  .konto-zahlung-fieldset { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   FORM CONTROLS — generisches Select-Design
   (greift überall, sofern nicht override)
   ══════════════════════════════════════════════ */
select {
  padding: 9px 36px 9px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  color: var(--text);
  cursor: pointer;
  /* Native Pfeil ersetzen durch eigenes SVG */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23014639' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  transition: border-color .15s, box-shadow .15s;
  line-height: 1.3;
}
select:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(1, 70, 57, 0.10);
}
select:hover {
  border-color: var(--green-mid);
}
select:disabled {
  background-color: var(--bg);
  color: var(--text-muted);
  cursor: not-allowed;
}
/* Inline-Selects (in Tabellen-Zellen) — kompakter */
.admin-table select,
select[onchange] {
  padding: 6px 30px 6px 10px;
  font-size: 0.84rem;
  background-position: right 10px center;
}

/* ══════════════════════════════════════════════
   FIRMA-EDIT-FORM (Mitglieder-Bereich)
   ══════════════════════════════════════════════ */
.firma-edit-form label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  margin: 14px 0 4px;
}
.firma-edit-form input[type="text"],
.firma-edit-form input[type="email"],
.firma-edit-form input[type="tel"],
.firma-edit-form input[type="url"],
.firma-edit-form input[type="date"],
.firma-edit-form input[type="time"],
.firma-edit-form input[type="number"],
.firma-edit-form input[type="search"],
.firma-edit-form select,
.firma-edit-form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  font-family: inherit;
  font-size: 0.94rem;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.firma-edit-form textarea {
  resize: vertical;
  min-height: 100px;
  font-family: 'Source Serif 4', serif;
  line-height: 1.55;
}
.firma-edit-form input:focus,
.firma-edit-form textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(1, 70, 57, 0.10);
}
.firma-edit-form .kontakt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 4px;
}
.firma-edit-form .kontakt-row > div { min-width: 0; }
.firma-edit-form .kontakt-row label { margin-top: 0; }
.firma-edit-form .kontakt-row--street { grid-template-columns: 1fr 120px; }
.firma-edit-form .kontakt-row--plz    { grid-template-columns: 120px 1fr; }
.firma-edit-form input.firma-edit-input--narrow { max-width: 140px; }
@media (max-width: 640px) {
  .firma-edit-form .kontakt-row,
  .firma-edit-form .kontakt-row--street,
  .firma-edit-form .kontakt-row--plz {
    grid-template-columns: 1fr;
  }
}
.firma-edit-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.94rem;
  cursor: pointer;
  margin-top: 4px;
}
.firma-edit-checkbox input { margin-top: 3px; }

/* Leistungsmerkmale-Grid (Checkboxen mit Icons) */
.leistungsmerkmale-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.leistungsmerkmale-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  font-size: 0.92rem;
  user-select: none;
}
.leistungsmerkmale-item:hover {
  border-color: var(--green-mid);
  background: var(--bg);
}
.leistungsmerkmale-item:has(input:checked) {
  border-color: var(--green);
  background: var(--green-light);
}
.leistungsmerkmale-item input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--green);
}
.leistungsmerkmale-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .leistungsmerkmale-grid { grid-template-columns: 1fr; }
}

.firma-edit-actions {
  position: sticky;
  bottom: 0;
  background: var(--bg);
  padding: 16px 0;
  border-top: 2px solid var(--ink, var(--green-dark));
  margin-top: 24px;
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Quill-Editor: an Form-Feld-Look angleichen */
.firma-edit-quill {
  min-height: 240px;
  font-family: 'Source Serif 4', serif;
  font-size: 0.96rem;
  line-height: 1.55;
  background: var(--white);
}
/* Quill-Toolbar passend zum Site-Stil */
.ql-toolbar.ql-snow {
  border: 1.5px solid var(--border) !important;
  border-radius: 10px 10px 0 0;
  background: var(--bg);
}
.ql-container.ql-snow {
  border: 1.5px solid var(--border) !important;
  border-top: 0 !important;
  border-radius: 0 0 10px 10px;
  font-family: 'Source Serif 4', serif !important;
  font-size: 0.96rem !important;
}
.ql-editor {
  min-height: 200px;
}
.ql-editor:focus {
  outline: none;
}
/* Toolbar-Buttons in CI-Grün */
.ql-toolbar .ql-stroke { stroke: var(--text); }
.ql-toolbar .ql-fill   { fill: var(--text); }
.ql-toolbar .ql-active .ql-stroke,
.ql-toolbar button:hover .ql-stroke {
  stroke: var(--green) !important;
}
.ql-toolbar .ql-active .ql-fill,
.ql-toolbar button:hover .ql-fill {
  fill: var(--green) !important;
}

/* ══════════════════════════════════════════════
   ADMIN-BEREICH
   ══════════════════════════════════════════════ */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.admin-table th, .admin-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.admin-table th {
  background: var(--bg);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.admin-table tbody tr:hover td { background: rgba(1, 70, 57, 0.03); }
.admin-table .small { font-size: 0.78rem; color: var(--text-muted); }

/* Inline Featured-Slot-Select in /admin/events */
.featured-inline-form { margin: 0; }
.featured-inline-select {
  font-size: 0.78rem;
  padding: 4px 24px 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  cursor: pointer;
  font-family: inherit;
  color: var(--text-muted);
  transition: border-color .12s, color .12s, background .12s;
}
.featured-inline-select:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.featured-inline-select:hover { border-color: var(--green); }
.featured-inline-select.is-active {
  background: var(--green-light);
  border-color: var(--green);
  color: var(--green-dark);
  font-weight: 700;
}
.featured-inline-select.is-warn {
  background: #fef9ed;
  border-color: #d4a64a;
  color: #8b6713;
}

.admin-role-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.admin-role-badge--admin     { background: var(--green-dark); color: var(--white); }
.admin-role-badge--user      { background: #efeee9; color: var(--text-muted); }
/* Legacy-Werte aus Pre-Migration-010 — falls Migration noch nicht gelaufen */
.admin-role-badge--lokalplus { background: var(--green); color: var(--white); }
.admin-role-badge--business  { background: var(--green-light); color: var(--green-dark); }
.admin-role-badge--gratis    { background: #efeee9; color: var(--text-muted); }

/* Vertragsstufe der Firma (unternehmen.prioritaet) — Badge in Listing/Dashboard */
.firma-prio-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 8px;
}
.firma-prio-badge--lokalplus      { background: var(--green-dark); color: var(--white); }
.firma-prio-badge--business       { background: var(--green); color: var(--white); }
.firma-prio-badge--business_light { background: var(--green-mid, #5d8268); color: var(--white); }
.firma-prio-badge--gratis         { background: #efeee9; color: var(--text-muted); }

/* Vertragsstufen-Banner oben im Firma-Edit-Form */
.vertragsstufe-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: 22px;
  border: 1.5px solid var(--border);
  background: var(--white);
}
.vertragsstufe-banner--gratis {
  background: #fef9ed;
  border-color: #f0d896;
}
.vertragsstufe-banner--business {
  background: var(--green-light);
  border-color: var(--green-mid);
}
.vertragsstufe-banner--business_light {
  background: var(--green-light);
  border-color: var(--green-mid);
}
.vertragsstufe-banner--lokalplus {
  background: linear-gradient(135deg, var(--green-light) 0%, rgba(232,237,234,0.4) 100%);
  border-color: var(--green);
}
.vertragsstufe-banner-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.vertragsstufe-banner-main .firma-prio-badge {
  margin-left: 0;
}
.vertragsstufe-banner-main span:not(.firma-prio-badge) {
  font-size: 0.92rem;
  color: var(--text);
}
.vertragsstufe-banner-cta {
  font-size: 0.85rem;
  padding: 8px 14px;
  flex-shrink: 0;
}
/* LokalPlus-aktiv-Inline im Banner */
.vertragsstufe-banner-lp {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.86rem;
  padding-left: 8px;
  margin-left: 4px;
  border-left: 1px solid var(--border);
}
.vertragsstufe-banner-lp strong {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Firma-Status-Badge (Zuordnungs-Status) */
.firma-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* 5-Stufen-Badges (intern, falls volle Auflösung gebraucht) */
.firma-status-badge--smartline_managed { background: var(--green-dark); color: var(--white); }
.firma-status-badge--assigned          { background: var(--green-light); color: var(--green-dark); }
.firma-status-badge--editor_only       { background: #ffe5cc; color: #8a4a00; }
.firma-status-badge--not_assigned      { background: var(--red-light); color: var(--red); }

/* 3-Stufen-Badges (vereinfachte UI-Sicht) */
.firma-status-badge--eigenkunde   { background: var(--green-dark); color: var(--white); }
.firma-status-badge--zugeordnet   { background: var(--green-light); color: var(--green-dark); }
.firma-status-badge--ohne_inhaber { background: #fbead3; color: #b46a00; }

/* Claim-Banner auf Profilseite („Bist du der Inhaber?") */
.firma-claim-banner {
  background: linear-gradient(135deg, var(--green-light) 0%, rgba(232,237,234,0.3) 100%);
  border: 1.5px dashed var(--green-mid);
}
.firma-claim-banner h2 {
  color: var(--green-dark);
}
.firma-claim-banner p {
  font-family: 'Source Serif 4', serif;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 16px;
}

.admin-status-ok {
  color: #0a7f2e;
  font-weight: 600;
  font-size: 0.84rem;
}
.admin-status-pending {
  color: var(--warn, #b46a00);
  font-weight: 600;
  font-size: 0.84rem;
}

.admin-filter-form,
.admin-search-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.admin-search-input {
  flex: 1;
  min-width: 240px;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  font-family: inherit;
  font-size: 0.92rem;
}
.admin-search-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(1, 70, 57, 0.10);
}
.admin-filter-form select,
.admin-search-form select {
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  font-family: inherit;
  font-size: 0.92rem;
}

/* Filter-Form als Grid wenn viele Felder (Admin-Firmen-Liste).
   Suchfeld + Actions spannen volle Breite, Selects flexibel auto-fit. */
.admin-filter-form--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  align-items: stretch;
}
.admin-filter-form--grid .admin-search-input {
  grid-column: 1 / -1;
  min-width: 0;
}
.admin-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

/* Flash-Box (Erfolg / Fehler nach Bulk-POST) */
.admin-flash {
  padding: 12px 16px;
  border-radius: 10px;
  margin: 0 0 16px 0;
  font-size: 0.92rem;
  border: 1.5px solid;
  font-weight: 500;
}
.admin-flash--ok {
  background: rgba(10, 127, 46, 0.08);
  border-color: #0a7f2e;
  color: #0a7f2e;
}
.admin-flash--err {
  background: rgba(180, 60, 50, 0.08);
  border-color: #b43c32;
  color: #b43c32;
}

/* Tabelle mit Multi-Select-Spalte */
.admin-table--selectable .col-check {
  width: 32px;
  text-align: center;
  padding-left: 10px;
  padding-right: 4px;
}
.admin-table--selectable .col-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin: 0;
}

/* Sticky Bulk-Action-Bar — erscheint via JS wenn Auswahl > 0 */
.bulk-action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--white);
  border-top: 2px solid var(--green);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
  padding: 14px 0;
  z-index: 100;
}
.bulk-action-bar[hidden] { display: none; }
.bulk-action-bar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.bulk-action-bar__count {
  font-size: 0.95rem;
  white-space: nowrap;
}
.bulk-action-bar select {
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  font-family: inherit;
  font-size: 0.92rem;
  min-width: 200px;
}

/* Aktions-Gruppen in der Bulk-Bar (Org / Status / Loeschen). */
.bulk-action-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Vertikaler Trenner zwischen Aktions-Gruppen. */
.bulk-action-divider {
  width: 0;
  height: 28px;
  border-left: 1.5px solid var(--border);
  display: inline-block;
}
@media (max-width: 768px) {
  /* Auf Mobile lieber horizontaler Trenner, weil die Bar umbricht. */
  .bulk-action-divider {
    width: 100%;
    height: 0;
    border-left: 0;
    border-top: 1.5px solid var(--border);
  }
}

/* Roter Danger-Button (Loeschen, destruktive Aktionen). */
.btn--danger {
  background: #b43c32;
  color: var(--white);
  border: 1.5px solid #b43c32;
}
.btn--danger:hover {
  background: #952d24;
  border-color: #952d24;
}

/* ══════════════════════════════════════════════
   Mobile Bottom-Navigation — nur < 768px.
   Frank-Vorgabe 2026-05-02 (Korrektur): Auf Desktop bleibt das klassische
   Top-Menue, Bottom-Nav nur auf Mobile + Tablet.
   ══════════════════════════════════════════════ */

/* Default: Bottom-Nav unsichtbar. Item-Styles global, aber wirken nur
   wenn der Container sichtbar geschaltet wird (im Mobile-Block unten). */
.bottom-nav { display: none; }
.bottom-nav__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 9px 4px 7px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  min-height: 58px;
  line-height: 1.1;
  -webkit-tap-highlight-color: rgba(1, 70, 57, 0.08);
}
.bottom-nav__icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
}
.bottom-nav__icon svg { width: 100%; height: 100%; }
.bottom-nav__item--active {
  color: var(--green);
  font-weight: 700;
}
.bottom-nav__item:active {
  background: rgba(1, 70, 57, 0.05);
}

@media (max-width: 767px) {
  /* Top-Bar + Burger + Hauptmenue weg — Bottom-Nav uebernimmt. */
  .top-bar { display: none; }
  .nav-toggle { display: none; }
  .main-nav { display: none; }

  /* iPhone-Notch / Dynamic Island: weil viewport-fit=cover gesetzt ist,
     muss der Header das Top-Safe-Area selbst respektieren. Sonst rutscht
     das Logo unter die Statusbar. Im normalen Browser-Modus ist
     env(safe-area-inset-top) = 0, also kein Effekt. Im PWA-Standalone-
     Modus (Home-Bildschirm) liefert iOS den echten Pixel-Wert. */
  .site-header {
    padding: 6px 0;
    padding-top: calc(6px + env(safe-area-inset-top));
  }
  /* Logo links, Suche-Icon rechts. Bottom-Nav uebernimmt die eigentliche Navigation. */
  .header-inner {
    padding: 0 16px;
    justify-content: space-between;
  }
  .site-logo img {
    max-height: 40px;
    width: auto;
  }
  /* Suche-Icon bleibt sichtbar (im Header-Markup definiert).
     nav-toggle + main-nav sind oben bereits ausgeblendet. */
  .header-search-icon {
    width: 44px;
    height: 44px;
    margin-left: 0;
  }

  /* Content naeher an den Header ruecken — vorher 32px war zu luftig. */
  .page,
  .page-narrow {
    padding-top: 16px;
  }
  .dashboard-header {
    margin-bottom: 20px;
    padding-bottom: 14px;
  }

  /* Bottom-Nav sichtbar schalten. */
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--white);
    border-top: 1.5px solid var(--border);
    box-shadow: 0 -2px 12px rgba(0, 49, 42, 0.06);
    z-index: 90;
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Body-Padding: Content nicht hinter Bottom-Nav verschwinden lassen. */
  body {
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
  }

  /* Sticky-Elemente ueber die Bottom-Nav schieben (sonst verdeckt). */
  .back-to-top {
    bottom: calc(74px + env(safe-area-inset-bottom)) !important;
  }
  .bulk-action-bar {
    bottom: calc(58px + env(safe-area-inset-bottom));
  }
  .pwa-install-banner {
    bottom: calc(74px + env(safe-area-inset-bottom));
  }
}

/* ══════════════════════════════════════════════
   Mobile-Footer: kompakter Brand-Block statt 3-Spalten-Grid.
   Alle Links sind im /mehr-Tab erreichbar — Doppelung vermeiden.
   ══════════════════════════════════════════════ */
.footer-mobile-brand { display: none; }
@media (max-width: 767px) {
  .footer-mobile-brand {
    display: block;
    text-align: center;
    padding: 16px 16px 8px;
  }
  .footer-mobile-logo {
    max-width: 200px;
    height: auto;
    /* Weiss-Filter fuer dunklen Footer-Hintergrund. */
    filter: brightness(0) invert(1);
    margin-bottom: 12px;
    opacity: 0.92;
  }
  .footer-mobile-brand p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.88rem;
    margin: 0;
    line-height: 1.4;
  }
  .footer-grid { display: none; }
  .footer-legal { display: none; }
  .footer-bottom { padding-top: 12px; text-align: center; }
}

/* ══════════════════════════════════════════════
   /mehr — Sectioned Linklist (vorOrt/meinOrt-Stil)
   ══════════════════════════════════════════════ */
.mehr-section {
  margin-bottom: 28px;
}
.mehr-section-title {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 8px;
  padding: 0 4px;
}
.mehr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.mehr-list li + li .mehr-row {
  border-top: 1px solid var(--border);
}
.mehr-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 500;
  transition: background 0.15s;
  min-height: 56px;
}
.mehr-row:hover,
.mehr-row:active {
  background: rgba(1, 70, 57, 0.04);
}
.mehr-row__icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: var(--green);
  flex-shrink: 0;
}
.mehr-row__icon svg {
  width: 100%;
  height: 100%;
}
.mehr-row__label {
  flex: 1;
}
.mehr-row__chevron {
  color: var(--text-muted);
  font-size: 1.1rem;
  font-weight: 400;
}
.mehr-row__sub {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.35;
}

/* ══════════════════════════════════════════════
   /in-der-naehe — Geolocation-Suche (PWA-Schritt 4)
   ══════════════════════════════════════════════ */

/* Permission-Card vor Standort-Anfrage */
.naehe-permission-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 40px 28px;
  max-width: 540px;
  margin: 24px auto;
  text-align: center;
}
.naehe-permission-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  color: var(--green);
  display: block;
}
.naehe-permission-card h2 {
  margin: 0 0 12px;
  font-size: 1.3rem;
  color: var(--green);
}
.naehe-permission-card p {
  margin: 0 0 20px;
  color: var(--text-muted);
  line-height: 1.55;
  font-size: 0.95rem;
}
.btn--lg {
  padding: 14px 28px;
  font-size: 1rem;
}
.naehe-status {
  margin-top: 16px;
  font-size: 0.92rem;
  color: var(--text-muted);
}
.naehe-status--error {
  color: #b43c32;
}

/* Tab-Umschalter Firmen / Veranstaltungen */
.naehe-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
  border-bottom: 2px solid var(--border);
}
.naehe-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.naehe-tab:hover { color: var(--green-dark); }
.naehe-tab--active {
  color: var(--green-dark);
  border-bottom-color: var(--green);
}
.naehe-tab-count {
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}
.naehe-tab--active .naehe-tab-count {
  background: var(--green-light);
  color: var(--green-dark);
}

/* Events-Liste auf der Nähe-Seite — Distance-Badge oben rechts */
.naehe-events-list { gap: 14px; }
.naehe-event-card {
  position: relative;
}
.naehe-event-card .naehe-distance-badge {
  top: 10px;
  right: 12px;
  z-index: 2;
}

/* Filter-Chips: Radius wechseln */
.naehe-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 14px 16px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
}
.naehe-filter-label {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-right: 4px;
}
.naehe-chip {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(1, 70, 57, 0.06);
  color: var(--green);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.naehe-chip:hover {
  background: rgba(1, 70, 57, 0.12);
}
.naehe-chip--active {
  background: var(--green);
  color: var(--white);
}
.naehe-chip-reset {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 10px;
}
.naehe-chip-reset:hover {
  color: var(--green);
  text-decoration: underline;
}

/* Card-Wrapper mit Distance-Badge oben rechts (uebernimmt Card-Position) */
.naehe-card-wrap {
  position: relative;
}
.naehe-distance-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: var(--green);
  color: var(--white);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* ══════════════════════════════════════════════
   Legal-Pages (Impressum, Datenschutz) — schmaler Lesefluss
   ══════════════════════════════════════════════ */
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}
.legal-page h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--green);
  margin: 0 0 28px;
  line-height: 1.2;
}
.legal-page h2 {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text);
  margin: 36px 0 12px;
}
.legal-page h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin: 24px 0 8px;
}
.legal-page h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin: 18px 0 6px;
}
.legal-page p,
.legal-page li {
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--text);
}
.legal-page p {
  margin: 0 0 14px;
}
.legal-page ul {
  margin: 0 0 16px;
  padding-left: 24px;
}
.legal-page a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-page a:hover {
  text-decoration: none;
}
.legal-page code {
  background: rgba(1, 70, 57, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.88em;
  color: var(--green);
}
.mehr-section--cta {
  text-align: center;
  margin-top: 20px;
}
.mehr-section--cta .sep {
  margin: 0 10px;
  color: var(--text-muted);
}

/* ══════════════════════════════════════════════
   PWA Install-Banner — dezent, dismissable
   ══════════════════════════════════════════════ */
.pwa-install-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 30px);
  width: calc(100% - 32px);
  max-width: 480px;
  background: var(--white);
  border: 1.5px solid var(--green);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  z-index: 200;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.pwa-install-banner--visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.pwa-install-banner__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
.pwa-install-banner__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  width: 28px;
  height: 28px;
}
.pwa-install-banner__icon svg {
  display: block;
}
.pwa-install-banner__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pwa-install-banner__text strong {
  color: var(--green);
  font-size: 0.92rem;
  line-height: 1.2;
}
.pwa-install-banner__text span {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.3;
}
.pwa-install-banner__btn {
  background: var(--green);
  color: var(--white);
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  flex-shrink: 0;
  /* Falls als <a> genutzt (Info-Banner): kein Underline, gleiche Optik wie Button */
  text-decoration: none;
  display: inline-block;
}
.pwa-install-banner__btn:hover { background: var(--green-dark, #00231f); color: var(--white); text-decoration: none; }
.pwa-install-banner__close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  flex-shrink: 0;
}
.pwa-install-banner__close:hover { color: var(--text); }

/* iOS-Variante: kein Install-Button, mehr Text. Icon im Fliesstext fuer
   die "Tippe auf <icon> Teilen"-Anleitung. */
.pwa-install-banner__inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 0 2px;
  color: var(--green);
  width: 18px;
  height: 18px;
  position: relative;
  top: -1px;
}
.pwa-install-banner__inline-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.pwa-install-banner--ios .pwa-install-banner__text span {
  line-height: 1.4;
}

/* ══════════════════════════════════════════════
   LokalPlus — Public-Marketing-Seite (/lokalplus)
   Komplett-Aufbau gemäß preisstrategie.md Sektion 10
   ══════════════════════════════════════════════ */

/* Hero mit Sprungmarken-Nav. Eigene Klasse, weil .lp-public-hero
   weiter von ueber-uns.php genutzt wird (kein Nav-Bedarf dort). */
.lp-hero {
  text-align: center;
  padding: 24px 16px 8px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.lp-hero h1 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  margin: 8px 0 16px;
}
.lp-hero-lead {
  max-width: 720px;
  margin: 0 auto 18px;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}
.lp-hero-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  font-size: 0.88rem;
  padding-bottom: 14px;
}
.lp-hero-nav a {
  color: var(--green-dark);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  padding: 4px 2px;
  transition: border-color .15s, color .15s;
}
.lp-hero-nav a:hover {
  color: var(--green);
  border-bottom-color: var(--green-mid);
}

/* Stufen-Karten — Erweiterungen zur Basis-Definition (Modifier + Untertitel).
   Basis-Klassen .stufen-grid / .stufen-card / etc. liegen weiter oben. */
.stufen-card--basis    { /* Default-Stil reicht */ }
.stufen-card--premium {
  border-color: var(--green-mid);
}
.stufen-card-tagline {
  font-family: 'Source Serif 4', serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
  margin: -2px 0 14px;
}
.stufen-card-price-unit {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 2px;
}
/* Block-Variante für Buttons (volle Container-Breite, zentriert) */
.btn--block {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Add-on-Module-Karten (Kassenaufsteller / Stempelkarte / Schnittstellen) */
.addon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 8px;
}
.addon-grid--triple { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .addon-grid--triple { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .addon-grid { grid-template-columns: 1fr; }
}
.addon-card {
  position: relative;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
}
.addon-card--soon {
  background: var(--bg-muted, #f7f7f5);
  border-style: dashed;
}
.addon-card-soon-badge {
  position: absolute;
  top: -12px;
  right: 16px;
  background: var(--green-dark);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
}
.addon-card-head {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.addon-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--green-dark);
  margin: 0 0 8px;
}
.addon-card-price-setup {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 2px;
}
.addon-card-price {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--green);
  margin: 0;
}
.addon-card-price-unit {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 4px;
}
.addon-card-desc {
  font-family: 'Source Serif 4', serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 14px;
}
.addon-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  flex: 1;
}
.addon-features li {
  position: relative;
  padding: 5px 0 5px 22px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
}
.addon-features li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 5px;
  color: var(--green);
  font-weight: 700;
}
.addon-card-cta { margin: 0; }

/* Veranstaltungs-Block: zwei Spalten (universell + Business-Bonus) */
.lp-event-block {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  margin-top: 8px;
}
@media (max-width: 800px) {
  .lp-event-block { grid-template-columns: 1fr; }
}
.lp-event-block-main,
.lp-event-block-bonus {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 22px 24px;
}
.lp-event-block-main h3 {
  margin: 0 0 8px;
  color: var(--green-dark);
}
.lp-event-block-main p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 14px;
}
.lp-event-block-bonus {
  background: rgba(1, 70, 57, 0.04);
  border-color: var(--green-mid);
}
.lp-event-bonus-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 6px;
}
.lp-event-block-bonus p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}

/* Cross-Sell-Block für SmartlineCard */
.lp-cross-sell {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 24px 26px;
}
.lp-cross-sell-lead {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px;
}
.lp-cross-sell p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
}

/* Badges-Erklärung */
.lp-badges-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 700px) {
  .lp-badges-grid { grid-template-columns: 1fr; }
}
.lp-badge-explain {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 22px 24px;
}
.lp-badge-explain p {
  margin: 12px 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
}
.badge-pill {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 14px;
}
.badge-pill--empfehlung {
  background: var(--green);
  color: var(--white);
}
.badge-pill--tipp {
  background: #fdebd2;
  color: #7a4a07;
  border: 1px solid #f1c891;
}

/* Stufen-Quick-Liste auf /ueber-uns (kompakte 3-Bullet-Übersicht
   mit Verweis auf /lokalplus) */
.stufen-quick {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stufen-quick li {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
}
.stufen-quick strong { color: var(--green-dark); }

/* .lp-section-intro ist im Member-LokalPlus-Block weiter unten definiert
   und wird hier wiederverwendet. */

/* Liste der aktiven Premium-Slots im Member-Bereich */
.lp-premium-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-premium-list li {
  background: var(--white);
  border: 1.5px solid var(--green-mid);
  border-left: 4px solid var(--green);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.94rem;
  line-height: 1.5;
}

/* Bestand: .lp-public-hero bleibt für ueber-uns.php */
.lp-public-hero {
  text-align: center;
  padding: 32px 16px 8px;
  margin-bottom: 16px;
}
.lp-public-hero h1 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  margin: 8px 0 16px;
}
.lp-public-hero-lead {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

.lp-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.lp-info-block {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
}
.lp-info-block h3 {
  margin: 0 0 6px;
  font-size: 0.95rem;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.lp-info-block p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.lp-cta-band {
  text-align: center;
  background: rgba(1, 70, 57, 0.04);
  border-radius: 12px;
  padding: 32px 24px;
  margin-top: 16px;
}
.lp-cta-band h2 { margin-top: 0; }
.lp-cta-band .sep { margin: 0 12px; color: var(--text-muted); }

/* ══════════════════════════════════════════════
   Über uns — strukturierte Daten als Wertversprechen
   ══════════════════════════════════════════════ */
.ueber-lead {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text);
  max-width: 760px;
  margin: 0 0 28px;
}
.ueber-args-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.ueber-arg {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 22px;
}
.ueber-arg h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  color: var(--green);
}
.ueber-arg p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.ueber-arg code {
  background: rgba(1, 70, 57, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.84em;
  color: var(--green);
}

/* ── Eintragsstufen-Vergleich (ueber-uns.php #eintragsstufen) ─── */
.stufen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .stufen-grid { grid-template-columns: 1fr; }
}
.stufen-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.stufen-card--featured {
  border-color: var(--green);
  border-width: 2px;
  box-shadow: 0 8px 24px rgba(1, 70, 57, 0.08);
}
.stufen-card-head { margin-bottom: 18px; }
.stufen-card-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.stufen-card h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--green-dark);
  margin: 4px 0 10px;
}
.stufen-card-price {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--green);
  margin: 0;
}
.stufen-card-price-sub {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin: 4px 0 0;
}
.stufen-card-price-sub strong { color: var(--green-dark, var(--green)); font-weight: 700; }
.stufen-card-badge {
  position: absolute;
  top: -14px;
  right: 22px;
  background: var(--green);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 14px;
}
.stufen-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  flex: 1;
}
.stufen-features li {
  position: relative;
  padding: 6px 0 6px 24px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text);
  border-bottom: 1px dashed var(--border);
}
.stufen-features li:last-child { border-bottom: none; }
.stufen-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--green);
  font-weight: 700;
}
.stufen-card-cta { margin: 0; }
.stufen-card-cta .btn { width: 100%; justify-content: center; }

.ueber-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  text-align: center;
}
.ueber-stat {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 22px 16px;
}
.ueber-stat strong {
  display: block;
  font-size: 2rem;
  color: var(--green);
  line-height: 1.1;
  margin-bottom: 6px;
}
.ueber-stat span {
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* ══════════════════════════════════════════════
   LokalPlus-Module — Member-Section (dein-eintrag/lokalplus.php)
   ══════════════════════════════════════════════ */
.lp-section-intro {
  color: var(--text-muted);
  margin: -8px 0 16px;
  max-width: 720px;
  line-height: 1.55;
}
.lp-section-note {
  background: rgba(1, 70, 57, 0.06);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 0 0 16px;
  font-size: 0.92rem;
}

.lp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.lp-cards--vcard {
  /* Drei Stufen visuell als Reihe nebeneinander, wo Platz ist. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.lp-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lp-card:hover { border-color: var(--green); }
.lp-card h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--green);
}
.lp-card--booked {
  background: rgba(10, 127, 46, 0.04);
  border-color: #0a7f2e;
}
.lp-card--booked:hover { border-color: #0a7f2e; }
.lp-card--blocked {
  opacity: 0.55;
  background: rgba(0, 0, 0, 0.02);
  border-style: dashed;
}
.lp-card--blocked:hover { border-color: var(--border, #d0d0d0); }
.lp-card-desc {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.55;
  flex: 1;
}
.lp-card-preis {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
}
.lp-preis strong {
  font-size: 1.2rem;
  color: var(--text);
}
.lp-preis-mtl {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.lp-preis--anfrage {
  font-style: italic;
  color: var(--text-muted);
}
.lp-preis--free {
  font-weight: 700;
  color: var(--green-dark);
  font-size: 1.05rem;
}
/* Zielgruppen-Hinweis (z.B. "Nur für Eventveranstalter") */
.lp-card-zielgruppe {
  margin: -4px 0 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--green-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lp-card-status {
  font-size: 0.92rem;
  color: #0a7f2e;
}
.lp-card-form {
  margin: 0;
}

.btn--block {
  display: block;
  width: 100%;
  text-align: center;
}

/* Read-only Mitgliedschaften-Liste im Member-Bereich.
   Member darf Org-Zuordnungen nicht selbst pflegen — nur Anzeige. */
.orgs-readonly-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.orgs-readonly-list li {
  background: rgba(1, 70, 57, 0.06);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.88rem;
  color: var(--green);
  font-weight: 500;
}

/* Pagination unter der Tabelle */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 24px 0;
  padding-bottom: 100px; /* Reserve fuer Sticky-Bulk-Bar */
}
.pagination a {
  color: var(--green);
  text-decoration: none;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
}
.pagination a:hover {
  background: rgba(1, 70, 57, 0.08);
}

/* ══════════════════════════════════════════════
   KPI-Sektion (Admin-Dashboard) — Re-Use vom Branchen-Tool-Stil
   ══════════════════════════════════════════════ */
.kpi {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.kpi > div {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  min-width: 140px;
}
.kpi strong {
  display: block;
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 800;
  color: var(--text);
}
.kpi span {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ══════════════════════════════════════════════
   AUTH (Login/Logout/Registrieren) + DASHBOARD
   ══════════════════════════════════════════════ */

.auth-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 36px 32px;
  margin-top: 16px;
}
.auth-card h1 {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.auth-intro {
  font-family: 'Source Serif 4', serif;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 24px;
}
.auth-error {
  background: var(--red-light);
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.88rem;
  margin-bottom: 18px;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-form label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 12px;
  margin-bottom: 4px;
}
/* Alle Input-Typen einheitlich stylen — sonst sehen date/time/tel/url
   in Public-Forms wie Browser-Default aus, neben den schicken text/email-Feldern.
   width:100% damit sie sich an Grid-Spalten oder den Container anpassen. */
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"],
.auth-form input[type="tel"],
.auth-form input[type="url"],
.auth-form input[type="number"],
.auth-form input[type="search"],
.auth-form input[type="date"],
.auth-form input[type="time"],
.auth-form input[type="datetime-local"],
.auth-form select,
.auth-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
.auth-form textarea {
  resize: vertical;
  min-height: 100px;
  font-family: 'Source Serif 4', serif;
  line-height: 1.55;
}
.auth-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23014639' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.auth-form input[type="file"] {
  padding: 8px;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  background: var(--bg);
  font-size: 0.88rem;
  cursor: pointer;
}
.auth-form input[type="date"],
.auth-form input[type="time"] {
  /* Native Picker behalten, aber konsistent. min-height verhindert,
     dass Safari die Höhe je nach Plattform variiert. */
  min-height: 44px;
}
.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(1, 70, 57, 0.10);
}
/* 2-Spalten-Layout für Adress-/Datums-Paare innerhalb auth-form.
   Labels stehen über jedem Input — Frank-Vorgabe 2026-05-05. */
.auth-form .kontakt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 4px;
}
.auth-form .kontakt-row > div { min-width: 0; }
.auth-form .kontakt-row label { margin-top: 0; }
/* Asymmetrische Splits (Straße breit, Nr. schmal · PLZ schmal, Ort breit). */
.auth-form .kontakt-row--street { grid-template-columns: 1fr 120px; }
.auth-form .kontakt-row--plz    { grid-template-columns: 120px 1fr; }
@media (max-width: 520px) {
  .auth-form .kontakt-row,
  .auth-form .kontakt-row--street,
  .auth-form .kontakt-row--plz {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* Datums-/Zeit-Paar mit gemeinsamem Label oberhalb (Beginn / Ende).
   Die einzelnen Inputs (Datum + Zeit) bekommen visually-hidden-Labels,
   das gemeinsame Label macht klar, was das Paar bedeutet. */
.datetime-block {
  margin-top: 14px;
}
.datetime-block-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
}
.datetime-block-hint {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.78rem;
}
.datetime-block .kontakt-row { margin-top: 0; }
.auth-submit {
  margin-top: 18px;
  padding: 12px 20px;
  background: var(--green);
  color: var(--white);
  border: 0;
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background .15s;
}
.auth-submit:hover { background: var(--green-dark); color: var(--white); }
.auth-links {
  margin-top: 22px;
  font-size: 0.86rem;
  color: var(--text-muted);
}
.auth-links a { color: var(--green); text-decoration: none; }
.auth-links a:hover { color: var(--green-dark); border-bottom: 1px dashed var(--green-mid); }
.auth-links .sep { color: var(--green-mid); margin: 0 8px; }

/* ── DASHBOARD ───────────────────────────── */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 32px;
  padding-bottom: 22px;
  border-bottom: 1.5px solid var(--border);
}
.dashboard-eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 4px;
}
.dashboard-header h1 {
  font-size: clamp(1.5rem, 2.5vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.dashboard-meta {
  font-size: 0.86rem;
  color: var(--text-muted);
  /* Lange Aliase, Mailadressen oder Code-Tags sollen umbrechen,
     statt die Header-Box auf Mobile zu sprengen. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.dashboard-meta .sep { color: var(--green-mid); margin: 0 6px; }
.dashboard-meta code {
  font-size: 0.82rem;
  word-break: break-all;
}
.dashboard-section {
  margin-top: 32px;
}
.dashboard-section h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 16px;
}
.dashboard-stub {
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* Business-Upgrade-Box (Stammdaten-Seite, ersetzt 3 Stub-Sektionen) */
.dashboard-section--business-upgrade {
  background: repeating-linear-gradient(
    -45deg,
    var(--bg) 0,
    var(--bg) 12px,
    var(--bg-muted) 12px,
    var(--bg-muted) 14px
  );
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
}
.business-upgrade-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.business-upgrade-list li {
  padding: 12px 14px;
  background: var(--white);
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 0.92rem;
  line-height: 1.5;
}
.dashboard-firmen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.dashboard-firma-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}
.dashboard-firma-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.dashboard-firma-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
  display: block;
  margin-bottom: 12px;
}
.dashboard-firma-meta .sep { color: var(--green-mid); margin: 0 4px; }
.dashboard-features {
  font-size: 0.84rem;
  margin: 12px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.dashboard-features strong { margin-right: 4px; }
.dashboard-features .badge.ok,
.dashboard-features .badge.muted {
  position: static;        /* common.css .badge nutzt absolute — hier überschreiben */
  top: auto; left: auto; transform: none;
  text-transform: none; letter-spacing: 0;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: normal;
}
.dashboard-features .badge.ok {
  background: var(--green-light);
  color: var(--green-dark);
}
.dashboard-features .badge.muted {
  background: #efeee9;
  color: var(--text-muted);
}
/* Business-Upgrade-Teaser in der Mein-Eintrag-Karte (nur bei prioritaet='gratis').
   Soll sofort sichtbar machen, was im Business-Profil drin ist — Konversionstreiber. */
.dashboard-upgrade {
  margin: 14px 0 4px;
  padding: 14px 16px 16px;
  background: var(--green-light, #eaf5ec);
  border: 1px solid var(--green, #2f7d3a);
  border-radius: 10px;
}
.dashboard-upgrade-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.dashboard-upgrade-head strong {
  font-size: 0.95rem;
  color: var(--green-dark, #1f5a28);
}
.dashboard-upgrade-features {
  font-size: 0.84rem;
  line-height: 1.45;
  margin: 0 0 12px;
  padding-left: 18px;
  color: var(--text);
}
.dashboard-upgrade-features li { margin: 2px 0; }
/* Variante über dem Firma-Hub-Grid (firma-edit.php) — bisschen mehr Luft drumherum,
   weil der Container breiter ist als die kompakte Karte im Dashboard. */
.firma-hub-upgrade {
  margin: 18px 0 24px;
}
.dashboard-firma-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}
/* Sekundäre Wegklick-Links (Öffentliche Seite, Visitenkarte) als Icon-Row.
   Bewusst getrennt von den Edit-Buttons — sind keine Editier-Aktionen. */
.dashboard-firma-links {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.dashboard-firma-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  background: var(--white);
  transition: color .15s, border-color .15s, background .15s;
}
.dashboard-firma-links a:hover {
  color: var(--green-dark);
  border-color: var(--green-mid);
  background: var(--green-light);
}
.dashboard-firma-links a .lucide { width: 18px; height: 18px; }
.dashboard-firma-stats {
  display: flex;
  gap: 18px;
  margin-top: 12px;
  padding: 10px 14px;
  background: #f6f8f5;
  border-radius: 6px;
  border: 1px solid #e6ece1;
  font-size: 0.78rem;
  color: var(--text-muted, #666);
  line-height: 1.4;
}
.dashboard-firma-stats strong {
  font-size: 1.05rem;
  color: var(--text, #222);
  font-weight: 700;
}
/* Gratis-Accounts sehen die Statistik nur als locked-Preview — Werte als „—",
   ausgegraut, mit Hinweistext unten. Statistik selbst ist Business-Feature. */
.dashboard-firma-stats--locked {
  opacity: 0.5;
  filter: grayscale(1);
}
.dashboard-firma-stats-hint {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin: 4px 0 0;
  font-style: italic;
}
.dashboard-firma-stub {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

@media (max-width: 640px) {
  .auth-card { padding: 24px 20px; }
  .dashboard-header {
    flex-direction: column;
    align-items: stretch;
  }
  /* Sub-Pages (firma-edit, firma-stammdaten, firma-events, event-edit):
     Back-Button gehört auf Mobile OBEN — sonst muss man nach jeder
     Bearbeitungs-Aktion erst nach unten scrollen. */
  .dashboard-header--sub {
    flex-direction: column-reverse;
    gap: 12px;
  }
  .dashboard-header--sub > a.btn,
  .dashboard-header--sub > div:last-child {
    align-self: flex-start;
  }
  .dashboard-firmen-grid { grid-template-columns: 1fr; }
}

/* ── RESPONSIVE ────────────────────────────── */
@media (max-width: 640px) {
  .page, .page-narrow { padding: 20px 16px 48px; }
  .firma-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
  .firma-card-logo { height: 90px; }
  .firma-card-body { padding: 14px 16px 16px; }
}

/* ── MAKLER-MODUL: Immobilien-Liste auf Firmen-Profil ─────────── */
.firma-immo-section { margin-top: 24px; }
.firma-immo-section .firma-detail-section-title { margin: 0 0 14px; }
.firma-immo-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.firma-immo-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.firma-immo-card:hover {
  border-color: var(--green);
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  transform: translateY(-1px);
}
.firma-immo-link {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  padding: 10px;
  text-decoration: none;
  color: inherit;
  align-items: center;
}
@media (max-width: 560px) {
  .firma-immo-link { grid-template-columns: 96px 1fr; gap: 10px; }
}
.firma-immo-thumb {
  width: 140px; height: 100px;
  border-radius: 6px; overflow: hidden;
  background: var(--bg-muted);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
@media (max-width: 560px) { .firma-immo-thumb { width: 96px; height: 72px; } }
.firma-immo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.firma-immo-thumb-fallback { color: var(--text-muted); }
.firma-immo-thumb-fallback .lucide { width: 28px; height: 28px; }

.firma-immo-meta { min-width: 0; }
.firma-immo-title {
  font-size: 1.02rem;
  margin: 0 0 6px;
  font-weight: 600;
  line-height: 1.25;
}
.firma-immo-eckdaten {
  margin: 0 0 6px;
  font-size: 0.9rem;
  color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: 4px 14px;
}
.firma-immo-eckdaten .firma-immo-preis {
  color: var(--text);
  font-weight: 600;
}
.firma-immo-energie { margin: 4px 0 0; }
.firma-immo-energie-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-muted);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text);
}
.firma-immo-energie-a, .firma-immo-energie-a\+, .firma-immo-energie-aplus { background:#c8eccb; color:#1d5424; }
.firma-immo-energie-b { background:#dff0c8; color:#345a18; }
.firma-immo-energie-c { background:#f3edc8; color:#6a5a17; }
.firma-immo-energie-d { background:#fae0c0; color:#6f4419; }
.firma-immo-energie-e, .firma-immo-energie-f, .firma-immo-energie-g, .firma-immo-energie-h { background:#f6cfcf; color:#6a1c1c; }

.firma-immo-more { margin: 14px 0 4px; }
.firma-immo-disclaimer {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-style: italic;
}