/* 4-hands.ch — Handy- und Tablet-Ansicht.
   Aufbau nach den Grundlagen von web.dev: flexible Bilder, inhaltsbasierte
   Haltepunkte, begrenzte Zeilenlaenge, keine ausgeblendeten Inhalte. */

/* Bilder passen sich immer dem verfuegbaren Platz an — auf jeder Breite.
   Zusammen mit den width/height-Attributen im HTML verhindert das
   Layoutspruenge beim Laden. */
img:not([style*="height"]):not(.hd-logo img):not(.hd img), video:not([style*="height"]) { max-width: 100%; height: auto; }

/* Zeigergeraete: Hover-Effekte nur dort, wo es eine Maus gibt.
   Auf Touchscreens bleiben Hover-Zustaende sonst nach dem Tippen haengen. */
@media (hover: none) {
  a:hover, button:hover { filter: none !important; }
}

/* Tablet: von vier oder drei Spalten auf zwei, nicht direkt auf eine. */
@media (min-width: 641px) and (max-width: 1024px) {
  [style*="repeat(4,"], [style*="repeat(4 ,"],
  [style*="repeat(3,"], [style*="repeat(3 ,"] { grid-template-columns: repeat(2, 1fr) !important; }
  section, footer { padding-left: 28px !important; padding-right: 28px !important; }
}

/* Burger nur auf dem Handy sichtbar */
.m-burger { display: none; }

