/*
Theme Name:   Vermittlungsbörse 2026
Theme URI:    https://dunkle-biene-verband-deutschland.de/
Description:  Erscheinungsbild der Vermittlungsbörse nach dem freigegebenen Entwurf vom 10.11.2026. Child-Theme von Divi. Inhalte, Anzeigen und Benutzerkonten bleiben unverändert.
Author:       DAZU_Servis · Valeriia Kravchenko
Author URI:   https://studio.divireva.com
Template:     Divi
Version:      2.2.0
Text Domain:  boerse-2026
*/

/* ============================================================
   1. Schrift — Schibsted Grotesk, selbst gehostet, kein Google-Abruf.
   Ausgewählt durch Messung am freigegebenen Entwurf: von 22 geprüften
   Grotesk-Schriften die geringste Abweichung (3,2 %) bei Titel, Logo,
   Jahreszahlen, Fliesstext und Kartenüberschrift.
   Variable Datei, deckt 400 bis 800 ab.
   ============================================================ */

@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/schriften/schibsted-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/schriften/schibsted-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   2. Farben und Masse — aus dem freigegebenen Entwurf
   Geeicht auf die Entwurfsbreite 1130 px: 1 vw = 11,3 px.
   ============================================================ */

:root {
  --kopf-farbe: #F2F5EA;   /* Kopfbereich */
  --held:       #E5ECDA;   /* erster Bildschirm */
  --band:       #CADABA;   /* Streifen mit den Kategorien */
  --hell:       #FBF7EB;   /* Abschnitt "So funktioniert's" */
  --fuss:       #173A26;   /* Fussbereich */
  --weiss:      #FFFFFF;
  --tinte:      #000000;   /* im Entwurf ist der Text reines Schwarz */
  --tinte-2:    #2E3A31;
  --gold:       #E1951F;
  --gold-dunkel:#C07D12;
  --linie:      rgba(21, 34, 26, .34);
  --linie-2:    rgba(21, 34, 26, .18);
  --linie-hell: rgba(251, 247, 235, .34);

  --schrift:    'Schibsted Grotesk', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --breite:     1680px;
  --rand:       clamp(18px, 3.45vw, 50px);   /* Entwurf: 45 px */
  --kopf-hoehe: clamp(60px, 7.88vw, 104px);  /* Entwurf: 89 px */
  --spalt:      clamp(18px, 2.85vw, 40px);
}

/* ============================================================
   3. Grundlagen
   ============================================================ */

body,
body.et_pb_button_helper_class,
.et_pb_module { font-family: var(--schrift); }

body {
  background: var(--hell);
  color: var(--tinte);
  font-size: clamp(15px, 1.6vw, 21px);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

#page-container { background: var(--hell); }

h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3, .et_pb_module h4 {
  font-family: var(--schrift);
  color: var(--tinte);
  font-weight: 800;
  letter-spacing: -.024em;
  line-height: 1.06;
}

h1 { font-size: clamp(28px, 5.7vw, 72px); }
h2 { font-size: clamp(22px, 2.9vw, 38px); }
h3 { font-size: clamp(18px, 2.4vw, 31px); }
h4 { font-size: clamp(16px, 1.8vw, 23px); }

p { color: var(--tinte); margin-bottom: .55em; }
p:last-child { margin-bottom: 0; }
a { color: var(--tinte); text-decoration: none; }
a:hover { color: var(--gold-dunkel); }

.vb-augenbraue {
  font-size: clamp(9px, 1.1vw, 14px);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinte-2);
  line-height: 1.2;
}

/* ============================================================
   4. Kopfbereich
   ============================================================ */

.vb-kopf {
  background: var(--kopf-farbe);
  border-bottom: 1px solid var(--linie-2);
  position: relative;
  z-index: 500;
}
.vb-kopf__innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--rand);
  min-height: var(--kopf-hoehe);
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 34px);
}

.vb-marke { display: block; line-height: 1; margin-right: auto; }
.vb-marke__name {
  display: block;
  font-size: clamp(20px, 3.0vw, 38px);        /* Entwurf-Breite 272 px */
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--tinte);
  white-space: nowrap;
}
.vb-marke__zusatz {
  display: block;
  margin-top: clamp(4px, .7vw, 9px);
  font-size: clamp(10px, 1.33vw, 17px);       /* Entwurf-Breite 262 px */
  font-weight: 700;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: var(--tinte-2);
  line-height: 1;
  white-space: nowrap;
}

.vb-menue ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3.78vw, 48px);    /* Entwurf: 266 px breit */
}
.vb-menue li { margin: 0; padding: 0; }
.vb-menue a {
  display: inline-block;
  padding: 4px 0;
  font-size: clamp(13px, 1.5vw, 20px);        /* Entwurf: 17 px */
  font-weight: 600;
  color: var(--tinte);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.vb-menue a:hover { color: var(--gold-dunkel); }
.vb-menue .current-menu-item > a,
.vb-menue .current_page_item > a { font-weight: 800; border-bottom-color: var(--gold); }

.vb-kopf__tat { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px); }
#page-container .vb-held .vb-knopf { padding-left: clamp(18px, 3.75vw, 48px); padding-right: clamp(18px, 3.75vw, 48px); }

.vb-schalter {
  display: none;
  width: 44px; height: 44px;
  border: 0; background: transparent; cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.vb-schalter span,
.vb-schalter span::before,
.vb-schalter span::after {
  display: block; width: 25px; height: 2px;
  background: var(--tinte); content: ''; position: relative;
}
.vb-schalter span::before { position: absolute; top: -8px; }
.vb-schalter span::after  { position: absolute; top: 8px; }

/* ============================================================
   5. Schaltflaechen
   ============================================================ */

.vb-knopf,
#page-container .et_pb_button.vb-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 16px);
  padding: clamp(8px, 1.02vw, 14px) clamp(12px, 1.56vw, 20px);
  background: var(--gold);
  color: var(--tinte) !important;
  border: 2px solid var(--gold);
  border-radius: 0;
  font-size: clamp(13px, 1.5vw, 20px);        /* Entwurf: 17 px */
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  transition: background .18s ease, border-color .18s ease;
}
.vb-knopf:hover { background: var(--gold-dunkel); border-color: var(--gold-dunkel); color: var(--tinte) !important; }

.vb-knopf--weiss { background: var(--weiss); border-color: var(--tinte); }
.vb-knopf--weiss:hover { background: var(--tinte); border-color: var(--tinte); color: var(--weiss) !important; }

.vb-knopf::after, .vb-knopf::before { display: none !important; }
#page-container .et_pb_button { font-family: var(--schrift); font-weight: 800; border-radius: 0; }

.vb-pfeil { color: var(--tinte); }

/* ============================================================
   6. Fussbereich
   ============================================================ */

.vb-fuss { background: var(--fuss); padding: clamp(12px, 1.5vw, 21px) 0; }
.vb-fuss__innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--rand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.vb-fuss .vb-marke__name { color: var(--hell); font-size: clamp(15px, 2vw, 25px); }
.vb-fuss .vb-marke__zusatz { color: rgba(251, 247, 235, .72); }
.vb-fuss__menue ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(10px, 1.4vw, 18px); flex-wrap: wrap; }
.vb-fuss__menue li + li::before { content: '|'; color: var(--linie-hell); margin-right: clamp(10px, 1.4vw, 18px); }
.vb-fuss__menue a { font-size: clamp(12px, 1.3vw, 17px); font-weight: 600; color: rgba(251, 247, 235, .9); }
.vb-fuss__menue a:hover { color: var(--gold); }

/* ============================================================
   7. Divi an den Entwurf angleichen
   ============================================================ */

#page-container .et_pb_section { background-color: transparent; padding: 0; }
#page-container .et_pb_row,
#page-container .et_pb_row.et_pb_row_fullwidth {
  width: 100% !important;
  max-width: var(--breite) !important;
  padding: 0 var(--rand) !important;
  margin: 0 auto !important;
}
#page-container .et_pb_column { margin-right: 0 !important; }
#page-container .et_pb_module { margin-bottom: 0 !important; }
#page-container .et_pb_text h1,
#page-container .et_pb_text h2,
#page-container .et_pb_text h3,
#page-container .et_pb_text h4,
#page-container .et_pb_text h5,
#page-container .et_pb_text h6,
#page-container .et_pb_text p { padding-bottom: 0; }

#main-header, #top-header,
#et-main-area > #main-header,
.et_fixed_nav #main-header { display: none !important; }
#main-footer { display: none !important; }
#et-main-area { padding-top: 0 !important; }
body.et_fixed_nav #page-container { padding-top: 0 !important; }

#page-container .et_pb_section,
#page-container .et_pb_row,
#page-container .et_pb_column,
#page-container .et_pb_module { box-sizing: border-box; }

/* ============================================================
   8. Erster Bildschirm
   ============================================================ */

#page-container .et_pb_section.vb-held { background: var(--held); position: relative; overflow: hidden; }
#page-container .vb-held .et_pb_row {
  position: relative;
  z-index: 2;
  padding-top: clamp(22px, 4.1vw, 56px) !important;     /* Entwurf: Bild beginnt bei y 113 */
  padding-bottom: clamp(22px, 4.9vw, 66px) !important;  /* Entwurf: 55 px */
}
/* Divi setzt Reihen und Spalten auf position:relative — das Foto soll sich am
   Abschnitt ausrichten, nicht an der Reihe. */
#page-container .vb-held .et_pb_row,
#page-container .vb-held .et_pb_column,
#page-container .vb-held .et_pb_text { position: static !important; }


.vb-held__bild {
  position: absolute;
  top: calc(-1 * clamp(10px, 2.0vw, 26px));
  bottom: calc(-1 * clamp(8px, 1.4vw, 19px));
  right: calc(-1 * var(--rand));
  width: 46.6%;                                   /* Entwurf: unten 484 px bei 1117 */
  clip-path: polygon(25.4% 0, 100% 0, 100% 100%, 0 100%);  /* Entwurf: oben 123 px schmaler */
  background-size: cover;
  background-position: center;
  z-index: 1;
}
.vb-held__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vb-held__text { max-width: 68%; }
#page-container .vb-held .vb-held__titel,
#page-container .vb-held .vb-held__unter,
#page-container .vb-held .vb-held__knoepfe,
#page-container .vb-held .vb-held__hinweis { position: relative; z-index: 2; }
.vb-held__titel,
#page-container .vb-held h1.vb-held__titel {
  font-size: clamp(27px, 5.65vw, 72px);       /* Entwurf: 64 px */
  line-height: .95;
  letter-spacing: -.03em;
  margin: 0;
  max-width: 17ch;
}
.vb-held__unter,
#page-container .vb-held p.vb-held__unter {
  font-size: clamp(15px, 2.49vw, 32px);       /* Entwurf-Breite 630 px */
  font-weight: 800;
  line-height: 1.16;
  margin: clamp(6px, 1vw, 14px) 0 0;
}
.vb-held__knoepfe,
#page-container .vb-held p.vb-held__knoepfe {
  margin: clamp(14px, 2.7vw, 38px) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1.4vw, 19px);
}
.vb-held__hinweis,
#page-container .vb-held p.vb-held__hinweis {
  margin: clamp(10px, 1.9vw, 26px) 0 0;
  font-size: clamp(12px, 1.52vw, 19px);       /* Entwurf-Breite 398 px */
  color: var(--tinte-2);
}

/* ============================================================
   9. Streifen mit Kategorien und Merkmalen
   ============================================================ */

#page-container .et_pb_section.vb-band { background: var(--band); }
#page-container .vb-band .et_pb_row {
  padding-top: clamp(10px, 1.33vw, 18px) !important;
  padding-bottom: clamp(10px, 1.33vw, 18px) !important;
}
.vb-band__gitter {
  display: grid;
  grid-template-columns: minmax(0, 620fr) minmax(0, 420fr);
  gap: clamp(18px, 4vw, 56px);
  align-items: center;
}
.vb-band__links { position: relative; }
.vb-band__rechts { position: relative; padding-left: clamp(18px, 4vw, 56px); }
.vb-band__rechts::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--linie-2);
}

.vb-kategorie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(8px, 1.15vw, 16px) 0;
  border-bottom: 1px solid var(--linie-2);
  font-size: clamp(18px, 2.65vw, 34px);       /* Entwurf: 30 px */
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.vb-kategorie:first-child { padding-top: 0; }
.vb-kategorie { padding-top: clamp(6px, .8vw, 11px); padding-bottom: clamp(6px, .8vw, 11px); }
.vb-kategorie:last-child { border-bottom: 0; padding-bottom: 0; }
.vb-kategorie:hover { color: var(--gold-dunkel); }
.vb-kategorie .vb-pfeil { font-size: clamp(16px, 2vw, 26px); }

