/* Nagomi - Mobile-Anpassungen. Greift nur unterhalb von 900px.
   Hinweis: Inline-Styles werden zur Laufzeit teils normalisiert
   ("padding:0 40px" -> "padding: 0px 40px"), daher stehen wo noetig
   beide Schreibweisen bzw. strukturelle Selektoren. */

@media (max-width: 1120px) {

  /* ---------- Kopfzeile: Burger-Menue ---------- */
  [data-hdr] { padding: 0 20px !important; height: 64px !important; gap: 12px !important; }
  [data-hdr] > a > img { height: 32px !important; }
  [data-burger] { display: flex !important; }
  [data-nav] { display: none !important; }
  #navtoggle:checked ~ [data-nav] {
    display: flex !important;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column !important; align-items: stretch !important;
    justify-content: flex-start !important; flex-wrap: nowrap !important;
    gap: 0 !important; padding: 6px 20px 22px;
    background: var(--paper); border-bottom: 1px solid var(--border);
    font-size: 16px !important;
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  #navtoggle:checked ~ [data-nav] > a {
    padding: 15px 0 !important; border-radius: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important; color: var(--text-body) !important;
  }
  /* Angebote-Untermenue: im Burger-Menue flach als eigene Einträge, kein Aufklappen */
  #navtoggle:checked ~ [data-nav] > [data-subgroup] { display: block !important; }
  #navtoggle:checked ~ [data-nav] > [data-subgroup] > a {
    display: flex !important; padding: 15px 0 !important;
    border-bottom: 1px solid var(--border) !important; color: var(--text-body) !important;
  }
  #navtoggle:checked ~ [data-nav] > [data-subgroup] > a span { display: none !important; }
  #navtoggle:checked ~ [data-nav] [data-subnav] {
    display: block !important;
    position: static !important; opacity: 1 !important; visibility: visible !important;
    pointer-events: auto !important; transform: none !important;
    margin: 0 !important; padding: 0 !important; border: none !important;
    box-shadow: none !important; background: transparent !important;
    min-width: 0 !important; font-size: 16px !important;
  }
  #navtoggle:checked ~ [data-nav] [data-subnav] > a {
    padding: 15px 0 !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-body) !important;
  }
  /* Feste Pixelmasse aus der Direktbearbeitung: schon ab Burger-Breite aufloesen,
     sonst laufen Textblock und Chip-Reihe zwischen 901 und 1120px aus dem Bild */
  h1, h2, h3, p, blockquote,
  [style*="width: 928px"], [style*="width:928px"],
  [style*="width: 715px"], [style*="width:715px"],
  [style*="width: 717px"], [style*="width:717px"] {
    width: 100% !important; max-width: 100% !important; height: auto !important;
  }
  [style*="height: 516px"], [style*="height:516px"],
  [style*="height: 38px"], [style*="height:38px"] { height: auto !important; }

  #navtoggle:checked ~ [data-nav] > a:last-child {
    margin-top: 18px; padding: 15px 24px !important;
    border-radius: 999px !important; border-bottom: none !important;
    background: var(--ink) !important; color: var(--paper) !important;
    justify-content: center;
  }
}

