/* ═══════════════════════════════════════════════════════════════════════════ 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 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; }