.vb-merkmale { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(6px, 1.1vw, 15px); }
#page-container .vb-merkmale, #page-container ul.vb-merkmale { list-style: none; padding-left: 0; }
.vb-merkmale li {
  position: relative;
  padding-left: clamp(22px, 2.5vw, 34px);
  font-size: clamp(13px, 1.63vw, 21px);       /* Entwurf-Breite 269 px */
  line-height: 1.3;
  list-style: none;
}
.vb-merkmale li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .12em;
  width: clamp(13px, 1.5vw, 20px);
  height: clamp(13px, 1.5vw, 20px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23E1951F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10.6 4.6 4.6L17 5.2'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ============================================================
   10. So funktioniert's und Kontakt
   ============================================================ */

#page-container .et_pb_section.vb-ablauf { background: var(--hell); }
#page-container .vb-ablauf .et_pb_row {
  padding-top: clamp(12px, 1.6vw, 22px) !important;
  padding-bottom: clamp(10px, 1.33vw, 18px) !important;
}

.vb-ablauf__gitter {
  display: grid;
  grid-template-columns: minmax(0, 290fr) repeat(3, minmax(0, 250fr));
  gap: clamp(14px, 2.5vw, 35px);
  align-items: start;
  padding-bottom: clamp(10px, 1.4vw, 19px);
  border-bottom: 1px solid var(--linie-2);
}
.vb-ablauf__titel {
  font-size: clamp(18px, 2.65vw, 34px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0;
}
.vb-schritt { position: relative; }
.vb-schritt__zahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(22px, 2.48vw, 32px);
  height: clamp(22px, 2.48vw, 32px);
  background: #EEEDE9;
  font-size: clamp(13px, 1.6vw, 21px);
  font-weight: 800;
  margin-bottom: clamp(4px, .62vw, 9px);
}
.vb-schritt h3 { font-size: clamp(13px, 1.46vw, 19px); margin: 0 0 clamp(2px, .3vw, 5px); line-height: 1.1; }
.vb-schritt p { font-size: clamp(11px, 1.24vw, 16px); line-height: 1.26; margin: 0; color: var(--tinte-2); }

.vb-kontakt {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(10px, 2.1vw, 28px);
  padding-top: clamp(7px, .97vw, 13px);
}
.vb-kontakt__wort {
  flex: 0 0 auto;
  min-width: clamp(80px, 16.5vw, 210px);   /* Entwurf: Daten beginnen bei 290 px */
  font-size: clamp(15px, 1.95vw, 25px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
}
.vb-kontakt__zeile {
  display: flex;
  align-items: center;
  gap: clamp(6px, .85vw, 11px);
  font-size: clamp(10px, 1.24vw, 16px);
  line-height: 1.25;
  margin: 0;
  flex: 0 0 auto;
  white-space: nowrap;
}
.vb-kontakt__zeile::before {
  content: '';
  flex: 0 0 auto;
  width: clamp(12px, 1.4vw, 18px);
  height: clamp(12px, 1.4vw, 18px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.vb-kontakt__zeile--mail::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2315221A' stroke-width='1.3'%3E%3Crect x='1.3' y='3.2' width='13.4' height='9.6' rx='1'/%3E%3Cpath d='m1.7 4.1 6.3 4.5 6.3-4.5'/%3E%3C/svg%3E");
}
.vb-kontakt__zeile--tel::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2315221A'%3E%3Cpath d='M3.3 1.4 5.2.9c.4-.1.9.1 1 .5l.9 2.1c.2.4 0 .9-.3 1.1l-1 .7c.6 1.3 1.7 2.4 3 3l.7-1c.3-.3.7-.5 1.1-.3l2.1.9c.4.2.6.6.5 1l-.5 1.9c-.1.4-.5.7-.9.6C6.6 10.6 2.2 6.2 1.5 2.3c-.1-.4.2-.8.6-.9z'/%3E%3C/svg%3E");
}
.vb-kontakt__zeile--ort::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2315221A' stroke-width='1.3'%3E%3Cpath d='M8 14.4s4.9-4.5 4.9-8A4.9 4.9 0 0 0 3.1 6.4c0 3.5 4.9 8 4.9 8z'/%3E%3Ccircle cx='8' cy='6.3' r='1.8'/%3E%3C/svg%3E");
}
.vb-kontakt__zeile a { border-bottom: 1px solid var(--linie-2); }
.vb-kontakt__zeile a:hover { border-bottom-color: var(--gold); }

/* ============================================================
   11. Innenseiten: Anzeigen, Konto, Rechtstexte
   ============================================================ */

#page-container .et_pb_section.vb-seitenkopf { background: var(--band); padding: clamp(16px, 2.4vw, 34px) 0; }
.vb-seitenkopf h1 { font-size: clamp(24px, 4vw, 50px); line-height: 1.02; margin: 0; max-width: 24ch; }
.vb-seitenkopf .vb-augenbraue { display: block; margin-bottom: clamp(5px, .8vw, 11px); }
.vb-seitenkopf__lead { font-size: clamp(14px, 1.6vw, 21px); line-height: 1.42; margin: clamp(8px, 1.2vw, 16px) 0 0; max-width: 70ch; }

#page-container .et_pb_section.vb-inhalt { padding: clamp(18px, 2.6vw, 36px) 0; }

.vb-recht { max-width: 82ch; }
.vb-recht h2 { font-size: clamp(18px, 2.1vw, 27px); margin: clamp(18px, 2.2vw, 30px) 0 clamp(6px, .8vw, 11px); }
.vb-recht h3 { font-size: clamp(16px, 1.75vw, 22px); margin: clamp(14px, 1.7vw, 23px) 0 clamp(5px, .7vw, 9px); }
.vb-recht h2:first-child, .vb-recht h3:first-child { margin-top: 0; }
.vb-recht p, .vb-recht li { font-size: clamp(13px, 1.42vw, 18px); line-height: 1.5; }
.vb-recht a { border-bottom: 1px solid var(--linie-2); word-break: break-word; }
.vb-recht a:hover { border-bottom-color: var(--gold); }
.vb-recht ul, .vb-recht ol { padding-left: 20px; }

.vb-verweise { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(8px, 1.1vw, 15px); }
.vb-verweis {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: clamp(11px, 1.3vw, 18px) clamp(12px, 1.5vw, 20px);
  background: var(--weiss); border: 1px solid var(--linie-2);
  font-size: clamp(13px, 1.4vw, 18px); font-weight: 700; word-break: break-word;
}
.vb-verweis:hover { border-color: var(--gold); color: var(--tinte); }

/* Anzeigen-Plugin (AWPCP) und Benutzerkonto (Ultimate Member) in der Palette */
#page-container .awpcp-classifieds-container,
#page-container .awpcp-listings-table,
#page-container .um { font-family: var(--schrift); color: var(--tinte); }
#page-container .awpcp-classifieds-container a { color: var(--tinte); }
#page-container .awpcp-classifieds-container a:hover { color: var(--gold-dunkel); }

#page-container .awpcp-button,
#page-container .awpcp-classifieds-container .button,
#page-container input[type="submit"].awpcp-button,
#page-container .um .um-button,
#page-container .um input[type="submit"] {
  font-family: var(--schrift) !important;
  font-weight: 800 !important;
  font-size: clamp(13px, 1.46vw, 19px) !important;
  background: var(--gold) !important;
  background-image: none !important;
  color: var(--tinte) !important;
  border: 2px solid var(--gold) !important;
  border-radius: 0 !important;
  padding: clamp(8px, .95vw, 13px) clamp(14px, 1.95vw, 26px) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  height: auto !important;
  line-height: 1.2 !important;
}
#page-container .awpcp-button:hover,
#page-container .um .um-button:hover { background: var(--gold-dunkel) !important; border-color: var(--gold-dunkel) !important; }

#page-container .um input[type="text"],
#page-container .um input[type="email"],
#page-container .um input[type="password"],
#page-container .um input[type="tel"],
#page-container .um textarea,
#page-container .um select,
#page-container .awpcp-classifieds-container input[type="text"],
#page-container .awpcp-classifieds-container input[type="email"],
#page-container .awpcp-classifieds-container textarea,
#page-container .awpcp-classifieds-container select {
  font-family: var(--schrift) !important;
  font-size: clamp(13px, 1.4vw, 18px) !important;
  color: var(--tinte) !important;
  background: var(--weiss) !important;
  border: 1px solid var(--linie-2) !important;
  border-radius: 0 !important;
}
#page-container .um .um-field-label label,
#page-container .awpcp-classifieds-container label { font-family: var(--schrift); font-weight: 700; color: var(--tinte); }

/* ============================================================
   12. Telefon und Tablet
   ============================================================ */

@media (max-width: 980px) {
  :root { --rand: 18px; --kopf-hoehe: 64px; --spalt: 0px; }

  html, body { overflow-x: hidden; }
  body { font-size: 15px; line-height: 1.4; }

  .vb-schalter { display: inline-flex; }
  .vb-kopf__tat .vb-knopf { display: none; }

  .vb-marke__name { font-size: 19px; }
  .vb-marke__zusatz { font-size: 8px; margin-top: 4px; }

  .vb-menue {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--kopf-farbe);
    border-bottom: 1px solid var(--linie-2);
    padding: 4px var(--rand) 12px;
  }
  .vb-menue.ist-offen { display: block; }
  .vb-menue ul { flex-direction: column; align-items: stretch; gap: 0; }
  .vb-menue li { border-bottom: 1px solid var(--linie-2); }
  .vb-menue li:last-child { border-bottom: 0; }
  .vb-menue a { display: block; padding: 11px 0; border-bottom: 0; font-size: 16px; }

  #page-container .et_pb_column { width: 100% !important; margin-bottom: 0 !important; }

  /* Erster Bildschirm */
  #page-container .vb-held .et_pb_row { padding-top: 22px !important; padding-bottom: 22px !important; }
  .vb-held__bild {
    position: static;
    width: 100%;
    height: auto;
    clip-path: none;
    margin: 14px 0 0;
  }
  .vb-held__bild img { aspect-ratio: 2.4; height: auto; object-position: center 39%; }   /* Biene vollstaendig */
  .vb-held__text { max-width: none; }
  .vb-held__titel,
  #page-container .vb-held h1.vb-held__titel { font-size: 31px; line-height: 1.12; max-width: 13ch; }
  .vb-held__unter,
  #page-container .vb-held p.vb-held__unter { font-size: 19px; margin-top: 10px; max-width: 25ch; }
  .vb-held__knoepfe,
  #page-container .vb-held p.vb-held__knoepfe { margin-top: 14px; flex-direction: column; align-items: stretch; gap: 8px; }
  .vb-knopf { width: 100%; }
  .vb-held__hinweis,
  #page-container .vb-held p.vb-held__hinweis { margin-top: 10px; font-size: 12px; }

  /* Streifen */
  #page-container .vb-band .et_pb_row { padding-top: 10px !important; padding-bottom: 12px !important; }
  .vb-band__gitter { grid-template-columns: 1fr; gap: 10px; }
  .vb-band__rechts { padding-left: 0; padding-top: 10px; }
  .vb-band__rechts::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  .vb-kategorie { font-size: 22px; padding: 11px 0; }
  .vb-kategorie .vb-pfeil { font-size: 26px; }
  .vb-merkmale { gap: 9px; }
  .vb-merkmale li { font-size: 14.5px; padding-left: 24px; }
  .vb-merkmale li::before { width: 16px; height: 16px; }

  /* Ablauf */
  #page-container .vb-ablauf .et_pb_row { padding-top: 12px !important; padding-bottom: 12px !important; }
  .vb-ablauf__gitter { grid-template-columns: 1fr; gap: 10px; padding-bottom: 12px; }
  .vb-ablauf__titel { font-size: 19px; }
  .vb-schritt {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 2px;
    align-items: start;
    border-top: 1px solid var(--linie-2);
    padding-top: 10px;
  }
  .vb-schritt__zahl { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
  .vb-schritt h3 { grid-column: 2; grid-row: 1; }
  .vb-schritt p  { grid-column: 2; grid-row: 2; }
  .vb-schritt__zahl { margin-bottom: 0; width: 26px; height: 26px; font-size: 14px; }
  .vb-schritt h3 { font-size: 14px; }
  .vb-schritt p { font-size: 12px; }
  .vb-kontakt { flex-direction: column; align-items: flex-start; flex-wrap: wrap; gap: 7px; padding-top: 10px; }
  .vb-kontakt__wort { font-size: 17px; margin-bottom: 2px; }
  .vb-kontakt__zeile { font-size: 14px; white-space: normal; }

  /* Fuss */
  .vb-fuss { padding: 14px 0; }
  .vb-fuss__innen { flex-direction: column; align-items: flex-start; gap: 10px; }
  .vb-fuss .vb-marke__name { font-size: 17px; }
  .vb-fuss__menue a { font-size: 13px; }

  .vb-seitenkopf h1 { font-size: 24px; max-width: none; }
  #page-container .et_pb_section.vb-seitenkopf { padding: 14px 0; }
  #page-container .et_pb_section.vb-inhalt { padding: 16px 0; }
  .vb-verweise { grid-template-columns: 1fr; }
}

