/* FarmToTalk – Design-Tokens.
   Farben aus Resources/AppIcon/wintec_icon_ftt_bold_tuned.svg abgeleitet. */
:root {
    color-scheme: light;

    --brand-900: #0f2f2a;
    --brand-800: #143a31;
    --brand-700: #184f29;
    --brand-600: #2c8a42;
    --brand-400: #8fcf45;
    --brand-300: #9bd243;

    --bg: #fbfbf8;
    --bg-alt: #f2f4ef;
    --surface: #ffffff;
    --text: #14201c;
    --text-muted: #566b60;
    --border: #e1e6e0;
    --accent: var(--brand-600);
    --accent-text: #ffffff;
    --accent-quiet: #eaf4e9;

    /* Vier Toene fuer die Icon-Kreise. Alle so gewaehlt, dass ein weisses
       Symbol darauf mindestens 3:1 Kontrast hat. */
    --icon-t0: #2c8a42;
    --icon-t1: #0f2f2a;
    --icon-t2: #4c9a3a;
    --icon-t3: #184f29;
    --on-dark: #f0f5ef;
    --on-dark-muted: #a9bfb3;

    /* Abstandsskala. Jeder vertikale Abstand im Layout kommt aus dieser
       Liste - sonst entsteht wieder ein Flickenteppich aus Einzelwerten. */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-s: 0.75rem;
    --space-m: 1rem;
    --space-l: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    /* Sektionsrhythmus waechst mit dem Viewport, damit er auf grossen
       Monitoren nicht relativ zusammenschnurrt. */
    --space-section: clamp(3.5rem, 7vw, 6rem);
    --space-head: clamp(2rem, 3.5vw, 3rem);

    --radius: 0.625rem;
    --radius-lg: 1rem;
    --shadow: 0 1px 2px rgb(15 47 42 / 6%), 0 8px 24px -12px rgb(15 47 42 / 18%);
    /* Fluide Satzbreite: waechst mit dem Viewport, gedeckelt damit auf
       Ultrawide-Monitoren keine 3000px-Zeilen entstehen. */
    --container: min(94vw, 120rem);
    --gutter: clamp(1.25rem, 3vw, 3rem);

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --bg: #0d1a17;
        --bg-alt: #101f1b;
        --surface: #13241f;
        --text: #e8efe9;
        --text-muted: #9fb0a8;
        --border: #22382f;
        --accent: var(--brand-400);
        --accent-text: #0d1a17;
        --accent-quiet: #16291f;
        --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 60%);

        /* Die beiden dunklen Toene verschwinden sonst im Kartenhintergrund. */
        --icon-t1: #3f9a55;
        --icon-t3: #2f7a34;
    }
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Alles andere rechnet in rem/ch/em – damit skaliert das gesamte Layout
       mit der Monitorbreite, ohne dass irgendwo eine Pixelgroesse klebt. */
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.375rem);
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-700); }
@media (prefers-color-scheme: dark) { a:hover { color: var(--brand-300); } }

h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 0.5em; font-weight: 650; }
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); }
h2 { font-size: clamp(1.65rem, 1.25rem + 1.6vw, 2.6rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 var(--space-m); }
p:last-child { margin-bottom: 0; }

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

/* --- Layout ------------------------------------------------------------ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--space-section); }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--border); }
.section__head {
    max-width: 62ch;
    margin-inline: auto;
    margin-bottom: var(--space-head);
    text-align: center;
}
.section__head p { color: var(--text-muted); font-size: 1.075rem; }

/* Dokumentseiten bekommen eine zentrierte Lesespalte. Bewusst gesetzt:
   .prose ueberschreibt die max-width von .container, dessen margin-inline
   bleibt aber wirksam - das soll man beim Lesen sehen, nicht raten. */
.prose { max-width: 72ch; margin-inline: auto; }
.prose h2 { margin-top: var(--space-2xl); }
.prose h3 { margin-top: var(--space-xl); }
.prose ul, .prose ol { padding-left: 1.4em; margin-block: 0 var(--space-m); }
.prose li + li { margin-top: var(--space-2xs); }
.prose dl { margin: 0 0 var(--space-m); }
.prose dt { font-weight: 600; margin-top: var(--space-l); }
.prose dd { margin: var(--space-2xs) 0 0; color: var(--text-muted); }
.prose .table-wrap { margin-block: var(--space-l); }
.prose > .store-buttons { margin-block: var(--space-l) var(--space-xl); }

.eyebrow {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--space-s);
}

