/* ===== Eigene Schriften, vom eigenen Server geladen =====
   Keine Verbindung zu Google. Nur die benoetigten Zeichen, zusammen 22 KB. */
@font-face{font-family:'Vipada';font-style:normal;font-weight:400;font-display:swap;
  src:url('schriften/poppins-400.woff2') format('woff2');}
@font-face{font-family:'Vipada';font-style:normal;font-weight:500;font-display:swap;
  src:url('schriften/poppins-500.woff2') format('woff2');}
@font-face{font-family:'Vipada';font-style:normal;font-weight:600;font-display:swap;
  src:url('schriften/poppins-500.woff2') format('woff2');}
@font-face{font-family:'Vipada';font-style:normal;font-weight:700;font-display:swap;
  src:url('schriften/poppins-700.woff2') format('woff2');}
@font-face{font-family:'Vipada';font-style:normal;font-weight:800;font-display:swap;
  src:url('schriften/poppins-700.woff2') format('woff2');}

.vp{
  --papier:#F4EDDF;--papier-2:#EDE4D2;--tinte:#16150F;
  --wok:#0E4A40;--wok-2:#0A3830;--mango:#D97706;--nudel:#E9C46A;
  --text:#3B382D;--muted:#6E695A;--linie:#D8CDB6;--auf-dunkel:#DCD4C2;
  --display:'Vipada',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Vipada',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1180px;--navh:116px;--kante:3px;
  box-sizing:border-box;font-family:var(--body);color:var(--text);
  background:var(--papier);line-height:1.62;margin:0;
  -webkit-font-smoothing:antialiased;touch-action:manipulation;
}
.vp *,.vp *::before,.vp *::after{box-sizing:border-box;}
.vp blockquote,.vp figure,.vp dl,.vp dd{margin:0;}
.vp .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,52px);}
.vp.sec{padding-block:clamp(60px,7vw,110px);scroll-margin-top:var(--navh);}
.vp a:focus-visible,.vp button:focus-visible,.vp summary:focus-visible{outline:3px solid var(--mango);outline-offset:4px;}

/* ================= TYPOGRAFIE ================= */
.vp h1,.vp h2,.vp h3,.vp .display{font-family:var(--display);font-weight:800;color:var(--tinte);margin:0;font-optical-sizing:auto;}
.vp h1{font-size:clamp(2.2rem,6.2vw,4.3rem);line-height:1.02;letter-spacing:-.038em;}
.vp h2{font-size:clamp(1.75rem,3.8vw,2.7rem);line-height:1.1;letter-spacing:-.032em;}
.vp h3{font-size:1.24rem;line-height:1.16;letter-spacing:-.018em;margin-bottom:8px;}
.vp p{margin:14px 0 0;font-size:1.02rem;}
.vp .lead{font-size:clamp(1.06rem,1.3vw,1.22rem);line-height:1.62;max-width:54ch;}
.vp .marke{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:700;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--wok);margin:0 0 18px;}
.vp .marke::before{content:"";width:34px;height:10px;color:var(--mango);flex:0 0 auto;
  background-image:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 7px);}
.vp .kopf{margin-bottom:clamp(34px,4.4vw,58px);max-width:60ch;}
.vp .klein{font-size:.9rem;color:var(--muted);}
.vp strong{font-weight:700;color:var(--tinte);}

/* ================= SIGNATUR: FEHLDRUCK ================= */
/* Ein Farbblock sitzt versetzt hinter dem Element, wie eine verrutschte
   Druckfarbe. Ersetzt jeden weichen Schatten auf dieser Seite. */
.vp .versatz{position:relative;display:block;}
.vp .versatz::before{content:"";position:absolute;inset:0;background:var(--nudel);
  transform:translate(14px,14px);z-index:0;transition:transform .5s cubic-bezier(.16,1,.3,1);}
.vp .versatz > *{position:relative;z-index:1;}
.vp .versatz-wok::before{background:var(--wok);}
.vp .versatz-mango::before{background:var(--mango);}
.vp .versatz:hover::before{transform:translate(7px,7px);}

/* ================= BUTTONS ================= */
.vp .btn{position:relative;display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;
  color:var(--tinte);background:var(--mango);border:var(--kante) solid var(--tinte);
  padding:14px 26px;min-height:52px;text-decoration:none;
  box-shadow:6px 6px 0 var(--tinte);
  transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s cubic-bezier(.16,1,.3,1),background .18s;}
