/* Facility Service Salanov, Embsen — Handy und Tablet bis 1199.98 */
html{touch-action:manipulation}

/* ============ Handy UND Tablet (bis 1199.98): Kopf, Menüblatt, Modale ============ */
@media (max-width:1199.98px){
  .nav{display:none}
  .kopf-in{flex-wrap:nowrap;gap:12px}
  .marke{min-width:0}
  .kopf-akt{flex:0 0 auto}
  .kopf-menue{gap:10px}

  /* Hintergrund leicht abgedunkelt und weichgezeichnet; Schliessen animiert mit */
  .modal{display:flex;visibility:hidden;pointer-events:none;background:rgba(26,26,26,.38);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    transition:opacity .32s ease,visibility 0s linear .32s}
  .modal.ist-offen,.modal:target{visibility:visible;pointer-events:auto;transition:opacity .32s ease,visibility 0s}
  .modal .modal-karte{overflow:clip;transition:transform .38s var(--sanft)}

  /* Schliesser: Kreuz aus zwei gleich langen Strichen, Mitte exakt per Raster */
  .modal-zu{display:grid;grid-template:100% / 100%;grid-auto-rows:0;place-items:center;font-size:0;line-height:0;color:var(--tinte);z-index:3}
  .modal-zu::before,.modal-zu::after{content:"";grid-area:1/1;width:18px;height:2px;border-radius:1px;background:currentColor;
    transition:transform .38s var(--sanft) .08s}
  .modal-zu::before{transform:translateY(-4px)}
  .modal-zu::after{transform:translateY(4px)}
  .modal.ist-offen .modal-zu::before{transform:rotate(45deg)}
  .modal.ist-offen .modal-zu::after{transform:rotate(-45deg)}

  /* Menüblatt: fällt von oben, Einträge gestaffelt */
  #m-menue{align-items:flex-start;padding:0}
  #m-menue .modal-karte{width:100%;max-width:none;margin:0;border-radius:0 0 14px 14px;
    padding:calc(14px + env(safe-area-inset-top)) var(--sp) 22px;transform:translateY(-30px)}
  #m-menue.ist-offen .modal-karte{transform:none}
  #m-menue .modal-zu{right:var(--sp);top:calc(14px + env(safe-area-inset-top))}
  #m-menue .menue-rubrik{display:flex;align-items:center;min-height:44px;margin:0;
    font-size:15px;letter-spacing:.1em;color:var(--bronze-text)}
  #m-menue .menue-rubrik + .menue-liste{margin-bottom:12px}
  .menue-liste a{position:relative;min-height:58px;padding:8px 34px 8px 2px;gap:14px}
  .menue-liste a b{font-size:22px;transition:transform .25s var(--sanft)}
  .menue-liste a small{font-size:14.5px;margin-top:1px}
  .menue-liste a::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;margin-top:-6px;
    border-top:2px solid var(--rost);border-right:2px solid var(--rost);transform:rotate(45deg);transition:transform .25s var(--sanft)}
  .menue-liste a:hover b,.menue-liste a:focus-visible b{transform:translateX(6px)}
  .menue-liste a:hover::after,.menue-liste a:focus-visible::after{transform:translateX(4px) rotate(45deg)}
  .menue-liste a:active{background:var(--leinen)}
  .menue-unter a{min-height:48px}
  .menue-unter a b{font-size:18px;font-weight:500}
  .menue-unter a span{font-size:24px;line-height:1;font-weight:700}
  .kachel{transition:transform .2s var(--sanft),background-color .2s ease}
  .kachel:hover{background:var(--leinen-linie)}
  #m-menue .menue-liste a,#m-menue .menue-kacheln .kachel,#m-menue .menue-rubrik{opacity:0;translate:0 -8px;
    transition:opacity .22s ease,translate .3s var(--sanft)}
  #m-menue.ist-offen .menue-liste a,#m-menue.ist-offen .menue-kacheln .kachel,#m-menue.ist-offen .menue-rubrik{opacity:1;translate:none;
    transition:opacity .35s ease,translate .45s var(--sanft)}
  #m-menue.ist-offen .menue-liste a:nth-child(2){transition-delay:.04s}
  #m-menue.ist-offen .menue-liste a:nth-child(3){transition-delay:.08s}
  #m-menue.ist-offen .menue-liste a:nth-child(4){transition-delay:.12s}
  #m-menue.ist-offen .menue-liste a:nth-child(5){transition-delay:.16s}
  #m-menue.ist-offen .menue-kacheln .kachel{transition-delay:.18s}
  #m-menue.ist-offen .menue-kacheln .kachel:nth-child(2){transition-delay:.22s}
  #m-menue.ist-offen .menue-kacheln .kachel:nth-child(3){transition-delay:.26s}

  /* Rechtstexte: Vollbild-Blatt, Schliesser bleibt kleben */
  .modal:has(.modal-karte.breit){padding:0;align-items:flex-start}
  .modal-karte.breit{width:100%;max-width:none;min-height:100%;margin:0;border-radius:0;
    padding:calc(14px + env(safe-area-inset-top)) var(--sp) 40px;transform:translateY(16px)}
  .modal.ist-offen .modal-karte.breit{transform:none}
  .modal-karte.breit .modal-zu{position:sticky;float:right;top:calc(10px + env(safe-area-inset-top));right:auto;margin:0 0 6px 12px}
  .modal-lang>h2:first-child{display:flex;align-items:center;min-height:44px}
  /* Visitenkarten: Schrift folgt der Kartenbreite (cqi), nie fest in px */
  .vk{container-type:inline-size}
  .vk-name{font-size:clamp(17px,10.4cqi,32px)}
  .vk-rolle{font-size:clamp(9.5px,5cqi,13px);letter-spacing:.1em;margin-top:2.6cqi;white-space:nowrap}
  .vk-tel{font-size:clamp(14px,7.2cqi,19px);margin-top:4.6cqi}
  .vk-zeile{font-size:clamp(8.5px,3.9cqi,12px);letter-spacing:.2em;white-space:nowrap}
  :is(.ln>span,h3,dd,.pfeil,.kicker,.fuss-name,.wege-kachel span,.bereich p,.posten-liste p,.takt-feld p,.gewerk p,.held-satz,.alex-text p){text-wrap-style:balance}
}

