:root{
  /* Palette from hero + smoke (deep black · violet/lilac · pearl-pink) */
  --ink:#000000;
  --ink-soft:#07060c;
  --violet-deep:#14101c;
  --violet-smoke:#2a2236;
  --lilac:#9a86b8;
  --lilac-soft:#c4b4d8;
  --pearl:#f0e8f4;
  --pearl-pink:#ead4e4;
  --pink-glow:rgba(255,170,210,.28);
  --violet-glow:rgba(140,80,220,.30);
  --violet-glow-soft:rgba(160,110,230,.18);
  --glass-hi:rgba(240,228,244,.16);
  --glass-mid:rgba(200,180,220,.07);
  --glass-lo:rgba(255,255,255,.03);
  --border:rgba(230,210,245,.22);
  --border-strong:rgba(240,220,250,.34);
  --text:#cfc6d8;
  --text-dim:#b5a8c4;
  --text-hi:#f3ecf7;
  --accent-line:rgba(220,170,230,.34);
  --radius:24px;
  --font-display:'Tenor Sans',sans-serif;
  --font-body:Manrope,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{font-family:var(--font-body);color:var(--text);background:var(--ink);line-height:1.65;font-weight:400;min-height:100%}
/* Fixed smoke behind scrolling content (all pages) */
.smoke{position:fixed;inset:0;z-index:-2;pointer-events:none;background:var(--ink) url(img/smoke-bg.webp) center bottom/cover no-repeat}
.smoke::after{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse 95% 70% at 50% 100%,transparent 30%,rgba(0,0,0,.55) 78%,#000 100%),
  linear-gradient(180deg,rgba(0,0,0,.28) 0%,transparent 20%,transparent 72%,rgba(0,0,0,.48) 100%);pointer-events:none}
a{color:inherit;text-decoration:none}
h1,h2,h3{color:var(--text-hi);letter-spacing:-.02em;line-height:1.15;font-family:var(--font-display);font-weight:400}
h1{font-size:clamp(2.3rem,5vw,4rem)}h1 br{display:block}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:1rem}h3{font-size:1.15rem}
p+p{margin-top:.8rem}
.eyebrow{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--lilac-soft);margin-bottom:1rem;font-weight:600}

/* Smooth frosted glass — no noise/grain; tinted to violet/pearl */
.glass{position:relative;background:
  radial-gradient(70% 80% at var(--px,10%) var(--py,110%),var(--pink-glow),transparent 60%),
  radial-gradient(65% 70% at var(--vx,92%) var(--vy,-8%),var(--violet-glow),transparent 62%),
  linear-gradient(145deg,var(--glass-hi),var(--glass-mid) 42%,var(--glass-lo));
  backdrop-filter:blur(28px) saturate(165%);-webkit-backdrop-filter:blur(28px) saturate(165%);
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,240,255,.26),inset 0 -1px 0 rgba(160,100,220,.08);
  overflow:hidden}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,240,255,.11),transparent 42%);opacity:.7}
.glass:nth-child(2n){--px:95%;--py:105%;--vx:8%;--vy:-5%}
.glass:nth-child(3n){--px:50%;--py:118%;--vx:100%;--vy:18%}
.card{padding:clamp(1.5rem,3vw,2.5rem)}

.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);width:min(1200px,calc(100% - 32px));z-index:10;display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem .8rem 1.6rem;border-radius:20px;overflow:visible}
.nav.glass{background:
  radial-gradient(40% 140% at 0 50%,var(--violet-glow-soft),transparent 70%),
  linear-gradient(135deg,rgba(240,228,244,.12),rgba(255,255,255,.04))}
.logo{color:var(--pearl);font-weight:300;font-size:1.25rem;letter-spacing:.04em}.logo span{margin:0;font-weight:300}.logo b{font-weight:700}
nav{display:flex;gap:1.6rem;align-items:center;font-size:.9rem;color:var(--lilac-soft)}nav a:hover{color:var(--pearl)}
.pill{padding:.55rem 1.2rem;border-radius:999px;background:rgba(255,220,240,.10);border:1px solid var(--border-strong);color:var(--pearl)}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;padding:0;border-radius:14px}.burger i{display:block;height:2px;width:18px;margin:3.5px auto;background:var(--pearl);border-radius:2px;transition:.3s}