/* Cookie-Hinweis (Plugin) in der Palette */
#moove_gdpr_cookie_info_bar,
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container { background: var(--fuss) !important; color: var(--hell) !important; font-family: var(--schrift) !important; }
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-content p,
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-content a { color: var(--hell) !important; font-family: var(--schrift) !important; }
#moove_gdpr_cookie_info_bar .mgbutton,
#moove_gdpr_cookie_info_bar button.mgbutton {
  background: var(--gold) !important;
  color: var(--tinte) !important;
  border: 2px solid var(--gold) !important;
  border-radius: 0 !important;
  font-family: var(--schrift) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

/* Anzeigen-Plugin: Suchfeld, Kopfzeile und Trefferliste */
#page-container .awpcp-classifieds-container { max-width: 100%; }
#page-container .awpcp-classifieds-container input[type="text"],
#page-container .awpcp-classifieds-container input[type="search"],
#page-container .awpcp-search-listings-bar input {
  background: var(--weiss) !important;
  border: 1px solid var(--linie-2) !important;
  border-radius: 0 !important;
  padding: 10px 12px !important;
  height: auto !important;
}
#page-container .awpcp-classifieds-container input[type="submit"],
#page-container .awpcp-search-listings-bar input[type="submit"] {
  background: var(--gold) !important;
  background-image: none !important;
  color: var(--tinte) !important;
  border: 2px solid var(--gold) !important;
  border-radius: 0 !important;
  font-family: var(--schrift) !important;
  font-weight: 800 !important;
  padding: 10px 22px !important;
  height: auto !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
#page-container .awpcp-classifieds-container select {
  background: var(--weiss) !important;
  border: 1px solid var(--linie-2) !important;
  border-radius: 0 !important;
  padding: 9px 10px !important;
}
#page-container .awpcp-listings-list .awpcp-listing,
#page-container .awpcp-listing-item,
#page-container .awpcp-listings .listing {
  background: var(--weiss) !important;
  border: 1px solid var(--linie-2) !important;
  border-radius: 0 !important;
  margin-bottom: clamp(8px, 1.1vw, 15px) !important;
  padding: clamp(10px, 1.3vw, 18px) !important;
  box-shadow: none !important;
}
#page-container .awpcp-listing-title,
#page-container .awpcp-listings-list .awpcp-listing h3 {
  font-family: var(--schrift) !important;
  font-weight: 800 !important;
  color: var(--tinte) !important;
}
#page-container .awpcp-classifieds-container .awpcp-navigation,
#page-container .awpcp-classifieds-container .awpcp-main-menu {
  margin-bottom: clamp(10px, 1.4vw, 19px);
  font-weight: 700;
}

/* Dünne Verbindungsstriche zwischen den Schritten (wie im Entwurf) */
.vb-schritt { position: relative; }
.vb-schritt + .vb-schritt::before {
  content: '';
  position: absolute;
  left: calc(clamp(14px, 2.5vw, 35px) * -1);
  top: clamp(12px, 1.4vw, 19px);
  width: clamp(14px, 2.5vw, 35px);
  height: 1px;
  background: var(--linie-2);
}
@media (max-width: 980px) { .vb-schritt + .vb-schritt::before { display: none; } }

/* ============================================================
   Pfeile als Vektor, nicht als Schriftzeichen.
   Schibsted Grotesk enthaelt kein U+2192, der Browser setzte dafuer
   eine Systemschrift ein — auf manchen Rechnern eine Antiqua.
   Jetzt zeichnet die Maske den Pfeil in der jeweiligen Textfarbe.
   ============================================================ */

.vb-pfeil {
  display: inline-block;
  width: 1.45em;
  height: .62em;
  vertical-align: -.02em;
  text-indent: -999em;
  overflow: hidden;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 12' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.2 6h25.6M21.2 1.4 26.8 6l-5.6 4.6'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 12' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.2 6h25.6M21.2 1.4 26.8 6l-5.6 4.6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Browser ohne Masken: Zeichen bleibt sichtbar, aber in einer Groteske */
@supports not ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
  .vb-pfeil {
    width: auto; height: auto; text-indent: 0; overflow: visible;
    background-color: transparent;
    font-family: Arial, 'Segoe UI Symbol', 'DejaVu Sans', sans-serif;
  }
}

/* Hinweis nach dem Abmelden */
.vb-hinweisleiste {
  background: var(--band);
  border-bottom: 1px solid var(--linie-2);
  padding: clamp(10px, 1.2vw, 16px) var(--rand);
  font-size: clamp(13px, 1.4vw, 18px);
  font-weight: 600;
  text-align: center;
}
.vb-hinweisleiste a { border-bottom: 2px solid var(--gold); }

/* ============================================================
   10. Innenseiten mit Held nach dem Entwurf (Links, Anmelden, Registrieren)
   ============================================================ */
#page-container .et_pb_section.vb-held-innen { padding: clamp(14px, 2.0vw, 26px) 0 0; }
#page-container .et_pb_row.vb-reihe--held > .et_pb_column:first-child { width: 48%; margin-right: 2%; }
#page-container .et_pb_row.vb-reihe--held > .et_pb_column:last-child { width: 50%; margin-right: 0; }

#page-container .vb-held-innen__titel {
  font-size: clamp(28px, 4.75vw, 61px);        /* Entwurf: 53 px */
  font-weight: 800;
  line-height: 1.13;                            /* Entwurf: Zeilenschritt 60 px */
  letter-spacing: -.02em;
  margin: 0;
}
.vb-held-innen__lead {
  font-size: clamp(14px, 1.7vw, 22px);
  line-height: 1.35;
  margin: clamp(12px, 2.1vw, 27px) 0 0;
  max-width: 46ch;
}
.vb-strichgold { display: block; width: clamp(40px, 5.9vw, 76px); height: clamp(4px, .54vw, 7px); background: var(--gold); margin: clamp(14px, 2.4vw, 31px) 0 0; }
.vb-held-innen__bild {
  position: relative;
  width: calc(100% + var(--rand));
  margin-right: calc(-1 * var(--rand));
  aspect-ratio: 546 / 264;                      /* Entwurf: 546 x 264 px */
  clip-path: polygon(11% 0, 100% 0, 100% 100%, 0 100%);
  overflow: hidden;
}
.vb-held-innen__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vb-verweise--liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(30px, 6.8vw, 88px);
}
.vb-verweise--liste .vb-verweis {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(10px, 1.6vw, 21px);
  min-height: clamp(28px, 3.36vw, 43px);        /* Entwurf: Zeilenschritt 37 px */
  border-bottom: 1px solid var(--linie);
  border-top: 0; padding: 0; background: none;
  font-size: clamp(13px, 1.52vw, 20px);
  font-weight: 700; color: var(--tinte); text-decoration: none;
}
.vb-pfeil-schraeg {
  flex: 0 0 auto; width: 1.05em; height: 1.05em; background-color: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 15 15 5M7 5h8v8'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 15 15 5M7 5h8v8'/%3E%3C/svg%3E") no-repeat center / contain;
}
#page-container .vb-uberschrift { font-size: clamp(20px, 2.78vw, 36px); font-weight: 800; line-height: 1.0; margin: 0 0 clamp(10px, 1.7vw, 22px); }

@media (max-width: 980px) {
  #page-container .et_pb_row.vb-reihe--held > .et_pb_column { width: 100%; margin-right: 0; }
  .vb-held-innen__bild { width: 100%; margin-right: 0; clip-path: none; aspect-ratio: 2.1; margin-top: 14px; }
  .vb-verweise--liste { grid-template-columns: 1fr; }
  #page-container .vb-held-innen__titel { font-size: 30px; }
}
/* 10.1 Verweisliste: die Grundregel setzt Innenabstand und Rahmen — hier nicht */
.vb-verweise--liste .vb-verweis {
  padding: 0; border: 0; border-bottom: 1px solid var(--linie-2);
  background: none; line-height: 1.2;
}
.vb-verweise--liste .vb-verweis:hover { border-bottom-color: var(--gold); }
#page-container .vb-uberschrift { font-size: clamp(22px, 3.1vw, 40px); }   /* Entwurf: "Links" 95 px breit */
/* 10.2 Verweisliste: kein Zeilenabstand aus der Grundregel (Entwurf: Zeilenschritt 37 px) */
.vb-verweise--liste { row-gap: 0; gap: 0 clamp(30px, 6.8vw, 88px); }

/* ============================================================
   11. Anmelden und Registrieren nach dem Entwurf
       Bild links randlos mit schraeger rechter Kante,
       rechts Ueberschrift und das Formular von Ultimate Member.
   ============================================================ */
#page-container .et_pb_section.vb-anmeldung { padding: 0; }
#page-container .et_pb_row.vb-reihe--anmeldung > .et_pb_column:first-child { width: 44%; margin-right: 4%; }
#page-container .et_pb_row.vb-reihe--anmeldung > .et_pb_column:last-child { width: 48%; margin-right: 0; }
#page-container .et_pb_row.vb-reihe--anmeldung {
  padding-top: clamp(16px, 2.2vw, 28px) !important;
  padding-bottom: clamp(20px, 3.2vw, 42px) !important;
}

.vb-anmeldung__bild {
  width: calc(100% + var(--rand));
  margin-left: calc(-1 * var(--rand));
  aspect-ratio: 508 / 360;                                   /* Entwurf: 508 x 360 px */
  clip-path: polygon(0 0, 100% 0, 81.7% 100%, 0 100%);       /* Entwurf: unten 93 px schmaler */
  overflow: hidden;
}
.vb-anmeldung__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
#page-container .vb-anmeldung__titel {
  font-size: clamp(28px, 5.1vw, 66px);
  line-height: 1.1;
  margin: clamp(20px, 3.4vw, 44px) 0 0;
}
.vb-anmeldung__unter { font-size: clamp(14px, 1.88vw, 24px); font-weight: 700; margin: clamp(8px, 1.25vw, 16px) 0 0; }

/* Ultimate-Member-Formular in der Gestaltung der Boerse */
#page-container .vb-anmeldung .um,
#page-container .vb-anmeldung .um-form { max-width: none; margin: 0; }
#page-container .vb-anmeldung .um .um-form input[type=text],
#page-container .vb-anmeldung .um .um-form input[type=email],
#page-container .vb-anmeldung .um .um-form input[type=password],
#page-container .vb-anmeldung .um .um-form input[type=tel],
#page-container .vb-anmeldung .um .um-form input[type=number] {
  height: clamp(40px, 4.8vw, 62px);                           /* Entwurf: Feld 53 px hoch */
  border: 1px solid var(--linie-2);
  border-radius: 0;
  background: var(--weiss);
  font-family: var(--schrift);
  font-size: clamp(13px, 1.43vw, 18px);
  padding: 0 clamp(10px, 1.3vw, 17px);
  color: var(--tinte);
}
#page-container .vb-anmeldung .um .um-field { padding: 0; margin: 0 0 clamp(9px, 1.25vw, 16px); }
#page-container .vb-anmeldung .um .um-field-label { display: none; }
#page-container .vb-anmeldung .um .um-button,
#page-container .vb-anmeldung .um input[type=submit] {
  width: 100% !important;
  height: clamp(42px, 4.95vw, 64px);
  background: var(--gold) !important;
  color: var(--tinte) !important;
  border: 0;
  border-radius: 0;
  font-family: var(--schrift);
  font-weight: 800;
  font-size: clamp(14px, 1.52vw, 20px);
  letter-spacing: 0;
  box-shadow: none;
}
#page-container .vb-anmeldung .um .um-left.um-half,
#page-container .vb-anmeldung .um .um-right.um-half { width: calc(50% - clamp(5px, .63vw, 8px)); }
#page-container .vb-anmeldung .um .um-col-alt { margin-top: clamp(10px, 1.4vw, 18px); }
#page-container .vb-anmeldung .um a { color: var(--gold); }

