/* ShopSavor Rezepte – schlankes, schnelles Design ohne externe Abhängigkeiten */
:root{
  --orange:#f57c00; --orange-dunkel:#e65100; --orange-hell:#fff3e0;
  --text:#221b14; --text-leise:#7a6a5c; --linie:#f0e4d6;
  --bg:#fffdfa; --karte:#fff; --gruen:#2e7d32;
  --schatten:0 1px 2px rgba(80,50,20,.06),0 8px 24px rgba(80,50,20,.07);
  --schatten-hover:0 2px 6px rgba(80,50,20,.09),0 16px 36px rgba(80,50,20,.13);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--orange-dunkel)}
img{max-width:100%}

/* ── Kopfzeile ───────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:12px 20px;
  background:rgba(255,253,250,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linie)}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:19px;
  letter-spacing:-.2px;color:var(--text);text-decoration:none}
.brand img{width:32px;height:32px;border-radius:9px;display:block}
.btn-app{background:var(--orange);color:#fff!important;text-decoration:none;
  font-weight:700;font-size:14px;padding:9px 16px;border-radius:999px;
  box-shadow:0 2px 10px rgba(245,124,0,.32);transition:transform .15s,box-shadow .15s}
.btn-app:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(245,124,0,.4)}

/* ── Hauptmenü (Desktop) ────────────────────────────────── */
.menu{display:flex;gap:2px;align-items:center;flex:1;justify-content:center}
.menu a{padding:8px 14px;border-radius:10px;font-weight:650;font-size:.94rem;
  text-decoration:none;color:var(--text);transition:background .15s,color .15s}
.menu a:hover{background:var(--orange-hell);color:var(--orange-dunkel)}
@media(max-width:820px){.menu{display:none}}