@media (max-width: 900px) {

  /* ---------- Raster einspaltig ---------- */
  [style*="grid-template-columns"]:not([data-block]) { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-column"], [style*="grid-area"], [style*="grid-row"] { grid-area: auto !important; }
  [style*="grid-auto-rows"] { grid-auto-rows: auto !important; }
  /* Kennzahlen-Reihen bleiben zweispaltig */
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* Bildergalerie: Kacheln brauchen ohne feste Zeilenhoehe ein Seitenverhaeltnis */
  #impressionen > div:last-child > div { aspect-ratio: 4 / 3; }
  #impressionen > div:last-child > div:last-child { aspect-ratio: auto; }

  /* ---------- Seitenrand ---------- */
  [style*="max-width:1320px"],
  [style*="max-width: 1320px"] { padding-left: 20px !important; padding-right: 20px !important; }

  /* ---------- Abstaende ---------- */
  [style*="gap:80px"], [style*="gap: 80px"],
  [style*="gap:72px"], [style*="gap: 72px"] { gap: 40px !important; }
  [style*="gap:60px"], [style*="gap: 60px"] { gap: 32px !important; }
  [style*="gap:40px"], [style*="gap: 40px"] { gap: 24px !important; }
  [style*="padding:120px 40px 0"], [style*="padding: 120px 40px 0"],
  [style*="padding:130px 40px 0"], [style*="padding: 130px 40px 0"],
  [style*="padding:110px 40px 0"], [style*="padding: 110px 40px 0"] { padding-top: 64px !important; }
  [style*="padding:110px 40px"], [style*="padding: 110px 40px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  [style*="padding:150px 40px"], [style*="padding: 150px 40px"] { padding-top: 76px !important; padding-bottom: 76px !important; }
  [style*="padding:90px 40px"], [style*="padding: 90px 40px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding:70px 40px 0"], [style*="padding: 70px 40px 0"] { padding-top: 32px !important; }
  [style*="margin-top:130px"], [style*="margin-top: 130px"],
  [style*="margin-top:120px"], [style*="margin-top: 120px"] { margin-top: 64px !important; }
  [style*="padding:34px 32px"], [style*="padding: 34px 32px"] { padding: 26px 22px !important; }

  /* ---------- Feste Groessen aus der Direktbearbeitung ---------- */
  h1, h2, h3, p, blockquote { width: auto !important; height: auto !important; max-width: 100% !important; }
  [style*="width: 928px"], [style*="width: 715px"], [style*="width: 717px"] { width: auto !important; height: auto !important; }

  /* ---------- Bildzuschnitte: Hochformate werden auf Mobil zu hoch ---------- */
  [style*="aspect-ratio:4/5"], [style*="aspect-ratio: 4 / 5"],
  [style*="aspect-ratio:3/4"], [style*="aspect-ratio: 3 / 4"],
  [style*="aspect-ratio:5/6"], [style*="aspect-ratio: 5 / 6"] { aspect-ratio: 4 / 3 !important; }
  /* Portraet auf der Startseite (#till): eigenes Seitenverhaeltnis, sonst wird oben abgeschnitten */
  #till-frame { aspect-ratio: auto !important; height: auto !important; }
  [style*="height:230px"], [style*="height: 230px"],
  [style*="height:210px"], [style*="height: 210px"] { height: auto !important; aspect-ratio: 16 / 10; }

  /* ---------- Hero ---------- */
  #top, #hero { height: auto !important; min-height: 78vh !important; max-height: 720px; }
  #top > div:last-child, #hero > div:last-child { padding: 104px 20px 48px !important; }
  #top > div:last-child > div:first-child,
  #hero > div:last-child > div:first-child { font-size: 12px !important; margin-bottom: 16px !important; }

  /* ---------- Typografie und Details ---------- */
  [style*="font-size: 40px"], [style*="font-size:40px"] { font-size: 26px !important; }
  [style*="text-align:right"], [style*="text-align: right"] { text-align: left !important; }
  [style*="margin-left:auto"], [style*="margin-left: auto"] { margin-left: 0 !important; }
  img { max-width: 100%; }
  a, p, li, span, blockquote { overflow-wrap: break-word; }
}

@media (max-width: 520px) {
  [style*="padding:30px 30px 34px"], [style*="padding: 30px 30px 34px"] { padding: 24px 22px 28px !important; }
  [style*="padding:16px 32px"], [style*="padding: 16px 32px"] { padding: 15px 24px !important; }
}

/* ---------- Handy: Grundlagen ---------- */
@media (max-width: 900px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }
  a, button, label, summary { -webkit-tap-highlight-color: rgba(34,87,74,.12); }
  /* iOS zoomt bei Eingabefeldern unter 16px hinein */
  input, select, textarea { font-size: 16px !important; }
  /* Randlose Displays */
  [data-hdr] { padding-left: max(20px, env(safe-area-inset-left)) !important; padding-right: max(20px, env(safe-area-inset-right)) !important; }
}

/* ---------- Startseite: Hero soll das Video zeigen ---------- */
@media (max-width: 900px) {
  #top, #hero { min-height: 92vh !important; max-height: none !important; }
  #top > div:last-child, #hero > div:last-child { padding: 0 20px 44px !important; }
  #top > div:last-child > div:first-child,
  #hero > div:last-child > div:first-child { font-size: 11px !important; letter-spacing: .18em !important; margin-bottom: 14px !important; }
  #top h1, #hero h1 { font-size: clamp(30px, 8vw, 44px) !important; line-height: 1.08 !important; max-width: 18ch !important; }
  #top > div:last-child > p:nth-of-type(1),
  #hero > div:last-child > p:nth-of-type(1) { font-size: 18px !important; margin-top: 16px !important; }
  #top > div:last-child > p:nth-of-type(2),
  #hero > div:last-child > p:nth-of-type(2) { font-size: 15px !important; line-height: 1.5 !important; margin-top: 10px !important; }
  #top > div:last-child > div:last-child,
  #hero > div:last-child > div:last-child { margin-top: 24px !important; gap: 10px !important; }
  #top > div:last-child a, #hero > div:last-child a { padding: 14px 22px !important; font-size: 15px !important; }
  /* Verlauf nur unten, damit die obere Bildhaelfte frei bleibt */
  #top > div:first-child > div:last-child,
  #hero > div:first-child > div:last-child {
    background: linear-gradient(to top, rgba(20,20,20,.82) 0%, rgba(20,20,20,.34) 44%, rgba(20,20,20,0) 74%) !important;
  }
}

