/* ==========================================================================
   advanced-ctrl-f.giit.ch  -  Gestaltung
   --------------------------------------------------------------------------
   Uebernommen von giit.ch (src/css/style.css dort), damit die Seite aussieht
   wie die Mutterseite. Am Ende stehen die Ergaenzungen fuer diese Seite.
   --------------------------------------------------------------------------
   Dunkel, dicht gesetzt und sachlich: Groteske fuer Text, Schreibmaschine
   fuer alles Technische (Nummern, Bezeichner, Knoepfe). Alles kommt vom
   eigenen Server, die Schrift ist die des Systems.

   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)
     3. Kopfzeile
     4. Hero
     5. Abschnitte
     6. Inhalte der Startseite (Leistung, Preise, Referenzen, Ablauf,
        Konditionen)
     7. Formular
     8. Referenzseite, Textseiten (Impressum, Datenschutz)
     9. Fusszeile
    10. 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:     #b8bec8;
    /* --dim ist der leiseste Ton fuer Text; auf den dunklen Flaechen
       erreicht er rund 7:1, --muted rund 10:1 - beides deutlich ueber den
       4.5:1, die WCAG AA fuer Fliesstext verlangt. */
    --dim:       #9ea5b1;

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

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

    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
    /* Reihenfolge nach Betriebssystem. "ui-monospace" steht vorn, weil es
       unter macOS der einzige Weg zu SF Mono ist; Browser, die den Namen
       nicht kennen, ueberspringen ihn. */
    --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, ol { 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: var(--bg-a);
    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, transform 0.18s ease;
}
.btn:hover { text-decoration: none; }
.btn-lg { padding: 14px 22px; font-size: 0.9rem; }
.btn-sm { padding: 8px 13px; font-size: 0.76rem; }

/* Dunkler Text auf dem Akzent, nicht weisser: Weiss auf diesem Blau kommt nur
   auf 3:1, dunkel darauf auf 6.5:1. */
.btn-primary { background: var(--accent); color: var(--bg-a); }
.btn-primary:hover { background: #2aa6f2; color: var(--bg-a); transform: translateY(-1px); }

.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; transform: none; }

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

.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; margin-left: auto; }
.site-nav + .header-actions { margin-left: 0; }

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

/* Der Hinweis, wenn gerade keine Auftraege angenommen werden. */
.closed-banner {
    padding: 12px 0;
    background: rgba(255, 180, 60, 0.1);
    border-bottom: 1px solid rgba(255, 180, 60, 0.3);
    color: #f5d9a0;
    font-size: 0.9rem;
}
.closed-banner strong { color: #ffd98a; margin-right: 6px; }

/* Der Hinweis auf laengere Antwortzeiten (BUSY_NOTICE). Auftraege laufen
   weiter - deshalb ruhiger als die Ausgelastet-Meldung. */
.busy-banner {
    padding: 12px 0;
    background: var(--accent-bg);
    border-bottom: 1px solid rgba(28, 154, 234, 0.3);
    color: var(--accent-2);
    font-size: 0.9rem;
}
.busy-banner strong { color: #fff; margin-right: 6px; }

/* Der Hinweis, dass der Testmodus an ist (TEST_MODE in der .env). */
.test-banner {
    padding: 10px 0;
    background: rgba(126, 226, 160, 0.08);
    border-bottom: 1px solid rgba(126, 226, 160, 0.3);
    color: var(--ok);
    font-family: var(--mono);
    font-size: 0.8rem;
}
.test-banner strong { color: #fff; margin-right: 6px; }

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

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

/* 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-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}
.hero-inner { max-width: 640px; }
.hero-start .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; } }

/* Der Titel des Webseiten-Angebots: fett und gesetzt wie eine Ueberschrift,
   nicht wie der Name im Hero - es ist ein Abschnitt, kein zweiter Kopf. */
/* Klein genug, dass er in zwei Zeilen steht und den Hero nicht nachaefft;
   der Festpreis steht in seiner eigenen Zeile. */
.webseiten-title {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
}
.webseiten-title .hl { display: block; color: var(--accent-2); }

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

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

/* Kennzahlen als Tabelle statt als Werbekacheln. */
.hero-facts {
    display: flex;
    flex-wrap: wrap;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    border-top: 1px solid var(--line);
}
.hero-facts div {
    flex: 0 0 auto;
    padding: 16px 24px;
    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);
}

/* Die wandernde Vorschau rechts: ein Rahmen wie ein Browserfenster, darunter
   der Name der Vorlage und ihre Farben. */
.hero-preview { position: relative; }
.hero-preview-frame {
    position: relative;
    padding: 34px 6px 6px;
    background: var(--panel);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(28, 154, 234, 0.08);
}
.hero-preview-frame::before {
    content: "";
    position: absolute;
    left: 14px; top: 12px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #ff5f57;
    box-shadow: 16px 0 0 #febc2e, 32px 0 0 #28c840;
}
.hero-preview-frame .pv-frame { border-radius: 8px; }
.hero-preview-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--muted);
}
.hero-preview-meta .name { color: #fff; }
.hero-preview-meta .name::before { content: "Vorlage: "; color: var(--dim); }
.hero-preview-meta .chips { display: inline-flex; gap: 6px; margin-left: auto; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 4px;
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--muted);
}
.chip i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1px solid rgba(255,255,255,0.2); }
.hero-preview-hint { margin: 12px 0 0; font-size: 0.82rem; color: var(--dim); }

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

