/* ═══════════════════════════════════════════════════════════════════
   DESIGN 2026 · Sascha Greiner
   Ruhig und modern (Anmutung pekta.eu), klare Datenkarten (Salesforce),
   FDP-Farben bleiben das Erkennungszeichen: Gelb, Magenta, Cyan, Dunkelblau.
   Wird nach main.css geladen und überschreibt nur Gestaltung – keine Funktion.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --paper: #FAF9F5;
  --flaeche: #F2F1EB;
  --ink: #0B2A3E;
  --ink-2: #3E5566;
  --container: 1240px;
}
html { -webkit-text-size-adjust: 100%; }
body { background: var(--paper); font-feature-settings: "ss01", "cv11"; }
body, button, input, select, textarea { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
[style*="JetBrains"] { font-family: var(--font-label) !important; }
img { max-width: 100%; height: auto; }
.container, .hero-inner, .nav, .topstrip-inner, .actstrip-inner { max-width: var(--container); }
:focus-visible { outline: 3px solid var(--c); outline-offset: 3px; border-radius: 6px; }

/* Typografie ---------------------------------------------------------- */
h1, h2, h3 { letter-spacing: -0.025em; }
section h2 { font-weight: 800; line-height: 1.06; }
section h2 em, h1 em { font-style: italic; color: var(--m); font-weight: 800; letter-spacing: -0.03em; }
p { text-wrap: pretty; }
h1, h2 { text-wrap: balance; }

