@import url("schriften/schriften.css");

/* ------------------------------------------------------------------
   Landesverband Dunkle Biene Bayern e.V. — версия 2, «журнал»
   Цвета сняты пипеткой, геометрия измерена по эталону
   _эталон/03_Главная_v2_журнал.png (733 px шириной).
   Проценты ниже — доли ширины страницы из этого эталона.
   Антиква только в заголовках, надстрочниках, подписях и названиях стран.
   Всё остальное — гротеск.
   ------------------------------------------------------------------ */

:root {
  --creme:    #FAEFDE;
  --oliv:     #DFDBB7;
  --gruen:    #1E3222;
  --gruen-2:  #172719;
  --gold:     #DFA347;
  --tinte:    #262619;
  --tinte-2:  #5A5947;
  --linie:    rgba(38, 38, 25, .38);
  --linie-2:  rgba(38, 38, 25, .2);
  --hell-1:   rgba(249, 241, 230, .86);
  --hell-2:   rgba(249, 241, 230, .48);

  --titel: "Source Serif 4", Georgia, serif;
  --text:  "Mulish", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --breite: 1440px;
  --rand: 49px;
  --seitenrand: max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand)));
  /* ширина колонки с подписью у фото героя — фиксируется, а не тянется от окна */
  --bildtext: clamp(150px, 12.6vw, 188px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinte);
  font: 400 21px/1.58 var(--text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--titel);
  font-weight: 600;
  line-height: 1.02;
  margin: 0;
  letter-spacing: -.008em;
  color: var(--tinte);
}
h1 { font-size: clamp(34px, 6.11vw, 88px); }
h2 { font-size: clamp(28px, 4.93vw, 71px); }

p { margin: 0 0 1em; }
h2 + p, h1 + p { margin-top: 18px; }
p:last-child { margin-bottom: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }
figure { margin: 0; }

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }

/* ---------- мелкие детали ---------- */

.augenbraue {
  font: 400 clamp(13px, 1.25vw, 18px)/1 var(--titel);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #38372A;
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.augenbraue::after {
  content: "";
  height: 1px;
  background: var(--linie);
  flex: 0 1 108px;
  min-width: 36px;
}

.bildtext {
  font: italic 400 clamp(14.5px, 1.32vw, 19px)/1.5 var(--titel);
  color: #4B4A39;
  margin: 13px 0 0;
}
.bildtext--hell { color: var(--hell-2); }
.strichlein { display: block; width: 46px; height: 1px; background: var(--linie); margin-top: 16px; }
.strich-oben { display: block; width: 72px; height: 1.5px; background: #6E6C45; margin: 0 0 22px; }

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 19px 36px;
  font: 500 clamp(16px, 1.6vw, 23px)/1 var(--text);
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s;
}
.knopf--dunkel       { background: var(--gruen); color: var(--creme); }
.knopf--dunkel:hover { background: var(--gruen-2); }
.knopf--gold         { background: var(--gold); color: var(--gruen-2); }
.knopf--gold:hover   { background: #CE9238; }
.knopf--rand         { border-color: var(--gruen); color: var(--gruen); }
.knopf--rand:hover   { background: var(--gruen); color: var(--creme); }
.knopf--klein        { padding: 14px 22px; font-size: clamp(13.5px, 1.22vw, 17.5px); }

.zeile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--linie);
  text-decoration: none;
  transition: padding-left .18s, border-color .18s;
}
.zeile:first-child { border-top: 1px solid var(--linie); }
.zeile:hover { padding-left: 8px; border-color: var(--gruen); }
.zeile__name   { font: 400 clamp(17px, 1.95vw, 28px)/1.28 var(--text); }
.zeile__zusatz { font: 400 clamp(14.5px, 1.34vw, 19px)/1.4 var(--text); color: #4B4A39; }
.zeile__nummer {
  font: 600 clamp(13px, 1.25vw, 18px)/1 var(--text);
  letter-spacing: .1em;
  color: #6E6C45;
  width: 42px; flex: 0 0 auto;
}
.zeile__pfeil { margin-left: auto; flex: 0 0 auto; color: #3A3A2B; }
.zeile:hover .zeile__pfeil { color: var(--gruen); }

.liste--titel .zeile__name { font: 600 clamp(21px, 2.75vw, 40px)/1.16 var(--titel);
                             letter-spacing: -.014em; }
.liste--titel .zeile { border-color: rgba(38,38,25,.46); }

.liste--hell .zeile { border-color: var(--hell-2); color: var(--creme); }
.liste--hell .zeile:hover { border-color: var(--hell-1); }
.liste--hell .zeile__pfeil { color: var(--hell-2); }
.liste--hell .zeile:hover .zeile__pfeil { color: var(--creme); }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font: 600 clamp(16px, 1.67vw, 24px)/1 var(--text);
  border-bottom: 2px solid rgba(38,38,25,.5);
  padding-bottom: 9px;
}
.textlink:hover { border-color: var(--gruen); }
.textlink svg { stroke-width: 1.8; }

/* ---------- шапка ---------- */

.kopf { background: var(--creme); border-bottom: 1.5px solid rgba(38,38,25,.85); }
.kopf .huelle { display: flex; align-items: center; gap: clamp(18px, 3.5vw, 50px);
                min-height: clamp(70px, 7.7vw, 111px);
                /* справа поле меньше — так в эталоне: слева 50 px, справа 36 */
                padding-right: clamp(16px, 2.5vw, 36px); }

.marke { display: flex; align-items: center; gap: 15px; text-decoration: none; flex: 0 0 auto; }
.marke img { width: clamp(44px, 6.5vw, 94px); height: auto; }
.marke__strich { width: 1px; align-self: stretch; background: var(--linie); margin: 5px 0; }
.marke__name   { font: 600 clamp(19px, 2.08vw, 30px)/1.1 var(--titel); white-space: nowrap; }
.marke__zusatz { font: italic 400 clamp(13px, 1.67vw, 24px)/1.25 var(--titel); color: var(--tinte-2); }

.menue__schalter {
  display: none; margin-left: auto;
  width: 46px; height: 46px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--linie); color: var(--gruen); cursor: pointer;
}
.menue__schalter .zu { display: none; }
.menue__schalter[aria-expanded="true"] .auf { display: none; }
.menue__schalter[aria-expanded="true"] .zu  { display: block; }

/* ---------- сетки ---------- */

.feld { padding: clamp(28px, 3.2vw, 46px) 0; }
.feld--knapp { padding: clamp(10px, 1.1vw, 16px) 0; }

.gespalten { display: grid; gap: clamp(24px, 3vw, 44px); align-items: start; }
.gespalten__strich { background: var(--linie); align-self: stretch; }
.gespalten--held { grid-template-columns: 2.25fr 1px 1fr; gap: clamp(14px, 1.4vw, 20px); }
.gespalten--weit { grid-template-columns: 1fr 1px 1.12fr; }
.gespalten--halb { grid-template-columns: 1fr 1px 1fr; }

/* ---------- герой ---------- */

.held { padding: clamp(30px, 3.6vw, 52px) 0 0; }
.held__rechts { padding-top: 6px; }
.held__rechts .knopf { width: 100%; justify-content: space-between;
                       font-family: var(--titel); font-size: clamp(16px, 1.53vw, 22px); }
.held__rechts p { font-family: var(--titel); font-size: clamp(17px, 1.74vw, 25px);
                  line-height: 1.35; margin-bottom: 26px; }

.heldbild { display: grid;
            grid-template-columns: calc(var(--seitenrand) + var(--bildtext)) 1fr;
            align-items: center; }
.heldbild .bildtext { padding-left: var(--seitenrand);
                      padding-right: 0; margin: 0;
                      font-size: clamp(15px, 1.46vw, 21px); line-height: 1.3; }
.heldbild img { width: 100%; height: clamp(230px, 37.7vw, 543px); object-fit: cover; }
/* полоса с банками выше: при 2,2:1 кадр режет банки по дну */
.heldbild--hoch img { height: clamp(260px, 48.5vw, 699px); }

/* ---------- ряд «фото + текст» ---------- */

.riss { display: grid; align-items: center; }
.riss__text { padding-right: var(--seitenrand); max-width: 42em; }

.riss--links { grid-template-columns: 49% 1fr; }
.riss--links figure { margin-left: 1.9%; }
.riss--links .riss__text { padding-left: 5.2%; }
.riss--links img { width: 100%; height: clamp(230px, 38.7vw, 557px); object-fit: cover; }

.riss--rechts { grid-template-columns: 45.2% 1fr; }
.riss--rechts figure { margin-right: 1.4%; }
.riss--rechts .riss__text { padding-left: var(--seitenrand); padding-right: 5%; }
.riss--rechts h2 { font-size: clamp(28px, 4.72vw, 68px); }
.riss--rechts img { width: 100%; height: clamp(220px, 31vw, 447px); object-fit: cover; }

/* ---------- тёмный блок: панель 40 % + фото ---------- */

.dunkel { background: var(--gruen); color: var(--creme); }
.dunkel h2, .dunkel h3 { color: var(--creme); }
.dunkel .augenbraue { color: var(--hell-2); }
.dunkel .augenbraue::after { background: var(--hell-2); }

.riss--dunkel { grid-template-columns: 40% 1fr; align-items: stretch;
                /* панель ниже фотографии на 55 px — ступенька как в эталоне */
                min-height: clamp(258px, 39.3vw, 566px); }
.riss--dunkel figure { align-self: start; }
.riss--dunkel .dunkel {
  padding: clamp(26px, 3vw, 44px) clamp(24px, 2.6vw, 38px) clamp(26px, 3vw, 44px) var(--seitenrand);
  display: flex; flex-direction: column; justify-content: center;
}
.riss--dunkel h2 { font-size: clamp(26px, 4.17vw, 60px); }
.riss--dunkel .dunkel p { color: rgba(249,241,230,.92); margin-bottom: 26px; }
.riss--dunkel img { width: 100%; height: clamp(230px, 35.5vw, 511px);
                    object-fit: cover; object-position: 42% 62%; }

/* ---------- оливковая полоса ---------- */

.oliv { background: var(--oliv); padding: clamp(34px, 4.4vw, 63px) 0; }
.oliv h2 { font-size: clamp(26px, 4.8vw, 69px); margin-bottom: 22px; }
.oliv .zeile { border-color: rgba(38,38,25,.28); }
.oliv p { color: #3E3D2B; font-size: clamp(16px, 1.53vw, 22px); max-width: 22em; }
.kleinlink { font: 500 clamp(16px, 1.53vw, 22px)/1 var(--text);
             text-decoration: none; border-bottom: 1.5px solid rgba(38,38,25,.5); padding-bottom: 4px; }
.kleinlink:hover { border-color: var(--gruen); }

/* ---------- финальный блок ---------- */

.schluss { background: var(--gruen); color: var(--creme); }
.schluss .huelle {
  display: grid;
  grid-template-columns: clamp(118px, 16.5vw, 238px) 1px 1fr;
  gap: clamp(22px, 3.2vw, 48px);
  align-items: center;
  min-height: clamp(260px, 25vw, 360px);
  padding-top: clamp(32px, 3.4vw, 48px);
  padding-bottom: clamp(32px, 3.4vw, 48px);
}
.schluss h2 { color: var(--creme); font-size: clamp(28px, 5.2vw, 75px); max-width: 14em; margin-bottom: 16px; }
.schluss p  { color: var(--hell-1); max-width: 30em; margin-bottom: 26px; }
.schluss__reihe { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.schluss__reihe .textlink { color: var(--creme); border-color: var(--hell-2); }
.schluss__reihe .textlink:hover { border-color: var(--creme); }
.zweig { width: 100%; height: auto; }
.schluss__strich { width: 1px; align-self: stretch; background: var(--hell-2); }

/* ---------- подвал ---------- */


/* ---------- планшет ---------- */

@media (max-width: 1000px) {
  :root { --rand: 26px; }
  .gespalten--held, .gespalten--weit, .gespalten--halb { grid-template-columns: 1fr; gap: 22px; }
  /* вертикальная черта становится горизонтальной, а не исчезает */
  .gespalten__strich { height: 1px; width: 100%; align-self: auto; }

  .heldbild { grid-template-columns: 1fr; }
  .heldbild .bildtext { padding: 0 var(--rand); order: 2; margin-top: 12px; }
  .heldbild img { height: clamp(230px, 46vw, 400px); }

  .riss--links, .riss--rechts, .riss--dunkel { grid-template-columns: 1fr; }
  .riss--links figure, .riss--rechts figure { margin: 0; }
  .riss--links .riss__text, .riss--rechts .riss__text {
    padding: 22px var(--rand) 0; max-width: none;
  }
  .riss--rechts figure { order: -1; }
  .riss--links img, .riss--rechts img { height: clamp(220px, 46vw, 380px); }
  .riss--dunkel .dunkel { padding: 30px var(--rand) 34px; }
  .riss--dunkel img { min-height: 0; height: clamp(210px, 46vw, 360px); }

  .schluss .huelle { grid-template-columns: clamp(84px, 16vw, 130px) 1px 1fr; min-height: 0; }
}

/* ---------- телефон ---------- */

@media (max-width: 680px) {
  :root { --rand: 18px; }
  body { font-size: 17.5px; line-height: 1.58; color: #1F1F14; }

  .kopf .huelle { min-height: 68px; position: relative; }
  .menue__schalter { display: inline-flex; }
  .menue {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--creme); border-bottom: 1px solid var(--linie);
    padding: 2px var(--rand) 16px;
    box-shadow: 0 16px 26px -20px rgba(38,38,25,.6);
  }
  .menue[data-offen] { display: flex; }

  .held { padding-top: 26px; }
  h1 { font-size: 33px; }
  h2 { font-size: 29px; }
  .oliv h2 { font-size: 26px; }
  .augenbraue { margin-bottom: 14px; }

  .feld { padding: 34px 0; }
  .feld--knapp { padding: 22px 0; }

  .zeile { padding: 11px 0; gap: 12px; flex-wrap: wrap; }
  .zeile__nummer { order: 1; width: 28px; }
  .zeile__name   { order: 2; flex: 1 1 auto; font-size: 18px; }
  .zeile__pfeil  { order: 3; }
  .zeile__zusatz { order: 4; flex: 1 0 calc(100% - 28px); margin: 2px 0 0 28px; font-size: 15.5px; }
  .zeile:hover { padding-left: 0; }
  .liste--titel .zeile__name { font-size: 22px; }

  .knopf { padding: 14px 24px; }
  /* ботаника отдельной строкой сверху, текст получает всю ширину */
  .schluss .huelle { grid-template-columns: 1fr; gap: 18px; padding: 28px 0 34px; }
  .schluss__strich { height: 1px; width: 100%; align-self: auto; }
  .zweig { width: 92px; height: auto; }
  .schluss__reihe { gap: 16px; }
}


/* ---------- Mitgliedschaften: SICAMM, LVBI, DIB ---------- */
/* Jedes Logo steht in einem gleich grossen Feld und wird hineingepasst,
   nie beschnitten und nie verzerrt. Die Seitenverhaeltnisse sind sehr
   unterschiedlich (SICAMM ist breit, die anderen fast quadratisch),
   deshalb begrenzen wir Hoehe UND Breite. */
.mitglied__vor { max-width: 40em; margin: 0 0 clamp(22px, 2.6vw, 38px); }

.mitglied__reihe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 28px);
}

.mitglied__karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: clamp(22px, 2.4vw, 34px) clamp(16px, 1.8vw, 26px);
  background: #fff;
  border: 1px solid var(--linie-2);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.mitglied__karte:hover,
.mitglied__karte:focus-visible {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(38, 38, 25, .09);
}

.mitglied__bild {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 104px;
}
/* max-width haelt das sehr breite SICAMM-Logo im Zaum, damit die drei
   Zeichen optisch gleich schwer wirken. Beschnitten wird nie:
   beide Begrenzungen sind Maxima, das Verhaeltnis bleibt erhalten. */
