/* FRYDENT – mobile retrofit v6 (tylko <900px / <600px)
   ZMIANY v6 (po ZIP7):
   0. C Design dodał własne @media w stronach (wbrew umowie) — usunięte z HTML.
      Przejęte z nich do v6: ukrycie podmenu .ndrop na dotyku, obsługa nowych
      wysokości kontenerów zdjęć. Jego reguły psuły header (display:none na
      jedynym CTA) i listwę Schnellkontakt (translateX 44px, gap 8px).
   ZMIANY v5:
   1. Pływanie strony: html+body overflow clip, wszystkie selektory [style*=...]
      w DWÓCH wariantach (runtime JS przepisuje style="..." dodając spacje po
      dwukropkach, przez co selektory bez spacji przestają trafiać po inicjalizacji),
      min-width:0 przeciw rozpychaniu przez min-content we flex/grid.
   2. Menu: 14px, własny rząd (2 linie OK), większy odstęp od logo.
   3. Kadry: image-slot renderuje w shadow DOM (object-position z zewnątrz NIE działa),
      więc kadrem sterujemy proporcjami RAMY (aspect-ratio kontenera) — portrety
      dostają proporcje desktopowe (kadr identyczny z zaakceptowanym), team-warm
      proporcje samej fotografii (widać całość).
   4. [2c/2d] miejsca na przesunięcia kadrów per zdjęcie — po kierunkach od Tatiany. */

/* Hamburger-Button: standardmäßig (Desktop) versteckt, nur auf Mobil sichtbar */
.hamburger-btn {
  display: none;
  align-items: center; justify-content: center;
  flex: none; width: 44px; height: 44px; padding: 0;
  background: none; border: none; cursor: pointer; color: #1E2D4D;
}
.hamburger-btn svg { display: block; }

