/*
    LLSTUDIOS — shared.css
    Einziges Stylesheet des Projekts. Aufbau nach DESIGNSYSTEM.md, Abschnitt 5.

     1  Design-Tokens            :root
     2  Reset & Basis
     3  Layout-Primitive         .container .section .grid .split .media-frame
     4  Typografie               .page-title .section-title .block-title .media-title
                                 .subtitle .card-title .text-body .lead-text .closing-text
     5  Buttons & Formfelder     .btn .form-group .pill-group .pill-option
     6  Cards                    .card + Varianten
     7  Header / Navigation      .site-header .logo .nav-links .nav-dropdown .hamburger
                                 .hamburger-bars
     8  Footer                   .site-footer .footer-container .footer-col .social-icons
     9  Wiederkehrende Bloecke   .page-header .cta-banner
    10  Seitenspezifisch         Home / Services / Contact / Projektdetail / Who
    11  Responsive               @media 1100 -> 768 -> 480 (je genau ein Block)
    12  Utilities                .form-honey .form-status

    Breakpoints: 1100 / 768 / 480. Der Wert 768 ist fixiert, weil nav.js ihn per
    matchMedia('(max-width: 768px)') fuer das Dropdown-Verhalten abfragt.
    Schriften: ausschliesslich Systemschriften, kein Webfont, kein @import.
*/

/* ============================================================
   1 · Design-Tokens
   ============================================================ */

:root {
    /* Farben */
    --bg:             #fff;
    --surface:        #f7f7f5;
    --surface-card:   #f4f4f4;
    --surface-footer: #f0f0f0;
    --text:           #111;
    --muted:          #555;
    --muted-dark:     #444;
    --accent:         #b87333;
    --accent-hover:   #9f622a;
    --accent-soft:    rgba(184, 115, 51, .35);
    --border:         #e5e5e0;
    --border-soft:    #eaeaea;

    /* Masse */
    --content-width:  1300px;
    --narrow-width:   1100px;
    --gutter:         clamp(20px, 4vw, 50px);

    /* Spacing-Skala (8er-Raster) */
    --space-xs:       8px;
    --space-sm:       16px;
    --space-md:       24px;
    --space-lg:       48px;
    --space-xl:       80px;
    --space-section:  clamp(72px, 8vw, 120px);

    /* Typo-Skala */
    --fs-page-title:    clamp(2.5rem, 5vw, 4rem);
    --fs-section-title: clamp(2.3rem, 4vw, 3.5rem);
    --fs-card-title:    2rem;
    --fs-media-title:   1.8rem;
    --fs-subtitle:      1.5rem;
    --fs-lead:          1.25rem;
    --fs-body:          1.15rem;
    --fs-small:         .95rem;

    --heading-weight:   800;
    --heading-tracking: -1.5px;
    --heading-leading:  1.1;

    /* Radien */
    --radius-md:   16px;
    --radius-lg:   20px;
    --radius-xl:   24px;
    --radius-pill: 999px;

    /* Schatten */
    --shadow-media: 0 15px 35px rgba(0, 0, 0, .09);
}

/* Breakpoints stehen bewusst literal in den @media-Bedingungen:
   Custom Properties sind dort nicht auswertbar.
     lg: 1100px   3->2 Spalten, Split gestapelt
     md:  768px   Burger-Nav, einspaltig   (fixiert durch nav.js)
     sm:  480px   Feinschliff                                        */

/* ============================================================
   2 · Reset & Basis
   ============================================================ */

html {
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    animation: fadeInPage 1.2s ease-out forwards;
}

img,
video,
iframe,
svg,
picture {
    max-width: 100%;
}

/* <picture> verhaelt sich wie <img>. height:auto haelt zusammen mit den
   width/height-Attributen im Markup das Seitenverhaeltnis und verhindert
   Layout-Shift beim Nachladen; Videos mit poster sitzen zusaetzlich immer
   in einem .media-frame mit fester aspect-ratio. */
img,
video,
picture {
    display: block;
    height: auto;
}

button,
input,
textarea {
    font: inherit;
}