.vp .btn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--tinte);background:var(--nudel);}
.vp .btn:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--tinte);}
.vp .btn svg{transition:transform .22s cubic-bezier(.16,1,.3,1);}
.vp .btn:hover svg{transform:translateX(4px);}
.vp .btn-hell{background:transparent;color:var(--papier);border-color:var(--papier);box-shadow:6px 6px 0 var(--papier);}
.vp .btn-hell:hover{background:var(--papier);color:var(--tinte);box-shadow:3px 3px 0 var(--papier);}
.vp .btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:34px;}
/* Fehldruck-Puls: alle sieben Sekunden verrutscht die Druckfarbe kurz
   und faengt sich wieder. Nur am Hauptknopf, nicht in der Navigation. */
@media (prefers-reduced-motion:no-preference){
  .vp .btn-puls{animation:vpFehldruck 7s cubic-bezier(.16,1,.3,1) infinite;}
  .vp .btn-puls:hover,.vp .btn-puls:focus-visible{animation-play-state:paused;}
  @keyframes vpFehldruck{
    0%,76%,100%{box-shadow:6px 6px 0 var(--tinte);}
    80%{box-shadow:11px 4px 0 var(--nudel);}
    84%{box-shadow:2px 9px 0 var(--tinte);}
    88%{box-shadow:8px 5px 0 var(--tinte);}
    92%{box-shadow:5px 7px 0 var(--tinte);}
  }
}

/* ================= BEWERTUNGS-SIEGEL ================= */
.vp .siegel{display:inline-flex;align-items:center;gap:13px;margin-top:26px;
  background:var(--papier);border:2px solid var(--tinte);box-shadow:5px 5px 0 var(--tinte);
  padding:11px 17px;text-decoration:none;color:var(--tinte);
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s cubic-bezier(.16,1,.3,1);}
.vp .siegel:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--tinte);}
.vp .sterne{position:relative;display:inline-block;font-size:1.06rem;line-height:1;letter-spacing:.09em;color:var(--linie);}
.vp .sterne::before{content:"★★★★★";}
.vp .sterne::after{content:"★★★★★";position:absolute;left:0;top:0;width:var(--wert,90%);
  overflow:hidden;white-space:nowrap;color:var(--mango);}
.vp .siegel .wert{font-family:var(--display);font-weight:800;font-size:1.06rem;letter-spacing:-.02em;}
.vp .siegel .quelle{font-size:.84rem;color:var(--muted);line-height:1.3;}

/* ================= SPRUNGLINK ================= */
.vp.skip{position:absolute;left:-9999px;top:0;background:var(--tinte);color:var(--papier);padding:12px 18px;z-index:60;text-decoration:none;font-weight:700;}
.vp.skip:focus{left:0;}

/* ================= NAVIGATION ================= */
/* Nutzt onepage eine eigene Navigation: diesen Block und das <header> loeschen. */
.vp.nav{position:sticky;top:0;z-index:40;background:rgba(244,237,223,.86);backdrop-filter:blur(14px) saturate(130%);border-bottom:2px solid transparent;transition:background .35s,border-color .35s;}
.vp.nav.fest{background:var(--papier);border-bottom-color:var(--tinte);}
.vp.nav .nav-innen{max-width:var(--wrap);margin-inline:auto;padding:9px clamp(16px,4vw,52px);display:flex;align-items:center;gap:14px;min-height:var(--navh);}
.vp.nav .logo img{height:92px;width:auto;display:block;transition:height .35s cubic-bezier(.16,1,.3,1);}
.vp.nav.fest .logo img{height:76px;}
.vp.nav nav{display:none;margin-left:auto;gap:26px;}
.vp.nav nav a{position:relative;font-weight:600;font-size:.95rem;color:var(--tinte);text-decoration:none;white-space:nowrap;padding-block:4px;}
.vp.nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--mango);transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.16,1,.3,1);}
.vp.nav nav a:hover::after{transform:scaleX(1);}
.vp.nav .nav-cta{display:none;}
.vp.nav .burger{margin-left:auto;width:50px;height:50px;display:grid;place-items:center;background:var(--papier);border:var(--kante) solid var(--tinte);cursor:pointer;color:var(--tinte);box-shadow:4px 4px 0 var(--tinte);}
.vp.nav .burger svg{width:22px;height:22px;}
.vp.nav .burger .x{display:none;}
.vp.nav .burger[aria-expanded="true"] .x{display:block;}
.vp.nav .burger[aria-expanded="true"] .bars{display:none;}
.vp.nav .mobil{display:none;border-top:2px solid var(--tinte);padding:8px clamp(16px,4vw,52px) 22px;background:var(--papier);}
.vp.nav .mobil.offen{display:block;}
.vp.nav .mobil a{display:block;padding:15px 0;font-family:var(--display);font-weight:700;font-size:1.22rem;color:var(--tinte);text-decoration:none;border-bottom:1px solid var(--linie);}
.vp.nav .mobil .btn{margin-top:20px;width:100%;justify-content:center;border-bottom:var(--kante) solid var(--tinte);}
@media (min-width:980px){
  .vp.nav nav{display:flex;}
  .vp.nav .burger,.vp.nav .mobil{display:none !important;}
  .vp.nav .nav-cta{display:inline-flex;margin-left:24px;padding:11px 20px;min-height:46px;font-size:.94rem;box-shadow:4px 4px 0 var(--tinte);}
}