.vb-vorteile { list-style: none; margin: clamp(16px, 2.4vw, 31px) 0 0; padding: 0; }
.vb-vorteile li { position: relative; padding-left: clamp(18px, 2.2vw, 28px); margin: 0 0 clamp(12px, 1.7vw, 22px); }
.vb-vorteile li::before {
  content: '';
  position: absolute; left: 0; top: .35em;
  width: .72em; height: .72em;
  background-color: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 8.5 4 4 7-9'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 8.5 4 4 7-9'/%3E%3C/svg%3E") no-repeat center / contain;
}
.vb-vorteile strong { display: block; font-size: clamp(14px, 1.7vw, 22px); font-weight: 800; }
.vb-vorteile span { display: block; font-size: clamp(12px, 1.25vw, 16px); color: var(--tinte-2); line-height: 1.3; }

@media (max-width: 980px) {
  #page-container .et_pb_row.vb-reihe--anmeldung > .et_pb_column { width: 100%; margin-right: 0; }
  .vb-anmeldung__bild { width: 100%; margin-left: 0; clip-path: none; aspect-ratio: 2.1; }
  #page-container .vb-anmeldung__titel { font-size: 30px; margin-top: 16px; }
}

/* 11.1 Formulare: Beschriftung nur fuer Screenreader, Knopfreihe wie im Entwurf */
#page-container .vb-anmeldung .um .um-field-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
#page-container .vb-anmeldung .um .um-col-alt .um-left.um-half { width: 100%; }
#page-container .vb-anmeldung .um .um-col-alt .um-right.um-half { display: none; }
#page-container .vb-anmeldung .um .um-form input::placeholder { color: var(--tinte-2); opacity: 1; }
.vb-anmeldung__hinweis { margin: clamp(12px, 1.7vw, 22px) 0 0; font-size: clamp(13px, 1.43vw, 18px); }
.vb-anmeldung__hinweis a { color: var(--gold); font-weight: 700; }

/* 11.2 Registrierung: Bild, Formular und Vorteile nebeneinander wie im Entwurf
   (Entwurf: Bild bis x 400, Formular 414..790, Vorteile 836..1080) */
#page-container .et_pb_row.vb-reihe--reg > .et_pb_column:nth-child(1) { width: 34%; margin-right: 2%; }
#page-container .et_pb_row.vb-reihe--reg > .et_pb_column:nth-child(2) { width: 38%; margin-right: 4%; }
#page-container .et_pb_row.vb-reihe--reg > .et_pb_column:nth-child(3) { width: 22%; margin-right: 0; }
#page-container .et_pb_row.vb-reihe--reg { padding-top: clamp(16px, 2.2vw, 28px) !important; padding-bottom: clamp(20px, 3.2vw, 42px) !important; }
.vb-anmeldung--reg .vb-anmeldung__bild { aspect-ratio: 400 / 430; clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); }

/* Vorname und Nachname stehen im Entwurf nebeneinander */
#page-container .vb-anmeldung--reg .um .um-col-1 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(8px, 1.1vw, 14px);
}
#page-container .vb-anmeldung--reg .um .um-col-1 > .um-field { grid-column: 1 / -1; }
#page-container .vb-anmeldung--reg .um .um-col-1 > .um-field:nth-child(2) { grid-column: 1; }
#page-container .vb-anmeldung--reg .um .um-col-1 > .um-field:nth-child(3) { grid-column: 2; }
#page-container .vb-anmeldung--reg .vb-vorteile { margin-top: clamp(24px, 4.3vw, 55px); }

@media (max-width: 980px) {
  #page-container .et_pb_row.vb-reihe--reg > .et_pb_column { width: 100%; margin-right: 0; }
  .vb-anmeldung--reg .vb-anmeldung__bild { aspect-ratio: 2.1; clip-path: none; }
  #page-container .vb-anmeldung--reg .um .um-col-1 { grid-template-columns: 1fr; }
  #page-container .vb-anmeldung--reg .um .um-col-1 > .um-field:nth-child(2),
  #page-container .vb-anmeldung--reg .um .um-col-1 > .um-field:nth-child(3) { grid-column: 1; }
}

/* 11.3 Registrierung: Ueberschrift ueber beide Teile, darunter Formular und
   Vorteile nebeneinander (Entwurf: Formular 414..790, Vorteile 836..1080) */
#page-container .et_pb_row.vb-reihe--reg > .et_pb_column:first-child { width: 34%; margin-right: 2%; }
#page-container .et_pb_row.vb-reihe--reg > .et_pb_column:last-child {
  width: 64%; margin-right: 0;
  display: grid;
  grid-template-columns: minmax(0, 57%) minmax(0, 1fr);
  column-gap: clamp(14px, 2.1vw, 27px);
  align-items: start;
}
#page-container .et_pb_row.vb-reihe--reg > .et_pb_column:last-child > .et_pb_module { margin-bottom: 0 !important; }
#page-container .et_pb_row.vb-reihe--reg > .et_pb_column:last-child > .et_pb_module:nth-child(1) { grid-column: 1 / -1; }
#page-container .et_pb_row.vb-reihe--reg > .et_pb_column:last-child > .et_pb_module:nth-child(2) { grid-column: 1; }
#page-container .et_pb_row.vb-reihe--reg > .et_pb_column:last-child > .et_pb_module:nth-child(3) { grid-column: 2; }
#page-container .vb-anmeldung--reg .vb-vorteile { margin-top: 0; }
@media (max-width: 980px) {
  #page-container .et_pb_row.vb-reihe--reg > .et_pb_column:last-child { display: block; width: 100%; }
}
/* 11.4 Vorteilsliste ohne Aufzaehlungspunkte (Divi setzt sie sonst) */
#page-container .vb-vorteile,
#page-container .vb-vorteile li { list-style: none !important; }
#page-container .vb-vorteile { padding-left: 0; }

/* ============================================================
   12. Rechtsseiten der Boerse (Impressum, Datenschutz, AGB)
       Aufbau nach dem Entwurf, Text vollstaendig aus dem Bestand.
   ============================================================ */

/* 12.1 Impressum: Bildband mit heller Schrift */
#page-container .et_pb_section.vb-rechtsheld {
  position: relative;
  padding: 0;
  background-image: url("../../uploads/2025/12/pexels-dzenis-hasanica-8577453.jpg");
  background-size: cover;
  /* Das Foto ist hochformatig, der Streifen sehr flach: bei 45 %
     lag die Biene oberhalb des Ausschnitts. 60 % 30 % zeigt sie. */
  background-position: 60% 30%;
}
#page-container .et_pb_section.vb-rechtsheld::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,30,18,.78) 0%, rgba(10,30,18,.5) 55%, rgba(10,30,18,.2) 100%);
}
.vb-rechtsheld__innen {
  position: relative; z-index: 2;
  padding: clamp(26px, 4.4vw, 57px) 0;
  min-height: clamp(130px, 17.9vw, 230px);           /* Entwurf: Band 200 px hoch */
  display: flex; flex-direction: column; justify-content: center;
}
#page-container .vb-rechtsheld__innen h1 {
  color: var(--weiss);
  font-size: clamp(28px, 4.75vw, 61px);
  line-height: 1.0; margin: 0;
}
.vb-rechtsheld__innen .vb-strichgold { margin: clamp(10px, 1.6vw, 21px) 0 clamp(10px, 1.4vw, 18px); }
.vb-rechtsheld__lead { color: var(--weiss); font-size: clamp(13px, 1.52vw, 20px); line-height: 1.3; margin: 0; max-width: 34ch; }

/* 12.2 Zweispalter: links die Inhaltsuebersicht, rechts die Abschnitte */
#page-container .et_pb_row.vb-reihe--recht > .et_pb_column:first-child { width: 22%; margin-right: 6%; }
#page-container .et_pb_row.vb-reihe--recht > .et_pb_column:last-child { width: 72%; margin-right: 0; }

#page-container .vb-uberschrift--klein { font-size: clamp(14px, 1.79vw, 23px); font-weight: 800; line-height: 1.2; margin: 0 0 clamp(10px, 1.3vw, 17px); }
.vb-inhaltsliste { list-style: none !important; margin: 0; padding: 0; counter-reset: punkt; }
.vb-inhaltsliste li { list-style: none !important; counter-increment: punkt; line-height: 1.3; margin: 0 0 clamp(5px, .8vw, 10px); font-size: clamp(12px, 1.34vw, 17px); }
.vb-inhaltsliste li::before { content: counter(punkt) ". "; color: var(--tinte-2); }
.vb-inhaltsliste a { color: var(--tinte); text-decoration: none; }
.vb-inhaltsliste a:hover { text-decoration: underline; }

.vb-rechtsteil { margin: 0 0 clamp(20px, 3.0vw, 39px); scroll-margin-top: 110px; }
#page-container .vb-rechtsteil h2 {
  font-size: clamp(17px, 2.24vw, 29px);
  font-weight: 800; line-height: 1.1;
  margin: 0 0 clamp(8px, 1.1vw, 15px);
  padding-bottom: clamp(6px, .8vw, 11px);
  border-bottom: 1px solid var(--linie-2);
}
.vb-rechtsteil__nr { color: var(--gold); margin-right: .35em; }
.vb-rechtsteil p { margin: 0 0 clamp(8px, 1.07vw, 14px); font-size: clamp(12px, 1.34vw, 17px); line-height: 1.4; }
.vb-rechtsteil a { color: var(--tinte); }
.vb-recht--vorspann p { font-size: clamp(12px, 1.34vw, 17px); line-height: 1.4; margin: 0 0 clamp(8px, 1.07vw, 14px); }

/* 12.3 Datenschutz: Held mit Text links und Bild rechts, darunter das Register */
.vb-held-innen--recht .vb-held-innen__bild { aspect-ratio: 546 / 230; }
.vb-register {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(16px, 2.8vw, 36px);
  row-gap: clamp(14px, 2.2vw, 28px);
}
.vb-register__punkt {
  display: block; text-decoration: none; color: var(--tinte);
  border-top: 2px solid var(--linie-2);
  padding-top: clamp(8px, 1.1vw, 15px);
}
.vb-register__punkt:hover { border-top-color: var(--gold); }
.vb-register__nr { display: block; color: var(--gold); font-weight: 800; font-size: clamp(14px, 1.7vw, 22px); }
.vb-register__punkt strong { display: block; font-size: clamp(13px, 1.52vw, 20px); font-weight: 800; margin: clamp(3px, .45vw, 6px) 0; line-height: 1.15; }
.vb-register__text { display: block; font-size: clamp(11px, 1.16vw, 15px); color: var(--tinte-2); line-height: 1.35; }

@media (max-width: 980px) {
  #page-container .et_pb_row.vb-reihe--recht > .et_pb_column { width: 100%; margin-right: 0; }
  #page-container .et_pb_row.vb-reihe--recht > .et_pb_column:first-child { margin-bottom: 16px; }
  .vb-register { grid-template-columns: 1fr; }
  #page-container .vb-rechtsheld__innen h1 { font-size: 30px; }
  .vb-rechtsheld__lead { max-width: none; font-size: 14px; }
  .vb-held-innen--recht .vb-held-innen__bild { aspect-ratio: 2.1; }
}

/* ============================================================
   13. Anzeigenbereich (AWPCP) in der Gestaltung der Boerse
       Fuer diese Seiten gibt es keinen Entwurf; sie bekommen
       dieselben Felder, Knoepfe und Abstaende wie die uebrigen
       Formulare der Boerse.
   ============================================================ */
