/* ==========================================================
   Inhaltsseiten — gleiche Sprache wie die Startseite:
   Fraunces für Überschriften, Creme-Grund, Gold als einziger Akzent.
   ========================================================== */

.page-main{ background:var(--cream); }

/* ---------- Kopfbereich der Seite ---------- */
/* Ein echter Innencontainer hält Titel und Text auf einer Achse und in der
   Mitte der Seite. Bewusst ein eigenes Element statt Regeln auf allen Kindern:
   sonst erbt jedes Kind die Breite und Strich wie Titel rutschen auseinander. */
.page-hero__inner,
.page-article{
  /* 02.08: было 980 px — из-за этого страницы содержания выглядели уже
     магазина, где 1240 px. Клиент это и заметил. Теперь одна ширина на весь
     сайт: страница содержания и витрина стоят по одной линии. */
  width:min(1240px,100%);
  margin-inline:auto;
}

.page-hero{
  padding-top:calc(var(--header-h) + var(--topbar-h) + 72px);
  padding-bottom:52px;
  background:linear-gradient(180deg,var(--cream-2) 0%,var(--cream) 100%);
  border-bottom:1px solid var(--line);
}
.page-hero__eyebrow{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-deep); margin:0 0 14px; font-weight:600;
}
/* Длинное слово без дефиса в названии страницы разрывало раскладку на узком
   экране: заголовок не переносился и выталкивал страницу вбок. Название
   придумывает клиент, значит рассчитывать на короткие слова нельзя. */
.page-hero__title{
  font-family:var(--serif);
  font-size:clamp(32px,4.4vw,60px);
  line-height:1.06; letter-spacing:-.015em; margin:0;
  max-width:18ch; text-wrap:balance; color:var(--brown);
; overflow-wrap:anywhere; }
/* width hier bewusst mit höherer Spezifität: die Regel für den Innencontainer
   oben setzt allen direkten Kindern eine Breite und würde den Strich
   sonst über die ganze Spalte ziehen. */
.page-hero__rule{
  display:block; width:64px; height:3px; margin-top:28px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-2) 100%);
  border-radius:2px;
}

/* ---------- Textspalte ---------- */
.page-article{ padding:64px 0 110px; }

.entry-content{
  /* Клиент 02.08: «Inhaltsseiten nicht seitenfüllend wie die Startseite».
     Он прав — колонка была 601 px при 1240 px в магазине.

     Ширина теперь та же, что у магазина: заголовки, картинки, таблицы и блоки
     идут во всю ширину страницы. Строки сплошного текста ограничены отдельно,
     правилом ниже: 1240 px — это около 130 знаков в строке, глаз на такой
     длине теряет начало следующей строки. Ограничение снимается одной строкой,
     если клиент захочет текст совсем от края до края. */
  max-width:1240px;
  margin-inline:auto;
  font-size:17px;
  /* Общая мера колонки. В ch её задавать нельзя: ch считается от шрифта
     самого элемента, и у заголовка 80ch давали 1909 px — правило просто не
     срабатывало, заголовок оставался во всю ширину и стоял на 191 px левее
     своего текста. */
  --measure:858px;
  line-height:1.75;
  color:var(--ink);
  hyphens:auto;
  overflow-wrap:break-word;
}
/* Длина строки сплошного текста. Прижата влево, а не центрирована колонкой:
   иначе страница снова читается как узкая.

   ВАЖНО: ограничение только на абзацы БЕЗ картинок. WordPress заворачивает
   картинку в обычный <p>, и первая редакция этого правила зажала все снимки
   до 772 px — рамка стала шире, а страница на вид осталась прежней. Ровно это
   клиент и увидел на присланном снимке. */
.entry-content > p:not(:has(img)):not(:has(iframe)),
.entry-content > ul:not([class]),
.entry-content > ol:not([class]),
.entry-content > blockquote{
  /* Колонка по центру, а не прижата влево. Слева текст, справа пустое поле в
     400 px — страница выглядит сдвинутой, а не заполненной; на это указал
     разбор Ланды 02.08. */
  max-width:var(--measure);
  margin-inline:auto;
}

/* Заголовки идут по той же колонке, что и текст под ними.
   Иначе получается зигзаг: заголовок у самого края, а его абзац на две ладони
   правее — на /wer-wir-sind/ «Marcel – Der Bienenflüsterer» стоял на 191 px
   левее собственной биографии. */
/* Правовые страницы приходят от плагина юристов одним блоком-обёрткой, и
   общая мера до текста внутри не доходила: там строка шла на 1240 px против
   858 на остальных 27 страницах. Ссылки на все четыре стоят в подвале каждой
   страницы — немецкий покупатель откроет их первым щелчком и увидит подряд
   две разные вёрстки. */
.entry-content > div > :is(p,ul,ol,blockquote,h1,h2,h3,h4,h5,h6),
.entry-content > div > div > :is(p,ul,ol,blockquote,h1,h2,h3,h4,h5,h6){
  max-width:var(--measure);
  margin-inline:auto;
}

/* На Impressum текст лежит прямо в обёртке плагина, без вложенных блоков —
   правило выше до него не доходило, и строка шла на 1114 px против 856 на
   остальных страницах. Обёртка называется agb_content, а не безымянный div,
   как я сначала решил: правило било мимо. */
.entry-content .agb_content,
.entry-content > div:not([class]){
  max-width:var(--measure);
  margin-inline:auto;
}

/* Таблицам мера не навязывается: придёт от юристов документ с таблицей —
   858 px её пережмут, и колонки поедут. Предупредил Ланда, пока этого не
   случилось. Широкая таблица прокручивается внутри себя, а не тянет страницу
   вбок. */
/* Таблицы правовых страниц — во всю колонку и с прокруткой внутри себя:
   придёт от юристов документ с таблицей, и мера в 858 px её пережмёт. */
/* Прокрутка на ОБЁРТКЕ, а не на самой таблице. display:block ломает
   табличную раскладку: колонки схлопываются, текст переносится, и прокручивать
   становится нечего — проверка это и показала, ширина совпала с колонкой.
   Обёртка прокручивается, таблица остаётся таблицей. */
.entry-content .agb_content{
  overflow-x:auto;
}
.entry-content .agb_content table{
  max-width:none;
  width:auto;
  min-width:100%;
}

/* Таблица свойств на карточке товара — по содержимому, а не во всю страницу.
   Правило width:100% для таблиц стояло в теме и до меня, но на карточке оно
   даёт полосу в 1240 px, где слева «GEWICHT», справа одно значение. Поймал
   Ланда: он замерил, что таблица растянулась, вместо того чтобы прочитать
   правило и поверить ему. */
.entry-content table.shop_attributes,
.woocommerce .entry-content table.shop_attributes{
  width:auto;
  max-width:100%;
}

.entry-content > :is(h2,h3,h4,h5,form,div:not([class])){
  max-width:var(--measure);
  margin-inline:auto;
}

/* Ссылка-кнопка прямо в тексте — строчная, и мера на неё не действует:
   ширина берётся от строки, а не от правила. Делаем её блочной. */
.entry-content > a{
  display:block;
  max-width:var(--measure);
  margin-inline:auto;
}



/* Снимки одной ширины. Раньше размер задавался высотой, и три портрета подряд
   на /wer-wir-sind/ выходили 900, 900 и 1067 px с разными левыми краями:
   у кого пропорции другие, у того и ширина другая. */
.entry-content > p:has(img) img,
.entry-content > img,
.entry-content > figure img,
.entry-content > .wp-block-image img,
.entry-content p > img:only-child{
  width:min(100%, 900px);
  height:auto;
  max-height:none;
}

/* Картинки, врезки и таблицы — во всю ширину страницы. */
.entry-content > p:has(img),
.entry-content > figure,
.entry-content > .wp-block-image,
.entry-content > .wp-block-gallery,
.entry-content > .wp-block-table,
.entry-content > .wp-block-embed{
  max-width:100%;
}
/* Размер снимка задаёт ШИРИНА, одна на все.
   Здесь стояло ограничение по высоте, и оно шло НИЖЕ общего правила при
   равной силе селекторов — то есть побеждало для всех картинок, кроме
   единственной в абзаце. У снимка с другими пропорциями ширина выходила
   своя: на /honigpraemierung/ рядом стояли 900 и 436, на
   /fach-und-sachkundenachweise/ — четыре подряд 421, 435, 436, 424.
   Это ровно та ошибка с порядком правил, которую я до этого исправил у
   разделителя, и тут же наложил сверху вместо того, чтобы убрать. */
.entry-content > p:has(img) img,
.entry-content > img,
.entry-content > figure img,
.entry-content > .wp-block-image img{
  width:min(100%, 900px);
  height:auto;
  max-height:none;
  margin-inline:auto;
  border-radius:var(--radius, 18px);
}
/* Abstand zwischen allen Blöcken. WICHTIG: weiter unten darf keine Regel
   "p { margin:0 }" stehen — sie hat höhere Spezifität und würde diese Regel
   für jeden Absatz aushebeln. Genau das war der Grund für die Bleiwüste. */
.entry-content > * + *{ margin-top:1.3rem; }
/* Абзацы внутри вложенных обёрток правилом выше не покрываются */
.entry-content p + p,
.entry-content li > p + p{ margin-top:1.3rem; }

.entry-content h2{
  font-family:var(--serif);
  font-size:clamp(24px,2.6vw,34px);
  line-height:1.2; letter-spacing:-.01em;
  color:var(--brown);
  margin-top:2.6rem; margin-bottom:.55em;
  text-wrap:balance;
}
.entry-content h3{
  font-family:var(--serif);
  font-size:clamp(19px,2vw,24px);
  line-height:1.28; color:var(--brown);
  margin-top:2.2rem; margin-bottom:.55em;
  text-wrap:balance;
}
.entry-content h4{
  font-size:16px; font-weight:700; letter-spacing:.01em;
  color:var(--brown); margin-top:1.9rem; margin-bottom:.45em;
}
.entry-content h2:first-child,
.entry-content h3:first-child{ margin-top:0; }
/* Überschriften aus der Quelle stehen teils in <em> — das darf den Schnitt
   nicht auf Kursiv umstellen, sonst fällt eine Seite aus der Reihe. */
.entry-content :is(h2,h3,h4) em{ font-style:normal; }

.entry-content strong{ color:var(--brown); font-weight:650; }

