/* ==========================================================================
   styles-mobile-patch.css — Mobile-Optimierung (Audit-Fixes)
   ==========================================================================
   Wird NACH styles.css geladen → überschreibt per Cascade.
   Quelle: Mobile-Audit (17 bestätigte Issues, adversarial verifiziert).
   Themen: Touch-Targets ≥44px, Notch/Safe-Area, Landscape, Lesbarkeit,
   word-break für lange dt. Wörter, GPU-Blur drosseln, reduced-motion.
   ========================================================================== */


/* ─────────────────────────────────────────────────────────────────────────
   0. WORD-BREAK — lange deutsche Komposita bei schmalen Viewports
   (kein hyphens/overflow-wrap im Basis-CSS → Overflow-Risiko bei 320px)
   ───────────────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, .hero__h1, .btn, .nav__cta, .eyebrow, .svc h3 {
  overflow-wrap: break-word;
  word-break: normal;
}
@media (max-width: 380px) {
  h1, h2, .hero__h1 {
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   1. TOUCH-TARGETS ≥44px im gesamten Burger-Bereich (≤860px)
   Basis-Overrides greifen erst ab 640px, Burger ist aber ab 860px aktiv.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .footer__col a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 3px 0;
  }
  .footer__col a + a { margin-top: 0; }
  .footer__contact a { min-height: 44px; }
  .footer__legal { gap: 12px; }
  .footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 6px;
  }
  .nav__cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   2. BREADCRUMB- + PROJEKT-CTA-TOUCH-TARGETS
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .proj__cta {
    min-height: 44px;
    padding: 0 20px;
  }
}
@media (max-width: 640px) {
  .crumb { gap: 4px; }
  .crumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 6px;
    margin: 0 -6px;
  }
  .crumb a:first-child {
    margin-left: 0;
    padding-left: 0;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   3. NOTCH / SAFE-AREA + LANDSCAPE-KOMPAKTIERUNG
   ───────────────────────────────────────────────────────────────────────── */