@media (max-width: 900px) {

  /* Portal-Banner-Pin (Deko-Nadel) auf Mobil ausblenden — steht dort nur störend ab */
  [style*="rotate(56deg)"] { display: none !important; }
  /* Portal-Banner (Link ins Patientenportal) auf Mobil: kein Rest-Gap der Nadel, mehr Außenabstand */
  a[href*="info.frydent.de"][style*="border-radius:14px"] { gap: 0 !important; margin-top: 24px !important; margin-bottom: 28px !important; }

  /* ===== Mobiles Hamburger-Menü ===== */
  /* Kopfleiste: eine schlanke Zeile — Logo links, Hamburger rechts */
  header[data-screen-label="Nav"] {
    padding-top: 12px !important; padding-bottom: 12px !important;
    flex-wrap: nowrap !important; justify-content: space-between !important; gap: 12px !important;
    position: relative;
  }
  header[data-screen-label="Nav"] > a:first-child { width: auto !important; justify-content: flex-start !important; flex: 0 1 auto; }
  /* Hamburger-Button sichtbar auf Mobil */
  .hamburger-btn { display: flex !important; }
  /* Menü klappt als schlanke Liste unter dem Icon (rechts) auf */
  header[data-screen-label="Nav"] > nav,
  header[data-screen-label="Nav"] > div:last-child {
    display: none !important;
    position: absolute; top: calc(100% + 6px); right: 16px; left: auto;
    width: 240px; max-width: calc(100vw - 32px);
    flex-direction: column !important; align-items: stretch !important;
    background: #ffffff; border: 1px solid #E7E1D3; border-radius: 12px;
    box-shadow: 0 16px 30px -12px rgba(30,45,77,.28);
    padding: 6px 0 !important; gap: 0 !important; margin: 0 !important;
    z-index: 200; white-space: normal !important; overflow: hidden;
  }
  /* Geöffneter Zustand */
  header[data-screen-label="Nav"].menu-open > nav { display: flex !important; }
  header[data-screen-label="Nav"].menu-open > div:last-child { display: none !important; } /* Aktionsleiste bleibt zu; Buchen ist in der Schnellkontakt-Leiste unten */
  /* Menüpunkte: eine Hauptseite pro Zeile */
  header[data-screen-label="Nav"] > nav > a,
  header[data-screen-label="Nav"] > nav > .ndrop > a {
    display: block !important; width: 100%; box-sizing: border-box;
    padding: 13px 20px !important; font-size: 14.5px !important;
    border-bottom: 1px solid #F3EFE6 !important; text-align: left !important;
    border-top: none !important; white-space: nowrap;
  }
  header[data-screen-label="Nav"] > nav > a:last-child,
  header[data-screen-label="Nav"] > nav > .ndrop:last-child > a { border-bottom: none !important; }

  /* Aktive Seite: stabiler goldener Akzent links statt wandernder Unterstrich */
  header[data-screen-label="Nav"] > nav > a[aria-current="page"],
  header[data-screen-label="Nav"] > nav > .ndrop > a[aria-current="page"] {
    border-left: 3px solid #C4A44E !important; padding-left: 17px !important;
    background: rgba(196,164,78,.07) !important; color: #3D5A98 !important;
  }
  header[data-screen-label="Nav"] > nav > .ndrop { width: 100%; display: block !important; }
  /* Dropdown-Eltern: Pfeil sichtbar, dreht beim Aufklappen */
  header[data-screen-label="Nav"] > nav > .ndrop > a { display: flex !important; align-items: center; justify-content: space-between; }
  header[data-screen-label="Nav"] > nav > .ndrop > a svg { display: block !important; transition: transform .2s ease; flex: none; width: 16px !important; height: 16px !important; margin: -8px -8px -8px 8px; padding: 8px; box-sizing: content-box; }
  header[data-screen-label="Nav"] > nav > .ndrop.expanded > a svg { transform: rotate(180deg); }
  /* Untermenüs: standardmäßig zu, aufgeklappt bei .expanded */
  header[data-screen-label="Nav"] > nav .nmenu {
    display: block !important; position: static !important; visibility: visible !important;
    max-height: 0 !important; overflow: hidden !important; opacity: 0 !important;
    padding: 0 !important; margin: 0 !important; border: 0 !important;
    transition: max-height .34s ease, opacity .24s ease !important;
  }
  header[data-screen-label="Nav"] > nav > .ndrop.expanded .nmenu {
    max-height: 340px !important; opacity: 1 !important;
  }
  header[data-screen-label="Nav"] > nav > .ndrop.expanded .nmenu > span {
    display: block !important; box-shadow: none !important; border: none !important;
    border-radius: 0 !important; padding: 0 !important; min-width: 0 !important; background: #FBFAF6 !important;
  }
  header[data-screen-label="Nav"] > nav > .ndrop.expanded .nmenu a {
    display: block !important; padding: 11px 20px 11px 24px !important; text-align: left !important;
    font-size: 13px !important; color: #3D5A98 !important;
    border-bottom: 1px solid #F3EFE6 !important; text-transform: none !important; white-space: normal;
  }
  /* Aktionsleiste ganz aus (Buchen unten in der Schnellkontakt-Leiste vorhanden) */
  header[data-screen-label="Nav"] > div:last-child { display: none !important; }

  /* ========== 1. STOP pływaniu strony ========== */
  html, body { overflow-x: hidden; overflow-x: clip; max-width: 100vw; }

  :where(div, section, article, header, footer, span, p, h1, h2, h3, a, li, ul) { min-width: 0; }

  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:auto 1fr"],
  [style*="grid-template-columns: auto 1fr"] { grid-template-columns: auto 1fr !important; }
  [style*="grid-template-columns:120px 40px"],
  [style*="grid-template-columns: 120px 40px"] { grid-template-columns: 72px 20px minmax(0,1fr) !important; }

  /* wszystkie duże sztywne szerokości inline → pełna szerokość kolumny */
  [style*="width:420px"], [style*="width: 420px"],
  [style*="width:460px"], [style*="width: 460px"],
  [style*="width:780px"], [style*="width: 780px"],
  [style*="width:1100px"], [style*="width: 1100px"],
  [style*="width:1180px"], [style*="width: 1180px"],
  [style*="width:1340px"], [style*="width: 1340px"],
  [style*="width:1440px"], [style*="width: 1440px"] { width: 100% !important; max-width: 100% !important; }
  [style*="width:607px"], [style*="width: 607px"] { width: auto !important; height: auto !important; flex-wrap: wrap !important; }
  [style*="width:220px"], [style*="width: 220px"],
  [style*="width:230px"], [style*="width: 230px"] { max-width: 100% !important; }
  [style*="min-width"] { min-width: 0 !important; }
  img, video, iframe, image-slot { max-width: 100% !important; }

  [style*="display:flex"][style*="gap"],
  [style*="display: flex"][style*="gap"] { flex-wrap: wrap !important; }

  /* GENERYCZNIE: każdy inline padding z 56px po bokach → 18px (łapie wszystkie
     warianty 30/40/44/…/76px 56px [i 3-wartościowe], ze spacjami i bez) */
  [style*="px 56px"] { padding-left: 18px !important; padding-right: 18px !important; }
  /* redukcja pionowa dla najcięższych sekcji (jak w v4) */
  [style*="padding:76px 56px"], [style*="padding: 76px 56px"],
  [style*="padding:70px 56px"], [style*="padding: 70px 56px"],
  [style*="padding:66px 56px"], [style*="padding: 66px 56px"],
  [style*="padding:66px 60px"], [style*="padding: 66px 60px"],
  [style*="padding:64px 56px"], [style*="padding: 64px 56px"],
  [style*="padding:58px 56px"], [style*="padding: 58px 56px"],
  [style*="padding:54px 56px"], [style*="padding: 54px 56px"],
  [style*="padding:44px 56px"], [style*="padding: 44px 56px"] { padding: 36px 18px !important; }
  [style*="padding:40px 56px"], [style*="padding: 40px 56px"] { padding: 28px 18px !important; }
  [style*="padding:26px 56px"], [style*="padding: 26px 56px"],
  [style*="padding:20px 56px"], [style*="padding: 20px 56px"] { padding: 20px 18px !important; }

  /* ========== 2. MENU górne (v5.1: mniejsze taby, więcej luzu) ========== */
  header { row-gap: 18px !important; }
  nav {
    font-size: 13px !important;
    letter-spacing: 0.3px !important;
    flex-basis: 100% !important;
    flex-wrap: wrap !important; white-space: normal !important;
    row-gap: 12px !important; column-gap: 20px !important;
    justify-content: center !important;
  }
  /* przyciski Termin anfragen / Online buchen — mniejsze pigułki */
  header a[style*="border-radius: 999px"],
  header a[style*="border-radius:999px"] {
    padding: 8px 16px !important;
    font-size: 12px !important;
    letter-spacing: 0.4px !important;
  }
  /* v5.2: kontener pigułek na całą szerokość i wycentrowany */
  header div:has(> a[style*="border-radius: 999px"]),
  header div:has(> a[style*="border-radius:999px"]) {
    display: flex !important; justify-content: center !important; flex: 1 1 100% !important;
  }
  /* v5.2: więcej światła między logo a menu */
  nav { margin-top: 8px !important; }

  /* ========== 3. KADRY (image-slot = shadow DOM, sterujemy ramą) ========== */
  [style*="height:580px"], [style*="height: 580px"] { height: auto !important; aspect-ratio: 2/1 !important; }
  [style*="height:420px"], [style*="height: 420px"] { height: auto !important; aspect-ratio: 3/2 !important; }

  /* portrety lekarzy — proporcje desktopowe 621:400 (statischer Export: <img>, gezielt ueber die 400px-Rahmen) */
  [style*="height:400px;overflow:hidden"] { width: 100% !important; height: auto !important; aspect-ratio: 621/400 !important; }

  /* portrety zespolu — Flip-Kacheln (nur auf praxis-team.html), Desktop-Proportion 407:320 statt fixe 320px */
  .flip { width: 100% !important; height: auto !important; aspect-ratio: 407/320 !important; }
  /* Gruppenfoto (height:580px) wird bereits ueber die 2/1-Regel oben geformt und ist ok */

  /* [2c] przesunięcia kadru 4 portretów — DO UZUPEŁNIENIA (kierunki od Tatiany) */
  /* [2d] header 1 (c-hero): przesunięcie Nikoliny — DO UZUPEŁNIENIA (kierunek) */

  /* ========== 4. Dolna listwa Schnellkontakt (bez zmian od v4) ========== */
  [data-screen-label="Schnellkontakt"] {
    top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    transform: none !important; flex-direction: row !important; gap: 0 !important;
    z-index: 120 !important; flex-wrap: nowrap !important;
  }
  [data-screen-label="Schnellkontakt"] a {
    transform: none !important; border-radius: 0 !important;
    flex: 1 1 0 !important; justify-content: center !important;
    padding: 13px 6px !important; box-shadow: none !important; gap: 0 !important;
    flex-wrap: nowrap !important; min-width: 0 !important;
  }
  [data-screen-label="Schnellkontakt"] a span { display: none !important; }
  body { padding-bottom: 58px !important; }
  footer { margin-bottom: 0 !important; }

  [style*="bottom: 170px"], [style*="bottom:170px"] { bottom: 10px !important; left: 14px !important; font-size: 20px !important; }

  /* ========== 5. v6: nowy layout ZIP7 ========== */
  /* v6.1: podmenu nav (.ndrop) — akordeon na tap (skrypt dodaje .open);
     hover na dotyku bywa "lepki", więc wyłączony */
  .ndrop:hover > .nmenu { visibility: hidden; opacity: 0; }
  .ndrop.open { flex-basis: 100% !important; flex-wrap: wrap !important; justify-content: center !important; }
  .ndrop.open > .nmenu {
    display: block !important; visibility: visible !important; opacity: 1 !important;
    position: static !important; flex-basis: 100% !important; padding: 8px 0 0 !important;
  }
  .ndrop.open > .nmenu a { text-align: left !important; }

  /* v6.1: hero — cytat tylko na desktopie; na mobile podpis+przyciski na dół zdjęcia */
  [data-screen-label="Hero"] span[style*="clamp(16px"],
  [data-screen-label="Hero"] span[style*="clamp(14px"] { display: none !important; }
  [data-screen-label="Hero"] div[style*="margin-top:30px"],
  [data-screen-label="Hero"] div[style*="margin-top: 30px"] { margin-top: auto !important; order: 8; }
  [data-screen-label="Hero"] div[style*="pointer-events:auto"],
  [data-screen-label="Hero"] div[style*="pointer-events: auto"] { order: 9; margin-top: 14px !important; margin-bottom: 44px !important; }

  /* v6.2: podpis "Nikolina" w hero — na dachu był niewidoczny; jasnobeżowy + cień */
  [data-screen-label="Hero"] span[style*="Dafoe"] {
    color: #F5E9CB !important;
    text-shadow: 0 1px 3px rgba(30,45,77,.55), 0 2px 14px rgba(30,45,77,.45) !important;
  }

  /* v6.1: karty zespołu — "lepki" hover nie może trzymać obrotu (tap steruje klasą) */
  .flip:hover:not(.is-flipped) .flip-inner { transform: none !important; }

  /* v8: obrót kart — desktop zwolniony na 1,25s (Basis), Mobil bleibt 0,95s */
  .flip-inner { transition: transform .95s cubic-bezier(.4,.15,.2,1) !important; }

  /* v9: Notdienst-Zeile auf Mobil in zwei Zeilen (Umbruch nach dem Doppelpunkt) */
  .nd-br { display: inline !important; }

  /* v6.1: akapity z zafiksowaną wysokością z edytora (np. 83px pod Teamfoto)
     wylewały się na kolejne bloki */
  p[style*="height:"] { height: auto !important; }

  /* hero (index): stała, niższa rama zamiast clamp(524px,66vh,648px) */
  [style*="height:clamp(524px"], [style*="height: clamp(524px"] { height: 480px !important; }

  /* powitalny podpis w hero miał white-space:nowrap → wyjeżdżał poza ekran */
  span[style*="white-space:nowrap"], span[style*="white-space: nowrap"] { white-space: normal !important; }

  /* nowe wysokości kontenerów zdjęć (image-slot w środku, rama przez aspect-ratio) */
  [style*="height:640px"], [style*="height: 640px"],
  [style*="height:460px"], [style*="height: 460px"],
  [style*="height:440px"], [style*="height: 440px"] { height: auto !important; aspect-ratio: 4/3 !important; }
  [style*="height:400px"], [style*="height: 400px"],
  [style*="height:360px"], [style*="height: 360px"],
  [style*="height:340px"], [style*="height: 340px"],
  [style*="height:330px"], [style*="height: 330px"] { height: auto !important; aspect-ratio: 3/2 !important; }

  /* ========== geschichte.html: Timeline ========== */
  /* Desktop-Raster [Jahr | Punkt+Linie | Text] → einspaltig, Jahr zentriert über dem Punkt */
  [data-screen-label="Historie Timeline"] [style*="grid-template-columns:132px 40px minmax(0,1fr)"] {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; text-align: center !important;
    gap: 6px !important; padding-bottom: 40px !important;
  }
  /* Jahr / Generation-Label: zentriert, nicht mehr rechtsbündig */
  [data-screen-label="Historie Timeline"] [style*="grid-template-columns:132px 40px minmax(0,1fr)"] > div:first-child {
    text-align: center !important;
  }
  /* Punkt-Spalte: nur der Punkt bleibt, die vertikale Linie entfällt einspaltig */
  [data-screen-label="Historie Timeline"] [style*="grid-template-columns:132px 40px minmax(0,1fr)"] > div:nth-child(2) > div:last-child {
    display: none !important;
  }
  [data-screen-label="Historie Timeline"] [style*="grid-template-columns:132px 40px minmax(0,1fr)"] > div:nth-child(2) > div:first-child {
    margin-top: 4px !important;
  }
  /* Textblock: zentriert, linkes Einrück-Padding weg */
  [data-screen-label="Historie Timeline"] [style*="grid-template-columns:132px 40px minmax(0,1fr)"] > div:last-child {
    align-items: center !important; text-align: center !important;
    padding: 4px 0 0 0 !important;
  }

  /* ========== geschichte.html: Damals & Heute konsequent Text oben, Bild unten ========== */
  /* In allen Slider-Sektionen: Textblock (mit h2) zuerst, Slider/Bild darunter, unabhängig vom Desktop-order */
  [data-screen-label^="Damals"] > div > div:has(> h2),
  [data-screen-label="Zwei Traditionen"] > div > div:has(> h2) { order: 0 !important; }
  [data-screen-label^="Damals"] > div > div:has(ba-slider),
  [data-screen-label="Zwei Traditionen"] > div > div:has(ba-slider) { order: 1 !important; }
}