.mitglied__bild img {
  max-width: 72%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.mitglied__name {
  font-family: var(--titel);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
}
.mitglied__text { font-size: 16px; line-height: 1.5; color: var(--tinte-2); }
.mitglied__text i { font-style: italic; }

@media (max-width: 860px) {
  .mitglied__reihe { grid-template-columns: 1fr; }
  .mitglied__bild { height: 78px; }
}

/* ---------- добавлено для внутренних страниц ---------- */

/* заголовок страницы без фотографии */
.kopfzeile { padding: clamp(28px, 3.4vw, 50px) 0 clamp(18px, 2.2vw, 30px); }
.kopfzeile h1 { max-width: 16em; }

.krumen {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font: 400 clamp(14px, 1.2vw, 17px)/1 var(--text);
  color: var(--tinte-2); margin: 0 0 18px;
}
.krumen a { text-decoration: none; border-bottom: 1px solid var(--linie); padding-bottom: 3px; }
.krumen a:hover { border-color: var(--gruen); }

/* сплошной текст */
.text > * { max-width: 40em; }
.text--breit > * { max-width: 46em; }
.text h2 { font-size: clamp(26px, 3.1vw, 44px); margin: 40px 0 16px; }
.text h2:first-child, .text .strich-oben + h2 { margin-top: 0; }
.text h3 { font-family: var(--titel); font-weight: 600;
           font-size: clamp(20px, 1.95vw, 28px); margin: 34px 0 12px; }
.text h3:first-child { margin-top: 0; }
.text p { font-size: clamp(17px, 1.46vw, 21px); line-height: 1.62; }
.text a { color: var(--gruen); text-decoration: none;
          border-bottom: 1.5px solid rgba(38,38,25,.45); }
.text a:hover { border-color: var(--gruen); }

/* карточки людей и имкерей */
.personen {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin-top: 24px;
}
.person {
  background: #FCF6EA; border: 1px solid var(--linie);
  padding: 24px 26px 26px;
}
.person__rolle {
  display: block; font: 400 clamp(11.5px, .95vw, 13.5px)/1 var(--titel);
  letter-spacing: .2em; text-transform: uppercase; color: var(--tinte-2); margin-bottom: 10px;
}
.person__name { font: 600 clamp(19px, 1.74vw, 25px)/1.2 var(--titel); }
.person__ort  { color: #4B4A39; font-size: clamp(15px, 1.3vw, 18px); margin: 5px 0 8px; }
.person { display: flex; flex-direction: column; }
.person a { color: var(--gruen); font-size: clamp(14.5px, 1.25vw, 17px);
            text-decoration: none; border-bottom: 1px solid rgba(38,38,25,.4);
            overflow-wrap: break-word; word-break: normal; hyphens: none; }
.person .mail { display: inline; }
.person__zeilen { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.7; margin-top: 8px; }
.person__fuss { margin: auto 0 0; padding-top: 14px; }
.personen--imkerei { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .personen--imkerei { grid-template-columns: 1fr; } }

/* ---------- оливковая полоса: лёгкий сотовый фон ---------- */
.oliv {
  position: relative;
  background-color: var(--oliv);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='96.9948' viewBox='0 0 56 96.9948'><g fill='none' stroke='%23262619' stroke-opacity='.055' stroke-width='1.2'><path d='M28.000 -32.332 56.000 -16.166 56.000 16.166 28.000 32.332 0.000 16.166 0.000 -16.166z'/><path d='M0.000 16.166 28.000 32.332 28.000 64.663 0.000 80.829 -28.000 64.663 -28.000 32.332z'/><path d='M56.000 16.166 84.000 32.332 84.000 64.663 56.000 80.829 28.000 64.663 28.000 32.332z'/><path d='M28.000 64.663 56.000 80.829 56.000 113.161 28.000 129.326 0.000 113.161 0.000 80.829z'/></g></svg>");
  background-size: 56px 96.9948px;
}
.oliv > .huelle { position: relative; }

/* колонки полосы: кнопки на одной линии, низ выровнен */
.oliv .gespalten--halb > div { display: flex; flex-direction: column; height: 100%; }
.oliv .gespalten--halb > div > .knopf,
.oliv .gespalten--halb > div > p:last-child { margin-top: auto; }
.oliv .gespalten--halb > div > .knopf { align-self: flex-start; }
.oliv .gespalten { align-items: stretch; }

/* подвал: ровные базовые линии в обеих колонках */
.fuss .huelle { align-items: stretch; }
.fuss__rechts { display: flex; flex-direction: column; }
.fuss__netz { margin-top: auto; }
.person a:hover { border-color: var(--gruen); }

.hinweis {
  background: var(--oliv); border-left: 4px solid var(--gold);
  padding: 20px 24px; margin: 0 0 30px; font-size: clamp(16px, 1.32vw, 19px);
  max-width: 46em;
}

@media (max-width: 680px) {
  .kopfzeile { padding: 22px 0 14px; }
  .personen { grid-template-columns: 1fr; gap: 14px; }
  .person { padding: 20px 20px 22px; }
}

/* ---------- «Was Mitglieder bei uns haben»: без вертикальной черты ---------- */
.gespalten--offen { grid-template-columns: 1fr 1.12fr;
                    gap: clamp(48px, 6.2vw, 89px); align-items: start; }
.marke-biene { display: block; width: 40px; height: auto; margin: 0 0 20px; }

/* ---------- тёмный блок: фотография пчелы, без разделителя ---------- */
.schluss .huelle { grid-template-columns: clamp(180px, 15.3vw, 220px) 1fr;
                   gap: clamp(40px, 3.3vw, 50px); align-items: center; }
.biene-wabe { display: block; width: 100%; height: auto; }

@media (max-width: 1000px) {
  .gespalten--offen { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 860px) {
  .schluss .huelle { grid-template-columns: 1fr; gap: 0;
                     padding: 28px max(var(--rand), 20px) 34px; }
  .biene-wabe { width: 130px; margin-bottom: 24px; }
}

/* ---------- шапка: бургер с 1023 px, выше — тесное меню, иначе меню не помещается ---------- */
@media (max-width: 1280px) {
  .kopf .huelle { min-height: 68px; position: relative; }
  .menue__schalter { display: inline-flex; }
  .menue {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--creme); border-bottom: 1px solid var(--linie);
    padding: 2px var(--rand) 16px;
    box-shadow: 0 16px 26px -20px rgba(38,38,25,.6);
  }
  .menue[data-offen] { display: flex; }
  .menue a { max-width: none; padding: 13px 0; border-bottom: 1px solid var(--linie-2); font-size: 17px; }
  .menue a.knopf--dunkel { margin-top: 14px; padding: 13px 20px; }
}

/* ---------- мёд в «Steckbrief» ---------- */
.honig-wabe { display: block; width: 100%; max-width: 420px; height: auto; margin-top: 30px; }
@media (max-width: 680px) { .honig-wabe { max-width: 240px; margin-top: 22px; } }

/* ---------- медальон с пчелой в тёмном блоке ---------- */
.biene-medaillon { position: relative; justify-self: center; display: grid; place-items: center; }
.biene-medaillon::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 96%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(223, 163, 71, .42);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='96.9948' viewBox='0 0 56 96.9948'><g fill='none' stroke='%23DFA347' stroke-opacity='.14' stroke-width='1.1'><path d='M28.000 -32.332 56.000 -16.166 56.000 16.166 28.000 32.332 0.000 16.166 0.000 -16.166z'/><path d='M0.000 16.166 28.000 32.332 28.000 64.663 0.000 80.829 -28.000 64.663 -28.000 32.332z'/><path d='M56.000 16.166 84.000 32.332 84.000 64.663 56.000 80.829 28.000 64.663 28.000 32.332z'/><path d='M28.000 64.663 56.000 80.829 56.000 113.161 28.000 129.326 0.000 113.161 0.000 80.829z'/></g></svg>"),
                    radial-gradient(circle, rgba(223,163,71,.20) 0%, rgba(223,163,71,.06) 54%,
                                            rgba(223,163,71,0) 72%);
  background-size: 56px 96.9948px, auto;
}
.biene-wabe { position: relative; display: block; width: 100%; height: auto; }

/* колонка шире: пчела крупнее и стоит по центру своей колонки */
.schluss .huelle { grid-template-columns: clamp(220px, 21vw, 300px) 1fr; }

@media (max-width: 860px) {
  .schluss .huelle { grid-template-columns: 1fr; }
  .biene-medaillon { width: 150px; justify-self: start; margin-bottom: 24px; }
  .biene-wabe { width: 100%; margin-bottom: 0; }
}

/* ================= подвал по макету Kontakt ================= */
.fuss { background: #1C3822; color: var(--creme); padding: 0; border-top: 0; }

.fuss__ruf { display: grid; align-items: center;
             grid-template-columns: 38% auto 1fr;
             gap: clamp(14px, 2.3vw, 33px);
             padding: clamp(2px, .35vw, 5px) 0 clamp(2px, .3vw, 4px); }
.fuss__titel { font: 600 clamp(25px, 4.00vw, 58px)/1.14 var(--titel);
               color: var(--creme); margin: 0; letter-spacing: -.012em; }
.fuss__trenner { display: none; }
.fuss__knopf { font-size: clamp(13px, 1.46vw, 21px);
               padding: clamp(9px, 1.07vw, 15px) clamp(14px, 1.95vw, 28px); }
.fuss__biene { width: clamp(150px, 25.5vw, 367px); height: auto; justify-self: end;
               align-self: center; margin-right: calc(-1 * var(--rand)); }

.fuss__raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr;
                gap: clamp(18px, 2.6vw, 37px);
                border-top: 1px solid rgba(223, 163, 71, .6);
                padding: clamp(13px, 1.65vw, 24px) 0 clamp(13px, 1.65vw, 24px); }
.fuss__name { font: 600 clamp(16px, 1.86vw, 27px)/1.25 var(--titel); color: var(--creme);
              margin: 0 0 clamp(8px, 1.1vw, 16px); }
.fuss__zeilen { color: var(--hell-1); margin: 0 0 clamp(6px, .8vw, 11px);
                font-size: clamp(13px, 1.37vw, 20px); line-height: 1.5; }
.fuss__punkt { display: flex; align-items: flex-start; gap: clamp(7px, .9vw, 13px);
               margin: 0 0 clamp(5px, .7vw, 10px); color: var(--hell-1);
               font-size: clamp(13px, 1.37vw, 20px); line-height: 1.5; }
.fuss__punkt a { color: inherit; text-decoration: none; }
.fuss__punkt a:hover { color: var(--creme); }
.fuss__spalte { display: flex; flex-direction: column;
                border-left: 1px solid rgba(223, 163, 71, .35);
                padding-left: clamp(14px, 2.0vw, 29px); }
.fuss__kopf { font: 500 clamp(10px, 1.07vw, 15px)/1 var(--text); letter-spacing: .2em;
              text-transform: uppercase; color: var(--gold);
              margin: 0 0 clamp(10px, 1.37vw, 20px); }
.fuss__spalte a { color: var(--creme); text-decoration: none; line-height: 1;
                  font-size: clamp(13px, 1.37vw, 20px); padding: clamp(3px, .40vw, 6px) 0; }
.fuss__spalte a:hover { color: var(--gold); }

.fuss__unten { display: flex; align-items: center; justify-content: space-between;
               gap: 16px; flex-wrap: wrap;
               border-top: 1px solid rgba(223, 163, 71, .6);
               padding: clamp(11px, 1.46vw, 21px) 0 clamp(12px, 1.66vw, 24px); }
.fuss__recht { color: var(--hell-1); margin: 0; font-size: clamp(12px, 1.27vw, 18px); }
.fuss__untenlinks { display: flex; align-items: center; gap: clamp(16px, 2.3vw, 33px);
                    flex-wrap: wrap; }
.fuss__untenlinks a { color: var(--hell-1); text-decoration: none;
                      font-size: clamp(12px, 1.27vw, 18px); }
.fuss__untenlinks a:hover { color: var(--creme); }
.fuss__hoch { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 860px) {
  .fuss__ruf { grid-template-columns: 1fr; gap: 16px; }
  .fuss__trenner { display: none; }
  .fuss__knopf { justify-self: start; }
  .fuss__biene { justify-self: start; width: clamp(170px, 50vw, 240px); }
  .fuss__raster { grid-template-columns: 1fr; gap: 24px; }
  .fuss__unten { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ================= страница Kontakt (эталон 1024 px) ================= */
.kheld { background: var(--creme); }
.kheld__raster { display: grid; grid-template-columns: 1fr auto;
                 align-items: center; gap: clamp(16px, 2vw, 28px);
                 padding-top: clamp(4px, .6vw, 8px); padding-bottom: clamp(6px, .8vw, 11px); }
.kheld__text { padding-top: clamp(4px, .6vw, 9px); }
.kheld h1 { font: 600 clamp(32px, 6.79vw, 98px)/1.10 var(--titel);
            letter-spacing: -.015em; margin: clamp(4px, .5vw, 7px) 0 0; }
.kheld__satz { color: var(--tinte-2); margin: clamp(12px, 1.5vw, 21px) 0 0;
               font-size: clamp(15px, 1.66vw, 24px); line-height: 1.45; }
.kheld__bild { width: 55.47vw; max-width: 799px; height: auto; display: block;
               margin-right: calc(6px - var(--rand)); }
.augenbraue--linie { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 20px); }
.augenbraue--linie::after { content: ""; width: clamp(48px, 7.6vw, 110px);
                            height: 1px; background: rgba(110, 108, 69, .6); }

.kfrage { background: var(--creme); padding: 0 0 clamp(24px, 3.7vw, 53px); }
.kfrage__linie { display: block; height: 1px; background: #D1A34D;
                 margin-bottom: clamp(18px, 2.6vw, 37px); }
.kfrage h2 { font: 600 clamp(27px, 5.01vw, 72px)/1.08 var(--titel);
             letter-spacing: -.012em; margin: 0 0 clamp(11px, 1.7vw, 24px); }

/* три карточки */
.kkarten { display: grid; grid-template-columns: 1.16fr 1.06fr 1fr;
          gap: clamp(10px, 1.6vw, 23px); align-items: stretch; }
.kkarte { display: flex; flex-direction: column;
         padding: clamp(15px, 2.1vw, 30px) clamp(16px, 2.3vw, 33px) clamp(12px, 1.6vw, 23px);
         border: 1px solid rgba(166, 140, 92, .55); background: transparent; }
.kkarte--dunkel { background: #18321D; border-color: #18321D; color: var(--creme); }
.kkarte__kopf { display: flex; align-items: center; gap: clamp(9px, 1.25vw, 18px);
                margin-bottom: clamp(11px, 1.6vw, 23px); }
.kkarte__zeichen { display: block; width: auto; flex: 0 0 auto;
                  height: clamp(34px, 5.3vw, 76px); margin: 0; }
.kkarte--dunkel .kkarte__zeichen { height: clamp(24px, 3.5vw, 50px); }
.kkarte h3 { font: 600 clamp(19px, 2.69vw, 39px)/1.16 var(--titel);
            margin: 0; letter-spacing: -.008em; }
.kkarte--dunkel h3 { color: var(--creme); }
.kkarte__strich { display: block; height: 1px; background: rgba(166, 140, 92, .7);
                 margin-bottom: clamp(10px, 1.5vw, 22px); }
.kkarte--dunkel .kkarte__strich { background: rgba(223, 163, 71, .75); }
.kkarte__name { font-weight: 600; margin: 0 0 6px; }
.kkarte__name, .kkarte__zeilen, .kkarte__punkt {
  font-size: clamp(13px, 1.42vw, 20px); line-height: 1.5; }
.kkarte__zeilen { margin: 0 0 clamp(11px, 1.6vw, 23px); color: inherit; }
.kkarte--dunkel .kkarte__zeilen, .kkarte--dunkel .kkarte__name { color: var(--creme); }
.kkarte__punkt { display: flex; align-items: flex-start; gap: clamp(8px, 1vw, 14px);
                margin: 0 0 clamp(6px, .90vw, 13px); }
.kkarte__sinn { flex: 0 0 auto; font-size: clamp(13px, 1.3vw, 19px); line-height: 1.5;
               opacity: .85; }
.kkarte__punkt a { color: inherit; text-decoration: underline;
                  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.kkarte__knopf { margin-top: auto; align-self: stretch; justify-content: center;
                font-size: clamp(13px, 1.4vw, 20px);
                padding: clamp(8px, .95vw, 14px) clamp(12px, 1.6vw, 23px); }
.kkarte__zweit { display: inline-block; margin: clamp(6px, .85vw, 12px) auto 0;
                color: inherit; font-size: clamp(13px, 1.4vw, 20px);
                text-decoration: underline; text-underline-offset: 4px; }
.kkarte--dunkel .kkarte__zweit { color: var(--creme); }

/* светло-оливковый блок */
.passend { background: #E8E5CF; padding: clamp(14px, 1.55vw, 22px) 0 clamp(15px, 1.65vw, 24px); }
.passend__raster { display: grid; grid-template-columns: 29% 37% 1fr;
                   gap: clamp(20px, 4.35vw, 63px); align-items: start; }
.passend h2 { font: 600 clamp(24px, 3.46vw, 50px)/1.12 var(--titel); margin: 0;
              letter-spacing: -.012em; }
.passend__strich { display: block; width: clamp(50px, 7.4vw, 107px); height: 2px;
                   background: #D1A34D; margin-top: clamp(12px, 1.6vw, 23px); }
.passend__liste .zeile { padding: clamp(5px, .70vw, 10px) 0; border-color: rgba(38,38,25,.26); }
.passend__liste .zeile:first-child { border-top: 0; }
.passend__liste .zeile__name { font: 400 clamp(14px, 1.56vw, 22px)/1.3 var(--text); }
.passend__hinweis .textlink { font-size: clamp(13px, 1.42vw, 20px); }
.passend__hinweis p { color: #3E3D2B; font-size: clamp(13px, 1.42vw, 20px);
                      line-height: 1.5; margin: 0 0 clamp(12px, 1.6vw, 23px); max-width: 24em; }

@media (max-width: 860px) {
  .kheld__raster { grid-template-columns: 1fr; gap: 18px; }
  .kheld__bild { order: -1; width: 100%; max-width: 520px; }
  .kkarten { grid-template-columns: 1fr; gap: 16px; }
  .kkarte__knopf { margin-top: 20px; }
  .passend__raster { grid-template-columns: 1fr; gap: 24px; }
}


/* ================= главная по эталону ================= */
.held2 { position: relative; overflow: hidden; }
.held2__bild { position: absolute; inset: 0; width: 100%; height: 100%;
               object-fit: cover; object-position: 60% 45%; }
.held2__schleier { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12,32,19,.93) 0%, rgba(12,32,19,.84) 34%,
                                     rgba(12,32,19,.42) 62%, rgba(12,32,19,.10) 100%); }
.held2__inhalt { position: relative; color: var(--creme);
                 min-height: clamp(230px, 24.0vw, 346px);
                 display: flex; flex-direction: column; justify-content: center;
                 padding-top: clamp(10px, 1.2vw, 17px); padding-bottom: clamp(10px, 1.2vw, 17px); }
.held2 h1 { font: 600 clamp(26px, 3.71vw, 53px)/1.14 var(--titel); color: var(--creme);
            margin: 0; letter-spacing: -.012em; }
.held2 p { color: rgba(249,241,230,.92); margin: clamp(9px, 1.07vw, 15px) 0 clamp(11px, 1.37vw, 20px);
           font-size: clamp(15px, 1.66vw, 24px); line-height: 1.5; max-width: 30em; }
.held2 .knopf { align-self: flex-start; }

/* ---- полоса «текст + фото» ---- */
.zweispalt { background: var(--creme); padding: clamp(8px, 1.07vw, 15px) 0; }
.zweispalt__raster { display: grid; grid-template-columns: 1fr 53.5%;
                     gap: clamp(18px, 2.4vw, 35px); align-items: center; }
.zweispalt--links { padding: clamp(3px, .39vw, 6px) 0; }
.zweispalt--links .zweispalt__raster { grid-template-columns: 42% 1fr; }
.zweispalt--links .zweispalt__bild img { height: clamp(130px, 15.6vw, 225px); }
.zweispalt__text h2 { font: 600 clamp(24px, 3.61vw, 52px)/1.14 var(--titel);
                      margin: 0; letter-spacing: -.012em; }
.zweispalt__text p { margin: clamp(12px, 1.6vw, 23px) 0 0; max-width: 26em;
                     font-size: clamp(14px, 1.56vw, 22px); line-height: 1.55; }
.zweispalt__text .textlink { margin-top: clamp(12px, 1.6vw, 23px); }
.zweispalt__bild { margin: 0; }
.zweispalt__bild img { width: 100%; height: clamp(170px, 21.8vw, 314px);
                       object-fit: cover; border-radius: 8px; display: block; }
.goldstrich { display: block; width: clamp(60px, 9.3vw, 134px); height: 2px;
              background: #D1A34D; margin: clamp(12px, 1.6vw, 23px) 0 0; }

/* ---- тёмная полоса с тремя переходами ---- */
.dunkelband { background: #13311E; color: var(--creme); overflow: hidden; }
.dunkelband__raster { display: grid; grid-template-columns: 31% 30% 1fr;
                      gap: clamp(16px, 2.2vw, 32px); align-items: center;
                      min-height: clamp(180px, 19.8vw, 285px); }
.dunkelband h2 { font: 600 clamp(22px, 3.22vw, 46px)/1.14 var(--titel); color: var(--creme);
                 margin: 0; letter-spacing: -.012em; }
.dunkelband p { color: rgba(249,241,230,.86); margin: clamp(10px, 1.4vw, 20px) 0 0;
                font-size: clamp(13px, 1.37vw, 20px); line-height: 1.5; }
.dunkelband .goldstrich { background: rgba(223,163,71,.85); }
.dunkelband__wege { display: flex; flex-direction: column;
                    border-left: 1px solid rgba(223,163,71,.45);
                    padding-left: clamp(14px, 2.0vw, 29px); }
.symzeile { display: flex; align-items: center; gap: clamp(10px, 1.37vw, 20px);
            color: var(--creme); text-decoration: none;
            padding: clamp(8px, 1.07vw, 15px) 0;
            border-bottom: 1px solid rgba(223,163,71,.35); }
.symzeile:last-child { border-bottom: 0; }
.symzeile img { flex: 0 0 auto; height: clamp(24px, 3.1vw, 45px); width: auto; }
.symzeile span { font: 600 clamp(14px, 1.56vw, 22px)/1.2 var(--titel); }
.dunkelband__bild { margin: 0; align-self: stretch; }
.dunkelband__bild img { width: 100%; height: 100%; min-height: clamp(180px, 19.8vw, 285px);
                        object-fit: cover; display: block;
                        margin-right: calc(-1 * var(--rand)); }

/* ---- Herkünfte ---- */
.herkunft { background: var(--creme); padding: clamp(9px, 1.17vw, 17px) 0 clamp(4px, .49vw, 7px); }
.herkunft__raster { display: grid; grid-template-columns: auto 1px minmax(11em, 17em) 1fr;
                    gap: clamp(12px, 1.76vw, 25px); align-items: center; }
.herkunft h2 { font: 600 clamp(22px, 3.22vw, 46px)/1.14 var(--titel); margin: 0;
               letter-spacing: -.012em; }
.herkunft__trenner { align-self: stretch; background: rgba(166,140,92,.5);
                     margin: clamp(4px,.6vw,9px) 0; }
.herkunft__satz { font-size: clamp(12px, 1.27vw, 18px); line-height: 1.45; margin: 0;
                  max-width: 22em; color: var(--tinte-2); }
.herkunft__reihe { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; }
.herkunft__reihe a { display: flex; flex-direction: column; align-items: center;
                     gap: clamp(2px,.3vw,4px); text-decoration: none; color: inherit;
                     font-size: clamp(11px, 1.17vw, 17px);
                     border-left: 1px solid rgba(166,140,92,.5);
                     padding: 0 clamp(4px,.6vw,9px); }
.herkunft__reihe a:first-child { border-left: 0; }
.herkunft__reihe img { height: clamp(30px, 4.5vw, 65px); width: auto; }
.herkunft__nr { font: 600 clamp(16px, 2.1vw, 30px)/1 var(--titel); color: #C79A4A; }

/* ---- две карточки ---- */
.paar { background: var(--creme); padding: clamp(3px, .39vw, 6px) 0 clamp(7px, .88vw, 13px); }
.paar__raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 23px); }
.paar__karte { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 26px);
               background: #E8E7D2; border-radius: 10px;
               padding: clamp(12px, 1.56vw, 22px) clamp(14px, 1.95vw, 28px); }
.paar__karte img { flex: 0 0 auto; width: clamp(54px, 7.9vw, 114px); height: auto; }
.paar__karte h3 { font: 600 clamp(18px, 2.44vw, 35px)/1.16 var(--titel);
                  margin: 0 0 clamp(6px,.8vw,11px); }
.paar__karte p { font-size: clamp(12px, 1.37vw, 20px); line-height: 1.5;
                 margin: 0 0 clamp(10px,1.4vw,20px); }
.paar__karte .knopf { font-size: clamp(12px, 1.37vw, 20px);
                      padding: clamp(8px,1.0vw,14px) clamp(12px,1.6vw,23px); }

@media (max-width: 860px) {
  .zweispalt__raster, .zweispalt--links .zweispalt__raster { grid-template-columns: 1fr; gap: 18px; }
  .zweispalt--links .zweispalt__bild { order: -1; }
  .dunkelband__raster { grid-template-columns: 1fr; gap: 20px; padding: 24px 0; }
  .dunkelband__wege { border-left: 0; padding-left: 0; }
  .dunkelband__bild img { margin-right: 0; height: clamp(180px, 46vw, 280px); min-height: 0; }
  .herkunft__raster { grid-template-columns: 1fr; gap: 16px; }
  .herkunft__trenner { display: none; }
  .paar__raster { grid-template-columns: 1fr; }
  .paar__karte { flex-direction: column; align-items: flex-start; }
}

/* ================= Unser Verein по эталону ================= */
.vheld { background: var(--creme); padding: clamp(14px, 1.76vw, 25px) 0 clamp(10px, 1.17vw, 17px); }
.vheld__raster { display: grid; grid-template-columns: 1fr 56%;
                 gap: clamp(14px, 1.95vw, 28px); align-items: center; }
.vheld h1 { font: 600 clamp(28px, 4.30vw, 62px)/1.12 var(--titel); margin: clamp(6px,.78vw,11px) 0 0;
            letter-spacing: -.015em; }
.vheld__satz { color: var(--tinte-2); margin: clamp(10px, 1.37vw, 20px) 0 0; max-width: 24em;
               font-size: clamp(13px, 1.46vw, 21px); line-height: 1.5; }
.vheld__bild { position: relative; }
.kippbild { margin: 0; transform: rotate(-2.4deg); }
.kippbild img { width: 100%; height: clamp(150px, 20.5vw, 295px); object-fit: cover;
                object-position: 50% 18%; display: block;
                border: clamp(5px,.68vw,10px) solid #FDF8EC; border-radius: 3px;
                box-shadow: 0 10px 26px -14px rgba(38,38,25,.55); }
.vheld__siegel { position: absolute; right: 2%; bottom: -6%;
                 width: clamp(60px, 10.2vw, 147px); height: auto; }

/* ---- Wer wir sind ---- */
.drei { background: var(--creme); padding: clamp(10px, 1.37vw, 20px) 0 clamp(12px, 1.56vw, 22px); }
.goldlinie { display: block; height: 1px; background: #D1A34D;
             margin-bottom: clamp(10px, 1.37vw, 20px); }
.drei h2 { font: 600 clamp(22px, 3.22vw, 46px)/1.1 var(--titel); margin: 0 0 clamp(10px,1.37vw,20px);
           letter-spacing: -.012em; }
.drei__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.0vw, 29px); }
.drei__feld { display: grid; grid-template-columns: auto 1fr;
              column-gap: clamp(10px, 1.37vw, 20px); align-items: center;
              border-left: 1px solid rgba(166,140,92,.45); padding-left: clamp(10px,1.37vw,20px); }
.drei__raster > .drei__feld:first-child { border-left: 0; padding-left: 0; }
.drei__feld img { grid-row: 1; width: clamp(48px, 7.3vw, 105px); height: auto; }
.drei__feld h3 { grid-row: 1; font: 600 clamp(14px, 1.76vw, 25px)/1.18 var(--titel); margin: 0; }
.drei__strich { grid-column: 1 / -1; height: 1px; background: rgba(166,140,92,.45);
                margin: clamp(7px,.98vw,14px) 0 clamp(7px,.98vw,14px); }
.drei__feld p { grid-column: 1 / -1; margin: 0; font-size: clamp(12px, 1.27vw, 18px); line-height: 1.5; }

/* ---- тёмный кашированный блок ---- */
.warum { background: var(--creme); padding: clamp(8px, 1.07vw, 15px) 0; }
.warum__kasten { position: relative; overflow: hidden; border-radius: 10px;
                 background: #13311E; color: var(--creme);
                 display: grid; grid-template-columns: 1fr 44%; align-items: stretch; }
.warum__text { padding: clamp(16px, 2.15vw, 31px) clamp(14px, 1.95vw, 28px)
                        clamp(16px, 2.15vw, 31px) clamp(16px, 2.34vw, 34px); }
.warum h2 { font: 600 clamp(22px, 3.22vw, 46px)/1.14 var(--titel); color: var(--creme);
            margin: 0 0 clamp(10px,1.37vw,20px); letter-spacing: -.012em; }
.warum p { color: rgba(249,241,230,.88); margin: 0 0 clamp(8px,1.07vw,15px);
           font-size: clamp(12px, 1.37vw, 20px); line-height: 1.52; max-width: 34em; }
.warum__reihe { display: flex; gap: clamp(14px, 2.0vw, 29px); flex-wrap: wrap;
                margin-top: clamp(8px,1.07vw,15px); }
.warum__bild { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
               display: block; }

/* ---- четыре возможности ---- */
.moeglich { background: var(--creme); padding: clamp(10px, 1.37vw, 20px) 0 clamp(12px, 1.56vw, 22px); }
.moeglich h2 { font: 600 clamp(20px, 3.03vw, 44px)/1.12 var(--titel);
               margin: 0 0 clamp(10px,1.37vw,20px); letter-spacing: -.012em; }
.moeglich__raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.46vw, 21px); }
.moeglich__karte { display: flex; flex-direction: column; align-items: center; text-align: center;
                   border: 1px solid rgba(166,140,92,.5); border-radius: 8px;
                   padding: clamp(10px, 1.37vw, 20px) clamp(9px, 1.17vw, 17px); }
