/* ==========================================================================
   giit.ch  -  Gestaltung
   --------------------------------------------------------------------------
   Eine Seite fuer eine IT-Bude, nicht fuer eine Broschuere: dicht gesetzt und
   sachlich. Alles kommt vom eigenen Server, die Schrift ist die des Systems -
   Groteske fuer Text, Schreibmaschine fuer alles Technische (Nummern, Marken,
   Bezeichner).

   Die umgesetzten Arbeiten stehen in klappbaren Gruppen: die Listen sind lang,
   und zugeklappt sieht man auf einen Blick, welche Bereiche es gibt.

   Die Abschnitte wechseln sich farblich ab, damit man beim Blaettern sieht,
   wo einer aufhoert und der naechste anfaengt.

   Aufbau:
     1. Grundlagen (Variablen, Reset, Typografie)
     2. Bausteine (Knoepfe, Karten, Listen)
     3. Kopfzeile
     4. Hero
     5. Abschnitte
     6. Inhalte (klappbare Gruppen, Projekte, Preise)
     7. Anfrage (Formular und Dialog)
     8. Fusszeile
     9. Schmale Bildschirme, Bewegung, Druck
   ========================================================================== */

/* ------------------------------------------------------------------ 1. */

:root {
    /* Zwei Flaechen, die sich abwechseln, plus die Karten darauf. */
    --bg-a:      #08090b;
    --bg-b:      #0b0d11;
    --panel:     #101319;
    --panel-2:   #12161d;

    --line:      rgba(255, 255, 255, 0.075);
    --line-2:    rgba(255, 255, 255, 0.14);

    --text:      #e9ebef;
    --muted:     #9aa1ad;
    --dim:       #666d79;

    --accent:    #1c9aea;
    --accent-2:  #58b8f4;
    --accent-bg: rgba(28, 154, 234, 0.10);

    --r:         10px;
    --r-sm:      6px;
    --maxw:      1200px;

    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
    /* Reihenfolge nach Betriebssystem. "Liberation Mono" steht bewusst NICHT
       drin: sie ist auf jedem Linux installiert, ist aber Courier nachempfunden
       und wirkt duenn und krakelig. Da sie frueher in der Liste stand, hat der
       Browser genau sie genommen.
       "ui-monospace" bleibt vorn, weil es unter macOS der einzige Weg zu SF Mono
       ist. Unter Linux kennt der Browser den Namen nicht und ueberspringt ihn -
       geprueft, das schadet nichts. */
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,        /* macOS   */
            "Cascadia Mono", Consolas,                             /* Windows */
            "JetBrains Mono", "Fira Mono", "DejaVu Sans Mono",     /* Linux   */
            "Noto Sans Mono", monospace;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 76px;   /* der feste Kopf darf das Ziel nicht verdecken */
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg-a);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.022em;
    color: #fff;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

ul { margin: 0; padding: 0; list-style: none; }

img, svg { max-width: 100%; height: auto; }

code, kbd { font-family: var(--mono); font-size: 0.92em; }

:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 2px;
    border-radius: 3px;
}

.container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 28px;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 14px; top: -70px;
    z-index: 200;
    padding: 10px 16px;
    background: var(--accent);
    color: #fff;
    border-radius: var(--r-sm);
    font-family: var(--mono);
    font-size: 0.82rem;
    transition: top 0.18s ease;
}
.skip-link:focus { top: 14px; text-decoration: none; }

/* ------------------------------------------------------------------ 2. */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-family: var(--mono);
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn:hover { text-decoration: none; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #2aa6f2; color: #fff; }

.btn-ghost {
    background: transparent;
    border-color: var(--line-2);
    color: var(--text);
}
.btn-ghost:hover { border-color: var(--accent); color: #fff; background: var(--accent-bg); }

.btn[disabled] { opacity: 0.5; cursor: default; }

/* Das Zeichen vor der Beschriftung technischer Knoepfe. */
.btn .sign { color: var(--accent-2); }
.btn-primary .sign { color: rgba(255, 255, 255, 0.75); }

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

/* ------------------------------------------------------------------ 3. */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(8, 9, 11, 0.86);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
}

.site-header .container {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 60px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    white-space: nowrap;
}
.brand:hover { text-decoration: none; color: #fff; }
.brand img { width: 26px; height: 26px; }
.brand span {
    font-family: var(--mono);
    font-size: 0.86rem;
    letter-spacing: 0.02em;
}

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; align-items: center; gap: 2px; }
.site-nav a {
    display: block;
    padding: 7px 11px;
    border-radius: var(--r-sm);
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.8rem;
    transition: color 0.15s ease, background 0.15s ease;
}
.site-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.05); text-decoration: none; }