/* Hero: cat photo only on index top — keep ears (bias top/right) */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:120px max(5vw,16px) 60px;position:relative}
.bg{position:absolute;inset:0;height:100vh;z-index:-1;
  /* Scroll-zoom via JS transform; own layer so iOS toolbar cannot restage the photo */
  transform:translate3d(0,0,0) scale3d(1,1,1);transform-origin:78% 18%;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  will-change:transform;
  background:
    linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.05) 82%,rgba(7,6,12,.28) 92%,var(--ink) 100%),
    url(img/hero-1920.webp) 78% 18%/cover no-repeat;
  /* Fade only near bottom edge — below chest/necklace so face stays clear */
  -webkit-mask:linear-gradient(#000 0%,#000 88%,rgba(0,0,0,.9) 92%,rgba(0,0,0,.4) 96%,transparent 100%);
  mask:linear-gradient(#000 0%,#000 88%,rgba(0,0,0,.9) 92%,rgba(0,0,0,.4) 96%,transparent 100%);
  pointer-events:none}
.heroc{max-width:560px}.lead{font-size:1.1rem;margin:1.2rem 0 2rem;max-width:30em;color:var(--lilac-soft)}
.btns{display:flex;gap:.8rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.85rem 1.7rem;border-radius:999px;border:1px solid var(--border-strong);color:var(--pearl);font:600 .92rem var(--font-body);background:rgba(255,255,255,.07);cursor:pointer;transition:.25s}
.btn:hover{background:rgba(255,230,250,.16)}.primary{background:linear-gradient(135deg,rgba(236,210,255,.94),rgba(255,190,220,.90));color:#160e1c;border-color:rgba(255,240,255,.40)}.primary:hover{filter:brightness(1.05)}

.wrap{width:min(1200px,calc(100% - 32px));margin:0 auto 5rem;position:relative}
.grid2{display:grid;grid-template-columns:1.1fr 1fr;gap:1.5rem}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;list-style:none}
.head{margin-bottom:1.5rem}.slim h2{margin:0}.slim p{margin-top:.6rem}
.promise{list-style:none;display:grid;gap:1.1rem}.promise li{padding-left:1.2rem;border-left:1px solid var(--accent-line)}.promise b{display:block;color:var(--text-hi);font-weight:600}
.cat{padding:12px 12px 1.2rem}
.ph{aspect-ratio:4/5;border-radius:16px;background:center/cover no-repeat;position:relative;margin-bottom:1rem;filter:grayscale(.08) contrast(1.04)}
.ph span{position:absolute;top:10px;left:10px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px;background:rgba(0,0,0,.5);backdrop-filter:blur(10px);color:var(--pearl)}
.cat h3,.cat p{padding:0 .5rem}.cat p{font-size:.9rem}
.price h3{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--lilac-soft)}.amt{font-size:2.2rem;color:var(--text-hi);font-weight:300;margin:.6rem 0 .4rem}
.hi{background:
  radial-gradient(70% 70% at 50% 110%,rgba(255,140,200,.30),transparent 70%),
  radial-gradient(60% 60% at 0 0,rgba(140,70,255,.26),transparent 70%),
  linear-gradient(145deg,rgba(255,240,255,.16),rgba(255,255,255,.04))}
