/* ============ HANDY-MENÜ im Stil des neuen Starts (Ansage Inhaber 01.11.2026: „Menü oben beim mobilen Version anpassen
   an das neue Design der Website“) ============
   Gilt für beide Menüs, nur bis 700 px: Startseite (#smPanel, index.html und en/it/vi) und Unterseiten (#ukMenue, baut
   js/unterseite-kopf.js). Lädt nach css/start.css bzw. css/unterseite-kopf.css; die Ids heben die älteren Regeln auf.
   Aufbau: drei Hauptpunkte ruhig untereinander, darunter „Leistungen“ als kleine Rubrik mit den vier orangen Karten
   (wie die Ringkarten des Starts, ohne 3D), unten das Anfrage-Schild wie auf dem Start und dezent Sprache und Instagram.
   Bewegung nur über transform und opacity; „Bewegung reduzieren“: alles steht sofort. Über 700 px bleibt alles wie bisher. */
.mk-karten,.mk-fuss,#smPanel .sm-cta.mk-schild{display:none}

@media(max-width:700px){
  /* ---------- Fläche ---------- */
  #smPanel{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;column-gap:14px;align-content:start;
    padding:calc(80px + env(safe-area-inset-top,0px)) 22px calc(28px + env(safe-area-inset-bottom,0px));background:#0c1830}
  #smPanel > *{grid-column:1 / -1;min-width:0}
  #smPanel > .sm-list{grid-row:1}
  #ukMenue{padding:calc(84px + env(safe-area-inset-top,0px)) 22px calc(28px + env(safe-area-inset-bottom,0px));background:#0c1830}
  #ukMenue,.uk-menue-bogen{width:100vw}
  .uk-menue-bogen::before{background:#0c1830}

  /* ---------- Hauptpunkte: Startseite, Unsere Philosophie, Der Ablauf ---------- */
  #smPanel .sm-list,#ukMenue > ul{display:flex;flex-direction:column;gap:0}
  #smPanel .sm-list > li:nth-child(4),#ukMenue .uk-li-ablauf{order:1}
  #smPanel .sm-list > li:nth-child(3),#ukMenue .uk-li-rubrik{order:2;margin-top:22px}
  #smPanel .sm-list > li > .sm-item,#ukMenue .uk-menue__haupt{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0;
    font-family:'Inter','Helvetica Neue',Arial,sans-serif;font-weight:400;font-size:19px;line-height:1.2;letter-spacing:.005em;
    text-transform:none;color:#F1EEE6;border-bottom:1px solid rgba(241,238,230,.12)}
  #smPanel .sm-list > li > .sm-item .sm-label{font:inherit;letter-spacing:inherit;color:inherit}
  /* der Punkt beim Darüberfahren steht links im Rand, die Schrift fluchtet mit „Leistungen“ und den Karten */
  #smPanel .sm-list > li > .sm-item,#ukMenue .uk-menue__haupt{position:relative}
  #smPanel .sm-list > li > .sm-item::before,#ukMenue .uk-menue__haupt::before{position:absolute;left:-13px;top:50%;width:6px;height:6px;margin-top:-3px}
  #smPanel .sm-item i{display:none}
  #smPanel .sm-sub,#ukMenue .uk-li-unter{display:none}

  /* ---------- Rubrik „Leistungen“ (Antiqua-Versalien wie die Wortmarke) ---------- */
  #smPanel .sm-list > li:nth-child(3) > .sm-item,#ukMenue .uk-menue__rubrik{min-height:44px;border:0;
    font-family:'Cinzel','Cormorant Garamond',Georgia,serif;font-weight:600;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
    color:rgba(241,238,230,.62)}
  #smPanel .sm-list > li:nth-child(3) > .sm-item::before,#ukMenue .uk-menue__rubrik::before{display:none}

  /* ---------- vier Leistungen als kleine orange Karten, 2 × 2 ---------- */
  #smPanel .mk-karten,#ukMenue .mk-karten{display:grid;grid-template-columns:1fr 1fr;gap:10px;list-style:none;margin:2px 0 0;padding:0}
  #smPanel .mk-karten li,#ukMenue .mk-karten li{overflow:visible;min-width:0}
  #smPanel .mk-karte,#ukMenue .mk-karte{position:relative;display:block;box-sizing:border-box;aspect-ratio:1/1;min-height:0;padding:11px 11px 0;
    border-radius:3px;overflow:hidden;text-decoration:none;color:#fff;
    background:linear-gradient(162deg,#f2884a 0%,#e8763a 48%,#d9662b 100%);
    box-shadow:inset 0 1px 0 rgba(255,236,220,.35),inset 0 0 0 1px rgba(255,255,255,.08),0 14px 24px -16px rgba(0,0,0,.7);
    opacity:0;transform:translate3d(0,14px,0);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
  #smPanel .mk-karten li:nth-child(1) .mk-karte,#ukMenue .mk-karten li:nth-child(1) .mk-karte{transition-delay:.32s}
  #smPanel .mk-karten li:nth-child(2) .mk-karte,#ukMenue .mk-karten li:nth-child(2) .mk-karte{transition-delay:.37s}
  #smPanel .mk-karten li:nth-child(3) .mk-karte,#ukMenue .mk-karten li:nth-child(3) .mk-karte{transition-delay:.42s}
  #smPanel .mk-karten li:nth-child(4) .mk-karte,#ukMenue .mk-karten li:nth-child(4) .mk-karte{transition-delay:.47s}
  #smWrap.open .mk-karte,#ukMenue.uk-menue--auf .mk-karte{opacity:1;transform:none}
  .mk-karte__t{display:block;font-family:'Inter','Helvetica Neue',Arial,sans-serif;font-weight:500;font-size:15px;line-height:1.1;
    letter-spacing:-.01em;color:#fff;hyphens:manual;-webkit-hyphens:manual}
  .mk-karte__u{display:block;margin-top:8px;padding-top:6px;border-top:1px solid rgba(255,255,255,.6);
    font-family:'Inter','Helvetica Neue',Arial,sans-serif;font-weight:400;font-size:11px;line-height:1.3;color:rgba(255,248,240,.92);
    text-wrap:balance}
  .mk-karte img{position:absolute;right:10px;bottom:10px;width:36%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:1px;
    box-shadow:0 6px 12px -6px rgba(0,0,0,.45)}
  #smPanel .mk-karte:focus-visible,#ukMenue .mk-karte:focus-visible{outline:2px solid #F1EEE6;outline-offset:3px;text-decoration:none}

  /* ---------- unten: Anfrage-Schild links, Sprache und Instagram rechts ---------- */
  #smPanel > .sm-cta:not(.mk-schild){display:none}
  #smPanel > .sm-cta.mk-schild{grid-column:1;grid-row:2 / span 2;justify-self:start;align-self:start}
  #smPanel > .lang{grid-column:2;grid-row:2;justify-self:end;margin:22px 0 0}
  #smPanel > .sm-socials{grid-column:2;grid-row:3;justify-self:end;align-self:start;margin:0;padding:0;flex-direction:row}
  #ukMenue .mk-fuss{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;column-gap:14px}
  #ukMenue .mk-fuss > .mk-schild{grid-column:1;grid-row:1 / span 2;justify-self:start;align-self:start}
  #ukMenue .mk-fuss > .lang{grid-column:2;grid-row:1;justify-self:end;margin:22px 0 0}
  #ukMenue .mk-fuss > .mk-insta{grid-column:2;grid-row:2;justify-self:end}

  /* Schild wie auf dem Start: oranges Schild, heller Rahmen, Strichpfeil, kleiner Kreis, weißer Sockel */
  #smPanel .sm-cta.mk-schild,#ukMenue .mk-schild{position:relative;display:block;box-sizing:border-box;width:140px;min-height:0;
    margin:22px 0 24px;padding:12px 28px 9px 10px;border:4px solid #eeece7;border-radius:8px;
    font-family:'Inter','Helvetica Neue',Arial,sans-serif;font-weight:400;font-size:13px;line-height:1.2;letter-spacing:.005em;
    text-align:left;text-decoration:none;color:#fff;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") right 7px bottom 7px/14px 14px no-repeat,
      linear-gradient(180deg,#f0884b 0%,#e8773a 45%,#df6a2d 100%);
    box-shadow:0 0 0 1px rgba(255,255,255,.55),inset 0 1px 0 rgba(255,236,220,.45),inset 0 0 0 1px rgba(160,60,15,.25);
    opacity:0;transform:translate3d(0,14px,0);transition:opacity .5s ease .52s,transform .6s cubic-bezier(.2,.7,.2,1) .52s}
  #smPanel .sm-cta.mk-schild::before,#ukMenue .mk-schild::before{content:"";position:absolute;right:6px;top:5px;width:9px;height:9px;
    box-sizing:border-box;border-radius:50%;border:1.2px solid rgba(255,255,255,.9);background:none;transform:none;opacity:1}
  #smPanel .sm-cta.mk-schild::after,#ukMenue .mk-schild::after{content:"";display:block;position:absolute;left:50%;top:calc(100% + 4px);
    width:38%;height:16px;inset-inline-end:auto;transform:translateX(-50%);border-radius:1px 1px 3px 3px;
    background:linear-gradient(90deg,#cfcdc8 0,#ecebe7 18%,#fbfbf9 48%,#e6e4df 78%,#c6c4be 100%);
    box-shadow:inset 0 5px 6px -5px rgba(0,0,0,.4)}
  #smWrap.open .sm-cta.mk-schild,#ukMenue.uk-menue--auf .mk-schild{opacity:1;transform:none}
  #smPanel .sm-cta.mk-schild:hover,#ukMenue .mk-schild:hover{color:#fff;text-decoration:none}
  #smPanel .sm-cta.mk-schild:focus-visible,#ukMenue .mk-schild:focus-visible{outline:2px solid #F1EEE6;outline-offset:3px;text-decoration:none}

  /* Sprache dezent: Flagge und Name klein, ohne Kasten; die Liste klappt nach oben auf */
  #smPanel .lang,#ukMenue .lang{position:relative;flex:0 0 auto;opacity:0;transition:opacity .5s ease .56s}
  #smWrap.open .lang,#ukMenue.uk-menue--auf .lang{opacity:1}
  #smPanel .lang-btn,#ukMenue .lang-btn{display:inline-flex;align-items:center;justify-content:flex-end;gap:7px;width:auto;min-height:44px;
    padding:0 2px;background:transparent;border:0;border-radius:0;box-shadow:none;color:rgba(241,238,230,.72);
    font-family:'Inter','Helvetica Neue',Arial,sans-serif;font-weight:400;font-size:13px}
  #smPanel .lang-btn .lang-name,#ukMenue .lang-btn .lang-name{display:inline;font-size:13px;font-weight:400}
  #smPanel .lang-btn .flag,#ukMenue .lang-btn .flag{font-size:14px}
  #smPanel .lang-btn:hover,#ukMenue .lang-btn:hover{background:transparent;color:#F1EEE6}
  #smPanel .lang-btn:focus-visible,#ukMenue .lang-btn:focus-visible{outline:2px solid #E87536;outline-offset:2px}
  #smPanel .lang-menu,#ukMenue .lang-menu{position:absolute;top:auto;left:auto;right:0;bottom:calc(100% + 6px);display:none;min-width:180px;
    max-height:60vh;overflow-y:auto;margin:0;opacity:1;visibility:visible;transform:none;background:#132443;
    border:1px solid rgba(241,238,230,.14);border-radius:6px;box-shadow:0 18px 40px -18px rgba(0,0,0,.7)}
  #smPanel .lang-menu.open,#ukMenue .lang-menu.open{display:block}

  /* Instagram nur als Zeichen, 44 px Tippfläche */
  #smPanel .sm-socials{opacity:0;transform:none;transition:opacity .5s ease .6s}
  #smWrap.open .sm-socials{opacity:1}
  #smPanel .sm-socials-title,#smPanel .sm-social > span{display:none}
  #smPanel .sm-social,#ukMenue .mk-insta{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
    padding:0;color:rgba(241,238,230,.72)}
  #ukMenue .mk-insta{opacity:0;transform:none;transition:opacity .5s ease .6s}
  #ukMenue.uk-menue--auf .mk-insta{opacity:1}
  #smPanel .sm-social:hover,#ukMenue .mk-insta:hover{color:#F1EEE6}
  #ukMenue .mk-insta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none}

  /* ---------- Kopfleiste der Unterseiten: Wortmarke in der Start-Schrift, nur der Menüknopf ---------- */
  html body .legal-top{background:#0c1830;border-bottom:1px solid rgba(241,238,230,.1);padding:9px 14px 9px 18px}
  html body .legal-top.uk-offen{border-bottom-color:transparent}
  html body .legal-top .nav-brand{font-family:'Cinzel','Cormorant Garamond',Georgia,serif;font-weight:600;font-size:13px;line-height:1.15;
    letter-spacing:.16em;text-transform:uppercase;color:#F1EEE6;white-space:nowrap}
  html body .legal-top .nav-brand em{color:#F1EEE6;font-style:normal;margin-left:.36em}
  html body .legal-top .legal-interesse{display:none!important}
  html body .legal-top .uk-menue-knopf{margin-left:auto;border-radius:6px;border:1px solid rgba(232,133,58,.55);background:rgba(232,133,58,.16)}
  html body .legal-top.uk-offen .uk-menue-knopf{background:transparent;border-color:rgba(241,238,230,.4)}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
  #smPanel .mk-karte,#ukMenue .mk-karte,#smPanel .sm-cta.mk-schild,#ukMenue .mk-schild,#smPanel .lang,#ukMenue .lang,
  #smPanel .sm-socials,#ukMenue .mk-insta{transition:none}
}

/* Ansage Inhaber 01.11.2026 abends: „Das Menü dezenter machen“. Leistungen als ruhige dunkle Kärtchen mit feiner oranger
   Kante statt vollflächigem Orange, kleineres Schild, Menüknopf zurückhaltender */
@media (max-width:700px){
  #smPanel .mk-karten,#ukMenue .mk-karten{gap:8px}
  #smPanel .mk-karte,#ukMenue .mk-karte{aspect-ratio:auto!important;min-height:76px;padding:12px 58px 12px 13px!important;
    background:rgba(241,238,230,.045)!important;border:1px solid rgba(241,238,230,.12)!important;border-radius:4px!important;
    box-shadow:inset 2px 0 0 #E87536!important}
  .mk-karte__t{font-size:14px!important;font-weight:500!important;color:#F1EEE6!important}
  .mk-karte__u{margin-top:5px!important;padding-top:0!important;border-top:0!important;font-size:11.5px!important;line-height:1.3!important;
    color:rgba(241,238,230,.62)!important}
  .mk-karte img{width:40px!important;height:40px!important;right:10px!important;bottom:auto!important;top:50%!important;
    transform:translateY(-50%);border-radius:2px!important;opacity:.9}
  #smPanel > .sm-cta.mk-schild,#ukMenue .mk-fuss > .mk-schild{transform:scale(.86);transform-origin:0 0}
  #smToggle,.uk-menue-knopf{background:rgba(8,16,32,.35)!important;border-color:rgba(241,238,230,.22)!important;box-shadow:none!important}
}