/* ==========================================================
   Geotrend GmbH - Page-Specific Styles
   Projekte, Technologie, Über uns, Kontakt, Offerte, etc.
   ========================================================== */

/* -- Page Header (gemeinsam für alle Unterseiten) -- */
.page-header {
    /* Die fixe Navigation (64px) ueberlappt den Header-Anfang; daher die
       Nav-Hoehe zum oberen Padding addieren, damit der sichtbare Abstand oben
       gleich gross ist wie unten und der Titel vertikal mittig sitzt. */
    padding: calc(var(--nav-height) + var(--space-48)) 0 var(--space-48);
    text-align: center;
    background: var(--color-bg-secondary);
}
.page-header--hero {
    position: relative;
    padding: 0;
    min-height: 600px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.page-header--hero .page-header__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}
.page-header--hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.65) 12%,
        rgba(0, 0, 0, 0.5) 24%,
        rgba(0, 0, 0, 0.35) 36%,
        rgba(0, 0, 0, 0.2) 48%,
        rgba(0, 0, 0, 0.08) 60%,
        rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
}
/* Kompakter Verlauf fuer Hero-Bilder, die am unteren Rand von sich aus schon
   dunkel sind (z. B. Offerte-Schlucht): etwas schwaecher als der Standard und
   bereits auf halber Hoehe ausgelaufen, damit die obere Bildhaelfte frei bleibt. */
.page-header--hero.page-header--scrim-light::after {
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.68) 0%,
        rgba(0, 0, 0, 0.52) 10%,
        rgba(0, 0, 0, 0.36) 20%,
        rgba(0, 0, 0, 0.22) 30%,
        rgba(0, 0, 0, 0.11) 40%,
        rgba(0, 0, 0, 0) 50%);
}
.page-header--hero .container {
    position: relative;
    z-index: 1;
    padding-bottom: var(--space-64);
    text-align: left;
}
.page-header--hero .page-header__title {
    color: #fff;
    text-align: left;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.page-header--hero .page-header__subtitle {
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    max-width: 700px;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
.page-header__cta {
    margin-top: var(--space-24);
}
.page-header--hero .page-header__cta {
    text-align: left;
}
.page-header__title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-light);
    margin-bottom: var(--space-12);
}

/* Ist der Titel das einzige Element im Header (z. B. Impressum, Datenschutz),
   faellt sein unterer Abstand weg, damit er exakt mittig sitzt. */
.page-header__title:last-child {
    margin-bottom: 0;
}
.page-header__subtitle {
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
    max-width: 600px;
    margin: 0 auto;
}

/* -- Projekte -- */
.project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-24);
}
.project-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    justify-content: center;
    margin-bottom: var(--space-40);
}
.project-filter {
    padding: var(--space-8) var(--space-16);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    background: transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: inherit;
}
.project-filter:hover,
.project-filter--active {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-accent-light);
}

/* -- Projekt Detail -- */
.project-detail__head {
    /* Breadcrumb + Titel: nur etwas Luft zum Hero-Bild statt der vollen 96px
       Section-Hoehe. Die Zentrierung macht der .container (wie in der Navigation),
       diese Section bekommt bewusst KEINE eigene max-width. */
    padding-top: var(--space-40);
}
.project-detail__head .breadcrumb {
    margin-bottom: var(--space-24);
}

.project-detail__hero {
    position: relative;
    height: 400px;
    overflow: hidden;
    background: var(--color-bg-tertiary);
}
.project-detail__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Ersetzen die bisherigen Inline-Styles in pages/projekt-detail.php - Werte 1:1 uebernommen */
.project-detail__title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-light);
    margin-bottom: var(--space-16);
}
.project-detail__lead {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-24);
}
.project-detail__section-title {
    font-size: var(--font-size-lg);
    margin-top: var(--space-32);
    margin-bottom: var(--space-16);
}
.project-detail__body {
    max-width: 800px;
    line-height: var(--line-height-loose);
    color: var(--color-text-secondary);
}
.project-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-24);
    padding: var(--space-24) 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-32);
}
.project-detail__meta-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.project-detail__meta-label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}
.project-detail__meta-value {
    font-weight: var(--font-weight-medium);
}
.project-detail__gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-12);
    margin-top: var(--space-32);
}
.project-detail__gallery img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: var(--border-radius);
    /* Klick oeffnet die Lightbox (js/main.js) */
    cursor: zoom-in;
}

