/* Unterseiten am Handy (js/unterseite-kopf.js, Antworten der Fragen-Mappe 31.10.2026): Menü, kurzer Anfrage-Knopf,
   schmale Anfrage-Leiste unten. Am Rechner bleibt der Kopf wie bisher; Menüknopf und Leiste gibt es nur bis 1040 px. */
.uk-menue-knopf,.uk-menue,.uk-kurz,.uk-leiste{display:none}

@media(max-width:1040px){
  .legal-top{position:relative}
  /* kurzer Knopf statt der langen Fassung */
  .legal-top .legal-interesse.uk-lang{display:none}
  .legal-top .legal-interesse.uk-kurz{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;flex:0 0 auto;min-width:max-content}
  /* Menüknopf: drei Striche, 44 px */
  .legal-top > .uk-menue-knopf{order:99}
  .uk-menue-knopf{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 11px;
    margin-left:8px;border:1px solid rgba(241,238,230,.32);border-radius:6px;background:transparent;cursor:pointer;flex:0 0 auto}
  .uk-menue-knopf span{display:block;height:1.5px;background:#F1EEE6;transition:transform .25s ease,opacity .2s ease}
  .legal-top.uk-offen .uk-menue-knopf span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .legal-top.uk-offen .uk-menue-knopf span:nth-child(2){opacity:0}
  .legal-top.uk-offen .uk-menue-knopf span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .uk-menue-knopf:focus-visible{outline:2px solid #E87536;outline-offset:2px}
  /* aufgeklapptes Menü wie ein Tab (Ansage Inhaber 31.10.2026, Vorbild Animmaster Lib › Navigation Menus 3 „Curved
     Menu“, Eigenbau ohne GSAP): die Leiste fährt von rechts herein, die Vorderkante ist gewölbt (.uk-menue-bogen fährt
     mit) und wird gerade, sobald sie steht; die Einträge gleiten gestaffelt nach. Liegt unter der Kopfleiste, der
     Strich-Knopf wird zum Schließen-X. Keine Ziffern, keine Großbuchstaben-Wand. */
  .uk-menue,.uk-menue-bogen{position:fixed;top:0;right:0;bottom:0;left:auto;z-index:-1;width:min(440px,100vw);
    transform:translate3d(calc(100% + 140px),0,0);transition:transform .8s cubic-bezier(.76,0,.24,1)}
  .uk-menue{margin:0;overflow-y:auto;overscroll-behavior:contain;
    padding:calc(104px + env(safe-area-inset-top,0px)) clamp(28px,7vw,52px) calc(40px + env(safe-area-inset-bottom,0px));
    background:#0C1830;box-shadow:-30px 0 60px -30px rgba(0,0,0,.5)}
  .uk-menue-bogen{display:block;pointer-events:none;background:transparent}
  .uk-menue-bogen::before{content:"";position:absolute;top:-6%;bottom:-6%;left:-80px;width:160px;border-radius:50%;background:#0C1830;
    transform:scaleX(1);transition:transform .8s cubic-bezier(.76,0,.24,1)}
  .uk-menue:not([hidden]){display:block}
  .uk-menue.uk-menue--auf,.uk-menue-bogen.uk-auf{transform:none}
  .uk-menue-bogen.uk-auf::before{transform:scaleX(0)}
  .uk-menue ul{list-style:none;margin:0;padding:0}
  .uk-menue li{overflow:visible}
  .uk-menue a{display:flex;align-items:center;gap:14px;min-height:48px;padding:2px 0;text-decoration:none;color:#F1EEE6;opacity:0;
    transform:translate3d(90px,0,0);transition:transform .8s cubic-bezier(.76,0,.24,1) calc(.1s + var(--i,0) * .05s),opacity .6s ease calc(.1s + var(--i,0) * .05s)}
  .uk-menue.uk-menue--auf a{transform:none;opacity:1}
  .uk-menue a:hover,.uk-menue a:focus-visible{color:#fff;outline:none}
  .uk-menue a:focus-visible{text-decoration:underline;text-underline-offset:6px;text-decoration-color:#E87536}
  .uk-menue__haupt{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(28px,7.6vw,36px);font-weight:500;letter-spacing:.01em;line-height:1.15}
  .uk-menue__haupt::before{content:"";flex:0 0 8px;height:8px;border-radius:50%;background:#E87536;transform:scale(0);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
  .uk-menue__haupt:hover::before,.uk-menue__haupt:focus-visible::before{transform:scale(1)}
  .uk-menue__unter{padding-left:22px!important;min-height:44px!important;font-family:'Inter','Helvetica Neue',Arial,sans-serif;font-size:15px;letter-spacing:.02em;color:rgba(241,238,230,.74)!important}
  html.uk-menue-offen,html.uk-menue-offen body{overflow:hidden;overscroll-behavior:none}
  html{scrollbar-gutter:stable}
  html.uk-menue-offen .cc-banner,html.uk-menue-offen .cc-reopen,html.uk-menue-offen .uk-leiste{display:none!important}
  body.uk-mit-leiste{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  /* schmale Anfrage-Leiste unten */
  .uk-leiste{display:flex;justify-content:center;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:50;
    pointer-events:none;opacity:0;transform:translateY(16px);transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
  .uk-leiste a{pointer-events:none;display:inline-flex;align-items:center;justify-content:center;min-height:46px;width:100%;max-width:420px;
    padding:0 20px;border-radius:6px;background:#E87536;color:#0c1830;font-weight:600;font-size:15px;text-decoration:none;
    box-shadow:0 10px 26px -14px rgba(0,0,0,.6)}
  .uk-leiste--an{opacity:1;transform:none}
  .uk-leiste--an a{pointer-events:auto}
  .uk-leiste a:focus-visible{outline:2px solid #0c1830;outline-offset:2px}
}
@media(prefers-reduced-motion:reduce){.uk-leiste,.uk-menue-knopf span,.uk-menue,.uk-menue a,.uk-menue-bogen,.uk-menue-bogen::before{transition:none}}

/* Fäden auf den Unterseiten (js/unterseite-kopf.js, Ansage Inhaber 31.10.2026): links Blau, rechts Orange, sehr fein,
   pendeln langsam hin und her. Liegen über dem Seitengrund, unter nichts Anklickbarem (pointer-events:none). */
.uk-faeden-huelle{position:absolute;left:0;top:0;width:100%;z-index:1;pointer-events:none;overflow:hidden}
.uk-faeden{position:absolute;left:0;top:0;width:100%;pointer-events:none;overflow:visible}
.uk-faden path{fill:none;stroke-width:1.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.uk-faden--l path{stroke:rgba(23,44,80,.55)}
.uk-faden--r path{stroke:rgba(232,117,54,.75)}
@media(prefers-reduced-motion:no-preference){
  .uk-faeden{will-change:transform;animation:uk-pendel 11s ease-in-out infinite alternate}
  .uk-faeden--r{animation-duration:13s;animation-delay:-4s}
}
@keyframes uk-pendel{0%{transform:translate3d(-7px,0,0)}100%{transform:translate3d(7px,0,0)}}
@keyframes uk-pendel-klein{0%{transform:translate3d(-2px,0,0)}100%{transform:translate3d(2px,0,0)}}
@media(max-width:700px){.uk-faden path{stroke-width:1.1}.uk-faeden{animation-name:uk-pendel-klein!important}}
@media print{.uk-faeden-huelle{display:none}}
/* Ansage Inhaber 01.11.2026: die Fäden fahren mit (zeichnen sich beim Scrollen, js/unterseite-kopf.js) statt zu pendeln */
.uk-faeden,.uk-faeden--r{animation:none!important;will-change:auto}
/* Ansage Inhaber 01.11.2026 („geschmeidig wie ein Pinselstrich“): Kern plus zwei feine Flanken, die Flanken laufen
   sanft auseinander und zusammen, so schwillt der Strich an und ab; die Spitze ist klein und halb durchsichtig */
.uk-faden .uk-faden__kern{stroke-width:1.3}
.uk-faden .uk-faden__flanke{stroke-width:.9;opacity:.5}
.uk-faden--l .uk-faden__kopf{fill:#172C50;opacity:.7}
.uk-faden--r .uk-faden__kopf{fill:#E87536;opacity:.8}
@media(max-width:700px){.uk-faden .uk-faden__kern{stroke-width:1.05}.uk-faden .uk-faden__flanke{stroke-width:.7}.uk-faden__kopf{r:1.8px}}
@media(prefers-reduced-motion:reduce){.uk-faden__kopf{display:none}}

/* Der helle Über-uns-Raum als Grund der Unterseiten (Ansage Inhaber 31.10.2026: „das edle Weiß mit den Formen … in den
   Unterseiten auch“): oben hinter dem Titel, scrollt mit (kein festes Vollbild, Mobil-Checkliste MB10), läuft nach
   unten ins Weiß aus. Abschnitte mit eigenem Grund bleiben, wie sie sind. */
html:root body:has(>.legal-top){background:linear-gradient(180deg,rgba(255,255,255,.12) 0,rgba(255,255,255,.5) 420px,rgba(255,255,255,.86) 800px,#fff 1100px) top/100% 1100px no-repeat,
  url(../img/raum/studio-weiss-2000.webp?v=2) 50% 0/max(100%,1600px) auto no-repeat,#fff}
@media(max-width:800px){html:root body:has(>.legal-top){background:linear-gradient(180deg,rgba(255,255,255,.12) 0,rgba(255,255,255,.5) 320px,rgba(255,255,255,.86) 600px,#fff 800px) top/100% 800px no-repeat,
  url(../img/raum/studio-weiss-1000.webp?v=2) 50% 0/auto 900px no-repeat,#fff}}
/* Prüfung 01.11.2026 abends: Brotkrumen-Link „Start“ mindestens 44 px breit (war 40 px) */
.lp-krume a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;box-sizing:border-box}
/* Ansage Inhaber 01.11.2026: nur eine Linie (oben orange, nach unten blau, Verlauf in js/unterseite-kopf.js) */
.uk-faeden--l{display:none!important}
.uk-faden--r path{stroke:url(#ukFadenVerlauf)}