/* Pfeil-Link als tertiaere Aktion, z. B. unter einem Kartenraster. */
.section__more { margin-top: var(--space-xl); margin-bottom: 0; text-align: center; }

/* Tertiaerer Link mit Pfeil - ruhig, bis man ihn anfasst. */
.arrow-link { font-weight: 600; text-decoration: none; }
.arrow-link:hover { text-decoration: underline; }

/* --- Buttons ----------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms, border-color 120ms, transform 120ms;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: var(--accent-text); }
.btn--primary:hover { background: var(--brand-700); color: #fff; }
@media (prefers-color-scheme: dark) { .btn--primary:hover { background: var(--brand-300); color: var(--accent-text); } }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn--ghost:hover { background: var(--accent-quiet); color: var(--text); }

/* --- Cards ------------------------------------------------------------- */
.grid { display: grid; gap: var(--space-l); }

/* Feste Spaltenstufen statt auto-fit. Die Karten zeigen alle zwoelf
   Funktionsbereiche, und zwoelf ist durch 1, 2, 3 und 4 teilbar - dadurch
   sind die Reihen bei jeder Bildschirmbreite voll. */
.grid--3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 88rem) { .grid--3 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.grid--2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: clamp(1.5rem, 2.2vw, 2rem);
    text-align: center;
    /* Deutlicher als anderswo auf der Seite: die Karten sollen als eigene
       Flaechen lesbar sein, auch wenn sie auf hellem Grund stehen. */
    box-shadow: 0 1px 2px rgb(15 47 42 / 5%), 0 0.75rem 1.5rem -0.75rem rgb(15 47 42 / 14%);
}
/* Titel bewusst leichter als die uebrigen Ueberschriften - die Karte lebt
   vom Icon, nicht von fetter Schrift. */
.card h3 {
    margin-bottom: var(--space-xs);
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: -0.005em;
}
.card p { color: var(--text-muted); font-size: 0.95rem; }
.card__icon {
    display: grid;
    place-items: center;
    margin-inline: auto;
    width: 4rem; height: 4rem;
    margin-bottom: var(--space-m);
    border-radius: 50%;
    background: var(--icon-t0);
    color: #fff;
}
.card__icon svg { width: 1.9rem; height: 1.9rem; stroke-width: 1.6; }

/* Vier Toene aus der App-Icon-Palette, reihum. Bringt Leben ins Raster,
   ohne die Farbwelt zu verlassen. */
.card__icon--t0 { background: var(--icon-t0); }
.card__icon--t1 { background: var(--icon-t1); }
.card__icon--t2 { background: var(--icon-t2); }
.card__icon--t3 { background: var(--icon-t3); }

/* In einer Zeile neben der Ueberschrift (Funktionsseite): kleiner und flach. */
.card__icon--inline {
    margin-bottom: 0;
    width: 2.75rem; height: 2.75rem;
    background: var(--accent-quiet);
    color: var(--accent);
}
.card__icon--inline svg { width: 1.4rem; height: 1.4rem; }

/* --- Tabelle ----------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-weight: 600; }

/* --- Formular ---------------------------------------------------------- */
.field { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-l); }
.field label { font-weight: 600; font-size: 0.95rem; }

