/* dng tools, dngtools.de
   Ein Stylesheet fuer die gesamte Seite. Kein Build, keine Webfonts,
   keine externen Ressourcen. Mobil zuerst. */

:root {
  --akzent: #d20000;
  --akzent-dunkel: #a50f0f;
  --text: #3a3a3a;
  --text-hell: #6b6b6b;
  --grund: #ffffff;
  --grund-alt: #f6f6f6;
  --rahmen: #d8d8d8;
  --breite: 62rem;
  --radius: 4px;
}

* { box-sizing: border-box; }

/* Autorenstile schlagen das Browser-Standardblatt. Ohne diese Regel wuerde jede
   eigene display-Angabe, etwa .knopf, das hidden-Attribut aushebeln. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--grund);
}

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

a { color: var(--akzent); }
a:focus-visible,
button:focus-visible,
summary:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }

h1, h2, h3 { line-height: 1.25; }
h1 { font-size: 1.85rem; }
h2 { font-size: 1.45rem; margin-top: 2.5rem; }
h3 { font-size: 1.15rem; }

.inhalt {
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.sr-nur {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Kopf ---------- */

.kopf {
  border-bottom: 1px solid var(--rahmen);
  position: sticky;
  top: 0;
  background: var(--grund);
  z-index: 10;
}
.kopf__reihe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.6rem;
}
/* Das Logo ist quadratisch, deshalb Hoehe statt Breite begrenzen. */
.kopf__logo img { width: 54px; height: 54px; }
.kopf .knopf { padding: 0.6rem 1rem; font-size: 0.95rem; }

/* ---------- Schaltflaechen ---------- */

.knopf {
  display: inline-block;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--akzent);
  border-radius: var(--radius);
  background: var(--grund);
  color: var(--akzent);
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.knopf--haupt { background: var(--akzent); color: #fff; }
.knopf--haupt:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
.knopf:disabled { opacity: 0.6; cursor: progress; }

/* ---------- Formularfelder ---------- */

.feld { margin-bottom: 1rem; }
.feld__label { display: block; font-weight: 700; margin-bottom: 0.3rem; }
.feld input,
.feld select,
.feld textarea {
  width: 100%;
  padding: 0.7rem;
  border: 1px solid var(--rahmen);
  border-radius: var(--radius);
  font: inherit;
  color: inherit;
  background: var(--grund);
}
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
}
.feld--pflicht .feld__label::after { content: " *"; color: var(--akzent); }

.hinweis {
  background: var(--grund-alt);
  border-left: 4px solid var(--akzent);
  padding: 1rem 1.25rem;
  margin-block: 1.5rem;
}
.hinweis > :first-child { margin-top: 0; }
.hinweis > :last-child { margin-bottom: 0; }

/* ---------- Tabellen ---------- */

table { border-collapse: collapse; width: 100%; margin-block: 1rem; }
th, td { border: 1px solid var(--rahmen); padding: 0.6rem; text-align: left; }
th { background: var(--grund-alt); }

/* ---------- Fuss ---------- */