.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; }

.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; }

/* --- Kurzbeschrieb ---
   Links der Text und die fuenf Felder, in denen Gruenwald Innovation
   arbeitet; rechts Kontakt, Standort und Quellcode. Keine Listen - was
   frueher als aufklappbare Anwendungen dastand, steckt jetzt im Konfigurator
   und in einem Satz je Feld. */

.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-fields {
    display: grid;
    gap: 0;
    margin: 32px 0 0;
    border-top: 1px solid var(--line);
}
.about-fields > div {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 18px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}
.about-fields dt {
    font-family: var(--mono);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-2);
    padding-top: 3px;
}
.about-fields dd { margin: 0; font-size: 0.95rem; color: var(--muted); }
/* Ein Feld mit eigener Seite (Webseiten) ist als ganze Zeile anklickbar. */
.about-fields > div[data-card-link] { cursor: pointer; }
.about-fields > div[data-card-link]:hover dt a { color: #fff; text-decoration: none; }
.about-fields dt a { color: var(--accent-2); }

.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); }

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

/* --- Leistung: sechs Punkte im Raster --- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}
.feature {
    padding: 28px 26px 30px;
    background: var(--panel);
    transition: background 0.2s ease;
}
.feature:hover { background: var(--panel-2); }
.feature-num {
    display: block;
    margin-bottom: 18px;
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    color: var(--accent);
}
.feature h3 { font-size: 1.05rem; margin-bottom: 10px; }
.feature p { color: var(--muted); font-size: 0.93rem; }

/* --- Preise --- */
/* Alle Karten gleich hoch: das Raster streckt sie, und in der Karte nimmt
   die Liste den Rest, damit der Knopf unten buendig steht. */
.price-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}
.price-card {
    padding: 28px 28px 30px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 18px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.price-card[data-card-link]:hover { border-color: var(--accent); transform: translateY(-2px); }
.price-main { border-color: rgba(28, 154, 234, 0.45); box-shadow: 0 0 0 1px rgba(28, 154, 234, 0.15), 0 30px 60px -40px rgba(28, 154, 234, 0.5); }
.price-head { display: grid; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.price-head h3 { font-family: var(--mono); font-size: 0.86rem; font-weight: 500; color: var(--muted); }
.price {
    font-family: var(--mono);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: #fff;
    letter-spacing: -0.02em;
}
.price-card > p { color: var(--muted); font-size: 0.94rem; }
.price-card .btn { justify-self: start; align-self: end; }

.checklist { display: grid; gap: 8px; }
.checklist li {
    position: relative;
    padding-left: 24px;
    color: var(--text);
    font-size: 0.93rem;
}
.checklist li::before {
    content: "";
    position: absolute;
    left: 2px; top: 0.55em;
    width: 10px; height: 5px;
    border-left: 2px solid var(--ok);
    border-bottom: 2px solid var(--ok);
    transform: rotate(-45deg);
}

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

/* --- Referenzen --- */
.ref-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.ref-card {
    display: grid;
    grid-template-rows: auto 1fr;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.ref-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.ref-shot { display: block; position: relative; overflow: hidden; background: #fff; }
/* Nur das Kartenbild selbst, nicht die Bilder in einer lebendigen Vorschau
   (etwa das Logo in deren Kopfzeile). */
.ref-shot > img { display: block; width: 100%; height: auto; transition: transform 0.6s ease; }
.ref-card:hover .ref-shot > img { transform: scale(1.03); }
/* Vier Zeilen: Kennung, Titel, Text, Knoepfe. Der Text bekommt den Rest der
   Hoehe, damit die Knoepfe in allen Karten auf derselben Linie ganz unten
   stehen - egal, wie lang der Text darueber ist. */
.ref-body { padding: 20px 22px 22px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; }
.ref-line { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.ref-domain { font-family: var(--mono); font-size: 0.78rem; color: var(--accent-2); }
.ref-branche { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.ref-body h3 { font-size: 1.1rem; }
.ref-body h3 a { color: #fff; }
.ref-body p { color: var(--muted); font-size: 0.92rem; }
.ref-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; align-self: end; }
.ref-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.76rem; color: var(--muted); }
.ref-live:hover { color: #fff; }

/* --- Weitere Projekte: eine Liste, Zeile fuer Zeile --- */
.stack {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}
.stack > * + * { border-top: 1px solid var(--line); }

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;
}
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; }
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; }
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);
}

/* --- Ablauf --- */
.steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.step {
    position: relative;
    padding: 26px 24px 28px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--accent-bg);
    border: 1px solid rgba(28, 154, 234, 0.4);
    color: var(--accent-2);
    font-family: var(--mono);
    font-size: 0.85rem;
}
.step h3 { font-size: 1.02rem; margin-bottom: 10px; }
.step p { color: var(--muted); font-size: 0.92rem; }