/* Einziger Ort, an dem min-width:0 gesetzt wird. Ohne diese Regel bekommen
   Flex- und Grid-Kinder die Vorgabe min-width:auto und koennen von langen
   Woertern oder breiten Medien ueber den Rand geschoben werden. Alle Traeger
   der Layout-Klassen (.container .grid .split-media .split-text .card
   .footer-col .cta-banner-text) sind <div> und damit hier abgedeckt —
   deshalb tragen die Komponenten die Eigenschaft nicht noch einmal.
   Ausnahme: .dropdown-content ist ein <ul> und setzt sie im 768er-Block
   selbst, dort aber als Override von min-width:220px. */
h1, h2, h3, h4, p, a, li, div, section, main, header, footer {
    min-width: 0;
}

@keyframes fadeInPage {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    body {
        animation: none;
    }

    *,
    *::before,
    *::after {
        transition-duration: .01ms;
    }
}

/* ============================================================
   3 · Layout-Primitive
   ============================================================ */

.container {
    width: 100%;
    max-width: var(--content-width);
    margin-inline: auto;
}

.container--narrow {
    max-width: var(--narrow-width);
}

/* Projektdetailseiten: gleichmaessiger Abstand zwischen Embed, Infogrid und
   Galerie, ohne dass ein Medienrahmen selbst einen Aussenabstand traegt. */
.container--narrow > * + * {
    margin-top: var(--space-xl);
}

.section {
    padding: var(--space-section) var(--gutter);
    background: var(--bg);
}

.section--alt {
    background: var(--surface);
}

.section--divided {
    border-top: 1px solid var(--surface-footer);
}

/* Sektion direkt unter dem Seitenkopf: reduziertes Top-Padding. Alle acht
   Seiten setzen den Modifier im Markup; der frueher noetige Geschwister-
   Selektor .page-header + .section ist damit entfallen. */
.section--after-header {
    padding-top: var(--space-lg);
}

.section--center {
    text-align: center;
}

.grid {
    display: grid;
    gap: var(--space-md);
}

.grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--sidebar {
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: var(--space-xl);
    align-items: start;
}

.grid--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--space-xl);
    align-items: start;
}

.split {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}

.split--reverse {
    flex-direction: row-reverse;
}

.split-media {
    flex: 1.2 1 0;
}

.split-text {
    flex: 1 1 0;
}

.media-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #111;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-media);
}