/* -- Lightbox (Projekt-Galerie) --
   Overlay ueber allem (z-modal ist 400, die Lightbox liegt darueber). Pfeile
   und Punkte kommen aus den .one-flight__*-Regeln (landing.css) und sehen
   damit exakt aus wie beim Karussell der Startseite. */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-24);
    background: rgba(0, 0, 0, 0.88);
}
.lightbox[hidden] {
    display: none;
}
/* Die Buehne ist so breit wie der .container der Seite dahinter
   (max-width minus dessen seitliches Padding). */
.lightbox__stage {
    position: relative;
    width: calc(var(--max-width) - 2 * var(--space-24));
    max-width: 100%;
}
.lightbox__img {
    display: block;
    width: 100%;
    max-height: 88vh;
    object-fit: contain;
    border-radius: var(--border-radius);
}
.lightbox__close {
    position: absolute;
    top: var(--space-16);
    right: var(--space-16);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--border-radius-full);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: background var(--transition-fast);
}
.lightbox__close:hover {
    background: rgba(0, 0, 0, 0.85);
}
.project-detail__metrics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-16);
    margin-top: var(--space-32);
}
.metric-card {
    background: var(--color-bg-secondary);
    padding: var(--space-16);
    border-radius: var(--border-radius);
}
.metric-card__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.metric-card__value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
}

/* -- Technologie -- */
.tech-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-32);
    max-width: 960px;
    margin: 0 auto;
}
.tech-card {
    background: var(--color-card-bg);
    border-radius: var(--border-radius);
    padding: var(--space-32);
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--space-32);
    align-items: start;
}
.tech-card__image {
    border-radius: var(--border-radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
/* Der Akzent-Tint ist als Flaeche HINTER einem Bild gedacht. Bei einem noch leeren
   Platzhalter waere er eine grosse rote Flaeche - dort gilt das neutrale
   .media-placeholder aus components.css. */
.tech-card__image:not(.media-placeholder) {
    background: var(--color-accent-light);
}
.tech-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Fuer Motive, deren untere Kante wichtig ist (z. B. Phase One Kameras mit
   Objektiven am Bildrand): beim Cover-Zuschnitt unten verankern, geschnitten
   wird nur oben. */
.tech-card__image--bottom img {
    object-position: center bottom;
}
.tech-card:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) 280px;
}
.tech-card:nth-child(even) .tech-card__image {
    order: 2;
}
/* Icon und Titel stehen auf einer Zeile nebeneinander, die Beschreibung darunter
   ueber die volle Breite. Das Markup bleibt unveraendert (Icon, Titel, Text als
   Geschwister), die Anordnung macht allein dieses Raster. Gilt fuer die
   Technologie-Karten (Container ist __content) und fuer die Werte-Karten auf
   "Ueber uns" (dort ist der Container die Karte selbst). */
.tech-card__content,
.tech-grid--values .tech-card {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* Zeilenabstand ausdruecklich auf 0: die Basisregel .tech-card setzt
       gap: var(--space-32) fuer die Bild-und-Text-Spalten, das wuerde hier
       sonst zusaetzlich zum margin-top des Textes wirken. Den Abstand zur
       Beschreibung steuert allein .tech-card__text. */
    gap: 0 var(--space-16);
    align-items: center;
}
.tech-card__icon {
    width: 48px;
    height: 48px;
    background: var(--color-accent-light);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-accent);
}
.tech-card__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0;
}
.tech-card__text {
    /* Ueber beide Rasterspalten, also unter Icon und Titel hindurch */
    grid-column: 1 / -1;
    /* Nicht vertikal zentrieren: das align-items:center des Rasters gilt sonst
       auch hier, und da nebeneinanderstehende Karten auf gleiche Hoehe gezogen
       werden, landet die ueberschuessige Hoehe als Luft ueber dem Text. */
    align-self: start;
    margin-top: var(--space-16);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-loose);
}

/* -- Werte-Grid (Über uns): 2 Spalten, ohne Bild-Spalte -- */
.tech-grid--values {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-24);
}
.tech-grid--values .tech-card {
    padding: var(--space-24);
}
/* Die Werte-Karten sind kompakter als die Technologie-Karten (kein Bild, kuerzerer
   Text). Der Abstand zwischen der Icon-Titel-Zeile und der Beschreibung darf
   darum enger sein als die 16px der grossen Karten. */