.eyebrow, .hero-eyebrow, .search-overlay-eyebrow {
  font-family: var(--font-label);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.eyebrow::before, .hero-eyebrow::before { width: 18px; height: 3px; border-radius: 3px; }

/* Topstrip ------------------------------------------------------------ */
.topstrip { font-size: 0.68rem; padding: 0.4rem 0; letter-spacing: 0.1em; font-weight: 600; }
.topstrip .m { color: #ff6fb5; }

/* Header: Glas, ruhig, Pills ------------------------------------------ */
header.main {
  background: rgba(255,255,255,0.86);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav { padding: 0.75rem 1.5rem; }
nav.primary { display: flex; align-items: center; gap: 0.35rem; }
nav.primary > ul > li > a { border-radius: var(--r-pill); padding: 0.55rem 0.9rem; font-size: 0.88rem; }
nav.primary a:hover, nav.primary li.has-dropdown:hover > a, nav.primary li.has-dropdown:focus-within > a {
  color: var(--ink); background: var(--flaeche);
}
nav.primary ul.dropdown, nav.primary li.has-dropdown > ul {
  border: 1px solid var(--line) !important; border-radius: 14px !important; box-shadow: var(--sh-2) !important;
  padding: 0.4rem !important; background: #fff !important; min-width: 230px;
}
nav.primary ul.dropdown a { border-radius: 9px; display: flex; width: 100%; }
.nav-search {
  width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center;
  border-radius: 50% !important; border: 1px solid var(--line) !important; background: #fff; color: var(--ink);
}
.nav-search:hover { background: var(--y) !important; border-color: var(--y) !important; }
.nav-search svg { width: 18px; height: 18px; }
.nav-toggle { border-radius: var(--r-pill); padding: 0.55rem 1rem; }
.fdp-logo .bar-mini { border-radius: 3px; }

/* Buttons: Pills ------------------------------------------------------ */
.btn {
  border-radius: var(--r-pill) !important; border: 1px solid transparent; padding: 0.85rem 1.4rem;
  font-weight: 700; letter-spacing: -0.005em; box-shadow: none;
  transition: transform .15s, box-shadow .15s, background .15s, color .15s, border-color .15s;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-1); }
.btn-k { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-k:hover { background: var(--m); color: var(--y); border-color: var(--m); }
.btn-w { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-w:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-m { background: var(--m); color: var(--y); border-color: var(--m); }
.btn-m:hover { background: var(--ink); color: var(--y); border-color: var(--ink); }
.btn-sm { padding: 0.5rem 0.95rem; }
button, input[type="submit"] { border-radius: var(--r-pill); }

/* Hero: FDP-Gelb bleibt, aber weich -------------------------------------- */
.hero {
  background:
    radial-gradient(120% 90% at 85% 10%, #fff7a1 0%, rgba(255,247,161,0) 55%),
    linear-gradient(180deg, #FFEF1F 0%, #FFE600 100%);
  padding: 4.5rem 0 5rem;
}
.hero-grain { display: none; }
.hero h1 { font-weight: 900; letter-spacing: -0.045em; line-height: 0.95; }
.hero h1 .line-bar { border-radius: 14px; transform: none; padding: 0.02em 0.22em 0.06em; box-shadow: 0 14px 30px -16px rgba(229,0,125,.7); }
.hero h1 .line-bar > span { transform: none; }
.hero-sub { color: var(--ink-2); max-width: 36em; }
.hero-cta-row { gap: 0.6rem; }
.hero-termin-card {
  background: rgba(255,255,255,0.92); border-radius: 22px; box-shadow: var(--sh-2);
  border: 1px solid rgba(11,42,62,0.08); overflow: hidden;
}
.hero-termin-card:empty { display: none; }

/* Sektionen ----------------------------------------------------------- */
section { padding: 5.5rem 0; }
.section-head { margin-bottom: 2.5rem; }
.blog::before { display: none !important; }        /* großes „BLOG“-Wasserzeichen */
body.blog { padding: 0 !important; background: var(--paper) !important; }   /* WordPress gibt der Startseite die Klasse „blog“ – sonst 96 px Leerraum oben */
.koalition-banner { background: linear-gradient(180deg, #fffbe0 0%, var(--paper) 100%); }
.koalition-banner-img img, .about-photo, .about-photo img { border-radius: 22px !important; }
.koalition-banner-img img { box-shadow: var(--sh-2); display: block; }
.about-credit { font-size: 0.72rem; letter-spacing: 0.04em; }

/* Karten: einheitliche Tiefe und Hover ---------------------------------- */
.ant-card, .sitz-card, .aus-card, .anf-block, .bc, .blog-card, .pr-row, .biz, .kq, .tr, .fact, .sp-card, .termin-card {
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.ant-card:hover, .sitz-card:hover, .aus-card:hover, .blog-card:hover, .bc:hover, .pr-row:hover {
  transform: translateY(-2px); box-shadow: var(--sh-2); border-color: rgba(11,42,62,0.18);
}
.ant-card { background: #fff; }

/* Marken / Status-Pills ----------------------------------------------- */
.ant-status, .anf-status-pill, .ptag, .tr-badge, .anf-offen-tag, .pm-badge, .bc-cat, .ka-tag, .biz-tags span, .tab-count, .pt-count, .hck-tag, .uhr-tag {
  border-radius: var(--r-pill) !important; font-family: var(--font-label); letter-spacing: 0.04em;
}
.ant-status { padding: 0.3rem 0.8rem; }

/* Tabs und Filter (Salesforce-artig) ------------------------------------ */
[class*="tab"]:is(button, a):not(.btn) { border-radius: var(--r-pill); }

/* Formulare ----------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="date"], input[type="number"], select, textarea {
  border-radius: 12px !important; border: 1px solid rgba(11,42,62,0.18) !important; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--c) !important; box-shadow: 0 0 0 4px rgba(0,158,227,0.15) !important; outline: none; }

/* Cookie-Banner -------------------------------------------------------- */
.cookie-card { border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--sh-2); }
.cookie-card h3 .ic { border-radius: 10px; }
.cookie-card .opt { border-radius: 12px; border-left: 0; }
.cookie-actions button { border-radius: var(--r-pill) !important; }

/* Such-Overlay --------------------------------------------------------- */
.search-overlay { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Fußbereich ---------------------------------------------------------- */
footer { background: #0A2433; border-top: 4px solid var(--y); }
footer h5 { font-family: var(--font-label); letter-spacing: 0.12em; }
footer a { transition: color .15s; }

/* Zahlen bleiben Monospace (Schuldenuhr, Kennzahlen) -------------------- */
.uhr-num, .uhr-stat-val, .kq-num, .kclaim-num { font-family: var(--font-zahl) !important; }

/* Tabellen ------------------------------------------------------------ */
table { border-collapse: separate; border-spacing: 0; }

/* Mobil --------------------------------------------------------------- */
html, body { overflow-x: clip; }
@media (max-width: 900px) {
  .hero { padding: 3rem 0 3.5rem; }
  section { padding: 4rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .ant-card, .sitz-card, .aus-card, .blog-card, .bc, .pr-row { transition: none; }
  .btn:hover, .ant-card:hover, .sitz-card:hover { transform: none; }
}

/* Feinschliff Startseite ------------------------------------------------ */
.blog-card { border-radius: var(--r); border: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: var(--sh-1); overflow: hidden; }
.blog-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.blog-card.feature { border-radius: 22px; border: 0; background: radial-gradient(120% 140% at 100% 0%, #0d4a73 0%, #0B2A3E 60%); box-shadow: var(--sh-2), inset 0 -5px 0 var(--m); }
.anf-block-offen, .anf .anf-block-offen { animation: none !important; box-shadow: var(--sh-2), 0 0 0 2px var(--y) !important; }
.anf-block-offen::before, .anf .anf-block-offen::before { border-radius: var(--r-pill); }
.anf-id, .anf .anf-block .anf-id, .leg-item, .ant-date, .sp-badge { border-radius: var(--r-pill) !important; }
.sitzungs-ticker a, .sitzungs-ticker [class*="lbl"], .sitzungs-ticker [class*="label"] { border-radius: var(--r-pill) !important; }
.aus-card { overflow: hidden; }
.sitz-card, .tr { border-radius: var(--r); }
.bert-badge, .kq, .kclaim, .ka { border-radius: var(--r); }
footer a[class*="rss"], footer [class*="rss"] a, footer .btn { border-radius: var(--r-pill) !important; }
.pr-row { border-radius: var(--r); }
.footer-rss-block a { border-radius: var(--r-pill) !important; }
/* Inline gestaltete Knöpfe in Vorlagen („Details →“ u. a.) */
a[style*="background: var(--k)"], a[style*="background: var(--m)"], a[style*="background:var(--k)"], a[style*="background:var(--m)"] { border-radius: var(--r-pill) !important; }

/* Leerer Terminbereich: freundlicher Verweis auf den Gemeindekalender, kein Redaktionshinweis */
.termin-leer { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.25rem 1.5rem; margin: 1.5rem 0; color: var(--ink-2); box-shadow: var(--sh-1); }
.termin-leer a { color: var(--m); font-weight: 700; }