.media-frame :is(iframe, video, img, picture) {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.media-frame--16-9 {
    aspect-ratio: 16 / 9;
}

.media-frame--16-10 {
    aspect-ratio: 16 / 10;
}

.media-frame--4-3 {
    aspect-ratio: 4 / 3;
}

/* Einbettung innerhalb einer Service-Karte: heller Rahmen statt Schatten. */
.media-frame--card {
    height: 460px;
    margin-top: var(--space-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: none;
}

/* Galeriebilder zoomen leicht beim Hover. Bewusst nur das <img>: bei
   <picture><img> wuerde ein Zoom auf beiden Ebenen doppelt skalieren. */
.media-frame--4-3 img {
    transition: transform .3s ease;
}

.media-frame--4-3 img:hover {
    transform: scale(1.03);
}

/* ============================================================
   4 · Typografie
   ============================================================ */

.page-title {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    font-size: var(--fs-page-title);
    font-weight: var(--heading-weight);
    letter-spacing: var(--heading-tracking);
    line-height: var(--heading-leading);
}

/* Kupferner Unterstrich — visueller Fix aus Stand A. */
.page-title::after {
    content: "";
    display: block;
    width: 72px;
    height: 3px;
    margin: 18px auto 0;
    background: var(--accent);
    border-radius: 2px;
}

.page-intro {
    max-width: 700px;
    margin: var(--space-md) auto 0;
    color: var(--muted);
    font-size: var(--fs-lead);
    line-height: 1.6;
}

.section-title {
    max-width: var(--content-width);
    margin: 0 auto var(--space-lg);
    font-size: var(--fs-section-title);
    font-weight: var(--heading-weight);
    letter-spacing: var(--heading-tracking);
    line-height: var(--heading-leading);
    text-align: center;
}

.block-title {
    margin-bottom: var(--space-md);
    font-size: var(--fs-section-title);
    font-weight: var(--heading-weight);
    letter-spacing: var(--heading-tracking);
    line-height: var(--heading-leading);
}

.media-title {
    margin-bottom: var(--space-sm);
    font-size: var(--fs-media-title);
    font-weight: 700;
    letter-spacing: -.5px;
    line-height: 1.2;
}

.subtitle {
    margin-bottom: var(--space-sm);
    font-size: var(--fs-subtitle);
    font-weight: 700;
    line-height: 1.3;
}

.card-title {
    margin-bottom: var(--space-sm);
    font-size: var(--fs-card-title);
    font-weight: var(--heading-weight);
    letter-spacing: -1px;
    line-height: var(--heading-leading);
}

.card-text {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.5;
}

/* .text-body sitzt am Wrapper, nicht an jedem <p>. */
.text-body {
    color: var(--muted);
    font-size: var(--fs-body);
    line-height: 1.7;
}

/* Die Fliesstextfarbe gilt nur fuer Fliesstext. Ueberschriften innerhalb
   eines .text-body-Wrappers wuerden sie sonst erben und in #555 statt in
   #111 stehen — auf derselben Seite haette .section-title dann eine andere
   Farbe als .block-title. */
.text-body :is(h1, h2, h3) {
    color: var(--text);
}

.text-body p + p {
    margin-top: var(--space-sm);
}

.text-body > p + :is(h2, h3) {
    margin-top: var(--space-lg);
}

.text-body > .grid {
    margin-top: var(--space-lg);
}

.text-body > :last-child {
    margin-bottom: 0;
}

.lead-text {
    color: var(--text);
    font-size: 1.35rem;
}

.closing-text {
    margin-top: 40px;
    color: var(--text);
    font-size: 1.3rem;
}

/* ============================================================
   5 · Buttons & Formfelder
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 28px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color .2s ease;
}

.btn:hover {
    background: var(--accent-hover);
}

/* Navigation und Footer faerben ihre Links (`.nav-links > a` = #222,
   `.footer-col :is(p, a)` = --muted-dark). Beide Selektoren sind
   spezifischer als `.btn` und wuerden dessen weisse Schrift auf der
   Kupferflaeche ueberschreiben — hier zurueckholen. */
.nav-links > a.btn,
.footer-col a.btn {
    color: #fff;
}

.btn--block {
    width: 100%;
}

/* WhatsApp-Schaltflaeche: bewusst in der Hausfarbe von WhatsApp statt in
   Kupfer. Die Farbe ist hier der Wiedererkennungswert — Besucher sehen die
   Schaltflaeche, bevor sie die Beschriftung gelesen haben. */
.btn--whatsapp {
    gap: 10px;
    background: #25d366;
}

.btn--whatsapp:hover {
    background: #1da851;
}

.btn--whatsapp i {
    font-size: 1.15rem;
}

/* Zwei gestapelte Schaltflaechen in derselben Footer-Spalte. Beide fuellen
   die Spaltenbreite, damit sie exakt gleich breit sind: richtet sich jede
   nach ihrer eigenen Beschriftung, steht "WhatsApp us" rund 30px weiter
   heraus als "Contact us" und die Spalte wirkt ausgefranst. */
.footer-col .btn {
    width: 100%;
}

.footer-col .btn + .btn {
    margin-top: 12px;
}

.center-btn {
    margin-top: var(--space-lg);
    text-align: center;
}

.card-body > .btn,
.text-body > .btn {
    margin-top: var(--space-md);
}

/* Gemeinsamer Focus-Ring fuer alle interaktiven Elemente. */
.btn:focus-visible,
.nav-links a:focus-visible,
.hamburger:focus-visible,
.pill-option:focus-visible,
.form-group :is(input, textarea):focus-visible {
    outline: 3px solid var(--accent-soft);
    outline-offset: 3px;
}

.form-group {
    margin-bottom: var(--space-md);
}

.form-group label {
    display: block;
    margin-bottom: 12px;
    color: var(--accent);
    font-size: 1.1rem;
    font-weight: 700;
}

.form-group label[for] {
    color: #222;
    font-size: var(--fs-small);
    font-weight: 600;
}

.form-group :is(input, textarea) {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #ddd;
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form-group :is(input, textarea):focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(184, 115, 51, .15);
}

.form-group textarea {
    min-height: 140px;
    resize: vertical;
}

.pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pill-option {
    padding: 10px 20px;
    border: 1.5px solid var(--accent);
    border-radius: 25px;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    font-size: var(--fs-small);
    font-weight: 500;
    transition: background-color .2s ease, color .2s ease;
}

.pill-option:hover {
    background: rgba(184, 115, 51, .08);
}

/* .selected wird vom Inline-Script auf contact.html gesetzt. */
.pill-option.selected {
    background: var(--accent);
    color: #fff;
}

/* ============================================================
   6 · Cards
   ============================================================ */

.card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface-card);
    border: 1px solid transparent;
    border-radius: var(--radius-xl);
    text-align: left;
    transition: transform .2s ease, border-color .2s ease;
}