.tech-grid--values .tech-card__text {
    margin-top: var(--space-12);
}

/* -- Über uns -- */
.timeline {
    position: relative;
    padding-left: var(--space-40);
}
.timeline::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
}
.timeline__item {
    position: relative;
    padding-bottom: var(--space-32);
}
.timeline__item::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--space-40) + 7px);
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-accent);
}
.timeline__year {
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
}
.timeline__title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-8);
}
.timeline__text {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-24);
}
.team-card {
    text-align: center;
    background: var(--color-card-bg);
    border-radius: var(--border-radius);
    padding: var(--space-32) var(--space-24);
    box-shadow: var(--shadow-sm);
}
.team-card__photo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--color-bg-tertiary);
    margin: 0 auto var(--space-16);
    overflow: hidden;
}
.team-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Als <h3> ausgezeichnet (Ueberschriftenhierarchie), aber ein Personenname in einer
   Karte braucht nicht die globale h3-Groesse (--font-size-2xl). */
.team-card__name {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0;
    margin-bottom: var(--space-4);
}
.team-card__role {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* -- Kontakt & Formulare -- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-48);
}
/* Abschnittstitel innerhalb der beiden Spalten. Ohne eigene Regel erben sie die
   globale h2-Groesse (--font-size-3xl), die fuer Seitenabschnitte gedacht ist und
   hier neben den kurzen Kontaktangaben voellig ueberdimensioniert wirkt. */
.contact-grid h2 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0;
    margin-bottom: var(--space-16);
}
.contact-info__item {
    margin-bottom: var(--space-24);
}
.contact-info__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}
.contact-info__value {
    font-weight: var(--font-weight-medium);
}

.form-group {
    margin-bottom: var(--space-16);
}
.form-group label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-6);
    color: var(--color-text-secondary);
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--space-10) var(--space-12);
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    font-family: inherit;
    font-size: var(--font-size-base);
    transition: border-color var(--transition-fast);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}
.form-group textarea {
    resize: vertical;
    min-height: 120px;
}
/* Honeypot */
.form-hp { position: absolute; left: -9999px; }

/* Checkbox styling */
.form-group input[type="checkbox"] {
    width: auto;
    accent-color: var(--color-accent);
}

/* Slider styling (Range input in viewers) */
input[type="range"] {
    accent-color: var(--color-accent);
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* -- Offerte -- */
.offerte-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "form map";
    gap: var(--space-32);
}
.offerte-layout__form { grid-area: form; min-width: 0; }
.offerte-layout__map-col { grid-area: map; min-width: 0; display: flex; flex-direction: column; }

/* Hilfe-Kachel in der Karten-Spalte: bewusst kleiner und vom Formular
   abgesetzt, damit sie als eigenstaendiges Angebot wahrgenommen wird.
   Die auto-Margins zentrieren sie vertikal im freien Bereich unter der
   Karte (das Grid streckt beide Spalten gleich hoch), das Padding sichert
   den Mindestabstand im einspaltigen Layout. */
.offerte-help {
    margin-top: auto;
    margin-bottom: auto;
    padding: var(--space-48) 0;
    display: flex;
    justify-content: center;
}
.offerte-help__card {
    max-width: 400px;
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius-xl);
    padding: var(--space-24);
}
.offerte-help__head {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}
.offerte-help__head svg {
    flex-shrink: 0;
    color: var(--color-accent);
}
.offerte-map {
    aspect-ratio: 1;
    background: var(--color-bg-tertiary);
    border-radius: var(--border-radius);
    overflow: hidden;
    position: relative;
}
.offerte-map__info {
    position: absolute;
    bottom: var(--space-12);
    left: var(--space-12);
    right: var(--space-12);
    background: var(--color-card-bg);
    padding: var(--space-12);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    box-shadow: var(--shadow);
}