@media (max-width: 560px) {
  #top > div:last-child > div:last-child a,
  #hero > div:last-child > div:last-child a { flex: 1 1 100%; justify-content: center; }
  #top h1, #hero h1 { font-size: clamp(28px, 7.4vw, 40px) !important; }
  #top > div:last-child > div:first-child,
  #hero > div:last-child > div:first-child { margin-bottom: 12px !important; }
  #top > div:last-child > p:nth-of-type(2),
  #hero > div:last-child > p:nth-of-type(2) { font-size: 14.5px !important; line-height: 1.45 !important; }
  #top > div:last-child > div:last-child,
  #hero > div:last-child > div:last-child { margin-top: 20px !important; }
}

/* ---------- Touch-Ziele ---------- */
@media (max-width: 900px) and (pointer: coarse) {
  a[style*="border-radius:999px"], button[style*="border-radius:999px"],
  a[style*="border-radius: 999px"], button[style*="border-radius: 999px"] { min-height: 44px; }
}

/* ---------- Startseite: Textblock + Merkmal-Chips ---------- */
@media (max-width: 900px) {
  /* Feste Pixelmasse aus der Direktbearbeitung wuerden auf dem Handy ueberlaufen */
  [style*="width: 715px"], [style*="width:715px"],
  [style*="width: 717px"], [style*="width:717px"] {
    width: 100% !important; max-width: 100% !important; height: auto !important;
  }
  [style*="height: 516px"], [style*="height:516px"],
  [style*="height: 38px"], [style*="height:38px"] { height: auto !important; }
}

/* ---------- Ueber Nagomi: Portraet vollstaendig zeigen ---------- */
@media (max-width: 900px) {
  #till-portrait { display: block; }
  /* Rahmen folgt dem Seitenverhaeltnis des Fotos (815x1120), damit oben nichts abgeschnitten wird */
  #portrait-frame {
    height: auto !important;
    aspect-ratio: 1760 / 2258;
    max-height: 72vh;
  }
}

/* ---------- Handy: Elemente, die nur auf grossen Schirmen sinnvoll sind ----------
   Gleiche Grenze wie das Burger-Menue, damit die Chip-Reihe in der ganzen
   Mobil-/Tablet-Ansicht verschwindet. */
@media (max-width: 1120px) {
  [data-hide-mobile] { display: none !important; }
}

/* ---------- Angebote-Untermenue: reines CSS, damit es auch im Export laeuft ---------- */
[data-subgroup]:hover > [data-subnav],
[data-subgroup]:focus-within > [data-subnav] {
  opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important;
}
/* unsichtbare Bruecke ueber den 10px-Abstand, damit das Menue beim Hinuebergehen offen bleibt.
   Nur in der Desktop-Navigation, wo das Untermenue absolut positioniert ist. */
@media (hover: hover) and (min-width: 1121px) {
  [data-subgroup] > [data-subnav]::before {
    content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
  }
}

/* ---------- Handy: Bilder fangen keine Wischgesten ab ----------
   Auf Touch-Geraeten liegen die Bildfelder "eine Ebene nach hinten":
   Beruehrungen gehen an die Seite bzw. den umgebenden Link, nie an das
   Bild selbst. Damit scrollt die Seite auch mit dem Finger auf einem Bild. */
@media (pointer: coarse), (max-width: 1120px) {
  image-slot, image-slot * { pointer-events: none !important; touch-action: pan-y pinch-zoom !important; }
  a image-slot, a image-slot * { pointer-events: none !important; }
}

/* ---------- Handy/Tablet: Hero-Video vollstaendig zeigen ----------
   "object-fit: cover" schnitt die Seiten ab, dadurch war die Schlussszene
   (Schriftzug mit Subline) nicht komplett sichtbar. Bis 1120px wird der
   Hero daher gestapelt: Video in voller Breite im Originalformat,
   Text darunter auf dunklem Grund. */
