/* ============================================================
   XDiBee — Technik für Imker · Honig-Look
   MOBILE-FIRST. Zielgruppe: Imker Ø 55 J. → große, lesbare Schrift,
   sachlich-vertrauensvoll, "Made in Germany".
   ============================================================ */

@font-face{
  font-family:'Fraunces';
  src:url('../assets/fonts/fraunces-var.woff2') format('woff2');
  font-weight:300 900; font-display:swap;
}
@font-face{
  font-family:'Karla';
  src:url('../assets/fonts/karla-var.woff2') format('woff2');
  font-weight:300 800; font-display:swap;
}

:root{
  --honig:#E8A417;
  --honig-dunkel:#B87708;
  --honig-text:#8A5906;   /* kleine Texte: 4,95:1 auch auf dem waermsten Grund */
  --honig-hell:#F6C654;
  --wachs:#FBF5E9;
  --wachs-tief:#F3E9D2;
  --deep:#2A1F12;
  --deep-soft:#5C4B33;
  --weiss:#FFFDF8;
  --gruen:#4C7A3F;
  --radius:16px;
  --radius-taste:12px;         /* Schaltflächen: abgerundet, nicht rund */
  --radius-klein:8px;          /* Abzeichen, kleine Elemente */
  --schatten:0 16px 44px -18px rgba(42,31,18,.30);
  --rand:20px;                 /* Seitenabstand mobil */
  --header-h:60px;             /* Höhe der klebenden Kopfleiste (mobil) */
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Karla', 'Segoe UI', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

/* Sprungziele dürfen NIE unter der klebenden Kopfleiste landen.
   Ohne das verschwindet die Überschrift des Ziel-Abschnitts hinter dem Header
   (Dima 28.07.: „Warteliste sah ganz schlimm aus"). */
[id]{scroll-margin-top:calc(var(--header-h) + 20px)}
body{
  font-family:var(--font-body);
  background:var(--wachs);
  color:var(--deep);
  line-height:1.62;
  font-size:18px;             /* großzügig für 55+ */
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;          /* nie horizontal scrollen */
  overflow-wrap:break-word;
}

.waben-bg{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 2 52 16v28L28 58 4 44V16z M28 60 52 74v28L28 116 4 102V74z' fill='none' stroke='%23E8A417' stroke-opacity='.09' stroke-width='1.6'/%3E%3C/svg%3E");
  background-size:56px 97px;
}

h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.14;letter-spacing:-.01em}
h1{font-size:2.35rem}
h2{font-size:1.52rem}
h3{font-size:1.2rem}
@media (min-width:820px){ h2{font-size:1.7rem} h3{font-size:1.25rem} }
p{color:var(--deep-soft)}
a{color:inherit}
img{max-width:100%;height:auto;display:block}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding-left:var(--rand);padding-right:var(--rand)}

/* ---------- Header + Burger ---------- */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(251,245,233,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(42,31,18,.08);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:8px var(--rand);max-width:1180px;margin:0 auto;
}
.nav .logo{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:1.15rem;text-decoration:none;flex-shrink:0}
.nav .logo img{height:30px;width:auto}
.nav .cta{
  background:var(--deep);color:var(--wachs);padding:8px 14px;border-radius:var(--radius-taste);
  text-decoration:none;font-weight:700;font-size:.88rem;white-space:nowrap;
}
@media (min-width:900px){
  .nav{padding:12px var(--rand)}
  .nav .logo{font-size:1.3rem}
  .nav .logo img{height:38px}
  .nav .cta{padding:10px 16px;font-size:.95rem}
}
.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:46px;height:46px;border:none;background:transparent;cursor:pointer;padding:11px;flex-shrink:0;
}
.burger span{display:block;height:2.5px;border-radius:2px;background:var(--deep);transition:transform .25s, opacity .2s}
.burger.auf span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.auf span:nth-child(2){opacity:0}
.burger.auf span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* Slide-down-Menü (mobil) */
.menue{
  display:none;flex-direction:column;
  background:var(--wachs);border-top:1px solid rgba(42,31,18,.08);
  padding:8px var(--rand) 20px;
}
.menue.auf{display:flex}
.menue a{
  text-decoration:none;color:var(--deep);font-weight:600;font-size:1.1rem;
  padding:14px 4px;border-bottom:1px solid rgba(42,31,18,.07);
}
.menue a:last-child{border-bottom:none}
.nav-links-desktop{display:none}

@media (min-width:900px){
  .burger{display:none}
  .menue{display:none !important}
  .nav-links-desktop{display:flex;gap:22px;margin-left:auto;margin-right:20px;font-weight:500}
  .nav-links-desktop a{text-decoration:none;color:var(--deep-soft);transition:color .2s}
  .nav-links-desktop a:hover{color:var(--honig-dunkel)}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:16px 24px;border-radius:var(--radius-taste);font-weight:700;font-size:1.05rem;text-decoration:none;
  transition:transform .15s, box-shadow .2s, background .2s;
}
.btn-gold{background:var(--honig);color:var(--deep);box-shadow:0 10px 24px -10px rgba(184,119,8,.55)}
.btn-gold:hover{transform:translateY(-2px);background:var(--honig-hell)}
.btn-ghost{border:2px solid rgba(42,31,18,.22);color:var(--deep)}
.btn-ghost:hover{border-color:var(--honig-dunkel);color:var(--honig-dunkel)}

/* ---------- Hero ---------- */
/* Abstand nach unten ist Pflicht: sonst klebt der Inhalt an der dunklen
   Öko-Fläche darunter (Dima 30.07.2026). */