/* ── Schnellauswahl-Leiste (immer sichtbar, waagerecht scrollbar) ── */
.leiste{display:flex;gap:9px;overflow-x:auto;padding:13px 20px;
  border-bottom:1px solid var(--linie);background:#fffdf9;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.leiste::-webkit-scrollbar{height:5px}
.leiste::-webkit-scrollbar-thumb{background:#e6d5c3;border-radius:9px}
.leiste .chip{flex:0 0 auto}

/* ── Karussell ──────────────────────────────────────────── */
.karussell{margin:8px 0 34px}
.kar-maske{overflow:hidden;padding:6px 0 14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.kar-spur{display:flex;gap:16px;width:max-content;padding:0 4px}
.kar-karte{flex:0 0 auto;width:250px;background:var(--karte);border:1px solid var(--linie);
  border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:var(--schatten);transition:transform .2s,box-shadow .2s}
.kar-karte:hover{transform:translateY(-4px);box-shadow:var(--schatten-hover)}
.kar-karte img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;display:block;
  background:var(--orange-hell)}
.kar-karte span{display:block;padding:11px 13px 2px;font-weight:700;font-size:.98rem;
  line-height:1.3}
.kar-karte small{display:block;padding:0 13px 13px;color:var(--text-leise);font-size:.82rem}

/* ── Grundraster ────────────────────────────────────────── */
main{max-width:1120px;margin:0 auto;padding:26px 20px 40px}
.rezept main, main.schmal{max-width:780px}
h1{font-size:clamp(1.7rem,4.5vw,2.5rem);line-height:1.18;margin:.2em 0 .35em;
  letter-spacing:-.7px;font-weight:800}
h2{font-size:1.25rem;margin:2.2em 0 .7em;font-weight:750;letter-spacing:-.3px;
  display:flex;align-items:baseline;gap:10px}
h2 small{font-weight:500;font-size:.85rem;color:var(--text-leise)}
.lead{color:var(--text-leise);font-size:1.06rem;margin:0 0 1.2em;max-width:62ch}

/* ── Startbild-Bereich ──────────────────────────────────── */
.hero{position:relative;overflow:hidden;border-radius:calc(var(--radius) + 6px);
  padding:38px 30px;margin:6px 0 26px;color:#fff;
  background:linear-gradient(135deg,#ff9800 0%,#ef6c00 55%,#d84315 100%);
  background-size:200% 200%}
.hero:after{content:"";position:absolute;right:-40px;top:-40px;width:230px;height:230px;
  border-radius:50%;background:rgba(255,255,255,.13)}
.hero:before{content:"";position:absolute;left:-60px;bottom:-80px;width:200px;height:200px;
  border-radius:50%;background:rgba(255,255,255,.09)}
.hero h1{color:#fff;margin:0 0 .3em;position:relative;max-width:20ch}
.hero p{margin:0 0 1.4em;color:#fff5e8;max-width:52ch;position:relative;font-size:1.05rem}
.hero .btn{position:relative;display:inline-block;background:#fff;color:var(--orange-dunkel)!important;
  text-decoration:none;font-weight:800;padding:13px 26px;border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,.18);transition:transform .15s}
.hero .btn:hover{transform:translateY(-2px)}
.hero .zahl{display:inline-block;margin-top:14px;font-size:.9rem;color:#ffe9d2;position:relative}

/* ── Kategorie-Chips ────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 30px;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  background:#fff;border:1px solid var(--linie);border-radius:999px;
  padding:8px 15px;font-size:.9rem;font-weight:600;color:var(--text);
  transition:border-color .15s,box-shadow .15s,transform .15s}
.chip:hover{border-color:var(--orange);box-shadow:var(--schatten);transform:translateY(-1px)}
.chip b{color:var(--orange-dunkel);font-weight:800}

/* ── Rezeptkarten ───────────────────────────────────────── */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.karte{display:flex;flex-direction:column;background:var(--karte);
  border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;
  text-decoration:none;color:inherit;box-shadow:var(--schatten);
  transition:transform .18s ease,box-shadow .18s ease}
.karte:hover{transform:translateY(-4px);box-shadow:var(--schatten-hover)}
.karte .bild-wrap{overflow:hidden;background:var(--orange-hell)}
/* Bilder sind quadratisch (700x700): quadratisch anzeigen → kein Beschnitt */
.karte img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;display:block;
  transition:transform .35s ease}
.karte:hover img{transform:scale(1.06)}
.karte .text{padding:13px 15px 16px;display:flex;flex-direction:column;gap:6px}
.karte strong{font-size:1.02rem;line-height:1.32;font-weight:700;letter-spacing:-.2px}
.karte small{color:var(--text-leise);font-size:.82rem;display:flex;gap:8px;flex-wrap:wrap}
.karte small em{font-style:normal;color:var(--orange-dunkel);font-weight:700}

/* ── Rezeptseite ────────────────────────────────────────── */
.krumen{font-size:.85rem;color:var(--text-leise);margin-bottom:10px}
.krumen a{color:var(--text-leise);text-decoration:none}
.krumen a:hover{color:var(--orange-dunkel)}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 22px;padding:0;list-style:none}
.badges li{background:var(--orange-hell);color:var(--orange-dunkel);
  border-radius:999px;padding:6px 14px;font-size:.86rem;font-weight:700}
/* Rezeptkopf: Text und Bild nebeneinander – das quadratische Foto wird
   vollständig gezeigt (kein Beschnitt, keine Verzerrung) */
.kopf{display:grid;gap:22px;align-items:center;margin-bottom:6px}
@media(min-width:820px){.kopf{grid-template-columns:1fr 1fr;gap:30px}}
.bild-hero{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;display:block;
  border-radius:var(--radius);box-shadow:var(--schatten);background:var(--orange-hell)}

ul.zutaten{list-style:none;padding:0;margin:0;display:grid;gap:2px 26px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
ul.zutaten li{position:relative;padding:9px 0 9px 30px;border-bottom:1px solid var(--linie)}
ul.zutaten li:before{content:"✓";position:absolute;left:0;top:9px;color:var(--orange);
  font-weight:800;font-size:15px}
ol.schritte{padding:0;margin:0;list-style:none;counter-reset:s}
ol.schritte li{position:relative;padding:0 0 20px 52px;counter-increment:s}
ol.schritte li:before{content:counter(s);position:absolute;left:0;top:-2px;
  width:34px;height:34px;border-radius:50%;background:var(--orange);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.95rem}
ol.schritte li:after{content:"";position:absolute;left:17px;top:34px;bottom:0;width:2px;
  background:var(--linie)}
ol.schritte li:last-child:after{display:none}

/* ── Hinweis- und Handlungsblöcke ───────────────────────── */
.banner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--orange-hell);border:1px solid #ffd8a8;border-radius:var(--radius);
  padding:15px 18px;margin:20px 0}
.banner p{margin:0;flex:1;min-width:200px;font-size:.95rem}
.banner a{background:var(--orange);color:#fff!important;text-decoration:none;
  font-weight:700;padding:10px 18px;border-radius:10px;white-space:nowrap}
.tipp{background:#f3faf1;border-left:4px solid #66bb6a;border-radius:0 12px 12px 0;
  padding:13px 16px;margin:18px 0;font-size:.95rem}
.tipp a{color:#2e7d32;font-weight:700}
.cta{background:linear-gradient(135deg,#fff8f0,#ffe9d2);border:1px solid #ffd8a8;
  border-radius:var(--radius);padding:26px 22px;margin:34px 0 10px;text-align:center}
.cta strong{display:block;font-size:1.15rem;margin-bottom:6px}
.cta p{color:var(--text-leise);margin:0 0 16px;font-size:.95rem}
.cta a{display:inline-block;background:var(--orange);color:#fff!important;
  text-decoration:none;font-weight:800;padding:14px 30px;border-radius:999px;
  box-shadow:0 6px 18px rgba(245,124,0,.3);transition:transform .15s}
.cta a:hover{transform:translateY(-2px)}
.mehr{display:inline-block;margin-top:16px;font-weight:700;text-decoration:none}

/* ── Fußzeile ───────────────────────────────────────────── */
footer{border-top:1px solid var(--linie);margin-top:50px;padding:30px 20px 40px;
  color:var(--text-leise);font-size:.9rem;text-align:center}
footer nav{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
footer a{color:var(--text-leise);text-decoration:none;font-weight:600}
footer a:hover{color:var(--orange-dunkel)}

/* ── Effekte ────────────────────────────────────────────── */
/* Alle Effekte sind optional: Sie greifen nur, wo der Browser sie kann,
   und werden bei „reduzierte Bewegung“ komplett abgeschaltet. */
@media (prefers-reduced-motion: no-preference){
  /* Wandernder Farbverlauf im Kopfbereich */
  .hero{animation:verlauf 16s ease-in-out infinite alternate}
  /* Selbstlaufendes Karussell – hält bei Berührung/Hover an */
  .kar-spur{animation:kar-fahren 70s linear infinite}
  .karussell:hover .kar-spur,
  .karussell:focus-within .kar-spur{animation-play-state:paused}
  @keyframes kar-fahren{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes verlauf{
    0%{background-position:0% 50%}
    100%{background-position:100% 50%}
  }
  /* Sanft schwebende Kreise */
  .hero:after{animation:schweben 9s ease-in-out infinite alternate}
  .hero:before{animation:schweben 12s ease-in-out infinite alternate-reverse}
  @keyframes schweben{
    from{transform:translateY(0) scale(1)}
    to{transform:translateY(-16px) scale(1.06)}
  }
  /* Karten tauchen beim Scrollen auf (nur in Browsern mit scroll-gesteuerten
     Animationen – sonst sind sie einfach sofort da) */
  @supports (animation-timeline: view()){
    .karte,h2,.hero,.chip{
      animation:auftauchen linear both;
      animation-timeline:view();
      animation-range:entry 8% cover 26%
    }
  }
  @keyframes auftauchen{
    from{opacity:0;transform:translateY(16px) scale(.99)}
    to{opacity:1;transform:none}
  }
  /* Bild im Rezeptkopf ganz leicht heranzoomen */
  .bild-hero{animation:bild-ein .6s ease both}
  @keyframes bild-ein{
    from{opacity:0;transform:scale(1.02)}
    to{opacity:1;transform:none}
  }
}

/* Klick-/Zeige-Rückmeldung (immer, auch bei reduzierter Bewegung) */
.btn-app:active,.hero .btn:active,.cta a:active{transform:scale(.97)}
.karte:focus-visible,.chip:focus-visible,.btn-app:focus-visible{
  outline:3px solid var(--orange);outline-offset:2px}

/* ── Mobil ──────────────────────────────────────────────── */
@media(max-width:560px){
  main{padding:18px 16px 30px}
  .hero{padding:28px 20px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
  .karte img{height:auto}
  .karte strong{font-size:.95rem}
  ol.schritte li{padding-left:46px}
  .kar-karte{width:190px}
  .kar-spur{animation-duration:45s}
}

/* ── Drucken (Rezepte ausdrucken) ───────────────────────── */
@media print{
  .top,.banner,.tipp,.cta,footer,.chips{display:none!important}
  body{background:#fff;font-size:12pt}
  main{max-width:none;padding:0}
  .bild-hero{max-height:8cm;object-fit:cover}
  .karte{break-inside:avoid;box-shadow:none}
  ol.schritte li:after{display:none}
}