/* Faktenbox und Formularkasten sind keine anklickbaren Karten — kein Hover-Lift. */
.card:not(.card--meta, .card--form):hover {
    transform: translateY(-5px);
}

.card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 50px 35px;
}

.card-icon {
    margin-bottom: 30px;
    color: var(--text);
}

.card-media {
    width: 100%;
    height: 380px;
    overflow: hidden;
    background: var(--border-soft);
}

.card-media :is(img, picture) {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Service-Karten verteilen Inhalt und CTA auf die volle Hoehe. */
.card--service .card-body {
    justify-content: space-between;
}

.card--service .card-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    margin-bottom: var(--space-sm);
}

.card--team {
    box-shadow: var(--shadow-media);
}

.card--team .card-body {
    padding: 40px;
}

/* Faktenbox auf den Projektdetailseiten. */
.card--meta {
    padding: 30px;
    background: var(--surface);
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
}

.card--meta h3 {
    margin-bottom: var(--space-sm);
    font-size: 1.2rem;
    font-weight: 700;
}

.card--meta ul {
    list-style: none;
}

.card--meta li {
    padding: var(--space-xs) 0;
    border-bottom: 1px solid #e0e0e0;
    color: var(--muted-dark);
    font-size: var(--fs-small);
}

.card--meta li:last-child {
    border-bottom: 0;
}

.card--meta li span {
    color: var(--text);
    font-weight: 600;
}

/* Formularkasten auf contact.html. */
.card--form {
    padding: 50px;
    box-shadow: var(--shadow-media);
}

.card--form .card-title {
    margin-bottom: var(--space-lg);
}

/* ============================================================
   7 · Header / Navigation
   ============================================================ */

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px var(--gutter);
    background: rgba(255, 255, 255, .85);
    border-bottom: 1px solid var(--border-soft);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.logo {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    text-decoration: none;
}