.hero{padding:26px 0 44px;overflow:hidden}
.hero .kicker{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--wachs-tief);border:1px solid rgba(184,119,8,.25);
  color:var(--honig-text);font-weight:700;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;
  padding:7px 14px;border-radius:var(--radius-klein);margin-bottom:18px;
}
.hero h1{font-size:clamp(2rem,8.2vw,4.4rem)}
.hero h1 .gold{color:var(--honig-dunkel);font-style:italic}
.hero p.lead{font-size:1.06rem;margin:16px 0 22px}
.hero .aktionen{display:flex;flex-direction:column;gap:12px}
.hero .aktionen .btn{width:100%}
.hero .foto{
  position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--schatten);margin-top:34px;
}
.hero .foto img{width:100%;object-fit:cover;aspect-ratio:4/3}
.hero .foto .tag{
  position:absolute;left:14px;bottom:14px;background:rgba(42,31,18,.85);color:var(--wachs);
  padding:8px 14px;border-radius:var(--radius-klein);font-size:.82rem;font-weight:600;
}
@media (min-width:900px){
  .hero{padding:64px 0 88px}
  .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
  .hero .aktionen{flex-direction:row}
  .hero .aktionen .btn{width:auto}
  .hero .foto{margin-top:0;transform:rotate(1.4deg)}
  .hero p.lead{max-width:34rem}
}