.steps span{font-size:2.4rem;font-weight:200;color:rgba(200,170,240,.42);display:block;margin-bottom:.6rem}.steps h3{margin-bottom:.4rem}
.contact{margin-top:1.5rem;color:var(--text-hi)}.contact a{border-bottom:1px solid rgba(230,200,255,.30)}
.form{display:grid;gap:1rem}.form label{display:grid;gap:.35rem;font-size:.8rem;letter-spacing:.06em;color:var(--lilac-soft)}
input,select,textarea{font:inherit;font-size:.95rem;color:var(--pearl);background:rgba(0,0,0,.38);border:1px solid var(--border);border-radius:14px;padding:.75rem 1rem;outline:none}
input:focus,textarea:focus,select:focus{border-color:rgba(220,170,255,.72)}select option{color:#222}
.demo{position:absolute;top:16px;right:16px;font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;padding:.25rem .6rem;border-radius:999px;border:1px dashed rgba(255,220,255,.42)}
.note{font-size:.85rem;min-height:1em}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.85rem;padding:1.4rem 2rem}.foot a:hover{color:var(--pearl)}
@media(max-width:960px){.grid4{grid-template-columns:repeat(2,1fr)}.grid3,.grid2{grid-template-columns:1fr}}
@media(max-width:820px){.burger{display:block}
nav{position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:.6rem;border-radius:20px;background:rgba(8,6,14,.92);backdrop-filter:blur(48px) saturate(170%);-webkit-backdrop-filter:blur(48px) saturate(170%);border:1px solid rgba(230,210,245,.28);display:none}
nav a{padding:.8rem 1rem}.open nav{display:flex}.open .burger i:first-child{transform:translateY(5.5px) rotate(45deg)}.open .burger i:last-child{transform:translateY(-5.5px) rotate(-45deg)}
.hero{align-items:flex-start;justify-content:flex-end;padding:96px 16px 28px;min-height:100svh}
.bg{height:100svh;min-height:100svh;transform-origin:90% 8%;
  background:
  linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.05) 18%,rgba(0,0,0,0) 32%,rgba(0,0,0,0) 70%,rgba(0,0,0,.5) 90%,#000 100%),
  /* 58svh — photo size independent of toolbar-driven height flicker */
  url(img/hero-960.webp) 90% 8%/auto 58svh no-repeat,#000;
  /* Mobile: fade only at bottom edge into smoke */
  -webkit-mask:linear-gradient(#000 0%,#000 82%,rgba(0,0,0,.65) 92%,transparent 100%);
  mask:linear-gradient(#000 0%,#000 82%,rgba(0,0,0,.65) 92%,transparent 100%)}
.side-logo{margin-bottom:12px}
.heroc{padding:1.15rem 1.2rem 1.25rem;margin-top:auto}.heroc h1{font-size:1.85rem}.heroc .lead{margin:.5rem 0 1rem;font-size:.95rem}}
@media(max-width:520px){.grid4{grid-template-columns:1fr 1fr;gap:.8rem}.steps{grid-template-columns:1fr}.cat h3{font-size:1rem}}
nav{gap:1.3rem}.act{color:var(--pearl);border-bottom:1px solid rgba(230,190,255,.55)}
.subpage .bg{display:none}.sub{padding-top:120px}
.tag{display:inline-block;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;padding:.2rem .6rem;border-radius:999px;border:1px dashed rgba(255,220,255,.45);color:var(--pearl);margin-right:.4rem;vertical-align:2px}
.masonry{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.2rem}.gi{margin:0;padding:8px;border-radius:20px}.gi img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center center;display:block;border-radius:14px;transition:.4s;filter:saturate(.92)}.gi:hover img{transform:scale(1.03);filter:none}.gi a{display:block;overflow:hidden;border-radius:14px}
.lb{position:fixed;inset:0;z-index:50;display:none;place-items:center;background:rgba(0,0,0,.78);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.lb.on{display:grid}.lb img{max-width:90vw;max-height:85vh;border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.6)}.lb button{position:absolute;top:20px;right:28px;background:none;border:0;color:var(--pearl);font-size:2.4rem;cursor:pointer}
.revs{margin-bottom:1.5rem}.rev{padding:12px 12px 1.5rem}.rev img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:16px;margin-bottom:1rem}.rev>div{padding:0 .8rem}.ab{position:absolute;top:22px;left:22px;background:rgba(0,0,0,.5);backdrop-filter:blur(8px)}
.stars{color:var(--pearl-pink);letter-spacing:.15em;margin-bottom:.5rem}blockquote{font-size:.95rem;color:var(--text)}.who{margin-top:1rem;font-size:.85rem}.who b{color:var(--text-hi);font-weight:600}
.cta{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}.cta h2{margin-bottom:.4rem}
@media(max-width:1100px){nav{gap:.9rem;font-size:.82rem}}
.side-logo{width:132px;height:132px;padding:14px;border-radius:26px;display:grid;place-items:center;margin-bottom:18px}
.side-logo img{max-width:100%;max-height:100%;object-fit:contain;opacity:.9;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
@media(max-width:820px){.side-logo{width:80px;height:80px;padding:9px;border-radius:18px;margin-bottom:10px}}
.gal-banner{padding:8px;border-radius:20px;margin:0 0 1.5rem;overflow:hidden}
.gal-banner img{width:100%;height:auto;aspect-ratio:2.2/1;object-fit:cover;object-position:center center;display:block;border-radius:14px;filter:saturate(.95)}
@media(max-width:820px){.masonry{grid-template-columns:repeat(2,1fr);gap:1rem}}
.bullets{list-style:none;display:grid;gap:.7rem;margin-top:.4rem}
.bullets li{padding-left:1.15rem;position:relative;color:var(--text)}
.bullets li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;border-radius:50%;background:rgba(210,160,240,.70)}
.inline-link{color:var(--text-hi);border-bottom:1px solid rgba(220,180,240,.40)}
.inline-link:hover{color:#fff}
#warum h3,#gesundheit h3,#zucht h3,#abgabe h3{margin-bottom:.7rem;color:var(--text-hi)}
.breed-notice{display:none;margin-top:.85rem;padding:1rem 1.1rem;border-radius:16px;border:1px solid rgba(255,180,220,.30);background:rgba(0,0,0,.40);color:var(--pearl);font-size:.92rem;line-height:1.5}
.breed-notice.on{display:block}
.price.breed-card{cursor:pointer;transition:.25s}.price.breed-card:focus-within,.price.breed-card:hover{outline:1px solid rgba(210,170,255,.40)}

/* Mobile: opaque sticky header + nav so page text doesn't show through (Safari-safe solid fill) */
@media(max-width:900px){
  .glass{
    background:
      radial-gradient(70% 80% at var(--px,10%) var(--py,110%),rgba(255,170,210,.12),rgba(14,10,22,0) 60%),
      radial-gradient(65% 70% at var(--vx,92%) var(--vy,-8%),rgba(140,80,220,.14),rgba(14,10,22,0) 62%),
      linear-gradient(145deg,rgba(18,12,28,.92),rgba(10,8,18,.90));
    backdrop-filter:blur(28px) saturate(150%);
    -webkit-backdrop-filter:blur(28px) saturate(150%);
  }
  .hi{
    background:
      radial-gradient(70% 70% at 50% 110%,rgba(255,140,200,.18),rgba(14,10,22,0) 70%),
      radial-gradient(60% 60% at 0 0,rgba(140,70,255,.16),rgba(14,10,22,0) 70%),
      linear-gradient(145deg,rgba(24,14,36,.94),rgba(12,9,22,.92));
  }
  /* Full-bleed top on mobile — no 16px gap / corner peeks over scrolled text */
  header.nav,
  .nav{
    top:0!important;
    left:0!important;
    right:0!important;
    transform:none!important;
    width:100%!important;
    border-radius:0 0 18px 18px!important;
    padding:.85rem 1rem .85rem 1.25rem!important;
  }
  /* Single near-opaque fill — avoid multi transparent gradients (iOS Safari bleed) */
  header.nav.glass,
  .nav.glass{
    background:rgba(10,8,16,.95)!important;
    background-image:linear-gradient(135deg,rgba(170,110,230,.14),rgba(10,8,16,.95) 42%,rgba(8,6,14,.97))!important;
    backdrop-filter:blur(48px) saturate(175%)!important;
    -webkit-backdrop-filter:blur(48px) saturate(175%)!important;
    border-color:rgba(230,210,245,.34)!important;
    border-top:0!important;
    box-shadow:0 14px 44px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,240,255,.16)!important;
  }
  .nav.glass::before{
    content:""!important;
    position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
    background:rgba(8,6,14,.72)!important;
    opacity:1!important;
  }
  .nav.glass > *{position:relative;z-index:1}
  header.nav nav,
  .nav > nav,
  #menu,
  .open nav{
    background:rgba(8,6,14,.96)!important;
    background-image:linear-gradient(180deg,rgba(140,90,210,.12),rgba(8,6,14,.96) 35%)!important;
    backdrop-filter:blur(48px) saturate(175%)!important;
    -webkit-backdrop-filter:blur(48px) saturate(175%)!important;
    border:1px solid rgba(230,210,245,.32)!important;
    box-shadow:0 22px 56px rgba(0,0,0,.78)!important;
  }
}


/* ===== v41: Navigation – gleitende Hervorhebung ===== */
#menu{position:relative}
.nav-ind{position:absolute;left:0;top:0;width:0;height:0;border-radius:999px;pointer-events:none;opacity:0;z-index:0;
  background:linear-gradient(135deg,rgba(236,210,255,.16),rgba(255,190,220,.08));border:1px solid rgba(230,200,255,.28);
  box-shadow:0 0 18px rgba(170,110,240,.22),inset 0 1px 0 rgba(255,240,255,.18);
  transition:transform .45s cubic-bezier(.22,.9,.24,1),width .45s cubic-bezier(.22,.9,.24,1),height .3s,opacity .3s}