.logo-img {
    width: auto;
    height: 60px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-links > a,
.nav-dropdown > a {
    color: #222;
    font-size: var(--fs-small);
    font-weight: 600;
    text-decoration: none;
    transition: opacity .2s ease, color .2s ease;
}

/* .active setzt nav.js — auch am Portfolio-Elternlink des Dropdowns. */
.nav-links > a:hover,
.nav-links > a.active,
.nav-dropdown > a:hover,
.nav-dropdown > a.active {
    opacity: .7;
}

.nav-dropdown {
    position: relative;
}

.dropdown-content {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 100;
    display: none;
    min-width: 220px;
    padding: 15px 0 10px;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
    list-style: none;
}

.nav-dropdown:hover .dropdown-content,
.nav-dropdown.active .dropdown-content {
    display: block;
}

.dropdown-content a {
    display: block;
    padding: 10px 20px;
    color: #222;
    font-size: var(--fs-small);
    font-weight: 400;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.dropdown-content a:hover,
.dropdown-content a.active {
    background: #f7f7f7;
    color: var(--accent);
}

.hamburger {
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}

/* Die drei Balken sind reines CSS (Mittelbalken = <span>, oberer und
   unterer = Pseudo-Elemente). Bewusst kein Icon-Font: faellt das
   Font-Awesome-CDN aus, bliebe der Burger sonst unsichtbar und die
   Seite waere mobil nicht navigierbar. */
.hamburger-bars {
    position: relative;
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: background-color .2s ease;
}

.hamburger-bars::before,
.hamburger-bars::after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: currentColor;
    border-radius: inherit;
    transition: transform .25s ease;
    content: "";
}

.hamburger-bars::before {
    transform: translateY(-7px);
}

.hamburger-bars::after {
    transform: translateY(7px);
}

/* .open setzt nav.js: die drei Balken werden zum X. */
.hamburger.open .hamburger-bars {
    background: transparent;
}

.hamburger.open .hamburger-bars::before {
    transform: rotate(45deg);
}

.hamburger.open .hamburger-bars::after {
    transform: rotate(-45deg);
}

/* Sichtbarkeits-Schalter, kein eigener Button-Stil (Markup: class="btn mobile-contact-btn"). */
.mobile-contact-btn {
    display: none;
}

/* ============================================================
   8 · Footer
   ============================================================ */

.site-footer {
    width: 100%;
    overflow: hidden;
    padding: var(--space-section) var(--gutter);
    background: var(--surface-footer);
    color: var(--text);
}

.footer-container {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.5fr);
    max-width: var(--content-width);
    margin-inline: auto;
    gap: clamp(24px, 3vw, 40px);
    align-items: start;
}

.footer-col h3 {
    margin-bottom: var(--space-md);
    font-size: 1.2rem;
    font-weight: 700;
}

.footer-col :is(p, a) {
    max-width: 100%;
    color: var(--muted-dark);
    font-size: var(--fs-small);
    line-height: 1.8;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.footer-col ul {
    list-style: none;
}

/* Schaltflaechen ausgenommen: sie dunkeln ueber `.btn:hover` die Flaeche ab
   und behalten weisse Schrift — Kupfer auf Kupfer waere unlesbar. */
.footer-col a:not(.btn):hover {
    color: var(--accent);
}

.social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ddd;
    color: var(--text);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.social-icons a:hover {
    background: var(--accent);
    color: #fff;
}

/* ============================================================
   9 · Wiederkehrende Bloecke
   ============================================================ */

/* 160px Top-Padding gleichen den fixierten Header aus (60px Logo + 2x20px + Rahmen). */
.page-header {
    padding: 160px var(--gutter) var(--space-lg);
    background: var(--bg);
    text-align: center;
}

.cta-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: clamp(50px, 6vw, 80px) clamp(30px, 5vw, 60px);
    background: #000;
    color: #fff;
    border-radius: var(--radius-xl);
}

.cta-banner-text p {
    color: #ccc;
    font-size: 1.2rem;
}

/* ============================================================
   10 · Seitenspezifisch
   ============================================================ */

/* ---- Home: Hero ------------------------------------------- */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100svh;
    overflow: hidden;
    text-align: center;
}

#hero-video {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 1;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: min(100%, 900px);
    padding-inline: var(--gutter);
    color: #fff;
}

.hero-content h1 {
    margin-bottom: var(--space-sm);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: var(--heading-weight);
    letter-spacing: -2px;
    line-height: 1.05;
    text-shadow: 0 4px 20px rgba(0, 0, 0, .6);
}