.header-actions { display: flex; align-items: center; gap: 8px; }

/* Sprachumschalter: zwei Kuerzel, das aktive hervorgehoben. */
.lang-switch {
    display: inline-flex;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.lang-switch a {
    padding: 5px 10px;
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--dim);
    transition: color 0.15s ease, background 0.15s ease;
}
.lang-switch a:hover { color: var(--text); text-decoration: none; }
.lang-switch a[aria-current="true"] { background: var(--accent); color: #fff; }

.nav-toggle {
    display: none;
    padding: 8px;
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    color: var(--text);
    cursor: pointer;
}

/* ------------------------------------------------------------------ 4. */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: calc(100vh - 60px);
    padding: 80px 0;
    overflow: hidden;
}

/* Ein feines Raster im Hintergrund - eine Andeutung von Millimeterpapier,
   kein Bild. Es liegt hinter allem und faengt keine Klicks ab. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    background-size: 64px 64px;
    /* Zu den Raendern hin ausblenden, damit es nicht wie eine Tabelle wirkt. */
    -webkit-mask-image: radial-gradient(120% 90% at 22% 40%, #000 0%, transparent 72%);
            mask-image: radial-gradient(120% 90% at 22% 40%, #000 0%, transparent 72%);
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(48rem 32rem at 82% 8%, rgba(28, 154, 234, 0.10), transparent 65%);
}

/* Zufaelliger Bytecode, der sich staendig ein wenig aendert. Er sitzt auf
   der rechten Haelfte, wo kein Text steht, und verblasst nach unten ins
   Nichts - damit er Hintergrund bleibt und nie mit dem Inhalt konkurriert. */
.hero-code {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    /* Schmal genug, dass die Ueberschrift links nicht hineinragt - sonst
       sieht es aus, als fehlten dem Bytecode ein paar Stellen. */
    width: 44%;
    padding: 30px 30px 0 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    font-family: var(--mono);
    font-size: 0.72rem;
    line-height: 1.85;
    letter-spacing: 0.1em;
    color: var(--accent);
    white-space: pre;
    opacity: 0.3;
    /* Von oben nach unten auslaufend. Zwei Stufen, damit es nicht wie eine
       harte Kante wirkt. */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.35) 55%, transparent 88%);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.35) 55%, transparent 88%);
}

.hero .container { position: relative; z-index: 1; }
.hero-inner { max-width: 820px; }

.hero-mark {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}
.hero-mark img { width: 44px; height: 44px; }
.hero-mark .meta {
    font-family: var(--mono);
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dim);
}

/* Der Name steht in der Schreibmaschinenschrift, wie der Leitsatz direkt
   darunter - beides gehoert zusammen. Zwei Anpassungen sind noetig: Monospace
   traegt breiter, also ein kleinerer Grad, und sie vertraegt kein
   Zusammenziehen, also fast kein negativer Zeichenabstand. */
.hero h1 {
    font-family: var(--mono);
    /* Der untere Wert ist bewusst klein: "Grünwald Innovation" sind 19
       Zeichen, und Monospace rechnet mit rund 0.6em je Zeichen. Bei 1.8rem
       waeren das 330px - mehr, als auf einem 360px-Geraet zwischen die
       Raender passt. */
    /* Versalien. Sie stehen im CSS und nicht im HTML, damit im Quelltext
       weiterhin "Grünwald Innovation" steht - fuer Vorleseprogramme und
       Suchmaschinen liest sich das besser als GRUENWALD INNOVATION. */
    text-transform: uppercase;
    font-size: clamp(1.45rem, 6.4vw, 3.2rem);
    /* Nicht fett. Monospace traegt in der normalen Staerke genug. */
    font-weight: 400;
    /* Versalien vertragen etwas Luft, anders als die gemischte Schreibung. */
    letter-spacing: 0.02em;
    margin-bottom: 20px;
}

/* Der Leitsatz steht in der Schreibmaschinenschrift, mit einem blinkenden
   Zeichen dahinter. Das ist die eine Verspieltheit, die sich die Seite
   erlaubt - und sie passt zum Gewerbe. */
