/* ============================================================
   JollyDog / JollyCat, Entwurf 19.08.2026
   Einzige Stilvorlage. Ersetzt nach der Abnahme die Theme-CSS.

   Farbwelt am Logo gemessen, nicht geschaetzt:
     Beere #813f63 ist rund die Haelfte der Logoflaeche, also die
     eigentliche Markenfarbe. Pink #e36ba1 sind nur rund 17 Prozent.
     Deshalb: Beere traegt die Flaeche, Pink gehoert allein dem Kauf.

   Kontrast gerechnet:
     Pink + weisser Text  = 3,05:1  zu wenig, wird nicht benutzt
     Pink + dunkler Text  = 5,92:1  so steht der Kaufknopf da
     Beere + weisser Text = 7,43:1
     Gruen + weisser Text = 5,99:1
   ============================================================ */

/* ---------- Schriften, lokal, keine Anfrage an Google ---------- */
@font-face{
  font-family:"Outfit";
  src:url("../fonts/outfit.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ---------- Farb- und Massvorgaben ---------- */
:root{
  --beere:#813f63;
  --beere-tief:#5e2c48;
  --beere-blass:#f3eaef;
  --pink:#e36ba1;
  --pink-blass:#fceef4;
  --gruen:#2f6f4f;
  --gruen-blass:#e9f2ed;
  --creme:#faf6f3;
  --weiss:#ffffff;
  --text:#1c1418;
  --grau:#6d626a;
  --grau-hell:#9b929a;
  --linie:#e7dfe3;

  --breite:1240px;
  --luft:clamp(48px, 6vw, 88px);
  --radius:12px;
  --radius-klein:8px;

  --schrift-kopf:"Outfit", system-ui, sans-serif;
  --schrift-text:"Inter", system-ui, sans-serif;
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--schrift-text);
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  background:var(--weiss);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--schrift-kopf);
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(32px,4.4vw,52px);font-weight:800}
h2{font-size:clamp(26px,3vw,38px);font-weight:800}
h3{font-size:clamp(18px,1.6vw,22px);font-weight:700}

p{margin:0 0 1em}
img{max-width:100%;height:auto;display:block}

a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--pink);
  outline-offset:2px;
}

.mitte{
  width:100%;
  max-width:var(--breite);
  margin-inline:auto;
  padding-inline:20px;
}

.sprungmarke{
  position:absolute;left:-9999px;
  background:var(--beere);color:#fff;padding:12px 18px;z-index:200;
}
.sprungmarke:focus{left:12px;top:12px}

.abschnitt{padding-block:var(--luft)}
.abschnitt-creme{background:var(--creme)}

.kopfzeile{
  display:flex;align-items:end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:28px;
}
.kopfzeile h2{margin:0}
.kopfzeile a{
  font-weight:600;font-size:15px;color:var(--beere);
  border-bottom:2px solid var(--pink);padding-bottom:2px;
}

/* ---------- Knoepfe ----------
   Genau eine Kauffarbe. Pink traegt dunklen Text, nicht weissen. */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--schrift-kopf);font-weight:700;font-size:17px;
  padding:15px 30px;border:2px solid transparent;border-radius:var(--radius-klein);
  cursor:pointer;text-align:center;line-height:1.2;
  transition:transform .12s ease, filter .12s ease;
}
.knopf:hover{filter:brightness(.96)}
.knopf:active{transform:translateY(1px)}

/* Pink gehoert allein dem Warenkorb. Auf der Startseite kommt es
   deshalb genau einmal vor, am Probier-Set. Alles andere ist Beere,
   Weiss oder Umriss. Ohne diese Regel verliert der Kaufknopf genau
   die Wirkung, die wir ihm geben wollen. */