.hero-content p {
    color: #f1f1f1;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

/* ---- Home: „We know you value your time" ------------------ */

.value-content {
    width: min(100%, 900px);
    margin-inline: auto;
    text-align: left;
}

/* `.lead-text` und `.closing-text` sind bewusst betont (groesser, #111).
   Ohne das :not() wuerde dieser Selektor sie ueberschreiben, weil er
   spezifischer ist als die beiden Einzelklassen. */
.value-content p:not(.lead-text, .closing-text) {
    color: var(--muted-dark);
    font-size: 1.2rem;
    line-height: 1.7;
}

.value-content p {
    margin-bottom: var(--space-md);
}

/* ---- Services: Detailbloecke ------------------------------ */

.service-detail-section {
    padding-block: var(--space-lg);
    border-top: 1px solid var(--border);
}

.grid + .service-detail-section {
    margin-top: var(--space-xl);
}

.feature-item h4 {
    margin-bottom: var(--space-xs);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

.feature-item p {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.6;
}

/* ---- Services: Phone-Mockup ------------------------------- */

.phone-mockup {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 480px;
    margin-top: var(--space-sm);
}

/* Proportionen nach dem realen Geraet: Gehaeuse 71,5 x 149,6 mm
   (Verhaeltnis 1 : 2,09), Rahmenbreite rund 2 % der Gehaeusebreite,
   Eckenradius rund 15 %. Alle inneren Masse in Prozent, damit die
   Verhaeltnisse bei jeder Groesse erhalten bleiben. */
.phone-frame {
    position: relative;
    width: 220px;
    aspect-ratio: 71.5 / 149.6;
    padding: 5px;
    background: #1c1c1e;
    border-radius: 34px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, .18), inset 0 0 0 2px #3a3a3c;
}

/* Dynamic Island: 30 % der Displaybreite, Verhaeltnis rund 10 : 3,
   voll abgerundet, knapp 1,3 % der Displayhoehe unter der Oberkante. */
.phone-frame::before {
    content: "";
    position: absolute;
    top: 2.4%;
    left: 50%;
    z-index: 10;
    width: 30%;
    height: 4.3%;
    transform: translateX(-50%);
    background: var(--text);
    border-radius: var(--radius-pill);
}

.phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    border-radius: 29px;
}

.phone-screen iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Gehaeusetasten — keine Schaltflaechen, deshalb .phone-btn statt .btn. */
.phone-btn {
    position: absolute;
    background: #2c2c2e;
    border-radius: 2px;
}

/* Action-Taste links oben, darunter die beiden Lautstaerketasten,
   rechts die Seitentaste — Abstaende und Laengen als Anteil der
   Gehaeusehoehe, gemessen am realen Geraet. */
.phone-btn--action {
    left: -4px;
    top: 20.8%;
    width: 3px;
    height: 5.5%;
}

.phone-btn--vol-up {
    left: -4px;
    top: 28.3%;
    width: 3px;
    height: 7.2%;
}

.phone-btn--vol-down {
    left: -4px;
    top: 36.5%;
    width: 3px;
    height: 7.2%;
}

.phone-btn--power {
    right: -4px;
    top: 27.3%;
    width: 3px;
    height: 12.3%;
}

/* ---- Services: Review-Kasten ------------------------------ */

.review-section {
    margin-top: var(--space-lg);
    padding: 50px 35px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
}

/* Bewusst 1.2 / 1 statt 2 / 1: das NFC-Foto soll breiter stehen als eine Sidebar. */
.review-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: center;
}

.review-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-media);
}

/* ---- Contact: Infospalte ---------------------------------- */

.contact-info > p {
    margin-bottom: var(--space-lg);
}

.info-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

.info-item i {
    flex: 0 0 auto;
    margin-top: 4px;
    color: var(--accent);
    font-size: 1.3rem;
}

.info-item h3 {
    margin-bottom: 5px;
    font-size: 1.1rem;
    font-weight: 700;
}

.info-item :is(p, a) {
    color: var(--muted-dark);
    font-size: 1rem;
    line-height: 1.5;
    text-decoration: none;
}

.info-item a:hover {
    color: var(--accent);
}

/* ---- Projektdetail / Who ---------------------------------- */

.media-block {
    margin-bottom: var(--space-xl);
}

.team-grid {
    gap: var(--space-lg);
}

/* ---- How It Works: Ablauf, Checklisten, FAQ ---------------- */

/* Die Schrittnummern kommen aus einem CSS-Counter statt aus dem Markup:
   wird spaeter ein Schritt eingefuegt oder entfernt, nummeriert sich die
   Liste selbst neu. <ol> traegt die Semantik, list-style entfaellt. */