.hero .slogan {
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: var(--mono);
    font-size: clamp(0.95rem, 2vw, 1.2rem);
    color: var(--accent-2);
    margin-bottom: 26px;
}
.hero .slogan .caret {
    display: inline-block;
    width: 9px; height: 1.05em;
    margin-left: 4px;
    background: var(--accent);
    animation: blink 1.15s steps(2, start) infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.hero .lead {
    max-width: 560px;
    font-size: 1.05rem;
    color: var(--muted);
    margin-bottom: 34px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}

/* Kennzahlen als Tabelle statt als Werbekacheln. */
/* Die Breite richtet sich nach dem Inhalt, damit die Linie darueber genau
   ueber den Spalten endet und nicht ins Leere laeuft. */
.hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    border-top: 1px solid var(--line);
}
.hero-facts div {
    flex: 0 0 auto;
    min-width: 150px;
    /* Luft auf BEIDEN Seiten - sonst klebt die Trennlinie an der Zahl der
       naechsten Spalte. Die erste Spalte beginnt buendig mit dem Text
       darueber und bekommt links keine. */
    padding: 16px 30px;
    border-right: 1px solid var(--line);
}
.hero-facts div:first-child { padding-left: 0; }
.hero-facts div:last-child { border-right: none; padding-right: 0; }
.hero-facts strong {
    display: block;
    font-family: var(--mono);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
}
.hero-facts span {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dim);
}

/* ------------------------------------------------------------------ 5. */

/* Die Abschnitte wechseln sich ab. Die Klasse steht im HTML, damit sich die
   Reihenfolge aendern laesst, ohne dass die Faerbung durcheinandergeraet. */
.section { padding: 92px 0; border-top: 1px solid var(--line); }
.section.tone-a { background: var(--bg-a); }
.section.tone-b { background: var(--bg-b); }

.sec-head { margin-bottom: 40px; }

/* Nummer und Bezeichner in Schreibmaschinenschrift, ohne Strich davor. */
.sec-label {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dim);
}
.sec-label .num { color: var(--accent); }

.sec-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.sec-head .lead {
    max-width: 680px;
    margin: 16px 0 0;
    color: var(--muted);
}

.sec-cta { margin-top: 38px; }

/* ------------------------------------------------------------------ 6. */

/* --- Kurzbeschrieb --- */

.about {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 56px;
    align-items: start;
}
.about p { font-size: 1.04rem; color: var(--muted); }
.about p:last-of-type { color: var(--text); }

.about-side { border-left: 1px solid var(--line); padding-left: 26px; }
.about-side dl { margin: 0; display: grid; gap: 16px; }
.about-side dt {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dim);
}
.about-side dd { margin: 3px 0 0; font-size: 0.95rem; color: var(--text); }
.about-side dd a { color: var(--text); }
.about-side dd a:hover { color: var(--accent-2); }

/* --- Die Liste ---------------------------------------------------------
   Ein Bau fuer alles, was untereinander steht: ein Rahmen aussen herum, die
   Zeilen darin nur durch Haarlinien getrennt. Verwendet fuer die Anwendungen
   (Software, Hardware) und fuer die Projekte. */

.stack {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}
/* Alle ausser der ersten Zeile bekommen eine Linie nach oben. */
.stack > * + * { border-top: 1px solid var(--line); }

/* --- Aufklappbare Anwendung (Software, Hardware) --- */

