/* ================================================================
   Unser Schopp – main.css
   Corporate Design · Poppins · Natürliche Erdtöne
   ================================================================ */

/* ── Custom Properties ────────────────────────────────────────── */
:root {
  --color-white:  #fffdfd;
  --color-cream:  #f2eae7;
  --color-sage:   #eae9ce;
  --color-olive:  #8b8d75;
  --color-brown:  #675f4d;
  --color-dark:   #2e2f22;
  --color-green:  #3a5a2e;

  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.15);

  --transition: .6s cubic-bezier(.22,1,.36,1);
}

/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 400;
  color: var(--color-dark);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; transition: color .2s; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; }
h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); }
h4 { font-size: 1rem; }

p { line-height: 1.7; }

/* ── Layout ───────────────────────────────────────────────────── */
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section { padding: 5rem 0; }

/* ── Scroll Reveal ────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--transition), transform var(--transition);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay  { transition-delay: .15s; }
.reveal-delay-2 { transition-delay: .3s; }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.75rem;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }

.btn-green {
  background: var(--color-green);
  color: var(--color-white);
  border-color: var(--color-green);
}
.btn-green:hover { background: #2c4522; border-color: #2c4522; color: var(--color-white); }

/* Reiter "Kündigen / Widerrufen" auf der oeffentlichen Kuendigungsseite */
.kuendigen-tab {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .65rem 1.4rem; border-radius: var(--radius-sm);
  font-weight: 600; font-size: .92rem; text-decoration: none;
  border: 1.5px solid var(--color-dark); color: var(--color-dark); background: transparent;
  transition: all .2s;
}
.kuendigen-tab:hover { background: var(--color-dark); color: var(--color-white); }
.kuendigen-tab-active, .kuendigen-tab-active:hover {
  background: var(--color-green); border-color: var(--color-green); color: var(--color-white);
}

.btn-ghost-white {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255,255,255,.7);
}
.btn-ghost-white:hover { background: rgba(255,255,255,.12); color: var(--color-white); }

.btn-outline-dark {
  background: transparent;
  color: var(--color-dark);
  border-color: var(--color-dark);
}
.btn-outline-dark:hover { background: var(--color-dark); color: var(--color-white); }

.btn-full { width: 100%; }

/* ── Navigation ───────────────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-white);
  border-bottom: 1px solid rgba(46,47,34,.08);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.nav-inner {
  display: flex;
  align-items: center;
  height: 68px;
  gap: 2rem;
}
.nav-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.nav-logo img { height: 36px; width: auto; object-fit: contain; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex: 1;
  white-space: nowrap;
}
.nav-links a {
  font-size: .88rem;
  font-weight: 600;
  color: var(--color-brown);
  letter-spacing: .01em;
  position: relative;
  padding-bottom: 2px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--color-green);
  transition: width .2s;
}
.nav-links a:hover { color: var(--color-green); }
.nav-links a:hover::after { width: 100%; }

.nav-right { margin-left: auto; flex-shrink: 0; display: flex; gap: .75rem; }
.btn-nav-outline {
  padding: .4rem 1.1rem;
  border: 1.5px solid var(--color-dark);
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-dark);
  transition: all .2s;
  white-space: nowrap;
}
.btn-nav-outline:hover { background: var(--color-dark); color: var(--color-white); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  padding: .5rem;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-dark);
  border-radius: 2px;
  transition: all .3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── HERO ─────────────────────────────────────────────────────── */
.hero-section {
  position: relative;
  height: 100vh;
  min-height: 600px;
  background-image: url('/img/container.png');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-left {
  max-width: 56%;
}

.hero-right {
  position: absolute;
  top: 21px;
  bottom: 10px;
  right: max(2rem, calc((100% - 1200px) / 2 + 2rem));
  width: 320px;
  z-index: 2;
}

@media (max-width: 900px) {
  .hero-right { display: none; }
  .hero-left  { max-width: 100%; }
}

.badge-pill {
  display: inline-block;
  width: fit-content;
  padding: .35rem 1rem;
  background: var(--color-sage);
  color: var(--color-dark);
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hero-left h1 { color: var(--color-white); }
.hero-left h1 .text-green { color: var(--color-green); }
.text-green { color: #74c464; }

.hero-sub {
  color: rgba(255,255,255,.88);
  font-size: 1.05rem;
  font-weight: 400;
  max-width: 520px;
  line-height: 1.75;
}

.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; }

/* Activity Card */
.activity-card {
  background: rgba(40, 44, 35, 0.88);
  border-radius: 16px;
  padding: 1.5rem;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.activity-header { flex-shrink: 0; margin-bottom: 1rem; display: flex; align-items: center; gap: .6rem; }
.activity-header h3 { color: var(--color-white); font-size: .95rem; font-weight: 600; }

/* Activity Segments */
.activity-segments {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  min-height: 0;
}
.activity-segment {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.activity-segment:first-child { flex: 0 0 auto; }
.activity-segment:first-child .segment-feed { flex: 0 0 auto; }

/* Scroll-Fenster je Segment */
#feedOrte   { max-height: 160px; }   /* 2 Einträge sichtbar   */
#feedInvest { max-height: 228px; }   /* ~4 Einträge sichtbar  */
#feedAbos   { max-height: 228px; }   /* ~4 Einträge sichtbar  */
.segment-label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,.4);
  padding-bottom: .3rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
  margin-bottom: 0.5rem;
}
.seg-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.seg-dot-blue  { background: #60a5fa; }
.seg-dot-amber { background: #f59e0b; }
.seg-dot-green { background: #74c464; }
.segment-feed {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.segment-feed::-webkit-scrollbar       { width: 3px; }
.segment-feed::-webkit-scrollbar-track { background: transparent; }
.segment-feed::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }

/* Mobile ticker */
.activity-ticker-mobile {
  display: none;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 42px;
  background: rgba(0,0,0,.55);
  overflow: hidden;
  z-index: 3;
}
.ticker-track {
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  color: rgba(255,255,255,.82);
  font-size: .76rem;
  padding: 0 1.5rem;
  animation: tickerScroll 36s linear infinite;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.activity-dot-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #74c464;
  margin-right: 8px;
  vertical-align: middle;
  flex-shrink: 0;
  animation: dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.3); }
}

.activity-feed {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  max-height: 320px;
  overflow: hidden;
}
.activity-entry {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .6rem .75rem;
  background: rgba(255,255,255,.07);
  border-radius: var(--radius-sm);
  animation: slideInEntry .5s cubic-bezier(.22,1,.36,1);
}
@keyframes slideInEntry {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.entry-icon { font-size: .85rem; flex-shrink: 0; margin-top: 1px; }
.entry-body { flex: 1; }
.entry-text { font-size: .8rem; color: rgba(255,255,255,.9); line-height: 1.4; }
.entry-time { font-size: .7rem; color: rgba(255,255,255,.45); margin-top: 2px; }

/* ── STATS BAR ────────────────────────────────────────────────── */
.stats-bar { background: var(--color-dark); padding: 3.5rem 0; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  text-align: center;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: 1rem;
  border-right: 1px solid rgba(255,255,255,.08);
}
.stat-item:last-child { border-right: none; }
.stat-number {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1;
}
.stat-static { font-size: clamp(2rem, 4vw, 3rem); }
.stat-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--color-sage);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── PRODUKT SEKTION ──────────────────────────────────────────── */
.product-section { background: var(--color-cream); }
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.product-text { display: flex; flex-direction: column; gap: 1.25rem; }

.section-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-olive);
}
.product-text h2 { color: var(--color-dark); }
.product-text p { color: var(--color-brown); }

.product-image img {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  object-fit: cover;
  max-height: 440px;
}

/* ── KARTE ────────────────────────────────────────────────────── */
.map-section { background: var(--color-white); }

/* Hinweis beim Scrollen ohne Strg (17.08.2026, Wunsch von Marius): Die Karte zoomt bewusst nur
   mit Strg/cmd + Mausrad, damit das Scrollen durch die Seite nicht in der Karte haengenbleibt.
   Ohne diesen Hinweis wirkt die Karte einfach kaputt. Liegt ueber der Karte, faengt aber keine
   Klicks ab (pointer-events: none). */
.map-zoom-hinweis {
  position: absolute;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(46,47,34,.45);
  color: var(--color-white);
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
  pointer-events: none;
}
.map-zoom-hinweis.sichtbar { opacity: 1; visibility: visible; }
.map-container {
  height: 500px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(46,47,34,.08);
  margin-top: 2.5rem;
}

/* Klick-zum-Laden-Platzhalter der Karte (09.08.2026, Datenschutz): Die Kartenkacheln kommen
   von OpenStreetMap, dabei geht die Besucher-IP dorthin. Selbst-Hosten ist hier nicht
   praktikabel (eigener Kachel-Server noetig), deshalb laedt die Karte erst auf Klick - der
   Klick ist die Einwilligung, ein seitenweiter Cookie-Banner wird dadurch nicht gebraucht. */
.map-consent {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  padding: 2rem;
  text-align: center;
  background: var(--color-cream);
}
.map-consent-text { max-width: 460px; color: var(--color-brown); font-size: .95rem; margin: 0; }
.map-consent-hint { font-size: .8rem; color: var(--color-olive); margin: 0; }
.map-consent-hint a { color: var(--color-olive); text-decoration: underline; }

.map-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.25rem;
}
.map-legend-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: var(--color-brown);
}
.map-legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 1px rgba(46,47,34,.15);
  flex-shrink: 0;
}

/* Leaflet popup anpassen */
.leaflet-popup-content-wrapper {
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
  font-family: 'Poppins', sans-serif !important;
}
.leaflet-popup-content { font-size: .85rem !important; }
.popup-name { font-weight: 700; margin-bottom: .25rem; color: var(--color-dark); }
.popup-link { color: var(--color-green); font-weight: 600; font-size: .8rem; }
.popup-badge {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 700;
  margin-bottom: .35rem;
}
.popup-p1 { background: #fef9c3; color: #854d0e; }
.popup-p2 { background: #ffedd5; color: #9a3412; }
.popup-p3 { background: #dbeafe; color: #1e40af; }
.popup-p4 { background: #dcfce7; color: #166534; }

/* Section helpers */
.section-header-center { text-align: center; margin-bottom: 3rem; }
.section-sub { color: var(--color-olive); margin-top: .5rem; font-size: .95rem; }
.section-header-between {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2.5rem;
}
.link-more { font-size: .88rem; font-weight: 600; color: var(--color-green); white-space: nowrap; margin-bottom: .25rem; }
.link-more:hover { color: var(--color-dark); }

/* ── ZIELGRUPPEN ──────────────────────────────────────────────── */
.audience-section { background: var(--color-sage); }
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.audience-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s;
}
.audience-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.audience-icon { font-size: 2.2rem; }
.audience-card h3 { color: var(--color-dark); font-size: 1.05rem; }
.audience-card p { color: var(--color-brown); font-size: .88rem; line-height: 1.7; flex: 1; }
.audience-cta { font-size: .85rem; font-weight: 700; color: var(--color-green); margin-top: auto; }
.audience-cta:hover { color: var(--color-dark); }

/* ── TIMELINE ─────────────────────────────────────────────────── */
.timeline-section { background: var(--color-white); }
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}
.timeline-line {
  position: absolute;
  top: 28px;
  left: calc(12.5% + 28px);
  right: calc(12.5% + 28px);
  height: 2px;
  background: linear-gradient(90deg, var(--color-green), rgba(58,90,46,.2));
  z-index: 0;
}
.timeline-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .75rem;
}
.timeline-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-green);
  color: var(--color-white);
  font-size: 1.3rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(58,90,46,.3);
}
.timeline-step h4 { font-size: 1rem; color: var(--color-dark); }
.timeline-step p { font-size: .83rem; color: var(--color-brown); line-height: 1.6; }