/* ---------- Vertrauens-Leiste ---------- */
.trust{background:var(--deep);color:var(--wachs)}
.trust .wrap{display:grid;grid-template-columns:1fr 1fr;gap:20px 14px;padding-top:30px;padding-bottom:30px}
.trust .item{display:flex;flex-direction:column;gap:2px}
.trust .zahl{font-family:var(--font-display);font-size:1.7rem;color:var(--honig-hell);line-height:1}
.trust .txt{font-size:.88rem;color:#CDBFA6}
@media (min-width:700px){ .trust .wrap{grid-template-columns:repeat(4,1fr)} }

/* ---------- Abschnitts-Grundlagen ---------- */
/* Großzügigere Abstände = wertigerer Eindruck. Kein Abschnitt ohne Luft. */
section{padding:48px 0}
.section-kopf{max-width:46rem;margin-bottom:28px}
.section-kopf .label{color:var(--honig-text);font-weight:700;font-size:.88rem;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:8px}
.section-kopf p{margin-top:12px;font-size:1.08rem}
@media (min-width:900px){ section{padding:80px 0} }

/* ---------- Ökosystem ---------- */
.oeko{background:var(--deep);color:var(--wachs)}
.oeko h2{color:var(--weiss)}
.oeko .section-kopf p{color:#CDBFA6}
.oeko .drei{display:flex;flex-direction:column;gap:10px}
.oeko .karte{
  background:rgba(251,245,233,.06);border:1px solid rgba(232,164,23,.22);
  border-radius:var(--radius);padding:16px 18px;
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;
}
.oeko .karte .nr{font-family:var(--font-display);font-size:1.5rem;color:var(--honig-hell);font-style:italic;grid-row:span 2}
.oeko .karte h3{margin:0 0 4px;color:var(--weiss);font-size:1.1rem}
.oeko .karte p{font-size:.96rem;grid-column:2}
.oeko .karte p{color:#CDBFA6}
@media (min-width:820px){ .oeko .drei{flex-direction:row} .oeko .karte{flex:1} }

/* ---------- "Warum wiegen" — Schmerzpunkte ---------- */
.warum{background:var(--wachs-tief)}
.warum .liste{display:flex;flex-direction:column;gap:10px}
.warum .zeile{
  display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;
  background:var(--weiss);border:1px solid rgba(42,31,18,.08);border-radius:var(--radius);padding:15px 16px;
}
.warum .zeile .hex{font-size:1.35rem;line-height:1;margin-top:1px}
.warum .zeile h3{margin-bottom:2px;font-size:1.06rem}
.warum .zeile p{font-size:.94rem}
@media (min-width:820px){ .warum .liste{display:grid;grid-template-columns:1fr 1fr;gap:16px} }

/* ---------- Apps ---------- */
.app-held{
  background:linear-gradient(150deg, var(--weiss) 0%, var(--wachs-tief) 100%);
  border:1px solid rgba(184,119,8,.20);border-radius:20px;
  padding:20px var(--rand);box-shadow:var(--schatten);margin-bottom:22px;
}
.app-held .badge-erste{display:inline-block;background:var(--honig);color:var(--deep);font-weight:800;font-size:.82rem;letter-spacing:.07em;text-transform:uppercase;padding:5px 11px;border-radius:var(--radius-klein);margin-bottom:14px}
.app-held .kopf{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.app-held .kopf img{width:58px;height:58px;border-radius:14px;box-shadow:0 8px 18px -8px rgba(42,31,18,.4)}
.app-held .kopf h3{font-size:1.55rem}
.app-held ul{list-style:none;margin:12px 0 16px}
.app-held li{padding-left:26px;position:relative;margin-bottom:7px;color:var(--deep-soft);font-size:.96rem}
.app-held li::before{content:"⬢";color:var(--honig-dunkel);position:absolute;left:0}
/* App-Screens: mobil KEINE Briefmarken nebeneinander, sondern ein Wisch-Streifen
   mit großen, wirklich lesbaren Screens (Dima 28.07.). */
.telefone{
  display:flex;gap:14px;margin-top:22px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding-bottom:6px;margin-left:calc(var(--rand) * -1);margin-right:calc(var(--rand) * -1);
  padding-left:var(--rand);padding-right:var(--rand);
}
.telefone::-webkit-scrollbar{display:none}
.telefon{
  flex:0 0 66%;scroll-snap-align:center;
  border-radius:18px;overflow:hidden;border:4px solid var(--deep);
  box-shadow:0 18px 34px -18px rgba(42,31,18,.5);background:var(--deep);
}
.telefon img{width:100%;display:block}
.telefone-hinweis{font-size:.85rem;color:var(--deep-soft);margin-top:10px;text-align:center}
@media (min-width:900px){
  .app-held{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center;padding:40px}
  .app-held .telefone{margin-top:0;overflow:visible;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
  .telefon{flex:1 1 33%}
  .telefone-hinweis{display:none}
  .telefon:nth-child(1){transform:rotate(-3deg) translateY(8px)}
  .telefon:nth-child(3){transform:rotate(3deg) translateY(8px)}
}

/* App-Liste mobil: Icon links, Text rechts, kompakt statt Karte auf Karte
   (Dima 28.07.: Startseite war 12 Bildschirme lang und wirkte monoton). */
.app-gitter{display:flex;flex-direction:column;gap:10px}
.app-karte{
  background:var(--weiss);border:1px solid rgba(42,31,18,.09);border-radius:var(--radius);padding:16px;
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
}
.app-karte .kopf{display:contents}
.app-karte img.icon{width:46px;height:46px;border-radius:11px;flex-shrink:0;grid-row:span 3}
.app-karte h3{font-size:1.1rem;align-self:center}
.app-karte h3 a{text-decoration:none;color:inherit}
.app-karte .beta{display:inline-block;background:var(--wachs-tief);color:var(--deep-soft);font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:1px solid rgba(42,31,18,.15);padding:2px 8px;border-radius:var(--radius-klein);margin-left:6px;vertical-align:middle}
/* Text wird VOLLSTÄNDIG gezeigt, nichts abschneiden (Dima 28.07.: „da würden
   Informationen verloren gehen"). Kompakt wird über Schriftgröße und Abstände erreicht. */
.app-karte p{font-size:.94rem;margin:2px 0 9px;grid-column:2}
.app-karte .store-zeile{grid-column:2}
.store-zeile{display:flex;gap:8px;flex-wrap:wrap}
.store-badge{display:inline-flex;align-items:center;gap:6px;background:var(--deep);color:var(--wachs);text-decoration:none;font-size:.86rem;font-weight:600;padding:12px 16px;border-radius:9px;transition:background .2s}
.store-badge:hover{background:var(--honig-dunkel)}
.store-badge svg{width:15px;height:15px;fill:currentColor}
@media (min-width:820px){ .app-gitter{display:grid;grid-template-columns:1fr 1fr;gap:20px} }

/* ---------- Waagen ---------- */
.waagen{background:var(--wachs-tief)}
/* Waagen mobil: Foto links, Text rechts. Spart gut einen Bildschirm und
   bringt Rhythmus in die sonst gleichförmige Karten-Folge. */
.produkte{display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
.produkt{
  background:var(--weiss);border-radius:var(--radius);overflow:hidden;
  border:1px solid rgba(42,31,18,.08);box-shadow:0 12px 28px -18px rgba(42,31,18,.2);
  display:grid;grid-template-columns:38% 1fr;align-items:stretch;
}
.produkt img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto;min-height:132px}
.produkt .inhalt{padding:14px 16px}
.produkt .inhalt h3{font-size:1.06rem}
.produkt .inhalt h3 a{text-decoration:none;color:inherit}
.produkt .inhalt p{font-size:.94rem;margin-top:4px}
.produkt .status{display:inline-block;margin-top:8px;font-size:.86rem;line-height:1.3;font-weight:700;color:var(--honig-text);background:rgba(232,164,23,.14);border:1px solid rgba(184,119,8,.3);padding:3px 8px;border-radius:var(--radius-klein)}
@media (min-width:820px){ .produkt{display:block} .produkt img{aspect-ratio:16/10;height:auto} .produkt .inhalt{padding:20px} }
@media (min-width:820px){ .produkte{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} }

/* Shop-Aufruf (ersetzt die frühere Warteliste, Dima 30.07.2026:
   „Warteliste ist komplett unnötig und auch unseriös") */
.shop-cta{background:var(--deep);color:var(--wachs);border-radius:20px;padding:28px var(--rand);box-shadow:var(--schatten)}
.shop-cta h3{font-size:clamp(1.22rem,5.4vw,1.5rem);color:var(--weiss);line-height:1.2}
.shop-cta > div > p{color:#CDBFA6;margin-top:10px;font-size:1rem}
.shop-cta .shop-aktion{margin-top:20px;display:grid;gap:12px;justify-items:start}
.shop-cta .shop-aktion .btn{width:100%;text-align:center}
.shop-cta .hinweis{font-size:.92rem;color:#9B8C72}
.shop-cta .hinweis a{color:var(--honig-hell)}
@media (min-width:900px){
  .shop-cta{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:44px}
  .shop-cta .shop-aktion{margin-top:0}
  .shop-cta .shop-aktion .btn{width:auto}
}

/* ---------- Saison-Band ---------- */
.saison .band{
  display:flex;flex-direction:column;gap:16px;
  background:linear-gradient(135deg, rgba(232,164,23,.16), rgba(232,164,23,.04));
  border:1px solid rgba(184,119,8,.28);border-radius:var(--radius);padding:26px var(--rand);
}
.saison .band img{width:56px;height:56px;border-radius:13px}
.saison .band .btn{align-self:flex-start}
@media (min-width:820px){ .saison .band{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px} .saison .band .btn{align-self:auto} }

/* ---------- Mehr-Karten ---------- */
/* „Mehr über XDiBee" mobil als schlanke Liste statt vier großer Karten. */
.mehr-gitter{display:flex;flex-direction:column;gap:0;background:var(--weiss);border:1px solid rgba(42,31,18,.09);border-radius:var(--radius);overflow:hidden}
.mehr-karte{padding:14px 16px;border-bottom:1px solid rgba(42,31,18,.08)}
.mehr-karte:last-child{border-bottom:none}
.mehr-karte h3{font-size:1.05rem}
.mehr-karte h3 a{text-decoration:none;color:inherit}
.mehr-karte p{font-size:.9rem;margin-top:3px}
@media (min-width:820px){ .mehr-gitter{background:none;border:none;gap:18px} .mehr-karte{background:var(--weiss);border:1px solid rgba(42,31,18,.09);border-radius:var(--radius);padding:22px} }
@media (min-width:820px){ .mehr-gitter{display:grid;grid-template-columns:1fr 1fr;gap:18px} }

/* ---------- Footer ---------- */
footer{background:var(--deep);color:#DACEB8;padding:32px 0 24px;font-size:.94rem}
footer .spalten{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px;max-width:1180px;margin:0 auto;padding:0 var(--rand)}
footer .spalten > div:first-child{grid-column:1 / -1}
footer h4{color:var(--weiss);font-family:var(--font-display);margin-bottom:10px}
footer a{color:#DACEB8;text-decoration:none}
footer a:hover{color:var(--honig-hell)}
footer ul{list-style:none}
footer li{margin-bottom:6px}
footer .unten{max-width:1180px;margin:22px auto 0;padding:16px var(--rand) 0;border-top:1px solid rgba(251,245,233,.12);display:flex;flex-direction:column;gap:8px;font-size:.86rem}
@media (min-width:820px){
  footer{padding:44px 0 32px;font-size:.98rem}
  footer .spalten{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
  footer .spalten > div:first-child{grid-column:auto}
  footer .unten{flex-direction:row;justify-content:space-between}
}

/* ---------- Scroll-Reveal ---------- */
/* Einblenden beim Scrollen — aber nur, wenn JavaScript läuft.
   Vorher stand hier .reveal{opacity:0}: Ohne JavaScript (blockiert,
   Fehler, Lesemodus) wäre die halbe Seite unsichtbar geblieben. Jetzt
   ist alles standardmäßig sichtbar, und erst das Skript setzt die Klasse
   js-an, die das Einblenden erlaubt. Nebenwirkung: Prüfwerkzeuge messen
   den Text nicht mehr im durchsichtigen Zustand. */
.js-an .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease}
.js-an .reveal.sichtbar{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){ .js-an .reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} }

/* ---------- Rechts-/Detailseiten ---------- */
.recht{padding:44px 0 60px}
.recht .wrap{max-width:820px}
.recht h1{font-size:2.1rem;margin-bottom:12px;overflow-wrap:break-word}
.recht p, .recht h2, .recht li{overflow-wrap:break-word;word-break:break-word}
.recht img{max-width:100%}
.recht > .wrap > img{border-radius:18px;margin:8px 0 26px;box-shadow:var(--schatten)}
.recht h2{font-size:1.35rem;margin:30px 0 10px}
.recht p{margin-bottom:13px}

/* ---------- Aufzaehlungen und Datenlisten in Textseiten ----------
   Beim Uebernehmen der Texte aus Wix war jede hervorgehobene Zeile ein <h2>.
   Aufzaehlungen und Datentabellen sahen dadurch aus wie eine Wand aus
   Ueberschriften. Jetzt sind es echte Listen und brauchen eigene Abstaende. */
.recht .punkte{margin:6px 0 18px;padding-left:22px;list-style:none}
.recht .punkte li{position:relative;margin-bottom:7px;color:var(--deep-soft);line-height:1.55}
.recht .punkte li::before{content:"";position:absolute;left:-16px;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--honig-dunkel)}

.recht .daten{margin:8px 0 20px;display:grid;grid-template-columns:1fr;gap:0}
.recht .daten dt{font-weight:600;color:var(--deep);margin-top:10px}
.recht .daten dd{margin:2px 0 0;color:var(--deep-soft);line-height:1.5}
@media (min-width:620px){
  .recht .daten{grid-template-columns:minmax(150px,auto) 1fr;column-gap:22px}
  .recht .daten dt{margin-top:0;padding:7px 0;border-top:1px solid rgba(0,0,0,.07)}
  .recht .daten dd{padding:7px 0;border-top:1px solid rgba(0,0,0,.07)}
  .recht .daten dt:first-of-type, .recht .daten dd:first-of-type{border-top:0}
}


/* ---------- Frage-Antwort-Paare (FAQ) ----------
   Frage und Antwort standen beide als schlichter Absatz: man konnte nicht
   erkennen, wo eine Frage aufhoert und die Antwort beginnt. */
.recht h2.frage, .recht .frage{font-size:1.06rem;font-weight:650;color:var(--deep);
  margin:26px 0 5px;line-height:1.4}
.recht .frage + p{margin-bottom:4px}

/* ---------- Gruender neben seinem Text ----------
   Ein Gesicht neben dem Satz „warum ich das gebaut habe" traegt weiter
   als derselbe Satz allein. */
.person{display:flex;gap:22px;align-items:flex-start;margin:6px 0 4px}
.person img{width:118px;height:auto;border-radius:50%;flex:none;
  box-shadow:var(--schatten)}
.person p{margin:0}
@media (max-width:560px){
  .person{flex-direction:column;gap:14px;align-items:center;text-align:center}
  .person img{width:104px}
}

/* ---------- Bild in einer Antwort ----------
   Bei der Ladefrage ersetzt ein Blick unter den Deckel drei Absaetze Text. */
.anleitung{margin:16px 0 18px;max-width:660px}
/* Hochformat-Screenshots duerfen nicht die halbe Seite fuellen */
.anleitung.schmal{max-width:290px}
.anleitung img{width:100%;height:auto;border-radius:var(--radius);
  box-shadow:var(--schatten);display:block}
.anleitung figcaption{font-size:.94rem;color:var(--deep-soft);margin-top:9px;
  line-height:1.5}

/* ---------- Tippziele und Kleinschrift auf Anzeigen-Zielseiten ----------
   Der Skill ads-landing verlangt 44 px Mindestgröße und 16 px Fließtext.
   Drei Stellen lagen darunter: der Zurück-Verweis, die Mailadresse und der
   Hinweis unter dem Kaufknopf. Bei 75 Prozent Handy-Anteil ist das kein
   Schönheitsfehler, sondern verlorene Klicks. */
.zurueck{display:inline-flex;align-items:center;min-height:44px;padding:6px 2px}
.recht a[href^="mailto:"]{display:inline-block;min-height:24px;padding:10px 0}

/* ---------- FAQ-Abschnitte ----------
   Mit 38 Fragen auf einer Seite braucht es Zwischenueberschriften, sonst
   sucht der Leser sich durch eine endlose Kette gleich aussehender Zeilen. */
.faq h2{font-size:1.32rem;color:var(--deep);margin:44px 0 4px;
  padding-top:20px;border-top:2px solid var(--wachs-tief)}
.faq h2:first-of-type{margin-top:26px}

/* ---------- Produktkacheln ----------
   Name, Preis und Verfuegbarkeit waren drei gleich grosse Ueberschriften
   hintereinander und sahen aus wie drei Kapitelanfaenge. */
.recht .kacheln{display:grid;gap:16px;margin:30px 0 6px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.recht .kachel{background:rgba(255,255,255,.62);border:1px solid rgba(0,0,0,.07);
  border-radius:16px;padding:18px 20px;box-shadow:var(--schatten)}
.recht .kachel h3{font-size:1.04rem;margin:0 0 8px;line-height:1.35;color:var(--deep)}
.recht .kachel-preis{font-size:1.32rem;font-weight:700;color:var(--honig-dunkel);margin:0 0 6px}
.recht .kachel-stand{margin:0;font-size:.9rem;font-weight:600;color:#2A6E2D}
.recht .kachel-stand.aus{color:#9A6B00}


/* ---------- Untertitel und Bezugsquellen ----------
   Untertitel waren im Wix-Export eine zweite <h2>-Zeile direkt unter der
   Ueberschrift und dadurch gleich gross wie diese. */
.recht .untertitel{margin:-4px 0 14px;font-size:1.04rem;font-weight:600;
  color:var(--honig-dunkel);line-height:1.4}
.recht .stores{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 8px}

.recht .zurueck{display:inline-block;margin-bottom:20px;color:var(--honig-dunkel);font-weight:600;text-decoration:none}

/* ---------- Impressum: Angaben als Bild ---------- */
/* Name, Adresse und E-Mail stehen als Bild in der Seite, damit Adress-Sammler
   sie nicht auslesen können (Dima 30.07.2026). Bilder liegen in doppelter
   Auflösung vor und werden hier auf die halbe Höhe skaliert → scharf auf Retina. */
.imp-img{display:inline-block;width:auto;vertical-align:middle}
.imp-img.imp-firma{height:26px}
.imp-img.imp-adresse{height:52px;margin-top:2px}
.imp-img.imp-inline{height:26px;vertical-align:-6px}
/* Firmenanschrift als Text · 12.08.2026, siehe Kommentar in impressum.html */
.imp-anschrift{line-height:1.6;margin-bottom:18px}

/* ---------- Produktkarten: Kaufweg zuerst ---------- */
/* Der Klick auf eine Waage soll in den Shop führen, die Infoseite ist der
   zweite Weg (Dima 30.07.2026: „man will hier erwerben"). */
.produkt-aktionen{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.btn-klein{padding:11px 18px;font-size:.95rem}
@media (max-width:520px){
  .produkt-aktionen{flex-direction:column}
  .produkt-aktionen .btn{width:100%}
}

/* ---------- Bedienbarkeit am Handy ---------- */
/* Tap-Ziele müssen mit dem Finger sicher treffbar sein (mindestens 44px).
   Zielgruppe sind Imker im Schnitt über 55 Jahre (Dima 30.07.2026). */
.nav .cta{padding:12px 18px}
.produkt .inhalt h3 a{display:inline-block;padding:8px 0}
footer a{display:inline-block;padding:8px 0}
@media (max-width:899px){
  .menue a{padding:16px 4px}
  .store-zeile{gap:10px}
}

/* Zeitleiste der Entwicklungsgeschichte (04.08.2026) */
.lead{font-size:1.12rem;line-height:1.65;color:#5a4a33;margin:0 0 34px;max-width:60ch}
.station{position:relative;padding:0 0 26px 26px;border-left:2px solid #e8d9bd;margin:0}
.station:last-child{border-left-color:transparent}
.station::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;
  border-radius:50%;background:#e0a53c;box-shadow:0 0 0 3px #fdf6ec}
.station:last-child::before{background:#c4623c}
.station-datum{margin:0 0 2px;font-size:.86rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:#c4623c}
.station h2{margin:0 0 8px;font-size:1.25rem;line-height:1.3}
.station p:not(.station-datum){margin:0;line-height:1.62;color:#3d3223}
@media(max-width:640px){.station{padding-left:20px}.station h2{font-size:1.12rem}}


/* ================================================================
   Handy-Bedienbarkeit (ergänzt 07.08.2026)

   Gemessen auf einem iPhone-Fenster (390 px): 20 von 40 Tippzielen
   waren kleiner als 44 px, und 35 Textstellen kleiner als 16 px.
   44 px ist die Fingerbreite, unter der Menschen daneben tippen;
   unter 16 px muss man zum Lesen zoomen. Drei Viertel aller
   Anzeigenklicks kommen vom Handy — dort entscheidet sich, ob aus
   einem bezahlten Klick ein Kunde wird.

   Der Block greift ausschließlich unter 820 px, das Erscheinungsbild
   am Schreibtisch bleibt unverändert.
   ================================================================ */
@media (max-width: 819px) {

  /* --- Tippziele auf Fingergröße --- */
  .menue a,
  .nav-links-desktop a,
  .nav .cta,
  .logo,
  .mail-link,
  .btn,
  .btn-klein,
  footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .menue a {
    padding-top: 11px;
    padding-bottom: 11px;
  }
  /* Abstand zwischen benachbarten Zielen, damit man nicht das falsche trifft */
  footer .unten a { margin: 4px 6px 4px 0; }
  .stores a + a { margin-left: 10px; }

  /* --- Fließtext lesbar ohne Zoom --- */
  .oeko .karte p,
  .warum .zeile p,
  .produkt .inhalt p,
  .mehr-karte p,
  .app-held li,
  .recht p,
  .recht li,
  footer,
  footer .unten {
    font-size: 1rem;
    line-height: 1.6;
  }
  .trust .txt { font-size: .95rem; }

  /* Links in Kartenüberschriften: über die ganze Kartenbreite antippbar,
     statt nur auf den paar Buchstaben. Das ist der häufigste Grund für
     Fehltipps auf Übersichtsseiten. */
  .produkt .inhalt h3 a,
  .mehr-karte h3 a {
    display: block;
    min-height: 44px;
    padding: 11px 0;
    box-sizing: border-box;
  }
  /* Kurze Fußzeilenwörter wie „Shop" oder „FAQ" sind hoch genug,
     aber zu schmal — seitliche Polsterung schafft Trefferfläche. */
  footer .unten a,
  .nav-links-desktop a { padding-left: 8px; padding-right: 8px; }

  /* Auszeichnungen dürfen klein bleiben: sie werden überflogen,
     nicht gelesen. Nur so weit anheben, dass sie erkennbar sind. */
  .hero .kicker,
  .section-kopf .label,
  .produkt .status,
  .station-datum { font-size: .85rem; }
}


/* ---------- Kauffakten auf Produktseiten ----------
   Preis, Versand, Lieferzeit, Garantie und Rückgabe standen bisher gar
   nicht oder erst weit unten. Das sind aber genau die fünf Angaben, nach
   denen ein Käufer sucht, bevor er sich entscheidet. Sie gehören über den
   Fließtext, zusammen mit dem Weg in den Shop. */
.kauffakten{
  background:var(--weiss);
  border:1px solid rgba(42,31,18,.1);
  border-radius:var(--radius);
  padding:20px 22px;
  margin:6px 0 30px;
  box-shadow:var(--schatten);
}
/* Kaufblock am Seitenanfang · 11.08.2026
   Anlass: Auf dem Handy war ohne Scrollen weder ein Produktfoto noch ein
   Bestellknopf zu sehen. Das Foto lag bei 2.142 Pixeln, der Knopf bei 1.984,
   bei einer sichtbaren Bildhöhe von 844 Pixeln. Sieben von acht Besuchern
   gingen weg, bevor sie das Produkt zu Gesicht bekamen.
   Die Maße unten sind so gewählt, dass Foto, Preis und Knopf zusammen unter
   700 Pixeln bleiben und damit auf jedem gängigen Handy sofort sichtbar sind. */
.kaufblock{
  background:var(--weiss);
  border:1px solid rgba(42,31,18,.1);
  border-radius:var(--radius);
  padding:14px 14px 18px;
  margin:10px 0 24px;
  box-shadow:var(--schatten);
}
.kb-bild{
  display:block;width:100%;height:auto;
  border-radius:calc(var(--radius) - 6px);
  margin-bottom:14px;
}
.kb-zeile{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px;margin-bottom:14px}
.kb-betrag{font-size:2.1rem;font-weight:700;color:var(--deep);line-height:1}
.kb-zusatz{font-size:.9rem;color:var(--deep-soft)}
.kb-lager{
  margin-left:auto;font-size:.85rem;font-weight:600;color:#2A6E2D;
  background:rgba(46,125,50,.1);border-radius:999px;padding:5px 12px;
}
/* Auf dem Handy über die volle Breite. Ein Knopf, den man nicht treffen muss,
   sondern nur antippen kann, wird deutlich häufiger benutzt. */
.kb-knopf{
  display:block;width:100%;box-sizing:border-box;text-align:center;
  font-size:1.12rem;padding:16px 20px;
}
.kb-fuss{
  margin:12px 0 0;font-size:.88rem;line-height:1.5;color:var(--deep-soft);
}
@media (min-width:560px){
  .kaufblock{padding:20px 22px 22px}
  .kb-knopf{display:inline-block;width:auto}
}

/* Messkurve · 13.08.2026
   Volle Breite, weil eine Kurve nur wirkt, wenn man den Verlauf erkennt. Auf dem
   Handy bleibt sie lesbar, weil die Beschriftung groß genug gerendert ist. */
.messkurve{margin:0 0 30px}
.messkurve img{
  display:block;width:100%;height:auto;
  border-radius:var(--radius);
  border:1px solid rgba(42,31,18,.1);
}
.messkurve figcaption{
  margin-top:9px;font-size:.9rem;line-height:1.5;color:var(--deep-soft);
}

/* Kundenstimmen · 13.08.2026
   Zwei Spalten ab Tablet, damit fünf Zitate nicht zu einer langen Kolonne
   werden. Das Anführungszeichen als großes Ornament links macht auf einen Blick
   erkennbar, dass hier jemand anderes spricht als der Verkäufer. */
.stimmen{
  display:grid;grid-template-columns:1fr;gap:14px;margin:0 0 28px;
}
.stimmen blockquote{
  margin:0;padding:16px 18px 14px 46px;position:relative;
  background:var(--weiss);
  border:1px solid rgba(42,31,18,.1);
  border-radius:var(--radius);
  box-shadow:var(--schatten);
}
.stimmen blockquote::before{
  content:"„";position:absolute;left:14px;top:6px;
  font-size:2.6rem;line-height:1;color:var(--honig);
}
.stimmen blockquote p{
  margin:0 0 8px;line-height:1.5;color:var(--deep);
}
.stimmen cite{
  font-size:.86rem;font-style:italic;color:var(--deep-soft);
}
.stimmen-fuss{
  grid-column:1/-1;margin:2px 0 0;font-size:.84rem;color:var(--deep-soft);
}
@media (min-width:620px){
  .stimmen{grid-template-columns:1fr 1fr;gap:16px}
}

/* Service-Block · 12.08.2026
   Hebt sich vom Rest der Kauffakten ab, weil er eine Angst beantwortet und keine
   Zahl liefert. Grüner Rand statt grauer Kasten: Der Leser soll ihn beim
   Überfliegen bemerken, ohne dass er wie eine Warnung wirkt. */
.service{
  border-left:4px solid #2A6E2D;
  background:rgba(46,125,50,.06);
  border-radius:8px;
  padding:14px 18px;
  margin:0 0 20px;
}
.service h3{
  margin:0 0 8px;font-size:1.06rem;color:var(--deep);
}
.service p{margin:0;line-height:1.55;color:var(--deep-soft)}

/* Bildergalerie und App-Abschnitt · 12.08.2026
   Zwei Spalten ab Tablet, auf dem Handy untereinander. Die Bildunterschrift ist
   Teil des Verkaufsarguments, nicht Beiwerk: Sie beantwortet die Frage, die das
   Bild aufwirft, und wird nachweislich häufiger gelesen als der Fließtext. */
.abschnitt{
  font-size:1.35rem;margin:34px 0 14px;color:var(--deep);
}
.galerie{
  display:grid;grid-template-columns:1fr;gap:16px;margin:0 0 30px;
}
.galerie figure{margin:0}
.galerie img{
  display:block;width:100%;height:auto;
  border-radius:var(--radius);
  background:rgba(42,31,18,.05);
}
.galerie figcaption{
  margin-top:8px;font-size:.9rem;line-height:1.45;color:var(--deep-soft);
}
@media (min-width:620px){
  .galerie{grid-template-columns:1fr 1fr;gap:20px}
}
/* Die App-Bilder sind Handy-Aufnahmen und vertragen weniger Breite, sonst
   wirken sie im Vergleich zu den Produktfotos aufgeblasen. */
@media (min-width:900px){
  .galerie-app{max-width:760px}
}

/* Vertrauensblock · 12.08.2026
   Beantwortet die Bedenken, die Imker im Forum tatsächlich äußern, an der Stelle,
   an der gekauft wird. Bewusst als Liste mit Haken statt als Fließtext: Wer vor
   einer Kaufentscheidung steht, überfliegt, er liest nicht. */
.vertrauen{
  list-style:none;margin:0 0 26px;padding:16px 18px;
  background:var(--weiss);
  border:1px solid rgba(42,31,18,.1);
  border-radius:var(--radius);
  box-shadow:var(--schatten);
}
.vertrauen li{
  position:relative;padding:7px 0 7px 30px;line-height:1.5;
  color:var(--deep-soft);
  border-top:1px solid rgba(42,31,18,.07);
}
.vertrauen li:first-child{border-top:0}
.vertrauen li::before{
  content:"✓";position:absolute;left:2px;top:7px;
  color:#2A6E2D;font-weight:700;
}
.vertrauen strong{color:var(--deep)}

.kf-preis{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px;margin-bottom:14px}
.kf-betrag{font-size:2rem;font-weight:700;color:var(--deep);line-height:1}
.kf-zusatz{font-size:.9rem;color:var(--deep-soft)}
.kf-lager{
  margin-left:auto;font-size:.85rem;font-weight:600;color:#2A6E2D;
  background:rgba(46,125,50,.1);border-radius:999px;padding:5px 12px;
}
.kf-liste{display:grid;grid-template-columns:1fr;gap:0;margin:0 0 18px}
.kf-liste dt{font-weight:600;color:var(--deep);margin-top:10px;font-size:.95rem}
.kf-liste dd{margin:2px 0 0;color:var(--deep-soft);line-height:1.5}
@media (min-width:560px){
  .kf-liste{grid-template-columns:minmax(110px,auto) 1fr;column-gap:20px}
  .kf-liste dt{margin-top:0;padding:8px 0;border-top:1px solid rgba(42,31,18,.07)}
  .kf-liste dd{padding:8px 0;border-top:1px solid rgba(42,31,18,.07)}
  .kf-liste dt:first-of-type,.kf-liste dd:first-of-type{border-top:0}
}
.kf-lager.kf-aus{color:#9A6B00;background:rgba(154,107,0,.1)}
.kf-knopf{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin:0}
.kf-hinweis{font-size:1rem;color:var(--deep-soft)}

/* Preis in der Produktkarte: Wer den Preis erst nach zwei Klicks erfährt,
   klickt oft gar nicht erst weiter. Genannt filtert er vorab und spart
   bezahlte Klicks von Leuten, denen das Gerät zu teuer ist. */
.produkt-preis{
  font-size:1.25rem;font-weight:700;color:var(--deep);
  margin:10px 0 2px;line-height:1.2;
}
.produkt-preis span{font-size:.8rem;font-weight:400;color:var(--deep-soft)}

/* Fotos in der Entwicklungsgeschichte.
   Sie stammen aus den ursprünglichen Beiträgen auf xdibee.de und waren beim
   Übernehmen der Texte liegen geblieben. Ohne sie liest sich die Geschichte
   wie eine Aufzählung; mit ihnen sieht man, wie aus einem Holzbrett mit
   Wiegezelle über fünf Jahre ein Serienprodukt wurde. */
.station-bild{
  width:100%;height:auto;display:block;
  margin:14px 0 4px;
  border-radius:var(--radius);
  box-shadow:var(--schatten);
}
@media (min-width:820px){
  .station-bild{max-width:560px}
}

/* ---------- Bildstrecken auf den Produktseiten ----------
   Die App-Seite hatte bis 07.08.2026 kein einziges Bild. Eine App erklärt
   sich aber über das, was man sieht, nicht über Beschreibungen davon.
   Die Aufnahmen stammen aus der laufenden App mit echten Messwerten. */
.app-bilder{
  display:grid;gap:20px;margin:24px 0 30px;
  grid-template-columns:1fr;
}
@media (min-width:700px){
  .app-bilder{grid-template-columns:repeat(3,1fr);align-items:start;max-width:900px}
}
.app-bilder figure{margin:0}
.app-bilder img{
  width:100%;height:auto;display:block;
  border-radius:var(--radius);box-shadow:var(--schatten);
  background:var(--weiss);
}
.app-bilder figcaption,
.inhalt-bild figcaption{
  margin-top:8px;font-size:.9rem;line-height:1.5;color:var(--deep-soft);
}
.inhalt-bild{margin:18px 0 26px}
.inhalt-bild img{
  width:100%;max-width:620px;height:auto;display:block;
  border-radius:var(--radius);box-shadow:var(--schatten);
}


/* ---------- Textfarben auf dunklem Grund ----------
   Die Bänder .trust und .oeko stehen auf #2A1F12. Die dort geerbten
   Farben für hellen Grund ergaben 1,9:1 bzw. 3,1:1 Kontrast — gefordert
   sind 4,5:1. Auf dunklem Grund gehört helle Schrift. */
.trust .label, .oeko .label,
.trust .section-kopf .label, .oeko .section-kopf .label{
  color:#F0B840;                 /* 8,9:1 auf dem dunklen Band */
}
.trust p, .oeko p,
.trust .txt, .oeko .karte p{
  color:#E6D7BC;                 /* 11,4:1 */
}


/* ---------- Fußzeile: Text auf dunklem Grund ----------
   Die Fußzeile steht auf #2A1F12, ihre Absätze erbten aber die Farbe für
   hellen Grund (#5C4B33). Ergebnis: 1,9:1 Kontrast — praktisch unlesbar.
   Aufgefallen erst bei der Prüfung mit Lighthouse, mit bloßem Auge sieht
   man es auf einem guten Bildschirm kaum. */
footer p, footer li, footer span, footer .unten{
  color:#E6D7BC;                 /* 11,4:1 auf dem dunklen Grund */
}
footer a{color:#F0B840}          /* 8,9:1 */
footer a:hover{color:#FBF5E9}
footer h4{color:#FBF5E9}

/* Warteliste · 13.08.2026
   Steht auf den Seiten der Geräte, die gerade nicht lieferbar sind. Bewusst
   ruhig gestaltet: Es ist ein Ersatz für den Kaufknopf, keine Aufdringlichkeit. */
.warteliste{
  background:var(--weiss);
  border:1px solid rgba(42,31,18,.12);
  border-left:4px solid var(--honig);
  border-radius:var(--radius);
  padding:18px 20px;
  margin:0 0 22px;
}
.warteliste h3{margin:0 0 8px;font-size:1.08rem;color:var(--deep)}
.warteliste > p{margin:0 0 14px;font-size:.94rem;line-height:1.5;color:var(--deep-soft)}
.wl-feld{display:block;margin-bottom:12px}
.wl-feld span{display:block;font-size:.86rem;color:var(--deep-soft);margin-bottom:4px}
.wl-feld input{
  width:100%;box-sizing:border-box;padding:11px 13px;font-size:1rem;
  border:1px solid rgba(42,31,18,.22);border-radius:8px;background:#fff;color:var(--deep);
}
.wl-feld input:focus{outline:2px solid var(--honig);outline-offset:1px;border-color:transparent}
/* Honigtopf gegen Bots: für Menschen unsichtbar, für Ausfüllroboter verlockend */
.wl-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.wl-form button{width:100%;box-sizing:border-box}
.wl-hinweis{margin:10px 0 0;font-size:.88rem;color:var(--deep-soft);min-height:1.2em}
.wl-hinweis.wl-fehler{color:#9A2B2B}
.wl-danke{margin:0;font-size:.98rem;line-height:1.5;color:#2A6E2D;font-weight:600}
@media (min-width:560px){
  .wl-form button{width:auto;min-width:180px}
}