/* Martha by Hela – statische Vorschau. Neu geschrieben, keine Übernahme des alten Themes.
   Markenfarben aus dem Original: Rot #DA2210, Dunkelrot #720C02, Grün #567E3C, Weiß; Orange aus Schriftzug/Einleitung.
   Schriften lokal (OFL): Asap Condensed (Überschriften), Roboto (Text). */
@font-face{font-family:"Asap Condensed";src:url(../fonts/AsapCondensed-Light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Asap Condensed";src:url(../fonts/AsapCondensed-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Asap Condensed";src:url(../fonts/AsapCondensed-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Asap Condensed";src:url(../fonts/AsapCondensed-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url(../fonts/Roboto-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url(../fonts/Roboto-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url(../fonts/Roboto-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
 --rot:#DA2210; --dunkelrot:#720C02; --gruen:#567E3C; --gruen-hell:#A6C73C; --orange:#E4910C; --orange-hell:#F0A01F;
 --weiss:#fff; --text:#2b2b2b; --grau:#6b6b6b; --flaeche:#faf6f1;
 --rund:14px; --schatten:0 2px 10px rgba(60,10,0,.10); --schatten-hover:0 8px 24px rgba(60,10,0,.18);
 --breite:1200px; --rand:clamp(16px,4vw,40px);
 --kopf:"Asap Condensed","Arial Narrow",Arial,sans-serif; --fliess:Roboto,Arial,Helvetica,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;font-family:var(--fliess);font-size:17px;line-height:1.6;color:var(--text);background:var(--weiss);overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--kopf);line-height:1.1;margin:0;overflow-wrap:break-word;hyphens:manual}
p,ul,ol,dl,table{margin:0}
a{color:var(--dunkelrot)}
a:focus-visible,.kachel a:focus-visible,main:focus-visible{outline:3px solid var(--dunkelrot);outline-offset:3px}
.fuss a:focus-visible{outline-color:var(--weiss)}
.nur-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
main:focus{outline:none}

/* Sprunglink und Vorschauband */
.sprung{position:absolute;left:12px;top:-60px;z-index:20;background:var(--dunkelrot);color:var(--weiss);padding:10px 16px;border-radius:0 0 8px 8px;font-weight:500;text-decoration:none}
.sprung:focus{top:0}
.vorschau-band{background:#ffd400;color:#1a1a1a;text-align:center;font:500 14px/1.4 var(--fliess);padding:6px var(--rand);border-bottom:1px solid #c9a800}

/* Kopf */
.kopf{background:var(--weiss)}
.kopf-innen{max-width:var(--breite);margin:0 auto;padding:18px var(--rand) 6px;display:flex;justify-content:center}
.kopf-logo img{height:64px;width:auto}

/* Markenblock: Schriftzug + WORLD OF KETCHUP */
.marke{max-width:var(--breite);margin:0 auto;padding:8px var(--rand) 0}
.marke-schriftzug{height:clamp(70px,13vw,150px);width:auto}
.marke-titel{font-family:var(--kopf);font-weight:300;color:var(--dunkelrot);font-size:clamp(34px,8.6vw,112px);line-height:1;letter-spacing:.01em;margin:.05em 0 0;text-align:center}
.seite-produkt .marke,.seite-rezept .marke{display:flex;align-items:flex-end;gap:12px 28px;flex-wrap:wrap;justify-content:space-between}
.seite-produkt .marke-schriftzug,.seite-rezept .marke-schriftzug{height:clamp(56px,9vw,100px)}
.seite-produkt .marke-titel,.seite-rezept .marke-titel{font-size:clamp(26px,5vw,56px);text-align:right;margin:0}

/* Startseite: Einstieg */
.held{background:url(../img/Martha-Zeichnung-2x.png) no-repeat right bottom/ auto clamp(260px,32vw,440px);padding-bottom:clamp(40px,6vw,80px)}
.held-martha{display:grid;gap:clamp(20px,4vw,48px);align-items:center;grid-template-columns:1fr;background:linear-gradient(90deg,var(--orange) 0%,var(--orange-hell) 100%);border-radius:var(--rund);padding:clamp(20px,4vw,48px);box-shadow:var(--schatten);max-width:calc(var(--breite) - 2*var(--rand));margin:clamp(24px,4vw,48px) var(--rand) 0}
@media (min-width:1281px){.held-martha{margin-left:auto;margin-right:auto}}
.held-foto{width:min(260px,70%);margin:0 auto;border-radius:50%}
.held-text h2{color:var(--dunkelrot);font-weight:600;font-size:clamp(28px,3.4vw,38px);margin-bottom:.35em}
.held-text p{color:#3a0600;font-size:clamp(17px,1.6vw,20px);line-height:1.6;max-width:62ch}
@media (min-width:768px){.held-martha{grid-template-columns:minmax(200px,300px) 1fr}.held-foto{width:100%}}
@media (max-width:767px){.held{background-size:auto 210px;padding-bottom:200px}}

/* Bereiche */
.bereich{padding:clamp(48px,7vw,96px) var(--rand)}
.bereich > *{max-width:var(--breite);margin-left:auto;margin-right:auto}
.bereich h2{text-align:center;font-size:clamp(30px,4.4vw,52px);margin-bottom:clamp(28px,4vw,48px)}
.zweifarbig .t1{font-weight:300}
.zweifarbig .t2{font-weight:500}
.bereich-produkte{background:var(--flaeche)}
.bereich-produkte + .bereich-produkte{padding-top:0}
.bereich-produkte h2 .t1{color:var(--dunkelrot)}
.bereich-produkte h2 .t2{color:var(--rot)}
/* Grünverlauf wie im Original, aber dunkler angesetzt: Weiß auf #A6C73C hätte nur ≈ 2:1 Kontrast, auf #567E3C ≈ 4,7:1 */
.bereich-rezepte{background:linear-gradient(180deg,var(--gruen) 0%,#45662F 100%)}
.bereich-rezepte h2{color:var(--weiss)}
.bereich-rezepte h2 .t2{color:#E8F3C8}
.bereich-social{background:var(--weiss)}
.bereich-social h2{color:var(--dunkelrot);font-weight:300}

/* Kacheln */
.kacheln{list-style:none;padding:0;display:grid;gap:var(--g);grid-template-columns:1fr;--g:clamp(16px,2.4vw,28px)}
/* Produktkacheln als zentrierte Reihe, damit eine Restkachel (5 bzw. 7 Produkte) nicht links allein steht */
.kacheln-produkte{display:flex;flex-wrap:wrap;justify-content:center}
.kacheln-produkte .kachel{flex:0 1 100%}
@media (min-width:481px){.kacheln-produkte .kachel{flex-basis:calc((100% - var(--g))/2)}}
@media (min-width:1025px){.kacheln-produkte .kachel{flex-basis:calc((100% - 3*var(--g))/4)}}
@media (min-width:481px){.kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1025px){.kacheln-rezepte{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kachel{min-width:0}
.kachel a{display:flex;flex-direction:column;height:100%;background:var(--weiss);border-radius:var(--rund);overflow:hidden;box-shadow:var(--schatten);text-decoration:none;color:var(--text);transition:transform .18s ease,box-shadow .18s ease}
.kachel a:hover{transform:translateY(-3px);box-shadow:var(--schatten-hover)}
.kachel-bild{display:block}
.kachel-produkt .kachel-bild{background:var(--rot);aspect-ratio:1/1;padding:3%}
.kachel-produkt .kachel-bild img{width:100%;height:100%;object-fit:contain}
.kachel-rezept .kachel-bild{aspect-ratio:3/2}
.kachel-rezept .kachel-bild img{width:100%;height:100%;object-fit:cover}
.kachel-text{display:block;padding:16px 18px 6px;font-family:var(--kopf);font-size:22px;line-height:1.2;color:var(--dunkelrot);min-width:0}
.kachel-titel{font-weight:300}
.kachel-name{font-weight:600}
.kachel-knopf{display:inline-block;align-self:flex-start;margin:10px 18px 18px;margin-top:auto;padding:7px 16px;border-radius:999px;background:var(--dunkelrot);color:var(--weiss);font:500 13px/1.2 var(--fliess);letter-spacing:.06em}
.kachel-text + .kachel-knopf{margin-top:auto}
.kachel a:hover .kachel-knopf{background:var(--rot)}
.kachel-rezept .kachel-knopf{background:var(--gruen)}
.kachel-rezept a:hover .kachel-knopf{background:var(--dunkelrot)}

/* Social-Bilder */
.social-raster{list-style:none;padding:0;display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:600px){.social-raster{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.social-raster{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1150px){.social-raster{grid-template-columns:repeat(7,minmax(0,1fr))}}
.social-raster img{border-radius:10px;box-shadow:var(--schatten);width:100%}

/* Produktseite */
.produkt,.rezept{max-width:var(--breite);margin:clamp(20px,3vw,40px) auto clamp(48px,6vw,80px);padding:0 var(--rand)}
.produkt{display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:1fr;align-items:start}
@media (min-width:860px){.produkt{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.produkt-bild{background:var(--rot);border-radius:var(--rund);padding:clamp(16px,4vw,40px);box-shadow:var(--schatten)}
.produkt-bild img{width:100%;max-width:560px;margin:0 auto}
.produkt-text h1,.rezept-titel h1{color:var(--dunkelrot);font-weight:600;font-size:clamp(30px,4.2vw,50px);margin-bottom:.5em}
.produkt-text h2,.rezept-inhalt h2{color:var(--rot);font-weight:500;font-size:clamp(24px,2.6vw,30px);letter-spacing:.02em;margin:1.2em 0 .5em}
.produkt-text h1 + h2{margin-top:0}
.naehrwerte{width:100%;max-width:520px;border-collapse:collapse;font-size:16px}
.naehrwerte th,.naehrwerte td{padding:9px 12px;border-bottom:1px solid #eadfd6;text-align:left;vertical-align:top}
.naehrwerte th{font-weight:500}
.naehrwerte td{text-align:right;white-space:nowrap}
.naehrwerte tr.davon th{font-weight:400;padding-left:28px;color:var(--grau)}
.naehrwerte tbody tr:nth-child(odd){background:var(--flaeche)}
.zutaten{max-width:65ch}
.zutaten strong{font-weight:700;color:var(--dunkelrot)}
.bald{color:var(--grau);font-style:italic}
.zurueck{margin-top:clamp(28px,4vw,44px)}
.knopf{display:inline-block;padding:12px 22px;border-radius:999px;background:var(--dunkelrot);color:var(--weiss);text-decoration:none;font-weight:500;letter-spacing:.05em;font-size:15px;transition:background .18s ease}
.knopf:hover{background:var(--rot)}

/* Rezeptseite */
.rezept-kopf{display:grid;gap:clamp(20px,4vw,48px);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.rezept-kopf{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.rezept-foto img{width:100%;border-radius:var(--rund);box-shadow:var(--schatten);aspect-ratio:3/2;object-fit:cover}
.kennzahlen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kennzahlen div{background:var(--flaeche);border-radius:10px;padding:12px 14px;min-width:0}
.kennzahlen dt{font-size:14px;color:var(--grau);line-height:1.3}
.kennzahlen dd{margin:2px 0 0;font-family:var(--kopf);font-size:24px;font-weight:600;color:var(--dunkelrot);line-height:1.2}
.kennzahlen .haupt dd{color:var(--rot)}
.rezept-inhalt{display:grid;gap:clamp(8px,4vw,56px);grid-template-columns:1fr;margin-top:clamp(16px,3vw,32px)}
@media (min-width:860px){.rezept-inhalt{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}}
.rezept-zutaten h3{font-family:var(--fliess);font-size:16px;font-weight:700;color:var(--gruen);margin:1em 0 .3em}
.rezept-zutaten ul{list-style:none;padding:0}
.rezept-zutaten li{padding:7px 0 7px 22px;border-bottom:1px solid #eee;position:relative}
.rezept-zutaten li::before{content:"";position:absolute;left:4px;top:.95em;width:8px;height:8px;border-radius:50%;background:var(--gruen)}
.rezept-schritte ol{list-style:none;padding:0;counter-reset:schritt}
.rezept-schritte li{counter-increment:schritt;position:relative;padding:0 0 18px 52px;min-height:40px}
.rezept-schritte li::before{content:counter(schritt);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;background:var(--rot);color:var(--weiss);font:600 18px/36px var(--kopf);text-align:center}

/* Fuß */
.fuss{background:var(--dunkelrot);color:#f3e6e3;text-align:center;padding:36px var(--rand) 40px;font-size:15px}
.fuss .social{list-style:none;padding:0;margin:0 0 18px;display:flex;justify-content:center;gap:14px}
.fuss .social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);color:var(--weiss);transition:background .18s ease}
.fuss .social a:hover{background:var(--rot)}
.fuss .symbol path[fill="#720C02"]{fill:var(--dunkelrot)}
.fuss-links{margin-top:6px}
.fuss-links a{color:var(--weiss)}
.fuss .trenner{opacity:.6;margin:0 .3em}

@media (prefers-reduced-motion:reduce){*{transition:none!important}.kachel a:hover{transform:none}}