.moeglich__karte img { width: clamp(52px, 7.8vw, 112px); height: auto;
                       margin-bottom: clamp(6px,.78vw,11px); }
.moeglich__karte h3 { font: 600 clamp(14px, 1.76vw, 25px)/1.16 var(--titel); margin: 0; }
.moeglich__strich { display: block; width: 100%; height: 1px; background: rgba(166,140,92,.45);
                    margin: clamp(7px,.98vw,14px) 0; }
.moeglich__karte p { margin: 0; font-size: clamp(11px, 1.27vw, 18px); line-height: 1.45; }
.moeglich__knopf { display: flex; margin: clamp(12px,1.56vw,22px) auto 0; width: fit-content; }

/* ---- светло-оливковая полоса ---- */
.olivband { background: #E8E7D2; padding: clamp(14px, 1.95vw, 28px) 0; }
.olivband__raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.34vw, 34px); }
.olivband__feld { display: flex; align-items: flex-start; gap: clamp(12px, 1.76vw, 25px);
                  border-left: 1px solid rgba(166,140,92,.45); padding-left: clamp(14px,1.95vw,28px); }
.olivband__raster > .olivband__feld:first-child { border-left: 0; padding-left: 0; }
.olivband__feld img { flex: 0 0 auto; width: clamp(66px, 11.3vw, 163px); height: auto; }
.olivband__feld h3 { font: 600 clamp(16px, 2.15vw, 31px)/1.14 var(--titel); margin: 0 0 clamp(6px,.78vw,11px); }
.olivband__feld p { margin: 0 0 clamp(8px,1.07vw,15px); font-size: clamp(12px, 1.27vw, 18px); line-height: 1.5; }

@media (max-width: 860px) {
  .vheld__raster { grid-template-columns: 1fr; gap: 20px; }
  .vheld__bild { order: -1; }
  .vheld__siegel { bottom: -4%; width: 84px; }
  .drei__raster { grid-template-columns: 1fr; gap: 18px; }
  .drei__feld { border-left: 0; padding-left: 0; }
  .warum__kasten { grid-template-columns: 1fr; }
  .warum__bild { height: clamp(170px, 46vw, 280px); }
  .moeglich__raster { grid-template-columns: 1fr 1fr; }
  .olivband__raster { grid-template-columns: 1fr; gap: 22px; }
  .olivband__feld { border-left: 0; padding-left: 0; }
}
@media (max-width: 520px) {
  .moeglich__raster { grid-template-columns: 1fr; }
}

/* ================= Die Dunkle Biene по эталону ================= */
.bheld { position: relative; background: var(--creme); overflow: hidden;
         padding: clamp(14px, 1.76vw, 25px) 0 clamp(16px, 2.15vw, 31px); }
.bheld__raster { position: relative; z-index: 2; }
.bheld__text { max-width: 46%; }
.bheld h1 { font: 600 clamp(26px, 4.00vw, 58px)/1.14 var(--titel); margin: clamp(6px,.78vw,11px) 0 0;
            letter-spacing: -.015em; }
.bheld__satz { color: var(--tinte-2); margin: clamp(10px, 1.37vw, 20px) 0 0;
               font-size: clamp(13px, 1.46vw, 21px); line-height: 1.5; }
