/* ==========================================================================
   frischfüttern.de – Stylesheet
   Design-Tokens laut Handoff, Dark Mode über prefers-color-scheme
   bzw. manuell über <html data-theme="dark|light">.
   ========================================================================== */

/* ---------- Schriften (selbst gehostet, keine Verbindung zu Google) ---------- */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500-latin.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600-latin.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700-latin.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/poppins-800-latin.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/caveat-700-latin.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  --gruen: #A4B70A;           /* Logo-Grün */
  --gruen-hover: #8E9F08;
  --gruen-dunkel: #636E06;      /* Links, Häkchen (dunkles Logo-Grün) */
  --gruen-hell: #EEF1DC;        /* Info, Auswahl */
  --gruen-hell-text: #4A5304;
  --gruen-auf-dunkel: #CFE70D;
  --bordeaux: #92141A;           /* Logo-Rot */
  --sand: #D9C9A0;
  --creme: #F7F1E1;             /* Seite */
  --creme-2: #F3EEDD;           /* Fläche 2 */
  --karte: #FFFDF6;
  --linie: #E4DCC3;
  --feld: #D9D0B4;
  --feld-bg: #FFFFFF;
  --text: #2B2A22;
  --text-2: #5C5A4E;
  --text-auf-dunkel: #D9D3BF;
  --dunkel: #2B2A22;            /* dunkle Sektion */
  --dunkel-linie: #45443A;
  --fehler: #B42318;
  --header-bg: rgba(255, 253, 246, 0.96);
  --schatten: 0 10px 30px rgba(43, 42, 34, 0.16);
  --btn-hell-bg: #FFFDF6;       /* Creme-Button auf grüner Fläche */
  --btn-hell-text: #2B2A22;

  --r-pill: 40px; --r-input: 12px; --r-btn: 14px; --r-kachel: 16px; --r-karte: 20px; --r-bild: 18px;

  --maxw: 1160px;
  --gutter: 24px;
  color-scheme: light;
}

/* Dunkle Palette: automatisch (System) oder manuell gewählt */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gruen-dunkel: #CFE70D;
    --gruen-hell: #2E3318;
    --gruen-hell-text: #D7E28A;
    --bordeaux: #E59A9B;
    --sand: #B8A87E;
    --creme: #1D1C17;
    --creme-2: #2A2922;
    --karte: #25241E;
    --linie: #3A392F;
    --feld: #55533F;
    --feld-bg: #1A1915;
    --text: #F2ECDA;
    --text-2: #BDB7A3;
    --dunkel: #12110E;
    --dunkel-linie: #3A392F;
    --fehler: #FF8A7E;
    --header-bg: rgba(29, 28, 23, 0.92);
    --schatten: 0 10px 30px rgba(0, 0, 0, 0.45);
    --btn-hell-bg: #1D1C17;
    --btn-hell-text: #F2ECDA;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --gruen-dunkel: #CFE70D;
  --gruen-hell: #2E3318;
  --gruen-hell-text: #D7E28A;
  --bordeaux: #E59A9B;
  --sand: #B8A87E;
  --creme: #1D1C17;
  --creme-2: #2A2922;
  --karte: #25241E;
  --linie: #3A392F;
  --feld: #55533F;
  --feld-bg: #1A1915;
  --text: #F2ECDA;
  --text-2: #BDB7A3;
  --dunkel: #12110E;
  --dunkel-linie: #3A392F;
  --fehler: #FF8A7E;
  --header-bg: rgba(29, 28, 23, 0.92);
  --schatten: 0 10px 30px rgba(0, 0, 0, 0.45);
  --btn-hell-bg: #1D1C17;
  --btn-hell-text: #F2ECDA;
  color-scheme: dark;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0; min-height: 100vh;
  background: var(--creme); color: var(--text);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; }
picture { display: contents; }
picture > source { display: none; }
a { color: var(--gruen-dunkel); text-underline-offset: 3px; }
a:hover { color: var(--bordeaux); }
h1, h2, h3, p, figure, ul, ol, address { margin: 0; }
h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 12 5 5; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5; }
address { font-style: normal; }
input, textarea, button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--text); color: var(--creme); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.skip-link:focus { top: 12px; color: var(--creme); }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
@media (max-width: 480px) { :root { --gutter: 16px; } }

