/* =========================================================================
   Dr. Hesse Tierernährung – Design-System
   Farben aus dem Logo gemessen. Schriften systemseitig (kein Google-Fonts-
   Abruf: DSGVO-sicher und ohne Ladezeit).
   ========================================================================= */

:root{
  /* Marke */
  --braun-900:#2b1710;
  --braun-800:#482418;
  --braun-700:#5c3323;
  --braun-500:#8a4a2c;
  --braun-400:#a85424;

  --rot-700:#a62c22;
  --rot-600:#c4362b;
  --rot-500:#d94a3d;

  --oliv-800:#4c5a36;
  --oliv-700:#5f6f42;
  --oliv-100:#eaeedd;

  --sand-50:#fdfaf6;
  --sand-100:#f7f0e7;
  --sand-200:#ecdfd0;
  --sand-300:#dcc9b4;

  --text:#31211a;
  --text-leise:#6d5a50;
  --weiss:#fff;

  --warn-bg:#fdf3e7;
  --warn-rand:#e8c9a0;
  --warn-text:#8a4b12;

  /* Maße */
  --lesebreite:44rem;      /* Fließtext */
  --breite:70rem;          /* Sektionen */
  --radius:14px;
  --radius-gross:22px;

  --schatten-s:0 1px 2px rgba(43,23,16,.06), 0 2px 6px rgba(43,23,16,.05);
  --schatten-m:0 2px 6px rgba(43,23,16,.07), 0 10px 26px rgba(43,23,16,.08);
  --schatten-l:0 4px 12px rgba(43,23,16,.09), 0 22px 48px rgba(43,23,16,.11);

  --serif:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.72;
  color:var(--text);
  background:var(--sand-50);
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--rot-700)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--braun-400);outline-offset:2px;border-radius:4px;
}
h1,h2,h3,h4{font-family:var(--serif);color:var(--braun-800);line-height:1.18;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(1.85rem,1.1rem + 3.3vw,3.05rem)}
h2{font-size:clamp(1.5rem,1rem + 2.1vw,2.3rem)}
h3{font-size:clamp(1.18rem,.95rem + .95vw,1.5rem)}
h4{font-size:1.06rem;font-family:var(--sans);letter-spacing:.01em}
p{margin:0 0 1.15em}
strong{color:var(--braun-800)}
hr{border:0;border-top:1px solid var(--sand-200);margin:2.5rem 0}
.visuell-versteckt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Layout ---------- */
.huelle{width:100%;max-width:var(--breite);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.lese{max-width:var(--lesebreite);margin-inline:auto}
.abschnitt{padding-block:clamp(2.75rem,7vw,5rem)}
.abschnitt--eng{padding-block:clamp(2rem,5vw,3.25rem)}
.abschnitt--sand{background:var(--sand-100)}
.abschnitt--creme{background:var(--weiss)}
.abschnitt--dunkel{background:var(--braun-800);color:#f3e7dd}
.abschnitt--dunkel h2,.abschnitt--dunkel h3{color:#fff}
.abschnitt--dunkel strong{color:#fff}
.abschnitt--dunkel a{color:#f6c9a6}
.mitte{text-align:center}
.kopfblock{max-width:40rem;margin:0 auto clamp(1.75rem,4vw,2.75rem)}
.kopfblock p{color:var(--text-leise);font-size:1.075rem;margin-bottom:0}
.kopfblock--links{margin-inline:0;text-align:left}

/* ---------- Overline / Marker ---------- */
.overline{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rot-700);margin-bottom:.85rem;
}
.overline::before{content:"";width:1.75rem;height:2px;background:var(--rot-600);border-radius:2px}
.abschnitt--dunkel .overline{color:#f0b58c}
.abschnitt--dunkel .overline::before{background:#f0b58c}

/* ---------- Kopfzeile ---------- */
.kopfzeile{
  position:sticky;top:0;z-index:60;background:rgba(253,250,246,.94);
  border-bottom:1px solid var(--sand-200);backdrop-filter:saturate(1.4) blur(8px);
}
.kopfzeile__innen{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:66px}
.kopfzeile__logo img{height:40px;width:auto}
@media (min-width:700px){.kopfzeile__logo img{height:48px}}
.kopfzeile__rechts{display:flex;align-items:center;gap:1.25rem}
.kopfzeile__hinweis{display:none;font-size:.85rem;color:var(--text-leise)}
@media (min-width:860px){.kopfzeile__hinweis{display:block}}
.kopfzeile__rechts>.knopf{display:none}
@media (min-width:600px){.kopfzeile__rechts>.knopf{display:inline-flex}}
.nav{display:none;gap:1.4rem}
@media (min-width:860px){.nav{display:flex}}
.nav a{color:var(--braun-700);text-decoration:none;font-weight:600;font-size:.95rem}
.nav a:hover{color:var(--rot-700)}

/* ---------- Knöpfe ---------- */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--sans);font-weight:700;font-size:1.02rem;line-height:1.25;
  padding:.95rem 1.6rem;border-radius:999px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;text-align:center;
  transition:transform .12s ease,box-shadow .18s ease,background-color .18s ease;
}
.knopf:hover{transform:translateY(-1px)}
.knopf:active{transform:translateY(0)}
.knopf--haupt{background:var(--rot-600);color:#fff;box-shadow:0 3px 0 var(--rot-700),var(--schatten-m)}
.knopf--haupt:hover{background:var(--rot-500)}
.knopf--zweit{background:var(--weiss);color:var(--braun-800);border-color:var(--sand-300);box-shadow:var(--schatten-s)}
.knopf--zweit:hover{border-color:var(--braun-400);color:var(--braun-800)}
.knopf--gross{font-size:1.12rem;padding:1.15rem 2.1rem}
.knopf--voll{width:100%}
.knopf--hell{background:#fff;color:var(--braun-800)}
.knopf-gruppe{display:flex;flex-wrap:wrap;gap:.85rem}
.knopf-gruppe--mitte{justify-content:center}
.knopf-notiz{font-size:.88rem;color:var(--text-leise);margin:.85rem 0 0}
.abschnitt--dunkel .knopf-notiz{color:#d8c3b5}

/* ---------- Hero ---------- */
.hero{position:relative;background:linear-gradient(170deg,var(--sand-100) 0%,var(--sand-50) 62%);overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:auto -12% -45% auto;width:34rem;height:34rem;border-radius:50%;
  background:radial-gradient(circle,rgba(204,60,48,.10),transparent 68%);pointer-events:none;
}
.hero__innen{position:relative;z-index:1;display:grid;gap:clamp(2rem,4vw,3.25rem);padding-block:clamp(2.25rem,5vw,3.75rem) clamp(2.5rem,6vw,4rem)}
@media (min-width:920px){.hero__innen{grid-template-columns:1.12fr .88fr;align-items:center}}
.hero h1{margin-bottom:.6em}
.hero h1 em{font-style:normal;color:var(--rot-700);position:relative;white-space:nowrap}
.hero__vorspann{font-size:clamp(1.06rem,1rem + .35vw,1.22rem);color:var(--braun-700);max-width:34rem;margin-bottom:1.6rem}

.autorzeile{display:flex;align-items:center;gap:.9rem;margin-bottom:1.6rem}
.autorzeile img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:46% 24%;border:2px solid var(--weiss);box-shadow:var(--schatten-s)}
.autorzeile__text{font-size:.9rem;line-height:1.5;color:var(--text-leise)}
.autorzeile__text b{display:block;color:var(--braun-800);font-size:.98rem;font-weight:700}

.hero__bild{position:relative}
.hero__bild img{border-radius:var(--radius-gross);box-shadow:var(--schatten-l);width:100%;object-fit:cover;aspect-ratio:4/3.1}
.hero__plakette{
  position:absolute;left:-.5rem;bottom:-1.1rem;background:var(--weiss);border-radius:var(--radius);
  padding:.85rem 1.15rem;box-shadow:var(--schatten-m);max-width:16rem;border-left:4px solid var(--oliv-700);
}
.hero__plakette b{display:block;font-family:var(--serif);color:var(--braun-800);font-size:1.02rem}
.hero__plakette span{font-size:.84rem;color:var(--text-leise);line-height:1.45;display:block}

/* Vertrauensleiste (nur nachprüfbare Aussagen) */
.trustleiste{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;margin:0;padding:0;list-style:none}
.trustleiste li{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;color:var(--braun-700)}
.trustleiste svg{flex:none;width:18px;height:18px;color:var(--oliv-700)}


/* ---------- Abkürzungs-Box ---------- */
.abkuerzung{
  display:grid;gap:1.5rem;background:var(--weiss);border:1px solid var(--sand-200);
  border-radius:var(--radius-gross);padding:clamp(1.25rem,3vw,2rem);box-shadow:var(--schatten-m);
  position:relative;
}
@media (min-width:780px){.abkuerzung{grid-template-columns:minmax(0,1fr) 15rem;align-items:center}}
.abkuerzung__marke{
  position:absolute;top:-.8rem;left:clamp(1.25rem,3vw,2rem);background:var(--oliv-700);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:.3rem .8rem;border-radius:999px;
}
.abkuerzung h3{margin-top:.4rem}
.abkuerzung p{margin-bottom:1rem}
.abkuerzung__bild img{border-radius:var(--radius);box-shadow:var(--schatten-s)}

/* ---------- Inhaltsverzeichnis ---------- */
.ivz{background:var(--weiss);border:1px solid var(--sand-200);border-radius:var(--radius);padding:1.15rem 1.35rem;box-shadow:var(--schatten-s)}
.ivz>summary{font-family:var(--serif);font-weight:700;color:var(--braun-800);cursor:pointer;font-size:1.06rem;list-style:none}
.ivz>summary::-webkit-details-marker{display:none}
.ivz>summary::after{content:"▾";float:right;transition:transform .2s}
.ivz[open]>summary::after{transform:rotate(180deg)}
.ivz ol{margin:1rem 0 0;padding-left:1.3rem;counter-reset:none}
.ivz li{margin-bottom:.45rem}
.ivz a{color:var(--braun-700);text-decoration:none;border-bottom:1px solid var(--sand-300)}
.ivz a:hover{color:var(--rot-700);border-color:var(--rot-600)}

/* ---------- Karten ---------- */
.raster{display:grid;gap:1.1rem}
.raster--2{grid-template-columns:1fr}
@media (min-width:760px){.raster--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.raster--3{grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr))}
.karte{background:var(--weiss);border:1px solid var(--sand-200);border-radius:var(--radius);padding:1.35rem;box-shadow:var(--schatten-s)}
.karte h3,.karte h4{margin-bottom:.4em}
.karte p:last-child{margin-bottom:0}
.karte__icon{width:2.6rem;height:2.6rem;border-radius:10px;background:var(--oliv-100);color:var(--oliv-800);display:grid;place-items:center;margin-bottom:.9rem}
.karte__icon svg{width:1.4rem;height:1.4rem}

/* Symptom-Kacheln */
.symptome{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.symptom{display:flex;gap:.8rem;align-items:flex-start;background:var(--weiss);border:1px solid var(--sand-200);border-radius:var(--radius);padding:1rem 1.1rem;box-shadow:var(--schatten-s)}
.symptom svg{flex:none;width:22px;height:22px;color:var(--rot-600);margin-top:.15rem}
.symptom b{display:block;color:var(--braun-800);font-size:1rem;margin-bottom:.15rem}
.symptom span{font-size:.92rem;color:var(--text-leise);line-height:1.55}

/* ---------- Kriterien ---------- */
.kriterium{
  display:grid;gap:1.1rem;background:var(--weiss);border:1px solid var(--sand-200);
  border-radius:var(--radius-gross);padding:clamp(1.15rem,3vw,1.9rem);margin-bottom:1.25rem;box-shadow:var(--schatten-s);
}
@media (min-width:720px){.kriterium{grid-template-columns:3.4rem 1fr;gap:1.5rem}}
.kriterium__nr{
  width:3.4rem;height:3.4rem;border-radius:50%;background:var(--braun-800);color:#fff;
  font-family:var(--serif);font-size:1.5rem;font-weight:700;display:grid;place-items:center;flex:none;
}
.kriterium h3{margin-bottom:.35em}
.kriterium p:last-child{margin-bottom:0}

.merksatz{
  border-left:4px solid var(--oliv-700);background:var(--oliv-100);
  padding:.85rem 1.1rem;border-radius:0 10px 10px 0;margin:1.1rem 0 0;font-size:.97rem;
}
.merksatz b{color:var(--oliv-800)}
.merksatz p:last-child{margin-bottom:0}

.achtung{
  border-left:4px solid var(--warn-rand);background:var(--warn-bg);
  padding:.85rem 1.1rem;border-radius:0 10px 10px 0;margin:1.1rem 0 0;font-size:.97rem;color:var(--warn-text);
}
.achtung b{color:var(--warn-text)}
.achtung p:last-child{margin-bottom:0}

/* Deklarations-Vergleich */
.deklaration{display:grid;gap:1rem;margin-top:1.25rem}
@media (min-width:760px){.deklaration{grid-template-columns:1fr 1fr}}
.dekl{border-radius:var(--radius);padding:1.1rem 1.2rem;border:1px solid;font-size:.95rem}
.dekl--schlecht{background:#fdf1ef;border-color:#f0cdc7}
.dekl--gut{background:#f0f4e8;border-color:#cfdcb6}
.dekl__kopf{display:flex;align-items:center;gap:.5rem;font-weight:700;margin-bottom:.6rem;font-size:.92rem;text-transform:uppercase;letter-spacing:.07em}
.dekl--schlecht .dekl__kopf{color:var(--rot-700)}
.dekl--gut .dekl__kopf{color:var(--oliv-800)}
.dekl__zitat{font-family:var(--serif);font-size:1.02rem;line-height:1.55;color:var(--braun-800);background:rgba(255,255,255,.72);border-radius:8px;padding:.75rem .9rem;margin:0 0 .7rem}
.dekl p:last-child{margin-bottom:0}
.dekl ul{margin:0;padding-left:1.15rem}
.dekl li{margin-bottom:.3rem}

/* ---------- Vergleichstabelle ---------- */
.tabelle-huelle{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);border:1px solid var(--sand-200);background:var(--weiss);box-shadow:var(--schatten-s)}
table.vergleich{width:100%;border-collapse:collapse;min-width:44rem;font-size:.95rem}
table.vergleich th,table.vergleich td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--sand-200);vertical-align:top}
table.vergleich thead th{background:var(--sand-100);font-family:var(--sans);font-size:.86rem;text-transform:uppercase;letter-spacing:.06em;color:var(--braun-700);position:sticky;top:0}
table.vergleich thead th.hervor{background:var(--braun-800);color:#fff}
table.vergleich tbody th{font-weight:700;color:var(--braun-800);width:26%}
table.vergleich td.hervor{background:#fbf6f0;font-weight:600}
table.vergleich tr:last-child th,table.vergleich tr:last-child td{border-bottom:0}
.ja{color:var(--oliv-800);font-weight:700}
.nein{color:var(--rot-700);font-weight:700}
.tabelle-notiz{font-size:.84rem;color:var(--text-leise);margin:.7rem 0 0}

/* ---------- Empfehlung ---------- */
.empfehlung{display:grid;gap:clamp(1.5rem,4vw,2.75rem);align-items:center}
@media (min-width:880px){.empfehlung{grid-template-columns:.92fr 1.08fr}}
.empfehlung__bild{position:relative}
.empfehlung__bild img{border-radius:var(--radius-gross);box-shadow:var(--schatten-l)}
.siegel{
  position:absolute;top:-1rem;right:-.75rem;background:var(--rot-600);color:#fff;border-radius:50%;
  width:6.1rem;height:6.1rem;display:grid;place-items:center;text-align:center;line-height:1.15;
  font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:var(--schatten-m);padding:.4rem;transform:rotate(-8deg);
}
.siegel b{display:block;font-size:1.02rem;letter-spacing:.02em}

.pluspunkte{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.7rem}
.pluspunkte li{display:flex;gap:.7rem;align-items:flex-start;font-size:1rem}
.pluspunkte svg{flex:none;width:21px;height:21px;color:var(--oliv-700);margin-top:.22rem}
.abschnitt--dunkel .pluspunkte svg{color:#a9c47c}
.pluspunkte b{color:var(--braun-800)}
.abschnitt--dunkel .pluspunkte b{color:#fff}

.ehrlich{background:var(--sand-100);border:1px dashed var(--sand-300);border-radius:var(--radius);padding:1.15rem 1.3rem;margin:1.5rem 0}
.ehrlich h4{color:var(--braun-800);margin-bottom:.5em}
.ehrlich ul{margin:0;padding-left:1.2rem;font-size:.95rem;color:var(--text-leise)}
.ehrlich li{margin-bottom:.35rem}
.ehrlich li:last-child{margin-bottom:0}

/* Gutschein – liegt als helle Karte auf dem dunklen Empfehlungsabschnitt,
   damit er als etwas zum Mitnehmen lesbar ist und nicht als Zierleiste. */
.gutschein{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.85rem 1.25rem;margin-top:1.45rem;padding:.9rem 1.1rem .9rem 1.35rem;
  background:var(--sand-50);border-radius:12px;box-shadow:var(--schatten-m);
  position:relative;overflow:hidden;
}
.gutschein::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--rot-600)}
.gutschein__label{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-leise);margin-bottom:.12rem;
}
.gutschein__wert{
  display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:clamp(1.2rem,1.05rem + .5vw,1.4rem);font-weight:700;letter-spacing:.16em;
  color:var(--braun-800);line-height:1.15;
}
/* Die Karte ist hell, auch wenn der Abschnitt dunkel ist: die Farben des
   dunklen Abschnitts dürfen hier nicht durchschlagen (.abschnitt--dunkel strong
   ist spezifischer als .gutschein__wert und würde den Code weiß färben). */
.abschnitt--dunkel .gutschein__wert{color:var(--braun-800)}
.abschnitt--dunkel .gutschein__label{color:var(--text-leise)}

.gutschein__kopieren{
  display:inline-flex;align-items:center;gap:.45rem;flex:none;
  font:inherit;font-size:.9rem;font-weight:700;color:var(--rot-700);
  background:var(--weiss);border:1.5px solid var(--sand-300);border-radius:999px;
  padding:.5rem .95rem;cursor:pointer;
  transition:border-color .15s ease,color .15s ease;
}
.gutschein__kopieren:hover{border-color:var(--rot-600)}
.gutschein__kopieren svg{width:16px;height:16px;flex:none}
.gutschein__kopieren.fertig{color:var(--oliv-800);border-color:var(--oliv-700)}
.gutschein__notiz{margin:.7rem 0 0;font-size:.88rem;color:var(--text-leise)}
.abschnitt--dunkel .gutschein__notiz{color:#d8c3b5}

/* ---------- Rechner ---------- */
.rechner{background:var(--weiss);border:1px solid var(--sand-200);border-radius:var(--radius-gross);padding:clamp(1.25rem,3vw,1.9rem);box-shadow:var(--schatten-m)}
.rechner__reihe{display:grid;gap:1rem;margin-bottom:1.25rem}
@media (min-width:640px){.rechner__reihe{grid-template-columns:1fr 1fr}}
.rechner label{display:block;font-weight:700;font-size:.92rem;color:var(--braun-800);margin-bottom:.35rem}
.rechner input[type=range]{width:100%;accent-color:var(--rot-600)}
.rechner__wert{font-family:var(--serif);font-size:1.3rem;color:var(--braun-800)}
.rechner__ergebnis{display:grid;gap:1rem;background:var(--sand-100);border-radius:var(--radius);padding:1.15rem 1.25rem}
@media (min-width:560px){.rechner__ergebnis{grid-template-columns:1fr 1fr}}
.kennzahl b{display:block;font-family:var(--serif);font-size:clamp(1.65rem,1.2rem + 1.6vw,2.2rem);color:var(--rot-700);line-height:1.1}
.kennzahl span{font-size:.88rem;color:var(--text-leise)}

/* ---------- Zeitachse Umstellung ---------- */
.zeitachse{list-style:none;margin:0;padding:0;position:relative}
.zeitachse::before{content:"";position:absolute;left:1.05rem;top:.6rem;bottom:.6rem;width:2px;background:var(--sand-300)}
.zeitachse li{position:relative;padding:0 0 1.5rem 3.1rem}
.zeitachse li:last-child{padding-bottom:0}
.zeitachse__punkt{
  position:absolute;left:0;top:0;width:2.15rem;height:2.15rem;border-radius:50%;
  background:var(--weiss);border:2px solid var(--oliv-700);color:var(--oliv-800);
  display:grid;place-items:center;font-weight:700;font-size:.82rem;
}
.zeitachse b{display:block;color:var(--braun-800);font-family:var(--serif);font-size:1.12rem;margin-bottom:.2rem}
.zeitachse p{margin:0;font-size:.97rem;color:var(--text-leise)}

/* ---------- Akkordeon (Einwände / FAQ) ---------- */
.akkordeon{border:1px solid var(--sand-200);border-radius:var(--radius);background:var(--weiss);margin-bottom:.7rem;box-shadow:var(--schatten-s);overflow:hidden}
.akkordeon>summary{
  cursor:pointer;list-style:none;padding:1.05rem 3rem 1.05rem 1.25rem;position:relative;
  font-family:var(--serif);font-size:1.08rem;font-weight:700;color:var(--braun-800);
}
.akkordeon>summary::-webkit-details-marker{display:none}
.akkordeon>summary::after{
  content:"";position:absolute;right:1.25rem;top:50%;width:.62rem;height:.62rem;
  border-right:2.5px solid var(--braun-500);border-bottom:2.5px solid var(--braun-500);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.akkordeon[open]>summary::after{transform:translateY(-25%) rotate(-135deg)}
.akkordeon[open]>summary{background:var(--sand-100)}
.akkordeon__inhalt{padding:1.1rem 1.25rem 1.3rem;border-top:1px solid var(--sand-200)}
.akkordeon__inhalt>:last-child{margin-bottom:0}

/* ---------- Formular ---------- */
.formularkarte{background:var(--weiss);border:1px solid var(--sand-200);border-radius:var(--radius-gross);box-shadow:var(--schatten-l);padding:clamp(1.35rem,3.5vw,2.4rem)}
.feldreihe{display:grid;gap:1rem;margin-bottom:1rem}
@media (min-width:640px){.feldreihe--2{grid-template-columns:1fr 1fr}}
.feld label{display:block;font-weight:700;font-size:.92rem;color:var(--braun-800);margin-bottom:.35rem}
.feld .pflicht{color:var(--rot-600)}
.feld input[type=text],.feld input[type=email],.feld input[type=tel],.feld textarea,.feld select{
  width:100%;font:inherit;font-size:1rem;padding:.75rem .9rem;border:1.5px solid var(--sand-300);
  border-radius:10px;background:var(--sand-50);color:var(--text);
}
.feld textarea{min-height:6.5rem;resize:vertical}
.feld input:focus,.feld textarea:focus,.feld select:focus{border-color:var(--braun-400);background:#fff}
.feld__hilfe{font-size:.83rem;color:var(--text-leise);margin:.3rem 0 0}

.tierwahl{display:flex;gap:.7rem;flex-wrap:wrap}
.tierwahl input{position:absolute;opacity:0;width:0;height:0}
.tierwahl label{
  display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.15rem;border-radius:999px;
  border:1.5px solid var(--sand-300);background:var(--sand-50);cursor:pointer;font-weight:600;margin:0;font-size:.98rem;
}
.tierwahl input:checked + label{border-color:var(--rot-600);background:#fdf1ef;color:var(--rot-700)}
.tierwahl input:focus-visible + label{outline:3px solid var(--braun-400);outline-offset:2px}

.einwilligung{display:flex;gap:.65rem;align-items:flex-start;font-size:.88rem;color:var(--text-leise);line-height:1.55;margin:1.1rem 0}
.einwilligung input{margin-top:.28rem;width:1.05rem;height:1.05rem;accent-color:var(--rot-600);flex:none}
.honigtopf{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.formular-meldung{border-radius:10px;padding:.85rem 1rem;font-size:.94rem;margin-bottom:1rem;display:none}
.formular-meldung--fehler{display:block;background:#fdf1ef;border:1px solid #f0cdc7;color:var(--rot-700)}
.formular-meldung--ok{display:block;background:var(--oliv-100);border:1px solid #cfdcb6;color:var(--oliv-800)}

.leistungen{list-style:none;margin:0 0 1.75rem;padding:0;display:grid;gap:.65rem}
.leistungen li{display:flex;gap:.65rem;align-items:flex-start;font-size:.98rem}
.leistungen svg{flex:none;width:20px;height:20px;color:var(--oliv-700);margin-top:.2rem}

/* ---------- Abschluss-CTA ---------- */
.schluss{background:linear-gradient(160deg,var(--braun-800),var(--braun-900));color:#f3e7dd;border-radius:var(--radius-gross);padding:clamp(1.75rem,5vw,3.25rem);text-align:center}
.schluss h2{color:#fff}
.schluss p{color:#e3d0c4;max-width:36rem;margin-inline:auto}

/* ---------- Über mich ---------- */
.ueber{display:grid;gap:clamp(1.5rem,4vw,2.75rem);align-items:center}
@media (min-width:820px){.ueber{grid-template-columns:.8fr 1.2fr}}
.ueber__bild img{border-radius:var(--radius-gross);box-shadow:var(--schatten-l)}
.zitat{font-family:var(--serif);font-size:clamp(1.15rem,1rem + .7vw,1.45rem);line-height:1.5;color:var(--braun-800);border-left:4px solid var(--rot-600);padding-left:1.15rem;margin:0 0 1.35rem;font-style:italic}

/* ---------- Fußzeile ---------- */
.fusszeile{background:var(--braun-900);color:#c9b5a8;padding-block:2.75rem 6.5rem;font-size:.92rem}
@media (min-width:780px){.fusszeile{padding-bottom:2.75rem}}
.fusszeile__innen{display:grid;gap:1.75rem}
@media (min-width:780px){.fusszeile__innen{grid-template-columns:1.4fr 1fr 1fr}}
.fusszeile h4{color:#f3e7dd;margin-bottom:.7em;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase}
.fusszeile a{color:#e0cec2;text-decoration:none}
.fusszeile a:hover{color:#fff;text-decoration:underline}
.fusszeile ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.fusszeile__logo{height:46px;width:auto;margin-bottom:1rem;filter:brightness(0) invert(1);opacity:.92}
.fusszeile__klein{font-size:.82rem;line-height:1.6;color:#a08f84;border-top:1px solid rgba(255,255,255,.12);margin-top:2rem;padding-top:1.5rem}

/* ---------- Mobile Sticky-Leiste ---------- */
.sticky-leiste{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:.6rem;
  padding:.65rem .8rem calc(.65rem + env(safe-area-inset-bottom));
  background:rgba(253,250,246,.97);border-top:1px solid var(--sand-200);
  box-shadow:0 -4px 20px rgba(43,23,16,.1);backdrop-filter:blur(8px);
  transform:translateY(110%);transition:transform .25s ease;
}
.sticky-leiste.sichtbar{transform:translateY(0)}
.sticky-leiste .knopf{flex:1;padding:.8rem .6rem;font-size:.95rem}
@media (min-width:780px){.sticky-leiste{display:none}}

/* ---------- Lesefortschritt ---------- */
.fortschritt{position:fixed;top:0;left:0;height:3px;background:var(--rot-600);width:0;z-index:80;transition:width .1s linear}

/* ---------- Druck ---------- */
@media print{
  .kopfzeile,.sticky-leiste,.fortschritt,.knopf{display:none!important}
  body{background:#fff}
}

/* ---------- Prüfkarte (Ersatz für fehlendes Produktfoto) ----------
   Wird auf der Hundeseite anstelle des Produktbilds gezeigt, solange kein
   ANifit-Hundefutter-Foto vorliegt. Sobald eines da ist: durch <img> ersetzen. */
.pruefkarte{
  background:var(--weiss);border-radius:var(--radius-gross);box-shadow:var(--schatten-l);
  padding:clamp(1.4rem,3vw,2rem);border-top:6px solid var(--rot-600);
}
.pruefkarte__kopf{border-bottom:1px solid var(--sand-200);padding:0 5rem .9rem 0;margin-bottom:1.1rem}
.pruefkarte__kopf span{display:block;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rot-700);margin-bottom:.25rem}
.pruefkarte__kopf b{font-family:var(--serif);font-size:1.5rem;color:var(--braun-800);display:block;line-height:1.2}
.pruefkarte ol{list-style:none;margin:0;padding:0;counter-reset:pk}
.pruefkarte li{
  display:grid;grid-template-columns:1.6rem 1fr auto;align-items:center;gap:.75rem;
  padding:.7rem 0;border-bottom:1px dashed var(--sand-200);font-size:.95rem;color:var(--braun-700);
}
.pruefkarte li:last-child{border-bottom:0}
.pruefkarte li::before{counter-increment:pk;content:counter(pk);font-family:var(--serif);font-weight:700;color:var(--sand-300);font-size:1.1rem;text-align:center}
.pruefkarte__haken{display:inline-grid;place-items:center;width:1.55rem;height:1.55rem;border-radius:50%;background:var(--oliv-100);color:var(--oliv-800)}
.pruefkarte__haken svg{width:.95rem;height:.95rem}
.pruefkarte__fuss{margin:1.2rem 0 0;padding-top:1rem;border-top:1px solid var(--sand-200);font-size:.88rem;color:var(--text-leise);text-align:center}
.pruefkarte__fuss b{display:block;font-family:var(--serif);font-size:1.15rem;color:var(--oliv-800);margin-bottom:.1rem}

/* ---------- Aufhänger im Hero ----------
   „Dr. Hesse klärt auf" ist die wiedererkennbare Marke der Landingpages.
   Der Strich darunter ist gezeichnet, nicht text-decoration – er baut sich
   beim Laden einmal auf (wie auf der alten Seite, aber ohne Endlosschleife). */
.aufhaenger{
  display:inline-block;position:relative;
  font-family:var(--serif);font-weight:700;
  font-size:clamp(1.45rem,1.08rem + 1.55vw,2.1rem);
  line-height:1.15;color:var(--braun-800);
  margin:0 0 1.2rem;padding-bottom:.4em;
}
.aufhaenger__strich{
  position:absolute;left:0;bottom:0;width:100%;height:.36em;
  color:var(--rot-600);overflow:visible;pointer-events:none;
}
.aufhaenger__strich path{
  fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
@media (prefers-reduced-motion:no-preference){
  .aufhaenger__strich path{
    stroke-dasharray:1;stroke-dashoffset:1;   /* pathLength="1" macht das längenunabhängig */
    animation:strich-ziehen 1.1s .4s cubic-bezier(.45,0,.25,1) forwards;
  }
}
@keyframes strich-ziehen{to{stroke-dashoffset:0}}

/* Lesezeit und Stand – sitzen jetzt im Inhaltsverzeichnis, nicht mehr im Hero */
.ivz__meta{
  margin:1.05rem 0 0;padding-top:.85rem;border-top:1px solid var(--sand-200);
  font-size:.86rem;color:var(--text-leise);
}


/* ---------- Rechtsseiten ----------
   .uebernommen markiert Angaben, die aus dem bestehenden Shop-Impressum
   stammen und von Frau Hesse noch bestätigt werden müssen. Vor dem Livegang
   werden die Auszeichnungen entfernt (siehe README). */
.uebernommen{
  background:#fcf3c8;box-shadow:0 0 0 2px #fcf3c8;border-radius:2px;
}
.lese h2{margin-top:2.25rem}
.lese h2:first-of-type{margin-top:1.5rem}
.lese ul{margin:0 0 1.15em;padding-left:1.3rem}
.lese ul li{margin-bottom:.4rem}
.lese code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;
  background:var(--sand-100);border:1px solid var(--sand-200);border-radius:5px;padding:.1em .35em;
}

/* ---------- Tippziele auf Touch-Geräten ----------
   Links in Listen sind textzeilenhoch (17–21 px) und damit auf dem Handy
   schwer zu treffen. Auf Geräten mit grobem Zeigegerät bekommen sie eine
   Trefferfläche von rund 44 px; der Abstand zwischen den Einträgen wird
   entsprechend verkleinert, damit die Blöcke nicht auseinanderfallen. */
@media (pointer:coarse){
  .fusszeile ul{gap:.1rem}
  .fusszeile ul a{display:inline-block;padding-block:.8rem}

  .ivz li{margin-bottom:.05rem}
  .ivz li a{display:inline-block;padding-block:.6rem}
  .ivz>summary{padding-block:.45rem}

  /* Schieberegler: 16 px hoch ist mit dem Daumen kaum zu greifen */
  .rechner input[type=range]{height:2.75rem;touch-action:pan-y}
}

/* Beschriftungen nicht unter 12 px – darunter wird es auf dem Handy mühsam */
.abkuerzung__marke{font-size:.75rem}
.gutschein__label{font-size:.75rem}

/* Fettungen im Fußbereich: strong erbt sonst die dunkle Markenfarbe und wird
   auf dem dunklen Grund unlesbar (gemessener Kontrast 1,25:1). */
.fusszeile strong,.fusszeile b{color:#f3e7dd}

/* Knöpfe behalten ihre eigenen Farben, auch im dunklen Abschnitt.
   Sonst gewinnt `.abschnitt--dunkel a` (0,1,1) gegen `.knopf--haupt` (0,1,0)
   und färbt die weiße Knopfschrift apricot – gemessener Kontrast 3,54:1. */
.abschnitt--dunkel .knopf--haupt{color:#fff}
.abschnitt--dunkel .knopf--zweit,
.abschnitt--dunkel .knopf--hell{color:var(--braun-800)}

/* ---------- Leseskala: was die Klammer in der Zutatenliste verrät ---------- */
.leseskala{
  background:var(--weiss);border:1px solid var(--sand-200);border-radius:var(--radius-gross);
  padding:clamp(1.25rem,3vw,2rem);box-shadow:var(--schatten-s);margin-top:1.5rem;
}
.leseskala h3{margin-bottom:.4em}
.skala{list-style:none;margin:1.35rem 0 0;padding:0;display:grid;gap:.7rem}
.skala li{
  display:grid;gap:.35rem .95rem;padding:.85rem 1.05rem;border-radius:0 10px 10px 0;
  border-left:5px solid var(--sand-300);background:var(--sand-50);
}
@media (min-width:760px){
  .skala li{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:.95rem}
}
.skala code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem;
  line-height:1.5;color:var(--braun-800);
}
.skala b{display:block;font-size:.95rem;color:var(--braun-800)}
.skala span{font-size:.92rem;color:var(--text-leise);line-height:1.5}
.skala .s0{border-left-color:var(--rot-600)}
.skala .s1{border-left-color:var(--braun-400)}
.skala .s2{border-left-color:#8d8f4d}
.skala .s3{border-left-color:var(--oliv-700);background:var(--oliv-100)}
.skala .s3 span{color:var(--oliv-800)}

/* ---------- Kohlenhydrat-Rechner ---------- */
.khrechner{
  background:var(--weiss);border:1px solid var(--sand-200);border-radius:var(--radius);
  padding:1.15rem 1.25rem;margin-top:1.25rem;box-shadow:var(--schatten-s);
}
.khrechner h4{margin-bottom:.3em}
.khrechner__felder{display:grid;gap:.6rem;margin:1rem 0}
@media (min-width:560px){.khrechner__felder{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:860px){.khrechner__felder{grid-template-columns:repeat(3,minmax(0,1fr))}}
.khfeld{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--braun-700)}
.khfeld span:first-child{flex:1;min-width:0}
.khfeld input{
  width:4.6rem;flex:none;font:inherit;font-size:.95rem;text-align:right;
  padding:.4rem .5rem;border:1.5px solid var(--sand-300);border-radius:8px;background:var(--sand-50);
  font-variant-numeric:tabular-nums;
}
.khfeld input:focus{border-color:var(--braun-400);background:#fff}
.khrechner__ergebnis{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;
  background:var(--sand-100);border-radius:10px;padding:.85rem 1rem;margin:0 0 .85rem;
}
.khrechner__ergebnis b{
  font-family:var(--serif);font-size:clamp(1.5rem,1.2rem + 1vw,2rem);color:var(--rot-700);
  line-height:1;font-variant-numeric:tabular-nums;
}
.khrechner__ergebnis span{font-size:.95rem;color:var(--text-leise)}
.khrechner__knoepfe{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.85rem}
.khrechner__knoepfe button{
  font:inherit;font-size:.86rem;font-weight:600;color:var(--braun-700);background:var(--sand-50);
  border:1.5px solid var(--sand-300);border-radius:999px;padding:.4rem .85rem;cursor:pointer;
}
.khrechner__knoepfe button:hover{border-color:var(--braun-400);color:var(--braun-800)}

/* Tippziele der zuletzt ergänzten Bauteile.
   WICHTIG: Dieser Block muss am Dateiende stehen. Media-Queries erhöhen die
   Spezifität nicht – steht die Regel vor der Grundregel, gewinnt die Grundregel. */
@media (pointer:coarse){
  .khrechner__knoepfe button{padding-block:.62rem}
}