@media (max-width: 1120px) {
  #top, #hero {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    background: #141414 !important;
  }
  #hero-media, #top > div:first-child, #hero > div:first-child {
    position: relative !important;
    inset: auto !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    
    background: #141414 !important;
    overflow: visible !important;
  }
  #hero-video, #top video, #hero video {
    position: relative !important;
    inset: auto !important;
    top: auto !important; left: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: contain !important;
    display: block !important;
  }
  /* Verlauf und weisse Rahmenlinie entfallen, der Text steht jetzt darunter */
  #hero-media > div:not(#hero-frame),
  #top > div:first-child > div:last-child,
  #hero > div:first-child > div:last-child { display: none !important; }
  #top > div:nth-child(2):not(#hero-mobile), #hero > div:nth-child(2):not(#hero-mobile) { display: none !important; }
  #top > div:last-child, #hero > div:last-child {
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 30px 20px 46px !important;
  }
}

/* ---------- Touch: Bilder und Videos fangen keine Wischgesten ab ----------
   Im Export sind alle Bilder statische <img>-Elemente. Auf Touch-Geraeten
   liegen sie "eine Ebene nach hinten": Beruehrungen gehen an die Seite bzw.
   den umgebenden Link, nie an das Bild selbst. */
@media (pointer: coarse), (max-width: 1120px) {
  img, video, image-slot, image-slot * {
    pointer-events: none !important;
    touch-action: pan-y pinch-zoom !important;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
  }
  /* Bildrahmen duerfen das Scrollen nicht abfangen */
  [style*="overflow:hidden"], [style*="overflow: hidden"] { touch-action: pan-y pinch-zoom; }
}

/* ---------- Portraets vollstaendig zeigen (bis 1120px) ----------
   Der Rahmen folgt dem Seitenverhaeltnis des Fotos, sonst schneidet die
   allgemeine 3/4-auf-4/3-Regel den oberen Bildrand ab. */
@media (max-width: 1120px) {
  #till-frame {
    aspect-ratio: auto !important;
    height: auto !important;
    max-height: none !important;
  }
  #nagomi-till {
    aspect-ratio: auto !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  #portrait-frame {
    aspect-ratio: 1200 / 1599 !important;
    height: auto !important;
    max-height: none !important;
  }
  #till-portrait { display: block; aspect-ratio: auto !important; }
}

/* ---------- Handy: Zeile darf umbrechen ---------- */
@media (max-width: 1120px) {
  [data-nowrap-desktop] { white-space: normal !important; width: auto !important; }
}

/* ---------- Handy: gruenes Hinweis-Fenster passt sich der Breite an ---------- */
@media (max-width: 1120px) {
  [data-nowrap-desktop] {
    white-space: normal !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    font-size: 15px !important;
    padding: 16px 18px !important;
    box-sizing: border-box !important;
  }
}

/* ---------- Handy: Hinweiszeile bleibt im Bild ---------- */
@media (max-width: 1120px) {
  [data-note-right] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
  }
}

/* ---------- Tablet-Bereich: Label/Text-Zeilen einspaltig ---------- */
@media (max-width: 1120px) {
  [data-topic-row] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
}


/* ---------- Handy: Bilder vollstaendig zeigen (ueberschreibt fruehere Zuschnitte) ----------
   Bildrahmen geben ihre feste Hoehe bzw. ihr Seitenverhaeltnis auf, das Bild
   bestimmt selbst seine Hoehe. Dadurch wird nichts mehr beschnitten. */
@media (max-width: 1120px) {
  div[style*="aspect-ratio"] > img,
  div[style*="position:relative"]:has(> img),
  div[style*="position: relative"]:has(> img) {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  div[style*="position:relative"] > img,
  div[style*="position: relative"] > img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }
  /* Galeriekacheln auf der Startseite: ohne feste Hoehe reicht die natuerliche Bildhoehe */
  #impressionen > div:last-child > div { aspect-ratio: auto !important; }
}

/* ---------- Handy: Hero "Privatpersonen" gestapelt ----------
   Das Landschaftsbild wurde im 70vh-Rahmen stark beschnitten. Auf dem Handy
   steht es daher in voller Breite im Originalformat, der Text darunter. */