#page-container .awpcp-page h2,
#page-container .awpcp-page h3 {
  font-family: var(--schrift);
  font-size: clamp(17px, 2.24vw, 29px);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 clamp(12px, 1.7vw, 22px);
  color: var(--tinte);
}
#page-container .awpcp-page h3 { font-size: clamp(15px, 1.79vw, 23px); }
#page-container .awpcp-page p { font-size: clamp(13px, 1.43vw, 18px); line-height: 1.45; }
#page-container .awpcp-page label,
#page-container .awpcp-page .awpcp-form-spacer label {
  display: block;
  font-family: var(--schrift);
  font-weight: 700;
  font-size: clamp(12px, 1.34vw, 17px);
  margin: 0 0 clamp(4px, .54vw, 7px);
  color: var(--tinte);
}
#page-container .awpcp-page .awpcp-form-spacer { margin: 0 0 clamp(10px, 1.34vw, 17px); max-width: 520px; }
#page-container .awpcp-page input[type="text"],
#page-container .awpcp-page input[type="email"],
#page-container .awpcp-page input[type="url"],
#page-container .awpcp-page input[type="tel"],
#page-container .awpcp-page input[type="number"],
#page-container .awpcp-page input[type="password"],
#page-container .awpcp-page input[type="search"],
#page-container .awpcp-page textarea,
#page-container .awpcp-page select,
#page-container .awpcp-textfield,
#page-container .awpcp-page .inputbox {
  width: 100%;
  max-width: 520px;
  height: auto;
  min-height: clamp(38px, 4.3vw, 55px);
  font-family: var(--schrift) !important;
  font-size: clamp(13px, 1.43vw, 18px) !important;
  color: var(--tinte) !important;
  background: var(--weiss) !important;
  border: 1px solid var(--linie-2) !important;
  border-radius: 0 !important;
  padding: clamp(6px, .8vw, 11px) clamp(9px, 1.16vw, 15px) !important;
  box-shadow: none !important;
}
#page-container .awpcp-page textarea { min-height: clamp(110px, 13vw, 170px); }

/* Knoepfe: auch die ohne eigene Klasse ("Weiter", "Suchen") */
#page-container .awpcp-page input[type="submit"],
#page-container .awpcp-page button[type="submit"],
#page-container .awpcp-page .awpcp-button,
#page-container #classiwrapper input[type="submit"],
#page-container #classiwrapper button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: clamp(38px, 4.3vw, 55px);
  font-family: var(--schrift) !important;
  font-weight: 800 !important;
  font-size: clamp(13px, 1.46vw, 19px) !important;
  background: var(--gold) !important;
  background-image: none !important;
  color: var(--tinte) !important;
  border: 2px solid var(--gold) !important;
  border-radius: 0 !important;
  padding: clamp(8px, .95vw, 13px) clamp(16px, 2.2vw, 29px) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer;
}
#page-container .awpcp-page input[type="submit"]:hover,
#page-container #classiwrapper input[type="submit"]:hover {
  background: var(--gold-dunkel) !important;
  border-color: var(--gold-dunkel) !important;
}

/* Hinweise, Fehlermeldungen und Navigationszeilen */
#page-container .awpcp-page .awpcp-message,
#page-container .awpcp-page .awpcp-error,
#page-container .awpcp-page .awpcp-notice {
  border: 1px solid var(--linie-2);
  border-left: 5px solid var(--gold);
  background: rgba(0, 0, 0, .035);
  padding: clamp(10px, 1.34vw, 17px) clamp(12px, 1.6vw, 21px);
  border-radius: 0;
  font-size: clamp(13px, 1.43vw, 18px);
}
#page-container .awpcp-page .awpcp-error { border-left-color: #a33; }
#page-container .awpcp-menu-items,
#page-container .awpcp-page .awpcp-menu-items {
  display: flex; flex-wrap: wrap; gap: clamp(10px, 1.6vw, 21px);
  list-style: none !important; margin: 0 0 clamp(12px, 1.7vw, 22px); padding: 0;
  font-size: clamp(12px, 1.34vw, 17px); font-weight: 700;
}
#page-container .awpcp-menu-items li { list-style: none !important; }

/* Anzeigenliste */
#page-container .awpcp-listings .awpcp-listing,
#page-container .awpcp-page .awpcp-listing-item {
  border-top: 1px solid var(--linie-2);
  padding: clamp(12px, 1.7vw, 22px) 0;
}
#page-container .awpcp-page .awpcp-listing-title,
#page-container .awpcp-page .awpcp-listing-item h3 {
  font-size: clamp(15px, 1.79vw, 23px); font-weight: 800; margin: 0 0 clamp(5px, .72vw, 9px);
}
/* 13.1 Kategoriefilter und Suchzeile der Anzeigenliste */
#page-container .awpcp-page .awpcp-category-dropdown-form label,
#page-container .awpcp-page form[name="categoryform"] label { display: block; margin-bottom: clamp(4px, .54vw, 7px); }
#page-container .awpcp-page .awpcp-search-form,
#page-container .awpcp-page .awpcp-listings-search-form { display: flex; flex-wrap: wrap; gap: clamp(8px, 1.1vw, 14px); align-items: center; }
#page-container .awpcp-page .awpcp-search-form input[type="text"] { flex: 1 1 320px; max-width: none; }
/* 13.2 Kategorieauswahl ueber der Anzeigenliste */
#page-container .awpcp-category-dropdown-container { max-width: 520px; margin: 0 0 clamp(12px, 1.7vw, 22px); }
#page-container .awpcp-category-dropdown-label { display: block; margin: 0 0 clamp(4px, .54vw, 7px); font-weight: 700; font-size: clamp(12px, 1.34vw, 17px); }
#page-container .awpcp-category-dropdown-container .select2-container { width: 100% !important; }
#page-container .awpcp-classifieds-menu { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.6vw, 21px); list-style: none !important; margin: 0 0 clamp(14px, 1.9vw, 25px); padding: 0; }
#page-container .awpcp-classifieds-menu li { list-style: none !important; }
#page-container .awpcp-classifieds-menu--menu-item-link { font-weight: 700; font-size: clamp(12px, 1.34vw, 17px); }
/* 13.3 Das Plugin stellt Beschriftung und Auswahl nebeneinander; hier untereinander */
#page-container .awpcp-category-dropdown-container { display: block; }

/* 13.4 Abschnitte des Anzeigenformulars: graue Leiste des Plugins
   durch die Gestaltung der Boerse ersetzt */
#page-container .awpcp-submit-listing-section {
  border: 1px solid var(--linie-2);
  background: var(--weiss);
  margin: 0 0 clamp(14px, 1.9vw, 25px);
}
#page-container .awpcp-submit-listing-section-title,
#page-container .awpcp-submit-listing-section h2.awpcp-submit-listing-section-title {
  margin: 0;
  padding: clamp(10px, 1.34vw, 17px) clamp(12px, 1.7vw, 22px);
  background: var(--band);
  border: 0;
  border-bottom: 1px solid var(--linie-2);
  font-family: var(--schrift);
  font-size: clamp(14px, 1.7vw, 22px);
  font-weight: 800;
  color: var(--tinte);
  line-height: 1.2;
}
#page-container .awpcp-submit-listing-section-content { padding: clamp(12px, 1.7vw, 22px); }
#page-container .awpcp-submit-listing-section .required { color: var(--gold-dunkel); margin-left: .2em; }

/* 13.5 Profil und Konto (Ultimate Member) in der Palette */
#page-container .um .um-profile-nav,
#page-container .um .um-profile-nav-item a {
  background: var(--band) !important;
  color: var(--tinte) !important;
  border-radius: 0 !important;
  font-family: var(--schrift) !important;
  font-weight: 700 !important;
}
#page-container .um .um-profile-nav { border: 1px solid var(--linie-2); }
#page-container .um .um-profile-nav-item.active a,
#page-container .um .um-profile-nav-item a:hover { background: var(--gold) !important; color: var(--tinte) !important; }
#page-container .um .um-profile-headertext,
#page-container .um .um-name a { font-family: var(--schrift) !important; color: var(--tinte) !important; font-weight: 800 !important; }
#page-container .um .um-account-side li a,
#page-container .um .um-account-tab { font-family: var(--schrift) !important; }
#page-container .um .um-account-side li a {
  border-radius: 0 !important;
  background: var(--weiss) !important;
  border: 1px solid var(--linie-2) !important;
  color: var(--tinte) !important;
}
#page-container .um .um-account-side li.current a,
#page-container .um .um-account-side li a:hover { background: var(--band) !important; }
#page-container .um .um-account-side li a .um-account-icon { color: var(--gold-dunkel) !important; }
#page-container .um .um-field-label label { font-size: clamp(12px, 1.34vw, 17px); }

/* 13.6 Einzelne Anzeige: Satzbreite und Typografie der Boerse */
#page-container .awpcp-listing-page .awpcp-listing-title,
#page-container .awpcp-single-listing h1 { font-family: var(--schrift); font-weight: 800; }

/* ============================================================
   14. Einzelne Anzeige
       Divi hat hier seine Beitragsvorlage darueber gelegt: Titel,
       Datum und Beitragsbild erschienen doppelt, daneben stand eine
       leere Spalte fuer die Seitenleiste. Beides faellt weg, die
       Anzeige selbst bekommt die Gestaltung der Boerse.
   ============================================================ */
body.single-awpcp_listing #main-content > .container {
  width: 100% !important;
  max-width: var(--breite) !important;
  padding: 0 var(--rand) !important;
}
body.single-awpcp_listing #left-area {
  width: 100% !important;
  padding-right: 0 !important;
  padding-bottom: clamp(20px, 3.2vw, 42px) !important;
}
body.single-awpcp_listing #sidebar { display: none !important; }
/* 14.1 Der Titel steht genau einmal - als echte Hauptueberschrift der
   Seite. Die Beitragsvorlage haengt darunter Verfasser, Datum und ein
   zweites Mal das Foto; das faellt weg. Die Anzeige selbst wiederholt den
   Titel noch einmal als Verweis, auch der entfaellt.
   (Vorher war die ganze Vorlage ausgeblendet - damit hatte die Seite
   ueberhaupt keine Hauptueberschrift mehr.) */
body.single-awpcp_listing .et_post_meta_wrapper {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.single-awpcp_listing .et_post_meta_wrapper > img,
body.single-awpcp_listing .et_post_meta_wrapper .post-meta,
body.single-awpcp_listing .et_post_meta_wrapper .et_post_meta_wrapper { display: none !important; }
body.single-awpcp_listing h1.entry-title {
  display: block !important;
  font-family: var(--schrift);
  font-size: clamp(22px, 2.9vw, 40px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--tinte);
  margin: 0 0 clamp(12px, 1.6vw, 22px) !important;
  padding: 0 0 clamp(10px, 1.4vw, 18px) !important;
  border-bottom: 2px solid var(--linie-2);
}
body.single-awpcp_listing #page-container .awpcp-title { display: none !important; }

/* Kopfzeile der Anzeige */
#page-container .awpcp-listing-header,
#page-container #classiwrapper > div > h2,
#page-container .showawpcpadpage h2 {
  font-family: var(--schrift);
  font-size: clamp(20px, 2.78vw, 36px);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 clamp(14px, 1.9vw, 25px);
  padding: 0 0 clamp(8px, 1.1vw, 15px);
  background: none;
  border-bottom: 2px solid var(--linie-2);
  color: var(--tinte);
}

/* Zwei Bloecke: links die Angaben, rechts das Bild */
#page-container .showawpcpadpage { display: block; }
#page-container .showawpcpadpage .adtitle { font-weight: 800; }
#page-container #awpcp-listing-details,
#page-container .awpcp-listing-details { font-size: clamp(13px, 1.43vw, 18px); line-height: 1.5; }
#page-container .showawpcpadpage h3,
#page-container #classiwrapper h3 {
  font-family: var(--schrift);
  font-size: clamp(15px, 1.7vw, 22px);
  font-weight: 800;
  margin: clamp(14px, 1.9vw, 25px) 0 clamp(6px, .8vw, 11px);
  color: var(--tinte);
}
#page-container .showawpcpadpage p,
#page-container #classiwrapper p { font-size: clamp(13px, 1.43vw, 18px); line-height: 1.5; }
#page-container .awpcp-ad-image,
#page-container #classiwrapper .showawpcpadpage img { border: 1px solid var(--linie-2); background: var(--weiss); }

/* Hinweiszeile unter dem Bild */
#page-container .showawpcpadpage .awpcp-ad-image-caption,
#page-container #classiwrapper small { font-size: clamp(11px, 1.16vw, 15px); color: var(--tinte-2); }

/* 14.1 Einzelne Anzeige: Reste der Divi-Vorlage und Gestaltung der Bloecke */
body.single-awpcp_listing #main-content .container::before { display: none !important; }
body.single-awpcp_listing #main-content .container { padding-top: clamp(16px, 2.2vw, 30px) !important; }

