@import url("fonts/fonts.css");

/* ============================================================
   KRUSTE. — Gestaltungssystem
   01 Fundamente · 02 Komposition · 03 Bauteile · 04 Hilfen
   Klassen der Seite tragen das Praefix kr-.
   ============================================================ */

/* ---------- 01 FUNDAMENTE ------------------------------------ */

:root {
  /* Farbe — Marke */
  --rot-tief:    #6E120E;   /* Kampagnenflaeche, Kopfbereich, Fuss */
  --rot:         #A82814;   /* Markenrot: Logo, Preise, Ueberschriften auf hell */
  --rot-dunkel:  #82190D;
  --orange:      #EE8B33;   /* Aktion, Akzent — traegt IMMER dunkle Schrift */
  --senf:        #F9DFB2;   /* Promo-Baender */
  --senf-tief:   #F3CE8E;

  /* Farbe — Flaeche */
  --papier:      #FAF4EA;
  --papier-warm: #F3E7D4;
  --creme:       #FFFCF6;
  --tinte:       #241408;
  --tinte-weich: #6B5340;
  --linie:       #E2D3BC;   /* Zierlinie, kein Bedienelement */
  --linie-aktiv: #9C8163;   /* Rand von Bedienelementen — mind. 3:1 */

  /* Farbe — Signal */
  --gruen:       #2F7A46;
  --warn:        #B4530E;

  /* Schrift */
  --schrift:        "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --schrift-plakat: "Bangers", "Barlow Condensed", Impact, sans-serif;
  --schrift-marke:  "Lobster Two", "Barlow Condensed", cursive;

  /* Raum — 4px-Takt */
  --raum-1: 4px;  --raum-2: 8px;  --raum-3: 12px; --raum-4: 16px;
  --raum-6: 24px; --raum-8: 32px; --raum-12: 48px; --raum-16: 64px;
  --raum-24: 96px;

  /* Radien */
  --r-sm: 4px; --r-aktion: 12px; --r-md: 16px; --r-lg: 20px; --r-rund: 999px;

  /* Schatten */
  --schatten-sm: 0 1px 2px rgba(36,20,8,.09), 0 2px 6px rgba(36,20,8,.06);
  --schatten-md: 0 2px 6px rgba(36,20,8,.08), 0 12px 28px rgba(36,20,8,.10);
  --schatten-lb: 0 18px 50px rgba(36,20,8,.20);

  /* Container */
  --breite-sm: 48rem; --breite-md: 72rem; --breite-lg: 90rem;

  /* Gerissene Papierkante (Maske, Farbe kommt aus background) */
  --riss-oben: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2040%20L0%2013.6%20L14.5%2013.6%20L24.7%2022.9%20L34.7%204.9%20L44.9%2012.2%20L68%2013%20L87.6%2032.7%20L103.4%207.8%20L117.3%204.1%20L140.2%2014.3%20L160%2018.9%20L170.1%206.6%20L186.4%2017.5%20L203.1%2017.2%20L224%2015.9%20L241.9%2031%20L255.8%204.8%20L277.7%2013.6%20L287.3%2026%20L306.1%2031%20L326.9%2024.3%20L343.6%2030.2%20L360.7%206.8%20L380.7%2033.8%20L394.5%2019.3%20L403.9%202.8%20L413.9%203.7%20L429.6%205.1%20L447.9%2031.2%20L471.6%2016.7%20L486.7%2031.2%20L498.3%2014.2%20L511.2%2021.6%20L524.7%2010.1%20L540%2023.6%20L560.7%2022.4%20L581.2%2011.3%20L603.5%2031%20L619.1%206.3%20L629.2%203.1%20L644%203%20L654.7%207.9%20L674.1%2013.6%20L689%207.8%20L714.9%2021.2%20L725.4%2012.5%20L738.9%202.2%20L764.1%205.7%20L773.5%2022.7%20L797.2%2026.7%20L812.4%2014%20L830.5%2028.7%20L843.3%2029.5%20L866.8%2029.3%20L888.3%2015.4%20L903.4%203.9%20L916.8%2026.6%20L933.4%2032.5%20L958.6%2018.8%20L971.5%206.2%20L995.8%2030.2%20L1015.9%206.5%20L1040.4%2028.8%20L1057.5%2014.3%20L1072.1%2029.2%20L1087.9%2019.6%20L1109.2%203%20L1133.6%207.6%20L1159.2%2025.8%20L1177.6%208.6%20L1197.6%2022.6%20L1200%2030.9%20L1200%2040%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  --riss-unten: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201200%2040%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200%20L0%2032.8%20L24.7%2032.8%20L35.1%2024.2%20L53.2%205%20L65.9%202.6%20L87%2020.1%20L108.5%207.3%20L127.5%2025.8%20L153%2018.7%20L168.2%2023.7%20L182.6%2012.1%20L203.8%2024.2%20L223.7%204.2%20L246.6%202.7%20L256.3%2016.6%20L279.2%2017.9%20L293.1%2017.3%20L311.4%207.3%20L332.5%2029.9%20L350.7%2032%20L375.8%2014%20L385.8%207.5%20L406.4%2033.4%20L431.6%2022.9%20L453.3%2018.3%20L468.7%205.2%20L481.1%2032.4%20L493.7%2012.5%20L505.6%2023%20L518.9%2020.1%20L535.5%2018.2%20L558.3%2031.5%20L574.3%2026.6%20L594.2%2015.7%20L610.2%2028.5%20L628.5%206.3%20L643.2%2023.4%20L656.4%205.8%20L674.6%2015.6%20L691.6%2020.8%20L700.7%2019.1%20L712.1%206.6%20L724%2020.8%20L734.4%2026.8%20L755.1%2022.9%20L773.1%2017.1%20L783.5%2031%20L801%2028.6%20L820.3%2017%20L835.2%2017.3%20L850%2019.3%20L872.9%2021.5%20L886.2%203.5%20L899.7%2030.5%20L910.6%205.8%20L927.1%2030.6%20L950.6%2015.9%20L970.4%2011%20L984.1%207.7%20L994.6%2027.7%20L1015.1%208.2%20L1035.3%2014.1%20L1059.8%206.2%20L1071.1%2027.6%20L1092.2%2023.7%20L1115.2%2024.5%20L1129.7%207.8%20L1142.2%2020.2%20L1161.8%2022.8%20L1178.2%2018.7%20L1199.8%2032.2%20L1200%2033.6%20L1200%200%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");

  /* Papierkorn — liegt als Auflage auf allen Flaechen */
  --korn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22k%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.85%22%20numOctaves%3D%224%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22180%22%20height%3D%22180%22%20filter%3D%22url(%23k)%22%20opacity%3D%22.5%22%2F%3E%3C%2Fsvg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: .92; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Muss VOR allen display-Regeln stehen und sie schlagen: sonst gewinnt
   display:grid gegen das hidden-Attribut (siehe Do-Not-Repeat 2026-08-17). */
[hidden] { display: none !important; }

a { color: inherit; }
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Plakatschrift — nur fuer kurze, laute Zeilen */
.kr-plakat {
  font-family: var(--schrift-plakat);
  font-weight: 400;
  letter-spacing: .012em;
  line-height: .96;
  text-transform: uppercase;
}
.kr-marke { font-family: var(--schrift-marke); font-style: italic; font-weight: 700; }

.kr-t-xxl { font-size: clamp(3.2rem, 8.4vw, 7.2rem); }
.kr-t-xl  { font-size: clamp(2.6rem, 6.2vw, 5rem); }
.kr-t-lg  { font-size: clamp(2rem, 4.2vw, 3.4rem); }
.kr-t-md  { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }

/* Kleines Etikett ueber Ueberschriften */
.kr-etikett {
  font-size: 13px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--rot);
}
.kr-lauf { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- 02 KOMPOSITION ----------------------------------- */

.kr-breite    { width: min(100% - var(--raum-8), var(--breite-lg)); margin-inline: auto; }
.kr-breite--md { width: min(100% - var(--raum-8), var(--breite-md)); margin-inline: auto; }
.kr-breite--sm { width: min(100% - var(--raum-8), var(--breite-sm)); margin-inline: auto; }

.kr-abschnitt { position: relative; padding-block: clamp(56px, 8vw, 104px); }
.kr-abschnitt--eng { padding-block: clamp(36px, 5vw, 64px); }

/* Flaechen. Jede dunkle Flaeche traegt zusaetzlich kr-auf-rot,
   jede orange kr-auf-orange — daran haengen ALLE Umkehrregeln. */
.kr-flaeche-papier { background: var(--papier); }
.kr-flaeche-warm   { background: var(--papier-warm); }
.kr-flaeche-rot    { background: var(--rot-tief); }
.kr-flaeche-senf   { background: var(--senf); }
.kr-flaeche-orange { background: var(--orange); }

/* Korn liegt ueber jeder Flaeche, ohne Klicks zu schlucken */
.kr-flaeche-papier::after, .kr-flaeche-warm::after, .kr-flaeche-rot::after,
.kr-flaeche-senf::after, .kr-flaeche-orange::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--korn); background-size: 180px 180px;
  opacity: .10; mix-blend-mode: multiply;
}
.kr-flaeche-rot::after { opacity: .22; mix-blend-mode: overlay; }

