/* ═══════════════════════════════════════════════════════════════════════════
   site.css — Responsive Layer (mobile-first)
   Wird in index.html nach den Token-/Komponenten-Styles eingebunden.
   Breakpoints: ≤480px Mobile · 481–899px Tablet · ≥900px Desktop (heutiges Layout)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Overflow-Absicherung (global) ──
   Wichtig: overflow-x auf <html> muss "hidden" sein, nicht "clip" — mit
   "clip" ist das Wurzelelement kein Scroll-Container mehr und Anker-Links
   (#hash) sowie scrollIntoView() funktionieren nicht. */
html { overflow-x: hidden; }
body { overflow-x: clip; }
img, svg, video { max-width: 100%; height: auto; }
a { overflow-wrap: anywhere; }

/* ── Header ── */
.site-header-inner { position: relative; min-height: 64px; }
.site-logo { height: 30px; width: auto; }
@media (min-width: 900px) {
  .site-header-inner { min-height: 72px; }
  .site-logo { height: 38px; }
}

/* Hauptnavigation: Pills auf Desktop, aufklappbares Panel auf Mobile/Tablet */
.site-nav { display: flex; gap: var(--space-2); align-items: center; }
.nav-toggle { display: none; }
@media (max-width: 899px) {
  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-md);
    cursor: pointer;
  }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: var(--space-1);
    padding: var(--space-4) var(--space-6) var(--space-6);
    background: var(--bg); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
  }
  .site-nav[data-open="false"] { display: none; }
  .site-nav a { min-height: 44px; display: flex; align-items: center; }
}
/* Header-CTA erst ab ~600px zeigen (mobil reicht Kontakt im Menü) */
.header-cta { display: none; }
@media (min-width: 600px) { .header-cta { display: inline-flex; } }

/* ── Hero ── */
.hero-grid { grid-template-columns: 1fr; gap: var(--space-10); }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-16); }
}
.hero-panel { grid-template-columns: 1fr; gap: var(--space-8); }
@media (min-width: 900px) {
  .hero-panel { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}

/* ── Karten-Grids (Services, Prozess, Testimonials):
      1 Spalte mobil, 2 Tablet, 3 Desktop — automatisch via auto-fit ── */
.grid-cards {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.grid-cards-loose { gap: var(--space-8); }
@media (min-width: 900px) { .grid-cards-loose { gap: var(--space-12); } }

/* ── Service-Karten-Badge: oben rechts auf Icon-Höhe verankern, statt
      mittig neben dem Titel — so sitzen alle Pillen auf gleicher Höhe,
      unabhängig davon, ob der Titel ein- oder zweizeilig ist. ── */
.grid-cards .pcs-card { position: relative; }
.grid-cards .pcs-card .sc-host-x:has(> .pcs-badge) {
  display: block !important;
  position: absolute;
  top: calc(var(--space-8) + 28px);
  right: var(--space-8);
  transform: translateY(-50%);
}
/* Beschreibungstext der Service-Karten im Blocksatz — bis an beide
   Ränder, mit Silbentrennung, damit die Wortabstände ruhig bleiben. */
.grid-cards-services .pcs-card p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

/* ── Leistungen-Detailzeilen: gestapelt mobil, nebeneinander ab 900px ── */
.leistung-row { display: flex; flex-direction: column; gap: var(--space-8); }
@media (min-width: 900px) {
  .leistung-row { flex-direction: row; align-items: center; gap: var(--space-16); }
  .leistung-row[data-dir="row-reverse"] { flex-direction: row-reverse; }
}

/* Feature-Liste in den Leistungszeilen */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2) var(--space-4); }
@media (min-width: 481px) { .feature-grid { grid-template-columns: 1fr 1fr; } }

/* ── Kontakt: einspaltig mobil; Sticky-Intro nur auf Desktop ── */
.kontakt-grid { grid-template-columns: 1fr; gap: var(--space-10); }
@media (min-width: 900px) {
  .kontakt-grid { grid-template-columns: 0.85fr 1fr; gap: var(--space-16); }
  .kontakt-intro { position: sticky; top: 96px; }
}

/* ── Footer: stapeln mobil, 2 Spalten Tablet, 3 Desktop ── */
.footer-grid { grid-template-columns: 1fr; }
@media (min-width: 481px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer-grid a { padding-block: 6px; }


/* --- Mobile-Fixups fuer die statische (eingefrorene) Ausgabe --------------
   Das fruehere React-Frontend setzte responsive Inline-Styles per JS. Beim
   Einfrieren wurde der Desktop-Zustand fixiert; unter <=640px erlauben wir
   allen Elementen zu schrumpfen und auf Container-Breite zu begrenzen,
   klappen Grids einspaltig und lassen Flex-Reihen umbrechen. */
@media (max-width: 640px) {
  body * { max-width: 100% !important; min-width: 0 !important; }
  body [style*="flex"] { flex-wrap: wrap; }
  .hero-grid, .hero-panel, .kontakt-grid, .footer-grid, .feature-grid,
  .grid-cards, .grid-cards-loose { grid-template-columns: 1fr !important; }
  h1, h2, h3 { overflow-wrap: break-word; word-break: break-word; }
  img, svg { max-width: 100%; height: auto; }
}

/* Flex-SPALTEN duerfen nicht wrappen (sonst brechen die eingefrorenen
   Browser-Mockups seitlich in eine zweite Spalte um). */
@media (max-width: 640px) {
  body [style*="flex-direction: column"],
  body [style*="flex-direction:column"] { flex-wrap: nowrap; }
}

/* Anker-Ziele nicht unter dem Sticky-Header verstecken */
[id] { scroll-margin-top: 90px; }

/* Aufklappmenü unter "Leistungen" und "Preise" (siehe nav-menu.js), nur Desktop */
.nav-drop { position: relative; display: inline-flex; }
.nav-drop::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.nav-drop__menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px; display: none;
  flex-direction: column; gap: 2px; padding: 6px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 60;
}
.nav-drop:hover .nav-drop__menu, .nav-drop:focus-within .nav-drop__menu { display: flex; }
.nav-drop__menu a {
  font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); color: var(--text-secondary);
  text-decoration: none; padding: 10px 12px; border-radius: var(--radius-md); white-space: nowrap;
}
.nav-drop__menu a:hover, .nav-drop__menu a:focus-visible { background: var(--accent-soft); color: var(--text); }
@media (max-width: 899px) {
  .nav-drop { display: contents; }
  .nav-drop__menu { display: none !important; }
}

/* Reiter zwischen Übersicht und Unterseiten (Leistungen und Preise) */
.seiten-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.seiten-tabs a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface); font-family: var(--font-sans); font-weight: 600;
  font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.seiten-tabs a:hover { border-color: var(--border-strong); color: var(--text); }
.seiten-tabs a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Weicher Seitenwechsel: Cross-Document View Transitions. Der Browser blendet
   die alte Seite in die neue über; Kopfzeile und Bereichs-Reiter tragen einen
   Namen und bleiben dadurch stehen statt neu einzufliegen. Browser ohne
   Unterstützung ignorieren das komplett. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
header { view-transition-name: site-header; }
.seiten-tabs { view-transition-name: seiten-tabs; }
/* Kam die Seite per View Transition herein (Klasse setzt das Skript im <head>),
   entfällt die Einblend-Animation des Inhalts, sonst blendet es doppelt. */
html.vt-nav [style*="pcsFade"] { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}