/* Kontrollkaestchen mit mehrzeiligem Text daneben. */
.field--check > label { display: flex; gap: var(--space-s); align-items: flex-start; font-weight: 400; }
.field--check input[type="checkbox"] { width: auto; margin-top: 0.3em; flex: 0 0 auto; }
.field input, .field textarea, .field select {
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.6rem 0.75rem;
    width: 100%;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field .hint { color: var(--text-muted); font-size: 0.85rem; }
.validation-message { color: #c0392b; font-size: 0.875rem; }
@media (prefers-color-scheme: dark) { .validation-message { color: #ff8a7a; } }
.alert {
    border: 1px solid var(--border);
    border-left: 0.1875rem solid var(--accent);
    background: var(--accent-quiet);
    border-radius: var(--radius);
    padding: var(--space-m) var(--space-l);
    margin-bottom: var(--space-xl);
}

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

/* --- Kopfzeile --------------------------------------------------------- */
.skip-link {
    position: absolute;
    left: -100vw;
    top: 0.5rem;
    z-index: 100;
    background: var(--surface);
    padding: 0.6rem 1rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.skip-link:focus { left: 0.75rem; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(0.625rem);
    border-bottom: 1px solid var(--border);
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4rem;
}

.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text); margin-right: auto; }
.brand__name { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; }
.brand__name strong { color: var(--accent); font-weight: 600; }

.site-nav { display: flex; align-items: center; gap: 0.35rem; }
.site-nav__link {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
}
.site-nav__link:hover { background: var(--accent-quiet); color: var(--text); }
.site-nav__link.active { color: var(--accent); }
.site-nav__cta { margin-left: 0.5rem; }

.nav-toggle, .nav-toggle__label { display: none; }

@media (max-width: 46rem) {
    .nav-toggle__label {
        display: grid;
        gap: 0.25rem;
        padding: 0.6rem 0.4rem;
        cursor: pointer;
    }
    .nav-toggle__label span {
        display: block;
        width: 1.375rem; height: 0.125rem;
        background: var(--text);
        border-radius: 0.125rem;
    }
    .site-nav {
        display: none;
        position: absolute;
        inset-inline: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        padding: 0.75rem 1.25rem 1.1rem;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow);
    }
    .nav-toggle:checked ~ .site-nav { display: flex; }
    .site-nav__cta { margin: 0.5rem 0 0; justify-content: center; }
}

/* --- Hero -------------------------------------------------------------- */
.hero {
    background:
        radial-gradient(65rem 30rem at 85% -10%, color-mix(in srgb, var(--brand-400) 22%, transparent), transparent 70%),
        var(--bg);
    border-bottom: 1px solid var(--border);
    padding-block: clamp(3rem, 7vw, 6rem);
}
/* Der Hero steht auf einer Mittelachse: Text zentriert, darunter die
   Vorteilszeile in gleich breiten Spalten, darunter das Bild zentriert.
   Die frueheren zwei Spalten liessen je nach Breite 90 bis 404 px Luecke
   zwischen Textblock und Bild stehen. */
.hero__text {
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
}
.hero__actions { justify-content: center; }
.hero__more { margin: var(--space-m) 0 0; }

.hero p.lead {
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
    color: var(--text-muted);
    max-width: 52ch;
    margin-inline: auto;
}
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-l);
    margin-top: var(--space-xl);
}