/* Umkehrung auf dunkelrotem Grund — EINE Liste, hier gepflegt */
.kr-auf-rot { color: #FFF8EE; }
.kr-auf-rot .kr-etikett { color: var(--senf-tief); }
.kr-auf-rot a:not(.kr-knopf) { color: #FFF8EE; }
.kr-auf-rot .kr-gedaempft { color: rgba(255,248,238,.74); }

/* Auf Orange und Senf bleibt die Schrift dunkel (Weiss auf Orange faellt
   in der Kontrastpruefung durch). */
.kr-auf-orange, .kr-auf-orange a:not(.kr-knopf) { color: var(--tinte); }
.kr-auf-orange .kr-etikett { color: var(--tinte); }

.kr-gedaempft { color: var(--tinte-weich); }

/* Gerissene Kante */
.kr-riss {
  position: absolute; left: 0; right: 0; height: clamp(18px, 2.4vw, 34px);
  pointer-events: none; z-index: 2;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.kr-riss--oben  { top: -1px;  -webkit-mask-image: var(--riss-unten); mask-image: var(--riss-unten); }
.kr-riss--unten { bottom: -1px; -webkit-mask-image: var(--riss-oben); mask-image: var(--riss-oben); }

/* Raster */
.kr-raster { display: grid; gap: var(--raum-6); }
.kr-raster--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.kr-raster--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.kr-raster--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 72rem) { .kr-raster--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 52rem) {
  .kr-raster--2, .kr-raster--3 { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 36rem) { .kr-raster--4 { grid-template-columns: minmax(0,1fr); } }

/* ---------- 03 BAUTEILE -------------------------------------- */

/* --- Knopf --- */
.kr-knopf {
  display: inline-flex; align-items: center; gap: var(--raum-3);
  padding: 15px var(--raum-8); border: 0; border-radius: var(--r-aktion);
  font-family: var(--schrift); font-size: 16px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.kr-knopf:hover { transform: translateY(-2px); }
.kr-knopf:active { transform: translateY(0); }
.kr-knopf svg { width: 18px; height: 18px; flex: none; }

.kr-knopf--tinte  { background: var(--tinte); color: var(--senf); box-shadow: var(--schatten-md); }
.kr-knopf--tinte:hover { background: #3A2210; }
.kr-knopf--orange { background: var(--orange); color: var(--tinte); box-shadow: var(--schatten-md); }
.kr-knopf--orange:hover { background: #F79B47; }
.kr-knopf--rot    { background: var(--rot); color: #FFF8EE; box-shadow: var(--schatten-md); }
.kr-knopf--rot:hover { background: #C13018; }
.kr-knopf--klar   { background: transparent; color: inherit; padding-inline: var(--raum-2); }
.kr-knopf--klar:hover { color: var(--orange); }
.kr-knopf--rand   { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.kr-knopf--rand:hover { background: rgba(255,255,255,.10); }
.kr-knopf--voll   { width: 100%; justify-content: center; }

/* --- Kopfleiste --- */
.kr-kopf {
  position: fixed; inset: 0 0 auto; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: var(--raum-6);
  padding: var(--raum-4) clamp(16px, 3vw, 40px);
  transition: background-color .25s ease, box-shadow .25s ease, padding .25s ease;
}
.kr-kopf__logo { font-size: clamp(28px, 3vw, 38px); line-height: 1; text-decoration: none; }
.kr-kopf__nav { display: flex; gap: clamp(14px, 2vw, 34px); }
.kr-kopf__nav a {
  font-size: 15px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; padding-block: var(--raum-2);
  border-bottom: 2px solid transparent; transition: border-color .16s ease, color .16s ease;
}
.kr-kopf__nav a:hover, .kr-kopf__nav a[aria-current="page"] { border-bottom-color: var(--orange); }
.kr-kopf--fest { background: var(--papier); color: var(--tinte); box-shadow: var(--schatten-sm); padding-block: var(--raum-3); }
.kr-kopf--fest .kr-kopf__logo { color: var(--rot); }
.kr-kopf--hell { color: #FFF8EE; }
.kr-kopf--hell .kr-kopf__logo { color: #FFF8EE; }
.kr-kopf__schalter { display: none; background: none; border: 0; color: inherit; padding: var(--raum-2); cursor: pointer; }
.kr-kopf__schalter svg { width: 26px; height: 26px; }

@media (max-width: 72rem) {
  .kr-kopf__nav {
    position: fixed; inset: 0 0 0 auto; width: min(84vw, 340px);
    flex-direction: column; gap: 0; justify-content: center;
    background: var(--rot-tief); color: #FFF8EE; padding: var(--raum-8);
    transform: translateX(100%); transition: transform .3s ease;
    box-shadow: var(--schatten-lb);
  }
  .kr-kopf__nav a { font-size: 20px; padding-block: var(--raum-4); border-bottom: 1px solid rgba(255,248,238,.16); }
  .kr-kopf__nav[data-offen="ja"] { transform: none; }
  .kr-kopf__schalter { display: block; order: 3; }
  .kr-kopf__aktion { order: 2; }
}

/* --- Kopfbereich (Startseite) --- */
.kr-held { position: relative; overflow: hidden; padding-block: clamp(120px, 15vh, 190px) clamp(40px, 6vw, 80px); }
.kr-held__innen {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center; gap: var(--raum-8);
}
.kr-held__bild { position: relative; }
.kr-held__bild img { width: 100%; filter: drop-shadow(0 40px 60px rgba(0,0,0,.45)); }
.kr-held h1 { margin-bottom: var(--raum-6); }
.kr-held h1 { line-height: .9; }
.kr-held h1 .kr-zeile { display: block; }
.kr-held h1 .kr-zeile--orange { color: var(--orange); }
.kr-held__unter { font-size: 19px; font-weight: 600; margin-bottom: var(--raum-8); }
.kr-held__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-4); }
@media (max-width: 72rem) {
  .kr-held__innen { grid-template-columns: minmax(0,1fr); text-align: left; }
  .kr-held__bild { order: -1; max-width: 460px; margin-inline: auto; }
}

/* --- Beweisreihe --- */
.kr-beweise { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)) auto; align-items: center; gap: var(--raum-8); }
.kr-beweis { display: flex; align-items: center; gap: var(--raum-4); }
.kr-beweis__symbol { flex: none; width: 56px; height: 56px; color: var(--rot); }
.kr-beweis h3 { font-family: var(--schrift); font-size: 17px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; }
.kr-beweis p { font-size: 16px; color: var(--tinte-weich); }
.kr-auf-orange .kr-beweis__symbol { color: var(--rot-dunkel); }
.kr-auf-orange .kr-beweis p { color: rgba(36,20,8,.78); }
.kr-stempel { flex: none; width: 138px; height: 138px; color: var(--rot); animation: kr-drehen 34s linear infinite; }
@media (prefers-reduced-motion: reduce) { .kr-stempel { animation: none; } }
@keyframes kr-drehen { to { transform: rotate(360deg); } }
@media (max-width: 72rem) {
  .kr-beweise { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kr-stempel { grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 36rem) { .kr-beweise { grid-template-columns: minmax(0,1fr); } }

/* --- Produktkarte --- */
.kr-produkt {
  position: relative; display: flex; flex-direction: column;
  background: var(--creme); border-radius: var(--r-lg);
  box-shadow: var(--schatten-sm); overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.kr-produkt:hover { transform: translateY(-4px); box-shadow: var(--schatten-md); }
.kr-produkt__bild { position: relative; aspect-ratio: 1 / 1; background: linear-gradient(180deg, var(--senf) 0%, #F7E7C8 100%); }
.kr-produkt__bild img { width: 100%; height: 100%; object-fit: contain; padding: var(--raum-4); }
.kr-produkt__fahne {
  position: absolute; top: var(--raum-3); left: var(--raum-3);
  background: var(--orange); color: var(--tinte);
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-sm);
}
.kr-produkt__text { display: flex; flex-direction: column; flex: 1; gap: var(--raum-3); padding: var(--raum-6); }
.kr-produkt__text h3 { font-family: var(--schrift-plakat); font-size: 26px; }
.kr-produkt__text p { font-size: 16px; color: var(--tinte-weich); line-height: 1.4; }
.kr-produkt__fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--raum-4); margin-top: auto; padding-top: var(--raum-4); }
.kr-preis { font-family: var(--schrift-plakat); font-size: 30px; color: var(--rot); }
.kr-dazu {
  flex: none; width: 46px; height: 46px; border-radius: var(--r-rund);
  border: 2px solid var(--linie-aktiv); background: var(--creme); color: var(--rot);
  font-size: 26px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.kr-dazu:hover { background: var(--rot); border-color: var(--rot); color: #FFF8EE; transform: scale(1.06); }
.kr-dazu[data-getan="ja"] { background: var(--gruen); border-color: var(--gruen); color: #fff; }

/* --- Filterknoepfe --- */
.kr-filter { display: flex; flex-wrap: wrap; gap: var(--raum-3); margin-bottom: var(--raum-8); }
.kr-filter button {
  padding: 9px 20px; border-radius: var(--r-rund); border: 1.5px solid var(--linie-aktiv);
  background: var(--creme); color: var(--tinte); cursor: pointer;
  font-family: var(--schrift); font-size: 14px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.kr-filter button:hover { border-color: var(--rot); color: var(--rot); }
.kr-filter button[aria-pressed="true"] { background: var(--rot); border-color: var(--rot); color: #FFF8EE; }

/* --- Warenkorb --- */
.kr-korb {
  position: sticky; top: 96px;
  background: var(--creme); border-radius: var(--r-lg);
  box-shadow: var(--schatten-md); padding: var(--raum-8);
  max-height: calc(100vh - 128px); display: flex; flex-direction: column;
}
.kr-korb h2 { font-family: var(--schrift-plakat); font-size: 38px; margin-bottom: var(--raum-6); }
.kr-korb__liste { flex: 1; overflow-y: auto; display: grid; gap: var(--raum-4); margin-bottom: var(--raum-4); }
.kr-korb__leer { color: var(--tinte-weich); font-size: 16px; padding-block: var(--raum-6); }
.kr-zeile-korb { display: grid; grid-template-columns: 58px 1fr auto; gap: var(--raum-3); align-items: start; }
.kr-zeile-korb__bild { width: 58px; height: 58px; border-radius: var(--r-sm); background: var(--senf); object-fit: contain; padding: 4px; }
.kr-zeile-korb h3 { font-family: var(--schrift); font-size: 16px; font-weight: 700; line-height: 1.2; }
.kr-zeile-korb small { display: block; font-size: 14px; color: var(--tinte-weich); margin-bottom: var(--raum-2); }
.kr-zeile-korb__preis { font-weight: 700; color: var(--rot); white-space: nowrap; text-align: right; }
.kr-zeile-korb__weg {
  background: none; border: 0; color: var(--tinte-weich); font-size: 20px; line-height: 1;
  cursor: pointer; padding: 0 0 var(--raum-2) var(--raum-2);
}
.kr-zeile-korb__weg:hover { color: var(--rot); }
.kr-menge { display: inline-flex; align-items: center; border: 1.5px solid var(--linie-aktiv); border-radius: var(--r-sm); overflow: hidden; }
.kr-menge button {
  width: 30px; height: 30px; border: 0; background: transparent; color: var(--tinte);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.kr-menge button:hover { background: var(--papier-warm); }
.kr-menge span { min-width: 30px; text-align: center; font-weight: 700; font-size: 16px; }
.kr-korb__summe { border-top: 1.5px solid var(--linie); padding-top: var(--raum-4); display: grid; gap: var(--raum-2); }
.kr-korb__zeile { display: flex; justify-content: space-between; font-size: 16px; }
.kr-korb__gesamt {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1.5px solid var(--linie); margin-top: var(--raum-2); padding-top: var(--raum-4);
}
.kr-korb__gesamt dt { font-family: var(--schrift-plakat); font-size: 30px; }
.kr-korb__gesamt dd { font-family: var(--schrift-plakat); font-size: 34px; color: var(--rot); margin: 0; }
.kr-korb__gesamt dd small { font-family: var(--schrift); font-size: 16px; font-weight: 700; }

.kr-korb-knopf { position: relative; }
.kr-korb-knopf__zahl {
  position: absolute; top: -6px; left: -8px; min-width: 22px; height: 22px;
  border-radius: var(--r-rund); background: var(--rot); color: #FFF8EE;
  font-size: 13px; font-weight: 700; display: grid; place-items: center; padding: 0 5px;
}
.kr-korb-knopf__zahl[hidden] { display: none; }

/* --- Promo-Band --- */
.kr-band {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(16px, 3vw, 48px); padding: var(--raum-6) var(--raum-8);
}
.kr-band h2 { font-family: var(--schrift-plakat); font-size: clamp(28px, 3.4vw, 42px); }
.kr-band p { font-size: 18px; font-weight: 600; }
.kr-band strong { color: var(--rot); }

/* --- Geteilter Kampagnenblock --- */
.kr-split { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; }
.kr-split__bild { position: relative; min-height: 420px; }
.kr-split__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kr-split__text { display: flex; flex-direction: column; justify-content: center; gap: var(--raum-6); padding: clamp(32px, 6vw, 88px); }
.kr-split__preis { display: flex; align-items: baseline; gap: var(--raum-2); font-family: var(--schrift-plakat); font-size: clamp(3.4rem, 7vw, 6rem); color: var(--rot); }
.kr-split__preis span { font-family: var(--schrift); font-size: 1.4rem; font-weight: 700; }
@media (max-width: 72rem) {
  .kr-split { grid-template-columns: minmax(0,1fr); }
  .kr-split__bild { min-height: 300px; }
}

/* --- Formulare --- */
.kr-feld { display: grid; gap: var(--raum-2); }
.kr-feld > label { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-weich); }
.kr-eingabe, .kr-auswahl {
  width: 100%; padding: 13px var(--raum-4); border: 1.5px solid var(--linie-aktiv);
  border-radius: var(--r-aktion); background: var(--creme); color: var(--tinte);
  font-family: var(--schrift); font-size: 17px; font-weight: 500;
}
.kr-eingabe:focus, .kr-auswahl:focus { outline: 3px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
.kr-eingabe::placeholder { color: #806A52; }
.kr-auswahl {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23241408' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px;
  padding-right: 42px;
}
.kr-eingabe--suche { padding-left: 46px; background-repeat: no-repeat; background-position: 16px center; background-size: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5340' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
}
.kr-hinweis { font-size: 14px; color: var(--tinte-weich); }
.kr-hinweis--fehler { color: var(--warn); font-weight: 700; }
.kr-schalterpaar { display: inline-flex; border: 1.5px solid var(--linie-aktiv); border-radius: var(--r-aktion); overflow: hidden; }
.kr-schalterpaar button {
  padding: 11px 22px; border: 0; background: var(--creme); color: var(--tinte); cursor: pointer;
  font-family: var(--schrift); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.kr-schalterpaar button[aria-pressed="true"] { background: var(--rot); color: #FFF8EE; }
.kr-haken { display: flex; align-items: center; gap: var(--raum-3); font-size: 16px; }
.kr-haken input { width: 20px; height: 20px; accent-color: var(--rot); }

/* --- Filialkarte --- */
.kr-filialen { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--raum-4); }
@media (max-width: 72rem) { .kr-filialen { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 36rem) { .kr-filialen { grid-template-columns: minmax(0,1fr); } }
.kr-filiale {
  display: flex; flex-direction: column; gap: var(--raum-2); text-align: left;
  padding: var(--raum-4) var(--raum-4) var(--raum-3);
  border: 1.5px solid var(--linie-aktiv); border-radius: var(--r-md);
  background: var(--creme); color: var(--tinte); cursor: pointer;
  font-family: var(--schrift); transition: border-color .16s ease, background-color .16s ease;
}
.kr-filiale:hover { border-color: var(--rot); }
.kr-filiale h3 { font-family: var(--schrift-plakat); font-size: 24px; color: var(--rot); }
.kr-filiale p { font-size: 16px; color: var(--tinte-weich); }
.kr-filiale__fuss { margin-top: auto; padding-top: var(--raum-3); display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.kr-filiale[aria-pressed="true"] { background: var(--rot); border-color: var(--rot); color: #FFF8EE; }
.kr-filiale[aria-pressed="true"] h3, .kr-filiale[aria-pressed="true"] p { color: #FFF8EE; }

/* --- Telefon-Attrappe --- */
.kr-telefone { display: flex; justify-content: center; align-items: flex-end; max-width: 100%; }
.kr-telefon {
  position: relative; flex: none; width: clamp(160px, 15vw, 220px); aspect-ratio: 9 / 19.5;
  border-radius: 34px; background: #14100C; padding: 9px;
  box-shadow: var(--schatten-lb); overflow: hidden;
}
.kr-telefon--mitte { z-index: 2; transform: translateY(-26px) scale(1.06); }
.kr-telefon--links  { transform: rotate(-2deg); margin-right: -22px; }
.kr-telefon--rechts { transform: rotate(2deg); margin-left: -22px; }
.kr-telefon__schirm {
  width: 100%; height: 100%; border-radius: 26px; background: var(--papier);
  color: var(--tinte); overflow: hidden; display: flex; flex-direction: column;
  font-size: 11px; line-height: 1.35;
}
.kr-telefon__leiste { display: flex; justify-content: space-between; padding: 7px 14px 3px; font-size: 9px; font-weight: 700; }
.kr-telefon__kopf { display: flex; align-items: center; justify-content: space-between; padding: 4px 12px 8px; }
.kr-telefon__kopf .kr-marke { font-size: 17px; color: var(--rot); }
.kr-telefon__inhalt { flex: 1; overflow: hidden; padding: 0 10px; display: grid; gap: 6px; align-content: start; }
.kr-telefon__karte { background: var(--creme); border-radius: 10px; padding: 8px; box-shadow: var(--schatten-sm); }
.kr-telefon__reihe { display: grid; grid-template-columns: 34px 1fr auto; gap: 7px; align-items: center; }
.kr-telefon__reihe img { width: 34px; height: 34px; object-fit: contain; background: var(--senf); border-radius: 6px; }
.kr-telefon__reihe b { font-size: 11px; }
.kr-telefon__reihe em { font-style: normal; font-size: 9px; color: var(--tinte-weich); display: block; }
.kr-telefon__reihe .kr-preis { font-size: 15px; }
.kr-telefon__fuss { display: flex; justify-content: space-around; padding: 7px 6px 9px; border-top: 1px solid var(--linie); font-size: 8px; font-weight: 700; letter-spacing: .06em; }
.kr-telefon__fuss span { display: grid; justify-items: center; gap: 3px; color: var(--tinte-weich); }
.kr-telefon__fuss span:first-child { color: var(--rot); }
.kr-telefon__fuss svg { width: 15px; height: 15px; }
.kr-telefon__balken { height: 6px; border-radius: 3px; background: var(--linie); overflow: hidden; }
.kr-telefon__balken i { display: block; height: 100%; background: var(--orange); }
@media (max-width: 52rem) {
  .kr-telefon--links, .kr-telefon--rechts { display: none; }
  .kr-telefon--mitte { transform: none; }
}

/* --- Herkunft: Reiter --- */
.kr-reiter { display: flex; border-bottom: 1.5px solid var(--linie); }
.kr-reiter button {
  flex: 1; padding: var(--raum-4) var(--raum-3); border: 0; border-bottom: 3px solid transparent;
  background: transparent; color: var(--tinte-weich); cursor: pointer;
  font-family: var(--schrift); font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.kr-reiter button[aria-selected="true"] { color: var(--rot); border-bottom-color: var(--rot); }
.kr-schnitte { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.kr-schnitt { padding: var(--raum-6); border-right: 1.5px solid var(--linie); text-align: center; }
.kr-schnitt:last-child { border-right: 0; }
.kr-schnitt b { display: block; font-family: var(--schrift-plakat); font-size: clamp(24px, 3vw, 36px); font-style: italic; }
.kr-schnitt span { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tinte-weich); }

/* --- Regionkarte --- */
.kr-regionkarte { position: relative; }
.kr-regionkarte svg { width: 100%; height: auto; }
.kr-nadel { position: absolute; transform: translate(-50%, -100%); display: flex; align-items: center; gap: 7px; }
.kr-nadel__punkt { width: 14px; height: 14px; border-radius: var(--r-rund); background: var(--rot); box-shadow: 0 0 0 0 rgba(168,40,20,.55); animation: kr-puls 2.4s ease-out infinite; }
@keyframes kr-puls { 70% { box-shadow: 0 0 0 14px rgba(168,40,20,0); } 100% { box-shadow: 0 0 0 0 rgba(168,40,20,0); } }
@media (prefers-reduced-motion: reduce) { .kr-nadel__punkt { animation: none; } }
.kr-nadel b { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rot); white-space: nowrap; }

/* --- Bilderstreifen --- */
.kr-streifen { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--raum-3); }
.kr-streifen img { width: 100%; aspect-ratio: 9/7; object-fit: cover; border-radius: var(--r-md); }
@media (max-width: 52rem) { .kr-streifen { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* --- Fuss --- */
.kr-fuss { position: relative; padding-block: clamp(56px, 7vw, 96px) var(--raum-8); }
.kr-fuss__oben { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: clamp(32px, 5vw, 72px); }
@media (max-width: 72rem) { .kr-fuss__oben { grid-template-columns: minmax(0,1fr); } }
.kr-fuss h2 { margin-block: var(--raum-4) var(--raum-6); }
.kr-fuss__spalte h3 { font-family: var(--schrift-plakat); font-size: 28px; margin-bottom: var(--raum-4); }
.kr-fuss__spalte li a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--raum-4);
  padding: 11px var(--raum-4); border-radius: var(--r-aktion); text-decoration: none;
  font-size: 15px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(255,248,238,.07); margin-bottom: 6px;
  transition: background-color .16s ease, color .16s ease;
}
.kr-fuss__spalte li a:hover { background: var(--orange); color: var(--tinte) !important; }
.kr-fuss__spalte li a.kr-hervor { background: var(--orange); color: var(--tinte) !important; }
.kr-anmeldung { display: flex; gap: var(--raum-3); flex-wrap: wrap; max-width: 460px; }
.kr-anmeldung .kr-eingabe { flex: 1 1 200px; background: rgba(255,248,238,.10); border-color: rgba(255,248,238,.28); color: #FFF8EE; }
.kr-anmeldung .kr-eingabe::placeholder { color: rgba(255,248,238,.6); }
.kr-fuss__unten {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--raum-4);
  margin-top: clamp(40px, 5vw, 72px); padding-top: var(--raum-6);
  border-top: 1px solid rgba(255,248,238,.20); font-size: 14px;
}
.kr-fuss__unten nav { display: flex; flex-wrap: wrap; gap: var(--raum-6); }
.kr-fuss__unten a { text-decoration: none; }
.kr-fuss__unten a:hover { text-decoration: underline; }

/* --- Systemband --- */
.kr-systemband { text-align: center; }
.kr-systemband h2 { font-family: var(--schrift-plakat); font-size: clamp(28px, 4vw, 46px); }
.kr-systemband h2 em { font-style: normal; color: var(--rot); }

/* ---------- 04 HILFEN ---------------------------------------- */

.kr-nur-leser {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.kr-sprung {
  position: absolute; left: var(--raum-4); top: -60px; z-index: 100;
  background: var(--tinte); color: var(--senf); padding: 10px 18px;
  border-radius: var(--r-aktion); text-decoration: none; transition: top .2s ease;
}
.kr-sprung:focus { top: var(--raum-4); }

.kr-mitte { text-align: center; }
.kr-stapel > * + * { margin-top: var(--raum-4); }
.kr-stapel-6 > * + * { margin-top: var(--raum-6); }

/* Einblenden. Notbremse in script.js zeigt alles, falls der Beobachter
   nicht ausloest — siehe Do-Not-Repeat vom 2026-08-18. */
.kr-zeigen { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.kr-zeigen.kr-da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .kr-zeigen { opacity: 1; transform: none; transition: none; } }

/* ---------- Nachtrag: Flaechen tragen die Rissfarbe --------- */
.kr-flaeche-papier, .kr-flaeche-warm, .kr-flaeche-rot,
.kr-flaeche-senf, .kr-flaeche-orange { position: relative; }
.kr-riss--papier { background: var(--papier); }
.kr-riss--warm   { background: var(--papier-warm); }
.kr-riss--senf   { background: var(--senf); }
.kr-riss--creme  { background: var(--creme); }
.kr-riss--rot    { background: var(--rot-tief); }

/* Inhalt liegt ueber Korn und Riss */
.kr-ueber { position: relative; z-index: 3; }

/* ---------- Kartenseite: Liste + Warenkorb ------------------- */
.kr-karte-raster { display: grid; grid-template-columns: minmax(0,1fr) 372px; gap: clamp(24px, 3vw, 56px); align-items: start; }
@media (max-width: 72rem) {
  .kr-karte-raster { grid-template-columns: minmax(0,1fr); }
  .kr-karte-raster .kr-korb { position: static; max-height: none; }
  .kr-karte-raster .kr-raster--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 36rem) { .kr-karte-raster .kr-raster--3 { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 52rem) { .kr-standort-kopf { grid-template-columns: minmax(0,1fr) !important; } }

/* ---------- Regionkarte ------------------------------------- */
.kr-region { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(24px,4vw,64px); align-items: center; }
@media (max-width: 72rem) { .kr-region { grid-template-columns: minmax(0,1fr); } }
.kr-regionkarte svg { filter: drop-shadow(0 14px 26px rgba(36,20,8,.12)); }

/* ---------- Nachtrag: Produktvariante, gesperrter Knopf ------ */
.kr-produkt__variante {
  font-size: 13px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--tinte-weich); margin-top: calc(var(--raum-3) * -1);
}
.kr-knopf[disabled] { opacity: .42; cursor: not-allowed; box-shadow: none; }
.kr-knopf[disabled]:hover { transform: none; }

/* ============================================================
   Systemseite (system.html) — Klassen mit ds- sind reine
   Dokumentation und kommen in der Produktionsseite nicht vor.
   ============================================================ */
.ds-kapitel { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  background: var(--senf); color: var(--rot-dunkel); padding: 6px 12px; border-radius: var(--r-sm); display: inline-block; }
.ds-nummer { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--tinte-weich); }
.ds-block { margin-top: clamp(40px, 5vw, 72px); }
.ds-block > h2 { font-family: var(--schrift-plakat); font-size: clamp(2rem, 3.6vw, 3rem); margin-top: var(--raum-3); }
.ds-block > p.ds-unter { font-size: 19px; color: var(--tinte-weich); margin-top: var(--raum-2); }

.ds-tafel { background: var(--creme); border-radius: var(--r-lg); box-shadow: var(--schatten-sm);
  padding: clamp(18px, 2.4vw, 28px); }
.ds-tafel h3 { font-family: var(--schrift); font-size: 12px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinte-weich); margin-bottom: var(--raum-4); }

.ds-hinweis { border-left: 4px solid var(--orange); background: var(--senf);
  padding: var(--raum-4) var(--raum-6); border-radius: 0 var(--r-aktion) var(--r-aktion) 0; font-size: 16px; }
.ds-hinweis code, code.ds-code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .86em;
  background: rgba(36,20,8,.09); padding: 2px 6px; border-radius: 4px; }

.ds-farben { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--raum-4); }
.ds-farbe { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--schatten-sm); background: var(--creme); }
.ds-farbe__feld { height: 92px; display: flex; align-items: flex-end; padding: var(--raum-3); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.ds-farbe__text { padding: var(--raum-3) var(--raum-4) var(--raum-4); }
.ds-farbe__text b { display: block; font-size: 15px; }
.ds-farbe__text code { font-size: 13px; color: var(--tinte-weich); font-family: ui-monospace, Menlo, monospace; }
.ds-farbe__text span { display: block; font-size: 13px; color: var(--tinte-weich); margin-top: 4px; }

.ds-tabelle { width: 100%; border-collapse: collapse; font-size: 16px; }
.ds-tabelle th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinte-weich); padding-bottom: var(--raum-3); border-bottom: 1.5px solid var(--linie); }
.ds-tabelle td { padding: 11px 0; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.ds-tabelle tr:last-child td { border-bottom: 0; }
.ds-tabelle code { font-family: ui-monospace, Menlo, monospace; font-size: 14px; }

.ds-raum { display: flex; align-items: center; gap: var(--raum-4); padding: 5px 0; }
.ds-raum code { width: 92px; flex: none; font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--rot); }
.ds-raum i { display: block; height: 13px; background: var(--rot); border-radius: 2px; }
.ds-raum span { margin-left: auto; font-size: 14px; color: var(--tinte-weich); }

.ds-radien { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: var(--raum-4); }
.ds-radius { background: var(--rot); color: #FFF8EE; padding: var(--raum-6) var(--raum-4);
  text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ds-schatten { background: var(--creme); padding: var(--raum-6) var(--raum-4); border-radius: var(--r-md);
  text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.ds-spalten { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--raum-3); }
.ds-spalten div { border-radius: var(--r-aktion); padding: var(--raum-6) var(--raum-4); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; }

.ds-probe { border-radius: var(--r-md); background: var(--papier-warm); padding: var(--raum-6); }
.ds-probe b { display: block; }

.ds-zustand { display: flex; flex-wrap: wrap; gap: var(--raum-4); align-items: center; }

/* Muster-Tafeln duerfen die Flaechenfarbe behalten (kommt nach .ds-tafel) */
.ds-tafel.kr-flaeche-orange { background: var(--orange); }
.ds-tafel.kr-flaeche-rot    { background: var(--rot-tief); }
.ds-tafel.kr-flaeche-senf   { background: var(--senf); }
.ds-farbe__feld { box-shadow: inset 0 0 0 1px rgba(36,20,8,.12); }

/* ---------- Schmale Geraete: Kopfleiste zusammenziehen ------- */
@media (max-width: 30rem) {
  .kr-kopf { gap: var(--raum-2); padding-inline: var(--raum-4); }
  .kr-kopf__logo { font-size: 26px; }
  .kr-kopf__aktion { padding-inline: var(--raum-4); }
  /* Beschriftung bleibt fuer Vorleseprogramme erhalten, verschwindet nur optisch */
  .kr-kopf__aktion [data-korb-etikett] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .kr-kopf__aktion svg + svg { display: none; }
}