/* ---------- Typografie ---------- */
.kicker { font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--bordeaux); margin-bottom: 10px; }
.h1 { font-size: clamp(34px, 5.4vw, 60px); font-weight: 800; line-height: 1.06; letter-spacing: -1px; text-wrap: balance; }
.h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; line-height: 1.15; text-wrap: balance; }
.h3 { font-size: 19px; font-weight: 700; line-height: 1.35; margin-bottom: 6px; }
.lead { font-size: 19px; line-height: 1.6; color: var(--text-2); max-width: 520px; text-wrap: pretty; }
.intro { font-size: 17px; line-height: 1.6; color: var(--text-2); max-width: 640px; }
.muted { color: var(--text-2); }
.text-15 { font-size: 15px; line-height: 1.6; }
.link-pfeil { font-size: 16px; font-weight: 600; }
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; line-height: 1.25; margin: 40px 0 12px; }
.prose h3 { font-size: 18px; font-weight: 700; margin: 24px 0 8px; }
.prose p, .prose ul, .prose address { margin: 0 0 14px; font-size: 16px; line-height: 1.7; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 4px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 17px 28px; border-radius: var(--r-btn);
  font-size: 17px; font-weight: 700; line-height: 1.2; text-decoration: none; text-align: center;
  border: 1.5px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
.btn--primary, .btn--pill { background: var(--gruen); color: #fff; }
.btn--primary:hover, .btn--pill:hover { background: var(--gruen-hover); color: #fff; }
.btn--outline { border-color: var(--text); color: var(--text); background: transparent; font-weight: 600; padding-inline: 24px; }
.btn--outline:hover { background: var(--gruen-hell); border-color: var(--gruen-dunkel); color: var(--gruen-hell-text); }
.btn--hell { background: var(--btn-hell-bg); color: var(--btn-hell-text); }
.btn--hell:hover { background: var(--gruen-hell); color: var(--gruen-hell-text); }
.btn--dunkel { background: var(--text); color: var(--creme); }
.btn--dunkel:hover { background: var(--gruen-dunkel); color: var(--creme); }
.btn--pill { border-radius: var(--r-pill); padding: 11px 20px; font-size: 15px; white-space: nowrap; }
.btn--klein { padding: 15px 20px; font-size: 16px; }
.btn--block { width: 100%; }
.btn-reihe { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.brand__logo { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand__name { font-size: 20px; font-weight: 800; color: var(--gruen-dunkel); letter-spacing: -0.3px; white-space: nowrap; }
.brand__slogan { font-family: 'Caveat', cursive; font-size: 17px; color: var(--bordeaux); white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 22px; font-size: 15px; font-weight: 500; }
.nav__list { display: flex; align-items: center; gap: 22px; list-style: none; padding: 0; }
.nav__list a { color: var(--text); text-decoration: none; padding-block: 8px; white-space: nowrap; }
.nav__list a:hover { color: var(--gruen-dunkel); }
.nav__list a[aria-current="page"] { color: var(--gruen-dunkel); font-weight: 700; box-shadow: inset 0 -2px 0 var(--gruen); }
.nav__list .nav__extern { color: var(--text-2); font-size: 14px; }
.nav__toggle { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--feld); background: var(--feld-bg); color: var(--text); align-items: center; justify-content: center; }

/* Ab 1100 px passt das ganze Menü in eine Zeile, darunter Burger-Menü */
@media (max-width: 1099px) {
  .nav { gap: 10px; }
  .nav__toggle { display: inline-flex; }
  .nav__list {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--karte); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
    padding: 8px var(--gutter) 18px; font-size: 17px;
    box-shadow: 0 16px 24px rgba(0, 0, 0, .08);
    max-height: calc(100vh - 70px); overflow-y: auto;
  }
  .nav__list a { display: block; padding: 12px 0; }
  .nav__list a[aria-current="page"] { box-shadow: none; }
  .nav__list .nav__extern { font-size: 17px; }
  .nav.is-open .nav__list { display: flex; }
  /* Ohne JavaScript: Menü bleibt bedienbar */
  .no-js .nav__list { display: flex; position: static; flex-direction: row; flex-wrap: wrap; gap: 4px 16px; padding: 0; border: 0; box-shadow: none; background: none; font-size: 15px; }
  .no-js .site-header__bar { flex-wrap: wrap; }
  .no-js .nav__toggle { display: none; }
}
@media (max-width: 560px) {
  .brand__slogan { display: none; }
  .brand__name { font-size: 17px; }
  .brand__logo { width: 40px; height: 40px; }
  .site-header .btn--pill { padding: 10px 14px; font-size: 14px; }
}
/* Handys (z. B. iPhone 17 Pro, 402 px): nur das runde Logo, es enthält die Wortmarke bereits.
   So bleibt Platz für „Preis berechnen“ und das Menü. */
@media (max-width: 480px) { .brand__text { display: none; } }

/* ---------- Sektionen ---------- */
.sektion { padding-block: 80px; }
.sektion--karte { background: var(--karte); border-block: 1px solid var(--linie); }
.sektion--dunkel { background: var(--dunkel); color: #F7F1E1; }
.sektion--dunkel .kicker { color: var(--gruen-auf-dunkel); }
.sektion--dunkel .intro { color: var(--text-auf-dunkel); }
.sektion-kopf { max-width: 640px; margin-bottom: 36px; }
.sektion-kopf .h2 + .intro { margin-top: 14px; }
@media (max-width: 640px) { .sektion { padding-block: 56px; } }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 260px)), 1fr)); }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px; align-items: center; padding-block: 56px 64px; }
.hero__text { display: flex; flex-direction: column; gap: 22px; }
.badge { align-self: flex-start; background: var(--gruen-hell); color: var(--gruen-hell-text); font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: var(--r-pill); }
.vertrauen { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 8px 28px; font-size: 14px; line-height: 1.45; color: var(--text-2); padding-top: 6px; list-style: none; padding-left: 0; }
.vertrauen li { position: relative; padding-left: 20px; }
.vertrauen li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--gruen-dunkel); font-weight: 800; }
@media (max-width: 420px) { .vertrauen { gap: 8px 18px; } }
.vertrauen strong { color: var(--text); }
.vertrauen__link { color: inherit; text-decoration: none; }
.vertrauen__link:hover { color: var(--gruen-dunkel); text-decoration: underline; }
.hero__bild { position: relative; }
/* Landingpages (willkommen.php): Foto im eigenen Seitenverhältnis, Partner-Logo neben dem Badge */
.landing__foto { width: 100%; height: auto; border-radius: 28px; display: block; }
.landing__partner { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.landing__partner img { width: 180px; height: auto; display: block; }
.hero__bild > img, .hero__bild picture img.hero__foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; display: block; height: auto; }
.schwebekarte {
  position: absolute; left: -12px; bottom: 28px; max-width: 280px;
  background: var(--karte); border-radius: 18px; padding: 14px 18px; box-shadow: var(--schatten);
  display: flex; gap: 12px; align-items: center; font-size: 14px; line-height: 1.4;
}
.schwebekarte img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
@media (max-width: 900px) { .hero { padding-block: 32px 48px; gap: 32px; } .hero__bild > img, .hero__bild picture img.hero__foto { aspect-ratio: 4 / 3; } .schwebekarte { left: 12px; bottom: 12px; } }

