/* ==== COOKIE-HINWEIS ==== */
.keks-hinweis {
  display: none;
}
.keks-offen .keks-hinweis {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;

  display: grid;
  gap: 10px;
  padding: 12px var(--p1) 14px;

  font-size: 0.85rem;
  line-height: 1.4;

  background: var(--w0);
  border-top: 1px solid var(--g4);
  box-shadow: 0 -10px 26px -14px rgb(23 27 36 / 0.3);
}
.kh-t a {
  font-weight: 700;
}
.kh-k {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.kh-b {
  min-height: 44px;
  padding: 8px 18px;

  font-weight: 700;
  color: var(--a1);

  background: var(--w0);
  border: 1.5px solid var(--a1);
  border-radius: 999px;
}
.kh-b:hover {
  color: var(--w0);

  background: var(--a1);
}
@media (min-width: 900px) {
  .keks-offen .keks-hinweis {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 28px;
    padding-left: max(var(--p1), calc((100% - var(--w1)) / 2 + var(--p1)));
    padding-right: max(var(--p1), calc((100% - var(--w1)) / 2 + var(--p1)));
  }
  .kh-b {
    min-width: 150px;
  }
}
@media (min-width: 1280px) {
  .keks-offen .keks-hinweis {
    font-size: 0.95rem;
  }
  .kh-b {
    min-width: 168px;
  }
}

/* ==== TASCHE (Seitenpanel) ==== */
.ts-sl {
  position: fixed;
  inset: 0;
  z-index: 110;

  background: rgb(23 27 36 / 0.42);

  visibility: hidden;
}
.ts-sl.on {
  visibility: visible;
}
.ts {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 120;

  display: flex;
  flex-direction: column;
  width: min(440px, 100%);

  background: var(--g1);
  box-shadow: var(--s2);

  visibility: hidden;
  translate: 100% 0;
  transition: translate 0.28s ease, visibility 0s linear 0.28s;
}
.ts.on {
  visibility: visible;
  translate: 0 0;
  transition: translate 0.28s ease, visibility 0s;
}
.ts-kp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;

  border-bottom: 1px solid var(--g3);
}
.ts-h {
  font-size: 1.4rem;
}
.ts-x {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;

  background: var(--w0);
  border: 1px solid var(--g4);
  border-radius: 50%;
}
.ts-x svg {
  width: 18px;
  height: 18px;
}
.ts-in {
  flex: 1;
  padding: 16px 20px 24px;
  overflow-y: auto;
}
.ts-fs {
  display: grid;
  gap: 10px;
  padding: 16px 20px 20px;

  background: var(--w0);
  border-top: 1px solid var(--g3);
}
.ts-fs .kn,
.ts-fs .kn-2 {
  width: 100%;
}