@media(min-width:821px){
  #menu a{position:relative;z-index:1;padding:.42rem .7rem;border-radius:999px;transition:color .25s}
  #menu{gap:.2rem}
  #menu a.act{border-bottom:0}
  #menu a.pill{margin-left:.5rem;padding:.55rem 1.2rem}
}
@media(max-width:1100px) and (min-width:821px){#menu a{padding:.38rem .45rem}#menu{font-size:.8rem}}
@media(max-width:820px){.nav-ind{display:none}}

/* ===== Formulare ===== */
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form fieldset{border:0;display:grid;gap:.6rem}
.form legend{font-size:.8rem;letter-spacing:.06em;color:var(--lilac-soft);margin-bottom:.4rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips label{display:inline-flex;flex-direction:row;align-items:center;gap:.45rem;padding:.45rem .85rem;border-radius:999px;border:1px solid var(--border);background:rgba(0,0,0,.28);font-size:.85rem;letter-spacing:0;color:var(--text);cursor:pointer;transition:.2s}
.chips label:has(input:checked){border-color:rgba(230,190,255,.7);background:rgba(190,140,255,.16);color:var(--pearl)}
.chips input{accent-color:#c9a2ff;margin:0}
.chips .dot{width:14px;height:14px;border-radius:4px;display:inline-block;border:1px solid rgba(255,255,255,.25)}
.check{display:flex!important;flex-direction:row!important;gap:.6rem!important;align-items:flex-start;font-size:.82rem!important;letter-spacing:0!important}
.check input{margin-top:.2rem;accent-color:#c9a2ff}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.ok-msg{display:none;padding:1.4rem;border-radius:16px;border:1px solid rgba(200,240,210,.35);background:rgba(40,80,60,.25);color:var(--pearl)}
.ok-msg.on{display:block}
.err{color:#ffb4c6}
.small{font-size:.82rem;color:var(--lilac-soft)}
.import-note{display:none;padding:.8rem 1rem;border-radius:14px;border:1px dashed rgba(230,190,255,.5);background:rgba(170,110,240,.10);font-size:.85rem;color:var(--pearl)}
.import-note.on{display:block}
.drop{display:grid;place-items:center;gap:.3rem;padding:1.4rem;border:1px dashed rgba(230,200,255,.4);border-radius:16px;background:rgba(0,0,0,.25);text-align:center;cursor:pointer;color:var(--lilac-soft);font-size:.85rem;transition:.2s}
.drop:hover,.drop.over{border-color:rgba(230,200,255,.8);background:rgba(170,110,240,.10)}
.drop b{color:var(--pearl);font-size:.95rem}
.drop input{display:none}
.thumbs{display:flex;flex-wrap:wrap;gap:.5rem}
.thumbs img{width:72px;height:72px;object-fit:cover;border-radius:12px;border:1px solid var(--border)}
.wait-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:1.5rem;align-items:start}
@media(max-width:900px){.wait-grid{grid-template-columns:1fr}.form .row2{grid-template-columns:1fr}}

/* ===== Farb-Konfigurator ===== */
.cfg{display:grid;grid-template-columns:1.05fr 1fr;gap:1.5rem;align-items:start}
.cfg-stage{position:sticky;top:100px;text-align:center;padding:2rem 1.5rem 1.5rem}
.cfg-glow{position:absolute;inset:10% 15% 25%;background:radial-gradient(closest-side,rgba(170,110,240,.30),rgba(255,160,210,.10) 60%,transparent);filter:blur(10px);pointer-events:none}
.cat-svg{position:relative;width:min(100%,420px);height:auto;display:block;margin:0 auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.cat-svg .coat,.cat-svg .coat *{transition:fill .5s,color .5s}
.cat-svg stop{transition:stop-color .5s}
.cat-svg .lay-point,.cat-svg .lay-tabby,.cat-svg .lay-smoke{opacity:0;transition:opacity .5s}
.cat-svg[data-point="1"] .lay-point{opacity:1}
.cat-svg[data-pattern="tabby"] .lay-tabby{opacity:.8}
.cat-svg[data-pattern="ghost"] .lay-tabby{opacity:.22}
.cat-svg[data-pattern="smoke"] .lay-smoke{opacity:1}
.cfg-name{font-family:var(--font-head,inherit);font-size:1.5rem;color:var(--pearl);margin-top:.6rem;letter-spacing:.02em}
.cfg-hint{font-size:.78rem;color:var(--lilac-soft);max-width:30em;margin:.6rem auto 0;opacity:.8}
.cfg-panel{display:grid;gap:1rem}
.cfg-group h3{margin-bottom:.9rem;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--lilac-soft)}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:.9rem}
.opt{display:grid;justify-items:center;gap:.35rem;text-align:center}
.opt .sw{width:58px;height:58px;border-radius:14px;border:1px solid rgba(255,255,255,.22);cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 16px rgba(0,0,0,.4);transition:transform .2s,box-shadow .2s,outline-color .2s;outline:2px solid transparent;outline-offset:3px}
.opt .sw:hover{transform:translateY(-2px)}
.opt.on .sw{outline-color:rgba(236,200,255,.9);box-shadow:0 0 22px rgba(190,130,255,.45),inset 0 1px 0 rgba(255,255,255,.3)}
.opt .on-name{font-size:.85rem;color:var(--text-hi);cursor:pointer;line-height:1.25}
.opt.on .on-name{color:var(--pearl);font-weight:600}
.opt .desc{font-size:.72rem;color:var(--lilac-soft);line-height:1.35}
.opt .fav{display:flex;align-items:center;gap:.3rem;font-size:.72rem;color:var(--lilac-soft);cursor:pointer}
.opt .fav input{accent-color:#c9a2ff}
.cfg-sum{display:grid;gap:.8rem}
#optPattern{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
@media(max-width:900px){.cfg{grid-template-columns:1fr}.cfg-stage{position:relative;top:0}.cat-svg{width:min(78%,340px)}.opts{grid-template-columns:repeat(3,1fr)}#optPattern{grid-template-columns:repeat(2,1fr)}}

/* ===== Rasse-Abschnitt ===== */
.breed-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:1.5rem}
.breed-grid blockquote{font-family:var(--font-head,inherit);font-size:1.45rem;line-height:1.35;color:var(--pearl);border-left:2px solid rgba(220,170,255,.55);padding-left:1rem;margin:1rem 0 1.2rem}
.traits{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.traits li{padding:1rem 1.1rem;border-radius:16px;background:rgba(0,0,0,.22);border:1px solid var(--border)}
.traits b{display:block;color:var(--text-hi);margin-bottom:.25rem}
.traits span{font-size:.88rem}
@media(max-width:900px){.breed-grid,.traits{grid-template-columns:1fr}}

/* ===== Kundenstimmen live ===== */
.rev .photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:6px;margin-bottom:1rem}
.rev .photos img{margin:0;aspect-ratio:1}
.rev .photos img:first-child:nth-last-child(1){aspect-ratio:4/5}

/* ===== Admin ===== */
.tabs{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}
.tab{padding:.6rem 1.2rem;border-radius:999px;border:1px solid var(--border);background:rgba(0,0,0,.3);color:var(--lilac-soft);cursor:pointer;font:600 .88rem var(--font-body)}
.tab.on{background:rgba(190,140,255,.18);border-color:rgba(230,190,255,.6);color:var(--pearl)}
.tab .n{display:inline-block;min-width:1.4em;margin-left:.4rem;padding:0 .4em;border-radius:999px;background:rgba(255,180,220,.25);font-size:.75rem}
.adm-list{display:grid;gap:1rem}
.adm-item{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:start;padding:1.2rem}
.adm-item .photos{display:flex;gap:6px;flex-wrap:wrap;margin-top:.6rem}
.adm-item .photos img{width:84px;height:84px;object-fit:cover;border-radius:10px}
.adm-item h3{font-size:1rem;margin-bottom:.3rem}
.adm-item dl{display:grid;grid-template-columns:auto 1fr;gap:.25rem .9rem;font-size:.86rem;margin-top:.5rem}
.adm-item dt{color:var(--lilac-soft)}.adm-item dd{color:var(--text-hi)}
.adm-actions{display:grid;gap:.45rem;justify-items:stretch;min-width:170px}
.adm-actions .btn{padding:.55rem 1rem;font-size:.82rem;text-align:center}
.adm-actions select{padding:.5rem .8rem;font-size:.85rem}
.badge{display:inline-block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .6rem;border-radius:999px;border:1px solid var(--border);margin-left:.4rem;vertical-align:2px}
.badge.pending,.badge.neu{border-color:rgba(255,210,150,.6);color:#ffe0b0}
.badge.approved,.badge.reserviert,.badge.abgeschlossen{border-color:rgba(160,240,190,.6);color:#c8f5d6}
.badge.rejected,.badge.abgesagt{border-color:rgba(255,150,170,.6);color:#ffc0cc}
.sel{width:20px;height:20px;accent-color:#c9a2ff;margin-top:.2rem}
.bulk{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.login{max-width:420px;margin:0 auto}
@media(max-width:900px){.adm-item{grid-template-columns:auto 1fr}.adm-actions{grid-column:1/-1;grid-template-columns:1fr 1fr}}
/* v41 extras */
.import-note{display:none}.import-note.on{display:block}
.linkbtn{background:none;border:0;color:var(--pink,#f3b6d6);text-decoration:underline;cursor:pointer;font:inherit;padding:0 .3rem}
.drop.over{border-color:rgba(255,180,220,.7);background:rgba(255,180,220,.08)}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:.3rem .9rem;margin:.6rem 0;font-size:.92rem}
.kv dt{color:var(--lilac-soft)}.kv dd{margin:0}
.adm-meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.badge.w{background:rgba(180,150,255,.18)}
#liveReviews{margin-bottom:1.5rem}#liveReviews[hidden]{display:none}
[hidden]{display:none!important}
#bewerten{align-items:start}
.adm-item .adm-actions{display:flex!important;flex-wrap:wrap;gap:.5rem;margin-top:.8rem;align-items:center}.adm-item .adm-actions .btn{width:auto;padding:.55rem 1.1rem}
/* Hero-Headline: eigene, schmale Schrift (lokal eingebunden) */

/* Local body/display fonts (no Google Fonts) – OFL */
@font-face{font-family:'Tenor Sans';src:url(fonts/tenor-sans.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url(fonts/manrope-300.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url(fonts/manrope-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url(fonts/manrope-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url(fonts/manrope-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url(fonts/manrope-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Antonio';src:url(fonts/antonio.woff2) format('woff2');font-weight:100 700;font-display:swap}
@font-face{font-family:'Josefin Sans';src:url(fonts/josefin-sans.woff2) format('woff2');font-weight:100 700;font-display:swap}
@font-face{font-family:'Saira Extra Condensed';src:url(fonts/saira-xc-300.woff2) format('woff2');font-weight:300;font-display:swap}
.heroc h1.hf-a{font-family:'Antonio',sans-serif;font-weight:200;font-size:clamp(2.6rem,4.6vw,3.9rem);letter-spacing:.025em;word-spacing:-.04em;line-height:1.05}
.heroc h1.hf-b{font-family:'Saira Extra Condensed',sans-serif;font-weight:300;font-size:clamp(2.8rem,5vw,4.2rem);letter-spacing:.035em;word-spacing:-.05em;line-height:1}
.heroc h1.hf-c{font-family:'Josefin Sans',sans-serif;font-weight:200;font-size:clamp(2rem,3.6vw,3rem);letter-spacing:.01em;word-spacing:-.14em;line-height:1.12}
@media(max-width:760px){.heroc h1.hf-a{font-size:2.4rem}.heroc h1.hf-b{font-size:2.55rem}.heroc h1.hf-c{font-size:1.9rem}}
/* WhatsApp-Kontaktbutton (schwebend) */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:90;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#f3e8ff;background:linear-gradient(145deg,rgba(150,110,200,.42),rgba(90,55,130,.5));border:1px solid rgba(230,200,255,.35);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 28px rgba(20,8,40,.55),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .2s,box-shadow .2s}
.wa-float:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 10px 32px rgba(150,90,220,.45),inset 0 1px 0 rgba(255,255,255,.22)}
.wa-float svg{width:28px;height:28px;fill:currentColor}
@media(max-width:760px){.wa-float{right:16px;bottom:16px;width:52px;height:52px}.wa-float svg{width:25px;height:25px}}
.cbtns{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1.1rem 0 .4rem}
.cbtn{display:flex;flex-direction:column;gap:.2rem;padding:.85rem 1rem;border-radius:16px;text-decoration:none;color:#f3e8ff;background:linear-gradient(145deg,rgba(150,110,200,.22),rgba(90,55,130,.3));border:1px solid rgba(230,200,255,.28);transition:transform .2s,border-color .2s}
.cbtn:hover{transform:translateY(-2px);border-color:rgba(240,210,255,.55)}.cbtn small{font-size:.78rem;opacity:.8;word-break:break-all}
@media(max-width:330px){.cbtns{grid-template-columns:1fr}}
/* Fix: Glow-Streifen bei Hover (Chrome-Repaint von backdrop-filter). Glas-Flächen dauerhaft als eigene Ebene rendern, damit Hover nichts neu zeichnet */
.glass{transform:translateZ(0);backface-visibility:hidden;isolation:isolate;contain:paint}
.nav.glass{contain:none;transform:none;isolation:auto}
.btn{transition:background-color .25s,border-color .25s,color .25s}
.price.breed-card:hover,.price.breed-card:focus-within{outline:none}
.price.breed-card:focus-visible{outline:1px solid rgba(210,170,255,.40)}
/* ===== Mobilmenü kompakt + OKH-Logo (v51) ===== */
.logo .okh{display:none}
@media(max-width:820px){
.nav.glass{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;height:58px!important;min-height:0!important;padding:0 14px 0 18px!important}
.nav .logo{white-space:nowrap;flex:0 0 auto}
.nav #menu,.nav nav{position:absolute!important;top:calc(100% + 8px)!important;left:0!important;right:0!important;width:auto!important;height:auto!important;flex-direction:column!important;padding:.4rem!important;border-radius:20px!important;background:rgba(14,10,22,.9)!important;backdrop-filter:blur(30px) saturate(160%)!important;-webkit-backdrop-filter:blur(30px) saturate(160%)!important;border:1px solid rgba(230,210,245,.25)!important;box-shadow:0 18px 40px rgba(0,0,0,.6)!important;gap:0!important}
.nav nav a{padding:.72rem 1rem!important;border-radius:12px;font-size:.98rem;border-bottom:1px solid rgba(230,210,245,.08)}
.nav nav a:last-of-type{border-bottom:0}
.nav nav a.act{background:rgba(200,160,255,.12)}
.nav nav .btn,.nav nav a:last-child{margin:.4rem .2rem .2rem;text-align:center;border:1px solid rgba(240,200,255,.4);border-radius:999px;background:linear-gradient(90deg,rgba(230,208,245,.9),rgba(240,184,216,.9));color:#1a1020!important;font-weight:600}
.nav .logo>span:first-child{display:none}
.nav .logo .okh{display:flex;flex-direction:column;line-height:1.05;font-family:'Josefin Sans',sans-serif;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(236,232,242,.9);font-weight:400}
.okh i{font-style:normal;color:#fff;font-weight:600;font-size:15px;line-height:.9;margin-right:1px}
}
/* VORSCHAU: Slogan-Band (weiße Punkte) */
.slogan-band{width:100%;padding:2.2rem 0;margin:1rem 0}
.sb-inner{display:flex;align-items:center;gap:1.6rem;justify-content:center;padding:2.1rem 2rem;border-radius:0;border-left:0;border-right:0;background:linear-gradient(90deg,rgba(20,12,32,.15),rgba(80,50,110,.22),rgba(20,12,32,.15))}
.sb-line{flex:1;max-width:220px;height:1px;background:linear-gradient(90deg,transparent,rgba(230,200,250,.55),transparent)}
.slogan-band p{margin:0;display:flex;align-items:center;gap:1.4rem;font-family:'Josefin Sans',sans-serif;font-weight:200;font-size:clamp(1rem,2.4vw,1.7rem);letter-spacing:.38em;text-transform:uppercase;color:rgba(240,232,248,.92);white-space:nowrap}
.slogan-band i{width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 3px rgba(255,255,255,.35)}
@media(max-width:820px){.sb-inner{padding:1.5rem 1rem;gap:.7rem}.sb-line{display:none}.slogan-band p{font-size:.82rem;letter-spacing:.26em;gap:.75rem}.slogan-band i{width:3px;height:3px}}
.slogan-band p span{margin-right:-.38em}
@media(max-width:820px){.slogan-band p span{margin-right:-.26em}}
/* VORSCHAU: Anna Linien-Katzen */
.oc-host{position:relative;overflow:visible}
.oc{position:absolute;pointer-events:none;opacity:.85;height:auto;z-index:2}
/* sitting — free bottom-right, text keeps clear via padding */
.oc-sit{width:30px;right:18px;bottom:16px}
.oc-host:has(.oc-sit){padding-right:52px!important;padding-bottom:3.2rem!important}
/* lying — smaller bottom-right (was overlapping top paragraph) */
.oc-lie{width:78px;right:16px;bottom:14px;top:auto}
.oc-host:has(.oc-lie){padding-right:120px!important;padding-bottom:4.8rem!important}
/* sleeping — bottom-right */
.oc-sleep{width:58px;right:16px;bottom:14px}
.oc-host:has(.oc-sleep){padding-right:78px!important;padding-bottom:3.2rem!important}
/* yarn — bottom-left of CTA */
.oc-yarn{width:64px;left:18px;bottom:12px}
.oc-host:has(.oc-yarn){padding-left:86px!important;padding-bottom:3.4rem!important}
@media(max-width:820px){
.oc-sit{width:22px;right:12px;bottom:12px}
.oc-host:has(.oc-sit){padding-right:36px!important;padding-bottom:2.8rem!important}
.oc-lie{width:58px;right:12px;bottom:12px}
.oc-host:has(.oc-lie){padding-right:78px!important;padding-bottom:4rem!important}
.oc-sleep{width:44px;right:12px;bottom:12px}
.oc-host:has(.oc-sleep){padding-right:56px!important;padding-bottom:2.8rem!important}
.oc-yarn{width:48px;left:12px;bottom:10px}
.oc-host:has(.oc-yarn){padding-left:62px!important;padding-bottom:3rem!important}
}

/* ===== VORSCHAU: Mobile Calm (Whisker-inspired) ===== */
@media(max-width:820px){
body{--m-gap:1.15rem}
.wrap{margin:0 auto 2.4rem;width:min(100% - 28px,1200px)}
.nav.glass{box-shadow:0 8px 28px rgba(0,0,0,.35)!important}
/* lighter, quieter glass cards */
.glass.card,.glass.stage,.glass.panel,.glass.cat,.glass.rev,.glass.cta,.price.glass,.glass.slim{
  background:linear-gradient(165deg,rgba(48,36,68,.42),rgba(22,16,34,.55))!important;
  border:1px solid rgba(230,210,245,.14)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(18px) saturate(130%)!important;-webkit-backdrop-filter:blur(18px) saturate(130%)!important;
  border-radius:22px!important;
  padding:1.15rem 1.15rem 1.25rem!important;
}
.glass.card + .glass.card,.grid3 > .glass,.grid2 > .glass,.grid4 > .glass{margin-top:0}
.grid2,.grid3,.grid4{gap:var(--m-gap)!important}
section.wrap > .glass.card,section.wrap > .head,section.wrap > .grid2,section.wrap > .grid3,section.wrap > .grid4{margin-bottom:var(--m-gap)}
section.wrap .head.glass{margin-bottom:var(--m-gap)!important;padding:1rem 1.15rem!important}
/* heading + thin line (Whisker-like) */
.glass.card > h2,.glass.card > h3,.head.glass > h2,.glass.cta h2{
  font-family:'Josefin Sans',sans-serif;font-weight:400;letter-spacing:.04em;
  padding-bottom:.55rem;margin-bottom:.85rem;
  border-bottom:1px solid rgba(230,210,245,.22);
}
.glass.card > .eyebrow + h2{margin-top:.15rem}
.glass.card > .eyebrow{margin-bottom:.2rem;opacity:.75;font-size:.72rem}
/* quieter text */
.glass.card p,.glass.card li{font-size:.92rem;line-height:1.55;color:rgba(236,228,244,.88)}
.hero .heroc{padding:1.2rem!important;box-shadow:0 12px 32px rgba(0,0,0,.35)!important}
.hero .heroc h1{font-size:1.55rem!important;line-height:1.2}
.hero .heroc p{font-size:.9rem}
/* collapse long paragraphs */
.m-clip{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.m-clip.open{-webkit-line-clamp:unset;overflow:visible}
.m-more{display:inline-block;margin-top:.45rem;padding:0;border:0;background:none;color:rgba(230,190,245,.95);font:inherit;font-size:.82rem;letter-spacing:.04em;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
/* slogan band quieter */
.slogan-band{padding:1.4rem 0;margin:.6rem 0}
.sb-inner{padding:1.25rem .9rem!important;background:linear-gradient(90deg,rgba(20,12,32,.1),rgba(70,45,100,.18),rgba(20,12,32,.1))!important}
/* reduce heavy CTA glow */
.glass.cta{padding:1.2rem!important}
.btn{box-shadow:none!important}
.price.breed-card:hover,.price.breed-card:focus-within{outline:none}
/* steps list: airy */
.steps{gap:var(--m-gap)!important}
.steps .glass.card{padding:1rem 1.1rem!important}
/* footer quieter */
.foot{padding:1rem!important;font-size:.78rem}
}

/* ===== VORSCHAU: WA-Float mobile safe ===== */
@media(max-width:820px){
.wa-float{
  width:48px!important;height:48px!important;
  right:max(12px, env(safe-area-inset-right, 0px))!important;
  bottom:max(14px, calc(env(safe-area-inset-bottom, 0px) + 12px))!important;
  opacity:.82; transition:opacity .25s, transform .25s, visibility .25s;
}
.wa-float svg{width:26px;height:26px}
body:has(.wa-float){padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px))}
/* keep main content clear of the float on the right */
body:has(.wa-float) main .wrap,
body:has(.wa-float) #fcfg.wrap,
body:has(.wa-float) section.wrap{
  width:min(calc(100% - 28px - 54px), 1200px)!important;
  margin-left:14px!important;
  margin-right:calc(14px + 54px)!important;
}
body:has(.wa-float) footer.wrap{
  width:min(calc(100% - 28px - 54px), 1200px)!important;
  margin-left:14px!important;
  margin-right:calc(14px + 54px)!important;
  padding-bottom:calc(1.4rem + 8px)!important;
}
body:has(.wa-float) #waitForm .btn.primary,
body:has(.wa-float) #fcfg .btn,
body:has(.wa-float) .check{
  margin-right:8px;
}
.wa-float.wa-away{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:scale(.8);width:0!important;height:0!important;overflow:hidden;bottom:-100px!important}
}

/* ===== VORSCHAU: Subtle effects (respect reduced-motion) ===== */
/* Glow drift layer — transform/opacity only, long loop */
.glass:not(.nav)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 85% 75% at 18% 88%,rgba(255,170,210,.20),transparent 58%),
    radial-gradient(ellipse 75% 70% at 88% 12%,rgba(150,90,230,.22),transparent 60%);
  opacity:.5;mix-blend-mode:screen;
  animation:oriGlowDrift 26s ease-in-out infinite;
  will-change:transform,opacity;
}
.glass > *{position:relative;z-index:1}
@keyframes oriGlowDrift{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.42}
  35%{transform:translate3d(2.2%,-1.6%,0) scale(1.05);opacity:.62}
  70%{transform:translate3d(-1.8%,1.2%,0) scale(1.03);opacity:.5}
}

/* Scroll fade + rise */
.glass.reveal-ready:not(.nav):not(.side-logo){
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .7s ease, transform .75s cubic-bezier(.22,.82,.24,1);
  will-change:opacity,transform;
}
.glass.reveal-in:not(.nav):not(.side-logo){
  opacity:1;
  transform:translate3d(0,0,0);
}

/* Line-art cats: wipe/draw-in on first appear */
.oc{
  opacity:0;
  -webkit-mask-image:linear-gradient(115deg,#000 42%,transparent 58%);
  mask-image:linear-gradient(115deg,#000 42%,transparent 58%);
  -webkit-mask-size:280% 100%;
  mask-size:280% 100%;
  -webkit-mask-position:100% 0;
  mask-position:100% 0;
  will-change:mask-position,-webkit-mask-position,opacity;
}
.oc.oc-draw{
  animation:oriCatDraw 1.35s cubic-bezier(.22,.7,.25,1) forwards;
}
@keyframes oriCatDraw{
  0%{opacity:.15;-webkit-mask-position:100% 0;mask-position:100% 0}
  55%{opacity:.75}
  100%{opacity:.85;-webkit-mask-position:0% 0;mask-position:0% 0}
}

@media (prefers-reduced-motion:reduce){
  .bg{transform:translate3d(0,0,0)!important;will-change:auto}
  .glass:not(.nav)::after{animation:none!important;opacity:.5}
  .glass.reveal-ready:not(.nav):not(.side-logo),
  .glass.reveal-in:not(.nav):not(.side-logo){
    opacity:1!important;transform:none!important;transition:none!important;
  }
  .oc,.oc.oc-draw{
    opacity:.85!important;animation:none!important;
    -webkit-mask-image:none!important;mask-image:none!important;
  }
}

/* ===== Mobile fix: noticeable burger + gender tap targets (v54) ===== */
@media(max-width:820px){
  /* Form/cards: prevent native input min-width from blowing past narrow wrap (WA gutter) */
  .form, .form fieldset, .chips, .wait-grid, .wait-grid > *, .glass.card:not(.heroc), .row2{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }
  .hero .heroc{max-width:560px;min-width:0}
  .form input:not([type=radio]):not([type=checkbox]), .form textarea, .form select{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  .form input[type=radio], .form input[type=checkbox], .chips input{
    width:auto;
    max-width:none;
    flex:0 0 auto;
  }
  .chips{width:100%}
  .rlg{white-space:normal!important}
  .field-note,.form .small,.form p{overflow-wrap:anywhere;word-break:break-word;max-width:100%}
  #farbe .chips label{max-width:100%}
  /* Keep logo + visible hamburger; horizontal nav stays collapsed until .open */
  .burger{
    display:grid!important;
    place-items:center;
    width:44px!important;
    height:44px!important;
    min-width:44px;
    min-height:44px;
    flex:0 0 auto;
    margin:0 -2px 0 8px;
    border-radius:14px!important;
    background:rgba(255,236,255,.10)!important;
    border:1px solid rgba(230,210,245,.42)!important;
    box-shadow:0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14);
    -webkit-tap-highlight-color:transparent;
  }
  .burger i{
    width:18px!important;
    height:2px!important;
    margin:3.5px auto!important;
    background:#f6eefc!important;
    box-shadow:0 0 8px rgba(220,180,255,.35);
  }
  .open .burger{
    background:rgba(200,160,255,.20)!important;
    border-color:rgba(235,200,255,.62)!important;
  }
  /* Sex selection: content-sized pills, wrap on narrow; >=44px tap */
  #geschlecht .chips{
    display:flex;
    flex-wrap:wrap;
    gap:.55rem;
    width:100%;
    box-sizing:border-box;
  }
  #geschlecht .chips label{
    flex:1 1 auto;
    min-width:fit-content;
    min-height:44px;
    padding:.7rem .95rem .7rem 1.05rem;
    font-size:.95rem;
    justify-content:flex-start;
    align-items:center;
    gap:.5rem;
    width:auto;
    max-width:100%;
    box-sizing:border-box;
    white-space:nowrap;
  }
  #geschlecht .chips input{
    flex:0 0 auto;
    width:1.05em;
    height:1.05em;
    margin:0;
    accent-color:#c9a2ff;
  }
  #geschlecht .chips label:has(input:checked){
    border-color:rgba(235,200,255,.85);
    background:rgba(190,140,255,.22);
    box-shadow:0 0 0 1px rgba(230,190,255,.25) inset;
  }
  .nav{max-width:calc(100% - 24px)}
  .slogan-band p{letter-spacing:.18em!important;gap:.55rem!important;font-size:.78rem!important}
  .slogan-band p span{margin-right:-.18em!important}
}
@media(max-width:360px){
  /* Prefer wrapping (e.g. 2+1) over equal squeeze; keep content width */
  #geschlecht .chips label{flex:0 1 auto;min-width:fit-content}
  .slogan-band p{letter-spacing:.12em!important;font-size:.72rem!important}
}