/* ---------- Vergleich + Features ---------- */
/* Vergleichstabelle: mobil horizontal scrollbar, erste Spalte fixiert */
.vergleichstabelle { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 12px; border: 1px solid var(--linie); border-radius: var(--r-karte); background: var(--karte); }
.vergleichstabelle:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; }
.vergleichstabelle table { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.45; }
.vergleichstabelle th, .vergleichstabelle td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
.vergleichstabelle tbody tr:last-child > * { border-bottom: 0; }
.vergleichstabelle thead th { font-size: 14px; font-weight: 700; color: var(--text-2); }
.vergleichstabelle tbody th { font-weight: 700; }
.vergleichstabelle tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--karte); width: 120px; box-shadow: 1px 0 0 var(--linie); }
.vergleichstabelle .vt-wir { background: var(--gruen-hell); font-weight: 600; }
.vergleichstabelle thead .vt-wir { background: var(--gruen); color: #fff; font-size: 15px; }
.vergleich__hinweis { font-size: 13px; color: var(--text-2); margin-bottom: 40px; }
@media (max-width: 640px) {
  .vergleichstabelle table { min-width: 340px; table-layout: fixed; font-size: 13px; }
  .vergleichstabelle th, .vergleichstabelle td { padding: 10px 5px; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; overflow-wrap: break-word; }
  .vergleichstabelle tr > :first-child { width: 82px; padding-left: 8px; font-size: 12px; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
  .vergleichstabelle thead th, .vergleichstabelle thead .vt-wir { font-size: 12px; line-height: 1.3; }
  .vergleichstabelle thead .vt-wir { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; width: 30%; }
}
.features { --min: 320px; gap: 32px 40px; }
.feature { display: flex; gap: 16px; }
.feature img { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; }
.feature p { font-size: 15px; line-height: 1.6; color: var(--text-2); }

/* ---------- Besondere Bedürfnisse ---------- */
.bedarfe { --min: 300px; gap: 16px; margin-bottom: 28px; }
.bedarf { background: var(--karte); border: 1px solid var(--linie); border-left: 4px solid var(--gruen); border-radius: var(--r-karte); padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.bedarf h3 { font-size: 19px; font-weight: 700; line-height: 1.3; }
.bedarf p { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.bedarf .bedarf__beispiel { color: var(--text); font-weight: 600; font-size: 14px; background: var(--gruen-hell); border-radius: 10px; padding: 8px 12px; }
.bedarf__links { list-style: none; padding: 0; margin-top: auto; display: flex; flex-direction: column; gap: 4px; font-size: 15px; font-weight: 600; }
.bedarf__cta { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; background: var(--creme-2); border-radius: var(--r-karte); padding: 20px 24px; }
.bedarf__cta p { font-size: 16px; line-height: 1.5; max-width: 620px; }

/* ---------- Schritt-Karten ---------- */
.schritte { --min: 230px; list-style: none; padding: 0; counter-reset: schritt; }
.schritt { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 24px; }
.schritt__nr { font-size: 44px; font-weight: 800; color: var(--gruen); line-height: 1; margin-bottom: 14px; display: block; }
.schritt h3 { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.schritt p { font-size: 15px; line-height: 1.6; color: var(--text-2); }

/* ---------- Kulissen ---------- */
.kulissen { --min: 280px; gap: 20px; }
.kulissen img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-bild); display: block; margin-bottom: 14px; }
.kulissen figcaption { font-size: 15px; line-height: 1.55; color: var(--text-auf-dunkel); }
.kulissen figcaption strong { color: #F7F1E1; }

/* ---------- Liefergebiet ---------- */
.liefergebiet { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px; align-items: start; }
.plz-form { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.plz-form input { flex: 1 1 160px; min-width: 0; padding: 16px 18px; font-size: 17px; border-radius: var(--r-btn); }
.plz-form .btn { padding: 16px 24px; font-size: 16px; }
.hinweis { border-radius: var(--r-btn); padding: 16px 18px; font-size: 15px; line-height: 1.55; background: var(--creme-2); }
.hinweis--ja { background: var(--gruen-hell); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.hinweis--fehler { background: transparent; color: var(--fehler); padding: 0; }
.orte { background: var(--karte); border: 1px solid var(--linie); border-radius: 24px; padding: 28px; }
.orte__titel { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.chips li { padding: 7px 14px; border-radius: var(--r-pill); background: var(--creme-2); font-size: 14px; font-weight: 500; }

/* ---------- Tiere ---------- */
.tiere { --min: 240px; gap: 18px; margin-bottom: 24px; }
.tier { display: flex; flex-direction: column; }
.tier img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-bild); margin-bottom: 14px; display: block; }
.tier__preis { font-size: 15px; font-weight: 600; color: var(--text-2); margin-bottom: 2px; }
.tier__preis b { font-size: 34px; font-weight: 800; line-height: 1.1; color: var(--gruen-dunkel); letter-spacing: -0.5px; margin-right: 4px; }
.tier__name { font-size: 18px; font-weight: 700; margin-bottom: 2px; }
.tier__meta { font-size: 14px; color: var(--text-2); margin-bottom: 8px; }
.tier p { font-size: 15px; line-height: 1.55; }

/* ---------- Über uns ---------- */
.ueber { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 48px; align-items: center; }
.ueber__foto { width: 100%; max-width: 460px; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 28px; display: block; }
.ueber__text { display: flex; flex-direction: column; gap: 16px; }
.ueber__text .intro { max-width: none; line-height: 1.65; }
.person { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 15px; line-height: 1.5; }
.person img { width: 72px; height: auto; object-fit: contain; }

/* ---------- CTA ---------- */
.cta-flaeche {
  background: var(--gruen); color: #fff; border-radius: 32px; padding: clamp(32px, 6vw, 64px);
  display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap;
}
.cta-flaeche h2 { font-size: clamp(28px, 3.8vw, 44px); font-weight: 800; line-height: 1.12; margin-bottom: 10px; }
.cta-flaeche p { font-size: 18px; }
.cta-sektion { padding-bottom: 88px; }
.cta-box { background: var(--karte); border: 1px solid var(--linie); border-radius: 28px; padding: clamp(28px, 5vw, 48px); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta-box h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; margin-bottom: 8px; line-height: 1.2; }

/* ---------- Karten allgemein ---------- */
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 28px; }
.karte--link { text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 8px; padding: 24px; transition: border-color .15s; }
.karte--link:hover { border-color: var(--gruen); color: var(--text); }
.karte--link img { width: 44px; height: 44px; object-fit: contain; }
.karte--link strong { font-size: 18px; }
.karte--link .karte__mehr { font-weight: 700; color: var(--gruen-dunkel); }
.check-liste { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.45; }
.check-liste li { display: flex; gap: 10px; }
.check-liste li::before { content: '✓'; color: var(--gruen-dunkel); font-weight: 800; flex-shrink: 0; }

/* ---------- Akkordeon / FAQ ---------- */
details summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
details summary::-webkit-details-marker { display: none; }
.chev { transition: transform .2s; font-size: 12px; flex-shrink: 0; }
details[open] .chev { transform: rotate(180deg); }
.faq { border-top: 1px solid var(--linie); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary { padding: 20px 0; font-size: 17px; font-weight: 600; min-height: 44px; }
.faq summary h3 { font-size: inherit; font-weight: inherit; }
.faq details > div { font-size: 16px; line-height: 1.65; color: var(--text-2); padding-bottom: 20px; }
.faq details > div p + p { margin-top: 10px; }

/* ---------- Formulare ---------- */
.feld { display: flex; flex-direction: column; gap: 8px; }
.feld__label { font-size: 15px; font-weight: 600; }
.feld__label .optional { font-weight: 400; color: var(--text-2); }
.input {
  width: 100%; padding: 14px 16px; font-size: 16px;
  border: 1.5px solid var(--feld); border-radius: var(--r-input); background: var(--feld-bg); color: var(--text);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--text-2); opacity: .75; }
.input:focus { border-color: var(--gruen); box-shadow: 0 0 0 3px rgba(164, 183, 10, .22); }
textarea.input { resize: vertical; min-height: 96px; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
/* Fehler erst nach blur/submit (Klasse per JS) */
.input.is-invalid, .is-invalid .input { border-color: var(--fehler); }
.input.is-invalid:focus { border-color: var(--fehler); box-shadow: 0 0 0 3px rgba(180, 35, 24, .15); }
.feld__fehler { font-size: 14px; color: var(--fehler); }
.feld__hilfe { font-size: 14px; color: var(--text-2); }
.feld-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.feld--schmal { max-width: 300px; }
.checkbox { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; cursor: pointer; }
.checkbox input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--gruen); flex-shrink: 0; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Chips als echte Radio-Buttons */
.chip-gruppe { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.chip-gruppe legend { font-size: 15px; font-weight: 600; padding: 0; margin-bottom: 10px; }
.chip-reihe { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 12px 20px; border-radius: var(--r-pill);
  border: 1.5px solid var(--feld); background: var(--feld-bg); color: var(--text); font-size: 15px; font-weight: 600; line-height: 1.2;
}
.chip input:checked + span { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--gruen); outline-offset: 2px; }

/* Große Auswahl-Kacheln (Tierart, Kontaktweg) */
.kacheln { display: grid; gap: 12px; border: 0; padding: 0; margin: 0; min-width: 0; }
.kacheln--2 { grid-template-columns: 1fr 1fr; }
.kacheln--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kachel { position: relative; }
.kachel input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.kachel span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%;
  padding: 20px 12px; border-radius: 18px; border: 2px solid var(--feld); background: var(--feld-bg);
  font-size: 17px; font-weight: 700; text-align: center;
}
.kachel span b { font-size: 32px; line-height: 1; font-weight: 400; }
.kacheln--3 .kachel span { min-height: 96px; padding: 18px 6px; border-radius: var(--r-kachel); font-size: 15px; font-weight: 600; gap: 8px; }
.kacheln--3 .kachel span b { font-size: 26px; }
.kachel input:checked + span { background: var(--gruen-hell); border-color: var(--gruen); }
.kachel input:focus-visible + span { outline: 3px solid var(--gruen); outline-offset: 2px; }

.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--feld); border-radius: var(--r-input); background: var(--feld-bg); align-self: flex-start; }
.stepper button { width: 48px; height: 50px; border: none; background: none; font-size: 22px; color: var(--text); }
.stepper input { width: 44px; text-align: center; font-size: 17px; font-weight: 700; border: 0; background: none; padding: 0; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Angebots-Flow ---------- */
.flow { max-width: 680px; margin-inline: auto; padding: 36px 20px 96px; }
.fortschritt { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; list-style: none; padding: 0; }
.fortschritt li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.fortschritt li + li::before { content: ''; width: 28px; height: 2px; background: var(--feld); margin-right: 2px; }
@media (max-width: 420px) { .fortschritt { gap: 6px; } .fortschritt li { font-size: 13px; gap: 6px; } .fortschritt li + li::before { width: 12px; } }
.fortschritt__nr { width: 28px; height: 28px; border-radius: 50%; background: var(--linie); color: var(--text-2); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.fortschritt li.is-done .fortschritt__nr, .fortschritt li.is-active .fortschritt__nr { background: var(--gruen); color: #fff; }
.flow h1, .flow .schritt-titel { font-size: clamp(28px, 5vw, 40px); font-weight: 800; line-height: 1.15; margin-bottom: 12px; text-wrap: pretty; }
.flow [tabindex="-1"]:focus { outline: none; }
.flow .preis__fuer { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text-2); margin-bottom: 6px; }
.flow .intro { margin-bottom: 28px; }
.flow-karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 28px; display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 480px) { .flow-karte { padding: 22px 18px; } .flow { padding-top: 24px; } }
.zurueck { background: none; border: none; padding: 8px 0; margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--gruen-dunkel); min-height: 44px; }
.zurueck:hover { color: var(--bordeaux); }

.preis__fuer { font-size: 15px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.preis__zeile { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.preis__betrag { font-size: clamp(40px, 8vw, 56px); font-weight: 800; line-height: 1.05; }
.preis__einheit { font-size: 20px; font-weight: 600; }
.preis__details { font-size: 15px; color: var(--text-2); margin-bottom: 16px; }
.info-box { background: var(--gruen-hell); border-radius: var(--r-btn); padding: 16px 18px; display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.55; }
.info-box::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--gruen); margin-top: 7px; flex-shrink: 0; }
.info-box--sand { background: var(--creme-2); }
.info-box--sand::before { background: var(--gruen-dunkel); }
.akkordeon { border-top: 1px solid var(--linie); }
.akkordeon details + details { border-top: 1px solid var(--linie); }
.akkordeon summary { padding: 16px 0; font-size: 15px; font-weight: 600; min-height: 44px; }
.zeilen { display: flex; flex-direction: column; gap: 10px; padding: 0 0 18px; font-size: 15px; }
.zeilen > div { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.preis__varianten { padding: 12px 0 0; margin-bottom: 16px; border-top: 1px solid var(--linie); gap: 8px; }
.preis__varianten strong { font-weight: 700; }

.balken { display: flex; height: 34px; border-radius: 10px; overflow: hidden; margin-bottom: 20px; }
.balken > div { display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; min-width: 0; overflow: hidden; white-space: nowrap; }
.legende { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; list-style: none; padding: 0; }
.legende li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.legende__farbe { width: 14px; height: 14px; border-radius: 4px; margin-top: 4px; }
.legende__name { font-size: 15px; font-weight: 700; }
.legende__desc { font-size: 14px; line-height: 1.5; color: var(--text-2); }
.legende__wert { text-align: right; }
.legende__wert b { display: block; font-size: 15px; }
.legende__wert small { font-size: 13px; color: var(--text-2); }
.k-material { background: #A4B70A; color: #2B2A22; }
.k-produktion { background: #636E06; color: #fff; }
.k-verwaltung { background: #92141A; color: #fff; }
.k-ruecklagen { background: #D9C9A0; color: #2B2A22; }
.tiefkuehl { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; background: var(--creme-2); border-radius: var(--r-btn); padding: 12px 16px; }
.flow-faq { margin-top: 56px; }
.inklusive { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 8px 16px; }

.vertrauensblock { display: flex; gap: 18px; align-items: center; padding: 22px 4px 26px; }
.vertrauensblock img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.vertrauensblock__zitat { font-size: 18px; font-weight: 700; line-height: 1.3; }
.vertrauensblock__wer { font-size: 14px; color: var(--text-2); }
.vertrauensblock__wer strong { color: var(--text); }

.erfolg { text-align: center; align-items: center; padding: 36px 28px; gap: 16px; }
.erfolg__haken { width: 64px; height: 64px; border-radius: 50%; background: var(--gruen); color: #fff; font-size: 30px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.erfolg .schritt-titel { font-size: clamp(26px, 5vw, 34px); margin: 0; line-height: 1.2; }
.erfolg p { font-size: 17px; line-height: 1.6; max-width: 480px; text-wrap: pretty; }
.erfolg__melanie { display: flex; gap: 14px; align-items: center; margin-top: 8px; text-align: left; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.erfolg__melanie img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.formular-fehler { background: var(--creme-2); border-left: 4px solid var(--fehler); border-radius: 10px; padding: 14px 16px; font-size: 15px; }

/* ---------- Beratung ---------- */
.ansatz { background: var(--dunkel); color: #F7F1E1; border-radius: 28px; padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; gap: 18px; }
.ansatz .kicker { color: var(--gruen-auf-dunkel); margin: 0; }
.ansatz__titel { font-size: clamp(24px, 2.8vw, 32px); font-weight: 800; line-height: 1.2; }
.ansatz p { font-size: 16px; line-height: 1.65; color: var(--text-auf-dunkel); }
.ansatz .person img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.ansatz .person span { color: var(--text-auf-dunkel); }
.preiskarten { --min: 300px; gap: 18px; align-items: stretch; }
.preiskarte { background: var(--creme); border: 1px solid var(--linie); border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 16px; position: relative; }
.preiskarte--hervor { border: 2px solid var(--gruen); }
.preiskarte__label { position: absolute; top: -14px; left: 24px; background: var(--gruen); color: #fff; font-size: 13px; font-weight: 700; padding: 5px 14px; border-radius: var(--r-pill); }
.preiskarte img { width: 48px; height: 48px; object-fit: contain; }
.preiskarte h3 { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.preiskarte__sub { font-size: 15px; color: var(--text-2); }
.preiskarte__preis { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.preiskarte__preis b { font-size: 36px; font-weight: 800; line-height: 1.1; }
.preiskarte__preis span { font-size: 15px; color: var(--text-2); }
.preiskarte .check-liste { flex: 1; }
.einstiege { --min: 420px; gap: 18px; }
.einstieg { border-radius: 22px; padding: 28px; display: flex; gap: 20px; align-items: flex-start; background: var(--karte); border: 1px solid var(--linie); }
.einstieg--gruen { background: var(--gruen-hell); border-color: transparent; }
.einstieg img { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; }
.einstieg > div { display: flex; flex-direction: column; gap: 8px; }
.einstieg h3 { font-size: 20px; font-weight: 800; }
.einstieg p { font-size: 15px; line-height: 1.6; }
.einstieg a { font-weight: 700; }
@media (max-width: 480px) { .einstieg { flex-direction: column; gap: 14px; padding: 22px; } }

/* ---------- Mediathek ---------- */
.sprung { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; list-style: none; padding: 0; }
.sprung a { display: inline-block; padding: 10px 18px; border-radius: var(--r-pill); background: var(--karte); border: 1px solid var(--feld); color: var(--text); font-size: 15px; font-weight: 600; text-decoration: none; }
.sprung a:hover { border-color: var(--gruen); color: var(--text); }
.video-karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.video-karte video { width: 100%; height: 100%; min-height: 220px; aspect-ratio: 16 / 9; object-fit: contain; background: #2B2A22; display: block; }
.video-karte__text { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.video-karte__typ { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; color: var(--gruen-dunkel); }
.video-karte__neu { font-size: 12px; font-weight: 700; background: #92141A; color: #fff; padding: 3px 10px; border-radius: var(--r-pill); }
.video-karte h3 { font-size: 24px; font-weight: 800; line-height: 1.2; }
.video-karte p { font-size: 16px; line-height: 1.6; color: var(--text-2); }
.nachlesen { border-top: 1px solid var(--linie); padding-top: 14px; margin-top: 4px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.nachlesen h4 { font-size: 15px; font-weight: 700; margin: 0; }
.nachlesen ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.video-karte--dunkel { background: var(--dunkel); color: #F7F1E1; border-color: transparent; }
.video-karte--dunkel video { background: #1c1b17; }
.video-karte--dunkel .video-karte__typ { color: #CFE70D; }
.video-karte--dunkel .video-karte__neu { background: #A4B70A; color: #2B2A22; }
.video-karte--dunkel p { color: #D9D3BF; }
.video-karte--dunkel .nachlesen { border-color: var(--dunkel-linie); }
.video-karte--dunkel a { color: #CFE70D; }
.video-karte--dunkel a:hover { color: #fff; }
.mediathek-sektion { padding-block: 40px; }

/* ---------- Seitenkopf für Unterseiten ---------- */
.seitenkopf { padding-block: 56px 32px; max-width: 760px; display: flex; flex-direction: column; gap: 18px; }
.seitenkopf .h1 { font-size: clamp(34px, 5vw, 54px); }
.krumen { font-size: 14px; color: var(--text-2); }
.krumen ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.krumen li + li::before { content: '›'; margin-right: 6px; }
.krumen a { color: var(--text-2); }

/* Kontakt */
.kontaktwege { --min: 240px; }
.kontaktweg { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.kontaktweg__icon { font-size: 28px; line-height: 1; margin-bottom: 6px; }
.kontaktweg h3 { font-size: 18px; font-weight: 700; }
.kontaktweg a { font-weight: 700; font-size: 17px; word-break: break-word; }
.zwei-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px; align-items: start; }
.karte-bild { width: 100%; height: auto; border-radius: var(--r-bild); display: block; }

/* Erfahrungen */
.berichte { --min: 300px; gap: 20px; }
.bericht { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.bericht__kopf { display: flex; gap: 16px; align-items: center; }
.bericht__kopf img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.bericht__kopf h2 { font-size: 22px; font-weight: 800; line-height: 1.2; }
.bericht__kopf p { font-size: 14px; color: var(--text-2); font-weight: 600; }
.bericht blockquote { margin: 0; font-size: 16px; line-height: 1.65; }

/* Werte (About) */
.werte { --min: 280px; gap: 18px; }
.wert { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 24px; }
.wert__icon { font-size: 30px; line-height: 1; margin-bottom: 12px; display: block; }
.wert h3 { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.wert p { font-size: 15px; line-height: 1.6; color: var(--text-2); }

/* Newsletter */
.nl-themen { --min: 260px; gap: 16px; }
.nl-thema { position: relative; }
.nl-thema input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.nl-thema > span { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px; border-radius: var(--r-karte); border: 2px solid var(--feld); background: var(--feld-bg); }
.nl-thema input:checked + span { border-color: var(--gruen); background: var(--gruen-hell); }
.nl-thema input:focus-visible + span { outline: 3px solid var(--gruen); outline-offset: 2px; }
.nl-thema__icon { font-size: 28px; line-height: 1; }
.nl-thema strong { font-size: 18px; }
.nl-thema small { font-size: 13px; font-weight: 600; color: var(--gruen-dunkel); }
.nl-thema__text { font-size: 15px; line-height: 1.55; color: var(--text-2); }

/* ---------- Community (Fediwall im iframe, Höhe setzt community.js) ---------- */
.fediwall { display: block; width: 100%; min-height: 70vh; border: 0; }

/* ---------- Footer ---------- */
.site-footer { background: #2B2A22; color: #D9D3BF; }
:root[data-theme="dark"] .site-footer { background: #12110E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-footer { background: #12110E; } }
.site-footer a { color: #D9D3BF; text-decoration: none; }
.site-footer a:hover { color: #CFE70D; text-decoration: underline; }
.site-footer__grid { padding-block: 56px 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 32px; font-size: 15px; line-height: 1.7; }
.site-footer__marke { font-size: 19px; font-weight: 800; color: #CFE70D; margin-bottom: 8px; }
.site-footer__titel { font-size: 15px; font-weight: 700; color: #F7F1E1; margin-bottom: 8px; }
.site-footer__links { list-style: none; padding: 0; }
.site-footer__links a { display: inline-block; padding-block: 2px; }
.site-footer__copy { padding-block: 18px 28px; border-top: 1px solid #45443A; font-size: 13px; color: #A8A28C; }
.theme-switch { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.theme-switch__label { width: 100%; font-size: 13px; color: #A8A28C; }
.theme-switch button { border: 1px solid #5C5A4E; background: transparent; color: #D9D3BF; border-radius: var(--r-pill); padding: 6px 12px; font-size: 13px; min-height: 36px; }
.theme-switch button[aria-pressed="true"] { background: #CFE70D; border-color: #CFE70D; color: #2B2A22; font-weight: 700; }
.no-js .theme-switch { display: none; }

/* ---------- Druck ---------- */
@media print {
  .site-header, .site-footer, .btn, .nav__toggle, video { display: none !important; }
  body { background: #fff; color: #000; }
}