.bheld__bild { position: absolute; top: 0; right: 0; width: 55%; height: 100%;
               object-fit: cover; object-position: 50% 45%;
               -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%);
               mask-image: linear-gradient(90deg, transparent 0, #000 16%); }

/* ---- Steckbrief ---- */
.steckbrief { background: var(--creme); padding: 0 0 clamp(12px, 1.56vw, 22px); }
.steckbrief__raster { display: grid; grid-template-columns: 24% 26% 1fr;
                      gap: clamp(12px, 1.76vw, 25px); align-items: center; }
.steckbrief h2 { font: 600 clamp(24px, 3.71vw, 53px)/1.1 var(--titel); margin: 0;
                 letter-spacing: -.012em; }
.steckbrief__text p { margin: clamp(8px,1.07vw,15px) 0 0; font-size: clamp(12px, 1.27vw, 18px);
                      line-height: 1.5; color: var(--tinte-2); }
.steckbrief__bild { width: 100%; height: auto; display: block; }
.merkmale { list-style: none; margin: 0; padding: clamp(10px, 1.37vw, 20px) clamp(12px,1.56vw,22px);
            border: 1px solid rgba(166,140,92,.5); border-radius: 10px; }
.merkmale li { display: flex; align-items: center; gap: clamp(10px, 1.37vw, 20px);
               padding: clamp(5px,.68vw,10px) 0; border-bottom: 1px solid rgba(166,140,92,.35);
               font: 600 clamp(13px, 1.56vw, 22px)/1.2 var(--titel); }
.merkmale li:last-child { border-bottom: 0; }
.merkmale span { flex: 0 0 auto; width: clamp(20px, 2.44vw, 35px); height: clamp(20px, 2.44vw, 35px);
                 border-radius: 50%; background: #D8A64B; color: #1E3222;
                 display: flex; align-items: center; justify-content: center;
                 font: 600 clamp(11px, 1.27vw, 18px)/1 var(--titel); }

/* ---- Sturmbiene ---- */
.sturm { background: var(--creme); padding: 0 0 clamp(12px, 1.56vw, 22px); }
.sturm__raster { display: grid; grid-template-columns: 1fr 55%;
                 gap: clamp(14px, 1.95vw, 28px); align-items: center; }
.sturm h2 { font: 600 clamp(22px, 3.42vw, 49px)/1.1 var(--titel); margin: 0 0 clamp(8px,1.07vw,15px);
            letter-spacing: -.012em; }
.sturm p { margin: 0 0 clamp(8px,1.07vw,15px); font-size: clamp(12px, 1.37vw, 20px); line-height: 1.5; }
.sturm figure { margin: 0; }
.sturm figure img { width: 100%; height: clamp(130px, 15.6vw, 225px); object-fit: cover;
                    border-radius: 8px; display: block; }

/* ---- миф ---- */
.mythos { background: var(--creme); padding: 0 0 clamp(12px, 1.56vw, 22px); }
.mythos__kasten { display: grid; grid-template-columns: 32% 1fr 31%;
                  gap: clamp(12px, 1.76vw, 25px); align-items: center;
                  background: #13311E; color: var(--creme);
                  border-radius: 10px; overflow: hidden;
                  padding: clamp(14px, 1.95vw, 28px) 0 clamp(14px, 1.95vw, 28px) clamp(14px, 1.95vw, 28px); }
.mythos h2 { font: 600 clamp(20px, 2.93vw, 42px)/1.14 var(--titel); color: var(--creme);
             margin: 0; letter-spacing: -.012em; }
.mythos__text p { color: rgba(249,241,230,.88); margin: 0 0 clamp(7px,.88vw,13px);
                  font-size: clamp(11px, 1.27vw, 18px); line-height: 1.5; }
.mythos__text p:last-child { margin-bottom: 0; }
.mythos__bild { width: 100%; height: clamp(110px, 12.7vw, 183px); object-fit: cover;
                border-radius: 8px 0 0 8px; display: block; }

/* ---- Erhaltung ---- */
.erhalt { background: var(--creme); padding: 0 0 clamp(14px, 1.95vw, 28px); }
.erhalt__raster { display: grid; grid-template-columns: auto 1fr 36%;
                  gap: clamp(14px, 1.95vw, 28px); align-items: center; }
.erhalt h2 { font: 600 clamp(24px, 3.71vw, 53px)/1.1 var(--titel); margin: 0;
             letter-spacing: -.012em; }
.erhalt__text p { margin: 0 0 clamp(7px,.88vw,13px); font-size: clamp(11px, 1.27vw, 18px);
                  line-height: 1.5; color: var(--tinte-2); }
.erhalt__text p:last-child { margin-bottom: 0; }
.erhalt__wege { display: flex; flex-direction: column; gap: clamp(8px, 1.07vw, 15px); }
.randknopf { display: flex; align-items: center; gap: clamp(10px, 1.37vw, 20px);
             border: 1px solid rgba(166,140,92,.5); border-radius: 8px;
             padding: clamp(7px,.88vw,13px) clamp(10px,1.37vw,20px);
             text-decoration: none; color: inherit; background: #FDF8EC; }
.randknopf img { flex: 0 0 auto; height: clamp(20px, 2.44vw, 35px); width: auto; }
.randknopf span { flex: 1 1 auto; font: 600 clamp(13px, 1.56vw, 22px)/1.2 var(--titel); }
.randknopf:hover { border-color: #D1A34D; }

@media (max-width: 860px) {
  .bheld__text { max-width: none; }
  .bheld__bild { position: static; width: 100%; height: clamp(170px, 46vw, 280px);
                 margin-top: 16px; -webkit-mask-image: none; mask-image: none; }
  .steckbrief__raster { grid-template-columns: 1fr; gap: 16px; }
  .steckbrief__bild { max-width: 260px; }
  .sturm__raster { grid-template-columns: 1fr; gap: 16px; }
  .mythos__kasten { grid-template-columns: 1fr; padding: 18px; gap: 14px; }
  .mythos__bild { border-radius: 8px; height: clamp(150px, 42vw, 240px); }
  .erhalt__raster { grid-template-columns: 1fr; gap: 16px; }
}

/* ================= Herkünfte по эталону ================= */
.hheld { background: var(--creme); padding: clamp(12px, 1.56vw, 22px) 0 clamp(10px, 1.37vw, 20px); }
.hheld__raster { display: grid; grid-template-columns: 1fr 50%;
                 gap: clamp(14px, 1.95vw, 28px); align-items: center; }
.hheld h1 { font: 600 clamp(26px, 4.10vw, 59px)/1.12 var(--titel); margin: clamp(6px,.78vw,11px) 0 0;
            letter-spacing: -.015em; }
.hheld__satz { color: var(--tinte-2); margin: clamp(10px, 1.37vw, 20px) 0 0; max-width: 24em;
               font-size: clamp(13px, 1.46vw, 21px); line-height: 1.5; }
.hheld__deko { width: 100%; height: auto; display: block; justify-self: end;
               margin-right: calc(-0.4 * var(--rand)); }

.kartenfeld2 { background: var(--creme); padding: 0 0 clamp(12px, 1.56vw, 22px); }
.kartenfeld2__raster { display: grid; grid-template-columns: 55% 1fr;
                       gap: clamp(14px, 2.0vw, 29px); align-items: center;
                       background: #E8E7D2; border-radius: 10px;
                       padding: clamp(12px, 1.56vw, 22px) clamp(14px, 1.95vw, 28px); }
.kartenfeld2__karte svg { width: 100%; height: auto; display: block; }
.kartenfeld2__liste { border-left: 1px solid rgba(166,140,92,.5);
                      padding-left: clamp(14px, 1.95vw, 28px); }
.kartenfeld2__liste h2 { font: 600 clamp(18px, 2.54vw, 37px)/1.14 var(--titel);
                         margin: 0 0 clamp(10px,1.37vw,20px); letter-spacing: -.012em; }
.kartenfeld2__liste ul { list-style: none; margin: 0; padding: 0; }
.kartenfeld2__liste li { margin-bottom: clamp(7px,.98vw,14px); }
.kartenfeld2__liste a { display: grid; grid-template-columns: auto 1fr;
                        column-gap: clamp(9px, 1.17vw, 17px); text-decoration: none; color: inherit; }
.kartenfeld2__liste a::before { content: ""; grid-row: 1 / 3; align-self: center;
                                width: clamp(10px, 1.27vw, 18px); height: clamp(10px, 1.27vw, 18px);
                                border-radius: 50%; background: #D8A64B; }
.kartenfeld2__liste strong { font: 600 clamp(14px, 1.76vw, 25px)/1.2 var(--titel); }
.kartenfeld2__liste span { font-size: clamp(11px, 1.27vw, 18px); line-height: 1.4;
                           color: var(--tinte-2); }

/* ---- карточки стран ---- */
.laender { background: var(--creme); padding: 0 0 clamp(12px, 1.56vw, 22px); }
.landkarte { display: grid; grid-template-columns: clamp(90px, 15.6vw, 225px) 1fr;
             gap: clamp(12px, 1.76vw, 25px); align-items: center;
             background: #FBF6E9; border: 1px solid rgba(166,140,92,.35); border-radius: 10px;
             padding: clamp(12px, 1.56vw, 22px) clamp(14px, 1.95vw, 28px);
             margin-bottom: clamp(9px, 1.17vw, 17px); }
.landkarte--hell { background: #E8E7D2; border-color: transparent; }
.landkarte img { width: 100%; height: auto; justify-self: center; }
.landkarte__text { border-left: 1px solid rgba(166,140,92,.5);
                   padding-left: clamp(12px, 1.76vw, 25px); }
.landkarte h3 { font: 600 clamp(18px, 2.73vw, 39px)/1.1 var(--titel); margin: 0 0 clamp(6px,.78vw,11px);
                letter-spacing: -.012em; }
.landkarte p { margin: 0 0 clamp(6px,.78vw,11px); font-size: clamp(11px, 1.27vw, 18px);
               line-height: 1.5; color: var(--tinte-2); }
.landkarte p:last-child { margin-bottom: 0; }

/* ---- полоса Zuchtmaterial ---- */
.zuchtband { background: var(--creme); padding: 0 0 clamp(14px, 1.95vw, 28px); }
.zuchtband__raster { display: grid; grid-template-columns: 1fr auto;
                     gap: clamp(14px, 2.0vw, 29px); align-items: center;
                     background: #E8E7D2; border-radius: 10px;
                     padding: clamp(12px, 1.56vw, 22px) clamp(14px, 1.95vw, 28px); }
.zuchtband h2 { font: 600 clamp(20px, 2.93vw, 42px)/1.1 var(--titel); margin: 0;
                letter-spacing: -.012em; }
.zuchtband p { margin: clamp(6px,.78vw,11px) 0 0; font-size: clamp(11px, 1.27vw, 18px);
               line-height: 1.5; color: var(--tinte-2); max-width: 30em; }
.zuchtband__knoepfe { display: flex; gap: clamp(10px, 1.37vw, 20px); flex-wrap: wrap;
                      border-left: 1px solid rgba(166,140,92,.5);
                      padding-left: clamp(14px, 1.95vw, 28px); }

@media (max-width: 860px) {
  .hheld__raster { grid-template-columns: 1fr; gap: 16px; }
  .hheld__deko { margin-right: 0; max-width: 360px; }
  .kartenfeld2__raster { grid-template-columns: 1fr; gap: 18px; }
  .kartenfeld2__liste { border-left: 0; padding-left: 0; }
  .landkarte { grid-template-columns: 1fr; gap: 12px; }
  .landkarte img { max-width: 160px; justify-self: start; }
  .landkarte__text { border-left: 0; padding-left: 0; }
  .zuchtband__raster { grid-template-columns: 1fr; gap: 16px; }
  .zuchtband__knoepfe { border-left: 0; padding-left: 0; }
}

/* ================= Zucht & Belegstellen по эталону ================= */
.zheld { position: relative; background: var(--creme); overflow: hidden;
         padding: clamp(12px, 1.56vw, 22px) 0 clamp(14px, 1.95vw, 28px); }
.zheld__raster { position: relative; z-index: 2; }
.zheld__text { max-width: 44%; }
.zheld h1 { font: 600 clamp(25px, 3.81vw, 55px)/1.12 var(--titel); margin: clamp(6px,.78vw,11px) 0 0;
            letter-spacing: -.015em; }
.zheld__satz { color: var(--tinte-2); margin: clamp(10px, 1.37vw, 20px) 0 0;
               font-size: clamp(12px, 1.37vw, 20px); line-height: 1.5; }
.zheld__bild { position: absolute; top: 0; right: 0; width: 58%; height: 100%;
               object-fit: cover; object-position: 50% 50%;
               -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
               mask-image: linear-gradient(90deg, transparent 0, #000 22%); }

.ablauf { background: var(--creme); padding: 0 0 clamp(10px, 1.37vw, 20px); }
.ablauf__kopf { display: flex; align-items: center; gap: clamp(12px, 1.76vw, 25px);
                margin-bottom: clamp(10px, 1.37vw, 20px); flex-wrap: wrap; }
.ablauf__kopf h2 { font: 600 clamp(20px, 3.03vw, 44px)/1.1 var(--titel); margin: 0;
                   letter-spacing: -.012em; }
.ablauf__kopf p { border-left: 1px solid rgba(166,140,92,.5);
                  padding-left: clamp(12px, 1.76vw, 25px); }
.ablauf__kopf p { margin: 0; font: italic 400 clamp(11px, 1.27vw, 18px)/1.4 var(--text);
                  color: var(--tinte-2); }
.ablauf__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.46vw, 21px); }
.ablauf__karte { display: flex; align-items: center; gap: clamp(10px, 1.37vw, 20px);
                 border: 1px solid rgba(166,140,92,.4); border-radius: 10px;
                 background: #FDF8EC; padding: clamp(10px, 1.37vw, 20px) clamp(12px,1.56vw,22px); }
.ablauf__karte img { flex: 0 0 auto; width: clamp(42px, 6.3vw, 91px); height: auto; }
.ablauf__karte h3 { display: flex; align-items: center; gap: clamp(7px,.88vw,13px);
                    font: 600 clamp(15px, 1.95vw, 28px)/1.1 var(--titel); margin: 0 0 clamp(5px,.68vw,10px); }
.ablauf__karte h3 span { flex: 0 0 auto; width: clamp(18px, 2.15vw, 31px); height: clamp(18px, 2.15vw, 31px);
                         border-radius: 50%; background: #D8A64B; color: #1E3222;
                         display: flex; align-items: center; justify-content: center;
                         font: 600 clamp(11px, 1.17vw, 17px)/1 var(--titel); }
.ablauf__karte p { margin: 0; font-size: clamp(11px, 1.27vw, 18px); line-height: 1.45; }

/* ---- список мест ---- */
.stellen { background: var(--creme); padding: 0 0 clamp(10px, 1.37vw, 20px); }
.stellen h2 { font: 600 clamp(20px, 3.03vw, 44px)/1.1 var(--titel);
              margin: 0 0 clamp(10px,1.37vw,20px); letter-spacing: -.012em; }
.stellen__liste { border: 1px solid rgba(166,140,92,.4); border-radius: 10px;
                  background: #FDF8EC; overflow: hidden; }
.stellzeile { display: grid; grid-template-columns: clamp(60px,8.8vw,127px) 1.15fr 1.5fr auto;
              gap: clamp(10px, 1.37vw, 20px); align-items: center; text-decoration: none; color: inherit;
              padding: clamp(7px,.88vw,13px) clamp(12px,1.56vw,22px);
              border-bottom: 1px solid rgba(166,140,92,.3); }
.stellzeile:last-child { border-bottom: 0; }
.stellzeile:hover { background: #F7EFDD; }
.stellzeile img { width: 100%; height: auto; }
.stellzeile__name { font: 600 clamp(13px, 1.66vw, 24px)/1.14 var(--titel); }
.stellzeile__text { border-left: 1px solid rgba(166,140,92,.4);
                    padding-left: clamp(12px, 1.56vw, 22px); }
.stellzeile__text { font-size: clamp(11px, 1.27vw, 18px); line-height: 1.4; color: var(--tinte-2);
                    border-left: 1px solid rgba(166,140,92,.4);
                    padding-left: clamp(12px, 1.56vw, 22px); }
.stellzeile__knopf { font-size: clamp(11px, 1.27vw, 18px);
                     padding: clamp(6px,.78vw,11px) clamp(10px,1.37vw,20px); }

/* ---- инструментальное осеменение ---- */
.besamung { background: var(--creme); padding: 0 0 clamp(10px, 1.37vw, 20px); }
.besamung__kasten { display: grid; grid-template-columns: 27% 26% 1fr 25%;
                    gap: clamp(12px, 1.76vw, 25px); align-items: center;
                    background: #13311E; color: var(--creme); border-radius: 10px;
                    overflow: hidden; padding-left: clamp(14px, 1.95vw, 28px); }
.besamung h2 { font: 600 clamp(20px, 2.93vw, 42px)/1.12 var(--titel); color: var(--creme);
               margin: 0; letter-spacing: -.012em; }
.besamung > .huelle > .besamung__kasten > p { margin: 0; }
.besamung__kasten p { color: rgba(249,241,230,.86); margin: 0;
                      font-size: clamp(11px, 1.27vw, 18px); line-height: 1.5;
                      border-left: 1px solid rgba(223,163,71,.45);
                      padding-left: clamp(12px, 1.56vw, 22px); }
.besamung__bild { width: 100%; height: clamp(110px, 13.7vw, 197px); object-fit: cover; display: block; }
.besamung__orte { padding: clamp(12px,1.56vw,22px) clamp(14px,1.95vw,28px) clamp(12px,1.56vw,22px) 0; }
.besamung__orte h3 { font: 600 clamp(13px, 1.66vw, 24px)/1.2 var(--titel); color: var(--creme);
                     margin: 0 0 clamp(7px,.88vw,13px); }
.besamung__orte ul { list-style: none; margin: 0; padding: 0; }
.besamung__orte li { font-size: clamp(11px, 1.37vw, 20px); padding: clamp(4px,.49vw,7px) 0;
                     border-bottom: 1px solid rgba(223,163,71,.35); }
.besamung__orte li:last-child { border-bottom: 0; }

/* ---- две карточки ---- */
.zweikarten { background: var(--creme); padding: 0 0 clamp(10px, 1.37vw, 20px); }
.zweikarten__raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.46vw, 21px); }
.zweikarte { border: 1px solid rgba(166,140,92,.4); border-radius: 10px; background: #FDF8EC;
             padding: clamp(12px, 1.56vw, 22px) clamp(14px, 1.95vw, 28px); }
.zweikarte h3 { display: flex; align-items: center; gap: clamp(9px, 1.17vw, 17px);
                font: 600 clamp(16px, 2.15vw, 31px)/1.1 var(--titel); margin: 0 0 clamp(8px,1.07vw,15px); }
.zweikarte h3 img { flex: 0 0 auto; width: clamp(34px, 5.1vw, 73px); height: auto; }
.zweikarte p { margin: 0 0 clamp(8px,1.07vw,15px); font-size: clamp(11px, 1.27vw, 18px); line-height: 1.5; }
.haken { list-style: none; margin: 0; padding: 0; }
.haken li { position: relative; padding-left: clamp(22px, 2.73vw, 39px);
            margin-bottom: clamp(6px,.78vw,11px); font-size: clamp(11px, 1.27vw, 18px); line-height: 1.45; }
.haken li::before { content: "✓"; position: absolute; left: 0; top: 0;
                    width: clamp(15px, 1.76vw, 25px); height: clamp(15px, 1.76vw, 25px);
                    border: 1px solid #5E7A52; border-radius: 3px; color: #2F6B3A;
                    display: flex; align-items: center; justify-content: center;
                    font-size: clamp(9px, 1.07vw, 15px); }
.gebuehr { display: grid; grid-template-columns: auto 1fr; gap: clamp(4px,.49vw,7px) clamp(10px,1.37vw,20px);
           margin-bottom: clamp(8px,1.07vw,15px); font-size: clamp(11px, 1.27vw, 18px); }
.gebuehr span:nth-child(odd) { font-weight: 600; }
.zweikarte__datei { display: flex; align-items: center; gap: clamp(8px,1.07vw,15px); margin-bottom: clamp(6px,.78vw,11px); }
.zweikarte__datei img { flex: 0 0 auto; width: clamp(22px, 2.73vw, 39px); height: auto; }

@media (max-width: 860px) {
  .zheld__text { max-width: none; }
  .zheld__bild { position: static; width: 100%; height: clamp(170px, 46vw, 280px);
                 margin-top: 16px; -webkit-mask-image: none; mask-image: none; }
  .ablauf__kopf { grid-template-columns: 1fr; gap: 10px; }
  .ablauf__kopf::after { display: none; }
  .ablauf__raster { grid-template-columns: 1fr; }
  .stellzeile { grid-template-columns: clamp(54px,16vw,80px) 1fr; gap: 10px; }

  .stellzeile__text, .stellzeile__knopf { grid-column: 1 / -1; }
  .stellzeile__knopf { justify-self: start; }
  .besamung__kasten { grid-template-columns: 1fr; padding: 18px; gap: 14px; }
  .besamung__kasten p { border-left: 0; padding-left: 0; }
  .besamung__bild { height: clamp(150px, 42vw, 240px); border-radius: 8px; }
  .besamung__orte { padding: 0; }
  .zweikarten__raster { grid-template-columns: 1fr; }
}

/* ================= Belegstellenordnung по эталону ================= */
.bsoheld { background: var(--creme); padding: clamp(12px, 1.56vw, 22px) 0 clamp(12px, 1.56vw, 22px); }
.bsoheld__raster { display: grid; grid-template-columns: auto 1fr clamp(180px, 29vw, 418px);
                   gap: clamp(12px, 1.76vw, 25px); align-items: center; }
.bsoheld__zeichen { width: clamp(50px, 8.9vw, 128px); height: auto; }
.bsoheld h1 { font: 600 clamp(26px, 4.30vw, 62px)/1.05 var(--titel); margin: 0;
              letter-spacing: -.015em; }
.bsoheld__text p { color: var(--tinte-2); margin: clamp(7px,.88vw,13px) 0 0;
                   font-size: clamp(12px, 1.37vw, 20px); line-height: 1.45; max-width: 32em; }
.bsoheld__reihe { display: flex; align-items: center; gap: clamp(10px, 1.37vw, 20px);
                  margin-top: clamp(10px, 1.37vw, 20px); flex-wrap: wrap; }
.marke-stand { display: inline-flex; align-items: center; background: #F2DFB4; color: #4A3C19;
               border-radius: 6px; padding: clamp(7px,.88vw,13px) clamp(12px,1.56vw,22px);
               font: 500 clamp(11px, 1.27vw, 18px)/1 var(--text); }
.bsoheld__deko { width: 100%; height: auto; display: block; justify-self: end; }

.bso { background: var(--creme); padding: 0 0 clamp(14px, 1.95vw, 28px); }
.bso__raster { display: grid; grid-template-columns: clamp(170px, 26vw, 375px) 1fr;
               gap: clamp(14px, 2.0vw, 29px); align-items: start; }
.bso__inhalt { background: #FDF8EC; border: 1px solid rgba(166,140,92,.4); border-radius: 10px;
               overflow: hidden; position: sticky; top: clamp(10px,1.4vw,20px); }
.bso__inhalt h2 { background: #13311E; color: var(--creme); margin: 0;
                  font: 600 clamp(18px, 2.54vw, 37px)/1.1 var(--titel);
                  padding: clamp(10px,1.37vw,20px) clamp(12px,1.56vw,22px); }
.bso__liste { padding: clamp(6px,.78vw,11px) clamp(12px,1.56vw,22px) clamp(10px,1.37vw,20px); }
.bso__liste a { display: flex; align-items: center; justify-content: space-between;
                gap: clamp(8px,1.07vw,15px); text-decoration: none; color: inherit;
                padding: clamp(7px,.88vw,13px) 0; border-bottom: 1px solid rgba(166,140,92,.35);
                font-size: clamp(11px, 1.27vw, 18px); }
.bso__liste a:last-child { border-bottom: 0; }
.bso__liste a:hover { color: #8A6A28; }

.paragraf { display: grid; grid-template-columns: clamp(52px, 8.8vw, 127px) 1fr;
            gap: clamp(10px, 1.56vw, 22px); align-items: start;
            padding: clamp(10px,1.37vw,20px) 0;
            border-bottom: 1px solid rgba(166,140,92,.35); }
.paragraf:last-child { border-bottom: 0; }
.paragraf img { width: 100%; height: auto; justify-self: center; }
.paragraf__text { border-left: 1px solid rgba(166,140,92,.5);
                  padding-left: clamp(12px, 1.76vw, 25px); }
.paragraf h3 { font: 600 clamp(16px, 2.34vw, 34px)/1.1 var(--titel); margin: 0 0 clamp(6px,.78vw,11px);
               letter-spacing: -.012em; }
.paragraf p { margin: 0 0 clamp(6px,.78vw,11px); font-size: clamp(11px, 1.27vw, 18px);
              line-height: 1.5; color: var(--tinte-2); }
.paragraf p:last-child { margin-bottom: 0; }
.bso__zurueck { margin-top: clamp(12px, 1.56vw, 22px); }

@media (max-width: 860px) {
  .bsoheld__raster { grid-template-columns: auto 1fr; gap: 12px; }
  .bsoheld__deko { grid-column: 1 / -1; justify-self: start; max-width: 320px; }
  .bso__raster { grid-template-columns: 1fr; gap: 18px; }
  .bso__inhalt { position: static; }
  .paragraf { grid-template-columns: clamp(46px,14vw,70px) 1fr; }
}

/* ================= Unsere Züchter по последнему эталону ================= */
.zuheld { background: var(--creme); padding: clamp(12px, 1.56vw, 22px) 0 clamp(16px, 2.15vw, 31px); }
.krume { font-size: clamp(11px, 1.17vw, 17px); color: var(--tinte-2);
         margin: 0 0 clamp(8px,1.07vw,15px); }
.krume a { color: inherit; }
.krume span { margin: 0 .4em; }
.zuheld h1 { font: 600 clamp(32px, 5.50vw, 79px)/1.05 var(--titel); margin: clamp(6px,.78vw,11px) 0 0;
             letter-spacing: -.018em; }
.zuheld__satz { color: var(--tinte-2); margin: clamp(10px, 1.37vw, 20px) 0 clamp(14px, 1.95vw, 28px);
                font-size: clamp(13px, 1.46vw, 21px); line-height: 1.5; max-width: 42em; }
.zkarten { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.37vw, 20px); }
.zkarte { border: 1px solid rgba(190,160,100,.6); border-radius: 8px; background: #FDF8EC;
          padding: clamp(10px, 1.46vw, 21px) clamp(12px, 1.76vw, 25px); }
.zkarte__rolle { font: 500 clamp(10px, 1.07vw, 15px)/1 var(--text); letter-spacing: .14em;
                 text-transform: uppercase; color: #9A7C33; margin: 0 0 clamp(6px,.78vw,11px); }
.zkarte__name { font: 600 clamp(16px, 2.15vw, 31px)/1.1 var(--titel); margin: 0;
                letter-spacing: -.012em; }
.zkarte__ort { margin: clamp(4px,.49vw,7px) 0 clamp(5px,.59vw,8px);
               font-size: clamp(12px, 1.37vw, 20px); color: var(--tinte-2); }
.zkarte__mail { font-size: clamp(11px, 1.37vw, 20px); color: #3C5B3E;
                text-decoration: underline; text-underline-offset: 3px;
                overflow-wrap: anywhere; }
.olivband--zwei { background: #E8E7D2; }
.olivband__gross { font: 600 clamp(24px, 3.81vw, 55px)/1.05 var(--titel); margin: 0 0 clamp(8px,1.07vw,15px);
                   letter-spacing: -.015em; }
.weiterliste .zeile { border-color: rgba(166,140,92,.5); padding: clamp(8px,1.07vw,15px) 0; }
.weiterliste .zeile__name { font: 400 clamp(13px, 1.66vw, 24px)/1.25 var(--text); }

@media (max-width: 860px) {
  .zkarten { grid-template-columns: 1fr; }
}

/* ================= Honig & Imker по эталону ================= */
.hoheld { background: var(--creme); padding: clamp(12px, 1.56vw, 22px) 0 clamp(10px, 1.37vw, 20px); }
.hoheld__raster { display: grid; grid-template-columns: 1fr 51%;
                  gap: clamp(14px, 1.95vw, 28px); align-items: center; }
.hoheld h1 { font: 600 clamp(26px, 4.10vw, 59px)/1.12 var(--titel); margin: clamp(6px,.78vw,11px) 0 0;
             letter-spacing: -.015em; }
.hoheld__satz { color: var(--tinte-2); margin: clamp(10px, 1.37vw, 20px) 0 0; max-width: 24em;
                font-size: clamp(13px, 1.46vw, 21px); line-height: 1.5; }
.hoheld__deko { width: 100%; height: auto; display: block; justify-self: end;
                margin-right: calc(-0.35 * var(--rand)); }

.dreisym { background: var(--creme); padding: 0 0 clamp(10px, 1.37vw, 20px); }
.dreisym__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.76vw, 25px); }
.dreisym__feld { display: flex; align-items: center; gap: clamp(10px, 1.37vw, 20px);
                 border-left: 1px solid rgba(166,140,92,.45); padding-left: clamp(12px,1.76vw,25px); }
.dreisym__raster > .dreisym__feld:first-child { border-left: 0; padding-left: 0; }
.dreisym__feld img { flex: 0 0 auto; width: clamp(46px, 7.0vw, 101px); height: auto; }
.dreisym__feld h3 { font: 600 clamp(17px, 2.34vw, 34px)/1.1 var(--titel); margin: 0; }
.dreisym__strich { display: block; height: 1px; background: rgba(166,140,92,.5);
                   margin: clamp(6px,.78vw,11px) 0; }
.dreisym__feld p { margin: 0; font-size: clamp(11px, 1.27vw, 18px); line-height: 1.45; }

.imkereien { background: var(--creme); padding: 0 0 clamp(10px, 1.37vw, 20px); }
.imkereien h2 { font: 600 clamp(26px, 4.00vw, 58px)/1.05 var(--titel); margin: 0;
                letter-spacing: -.015em; }
.imkereien__satz { color: var(--tinte-2); margin: clamp(8px,1.07vw,15px) 0 clamp(12px,1.56vw,22px);
                   font-size: clamp(12px, 1.37vw, 20px); line-height: 1.5; max-width: 54em; }
.imkereien__raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.37vw, 20px); }
.ikarte { display: flex; flex-direction: column; border: 1px solid rgba(166,140,92,.4);
          border-radius: 10px; background: #FDF8EC;
          padding: clamp(10px, 1.37vw, 20px) clamp(11px, 1.46vw, 21px); }
.ikarte img { width: clamp(40px, 6.0vw, 86px); height: auto; align-self: flex-start;
              margin-bottom: clamp(5px,.68vw,10px); }
.ikarte h3 { font: 600 clamp(14px, 1.86vw, 27px)/1.14 var(--titel); margin: 0; }
.ikarte__strich { display: block; height: 1px; background: rgba(166,140,92,.5);
                  margin: clamp(7px,.88vw,13px) 0; }
.ikarte__ort { margin: 0 0 clamp(4px,.49vw,7px); font-size: clamp(11px, 1.27vw, 18px);
               line-height: 1.4; color: var(--tinte-2); }
.ikarte__was { margin: 0 0 clamp(8px,1.07vw,15px); font-size: clamp(11px, 1.17vw, 17px);
               line-height: 1.4; color: var(--tinte-2); }
.ikarte .knopf { margin-top: auto; justify-content: center;
                 font-size: clamp(11px, 1.27vw, 18px);
                 padding: clamp(7px,.88vw,13px) clamp(10px,1.27vw,18px); }

.sortiment { background: var(--creme); padding: 0 0 clamp(14px, 1.95vw, 28px); }
.sortiment__raster { display: grid; grid-template-columns: 47% 1fr; gap: clamp(12px, 1.56vw, 22px);
                     align-items: stretch; }
.sortiment__bild { margin: 0; }
.sortiment__bild img { width: 100%; height: 100%; min-height: clamp(160px, 25vw, 360px);
                       object-fit: cover; border-radius: 10px; display: block; }
.sortiment__feld { background: #E8E7D2; border-radius: 10px;
                   padding: clamp(14px, 1.95vw, 28px) clamp(14px, 1.95vw, 28px); }
.sortiment__feld h2 { font: 600 clamp(20px, 3.03vw, 44px)/1.08 var(--titel); margin: 0;
                      letter-spacing: -.012em; }
.sortiment__feld > p { margin: clamp(8px,1.07vw,15px) 0 clamp(10px,1.37vw,20px);
                       font-size: clamp(11px, 1.27vw, 18px); line-height: 1.5; }
.sortiment__dateien { display: flex; gap: clamp(10px, 1.37vw, 20px); flex-wrap: wrap; }
.dateiknopf { display: inline-flex; align-items: center; gap: clamp(8px,1.07vw,15px);
              border: 1px solid rgba(166,140,92,.5); border-radius: 8px; background: #FDF8EC;
              padding: clamp(7px,.88vw,13px) clamp(11px,1.46vw,21px);
              text-decoration: none; color: inherit; font-size: clamp(11px, 1.27vw, 18px); }
.dateiknopf img { width: clamp(18px, 2.15vw, 31px); height: auto; }
.dateiknopf:hover { border-color: #D1A34D; }
.sortiment__bestellen { display: flex; align-items: center; gap: clamp(10px, 1.37vw, 20px);
                        border-top: 1px solid rgba(166,140,92,.5);
                        margin-top: clamp(12px,1.56vw,22px); padding-top: clamp(10px,1.37vw,20px); }
.sortiment__bestellen img { flex: 0 0 auto; width: clamp(50px, 7.6vw, 110px); height: auto; }
.sortiment__bestellen h3 { font: 600 clamp(16px, 2.34vw, 34px)/1.1 var(--titel); margin: 0 0 clamp(4px,.49vw,7px); }
.sortiment__bestellen p { margin: 0; font-size: clamp(11px, 1.27vw, 18px); line-height: 1.45; }

@media (max-width: 860px) {
  .hoheld__raster { grid-template-columns: 1fr; gap: 16px; }
  .hoheld__deko { margin-right: 0; max-width: 420px; }
  .dreisym__raster { grid-template-columns: 1fr; gap: 14px; }
  .dreisym__feld { border-left: 0; padding-left: 0; }
  .imkereien__raster { grid-template-columns: 1fr 1fr; }
  .sortiment__raster { grid-template-columns: 1fr; }
  .sortiment__bild img { min-height: clamp(160px, 46vw, 280px); }
  .sortiment__bestellen { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) { .imkereien__raster { grid-template-columns: 1fr; } }

/* ================= Wissen & Downloads по эталону ================= */
.wiheld { background: var(--creme); padding: clamp(12px, 1.56vw, 22px) 0 clamp(10px, 1.37vw, 20px); }
.wiheld__raster { display: grid; grid-template-columns: 1fr 52%;
                  gap: clamp(14px, 1.95vw, 28px); align-items: center; }
.wiheld h1 { font: 600 clamp(26px, 4.10vw, 59px)/1.12 var(--titel); margin: clamp(6px,.78vw,11px) 0 0;
             letter-spacing: -.015em; }
.wiheld__satz { color: var(--tinte-2); margin: clamp(10px, 1.37vw, 20px) 0 0; max-width: 24em;
                font-size: clamp(13px, 1.46vw, 21px); line-height: 1.5; }
.wiheld__deko { width: 100%; height: auto; display: block; justify-self: end;
                margin-right: calc(-0.35 * var(--rand)); }

.biblio { background: var(--creme); padding: 0 0 clamp(10px, 1.37vw, 20px); }
.biblio h2 { font: 600 clamp(24px, 3.81vw, 55px)/1.05 var(--titel); margin: 0 0 clamp(10px,1.37vw,20px);
             letter-spacing: -.015em; }
.biblio__raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.56vw, 22px);
                  align-items: start; }
.dkarte { border: 1px solid rgba(166,140,92,.4); border-radius: 10px; background: #FDF8EC;
          padding: clamp(12px, 1.56vw, 22px) clamp(14px, 1.76vw, 25px); }
.dkarte__kopf { display: flex; align-items: flex-start; gap: clamp(10px, 1.37vw, 20px);
                margin-bottom: clamp(8px,1.07vw,15px); }
.dkarte__kopf img { flex: 0 0 auto; width: clamp(48px, 7.3vw, 105px); height: auto; }
.dkarte h3 { font: 600 clamp(17px, 2.44vw, 35px)/1.1 var(--titel); margin: 0 0 clamp(5px,.59vw,8px);
             letter-spacing: -.012em; }
.dkarte__kopf p { margin: 0; font-size: clamp(11px, 1.27vw, 18px); line-height: 1.45;
                  color: var(--tinte-2); }
.dkarte__liste { border-top: 1px solid rgba(166,140,92,.45); }
.dzeile { display: grid; grid-template-columns: auto 1fr auto auto;
          align-items: center; gap: clamp(8px, 1.07vw, 15px);
          padding: clamp(8px,1.07vw,15px) 0; border-bottom: 1px solid rgba(166,140,92,.3);
          text-decoration: none; color: inherit; }
.dzeile:last-child { border-bottom: 0; }
.dzeile:hover { color: #8A6A28; }
.dzeile img { width: clamp(18px, 2.15vw, 31px); height: auto; }
.dzeile__name { font-size: clamp(12px, 1.37vw, 20px); }
.dzeile__typ { font: 600 clamp(9px, 1.07vw, 15px)/1 var(--text); letter-spacing: .06em;
               background: #9B3B24; color: #FDF8EC; border-radius: 4px;
               padding: clamp(3px,.39vw,6px) clamp(5px,.59vw,8px); }
.dzeile__pfeil { font-size: clamp(13px, 1.56vw, 22px); color: var(--tinte-2); }
.dzeile--seite { grid-template-columns: 1fr auto; }

/* ---- тёмный блок практики ---- */
.praxis { background: var(--creme); padding: 0 0 clamp(10px, 1.37vw, 20px); }
.praxis__kasten { display: grid; grid-template-columns: 34% 1fr 32%;
                  gap: clamp(12px, 1.76vw, 25px); align-items: center;
                  background: #13311E; color: var(--creme); border-radius: 10px;
                  overflow: hidden; padding-right: clamp(14px, 1.95vw, 28px); }
.praxis__bild { width: 100%; height: 100%; min-height: clamp(130px, 17.6vw, 253px);
                object-fit: cover; display: block; }
.praxis__text { padding: clamp(12px,1.56vw,22px) 0; }
.praxis h2 { font: 600 clamp(18px, 2.73vw, 39px)/1.14 var(--titel); color: var(--creme);
             margin: 0 0 clamp(8px,1.07vw,15px); letter-spacing: -.012em; }
.praxis__text p { color: rgba(249,241,230,.86); margin: 0 0 clamp(10px,1.37vw,20px);
                  font-size: clamp(11px, 1.27vw, 18px); line-height: 1.5; }
.praxis__liste { display: flex; flex-direction: column; gap: clamp(5px,.68vw,10px);
                 border-left: 1px solid rgba(223,163,71,.45);
                 padding-left: clamp(12px, 1.56vw, 22px); }
.praxis__liste a { display: flex; align-items: center; gap: clamp(8px,1.07vw,15px);
                   color: var(--creme); text-decoration: none; font-size: clamp(10px, 1.17vw, 17px); }
.praxis__liste a span { text-decoration: underline; text-underline-offset: 3px; }
.praxis__liste a:hover span { color: #E7C06E; }
.praxis__liste img { flex: 0 0 auto; width: clamp(14px, 1.66vw, 24px); height: auto;
                     filter: brightness(1.6); }

.olivband--drei { background: #E8E7D2; }
.olivband__raster3 { display: grid; grid-template-columns: auto 1fr 1fr;
                     gap: clamp(14px, 2.0vw, 29px); align-items: center; }
.olivband--drei .olivband__feld { border-left: 1px solid rgba(166,140,92,.45);
                                  padding-left: clamp(14px,1.95vw,28px); align-items: center; }
.olivband--drei .olivband__feld img { width: clamp(44px, 7.0vw, 101px); }
.olivband--drei h3 { font: 600 clamp(15px, 2.15vw, 31px)/1.1 var(--titel); margin: 0 0 clamp(5px,.59vw,8px); }
.olivband--drei p { margin: 0 0 clamp(8px,1.07vw,15px); font-size: clamp(11px, 1.27vw, 18px); line-height: 1.45; }

@media (max-width: 860px) {
  .wiheld__raster { grid-template-columns: 1fr; gap: 16px; }
  .wiheld__deko { margin-right: 0; max-width: 420px; }
  .biblio__raster { grid-template-columns: 1fr; }
  .praxis__kasten { grid-template-columns: 1fr; padding: 0 0 18px; }
  .praxis__bild { min-height: clamp(150px, 42vw, 240px); }
  .praxis__text { padding: 16px 18px 0; }
  .praxis__liste { border-left: 0; padding: 0 18px; }
  .olivband__raster3 { grid-template-columns: 1fr; gap: 20px; }
  .olivband--drei .olivband__feld { border-left: 0; padding-left: 0; }
}

/* ================= Mitglied werden по эталону ================= */
.mwheld { background: var(--creme); padding: clamp(12px, 1.56vw, 22px) 0 clamp(12px, 1.56vw, 22px); }
.mwheld__raster { display: grid; grid-template-columns: 1fr 52%;
                  gap: clamp(14px, 1.95vw, 28px); align-items: center; }
.mwheld h1 { font: 600 clamp(28px, 4.49vw, 65px)/1.1 var(--titel); margin: clamp(6px,.78vw,11px) 0 0;
             letter-spacing: -.015em; }
.mwheld__satz { color: var(--tinte-2); margin: clamp(10px, 1.37vw, 20px) 0 0; max-width: 22em;
                font-size: clamp(13px, 1.46vw, 21px); line-height: 1.5; }
.mwheld__bild { margin: 0; }
.mwheld__bild img { width: 100%; height: clamp(160px, 27.5vw, 396px); object-fit: cover;
                    object-position: 50% 40%; border-radius: 8px; display: block; }

.ueberblick { background: var(--creme); padding: 0 0 clamp(10px, 1.37vw, 20px); }
.ueberblick h2 { font: 600 clamp(22px, 3.42vw, 49px)/1.05 var(--titel);
                 margin: 0 0 clamp(10px,1.37vw,20px); letter-spacing: -.015em; }
.ueberblick__raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.56vw, 22px);
                      align-items: stretch; }
.mkarte { display: flex; flex-direction: column; border: 1px solid rgba(166,140,92,.4);
          border-radius: 10px; background: #FDF8EC;
          padding: clamp(12px, 1.76vw, 25px) clamp(14px, 1.95vw, 28px); }
.mkarte--dunkel { background: #13311E; border-color: #13311E; color: var(--creme); }
.mkarte__kopf { display: flex; align-items: center; gap: clamp(10px, 1.37vw, 20px);
                margin-bottom: clamp(8px,1.07vw,15px); }
.mkarte__kopf img { flex: 0 0 auto; width: clamp(46px, 7.0vw, 101px); height: auto; }
.mkarte h3 { font: 600 clamp(19px, 2.83vw, 41px)/1.1 var(--titel); margin: 0 0 clamp(5px,.59vw,8px);
             letter-spacing: -.012em; }
.mkarte--dunkel h3 { color: var(--creme); }
.mkarte__kopf p { margin: 0; font-size: clamp(11px, 1.27vw, 18px); line-height: 1.45;
                  color: var(--tinte-2); }
.mkarte--dunkel .mkarte__kopf p { color: rgba(249,241,230,.86); }
.mkarte .haken { border-top: 1px solid rgba(166,140,92,.5); padding-top: clamp(8px,1.07vw,15px); }
.mkarte--dunkel .haken { border-top-color: rgba(223,163,71,.5); }
.haken--hell li { color: rgba(249,241,230,.92); }
.haken--hell li::before { border-color: rgba(223,163,71,.7); color: #E7C06E; }
.mkarte__beitrag { margin: auto 0 clamp(10px,1.37vw,20px); font-size: clamp(13px, 1.56vw, 22px);
                   font-family: var(--titel); }
.mkarte__beitrag span { display: block; font: 400 clamp(10px, 1.17vw, 17px)/1.4 var(--text);
                        opacity: .75; }
.mkarte .knopf { justify-content: center; }

.vorteile2 { background: var(--creme); padding: 0 0 clamp(10px, 1.37vw, 20px); }
.vorteile2 h2 { font: 600 clamp(22px, 3.42vw, 49px)/1.05 var(--titel);
                margin: 0 0 clamp(10px,1.37vw,20px); letter-spacing: -.015em; }
.vorteile2__reihe { display: grid; grid-template-columns: repeat(6, 1fr); }
.vorteilsym { display: flex; flex-direction: column; align-items: center; text-align: center;
              gap: clamp(5px,.68vw,10px); padding: 0 clamp(5px,.68vw,10px);
              border-left: 1px solid rgba(166,140,92,.45); }
.vorteilsym:first-child { border-left: 0; }
.vorteilsym img { height: clamp(34px, 5.1vw, 73px); width: auto; }
.vorteilsym span { font: 600 clamp(11px, 1.37vw, 20px)/1.2 var(--titel); }

.schritte2 { background: var(--creme); padding: 0 0 clamp(14px, 1.95vw, 28px); }
.schritte2__kasten { background: #E8E7D2; border-radius: 10px;
                     display: grid; grid-template-columns: auto 1fr;
                     gap: clamp(14px, 1.95vw, 28px); align-items: start;
                     padding: clamp(14px, 1.95vw, 28px); }
.schritte2 h2 { font: 600 clamp(20px, 2.93vw, 42px)/1.1 var(--titel); margin: 0;
                letter-spacing: -.012em;
                border-right: 1px solid rgba(166,140,92,.5); padding-right: clamp(14px,1.95vw,28px); }
.schritte2__reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.76vw, 25px); }
.schritte2__reihe article { position: relative; }
.schritte2__nr { display: inline-flex; align-items: center; justify-content: center;
                 width: clamp(20px, 2.54vw, 37px); height: clamp(20px, 2.54vw, 37px);
                 border-radius: 50%; background: #13311E; color: #F2DFB4;
                 font: 600 clamp(11px, 1.27vw, 18px)/1 var(--titel);
                 margin-bottom: clamp(6px,.78vw,11px); }
.schritte2__reihe h3 { font: 600 clamp(14px, 1.76vw, 25px)/1.15 var(--titel); margin: 0 0 clamp(5px,.59vw,8px); }
.schritte2__reihe p { margin: 0; font-size: clamp(11px, 1.27vw, 18px); line-height: 1.45; }
.schritte2__deko { grid-column: 1 / -1; justify-self: end; display: block;
                   width: clamp(180px, 28vw, 403px); height: auto;
                   margin-top: clamp(8px, 1.07vw, 15px); }

@media (max-width: 860px) {
  .mwheld__raster { grid-template-columns: 1fr; gap: 16px; }
  .ueberblick__raster { grid-template-columns: 1fr; }
  .vorteile2__reihe { grid-template-columns: repeat(3, 1fr); row-gap: 16px; }
  .vorteilsym:nth-child(4) { border-left: 0; }
  .schritte2__kasten { grid-template-columns: 1fr; }
  .schritte2 h2 { border-right: 0; padding-right: 0; }
  .schritte2__reihe { grid-template-columns: 1fr; }
  .schritte2__deko { justify-self: start; width: 100%; max-width: 320px; }
}

/* ================= Impressum и Datenschutz по эталонам ================= */
.rheld { background: var(--creme); padding: clamp(12px, 1.56vw, 22px) 0 clamp(10px, 1.37vw, 20px); }
.rheld__raster { display: grid; grid-template-columns: 1fr 42%;
                 gap: clamp(14px, 1.95vw, 28px); align-items: center; }
.rheld h1 { font: 600 clamp(28px, 5.08vw, 73px)/1.02 var(--titel); margin: clamp(6px,.78vw,11px) 0 0;
            letter-spacing: -.018em; }
.rheld__satz { color: var(--tinte-2); margin: clamp(10px, 1.37vw, 20px) 0 0; max-width: 28em;
               font-size: clamp(12px, 1.37vw, 20px); line-height: 1.5; }
.rheld__deko { width: 100%; height: auto; display: block; justify-self: end;
               margin-right: calc(-0.3 * var(--rand)); }
.hinweisband { display: flex; align-items: center; gap: clamp(9px,1.17vw,17px);
               background: #E4EAD4; border-radius: 8px; color: #30452F;
               margin: clamp(10px,1.37vw,20px) 0 0;
               padding: clamp(9px,1.17vw,17px) clamp(12px,1.56vw,22px);
               font-size: clamp(11px, 1.27vw, 18px); line-height: 1.45; }
.hinweisband::before { content: "i"; flex: 0 0 auto;
                       width: clamp(16px,1.95vw,28px); height: clamp(16px,1.95vw,28px);
                       border: 1px solid #6E8460; border-radius: 50%;
                       display: flex; align-items: center; justify-content: center;
                       font: italic 600 clamp(10px,1.17vw,17px)/1 var(--titel); }

.recht { background: var(--creme); padding: 0 0 clamp(14px, 1.95vw, 28px); }
.recht__raster { display: grid; grid-template-columns: clamp(170px, 22vw, 317px) 1fr;
                 gap: clamp(14px, 2.0vw, 29px); align-items: start; }
.recht__inhalt { background: #13311E; color: var(--creme); border-radius: 10px; overflow: hidden;
                 position: sticky; top: clamp(10px,1.4vw,20px); }
.recht__inhalt h2 { font: 600 clamp(18px, 2.54vw, 37px)/1.1 var(--titel); color: var(--creme);
                    margin: 0; padding: clamp(10px,1.37vw,20px) clamp(12px,1.56vw,22px) clamp(7px,.88vw,13px);
                    border-bottom: 1px solid rgba(223,163,71,.55); }
.recht__liste { padding: clamp(8px,1.07vw,15px) clamp(10px,1.27vw,18px) clamp(10px,1.37vw,20px); }
.recht__liste a { display: block; text-decoration: none; color: var(--creme);
                  padding: clamp(7px,.88vw,13px) clamp(8px,1.07vw,15px); border-radius: 6px;
                  font-size: clamp(11px, 1.27vw, 18px); line-height: 1.3; }
.recht__liste a:hover { background: rgba(223,163,71,.18); }
.recht__liste a.aktiv { background: #F0C96F; color: #22331D; font-weight: 600; }
.recht__inhalt--hell { background: #FDF8EC; color: var(--tinte);
                       border: 1px solid rgba(166,140,92,.4); }
.recht__inhalt--hell h2 { background: #13311E; color: var(--creme); }
.recht__inhalt--hell .recht__liste a { color: inherit;
                                       border-bottom: 1px solid rgba(166,140,92,.3);
                                       border-radius: 0; }
.recht__inhalt--hell .recht__liste a:last-child { border-bottom: 0; }
.recht__inhalt--hell .recht__liste a.aktiv { background: #F2DFB4; border-radius: 6px; }

.rblock { padding: clamp(10px,1.37vw,20px) 0; border-bottom: 1px solid rgba(166,140,92,.45); }
.rblock:last-child { border-bottom: 0; }
.rblock h3 { font: 600 clamp(19px, 2.83vw, 41px)/1.08 var(--titel); margin: 0 0 clamp(7px,.88vw,13px);
             letter-spacing: -.014em; }
.rblock__reihe { display: grid; grid-template-columns: clamp(52px, 8.8vw, 127px) 1fr;
                 gap: clamp(10px, 1.56vw, 22px); align-items: start; }
.rblock__reihe img { width: 100%; height: auto; justify-self: center; }
.rblock__text { border-left: 1px solid rgba(166,140,92,.5);
                padding-left: clamp(12px, 1.76vw, 25px); }
.rblock__text p { margin: 0 0 clamp(6px,.78vw,11px); font-size: clamp(11px, 1.27vw, 18px);
                  line-height: 1.55; color: var(--tinte-2); }
.rblock__text p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .rheld__raster { grid-template-columns: 1fr; gap: 16px; }
  .rheld__deko { margin-right: 0; max-width: 300px; }
  .recht__raster { grid-template-columns: 1fr; gap: 18px; }
  .recht__inhalt { position: static; }
  .rblock__reihe { grid-template-columns: clamp(44px,13vw,64px) 1fr; }
}

/* ================= движение: мягко и только по делу ================= */

/* Страницу показываем, когда шапка, подвал и разметка появления уже на месте.
   Без этого браузер рисует готовую страницу, а потом она прыгает и
   анимируется заново. Класс bereit ставит teile.js, а если скрипт не
   загрузился — сторож в <head> через 2,5 с. */
html.js { background: var(--creme, #F9F1E6); }
.js body { visibility: hidden; }
.js.bereit body { visibility: visible; }

/* Без JS всё видно сразу: начальное состояние ставится только при классе .js */
.js [data-auf] { opacity: 0; transform: translateY(16px);
                 transition: opacity .52s cubic-bezier(.22,.61,.36,1),
                             transform .52s cubic-bezier(.22,.61,.36,1); }
.js [data-auf].sichtbar { opacity: 1; transform: none; }
.js [data-stufe] { transition-delay: calc(var(--stufe, 0) * 70ms); }

/* кнопки и ссылки */
.knopf { transition: background-color .18s ease, color .18s ease,
                     border-color .18s ease, transform .18s ease; }
.knopf:hover { transform: translateY(-1px); }
.knopf:active { transform: translateY(0); }
.knopf svg, .textlink svg, [data-pfeil] svg { transition: transform .2s ease; }
.knopf:hover svg, .textlink:hover svg, [data-pfeil]:hover svg { transform: translateX(3px); }
.textlink { transition: border-color .18s ease, color .18s ease; }

/* карточки */
.kkarte, .ikarte, .dkarte, .mkarte, .zkarte, .ablauf__karte, .moeglich__karte,
.landkarte, .paar__karte, .randknopf, .dateiknopf {
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.zkarte:hover, .ikarte:hover, .ablauf__karte:hover, .moeglich__karte:hover,
.randknopf:hover, .dateiknopf:hover {
  border-color: rgba(209,163,77,.85);
  box-shadow: 0 6px 18px -14px rgba(38,38,25,.55); }
.stellzeile, .dzeile, .zeile, .bso__liste a, .recht__liste a { transition: background-color .18s ease, color .18s ease; }

/* мобильное меню */
.menue { transition: opacity .22s ease, transform .22s ease; }
@media (max-width: 1280px) {
  .menue { opacity: 0; transform: translateY(-6px); }
  .menue[data-offen] { opacity: 1; transform: none; }
}

/* очень лёгкое покачивание одной ветки и парение пчелы */
@keyframes wiegen { 0%,100% { transform: rotate(-.7deg); } 50% { transform: rotate(.7deg); } }
@keyframes schweben { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.js .hheld__deko { transform-origin: 70% 30%; animation: wiegen 9s ease-in-out infinite; }
.js .fuss__biene { animation: schweben 7.5s ease-in-out infinite; }

@media print { .js [data-auf] { opacity: 1 !important; transform: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .js [data-auf] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .hheld__deko, .js .fuss__biene { animation: none !important; }
  .knopf, .knopf svg, .textlink, .textlink svg, [data-pfeil] svg,
  .kkarte, .ikarte, .dkarte, .mkarte, .zkarte, .ablauf__karte, .moeglich__karte,
  .landkarte, .paar__karte, .randknopf, .dateiknopf, .menue { transition: none !important; }
  .knopf:hover { transform: none; }
}

/* --- починки после проверки на узких экранах --- */
@media (max-width: 1280px) {
  .olivband__raster3 { grid-template-columns: 1fr 1fr; }
  .olivband__raster3 > .olivband__gross { grid-column: 1 / -1; }
  .olivband--drei .olivband__feld:first-of-type { border-left: 0; padding-left: 0; }
}
@media (max-width: 520px) {
  .knopf { white-space: normal; text-align: center; }
  .mkarte .knopf { word-break: normal; overflow-wrap: anywhere; }
}

@media (max-width: 860px) {
  .olivband__raster3 { grid-template-columns: 1fr; }
  .olivband__raster3 > * { min-width: 0; }
  .olivband__raster3 > .olivband__gross { grid-column: auto; }
}

/* ================= правки по разбору ================= */

/* текст перестал быть слишком бледным на креме */
:root { --tinte-2: #4B4A36; }

/* 01 главная: пчела видна, головы не срезаны, тёмная полоса с полями на телефоне */
.held2__bild { transform: scaleX(-1); object-position: 42% 38%; }
.held2__schleier {
  background: linear-gradient(90deg, rgba(12,32,19,.90) 0%, rgba(12,32,19,.78) 30%,
                                     rgba(12,32,19,.34) 56%, rgba(12,32,19,.06) 82%,
                                     rgba(12,32,19,0) 100%); }
.zweispalt__bild img { object-position: 50% 28%; }

/* 02 Unser Verein: видна работа с рамкой */
.kippbild img { object-position: 50% 46%; }

/* 03 Steckbrief: список крупнее, части уравновешены */
.steckbrief__raster { grid-template-columns: 29% 21% 1fr; align-items: center; }
.steckbrief__text p { font-size: clamp(12px, 1.37vw, 20px); }
.merkmale li { font-size: clamp(13px, 1.66vw, 24px); padding: clamp(6px,.78vw,11px) 0; }
.merkmale span { width: clamp(21px, 2.64vw, 38px); height: clamp(21px, 2.64vw, 38px);
                 font-size: clamp(11px, 1.37vw, 20px); }

/* 05 Zucht: тёмный блок без тесной вставки */
.besamung__kasten { grid-template-columns: 32% 1fr 27%; }

/* 06 Belegstellenordnung: все гравюры по одной сетке, § не раздувается */
.paragraf img { max-width: clamp(38px, 5.4vw, 78px); max-height: clamp(38px, 5.4vw, 78px);
                object-fit: contain; width: auto; height: auto; }
.rblock__reihe img { max-width: clamp(38px, 5.4vw, 78px); max-height: clamp(38px, 5.4vw, 78px);
                     object-fit: contain; width: auto; height: auto; }

/* 07 Züchter: меньше воздуха сверху, список во всю колонку */
.zuheld { padding-top: clamp(8px, 1.0vw, 14px); }
.zuheld h1 { font-size: clamp(30px, 4.88vw, 70px); }
.weiterliste { width: 100%; }
.olivband--zwei .olivband__feld > div { width: 100%; }

/* 09 Wissen: карточки одной высоты, у PDF одно обозначение */
.biblio__raster { align-items: stretch; }
.dkarte { display: flex; flex-direction: column; }
.dkarte__liste { flex: 1 1 auto; }
.dzeile__typ { display: none; }
.dzeile { grid-template-columns: auto 1fr auto; }

/* 10 Mitglied werden: галочки без рамок, фотография чуть живее */
.haken li::before { content: "✓"; border: 0; width: auto; height: auto;
                    font-size: clamp(12px, 1.46vw, 21px); color: #5E7A3E;
                    font-weight: 700; }
.haken--hell li::before { color: #E7C06E; }
.haken li { padding-left: clamp(19px, 2.3vw, 33px); }
.mwheld__bild img { filter: brightness(1.06) contrast(1.05) saturate(1.03); }

/* 11 Kontakt: единые значки */
.sym { flex: 0 0 auto; width: clamp(15px, 1.76vw, 25px); height: auto;
       opacity: .85; margin-top: .15em; }
.kkarte__punkt .sym { color: inherit; }

/* 13 Datenschutz: щит скромнее */
.rheld__deko { max-width: clamp(180px, 29vw, 418px); }

/* документы на телефоне: текст во всю ширину, оглавление сворачивается */
@media (max-width: 860px) {
  .rblock__reihe { grid-template-columns: 1fr; gap: 8px; }
  .rblock__reihe img { max-width: clamp(34px, 11vw, 54px); justify-self: start; }
  .rblock__text { border-left: 0; padding-left: 0; }
  .paragraf { grid-template-columns: 1fr; gap: 8px; }
  .paragraf img { max-width: clamp(34px, 11vw, 54px); justify-self: start; }
  .paragraf__text { border-left: 0; padding-left: 0; }
  .dunkelband__raster { padding: 0; padding-top: 24px; padding-bottom: 24px; }
}

/* ---------- печатная версия документов ---------- */
@media print {
  .kopf, .fuss, .bso__inhalt, .recht__inhalt, .bsoheld__deko, .rheld__deko,
  .bso__zurueck, .bsoheld__reihe, .hinweisband { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .huelle { max-width: none; padding: 0; }
  .bso__raster, .recht__raster { display: block; }
  .paragraf, .rblock { page-break-inside: avoid; break-inside: avoid;
                       border-bottom: 1px solid #999; }
  .paragraf img, .rblock__reihe img { display: none; }
  .paragraf__text, .rblock__text { border-left: 0; padding-left: 0; }
  .paragraf { grid-template-columns: 1fr; }
  .rblock__reihe { grid-template-columns: 1fr; }
  h1 { font-size: 20pt; } h3 { font-size: 13pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* поздние мобильные перекрытия — должны идти после правок выше */
@media (max-width: 860px) {
  .steckbrief__raster { grid-template-columns: 1fr; }
  .besamung__kasten { grid-template-columns: 1fr; }
  .olivband--zwei .olivband__raster { grid-template-columns: 1fr; }
}

/* оглавление-гармошка на телефоне */
.inhalt-klapp { }
.inhalt-klapp > summary { list-style: none; cursor: pointer;
  font: 600 clamp(16px, 2.2vw, 24px)/1.1 var(--titel);
  padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; }
.inhalt-klapp > summary::-webkit-details-marker { display: none; }
.inhalt-klapp > summary::after { content: "+"; font-weight: 400; font-size: 1.3em; line-height: 1; }
.inhalt-klapp[open] > summary::after { content: "−"; }
.recht__inhalt .inhalt-klapp > summary { background: #13311E; color: var(--creme); }
.bso__inhalt .inhalt-klapp > summary { background: #13311E; color: var(--creme); }

/* фотографии целиком: пчела и банки не режутся */
.held2__bild { transform: none; object-position: 50% 50%; }
.bheld { min-height: clamp(230px, 21.2vw, 305px); }
.bheld__bild { object-position: 50% 50%; }
.zweispalt--links .zweispalt__bild img { height: clamp(170px, 22.6vw, 326px); }
.sortiment__bild img { min-height: clamp(190px, 26.3vw, 379px); object-position: 50% 50%; }
@media (max-width: 860px) {
  .held2__inhalt { min-height: clamp(250px, 58vw, 340px); }
  .held2__bild { object-position: 62% 50%; }
  .zweispalt--links .zweispalt__bild img { height: clamp(150px, 46vw, 250px); }
}

/* печать целиком лежит на фотографии, а не на её срезанном углу */
.vheld__siegel { right: 15%; bottom: 20%; width: clamp(50px, 7.6vw, 110px);
                 filter: drop-shadow(0 7px 12px rgba(30,40,22,.42)); }
@media (max-width: 860px) {
  .vheld__siegel { right: 14%; bottom: 17%; width: clamp(46px, 13vw, 76px); }
}

/* ================= единый набор значков ================= */
.ic { display: block; width: var(--ic, 64px); height: var(--ic, 64px);
      object-fit: contain; object-position: center; flex: 0 0 auto;
      max-width: 100%; }
.svg-pdf { flex: 0 0 auto; width: clamp(15px, 1.76vw, 25px); height: auto; color: #8C4A2F; }

/* размеры по местам */
.symzeile .ic        { --ic: clamp(34px, 4.3vw, 62px); }
.herkunft__reihe .ic { --ic: clamp(38px, 5.2vw, 75px); }
.paar__karte .ic     { --ic: clamp(56px, 8.0vw, 115px); }
.drei__feld .ic      { --ic: clamp(48px, 6.6vw, 95px); }
.moeglich__karte .ic { --ic: clamp(50px, 6.9vw, 99px); }
.olivband__feld .ic  { --ic: clamp(58px, 8.3vw, 120px); }
.randknopf .ic       { --ic: clamp(26px, 3.1vw, 45px); }
.ablauf__karte .ic   { --ic: clamp(44px, 6.0vw, 86px); }
.stellzeile .ic      { --ic: clamp(74px, 8.3vw, 120px); }
.zweikarte h3 .ic    { --ic: clamp(34px, 4.6vw, 66px); }
.dreisym__feld .ic   { --ic: clamp(48px, 6.6vw, 95px); }
.ikarte .ic          { --ic: clamp(40px, 5.4vw, 78px); }
.sortiment__bestellen .ic { --ic: clamp(54px, 7.4vw, 107px); }
.dkarte__kopf .ic    { --ic: clamp(50px, 6.9vw, 99px); }
.mkarte__kopf .ic    { --ic: clamp(48px, 6.6vw, 95px); }
.vorteilsym .ic      { --ic: clamp(40px, 5.4vw, 78px); }
.kkarte__kopf .ic    { --ic: clamp(40px, 5.6vw, 81px); }
.kkarte--dunkel .kkarte__kopf .ic { --ic: clamp(36px, 4.9vw, 70px); }
.paragraf .ic        { --ic: clamp(44px, 5.9vw, 85px); }
.rblock__reihe .ic   { --ic: clamp(44px, 5.9vw, 85px); }
.bsoheld__zeichen    { --ic: clamp(50px, 7.4vw, 107px); }

@media (max-width: 680px) {
  .ic { --ic: 52px; }
  .stellzeile .ic { --ic: 82px; }
  .paar__karte .ic, .olivband__feld .ic, .sortiment__bestellen .ic { --ic: 60px; }
  .herkunft__reihe .ic { --ic: 40px; }
}

/* значки на тёмной зелени читаются светлее */
.dunkelband .ic, .mkarte--dunkel .ic, .kkarte--dunkel .ic,
.besamung__kasten .ic, .praxis .ic, .warum .ic { filter: brightness(1.5) contrast(.95); }

/* декоративные композиции первых экранов: целиком, без обрезки и наложения */
.hheld__deko, .rheld__deko, .wiheld__deko, .hoheld__deko, .bsoheld__deko {
  display: block; max-width: 100%; height: auto; width: 100%;
  object-fit: contain; margin-right: 0; }
.rheld__deko { max-width: clamp(220px, 34vw, 490px); }
.hheld__deko { max-width: clamp(240px, 40vw, 576px); }
@media (max-width: 860px) {
  .hheld__deko, .rheld__deko { max-width: min(100%, 420px); justify-self: start; }
}

/* Unser Verein: фотография ровно, без наклона, рамки и наложений */
.vheld__raster { grid-template-columns: 1fr 42%; align-items: center; }
.vfoto { margin: 0; }
.vfoto img { display: block; width: 100%; height: auto; border-radius: 5px; }
.vheld__siegel { display: none; }

/* подвал: ветка липы по высоте, строка остаётся компактной */
.fuss__biene { width: clamp(150px, 25.5vw, 367px); height: auto; max-width: 100%;
               object-fit: contain; }

@media (max-width: 860px) {
  .vheld__raster { grid-template-columns: 1fr; gap: 16px; }
  .vfoto { order: -1; }
  .vfoto img { width: 100%; border-radius: 5px; }
  .fuss__biene { width: clamp(170px, 50vw, 240px); height: auto; justify-self: start; margin-right: 0; }
}

/* ================= переходы между страницами (View Transitions, 2026) =================
   Шапка и подвал остаются на месте, содержимое мягко сменяется,
   заголовок страницы перетекает из одной в другую.
   Где API не поддержан (Safari, Firefox) — обычный переход, ничего не ломается. */
@view-transition { navigation: auto; }

.kopf  { view-transition-name: kopf; }
.fuss  { view-transition-name: fuss; }
h1     { view-transition-name: seitentitel; }

@keyframes vt-rein { from { opacity: 0; transform: translateY(12px); } }
@keyframes vt-raus { to   { opacity: 0; transform: translateY(-8px); } }

::view-transition-old(root) { animation: vt-raus .26s ease both; }
::view-transition-new(root) { animation: vt-rein .44s cubic-bezier(.22,.61,.36,1) both; }

/* шапка и подвал не мигают: их группы меняются мгновенно */
::view-transition-group(kopf),
::view-transition-group(fuss) { animation-duration: .01s; }
::view-transition-old(kopf), ::view-transition-new(kopf),
::view-transition-old(fuss), ::view-transition-new(fuss) { animation: none; opacity: 1; }

/* заголовок перетекает по позиции и размеру */
::view-transition-group(seitentitel) {
  animation-duration: .5s; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
::view-transition-old(seitentitel) { animation: vt-raus .2s ease both; }
::view-transition-new(seitentitel) { animation: vt-rein .5s cubic-bezier(.22,.61,.36,1) both; }

/* ---- золотые линии прорисовываются при прокрутке (scroll-driven animation) ---- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes linie-ziehen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .goldlinie, .kfrage__linie, .goldstrich, .passend__strich,
    .drei__strich, .moeglich__strich, .dreisym__strich, .kkarte__strich {
      transform-origin: left center;
      animation: linie-ziehen linear forwards;
      animation-timeline: view();
      animation-range: entry 0% entry 62%;
    }
    /* мягкое проявление секций без JS там, где браузер уже умеет сам */
    @keyframes sanft-rein { from { opacity: 0; transform: translateY(14px); } }
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .goldlinie, .kfrage__linie, .goldstrich, .passend__strich,
  .drei__strich, .moeglich__strich, .dreisym__strich, .kkarte__strich {
    animation: none !important; transform: none !important; }
}

/* на узком экране первая строка заголовка главной помещается целиком */
@media (max-width: 480px) { .held2 h1 { font-size: 23.5px; } }

/* ================= навигация с подразделами ================= */
.menue { margin-left: auto; display: flex; align-items: center;
         gap: clamp(10px, 1.4vw, 20px); flex: 0 0 auto; }
.menue__liste { display: flex; align-items: center; gap: clamp(2px, .7vw, 10px); }
.menue__punkt { position: relative; display: flex; align-items: center; }
.menue__link {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 clamp(5px, .7vw, 10px);
  font: 500 clamp(14px, 1.18vw, 17px)/1.2 var(--titel);
  color: var(--tinte); text-decoration: none; max-width: none; text-align: left;
  border-bottom: 2px solid transparent; }
.menue__link:hover { color: #6B5420; }
.menue__punkt[data-hier] > .menue__link { border-bottom-color: #C79A4A; }
.menue__auf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 44px; padding: 0; margin-left: -2px;
  background: none; border: 0; cursor: pointer; color: var(--tinte-2); }
.menue__auf svg { transition: transform .18s ease; }
.menue__auf[aria-expanded="true"] svg { transform: rotate(180deg); }
.menue__auf:hover { color: var(--tinte); }

.menue__unter {
  position: absolute; top: 100%; left: 0; z-index: 40; min-width: 232px;
  background: var(--creme); border: 1px solid rgba(166,140,92,.5); border-radius: 8px;
  box-shadow: 0 18px 34px -22px rgba(38,38,25,.65);
  padding: 6px; display: flex; flex-direction: column; }
.menue__unterlink {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px;
  border-radius: 5px; text-decoration: none; color: var(--tinte);
  font: 400 clamp(14px, 1.1vw, 16px)/1.25 var(--text); }
.menue__unterlink:hover { background: #F3E7D2; }
.menue__unterlink[aria-current] { background: #EBD9B4; font-weight: 600; }
.menue__beitritt { min-height: 44px; }

:where(.menue a, .menue button):focus-visible,
.marke:focus-visible, .menue__schalter:focus-visible {
  outline: 2px solid #8A6A28; outline-offset: 2px; border-radius: 4px; }

/* ---------- телефон и планшет ---------- */
@media (max-width: 1280px) {
  .kopf .huelle { min-height: 68px; position: relative; }
  .menue__schalter { display: inline-flex; align-items: center; justify-content: center;
                     width: 48px; height: 48px; }
  .menue {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--creme); border-bottom: 1px solid var(--linie);
    padding: 4px var(--rand) 14px;
    box-shadow: 0 16px 26px -20px rgba(38,38,25,.6);
    max-height: calc(100dvh - 68px); overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .menue[data-offen] { display: flex; }
  .menue__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .menue__punkt { flex-wrap: wrap; border-bottom: 1px solid var(--linie-2); }
  .menue__link { flex: 1 1 auto; min-height: 52px; padding: 0; font-size: 17px;
                 border-bottom: 0; }
  .menue__punkt[data-hier] > .menue__link { color: #6B5420; font-weight: 600; }
  .menue__auf { width: 48px; height: 52px; margin: 0; }
  .menue__unter { position: static; width: 100%; flex-basis: 100%; min-width: 0;
                  border: 0; border-radius: 0; box-shadow: none; background: #F6EBD8;
                  margin: 0 0 8px; padding: 2px 0 2px 14px; }
  .menue__unterlink { min-height: 48px; font-size: 16px; }
  .menue__beitritt { margin-top: 14px; justify-content: center; }
}

/* шапка с подразделами помещается в строку */
@media (min-width: 1281px) {
  .marke { gap: 11px; }
  .marke img { width: clamp(44px, 3.9vw, 56px); }
  .marke__name { font-size: clamp(17px, 1.46vw, 21px); }
  .marke__zusatz { font-size: clamp(12px, 1.0vw, 14px); }
  .menue__liste { gap: 1px; }
  .menue__link { font-size: clamp(13.5px, 1.08vw, 15.5px); padding: 0 6px; }
  .menue__auf { width: 24px; }
  .menue__beitritt { font-size: 14px; padding: 11px 15px; }
  .menue { gap: 12px; }
}

.menue__link { text-align: center; line-height: 1.2; }
@media (min-width: 1281px) { .menue__link { max-width: 6.1em; } }
@media (max-width: 1280px) { .menue__link { text-align: left; max-width: none; } }

/* шапка и её выпадающие панели всегда поверх содержимого страницы */
.kopf { position: relative; z-index: 60; background: var(--creme); }
.menue__unter { z-index: 61; }

/* скрытая панель действительно скрыта: класс не должен перебивать hidden */
.menue__unter[hidden] { display: none !important; }
.menue__unterlink { text-align: left; white-space: nowrap; }
@media (max-width: 1280px) { .menue__unterlink { white-space: normal; } }

/* на ноутбучных ширинах шапке нужны поля поуже, иначе меню не помещается */
@media (min-width: 1281px) and (max-width: 1439px) {
  .kopf .huelle { padding-left: 22px; padding-right: 22px; }
  .marke img { width: 46px; }
  .marke__name { font-size: 18px; }
  .marke__zusatz { font-size: 12.5px; }
  .menue__link { font-size: 13.5px; }
  .menue__beitritt { font-size: 13px; padding: 10px 12px; }
}

/* пчела на цветке: кадр держит пчелу чуть правее центра */
/* широкий кадр 2:1 показываем целиком: пропорции не трогаем, человека
   и улей не обрезает ни на какой ширине */
.zweispalt__bild img.breitbild { height: auto; aspect-ratio: 1600 / 800;
                                 object-fit: contain; object-position: 50% 50%; }

/* ---------- соцсети: подвал (кремовый) и Kontakt (тёмно-зелёный) ---------- */
.sozial { display: flex; flex-wrap: wrap; align-items: center;
          gap: clamp(8px, 1.1vw, 16px); }
.sozial__link { display: inline-flex; align-items: center; gap: 9px;
                min-height: 44px; padding: 4px 6px 4px 2px; border-radius: 7px;
                color: var(--creme); text-decoration: none;
                font: 400 clamp(13px, 1.37vw, 20px)/1 var(--text);
                transition: color .18s ease; }
.sozial__link svg { flex: 0 0 auto; width: 22px; height: 22px; display: block; }
.sozial__link:hover { color: var(--gold); }
.sozial__link:focus-visible { color: var(--gold);
                              outline: 2px solid var(--gold); outline-offset: 2px; }
.fuss__kopf--sozial { margin-top: clamp(14px, 1.8vw, 24px);
                      margin-bottom: clamp(2px, .4vw, 6px); }

/* на светлом фоне золото бы потерялось — берём тёмное медовое */
.sozialzeile { display: flex; flex-wrap: wrap; align-items: center;
               gap: clamp(8px, 1.4vw, 20px);
               margin: clamp(20px, 2.6vw, 38px) 0 0; }
.sozialzeile__text { font: 500 clamp(10px, 1.07vw, 15px)/1 var(--text);
                     letter-spacing: .2em; text-transform: uppercase;
                     color: var(--gruen); }
.sozial--hell .sozial__link { color: var(--gruen); }
.sozial--hell .sozial__link:hover,
.sozial--hell .sozial__link:focus-visible { color: #A8761A; }
.sozial--hell .sozial__link:focus-visible { outline-color: #A8761A; }

/* ---------- шапка: одна гарнитура и только настоящие начертания ----------
   у Source Serif 4 есть файлы 400 и 600; 500 браузер подделывал,
   отчего пункты выглядели набранными разными шрифтами. */
.menue__link      { font: 400 clamp(13.5px, 1.08vw, 15.5px)/1.2 var(--titel); }
.menue__unterlink { font: 400 clamp(14px, 1.1vw, 16px)/1.25 var(--titel); }
.menue__beitritt  { font: 600 14px/1 var(--titel); }
.menue__punkt[data-hier] > .menue__link,
.menue__link[aria-current] { font-weight: 600; }
.menue__unterlink[aria-current] { font-weight: 600; }
@media (max-width: 1280px) {
  .menue__link      { font: 400 17px/1.25 var(--titel); }
  .menue__unterlink { font: 400 16px/1.3 var(--titel); }
  .menue__beitritt  { font: 600 16px/1 var(--titel); }
  .menue__punkt[data-hier] > .menue__link { font-weight: 600; }
}

/* новый кадр первого экрана: пчела справа, текст слева по тёмной части */
.held2__bild { transform: none; object-position: 50% 50%; }
/* пчела чуть мельче: кадр 3:1 режется меньше по высоте, крупный план не давит */
.held2__inhalt { min-height: clamp(250px, 28.4vw, 409px); }
.held2__schleier {
  background: linear-gradient(90deg, rgba(12,32,19,.74) 0%, rgba(12,32,19,.62) 32%,
                                     rgba(12,32,19,.34) 56%, rgba(12,32,19,.10) 78%,
                                     rgba(12,32,19,0) 100%); }
@media (max-width: 860px) {
  .held2__bild { object-position: 74% 50%; }
  /* на узких экранах высота как была: там кадр и так виден целиком */
  .held2__inhalt { min-height: clamp(250px, 58vw, 340px); }
  /* на телефоне текст идёт поверх всего кадра — вуаль равномерная, но кадр виден */
  .held2__schleier {
    background: linear-gradient(180deg, rgba(12,32,19,.70) 0%, rgba(12,32,19,.62) 55%,
                                        rgba(12,32,19,.56) 100%); }
}
/* ---------- карта Европы ---------- */
.held--knapp { padding-bottom: clamp(10px, 1.4vw, 20px); }
.held__mitte { max-width: 16em; }
.augenbraue--nackt::after { display: none; }

.kartenfeld { background: var(--creme-2, #F6EAD6); padding: clamp(28px, 3.4vw, 50px) 0 clamp(32px, 4vw, 58px); }
.kartenfeld__raster { display: grid; grid-template-columns: 1.25fr .85fr;
                      gap: clamp(26px, 3.4vw, 54px); align-items: center; }
.kartenfeld__karte { margin: 0; }
.karte { width: 100%; height: auto; display: block; }
.karte__umfeld path { fill: #EDE2CC; stroke: #D3C8AE; stroke-width: .8; }
.karte__land path   { fill: var(--gruen); stroke: #F6EAD6; stroke-width: 1; transition: fill .18s; }
.karte__land:hover path, .karte__land:focus path { fill: #35552F; }
.karte__flug { fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-dasharray: 7 7;
               stroke-linecap: round; }
.karte__marke circle { fill: var(--gold); stroke: #F6EAD6; stroke-width: 2.4; transition: r .18s; }
.karte__marke:hover circle { r: 20; }
.karte__marke text { font: 600 15px/1 var(--titel); fill: var(--gruen-2); }
.kartenfeld__liste .zeile { border-color: rgba(38,38,25,.32); }

/* ---------- страна-блок ---------- */
.land { padding: clamp(28px, 3.4vw, 52px) 0; }
.land__raster { display: grid; grid-template-columns: .62fr 1.38fr; gap: clamp(22px, 3vw, 48px);
                align-items: start; }
.land__kopf { display: flex; align-items: baseline; gap: 16px; }
.land__nummer { font: 400 clamp(14px, 1.25vw, 18px)/1 var(--text); letter-spacing: .12em;
                color: var(--gold); }
.land h2 { font-size: clamp(27px, 3.3vw, 48px); }
.land__text p { font-size: clamp(16.5px, 1.46vw, 21px); line-height: 1.62; max-width: 40em; }
.land--oliv { background: var(--oliv); }
.land--dunkel { background: var(--gruen); color: var(--creme); }
.land--dunkel h2 { color: var(--creme); }
.land--dunkel .land__nummer { color: var(--gold); }

/* ---------- широкая фотография ---------- */
.breitbild figure { margin: 0; }
.breitbild img { width: 100%; height: clamp(230px, 32vw, 460px); object-fit: cover;
                 object-position: 50% 42%; }
.breitbild figcaption { margin-top: 13px; }

/* ---------- два варианта участия ---------- */
.wege { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.2vw, 32px);
        margin-top: 30px; align-items: stretch; }
.weg { padding: clamp(26px, 3vw, 44px); display: flex; flex-direction: column; }
.weg--aktiv  { background: var(--gruen); color: var(--creme); }
.weg--aktiv h3 { color: var(--creme); }
.weg--foerder { background: var(--oliv); }
.weg__art { font: 400 clamp(12px, 1.06vw, 15px)/1 var(--titel); letter-spacing: .24em;
            text-transform: uppercase; margin-bottom: 12px; opacity: .72; }
.weg h3 { font-size: clamp(26px, 3.1vw, 44px); margin-bottom: 12px; }
.weg__fuer { font-size: clamp(16px, 1.39vw, 20px); margin-bottom: 18px; }
.weg--aktiv .weg__fuer { color: rgba(249,241,230,.9); }
.weg__liste { list-style: none; margin: 0 0 20px; padding: 0; }
.weg__liste li { position: relative; padding-left: 26px; margin-bottom: 9px;
                 font-size: clamp(15.5px, 1.32vw, 19px); }
.weg__liste li::before { content: ""; position: absolute; left: 0; top: .62em;
                         width: 13px; height: 1.5px; background: var(--gold); }
.weg__preis { margin: auto 0 20px; font: 400 clamp(19px, 1.95vw, 28px)/1.2 var(--titel); }
.weg--aktiv .weg__preis { color: rgba(249,241,230,.78); }
.weg__klein { font: 400 15px/1.45 var(--text); opacity: .72; }
.weg--foerder .knopf--rand { border-color: var(--gruen); }

/* ---------- преимущества со значками ---------- */
.vorteile { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: clamp(20px, 2.4vw, 36px); margin-top: 30px; }
.vorteil svg { color: var(--gruen); display: block; margin-bottom: 12px; }
.vorteil__titel { font: 600 clamp(19px, 1.74vw, 25px)/1.22 var(--titel); margin-bottom: 7px; }
.vorteil p { font-size: clamp(15.5px, 1.32vw, 19px); color: #4B4A39; max-width: 26em; }

/* ---------- три шага ---------- */
.schritte { background: var(--oliv); padding: clamp(32px, 4vw, 58px) 0; }
.schritte h2 { font-size: clamp(27px, 3.3vw, 48px); margin-bottom: 8px; }
.schritt__reihe { list-style: none; margin: 30px 0 0; padding: 0; display: grid;
                  grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 40px); }
.schritt { position: relative; padding-top: 22px; border-top: 1.5px solid rgba(38,38,25,.4); }
.schritt__nr { font: 400 clamp(26px, 3vw, 42px)/1 var(--titel); color: var(--gold);
               display: block; margin-bottom: 12px; }
.schritt__titel { font: 600 clamp(19px, 1.74vw, 25px)/1.22 var(--titel); margin-bottom: 8px; }
.schritt p { font-size: clamp(15.5px, 1.32vw, 19px); color: #3E3D2B; }
.schritt a { color: var(--gruen); border-bottom: 1px solid rgba(38,38,25,.4);
             text-decoration: none; word-break: break-word; }

@media (max-width: 1000px) {
  .kartenfeld__raster { grid-template-columns: 1fr; }
  .land__raster { grid-template-columns: 1fr; gap: 16px; }
  .wege { grid-template-columns: 1fr; }
  .schritt__reihe { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 680px) {
  .land { padding: 26px 0; }
  .land h2 { font-size: 26px; }
  .vorteile { grid-template-columns: 1fr; gap: 22px; }
  .breitbild img { height: 230px; }
  .weg { padding: 22px 20px 24px; }
  .karte__marke text { font-size: 17px; }
}

/* ================= Termine: Kalender und Liste ================= */

.tkopf { padding-bottom: clamp(14px, 1.8vw, 24px); }
.tkopf h1 { max-width: 15em; font-size: clamp(32px, 4.4vw, 63px); }
.tkopf__satz { font-size: clamp(17px, 1.5vw, 22px); color: #3E3D2B;
               margin: 14px 0 0; max-width: 32em; }

.term { padding: clamp(16px, 2vw, 28px) 0 clamp(34px, 4vw, 58px); }
.term__raster { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
                gap: clamp(20px, 2.2vw, 32px); align-items: start; }
.term__haupt { min-width: 0; }

/* ---------- Kopfleiste des Kalenders ---------- */
.tkal__kopf {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--gruen); color: var(--creme);
  border-radius: 10px 10px 0 0; padding: 12px clamp(12px, 1.3vw, 18px); }
.tkal__kopf--liste { border-radius: 10px; }
.tkal__blaettern { display: flex; gap: 8px; }
.tkal__pfeil {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 7px; color: inherit;
  border: 1px solid rgba(250,239,222,.4); text-decoration: none;
  transition: background .16s ease, border-color .16s ease; }
.tkal__pfeil:hover { background: rgba(250,239,222,.14); border-color: rgba(250,239,222,.75); }
.tkal__monat { font: 600 clamp(22px, 2.1vw, 31px)/1.1 var(--titel);
               color: var(--creme); margin: 0 auto 0 6px; }
.tkal__werkzeug { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.tkal__heute {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px;
  border: 1px solid rgba(250,239,222,.4); border-radius: 7px;
  color: inherit; text-decoration: none; font: 400 15px/1 var(--text); }
.tkal__heute:hover { background: rgba(250,239,222,.14); }
.tkal__umschalter { display: flex; background: rgba(250,239,222,.14);
                    border: 1px solid rgba(250,239,222,.4); border-radius: 7px; padding: 3px; }
.tkal__um { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px;
            border-radius: 5px; color: rgba(250,239,222,.85); text-decoration: none;
            font: 400 15px/1 var(--text); white-space: nowrap; }
.tkal__um:hover { color: var(--creme); }
.tkal__um.ist-an { background: var(--creme); color: var(--gruen); font-weight: 600; }

/* ---------- Monatsraster ---------- */
.tkal__gitter { border: 1px solid var(--linie-2); border-top: 0;
                border-radius: 0 0 10px 10px; overflow: hidden; background: #FDF8EE; }
.tkal__wochentage, .tkal__tage { display: grid; grid-template-columns: repeat(7, 1fr); }
.tkal__wochentage span {
  padding: 11px 10px; background: #F2E7D3; border-bottom: 1px solid var(--linie-2);
  font: 600 14.5px/1 var(--titel); color: #4B4A39; }
.tkal__wochentage span + span { border-left: 1px solid var(--linie-2); }
.tkal__tag { min-height: 96px; padding: 8px 8px 10px;
             border-top: 1px solid var(--linie-2); border-left: 1px solid var(--linie-2);
             display: flex; flex-direction: column; gap: 5px; }
.tkal__tage > :nth-child(7n + 1) { border-left: 0; }
.tkal__tage > :nth-child(-n + 7) { border-top: 0; }
.tkal__zahl { font: 400 16px/1 var(--titel); color: #4B4A39; align-self: flex-start; }
.tkal__tag--fremd { background: #F7F0E2; }
.tkal__tag--fremd .tkal__zahl { color: rgba(90,89,71,.5); }
.tkal__tag--heute { background: #F3EBD6; box-shadow: inset 0 0 0 2px var(--gold); }
.tkal__tag--heute .tkal__zahl {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; min-width: 26px; height: 26px; border-radius: 50%; padding: 0;
  background: var(--gruen); color: var(--creme); font-weight: 600; }

.tchip {
  display: block; border-radius: 5px; padding: 5px 8px;
  font: 400 13.5px/1.25 var(--text); color: #2E2D1F; text-decoration: none;
  background: #E7E1C8; border-left: 3px solid #A9A478;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: filter .15s ease; }
.tchip:hover { filter: brightness(.95); }
.tchip--schulung       { background: #DCE9D4; border-left-color: #6E9159; }
.tchip--vereinstreffen { background: #F6E3BC; border-left-color: #C79A4A; }
.tchip--online         { background: #DCE4EC; border-left-color: #6A86A0; }
.tchip--sonstiges      { background: #E9E2CF; border-left-color: #A6936B; }
.tchip--ab { background: #F0E6E3; border-left-color: #B87B6E;
             color: #7A5A52; text-decoration: line-through; }

/* ---------- Die nächsten Termine ---------- */
.tnext { background: #FDF8EE; border: 1px solid var(--gold);
         border-radius: 10px; padding: clamp(18px, 1.8vw, 26px); }
.tnext__titel { font-size: clamp(22px, 2vw, 29px); }
.tnext .goldlinie { display: block; height: 2px; background: var(--gold);
                    margin: 14px 0 6px; transform-origin: left center; }
.tnext__liste { list-style: none; margin: 0; padding: 0; }
.tnext__punkt { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 15px;
                padding: 18px 0; border-bottom: 1px solid var(--linie-2); }
.tnext__punkt:last-child { border-bottom: 0; padding-bottom: 0; }
.tdatum { text-align: center; background: var(--gruen); color: var(--creme);
          border-radius: 7px; padding: 8px 4px 7px; align-self: start; }
.tdatum__tag   { display: block; font: 600 25px/1 var(--titel); }
.tdatum__monat { display: block; font: 600 11.5px/1.5 var(--text); letter-spacing: .13em; }
.tnext__name { font: 600 clamp(18px, 1.5vw, 22px)/1.2 var(--titel); margin: 0 0 5px; }
.tnext__wann { margin: 0; color: #4B4A39; font-size: 15.5px; line-height: 1.45; }
.tnext__ab   { margin: 7px 0 0; }
.tnext__mehr { margin: 8px 0 0; font-size: 15.5px; }
.tnext__mehr a { display: inline-flex; align-items: center; gap: 8px;
                 color: var(--gruen); text-decoration: none;
                 border-bottom: 1px solid rgba(38,38,25,.35); }
.tnext__mehr a::before { content: "→"; }
.tnext__mehr a:hover { border-color: var(--gruen); }
.tnext__punkt--ab .tnext__name { color: #6B5A53; }

.tmarke { display: inline-block; font: 600 11.5px/1 var(--text); letter-spacing: .08em;
          text-transform: uppercase; padding: 5px 9px; border-radius: 4px; }
.tmarke--ab { background: #F3DAD4; color: #8E2F22; }

.tleer { background: #F7F0E2; border: 1px dashed var(--linie);
         border-radius: 8px; padding: 20px 22px; margin: 14px 0 0;
         color: var(--tinte-2); font-size: 16px; }

/* ---------- Listenansicht ---------- */
.tlist { list-style: none; margin: 16px 0 0; padding: 0;
         display: flex; flex-direction: column; gap: 14px; }
.tlist__punkt { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 16px;
                background: #FDF8EE; border: 1px solid var(--linie-2);
                border-radius: 10px; padding: 18px 20px; }
.tlist__punkt--ab { background: #FAF2EE; border-color: #E0C6BE; }
.tlist__art { font: 400 12.5px/1 var(--titel); letter-spacing: .18em;
              text-transform: uppercase; color: var(--tinte-2); margin: 2px 0 7px; }
.tlist__titel { font: 600 clamp(20px, 1.8vw, 26px)/1.2 var(--titel); margin: 0 0 10px; }

/* Einzelheiten — in der Liste und im Fenster gleich */
.tdet__wann { font-size: 16px; color: #3E3D2B; margin: 0 0 8px; font-weight: 600; }
.tdet__zeile { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 6px;
               font-size: 16px; color: #3E3D2B; }
.tdet__marke { flex: 0 0 76px; font: 400 12.5px/1.5 var(--titel); letter-spacing: .12em;
               text-transform: uppercase; color: var(--tinte-2); }
.tdet__zeile a { color: var(--gruen); text-decoration: none; overflow-wrap: anywhere;
                 border-bottom: 1px solid rgba(38,38,25,.35); }
.tdet__text { margin: 12px 0 10px; }
.tdet__text p { font-size: 16.5px; line-height: 1.6; margin: 0 0 .7em; max-width: 42em; }
.tdet__text p:last-child { margin-bottom: 0; }
.tdet__abgesagt { margin: 12px 0 0; color: #8E2F22; font-weight: 600; font-size: 16px; }

/* ---------- einzelner Termin aus der Adresse ---------- */
.toffen { background: #FDF8EE; border: 1px solid var(--gold); border-radius: 10px;
          padding: clamp(20px, 2.2vw, 30px); margin-bottom: 20px; }
.toffen__art { font: 400 12.5px/1 var(--titel); letter-spacing: .18em;
               text-transform: uppercase; color: var(--tinte-2); margin: 0 0 10px; }
.toffen__titel { font-size: clamp(24px, 2.4vw, 34px); margin: 0 0 12px; }
.toffen__zurueck { margin: 18px 0 0; font-size: 15.5px; }
.toffen__zurueck a { color: var(--gruen); text-decoration: none;
                     border-bottom: 1px solid rgba(38,38,25,.35); }

/* ---------- Fenster mit Einzelheiten ---------- */
.tfenster { width: min(620px, calc(100vw - 32px)); border: 1px solid var(--gold);
            border-radius: 12px; background: var(--creme); color: var(--tinte);
            padding: clamp(22px, 2.4vw, 34px); position: relative; }
.tfenster::backdrop { background: rgba(23,39,25,.56); backdrop-filter: blur(2px); }
.tfenster__zu { position: absolute; top: 12px; right: 12px; margin: 0; }
.tfenster__zu button { display: inline-flex; align-items: center; justify-content: center;
                       width: 40px; height: 40px; border: 0; border-radius: 6px;
                       background: none; color: var(--tinte-2); cursor: pointer; }
.tfenster__zu button:hover { background: rgba(38,38,25,.08); color: var(--tinte); }
.tfenster__art { font: 400 12.5px/1 var(--titel); letter-spacing: .18em;
                 text-transform: uppercase; color: var(--tinte-2); margin: 0 0 10px;
                 padding-right: 46px; }
.tfenster__titel { font-size: clamp(23px, 2.2vw, 31px); margin: 0 0 14px; padding-right: 46px; }
@media (prefers-reduced-motion: no-preference) {
  .tfenster[open] { animation: tf-rein .26s cubic-bezier(.22,.61,.36,1); }
  @keyframes tf-rein { from { opacity: 0; transform: translateY(12px) scale(.985); } }
}

/* ---------- Band mit der Frage ---------- */
.tfrage { padding-bottom: clamp(30px, 3.6vw, 52px); }
.tfrage__band { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px);
                flex-wrap: wrap; background: #E6EDDF; border-radius: 10px;
                padding: clamp(18px, 1.8vw, 26px) clamp(20px, 2.2vw, 32px); }
.tfrage__links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
                 margin: 0; margin-right: auto; }
.tfrage__links img { width: 40px; height: 40px; object-fit: contain; }
.tfrage__links strong { font: 600 clamp(19px, 1.7vw, 25px)/1.2 var(--titel); }
.tfrage__links span { color: #3E3D2B; font-size: 16.5px; }

/* ---------- Band der Demo-Umgebung ---------- */
.demoband { margin: 0; padding: 10px 16px; text-align: center;
            background: #8E2F22; color: #FBF2E4; font: 600 14.5px/1.4 var(--text); }

/* ---------- Umschalten Kalender / Liste ---------- */
.term[data-ansicht="auto"] .tliste,
.term[data-ansicht="kalender"] .tliste { display: none; }
.term[data-ansicht="liste"] .tkal { display: none; }
.term[data-ansicht="auto"] .tkal__um--kal { background: var(--creme);
                                            color: var(--gruen); font-weight: 600; }

/* ---------- Tablet und Telefon ---------- */
@media (max-width: 1080px) {
  .term__raster { grid-template-columns: 1fr; }
  .tnext { order: 2; }
}
@media (max-width: 860px) {
  /* auf dem Telefon ist die Liste die Grundansicht */
  .term[data-ansicht="auto"] .tliste { display: block; }
  .term[data-ansicht="auto"] .tkal   { display: none; }
  .term[data-ansicht="auto"] .tkal__um--kal { background: none;
                                              color: rgba(250,239,222,.85); font-weight: 400; }
  .term[data-ansicht="auto"] .tkal__um--lis { background: var(--creme);
                                              color: var(--gruen); font-weight: 600; }
  .tkal__kopf { gap: 10px; }
  .tkal__monat { font-size: 22px; margin-right: auto; width: auto; }
  .tkal__werkzeug { margin-left: 0; width: 100%; justify-content: space-between; }
  .tkal__tag { min-height: 74px; padding: 6px 5px 7px; }
  .tkal__wochentage span { padding: 9px 5px; font-size: 13px; text-align: center; }
  .tchip { font-size: 12px; padding: 4px 6px; }
  .tlist__punkt { grid-template-columns: 52px minmax(0, 1fr); gap: 13px;
                  padding: 16px 16px 18px; }
  .tdet__zeile { gap: 4px; }
  .tdet__marke { flex-basis: 100%; }
  .tfrage__band { flex-direction: column; align-items: flex-start; }
  .tfrage__band .knopf { width: 100%; }
}
@media (max-width: 520px) {
  .tkal__tag { min-height: 58px; }
  .tkal__zahl { font-size: 14px; }
  .tchip { font-size: 0; padding: 0; height: 7px; border-left-width: 0; border-radius: 3px; }
  .tnext__punkt, .tlist__punkt { grid-template-columns: 48px minmax(0, 1fr); }
  .tdatum__tag { font-size: 21px; }
}