.step-list {
    display: grid;
    gap: var(--space-lg);
    max-width: 860px;
    margin-inline: auto;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.step {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: var(--space-md);
    align-items: start;
    text-align: left;
}

.step::before {
    counter-increment: step;
    content: counter(step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--surface-card);
    color: var(--accent);
    border-radius: var(--radius-pill);
    font-size: 1.5rem;
    font-weight: var(--heading-weight);
    line-height: 1;
}

.step h3 {
    margin-bottom: var(--space-xs);
    color: var(--text);
    font-size: var(--fs-subtitle);
    font-weight: 700;
    line-height: 1.3;
}

.step p {
    color: var(--muted);
    font-size: var(--fs-body);
    line-height: 1.7;
}

.prep-intro {
    max-width: 900px;
    margin: 0 auto var(--space-lg);
    text-align: left;
}

.prep-grid {
    align-items: start;
}

.prep-card {
    padding: 40px 35px;
}

.prep-card h3 {
    margin-bottom: var(--space-sm);
    color: var(--text);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Der Haken ist aus zwei Rahmenkanten gezeichnet statt aus einem
   Font-Awesome-Icon: die Listen bleiben damit vollstaendig lesbar, auch
   wenn das CDN nicht erreichbar ist. */
.checklist {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.checklist li {
    position: relative;
    padding-left: 30px;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

.checklist li::before {
    content: "";
    position: absolute;
    top: .35em;
    left: 2px;
    width: 13px;
    height: 7px;
    border-left: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg);
}

.text-body > .checklist {
    margin: var(--space-md) 0;
}

/* FAQ: <details>/<summary> statt eigener JavaScript-Logik. Aufklappen,
   Tastaturbedienung und Vorlesbarkeit bringt der Browser selbst mit,
   und die Antworten stehen auch ohne JavaScript im Dokument. */
.faq-list {
    max-width: var(--narrow-width);
    margin-inline: auto;
    text-align: left;
}

.faq-item {
    border-bottom: 1px solid var(--border);
}

.faq-item:first-child {
    border-top: 1px solid var(--border);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    color: var(--text);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.35;
    cursor: pointer;
    list-style: none;
    transition: color .2s ease;
}

/* Safari zeigt ohne diese Regel weiterhin sein eigenes Dreieck. */
.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary:hover {
    color: var(--accent);
}

.faq-item summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.faq-item summary::after {
    content: "";
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    margin-right: 6px;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: translateY(-3px) rotate(45deg);
    transition: transform .2s ease;
}

.faq-item[open] summary::after {
    transform: translateY(2px) rotate(225deg);
}

.faq-answer {
    max-width: 820px;
    padding-bottom: var(--space-md);
    color: var(--muted);
    font-size: var(--fs-body);
    line-height: 1.7;
}

/* ============================================================
   11 · Responsive
   ============================================================ */

@media (max-width: 1100px) {
    .grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid--sidebar,
    .grid--split {
        grid-template-columns: 1fr;
    }

    .team-grid {
        grid-template-columns: 1fr;
    }

    .split,
    .split--reverse {
        flex-direction: column;
        align-items: stretch;
    }

    /* In der Spaltenrichtung bezieht sich flex-basis auf die HOEHE. Die
       Basiswerte aus .split-media/.split-text (flex: 1.2 1 0 bzw. 1 1 0)
       wuerden die Elemente dort auf Hoehe 0 druecken — die Medienrahmen
       (Matterport-iframe, VR-Video) haben keinen Inhalt, der sie via
       min-height:auto aufhaelt, und verschwinden. Deshalb hier zuruecksetzen. */
    .split-media,
    .split-text {
        flex: 0 0 auto;
        width: 100%;
    }

    .split-text {
        max-width: 900px;
        margin-inline: auto;
    }

    .cta-banner {
        flex-direction: column;
        text-align: center;
    }

    .footer-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    :root {
        --gutter: 20px;
        --space-lg: 40px;
        --space-xl: 56px;
    }

    /* Header / Navigation */
    .site-header {
        padding: 15px var(--gutter);
    }

    .logo-img {
        height: 52px;
    }

    .hamburger {
        display: inline-flex;
        flex-shrink: 0;
    }

    .header-action {
        display: none;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-height: calc(100svh - 82px);
        overflow-y: auto;
        padding: 24px var(--gutter);
        gap: 18px;
        background: #fff;
        border-bottom: 1px solid var(--border-soft);
        box-shadow: 0 15px 30px rgba(0, 0, 0, .05);
    }

    /* .open setzt nav.js beim Klick auf den Burger. */
    .nav-links.open {
        display: flex;
    }

    .mobile-contact-btn {
        display: inline-flex;
        width: 100%;
        margin-top: 4px;
    }

    .nav-dropdown {
        width: 100%;
    }

    .dropdown-content {
        position: static;
        min-width: 0;
        padding: 6px 0 0 15px;
        transform: none;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    /* Unterhalb dieses Breakpoints steuert ausschliesslich nav.js das
       Untermenue (Klasse .active). Das Hover-Oeffnen aus Abschnitt 7 wird
       hier abgeschaltet: auf Touchgeraeten bleibt :hover nach dem Tap am
       Element haengen, das Panel liesse sich dann nicht mehr zuklappen. */
    .nav-dropdown:hover .dropdown-content {
        display: none;
    }

    .nav-dropdown.active .dropdown-content {
        display: block;
    }

    /* Layout */
    .section {
        padding-block: 70px;
    }

    .section--after-header {
        padding-top: var(--space-lg);
    }

    .page-header {
        padding: 130px var(--gutter) 36px;
    }

    .grid--2,
    .grid--3,
    .review-grid {
        grid-template-columns: 1fr;
    }

    .grid--sidebar,
    .grid--split {
        gap: var(--space-lg);
    }

    .media-frame--card {
        height: auto;
        aspect-ratio: 16 / 10;
    }

    /* Typografie */
    .page-title {
        font-size: clamp(2.5rem, 10vw, 4rem);
    }

    .page-title::after {
        width: 56px;
        height: 2px;
        margin-top: 14px;
    }

    .page-intro {
        font-size: 1.1rem;
    }

    .section-title,
    .block-title {
        font-size: clamp(2.2rem, 9vw, 3.5rem);
    }

    .text-body,
    .value-content p {
        font-size: 1.05rem;
    }

    /* Karten */
    .card:not(.card--team, .card--meta, .card--form) {
        border-color: var(--border);
    }

    .card-body {
        padding: 32px 24px;
    }

    .card-media {
        height: 300px;
    }

    .card--team .card-body {
        padding: 30px 24px;
    }

    .card--form {
        padding: 30px 24px;
    }

    .prep-card {
        padding: 32px 24px;
    }

    /* How It Works */
    .step {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: var(--space-sm);
    }

    .step::before {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }

    .step h3 {
        font-size: 1.25rem;
    }

    .step p,
    .faq-answer {
        font-size: 1.05rem;
    }

    .faq-item summary {
        font-size: 1.15rem;
    }

    /* Bloecke */
    .review-section {
        padding: 40px 24px;
    }

    .cta-banner {
        padding: 50px 24px;
    }

    .cta-banner-action,
    .cta-banner-action .btn {
        width: 100%;
    }

    .site-footer {
        padding: 64px var(--gutter);
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

@media (max-width: 480px) {
    .site-header {
        padding-inline: 16px;
    }

    .logo-img {
        height: 46px;
    }

    .hero-content h1 {
        font-size: clamp(2.6rem, 12vw, 3.4rem);
    }

    .btn {
        width: 100%;
    }

    .card-title {
        font-size: 1.7rem;
    }

    .phone-frame {
        width: min(220px, 72vw);
    }
}

/* ============================================================
   12 · Utilities
   ============================================================ */

/* Honeypot: muss fuer Bots ausfuellbar bleiben, darf also nicht display:none
   sein — deshalb off-screen statt ausgeblendet. */
.form-honey {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
}

.form-status {
    min-height: 1.5em;
    margin-top: var(--space-sm);
    font-weight: 600;
}