/* Zeilen der Tasche (Panel, Taschenseite, Kasse) */
.hw {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}
.hw p {
  margin: 0;
  padding: 12px 14px;

  font-size: 0.95rem;

  background: var(--g2);
  border-left: 4px solid var(--a1);
  border-radius: 10px;
}
.tl {
  display: grid;
  gap: 12px;

  list-style: none;
}
.tz {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  grid-template-areas: "b n p" "b m x";
  gap: 6px 14px;
  align-items: start;
  padding: 12px;

  background: var(--w0);
  border: 1px solid var(--g4);
  border-radius: var(--r2);
}
.tz-b {
  grid-area: b;
  width: 76px;
  height: 76px;

  object-fit: cover;

  background: var(--g2);
}
.tz-n {
  grid-area: n;
  min-width: 0;

  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.tz-n a {
  color: var(--g9);
  text-decoration: none;
}
.tz-n a:hover {
  color: var(--a1);
  text-decoration: underline;
}
.tz-g {
  display: block;

  font-size: 0.9rem;
  font-weight: 400;
  color: var(--g6);
}
.tz-p {
  grid-area: p;

  font-weight: 700;
  white-space: nowrap;
}
.tz-m {
  grid-area: m;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tz-m button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;

  font-size: 1.2rem;
  font-weight: 700;
  color: var(--a1);

  background: var(--g2);
  border: 1px solid var(--g4);
  border-radius: 50%;
}
.tz-m button:disabled {
  cursor: default;

  color: var(--g6);

  background: var(--g1);
}
.tz-m output {
  min-width: 28px;

  font-weight: 700;
  text-align: center;
}
.tz-x {
  grid-area: x;
  align-self: center;
  min-height: 44px;
  padding: 0 4px;

  font-size: 0.92rem;
  font-weight: 700;
  color: var(--a1);
  text-decoration: underline;

  background: none;
  border: 0;
}
.sm {
  display: grid;
  gap: 8px;
  margin: 0;
}
.sm div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.sm dt {
  color: var(--g6);
}
.sm dd {
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.sm .sm-g {
  margin-top: 6px;
  padding-top: 10px;

  font-size: 1.2rem;

  border-top: 1.5px solid var(--g9);
}
.sm .sm-g dt {
  font-weight: 700;
  color: var(--g9);
}
.sm-h {
  margin-top: 8px;

  font-size: 0.9rem;
  color: var(--g6);
}
.leer {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding: 28px 24px;

  background: var(--w0);
  border: 1px dashed var(--g4);
  border-radius: var(--r1);
}
.leer-z {
  font-family: var(--f1);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
}
.leer-l {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ==== STARTSEITE: COLLAGE ==== */
.hr {
  padding-top: clamp(20px, 3vw, 44px);
  padding-bottom: clamp(44px, 6vw, 84px);

  background: linear-gradient(180deg, var(--g1) 0%, var(--g1) 55%, var(--g2) 100%);
}
.hr-in {
  display: grid;
  gap: 28px;
}
.hr-c {
  position: relative;

  aspect-ratio: 1 / 0.8;
}
.hl {
  position: absolute;

  margin: 0;
  overflow: hidden;

  background: var(--g3);
  border-radius: var(--r1);
  box-shadow: var(--s2);
}
.hl img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}
.hl-1 {
  left: 0;
  top: 0;
  z-index: 1;

  width: 60%;
  aspect-ratio: 4 / 5;
}
.hl-2 {
  right: 0;
  top: 11%;
  z-index: 2;

  width: 45%;
  aspect-ratio: 2 / 3;
}
.hl-3 {
  display: none;
}
.hr-t .eb {
  margin-bottom: 14px;
}
.hr-t p.hr-p {
  max-width: 46ch;
  margin-top: 18px;

  font-size: 1.125rem;
  color: var(--g6);
}
.hr-t .pf {
  margin-top: 20px;

  font-size: 1.125rem;
}
.hr-f {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 18px;
  padding-top: 16px;

  font-size: 0.95rem;
  color: var(--g6);

  border-top: 1px solid var(--g4);
  list-style: none;
}
.hr-f li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 999px) {
  .hr-t {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .hr-t .pf {
    margin-top: 10px;
  }
  .hr-t p.hr-p {
    order: 3;
    margin-top: 8px;
  }
  .hr-f {
    order: 4;
    align-self: stretch;
  }
}
.hr-f li::before {
  content: "";

  width: 6px;
  height: 6px;

  background: var(--a1);
  border-radius: 50%;
}
@media (min-width: 1000px) {
  .hr-in {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(36px, 5vw, 84px);
  }
  .hr-c {
    aspect-ratio: 1 / 0.92;
  }
  .hl-1 {
    width: 58%;
  }
  .hl-2 {
    top: 7%;

    width: 40%;
  }
  .hl-3 {
    left: 34%;
    bottom: 0;
    z-index: 3;

    display: block;
    width: 40%;
    aspect-ratio: 4 / 5;
  }
}

/* ==== STARTSEITE: BENTO ==== */
.bn {
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(36px, 5vw, 60px);

  background: linear-gradient(180deg, var(--g2) 0%, var(--g1) 100%);
}
.sk {
  display: grid;
  gap: 10px;
  margin-bottom: clamp(22px, 3vw, 34px);
}
.sk .ld {
  margin-top: 4px;
}
.bn-g {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.bt {
  position: relative;

  display: grid;
  overflow: hidden;

  background: var(--w0);
  border: 1px solid var(--g4);
  border-radius: var(--r1);

  transition: box-shadow 0.2s ease;
}
.bt:hover {
  box-shadow: var(--s2);
}
.bt-w {
  grid-column: 1 / -1;
}
@media (min-width: 560px) and (max-width: 999px) {
  .bt-w {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .bt-w .bt-x {
    align-content: center;
  }
}
.bt-w .bt-b {
  aspect-ratio: 1 / 1;
  padding: 14px;

  background: var(--g2);
}
.bt-w .bt-b img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}
.bt-x {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px 20px 20px;
}
.bt-x h3 a {
  color: var(--g9);
  text-decoration: none;
}
.bt-x h3 a::after {
  position: absolute;
  inset: 0;

  content: "";
}
.bt-x h3 a:hover {
  color: var(--a1);
}
.bt-x .pf {
  position: relative;
  z-index: 1;

  min-height: 44px;
  padding: 0;
}
.bt-pr {
  position: relative;
  z-index: 1;

  font-weight: 700;
}
.bt-pr small,
.crd-p small {
  display: block;

  font-size: 0.9rem;
  font-weight: 400;
  color: var(--g6);
}
.bt-k .bt-b {
  aspect-ratio: 4 / 3;

  background: var(--g2);
}
.bt-k .bt-b img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: 50% 30%;
}
.bt-k .bt-x {
  padding: 14px 16px 16px;
}
.bt-k p {
  font-size: 0.95rem;
  color: var(--g6);
}
.bt-f {
  align-content: center;
  gap: 4px;
  min-height: 132px;
  padding: 18px;

  background: var(--g2);
}
.bt-f:hover {
  box-shadow: none;
}
.bt-z {
  font-family: var(--f1);
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.35rem);
  font-weight: 900;
  line-height: 1.05;
  color: var(--g9);
}
.bt-f p {
  font-size: 0.95rem;
  color: var(--g6);
}
.bt-f a {
  position: relative;
  z-index: 1;
}
.bt-f-d {
  color: var(--w0);

  background: var(--a1);
  border-color: var(--a1);
}
.bt-f-d .bt-z,
.bt-f-d p {
  color: var(--w0);
}
.bt-f-d a {
  color: var(--w0);
}
.bt-f-d a:hover {
  color: var(--w0);
}
@media (min-width: 1000px) {
  .bn-g {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
  .bt-w {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
  .bt-w .bt-b {
    aspect-ratio: auto;
    min-height: 100%;
  }
  .bt-w .bt-x {
    align-content: end;
    padding: 24px;
  }
  .bt-k1 {
    grid-column: 3;
    grid-row: 1;
  }
  .bt-k2 {
    grid-column: 4;
    grid-row: 1;
  }
  .bt-k3 {
    grid-column: 1 / span 2;
    grid-row: 3;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  }
  .bt-k3 .bt-b {
    aspect-ratio: auto;
    min-height: 100%;
  }
  .bt-k3 .bt-x {
    align-content: center;
    padding: 20px 24px;
  }
}

/* ==== STARTSEITE: LAUFBAND ==== */
.mq {
  position: relative;

  overflow: hidden;
  padding-top: 18px;
  padding-bottom: 18px;

  background: var(--g3);
  border-top: 1px solid var(--g4);
  border-bottom: 1px solid var(--g4);
}
.mq-sp {
  display: flex;
  gap: 0;
  width: max-content;

  list-style: none;

  animation: laufen 46s linear infinite;
}
.mq-sp li {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding-right: 22px;

  font-family: var(--f1);
  font-size: 1.2rem;
  font-weight: 800;
  white-space: nowrap;
}
.mq-sp li::after {
  content: "";

  width: 7px;
  height: 7px;

  background: var(--a1);
  border-radius: 50%;
}
.mq:hover .mq-sp,
.mq.halt .mq-sp {
  animation-play-state: paused;
}
.mq-p {
  position: absolute;
  top: 50%;
  right: 12px;
  z-index: 1;

  min-height: 44px;
  padding: 6px 14px;

  font-size: 0.85rem;
  font-weight: 700;
  color: var(--a1);

  background: var(--w0);
  border: 1px solid var(--g4);
  border-radius: 999px;

  translate: 0 -50%;
}
@keyframes laufen {
  from {
    translate: 0 0;
  }
  to {
    translate: -50% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mq-sp {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    padding: 0 var(--p1);

    animation: none;
  }
  .mq-sp li[aria-hidden="true"],
  .mq-p {
    display: none;
  }
  .hl,
  .hd-zl,
  .ts,
  .js .nv {
    transition: none;
  }
}

/* ==== STARTSEITE: SO GETRAGEN ==== */
.sg {
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(40px, 6vw, 80px);
}
.sg-g {
  display: grid;
  gap: 18px;
}
.sg-t {
  display: grid;
  overflow: hidden;

  background: var(--w0);
  border: 1px solid var(--g4);
  border-radius: var(--r1);
}
.sg-t img {
  width: 100%;
  aspect-ratio: 5 / 4;

  object-fit: cover;
}
.sg-t div {
  display: grid;
  gap: 6px;
  padding: 16px 18px 18px;
}
.sg-t p {
  color: var(--g6);
}
.sg-w {
  margin-top: 22px;
}
@media (min-width: 760px) {
  .sg-g {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==== STARTSEITE: NOTIZEN AUS DER ANPROBE ==== */
.qw {
  padding-top: clamp(48px, 7vw, 92px);
  padding-bottom: clamp(56px, 8vw, 104px);

  background: linear-gradient(180deg, var(--g1) 0%, var(--g2) 45%, var(--g1) 100%);
}
.qw-g {
  display: grid;
  gap: 18px;
}
.qn {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 22px 22px 20px;

  background: var(--w0);
  border: 1px solid var(--g4);
  border-radius: var(--r2);
  box-shadow: var(--s1);
}
.qn blockquote p {
  font-size: 1.05rem;
}
.qn-w {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--g6);
}
.qn-m {
  display: inline-block;
  margin-bottom: 2px;

  font-family: var(--f1);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--a1);
}
@media (min-width: 900px) {
  .qw-g {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
  }
  .qn-1 {
    grid-column: 1 / span 5;

    rotate: -1.2deg;
  }
  .qn-2 {
    grid-column: 6 / span 7;
    margin-top: 28px;

    rotate: 0.7deg;
  }
  .qn-3 {
    grid-column: 1 / span 4;

    rotate: 0.9deg;
  }
  .qn-4 {
    grid-column: 5 / span 4;
    margin-top: 34px;

    rotate: -0.6deg;
  }
  .qn-5 {
    grid-column: 9 / span 4;
    margin-top: -6px;

    rotate: 1.3deg;
  }
}

/* ==== STARTSEITE: MATERIAL ZUERST (Inversion) ==== */
.inv {
  padding-top: 8px;
  padding-bottom: clamp(48px, 7vw, 88px);
}
.inv-in {
  display: grid;
  gap: 28px;
  padding: clamp(28px, 5vw, 60px);

  color: var(--w0);

  background: var(--a1);
  border-radius: var(--r1);
  box-shadow: var(--s2);
}
.inv-in h2,
.inv-in h3,
.inv-in p,
.inv-in strong {
  color: var(--w0);
}
.inv-in .eb {
  color: var(--g3);
}
.inv-in .ld {
  color: var(--g2);
}
.inv-in a {
  color: var(--w0);
}
.inv-in a:hover,
.inv-in a:focus-visible {
  color: var(--w0);
}
.inv-in a:focus-visible {
  outline-color: var(--w0);
}
.inv-g {
  display: grid;
  gap: 12px;

  list-style: none;
}
.inv-g li {
  display: grid;
  gap: 4px;
  padding: 14px 16px;

  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: var(--r2);
}
.inv-g strong {
  font-family: var(--f1);
  font-size: 1.15rem;
  font-weight: 800;
}
.inv-g span {
  font-size: 0.95rem;
  color: var(--g2);
}
@media (min-width: 900px) {
  .inv-in {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 48px;
  }
  .inv-g {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ==== FRAGEN (Akkordeon) ==== */
.fq {
  padding-top: clamp(24px, 4vw, 48px);
  padding-bottom: 8px;
}
.fq-in {
  display: grid;
  gap: 24px;
}
.fq-l {
  display: grid;
  gap: 10px;
}
.fq-d {
  background: var(--w0);
  border: 1px solid var(--g4);
  border-radius: var(--r2);
}
.fq-d summary {
  position: relative;

  display: block;
  min-height: 56px;
  padding: 16px 56px 16px 20px;

  font-family: var(--f1);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.3;

  cursor: pointer;
  list-style: none;
}
.fq-d summary::-webkit-details-marker {
  display: none;
}
.fq-d summary::after {
  position: absolute;
  top: 50%;
  right: 20px;

  content: "+";

  font-family: var(--f2);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--a1);

  translate: 0 -50%;
  transition: rotate 0.2s ease;
}
.fq-d[open] summary::after {
  rotate: 45deg;
}
.fq-d div {
  padding: 0 20px 18px;
}
.fq-d div p {
  color: var(--g9);
}
@media (min-width: 900px) {
  .fq-in {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    gap: 48px;
    align-items: start;
  }
}

/* ==== ABSCHNITTE ALLGEMEIN ==== */
.sc {
  padding-top: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(20px, 3vw, 36px);
}
.sc-t {
  background: linear-gradient(180deg, var(--g1) 0%, var(--g2) 100%);
  padding-bottom: clamp(36px, 5vw, 64px);
}
.sc-u {
  background: linear-gradient(180deg, var(--g2) 0%, var(--g1) 100%);
}
.crd {
  padding: clamp(18px, 3vw, 28px);

  background: var(--w0);
  border: 1px solid var(--g4);
  border-radius: var(--r1);
}
.crd h2,
.crd h3 {
  margin-bottom: 10px;
}
.crd ul,
.crd ol {
  padding-left: 1.2em;
}
.crd li + li {
  margin-top: 6px;
}
.crd-a {
  border-left: 5px solid var(--a1);
}
.crd-k h2 {
  font-size: 1.35rem;
}
.crd p + h3,
.crd ul + h3 {
  margin-top: 16px;
}
.ph + .sc,
.ph + div > .sc {
  padding-top: clamp(22px, 3vw, 34px);
}
.g2 {
  display: grid;
  gap: 18px;
}
.g3 {
  display: grid;
  gap: 16px;
}
.g2 > *,
.g3 > *,
.lg-k > *,
.ab > * {
  min-width: 0;
}
@media (min-width: 860px) {
  .g2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
  .g3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}
.tw {
  min-width: 0;
  overflow-x: auto;

  background: var(--w0);
  border: 1px solid var(--g4);
  border-radius: var(--r2);

  scrollbar-width: thin;
  scrollbar-color: var(--a1) transparent;
}
.tb {
  width: 100%;
  min-width: 520px;

  font-size: 0.98rem;
}
.tb caption {
  padding: 14px 16px 6px;

  font-weight: 700;
  text-align: left;
}
.tb th,
.tb td {
  padding: 11px 16px;

  text-align: left;
  vertical-align: top;

  border-bottom: 1px solid var(--g3);
}
.tb thead th {
  font-size: 0.9rem;
  color: var(--g6);

  background: var(--g2);
}
.tb tbody th {
  font-weight: 700;
}
.tb tr:last-child th,
.tb tr:last-child td {
  border-bottom: 0;
}
.tb td.zz {
  text-align: right;
  white-space: nowrap;
}
.tb-2 {
  min-width: 0;
}
.tb-2 th[scope="row"] {
  width: 38%;
}
.tb-2 td {
  overflow-wrap: anywhere;
}
.st {
  display: grid;
  gap: 14px;

  list-style: none;
  counter-reset: schritt;
}
.st > li {
  position: relative;

  padding: 18px 20px 18px 76px;

  background: var(--w0);
  border: 1px solid var(--g4);
  border-radius: var(--r2);

  counter-increment: schritt;
}
.st > li::before {
  position: absolute;
  top: 14px;
  left: 18px;

  content: counter(schritt);

  font-family: var(--f1);
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
  color: var(--a1);
}
.st h3 {
  margin-bottom: 6px;
}
.zl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.ab {
  display: grid;
  gap: 18px;
  align-items: start;
}
.ab img {
  width: 100%;
  max-height: min(60vh, 640px);

  object-fit: cover;
}
.ab-b {
  overflow: hidden;

  background: var(--g3);
  border-radius: var(--r1);
}
@media (min-width: 900px) {
  .ab {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 36px;
  }
  .ab-r {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
  .ab-r .ab-b {
    order: 2;
  }
}
.ga {
  margin-top: 6px;

  font-size: 0.95rem;
  color: var(--g6);
}
.zi {
  margin: 0;
  padding: clamp(22px, 4vw, 36px);

  background: var(--w0);
  border: 1px solid var(--g4);
  border-radius: var(--r1);
  box-shadow: 14px 14px 0 -2px var(--g3);
}
.zi p {
  font-family: var(--f1);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.7rem);
  font-weight: 800;
  line-height: 1.35;
}
.kz {
  display: grid;
  gap: 14px;
}
.kz div {
  padding: 18px;

  background: var(--g2);
  border-radius: var(--r2);
}
.kz strong {
  display: block;

  font-family: var(--f1);
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1.1;
}
.kz span {
  font-size: 0.95rem;
  color: var(--g6);
}
@media (min-width: 700px) {
  .kz {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.kz-o {
  margin-top: 22px;
}
.adr {
  white-space: pre-line;
}
.tb tr[id] {
  scroll-margin-top: calc(var(--hh) + 24px);
}
.tb tr:target th,
.tb tr:target td {
  background: var(--g2);
}

/* ==== KATALOG ==== */
.kt-sp {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.kt-g {
  padding-top: clamp(28px, 4vw, 52px);

  scroll-margin-top: calc(var(--hh) + 16px);
}
.kt-k {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}
.kt-k p {
  max-width: 68ch;

  color: var(--g6);
}
.kt-r {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 860px) {
  .kt-r {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}
@media (min-width: 1180px) {
  .kt-r {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.crd-w {
  position: relative;

  display: grid;
  align-content: start;
  gap: 6px;
  padding: 10px 10px 14px;

  background: var(--w0);
  border: 1px solid var(--g4);
  border-radius: var(--r1);

  transition: box-shadow 0.2s ease;
}
.crd-w:hover {
  box-shadow: var(--s2);
}
.crd-w img {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 6px;

  object-fit: cover;

  background: var(--g2);
}
.crd-w h3 {
  padding: 0 4px;

  font-size: 1.08rem;
}
.crd-w h3 a {
  color: var(--g9);
  text-decoration: none;
}
.crd-w h3 a::after {
  position: absolute;
  inset: 0;

  content: "";
}
.crd-w h3 a:hover {
  color: var(--a1);
}
.crd-w p + p {
  margin-top: 0;
}
.crd-f,
.crd-gr {
  padding: 0 4px;

  font-size: 0.92rem;
  color: var(--g6);
}
.crd-p {
  position: relative;
  z-index: 1;

  padding: 0 4px;

  font-weight: 700;
}

/* ==== PRODUKTSEITE ==== */
.pd {
  padding-top: 18px;
}
.pd-z {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 8px;

  font-weight: 700;
}
.pd-g {
  display: grid;
  gap: 24px;
}
.pd-b {
  align-self: start;
  justify-self: center;
  width: 100%;
  max-width: min(340px, 100%);
  padding: 14px;

  background: var(--w0);
  border: 1px solid var(--g4);
  border-radius: var(--r1);
  box-shadow: var(--s1);
}
.pd-b img {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 46vh;

  object-fit: contain;

  background: var(--g2);
}
.pd-i {
  display: grid;
  align-content: start;
  gap: 16px;
}
.pd-i h1 {
  font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem);
}
.pd-fa {
  color: var(--g6);
}
.pd-p {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}
.pd-p small {
  display: block;
  margin-top: 4px;

  font-size: 0.92rem;
  font-weight: 400;
  color: var(--g6);
}
.pd-gr {
  margin: 0;
  padding: 0;

  border: 0;
}
.pd-gr legend {
  margin-bottom: 8px;
  padding: 0;

  font-weight: 700;
}
.pd-gr legend a {
  margin-left: 10px;

  font-weight: 400;
}
.gr-l {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gr-o {
  position: relative;
}
.gr-o input {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  margin: 0;

  cursor: pointer;
  appearance: none;
}
.gr-o label {
  display: inline-grid;
  place-items: center;
  min-width: 60px;
  min-height: 52px;
  padding: 6px 12px;

  font-weight: 700;
  line-height: 1.1;
  text-align: center;

  background: var(--w0);
  border: 1.5px solid var(--g4);
  border-radius: 12px;
}
.gr-o input:checked + label {
  color: var(--w0);

  background: var(--g9);
  border-color: var(--g9);
}
.gr-o input:focus-visible + label {
  outline: 3px solid var(--a1);
  outline-offset: 2px;
}
.gr-o input:disabled {
  cursor: not-allowed;
}
.gr-o input:disabled + label {
  color: var(--g6);

  background: var(--g2);
  border-style: dashed;
}
.gr-o label small {
  display: block;

  font-size: 0.8rem;
  font-weight: 400;
}
.pd-k {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
}
.pd-m {
  display: grid;
  gap: 6px;
}
.pd-m label {
  font-weight: 700;
}
.pd-m select {
  min-width: 96px;
  min-height: 52px;
  padding: 8px 12px;

  background: var(--w0);
  border: 1.5px solid var(--g4);
  border-radius: 12px;
}
.pd-k .kn {
  flex: 1 1 220px;
}
.pd-ms {
  min-height: 1.6em;

  font-weight: 700;
}
.pd-ms.fe {
  color: var(--a3);
}
.pd-ms a {
  margin-left: 6px;
}
.pd-v {
  display: grid;
  gap: 8px;
  padding: 16px 18px;

  font-size: 0.95rem;

  background: var(--g2);
  border-radius: var(--r2);

  list-style: none;
}
.pd-v li {
  padding-left: 22px;

  background: radial-gradient(circle at 6px 0.8em, var(--a1) 0 3.5px, transparent 4px) no-repeat;
}
.pd-d {
  margin-top: clamp(32px, 5vw, 56px);
}
.pd-d-g {
  display: grid;
  align-items: start;
  gap: 22px;
}
.pd-d-g .ga {
  margin-top: 16px;
}
.pd-w {
  margin-top: clamp(36px, 5vw, 60px);
}
.pd-w h2 {
  margin-bottom: 18px;

  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.8rem);
}
.pd-d-g h2 {
  margin-bottom: 12px;
}
@media (min-width: 900px) {
  .pd-g {
    grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1fr);
    gap: 48px;
  }
  .pd-b {
    justify-self: start;
    max-width: min(560px, 100%, calc(62vh + 30px));
  }
  .pd-b img {
    max-height: 62vh;
  }
  .pd-d-g {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 36px;
  }
}

/* ==== KASSE ==== */
.ks {
  display: grid;
  gap: 24px;
}
.ks-f {
  display: grid;
  align-content: start;
  gap: 18px;
  min-width: 0;
}
form.ks-f > .kn {
  justify-self: start;
  min-width: 240px;
}
.ks-b {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 3vw, 28px);

  background: var(--w0);
  border: 1px solid var(--g4);
  border-radius: var(--r1);
}
.ks-b h2 {
  font-size: 1.35rem;
}
.ks-2 {
  display: grid;
  gap: 16px;
}
@media (min-width: 620px) {
  .ks-2 {
    grid-template-columns: 0.42fr 1fr;
  }
}
.ks-l {
  padding: 12px 14px;

  font-weight: 700;

  background: var(--g2);
  border-radius: 12px;
}
.zb {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;

  background: var(--g2);
  border: 1.5px solid var(--a1);
  border-radius: 12px;
}
.zb input {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;

  accent-color: var(--a1);
}
.zb span {
  font-size: 0.95rem;
  color: var(--g6);
}
.zb strong {
  display: block;

  color: var(--g9);
}
.ks-s {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
}
.zs {
  display: grid;
  gap: 14px;
  padding: clamp(18px, 3vw, 26px);

  background: var(--w0);
  border: 1px solid var(--g4);
  border-radius: var(--r1);
  box-shadow: var(--s1);
}
.zs h2 {
  font-size: 1.35rem;
}
.zs-l {
  display: grid;
  gap: 10px;

  list-style: none;
}
.zs-l li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding-bottom: 10px;

  border-bottom: 1px solid var(--g3);
}
.zs-l span {
  min-width: 0;

  overflow-wrap: anywhere;
}
.zs-l small {
  display: block;

  color: var(--g6);
}
.zs-l b {
  white-space: nowrap;
}
.ks-s .kn {
  width: 100%;
  min-height: 58px;

  font-size: 1.1rem;
}
.ks-m {
  padding: 14px 16px;

  font-weight: 700;

  background: var(--w0);
  border: 1.5px solid var(--a3);
  border-radius: 12px;
}
.ks-m ul {
  margin-top: 6px;
  padding-left: 1.2em;

  font-weight: 400;
}
@media (min-width: 720px) {
  .ks[data-taschenseite] {
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
    gap: 28px;
    align-items: start;
  }
}
/* niedrige Desktop-Fenster: Seitenkopf und Übersicht dichter, damit der Bestellknopf über dem Cookie-Hinweis bleibt */
@media (min-width: 1000px) and (max-height: 860px) {
  .ph {
    padding-top: 18px;
    padding-bottom: 14px;
  }
  .ph-in {
    min-height: 0;
  }
  .ph .eb {
    display: none;
  }
  .ph .ld {
    margin-top: 8px;
  }
  .ph + .sc,
  .ph + div > .sc {
    padding-top: 18px;
  }
  .zs {
    gap: 10px;
    padding: 18px 20px;
  }
  .zs h2 {
    font-size: 1.15rem;
  }
  .zs-l li {
    padding-bottom: 6px;
  }
  .sm {
    gap: 4px;
  }
  .sm .sm-g {
    margin-top: 2px;
    padding-top: 6px;

    font-size: 1.1rem;
  }
  .ks-s {
    gap: 10px;
  }
  .ks-s .kn {
    min-height: 52px;
  }
}
@media (min-width: 980px) {
  .ks {
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    gap: 36px;
    align-items: start;
  }
  .ks-s {
    position: sticky;
    top: calc(var(--hh) + 20px);
  }
}
.vd {
  display: grid;
  gap: 18px;
}
.vd-n {
  display: inline-block;
  padding: 8px 16px;

  font-family: var(--f1);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  font-weight: 900;
  letter-spacing: 0.02em;

  background: var(--w0);
  border: 1.5px dashed var(--a1);
  border-radius: 12px;
}

/* ==== SENDUNGSSTATUS ==== */
.sts {
  display: grid;
  gap: 10px;

  list-style: none;
}
.sts li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;

  color: var(--g6);

  background: var(--g1);
  border: 1px solid var(--g3);
  border-radius: 12px;
}
.sts li::before {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;

  content: "";

  background: var(--w0);
  border: 2px solid var(--g4);
  border-radius: 50%;
}
.sts li.fertig {
  color: var(--g9);
}
.sts li.fertig::before {
  background: var(--g3);
  border-color: var(--a1);
}
.sts li.on {
  font-weight: 700;
  color: var(--g9);

  background: var(--w0);
  border-color: var(--a1);
}
.sts li.on::before {
  background: var(--a1);
  border-color: var(--a1);
  box-shadow: inset 0 0 0 7px var(--w0);
}

/* ==== RECHTSTEXTE ==== */
.lg {
  display: grid;
  gap: 18px;
}
.lg-c {
  min-width: 0;
  padding: clamp(20px, 3.5vw, 34px);

  overflow-wrap: break-word;

  background: var(--w0);
  border: 1px solid var(--g4);
  border-radius: var(--r1);

  scroll-margin-top: calc(var(--hh) + 16px);
}
@media (max-width: 699px) {
  .lg-c p,
  .lg-c li {
    hyphens: auto;
  }
}
.lg-c h2 {
  margin-bottom: 12px;

  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem);
  hyphens: auto;
}
.lg-c h3 {
  margin-top: 18px;
  margin-bottom: 6px;

  font-size: 1.1rem;
}
.lg-c ul,
.lg-c ol {
  margin-top: 8px;
  padding-left: 1.2em;
}
.lg-c li + li {
  margin-top: 4px;
}
.lg-c .tw {
  margin-top: 12px;
}
.lg-n {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lg-w {
  padding: 18px 20px;

  background: var(--g2);
  border-left: 5px solid var(--a1);
  border-radius: 12px;
}
.lg-w p + p {
  margin-top: 0.7em;
}
.lg-f {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 18px 20px;

  font-family: var(--f2);

  background: var(--g1);
  border: 1.5px dashed var(--g4);
  border-radius: 12px;

  list-style: none;
}
@media (min-width: 1000px) {
  .lg {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
  .lg-n {
    position: sticky;
    top: calc(var(--hh) + 20px);

    display: grid;
    gap: 6px;
  }
  .lg-n .chp {
    justify-content: flex-start;
  }
  .lg-k {
    display: grid;
    gap: 18px;
    min-width: 0;
  }
}
.lg-k {
  display: grid;
  gap: 18px;
  min-width: 0;
}

/* ==== 404 ==== */
.nf {
  display: grid;
  gap: 18px;
  justify-items: start;
  padding-top: clamp(40px, 7vw, 96px);
  padding-bottom: 20px;
}
.nf-z {
  font-family: var(--f1);
  font-size: clamp(4rem, 3rem + 5vw, 7.5rem);
  font-weight: 900;
  line-height: 1;
  color: var(--a1);
}