/* --- Konditionen --- */
.terms {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
    border-top: 1px solid var(--line);
}
.terms > div {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}
.terms dt {
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-2);
    padding-top: 3px;
}
.terms dd { margin: 0; color: var(--muted); font-size: 0.93rem; }

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

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

.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);
}
.request-side-cta { margin-top: 28px; display: grid; gap: 12px; justify-items: start; }
.request-side-cta p { color: var(--muted); font-size: 0.95rem; }

.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-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; }

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

/* --- Referenzseite --- */
.ref-hero { padding: 56px 0 40px; }
.ref-hero .back, .webseiten-intro .back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 30px; font-size: 0.92rem; font-family: var(--mono); }

/* --- Webseiten-Seite --- */

/* Vier Punkte in zwei Spalten, mit etwas mehr Text je Karte. */
.feature-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-grid-2 .feature p { font-size: 0.95rem; }

/* Der Einstieg fuellt den Bildschirm wie ein Hero, ist aber ein Abschnitt. */
.webseiten-intro { padding-top: 48px; }
.webseiten-intro .hero-inner { max-width: 640px; }

/* Der Konfigurator in drei Saetzen, als Karte unter der Leistung. */
.konfig-teaser {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    margin-top: 32px;
    padding: 26px 30px;
    background: var(--panel);
    border: 1px solid rgba(28, 154, 234, 0.4);
    border-radius: var(--r);
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.konfig-teaser:hover { border-color: var(--accent); }
.konfig-teaser h3 { font-size: 1.1rem; margin-bottom: 8px; }
.konfig-teaser p { color: var(--muted); font-size: 0.95rem; }

/* Knoepfe nebeneinander, z.B. Weg zur Webseiten-Seite und in den Konfigurator. */
.sec-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.terms-download { margin-top: 30px; }
.terms-download .note { margin: 0; }
.terms-download + .sec-cta { margin-top: 20px; }
.ref-hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0 0 14px; }
.ref-hero .lead { max-width: 720px; color: var(--muted); font-size: 1.05rem; }
.ref-hero-line { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 22px; font-family: var(--mono); font-size: 0.8rem; color: var(--dim); }
.ref-hero-line a { color: var(--accent-2); display: inline-flex; align-items: center; gap: 6px; }
.ref-screen {
    margin: 30px 0 0;
    padding: 34px 6px 6px;
    background: var(--panel);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    position: relative;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
}
.ref-screen::before {
    content: "";
    position: absolute;
    left: 14px; top: 12px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #ff5f57;
    box-shadow: 16px 0 0 #febc2e, 32px 0 0 #28c840;
}
.ref-screen > img { display: block; width: 100%; height: auto; border-radius: 8px; }
/* Die Umsetzung steht als eine Spalte; die Zeilen bleiben lesbar kurz. */
.ref-detail { max-width: 760px; }
.ref-detail h2 { font-size: 1.25rem; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ref-detail ul { display: grid; gap: 10px; }
.ref-detail li { position: relative; padding-left: 20px; color: var(--muted); font-size: 0.95rem; }
.ref-detail li::before { content: "\203A"; position: absolute; left: 2px; top: -1px; font-family: var(--mono); color: var(--accent); }
.ref-facts {
    margin: 40px 0 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--panel);
}
.ref-facts > div { padding: 18px 22px; border-right: 1px solid var(--line); }
.ref-facts > div:last-child { border-right: none; }
.ref-facts dt { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.ref-facts dd { margin: 4px 0 0; color: var(--text); font-size: 0.95rem; }
.ref-cta {
    margin-top: 48px;
    padding: 34px 32px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    background: linear-gradient(135deg, rgba(28, 154, 234, 0.14), rgba(28, 154, 234, 0.03));
    border: 1px solid rgba(28, 154, 234, 0.35);
    border-radius: var(--r);
}
.ref-cta h2 { font-size: 1.4rem; margin-bottom: 8px; }
.ref-cta p { color: var(--muted); }
.ref-more { margin-top: 56px; }
.ref-more h2 { font-size: 1.2rem; margin-bottom: 20px; }

/* --- Vorlagenseiten (vorlagen.php, vorlage.php) --- */
.vorlage-screen { padding-top: 34px; }
.vorlage-screen .pv-frame { border-radius: 8px; }
.vorlage-screen .pv-frame > img { display: block; width: 100%; height: auto; }
/* Karten der Vorlagen: lebendige Vorschau statt Bild (src/js/vorlage.js). */
.ref-shot .pv-frame { border-radius: 0; }
.ref-shot .pv-frame > img { display: block; width: 100%; height: auto; }
.vorlage-play {
    position: absolute; right: 12px; top: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    background: transparent;
    border: 1px solid var(--line-2); border-radius: 50%;
    color: var(--accent-2);
    cursor: pointer;
}
.vorlage-play:hover { border-color: var(--accent); background: var(--accent-bg); }
.vorlage-play[hidden] { display: none; }
.vorlage-cta-top { margin-top: 26px; }
.vorlage-cta-top .note { margin: 0; }
.vorlage-text { max-width: 760px; margin-bottom: 40px; }
.vorlage-text p { color: var(--text); font-size: 1.05rem; line-height: 1.7; }
.vorlage-listen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
/* --- Advanced Ctrl+F --- */
.ctrlf-hero .note { margin-top: 12px; color: var(--dim); font-size: 0.88rem; }
/* Die Suchkuerzel stehen, wie man sie tippt: nicht in Grossbuchstaben. */
.ctrlf-syntax dt { text-transform: none; letter-spacing: 0; font-size: 0.86rem; color: #fff; }

.vorlage-faq { margin-top: 48px; max-width: 820px; }
.vorlage-faq h2 { font-size: 1.25rem; margin-bottom: 14px; }
.vorlage-faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.vorlage-faq summary { cursor: pointer; font-weight: 600; color: #fff; list-style: none; padding-right: 28px; position: relative; }
.vorlage-faq summary::-webkit-details-marker { display: none; }
.vorlage-faq summary::after { content: "+"; position: absolute; right: 4px; top: -2px; font-family: var(--mono); color: var(--accent-2); font-size: 1.1rem; }
.vorlage-faq details[open] summary::after { content: "\2212"; }
.vorlage-faq details p { margin-top: 10px; color: var(--muted); font-size: 0.95rem; }
.vorlage-karte-titel { font-size: 1.1rem; }
.vorlage-karte-titel a { color: #fff; }
.page-vorlagen .ref-hero .note { max-width: 720px; }
/* Die Bereiche der Vorlagen-Uebersicht: je Gruppe ein Abschnitt mit eigener
   Akzentfarbe (--ton), gedaempft fuer den dunklen Grund. Die Farbe faerbt
   nur den Abschnitt - Nummer, Linie unter dem Titel, einen leisen Schimmer
   im Hintergrund. Die Karten sind in allen Bereichen dieselben. */
.vorlagen-bereich { --ton: var(--accent-2); position: relative; overflow: hidden; }
.bereich-1 { --ton: #f5a524; }
.bereich-2 { --ton: #8b93f8; }
.bereich-3 { --ton: #2dd4bf; }
.bereich-4 { --ton: #9bd34a; }
.bereich-5 { --ton: #f47fb8; }
.bereich-6 { --ton: #38d6f0; }
.vorlagen-bereich::before {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background:
        radial-gradient(60rem 26rem at 100% 0%, color-mix(in srgb, var(--ton) 9%, transparent), transparent 70%),
        radial-gradient(40rem 20rem at 0% 100%, color-mix(in srgb, var(--ton) 5%, transparent), transparent 70%);
}
.vorlagen-bereich { border-top-color: color-mix(in srgb, var(--ton) 28%, transparent); }
.vorlagen-bereich > .container { position: relative; }
.vorlagen-bereich .sec-label .num { color: var(--ton); }
.vorlagen-gruppe {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    margin: 8px 0 30px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, var(--ton), transparent) no-repeat 0 100% / 120px 2px;
}
.vorlagen-cta { margin-top: 0; }
/* Vier Vorlagen in einer Gruppe: auf breiten Bildschirmen eine Reihe statt
   drei plus eine allein. */
@media (min-width: 1100px) {
    .ref-grid.ref-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ref-grid-4 .ref-body { padding: 18px 18px 20px; }
}
@media (max-width: 760px) {
    .vorlage-listen { grid-template-columns: 1fr; }
}

/* --- Textseiten: Impressum, Datenschutz --- */
.legal { max-width: 780px; padding: 56px 0 96px; }
.legal h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin-bottom: 12px; }
.legal .stand { color: var(--dim); font-size: 0.9rem; margin-bottom: 48px; }
.legal section { margin-bottom: 44px; }
.legal h2 {
    font-size: 1.22rem;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.legal p, .legal li { color: var(--muted); font-size: 0.98rem; }
.legal ul { margin: 0 0 1.1em; padding-left: 22px; list-style: disc; }
.legal li { margin-bottom: 7px; }
.legal li::marker { color: var(--accent); }
.legal address { font-style: normal; line-height: 1.85; color: var(--muted); margin-bottom: 1.1em; }
.legal code {
    padding: 2px 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.88em;
}
.legal .muted { color: var(--dim); font-size: 0.87rem; }
.legal .back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 34px; font-size: 0.92rem; }

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

.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; }
.footer-bottom a { color: var(--muted); }

/* ------------------------------------------------------------------ 10. */

/* Karten, die als ganze Flaeche auf etwas verweisen (site.js fuehrt den
   Klick aus; der Verweis darin bleibt der Weg ohne JavaScript). */
[data-card-link] { cursor: pointer; }
.hero-preview[data-card-link]:hover .hero-preview-frame { border-color: var(--accent); }

/* 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 dem Namen nicht mehr: der Bytecode
   laege ueber dem Text. */
@media (max-width: 1199px) {
    .hero-code { display: none; }
}

@media (max-width: 1100px) {
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .about { grid-template-columns: 1fr; gap: 32px; }
    .konfig-teaser { grid-template-columns: 1fr; }
    .about-side { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 24px; }
    .hero-preview { max-width: 640px; }
    .feature-grid, .ref-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .price-grid { grid-template-columns: 1fr 1fr; }
    .price-hosting { grid-column: 1 / -1; }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .terms { grid-template-columns: 1fr; }
}

@media (max-width: 1040px) {
    .request-layout { grid-template-columns: 1fr; gap: 36px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .ref-cta { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .container { padding: 0 20px; }
    .section { padding: 64px 0; }
    .sec-head { margin-bottom: 30px; }
    .hero { padding: 48px 0 60px; }
    .hero-start { min-height: auto; }
    .header-cta { padding: 8px 10px; font-size: 0.72rem; }
    .brand span { font-size: 0.78rem; }

    .feature-grid, .feature-grid-2, .ref-grid, .price-grid, .steps, .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; }
    .terms > div { grid-template-columns: 1fr; gap: 6px; }
    .footer-grid { grid-template-columns: 1fr; }
    .about-fields > div { grid-template-columns: 1fr; gap: 4px; }
    .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; }
    .hero-preview-meta { flex-wrap: wrap; }
    .hero-preview-meta .chips { margin-left: 0; }
    .ref-facts { grid-template-columns: 1fr; }
    .ref-facts > div { border-right: none; border-bottom: 1px solid var(--line); }
    .ref-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; }
}

/* Unter 560px ist neben Knopf und Menue kein Platz mehr fuer den Namen.
   Das Logo bleibt und fuehrt weiterhin auf die Startseite; vorgelesen wird
   der Name trotzdem. */
@media (max-width: 560px) {
    .brand span {
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px; padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
}

@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, .hero-code, .hero-preview { display: none !important; }
    .section { background: none; }
    .feature, .price-card, .step, .ref-card { background: none; border-color: #ccc; }
    h1, h2, h3, h4 { color: #000; }
}

/* ==========================================================================
   advanced-ctrl-f.giit.ch  -  Ergaenzungen
   ========================================================================== */

/* Der Herausgeber in der Fusszeile. */
.footer-brand a { color: inherit; }