/* ================= START ================= */
.vp.hero{position:relative;overflow:hidden;background:var(--wok-2);padding-block:clamp(70px,9vw,130px);scroll-margin-top:var(--navh);}
.vp.hero .hero-bild{position:absolute;inset:0;z-index:0;background-image:url("bilder/hero.webp");background-size:cover;background-position:center 58%;}
.vp.hero .hero-bild::after{content:"";position:absolute;inset:0;background:
  linear-gradient(98deg,rgba(8,42,36,.95) 0%,rgba(8,42,36,.86) 46%,rgba(8,42,36,.34) 100%);}
@media (max-width:820px){.vp.hero .hero-bild::after{background:linear-gradient(180deg,rgba(8,42,36,.92),rgba(8,42,36,.8) 45%,rgba(8,42,36,.95));}}
.vp.hero .wrap{position:relative;z-index:1;}
.vp.hero h1{color:var(--papier);max-width:14ch;}
.vp.hero h1 em{font-style:normal;color:var(--nudel);}
.vp.hero .lead{color:rgba(244,237,223,.9);margin-top:24px;}
.vp.hero .marke{color:var(--nudel);}
.vp.hero .marke::before{color:var(--mango);}
.vp.hero .klein{color:rgba(244,237,223,.68);margin-top:24px;}

/* ================= SPALTEN ================= */
.vp .zwei{display:grid;gap:clamp(34px,4.5vw,72px);align-items:center;}
@media (min-width:980px){
  .vp .zwei{grid-template-columns:1fr .92fr;}
  .vp .zwei-dreh .bildblock{order:-1;}
}
.vp .bildblock img,.vp .bildblock video{width:100%;height:100%;object-fit:cover;display:block;}
.vp .bildblock-quadrat{aspect-ratio:1/1;}
.vp .bildblock{aspect-ratio:4/5;}
.vp .bildblock-quer{aspect-ratio:3/2;}

/* ================= KARTEN ================= */
.vp .raster{display:grid;gap:clamp(18px,2.2vw,26px);grid-template-columns:repeat(auto-fit,minmax(256px,1fr));}
.vp .karte{background:var(--papier-2);border:2px solid var(--tinte);padding:28px 26px;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1);}
.vp .karte:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--wok);}
.vp .karte p{font-size:.99rem;line-height:1.58;margin-top:6px;}
.vp .karte .nr{display:block;font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.14em;color:var(--mango);margin-bottom:14px;}

/* ================= LEISTUNGSLISTE ================= */
.vp .liste{list-style:none;margin:28px 0 0;padding:0;}
.vp .liste li{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--linie);font-size:1.02rem;line-height:1.55;}
.vp .liste li:first-child{border-top:1px solid var(--linie);}
.vp .liste svg{width:22px;height:22px;color:var(--wok);margin-top:3px;}

/* ================= ORTE ================= */
.vp .orte{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;list-style:none;}
.vp .orte li{font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.01em;
  padding:9px 16px;border:2px solid var(--tinte);background:var(--papier);color:var(--tinte);
  transition:transform .25s cubic-bezier(.16,1,.3,1),background .25s,box-shadow .25s;}
.vp .orte li:hover{transform:translate(-3px,-3px);background:var(--nudel);box-shadow:4px 4px 0 var(--tinte);}

