@layer basis, teile, seiten;

@layer basis {
  :root {
    --tinte: #111111;
    --kohle: #2a2a28;
    --papier: #ffffff;
    --nebel: #f5f5f3;
    --sand: #efebe4;
    --linie: #e3e2de;
    --grau: #6c6b67;
    --messing: #b08d57;
    --messing-dunkel: #8a6a3a;
    --stern: #e0a526;
    --schrift: "Mulish", "Segoe UI", Arial, sans-serif;
    --titel: "Marcellus", Georgia, serif;
    --breite: 1320px;
  }
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; font: 400 16px/1.6 var(--schrift); color: var(--tinte); background: var(--papier); overflow-x: hidden; }
  img { max-width: 100%; height: auto; display: block; }
  a { color: inherit; }
  h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
  h1, h2 { font-family: var(--titel); font-weight: 400; letter-spacing: .01em; }
  button { font: inherit; cursor: pointer; }
  .rahmen { width: min(100% - 32px, var(--breite)); margin-inline: auto; }
  .sprung { position: absolute; left: -999px; }
  .sprung:focus { left: 8px; top: 8px; z-index: 50; background: var(--papier); padding: 8px 12px; }
  [hidden] { display: none !important; }
}

@layer teile {
  /* Kopf */
  .kopf__band { background: var(--tinte); color: var(--papier); }
  .kopf__reihe { display: flex; align-items: center; gap: 28px; min-height: 96px; }
  .kopf__marke img { width: 190px; height: auto; }
  .kopf__kat { position: relative; }
  .pille { display: inline-flex; align-items: center; gap: 10px; background: var(--papier); color: var(--tinte); border: 0; border-radius: 999px; padding: 11px 22px; font-weight: 800; font-size: 16px; }
  .pille i { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); }
  .kopf__drop { position: absolute; top: calc(100% + 10px); left: 0; z-index: 40; width: 300px; margin: 0; padding: 10px 0; list-style: none; background: var(--papier); color: var(--tinte); border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.18); }
  .kopf__drop a { display: flex; justify-content: space-between; padding: 9px 20px; text-decoration: none; border-bottom: 1px solid var(--nebel); }
  .kopf__drop a:hover { background: var(--nebel); }
  .kopf__drop b { color: var(--grau); font-weight: 600; }
  .kopf__cta { margin-left: auto; }
  .leiste { background: #ebebe9; }
  .leiste ul { display: flex; flex-wrap: wrap; gap: 4px 34px; list-style: none; margin: 0 auto; padding: 13px 0; }
  .leiste a { text-decoration: none; letter-spacing: .08em; font-size: 15px; }
  .leiste a:hover { text-decoration: underline; text-underline-offset: 5px; }
  .haken { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px; list-style: none; padding: 12px 0; margin-top: 0; margin-bottom: 0; border-bottom: 1px solid var(--linie); font-size: 13px; color: var(--kohle); }
  .haken li::before { content: "✓"; color: var(--messing-dunkel); font-weight: 800; margin-right: 8px; }

  /* Knopf (Stempel) */
  .knopf { border: 0; background: none; padding: 0; display: block; line-height: 0; }
  .knopf img { width: 100%; height: auto; transition: transform .15s ease, filter .15s ease; }
  .knopf:hover img { transform: translateY(-1px); filter: brightness(1.15); }
  .knopf:focus-visible { outline: 3px solid var(--messing); outline-offset: 3px; border-radius: 999px; }
  .knopf--kopf { width: 270px; }
  .kopf__band .knopf--kopf img { filter: drop-shadow(0 0 0 #555) brightness(1.25); }
  .knopf--karte { width: 100%; margin-top: auto; }
  .knopf--gross { width: min(100%, 460px); }
  .unterleiste { display: none; }

  .pfad ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 18px 0 8px; margin: 0; font-size: 14px; color: var(--grau); }
  .pfad li + li::before { content: "›"; margin: 0 8px; }
  .pfad a { text-decoration: none; }

  /* Karte */
  .raster { display: grid; gap: 22px; }
  .raster--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .raster--1 { grid-template-columns: 1fr; }
  .karte { display: flex; flex-direction: column; background: var(--papier); border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.08); padding: 0 0 16px; overflow: hidden; }
  .karte__bild { background: var(--nebel); aspect-ratio: 1; display: block; position: relative; overflow: hidden; }
  .karte__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
  .karte__titel { font: 800 15px/1.35 var(--schrift); margin: 14px 16px 6px; }
  .karte__titel a { text-decoration: none; }
  .karte__titel a:hover { text-decoration: underline; }
  .karte__wert { margin: 0 16px 4px; font-size: 13px; color: var(--grau); display: flex; gap: 6px; align-items: center; }
  .karte__haken { list-style: none; margin: 0 16px 10px; padding: 0; font-size: 13px; line-height: 1.45; color: var(--kohle); }
  .karte__haken li::before { content: "✓ "; }
  .karte__preis { margin: 0 16px 12px; }
  .karte__preis span { display: inline-block; background: var(--messing); color: #fff; font-weight: 800; border-radius: 8px; padding: 3px 10px; font-size: 16px; }
  .karte .knopf { width: calc(100% - 32px); margin: auto 16px 0; }

  .sterne { --w: 0%; display: inline-block; width: 82px; height: 15px; background: linear-gradient(90deg, var(--stern) var(--w), #d4d3cf var(--w));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 18'%3E%3Cg%3E%3Cpath d='M9 0l2.6 6 6.4.5-4.9 4.2 1.5 6.3L9 13.6 3.4 17l1.5-6.3L0 6.5 6.4 6z'/%3E%3Cpath transform='translate(20.5)' d='M9 0l2.6 6 6.4.5-4.9 4.2 1.5 6.3L9 13.6 3.4 17l1.5-6.3L0 6.5 6.4 6z'/%3E%3Cpath transform='translate(41)' d='M9 0l2.6 6 6.4.5-4.9 4.2 1.5 6.3L9 13.6 3.4 17l1.5-6.3L0 6.5 6.4 6z'/%3E%3Cpath transform='translate(61.5)' d='M9 0l2.6 6 6.4.5-4.9 4.2 1.5 6.3L9 13.6 3.4 17l1.5-6.3L0 6.5 6.4 6z'/%3E%3Cpath transform='translate(82)' d='M9 0l2.6 6 6.4.5-4.9 4.2 1.5 6.3L9 13.6 3.4 17l1.5-6.3L0 6.5 6.4 6z'/%3E%3C/g%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 18'%3E%3Cg%3E%3Cpath d='M9 0l2.6 6 6.4.5-4.9 4.2 1.5 6.3L9 13.6 3.4 17l1.5-6.3L0 6.5 6.4 6z'/%3E%3Cpath transform='translate(20.5)' d='M9 0l2.6 6 6.4.5-4.9 4.2 1.5 6.3L9 13.6 3.4 17l1.5-6.3L0 6.5 6.4 6z'/%3E%3Cpath transform='translate(41)' d='M9 0l2.6 6 6.4.5-4.9 4.2 1.5 6.3L9 13.6 3.4 17l1.5-6.3L0 6.5 6.4 6z'/%3E%3Cpath transform='translate(61.5)' d='M9 0l2.6 6 6.4.5-4.9 4.2 1.5 6.3L9 13.6 3.4 17l1.5-6.3L0 6.5 6.4 6z'/%3E%3Cpath transform='translate(82)' d='M9 0l2.6 6 6.4.5-4.9 4.2 1.5 6.3L9 13.6 3.4 17l1.5-6.3L0 6.5 6.4 6z'/%3E%3C/g%3E%3C/svg%3E") 0 0/100% 100% no-repeat; }

  .unterstrichen { text-decoration: underline; text-underline-offset: 4px; font-size: 15px; white-space: nowrap; }

  /* Regalzeile */
  .regalzeile { margin-block: 46px; }
  .regalzeile__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 18px; }
  .regalzeile__kopf h2 { font: 400 23px/1.3 var(--schrift); text-transform: uppercase; letter-spacing: .02em; margin: 0; }
  .regalzeile__kopf h2 a { text-decoration: none; }

  /* Symbole (CSS-Zeichnungen) */
  .sym { display: inline-block; width: 46px; height: 46px; border: 2px solid var(--messing-dunkel); border-radius: 50%; position: relative; }
  .sym::after { content: ""; position: absolute; inset: 12px; border: 2px solid var(--messing-dunkel); }
  .sym--hand::after { border-radius: 4px 4px 12px 12px; border-top-width: 5px; }
  .sym--paket::after { inset: 13px 11px; border-radius: 2px; box-shadow: inset 0 7px 0 -5px var(--messing-dunkel); }
  .sym--tasse::after { inset: 14px 15px 12px 11px; border-radius: 0 0 8px 8px; border-top: 0; box-shadow: 6px 2px 0 -3px var(--messing-dunkel); }
  .sym--stoff::after { border-radius: 50%; inset: 13px; }
  .sym--mass::after { inset: 20px 9px; border-width: 2px 0; }
  .sym--kanne::after { inset: 11px 14px 13px; border-radius: 6px 6px 3px 3px; }

  .stimme { margin: 0; background: var(--papier); border: 1px solid var(--linie); border-radius: 8px; padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
  .stimme blockquote { margin: 0; font-size: 15px; color: var(--kohle); }
  .stimme blockquote p { margin: 0; }
  .stimme__wer { margin: 4px 0 0; font-size: 13px; color: var(--grau); }
  .stimme__zu { margin-top: auto; font-size: 13px; font-weight: 700; }
  .stimmen__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .stimmen__raster--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  details { border-bottom: 1px solid var(--linie); padding: 14px 0; }
  summary { cursor: pointer; font-weight: 700; list-style: none; position: relative; padding-right: 30px; }
  summary::-webkit-details-marker { display: none; }
  summary::after { content: "+"; position: absolute; right: 4px; top: -2px; font-size: 22px; color: var(--messing-dunkel); }
  details[open] summary::after { content: "–"; }
  details p { margin: 10px 0 0; color: var(--kohle); }

  .chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 26px auto; }
  .chips a, .seite__chips button { display: inline-block; border: 1px solid var(--linie); background: var(--papier); border-radius: 999px; padding: 7px 16px; text-decoration: none; font-size: 14px; color: var(--tinte); }
  .chips b, .seite__chips b { color: var(--grau); font-weight: 600; margin-left: 4px; }
  .chips a:hover { border-color: var(--tinte); }
  .chips__alle a { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
  .chips__alle b { color: #bbb; }

  /* Fuß */
  .fuss { background: #2d2d2b; color: #e9e8e4; margin-top: 70px; }
  .fuss__raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding: 54px 0 40px; }
  .fuss h2 { font: 800 16px/1.3 var(--schrift); color: var(--papier); margin-bottom: 14px; }
  .fuss ul { list-style: none; padding: 0; margin: 0; }
  .fuss li { margin-bottom: 7px; font-size: 14px; }
  .fuss a { text-decoration: none; color: #e9e8e4; }
  .fuss a:hover { text-decoration: underline; }
  .fuss__logo { display: inline-block; background: var(--tinte); padding: 6px 10px; border-radius: 4px; margin-bottom: 14px; }
  .fuss__logo img { width: 190px; }
  .fuss__marke p { font-size: 14px; color: #cfcdc7; margin: 0 0 12px; }
  .fuss__zeile { border-top: 1px solid #44443f; padding: 16px 0; font-size: 13px; color: #b5b3ac; }
}

@layer seiten {
  .vorstellung { display: grid; grid-template-columns: 250px 1fr; gap: 34px; align-items: start; margin-top: 18px; }
  .vorstellung__logo { background: var(--papier); box-shadow: 0 1px 6px rgba(0,0,0,.08); border-radius: 6px; padding: 22px 0; display: grid; place-items: center; }
  .vorstellung__text h1 { font-size: 34px; margin-bottom: 10px; }
  .vorstellung__text p { margin: 0 0 10px; color: var(--kohle); }
  .kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 30px; }
  .kachel { position: relative; aspect-ratio: 1 / 0.72; overflow: hidden; display: block; background: var(--sand); }
  .kachel img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
  .kachel:hover img { transform: scale(1.04); }
  .kachel::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
  .kachel span { position: absolute; left: 28px; bottom: 24px; z-index: 1; color: #fff; font-size: 25px; letter-spacing: .03em; text-transform: uppercase; }

  .vertrauen { background: var(--sand); padding: 46px 0; margin-top: 30px; }
  .vertrauen h2 { text-align: center; font-size: 26px; margin-bottom: 26px; }
  .vertrauen ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; }
  .vertrauen h3 { font: 700 13px/1.4 var(--schrift); letter-spacing: .16em; text-transform: uppercase; margin: 14px 0 8px; }
  .vertrauen p { margin: 0; font-size: 14px; color: var(--kohle); }
  .stimmen { margin-top: 56px; }
  .stimmen h2 { font-size: 28px; margin: 0; }
  .unterzeile { color: var(--grau); margin: 4px 0 22px; }
  .wissen { margin-top: 56px; }
  .wissen > *, .fragen > * { max-width: 1060px; }
  .wissen h2 { font: 800 21px/1.35 var(--schrift); margin: 28px 0 10px; }
  .wissen h3 { font: 800 17px/1.35 var(--schrift); margin: 20px 0 8px; }
  .wissen p { margin: 0 0 12px; color: var(--kohle); font-size: 15px; }
  .wissen ul { margin: 0 0 14px; padding-left: 20px; font-size: 15px; color: var(--kohle); }
  .wissen li { margin-bottom: 6px; }
  .fragen { margin-top: 44px; }
  .fragen h2 { font-size: 26px; }

  /* Kategorie */
  .spalten { display: grid; grid-template-columns: 290px 1fr; gap: 40px; align-items: start; margin-top: 8px; }
  .seite section { background: var(--nebel); border-radius: 10px; padding: 24px 22px; margin-bottom: 20px; }
  .seite h2 { font: 800 20px/1.3 var(--schrift); margin-bottom: 14px; }
  .seite__kat { list-style: none; margin: 0; padding: 0; }
  .seite__kat a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linie); text-decoration: none; font-size: 14px; }
  .seite__kat b { color: var(--grau); font-weight: 600; }
  .seite__kat .an a { color: var(--messing-dunkel); font-weight: 800; }
  .seite__chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
  .seite__chips button { background: #e7e6e2; border: 0; text-transform: uppercase; font-size: 12px; font-weight: 700; letter-spacing: .03em; }
  .seite__chips button.an { background: var(--tinte); color: var(--papier); }
  .kopfzeile { display: grid; grid-template-columns: 170px 1fr; gap: 26px; align-items: start; padding-bottom: 20px; border-bottom: 1px solid var(--linie); }
  .kopfzeile__bild { border-radius: 6px; background: var(--nebel); aspect-ratio: 1; object-fit: cover; }
  .kopfzeile h1 { font-size: 32px; }
  .kopfzeile p { margin: 0 0 8px; color: var(--kohle); font-size: 15px; }
  .zaehler { color: var(--messing-dunkel); font-size: 14px; margin: 14px 0 18px; }
  .zaehler__weg { border: 0; background: none; text-decoration: underline; color: var(--tinte); padding: 0; }
  .wissen--kat { margin-top: 44px; }

  /* Produkt */
  .ware { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; margin-top: 10px; }
  .galerie { display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: start; }
  .galerie > input { position: absolute; opacity: 0; pointer-events: none; }
  .galerie__daumen { display: flex; flex-direction: column; gap: 10px; }
  .galerie__daumen label { cursor: pointer; border: 1px solid var(--linie); border-radius: 4px; overflow: hidden; background: var(--nebel); }
  .galerie__daumen img { mix-blend-mode: multiply; }
  .galerie__buehne { background: var(--nebel); border-radius: 6px; aspect-ratio: 1; position: relative; overflow: hidden; }
  .galerie__gross { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; display: none; }
  #g0:checked ~ .galerie__buehne .g0, #g1:checked ~ .galerie__buehne .g1, #g2:checked ~ .galerie__buehne .g2,
  #g3:checked ~ .galerie__buehne .g3, #g4:checked ~ .galerie__buehne .g4 { display: block; }
  #g0:checked ~ .galerie__daumen label[for=g0], #g1:checked ~ .galerie__daumen label[for=g1], #g2:checked ~ .galerie__daumen label[for=g2],
  #g3:checked ~ .galerie__daumen label[for=g3], #g4:checked ~ .galerie__daumen label[for=g4] { border-color: var(--tinte); }
  .ware__info h1 { font: 400 28px/1.3 var(--schrift); margin-bottom: 6px; }
  .ware__hersteller { color: var(--grau); font-size: 13px; margin: 0 0 10px; }
  .ware__wert { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--kohle); margin: 0 0 12px; }
  .ware__preis { margin: 0; font-size: 44px; line-height: 1; font-weight: 400; display: flex; align-items: flex-start; }
  .ware__preis sup { font-size: 20px; margin-top: 4px; }
  .ware__w { font-size: 24px; margin: 4px 0 0 6px; }
  .ware__stand { font-size: 12px; color: var(--grau); margin: 8px 0 18px; }
  .ware__cta { margin-bottom: 20px; }
  .ware__symbole { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px 0; margin: 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); text-align: center; font-size: 13px; }
  .ware__symbole li { display: flex; flex-direction: column; align-items: center; gap: 5px; }
  .ware__symbole span:last-child { color: var(--grau); overflow-wrap: anywhere; }
  .ware__lede { margin-top: 18px; color: var(--kohle); }
  .dekore p { margin: 0 0 8px; font-weight: 700; font-size: 14px; }
  .dekore ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0 0 18px; padding: 0; }
  .dekor { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--papier); border: 1px solid var(--linie); border-radius: 6px; padding: 6px; font-size: 12px; width: 84px; }
  .dekor img { width: 64px; height: 64px; object-fit: contain; }
  .dekor.an { border-color: var(--tinte); box-shadow: inset 0 0 0 1px var(--tinte); }
  .reiter { display: flex; flex-wrap: wrap; margin-top: 50px; border-bottom: 0; }
  .reiter > input { position: absolute; opacity: 0; pointer-events: none; }
  .reiter > label { order: 0; cursor: pointer; padding: 10px 2px; margin-right: 34px; border-bottom: 2px solid transparent; font-weight: 700; }
  .reiter > input:checked + label { border-color: var(--tinte); }
  .reiter > input:focus-visible + label { outline: 2px solid var(--messing); }
  .reiter__feld { order: 1; flex: 0 0 100%; display: none; padding-top: 24px; border-top: 1px solid var(--linie); }
  .reiter__feld > * { max-width: 1000px; }
  #r1:checked ~ .r1, #r2:checked ~ .r2, #r3:checked ~ .r3 { display: block; }
  .reiter__feld h2 { font-size: 26px; }
  .punkte { padding-left: 20px; color: var(--kohle); }
  .punkte li { margin-bottom: 8px; }
  .daten { border-collapse: collapse; width: 100%; max-width: 720px; font-size: 15px; }
  .daten th, .daten td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linie); vertical-align: top; overflow-wrap: anywhere; }
  .daten th { width: 34%; background: var(--nebel); font-weight: 700; }

  /* Textseiten */
  .blatt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; margin-top: 10px; }
  .blatt--mit { grid-template-columns: minmax(0, 1fr) 320px; }
  .blatt__text { max-width: 820px; }
  .blatt__text h1 { font-size: 34px; }
  .blatt__text h2 { font: 800 20px/1.35 var(--schrift); margin-top: 28px; }
  .blatt__text p, .blatt__text li { color: var(--kohle); }
  .blatt__karte { background: var(--sand); border-radius: 10px; padding: 24px; align-self: start; }
  .blatt__karte h2 { font: 800 17px/1.3 var(--schrift); }
  .blatt__waren h2 { font: 800 17px/1.3 var(--schrift); }
  .notizen { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .notiz a { display: block; text-decoration: none; background: var(--nebel); border-radius: 8px; overflow: hidden; }
  .notiz img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
  .notiz h2 { margin: 16px 18px 6px !important; }
  .notiz p { margin: 0 18px 18px; font-size: 15px; }
}