.entry-content a{
  /* Eigener, dunklerer Ton für Textlinks: das dekorative Gold erreicht auf
     Creme nur 3.06:1 und verfehlt damit die Lesbarkeitsnorm von 4.5:1. */
  color:var(--gold-link,#7A5F10);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color .2s ease;
}
.entry-content a:hover{ color:var(--brown); }

/* Trennlinien: ohne Regel zeichnet der Browser sie grau — in einer
   gold-cremefarbenen Palette der auffälligste Fremdkörper. */
.entry-content hr{
  border:0; height:1px; width:120px;
  background:var(--line);
  /* Отступ слева ставит разделитель к началу колонки текста. Раньше здесь
     стоял margin:3rem 0 — он шёл ПОЗЖЕ правила выравнивания и обнулял его,
     разделители оставались у самого края страницы, на 191 px левее текста. */
  margin:3rem auto 3rem calc((100% - var(--measure)) / 2);
}
.entry-content hr:last-child{ display:none; }
/* Пустые абзацы. Остаются там, где содержимое вынуто из <p> — например на месте
   встроенной карты. Высоты у них нет, а отступ сверху они всё равно добавляют. */
.entry-content p:empty{ display:none; margin:0; }

/* ---------- Listen ----------
   Оформление только для списков БЕЗ класса. Перенесённое содержание даёт
   голые <ul>/<ol>, а WooCommerce всегда ставит класс: ul.page-numbers,
   ol.flex-control-nav, ul.products. Раньше правило висело на любом li внутри
   .entry-content — и золотая точка вылезала в пагинации магазина, а счётчик
   ol дописывал «1 2» рядом с миниатюрами товара. */
.entry-content :is(ul, ol):not([class]){ padding-left:0; list-style:none; }
.entry-content :is(ul, ol):not([class]) > li{ position:relative; padding-left:28px; margin-top:.55em; }
.entry-content ul:not([class]) > li::before{
  content:""; position:absolute; left:6px; top:.68em;
  width:7px; height:7px; border-radius:50%; background:var(--gold);
}
.entry-content ol:not([class]){ counter-reset:li; }
.entry-content ol:not([class]) > li{ counter-increment:li; }
.entry-content ol:not([class]) > li::before{
  content:counter(li); position:absolute; left:0; top:.05em;
  font-family:var(--serif); font-size:15px; color:var(--gold-deep); font-weight:600;
}
/* страховка: ни один список плагина не получает наших маркеров */
.woocommerce li::before,
.entry-content [class] li::before{ content:none; }

/* ---------- Bilder ---------- */
.entry-content img{
  display:block; max-width:100%; height:auto;
  border-radius:var(--radius);
  box-shadow:0 18px 44px rgba(36,31,21,.10);
}
/* Ein Bild, das allein in einem Absatz steht, füllt die Spalte vollständig.
   Ohne width:100% behalten kleine Dateien ihre Originalbreite und die rechte
   Kante der Seite franst aus (600 / 640 / 693 / 765 px untereinander). */
.entry-content p:has(> img:only-child){
  margin-top:2.4rem; margin-bottom:2.4rem;
}
/* Ширину не задаём принудительно: с ней картинка растягивалась под контейнер
   и теряла пропорции — на 1240 px пчела была растянута вширь. Размер задаёт
   высота, ширина следует за ней. */
/* Размер снимка задаёт ШИРИНА. Здесь раньше стояло ограничение по высоте, и
   оно шло позже общего правила, то есть побеждало: у снимка с другими
   пропорциями ширина выходила своя. На /wer-wir-sind/ три портрета подряд
   были 900, 900 и 1067 px с разными левыми краями. */
.entry-content p > img:only-child{
  margin-inline:auto;
}
.entry-content figure{ margin:2.2em 0; }
.entry-content figcaption{
  margin-top:12px; font-size:14px; color:var(--ink-soft); font-style:italic;
}

/* ---------- Karte und andere Einbettungen ---------- */
.map-consent{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--cream-2); padding:28px 30px; margin:2rem 0;
}
.map-consent__title{ font-family:var(--serif); font-size:20px; margin:0 0 6px; color:var(--brown); }
.map-consent__addr{ margin:0 0 12px; font-size:16px; }
.map-consent__note{ margin:0 0 18px; font-size:14.5px; color:var(--ink-soft); max-width:52ch; }
.map-consent__btn{
  appearance:none; border:0; cursor:pointer;
  background:var(--gold); color:var(--brown);
  font:inherit; font-weight:650; font-size:15px;
  padding:12px 22px; border-radius:999px;
}
.map-consent__btn:hover{ background:var(--gold-deep); color:#fff; }
.map-consent__link{ margin-left:14px; font-size:14.5px; }
.map-consent iframe{ width:100%; min-height:420px; border:0; border-radius:14px; display:block; }
.entry-content iframe{
  display:block; width:100%; min-height:420px;
  border:0; border-radius:var(--radius);
  box-shadow:0 18px 44px rgba(36,31,21,.10);
  margin:2.4em 0;
}

/* ---------- Tabellen ---------- */
.entry-content table{
  width:100%; border-collapse:collapse; font-size:15.5px;
  background:var(--cream-2); border-radius:14px; overflow:hidden;
}
.entry-content th,
.entry-content td{
  padding:12px 16px; text-align:left; border-bottom:1px solid var(--line);
}
.entry-content th{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:600;
}
.entry-content tr:last-child td{ border-bottom:0; }

/* ---------- Kontaktformular ---------- */
.tcb-form{
  margin-top:2.6em;
  background:var(--cream-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:34px 34px 30px;
  display:grid; gap:20px;
  box-shadow:0 18px 44px rgba(36,31,21,.07);
}
.tcb-form p{ margin:0; display:grid; gap:8px; }
.tcb-form label{
  font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600;
}
.tcb-form input[type=text],
.tcb-form input[type=email],
.tcb-form textarea{
  font:inherit; font-size:16px; color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 16px;
  width:100%;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.tcb-form textarea{ resize:vertical; min-height:150px; line-height:1.6; }
.tcb-form input:hover,
.tcb-form textarea:hover{ border-color:var(--gold); }
/* Sichtbarer Tastaturfokus. Vorher stand hier outline:none mit einem hellen
   Schein als Ersatz — dessen Kontrast lag bei 1.19:1, also praktisch unsichtbar. */
.tcb-form :focus-visible,
.entry-content a:focus-visible,
.page-main :focus-visible{
  outline:2px solid var(--gold-deep);
  outline-offset:2px;
  border-radius:4px;
}
.tcb-form__datenschutz label{
  display:flex; align-items:flex-start; gap:11px;
  font-size:14.5px; letter-spacing:0; text-transform:none;
  color:var(--ink); font-weight:400; line-height:1.55;
}
.tcb-form__datenschutz input[type=checkbox]{
  margin-top:3px; width:18px; height:18px; accent-color:var(--gold-deep); flex:0 0 auto;
}
.tcb-form__submit{
  justify-self:start;
  border:0; cursor:pointer; font:inherit; font-weight:600; font-size:15px;
  letter-spacing:.02em; color:var(--brown);
  background:linear-gradient(180deg,var(--gold-2) 0%,var(--gold) 100%);
  padding:16px 34px; border-radius:999px;
  box-shadow:0 10px 26px rgba(201,162,39,.32);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.tcb-form__submit:hover{
  transform:translateY(-2px); box-shadow:0 16px 34px rgba(201,162,39,.42);
}
/* Honigfalle für Bots — für Menschen unsichtbar, aber nicht display:none,
   damit Screenreader-Nutzer nicht darüber stolpern. */
.tcb-hp{ position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }

.form-hinweis{
  margin:0 0 20px; padding:14px 18px; border-radius:14px; font-size:15px;
}
.form-hinweis--ok{ background:rgba(47,107,79,.10); color:#2f6b4f; }
.form-hinweis--fehler{ background:rgba(163,58,37,.10); color:#a33a25; }

/* ---------- Warenkorb im Kopfbereich ---------- */
.header-cart{
  display:inline-flex; align-items:center; gap:7px;
  margin-left:18px; padding:9px 15px;
  border:1px solid var(--line); border-radius:999px;
  color:var(--ink); text-decoration:none;
  font-size:14px; font-weight:600; line-height:1;
  transition:border-color .2s ease, color .2s ease;
}
.header-cart:hover{ border-color:var(--gold); color:var(--gold-deep); }
.header-cart__icon{ font-size:15px; }
.header-cart__count{ font-variant-numeric:tabular-nums; }
.header-cart.is-filled{
  border-color:var(--gold); background:var(--gold); color:var(--brown);
}
@media (max-width:900px){
  .header-cart{ margin-left:auto; margin-right:12px; padding:8px 12px; }
}

/* ---------- Handlungsaufforderung im Text ---------- */
/* Auf der Startseite sind Aufrufe goldene Pillen. In den Inhaltsseiten waren
   sie schlichte unterstrichene Links — dadurch wirkten die Seiten wie ein
   zweiter, fremder Auftritt. */
.entry-content a.entry-cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; border-radius:999px;
  background:linear-gradient(180deg,var(--gold-2) 0%,var(--gold) 100%);
  color:var(--brown); font-weight:600; font-size:15px; letter-spacing:.02em;
  text-decoration:none;
  box-shadow:0 10px 26px rgba(201,162,39,.30);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.entry-content a.entry-cta:hover{
  color:var(--brown); transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(201,162,39,.42);
}
@media (prefers-reduced-motion:reduce){
  .entry-content a.entry-cta{ transition:none; }
  .entry-content a.entry-cta:hover{ transform:none; }
}

/* ==========================================================
   Shop: Raster, Karten, Produktseite, Warenkorb
   ========================================================== */

/* Die Textspalte ist bewusst schmal — das Produktraster braucht Breite. */
.shop-article{ width:min(1240px,100%); }
.shop-article > .entry-content{ max-width:none; }

.woocommerce-notices-wrapper:empty{ display:none; }

/* Kopfzeile über dem Raster: Anzahl links, Sortierung rechts */
.woocommerce-result-count{ margin:0; color:var(--ink-soft); font-size:14.5px; }
.woocommerce-ordering{ margin:0; }
.woocommerce-ordering select{
  font:inherit; font-size:14.5px; padding:10px 14px;
  border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink);
}
.shop-article .entry-content > .woocommerce-result-count,
.shop-article .entry-content > .woocommerce-ordering{ display:inline-block; vertical-align:middle; }
.shop-article .entry-content > .woocommerce-ordering{ float:right; }

/* ---------- Produktraster ---------- */
ul.products{
  list-style:none; padding:0; margin:2rem 0 0;
  display:grid; gap:28px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  clear:both;
}
.woocommerce ul.products,
ul.products{ display:grid; gap:28px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
/* Спецификация с .woocommerce обязательна: собственные стили плагина
   (width:22.05%; float:left) иначе выигрывают и ломают сетку. */
.woocommerce ul.products li.product,
ul.products li.product{
  /* Стили плагина задают карточке процентную ширину и обтекание.
     В гриде это сжимает её до нескольких десятков пикселей, поэтому
     ширину задаём явно и растягиваем по колонке. */
  width:100%; max-width:none; min-width:0;
  float:none; clear:none;
  justify-self:stretch;
  margin:0; padding:0; position:relative;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{ content:none; }
/* Плагин задаёт ширину отдельно для .columns-N — 30,75% при трёх колонках.
   Это правило специфичнее общего, поэтому перекрываем именно его. */
/* Приоритет здесь вынужденный: правило плагина для .columns-N не уступает
   ни специфичности, ни порядку подключения, а в гриде оно сжимает карточку
   до 89 px. Ограничено одним свойством и одним селектором. */
body .woocommerce ul.products[class*="columns-"] li.product,
body .woocommerce-page ul.products[class*="columns-"] li.product,
body ul.products[class*="columns-"] li.product{
  width:100% !important;
  float:none !important;
  margin:0 !important;
}
.woocommerce-loop-product__title{ hyphens:manual; overflow-wrap:normal; }
ul.products li.product::before{ content:none; }

ul.products li.product a img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:var(--radius); margin-bottom:14px;
  background:var(--cream-2);
  box-shadow:0 14px 34px rgba(36,31,21,.08);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
ul.products li.product:hover a img{ transform:translateY(-4px); }

ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--serif); font-size:18px; line-height:1.25;
  color:var(--brown); margin:0 0 6px; text-wrap:balance;
}
ul.products li.product a{ text-decoration:none; color:inherit; }
ul.products li.product .price{
  display:block; font-size:16px; font-weight:650; color:var(--gold-deep); margin-bottom:12px;
}
ul.products li.product .price del{ color:var(--ink-soft); font-weight:400; margin-right:6px; }
ul.products li.product .price ins{ text-decoration:none; }

/* Kleingedrucktes von Germanized im Raster */
ul.products li.product .wc-gzd-additional-info,
.product .wc-gzd-additional-info{
  font-size:12.5px; line-height:1.5; color:var(--ink-soft); margin:0 0 10px;
}

/* Knopf im Raster und auf der Produktseite */
ul.products li.product .button,
ul.products li.product a.add_to_cart_button,
.woocommerce a.button.add_to_cart_button,
.single_add_to_cart_button,
.woocommerce button.button.alt,
.woocommerce .button.alt{
  display:inline-flex; align-items:center; justify-content:center;
  border:0; cursor:pointer; font:inherit; font-weight:600; font-size:14.5px;
  color:var(--brown);
  background:linear-gradient(180deg,var(--gold-2) 0%,var(--gold) 100%);
  padding:13px 26px; border-radius:999px; text-decoration:none;
  box-shadow:0 10px 24px rgba(201,162,39,.28);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
ul.products li.product .button:hover,
ul.products li.product a.add_to_cart_button:hover,
.woocommerce a.button.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.woocommerce button.button.alt:hover,
.woocommerce .button.alt:hover{
  transform:translateY(-2px); box-shadow:0 16px 32px rgba(201,162,39,.4); color:var(--brown);
}
.woocommerce .button:not(.alt):not(.single_add_to_cart_button):not(.add_to_cart_button){
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:transparent; color:var(--ink);
  padding:12px 24px; border-radius:999px; text-decoration:none; font-weight:600; font-size:14.5px;
}

/* ---------- Produktseite ----------
   Der Kunde am 08.08.: «kann man bei den Produkten die
   Produktbeschreibungsbreite anpassen bzw. die Anordnung?» Er hat recht, und
   die Ursache war eine doppelte Teilung:

   Das Raster hier legt zwei Spalten zu je 598 px an — und WooCommerce setzt
   in seinem eigenen Stylesheet nochmal float:left und width:48% obendrauf.
   48 % von 598 sind 287. Die Beschreibung stand also in einer 287 px schmalen
   Säule mit vier Wörtern pro Zeile, während rechts daneben alles leer blieb.

   Deshalb: Prozentbreiten und float von WooCommerce innerhalb des Rasters
   abschalten. Die Aufteilung macht allein das Raster. */
/* Gleiche Spalten, nicht 1.05 für das Bild: der Kunde hat über die
   BESCHREIBUNG geklagt, und ihr mehr zu geben als dem Text war verkehrt herum.
   align-items:start, damit die kürzere Spalte nicht mitwächst — bei acht von
   dreizehn Produkten stand sonst eine Spalte 300 bis 830 Punkte leer.
   max-height beim Bild: Hochformate wuchsen auf 1186 Punkte und schoben den
   Text nach oben weg. Alles drei vom Prüfer gemessen. */
.single-product div.product{
  display:grid; gap:44px; align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.single-product div.product .woocommerce-product-gallery__image img{
  max-height:70vh; object-fit:contain;
}
/* Selektor bewusst schwerer als der von WooCommerce: dessen eigener
   «.woocommerce div.product div.summary» wiegt 0-3-2 und schlug meine erste
   Fassung mit 0-3-1 — die Spalte blieb 287 px, die Änderung wirkte nicht.
   Deshalb body voran und die Tag-Namen mitgeschrieben. */
body.single-product div.product div.woocommerce-product-gallery,
body.single-product div.product div.summary{
  width:100%; max-width:100%; float:none; margin:0; padding:0;
}
.single-product div.product .woocommerce-product-gallery{ margin:0; overflow:hidden; }
/* Auch auf dem grossen Schirm: der Bilderstreifen der Galerie ist ein paar
   tausend Pixel breit, und die Auswahltabelle der Varianten richtet sich nach
   der längsten Bezeichnung — beim Gastgeschenk 772 px in einer 598 px breiten
   Spalte. Die erste Fassung dieser Regel stand nur im Handy-Block, deshalb
   schob sich genau dieses eine Produkt bei 1440 px seitlich hinaus. */
.single-product .variations_form,
.single-product table.variations{ max-width:100%; }
/* table-layout:fixed, sonst wirkt max-width nicht: eine Tabelle mit
   automatischer Aufteilung richtet sich immer nach ihrem Inhalt und ignoriert
   die Begrenzung. Genau daran scheiterte der erste Versuch — die Regel stand
   da, gemessen wurden weiterhin 772 px. */
.single-product table.variations{ table-layout:fixed; width:100%; }
.single-product table.variations td,
.single-product table.variations th{ max-width:100%; overflow:hidden; }
.single-product table.variations select{ max-width:100%; width:100%; }
.single-product div.product .woocommerce-product-gallery__image img{
  border-radius:var(--radius); box-shadow:0 18px 44px rgba(36,31,21,.10);
}
.single-product div.product .summary{ margin:0; }
.single-product div.product .summary .price{
  font-size:26px; font-weight:650; color:var(--gold-deep); margin:0 0 8px;
}
.single-product div.product .summary .woocommerce-product-details__short-description{
  color:var(--ink); margin-bottom:20px;
}
/* color hier ist kein Schmuck, sondern der Unterschied zwischen sichtbar und
   unsichtbar: ohne die Angabe erbt das Feld die Browservorgabe «fieldtext»,
   und die ist in diesem Aufbau WEISS. Weisse Eins auf weissem Grund — der
   Käufer sieht ein leeres Kästchen und weiss nicht, wieviel er kauft.
   Gefunden beim Prüfen der Produktseite, nicht vom Kunden. */
.single-product .quantity input[type=number]{
  font:inherit; width:78px; padding:12px; border:1px solid var(--line);
  border-radius:14px; background:#fff; color:var(--ink); margin-right:10px;
}
.single-product form.cart{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:20px 0 24px; }
.single-product .variations{ width:100%; border-collapse:collapse; margin-bottom:14px; }
.single-product .variations th{ text-align:left; padding:8px 0; font-size:13px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); }
/* Derselbe Fehler eine Zeile tiefer, und er trifft 18 von 113 Produkten:
   ohne color steht die Grössenauswahl weiss auf weiss. */
.single-product .variations select{
  font:inherit; padding:12px 14px; border:1px solid var(--line);
  border-radius:14px; background:#fff; color:var(--ink); min-width:220px;
}
/* Grundpreis unter dem Preis: Pflichtangabe, aber kein Blickfang. */
.tcb-grundpreis{
  margin:-4px 0 14px; font-size:14px; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.tcb-grundpreis .amount{ font-weight:600; color:var(--ink); }

/* Pflichtangaben zu Lebensmitteln unter der Beschreibung. */
.produkt-angaben{
  grid-column:1 / -1; margin-top:34px; padding-top:30px;
  border-top:1px solid var(--line);
}
.produkt-angaben h3{
  font-size:17px; margin:22px 0 8px; letter-spacing:-.005em;
}
.produkt-angaben h3:first-child{ margin-top:0; }
.produkt-angaben p{ max-width:74ch; margin:0 0 10px; }
.produkt-naehrwerte{
  border-collapse:collapse; margin:6px 0 4px; width:min(420px,100%);
}
.produkt-naehrwerte th,
.produkt-naehrwerte td{
  text-align:left; padding:9px 14px 9px 0; border-bottom:1px solid var(--line);
  font-size:14.5px; font-weight:400;
}
.produkt-naehrwerte th{ color:var(--ink-soft); }
/* Цифры в столбик: так их можно сравнивать глазами, не считая знаки. */
.produkt-naehrwerte td{ font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Ausführliche Beschreibung unter dem Produkt, volle Breite. */
.produkt-langtext{
  grid-column:1 / -1; margin-top:38px; padding-top:34px;
  border-top:1px solid var(--line);
}
.produkt-langtext > h2{
  font-size:22px; margin:0 0 16px; letter-spacing:-.01em;
}
.produkt-langtext p{ max-width:74ch; margin:0 0 14px; }

.woocommerce-tabs{ grid-column:1 / -1; margin-top:12px; }
.woocommerce-tabs ul.tabs{ list-style:none; padding:0; display:flex; gap:8px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); margin:0 0 22px; }
.woocommerce-tabs ul.tabs li{ margin:0; padding:0; }
.woocommerce-tabs ul.tabs li::before{ content:none; }
.woocommerce-tabs ul.tabs li a{
  display:block; padding:12px 20px; text-decoration:none; color:var(--ink-soft);
  font-weight:600; font-size:14.5px; border-bottom:2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a{ color:var(--brown); border-bottom-color:var(--gold); }
.related.products, .upsells.products{ grid-column:1 / -1; margin-top:20px; }
.related.products > h2, .upsells.products > h2{ font-family:var(--serif); }

/* ---------- Produktseite (eigene Ausgabe) ---------- */
.product-detail{ display:grid; gap:44px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
.product-detail__media img{ width:100%; border-radius:var(--radius); box-shadow:0 18px 44px rgba(36,31,21,.10); }
.product-detail__gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
.product-detail__gallery img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:14px; box-shadow:none; }
.product-detail__price{ font-size:28px; font-weight:650; color:var(--gold-deep); margin:0 0 10px; }
.product-detail__short{ margin-bottom:18px; }
.product-detail__stock{ font-size:14.5px; color:var(--ink-soft); margin:0 0 18px; }
.product-detail__meta{ font-size:13.5px; color:var(--ink-soft); }
.product-detail__text{ grid-column:1 / -1; }
.product-detail__text h2{ font-family:var(--serif); }
.product-noimage{
  display:block; width:100%; aspect-ratio:1/1; border-radius:var(--radius);
  background:var(--cream-2) repeating-linear-gradient(45deg,transparent 0 12px,rgba(36,31,21,.04) 12px 24px);
}
.shop-crumbs{
  margin:0 0 18px; font-size:14px; color:var(--ink-soft);
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
}
.shop-crumbs a{ color:var(--ink-soft); text-decoration:none; border-bottom:1px solid transparent; }
.shop-crumbs a:hover{ color:var(--gold-deep); border-bottom-color:var(--gold); }
.shop-crumbs .sep{ color:var(--line-strong,var(--line)); }
.shop-subcats{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 26px; }
.shop-subcats a{
  display:inline-flex; align-items:center; gap:7px; padding:9px 16px;
  border:1px solid var(--line); border-radius:999px; text-decoration:none;
  color:var(--ink); font-size:14.5px; font-weight:600;
}
.shop-subcats a:hover{ border-color:var(--gold); color:var(--gold-deep); }
.shop-subcats a span{ color:var(--ink-soft); font-weight:400; font-variant-numeric:tabular-nums; }

/* ---------- Плитки разделов ----------
   Просьба клиента от 02.08: показать разделы плитками с картинками, как на
   imkereibedarf-maier.de, отдельно для Genießer-Shop и Imkerei-Bedarf.
   Картинки он прислал 07.08 — девятнадцать из двадцати девяти разделов.

   Плитка 438x292 (3:2): размер посчитан от самого слабого исходника, а не
   выбран круглым числом. Самая узкая фотография клиента 438 точек, и при
   этом кадре ни одна не растягивается.

   Раздел без картинки остаётся плиткой — просто без изображения. Выкидывать
   его нельзя: покупатель должен видеть весь ассортимент. */
.shop-kacheln{
  display:grid; gap:18px; margin:0 0 34px;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
}
.shop-kacheln a{
  display:flex; flex-direction:column; align-items:stretch; gap:0;
  padding:0; border-radius:14px; overflow:hidden;
  background:var(--paper, #fff);
  border:1px solid var(--line);
  transition:border-color .18s ease, transform .18s ease;
}
.shop-kacheln a:hover{ border-color:var(--gold); transform:translateY(-2px); }
.shop-kacheln img{
  display:block; width:100%; aspect-ratio:3 / 2; object-fit:cover;
  background:var(--line);
}
/* Раздел без картинки: полоса той же высоты, чтобы ряд не прыгал. */
.shop-kacheln a:not(:has(img)) .kachel-titel{ padding-top:36px; }
.shop-kacheln a:not(:has(img)) { justify-content:flex-end; }
.shop-kacheln .kachel-titel{
  padding:13px 15px 2px; font-size:15px; font-weight:600; line-height:1.3;
  color:var(--ink); text-wrap:balance;
}
.shop-kacheln a > span:last-child{ padding:0 15px 13px; font-size:13.5px; }
@media (max-width:560px){
  .shop-kacheln{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
  .shop-kacheln .kachel-titel{ font-size:14px; padding:10px 12px 2px; }
  .shop-kacheln a > span:last-child{ padding:0 12px 10px; }
}
.shop-count{ color:var(--ink-soft); font-size:14.5px; margin:0 0 4px; }
.shop-intro{ margin-bottom:22px; }
.shop-pagination{ margin-top:36px; display:flex; gap:8px; flex-wrap:wrap; }
.shop-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px;
  padding:0 14px; border:1px solid var(--line); border-radius:999px;
  text-decoration:none; color:var(--ink); font-weight:600; font-size:14.5px;
}
.shop-pagination .page-numbers.current{ background:var(--gold); border-color:var(--gold); color:var(--brown); }
.shop-pagination .page-numbers:hover{ border-color:var(--gold); }

/* Пагинация магазина. Класс у WooCommerce свой — .woocommerce-pagination, и
   пока правила стояли только на .shop-pagination, страницы каталога получали
   голый список. */
/* Карточка бестселлера теперь ссылка, а не <article>. */
/* Падающие капли.
   В разметке они нарисованы видимыми, а прячет их только анимация — и то
   через секунду после запуска. До этого капли висели неподвижно поверх
   заголовка, а при выключенных анимациях висели бы всегда. Прячем их
   изначально: анимация сама включает видимость через autoAlpha. */
.honey-drips .drop-fall,
.scroll-hint .drop{ opacity:0; visibility:hidden; }

/* Маска слова в заголовке.

   Слова заголовка обёрнуты в overflow:hidden — так они выезжают снизу при
   появлении. Высота маски равна межстрочному интервалу, а хвосты букв g, y, j
   уходят ниже него: в «The Crazy Bee» у «y» срезался хвост.

   Даём маске запас снизу и тут же убираем его отрицательным полем — видимая
   область растёт, раскладка остаётся прежней. */
.hero h1 .word{ padding-bottom:.2em; margin-bottom:-.2em; }

/* Подписка на рассылку. Форма приехала со старого сайта кусками — без кнопки
   и с остатками всплывающего окна. Собрана заново, оформление под сайт. */
.tcb-newsletter{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--cream-2); padding:32px 34px; margin:2rem 0;
}
.tcb-newsletter__lead{ font-family:var(--serif); font-size:20px; margin:0 0 14px; color:var(--brown); }
.tcb-newsletter__list{ margin:0 0 18px; }
.tcb-newsletter__bonus{ margin:0 0 22px; font-weight:600; color:var(--gold-deep); }
.tcb-newsletter__form{ display:flex; flex-direction:column; gap:14px; max-width:44rem; }
.tcb-newsletter__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.tcb-newsletter__field{ display:flex; flex-direction:column; gap:7px; margin:0; }
.tcb-newsletter__field label{
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600;
}
.tcb-newsletter__field input{
  font:inherit; font-size:16px; padding:13px 16px;
  border:1px solid var(--line); border-radius:12px;
  background:#fff; color:var(--ink);
}
.tcb-newsletter__field input:hover{ border-color:var(--gold); }
.tcb-newsletter__field input:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,.18);
}
.tcb-newsletter__consent{ margin:0; }
.tcb-newsletter__consent label{
  display:flex; align-items:flex-start; gap:11px;
  font-size:14.5px; line-height:1.55; color:var(--ink);
}
.tcb-newsletter__consent input{ margin-top:.28em; width:18px; height:18px; accent-color:var(--gold-deep); }
.tcb-newsletter__submit{ margin:0; }
.tcb-newsletter__submit button{
  appearance:none; border:0; cursor:pointer;
  background:var(--gold); color:var(--brown);
  font:inherit; font-weight:650; font-size:16px;
  padding:14px 30px; border-radius:999px;
}
.tcb-newsletter__submit button:hover{ background:var(--gold-deep); color:#fff; }
.tcb-newsletter__note{ margin:0; font-size:14px; color:var(--ink-soft); }

/* ---------- Vorlagen: блоки для страниц клиента ----------
   Правило одно: ни одной жёсткой высоты и ни одной ширины в пикселях.
   Клиент вставит текст втрое длиннее, удалит картинку и поставит эмодзи
   в заголовок — раскладка обязана выдержать. Это проверяется машинно. */
.vp-hero{ margin:0 0 3rem; }
.vp-hero__eyebrow{
  font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:650; margin:0 0 10px;
}
.vp-hero__title{
  font-family:var(--serif); font-size:clamp(30px,4.4vw,58px); line-height:1.08;
  margin:0 0 14px; overflow-wrap:anywhere; text-wrap:balance;
}
.vp-hero__lead{ font-size:17.5px; color:var(--ink-soft); max-width:62ch; margin:0; }

.vp-grid{ margin:3rem 0; }
.vp-grid__head{ font-family:var(--serif); margin:0 0 24px; overflow-wrap:anywhere; }
.vp-grid__row{ gap:22px; flex-wrap:wrap; }
.vp-grid__row > .wp-block-column{ min-width:min(240px,100%); }
.vp-card{
  background:var(--cream-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; display:flex; flex-direction:column; gap:10px;
}
.vp-card__img{ margin:0; }
.vp-card__img img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border-radius:14px; display:block;
}
.vp-card__img:not(:has(img[src])){
  min-height:0;                       /* удалённая картинка не оставляет дыры */
}
.vp-card__title{ font-family:var(--serif); font-size:20px; margin:0; overflow-wrap:anywhere; }
.vp-card__price{ color:var(--gold-deep); font-weight:650; margin:0; }

.vp-story{ margin:3rem 0; }
.vp-story__row{ gap:48px; align-items:center; flex-wrap:wrap; }
.vp-story__row > .wp-block-column{ min-width:min(280px,100%); }
.vp-story__title{ font-family:var(--serif); margin:0 0 14px; overflow-wrap:anywhere; }
.vp-story__img{ margin:0; }
.vp-story__img img{ width:100%; height:auto; border-radius:var(--radius); display:block; }

.vp-cta{
  margin:3rem 0; padding:34px 36px;
  background:var(--cream-2); border:1px solid var(--line); border-radius:var(--radius);
}
.vp-cta__title{ font-family:var(--serif); margin:0 0 10px; overflow-wrap:anywhere; }
.vp-cta__btns{ margin-top:20px; }
.vp-cta .wp-block-button__link{
  background:var(--gold); color:var(--brown); font-weight:650;
  border-radius:999px; padding:13px 28px; text-decoration:none;
}
.vp-cta .wp-block-button__link:hover{ background:var(--gold-deep); color:#fff; }

.vp-usp{ margin:3rem 0; }
.vp-usp__row{ gap:28px; flex-wrap:wrap; }
.vp-usp__row > .wp-block-column{ min-width:min(220px,100%); }
.vp-usp__item h3{ font-family:var(--serif); font-size:19px; margin:0 0 8px; overflow-wrap:anywhere; }
.vp-usp__item p{ margin:0; color:var(--ink-soft); }

.vp-kontakt{
  margin:3rem 0; padding:34px 36px;
  background:var(--cream-2); border:1px solid var(--line); border-radius:var(--radius);
}
.vp-kontakt h2{ font-family:var(--serif); margin:0 0 12px; overflow-wrap:anywhere; }

@media (max-width:760px){
  .vp-cta, .vp-kontakt{ padding:24px 20px; }
}

/* ---------- Корзина и касса ----------
   WooCommerce отдаёт их блоками со своим оформлением: серые прямоугольные
   кнопки, текст 13 px, поля с радиусом 4 px. Рядом с принятым макетом это
   выглядит как чужая вставка, поэтому приводим к языку сайта.

   Селекторы с body: правила плагина весомее наших, без этого не перебиваются.
   Ничего не прячем и не двигаем — меняются только цвет, шрифт и скругление,
   чтобы обновление WooCommerce не сломало раскладку. */

body .wc-block-components-title,
body .wc-block-cart__totals-title,
body .wc-block-components-checkout-step__title{
  font-family:var(--serif); color:var(--brown); letter-spacing:-.01em;
}
body .wc-block-components-checkout-step__description,
body .wc-block-components-product-metadata,
body .wc-block-components-totals-item__label{
  color:var(--ink-soft);
}
/* Удвоение класса поднимает вес, не прибегая к !important: у плагина здесь
   селектор из двух классов, и наш одиночный ему проигрывал. */
body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name,
body .wc-block-components-product-name.wc-block-components-product-name{
  font-size:16px; font-weight:600; color:var(--ink); text-decoration:none;
}
body .wc-block-components-product-name:hover{ color:var(--gold-deep); }
body .wc-block-components-totals-item__value.wc-block-components-totals-item__value,
body .wc-block-components-product-price__value.wc-block-components-product-price__value{
  font-variant-numeric:tabular-nums; color:var(--ink); font-size:15.5px;
}
body .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-size:20px; font-weight:650; color:var(--gold-deep);
}

/* кнопки — те же пилюли, что и на сайте */
body .wc-block-cart__submit-button,
body .wc-block-components-checkout-place-order-button,
body .wc-block-components-button:not(.is-link){
  background:var(--gold); color:var(--brown);
  border:0; border-radius:999px;
  font-family:inherit; font-weight:650; font-size:16px;
  padding:15px 32px; min-height:0; box-shadow:none;
}
body .wc-block-cart__submit-button:hover,
body .wc-block-components-checkout-place-order-button:hover,
body .wc-block-components-button:not(.is-link):hover{
  background:var(--gold-deep); color:#fff;
}
body .wc-block-components-button.is-link{ color:var(--gold-deep); }

/* поля ввода */
body .wc-block-components-form .wc-block-components-text-input input[type],
body .wc-block-components-form .wc-block-components-combobox-control input[type],
body .wc-block-components-text-input input[type],
body .wc-block-components-textarea.wc-block-components-textarea,
body .wc-block-components-combobox-control input[type],
body .wc-block-components-select__container select{
  border:1px solid var(--line); border-radius:12px;
  background:#fff; color:var(--ink); font-size:16px; padding:14px 16px;
}
body .wc-block-components-text-input input:focus,
body .wc-block-components-textarea:focus,
body .wc-block-components-combobox-control input:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,.18);
}
body .wc-block-components-text-input label{ color:var(--ink-soft); }

/* карточки выбора: доставка и оплата */
body .wc-block-components-radio-control-accordion-option,
body .wc-block-components-radio-control__option{
  border-radius:14px;
}
body .wc-block-components-radio-control-accordion-option{
  border:1px solid var(--line); margin-bottom:10px; background:var(--cream-2);
}
body .wc-block-components-radio-control__option--checked-option-highlighted,
body .wc-block-components-radio-control-accordion-option:has(input:checked){
  border-color:var(--gold); background:rgba(201,162,39,.08);
}
body .wc-block-components-radio-control__input:checked{ accent-color:var(--gold-deep); }

/* правая колонка со сводкой заказа */
body .wc-block-components-sidebar .wc-block-components-panel,
body .wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block,
body .wc-block-cart__sidebar .wc-block-components-totals-wrapper{
  background:var(--cream-2); border:1px solid var(--line); border-radius:var(--radius);
}
body .wc-block-cart__sidebar .wc-block-components-totals-wrapper{ padding:18px 22px; }

/* строки товаров */
body .wc-block-cart-items__row{ border-bottom:1px solid var(--line); }
body .wc-block-cart-item__image img{ border-radius:14px; }
body .wc-block-components-quantity-selector{
  border:1px solid var(--line); border-radius:999px; overflow:hidden;
}
body .wc-block-cart-item__remove-link{ color:var(--ink-soft); }
body .wc-block-cart-item__remove-link:hover{ color:#a33a25; }

/* сообщения */
body .wc-block-components-notice-banner{
  border-radius:14px; border-left-width:3px;
}
body .wc-block-components-notice-banner.is-success{ border-left-color:var(--gold); }

@media (max-width:760px){
  body .wc-block-cart__submit-button,
  body .wc-block-components-checkout-place-order-button{ width:100%; }
}

/* Правовые ссылки в нижней строке подвала. По §5 DDG они обязаны быть
   достижимы с любой страницы, поэтому стоят рядом с маркой, а не в колонках. */
.footer-legal{ display:flex; flex-wrap:wrap; gap:6px 22px; }
.footer-legal a{
  font-size:12.5px; letter-spacing:.04em; text-decoration:none;
  color:rgba(245,239,226,.62);
}
.footer-legal a:hover{ color:var(--gold, #C9A227); }
/* § 356a BGB требует «hervorgehoben platziert»: отзыв договора не должен
   теряться в ряду мелких правовых ссылок. Поэтому рамка и полная яркость —
   заметно, но без крика: это не рекламная кнопка. */
.footer-legal a.footer-widerruf{
  color:rgba(245,239,226,.92);
  border:1px solid rgba(245,239,226,.32);
  border-radius:3px; padding:3px 10px; margin-top:-3px;
}
.footer-legal a.footer-widerruf:hover{
  color:var(--gold, #C9A227); border-color:var(--gold, #C9A227);
}
@media (max-width:560px){
  .footer-legal{ gap:6px 16px; }
}

/* ---------- Выпадающие подменю в шапке ----------
   С главной на 23 перенесённые страницы нельзя было кликнуть: в шапке шесть
   пунктов, остальное лежало только в подвале — то есть в конце длинной
   главной. Пункты шапки остались те же, что утвердил клиент; под тремя из них
   раскрывается список.

   Сам пункт остаётся рабочей ссылкой: если подменю не откроется, щелчок всё
   равно уводит на страницу. */
.nav-group{ position:relative; display:inline-flex; align-items:center; }

.nav-group > .nav-sub{
  /* Привязка к левому краю пункта, а не к его середине. По центру панель
     уезжала за край экрана: у Genießer-Shop пятнадцать пунктов, самый длинный
     «Honig als personalisiertes Gastgeschenk für Hochzeit, Kommunion und
     Konfirmation» растягивал её до 680 px, и на 1440 у всех строк срезало
     первые буквы, а на планшете панель уходила за экран целиком. */
  position:absolute; top:100%; left:0; right:auto; transform:translateY(8px);
  min-width:250px; max-width:min(420px, calc(100vw - 32px));
  /* Пятнадцать разделов дают панель в 685 px. На ноутбучном окне высотой 700
     и на планшете 1024x768 нижние пункты уходили под край экрана, а увести
     мышь вниз нельзя — панель закроется. Ограничиваем высотой окна и даём
     прокрутку внутри самой панели. */
  max-height:calc(100vh - 140px);
  overflow-y:auto; overscroll-behavior:contain;
  padding:10px; z-index:60;
  display:grid; gap:2px;
  background:var(--cream, #FFF9EA); border:1px solid var(--line, rgba(36,31,21,.12));
  border-radius:16px; box-shadow:0 18px 44px rgba(36,31,21,.16);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
/* мостик, чтобы список не закрывался в зазоре между пунктом и списком */
.nav-group > .nav-sub::before{
  content:""; position:absolute; left:0; right:0; top:-12px; height:12px;
}
.nav-group:hover > .nav-sub,
.nav-group:focus-within > .nav-sub{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(4px);
}
.nav-group > .nav-sub a{
  /* Длинные названия разделов переносятся, а не растягивают панель:
     из-за nowrap она вырастала до 680 px и уезжала за край экрана. */
  display:block; padding:9px 14px; border-radius:10px;
  font-size:15px; line-height:1.35; white-space:normal;
  color:var(--ink, #241F15); text-decoration:none;
}
.nav-group > .nav-sub a:hover,
.nav-group > .nav-sub a:focus-visible{
  background:rgba(201,162,39,.14); color:var(--gold-deep, #8A6B12);
}
.nav-group > .nav-sub a::after{ display:none; }

@media (prefers-reduced-motion:reduce){
  .nav-group > .nav-sub{ transition:none; }
}

/* Планшет: мыши нет, наведения не бывает, а бургер появляется только на узком
   экране. На 1024 с касанием все 24 ссылки шапки оказывались недоступны —
   спасал только подвал. Поэтому на устройствах без наведения список
   открывается по касанию, и первое касание по пункту его раскрывает, а не
   уводит на страницу. Второе касание по тому же пункту уводит. */
@media (hover:none){
  .nav-group > .nav-sub{
    transition:none;
    left:0; right:auto; transform:none;
  }
  .nav-group.is-open > .nav-sub{
    opacity:1; visibility:visible; pointer-events:auto; transform:none;
  }
  .nav-group:hover > .nav-sub{
    opacity:0; visibility:hidden; pointer-events:none;
  }
  .nav-group.is-open:hover > .nav-sub{
    opacity:1; visibility:visible; pointer-events:auto;
  }
}

/* В мобильном меню ничего не выпадает: список сразу под пунктом, иначе на
   телефоне до него не добраться.

   Оно рассчитано на шесть пунктов и центрирует их по высоте экрана. Теперь
   пунктов 31, и нижние оказались за краем: прокрутки не было, дотянуться до
   них было нельзя. Поэтому прокрутка включена, а выравнивание по центру
   снято — иначе при переполнении верхние уезжают под шапку. */
.mobile-menu{
  justify-content:flex-start;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:96px 20px 48px;
}
.mobile-menu > a{ font-size:26px; padding:6px 10px; }
.mobile-menu .nav-group{ display:block; width:100%; text-align:center; }
.mobile-menu .nav-group > a{ font-size:26px; padding:6px 10px; }
.mobile-menu .nav-group > .nav-sub{
  position:static; transform:none; opacity:1; visibility:visible;
  pointer-events:auto; background:none; border:0; box-shadow:none;
  padding:0 0 14px; min-width:0; justify-items:center;
  /* Ограничение высоты и собственная прокрутка нужны ТОЛЬКО выпадающей
     панели на компьютере. В выдвижном меню они превращали список одного
     раздела в отдельное окно прокрутки на весь экран: палец крутил его, а
     само меню стояло, и до 33 ссылок из 49 было не добраться. Это дословный
     возврат жалобы клиента от 01.08, и пишет он с телефона. */
  max-height:none;
  overflow:visible;
  max-width:none;

  /* Свёрнуто по умолчанию. Все списки раскрытыми давали стену в 2257 px при
     экране 667 — три с третью экрана, и Kontakt оказывался на 1803. Клиент
     01.08 жаловался ровно на то, что не может найти разделы; стена эту
     жалобу возвращает другим способом. Раскрывается касанием по пункту. */
  display:none;
}
.mobile-menu .nav-group.is-open > .nav-sub{
  display:grid;
}
/* Знак, что пункт раскрывается: без него непонятно, куда жать. */
.mobile-menu .nav-group > a::after{
  content:"";
  display:inline-block;
  width:8px; height:8px;
  margin-left:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .2s ease;
}
.mobile-menu .nav-group.is-open > a::after{
  transform:translateY(2px) rotate(-135deg);
}
.mobile-menu .nav-group > .nav-sub a{
  font-family:var(--sans, inherit); font-size:17px; font-weight:500;
  padding:7px 10px; white-space:normal;
}

/* ---------- Подвал с полным списком страниц ----------
   В макете подвал рассчитан на три колонки: марка и две ссылочные. Туда же
   теперь легли все перенесённые страницы, поэтому колонок стало семь, и
   жёсткая сетка их сплющивала. Ширина считается от содержимого, марка
   остаётся шире прочих. Ничего не прячем — на узком экране колонки просто
   встают в два ряда, а потом в один. */
body .footer-top{
  grid-template-columns:minmax(220px,1.3fr) repeat(auto-fit,minmax(150px,1fr));
  gap:40px 32px;
}
body .footer-col h4{ margin-bottom:12px; }
body .footer-col ul{ display:grid; gap:8px; }
body .footer-col a{ font-size:14px; line-height:1.45; }

@media (max-width:1100px){
  body .footer-top{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:560px){
  body .footer-top{ grid-template-columns:1fr; gap:32px; }
}

/* Обёртка счётчика корзины: нужна для обновления на лету, раскладку не меняет. */
.header-cart-wrap{ display:contents; }
a.p-card{ text-decoration:none; color:inherit; display:block; }
a.p-card:hover h3{ color:var(--gold-deep); }

/* Пагинация магазина. Правила WooCommerce весомее наших: он адресует её как
   .woocommerce nav.woocommerce-pagination ul, и его рамка вокруг всего списка
   и разделители между пунктами оставались поверх нашего оформления —
   получались серые линии вокруг кнопок. Поднимаем вес и гасим их явно. */
body.woocommerce nav.woocommerce-pagination,
.woocommerce-pagination{ margin-top:36px; }
body.woocommerce nav.woocommerce-pagination ul,
body.woocommerce-page nav.woocommerce-pagination ul,
body.woocommerce nav.woocommerce-pagination ul.page-numbers{
  display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0;
  border:0; list-style:none;
}
body.woocommerce-page nav.woocommerce-pagination ul li,
body.woocommerce nav.woocommerce-pagination ul li{
  margin:0; padding:0; border:0; border-right:0; overflow:visible; position:static; float:none;
}
body.woocommerce-page nav.woocommerce-pagination ul li a,
body.woocommerce-page nav.woocommerce-pagination ul li span,
body.woocommerce nav.woocommerce-pagination ul li a,
body.woocommerce nav.woocommerce-pagination ul li span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; padding:0 14px; margin:0;
  border:1px solid var(--line); border-radius:999px;
  text-decoration:none; color:var(--ink); font-weight:600; font-size:14.5px;
  font-variant-numeric:tabular-nums; background:transparent; line-height:1;
}
body.woocommerce-page nav.woocommerce-pagination ul li a:hover,
body.woocommerce nav.woocommerce-pagination ul li a:hover{
  border-color:var(--gold); color:var(--gold-deep); background:transparent;
}
body.woocommerce-page nav.woocommerce-pagination ul li span.current,
body.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--gold); border-color:var(--gold); color:var(--brown);
}
.woocommerce-pagination ul.page-numbers{
  display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; border:0; list-style:none;
}
.woocommerce-pagination ul.page-numbers li{
  margin:0; padding:0; border:0; position:static;
}
.woocommerce-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; padding:0 14px;
  border:1px solid var(--line); border-radius:999px;
  text-decoration:none; color:var(--ink); font-weight:600; font-size:14.5px;
  font-variant-numeric:tabular-nums; background:transparent;
}
.woocommerce-pagination a.page-numbers:hover{ border-color:var(--gold); color:var(--gold-deep); }
.woocommerce-pagination .page-numbers.current{
  background:var(--gold); border-color:var(--gold); color:var(--brown);
}
.woocommerce-pagination .page-numbers.dots{ border-color:transparent; }

/* Миниатюры товара. У flexslider это ol с классом, поэтому наш счётчик списка
   печатал рядом с картинками «1 2», а без раскладки они слипались. */
.flex-control-nav.flex-control-thumbs{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px; margin:12px 0 0; padding:0; list-style:none;
}
.flex-control-nav.flex-control-thumbs li{
  margin:0; padding:0; position:static; width:auto; float:none;
}
.flex-control-nav.flex-control-thumbs img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border-radius:14px; box-shadow:none; cursor:pointer;
  opacity:.62; transition:opacity .2s ease, outline-color .2s ease;
  outline:2px solid transparent; outline-offset:2px;
}
.flex-control-nav.flex-control-thumbs img:hover{ opacity:.85; }
.flex-control-nav.flex-control-thumbs img.flex-active{ opacity:1; outline-color:var(--gold); }

@media (max-width:900px){
  .product-detail{ grid-template-columns:1fr; gap:26px; }
}

/* ---------- Warenkorb und Kasse ---------- */
.woocommerce table.shop_table{
  width:100%; border-collapse:collapse; background:var(--cream-2);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.woocommerce table.shop_table th{
  padding:14px 16px; text-align:left; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold-deep); font-weight:600;
}
.woocommerce table.shop_table td{ padding:14px 16px; border-top:1px solid var(--line); }
.woocommerce .cart_item img{ width:64px; border-radius:12px; }
.woocommerce form .form-row{ display:grid; gap:7px; margin-bottom:16px; }
.woocommerce form .form-row label{
  font-size:13px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection{
  font:inherit; font-size:16px; padding:13px 15px; width:100%;
  border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,162,39,.18);
}
.woocommerce-info, .woocommerce-message, .woocommerce-error{
  list-style:none; padding:14px 18px 14px 46px; border-radius:14px; margin:0 0 20px;
  background:rgba(201,162,39,.10); border-left:3px solid var(--gold);
  position:relative;
}
.woocommerce-error{ background:rgba(163,58,37,.10); border-left-color:#a33a25; }

/* Значок уведомления. WooCommerce рисует здесь ярко-зелёную галочку своим
   ::before — в палитре сайта нет ни этого зелёного, ни такой формы. */
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before{
  content:""; position:absolute; left:18px; top:1.15em;
  width:9px; height:9px; border-radius:50%;
  background:var(--gold-deep); color:transparent; font-size:0;
  animation:none; box-shadow:none;
}
.woocommerce-error::before{ background:#a33a25; }

/* Уведомление само забирает фокус (tabindex="-1"), и наш контур клавиатурного
   фокуса ложился на него золотой рамкой во всю ширину. Для клавиатуры контур
   нужен, для уведомления — нет. */
.page-main .woocommerce-info:focus-visible,
.page-main .woocommerce-message:focus-visible,
.page-main .woocommerce-error:focus-visible,
.page-main .woocommerce-notices-wrapper > *:focus-visible{ outline:none; }
.cart-empty, .woocommerce-info{ font-size:15.5px; }

/* ---------- Leere Zustände ---------- */
.woocommerce-no-products-found{ padding:24px 0; }

@media (max-width:900px){
  /* minmax(0,1fr), nicht 1fr: die Kurzform heisst minmax(AUTO,1fr), und auto
     ist die MINDESTBREITE des Inhalts. Der Bilderstreifen der Galerie ist
     mehrere tausend Pixel breit, also wuchs die einzige Spalte auf 412 px in
     einem 331 px breiten Container — die Produktseite schob sich auf dem Handy
     seitlich aus dem Bild, bei zwölf Produkten. Gefunden hat es der Prüfer. */
  .single-product div.product{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .single-product div.product .woocommerce-product-gallery{ max-width:100%; overflow:hidden; }
  /* Die Lupe legt eine vergrösserte Kopie des Bildes absolut über das Bild —
     bei 375 px war diese Kopie 898 px breit und schob die Seite seitlich aus
     dem Rahmen. Mit dem Finger gibt es kein Überfahren, also fällt sie auf
     schmalen Schirmen ganz weg. */
  .single-product .woocommerce-product-gallery__image{ overflow:hidden; }
  .single-product img.zoomImg{ display:none !important; }
  /* Der eigentliche Übeltäter auf dem Handy: das Auswahlformular der Varianten.
     Die Tabelle richtet sich nach der längsten Bezeichnung — beim Gastgeschenk
     772 px in einer 331 px breiten Spalte, und die ganze Seite schob sich zur
     Seite. Die Galerie war es nicht; das habe ich zuerst falsch geraten und
     durch Messen korrigiert. */
  .single-product .variations_form,
  .single-product table.variations{ max-width:100%; width:100%; }
  .single-product table.variations,
  .single-product table.variations tbody,
  .single-product table.variations tr,
  .single-product table.variations td,
  .single-product table.variations th{ display:block; width:auto; max-width:100%; }
  .single-product table.variations select{ max-width:100%; width:100%; }
  .single-product .woocommerce-variation-add-to-cart{ max-width:100%; flex-wrap:wrap; }
  ul.products{ grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:20px; }
  .shop-article .entry-content > .woocommerce-ordering{ float:none; display:block; margin-top:12px; }
}

/* ---------- Terminbuchung Wespenberatung ----------
   Beide Knöpfe standen auf der alten Seite und sind beim Umzug verloren
   gegangen — zusammen mit der Fussnote über 50 % der Auftragssumme. Sie
   führen auf die Terminbuchung: 15 Minuten Rückruf, 30 Minuten vor Ort. */
.wespen-termine{
  display:grid; gap:22px; margin:34px 0;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.wespen-termin{
  background:var(--cream,#F5EFE2); border-radius:var(--radius,14px);
  padding:26px 24px; display:flex; flex-direction:column; gap:10px;
}
.wespen-termin h3{ margin:0; font-size:20px; }
.wespen-termin p{ margin:0; }
.wespen-termin .btn{
  align-self:flex-start; margin-top:6px; display:inline-block;
  padding:13px 26px; border-radius:999px; text-decoration:none;
  background:var(--ink,#241F15); color:var(--paper,#F5EFE2);
  font-weight:600; transition:opacity .2s;
}
.wespen-termin .btn:hover{ opacity:.86; }
.wespen-fussnote{ font-size:14.5px; color:var(--ink-dim,#6d6249); margin-top:26px; }

/* ---------- Seite Wespen- & Hornissenfachberater (T002, 17.09) ----------
   Kunde 16.09: «so wieder aussehen» wie die alte Seite. Dort: Banner mit Text
   auf dem Foto, roter Aufruf in der Mitte, Ablauf in vier Spalten mit Symbolen,
   zwei Terminkarten nebeneinander, Text und Bild nebeneinander, AGB-Knopf.
   Texte 1:1 — nur Raster und Gestaltung. Die Seite nutzt die volle Breite der
   Seitenspalte (1240 px), nicht die Lesespalte von 858 px: in vier Spalten mit
   858 px bliebe pro Schritt kaum Platz. Fliesstext bleibt in jeder Spalte kurz. */
.entry-content .wespen{ --wespen-rot:#B3261E; }
.entry-content .wespen > section + section{ margin-top:clamp(48px,6vw,84px); }
.entry-content .wespen p{ margin:0; }
.entry-content .wespen p + p{ margin-top:.9rem; }
.entry-content .wespen :is(h2,h3){ margin-top:0; }
.entry-content .wespen .wespen-rot,
.entry-content .wespen .wespen-rot strong,
.entry-content .wespen .wespen-titel-rot{ color:var(--wespen-rot); }
.entry-content .wespen-titel-rot{ text-align:center; max-width:30ch; margin-inline:auto; margin-bottom:28px; }
/* «Jetzt NEU…» — длинный; при 30ch шёл в три строки, на старой странице две */
.entry-content .wespen-termine-block .wespen-titel-rot{ max-width:48ch; }
.entry-content .wespen ul{ padding-left:0; list-style:none; margin:.8rem 0 0; }
.entry-content .wespen ul > li{ position:relative; padding-left:24px; margin-top:.45em; }
.entry-content .wespen ul > li::before{
  content:""; position:absolute; left:4px; top:.7em;
  width:7px; height:7px; border-radius:50%; background:var(--gold);
}

/* Banner: Foto als Hintergrund, Text links auf dunklem Verlauf */
.entry-content .wespen-hero{
  position:relative; overflow:hidden; border-radius:var(--radius);
  min-height:clamp(300px,34vw,420px); display:flex; align-items:center;
  background:var(--brown);
}
.entry-content .wespen-hero img.wespen-hero__bild{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 35%;
  border-radius:0; box-shadow:none; margin:0;
}
.entry-content .wespen-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(20,16,10,.82) 0%,rgba(20,16,10,.62) 45%,rgba(20,16,10,.12) 100%);
}
.entry-content .wespen-hero__text{
  position:relative; z-index:1; max-width:560px;
  padding:clamp(28px,5vw,64px);
}
.entry-content .wespen-hero__text h2{
  color:#FFF8EA; font-size:clamp(28px,3.6vw,46px); line-height:1.12; margin-bottom:.5em;
}
.entry-content .wespen-hero__text p{ color:#F1E6CF; font-size:17px; }
.entry-content .wespen-hero__text a{ color:#FFF8EA; }

/* Aufruf: rot, zentriert */
.entry-content .wespen-ruf{ text-align:center; }
.entry-content .wespen-ruf p.wespen-ruf__rot{ font-size:clamp(18px,2vw,22px); }
.entry-content .wespen-ruf p.wespen-ruf__rot strong{ color:var(--wespen-rot); }
.entry-content .wespen-ruf__satz{ margin-top:12px; font-size:clamp(17px,1.8vw,20px); }
.entry-content .wespen-ruf h3.wespen-ruf__rot{ margin-top:18px; font-size:clamp(20px,2.2vw,26px); color:var(--wespen-rot); }
.entry-content .wespen-ruf h3 a{ color:var(--wespen-rot); }

/* Text und Bild nebeneinander */
.entry-content .wespen-paar{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(24px,4vw,56px); align-items:start;
}
.entry-content .wespen-paar--bild-rechts{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.entry-content .wespen-paar--bild-rechts > img{ order:2; }
.entry-content .wespen-paar > img{ width:100%; height:auto; margin:0; }
.entry-content .wespen-paar__text h2{ margin-bottom:.6em; }

/* Ablauf: vier Spalten mit Symbol */
.entry-content .wespen-ablauf__raster{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.4vw,34px); font-size:15.5px; line-height:1.6;
}
.entry-content .wespen-schritt{
  background:#FFFDF8; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px;
}
.entry-content .wespen-schritt__icon{
  width:44px; height:44px; display:block; margin-bottom:12px;
  fill:none; stroke:var(--gold-deep); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.entry-content .wespen-schritt h3{ font-size:22px; margin-bottom:.5em; }

/* Terminkarten: Foto mit Text und Knopf darauf, nebeneinander */
/* Все правила карточек — только внутри .wespen-termine-block. Ланда 17.09: без префикса
   ::after с position:absolute цеплялся к старой разметке (.wespen-termin без position:relative)
   и закрывал тёмным слоем весь первый экран живого сайта — между заливкой темы и записи
   и на All-Inkl после финального дампа, если запись не обновлена. */
.entry-content .wespen-termine-block .wespen-termine{ margin:0; }
.entry-content .wespen-termine-block .wespen-termin{
  position:relative; overflow:hidden; padding:0; gap:0;
  min-height:320px; justify-content:flex-end; background:var(--brown);
}
.entry-content .wespen-termine-block .wespen-termin > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border-radius:0; box-shadow:none; margin:0;
}
.entry-content .wespen-termine-block .wespen-termin::after{
  content:""; position:absolute; inset:0;
  /* Ланда 17.09: на 375 заголовок второй карточки стоял на светлом небе — контраст 1.70.
     Затемнение держится до самого верха карточки. */
  background:linear-gradient(0deg,rgba(20,16,10,.9) 0%,rgba(20,16,10,.72) 60%,rgba(20,16,10,.55) 100%);
}
.entry-content .wespen-termine-block .wespen-termin__text{
  position:relative; z-index:1; padding:26px 24px;
  display:flex; flex-direction:column; gap:8px;
}
.entry-content .wespen-termine-block .wespen-termin__text h3{ color:#FFF8EA; font-size:clamp(21px,2.2vw,26px); }
.entry-content :is(.wespen-termin__text, .wespen-hero__text) :is(h2,h3,p){ text-shadow:0 1px 3px rgba(0,0,0,.55); }
.entry-content .wespen-termine-block .wespen-termin__text p{ color:#F1E6CF; }
.entry-content .wespen-termine-block .wespen-termin__text a.btn{
  background:var(--cream); color:var(--brown); text-decoration:none; margin-top:10px;
}
.entry-content .wespen-termine-block .wespen-termin__text a.btn:hover{ color:var(--brown); opacity:.9; }

/* Wespenarten: zwei Spalten */
.entry-content .wespen-arten__titel{ font-size:clamp(20px,2.1vw,26px); max-width:900px; margin-bottom:26px; }
.entry-content .wespen-arten__raster{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(22px,3vw,40px);
}
.entry-content .wespen-art > img{ width:100%; height:auto; margin:0 0 16px; }

/* Schluss: Fussnote und AGB-Knopf */
.entry-content .wespen-schluss .wespen-fussnote{ margin-top:0; max-width:none; }
.entry-content .wespen-agb{
  margin-top:28px; padding:26px 20px; text-align:center;
  background:rgba(36,31,21,.06); border-radius:var(--radius);
}
.entry-content .wespen-agb a.btn{
  display:inline-block; padding:13px 26px; border-radius:999px; text-decoration:none;
  background:var(--brown); color:var(--cream); font-weight:600;
}
.entry-content .wespen-agb a.btn:hover{ color:var(--cream); opacity:.88; }

.entry-content .wespen a.btn:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; }

@media (max-width:1100px){
  .entry-content .wespen-ablauf__raster{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* Ланда 17.09: на 768 фото занимает всю ширину, и боковое затемнение не доходило до
     абзаца заставки — контраст 2.56. Затемнение снизу вверх, текст внизу. */
  .entry-content .wespen-hero{ align-items:flex-end; }
  .entry-content .wespen-hero::after{ background:linear-gradient(0deg,rgba(20,16,10,.88) 0%,rgba(20,16,10,.68) 60%,rgba(20,16,10,.4) 100%); }
}
@media (max-width:760px){
  .entry-content .wespen-paar,
  .entry-content .wespen-paar--bild-rechts,
  .entry-content .wespen-arten__raster,
  .entry-content .wespen-ablauf__raster{ grid-template-columns:minmax(0,1fr); }
  .entry-content .wespen-paar--bild-rechts > img{ order:0; }
  .entry-content .wespen-agb a.btn{ padding:12px 18px; font-size:14px; }
}

/* ---------- Seiten «Ist eine Umsiedlung sinnvoll?», «Kosten Vor-Ort Beratung»,
     «Bienenpatenschaft» (T003, 17.09) ----------
   Kunde 17.09: «Die müsste noch an unser bisherige angepasst werden». Auf der alten Seite standen
   Bild und Text nebeneinander, «Kurz und bündig» als aufklappbare Liste, die vier Landkreise
   nebeneinander und der Slider mit einem Titel statt sechs. Texte bleiben 1:1.
   Alle Regeln unter .tcb-seite: ohne Präfix greifen sie in fremde Inhalte (T002, dunkle Kopfzeile). */
.entry-content .tcb-seite > section + section{ margin-top:clamp(44px,5.5vw,76px); }
.entry-content .tcb-seite p{ margin:0; }
.entry-content .tcb-seite p + p{ margin-top:.9rem; }
.entry-content .tcb-seite :is(h2,h3){ margin-top:0; }
.entry-content .tcb-seite img{ width:100%; height:auto; }

/* Bild und Text nebeneinander */
.entry-content .tcb-para{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(24px,4vw,52px); align-items:start;
}
.entry-content .tcb-para__bild{ margin:0; }
.entry-content .tcb-para__bild figcaption{ margin-top:10px; font-size:14.5px; color:var(--ink-soft); }
.entry-content .tcb-para__text h2{ margin-bottom:.7em; }

/* «Kurz und bündig» — aufklappbare Punkte, wie auf der alten Seite */
.entry-content .tcb-kurz h2{ margin-bottom:22px; }
.entry-content details.tcb-punkt{
  border-top:1px solid var(--line); padding:14px 0;
}
.entry-content details.tcb-punkt:last-of-type{ border-bottom:1px solid var(--line); }
.entry-content details.tcb-punkt > summary{
  cursor:pointer; list-style:none; font-weight:600; color:var(--brown);
  display:flex; gap:12px; align-items:flex-start; padding-right:8px;
}
.entry-content details.tcb-punkt > summary::-webkit-details-marker{ display:none; }
.entry-content details.tcb-punkt > summary::before{
  content:"+"; flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  background:var(--gold); color:var(--brown); font-weight:700; line-height:22px; text-align:center;
}
.entry-content details.tcb-punkt[open] > summary::before{ content:"–"; }
.entry-content details.tcb-punkt > p{ margin-top:12px; padding-left:34px; }
/* При печати страницы ответы должны попадать на бумагу, иначе остаются одни заголовки
   (находка Ланды, круг 1 T003). */
@media print{
  /* закрытый <details> прячет содержимое служебным слоем, поэтому display на абзаце
     не помогает — снимаем именно его (::details-content), с запасным правилом для
     браузеров, где этого псевдоэлемента ещё нет */
  .entry-content details.tcb-punkt::details-content{ content-visibility:visible; block-size:auto; }
  .entry-content details.tcb-punkt > *{ display:block; content-visibility:visible; }
  .entry-content details.tcb-punkt > summary::before{ content:""; background:none; }
}

/* Aufruf am Seitenende */
.entry-content .tcb-prizyv{ text-align:center; }
.entry-content .tcb-prizyv h3{ color:#B3261E; }
.entry-content .tcb-prizyv__knopka{ margin-top:18px; }
.entry-content .tcb-prizyv a.btn{
  display:inline-block; padding:14px 28px; border-radius:999px; text-decoration:none;
  background:var(--brown); color:var(--cream); font-weight:600;
}
.entry-content .tcb-prizyv a.btn:hover{ color:var(--cream); opacity:.88; }
/* Текст кнопки лежит в <strong>, а общее правило красит strong в тёмный — на тёмной кнопке
   надпись пропадала совсем (снимок umsied-prevju-1440 от 17.09). */
.entry-content .tcb-seite a.btn strong,
.entry-content .tcb-seite a.paten-btn strong{ color:inherit; }

/* Kosten Vor-Ort: Kopfbild mit Titel darauf, Bilderreihe, vier Landkreise */
.entry-content .tcb-zastavka{
  position:relative; overflow:hidden; border-radius:var(--radius);
  min-height:clamp(230px,24vw,320px); display:flex; align-items:flex-end; background:var(--brown);
}
/* Вес селектора равен весу .entry-content .tcb-seite img выше, иначе height:auto побеждает
   и вместо кадрированного снимка видно его верхние 41 % (находка Ланды, круг 1 T003). */
.entry-content .tcb-seite img.tcb-zastavka__bild{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 55%;
  border-radius:0; box-shadow:none; margin:0;
}
/* Затемнение под текстом. На старом сайте затемняющего слоя нет вовсе (проверено круг 2:
   обход всех элементов и псевдоэлементов .dali-teaser/.swiper-slide на Strato вернул пусто,
   filter:none, opacity:1) — белый заголовок лежал прямо на снимке. Градиент добавлен ради
   читаемости; прежнее значение .88 делало первый экран вдвое темнее старого. */
.entry-content .tcb-zastavka::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(20,16,10,.66) 0%,rgba(20,16,10,.44) 55%,rgba(20,16,10,.34) 100%);
}
.entry-content .tcb-zastavka__text{ position:relative; z-index:1; padding:clamp(24px,4vw,44px); }
.entry-content .tcb-zastavka__text h2{ color:#FFF8EA; margin-bottom:.4em; }
.entry-content .tcb-zastavka__text p{ color:#F1E6CF; }
.entry-content :is(.tcb-zastavka__text) :is(h2,p){ text-shadow:0 1px 3px rgba(0,0,0,.55); }
.entry-content .tcb-lenta{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,26px); }
.entry-content .tcb-lenta img{ aspect-ratio:3/2; object-fit:cover; }
.entry-content .tcb-rajony__titel{ text-align:center; margin-bottom:28px; }
.entry-content .tcb-rajony__raster{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.2vw,30px); }
.entry-content .tcb-rajon{ text-align:center; }
.entry-content .tcb-rajon img{ border-radius:50%; margin-bottom:14px; }
.entry-content .tcb-rajon h2,
.entry-content .tcb-rajon h3{ font-size:clamp(17px,1.5vw,21px); margin-bottom:.2em; }
.entry-content .tcb-rajon__cena{ color:var(--gold-deep); margin-top:.3em; }

/* Bienenpatenschaft: vier Pakete als Karten mit Produktbild */
.entry-content .tcb-pakety{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.2vw,28px); margin:26px 0 8px;
}
.entry-content .tcb-paket{
  background:#FFFDF8; border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 18px; text-align:center; display:flex; flex-direction:column; gap:6px;
}
.entry-content .tcb-paket img{ width:100%; height:auto; border-radius:calc(var(--radius) - 8px); margin-bottom:8px; }
.entry-content .tcb-paket__cena strong{ font-size:20px; color:var(--gold-deep); }
.entry-content .tcb-paket a.paten-btn{ margin:12px 0 0; padding:12px 20px; }

@media (max-width:1100px){
  .entry-content .tcb-rajony__raster,
  .entry-content .tcb-pakety{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px){
  .entry-content .tcb-para,
  .entry-content .tcb-lenta,
  .entry-content .tcb-rajony__raster,
  .entry-content .tcb-pakety{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- Bienenpatenschaften ----------
   Die vier Links auf die Produkte standen leer im Text: der Kunde sah vier
   Preise und konnte keinen davon bestellen. «Direkt zum Bestellen», wie am
   25.08 gewünscht. */
.entry-content a.paten-btn{
  display:inline-block; margin:10px 0 22px;
  padding:13px 26px; border-radius:999px; text-decoration:none;
  background:var(--ink,#241F15); color:var(--paper,#F5EFE2);
  font-weight:600; transition:opacity .2s;
}
.entry-content a.paten-btn:hover{ opacity:.86; }

/* ---------- Bild links, Text rechts ----------
   Vom Kunden am 25.08 für die Betriebsweise gewünscht. Auf schmalen Schirmen
   fällt es auf eine Spalte zurück — sonst schöbe sich die Seite seitlich raus,
   wie es die Produktseiten schon einmal getan haben. */
.split-media{
  display:grid; gap:32px; align-items:start; margin:0 0 30px;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
}
.split-media__bild img{
  width:100%; height:auto; border-radius:var(--radius,14px);
  box-shadow:0 18px 44px rgba(36,31,21,.10);
}
.split-media__text p{ margin-top:0; }
@media (max-width:900px){
  .split-media{ grid-template-columns:minmax(0,1fr); gap:20px; }
}

/* ---------- Das Bienenjahr zum Aufklappen ----------
   Vom Kunden am 25.08 gewünscht. Sieben Abschnitte, einer je Zeitraum.
   Ohne JavaScript: <details> kann das von Haus aus, funktioniert also auch,
   wenn ein Skript nicht lädt. */
.jahr-liste{ display:flex; flex-direction:column; gap:12px; margin:28px 0; }
.jahr{
  border:1px solid rgba(36,31,21,.14); border-radius:var(--radius,14px);
  background:var(--cream,#F5EFE2); overflow:hidden;
}
.jahr summary{
  cursor:pointer; padding:16px 22px; font-weight:650; font-size:19px;
  list-style:none; display:flex; align-items:center; justify-content:space-between;
}
.jahr summary::-webkit-details-marker{ display:none; }
.jahr summary::after{
  content:'+'; font-size:24px; line-height:1; color:var(--gold-deep,#8a6d12);
  transition:transform .2s;
}
.jahr[open] summary::after{ content:'−'; }
.jahr summary:hover{ color:var(--gold-deep,#8a6d12); }
.jahr__inhalt{ padding:0 22px 20px; }
.jahr__inhalt p:first-child{ margin-top:0; }
@media (prefers-reduced-motion:reduce){ .jahr summary::after{ transition:none; } }

/* ---------- Kopfzeile: Platz für den achten Punkt ----------
   Mit «Aktuelles» wurde die Reihe zu eng: fünf Punkte brachen auf zwei
   Zeilen um, die Kopfzeile wuchs von 35 auf 58 px Zeilenhöhe und sah
   gestaucht aus. Abstand und Schriftgrad leicht herunter, Umbruch verboten —
   der Entwurf des Kunden bleibt unberührt, das steht hier als Überschreibung. */
.main-nav{ gap:26px; }
/* Das letzte Aufklappmenü («Kontakt») steht ganz rechts und schob sich mit dem
   achten Punkt 53 px über den Fensterrand hinaus — alle acht Einträge lagen
   ausserhalb. Deshalb klappt das letzte Menü nach links auf. */
.main-nav .nav-group:last-of-type .nav-sub,
.main-nav .nav-group:last-of-type .nav-dropdown,
.main-nav .nav-group:last-of-type > div,
.main-nav .nav-group:last-of-type > ul{ left:auto; right:0; }
.main-nav > a,
.main-nav .nav-group > a{ font-size:15.5px; white-space:nowrap; }
@media (max-width:1320px){
  .main-nav{ gap:18px; }
  .main-nav > a,
  .main-nav .nav-group > a{ font-size:14.5px; }
}

/* ---------- Blog «Aktuelles» ---------- */
.beitrag-liste{
  display:grid; gap:26px; margin:8px 0 34px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.beitrag-karte{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--cream,#F5EFE2); border-radius:var(--radius,14px);
  border:1px solid rgba(36,31,21,.08);
}
.beitrag-karte__bild{ display:block; }
/* Nicht beschneiden: der Kunde hat als Bild eine Urkunde im Hochformat
   geschickt. In ein 3:2-Fenster gepresst, war oben das Nestfoto abgeschnitten
   und unten die Unterschrift mitten im Zug gekappt — das Erste, was der Leser
   im Bereich «Aktuelles» sah, war ein Fetzen Papier. Lieber ganz zeigen. */
.beitrag-karte__bild{ background:#fff; }
.beitrag-karte__bild img{
  width:100%; height:auto; display:block;
  aspect-ratio:3/2; object-fit:contain; object-position:center;
}
.beitrag-karte__text{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:8px; }
.beitrag-karte__datum{ margin:0; font-size:14px; color:var(--ink-dim,#6d6249); }
.beitrag-karte__titel{ margin:0; font-size:21px; line-height:1.3; }
.beitrag-karte__titel a{ color:var(--ink,#241F15); text-decoration:none; }
.beitrag-karte__titel a:hover{ color:var(--gold-deep,#8a6d12); }
.beitrag-karte__anriss{ margin:0; }
.beitrag-karte__mehr{ margin-top:6px; align-self:flex-start; font-weight:600; }

/* Nachweise: zwei Dokumente nebeneinander, klein genug zum Lesen ohne Zoom */
.nachweise{
  display:grid; gap:22px; margin:30px 0 8px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.nachweise figure{ margin:0; }
.entry-content .nachweise img{
  width:100%; max-width:100%; height:auto; display:block;
  border-radius:var(--radius,14px); border:1px solid rgba(36,31,21,.10);
  box-shadow:0 12px 28px rgba(36,31,21,.10);
}
.nachweise figcaption{ margin-top:8px; font-size:14px; color:var(--ink-dim,#6d6249); }

/* Einzelner Beitrag */
.beitrag-meta{ margin:0 0 22px; font-size:15px; color:var(--ink-dim,#6d6249); }
.beitrag-cta{
  display:flex; flex-wrap:wrap; gap:14px; margin:36px 0 8px;
  padding:26px 24px; background:var(--cream,#F5EFE2); border-radius:var(--radius,14px);
}
.beitrag-cta .btn{
  display:inline-block; padding:13px 26px; border-radius:999px; text-decoration:none;
  background:var(--ink,#241F15); color:var(--paper,#F5EFE2); font-weight:600;
  transition:opacity .2s;
}
.beitrag-cta .btn:hover{ opacity:.86; }
.beitrag-cta .btn--ruhig{ background:transparent; color:var(--ink,#241F15); border:1px solid rgba(36,31,21,.28); }
.beitrag-nav{ display:flex; justify-content:space-between; gap:18px; margin:34px 0 0; flex-wrap:wrap; }
.beitrag-zurueck{ display:inline-block; margin-top:26px; font-weight:600; }
@media (max-width:600px){
  .beitrag-cta{ flex-direction:column; }
  .beitrag-cta .btn{ text-align:center; }
}

/* ---------- Kacheln «Wer wir sind» ----------
   Vom Kunden am 28.08 gewünscht: «Bilder + Text als Kachel wie bei uns».
   Drei Personen, je Bild und Text. Abwechselnd Bild links / rechts, damit die
   Seite nicht wie eine Liste wirkt. */
.kachel-liste{ display:flex; flex-direction:column; gap:34px; margin:32px 0; }
.kachel{
  display:grid; gap:30px; align-items:center;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  background:var(--cream,#F5EFE2); border-radius:var(--radius,14px);
  padding:26px; border:1px solid rgba(36,31,21,.08);
}
/* nth-of-type, nicht nth-child: zwischen den Kacheln stehen Überschriften
   («Weibliche Verstärkung im Team»), und die zählte nth-child mit — dadurch
   stand das Bild der ersten Kachel rechts statt links, und der Wechsel war
   verschoben. nth-of-type zählt nur die article-Elemente. */
.kachel-liste article.kachel:nth-of-type(even){ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.kachel-liste article.kachel:nth-of-type(even) .kachel__bild{ order:2; }
/* Nicole hat kein Foto — dann nimmt der Text die ganze Breite. */
.kachel--ohne-bild{ grid-template-columns:minmax(0,1fr); }
.kachel__bild img{
  width:100%; height:auto; display:block; border-radius:var(--radius,14px);
  box-shadow:0 14px 34px rgba(36,31,21,.12);
}
.kachel__text h3{ margin:0 0 12px; font-size:23px; color:var(--gold-deep,#8a6d12); }
.kachel__text p:last-child{ margin-bottom:0; }
@media (max-width:900px){
  .kachel{ grid-template-columns:minmax(0,1fr); gap:18px; padding:20px; }
  .kachel-liste article.kachel:nth-of-type(even) .kachel__bild{ order:0; }
}

/* ---------- Diashow: Urkunden und Nachweise ----------
   «Urkunden kleiner und als scrollen links nach rechts (Diashow)» — Kunde,
   28.08. Kein Skript: waagerechtes Scrollen mit Einrasten kann der Browser
   selbst, also funktioniert es auch ohne JavaScript und mit dem Finger. */
.diashow{
  display:flex; gap:18px; overflow-x:auto; padding:6px 2px 18px;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:thin;
}
/* Selektor schwerer als .entry-content img — sonst gewinnt dessen width:100 %
   und die Urkunden bleiben bildschirmbreit, statt in der Reihe zu stehen. */
.entry-content .diashow > *{
  flex:0 0 auto; width:min(300px,72vw); max-width:min(300px,72vw);
  scroll-snap-align:start; margin:0;
}
/* Nur Bilder INNERHALB eines Wrappers auf volle Breite. Stand hier vorher
   .diashow img, traf das auch das direkte Kind — gleiche Spezifität, später
   im Text, also gewann width:100 % und die Urkunde blieb bildschirmbreit. */
.entry-content .diashow > * img{
  width:100%; max-width:100%; height:auto; display:block;
}
.entry-content .diashow img{
  height:auto; display:block; border-radius:var(--radius,14px);
  box-shadow:0 12px 30px rgba(36,31,21,.12); border:1px solid rgba(36,31,21,.08);
}
.diashow::-webkit-scrollbar{ height:8px; }
.diashow::-webkit-scrollbar-thumb{ background:rgba(36,31,21,.22); border-radius:999px; }
.diashow::-webkit-scrollbar-track{ background:rgba(36,31,21,.06); border-radius:999px; }
@media (prefers-reduced-motion:reduce){ .diashow{ scroll-behavior:auto; } }
@media (max-width:600px){ .entry-content .diashow > *{ width:78vw; max-width:78vw; } }

/* ---------- Fehlerseite ---------- */
/* Bewusst eng gefasst: eine Regel auf .page-main .btn traf auch den
   Absende-Knopf des Formulars und verdoppelte dort den Abstand. */
.page-404__actions{ margin-top:1.6rem; }

/* ---------- Mobil ---------- */
@media (max-width:900px){
  .page-hero{ padding-top:calc(var(--header-h) + var(--topbar-h) + 44px); padding-bottom:38px; }
  .page-article{ padding:44px 0 76px; }
  .entry-content{ font-size:16.5px; }
  .entry-content iframe{ min-height:300px; }
  .tcb-form{ padding:24px 20px; }
}

@media (prefers-reduced-motion:reduce){
  .tcb-form__submit{ transition:none; }
  .tcb-form__submit:hover{ transform:none; }
}