.hero__list {
    list-style: none;
    margin: var(--space-xl) auto 0;
    padding: 0;
    display: grid;
    gap: var(--space-l);
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
}
@media (min-width: 40rem) { .hero__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .hero__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hero__list li {
    display: grid;
    justify-items: center;
    gap: var(--space-xs);
    font-size: 0.95rem;
    color: var(--text-muted);
}
.hero__list-icon {
    display: grid;
    place-items: center;
    width: 2.75rem; height: 2.75rem;
    border-radius: 50%;
    background: var(--accent-quiet);
    color: var(--accent);
}
.hero__list-icon svg { width: 1.4rem; height: 1.4rem; }

/* Die App laeuft nur auf Telefon und Tablet, alle Aufnahmen sind im
   Hochformat. Ein 1080x1920-Bild ueber die volle Breite waere absurd hoch -
   deshalb steht es in einem schmalen Geraeterahmen mittig unter dem Text. */
.hero__shot {
    margin: clamp(2.5rem, 5vw, 3.75rem) auto 0;
    max-width: min(100%, 19rem);
    border-radius: 1.75rem;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: var(--space-2xs);
}
.hero__shot img { display: block; width: 100%; height: auto; border-radius: 1.5rem; }

/* --- Screenshot-Galerie ------------------------------------------------ */
/* Drei Hochformat-Aufnahmen: eine Spalte oder drei. Zwei Spalten wuerden eine
   allein in die zweite Reihe stellen, die Reihen bleiben so immer voll. */
.shots { display: grid; gap: clamp(1.5rem, 2.5vw, 2.75rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 58rem) { .shots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.shots figure { margin: 0; }
.shots img {
    display: block;
    /* Begrenzt, damit die Telefone in einer breiten Spalte nicht auseinander
       laufen - und mittig, damit die drei Rahmen auf einer Achse sitzen. */
    width: 100%;
    max-width: 18rem;
    height: auto;
    margin-inline: auto;
    border-radius: 1.5rem;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow);
}
/* Gleiche Breite wie das Bild darueber, sonst laeuft die Zeile weiter als der
   Rahmen und die Spalten wirken unterschiedlich breit. */
.shots figcaption {
    margin: var(--space-s) auto 0;
    max-width: 22rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-align: center;
}
.shots figcaption strong { display: block; color: var(--text); font-weight: 600; }

/* --- Smartphone-Abschnitt ---------------------------------------------- */
.mobile-split { display: grid; gap: var(--space-2xl); align-items: center; justify-items: center; }
@media (min-width: 56rem) {
    .mobile-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Der Textblock bleibt linksbuendig - zentrierter Fliesstext liest sich
   schlecht - aber als Block mittig in seiner Haelfte. */
.mobile-split__text { max-width: 34rem; }
.mobile-split ul { margin: var(--space-l) 0 0; padding-left: 1.4em; }
.mobile-split li + li { margin-top: var(--space-s); }

/* Hochformat-Aufnahme vom Telefon: schmal halten, sonst wird sie riesig hoch. */
.phone-shot {
    margin: 0 auto;
    max-width: 19rem;
    padding: var(--space-2xs);
    border: 1px solid var(--border);
    border-radius: 1.75rem;
    background: var(--surface);
    box-shadow: var(--shadow);
}
.phone-shot img { display: block; border-radius: 1.5rem; }

/* --- Download-Band ----------------------------------------------------- */
.band {
    background: linear-gradient(135deg, var(--brand-900), var(--brand-700));
    color: var(--on-dark);
    text-align: center;
}
.band h2 { color: #fff; }
.band p { color: var(--on-dark-muted); max-width: 52ch; margin-inline: auto; }
.band .btn--ghost { color: #fff; border-color: rgb(255 255 255 / 35%); }
.band .btn--ghost:hover { background: rgb(255 255 255 / 12%); color: #fff; }
.band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-s); margin-top: var(--space-xl); }

.platforms { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs); }
.platforms li {
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    font-size: 0.875rem;
}

/* --- Funktionsliste (Detailseite) -------------------------------------- */
.feature-list {
    display: grid;
    gap: var(--space-2xl);
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 0;
}
@media (min-width: 64rem) {
    .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.feature-list > li {
    list-style: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-m);
    align-items: start;
}
.feature-list__body > * { margin-bottom: var(--space-s); }
.feature-list__body > :last-child { margin-bottom: 0; }
.feature-list__body h3 { margin-bottom: var(--space-xs); }
.feature-list__summary { color: var(--text-muted); }
.feature-list ul { padding-left: 1.4em; color: var(--text-muted); }
.feature-list ul li + li { margin-top: var(--space-2xs); }
.badge {
    display: inline-block;
    font-size: 0.75em;
    font-weight: 600;
    padding: 0.15em 0.6em;
    border-radius: 999px;
    background: var(--accent-quiet);
    color: var(--brand-700);
    vertical-align: 0.1em;
    white-space: nowrap;
    /* Ohne das weitet der Innenabstand die Zeile im Fliesstext. */
    line-height: 1;
}
@media (prefers-color-scheme: dark) { .badge { color: var(--brand-300); } }

/* --- Fußzeile ---------------------------------------------------------- */
.site-footer {
    margin-top: 0;
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
    padding-block: var(--space-2xl) var(--space-l);
}
.site-footer__inner {
    display: grid;
    gap: var(--space-xl);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.site-footer__brand { display: flex; gap: var(--space-s); align-items: flex-start; }
.site-footer__brand p { font-size: 0.925rem; color: var(--text-muted); }
.site-footer__brand strong { color: var(--text); }
.site-footer__nav { display: grid; gap: var(--space-2xs); align-content: start; }
.site-footer__nav h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin: 0 0 var(--space-2xs); }
.site-footer__nav a { color: var(--text); text-decoration: none; font-size: 0.925rem; }
.site-footer__nav a:hover { color: var(--accent); text-decoration: underline; }
.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xs);
    margin-top: var(--space-xl);
    padding-top: var(--space-l);
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* --- Store-Schaltflächen ----------------------------------------------- */
.store-buttons { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.store-btn {
    display: grid;
    gap: 0.05rem;
    padding: 0.6rem 1.4rem;
    min-width: 11.5rem;
    border-radius: 0.75rem;
    background: #101a17;
    border: 1px solid rgb(255 255 255 / 18%);
    color: #fff;
    text-decoration: none;
    transition: background-color 120ms, border-color 120ms;
}
.store-btn:hover { background: #1c2f28; border-color: rgb(255 255 255 / 32%); color: #fff; }
.store-btn__small { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.72; }
.store-btn__big { font-size: 1.15rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }

/* Auf hellem Grund (Hilfeseite) bleibt der dunkle Knopf, aber mit Rahmen der Seite. */
.section:not(.band) .store-btn { border-color: transparent; }