details.group > summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 26px;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 0.88rem;
    color: var(--text);
    /* Das Standard-Dreieck des Browsers weg - wir setzen ein eigenes. */
    list-style: none;
    transition: background 0.18s ease, color 0.18s ease;
}
details.group > summary::-webkit-details-marker { display: none; }
details.group > summary::marker { content: ""; }
details.group > summary:hover { background: var(--panel-2); color: #fff; }
details.group[open] > summary { color: #fff; }

/* Die Zahl sagt, wie viele umgesetzte Arbeiten dahinterstecken. */
.group summary .count {
    margin-left: auto;
    font-size: 0.74rem;
    color: var(--dim);
}
.group summary .chev {
    flex: none;
    color: var(--dim);
    transition: transform 0.25s ease, color 0.25s ease;
}
details.group[open] > summary .chev { transform: rotate(180deg); color: var(--accent-2); }

.group .items { padding: 2px 26px 18px 26px; }
.group .items li {
    position: relative;
    padding: 9px 0 9px 20px;
    color: var(--muted);
    font-size: 0.93rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.group .items li:first-child { border-top: none; }
/* Das Zeichen vor jedem Eintrag steht in der Schreibmaschinenschrift und
   bleibt auf der Hoehe der ersten Zeile. */
.group .items li::before {
    content: "\203A";           /* einfaches Winkelzeichen */
    position: absolute;
    left: 2px; top: 8px;
    font-family: var(--mono);
    color: var(--accent);
    opacity: 0.8;
}

/* --- Projekte: dieselbe Liste, aber ohne Aufklappen --- */

li.project {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: start;
    gap: 20px;
    padding: 22px 26px;
    transition: background 0.2s ease;
}
/* Die ganze Zeile ist anklickbar (siehe site.js), das soll der Zeiger auch
   zeigen. Ohne JavaScript bleibt der Verweis rechts der Weg zum Projekt. */
li.project { cursor: pointer; }
li.project:hover { background: var(--panel-2); }
li.project:hover .open { color: #8ccdf7; text-decoration: underline; text-underline-offset: 3px; }

li.project .mark {
    width: 40px; height: 40px;
    object-fit: contain;
    border-radius: 8px;
}

/* Name und Schlagwort auf einer Zeile, die Beschreibung darunter. */
li.project .line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 6px;
}
li.project .name {
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #fff;
}
li.project .tag {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dim);
}
li.project p { color: var(--muted); font-size: 0.93rem; margin: 0; }

/* Der Verweis steht rechts und bleibt auf der Hoehe des Namens. */
li.project .open {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-top: 2px;
    white-space: nowrap;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--accent-2);
}

/* --- Preise: kurze Bloecke, die offen dastehen --- */

.cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}
.card {
    padding: 24px 26px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.card > h3 {
    font-family: var(--mono);
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #fff;
    padding-bottom: 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
}
.card li {
    padding: 11px 0;
    color: var(--muted);
    font-size: 0.94rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.card li:last-child { border-bottom: none; padding-bottom: 0; }

.note {
    margin-top: 18px;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--dim);
}

/* ------------------------------------------------------------------ 7. */

.request-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 52px;
    align-items: start;
}

/* Der kurze Satz ueber dem Formular. Er sagt in beiden Betriebsarten, woran
   man ist, und wandert mit dem Block in den Dialog. */
.form-intro {
    margin: 0 0 22px;
    padding-left: 14px;
    border-left: 2px solid var(--accent);
    color: var(--muted);
    font-size: 0.95rem;
}

.contact-list { border-top: 1px solid var(--line); }
.contact-list a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 0.86rem;
    color: var(--muted);
}
.contact-list a:hover { color: #fff; text-decoration: none; }
.contact-list .role {
    margin-left: auto;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dim);
}

.form-grid { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.field label {
    display: block;
    margin-bottom: 7px;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dim);
}
.field label .req { color: var(--accent); }

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--panel);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
}
.field textarea { min-height: 140px; resize: vertical; font-family: inherit; }
.field input::placeholder,
.field textarea::placeholder { color: var(--dim); }
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--panel-2);
}
.field select {
    appearance: none;
    -webkit-appearance: none;
    /* Der Pfeil als Grafik im Feld - so sieht das Auswahlfeld ueberall
       gleich aus. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8' fill='none'%3E%3Cpath d='M1 1l5.5 5.5L12 1' stroke='%23666d79' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}
.field select option { background: #12161d; color: var(--text); }

/* Der Honigtopf. Kein display:none - manche Bots ueberspringen genau das. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Bestaetigung der Datenschutzerklaerung. Das Kaestchen bleibt oben buendig
   mit der ersten Zeile, auch wenn der Text umbricht. */
.field-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    align-items: start;
}
.field-check input[type="checkbox"] {
    width: 17px; height: 17px;
    margin: 2px 0 0;
    accent-color: var(--accent);
    cursor: pointer;
    flex: none;
}
.field-check label {
    margin: 0;
    font-family: var(--sans);
    font-size: 0.88rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
    cursor: pointer;
}
.field-check label a { color: var(--accent-2); }

.form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.form-note { max-width: 380px; margin: 0; font-size: 0.78rem; color: var(--dim); }

