/* Kinesco — responsiver Feinschliff.
   Überschreibt gezielt Inline-Styles aus dem Design (daher !important).
   Nur Korrekturen für schmale Viewports — Desktop bleibt unangetastet. */

/* 1) Kopfzeile: kompakt unter 431px, damit Logo + Menü + CTA nebeneinander passen */
@media (max-width: 430px) {
  header a[href="/"] {
    gap: 7px !important;
    padding-left: 12px !important;
    padding-right: 10px !important;
    font-size: .95rem !important;
  }
  header button[data-menu-toggle] {
    padding: 0 10px !important;
    gap: 6px !important;
    font-size: .6rem !important;
    letter-spacing: .06em !important;
  }
  header a[href="/kontakt"] {
    padding: 0 11px !important;
    font-size: .6rem !important;
    letter-spacing: .06em !important;
  }
}
@media (max-width: 350px) {
  header a[href="/"] { font-size: .88rem !important; padding-left: 10px !important; padding-right: 8px !important; gap: 6px !important; }
  header button[data-menu-toggle] { padding: 0 8px !important; letter-spacing: .03em !important; }
  header a[href="/kontakt"] { padding: 0 9px !important; letter-spacing: .03em !important; }
}

/* 2) Hero-Kursivzeile: darf auf schmalen Screens umbrechen.
   Der absolute Unterstrich-Balken funktioniert nicht über Zeilenumbrüche —
   stattdessen ein background-Unterstrich, der jede Zeile sauber unterstreicht. */
@media (max-width: 480px) {
  h1 > em[style*="white-space: nowrap"],
  h2 > em[style*="white-space: nowrap"],
  h3 > em[style*="white-space: nowrap"] {
    white-space: normal !important;
    background-image: linear-gradient(var(--grün, #33E68F), var(--grün, #33E68F)) !important;
    background-repeat: no-repeat !important;
    background-size: 100% .1em !important;
    background-position: 0 96% !important;
    box-decoration-break: clone !important;
    -webkit-box-decoration-break: clone !important;
    padding-bottom: .06em !important;
  }
  h1 > em[style*="white-space: nowrap"] > span[aria-hidden="true"],
  h2 > em[style*="white-space: nowrap"] > span[aria-hidden="true"],
  h3 > em[style*="white-space: nowrap"] > span[aria-hidden="true"] { display: none !important; }
}

/* 3) Kapitel-Chips (Leistungen): site.js blendet die Leiste komplett aus,
   sobald sie nicht mehr in voller Breite auf den Bildschirm passt
   (messbasiert bei Laden und Resize — kein starrer Breakpoint). */
nav[data-subnav]::-webkit-scrollbar { display: none; }

/* 4) Leistungen, Print-Collage: Im ein-/engspaltigen Layout wächst der
   Karten-Wrapper mit der Karte mit — die feste clamp-Höhe ist nur fürs breite
   Zweispalten-Layout gedacht (sonst überlappt die Karte Buttons und Folge-Sektion). */
@media (max-width: 1149px) {
  #print div[aria-hidden="true"][style*="height: clamp(240px"] {
    height: auto !important;
    min-height: clamp(240px, 26vw, 340px) !important;
    padding: 18px 0 !important;
  }
}

/* 5) Footer: Unterhalb des echten Vierspalten-Layouts (ab 1100px) gilt
   die Reihenfolge Marke → Kontakt → Index → Leistungen. Im mittleren
   Bereich zusätzlich ein festes 2×2-Raster, damit nie ein Block allein
   verwaist in einer Reihe hängt (auto-fit würde dort 3+1 erzeugen). */
@media (max-width: 1099px) {
  footer div[style*="minmax(min(100%,190px)"] > div:first-child { order: -2; }
  footer div[style*="minmax(min(100%,190px)"] > div:last-child { order: -1; }
}
@media (min-width: 560px) and (max-width: 1099px) {
  footer div[style*="minmax(min(100%,190px)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 6) Referenz, Handy-Mockup: Unterhalb des Desktop-Layouts bekommt der
   Screen echte Smartphone-Proportionen (1:2) statt der fast quadratischen
   Rahmenhöhe — sonst liest sich die Karte nicht als Handy. */
@media (max-width: 1149px) {
  div[style*="height: clamp(340px"] {
    height: auto !important;
    aspect-ratio: 9 / 18 !important;
  }
  /* … und steht mittig statt rechts (das margin-left:auto stammt aus dem
     zweispaltigen Desktop-Layout neben dem Browser-Mockup) */
  div[style*="flex: 1 1 240px"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* 7) Footer-Wortmarke: Sheen-Lauf weich statt mechanisch — sanftes
   Ein-/Ausgleiten (ease-in-out) und eigene Kompositions-Ebene, damit der
   Browser die Animation beim Scrollen nicht neu rastert (sichtbarer Sprung). */
p[style*="animation: lSheen"] {
  animation-timing-function: ease-in-out !important;
  will-change: background-position !important;
  transform: translateY(6%) translateZ(0) !important;
}

/* 8) Startseite, Leistungs-Zeilen: lange Titel (z. B. „Patientengewinnung")
   brechen auf sehr schmalen Screens per Silbentrennung um, statt in den
   Pfeil-Kreis zu laufen. */
@media (max-width: 480px) {
  a[data-mlink] [data-lbl] > span:first-child {
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    overflow-wrap: break-word !important;
    min-width: 0 !important;
  }
}

/* 9) Print-Agent: gestapeltes Grid darf unter die Inhalts-Mindestbreite schrumpfen */
@media (max-width: 480px) {
  #agent [style*="grid-template-columns: 240px minmax(0,1fr) minmax(300px,340px)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #agent [style*="grid-template-columns: 240px minmax(0,1fr) minmax(300px,340px)"] > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #agent [style*="justify-content: space-between"] { flex-wrap: wrap !important; }
}