/* ============ Tablet hoch UND quer: 600 bis 1199.98 ============ */
@media (min-width:600px) and (max-width:1199.98px){
  .held-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,4vw,56px)}
  :root{--kopfh:77px}
  /* Karten stapeln statt decken: hintere Karte um 0,86 Kartenhoehen versetzt */
  .held-karte{aspect-ratio:100/94}
  .vk-hinten{padding:0 7% 7%}
  .h1{font-size:clamp(44px,6.4vw,66px)}
  .bereiche-liste{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bereich{padding:24px 20px 22px}
  .schritte,.posten-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
  .schritt::after{display:none}
  .wege-raster{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gewerk h3{flex:0 1 200px}
  #m-menue .modal-karte{width:min(620px,100%);margin-left:auto;border-radius:0 0 0 14px}
  .alex-in{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .alex-bild{max-width:none}
  #m-anfrage .modal-zu{right:var(--sp)}
}
@media (min-width:900px) and (max-width:1199.98px){
  .schritte,.posten-liste{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Tablet hoch bis 899: Bereiche als Querkarten, Motiv links (drei Spalten a 178px brachen Text fuenfzeilig) */
@media (min-width:600px) and (max-width:899.98px){
  .bereiche .bereiche-liste{grid-template-columns:minmax(0,1fr)}
  .bereiche .bereich{display:grid;grid-template-columns:clamp(170px,27vw,220px) minmax(0,1fr);grid-template-areas:"mot nr" "mot h" "mot p" "mot a";
    column-gap:28px;row-gap:6px;align-content:center}
  .bereiche .bereich-nr{grid-area:nr}
  .bereiche .bereich-motiv{grid-area:mot;height:auto;min-height:150px}
  .bereiche .bereich h3{grid-area:h}
  .bereiche .bereich p{grid-area:p}
  .bereiche .bereich .pfeil{grid-area:a}
}

/* ============ Handy: unter 600 ============ */
@media (max-width:599.98px){
  :root{--kopfh:69px;--kh:var(--kopfh);--bar:72px;--abst:max(68px,calc(12svh - 40px));--sp:clamp(16px,5vw,24px)}
  html{scroll-padding-top:var(--kh)}
  body{font-size:17px}

  /* Diät-Umschalter */
  .d-only.d-only{display:none}
  p.m-only.m-only,div.m-only.m-only{display:block}
  span.m-only.m-only{display:inline}
  .ln.m-only.m-only{display:block}
  html.js .ln.vz4>span{transition-delay:.24s}

  /* Kopf */
  .kopf-in{min-height:64px;gap:10px}
  .marke{gap:9px}
  .marke-zeichen .fss{height:28px}
  .marke-name b{font-size:min(16px,4.1vw);white-space:nowrap}
  .marke-name small{font-size:min(12px,3.2vw);white-space:nowrap}
  .kopf-anfrage{display:none}
  .kopf-akt .kopf-menue{min-height:44px;padding:8px 12px;gap:8px}

  /* Bodenleiste: klebt als letztes main-Kind, weicht vor der Fusszeile */
  .bodenleiste.m-only.m-only{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:sticky;bottom:0;z-index:90;
    padding:10px var(--sp) calc(10px + env(safe-area-inset-bottom));background:var(--karte);border-top:1px solid var(--linie);
    box-shadow:0 -10px 24px -18px rgba(26,26,26,.5)}
  .bodenleiste .knopf{min-height:52px;padding:10px 12px}

  .h1{font-size:clamp(40px,11.4vw,52px)}
  .h2{font-size:clamp(30px,8.4vw,38px)}
  .kicker{font-size:13px;margin-bottom:12px}
  .knopfreihe{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
  .knopfreihe{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .knopfreihe .knopf{padding:12px 8px;font-size:min(16px,4.15vw);justify-content:center;text-align:center;white-space:nowrap}
  .knopfreihe .knopf:only-child{grid-column:1/-1}

  /* Held: Text oben, Visitenkarten tragen die Restluft */
  /* Held + Bodenleiste fuellen den Schirm; die Folgesektion beginnt an der Oberkante der Leiste */
  .held{display:flex;flex-direction:column;min-height:calc(100svh - var(--kopfh) - var(--bar));padding-block:28px 22px}
  .held-in{flex:1 1 auto;display:flex;flex-direction:column;gap:0}
  .held-text{flex:0 0 auto}
  .held-satz{font-size:19px;margin-top:16px}
  /* Kartenbreite nie unter 236px (Text bleibt lesbar), hintere Karte nur um
     ein Zehntel ueberdeckt: ihr Text sitzt in der unteren Haelfte frei */
  .held-karte{--vkw:clamp(min(calc((100vw - 2 * var(--sp)) * .8),236px),calc((100svh - var(--kopfh) - var(--bar) - 400px) * .93),min(calc((100vw - 2 * var(--sp)) * .82),340px));
    --vkh:calc(var(--vkw) * .647);
    flex:1 1 auto;width:100%;max-width:none;aspect-ratio:auto;min-height:calc(var(--vkh) * 1.76 + 10px);margin-top:26px;justify-self:auto}
  .vk{width:var(--vkw)}
  .vk-vorn{left:0;top:4px}
  .vk-hinten{right:0;bottom:auto;top:min(calc(100% - var(--vkh) - 6px),calc(var(--vkh) * .9));padding:0 6% 7%}

  /* Bereiche: Querkarten, Motiv links */
  .bereiche-kopf{margin-bottom:26px}
  .bereiche-liste{gap:12px}
  .bereich{display:grid;grid-template-columns:min(32vw,140px) minmax(0,1fr);grid-template-areas:"mot nr" "mot h" "mot a";
    align-content:center;column-gap:16px;row-gap:4px;padding:16px 16px 16px 12px;border-top-width:0;border-left:6px solid var(--gruppe-dunkel)}
  .bereich-nr{grid-area:nr;font-size:13px}
  .bereich-motiv{grid-area:mot;height:min(32vw,140px);display:flex;align-items:center;justify-content:center}
  .bereich-motiv img,.bereich-motiv svg{width:100%;height:100%;object-fit:contain}
  .bereich h3{grid-area:h;font-size:22px}
  .bereich .pfeil{grid-area:a;min-height:44px;font-size:16px}
  .bereich:not(:has(.bereich-motiv:not(:empty))){grid-template-columns:minmax(0,1fr);grid-template-areas:"nr" "h" "a"}

  /* Ablauf: Kacheln 2x2 mit grosser Ziffer, Haus klein unter der Ueberschrift */
  .ablauf-kopf{display:block;margin-bottom:22px}
  .ablauf-motiv{max-width:none;margin-top:18px}
  .ablauf-motiv svg{display:block;width:auto;max-width:100%;height:min(22svh,190px);margin-inline:auto}
  .schritte{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .schritt{background:var(--karte);padding:18px 16px 20px;border-radius:var(--rad);min-height:128px}
  .schritt::after{display:none}
  .schritt-nr{width:auto;height:auto;background:none;color:var(--rost);justify-content:flex-start;font-size:40px;line-height:1;margin-bottom:12px}
  .schritt h3{font-size:19px;margin:0}

  /* Satzband */
  .satzband{padding-block:52px}
  .satzband-in{gap:24px}
  .satzband-satz{font-size:clamp(30px,8.6vw,38px)}
  .satzband .knopf{width:100%}

  /* Alex: Porträt klein neben der Überschrift */
  .alex-in:has(.alex-bild:not(:empty)){grid-template-columns:min(36vw,160px) minmax(0,1fr);gap:14px 18px;align-items:end}
  .alex-in:has(.alex-bild:not(:empty)) .alex-text{display:contents}
  .alex-in:has(.alex-bild:not(:empty)) .alex-bild{grid-column:1;grid-row:1/3}
  .alex-in:has(.alex-bild:not(:empty)) .alex-text .kicker{grid-column:2;grid-row:1;align-self:end;margin:0}
  .alex-in:has(.alex-bild:not(:empty)) .alex-text .h2{grid-column:2;grid-row:2;align-self:end;margin:0;font-size:clamp(26px,7.4vw,32px)}
  .alex-in:has(.alex-bild:not(:empty)) .alex-text>p:not(.kicker){grid-column:1/-1;margin-top:8px}
  .alex-text .h2{margin-bottom:14px}
  .alex-text p{font-size:19px}

  /* Einsatzgebiet: Fakten als Kacheln, Skizze begrenzt */
  .gebiet-in{gap:26px}
  .fakten{grid-template-columns:minmax(0,1fr);gap:0;margin-top:20px;border-bottom:1px solid var(--leinen-linie)}
  .fakten div{display:block;padding:12px 0 12px 14px;border-left:3px solid var(--bronze)}
  .fakten dt{font-size:12px}
  .fakten dd{font-size:17px;line-height:1.35;margin:0}
  .gebiet-skizze{max-height:28svh;display:flex;justify-content:center}
  .gebiet-skizze img,.gebiet-skizze svg{width:auto;max-width:100%;max-height:28svh}

  /* Kontakt: Kartenrückseite als Tippliste */
  .kontakt-in{gap:28px}
  .karte-hinten{padding:30px 20px 12px}
  .karte-name{font-size:28px}
  .karte-rolle{margin-bottom:14px}
  .karte-weg{min-height:56px;align-items:center;padding:8px 0;font-size:18px;gap:2px 12px}
  .karte-weg span{flex:0 0 76px;font-size:12px}

  /* ---------- Unterseiten ---------- */
  .seitenkopf{display:flex;flex-direction:column;min-height:calc(100svh - var(--kh) - var(--bar));padding-block:28px 22px}
  .seitenkopf-in{flex:1 1 auto;display:flex;flex-direction:column;gap:24px}
  .seitenkopf-text{flex:0 0 auto}
  .seitenkopf-text p:not(.kicker){font-size:19px;margin-top:16px}
  .seitenkopf-motiv{flex:1 1 auto;aspect-ratio:auto;min-height:180px;padding:7%}
  .seitenkopf-motiv:empty{display:none}
  /* 404: Seitenkopf ohne Motiv und Karte traegt keinen Schirm, Hoehe folgt dem Inhalt (leerboden) */
  .seitenkopf:not(:has(.seitenkopf-motiv,.karte-hinten)){min-height:0}
  .seitenkopf-motiv img,.seitenkopf-motiv svg{max-height:27svh}
  .seitenkopf-in>.karte-hinten{flex:0 0 auto;padding:44px 22px 16px}
  .seitenkopf-in>.karte-hinten .karte-name{font-size:34px}
  .seitenkopf-in>.karte-hinten .karte-weg{min-height:max(80px,calc(11svh - 12px))}
  .seitenkopf-kontakt .seitenkopf-in{gap:32px}

  .posten-liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .posten-liste li{background:var(--karte);padding:16px 14px 18px;border-top-width:4px}
  .posten-nr{font-size:14px}
  .posten-liste h3{font-size:20px;margin:6px 0 0}
  .posten-liste p{font-size:16px;margin-top:4px}

  .takt-in .h2{margin-bottom:22px}
  .takt-paar{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .takt-feld{padding:18px 14px 20px;border-left-width:5px}
  .takt-feld h3{font-size:19px}
  .takt-feld p{font-size:16px;line-height:1.45}

  .gewerk{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;row-gap:4px;padding:18px 0}
  .gewerk-nr{grid-row:1/3;font-size:24px;line-height:1.1}
  .gewerk h3,.gewerk p{flex:none;grid-column:2}
  .gewerk p{font-size:16px}

  .gegenueber-in{gap:12px}
  .gegenueber-feld{padding:24px 20px}
  .gegenueber-feld .h2{font-size:26px}

  .wege-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .wege-kachel{min-height:96px;padding:18px 16px;justify-content:center}
  .wege-kachel b{font-size:22px}
  .wege-wa{grid-column:1/-1}

  .weiter{padding-block:40px}
  .weiter-in{gap:16px}
  .weiter-liste{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;width:100%}
  .weiter-kachel{min-height:56px}

  .schluss{padding-block:56px}
  .schluss .knopfreihe{grid-template-columns:minmax(0,1fr)}

  /* Fusszeile kompakt */
  .fuss-in{padding-block:28px 14px;gap:12px}
  .fuss-unten{gap:4px 18px;padding-block:12px 20px}
  .fuss-recht{display:inline-flex;align-items:center;min-height:44px}
  .credit{margin-left:0;width:100%}
  .fuss-marke p:nth-child(2){display:none}

  /* Anfrage: Blatt von unten */
  #m-anfrage{align-items:flex-end;padding:0}
  #m-anfrage .modal-karte{width:100%;max-width:none;margin:0;border-radius:14px 14px 0 0;
    padding:16px var(--sp) calc(22px + env(safe-area-inset-bottom));transform:translateY(40px)}
  #m-anfrage.ist-offen .modal-karte{transform:none}
  #m-anfrage .modal-zu{right:var(--sp);top:16px}
  #m-anfrage .modal-vor{display:flex;align-items:center;min-height:44px;margin:0}
  #m-anfrage h2{font-size:28px}
  .modal-text{font-size:16px}
  #m-menue .menue-kacheln .kachel{min-height:60px}
}