.knopf-kauf{background:var(--pink);color:var(--text)}   /* 5,92:1 */
.knopf-marke{background:var(--beere);color:#fff}         /* 7,43:1 */
.knopf-hell{background:#fff;color:var(--text)}           /* auf dunklem Grund */
.knopf-rand{background:transparent;color:var(--text);border-color:var(--text)}
.knopf-rand-hell{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.knopf-voll{width:100%}

/* ---------- Servicezeile ---------- */
.servicezeile{
  background:var(--beere);color:#fff;
  font-size:13.5px;letter-spacing:.01em;
}
.servicezeile .mitte{
  display:flex;gap:28px;justify-content:center;flex-wrap:wrap;
  padding-block:9px;
}
.servicezeile span{display:inline-flex;align-items:center;gap:7px}
.servicezeile svg{width:15px;height:15px;flex:none}

/* ---------- Kopf ---------- */
.kopf{
  border-bottom:1px solid var(--linie);
  background:var(--weiss);position:sticky;top:0;z-index:60;
}
.kopf-inner{
  display:flex;align-items:center;gap:24px;
  padding-block:14px;
}

/* Wortmarke. Im Hundemodus liegt das echte Logo als Bild darueber,
   im Katzenmodus greift der Textsatz, solange die Datei fehlt. */
.marke{display:flex;align-items:center;gap:12px;flex:none}
.marke-bild{height:52px;width:auto}
.marke-text{
  font-family:var(--schrift-kopf);font-weight:800;
  font-size:27px;letter-spacing:.01em;line-height:1;
  display:none;
}
.marke-text .a{color:var(--beere)}
.marke-text .b{color:var(--pink)}
.marke-claim{
  display:block;font-size:9.5px;font-weight:600;letter-spacing:.16em;
  color:var(--pink);margin-top:5px;
}
/* Katzenmodus: Bild weg, Textsatz an */
.m-katze .marke-bild{display:none}
.m-katze .marke-text{display:block}

/* Hund/Katze Umschalter. Farbe kann die beiden nicht trennen,
   weil beide Untermarken farbgleich sind. Also Struktur. */
.tierwahl{
  display:flex;gap:0;border:1.5px solid var(--linie);
  border-radius:99px;padding:3px;background:var(--creme);flex:none;
}
.tierwahl button{
  font-family:var(--schrift-kopf);font-weight:700;font-size:14.5px;
  padding:8px 20px;border:0;border-radius:99px;background:transparent;
  color:var(--grau);cursor:pointer;display:inline-flex;align-items:center;gap:7px;
}
.tierwahl button svg{width:17px;height:17px}
.tierwahl button[aria-pressed="true"]{background:var(--beere);color:#fff}

.suche{flex:1;position:relative;min-width:160px}
.suche input{
  width:100%;font-family:inherit;font-size:15px;
  padding:12px 16px 12px 42px;
  border:1.5px solid var(--linie);border-radius:var(--radius-klein);
  background:var(--creme);color:var(--text);
}
.suche input::placeholder{color:var(--grau-hell)}
.suche svg{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--grau);pointer-events:none;
}

/* ==========================================================================
   Suchvorschlaege
   ==========================================================================

 * NACHGETRAGEN 31.08.2026, Michaels Meldung "die Suchfunktion funktioniert
 * auch noch nicht".
 *
 * Sie funktionierte durchaus: Die Schnittstelle antwortete, die Treffer
 * stimmten, die Ergebnisseite auch. Es fehlte schlicht JEDE Gestaltung.
 * suche.js baut ein Dutzend Klassen, und fuer keine einzige gab es eine
 * Regel. Der Vorschlagskasten stand deshalb als nackter schwarzer Text quer
 * ueber der Seite. Wer das sieht, haelt die Suche fuer kaputt, und das zu
 * Recht.
 *
 * Lokal sah es genauso aus. Nicht der Umzug, ein unfertiger Baustein.
 */

/* Die Huelle ist das FORMULAR, nicht das Eingabefeld. Steht so auch im Kopf
   von suche.js: Direkt neben dem Feld wuerde der Kasten im Flex-Container
   des Seitenkopfs selbst zum Flex-Kind und sich als schmaler Streifen durchs
   Layout ziehen. */
.suchvorschlag{position:relative}

.suchvorschlag-liste{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;
  background:var(--weiss);
  border:1px solid var(--linie);border-radius:var(--radius);
  box-shadow:0 12px 32px rgba(28,20,24,.14);
  padding:6px;
  max-height:min(70vh,460px);overflow-y:auto;
  overscroll-behavior:contain;
}
.suchvorschlag-liste[hidden]{display:none}

.suchvorschlag-titel{
  margin:8px 10px 4px;font-size:12px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--grau-hell);
}

.suchvorschlag-punkt{
  display:flex;align-items:center;gap:12px;
  padding:8px 10px;border-radius:var(--radius-klein);
  color:var(--text);text-decoration:none;
}
/* Maus und Tastatur sollen gleich aussehen. Wer mit den Pfeiltasten
   wandert, muss dasselbe sehen wie beim Ueberfahren mit der Maus. */
.suchvorschlag-punkt:hover,
.suchvorschlag-punkt.ist-gewaehlt{background:var(--creme)}
.suchvorschlag-punkt:focus-visible{outline:2px solid var(--beere);outline-offset:-2px}

/* object-fit CONTAIN, nicht cover.
   Die Packshots sind weisse Tueten auf weissem Grund und hochkant. Ein
   quadratischer Ausschnitt aus der Mitte zeigt deshalb nichts als Weiss,
   die Vorschlagsliste sah aus, als fehlten die Bilder. Beim ersten Versuch
   am 31.08. genau so passiert. Mit contain ist die ganze Tuete zu sehen,
   klein, aber erkennbar. */
.suchvorschlag-punkt img,
.suchvorschlag-leerbild{
  width:44px;height:44px;flex:none;
  border-radius:var(--radius-klein);
  object-fit:contain;background:var(--creme);
}

.suchvorschlag-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.suchvorschlag-name{
  font-size:14.5px;line-height:1.3;
  /* Lange Sortennamen duerfen den Kasten nicht sprengen. */
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.suchvorschlag-groessen{font-size:12.5px;color:var(--grau-hell)}
.suchvorschlag-preis{
  margin-left:auto;flex:none;
  font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;
}

/* Warengruppen: keine Bildspalte, dafuer die Trefferzahl rechts. */
.suchvorschlag-gruppe .suchvorschlag-name{flex:1}
.suchvorschlag-zahl{
  margin-left:auto;flex:none;
  font-size:12.5px;color:var(--grau-hell);
}

/* Das Skript setzt <mark> um den getippten Teil. Der Vorgabestil des
   Browsers ist knallgelb, das passt hier nicht. */
.suchvorschlag-liste mark{
  background:var(--beere-blass);color:inherit;
  padding:0 1px;border-radius:3px;font-weight:600;
}

.suchvorschlag-leer{
  margin:0;padding:14px 12px;text-align:center;
  font-size:14px;color:var(--grau);
}

.suchvorschlag-alle{
  display:block;margin-top:4px;padding:11px 10px;
  border-top:1px solid var(--linie);
  font-size:14px;font-weight:600;color:var(--beere);
  text-align:center;text-decoration:none;
}
.suchvorschlag-alle:hover{background:var(--beere-blass)}

/* Auf schmalen Schirmen darf der Kasten die volle Breite nehmen. */
@media (max-width:600px){
  .suchvorschlag-liste{max-height:min(60vh,380px)}
  .suchvorschlag-punkt img,
  .suchvorschlag-leerbild{width:38px;height:38px}
}

.kopf-werkzeuge{display:flex;align-items:center;gap:6px;flex:none}
.kopf-werkzeuge a{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:var(--radius-klein);
  font-size:14.5px;font-weight:500;
}
.kopf-werkzeuge a:hover{background:var(--creme)}
.kopf-werkzeuge svg{width:21px;height:21px}
.korbzahl{
  background:var(--pink);color:var(--text);
  font-family:var(--schrift-kopf);font-weight:700;font-size:12px;
  min-width:20px;height:20px;border-radius:99px;
  display:inline-grid;place-items:center;padding-inline:5px;
}

/* ---------- Navigation ---------- */
.menue{border-top:1px solid var(--linie)}
.menue .mitte{display:flex;gap:4px;flex-wrap:wrap}
.menue a{
  font-family:var(--schrift-kopf);font-weight:600;font-size:15.5px;
  padding:13px 16px;color:var(--text);border-bottom:3px solid transparent;
}
.menue a:hover{border-bottom-color:var(--pink)}
.menue a[aria-current]{border-bottom-color:var(--beere)}
.menue .menue-signal{color:var(--gruen)}

/* ---------- Hero, ein Motiv, ein Knopf ---------- */
.hero{background:var(--creme);overflow:hidden}
.hero .mitte{
  display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;
  padding-block:var(--luft);
}
.hero-text{max-width:520px}
.hero-marke{
  font-family:var(--schrift-kopf);font-weight:700;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--beere);
  margin-bottom:14px;display:block;
}
.hero h1{margin-bottom:18px}
.hero p{font-size:18px;color:var(--grau);margin-bottom:26px;max-width:44ch}
.hero-knoepfe{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Bildplatzhalter ----------
   Ehrlich beschriftet, damit im Gespraech niemand ueber Fotos redet,
   die noch gar nicht da sind. */
.bildph{
  display:grid;place-items:center;
  background:
    repeating-linear-gradient(45deg,
      var(--beere-blass) 0 12px, #ede0e7 12px 24px);
  color:var(--beere);
  font-family:var(--schrift-kopf);font-weight:700;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;
  aspect-ratio:1/1;width:100%;border-radius:var(--radius);
  text-decoration:none;
}
.bildph-quer{aspect-ratio:4/3}
.bildph-hoch{aspect-ratio:3/4}

/* ---------- Futter-Finder, die eine dunkle Bahn ----------
   Das ist der Hebel. Kein Wettbewerber beantwortet die Frage
   "welcher Sack passt zu meinem Tier" auf der Startseite. */
.finder{background:var(--beere);color:#fff}
.finder .mitte{padding-block:var(--luft)}
.finder h2{color:#fff;margin-bottom:8px}
.finder-vor{
  font-family:var(--schrift-kopf);font-weight:700;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--pink);
  margin-bottom:12px;display:block;
}
.finder-ein{color:rgba(255,255,255,.82);max-width:52ch;margin-bottom:32px}
.finder-reihen{display:grid;gap:22px;margin-bottom:28px}
.finder-frage>span{
  display:block;font-family:var(--schrift-kopf);font-weight:700;
  font-size:15px;margin-bottom:10px;
}
.finder-wahl{display:flex;gap:9px;flex-wrap:wrap}
.finder-wahl button{
  font-family:var(--schrift-kopf);font-weight:600;font-size:15px;
  padding:11px 19px;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.09);color:#fff;
  border:1.5px solid rgba(255,255,255,.28);
}
.finder-wahl button:hover{background:rgba(255,255,255,.17)}
.finder-wahl button[aria-pressed="true"]{
  background:var(--pink);color:var(--text);border-color:var(--pink);
}
.finder-fuss{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.2);padding-top:26px;
}
.finder-treffer{font-family:var(--schrift-kopf);font-weight:700;font-size:19px}
.finder-treffer em{color:var(--pink);font-style:normal}

/* ---------- Probier-Set, hier arbeitet das Gruen ---------- */
.probier{background:var(--gruen-blass)}
.probier .mitte{
  display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center;
  padding-block:var(--luft);
}
.marke-gruen{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--gruen);color:#fff;
  font-family:var(--schrift-kopf);font-weight:700;font-size:12.5px;
  letter-spacing:.09em;text-transform:uppercase;
  padding:6px 13px;border-radius:99px;margin-bottom:16px;
}
.probier h2{margin-bottom:14px}
.probier ul{list-style:none;padding:0;margin:0 0 26px}
.probier li{
  display:flex;gap:11px;align-items:flex-start;
  padding:7px 0;font-size:16.5px;
}
.probier li svg{width:19px;height:19px;color:var(--gruen);flex:none;margin-top:4px}
.probier-preis{
  display:flex;align-items:baseline;gap:12px;margin-bottom:22px;
}
.probier-preis b{font-family:var(--schrift-kopf);font-size:38px;font-weight:800}
.probier-preis s{color:var(--grau);font-size:19px}

/* ---------- Kacheln ---------- */
.raster{display:grid;gap:24px}
.raster-4{grid-template-columns:repeat(4,1fr)}
.raster-3{grid-template-columns:repeat(3,1fr)}
.raster-2{grid-template-columns:repeat(2,1fr)}

.kategoriekachel{position:relative;display:block;border-radius:var(--radius);overflow:hidden}
.kategoriekachel .bildph{aspect-ratio:3/4;border-radius:0}
.kategoriekachel-text{
  position:absolute;inset:auto 0 0 0;
  background:linear-gradient(transparent, rgba(30,16,25,.86));
  color:#fff;padding:22px 20px 20px;
}
.kategoriekachel-text strong{
  font-family:var(--schrift-kopf);font-weight:700;font-size:20px;display:block;
}
.kategoriekachel-text span{font-size:14px;color:rgba(255,255,255,.8)}

/* ---------- Produktkachel ----------
   Kein Knopf auf der Kachel. Die ganze Kachel ist klickbar, damit
   Pink auf der Startseite genau einmal vorkommt. */
.produktkachel{
  display:flex;flex-direction:column;
  border:1px solid var(--linie);border-radius:var(--radius);
  overflow:hidden;background:var(--weiss);
  transition:box-shadow .15s ease, border-color .15s ease;
}
.produktkachel:hover{
  border-color:var(--beere);
  box-shadow:0 8px 26px rgba(129,63,99,.13);
}
.produktkachel .bildph{border-radius:0}
.produktkachel-koerper{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1}
.produktkachel-art{
  font-size:12.5px;color:var(--grau);text-transform:uppercase;
  letter-spacing:.07em;font-weight:600;margin-bottom:5px;
}
.produktkachel h3{font-size:17.5px;margin-bottom:8px}
.produktkachel-preis{
  font-family:var(--schrift-kopf);font-weight:800;font-size:21px;margin-top:auto;
}
.produktkachel-grund{font-size:12.5px;color:var(--grau);margin-top:2px}

/* Saeckegroessen direkt auf der Kachel. Genau die Angabe, die heute
   im Titel fehlt und das 2kg / 4x2kg Durcheinander ausloest. */
.saeckereihe{display:flex;gap:5px;flex-wrap:wrap;margin:11px 0 13px}
.saeckereihe span{
  font-family:var(--schrift-kopf);font-weight:600;font-size:12.5px;
  padding:3px 9px;border:1.5px solid var(--linie);border-radius:99px;
  color:var(--grau);
}
.saeckereihe span.da{border-color:var(--gruen);color:var(--gruen)}
.saeckereihe span.weg{opacity:.42;text-decoration:line-through}

/* Sterne. Acht Bewertungen liegen im Shop und sind heute unsichtbar. */
.sterne{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--grau)}
.sterne-bild{display:inline-flex;gap:1.5px;color:var(--pink)}
.sterne svg{width:15px;height:15px}

.stoerer{
  position:absolute;top:12px;left:12px;
  font-family:var(--schrift-kopf);font-weight:700;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:99px;
  background:var(--gruen);color:#fff;
}
.kachel-huelle{position:relative}

/* ---------- Vertrauensband ---------- */
.vertrauen{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
/* FESTE VIER SPALTEN RAUS (24.08.2026).
 *
 * Hier stand grid-template-columns:repeat(4,1fr). Gezeigt werden aber nur
 * die BELEGTEN Zusagen, und das sind seit dem 22.08. genau zwei. Die
 * standen dadurch in Spalte 1 und 2, Spalte 3 und 4 blieben leer, und der
 * Balken sah aus, als waere er links angeschlagen.
 *
 * Flex statt Grid: Die Punkte zentrieren sich selbst, egal ob es einer,
 * zwei oder vier sind. Sobald Dascha die offenen Zusagen bestaetigt,
 * ordnet sich der Balken von allein wieder als Reihe. */
.vertrauen .mitte{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:28px 56px;padding-block:52px;
}
.vertrauen-punkt{flex:0 1 300px}
/* Steht nur EIN Punkt im Band, ist die 300er Breite eine Bremse: Der Satz
   bricht mitten drin um, obwohl links und rechts alles frei ist. Aufgefallen
   am 24.08.2026, als der Versandpunkt aus dem Band ging und "Ab Erhalt der
   Ware, ohne Angabe von" / "Gruenden" uebrig blieb. Bei zwei und mehr
   Punkten greift die Regel nicht, dort ist die feste Breite richtig, denn
   sie haelt die Spalten gleich breit. */
.vertrauen-punkt:only-child{flex:0 1 auto}
.vertrauen-punkt{display:flex;gap:14px;align-items:flex-start}
.vertrauen-punkt svg{width:26px;height:26px;color:var(--gruen);flex:none}
.vertrauen-punkt strong{
  font-family:var(--schrift-kopf);font-weight:700;font-size:16px;display:block;margin-bottom:2px;
}
.vertrauen-punkt span{font-size:14px;color:var(--grau);line-height:1.5}

/* ---------- Gruenderin ---------- */
.gruenderin{background:var(--creme)}
.gruenderin .mitte{
  display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:center;
  padding-block:var(--luft);
}
.zitat{
  font-family:var(--schrift-kopf);font-weight:600;
  font-size:clamp(21px,2.3vw,29px);line-height:1.35;margin-bottom:20px;
}
.gruenderin-name{font-size:15px;color:var(--grau)}
.gruenderin-name strong{color:var(--text)}

/* Das echte Portraet, seit 27.08.2026. Es steht an derselben Stelle wie
   vorher der Platzhalter und muss sich deshalb genauso verhalten: gleiches
   Seitenverhaeltnis 3:4, gleiche Rundung. Sonst springt das Raster, sobald
   das Bild da ist oder fehlt.
   `object-fit:cover` schneidet mittig zu, statt das Foto zu verzerren. */
.gruenderin-bild{
  display:block;width:100%;height:auto;
  aspect-ratio:3/4;object-fit:cover;object-position:center 25%;
  border-radius:var(--radius);
}

/* ---------- Bewertungen ---------- */
.bewertung{
  border:1px solid var(--linie);border-radius:var(--radius);
  padding:22px;background:var(--weiss);
}
.bewertung p{font-size:15.5px;margin-bottom:14px}
.bewertung-fuss{font-size:13.5px;color:var(--grau)}
.bewertung .sterne{margin-bottom:12px}

/* ---------- SEO-Text, begrenzte Breite ---------- */
.textblock{max-width:68ch;margin-inline:auto}
.textblock h2{margin-bottom:16px}
.textblock p{color:var(--grau)}

/* ---------- Newsletter ----------
   BREITE STATT HOEHE (Michael, 31.08.2026: "ein bisschen Platz sparen,
   Content breite erweitern").

   Gemessen im Browser: Der Abschnitt war 501px hoch, obwohl der Text in
   einer nur 464px schmalen Spalte stand, waehrend der Abschnitt selbst
   1240px breit ist. Rechts und links lag Leere, und der Text lief dafuer
   ueber drei Zeilen, der Rechtstext sogar ueber vier.

   Die Zeilenlaengen sind trotzdem gedeckelt, nur grosszuegiger. Ueber die
   ganzen 1240px zu laufen waere das andere Extrem: Wer am Zeilenende ist,
   findet den Anfang der naechsten Zeile nicht mehr. 66ch liegt im
   lesbaren Bereich, der Rechtstext darf etwas weiter, er wird ohnehin
   selten gelesen.

   Wirkung gemessen: 501px -> 405px, rund ein Fuenftel weniger. Text und
   Rechtstext brauchen je zwei Zeilen statt drei und vier. */
.newsletter{background:var(--beere-tief);color:#fff}
.newsletter .mitte{padding-block:40px;text-align:center}
.newsletter h2{color:#fff;margin-bottom:10px}
.newsletter p{color:rgba(255,255,255,.78);max-width:66ch;margin-inline:auto;margin-bottom:24px}
.newsletter form{display:flex;gap:10px;max-width:470px;margin-inline:auto;flex-wrap:wrap}
.newsletter input{
  flex:1;min-width:200px;font-family:inherit;font-size:15.5px;
  padding:14px 16px;border:0;border-radius:var(--radius-klein);
}

/* Lockfeld gegen Formularroboter. BEWUSST NICHT display:none: Manche Bots
   pruefen darauf und lassen solche Felder dann aus. Aus dem Bild schieben
   wirkt besser. aria-hidden steht am Element, damit Vorleseprogramme es
   ebenfalls uebergehen. */
.newsletter .jd-lockfeld{
  position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
}
/* Beschriftung, die nur Vorleseprogramme brauchen. */
.newsletter .jd-nurlesen{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}
.newsletter-recht{
  font-size:13px;line-height:1.6;color:rgba(255,255,255,.62);
  max-width:78ch;margin:16px auto 0;
}
.newsletter-recht a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.newsletter-meldung{
  max-width:52ch;margin:0 auto 20px;padding:12px 16px;
  border-radius:var(--radius-klein);font-size:14.5px;
}
.newsletter-meldung-gut{background:rgba(255,255,255,.16);color:#fff}
.newsletter-meldung-schlecht{background:rgba(0,0,0,.28);color:#fff}

/* ---------- Fuss ---------- */
.fuss{background:var(--text);color:rgba(255,255,255,.72);font-size:14.5px}
.fuss .mitte{padding-block:52px}
.fuss-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.fuss h4{
  color:#fff;font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;margin-bottom:16px;
}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin-bottom:9px}
.fuss a:hover{color:#fff;text-decoration:underline}

/* Kontaktzeile im Fuss. Die Mailadresse muss als Link erkennbar sein, sonst
   liest man sie als Fliesstext und tippt sie ab. Im Fuss ist alles
   gedaempftes Weiss, ein Link braucht hier also Helligkeit statt Farbe:
   Beere waere auf dem dunklen Grund kaum zu sehen. */
.fuss-kontakt{margin-top:14px}
.fuss-kontakt a{
  color:#fff;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.45);
}
.fuss-kontakt a:hover{text-decoration-color:#fff}

/* Sozialer Kanal im Fuss. Zeichen und Beschriftung als eine Flaeche zum
   Antippen, mindestens 44 Pixel hoch, damit es auf dem Telefon zu treffen
   ist. currentColor am SVG sorgt dafuer, dass das Zeichen die Textfarbe
   uebernimmt und beim Ueberfahren mit aufhellt. */
.fuss-sozial{margin:14px 0 0}
.fuss-sozial a{
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;color:rgba(255,255,255,.82);
}
.fuss-sozial a:hover{color:#fff;text-decoration:none}
.fuss-sozial a:hover span{text-decoration:underline;text-underline-offset:3px}
.fuss-sozial svg{flex:none}

.fuss-marke{margin-bottom:16px}
.fuss-marke .marke-text{display:block;font-size:23px}
.fuss-marke .marke-text .a{color:#fff}
.fuss-unten{
  border-top:1px solid rgba(255,255,255,.14);
  margin-top:40px;padding-top:22px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px;
}

/* ============================================================
   Kategorieseite
   ============================================================ */
.brotkrume{font-size:13.5px;color:var(--grau);padding-block:16px}
.brotkrume a:hover{text-decoration:underline}

.katkopf{padding-bottom:8px}
.katkopf h1{margin-bottom:10px}
.katkopf p{color:var(--grau);max-width:60ch}

.katlayout{display:grid;grid-template-columns:250px 1fr;gap:40px;padding-bottom:var(--luft)}

.filter{position:sticky;top:110px;align-self:start}
.filtergruppe{border-bottom:1px solid var(--linie);padding-block:20px}
.filtergruppe:first-child{padding-top:0}
.filtergruppe h3{font-size:15px;letter-spacing:.03em;margin-bottom:13px}
/* Sackgroesse steht bewusst ganz oben, nicht ganz unten. */
.filtergruppe-oben{
  background:var(--gruen-blass);margin-inline:-16px;padding:18px 16px;
  border-radius:var(--radius);border-bottom:0;margin-bottom:6px;
}
.filterwahl{display:flex;gap:7px;flex-wrap:wrap}
.filterwahl button{
  font-family:var(--schrift-kopf);font-weight:600;font-size:14px;
  padding:8px 14px;border-radius:var(--radius-klein);cursor:pointer;
  background:var(--weiss);border:1.5px solid var(--linie);color:var(--text);
}
.filterwahl button:hover{border-color:var(--beere)}
.filterwahl button[aria-pressed="true"]{
  background:var(--beere);border-color:var(--beere);color:#fff;
}
.filterliste{list-style:none;padding:0;margin:0}
.filterliste li{margin-bottom:9px}
.filterliste label{display:flex;gap:9px;align-items:center;font-size:15px;cursor:pointer}
.filterliste input{width:17px;height:17px;accent-color:var(--beere)}
.filterliste .anzahl{color:var(--grau-hell);font-size:13.5px;margin-left:auto}

/* Filterzeilen als Link, seit 28.08.2026 (Daschas Rueckmeldung, die
   Kaestchen waren abgeschaltete Attrappen).

   Das Kaestchen ist gezeichnet, nicht echt. Ein echtes <input> braucht
   Skript oder ein Formular, ein Link funktioniert immer und laesst sich
   weitergeben. Die Flaeche ist bewusst die ganze Zeile, damit man auf dem
   Handy nicht das 17-Pixel-Kaestchen treffen muss. */
.filterwahlzeile{
  display:flex;gap:9px;align-items:center;
  font-size:15px;color:var(--text);text-decoration:none;
  padding:3px 4px;margin:-3px -4px;border-radius:7px;
}
.filterwahlzeile:hover{background:var(--creme)}
.filterwahlzeile:focus-visible{outline:2px solid var(--beere);outline-offset:1px}
.filterwahlzeile .kaestchen{
  width:17px;height:17px;flex:none;
  border:1.5px solid var(--grau-hell);border-radius:4px;background:#fff;
  position:relative;
}
.filterwahlzeile.ist-an .kaestchen{background:var(--beere);border-color:var(--beere)}
/* Haken als zwei gedrehte Kanten, damit kein Bild und keine Schrift noetig ist */
.filterwahlzeile.ist-an .kaestchen::after{
  content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(43deg);
}
.filterwahlzeile.ist-an .filterwort{font-weight:600}
.filterwahlzeile .anzahl{margin-left:auto}

.filter-zurueck{margin:18px 0 0;font-size:14px}
.filter-zurueck a{color:var(--grau);text-decoration:underline}
.filter-zurueck a:hover{color:var(--beere)}

.katleiste{
  display:flex;justify-content:space-between;align-items:center;
  gap:20px;flex-wrap:wrap;margin-bottom:24px;
}
.katleiste-zahl{font-size:14.5px;color:var(--grau)}
.katleiste select{
  font-family:inherit;font-size:14.5px;padding:10px 14px;
  border:1.5px solid var(--linie);border-radius:var(--radius-klein);background:var(--weiss);
}

/* ============================================================
   Produktseite
   ============================================================ */
.produktlayout{
  display:grid;grid-template-columns:1.1fr .9fr;gap:56px;
  padding-block:24px var(--luft);align-items:start;
}

.galerie{display:grid;grid-template-columns:74px 1fr;gap:14px}
.galerie-liste{display:flex;flex-direction:column;gap:10px}
.galerie-liste button{
  padding:0;border:2px solid var(--linie);border-radius:var(--radius-klein);
  overflow:hidden;cursor:pointer;background:none;
}
.galerie-liste button[aria-pressed="true"]{border-color:var(--beere)}
.galerie-liste .bildph{border-radius:0;font-size:9px}
.galerie-gross .bildph{aspect-ratio:1/1}

.kaufspalte{position:sticky;top:110px}
.kaufspalte .art{
  font-size:13px;color:var(--grau);text-transform:uppercase;
  letter-spacing:.08em;font-weight:600;margin-bottom:8px;
}
.kaufspalte h1{font-size:clamp(28px,3.2vw,38px);margin-bottom:10px}
.kaufspalte .einsatz{color:var(--grau);font-size:16.5px;margin-bottom:14px}

.preiszeile{display:flex;align-items:baseline;gap:12px;margin-bottom:4px}
.preis{font-family:var(--schrift-kopf);font-weight:800;font-size:34px}
.grundpreis{font-size:14.5px;color:var(--grau)}
.steuerzeile{font-size:13px;color:var(--grau);margin-bottom:24px}

.block{margin-bottom:24px}
.block>span.titel{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-family:var(--schrift-kopf);font-weight:700;font-size:15px;margin-bottom:11px;
}
.block>span.titel em{font-style:normal;font-weight:500;font-size:13.5px;color:var(--grau)}

/* Sackgroesse als Raster. Ausverkauftes bleibt sichtbar und
   durchgestrichen, statt einfach zu verschwinden. */
.saeckeraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px}
.saeckeraster button{
  font-family:var(--schrift-kopf);font-weight:700;font-size:15px;
  padding:13px 8px;border-radius:var(--radius-klein);cursor:pointer;
  background:var(--weiss);border:2px solid var(--linie);color:var(--text);
  display:flex;flex-direction:column;gap:3px;align-items:center;line-height:1.2;
}
.saeckeraster button small{font-weight:500;font-size:11.5px;color:var(--grau)}
.saeckeraster button:hover:not(:disabled){border-color:var(--beere)}
.saeckeraster button[aria-pressed="true"]{border-color:var(--beere);background:var(--beere-blass)}
.saeckeraster button:disabled{
  opacity:.45;cursor:not-allowed;text-decoration:line-through;
}

/* Einmalkauf gegen Abo. Der Funnel-Baustein aus dem Briefing. */
.abowahl{display:grid;gap:9px}
.abowahl label{
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  border:2px solid var(--linie);border-radius:var(--radius-klein);padding:14px 16px;
}
.abowahl label:has(input:checked){border-color:var(--gruen);background:var(--gruen-blass)}
.abowahl input{margin-top:3px;width:18px;height:18px;accent-color:var(--gruen);flex:none}
.abowahl b{font-family:var(--schrift-kopf);font-size:15.5px;display:block}
.abowahl small{color:var(--grau);font-size:13.5px}
.abo-vorteil{
  color:var(--gruen);font-weight:700;font-family:var(--schrift-kopf);font-size:14px;
}

.verfuegbar{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--gruen);font-weight:600;font-size:15px;margin-bottom:16px;
}
.verfuegbar svg{width:18px;height:18px}
.punkt{width:9px;height:9px;border-radius:99px;background:var(--gruen);flex:none}

.zusagen{list-style:none;padding:0;margin:20px 0 0;border-top:1px solid var(--linie);padding-top:20px}
.zusagen li{display:flex;gap:11px;align-items:flex-start;font-size:15px;padding:6px 0}
.zusagen svg{width:18px;height:18px;color:var(--beere);flex:none;margin-top:3px}

.akkordeon{border-top:1px solid var(--linie);margin-top:26px}
.akkordeon details{border-bottom:1px solid var(--linie)}
.akkordeon summary{
  font-family:var(--schrift-kopf);font-weight:700;font-size:16px;
  padding:16px 0;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;
}
.akkordeon summary::-webkit-details-marker{display:none}
.akkordeon summary::after{content:"+";font-size:22px;color:var(--beere);font-weight:400}
.akkordeon details[open] summary::after{content:"\2212"}
.akkordeon-inhalt{padding-bottom:18px;color:var(--grau);font-size:15px}
.akkordeon table{width:100%;border-collapse:collapse;font-size:14.5px}
.akkordeon td{padding:8px 0;border-bottom:1px solid var(--linie);color:var(--text)}
.akkordeon td:first-child{color:var(--grau);width:48%}

/* Mobile Kaufleiste, schreibt die gewaehlte Sackgroesse mit. */
.kaufleiste{
  display:none;position:fixed;inset:auto 0 0 0;z-index:70;
  background:var(--weiss);border-top:1px solid var(--linie);
  padding:11px 16px;gap:14px;align-items:center;
  box-shadow:0 -4px 20px rgba(30,16,25,.1);
}
.kaufleiste-info{flex:1;min-width:0}
.kaufleiste-info b{font-family:var(--schrift-kopf);font-size:18px;display:block}
.kaufleiste-info span{font-size:13px;color:var(--grau)}

/* ============================================================
   Demo-Leiste. Nur intern, im Uebergabe-Modus entfernt.
   ============================================================ */
.demoleiste{
  background:#1f5c3f;color:#fff;font-size:13.5px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:9px 18px;position:relative;z-index:80;
}
.demoleiste strong{
  font-family:var(--schrift-kopf);letter-spacing:.09em;text-transform:uppercase;font-size:12px;
}
.demo-gruppe{display:flex;align-items:center;gap:6px}
.demo-gruppe>span{opacity:.75;font-size:12.5px}
.demoleiste button{
  font-family:inherit;font-size:13px;padding:5px 12px;border-radius:99px;
  cursor:pointer;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.3);color:#fff;
}
.demoleiste button[aria-pressed="true"]{background:#fff;color:#1f5c3f;font-weight:600}
.demo-hinweis{margin-left:auto;opacity:.8;font-size:12.5px}

.platzhalterband{
  background:var(--pink-blass);color:var(--beere-tief);
  font-size:13px;text-align:center;padding:8px 16px;
  border-bottom:1px solid var(--linie);
}

/* ============================================================
   Schmale Bildschirme
   ============================================================ */
@media (max-width:1000px){
  .hero .mitte,.probier .mitte,.gruenderin .mitte{grid-template-columns:1fr;gap:34px}
  .produktlayout{grid-template-columns:1fr;gap:34px}
  .kaufspalte{position:static}
  .katlayout{grid-template-columns:1fr;gap:26px}
  .filter{position:static}
  .raster-4{grid-template-columns:repeat(2,1fr)}
  .vertrauen .mitte{grid-template-columns:repeat(2,1fr);gap:26px}
  .fuss-raster{grid-template-columns:1fr 1fr}
}

@media (max-width:720px){
  /* Reihenfolge auf schmalen Schirmen: Logo und Werkzeuge in eine Zeile,
     darunter die Tierwahl, ganz unten die Suche. Ohne die order-Angaben
     rutschen Konto und Warenkorb allein in eine eigene Zeile. */
  .kopf-inner{flex-wrap:wrap;gap:12px}
  .marke{order:1}
  .kopf-werkzeuge{order:2;margin-left:auto}
  .tierwahl{order:3;flex-basis:100%}
  .tierwahl button{flex:1;justify-content:center}
  .suche{order:4;flex-basis:100%}
  .marke-bild{height:42px}
  .marke-text{font-size:22px}
  .menue .mitte{
    flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .menue .mitte::-webkit-scrollbar{display:none}
  .menue a{white-space:nowrap;padding-inline:12px}
  .servicezeile .mitte{gap:16px;font-size:12.5px}
  .raster-3,.raster-2{grid-template-columns:1fr}
  .galerie{grid-template-columns:1fr}
  .galerie-liste{flex-direction:row;overflow-x:auto}
  .galerie-liste button{flex:none;width:64px}
  .kaufleiste{display:flex}
  body{padding-bottom:78px}
  .fuss-raster{grid-template-columns:1fr}
  .vertrauen .mitte{grid-template-columns:1fr}
}

@media (max-width:430px){
  .raster-4{grid-template-columns:1fr}
  .tierwahl button{padding:8px 14px;font-size:14px}
  .probier-preis b{font-size:31px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ---------- Hero-Motiv ----------
   Uebernimmt Form und Rundung des Platzhalters, den es ersetzt: 4:3,
   volle Spaltenbreite, dieselbe Eckenrundung. Dadurch aendert sich beim
   Einsetzen eines Bildes nur der Inhalt, nicht das Layout.

   object-fit:cover, weil das Motiv 16:9 ist und der Rahmen 4:3. Beim
   Hero ist Fuellen richtig, anders als bei den Produktkacheln: Dort zeigt
   das Bild eine Ware, die vollstaendig zu sehen sein muss, hier eine
   Stimmung, die den Rahmen fuellen soll. */
.hero-bild{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:var(--radius);
}
@media (max-width:820px){
  .hero-bild{aspect-ratio:16/9}
}

/* ---------- Produktschieber (24.08.2026) ----------
 *
 * CSS scroll-snap statt Bibliothek: laeuft ohne JavaScript, ist auf dem
 * Telefon von Haus aus wischbar, und laedt nichts von fremden Servern.
 * Letzteres ist der Grund, warum der Shop ohne Einwilligungsbanner
 * auskommt, das soll so bleiben.
 */
.schieber{position:relative}
/* GEWICHT: ul.produkte.schieber-bahn, nicht nur .schieber-bahn.
 *
 * In wordpress.css steht `ul.produkte{display:grid}`, und wordpress.css
 * laedt NACH stil.css. Ein blosses `.schieber-bahn{display:flex}` verliert
 * dort doppelt: geringeres Gewicht UND frueher geladen. Der Streifen blieb
 * dadurch ein Raster, es gab nichts zu schieben, und meine Pfeile haben
 * sich folgerichtig gar nicht erst eingeblendet.
 *
 * Dritter Fall derselben Art in diesem Projekt (Germanized-ID-Selektor,
 * .filtergruppe:first-child, jetzt hier). Deshalb steht es hier als Regel:
 * Wenn eine Regel nicht greift, NICHT die eigene verlaengern, sondern
 * nachsehen, was daneben schon auf demselben Element sitzt. */
ul.produkte.schieber-bahn{
  display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:2px 2px 14px;margin:0;list-style:none;
  scrollbar-width:thin;scrollbar-color:var(--linie) transparent;
  grid-template-columns:none;
}
ul.produkte.schieber-bahn::-webkit-scrollbar{height:6px}
ul.produkte.schieber-bahn::-webkit-scrollbar-thumb{background:var(--linie);border-radius:99px}
ul.produkte.schieber-bahn > li.product{
  flex:0 0 calc((100% - 3 * 24px) / 4);scroll-snap-align:start;
}

/* Die Pfeile sind eine Zugabe fuer die Maus, kein Muss. Ohne Skript
 * bleiben sie versteckt und der Streifen scrollt normal. */
.kopfzeile-rechts{display:flex;align-items:center;gap:18px}
.schieber-pfeile{display:inline-flex;gap:8px}
.schieber-pfeile[hidden]{display:none}
.schieber-pfeil{
  width:36px;height:36px;border-radius:99px;cursor:pointer;
  border:1px solid var(--linie);background:#fff;color:var(--text);
  font-size:20px;line-height:1;display:flex;align-items:center;
  justify-content:center;transition:background .15s,color .15s,border-color .15s;
}
.schieber-pfeil:hover:not(:disabled){background:var(--beere);border-color:var(--beere);color:#fff}
.schieber-pfeil:disabled{opacity:.35;cursor:default}
.schieber-pfeil:focus-visible{outline:2px solid var(--beere);outline-offset:2px}

@media (max-width:1000px){
  ul.produkte.schieber-bahn > li.product{flex:0 0 calc((100% - 24px) / 2)}
  .schieber-pfeil{display:none}
}
@media (max-width:640px){
  /* Angeschnittene zweite Kachel zeigt, dass es weitergeht. */
  ul.produkte.schieber-bahn > li.product{flex:0 0 78%}
}