/* ================= MARKTBRETT ================= */
.vp .brett{background:var(--wok);border:var(--kante) solid var(--tinte);padding:clamp(24px,3vw,38px);}
.vp .brett .brett-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border-bottom:2px solid rgba(244,237,223,.3);padding-bottom:14px;margin-bottom:8px;}
.vp .brett .brett-kopf span{font-family:var(--body);font-weight:700;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--nudel);}
.vp .brett dl{display:grid;grid-template-columns:auto 1fr;gap:0;}
.vp .brett dt{font-family:var(--display);font-weight:800;font-size:clamp(1.15rem,2vw,1.5rem);color:var(--papier);
  padding:15px 22px 15px 0;border-bottom:1px solid rgba(244,237,223,.18);white-space:nowrap;letter-spacing:-.02em;}
.vp .brett dd{margin:0;padding:17px 0;border-bottom:1px solid rgba(244,237,223,.18);color:var(--auf-dunkel);font-size:1rem;text-align:right;}
.vp .brett dt:last-of-type,.vp .brett dd:last-of-type{border-bottom:0;}
.vp .brett .brett-fuss{margin-top:18px;font-size:.92rem;color:rgba(244,237,223,.7);}

/* ================= GALERIE ================= */
.vp .galerie{display:grid;gap:clamp(18px,2.4vw,30px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.vp .galerie figure{margin:0;}
.vp .galerie .bild{aspect-ratio:4/3;overflow:hidden;}
.vp .galerie img{width:100%;height:100%;object-fit:cover;display:block;}
.vp .galerie figcaption{margin-top:20px;font-size:.96rem;color:var(--muted);line-height:1.5;}

/* ================= FAQ ================= */
.vp .faq{border-top:2px solid var(--tinte);}
.vp .faq details{border-bottom:1px solid var(--linie);}
.vp .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding-block:22px;font-family:var(--display);font-weight:700;font-size:clamp(1.1rem,1.7vw,1.32rem);letter-spacing:-.018em;color:var(--tinte);}
.vp .faq summary::-webkit-details-marker{display:none;}
.vp .faq summary span{flex:0 0 auto;width:30px;height:30px;border:2px solid var(--tinte);display:grid;place-items:center;transition:background .25s,transform .3s cubic-bezier(.16,1,.3,1);}
.vp .faq summary span svg{width:15px;height:15px;}
.vp .faq details[open] summary span{background:var(--mango);transform:rotate(135deg);}
.vp .faq p{margin:0 0 24px;font-size:1.01rem;line-height:1.68;max-width:66ch;}

/* ================= FORMULAR ================= */
.vp .form-zwei{display:grid;gap:clamp(30px,4vw,60px);align-items:start;}
@media (min-width:980px){.vp .form-zwei{grid-template-columns:1.25fr .75fr;}}
.vp .felder{display:grid;gap:18px;grid-template-columns:1fr;}
@media (min-width:620px){.vp .felder{grid-template-columns:1fr 1fr;}}
.vp .feld{display:flex;flex-direction:column;gap:8px;min-width:0;}
.vp .feld label{font-family:var(--body);font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nudel);}
.vp .feld input{font-family:var(--body);font-size:1rem;color:var(--tinte);background:var(--papier);
  border:2px solid var(--tinte);padding:14px 15px;min-height:54px;width:100%;
  transition:box-shadow .18s cubic-bezier(.16,1,.3,1),transform .18s cubic-bezier(.16,1,.3,1);}
.vp .feld input::placeholder{color:var(--muted);}
.vp .feld input:focus{outline:none;box-shadow:5px 5px 0 var(--mango);transform:translate(-2px,-2px);}
.vp .feld input:focus-visible{outline:none;}
.vp .einwilligung{display:flex;gap:14px;align-items:flex-start;margin-top:26px;font-size:.92rem;line-height:1.55;color:var(--auf-dunkel);cursor:pointer;min-height:44px;}
.vp .einwilligung input{width:24px;height:24px;flex:0 0 auto;margin-top:2px;accent-color:var(--mango);}
.vp .form-hinweis{margin-top:18px;font-size:.92rem;font-weight:700;color:var(--nudel);}
.vp .form-hinweis:empty{margin:0;}
.vp .direkt{border:2px solid rgba(244,237,223,.3);padding:26px 24px;}
.vp .direkt h3{margin-bottom:14px;}
.vp .direkt p{font-size:1rem;}
.vp .direkt .tel{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;color:var(--nudel);text-decoration:none;display:inline-block;margin-top:4px;}