@media (max-width: 1120px) {
  #hero {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    background: #141414 !important;
  }
  #hero > div:first-child {
    position: relative !important;
    inset: auto !important;
  }
  #hero-video {
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }
  #hero > div:nth-child(2):not(#hero-mobile) { display: none !important; }
  #hero > div:last-child {
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 28px 20px 44px !important;
  }
  #hero h1 { font-size: clamp(30px, 8vw, 44px) !important; }
  #hero p { font-size: 16px !important; }
}


/* ---------- Handy: auch freistehende Bilder vollstaendig zeigen ----------
   Bilder, die per "height:0; flex:1" die Hoehe ihrer Textspalte uebernehmen,
   waeren auf dem Handy null Pixel hoch bzw. stark beschnitten. */
@media (max-width: 1120px) {
  img[style*="object-fit:cover"],
  img[style*="object-fit: cover"] {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }
}

@media (max-width: 1120px) {
  #lebenszeit { padding: 32px 0 0 !important; }
  #lebenszeit [data-lz="wrap"] { padding-left: 20px !important; padding-right: 20px !important; }
  #lebenszeit [data-lz="sub"] { padding: 0 20px !important; margin-bottom: 36px !important; letter-spacing: .16em !important; }
  #lebenszeit [data-block="bar"] { height: 30px !important; }
  #lebenszeit h2 { font-size: 24px !important; }
  #lebenszeit [data-lz="wrap"] > div { padding: 18px 16px 20px !important; border-radius: 18px !important; }
  #lebenszeit [data-lz="wrap"] > div > div { gap: 22px !important; }
  #lebenszeit #lz-hours, #lebenszeit #lz-screen, #lebenszeit #lz-free, #lebenszeit #lz-life { font-size: 26px !important; }

}

/* ---------- Startseite: Hero-Foto (loest das Hero-Video ab) ----------
   Die allgemeine "object-fit: cover"-Regel weiter oben wuerde das Foto auf
   contain stellen; hier bewusst ausgenommen, damit es gestapelt in voller
   Breite und im Originalformat erscheint. */
@media (max-width: 1120px) {
  #hero-image {
    position: relative !important;
    inset: auto !important;
    top: auto !important; left: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }
}

/* Der Bildrahmen des Startseiten-Heros steht auf dem Handy wieder im Fluss */
@media (max-width: 1120px) {
  #hero-frame {
    display: block !important;
    min-height: 0 !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
  }
  #hero-blend { display: none !important; }
  #hero-frame > #hero-image { height: auto !important; }
}

/* Startseite "Wer steckt hinter Nagomi": Rahmen folgt dem Bild,
   damit kein leerer Streifen zwischen Foto und Text entsteht. */
@media (max-width: 1120px) {
  #till-frame {
    aspect-ratio: auto !important;
    height: auto !important;
    max-height: none !important;
  }
  #nagomi-till {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }
}

/* ---------- Handy: Startseiten-Hero als einfaches Bild im Textfluss ----------
   Die Ueberlagerung (absolut positioniertes Bild mit Verlaeufen) wird auf
   kleinen Schirmen komplett ausgeblendet und durch ein normales <img>
   ersetzt. Keine :has()-Selektoren, keine Positions-Rueckbauten — das
   funktioniert in jedem mobilen Browser. */
@media (max-width: 1120px) {
  #hero-media, #hero-border { display: none !important; }
  #hero-title { display: none !important; }
  #hero-eyebrow { color: var(--ember, #FF8C00) !important; font-size: 15px !important; letter-spacing: -0.005em !important; text-align: center !important; margin: 0 0 20px !important; }
  #top > #hero-mobile, #hero-mobile { display: block !important; position: relative !important; }
  #hero-image-mobile {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Unternehmen: Hero-Bild fuellt auf dem Desktop die Texthoehe, auf dem Handy eigene Hoehe */
@media (max-width: 1120px) {
  #unt-hero-frame { height: auto !important; min-height: 0 !important; aspect-ratio: var(--unt-ar, 4 / 3); }
  #unt-hero { position: static !important; width: 100% !important; height: auto !important; }
}

/* News-Aufmacher: Bild schliesst auf dem Desktop mit Ueberschrift und letzter Zeile ab */
@media (max-width: 1120px) {
  #news-lead-frame { margin: 0 !important; aspect-ratio: 16 / 10; }
}

/* ---------- Handy: Ueber Nagomi ---------- */
@media (max-width: 1120px) {
  #qual-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px 20px !important; }
  #nagomi-text { columns: 1 !important; column-rule: none !important; }
}
@media (max-width: 460px) {
  #qual-grid { grid-template-columns: minmax(0, 1fr) !important; }
}