.form-status {
    padding: 12px 16px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    font-size: 0.9rem;
}
.form-status[hidden] { display: none; }
.form-status.ok  { border-color: rgba(52, 199, 89, 0.4);  background: rgba(52, 199, 89, 0.09);  color: #7ee2a0; }
.form-status.err { border-color: rgba(255, 92, 92, 0.38); background: rgba(255, 92, 92, 0.08); color: #ff9d9d; }

/* --- Dialog: dasselbe Formular, aus jedem Abschnitt heraus erreichbar --- */

dialog.request-dialog {
    width: min(620px, calc(100vw - 28px));
    max-height: min(88vh, 920px);
    padding: 0;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    background: var(--bg-b);
    color: var(--text);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
    overflow: auto;
}
dialog.request-dialog::backdrop { background: rgba(4, 5, 7, 0.74); }

.dialog-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 26px 0;
}
.dialog-head h2 { font-size: 1.3rem; }
.dialog-head p { margin: 8px 0 0; color: var(--muted); font-size: 0.92rem; }
.dialog-close {
    margin-left: auto;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    color: var(--muted);
    cursor: pointer;
}
.dialog-close:hover { color: #fff; border-color: var(--accent); }
.dialog-body { padding: 22px 26px 26px; }

/* ------------------------------------------------------------------ 8. */

.site-footer {
    padding: 64px 0 28px;
    background: var(--bg-a);
    border-top: 1px solid var(--line);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 44px;
    margin-bottom: 48px;
}
.site-footer h3 {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dim);
    margin-bottom: 16px;
}
.site-footer address {
    font-style: normal;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.8;
}
.site-footer li { margin-bottom: 7px; }
.site-footer li a { color: var(--muted); font-family: var(--mono); font-size: 0.84rem; }
.site-footer li a:hover { color: #fff; }

.footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.footer-brand img { width: 30px; height: 30px; }
.footer-brand strong { font-family: var(--mono); font-size: 0.92rem; font-weight: 500; }

.socials { display: flex; gap: 8px; margin-top: 20px; }
.socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--muted);
    transition: color 0.18s ease, border-color 0.18s ease;
}
.socials a:hover { color: #fff; border-color: var(--accent); }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 0.76rem;
    color: var(--dim);
}
.footer-bottom p { margin: 0; }

/* ------------------------------------------------------------------ 9. */

/* Abschnitte blenden sich beim Erreichen ein. Ohne JavaScript bleibt alles
   sichtbar - die Klasse wird erst per Skript gesetzt. */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Unter 1200px reicht der Platz neben der Ueberschrift nicht mehr. */
@media (max-width: 1199px) {
    .hero-code { display: none; }
}

@media (max-width: 1040px) {
    .about, .request-layout { grid-template-columns: 1fr; gap: 36px; }
    .about-side { border-left: none; border-top: 1px solid var(--line); padding: 24px 0 0; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 760px) {
    .container { padding: 0 20px; }
    .section { padding: 64px 0; }
    .sec-head { margin-bottom: 30px; }
    .hero { min-height: auto; padding: 60px 0 72px; }

    .cards, .form-row { grid-template-columns: 1fr; }
    /* Marke und Text nebeneinander, der Verweis rutscht darunter. */
    li.project { grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding: 20px; }
    li.project .mark { width: 32px; height: 32px; }
    li.project .open { grid-column: 2; padding-top: 4px; }
    .footer-grid { grid-template-columns: 1fr; }
    .hero-facts { width: 100%; }
    .hero-facts div { flex: 1 1 100%; border-right: none; border-bottom: 1px solid var(--line); padding-left: 0; }
    .hero-facts div:last-child { border-bottom: none; }

    /* Die Navigation klappt unter dem Kopf auf. */
    .nav-toggle { display: flex; }
    .site-nav {
        position: absolute;
        left: 0; right: 0; top: 100%;
        display: none;
        padding: 12px 20px 18px;
        background: rgba(8, 9, 11, 0.98);
        border-bottom: 1px solid var(--line);
    }
    .site-nav.is-open { display: block; }
    .site-nav ul { flex-direction: column; align-items: stretch; gap: 1px; }
    .site-nav a { padding: 11px 12px; font-size: 0.92rem; }
    .site-header .container { position: relative; gap: 10px; }
    .header-actions { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}

@media print {
    body { background: #fff; color: #000; }
    .site-header, .sec-cta, .hero::before, .hero::after, dialog { display: none !important; }
    .section { background: none; }
    .stack, .card { background: none; border-color: #ccc; }
    /* Auf Papier nuetzt eine zugeklappte Liste niemandem. */
    details.group > .items { display: block !important; }
    .group summary .chev { display: none; }
    /* Auf Papier nuetzt eine zugeklappte Gruppe niemandem. */
    h1, h2, h3, h4 { color: #000; }
}