#page-container .awpcp-title {
  background: var(--band);
  border: 0;
  border-left: 6px solid var(--gold);
  padding: clamp(10px, 1.34vw, 17px) clamp(12px, 1.7vw, 22px);
  margin: 0 0 clamp(14px, 1.9vw, 25px);
}
#page-container .awpcp-title a,
#page-container .awpcp-title {
  font-family: var(--schrift);
  font-size: clamp(16px, 2.0vw, 26px);
  font-weight: 800;
  color: var(--tinte);
  text-decoration: none;
  line-height: 1.2;
}

#page-container .awpcp-subtitle {
  font-family: var(--schrift);
  font-size: clamp(14px, 1.61vw, 21px);
  font-weight: 800;
  color: var(--tinte);
  margin: clamp(14px, 1.9vw, 25px) 0 clamp(6px, .8vw, 11px);
  padding-bottom: clamp(5px, .63vw, 8px);
  border-bottom: 1px solid var(--linie-2);
}
#page-container .showawpcpadpage { font-size: clamp(13px, 1.43vw, 18px); line-height: 1.6; }
#page-container .showawpcpadpage label { font-weight: 700; color: var(--tinte); }
#page-container .showawpcpadpage a { color: var(--tinte); }

/* Hauptbild gross und unverzerrt, Lupe darunter */
#page-container .awpcp-ad-primary-image { float: right; margin: 0 0 clamp(14px, 1.9vw, 25px) clamp(16px, 2.2vw, 30px); max-width: 46%; }
#page-container .awpcp-ad-primary-image img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--linie-2); background: var(--weiss);
}
#page-container .thickbox.enlarge,
#page-container .awpcp-ad-primary-image + .enlarge {
  display: inline-block; margin-top: clamp(5px, .63vw, 8px);
  font-size: clamp(11px, 1.16vw, 15px); color: var(--tinte-2);
}
#page-container .awpcp-ad-primary-image .thumbshow { max-width: none; }

@media (max-width: 980px) {
  #page-container .awpcp-ad-primary-image { float: none; max-width: 100%; margin: 0 0 14px; }
}

/* 15. Suchzeile ueber der Anzeigenliste
      Vorher: Feld links, Knopf weit rechts, dazwischen 400 px Luft,
      "Erweiterte Suche" ganz aussen. Jetzt eine Zeile. */
#page-container .awpcp-classifieds-search-bar,
#page-container #classiwrapper form:has(.awpcp-classifieds-search-bar--query-field) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(8px, 1.1vw, 14px);
  margin: 0 0 clamp(14px, 1.9vw, 25px);
}
#page-container .awpcp-classifieds-search-bar--query-field { flex: 1 1 320px; min-width: 0; }
#page-container .awpcp-classifieds-search-bar--query-field input[type="text"] { width: 100%; max-width: none; margin: 0; }
#page-container .awpcp-classifieds-search-bar--submit-button { flex: 0 0 auto; }
#page-container .awpcp-classifieds-search-bar--submit-button input[type="submit"] { margin: 0; }
#page-container .awpcp-classifieds-search-bar--advanced-search-link {
  flex: 0 0 auto;
  font-size: clamp(12px, 1.34vw, 17px);
  font-weight: 700;
}
#page-container .awpcp-classifieds-search-bar--advanced-search-link a { color: var(--tinte); }

/* Menuezeile darunter enger stellen, besonders am Telefon */
#page-container .awpcp-classifieds-menu { gap: clamp(10px, 1.6vw, 21px) !important; }
@media (max-width: 980px) {
  #page-container .awpcp-classifieds-menu { gap: 8px 14px !important; }
  #page-container .awpcp-classifieds-search-bar--query-field { flex: 1 1 100%; }
  #page-container .awpcp-classifieds-search-bar--submit-button,
  #page-container .awpcp-classifieds-search-bar--submit-button input[type="submit"] { width: 100%; }
}
/* 15.1 Suchzeile: Feld waechst, Link bleibt in derselben Zeile */
#page-container .awpcp-classifieds-search-bar { flex-wrap: nowrap; }
#page-container .awpcp-classifieds-search-bar--query-field { flex: 1 1 auto; width: auto !important; max-width: none !important; }
#page-container .awpcp-classifieds-search-bar--query-field input[type="text"] { max-width: none !important; }
#page-container .awpcp-classifieds-search-bar--advanced-search-link { width: auto !important; clear: none !important; margin: 0 !important; white-space: nowrap; }
@media (max-width: 980px) {
  #page-container .awpcp-classifieds-search-bar { flex-wrap: wrap; }
}
/* 15.2 Suchfeld fuellt die Zeile (Basis 0, damit es wirklich waechst) */
#page-container .awpcp-classifieds-search-bar--query-field { flex: 1 1 0% !important; }
#page-container .awpcp-classifieds-search-bar > input[type="hidden"] { display: none; }
/* 15.3 Sichtbare Beschriftung fuer das Suchfeld (der Platzhalter allein
   erklaert das Feld nicht, und er verschwindet beim Tippen) */
#page-container .awpcp-classifieds-search-bar { align-items: flex-end; }
#page-container .awpcp-classifieds-search-bar--query-field { position: relative; padding-top: clamp(18px, 1.9vw, 26px); min-width: 260px; }
#page-container .awpcp-classifieds-search-bar--query-field::before {
  content: 'Suchbegriff';
  position: absolute; top: 0; left: 0;
  font-size: clamp(12px, 1.34vw, 17px);
  font-weight: 700;
  color: var(--tinte);
}
#page-container .awpcp-classifieds-search-bar--advanced-search-link { padding-bottom: clamp(14px, 1.5vw, 19px); }

/* 15.4 Link "Zugangscode vergessen" sichtbar als Link */
#page-container .awpcp-page a.awpcp-access-key-link,
#page-container #classiwrapper form a {
  color: var(--tinte);
  text-decoration: underline;
  text-underline-offset: .18em;
}
#page-container #classiwrapper form a:hover { color: var(--gold-dunkel); }
/* 15.5 Suchzeile sauber auf eine Grundlinie stellen */
#page-container .awpcp-classifieds-search-bar--submit-button { display: flex; align-items: flex-end; }
#page-container .awpcp-classifieds-search-bar--submit-button input[type="submit"] { margin: 0 !important; }
#page-container .awpcp-classifieds-search-bar--advanced-search-link { padding-bottom: clamp(16px, 1.7vw, 22px); }
#page-container .awpcp-classifieds-search-bar--query-field input[type="text"] { margin-bottom: 0 !important; }
/* 15.6 Flexbehaelter ist das Formular selbst, nicht der Rahmen darum */
#page-container #classiwrapper form:has(> .awpcp-classifieds-search-bar--query-field) {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: clamp(8px, 1.1vw, 14px);
  margin: 0 0 clamp(14px, 1.9vw, 25px);
}
#page-container .awpcp-classifieds-search-bar { display: block; }
@media (max-width: 980px) {
  #page-container #classiwrapper form:has(> .awpcp-classifieds-search-bar--query-field) { flex-wrap: wrap; }
}

/* ============================================================
   16. Bewegung: Auftritt, Hover, Tastatur, Menue
       Gleiche Leitgedanken wie auf der Imkerei-Seite:
        - Reaktion auf Maus und Tastatur: 160-220 ms.
        - Auftritt von Bloecken: 480-540 ms, leicht gestaffelt.
        - Ohne JavaScript ist nichts versteckt, das Menue bleibt
          als normale Liste benutzbar.
        - "Weniger Bewegung" schaltet alles sofort sichtbar.
   ============================================================ */

/* --- 16.1 Auftritt beim Erscheinen im Bild ------------------- */
.hat-auftritt [data-auftritt] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 480ms cubic-bezier(.22, .61, .36, 1) var(--auftritt-verzug, 0ms),
    transform 520ms cubic-bezier(.22, .61, .36, 1) var(--auftritt-verzug, 0ms);
}
.hat-auftritt [data-auftritt].ist-da {
  opacity: 1;
  transform: none;
}
.hat-auftritt .vb-held__bild[data-auftritt],
.hat-auftritt .vb-held-innen__bild[data-auftritt],
.hat-auftritt .vb-anmeldung__bild[data-auftritt] {
  transform: scale(1.012);
  transition:
    opacity 540ms cubic-bezier(.22, .61, .36, 1) var(--auftritt-verzug, 0ms),
    transform 640ms cubic-bezier(.22, .61, .36, 1) var(--auftritt-verzug, 0ms);
}
.hat-auftritt .vb-held__bild[data-auftritt].ist-da,
.hat-auftritt .vb-held-innen__bild[data-auftritt].ist-da,
.hat-auftritt .vb-anmeldung__bild[data-auftritt].ist-da { transform: none; }

/* --- 16.2 Reaktion auf Maus und Tastatur --------------------- */
.vb-knopf,
.et_pb_button.vb-knopf,
#page-container .et_pb_button.vb-knopf,
#page-container .awpcp-button,
#page-container input[type="submit"],
#page-container .um-button {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.vb-knopf:active,
#page-container .et_pb_button.vb-knopf:active,
#page-container .awpcp-button:active,
#page-container .um-button:active { transform: translateY(1px); }

.vb-menue a,
.vb-fuss__menue a,
.vb-kontakt__zeile a,
.vb-fuss__kontakt a { transition: color 170ms ease, border-color 170ms ease; }

/* Kategorien und Anzeigen reagieren beim Zeigen */
.vb-kategorie,
.vb-verweis,
#page-container .awpcp-listings .awpcp-listing {
  transition: background-color 190ms ease, border-color 190ms ease;
}
.vb-kategorie:hover,
.vb-kategorie:focus-within,
.vb-verweis:hover,
.vb-verweis:focus-within { background: var(--band); }
.vb-kategorie__pfeil { transition: transform 200ms cubic-bezier(.3, .7, .3, 1); }
.vb-kategorie:hover .vb-kategorie__pfeil,
.vb-kategorie:focus-within .vb-kategorie__pfeil { transform: translateX(5px); }

/* Anzeigenbilder in der Liste */
#page-container .awpcp-listing-primary-image-thumbnail,
#page-container .awpcp-listing-excerpt-thumbnail { overflow: hidden; }
/* 16.2a Vorschaubild der Anzeige: fester Rahmen, Bild fuellt ihn aus.
   Die Datei ist 240x180 gross und wird kleiner angezeigt - dadurch ist
   sie auch auf feinen Bildschirmen scharf. */
#page-container img.awpcp-listing-primary-image-thumbnail {
  width: clamp(96px, 9vw, 130px) !important;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--band);
  transition: transform 420ms cubic-bezier(.22, .61, .36, 1);
}
#page-container .awpcp-listing-excerpt:hover img.awpcp-listing-primary-image-thumbnail { transform: scale(1.04); }
@media (max-width: 600px) {
  #page-container img.awpcp-listing-primary-image-thumbnail { width: 88px !important; }
}

/* Sichtbarer Fokus fuer die Tastatur */
.vb-knopf:focus-visible,
.vb-menue a:focus-visible,
.vb-fuss__menue a:focus-visible,
.vb-kategorie:focus-visible,
.vb-schalter:focus-visible,
#page-container .awpcp-button:focus-visible,
#page-container .um-button:focus-visible,
#page-container input:focus-visible,
#page-container select:focus-visible,
#page-container textarea:focus-visible {
  outline: 2px solid var(--gruen-dunkel, var(--gold));
  outline-offset: 2px;
}
#page-container .um-form input,
#page-container .um-form textarea,
#page-container .awpcp-form input,
#page-container .awpcp-form textarea,
#page-container .awpcp-classifieds-search-bar input {
  transition: border-color 180ms ease, background-color 180ms ease;
}

/* --- 16.3 Menue auf dem Telefon ----------------------------- */
@media (max-width: 980px) {
  .vb-menue {
    display: block;
    position: static;
    border-bottom: 0;
    padding: 0 0 10px;
  }
  .hat-menue .vb-menue {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--kopf-farbe);
    border-bottom: 1px solid var(--linie-2);
    padding: 0 var(--rand);
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition:
      max-height 320ms cubic-bezier(.3, .7, .3, 1),
      padding-top 320ms cubic-bezier(.3, .7, .3, 1),
      padding-bottom 320ms cubic-bezier(.3, .7, .3, 1),
      opacity 190ms linear,
      visibility 0s linear 320ms;
  }
  .hat-menue .vb-menue.ist-offen {
    max-height: 78vh;
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
    padding-top: 4px;
    padding-bottom: 12px;
    transition:
      max-height 340ms cubic-bezier(.3, .7, .3, 1),
      padding-top 340ms cubic-bezier(.3, .7, .3, 1),
      padding-bottom 340ms cubic-bezier(.3, .7, .3, 1),
      opacity 220ms linear 40ms,
      visibility 0s linear 0s;
  }
  .vb-schalter span,
  .vb-schalter span::before,
  .vb-schalter span::after {
    transition: transform 240ms cubic-bezier(.3, .7, .3, 1), background-color 180ms ease, top 240ms cubic-bezier(.3, .7, .3, 1);
  }
  .vb-schalter[aria-expanded="true"] span { background: transparent; }
  .vb-schalter[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
  .vb-schalter[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }
}