@media (max-width: 840px) {

  /* Die Menüführung bringt ihre eigene Handy-Logik mit (nav.css).
     Diese Regeln gelten nur für Seiten mit der alten Kopfzeile. */
  header:not(.hd) {
    padding: 10px 16px !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }
  header:not(.hd) img { height: 44px !important; }

  .m-burger {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    padding: 0;
    border: 1px solid oklch(0.4 0.03 50 / 0.7);
    border-radius: 4px;
    background: oklch(0.2 0.015 50 / 0.7);
    cursor: pointer;
    align-items: center;
  }
  .m-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: oklch(0.94 0.005 60);
    transition: transform 0.22s ease, opacity 0.18s ease;
  }
  .m-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .m-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .m-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ---------- Navigation als Schublade ---------- */
  header:not(.hd) nav {
    position: fixed !important;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    padding: 8px 16px 40px !important;
    background: oklch(0.14 0.01 50 / 0.985);
    backdrop-filter: blur(14px);
    overflow-y: auto;
    font-size: 19px !important;
    transform: translateX(100%);
    transition: transform 0.26s ease;
    z-index: 60;
  }
  header:not(.hd) nav.m-open { transform: translateX(0); }

  header:not(.hd) nav > a {
    padding: 16px 4px !important;
    border-bottom: 1px solid oklch(0.3 0.02 50 / 0.55);
    min-height: 24px;
  }
  /* Offerte-Button unten in der Schublade */
  header:not(.hd) nav > a[style*="background"] {
    margin-top: 20px;
    border-bottom: none;
    text-align: center;
    padding: 18px !important;
    font-size: 18px !important;
  }

  body.m-locked { overflow: hidden; }

  /* ---------- Raster auf eine Spalte ---------- */
  main [style*="grid-template-columns"], section [style*="grid-template-columns"], footer [style*="grid-template-columns"],
  section[style*="grid-template-columns"], footer[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  main [style*="grid-column"], section [style*="grid-column"], footer [style*="grid-column"] { grid-column: auto !important; }
  main [style*="grid-row"], section [style*="grid-row"], footer [style*="grid-row"] { grid-row: auto !important; }

  /* Zeilen umbrechen lassen statt abschneiden — aber nicht in der Kopfzeile */
  :not(.hd) > [style*="display: flex"]:not(.hd *):not(.hero-hint):not(.sc-rail):not(.marquee-track):not([style*="overflow-x: auto"]),
  :not(.hd) > [style*="display:flex"]:not(.hd *):not(.hero-hint):not(.sc-rail):not(.marquee-track):not([style*="overflow-x: auto"]) { flex-wrap: wrap !important; }
  /* Seitlich scrollende Galerien bleiben einzeilig und schneiden sauber ab */
  .sc-rail, [style*="overflow-x: auto"] { flex-wrap: nowrap !important; max-width: 100%; }
  .sc-rail > *, [style*="overflow-x: auto"] > * { flex-shrink: 0 !important; }
  .sc-rail figure { flex-basis: 150px !important; }
  .sc-rail img { width: 100% !important; height: auto !important; }
  .marquee { overflow: hidden !important; }
  .marquee[style*="margin: 0 -48px"] { margin: 0 -18px !important; }
  .marquee-track { width: max-content !important; max-width: none !important; }
  .marquee-track figure { flex: 0 0 220px !important; }
  main, section, footer { min-width: 0; }
  section > div, footer > div, main > div { max-width: 100% !important; box-sizing: border-box; }
  [style*="min-width"]:not(.hd *) { min-width: 0 !important; }
  [style*="white-space: nowrap"]:not(.hd *) { white-space: normal !important; }

  /* ---------- Scroll-Akte (Feuer→Nebel, Funke→CO2) ----------
     Am Handy nur knapp mehr als eine Bildschirmhöhe, sonst scrollt man
     lange durch dunkle, leere Fläche. Die Bühne ist so hoch wie der sichtbare
     Bereich (svh berücksichtigt die Browserleiste). */
  #top.hero-top, #fx-act2Wrap { height: 160svh !important; height: 160vh; min-height: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  #top.hero-top .hero-stage, #fx-act2Wrap .hero-stage { height: 100svh !important; }
  @supports (height: 100svh) {
    #top.hero-top, #fx-act2Wrap { height: 160svh !important; }
  }
  .hero-top > .hero-stage > div[style*="z-index: 2"], #fx-act2Wrap > .hero-stage > div[style*="z-index: 2"] { padding-left: 20px !important; padding-right: 20px !important; }
  .hero-hint { position: absolute; bottom: 22px; left: 18px; right: 18px; }
  #fx-status1, #fx-status2 { font-size: 13px !important; padding: 9px 16px !important; text-align: center; }

  /* ---------- Abstände ---------- */
  section, footer, main > div {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  section[style*="padding: 110px"], section[style*="padding: 120px"], section[style*="padding: 90px"] {
    padding-top: 56px !important; padding-bottom: 56px !important;
  }
  section[style*="padding: 72px"], section[style*="padding: 64px"] {
    padding-top: 44px !important; padding-bottom: 44px !important;
  }
  section [style*="gap: 72px"], section [style*="gap: 64px"], section [style*="gap: 56px"] { gap: 28px !important; }
  section[style*="min-height"] [style*="min-height: 360px"] { min-height: 220px !important; }

  /* ---------- Schrift ---------- */
  h1 { font-size: clamp(30px, 8.5vw, 40px) !important; line-height: 1.08 !important; }
  h2 { font-size: clamp(24px, 6.5vw, 30px) !important; line-height: 1.14 !important; }
  h3 { font-size: 20px !important; }
  /* Zeilenlaenge: rund 70 Zeichen lesen sich am besten */
  p, li { font-size: 17px !important; line-height: 1.6 !important; max-width: 100%; }
  /* Riesige Zahlen und Display-Texte zähmen */
  [style*="font-size: 80px"], [style*="font-size: 84px"], [style*="font-size: 88px"], [style*="font-size: 90px"], [style*="font-size: 96px"],
  [style*="font-size: 100px"], [style*="font-size: 104px"], [style*="font-size: 110px"], [style*="font-size: 112px"], [style*="font-size: 120px"],
  [style*="font-size: 128px"], [style*="font-size: 130px"], [style*="font-size: 140px"], [style*="font-size: 144px"] { font-size: clamp(34px, 9vw, 52px) !important; }
  [style*="font-size: 14.5px"], [style*="font-size: 15px"], [style*="font-size: 15.5px"] { font-size: 15px !important; }
  [style*="font-size: 16px"] { font-size: 16px !important; }

  /* ---------- Medien ---------- */
  img:not(.hd img):not([style*="height"]), video:not([style*="height"]), iframe { max-width: 100% !important; height: auto !important; }
  canvas { max-width: 100%; }
  img[style*="height"]:not(.hd img) { max-width: 100% !important; }
  svg { max-width: 100%; }
  .hd-logo img, .hd.small .hd-logo img { height: 44px !important; width: auto !important; max-width: 60vw !important; object-fit: contain; }
  .hd-main { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; }
  .hero-hint { max-width: calc(100vw - 36px); box-sizing: border-box; }
  h1, h2, h3, p, a, li, span, div { overflow-wrap: anywhere; }
  * { min-width: 0; }
  .hd-burger, .hd-logo { min-width: auto; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---------- Bedienbarkeit ---------- */
  a[style*="padding"], button, input[type="submit"] { min-height: 44px; }
  /* Textlinks in Listen und Chip-Reihen: mind. 44 px Tippfläche, ohne das Layout zu sprengen */
  a[style*="padding"] { display: inline-flex; align-items: center; box-sizing: border-box; }
  section a:not([class]):not([style*="padding"]):not(p a):not(li a) { display: inline-block; padding: 8px 0; margin: -8px 0; }
  li > a:not([style*="padding"]) { display: inline-block; padding: 6px 0; }
  input, textarea, select { font-size: 16px !important; width: 100% !important; box-sizing: border-box; }

  /* Nichts darf seitlich herausragen — Nutzer scrollen vertikal, nicht quer */
  html, body { overflow-x: hidden !important; }
}