/* ================= KONTAKT ================= */
.vp.kontakt{background:var(--tinte);}
.vp.kontakt h2,.vp.kontakt h3{color:var(--papier);}
.vp.kontakt p,.vp.kontakt .lead{color:var(--auf-dunkel);}
.vp.kontakt .marke{color:var(--nudel);}
.vp.kontakt .karte{background:transparent;border-color:rgba(244,237,223,.28);}
.vp.kontakt .karte:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--mango);}
.vp.kontakt a{color:var(--nudel);}

/* ================= FUSS ================= */
.vp.fuss{background:var(--tinte);padding-block:0 34px;}
.vp.fuss .wrap{display:flex;flex-wrap:wrap;gap:16px 30px;align-items:center;justify-content:space-between;border-top:1px solid rgba(244,237,223,.2);padding-top:28px;}
.vp.fuss p{margin:0;font-size:.88rem;color:var(--auf-dunkel);line-height:1.7;}
.vp.fuss nav{display:flex;gap:24px;}
.vp.fuss a{font-size:.88rem;color:var(--papier);text-decoration:none;opacity:.8;}
.vp.fuss a:hover{opacity:1;color:var(--nudel);}

/* ================= FLÄCHEN ================= */
.vp.papier{background:var(--papier);}
.vp.papier-2{background:var(--papier-2);}
.vp.wok{background:var(--wok);}
.vp.wok h2,.vp.wok h3{color:var(--papier);}
.vp.wok p,.vp.wok .lead{color:var(--auf-dunkel);}
.vp.wok .marke{color:var(--nudel);}
.vp.wok .liste li{border-color:rgba(244,237,223,.22);}
.vp.wok .liste svg{color:var(--nudel);}

/* ================= BEWEGUNG ================= */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth;}
  .vp.is-js .rv{opacity:0;transform:translateY(26px);filter:blur(10px);
    transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1),filter .95s cubic-bezier(.16,1,.3,1);}
  .vp.is-js .rv.in{opacity:1;transform:none;filter:blur(0);}
  .vp.is-js .raster .rv,.vp.is-js .galerie .rv,.vp.is-js .orte .rv{transition-delay:calc(var(--i,0)*80ms);}

  /* Bilder: Rahmen scharf, Motiv kommt aus der Unschaerfe */
  .vp.is-js .versatz.rv{filter:none;}
  .vp.is-js .versatz.rv img,.vp.is-js .versatz.rv video{transform:scale(1.1);filter:blur(14px);
    transition:transform 1.5s cubic-bezier(.16,1,.3,1),filter 1.1s cubic-bezier(.16,1,.3,1);}
  .vp.is-js .versatz.rv.in img,.vp.is-js .versatz.rv.in video{transform:none;filter:blur(0);}
  /* Der Farbblock schiebt sich erst nach dem Bild an seinen Platz */
  .vp.is-js .versatz.rv::before{transform:translate(0,0);opacity:0;
    transition:transform .8s cubic-bezier(.16,1,.3,1) .25s,opacity .5s ease .25s;}
  .vp.is-js .versatz.rv.in::before{transform:translate(14px,14px);opacity:1;}

  /* Hero: gestaffelter Auftritt */
  .vp.hero .wrap > *{opacity:0;filter:blur(14px);transform:translateY(24px);animation:vpAuf 1.05s cubic-bezier(.16,1,.3,1) forwards;}
  .vp.hero .wrap > *:nth-child(1){animation-delay:.1s}
  .vp.hero .wrap > *:nth-child(2){animation-delay:.22s}
  .vp.hero .wrap > *:nth-child(3){animation-delay:.36s}
  .vp.hero .wrap > *:nth-child(4){animation-delay:.5s}
  .vp.hero .wrap > *:nth-child(5){animation-delay:.62s}
  .vp.hero .wrap > *:nth-child(6){animation-delay:.72s}
  @keyframes vpAuf{to{opacity:1;filter:blur(0);transform:none;}}
  .vp.hero .hero-bild{animation:vpBild 1.9s cubic-bezier(.16,1,.3,1) forwards;}
  @keyframes vpBild{from{filter:blur(24px);transform:scale(1.14);}to{filter:blur(0);transform:scale(1);}}
}