@media (max-width: 600px) {

  h1[style*="font-size:35px"], h1[style*="font-size: 35px"] { font-size: 27px !important; }
  [style*="font-size:32px"], [style*="font-size: 32px"] { font-size: 24px !important; }
  [style*="font-size:28px"], [style*="font-size: 28px"] { font-size: 22px !important; }
  [style*="font-size:26px"], [style*="font-size: 26px"] { font-size: 21px !important; }

  /* So ticken wir: Aufzaehlungs-Punkte nicht umbrechen (+ neben Text), Kuckucksuhr groesser */
  [style*="align-items:baseline"][style*="gap:12px"] { flex-wrap: nowrap !important; }
  svg[viewBox="0 0 200 300"] { width: 360px !important; height: 540px !important; }

  /* Start 'Unsere Leistungen': Titel und Portal-Link mobil untereinander statt nebeneinander */
  [style*="align-items:baseline;justify-content:space-between"] { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }

  /* Start 'Ihre Zahnaerzte' (c-praxis): Kachel mobil etwas hoeher, damit Max' Kopf passt */
  [style*="width:460px"][style*="height:420px"] { aspect-ratio: 7/6 !important; height: auto !important; }

  /* leistungen mobil: Hero (Birgit) flacher 2/1 (Bild ist nativ 2:1, zeigt Person ganz); Artikel-Hero flacher + mehr Abstand zum Text */
  [style*="height:360px"][style*="margin-bottom:34px"] { aspect-ratio: 2/1 !important; height: auto !important; overflow: hidden !important; }
  [style*="height:320px"][style*="margin-bottom:20px"] { aspect-ratio: 16/9 !important; height: auto !important; margin-bottom: 30px !important; }

  /* leistungen mobil: Birgit im Hero groesser (Zoom auf die Person), Artikel-Eyebrow etwas Abstand zum Titel */
  #lst-hero { transform: scale(1.5) !important; transform-origin: 24% 54% !important; }
  [data-show="showArticle"] [style*="letter-spacing:1.5px"][style*="color:#B09154"] { margin-bottom: 8px !important; }
  [data-show="showArticle"] h2[style*="font-size:30px"] { margin-bottom: 8px !important; }
}