.nav__row {
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
@media (max-height: 540px) and (orientation: landscape) {
  .nav__row { height: 60px; }
  .nav__logo img { height: 32px; }
  .menu { padding-top: calc(56px + 12px); }
  .menu__nav {
    justify-content: flex-start;
    flex: 0 0 auto;
  }
  .menu__nav a {
    padding: 8px 0;
    font-size: clamp(20px, 5vw, 26px);
  }
  .menu__act { padding-top: 18px; }
}


/* ─────────────────────────────────────────────────────────────────────────
   4. LESBARKEIT — Body-Texte ≥14px + nowrap-Headline im Mock umbrechen
   ───────────────────────────────────────────────────────────────────────── */
.webui__hero h6 { white-space: normal; }
@media (min-width: 520px) {
  .webui__hero h6 { white-space: nowrap; }
}
@media (max-width: 640px) {
  .step p,
  .mini p,
  .qrcase__txt p {
    font-size: 14px;
    line-height: 1.55;
  }
}
@media (max-width: 560px) {
  .qr-feat p {
    font-size: 14px;
    line-height: 1.55;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   5. EMBED-CHROME — "In neuem Tab öffnen" als 44px-Tap-Target
   ───────────────────────────────────────────────────────────────────────── */
.embed__open {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font: 600 11px/1 var(--font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-hi);
  transition: color .25s;
}


/* ─────────────────────────────────────────────────────────────────────────
   6. PERFORMANCE — Großflächen-Blur auf Mobile drosseln + reduced-motion
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .hero__glow {
    filter: blur(12px);
    animation: none;
  }
  .closing__glow {
    filter: blur(16px);
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* END styles-mobile-patch */


/* ─────────────────────────────────────────────────────────────────────────
   7. A11Y — globaler sichtbarer Tastatur-Fokus (WCAG 2.4.7) + Skip-Link
   (aus Qualitäts-Audit: Basis-CSS hatte NIRGENDS einen Fokus-Indikator)
   ───────────────────────────────────────────────────────────────────────── */
:where(a, button, [tabindex], summary, input, textarea, select):focus-visible {
  outline: 2px solid var(--blue-hi);
  outline-offset: 3px;
  border-radius: 4px;
}
:where(a, button):focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--bone);
  color: var(--navy-950);
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font: 600 13px/1 var(--font);
  text-decoration: none;
}
.skip-link:focus { left: 0; }


/* ─────────────────────────────────────────────────────────────────────────
   8. MOBILE-HEADER aufräumen (Screenshot-Feedback)
   - Großer weißer "Projekt anfragen"-CTA raus (redundant zum Burger-Menü,
     frisst Platz + dominiert) → Header = Logo + Burger
   - Kompaktere Höhe, Burger rechtsbündig
   - .nav.solid deutlich opaker, damit Content beim Scrollen nicht
     störend durchscheint
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .nav__row {
    height: 60px;
    gap: 12px;
    justify-content: space-between;
  }
  .nav__cta { display: none !important; }
  .nav__row { height: 74px; }
  .nav__logo img { height: 56px; }
  .nav__burger { margin-left: 0; }

  /* Header über Content klar lesbar (war rgba navy 0.72 → zu transparent) */
  .nav.solid {
    background: rgba(5, 11, 31, 0.94);
    backdrop-filter: saturate(150%) blur(20px);
    -webkit-backdrop-filter: saturate(150%) blur(20px);
  }
  /* Auch oben (vor dem Scrollen) leichter Schleier, damit nichts hart durchblitzt */
  .nav:not(.solid) {
    background: rgba(5, 11, 31, 0.55);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   9. PROZESS-TRACK Nummern zentrieren (Screenshot-Feedback)
   Bug: .track__steps span (für Beschreibung) ist spezifischer als .track__n
   und überschrieb display:grid -> block + margin-top:4px + mute-Farbe.
   Die "01/02/03"-Nummern saßen oben-links statt zentriert.
   ───────────────────────────────────────────────────────────────────────── */
.track__steps .track__n {
  display: grid;
  place-items: center;
  margin-top: 0;
  font: 700 14px/1 var(--font);
  color: var(--accent);
}


/* ─── Cross-Linking: tag-pill als Link (Hover) ─── */
.tags-row--links a.tag-pill { text-decoration: none; transition: color .2s, border-color .2s, background .2s; }
.tags-row--links a.tag-pill:hover { color: var(--bone); border-color: var(--blue); background: rgba(77,141,255,0.08); }
.tags-row--links a.tag-pill .arrow { transition: transform .2s; display: inline-block; }
.tags-row--links a.tag-pill:hover .arrow { transform: translate(2px,-2px); }


/* ─────────────────────────────────────────────────────────────────────────
   11. PRODUKT-MOCKUPS (osui/webui/shopui) — seitlicher Überlauf auf Mobile
   Die Mockups haben eine inhaltsbedingte Mindestbreite (z. B. 3 KPI-Spalten +
   2 Panels beim Business-OS-Dashboard), die auf schmalen Viewports über den
   rechten Rand lief. Ursache: Flex-/Grid-Kinder haben default min-width:auto
   (= Inhaltsgröße) und schrumpfen nicht. Fix: min-width:0 erlauben, Container-
   Padding + Innenabstände kompakter, border-box + max-width als Sicherheitsnetz.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .detail-media--mock { padding: 14px; min-height: 0; }
  .detail-media--mock .osui,
  .detail-media--mock .webui,
  .detail-media--mock .shopui { width: 100%; max-width: 100%; box-sizing: border-box; }
  .osui, .osui *, .webui, .webui *, .shopui, .shopui * { min-width: 0; }
  .detail-media--mock .osui { padding: 14px; gap: 10px; }
  .osui__kpis { gap: 6px; }
  .osui__kpi { padding: 7px 8px; }
  .osui__kpi b { font-size: 14px; }
  .osui__cols { gap: 7px; }
  .osui__panel { padding: 8px 9px; }
}


/* ─────────────────────────────────────────────────────────────────────────
   12. FOOTER — Social-Icon-Buttons (Instagram · LinkedIn · TikTok)
   Ersetzt die früheren Text-Links; kompakte, gebrandete Icon-Buttons im
   Brand-Block. Gilt auf allen Viewports (nicht nur Mobile).
   ───────────────────────────────────────────────────────────────────────── */
.footer__social { display: flex; gap: 10px; margin-top: 22px; }
.footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid var(--line); color: var(--mute);
  background: rgba(126, 176, 255, 0.03);
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.footer__social a:hover {
  color: var(--bone); border-color: rgba(126, 176, 255, 0.5);
  background: rgba(77, 141, 255, 0.14); transform: translateY(-2px);
}
.footer__social a:active { transform: translateY(0); }
.footer__social svg { width: 18px; height: 18px; }


/* ─────────────────────────────────────────────────────────────────────────
   13. RECHTSTEXTE IMMER SICHTBAR (Impressum / AGB / Datenschutz)
   Bug: Der komplette .legal__doc hängt an EINEM data-reveal. Der Scroll-
   Reveal-Observer setzt „.in“ erst, wenn 16 % des Elements sichtbar sind
   (threshold: 0.16). Bei den langen Rechtstexten ist das Element höher als
   der Viewport → 16 % werden nie erreicht → Text bleibt auf opacity:0.
   Fließtext darf ohnehin nicht hinter einer Scroll-Animation versteckt sein
   (Lesbarkeit + Zugänglichkeit ohne JS) → dauerhaft sichtbar erzwingen.
   ───────────────────────────────────────────────────────────────────────── */
.legal .legal__doc[data-reveal] { opacity: 1 !important; transform: none !important; }


/* ─────────────────────────────────────────────────────────────────────────
   14. ÜBERSCHRIFTEN — saubere Silbentrennung statt Wortbruch auf Mobile
   Lange deutsche Komposita (z. B. „Geschäftsbedingungen“) wurden mit
   overflow-wrap:break-word mitten im Wort ohne Trennstrich umgebrochen.
   Mit hyphens:auto (greift dank <html lang="de">) trennt der Browser an
   korrekten Silbengrenzen mit Trennstrich → „Geschäfts-bedingungen“.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .subhero h1,
  .legal__doc h2,
  .legal__doc h3 {
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
    word-break: normal;
  }
  /* Hero-Titel auf Mobile kompakter (war hart 40px) + Zeilen ausbalancieren
     → lange Komposita passen sauber, keine hässlichen Mehrfach-Trennungen und
     keine einzelnen Silben-„Waisen“ (z. B. „gen“ / „te.“) auf der letzten Zeile. */
  .subhero h1 {
    font-size: clamp(28px, 8vw, 40px);
    text-wrap: balance;
    letter-spacing: -0.03em;
  }
  /* Getaggte Titel (Projekte, Leistungen, Prozess): kursiven Teil (em) in eine
     eigene Zeile umbrechen → „Ausgewählte“ / „Projekte.“ usw. Nur diese drei,
     damit Titel mit em MITTEN im Satz (z. B. „…Marke sichtbar machen“) heil
     bleiben. */
  .subhero__stack { text-wrap: normal; }
  .subhero__stack em { display: block; }
}


/* ─────────────────────────────────────────────────────────────────────────
   15. KONTAKT — Anfrage-Formular auf Mobile direkt sichtbar
   Die .contact ist ein 2-Spalten-Grid (Kontakt-Kacheln | iframe). Auf ≤860px
   wird daraus eine Spalte, wodurch die 4 Kontakt-Kacheln VOR dem iframe lagen
   → Formular erst weit unten. Fix: iframe per order:-1 direkt unter den Hero
   ziehen (vor die Kacheln), damit es für Kunden sofort greifbar ist. Die
   Kontakt-Wege (E-Mail/Telefon/WhatsApp) rutschen als Alternativen darunter.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .contact #anfrageEmbed { order: -1; margin-bottom: 4px; }
}


/* ─────────────────────────────────────────────────────────────────────────
   16. HERO-CTAs auf Mobile nebeneinander statt gestapelt (spart Platz)
   Die zwei Buttons („Projekt anfragen“ + „… ansehen“) sind auto-breit und
   passen zu zweit nicht in eine Zeile → sie brachen um. Fix: beide flex:1
   (halbe Breite), kompakteres Padding + kleinere Schrift, nowrap → eine Reihe.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .subhero__ctas { flex-wrap: nowrap; gap: 10px; }
  .subhero__ctas .btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 15px 14px;
    font-size: 13px;
    white-space: nowrap;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   17. DESKTOP-HERO — „Scroll“-Hinweis von der Tag-Leiste trennen
   .hero__scroll (position:absolute; bottom:26px) und die vertikal zentrierte
   Tag-Leiste .hero__trust berührten sich bei mittleren Fensterhöhen (Abstand
   nur ~3px) → „SCROLL“ klebte an „LED & 3D-Schilder“. Mehr Boden-Padding
   schiebt den zentrierten Hero-Inhalt nach oben und gibt dem Scroll-Hinweis
   Luft (≈45px). Nur ≥921px, da der Scroll-Hinweis darunter ausgeblendet ist.
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 921px) {
  .hero { padding-bottom: 130px; }
}


/* ─────────────────────────────────────────────────────────────────────────
   18. KONTAKT — Anfrage-CTA-Karte (ersetzt das iframe-Embed)
   Statt das Formular per iframe einzubetten (sah nicht gut aus), führt ein
   klarer Button direkt zum Anfrage-Formular. Gebrandete Navy-Karte mit Glow.
   ───────────────────────────────────────────────────────────────────────── */
.anfrage-cta {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--line); border-radius: 22px;
  background: linear-gradient(165deg, rgba(20, 36, 92, 0.55), rgba(5, 11, 31, 0.55));
}
.anfrage-cta__glow {
  position: absolute; z-index: 0; pointer-events: none;
  width: 70%; aspect-ratio: 1; top: -30%; right: -15%;
  background: radial-gradient(circle, rgba(77, 141, 255, 0.22), transparent 68%);
  filter: blur(24px);
}
.anfrage-cta > *:not(.anfrage-cta__glow) { position: relative; z-index: 1; }
.anfrage-cta h3 {
  font: 700 clamp(23px, 2.6vw, 32px)/1.12 var(--font);
  letter-spacing: -0.025em; color: var(--bone); max-width: 20ch;
}
.anfrage-cta h3 em {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  color: var(--blue-hi); letter-spacing: -0.01em;
}
.anfrage-cta p { font: 400 15px/1.65 var(--font); color: var(--mute); max-width: 46ch; }
.anfrage-cta__btn { margin-top: 8px; }
.anfrage-cta__note {
  font: 500 12.5px/1.4 var(--font); letter-spacing: 0.02em; color: var(--mute-2);
}