/* ================= MOBIL ================= */
@media (max-width:768px){
  .vp{width:100vw !important;max-width:100vw !important;margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important;}
  /* Kopfleiste kleiner, sonst frisst das grosse Logo den halben Bildschirm */
  .vp{--navh:86px;}
  .vp.nav .logo img{height:66px;}
  .vp.nav.fest .logo img{height:56px;}
  /* Versetzte Farbbloecke duerfen nicht seitlich aus dem Bild laufen */
  .vp .versatz::before{transform:translate(9px,9px);}
  .vp.is-js .versatz.rv.in::before{transform:translate(9px,9px);}
  .vp.sec,.vp.hero{overflow-x:clip;}
  .vp .btn{box-shadow:5px 5px 0 var(--tinte);}
  /* Marktbrett: Ort unter den Tag statt daneben */
  .vp .brett dl{grid-template-columns:1fr;}
  .vp .brett dt{padding:16px 0 2px;border-bottom:0;font-size:1.22rem;}
  .vp .brett dd{padding:0 0 16px;text-align:left;color:var(--nudel);}
  .vp .brett dt:last-of-type{border-bottom:0;}
}
@media (max-width:460px){
  /* Knoepfe untereinander in voller Breite, damit nichts abgeschnitten wird */
  .vp .btns{gap:14px;}
  .vp .btns .btn{width:100%;justify-content:center;}
  .vp h1{font-size:clamp(2.3rem,10vw,3rem);}
}

/* ================= EINWILLIGUNGS-BANNER ================= */
.vp-consent{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:clamp(12px,2vw,20px);
  display:none;justify-content:center;pointer-events:none;}
.vp-consent.an{display:flex;}
.vp-consent .box{pointer-events:auto;width:min(680px,100%);background:var(--papier);
  border:var(--kante) solid var(--tinte);box-shadow:8px 8px 0 var(--tinte);
  padding:clamp(20px,2.6vw,30px);max-height:84vh;overflow-y:auto;}
.vp-consent h2{font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1.15;
  letter-spacing:-.025em;color:var(--tinte);margin:0 0 10px;}
.vp-consent p{margin:0;font-size:.95rem;line-height:1.6;color:var(--text);}
.vp-consent p a{color:var(--wok);}
.vp-consent .knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}
.vp-consent .knoepfe .btn{flex:1 1 200px;justify-content:center;font-size:.97rem;padding:13px 20px;min-height:50px;}
.vp-consent .mehr{margin-top:14px;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--body);font-weight:700;font-size:.9rem;color:var(--wok);text-decoration:underline;
  text-underline-offset:3px;}
.vp-consent .mehr:hover{color:var(--mango);}
.vp-consent .wahl{display:none;margin-top:22px;border-top:2px solid var(--tinte);padding-top:6px;}
.vp-consent .wahl.auf{display:block;}
.vp-consent .zeile{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--linie);}
.vp-consent .zeile:last-child{border-bottom:0;}
.vp-consent .zeile h3{font-family:var(--display);font-weight:700;font-size:1rem;margin:0 0 4px;color:var(--tinte);}
.vp-consent .zeile p{font-size:.9rem;}
.vp-consent .schalter{flex:0 0 auto;margin-top:2px;}
.vp-consent .schalter input{width:24px;height:24px;accent-color:var(--mango);cursor:pointer;}
.vp-consent .schalter input:disabled{opacity:.45;cursor:not-allowed;}

/* Dauerhaft erreichbares Symbol unten links */
.vp-consent-knopf{position:fixed;left:14px;bottom:14px;z-index:60;width:46px;height:46px;
  display:none;place-items:center;background:var(--papier);border:2px solid var(--tinte);
  box-shadow:4px 4px 0 var(--tinte);cursor:pointer;color:var(--tinte);
  transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s cubic-bezier(.16,1,.3,1);}
.vp-consent-knopf.an{display:grid;}
.vp-consent-knopf:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--tinte);background:var(--nudel);}
.vp-consent-knopf svg{width:22px;height:22px;}
@media (max-width:768px){
  .vp-consent-knopf{left:10px;bottom:10px;width:42px;height:42px;}
  .vp-consent .knoepfe .btn{flex:1 1 100%;}
}

/* Spam-Falle: fuer Menschen unsichtbar, fuer Bots ausfuellbar */
.vp .honig{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}