/* ── AUSZEICHNUNGEN ───────────────────────────────────────────── */
.awards-section { background: var(--color-cream); }
.awards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 760px;
  margin: 0 auto;
}
.award-card {
  background: var(--color-dark);
  border: 1.5px solid #b8960c;
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  transition: transform .2s;
}
.award-card:hover { transform: translateY(-3px); }
/* Award-Logos statt Emoji (09.08.2026). Beide Logos sind Querformate (569x201 und 519x202)
   mit hellem Hintergrund, die Karte ist dunkel - ohne die weisse Flaeche wuerden sie darauf
   untergehen. Feste Hoehe statt fester Breite: so wirken die beiden trotz leicht
   unterschiedlicher Seitenverhaeltnisse (2.83 vs. 2.57) gleich gross. */
.award-logo-wrap {
  background: #ffffff;
  border-radius: var(--radius-sm);
  padding: .7rem 1rem;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.award-logo { height: 42px; width: auto; display: block; }
@media (max-width: 680px) {
  .award-logo { height: 36px; }
}
.award-card h3 { color: var(--color-white); font-size: 1rem; }
.award-card p { color: var(--color-olive); font-size: .83rem; line-height: 1.6; }

/* ── NEWSROOM ─────────────────────────────────────────────────── */
.news-section { background: var(--color-white); }
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.news-card {
  background: var(--color-cream);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  transition: transform .2s, box-shadow .2s;
}
.news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.news-meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.news-meta time { font-size: .78rem; color: var(--color-olive); }
.news-badge {
  display: inline-block;
  padding: .15rem .6rem;
  border-radius: 20px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--color-brown);
  color: var(--color-white);
}
.news-badge-green { background: var(--color-green); }
.news-badge-amber { background: #b45309; }
.news-card h3 { font-size: 1rem; color: var(--color-dark); }
.news-card p { font-size: .85rem; color: var(--color-brown); line-height: 1.65; flex: 1; }
.news-link { font-size: .82rem; font-weight: 700; color: var(--color-green); margin-top: auto; }
.news-link:hover { color: var(--color-dark); }

/* ── KONTAKT ──────────────────────────────────────────────────── */
.contact-section { background: var(--color-white); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.contact-text h2 { color: var(--color-dark); margin-bottom: 1rem; }
.contact-text p { color: var(--color-brown); line-height: 1.75; }
.contact-info { margin-top: 2rem; }
.contact-email {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-green);
}
.contact-email:hover { color: var(--color-dark); }

.contact-form-wrap {
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-sage);
}
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: .9rem;
}
.form-group label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-brown);
  text-transform: uppercase;
  letter-spacing: .06em;
}
/* input[type="url"] und "search" fehlten hier bisher (Fund von Marius, 08.08.2026: die
   Social-Media-Felder schrumpften beim Speichern zusammen). Sie sahen nur zufaellig richtig
   aus, weil sie als Flex-Kind von .form-group automatisch auf volle Breite gestreckt wurden -
   sobald Autosave sie in seinen Marker-Wrapper legt, streckt sich der Wrapper und das Feld
   fiel auf seine Standardbreite zurueck. */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="tel"],
input[type="url"], input[type="search"], select, textarea {
  width: 100%;
  padding: .65rem .9rem;
  border: 1.5px solid rgba(46,47,34,.15);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-family: 'Poppins', inherit;
  color: var(--color-dark);
  background: var(--color-white);
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(58,90,46,.12);
}
textarea { resize: vertical; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23675f4d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.5rem; }

/* ── FOOTER ───────────────────────────────────────────────────── */
.site-footer { background: var(--color-dark); padding: 4rem 0 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.footer-brand { display: flex; flex-direction: column; gap: 1rem; }
.footer-brand p { font-size: .85rem; color: var(--color-olive); line-height: 1.7; max-width: 280px; }
.footer-social { display: flex; gap: .75rem; }
.footer-social a { color: var(--color-olive); transition: color .2s; }
.footer-social a:hover { color: var(--color-white); }

.footer-col h4 {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.4);
  margin-bottom: 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: .55rem; }
.footer-col ul li, .footer-col ul a { font-size: .85rem; color: var(--color-olive); }
.footer-col ul a:hover { color: var(--color-white); }

.footer-bottom { padding: 1.5rem 0; }
.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.footer-bottom p { font-size: .78rem; color: rgba(255,255,255,.3); }
.footer-bottom a { color: rgba(255,255,255,.3); }
.footer-bottom a:hover { color: var(--color-olive); }

/* ── Admin-Pages (andere Views) ───────────────────────────────── */
.admin-body { background: #f5f4f0; }
.admin-layout { display: flex; min-height: calc(100vh - 68px); }
.sidebar-toggle-btn {
  display: none;
  align-items: center;
  gap: .4rem;
  background: transparent;
  border: 1.5px solid rgba(46,47,34,.15);
  border-radius: var(--radius-sm);
  padding: .4rem .8rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-dark);
  cursor: pointer;
  margin-right: .75rem;
}
.sidebar-toggle-btn:hover { background: var(--color-sage); }
.sidebar-overlay { display: none; }
.admin-sidebar {
  width: 220px; flex-shrink: 0;
  background: var(--color-white);
  border-right: 1px solid rgba(46,47,34,.08);
  padding: 1.5rem 0;
  /* Fund von Marius (07.08.2026): auf langen Seiten (z.B. Kontakt-Detail mit vielen Modulen)
     scrollte die Sidebar bisher mit weg - man musste erst nach oben scrollen, um ueberhaupt
     navigieren zu koennen. position: sticky haelt sie jetzt immer im Viewport, unabhaengig
     davon, wie weit man im Hauptinhalt runterscrollt. 68px = Hoehe der Topnav (siehe
     .admin-layout min-height-Berechnung, die denselben Wert nutzt). */
  position: sticky;
  top: 68px;
  height: calc(100vh - 68px);
  overflow-y: auto;
}
.sidebar-group-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: .4rem 1.5rem .3rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-olive); font-family: 'Poppins', sans-serif;
}
.sidebar-group-toggle:hover { color: var(--color-green); }
.sidebar-chevron { font-size: .7rem; transition: transform .15s; flex-shrink: 0; }
.sidebar-group-toggle[aria-expanded="true"] .sidebar-chevron { transform: rotate(90deg); }
.sidebar-group-body[hidden] { display: none; }
/* Verschachtelte Sprungmarken (z.B. Kontakt-Module innerhalb "Kontakte") - etwas kleiner und
   weiter eingerueckt als normale Menuepunkte, damit die Hierarchie erkennbar bleibt. */
/* Verschachtelte Sprungmarken (Kontakt-/Content-Module etc.) - mit .jump-link direkt am
   Element (statt nur ueber .sidebar-subnav-Vorfahre) fuer ausreichend hohe Spezifitaet
   gegenueber der allgemeinen ".admin-sidebar ul li a"-Regel oben. Fund von Marius
   (07.08.2026): vorher wurden Sprungmarken faelschlich WENIGER statt MEHR eingerueckt
   (Spezifitaet zu niedrig) und faerbten sich gruen, nur weil ihr Eltern-<li> aktiv war
   (siehe li.active > a-Fix oben). */
.admin-sidebar .sidebar-subnav { padding: .2rem 0; margin: 0; list-style: none; }
.admin-sidebar a.jump-link {
  display: block;
  padding: .4rem 1.5rem .4rem 2.75rem;
  font-size: .8rem;
  font-weight: 400;
  color: var(--color-brown);
}
.admin-sidebar a.jump-link:hover, .admin-sidebar a.jump-link.active {
  background: var(--color-sage);
  color: var(--color-green);
}
.sidebar-order-list { display: flex; flex-direction: column; gap: .5rem; }
.sidebar-order-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1rem; background: #f9f8f5; border-radius: var(--radius-sm);
  font-size: .9rem; font-weight: 600; color: var(--color-dark);
}
.sidebar-order-buttons { display: flex; gap: .4rem; }
/* Sprungmarken-Ziele auf der Kontakt-Detailseite: die fixierte Topnav (.site-nav,
   position:sticky top:0) ueberdeckt sonst den Kopf des Moduls, wenn man per Klick in der
   Sidebar dorthin springt - scroll-margin-top schiebt den "Landepunkt" entsprechend nach
   unten. Fund von Marius (07.08.2026, gemessen ~75px zu tief gelandet). */