/* --- 16.4 Weniger Bewegung ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hat-auftritt [data-auftritt],
  .hat-auftritt [data-auftritt].ist-da {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .vb-knopf,
  .vb-kategorie,
  .vb-kategorie__pfeil,
  .vb-verweis,
  .vb-menue a,
  .hat-menue .vb-menue,
  .hat-menue .vb-menue.ist-offen,
  .vb-schalter span,
  .vb-schalter span::before,
  .vb-schalter span::after,
  #page-container .awpcp-button,
  #page-container .um-button,
  #page-container img.awpcp-listing-primary-image-thumbnail {
    transition: none !important;
  }
  #page-container .awpcp-listing-excerpt:hover img.awpcp-listing-primary-image-thumbnail { transform: none; }
  .vb-kategorie:hover .vb-kategorie__pfeil { transform: none; }
}

/* ============================================================
   17. Einzelne Anzeige: Luecke neben dem Foto
       Das Foto steht rechts und ist hoeher als der Kontaktblock.
       Die Erweiterung setzt danach eine Trennzeile, die den Umfluss
       aufhebt - dadurch blieb links eine leere Flaeche von rund
       400 Pixeln, und "Weitere Informationen" begann erst unter dem
       Foto. Jetzt laeuft der Text neben dem Foto weiter.
   ============================================================ */
body.single-awpcp_listing #showawpcpadpage div.fixfloat {
  clear: none !important;
  height: 0;
  margin: 0;
}
body.single-awpcp_listing #showawpcpadpage::after {
  content: '';
  display: block;
  clear: both;
}
body.single-awpcp_listing #showawpcpadpage .awpcp-ad-primary-image {
  margin: 0 0 clamp(16px, 2vw, 26px) clamp(20px, 3vw, 44px) !important;
}
body.single-awpcp_listing #showawpcpadpage > br { display: none; }
/* Abstand zwischen den Abschnitten, der vorher von der Trennzeile kam */
body.single-awpcp_listing #showawpcpadpage > div.showawpcpadpage + div.showawpcpadpage {
  margin-top: clamp(14px, 2vw, 26px);
}
/* Die Reihe mit den Teilen-Knoepfen und der Meldefahne sitzt am Schluss */
body.single-awpcp_listing span.fixfloat {
  display: flex !important;
  align-items: center;
  gap: 12px;
  /* Hoehe und Ueberlauf ausdruecklich zuruecksetzen: die Regel fuer die
     Trennzeilen weiter oben hatte die Reihe auf 0 gesetzt, dadurch waren
     die Symbole unten abgeschnitten. */
  height: auto !important;
  min-height: 0;
  overflow: visible !important;
  clear: both;
  margin-top: clamp(20px, 2.8vw, 34px);
  padding: clamp(14px, 1.9vw, 22px) 0 clamp(4px, .6vw, 8px);
  border-top: 1px solid var(--linie-2);
}
body.single-awpcp_listing span.fixfloat > * { overflow: visible !important; }
body.single-awpcp_listing .adviewed {
  font-size: clamp(11px, 1.16vw, 14px);
  color: var(--tinte-2);
}

/* 17.1 Weg zur Nachricht an den Anbieter.
   Vorher war der einzige Weg der Name des Anbieters als Verweis -
   daran erkennt niemand ein Nachrichtenformular. */
#page-container .awpcp-ansprechpartner {
  margin: 0 0 clamp(4px, .6vw, 8px);
  font-size: clamp(13px, 1.43vw, 18px);
  line-height: 1.5;
}
#page-container .awpcp-ansprechpartner label { font-weight: 700; margin-right: 4px; }
#page-container a.awpcp-antwort-knopf {
  /* eigene Zeile, nicht neben der Telefonnummer */
  display: flex;
  width: max-content;
  max-width: 100%;
  clear: left;
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);
  margin-top: clamp(12px, 1.6vw, 20px);
  padding: clamp(9px, 1vw, 14px) clamp(16px, 2.2vw, 30px);
  background: var(--gold);
  color: var(--tinte);
  border: 2px solid var(--gold);
  border-radius: 0;
  font-family: var(--schrift);
  font-weight: 800;
  font-size: clamp(13px, 1.35vw, 18px);
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease;
}
#page-container a.awpcp-antwort-knopf::after {
  content: '';
  display: inline-block;
  width: 1.45em; height: .62em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.2 6h25.6M21.2 1.4 26.8 6l-5.6 4.6'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.2 6h25.6M21.2 1.4 26.8 6l-5.6 4.6'/%3E%3C/svg%3E") no-repeat center / contain;
}
#page-container a.awpcp-antwort-knopf:hover { background: var(--gold-dunkel, #c9821a); border-color: var(--gold-dunkel, #c9821a); }
#page-container a.awpcp-antwort-knopf:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  #page-container a.awpcp-antwort-knopf { transition: none !important; }
}

/* ============================================================
   18. Seite "nicht gefunden"
   ============================================================ */
#page-container .vb-nichtgefunden .et_pb_row { padding: clamp(28px, 5vw, 70px) 0 clamp(36px, 6vw, 86px) !important; }
.vb-nichtgefunden__text {
  font-size: clamp(14px, 1.5vw, 19px);
  line-height: 1.55;
  max-width: 46ch;
  margin: 0 0 clamp(14px, 2vw, 24px);
}
.vb-nichtgefunden__wege {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linie-2);
  max-width: 46ch;
}
.vb-nichtgefunden__wege li { border-bottom: 1px solid var(--linie-2); }
.vb-nichtgefunden__wege a {
  display: block;
  padding: clamp(9px, 1.1vw, 14px) 0;
  font-family: var(--schrift);
  font-weight: 800;
  font-size: clamp(14px, 1.5vw, 19px);
  color: var(--tinte);
  text-decoration: none;
  transition: color 170ms ease;
}
.vb-nichtgefunden__wege a:hover { color: var(--gold-dunkel); }
@media (prefers-reduced-motion: reduce) { .vb-nichtgefunden__wege a { transition: none !important; } }

/* ============================================================
   19. Datenschutz: Volltext nutzt die Breite des Rasters
   ------------------------------------------------------------
   Wie auf der Imkerei-Seite: 82ch sind fest, ab 1200 px blieb
   rechts die halbe Seite leer. Der Vorspann der AGB bleibt
   unveraendert schmal.
   ============================================================ */
.vb-recht:not(.vb-recht--vorspann) { max-width: min(82ch, 100%); margin-left: auto; margin-right: auto; }
@media (max-width: 980px) {
  .vb-recht:not(.vb-recht--vorspann) { max-width: none; margin-left: 0; margin-right: 0; }
}

/* ============================================================
   20. Linkseite: Aufruf zur Vermittlungsboerse
   ------------------------------------------------------------
   Im freigegebenen Entwurf (Seite 23) endet die Linkseite mit
   einem goldenen Band und darunter dem Kontakt. Beides fehlte;
   die Liste stiess unvermittelt an die Fussleiste.
   Masse aus dem Entwurf: Bandhoehe 174 px bei 1117 px Breite,
   Schraege von 54,2 % oben auf 45,8 % unten.
   ============================================================ */
.vb-aufruf {
  display: grid;
  position: relative;
  background: var(--gold);
  min-height: clamp(128px, 15.6vw, 215px);
  overflow: hidden;
}
.vb-aufruf__bild {
  grid-area: 1 / 1;
  position: relative;
  justify-self: end;
  align-self: stretch;
  width: 54.2%;
  clip-path: polygon(15.5% 0, 100% 0, 100% 100%, 0 100%);
}
/* absolut, damit die Eigenhoehe des Fotos die Bandhoehe nicht bestimmt */
.vb-aufruf__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vb-aufruf__text {
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
  align-self: center;
  max-width: 48%;
  padding: clamp(14px, 2.2vw, 28px) clamp(16px, 2.6vw, 34px);
}
/* Dunkle Schrift auf dem Gold: weiss ergab nur 2,6:1 Kontrast,
   die dunkle Farbe der Boerse ergibt 6,7:1 und ist auch auf dem
   Telefon gut lesbar. Das Gold bleibt wie im Entwurf. */
.vb-aufruf__titel {
  margin: 0;
  font-family: var(--schrift);
  font-weight: 800;
  color: var(--tinte);
  font-size: clamp(20px, 2.7vw, 34px);
  line-height: 1.12;
}
.vb-aufruf__unter {
  margin: clamp(6px, .9vw, 12px) 0 0;
  color: var(--tinte);
  font-size: clamp(13px, 1.4vw, 18px);
  line-height: 1.32;
}
.vb-aufruf__knopf { margin: clamp(10px, 1.5vw, 20px) 0 0; }
.vb-aufruf .vb-knopf { display: inline-flex; align-items: center; gap: .55em; }
@media (max-width: 980px) {
  .vb-aufruf__bild { display: none; }
  .vb-aufruf__text { max-width: none; padding: 18px; }
  .vb-aufruf .vb-knopf { width: auto; }
}

/* ============================================================
   22. Anzeigenliste: Karte als Raster statt umflossenem Foto
   ------------------------------------------------------------
   Das Plugin laesst den Text um das Vorschaubild fliessen: auf
   dem Telefon begann die Beschreibung in einer schmalen Spalte
   neben dem Foto und sprang dann unter das Bild auf die ganze
   Breite. Jetzt feste Bereiche: Bild, Text, Zusatzangaben.
   ============================================================ */
#page-container .awpcp-listings .awpcp-listing-excerpt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "bild text" "bild zusatz";
  column-gap: clamp(12px, 1.6vw, 22px);
  row-gap: clamp(4px, .5vw, 7px);
  align-items: start;
}
#page-container .awpcp-listing-excerpt > .awpcp-listing-excerpt-thumbnail {
  grid-area: bild;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;   /* das Plugin setzt hier 50 % der Karte */
  max-width: 100%;
}
#page-container .awpcp-listing-excerpt > .awpcp-listing-excerpt-inner {
  grid-area: text;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#page-container .awpcp-listing-excerpt > .awpcp-listing-excerpt-extra {
  grid-area: zusatz;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(11px, 1.16vw, 15px);
  line-height: 1.55;
  color: var(--tinte-2);
}
#page-container .awpcp-listing-excerpt > .fixfloat,
#page-container .awpcp-listing-excerpt > span.fixfloat { display: none !important; }

/* 22.1 Telefon: Bild oben, darunter Text und Zusatzangaben.
   Das Bild bleibt bei seinen 240 px - groesser waere unscharf. */
@media (max-width: 600px) {
  #page-container .awpcp-listings .awpcp-listing-excerpt {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "bild" "text" "zusatz";
    row-gap: clamp(7px, 2vw, 11px);
  }
  #page-container img.awpcp-listing-primary-image-thumbnail {
    width: 240px !important;
    max-width: 100%;
  }
}

/* 22.2 Kategorieauswahl auf die Hoehe von Suchfeld und Knopf */
#page-container .awpcp-category-dropdown-container .select2-container--default .select2-selection--single {
  height: auto;
  min-height: 48px;
  display: flex;
  align-items: center;
  border: 1px solid var(--linie-2);
  border-radius: 0;
  background: var(--weiss);
}
#page-container .awpcp-category-dropdown-container .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 6px 34px 6px 12px;
  line-height: 1.35;
  color: var(--tinte);
}
#page-container .awpcp-category-dropdown-container .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0;
  right: 8px;
  height: 100%;
}
@media (max-width: 600px) {
  #page-container .awpcp-category-dropdown-container .select2-container--default .select2-selection--single { min-height: 44px; }
}