.fuss {
  margin-top: 4rem;
  border-top: 1px solid var(--rahmen);
  background: var(--grund-alt);
  padding-block: 2rem;
  font-size: 0.95rem;
}
.fuss__reihen { display: grid; gap: 1.5rem; }
.fuss ul { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.fuss li { margin-bottom: 0.4rem; }
.fuss__marke { margin-top: 1.5rem; color: var(--text-hell); }

@media (min-width: 40rem) {
  body { font-size: 18px; }
  h1 { font-size: 2.3rem; }
  h2 { font-size: 1.7rem; }
  .fuss__reihen { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Videos ---------- */

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  background: #111;
  border-radius: var(--radius);
  overflow: hidden;
}
.video iframe { width: 100%; height: 100%; border: 0; }
.video__start {
  width: 100%; height: 100%;
  border: 0; background: #111; color: #fff;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.6rem; cursor: pointer; font: inherit; padding: 1rem;
  text-align: center;
}
.video__start:hover .video__pfeil { border-left-color: #ff3b3b; }
.video__pfeil {
  width: 0; height: 0;
  border-left: 26px solid var(--akzent);
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
}
.video__text { font-weight: 700; }
.video__fein { font-size: 0.8rem; color: #b8b8b8; max-width: 22rem; line-height: 1.4; }

.videos { display: grid; gap: 1.5rem; }

/* ---------- Listen mit Dateien ---------- */

.dateien { list-style: none; padding: 0; margin: 1rem 0; }
.dateien li { border-bottom: 1px solid var(--rahmen); }
.dateien a {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 0; text-decoration: none; font-weight: 700;
}
.dateien a:hover { text-decoration: underline; }
.dateien .art { color: var(--text-hell); font-weight: 400; font-size: 0.9rem; white-space: nowrap; }

@media (min-width: 48rem) {
  .videos { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Formular, Feinheiten ---------- */

fieldset {
  border: 1px solid var(--rahmen);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-block: 1.5rem;
  min-width: 0;
}
legend { font-weight: 700; padding-inline: 0.5rem; }
.feld__fein { font-size: 0.85rem; color: var(--text-hell); margin: 0.35rem 0 0; }

/* ---------- Hero ---------- */

.hero { background: var(--grund-alt); border-bottom: 1px solid var(--rahmen); padding-block: 2.5rem 2rem; }
.hero h1 { margin-top: 0; }
.hero__unter { font-size: 1.1rem; max-width: 40rem; }
.preis { margin-block: 1.5rem 0.5rem; }
.preis strong { font-size: 2rem; color: var(--akzent); display: block; }
.preis__zusatz { font-size: 0.95rem; color: var(--text-hell); }
.bestand {
  display: inline-block; margin-block: 0.5rem 1.5rem;
  background: #fff; border: 1px solid var(--rahmen); border-radius: var(--radius);
  padding: 0.4rem 0.9rem; font-size: 0.95rem;
}
.bestand strong { color: var(--akzent); }

/* ---------- Galerie ---------- */

.galerie { margin-block: 2rem; }
.galerie__haupt img {
  width: 100%; border: 1px solid var(--rahmen);
  border-radius: var(--radius); background: #fff;
}
.galerie__vorschau {
  display: flex; gap: 0.5rem; overflow-x: auto;
  padding-block: 0.75rem; scrollbar-width: thin;
}
.galerie__vorschau button {
  flex: 0 0 72px; padding: 0; cursor: pointer;
  border: 2px solid var(--rahmen); border-radius: var(--radius);
  background: #fff; line-height: 0;
}
.galerie__vorschau button[aria-current="true"] { border-color: var(--akzent); }

/* ---------- Vorteile und Merkmale ---------- */

.vorteile { list-style: none; padding: 0; display: grid; gap: 0.9rem; }
.vorteile li { padding-left: 1.9rem; position: relative; }
.vorteile li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 0.7rem; height: 0.4rem;
  border-left: 3px solid var(--akzent); border-bottom: 3px solid var(--akzent);
  transform: rotate(-45deg);
}
.vorteile strong { display: block; }

.merkmale { display: grid; gap: 1.5rem; margin-block: 1.5rem; }
.merkmal {
  border: 1px solid var(--rahmen); border-radius: var(--radius);
  padding: 1.25rem; background: var(--grund);
}
.merkmal h3 { margin-top: 0; color: var(--akzent); }
.merkmal p:last-child { margin-bottom: 0; }

.liste-eng { margin: 0; padding-left: 1.2rem; }
.liste-eng li { margin-bottom: 0.3rem; }

/* ---------- Fragen ---------- */

.frage { border-bottom: 1px solid var(--rahmen); }
.frage summary {
  cursor: pointer; padding: 0.9rem 0; font-weight: 700;
  list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: "+"; color: var(--akzent); font-size: 1.4rem; line-height: 1; }
.frage[open] summary::after { content: "\2212"; }
.frage__text { padding-bottom: 0.9rem; margin-top: 0; }

@media (min-width: 48rem) {
  .vorteile { grid-template-columns: 1fr 1fr; gap: 1.2rem 2rem; }
  .merkmale { grid-template-columns: repeat(3, 1fr); }
  .hero { padding-block: 3.5rem 3rem; }
}

/* ---------- Bestellformular ---------- */

.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.reihe { display: grid; gap: 0 1rem; }

.feld--kasten { margin-bottom: 0.9rem; }
.feld--kasten label {
  display: flex; gap: 0.7rem; align-items: flex-start; font-weight: 400;
}
.feld--kasten input { width: auto; flex: 0 0 auto; margin-top: 0.4rem; }

.liefer { margin-bottom: 1rem; border: 1px solid var(--rahmen); border-radius: var(--radius); }
.liefer summary { cursor: pointer; padding: 0.8rem 1rem; font-weight: 700; }
.liefer[open] summary { border-bottom: 1px solid var(--rahmen); margin-bottom: 1rem; }
.liefer > *:not(summary) { padding-inline: 1rem; }
.liefer > *:last-child { padding-bottom: 0.5rem; }

.uebersicht {
  background: var(--grund-alt);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-block: 1.5rem;
}
.uebersicht h3 { margin-top: 0; }
.uebersicht table { margin: 0; }
.uebersicht td { border: 0; border-bottom: 1px solid var(--rahmen); padding: 0.5rem 0; }
.uebersicht tr:last-child td { border-bottom: 0; font-size: 1.1rem; }
.uebersicht td:last-child { text-align: right; white-space: nowrap; }
.uebersicht__frist { margin: 1rem 0 0; font-weight: 700; }
.uebersicht p:last-child { margin-bottom: 0; }

.fehler {
  background: #fff4f4;
  border-left: 4px solid var(--akzent);
  padding: 1rem 1.25rem;
  color: #8a1010;
  margin-block: 1.5rem;
}

#bestellen button[type="submit"] { width: 100%; font-size: 1.05rem; padding-block: 1rem; }
/* Luft unter dem Formular, damit der Absendeknopf nicht in der Bildschirmecke
   unter den mitfliegenden Schaltflaechen klebt. */
#bestellen { padding-bottom: 6rem; }

@media (min-width: 35rem) {
  .reihe { grid-template-columns: 1fr 1fr; }
  #bestellen button[type="submit"] { width: auto; min-width: 20rem; }
}

/* ---------- Widerrufsschaltflaeche ----------
   Paragraf 356a BGB verlangt eine gut sichtbare, gut lesbare und von anderen
   Elementen optisch abgesetzte Schaltflaeche. Ein Eintrag in einer Linkliste
   genuegt ausdruecklich nicht. Deshalb ein eigener Block im Fuss jeder Seite. */

.widerrufsknopf {
  border-bottom: 1px solid var(--rahmen);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}
.widerrufsknopf .knopf { background: var(--grund); }
.widerrufsknopf p { margin: 0; color: var(--text-hell); font-size: 0.9rem; }

/* ---------- Mitfliegende Schaltflaechen ----------
   Unten rechts, auf jeder Seite, DAUERHAFT sichtbar. Der Widerrufsknopf erfuellt
   hier die Sichtbarkeit nach Paragraf 356a BGB; er darf unter keinen Umstaenden
   je nach Scrollposition oder Seitenabschnitt ausgeblendet werden. Das
   Kontaktmenue faechert per details/summary auf und laeuft auch ohne JavaScript. */

.schweber {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}

.schweber__widerruf {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--grund);
  color: var(--akzent);
  border: 1px solid var(--rahmen);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
}
.schweber__widerruf:hover { border-color: var(--akzent); }
.schweber__widerruf svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Kontaktmenue */
.kontakt { position: relative; }
.kontakt > summary {
  list-style: none;
  cursor: pointer;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--akzent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
  margin-left: auto;
}
.kontakt > summary::-webkit-details-marker { display: none; }
.kontakt > summary:hover { background: var(--akzent-dunkel); }
.kontakt > summary svg { width: 26px; height: 26px; }
.kontakt > summary .schliessen { display: none; }
.kontakt[open] > summary .oeffnen { display: none; }
.kontakt[open] > summary .schliessen { display: block; }

.kontakt__liste {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.6rem);
  background: var(--grund);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  padding: 0.4rem;
  min-width: 13.5rem;
}
.kontakt__liste a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
}
.kontakt__liste a:hover { background: var(--grund-alt); }
.kontakt__liste svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--akzent); }
.kontakt__liste .zweitzeile {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--text-hell);
}

@media (max-width: 30rem) {
  .schweber { right: 0.75rem; bottom: 0.75rem; gap: 0.5rem; }
  .schweber__widerruf { font-size: 0.8rem; padding: 0.45rem 0.75rem; }
  .kontakt > summary { width: 52px; height: 52px; }
}

/* Solange das Kontaktmenue offen ist, tritt der Widerrufsknopf zurueck, damit
   das Menue ihn nicht halb verdeckt. */
.schweber:has(.kontakt[open]) .schweber__widerruf {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

/* Nummerierter Ablauf auf der Bestätigungsseite */
.ablauf { padding-left: 1.3rem; }
.ablauf li { margin-bottom: 0.6rem; }