/* -- Branchen -- */
.branche-hero {
    padding: var(--space-96) 0 var(--space-64);
    background: var(--color-bg-secondary);
}
.branche-hero--hero {
    position: relative;
    padding: 0;
    min-height: 600px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.branche-hero--hero .branche-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    z-index: 0;
}
.branche-hero--hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.65) 12%,
        rgba(0, 0, 0, 0.5) 24%,
        rgba(0, 0, 0, 0.35) 36%,
        rgba(0, 0, 0, 0.2) 48%,
        rgba(0, 0, 0, 0.08) 60%,
        rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    z-index: 0;
}
.branche-hero--hero .container {
    position: relative;
    z-index: 1;
    padding-bottom: var(--space-64);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-32);
    flex-wrap: wrap;
}
.branche-hero__cta {
    flex-shrink: 0;
}
.branche-hero--hero .page-header__title {
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.branche-hero--hero .page-header__subtitle {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
.branche-hero--hero .section-header__subtitle {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.branche-hero__content {
    max-width: 700px;
}
.use-cases {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-24);
}
.use-case {
    background: var(--color-card-bg);
    border-radius: var(--border-radius);
    padding: var(--space-24);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.use-case__image {
    display: block;
    width: calc(100% + var(--space-24) + var(--space-24));
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: calc(var(--space-24) * -1) calc(var(--space-24) * -1) var(--space-24);
    background: var(--color-bg-secondary);
}
.use-case__title {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-8);
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}
.use-case__badge {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-bg-secondary);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.use-case__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* -- Legal (Impressum, Datenschutz) -- */
.legal-content {
    max-width: 800px;
    margin: 0 auto;
}
.legal-content h2 {
    font-size: var(--font-size-lg);
    margin: var(--space-32) 0 var(--space-12);
}
.legal-content h3 {
    font-size: var(--font-size-md);
    margin: var(--space-24) 0 var(--space-8);
}
.legal-content p, .legal-content ul {
    margin-bottom: var(--space-16);
    color: var(--color-text-secondary);
    line-height: var(--line-height-loose);
}
.legal-content ul { padding-left: var(--space-24); list-style: disc; }
.legal-content li { margin-bottom: var(--space-8); }
.legal-content a { color: var(--color-accent); }
.legal-content code {
    font-size: 0.9em;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-16) 0 var(--space-24);
    font-size: var(--font-size-sm);
}
.data-table th,
.data-table td {
    text-align: left;
    padding: var(--space-12) var(--space-16);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
    color: var(--color-text-secondary);
}
.data-table th {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
}
.data-table code { white-space: nowrap; }
.data-table small { color: var(--color-text-muted); }

@media (max-width: 640px) {
    .data-table,
    .data-table tbody,
    .data-table tr,
    .data-table td { display: block; width: 100%; }
    .data-table thead { display: none; }
    .data-table tr {
        border-bottom: 1px solid var(--color-border);
        padding: var(--space-12) 0;
    }
    .data-table td { border: none; padding: var(--space-4) 0; }
    .data-table td:first-child { font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
}

/* -- Responsive -- */
@media (max-width: 1024px) {
    .project-grid { grid-template-columns: repeat(2, 1fr); }
    .tech-grid { grid-template-columns: 1fr; }
    .tech-grid--values { grid-template-columns: repeat(2, 1fr); }
    /* :nth-child(even) muss hier mitgenannt werden - die Regel weiter oben hat eine
       hoehere Spezifitaet als ".tech-card", und Media-Queries aendern daran nichts.
       Ohne sie behalten die geraden Karten ihre 280px-Bildspalte und quetschen den
       Text in eine schmale Restspalte. */
    .tech-card,
    .tech-card:nth-child(even) { grid-template-columns: 1fr; gap: var(--space-24); }
    .tech-card:nth-child(even) .tech-card__image { order: 0; }
    /* Die Werte-Karten sind selbst das Icon-Titel-Raster und duerfen NICHT auf
       eine Spalte fallen, sonst rutscht der Titel unter das Icon. Die Regel
       darueber trifft sie mit gleicher Spezifitaet und stuende spaeter, darum
       hier ausdruecklich mit :nth-child(even) dagegenhalten. */
    .tech-grid--values .tech-card,
    .tech-grid--values .tech-card:nth-child(even) {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0 var(--space-16);
    }
    .tech-card__image { aspect-ratio: 16 / 9; }
    .contact-grid { grid-template-columns: 1fr; }
    .offerte-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "map" "form";
    }
    .use-cases { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .page-header { padding: calc(var(--nav-height) + var(--space-32)) 0 var(--space-32); }
    .page-header--hero { min-height: 400px; }
    .page-header__title { font-size: var(--font-size-2xl); }
    .project-grid { grid-template-columns: 1fr; }
    .tech-grid--values { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr; }
    .project-detail__gallery { grid-template-columns: repeat(2, 1fr); }
    .project-detail__hero { height: 250px; }
}