[id^="modul-"] { scroll-margin-top: 84px; }
.admin-sidebar .sidebar-group-body > li > a, .admin-sidebar .sidebar-group-body > li > .sidebar-group-toggle { padding-left: 2.25rem; }
.admin-sidebar ul li a {
  display: block;
  padding: .55rem 1.5rem;
  font-size: .88rem;
  font-weight: 500;
  color: var(--color-brown);
  transition: background .12s, color .12s;
}
.admin-sidebar ul li a:hover, .admin-sidebar ul li.active > a {
  background: var(--color-sage);
  color: var(--color-green);
}
.admin-sidebar ul li.sidebar-divider {
  height: 1px;
  margin: .75rem 1.5rem;
  background: rgba(46,47,34,.1);
}
.admin-sidebar ul li.sidebar-heading {
  padding: .4rem 1.5rem .3rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-olive);
}
.admin-main { flex: 1; padding: 2rem; min-width: 0; }
.admin-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.admin-header h1 { font-size: 1.5rem; }
.admin-header .btn { height: 40px; padding: 0 1.2rem; }
.role-badge {
  background: var(--color-sage);
  color: var(--color-green);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: .2rem .6rem;
  border-radius: 20px;
}
.admin-section { margin-bottom: 2.5rem; }
.admin-section h2 { font-size: 1.1rem; margin-bottom: 1rem; }
.admin-table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid rgba(46,47,34,.1); box-shadow: var(--shadow-sm); }
.admin-table { width: 100%; border-collapse: collapse; background: var(--color-white); font-size: .88rem; }
.admin-table thead { background: #f9f8f5; }
.admin-table th { padding: .8rem 1rem; text-align: left; font-size: .72rem; font-weight: 700; color: var(--color-olive); text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid rgba(46,47,34,.08); }
.admin-table td { padding: .85rem 1rem; border-bottom: 1px solid rgba(46,47,34,.05); vertical-align: middle; }
/* Zweite Zeile im Spaltenkopf, die die Lesart einer Spalte erklaert (z.B. "(Verträge /
   Bekundungen)" unter Abos/Beteiligungen in der Standortverwaltung, 08.08.2026). Eigene
   Zeile, kleiner, ohne Grossbuchstaben-Sperrung. Linksbuendig wie der Spaltenname darueber -
   zentriert wirkte gegenueber den linksbuendigen Kopfzeilen unruhig. */
.th-unterzeile {
  display: block;
  margin-top: .15rem;
  font-size: .62rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-olive);
  opacity: .75;
  white-space: nowrap;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: #f9f8f5; }
.action-cell { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.status-green { color: var(--color-green); font-weight: 600; }
.status-red   { color: #dc2626; font-weight: 600; }

.admin-form { max-width: 760px; }
.form-fieldset {
  border: 1px solid rgba(46,47,34,.1);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}
.form-fieldset legend { font-weight: 700; font-size: .92rem; padding: 0 .5rem; color: var(--color-dark); }
/* Kleiner Zaehler in einer Modul-Legende (z.B. "Kommentare 3") - zeigt auf einen Blick, ob
   das zugeklappt wirkende Modul ueberhaupt Inhalt hat. */
.legend-count {
  display: inline-block;
  margin-left: .15rem;
  padding: .05rem .45rem;
  border-radius: 20px;
  background: var(--color-sage);
  color: var(--color-green);
  font-size: .72rem;
  font-weight: 700;
  vertical-align: middle;
}
/* Fund von Marius (07.08.2026): Unter "Anzahl gewuenschter Kundenkarten" klaffte mehr Luft
   als sonst (34px statt 20px). Ursache: eine .form-group direkt im Fieldset laesst ihren
   margin-bottom (14.4px) mit dem margin-top der Trennlinie (20px) zusammenfallen -> 20px.
   Steckt die Gruppe aber in einer .form-row, ist das ein Grid-Container, in dem Margins
   NICHT kollabieren - der Abstand addierte sich. Loesung: der untere Abstand wandert von der
   Gruppe auf die Zeile selbst. Die Zeile ist ein normales Block-Element, ihr Margin kollabiert
   also wieder mit der Trennlinie (-> 20px), und gestapelte .form-row behalten ihren Abstand
   von 14.4px zueinander. */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: .9rem; }
.form-row .form-group { margin-bottom: 0; }
.form-actions { display: flex; gap: 1rem; margin-top: .5rem; }
/* Kompakter Filterblock (07.08.2026, Wunsch von Marius: "Filter & Suche" nahm zu viel Platz
   ein). Drei Aenderungen gegenueber dem Standard-Formular:
   1) .admin-form-wide hebt die max-width von 760px auf, damit der Block genau so breit wird
      wie die Tabelle darunter (beide sitzen im selben .admin-main-Flex-Kind).
   2) .filter-grid ordnet die Felder automatisch in so viele Spalten, wie bei der aktuellen
      Fensterbreite Platz haben (minmax 185px) - statt fest zwei pro Zeile. Kein manuelles
      Gruppieren in .form-row mehr noetig, kein Media-Query.
   3) Kompaktere Label-/Feldhoehen, damit mehr Zeilen ins Bild passen. */
.admin-form-wide { max-width: none; }
/* In breiten Formularen wuerden zwei Spalten die Felder auf ~590px aufblasen - fuer PLZ oder
   Anrede absurd. Drei Spalten halten die Felder bei ~390px; Zeilen mit nur zwei Feldern
   lassen die dritte Spalte frei, statt sich zu strecken (Wunsch von Marius, 07.08.2026:
   alle Module auf die volle Breite). */
.admin-form-wide .form-row { grid-template-columns: repeat(3, 1fr); }
.admin-form-wide .form-fieldset { max-width: none; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: .6rem 1rem; }
/* Feld unten ausrichten: bei zweizeiligen Labels ("Beteiligungsvertrag hochgeladen") wuerde
   das Eingabefeld sonst tiefer sitzen als die Felder daneben und die Reihe wirkt zerrissen. */
.filter-grid .form-group { margin-bottom: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.filter-grid .form-group label { font-size: .72rem; margin-bottom: .15rem; }
.filter-grid input, .filter-grid select { padding: .38rem .5rem; font-size: .85rem; }
.field-hint { font-size: .8rem; color: var(--color-olive); margin-bottom: 1rem; }

/* Tracker pills */
.tracker { display: flex; flex-direction: column; gap: 1.25rem; }
.tracker-pills { display: flex; gap: .5rem; flex-wrap: wrap; }
.tracker-pill { padding: .25rem .75rem; border-radius: 20px; font-size: .75rem; font-weight: 600; border: 1.5px solid transparent; }
.pill-done    { background: #dcfce7; color: #166534; border-color: #86efac; }
.pill-pending { background: #f3f4f6; color: #9ca3af; border-color: #e5e7eb; }
.tracker-edit-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tracker-edit-row > label { font-weight: 600; width: 220px; flex-shrink: 0; font-size: .88rem; }
.tracker-edit-pills { display: flex; gap: .5rem; }
.pill-radio { cursor: pointer; }
.pill-radio input { display: none; }
.pill-radio input:checked + .pill-label { box-shadow: 0 0 0 2px var(--color-green); }
.pill-label { display: inline-block; padding: .25rem .75rem; border-radius: 20px; font-size: .75rem; font-weight: 600; cursor: pointer; }

/* Autosave-Statusanzeige (ersetzt die "Speichern"-Buttons in den Kontakt-Modulen) */
.autosave-status { font-size: .78rem; font-weight: 600; transition: opacity .4s; opacity: 0; display: inline-block; }
/* Solange nichts gespeichert wurde, ist die Statuszeile leer - belegte aber trotzdem ~19px
   Hoehe und stand als Element zwischen letztem Feld und Trennlinie. Dadurch konnten die
   Aussenabstaende nicht zusammenfallen und die Luecke wuchs auf 58px, waehrend alle anderen
   Trennlinien bei 20px liegen (Fund von Marius, 07.08.2026). Aus dem Fluss genommen, wenn
   leer: Feld und Trennlinie liegen dann direkt aneinander, die Abstaende kollabieren wieder
   auf die ueblichen 20px. */
.autosave-status:empty { display: none; }
.autosave-status-speichert { color: var(--color-olive, #8b8d75); opacity: 1 !important; }
.autosave-status-ok { color: var(--color-green, #2D6A42); }
.autosave-status-fehler { color: #991b1b; opacity: 1 !important; }

/* Autosave-Rueckmeldung am Feld selbst (07.08.2026, Wunsch von Marius): Statt eines Hakens
   UNTER dem Feld - der alle folgenden Felder nach unten geschoben hat (Layout-Shift) -
   bekommt das Feld selbst kurz einen gruenen Schein plus einen Haken INNEN am rechten Rand.
   box-shadow und ein absolut positionierter Marker brauchen keinen Platz im Layout, es
   verschiebt sich also nichts mehr. Variante "C" aus dem abgestimmten Muster. */
/* Ampel-Logik fuer Autosave-Felder (07.08.2026, Fund von Marius): Der globale Fokus-Stil
   oben ist gruen mit fast demselben Schein wie die Erfolgsmeldung - beim Anklicken sah ein
   Feld also schon "gespeichert" aus. Deshalb bekommen NUR Felder mit Autosave beim Fokus
   einen gelben Rahmen ("in Bearbeitung, noch nicht gespeichert"). Gruen ist damit
   ausschliesslich der Erfolgsmoment, rot der Fehler. Die Klasse .autosave-feld setzt
   autosave.js beim Initialisieren - oeffentliche Formulare mit Speichern-Button behalten
   den gruenen Fokus, dort traegt die Farbe keine Speicher-Bedeutung. */
.autosave-feld:focus {
  border-color: #d97706 !important;
  box-shadow: 0 0 0 3px rgba(217,119,6,.15) !important;
}
.autosave-feld-wrap { position: relative; display: block; }
/* Sicherheitsnetz: Felder, die ihre Breite nur durchs Flex-Stretching von .form-group
   bekommen, verlieren sie im Wrapper (siehe Kommentar bei input[type="url"] oben). Damit das
   nicht bei jedem kuenftig neuen Feldtyp erneut auffaellt, fuellt ein gewrapptes Feld immer
   die Wrapper-Breite. Die max-width des Feldes wird beim Anlegen auf den Wrapper kopiert
   (autosave.js), schmale Felder bleiben also schmal. */
.autosave-feld-wrap > input, .autosave-feld-wrap > select, .autosave-feld-wrap > textarea { width: 100%; }
.autosave-feld-marker {
  position: absolute;
  right: .6rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none; /* Klick geht durchs Symbol hindurch ins Feld */
}
/* Bei <select> sitzt rechts schon der native Aufklapp-Pfeil - Marker weiter nach links. */
.autosave-feld-marker-select { right: 1.9rem; }
/* Bei <textarea> ist "vertikal mittig" sinnlos (mehrzeilig) - oben rechts andocken. */
.autosave-feld-marker-textarea { top: .6rem; transform: none; }
.autosave-feld-marker-ok { color: var(--color-green, #2D6A42); }
.autosave-feld-marker-fehler { color: #991b1b; }
/* Gruen/Rot muessen den gelben Fokus-Rahmen schlagen, solange sie sichtbar sind - z.B. wenn
   ein Dropdown per Tastatur geaendert wird und dabei den Fokus behaelt. Deshalb hier
   zusaetzlich :focus mitgefuehrt und beide Klassen kombiniert (hoehere Spezifitaet). */
.autosave-feld.autosave-feld-ok, .autosave-feld.autosave-feld-ok:focus {
  box-shadow: 0 0 0 3px rgba(45,106,66,.18) !important;
  border-color: var(--color-green, #2D6A42) !important;
}
.autosave-feld.autosave-feld-fehler, .autosave-feld.autosave-feld-fehler:focus {
  box-shadow: 0 0 0 3px rgba(153,27,27,.18) !important;
  border-color: #991b1b !important;
}
/* Checkbox/Radio sind zu klein fuer einen Schein am Element selbst - dort wird das
   umgebende Label markiert (siehe markiereFeld() in autosave.js). */
.autosave-label-ok, .autosave-label-fehler { border-radius: var(--radius-sm); transition: box-shadow .25s, background-color .25s; }
.autosave-label-ok { box-shadow: 0 0 0 3px rgba(45,106,66,.18); background: rgba(45,106,66,.06); }
.autosave-label-fehler { box-shadow: 0 0 0 3px rgba(153,27,27,.18); background: rgba(153,27,27,.06); }

/* Shared form components (location pages) */
.contact-form .form-group { margin-bottom: .75rem; }

/* Phase badges */
.phase-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .2rem .55rem;
  border-radius: 20px;
}
.phase-badge.phase-1 { background: #fef9c3; color: #854d0e; }
.phase-badge.phase-2 { background: #ffedd5; color: #9a3412; }
.phase-badge.phase-3 { background: #dbeafe; color: #1e40af; }
.phase-badge.phase-4 { background: #dcfce7; color: #166534; }

/* Cards (for location list pages) */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
.location-card { background: var(--color-white); border: 1px solid rgba(46,47,34,.1); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; color: var(--color-dark); transition: transform .2s, box-shadow .2s; }
.location-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card-phase-bar { height: 4px; }
.card-phase-bar.phase-1 { background: #eab308; }
.card-phase-bar.phase-2 { background: #f97316; }
.card-phase-bar.phase-3 { background: #2563eb; }
.card-phase-bar.phase-4 { background: var(--color-green); }
.card-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.card-top { display: flex; flex-direction: column; gap: .35rem; }
.card-address { font-size: .8rem; color: var(--color-olive); min-height: 2.2rem; line-height: 1.4; }
.card-text { font-size: .85rem; color: var(--color-brown); flex: 1; }
.card-stat { flex: 1; margin: .5rem 0 .75rem; }
.card-chip { display: inline-block; background: var(--color-cream); color: var(--color-brown); font-size: .78rem; font-weight: 600; padding: .3rem .7rem; border-radius: 20px; }
.card-link { font-size: .82rem; font-weight: 700; color: var(--color-green); margin-top: auto; }

/* Alerts */
.alert { padding: .75rem 1rem; border-radius: var(--radius-sm); font-size: .88rem; margin-bottom: 1.25rem; font-weight: 500; }
.alert-error   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.alert-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* Rueckmeldung direkt am Absende-Knopf (10.08.2026).
   Fund von Marius: Ohne Abstand klebte der Kasten am Knopf und sah unprofessionell aus.
   margin-bottom wird auf 0 gesetzt, weil .alert unten 1.25rem mitbringt - im Formular waere
   das ein zweiter, unnoetiger Abstand vor dem Formularende. */
.form-rueckmeldung { margin-top: 1rem; }
.form-rueckmeldung .alert { margin-bottom: 0; }
/* Leer, solange keine Meldung ansteht - dann auch keinen Abstand erzeugen. */
.form-rueckmeldung:empty { margin-top: 0; }

/* Sidebar cards (location pages) */
.location-layout { display: flex; gap: 2.5rem; align-items: flex-start; padding-top: 2.5rem; padding-bottom: 3rem; }
.location-main { flex: 1; min-width: 0; }
.location-sidebar { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.content-section { background: var(--color-white); border: 1px solid rgba(46,47,34,.08); border-radius: var(--radius-md); padding: 1.75rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-sm); }
.content-section h2 { margin-bottom: 1rem; font-size: 1.3rem; }
.sidebar-card { background: var(--color-white); border: 1px solid rgba(46,47,34,.08); border-radius: var(--radius-md); padding: 1.4rem; box-shadow: var(--shadow-sm); }
.sidebar-dark { background: var(--color-dark); border-color: var(--color-dark); color: rgba(255,255,255,.85); }
.sidebar-dark h3 { color: var(--color-white); margin-bottom: .75rem; }
.sidebar-dark p { color: rgba(255,255,255,.75); font-size: .88rem; }
.sidebar-card h3 { font-size: .95rem; margin-bottom: .75rem; color: var(--color-dark); }
.sidebar-card p { font-size: .88rem; color: var(--color-brown); }
/* Ausnahme fuer den Datenschutz-Hinweis (Fund von Marius, 09.08.2026): Derselbe Text stand im
   linken Abstimmungsformular bei 11.5px, im rechten Kontaktformular aber bei 14.1px und
   dominierte dort die ganze Karte. Ursache: ".sidebar-card p" hat zwei Klassen und gewinnt
   damit gegen ".dsgvo-hint" (0.72rem). Die Ausnahme zieht die Groesse wieder gleich, ohne die
   uebrigen Absaetze in Seitenleisten-Karten anzutasten. */
.sidebar-card p.dsgvo-hint { font-size: .72rem; }
.sidebar-list { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.sidebar-list li { font-size: .83rem; padding-left: 1.4rem; position: relative; color: rgba(255,255,255,.6); }
.sidebar-list li::before { content: '●'; position: absolute; left: 0; font-size: .6rem; top: .25rem; }
.sidebar-list li.done { color: #74c464; }
.sidebar-list li.done::before { color: #74c464; }
.sidebar-list li.current { color: #fde68a; font-weight: 600; }
.sidebar-list li.current::before { color: #fde68a; }
.sidebar-list li.pending { color: rgba(255,255,255,.35); }
.kpi-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: .5rem; }
.kpi { text-align: center; }
.kpi-value { display: block; font-size: 1.5rem; font-weight: 700; color: var(--color-white); }
.kpi-label { font-size: .72rem; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .04em; }

/* Page header for inner pages */
.page-header { background: var(--color-cream); padding: 3rem 0 2.5rem; border-bottom: 1px solid rgba(46,47,34,.08); }
.page-header h1 { margin-bottom: .5rem; }
.page-header p { color: var(--color-brown); }

/* Filter bar */
.filter-bar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.filter-btn { padding: .4rem .9rem; border: 1.5px solid rgba(46,47,34,.15); border-radius: 20px; background: var(--color-white); font-size: .82rem; font-weight: 600; cursor: pointer; color: var(--color-brown); font-family: 'Poppins', inherit; transition: all .15s; }
.filter-btn:hover, .filter-btn.active { background: var(--color-green); color: var(--color-white); border-color: var(--color-green); }

/* Auth page */
.auth-page { background: var(--color-cream); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.auth-container { width: 100%; max-width: 420px; padding: 2rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.auth-logo { display: flex; align-items: center; gap: .6rem; }
.auth-logo img { height: 40px; }
.auth-card { width: 100%; background: var(--color-white); border: 1px solid rgba(46,47,34,.1); border-radius: var(--radius-lg); padding: 2.25rem; box-shadow: var(--shadow-md); }
.auth-card h1 { font-size: 1.5rem; margin-bottom: .25rem; }
.auth-sub { color: var(--color-olive); font-size: .88rem; margin-bottom: 1.5rem; }
.auth-form { margin-top: 1.5rem; }
.auth-back { font-size: .85rem; color: var(--color-olive); }
.auth-back:hover { color: var(--color-green); }

/* Btn-sm for tables */
.btn-sm { padding: .28rem .7rem; font-size: .78rem; border-radius: var(--radius-sm); background: var(--color-sage); color: var(--color-green); font-weight: 600; border: 1px solid rgba(46,47,34,.1); cursor: pointer; font-family: 'Poppins', inherit; }
.btn-sm:hover { background: var(--color-green); color: var(--color-white); }
.btn-sm:disabled, .btn-sm:disabled:hover {
  background: #e2e2e0;
  color: #6b6b66;
  border-color: rgba(46,47,34,.08);
  cursor: not-allowed;
}
.btn-ghost-sm { background: transparent; border-color: rgba(46,47,34,.1); color: var(--color-brown); }
.btn-ghost-sm:hover { background: var(--color-cream); color: var(--color-dark); }
.btn-outline { display: inline-flex; align-items: center; justify-content: center; padding: .65rem 1.4rem; border-radius: var(--radius-sm); font-weight: 600; font-size: .92rem; cursor: pointer; border: 1.5px solid var(--color-dark); color: var(--color-dark); background: transparent; font-family: 'Poppins', inherit; transition: all .2s; }
.btn-outline:hover { background: var(--color-dark); color: var(--color-white); }

/* ── STANDORTSEITEN – Hero ────────────────────────────────────── */
.hero-location {
  position: relative;
  min-height: 400px;
  background: var(--color-dark) url('/img/container.png') center 35% / cover no-repeat;
  display: flex;
  align-items: flex-end;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(46,47,34,.4) 0%, rgba(46,47,34,.88) 100%);
}
.hero-location .container {
  position: relative;
  z-index: 1;
  padding-top: 4rem;
  padding-bottom: 3.5rem;
}
.hero-content { max-width: 680px; }
.hero-content h1 { color: var(--color-white); margin: .75rem 0 .4rem; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.hero-content p  { color: rgba(255,255,255,.72); font-size: .95rem; }

/* Phase-Badges im Hero (hell auf dunkel) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .95rem;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  width: fit-content;
}
.badge-phase1 { background: rgba(234,179,8,.18); color: #fde047; border: 1px solid rgba(234,179,8,.35); }
.badge-phase2 { background: rgba(249,115,22,.18);  color: #fdba74; border: 1px solid rgba(249,115,22,.35); }
.badge-phase3 { background: rgba(37,99,235,.18);  color: #93c5fd; border: 1px solid rgba(37,99,235,.35); }
.badge-phase4 { background: rgba(74,222,128,.18);  color: #86efac; border: 1px solid rgba(74,222,128,.35); }

/* Vote/funding/tracker/blog (location pages) */
.vote-results { margin: 1.25rem 0; }
.vote-bar-wrap { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.vote-label { font-size: .83rem; width: 90px; flex-shrink: 0; }
.vote-bar { flex: 1; height: 9px; background: rgba(46,47,34,.08); border-radius: 5px; overflow: hidden; }
.vote-fill { height: 100%; border-radius: 5px; }
.fill-yes { background: var(--color-green); }
.fill-no  { background: var(--color-olive); }
.vote-pct { font-size: .83rem; font-weight: 700; width: 40px; text-align: right; flex-shrink: 0; }
.vote-total { font-size: .78rem; color: var(--color-olive); margin-top: .4rem; }
.vote-form { margin-top: 1.5rem; }
.vote-buttons { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.btn-vote { flex: 1; min-width: 180px; }
.funding-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.funding-block h4 { font-size: .82rem; margin-bottom: .75rem; color: var(--color-olive); text-transform: uppercase; letter-spacing: .04em; }
.progress-wrap { display: flex; flex-direction: column; gap: .4rem; }
.progress-bar { height: 9px; background: rgba(46,47,34,.08); border-radius: 5px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--color-green); border-radius: 5px; }
.progress-label { font-size: .8rem; color: var(--color-brown); }
.funding-pct { font-size: 1.05rem; font-weight: 700; color: var(--color-green); margin-top: .2rem; }
.blog-card { border-left: 3px solid var(--color-green); padding: .9rem 1rem; margin-bottom: 1rem; }
.blog-card-pinned { border: 2px solid var(--color-green); border-left: 2px solid var(--color-green); border-radius: var(--radius-sm); }
.blog-pin-badge {
  display: inline-block;
  background: var(--color-green);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: .3rem .8rem;
  letter-spacing: .03em;
  border-radius: 4px;
  margin-bottom: .5rem;
}
.blog-meta { font-size: .75rem; color: var(--color-olive); margin-bottom: .3rem; }
.blog-card h3 { font-size: .95rem; margin-bottom: .35rem; }
.blog-card p { font-size: .85rem; color: var(--color-brown); }
.blog-image { border-radius: var(--radius-sm); margin-bottom: .75rem; max-height: 220px; width: 100%; object-fit: cover; }
.open-status { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .85rem; margin-bottom: 1rem; padding: .4rem .8rem; border-radius: 20px; width: fit-content; }
.status-open { background: rgba(58,90,46,.15); color: #74c464; }
.status-closed { background: rgba(220,38,38,.12); color: #f87171; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.hours-table { width: 100%; font-size: .8rem; margin-top: .5rem; }
.hours-table td { padding: .25rem 0; color: rgba(255,255,255,.75); }
.hours-table td:last-child { text-align: right; color: rgba(255,255,255,.55); }
.text-muted { color: var(--color-olive); font-size: .88rem; }

/* ── BEKANNT AUS ──────────────────────────────────────────────── */
.press-bar {
  background: var(--color-white);
  padding: 2rem 0;
  border-top: 1px solid var(--color-sage);
  border-bottom: 1px solid var(--color-sage);
}
.press-bar-label {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-olive);
  margin-bottom: 1.25rem;
  line-height: 1;
}
.press-logos-track {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.press-logos {
  display: flex;
  gap: 3rem;
  align-items: center;
  width: max-content;
  animation: press-logos-scroll var(--press-scroll-duration, 28s) linear infinite;
}
.press-logos-track:hover .press-logos { animation-play-state: paused; }
@keyframes press-logos-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.press-logos img {
  height: 40px;
  display: block;
  flex-shrink: 0;
}

/* ── PRESSE-LISTE (unter Newsroom) ────────────────────────────── */
.press-list-wrap {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(46,47,34,.08);
}
.press-list-header { margin-bottom: 1rem; }
.press-list-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-olive);
}
.press-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.press-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .65rem 0;
  border-bottom: 1px solid rgba(46,47,34,.06);
  flex-wrap: wrap;
}
.press-list li:last-child { border-bottom: none; }
/* Medium + Beitragstitel in einer Zeile (09.08.2026). Die Kuerzung passiert in der View an
   einer Wortgrenze (80 Zeichen) - hier deshalb KEIN text-overflow:ellipsis mehr, das schnitt
   buchstabenweise mitten im Wort ab. Auf schmalen Bildschirmen darf der Titel stattdessen in
   die zweite Zeile umbrechen; ganze Woerter bleiben so immer lesbar. */
.press-list-source {
  font-size: .88rem;
  font-weight: 600;
  color: var(--color-dark);
  flex: 1;
  min-width: 0;
}
.press-list-title { font-weight: 400; color: var(--color-brown); }
.press-list-date   { font-size: .8rem; color: var(--color-olive); white-space: nowrap; }
.press-list-link   { font-size: .8rem; font-weight: 700; color: var(--color-green); white-space: nowrap; }
.press-list-link:hover { color: var(--color-dark); }

/* ── INVESTIEREN ──────────────────────────────────────────────── */
.invest-section { background: var(--color-dark); }

.invest-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-olive);
  margin-bottom: .75rem;
}
.invest-h2 { color: var(--color-white); }
.invest-sub {
  color: var(--color-olive);
  margin-top: .5rem;
  font-size: .95rem;
}

.invest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.invest-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 2rem;
  color: var(--color-white);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.invest-card-featured {
  border-color: rgba(255,255,255,.25);
}
.invest-card h3 { color: var(--color-white); font-size: 1.05rem; }
.invest-card p  { color: rgba(255,255,255,.75); font-size: .88rem; line-height: 1.7; }

.invest-card-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-olive);
  margin-bottom: .75rem;
}

.invest-badge-recommended,
.invest-badge-closing {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 600;
}
.invest-badge-recommended {
  background: #eae9ce;
  color: #2e2f22;
}
.invest-badge-closing {
  background: #c47a10;
  color: var(--color-white);
}

.invest-card-link {
  display: block;
  margin-top: 1rem;
  font-size: 13px;
  color: var(--color-olive);
  text-decoration: none;
}
.invest-card-link:hover { color: var(--color-white); }

.invest-cta-wrap {
  text-align: center;
  margin-top: 2.5rem;
}
.invest-cta-link {
  display: inline-block;
  border: 1.5px solid rgba(255,255,255,.35);
  color: var(--color-white);
  border-radius: 8px;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s;
}
.invest-cta-link:hover { background: rgba(255,255,255,.08); color: var(--color-white); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .product-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .product-image { order: -1; }
  .timeline { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .timeline-line { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .audience-grid { grid-template-columns: 1fr 1fr; }
  .invest-grid { grid-template-columns: 1fr; }
  .location-layout { flex-direction: column; }
  .location-sidebar { width: 100%; }
  .admin-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 260px;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform .25s ease;
    overflow-y: auto;
    box-shadow: var(--shadow-md);
  }
  .admin-sidebar.open { transform: translateX(0); }
  .sidebar-toggle-btn { display: inline-flex !important; }
  .sidebar-overlay.open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(46,47,34,.5);
    z-index: 190;
  }
}

@media (max-width: 1024px) {
  .hero-right { width: 270px; }
}

@media (max-width: 768px) {
  .hero-inner {
    flex-direction: column;
    padding: 5rem 1.5rem 2rem;
  }
  .hero-right { display: none; }
  .hero-left { width: 100%; }
}

@media (max-width: 767px) {
  .activity-ticker-mobile { display: block; }
  .press-logos { gap: 1.5rem; }
}

@media (max-width: 980px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 68px; left: 0; right: 0;
    background: var(--color-white);
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem 1.5rem;
    gap: .9rem;
    border-bottom: 1px solid rgba(46,47,34,.08);
    box-shadow: var(--shadow-md);
  }
  .nav-links.open { display: flex; }
  .nav-right { display: none; }
  .nav-right.open { display: flex; flex-direction: column; width: 100%; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.06); }
  .audience-grid { grid-template-columns: 1fr; }
  .awards-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr; }
  .funding-grid { grid-template-columns: 1fr; }
  .form-row-2, .form-row { grid-template-columns: 1fr; }
  .vote-buttons { flex-direction: column; }
}


/* ── Phase-1-Spezifisch ───────────────────────────────────────── */
.location-alert {
  text-align: center;
  padding: .85rem 1.5rem;
  font-size: .92rem;
  font-weight: 600;
}
.alert-success-bar { background: #f0fdf4; color: #166534; border-bottom: 2px solid #bbf7d0; }
.alert-info-bar    { background: #eff6ff; color: #1e40af; border-bottom: 2px solid #bfdbfe; }

.survey-intro { color: var(--color-brown); margin-bottom: 1.25rem; }
.vote-already { color: var(--color-olive); font-size: .9rem; margin-top: 1rem; font-style: italic; }

.form-group-check { margin-top: .25rem; }
.admin-search-bar { margin-bottom: 1rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.admin-search-bar input {
  flex: 1 1 260px;
  width: 100%;
  max-width: 400px;
  height: 40px;
  padding: 0 .9rem;
  border: 1.5px solid rgba(46,47,34,.15);
  border-radius: var(--radius-sm);
  font-family: 'Poppins', inherit;
  font-size: .9rem;
}
.admin-search-bar input:focus { outline: none; border-color: var(--color-green); }
.admin-search-bar .btn { height: 40px; padding: 0 1.2rem; font-size: .9rem; border-width: 1.5px; }
.th-sortable { cursor: pointer; user-select: none; }
.th-sortable:hover { color: var(--color-green); }
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--color-sage);
  border-radius: var(--radius-sm);
  padding: .75rem 1.1rem;
  margin-bottom: 1rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--color-dark);
}
.btn-danger-sm {
  font-size: .82rem;
  font-weight: 600;
  padding: .35rem .8rem;
  border-radius: var(--radius-sm);
  border: 1px solid #dc2626;
  background: #fff;
  color: #dc2626;
  cursor: pointer;
}
.btn-danger-sm:hover { background: #dc2626; color: #fff; }
.btn-icon-sm {
  width: 28px; height: 28px;
  border: 1px solid rgba(46,47,34,.15);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font-size: .85rem;
  cursor: pointer;
  opacity: 1;
}
.btn-icon-sm:disabled {
  cursor: not-allowed;
  opacity: .5;
}
.nav-badge {
  display: inline-block;
  background: #dc2626;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  vertical-align: middle;
}
.grund-modal-overlay {
  position: fixed; inset: 0; background: rgba(46,47,34,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 1rem;
}
.grund-modal {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  max-width: 440px;
  width: 100%;
  box-shadow: var(--shadow-md);
}
.grund-modal h3 { margin-bottom: .5rem; }

/* Phasenwechsel-Dialog (17.08.2026, Fund von Marius): Die 440px des Grund-Dialogs sind fuer
   einen kurzen Nachfragetext gedacht. Der Phasenwechsel enthaelt seit dem vierstufigen Ablauf
   Textfelder, eine Mailvorschau und drei Schaltflaechen - dort wurde alles gequetscht und die
   Knoepfe brachen um. Eigene Breite plus Scrollen im Dialog statt in der Seite, damit die
   Knopfzeile immer erreichbar bleibt. */
#phaseTransitionModal .grund-modal {
  max-width: 720px;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}
#phaseTransitionModal .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  position: sticky;
  bottom: -1.75rem;
  background: var(--color-white);
  padding: .75rem 0;
  margin-bottom: -1.75rem;
  border-top: 1px solid rgba(46,47,34,.08);
}
#phaseTransitionModal textarea { margin-top: 0; }
.kommentar-list { display: flex; flex-direction: column; gap: .75rem; }
.kommentar-item {
  background: var(--color-cream);
  border-radius: var(--radius-sm);
  padding: .85rem 1.1rem;
}
.kommentar-meta { font-size: .78rem; color: var(--color-olive); margin-bottom: .3rem; }
.kommentar-item p { font-size: .9rem; color: var(--color-dark); white-space: pre-wrap; }
.grund-modal textarea {
  width: 100%;
  margin-top: .75rem;
  padding: .6rem .8rem;
  border: 1.5px solid rgba(46,47,34,.15);
  border-radius: var(--radius-sm);
  font-family: 'Poppins', inherit;
  font-size: .9rem;
}
.detail-row td { background: var(--color-cream); padding: 1rem 1.25rem; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 1.5rem; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem 1.5rem; font-size: .85rem; color: var(--color-dark); }
.detail-grid strong { color: var(--color-brown); font-weight: 600; }
.column-config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(46,47,34,.06);
}
.column-config-arrows { display: flex; gap: .25rem; }
.column-config-arrows button {
  width: 26px; height: 26px;
  border: 1px solid rgba(46,47,34,.15);
  border-radius: 4px;
  background: var(--color-white);
  cursor: pointer;
  font-size: .8rem;
}
.column-config-arrows button:disabled { opacity: .3; cursor: not-allowed; }
.column-config-arrows button:not(:disabled):hover { background: var(--color-sage); }
.hp-field { position: absolute; left: -9999px; top: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }
.dsgvo-hint {
  font-size: .72rem;
  font-weight: 200;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-olive);
  line-height: 1.5;
  margin: .5rem 0 1rem;
}
.dsgvo-hint a { color: var(--color-olive); text-decoration: underline; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem .5rem; }
.checkbox-grid label { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--color-dark); cursor: pointer; }
.placeholder-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.pill-btn {
  font-size: .74rem;
  font-weight: 600;
  padding: .25rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(45,106,66,.3);
  background: var(--color-sage);
  color: var(--color-green);
  cursor: pointer;
  font-family: 'Poppins', inherit;
}
.pill-btn:hover { background: var(--color-green); color: #fff; }
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .85rem;
  color: var(--color-brown);
  cursor: pointer;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: .15rem;
  accent-color: var(--color-green);
  appearance: auto;
}

/* Blog aufklappbar */
.blog-list { display: flex; flex-direction: column; gap: 0; }
.blog-collapsible { border-left: 3px solid var(--color-green); padding: 0; margin-bottom: 1rem; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-white); box-shadow: var(--shadow-sm); }
.blog-card-header { padding: 1rem 1.1rem; cursor: pointer; }
.blog-card-header:hover { background: rgba(46,47,34,.02); }
.blog-preview { font-size: .85rem; color: var(--color-brown); margin-top: .35rem; }
.blog-toggle-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .6rem;
  background: none; border: none; cursor: pointer;
  font-size: .82rem; font-weight: 700; color: var(--color-green);
  padding: 0; font-family: inherit;
}
.blog-toggle-btn:hover { color: var(--color-dark); }
.toggle-icon { display: inline-block; transition: transform .2s; }
.blog-card-body { padding: .25rem 1.1rem 1.1rem; border-top: 1px solid rgba(46,47,34,.06); }
.blog-full-text { font-size: .88rem; color: var(--color-dark); white-space: pre-line; line-height: 1.75; }
.blog-images { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.blog-post-img { border-radius: var(--radius-sm); max-height: 200px; object-fit: cover; flex: 1 1 200px; }

.sidebar-dark .sidebar-stand-text,
.sidebar-stand-text { color: #ffffff !important; font-size: .88rem; margin-bottom: 1rem; }

/* Stream – Ortsname als Link */
.stream-location-link {
  color: #93c5fd;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.stream-location-link:hover { color: #ffffff; }

/* ── Teilen-Buttons ───────────────────────────────────────────── */
.share-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .5rem;
}
.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: none;
  font-family: 'Poppins', sans-serif;
  transition: opacity .15s, transform .1s;
  color: #fff;
  text-decoration: none;
  font-size: 0;        /* Text ausblenden */
}
.share-btn:hover  { opacity: .82; transform: scale(1.08); }
.share-btn:active { transform: scale(1); }
.share-btn svg    { width: 18px; height: 18px; flex-shrink: 0; }

.share-wa   { background: #25D366; }
.share-fb   { background: #1877F2; }
.share-tg   { background: #2CA5E0; }
.share-x    { background: #000; }
.share-mail { background: var(--color-olive); }
.share-copy { background: var(--color-brown); }
.share-copy.copied { background: var(--color-green); }

/* ── Phase 2 – Dashboard ──────────────────────────────────────── */
.ib-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: .75rem;
}
@media (max-width: 640px) { .ib-dashboard { grid-template-columns: 1fr; } }

.ib-block {
  background: var(--color-cream);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}
.ib-block-title {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-olive);
  margin-bottom: .85rem;
}
.ib-progress-wrap { margin-bottom: 1rem; }
.ib-progress-bar {
  height: 10px;
  background: rgba(46,47,34,.12);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: .4rem;
}
.ib-progress-fill {
  height: 100%;
  background: var(--color-green);
  border-radius: 5px;
  transition: width .6s ease;
}
.ib-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  color: var(--color-brown);
}
.ib-progress-labels strong { color: var(--color-green); }
.ib-kpis { display: flex; gap: 1rem; flex-wrap: wrap; }
.ib-kpi { display: flex; flex-direction: column; gap: .15rem; }
.ib-kpi-value { font-size: 1.4rem; font-weight: 700; color: var(--color-dark); line-height: 1.1; }
.ib-kpi-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-brown); }

/* ── Phase 2 – Info-Cards ─────────────────────────────────────── */
.info-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .info-two-col { grid-template-columns: 1fr; } }
.info-card {
  background: var(--color-cream);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  border-left: 3px solid var(--color-green);
}
.info-card h3 { font-size: .95rem; margin-bottom: .5rem; color: var(--color-dark); }
.info-card p  { font-size: .85rem; color: var(--color-brown); line-height: 1.65; }
.info-card a  { color: var(--color-green); font-weight: 600; }

/* ── Phase 2 – Interessenbekundungs-Formular ──────────────────── */
.form-divider { border: none; border-top: 1px solid rgba(46,47,34,.1); margin: 1.25rem 0; }
.form-divider-strong { border-top-width: 2px; border-top-color: rgba(46,47,34,.25); }
.input-euro-wrap { display: flex; align-items: center; gap: .5rem; }
.input-euro { width: 120px !important; }
.euro-suffix { font-size: .88rem; color: var(--color-brown); white-space: nowrap; }
.form-hint { font-size: .75rem; color: var(--color-olive); margin-top: .25rem; }
.form-hint-inline { font-size: .72rem; font-weight: 400; color: var(--color-olive); text-transform: none; letter-spacing: 0; }
.form-fieldset-phase1 { border-left: 3px solid #eab308; }
.form-fieldset-phase2 { border-left: 3px solid #f97316; }
.form-fieldset-phase3 { border-left: 3px solid #2563eb; }
.form-fieldset-phase4 { border-left: 3px solid #16a34a; }

/* ── Sidebar – Standort-Text ──────────────────────────────────── */
.sidebar-text { font-size: .88rem; color: var(--color-dark); line-height: 1.6; }
.sidebar-text-muted { color: var(--color-brown); font-style: italic; }

/* ── Phase 3 – Projektstatus Tracker ─────────────────────────── */
.tracker-table { display: flex; flex-direction: column; gap: .75rem; }

.tracker-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: .75rem 1rem;
  background: var(--color-cream);
  border-radius: var(--radius-sm);
}
.tracker-label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-brown);
  min-width: 160px;
  flex-shrink: 0;
  padding-top: .15rem;
}
.tracker-badges { display: flex; flex-wrap: wrap; gap: .4rem; }

.tracker-badge {
  display: inline-block;
  padding: .25rem .7rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}
.tbadge-green  { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.tbadge-gray   { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }
.tbadge-blue   { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.tbadge-red    { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
/* Ergaenzt 15.08.2026 (Vereinheitlichung der Status-Farben, siehe lib/contactVorgaenge.js
   STATUS_COLORS - das ist ab jetzt die alleinige Quelle, welcher Status welche Farbe hat).
   tbadge-darkgreen bewusst von tbadge-green getrennt: hellgruen = ein Teilschritt ist
   erreicht, dunkelgruen (Markenfarbe) = der ganze Vorgang ist vollstaendig fertig - beide
   sahen vorher gleich aus (hellgruen), das hat u.a. zur Verwechslung gefuehrt, die zu dieser
   Aufraeumaktion gefuehrt hat. */
.tbadge-yellow    { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.tbadge-orange    { background: #ffedd5; color: #9a3412; border: 1px solid #fed7aa; }
.tbadge-darkgreen { background: #2D6A42; color: #fff; border: 1px solid #2D6A42; }
.tracker-date { font-weight: 700; font-size: .8rem; }

/* Phase 3 – Info-Hinweis */
.info-hint {
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  font-size: .85rem;
  color: #78350f;
  margin-bottom: 1.25rem;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .tracker-row { flex-direction: column; gap: .5rem; }
  .tracker-label { min-width: auto; }
}

/* ── Phase 4 – Willkommen / Ausstattung ───────────────────────── */
/* Schlanker gemacht (Wunsch von Marius, 09.08.2026): mit 14 Ballons nahm der Block auf der
   Standortseite sehr viel Platz ein. Innenabstand .4/.9 -> .25/.65rem, Schrift .8 -> .72rem,
   Schriftstaerke 600 -> 500, Abstand zwischen den Ballons .5 -> .35rem. Bleibt gut lesbar,
   braucht aber deutlich weniger Hoehe. */
.amenity-list { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .9rem; }
.amenity-pill {
  background: var(--color-cream);
  border: 1px solid rgba(46,47,34,.1);
  border-radius: 20px;
  padding: .25rem .65rem;
  font-size: .72rem;
  font-weight: 500;
  color: var(--color-dark);
  line-height: 1.5;
}

/* ── Phase 4 – Instagram-Stil Feed ────────────────────────────── */
.ig-feed { display: flex; flex-direction: column; gap: 1.25rem; }
.ig-post {
  background: var(--color-white);
  border: 1px solid rgba(46,47,34,.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.ig-post-pinned { border: 2px solid var(--color-green); }
.ig-pin-badge {
  background: var(--color-green);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: .35rem .9rem;
  letter-spacing: .03em;
}
.ig-post-images {
  position: relative;
  overflow: hidden;
}
.ig-carousel-track {
  display: flex;
  transition: transform .3s ease;
}
.ig-post-img {
  width: 100%;
  flex: 0 0 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.ig-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(46,47,34,.45);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ig-carousel-arrow:hover { background: rgba(46,47,34,.7); }
.ig-carousel-prev { left: .6rem; }
.ig-carousel-next { right: .6rem; }
.ig-carousel-dots {
  position: absolute;
  bottom: .7rem;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: .4rem;
}
.ig-carousel-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  transition: background .2s, transform .2s;
}
.ig-carousel-dot.active { background: #fff; transform: scale(1.3); }
.ig-post-body { padding: 1.1rem 1.25rem; }
.ig-post-meta { font-size: .72rem; color: var(--color-olive); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .35rem; }
.ig-post-title { font-size: 1.05rem; margin-bottom: .5rem; }
.ig-post-text { font-size: .88rem; color: var(--color-brown); line-height: 1.7; white-space: pre-line; }

/* ── Phase 4 – Mini-Karte ─────────────────────────────────────── */
.mini-map-link { display: block; position: relative; margin: .85rem 0 1.1rem; border-radius: var(--radius-sm); overflow: hidden; }
.mini-map { width: 100%; height: 140px; pointer-events: none; }
.mini-map-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: .6rem;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent 60%);
  color: #fff; font-size: .78rem; font-weight: 700;
  opacity: 0; transition: opacity .2s;
}
.mini-map-link:hover .mini-map-overlay { opacity: 1; }

.hours-block { margin-top: 1rem; }
/* Schriftbild der Standort-Seitenleiste angeglichen (12.08.2026, Fund von Marius: "wir haben
   hier verschiedene Schriftformatierungen"). Gemessen waren es drei Groessen und drei Gewichte
   direkt untereinander: Adresse .88rem normal, "taeglich 24/7" .9rem/600, die Besetzt-Zeilen
   .82rem normal mit fettem Wochentag, der Laden-Status .85rem/600.
   Jetzt einheitlich .88rem wie die Adresse - das ist die Grundgroesse der Seitenleiste. Die
   Wochentage bleiben hervorgehoben (600, nicht 700), damit die Struktur Tag/Zeit erkennbar
   bleibt, ohne zu schreien. */
.hours-block-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-olive); margin-bottom: .35rem; }
/* Normales Gewicht (12.08.2026, Entscheidung von Marius): Vorher stand die Zeile komplett auf
   600, waehrend bei den besetzten Zeiten darunter nur der Wochentag hervorgehoben ist. Die
   eine fette Zeile ueber drei halb betonten wirkte ungleich - genau das, was Marius als
   "sehen immer noch unterschiedlich aus" beschrieben hat. Jetzt tragen alle vier Zeilen
   dasselbe Muster, und nur die Wochentage sind betont, weil sie die Struktur tragen. Die
   Gliederung leisten ohnehin die Ueberschriften OEFFNUNGSZEITEN / PERSONELL BESETZT. */
.hours-main { font-size: .88rem; color: var(--color-dark); }
/* Farben angeglichen (12.08.2026, zweiter Fund von Marius: "hat 'taeglich 24/7' und Montag,
   Mittwoch, Freitag evtl. andere Schriftfarben"). Nachgemessen war es genau umgekehrt zu meiner
   ersten Annahme:
     Adresse und "Taeglich geoeffnet - 24/7"  braun  #675f4d
     Wochentage und Uhrzeiten                 dunkel #2e2f22
   Die braune Farbe kommt von ".sidebar-card p" - die Regel hat zwei Klassen und gewinnt damit
   gegen ".hours-main" mit einer. Derselbe Vorrangs-Effekt wie beim dsgvo-hint am 09.08.2026.
   Braun ist die gewollte Farbe fuer Fliesstext in Seitenleisten-Karten, deshalb ziehen die
   besetzten Zeiten dorthin nach - nicht umgekehrt. Die Wochentage bleiben durch das
   Schriftgewicht (600) hervorgehoben, ohne zusaetzlich per Farbe herauszustechen. */
.staffed-list { list-style: none; font-size: .88rem; color: var(--color-brown); display: flex; flex-direction: column; gap: .3rem; }
.staffed-list strong { color: var(--color-brown); font-weight: 600; }

/* ── Phase 4 – Status-Board ───────────────────────────────────── */
.status-grid { display: flex; flex-direction: column; gap: .5rem; }
.status-row {
  display: flex; justify-content: space-between; align-items: center;
  /* .88rem wie die uebrigen Texte der Seitenleiste (12.08.2026) - vorher .85rem, was neben
     Adresse und Oeffnungszeiten minimal kleiner wirkte, ohne dass es einen Grund dafuer gab. */
  /* braun wie die uebrigen Texte der Karte (12.08.2026) - vorher --color-dark, wodurch der
     Laden-Status dunkler wirkte als Adresse und Oeffnungszeiten darueber. */
  font-size: .88rem; color: var(--color-brown); font-weight: 600;
}
.status-pill {
  font-size: .72rem; font-weight: 700;
  padding: .2rem .65rem; border-radius: 12px;
}
.status-ok      { background: #dcfce7; color: #166534; }
.status-bad     { background: #fee2e2; color: #991b1b; }
.status-neutral { background: #f3f4f6; color: #6b7280; }

/* ── Phase 4 – Follow-Buttons ─────────────────────────────────── */
.follow-label { font-size: .78rem; font-weight: 700; color: var(--color-brown); margin-bottom: .6rem; text-transform: uppercase; letter-spacing: .05em; }
.share-ig { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }

/* ── Statische Seiten ─────────────────────────────────────────── */
.static-hero    { min-height: 420px; height: 420px; position: relative; display: flex; align-items: flex-start; background-image: url('/img/container.png'); background-size: cover; background-position: center; }
.static-hero-sm { min-height: 420px; height: 420px; position: relative; display: flex; align-items: flex-start; background-image: url('/img/container.png'); background-size: cover; background-position: center; }

.static-hero .container,
.static-hero-sm .container {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 120px;
  padding-bottom: 2.5rem;
}

.static-hero .hero-content,
.static-hero-sm .hero-content {
  max-width: 780px;
}

/* Themen-spezifische Hero-Hintergründe */
.hero-abo        { background-image: url('/img/container.png'); background-position: 60% center; }
.hero-faq        { background-image: url('/img/container.png'); background-position: 40% center; }
.hero-franchise  { background-image: url('/img/container.png'); background-position: 20% center; }
.hero-legal      { background-image: url('/img/container.png'); background-position: center center; }

.static-layout { padding: 3rem 1.5rem 5rem; }
.static-section { margin-bottom: 4rem; }
.static-section h2 { margin-bottom: 1rem; }
.static-section-bg {
  background: var(--color-cream);
  border-radius: var(--radius-md);
  padding: 2.5rem;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}
.static-lead { font-size: 1.1rem; color: var(--color-brown); margin-bottom: 1.5rem; line-height: 1.8; }
/* Beitragstext aus dem Rich-Text-Editor (09.08.2026, Bereich "Aktuelles"). Der Editor liefert
   nur <p>, <h2>, <h3>, <ul>/<ol> und <a> - ohne eigene Regeln liefen Absaetze und
   Listenpunkte ohne Abstand ineinander und Aufzaehlungen hatten keine Punkte (im Browsertest
   aufgefallen). Bewusst auf diese Klasse begrenzt, damit keine andere Seite betroffen ist. */
.static-content { color: var(--color-dark); }
.static-content p { margin-bottom: 1.1rem; }
.static-content h2 { font-size: 1.35rem; margin: 2rem 0 .75rem; }
.static-content h3 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.static-content ul, .static-content ol { margin: 0 0 1.1rem 1.4rem; }
.static-content li { margin-bottom: .4rem; line-height: 1.7; }
.static-content ul { list-style: disc; }
.static-content ol { list-style: decimal; }
.static-content a { color: var(--color-green); text-decoration: underline; }
.static-content > *:last-child { margin-bottom: 0; }

/* Beitrags-Detailseite /aktuelles/:id (09.08.2026).
   Bild: KEIN Zuschnitt. Vorher wurde .blog-post-img mitbenutzt - die Klasse ist fuer die
   kleinen Vorschaubilder der Standort-Beitraege gedacht (max-height 200px, object-fit: cover)
   und hat ein 2000x1348-Bild auf 712x200 gestaucht. Hier zaehlt das ganze Motiv, also volle
   Breite und Hoehe automatisch im Originalverhaeltnis. */
/* Weiterfuehrender Link UNTER einem Bereich (09.08.2026, Wunsch von Marius: statt oben
   rechts im Bereichskopf). Linksbuendig, also an derselben Kante wie Ueberschrift und
   Inhalte darueber - rechtsbuendig stand er frei im Raum (Nachtrag Marius). */
.section-more { margin-top: 1.5rem; }
.section-more .link-more { font-size: .92rem; }

.news-detail-images { margin: 1.75rem 0; display: flex; flex-direction: column; gap: .9rem; }
.news-detail-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}
/* Ueberschrift kleiner (Wunsch von Marius, Orientierung an dorfkraft.group/aktuelles):
   vorher 51.2px bei 64px Zeilenhoehe - fuer eine Beitragsseite zu wuchtig. */
.news-detail-title {
  font-size: 2.1rem;
  line-height: 1.2;
  margin-bottom: .75rem;
}
@media (max-width: 680px) {
  .news-detail-title { font-size: 1.7rem; }
}

/* Zurueck-Link auf den Detailseiten (im Admin gibt es die Klasse schon, oeffentlich fehlte sie). */
.back-link { color: var(--color-olive); text-decoration: none; font-size: .9rem; }
.back-link:hover { color: var(--color-green); text-decoration: underline; }
.static-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 680px) { .static-two-col { grid-template-columns: 1fr; } }
.static-img-wrap { border-radius: var(--radius-md); overflow: hidden; }
.static-img-wrap-offset { margin-top: 3rem; }
.static-img { width: 100%; height: auto; display: block; }

/* Größen-Liste */
.size-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.size-item {
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: .6rem 1rem;
  font-size: .85rem;
  color: var(--color-dark);
}
.size-item strong { color: var(--color-green); }

/* Feature-Grid */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  border: 1px solid rgba(46,47,34,.07);
  box-shadow: var(--shadow-sm);
}
.feature-icon { font-size: 1.8rem; margin-bottom: .75rem; display: block; }
.feature-icon-inline { font-size: 1.15rem; margin-right: .4rem; vertical-align: -1px; }
.feature-card h3 { font-size: .95rem; margin-bottom: .4rem; }
.feature-card p  { font-size: .84rem; color: var(--color-brown); line-height: 1.65; }

/* Stats */
.stat-row { display: flex; gap: 1.25rem; margin-top: 1.5rem; flex-wrap: wrap; }
.stat-box { background: var(--color-sage); border-radius: var(--radius-sm); padding: 1.1rem 1.5rem; }
.stat-box-number { display: block; font-size: 1.6rem; font-weight: 700; color: var(--color-dark); }
.stat-box-label  { font-size: .75rem; color: var(--color-brown); text-transform: uppercase; letter-spacing: .04em; }

/* Check-List */
.check-list { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.check-item { font-size: .9rem; color: var(--color-dark); display: flex; align-items: center; gap: .5rem; }

/* Regional-Grid */
.regional-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1rem; }
@media (max-width: 600px) { .regional-grid { grid-template-columns: 1fr; } }
.regional-item { background: var(--color-white); padding: .85rem 1rem; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 600; }

/* Effects */
.effect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 600px) { .effect-grid { grid-template-columns: 1fr; } }
.effect-card { background: var(--color-sage); border-radius: var(--radius-md); padding: 2rem; text-align: center; }
.effect-number { font-size: 1.9rem; font-weight: 700; color: var(--color-green); display: block; margin-bottom: .5rem; }
.effect-label  { font-size: .85rem; color: var(--color-brown); }

/* CTA */
.static-cta { text-align: center; padding: 3rem 1rem; border-radius: var(--radius-md); background: var(--color-dark); color: var(--color-white); margin-top: 2rem; }
.static-cta h2 { color: var(--color-white); margin-bottom: .75rem; }
.static-cta p  { color: rgba(255,255,255,.75); margin-bottom: 1.5rem; }
.cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.static-cta .btn-outline { background: transparent; border: 2px solid rgba(255,255,255,.5); color: #fff; padding: .7rem 1.5rem; border-radius: var(--radius-sm); font-weight: 600; font-size: .9rem; text-decoration: none; transition: border-color .2s; }
.static-cta .btn-outline:hover { border-color: #fff; }

/* Abo-Seite */
.abo-highlight-box { display: flex; flex-direction: column; gap: .85rem; }
.abo-highlight-item { display: flex; align-items: center; gap: .85rem; background: var(--color-sage); padding: .9rem 1.1rem; border-radius: var(--radius-sm); }
.abo-highlight-icon { font-size: 1.4rem; flex-shrink: 0; }
.abo-steps { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.5rem; }
.abo-step { display: flex; gap: 1.25rem; align-items: flex-start; }
.abo-step-number { width: 36px; height: 36px; background: var(--color-green); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; flex-shrink: 0; }
.abo-step-body h3 { margin-bottom: .25rem; font-size: .95rem; }
.abo-step-body p  { font-size: .86rem; color: var(--color-brown); }
.fact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
@media (max-width: 900px) { .fact-grid { grid-template-columns: 1fr 1fr; } }
.fact-card { background: var(--color-cream); border-radius: var(--radius-sm); padding: 1.25rem; }
.fact-icon { font-size: 1.5rem; margin-bottom: .5rem; display: block; }
.fact-card h4 { font-size: .9rem; margin-bottom: .35rem; }
.fact-card p  { font-size: .82rem; color: var(--color-brown); }
.abo-social-box { background: var(--color-sage); border-radius: var(--radius-md); padding: 2rem; text-align: center; }
.abo-social-box-green { background: var(--color-green); }
.abo-social-box-green .abo-social-text { color: #fff; }
.abo-social-text { font-size: 1.1rem; font-weight: 600; color: var(--color-dark); }

/* FAQ */
.faq-category { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-olive); margin-bottom: 1rem; }
.faq-list { display: flex; flex-direction: column; gap: .5rem; }
.faq-item { border: 1px solid rgba(46,47,34,.1); border-radius: var(--radius-sm); overflow: hidden; }
.faq-question { width: 100%; background: var(--color-cream); border: none; padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; text-align: left; font-family: 'Poppins', sans-serif; font-size: .9rem; font-weight: 600; color: var(--color-dark); }
.faq-question:hover { background: var(--color-sage); }
.faq-icon { font-size: 1.2rem; font-weight: 400; flex-shrink: 0; color: var(--color-green); }
.faq-answer { padding: 1rem 1.25rem; background: var(--color-white); border-top: 1px solid rgba(46,47,34,.07); }
.faq-answer p { font-size: .9rem; color: var(--color-brown); line-height: 1.75; margin: 0 0 .75rem; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul { list-style: disc; margin: .5rem 0 .9rem 1.1rem; padding: 0; }
.rich-text ul { list-style: disc; margin: .5rem 0 .9rem 1.1rem; padding: 0; }
.rich-text ol { list-style: decimal; margin: .5rem 0 .9rem 1.1rem; padding: 0; }
.rich-text li { font-size: .9rem; color: var(--color-brown); line-height: 1.6; margin-bottom: .35rem; }
.rich-text p { line-height: 1.7; margin: 0; }
.rich-text a { color: var(--color-green); text-decoration: underline; }
.faq-answer li { font-size: .9rem; color: var(--color-brown); line-height: 1.6; margin-bottom: .35rem; }
.faq-answer a { color: var(--color-green); text-decoration: underline; }

/* Legal */
.legal-text h2 { font-size: 1.1rem; margin: 2rem 0 .5rem; }
.legal-text h3 { font-size: .95rem; margin: 1.25rem 0 .4rem; }
.legal-text p  { font-size: .9rem; color: var(--color-brown); line-height: 1.8; margin-bottom: .75rem; }
.legal-text a  { color: var(--color-green); }

/* Aufzaehlungen in Rechtstexten (Fund von Marius, 10.08.2026): Sie sahen anders aus als die
   Absaetze - 16px statt 14.4px, Zeilenabstand "normal" statt 1.8, dunkle statt gedaempfter
   Schriftfarbe, und ohne Punkte, weil Zeile 42 global "ul { list-style: none }" setzt (sinnvoll
   fuer Navigationslisten, hier aber unerwuenscht).
   Jetzt exakt dieselben Werte wie .legal-text p, eingerueckt und mit Punkt. Der Abstand nach
   unten ist grosszuegiger als bei Absaetzen, damit die Liste sich vom folgenden Text abgrenzt. */
.legal-text ul,
.legal-text ol {
  font-size: .9rem;
  color: var(--color-brown);
  line-height: 1.8;
  margin: 0 0 1.5rem 1.3rem;
  padding-left: .5rem;
}
.legal-text ul { list-style: disc; }
.legal-text ol { list-style: decimal; }
.legal-text li { margin-bottom: .35rem; }
.legal-text li:last-child { margin-bottom: 0; }

/* ── So läuft der Einkauf – Prozess-Schritte ─────────────────── */
.process-step {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 3rem;
}
.process-step-reverse { direction: rtl; }
.process-step-reverse > * { direction: ltr; }
@media (max-width: 780px) {
  .process-step, .process-step-reverse { grid-template-columns: 1fr; direction: ltr; }
}

.process-step-body { display: flex; gap: 1.1rem; align-items: flex-start; }
.process-step-number {
  width: 40px; height: 40px; flex-shrink: 0;
  background: var(--color-green); color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.05rem;
}
.process-step-body h3 { margin-bottom: .5rem; }
.process-step-body p  { font-size: .9rem; color: var(--color-brown); line-height: 1.7; margin-bottom: .6rem; }

.process-img-placeholder {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background: repeating-linear-gradient(45deg, #eae9ce, #eae9ce 10px, #f2eae7 10px, #f2eae7 20px);
  border: 2px dashed rgba(46,47,34,.25);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 1rem;
  color: var(--color-brown); font-size: .78rem; font-weight: 600;
  white-space: pre-line;
  position: relative;
}
.process-img-placeholder::before {
  content: "🖼  " attr(data-label);
  white-space: pre-line;
}
.process-img-placeholder-sm { aspect-ratio: 4 / 3; margin-top: .75rem; }

.process-img-stack { display: flex; flex-direction: row; gap: 1rem; }
.process-img-placeholder-tall { aspect-ratio: 2 / 3; flex: 1; }

.pay-item { margin-bottom: 1rem; }
.pay-item:last-child { margin-bottom: 0; }
.pay-item h4 { font-size: .88rem; margin-bottom: .3rem; color: var(--color-dark); }
.pay-item p  { font-size: .86rem; color: var(--color-brown); line-height: 1.65; }

.strike-through { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .55; }

.regional-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.25rem; }
@media (max-width: 600px) { .regional-photos { grid-template-columns: 1fr; } }
.process-img-placeholder-sq { aspect-ratio: 1 / 1; }

/* Mini-Slider (Sortiment) */
.mini-slider { position: relative; border-radius: var(--radius-md); overflow: hidden; }
.mini-slider-track { display: flex; transition: transform .5s ease; }
.mini-slide { flex: 0 0 100%; aspect-ratio: 4 / 3; border-radius: 0; }
.mini-slider-dots { position: absolute; bottom: .75rem; left: 0; right: 0; display: flex; justify-content: center; gap: .4rem; }
.mini-slider-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.55); border: none; cursor: pointer; padding: 0; }
.mini-slider-dot.active { background: #fff; }
.mini-slider-large .mini-slide { aspect-ratio: 16 / 9; }
.mini-slider-contain .mini-slide { background: var(--color-cream); }
.mini-slider-contain .photo-fill { object-fit: contain; }

/* Kundenstimmen */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1.5rem; }
@media (max-width: 780px) { .testimonial-grid { grid-template-columns: 1fr; } }
.testimonial-card { background: var(--color-white); border-radius: var(--radius-md); padding: 1.5rem; text-align: center; }
.testimonial-card .process-img-placeholder-sq { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 1rem; font-size: .55rem; }
.testimonial-text { font-size: .95rem; font-style: italic; color: var(--color-dark); margin-bottom: .6rem; line-height: 1.6; }
.testimonial-author { font-size: .78rem; color: var(--color-brown); }

.testimonial-slider { display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; }
.testimonial-track-wrap { flex: 1; overflow: hidden; }
.testimonial-track { display: flex; transition: transform .4s ease; }
.testimonial-page {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 780px) { .testimonial-page { grid-template-columns: 1fr; } }
.testimonial-page-single { display: flex; justify-content: center; }
.testimonial-page-single .testimonial-card { max-width: 340px; width: 100%; }
.ts-arrow {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--color-white);
  color: var(--color-dark);
  font-size: 1.4rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: background .15s;
}
.ts-arrow:hover { background: var(--color-sage); }
.ts-arrow:disabled { opacity: .35; cursor: default; }
.testimonial-dots { display: flex; justify-content: center; gap: .4rem; margin-top: 1.25rem; }
.testimonial-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(46,47,34,.2); border: none; cursor: pointer; padding: 0; }
.testimonial-dot.active { background: var(--color-green); }

.testimonial-photo {
  height: 220px;
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(45deg, #eae9ce, #eae9ce 10px, #f2eae7 10px, #f2eae7 20px);
  border: 2px dashed rgba(46,47,34,.25);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: .75rem;
  color: var(--color-brown); font-size: .75rem; font-weight: 600;
  white-space: pre-line;
  margin-bottom: 1rem;
}
.testimonial-photo::before { content: "🖼  " attr(data-label); white-space: pre-line; }
.testimonial-photo.has-photo {
  background: var(--color-cream);
  border: none;
  padding: 0;
}
.testimonial-photo.has-photo::before { content: none; }
.testimonial-photo.has-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Echte Fotos in Platzhalter-Boxen */
.process-img-placeholder.has-photo {
  background: none;
  border: none;
  padding: 0;
}
.process-img-placeholder.has-photo::before { content: none; }
.photo-fill { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

/* Video-Demo (Zugang) im Hochformat */
.process-video-portrait {
  aspect-ratio: 9 / 16;
  max-width: 320px;
  margin: 0 auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
}
.process-video-portrait video { width: 100%; height: 100%; object-fit: cover; display: block; }
.process-video-square { aspect-ratio: 1 / 1; max-width: 380px; }

.footer-logo-img { width: 100%; max-width: 280px; height: auto; display: block; }
.footer-logo-link { display: block; }


/* Bild-Uploader (Drag & Drop) */
.image-dropzone {
  border: 2px dashed rgba(46,47,34,.2);
  border-radius: var(--radius-sm);
  padding: 1.75rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  color: var(--color-brown);
}
.image-dropzone:hover, .image-dropzone.dragover {
  border-color: var(--color-green);
  background: var(--color-cream);
}
.image-dropzone p { margin: 0 0 .3rem; font-size: .88rem; }
.image-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem;
}
.image-thumb {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: grab;
  border: 1px solid rgba(46,47,34,.1);
}
.image-thumb.dragging { opacity: .4; }
.image-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-thumb-remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(46,47,34,.65);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.image-thumb-remove:hover { background: #dc2626; }
.image-thumb-move {
  position: absolute;
  bottom: 4px; left: 4px; right: 4px;
  display: flex;
  justify-content: space-between;
}
.image-thumb-arrow {
  width: 24px; height: 24px;
  border-radius: 4px;
  border: none;
  background: rgba(46,47,34,.65);
  color: #fff;
  font-size: .9rem;
  cursor: pointer;
}
.image-thumb-arrow:hover:not(:disabled) { background: rgba(46,47,34,.85); }
.image-thumb-arrow:disabled { opacity: .3; cursor: not-allowed; }

.image-thumb-large { width: 280px; height: 160px; position: relative; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid rgba(46,47,34,.1); }
.image-thumb-large img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-thumb-large .image-thumb-remove { position: absolute; top: 6px; right: 6px; }

.stoerung-hinweis {
  margin-top: .85rem;
  padding: .75rem .9rem;
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: var(--radius-sm);
  font-size: .82rem;
  color: #92400e;
  line-height: 1.5;
}

.contact-row-fake { opacity: .55; background: repeating-linear-gradient(135deg, rgba(220,38,38,.03) 0 10px, transparent 10px 20px); }
.fake-badge {
  display: inline-block;
  background: #fee2e2;
  color: #991b1b;
  font-size: .68rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: .3rem;
  vertical-align: middle;
}

.static-page { padding: 3rem 0 5rem; min-height: 60vh; }
.static-page h1 { margin-bottom: 1rem; }


/* ── Kundenbereich (/mein-konto) ─────────────────────────────── */
.konto-layout { display: flex; gap: 2rem; align-items: flex-start; }
.konto-content { flex: 1; min-width: 0; }

.konto-sidebar {
  display: none;
  flex-direction: column;
  gap: .25rem;
  width: 220px;
  flex-shrink: 0;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: 1rem;
  border: 1px solid rgba(46,47,34,.1);
}
.konto-sidebar-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .75rem; border-radius: var(--radius-sm);
  color: var(--color-dark); text-decoration: none; font-size: .9rem;
}
.konto-sidebar-item:hover { background: var(--color-cream); }
.konto-sidebar-item.is-active { background: var(--color-sage); font-weight: 600; }
.konto-sidebar-item.is-disabled { color: var(--color-olive); cursor: not-allowed; }

.konto-tiles {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: 1.5rem;
}
.konto-tile {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  background: var(--color-white); border: 1px solid rgba(46,47,34,.1);
  border-radius: var(--radius-sm); padding: 1rem .5rem; text-align: center;
  color: var(--color-dark); text-decoration: none; font-size: .8rem;
}
.konto-tile span:first-child { font-size: 1.4rem; }
.konto-tile.is-disabled { color: var(--color-olive); cursor: not-allowed; opacity: .6; }

.konto-metric-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem;
  margin-bottom: 1.5rem;
}
.konto-metric-card {
  background: var(--color-sage); border-radius: var(--radius-sm); padding: 1rem;
  display: block; text-decoration: none; transition: filter .15s;
}
a.konto-metric-card:hover { filter: brightness(0.97); }
.konto-metric-card .konto-metric-label { font-size: .75rem; color: var(--color-brown); margin: 0; }
.konto-metric-card .konto-metric-value { font-size: 1.3rem; font-weight: 600; margin: 0; color: var(--color-dark); }

@media (min-width: 900px) {
  .konto-sidebar { display: flex; }
  .konto-tiles { display: none; }
}

/* Kleiner, wiederverwendbarer Toggle-Switch (07.08.2026, erstmals für den
   "Systembenachrichtigungen anzeigen"-Schalter unter /admin/nachrichten). */
.toggle-switch { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; }
.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-switch .toggle-track {
  width: 38px; height: 22px; background: rgba(46,47,34,.25); border-radius: 999px;
  position: relative; transition: background .15s; flex-shrink: 0;
}
.toggle-switch .toggle-track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-track { background: var(--color-green); }
.toggle-switch input:checked + .toggle-track::after { transform: translateX(16px); }
.toggle-switch .toggle-label { font-size: .85rem; color: var(--color-dark); }

/* ---------- Dashboard-Kacheln (Standort-Dashboard + Admin-Dashboard) ----------
   Lagen bis 08.08.2026 inline in location-dashboard.ejs. Ins zentrale Stylesheet
   verschoben, weil das Admin-Dashboard dieselben Kacheln nutzt - sonst haetten wir zwei
   Kopien, die auseinanderlaufen. */
/* Kompakte Kacheln, Entwurf "A" (abgestimmt mit Marius, 08.08.2026): die alten Kacheln
   waren fuer die Menge an Kennzahlen zu wuchtig - weisse Karte mit Rahmen, fette
   Ueberschrift mit dicker Trennlinie, grosszuegige Zeilenabstaende. Jetzt grauer
   Kachelgrund ohne Rahmen, Ueberschrift als kleines Label, dichtere Zeilen ohne
   Trennlinien. Spart bei drei Zeilen rund 40% Hoehe. */
/* Flexbox statt Raster (Wunsch von Marius, 08.08.2026): die Kacheln sollen sich in der
   BREITE nach ihrem Inhalt richten, aber gleich HOCH sein. Ein Raster mit festen Spalten
   gab allen dieselbe Breite; align-items:start hatte dann unterschiedliche Hoehen zur
   Folge, was unruhig aussah. Mit flex-wrap + align-items:stretch bekommt jede Kachel die
   Hoehe der hoechsten ihrer Zeile, die Breite verteilt sich nach Inhalt. */
.kachel-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .6rem;
  margin-top: 1rem;
}
.kachel {
  background: var(--color-cream, #f2eae7);
  border-radius: var(--radius-sm, 10px);
  padding: .7rem .85rem;
  /* waechst in die verfuegbare Breite, bricht aber nicht unter 190px um. Die max-width
     verhindert, dass eine allein in ihrer Zeile stehende Kachel (z.B. "Statistik" bei
     Phase 3) sich ueber die ganze Seite dehnt. */
  flex: 1 1 auto;
  min-width: 190px;
  max-width: 420px;
}
.kachel h3 {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-olive, #8b8d75);
  margin: 0 0 .4rem 0;
  padding: 0;
  border: none;
}
/* Umbruch bleibt: passt der Wert nicht neben das Label, rutscht er in die naechste Zeile
   statt den Text zu ueberlagern (Fund vom 08.08.2026 mit den Live-Zahlen). */
.kachel-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .1rem .7rem;
  padding: .2rem 0;
  font-size: .82rem;
}
.kachel-row .label { color: var(--color-brown, #675f4d); flex: 1 1 auto; min-width: 0; }
.kachel-row .value {
  font-weight: 700;
  color: var(--color-dark, #2e2f22);
  white-space: nowrap;
  flex: 0 0 auto;
  margin-left: auto;
  /* Tabellenziffern: Zahlen stehen dadurch untereinander auf gleicher Breite */
  font-variant-numeric: tabular-nums;
}
.kachel-row .value small { font-weight: 400; color: var(--color-olive, #8b8d75); margin-left: .3rem; }
.kachel-row.abgelehnt .value { color: #991b1b; }
.kachel-row.hervorgehoben .value { color: var(--color-green, #2D6A42); font-size: .95rem; }
.kachel-fortschritt {
  margin: .4rem 0 .1rem 0;
  height: 5px;
  background: rgba(46,47,34,.1);
  border-radius: 3px;
  overflow: hidden;
}
.kachel-fortschritt-bar {
  height: 100%;
  background: var(--color-green, #2D6A42);
  transition: width .3s;
}
.kachel-untertitel {
  font-size: .68rem;
  color: var(--color-olive, #8b8d75);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: .6rem 0 .2rem 0;
}
.kachel-untertitel:first-child { margin-top: 0; }
/* Schmale Kachel fuer wenige, kurze Werte (z.B. Standorte je Phase auf dem Admin-Dashboard,
   08.08.2026). flex-grow 0, damit sie sich nicht auf die max-width von 420px aufzieht, wenn
   sie allein in ihrer Zeile steht. */
.kachel-schmal { flex: 0 0 auto; max-width: 250px; }
/* Verlinkte Kachel-Inhalte: Links sollen wie normaler Text aussehen und erst beim
   Ueberfahren als klickbar erkennbar werden (Dashboard-Kacheln verlinken auf gefilterte
   Listen). */
.kachel h3 a, .kachel-row .label a { color: inherit; text-decoration: none; }
.kachel h3 a:hover, .kachel-row .label a:hover { color: var(--color-green); text-decoration: underline; }
/* Ausnahme: enthaelt der Link einen Phasen-Ballon, behaelt dieser seine eigene Farbe und
   bekommt keine Unterstreichung - sonst ueberschreibt die Hover-Regel oben die
   Phasenfarbe (08.08.2026). Rueckmeldung beim Ueberfahren gibt stattdessen ein Rahmen. */
.kachel-row .label a:hover .phase-badge { text-decoration: none; box-shadow: 0 0 0 2px rgba(46,47,34,.18); }
.kachel-row .label a:has(.phase-badge):hover { text-decoration: none; }