@media (max-width: 1180px) {
  .raster--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .raster--5 > :nth-child(5) { display: none; }
  .fuss__raster { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .kopf__reihe { min-height: 72px; gap: 14px; }
  .kopf__marke img { width: 130px; }
  .leiste { display: none; }
  .knopf--kopf { width: 190px; }
  .raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .raster--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .raster--5 > :nth-child(4) { display: none; }
  .spalten { grid-template-columns: 1fr; }
  .seite section:first-child { display: none; }
  .ware { grid-template-columns: 1fr; gap: 26px; }
  .stimmen__raster { grid-template-columns: 1fr 1fr; }
  .vertrauen ul { grid-template-columns: 1fr; }
  .blatt--mit { grid-template-columns: 1fr; }
  .unterleiste { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(255,255,255,.96); padding: 8px 16px; box-shadow: 0 -4px 14px rgba(0,0,0,.1); }
  .unterleiste .knopf { width: min(100%, 420px); margin: 0 auto; }
  body:has(.unterleiste) .fuss { padding-bottom: 76px; }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .haken { display: none; }
  .kopf__reihe { gap: 10px; }
  .kopf__marke { flex-shrink: 0; } .kopf__marke img { width: 104px; }
  .pille { padding: 0; width: 44px; height: 40px; justify-content: center; } .pille__wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .pille i { width: 10px; height: 10px; }
  .knopf--kopf { width: 172px; flex-shrink: 0; }
  .kopf__drop { position: fixed; left: 16px; right: 16px; top: 76px; width: auto; }
  .raster--5, .raster--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .raster--5 > :nth-child(4) { display: flex; }
  .karte__titel { font-size: 14px; margin: 10px 10px 4px; }
  .karte__haken, .karte__wert, .karte__preis { margin-inline: 10px; }
  .karte__haken { font-size: 12px; }
  .karte .knopf { width: calc(100% - 20px); margin-inline: 10px; }
  .vorstellung { grid-template-columns: 1fr; gap: 16px; }
  .vorstellung__logo { padding: 12px 0; }
  .vorstellung__logo img { width: 170px; }
  .vorstellung__text h1 { font-size: 26px; }
  .kacheln { grid-template-columns: 1fr; gap: 8px; }
  .kachel { aspect-ratio: 16 / 9; }
  .kachel span { font-size: 20px; left: 18px; bottom: 16px; }
  .regalzeile__kopf { flex-direction: column; gap: 4px; }
  .regalzeile__kopf h2 { font-size: 19px; }
  .stimmen__raster, .stimmen__raster--zwei { grid-template-columns: 1fr; }
  .fuss__raster { grid-template-columns: 1fr; gap: 24px; }
  .kopfzeile { grid-template-columns: 1fr; }
  .kopfzeile__bild { width: 140px; }
  .kopfzeile h1, .blatt__text h1 { font-size: 26px; }
  .galerie { grid-template-columns: 1fr; }
  .galerie__daumen { flex-direction: row; flex-wrap: wrap; order: 2; }
  .galerie__daumen label { width: 60px; }
  .ware__info h1 { font-size: 22px; }
  .ware__preis { font-size: 38px; }
  .notizen { grid-template-columns: 1fr; }
  .reiter > label { margin-right: 18px; }
}