/* 22.3 Telefon: Menue der Anzeigenseiten enger und einspaltig */
@media (max-width: 600px) {
  #page-container .awpcp-classifieds-menu {
    gap: clamp(5px, 1.6vw, 8px) 14px;
    margin-bottom: clamp(10px, 3vw, 15px);
  }
  #page-container .awpcp-classifieds-menu li { flex: 1 1 100%; }
  #page-container .awpcp-classifieds-menu--menu-item-link { line-height: 1.3; }
  #page-container .awpcp-category-dropdown-container { margin-bottom: clamp(10px, 3vw, 15px); }
}

/* 22.4 Telefon: Bild und Menue linksbuendig wie der uebrige Inhalt */
@media (max-width: 600px) {
  #page-container .awpcp-listing-excerpt img.awpcp-listing-primary-image-thumbnail.centered,
  #page-container .awpcp-listing-excerpt img.awpcp-listing-primary-image-thumbnail {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #page-container .awpcp-classifieds-menu,
  #page-container .awpcp-classifieds-menu li,
  #page-container .awpcp-classifieds-menu--menu-item-link { text-align: left !important; }
}

/* ============================================================
   23. Einzelne Anzeige: Hintergrund, Suchzeile, Foto, Abstaende
   ------------------------------------------------------------
   Diese Seite benutzt nicht den Seitenbauer, deshalb kam der
   weisse Grundbereich des Themes durch. Dazu war das Suchfeld
   nur 22 px hoch (Knopf 48 px) und das Foto auf dem Tablet fast
   so breit wie die Seite.
   ============================================================ */
body.single-awpcp_listing #main-content,
body.single-awpcp_listing #content-area,
body.single-awpcp_listing #left-area,
body.awpcp-page-browse-listings #main-content { background: transparent !important; }

#page-container .awpcp-classifieds-search-bar input[type="text"],
#page-container .awpcp-classifieds-search-bar input[type="search"] {
  background: var(--weiss) !important;
  border: 1px solid var(--linie-2) !important;
  border-radius: 0 !important;
  padding: 10px 12px !important;
  height: auto !important;
  min-height: 48px;
  box-sizing: border-box;
  font-size: clamp(13px, 1.42vw, 17px);
}
#page-container .awpcp-classifieds-search-bar input[type="submit"] { min-height: 48px; }
@media (max-width: 600px) {
  #page-container .awpcp-classifieds-search-bar input[type="text"],
  #page-container .awpcp-classifieds-search-bar input[type="search"],
  #page-container .awpcp-classifieds-search-bar input[type="submit"] { min-height: 44px; }
  #page-container .awpcp-classifieds-search-bar { margin-bottom: clamp(8px, 2.4vw, 12px); }
}

/* 23.1 Tablet: Foto der Anzeige nicht ueber die halbe Seite */
@media (max-width: 980px) {
  body.single-awpcp_listing #showawpcpadpage .awpcp-ad-primary-image,
  body.single-awpcp_listing #showawpcpadpage img.thumbshow {
    float: none !important;
    margin: 0 0 clamp(14px, 2.4vw, 22px) 0 !important;
    width: auto !important;
    max-width: min(100%, 420px) !important;
    height: auto !important;
  }
}

/* 23.2 Hinweis zur verdeckten Telefonnummer */
.vb-telefonhinweis {
  margin: clamp(10px, 1.5vw, 16px) 0 clamp(8px, 1.2vw, 13px);
  padding: clamp(8px, 1.1vw, 12px) clamp(10px, 1.4vw, 15px);
  background: var(--band);
  border-left: 3px solid var(--gold);
  font-size: clamp(12px, 1.3vw, 16px);
  line-height: 1.45;
  color: var(--tinte);
  max-width: 52ch;
}

/* 23.3 Telefon: Menue der Anzeigenseiten ohne Eigenabstaende des Plugins */
@media (max-width: 600px) {
  #page-container .awpcp-classifieds-menu { margin-top: clamp(6px, 2vw, 10px); }
  #page-container .awpcp-classifieds-menu li { margin: 0 !important; padding: 0 !important; }
  #page-container .awpcp-classifieds-menu--menu-item-link,
  #page-container .awpcp-classifieds-menu a.button {
    padding: clamp(3px, 1vw, 5px) 0 !important;
    margin: 0 !important;
    display: inline-block;
  }
}

/* ============================================================
   24. Anmeldung: Beschriftungen, Passwort vergessen, Bildausschnitt
   ------------------------------------------------------------
   Vorher waren die Feldbeschriftungen nur fuer Screenreader da
   (Platzhalter verschwinden beim Tippen), der Verweis auf das
   Passwort war ausgeblendet, und das hochformatige Foto wurde
   mittig beschnitten - die Biene lag dadurch oberhalb des
   Ausschnitts.
   ============================================================ */
#page-container .vb-anmeldung .um .um-field-label {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  display: block;
  margin: 0 0 clamp(3px, .45vw, 6px);
}
#page-container .vb-anmeldung .um .um-field-label label {
  display: block;
  margin: 0;
  font-family: var(--schrift);
  font-size: clamp(11px, 1.16vw, 15px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--tinte-2);
}
#page-container .vb-anmeldung .um .um-col-alt .um-right.um-half {
  display: block;
  width: 100%;
  margin-top: clamp(8px, 1.1vw, 14px);
  text-align: left;
}
#page-container .vb-anmeldung .um .um-col-alt .um-right.um-half a { font-weight: 700; }
#page-container .vb-anmeldung__titel { margin-bottom: clamp(14px, 2vw, 24px); }
.vb-anmeldung:not(.vb-anmeldung--reg) .vb-anmeldung__bild img { object-position: 60% 32%; }

/* 24.1 Verweis "Passwort vergessen?" sichtbar und linksbuendig */
#page-container .vb-anmeldung .um .um-col-alt-b {
  text-align: left;
  margin-top: clamp(10px, 1.4vw, 16px);
}
#page-container .vb-anmeldung .um a.um-link-alt,
#page-container .vb-anmeldung .um .um-col-alt-b a {
  color: var(--gold-dunkel) !important;
  font-weight: 700;
  font-size: clamp(13px, 1.43vw, 17px);
  text-decoration: underline !important;
  text-underline-offset: 3px;
  display: inline-block;
}
#page-container .vb-anmeldung .um a.um-link-alt:hover { color: var(--tinte); }

/* ============================================================
   25. Registrierung: Abstaende und lesbarer Text am Haekchen
   ============================================================ */
#page-container .vb-anmeldung__unter { margin-bottom: clamp(14px, 2vw, 22px); }
#page-container .vb-anmeldung .um .um-field-checkbox-option,
#page-container .vb-anmeldung .um .um-field-type_checkbox label,
#page-container .vb-anmeldung .um .um-field-checkbox span,
#page-container .vb-anmeldung .um-field-checkbox-option,
#page-container .vb-anmeldung div.um-field-checkbox-option {
  color: var(--tinte) !important;
  line-height: 1.45;
}
#page-container .vb-anmeldung .um .um-field-type_checkbox {
  margin-top: clamp(16px, 2.2vw, 26px);
  margin-bottom: clamp(14px, 1.9vw, 22px);
}
#page-container .vb-anmeldung .um .um-col-alt { margin-top: clamp(14px, 1.9vw, 22px); }
.vb-anmeldung__hinweis { margin-top: clamp(16px, 2.2vw, 26px); }
@media (max-width: 980px) {
  #page-container .vb-anmeldung--reg .vb-vorteile,
  #page-container .vb-vorteile {
    margin-top: clamp(22px, 5vw, 30px) !important;
    padding-top: clamp(16px, 4vw, 22px);
    border-top: 1px solid var(--linie-2);
  }
}

/* 26. Schmale Bildschirme: Platz fuer den Pfeil neben langen Verweisen */
@media (max-width: 600px) {
  #page-container .vb-verweis {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
  }
  #page-container .vb-verweis > span:first-child { overflow-wrap: anywhere; }
}

/* ============================================================
   27. Bewegung II: abgestimmte Arten des Auftritts
   ------------------------------------------------------------
   Wie auf der Imkerei-Seite: kopf / bild / linie / karte.
   ============================================================ */
.hat-auftritt [data-auftritt="kopf"] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 500ms cubic-bezier(.22, .61, .36, 1) var(--auftritt-verzug, 0ms),
    transform 560ms cubic-bezier(.22, .61, .36, 1) var(--auftritt-verzug, 0ms);
}
.hat-auftritt [data-auftritt="bild"] {
  opacity: 0;
  transform: scale(1.022);
  transition:
    opacity 620ms cubic-bezier(.22, .61, .36, 1) var(--auftritt-verzug, 0ms),
    transform 780ms cubic-bezier(.16, .84, .44, 1) var(--auftritt-verzug, 0ms);
}
.hat-auftritt [data-auftritt="linie"] {
  opacity: 0;
  transform: scaleX(.02);
  transform-origin: left center;
  transition:
    opacity 220ms linear var(--auftritt-verzug, 0ms),
    transform 560ms cubic-bezier(.22, .61, .36, 1) var(--auftritt-verzug, 0ms);
}
.hat-auftritt [data-auftritt="karte"] {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 460ms cubic-bezier(.22, .61, .36, 1) var(--auftritt-verzug, 0ms),
    transform 520ms cubic-bezier(.22, .61, .36, 1) var(--auftritt-verzug, 0ms);
}
.hat-auftritt [data-auftritt="kopf"].ist-da,
.hat-auftritt [data-auftritt="bild"].ist-da,
.hat-auftritt [data-auftritt="linie"].ist-da,
.hat-auftritt [data-auftritt="karte"].ist-da {
  opacity: 1;
  transform: none;
}
.auftritt-sofort [data-auftritt] { transition: none !important; }

.vb-held__bild,
.vb-held-innen__bild,
.vb-anmeldung__bild,
.vb-aufruf__bild { overflow: hidden; }

/* 27.1 Mobiles Menue: ruhiges Oeffnen und Schliessen */
@media (max-width: 980px) {
  .hat-menue .vb-menue {
    transform: translate3d(0, -6px, 0);
    transition:
      max-height 320ms cubic-bezier(.22, .61, .36, 1),
      opacity 220ms ease,
      transform 300ms cubic-bezier(.22, .61, .36, 1),
      visibility 0s linear 320ms,
      padding 320ms cubic-bezier(.22, .61, .36, 1);
  }
  .hat-menue .vb-menue.ist-offen {
    transform: none;
    transition:
      max-height 360ms cubic-bezier(.22, .61, .36, 1),
      opacity 240ms ease 40ms,
      transform 340ms cubic-bezier(.22, .61, .36, 1),
      visibility 0s linear 0s,
      padding 360ms cubic-bezier(.22, .61, .36, 1);
  }
  .hat-menue .vb-menue a {
    opacity: 0;
    transform: translate3d(0, -4px, 0);
    transition: opacity 200ms ease, transform 240ms cubic-bezier(.22, .61, .36, 1);
  }
  .hat-menue .vb-menue.ist-offen a { opacity: 1; transform: none; }
  .hat-menue .vb-menue.ist-offen a:nth-child(1) { transition-delay: 60ms; }
  .hat-menue .vb-menue.ist-offen a:nth-child(2) { transition-delay: 100ms; }
  .hat-menue .vb-menue.ist-offen a:nth-child(3) { transition-delay: 140ms; }
  .hat-menue .vb-menue.ist-offen a:nth-child(n+4) { transition-delay: 175ms; }
}

/* 27.2 Pfeile und Verweise */
.vb-pfeil, .vb-pfeil-schraeg { transition: transform 220ms cubic-bezier(.3, .7, .3, 1); }
.vb-knopf:hover .vb-pfeil,
.vb-knopf:focus-visible .vb-pfeil,
.vb-verweis:hover .vb-pfeil-schraeg,
.vb-verweis:focus-within .vb-pfeil-schraeg { transform: translateX(4px) translateY(-1px); }
.vb-aufruf .vb-knopf:hover .vb-pfeil { transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
  .hat-auftritt [data-auftritt],
  .hat-auftritt [data-auftritt].ist-da {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hat-menue .vb-menue,
  .hat-menue .vb-menue a,
  .vb-pfeil, .vb-pfeil-schraeg { transition: none !important; }
}

/* 27.3 Verweis auf die Cookie-Einstellungen in der Datenschutzerklaerung */
.vb-cookie-verweis {
  display: inline-block;
  border-bottom: 1px solid var(--gold);
  font-weight: 700;
  color: var(--tinte);
  transition: color 170ms ease, border-color 170ms ease;
}
.vb-cookie-verweis:hover { color: var(--gold-dunkel); border-bottom-color: var(--gold-dunkel); }