/* ===========================================
   LANDING.CSS - Dark editorial landing page
   Scoped to body.landing-page (index.html only).
   Loaded AFTER main.css so it wins the cascade.
   =========================================== */

.landing-page {
    /* All existing tokens. Page and cards separate by only 1.06:1, so
       cards carry a border rather than the shadow the guide pages use;
       this page is flat by design. --d-ink is the single off-black,
       shared with every other page. */
    --d-bg: var(--bg-page);         /* #f8f8f8, same as every other page */
    --d-surface: var(--bg-surface); /* #ffffff */
    --d-ink: var(--text-primary);   /* #1a1a1a, 15.4:1 on the page */
    --d-ink-soft: var(--text-secondary); /* #3d3a37, 11.3:1 on a card */
    --d-ink-dim: var(--text-muted);      /* #595550, 6.6:1 on the page */

    --d-line: var(--border-light);   /* #e5e5e5 */
    --d-line-strong: var(--border-default); /* #d4d4d4 */

    background: var(--d-bg);
    color: var(--d-ink);
}

.landing-page main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-2xl);
    width: 100%;
}

/* Skip link: the shared rule parks it at top:-40px while its box is 45px
   tall, so five pixels sit above the fold. Park it fully off-canvas.
   The same bug is still live on the guide pages. */
.landing-page .skip-link {
    top: -100px;
}

.landing-page .skip-link:focus {
    top: 0;
}

/* =========================================
   HEADER
   The page uses the site header from layout.css, the same one every
   other page has. Only two things need correcting: it is sticky at
   top:36px to clear the utility bar the guide pages carry above it,
   and this page has no such bar.
   ========================================= */

/* Rest position identical to the guide pages: the shared margin-top:36px
   stays, so the logo sits at y=60 everywhere and never jumps on
   navigation. But the shared top:36px reserves a slot for the utility
   bar the guide pages have above their header; this page has none, so
   content scrolled visibly through the open slot. Sticking at 0 puts
   the header flush against the viewport once you scroll. */
.landing-page .site-header {
    top: 0;
}

/* =========================================
   THE GRID - staircase, 4 columns x 2 rows
   Row 1: [ headline .......... ] [ 01 ] [ 02 ]
   Row 2: [ form ] [ 03 ] [ 04 ] [ 05 ]
   minmax(0, 1fr) so the display headline cannot
   blow the first column past its track.
   ========================================= */

.landing-page .landing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* Cards stretch to their row, so each row's cards are equal; the
       tallest content sets the row and nothing else adds height. */
    gap: var(--space-md);
    padding: var(--space-2xl) 0 var(--space-3xl);
}

.landing-page .hero-text  { grid-area: 1 / 1 / 2 / 3; }
.landing-page .grid-cta   { grid-area: 2 / 1 / 3 / 2; }
.landing-page .card-01    { grid-area: 1 / 3 / 2 / 4; }
.landing-page .card-02    { grid-area: 1 / 4 / 2 / 5; }
.landing-page .card-03    { grid-area: 2 / 2 / 3 / 3; }
.landing-page .card-04    { grid-area: 2 / 3 / 3 / 4; }
.landing-page .card-05    { grid-area: 2 / 4 / 3 / 5; }

/* HERO */
.landing-page .hero-text {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    padding: 0 var(--space-xl) var(--space-sm) 0;
}

.landing-page .hero-text h1 {
    font-size: var(--font-4xl);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.035em;
    text-wrap: balance;
    color: var(--d-ink);
    margin: 0 0 var(--space-lg);
}

.landing-page .hero-text .value-prop {
    font-size: var(--font-xl);
    line-height: 1.5;
    color: var(--d-ink-soft);
    margin: 0;
    max-width: 52ch;
}

/* PAID-SERVICE CELL
   Filled dark against five white guide cards, so the one thing that is
   not a free guide reads as a different class of thing. */
.landing-page .grid-cta {
    display: flex;
    flex-direction: column;
    background: var(--text-primary);
    border: 1px solid var(--text-primary);
    padding: 32px 40px;
    color: var(--d-surface);
    text-decoration: none;
    /* Identical hover machinery to the site's guide cards (pages.css):
       lift, scale, shadow. The cell stays dark. */
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease;
}

.landing-page .grid-cta:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: var(--shadow-lg);
}

.landing-page .grid-cta:active {
    transform: scale(0.97);
    box-shadow: var(--shadow-sm);
    transition: transform 0.1s ease;
}

.landing-page .grid-cta:focus-visible {
    outline: 2px solid var(--d-ink);
    outline-offset: 2px;
}

.landing-page .grid-cta h2 {
    font-size: var(--font-xl);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: inherit;
    min-height: 2.1em;
    margin: 0 0 var(--space-md);
}

.landing-page .grid-cta .benefit {
    font-size: var(--font-sm);
    line-height: 1.55;
    color: var(--bg-muted);
    margin: 0;
}

.landing-page .grid-cta .cta {
    font-size: var(--font-sm);
    font-weight: 600;
    color: inherit;
    padding-top: var(--space-md);
}

/* The page is lang="de", so browsers with a German dictionary can
   hyphenate the long compounds. No overflow-wrap here: it breaks words
   at arbitrary letters ("Webentwicklun/g"), which is worse than the
   overflow it prevents. The padding and type sizes below make the
   longest word fit without needing either. */
.landing-page .hero-text h1,
.landing-page .guide-card h2,
.landing-page .guide-card .benefit,
.landing-page .grid-cta h2,
.landing-page .grid-cta .benefit {
    hyphens: auto;
}

/* =========================================
   TILES
   Title at the top, copy beneath it, link pinned
   to the bottom edge, so the box carries content
   top to bottom instead of hugging one corner.
   ========================================= */

.landing-page .guide-card {
    background: var(--d-surface);
    color: var(--d-ink);
    display: flex;
    flex-direction: column;
    /* No min-height: content decides. 32px vertical padding, 40px
       horizontal; the old 40px all round plus a 236px floor is what
       made every box tall. */
    padding: 32px 40px;
    border: 1px solid var(--d-line-strong);
    border-radius: 0;
    text-decoration: none;
}

/* No hover rules: the shared .guide-card:hover from pages.css applies,
   the same lift and shadow the live index had. */

.landing-page .guide-card:focus-visible {
    outline: 2px solid var(--d-ink);
    outline-offset: 2px;
}

.landing-page .guide-card h2 {
    font-size: var(--font-xl);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    /* Not balanced: a long title fills the first line and the remainder
       drops to the second. */
    text-wrap: wrap;
    color: inherit;
    /* Two lines are reserved whether the title needs them or not, so the
       copy underneath starts at the same height in every tile. */
    min-height: 2.1em;
    margin: 0 0 var(--space-md);
}

.landing-page .guide-card .benefit {
    font-size: var(--font-sm);
    line-height: 1.55;
    color: var(--d-ink-soft);
    margin: 0;
    flex-grow: 0;
}

.landing-page .guide-card .cta {
    font-size: var(--font-sm);
    font-weight: 600;
    color: inherit;
    /* No margin-top:auto here. Pinning the link to the bottom edge dumps
       every pixel of surplus row height into one gap between the copy and
       the link. The link follows the copy on a fixed rhythm instead, and
       leftover height reads as bottom padding. */
    padding-top: var(--space-md);
}

/* =========================================
   BIO PANEL
   Same material as the tiles at a larger scale.
   The contact form lives here, directly under the
   availability line that motivates it, rather than
   sitting in the guide grid as a peer of the guides.
   ========================================= */

.landing-page .landing-about {
    max-width: none;
    margin: 0 0 var(--space-3xl);
    padding: var(--space-3xl);
    background: var(--d-surface);
    color: var(--d-ink);
    border: 1px solid var(--d-line-strong);
    border-top: 1px solid var(--d-line-strong);
    display: grid;
}

.landing-page .landing-about h2 {
    /* One token above the 14px copy: a card title, not a display
       heading. The guide grid keeps 24px; this supporting row does not
       compete with it. */
    font-size: var(--font-base);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-wrap: balance;
    color: var(--d-ink);
    margin: 0;
    max-width: 30ch;
}

/* Paragraph rhythm inside a column: one line-height's worth. */
.landing-page .about-card p + p {
    margin-top: var(--space-md);
}

.landing-page .about-card p {
    /* Same size and rhythm as the card benefits, so the panel reads as
       the same component family: 24px title, 14px copy. */
    font-size: var(--font-sm);
    line-height: 1.55;
    color: var(--d-ink-soft);
    text-align: left;
    margin: 0;
    max-width: 62ch;
}

.landing-page .landing-about a {
    color: var(--d-ink);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/* Availability runs inline in the copy, carried by weight alone.
   font-size is reset explicitly: the shared .intake-note rule sets 14px,
   written for when this was its own paragraph. Inline inside a 17px
   paragraph that shrank the sentence mid-line. */
.landing-page .intake-note {
    color: var(--d-ink);
    font-weight: 700;
    font-size: inherit;
}

/* --- form -------------------------------------------------------------
   One definition, one place. Airy: plain labels over full-width fields,
   a clear gap between groups, no chips, no tails.
   ---------------------------------------------------------------------- */
/* Inline labels: plain text left, field beside it, both columns sized
   by the widest label. The textarea row top-aligns its label. */
.landing-page .about-form .contact-form {
    margin-top: 0;
    width: 100%;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--space-md);
    row-gap: 12px;
    align-items: center;
}

.landing-page .contact-form label {
    grid-column: 1;
    color: var(--d-ink);
    font-size: var(--font-sm);
    font-weight: 500;
    line-height: 1.35;
    padding: 0;
    margin: 0;
}

.landing-page .contact-form label[for="contact-message"] {
    align-self: start;
    padding-top: 10px;
}

.landing-page .contact-form input,
.landing-page .contact-form textarea {
    grid-column: 2;
    display: block;
    width: 100%;
    color: var(--d-ink);
    font-size: var(--font-sm);
    padding: 10px var(--space-md);
    margin: 0;
    border-radius: 0;
}

/* Button sits in the field column, exactly as wide as the inputs. */
.landing-page .contact-form button {
    grid-column: 2;
}

.landing-page .contact-form .form-error,
.landing-page .contact-form .form-success {
    grid-column: 1 / -1;
}

.landing-page .contact-form textarea {
    min-height: 48px;
    resize: vertical;
}

.landing-page .contact-form input::placeholder,
.landing-page .contact-form textarea::placeholder {
    color: #6b6866;   /* 5.0:1 on the field */
}

.landing-page .contact-form input:focus,
.landing-page .contact-form textarea:focus {
    outline: 2px solid var(--d-ink);
    outline-offset: 2px;
    border-color: var(--d-ink);
}

.landing-page .contact-form button {
    background: var(--d-ink);
    color: var(--d-surface);
    border: 1px solid var(--d-ink);
    font-size: var(--font-sm);
    font-weight: 600;
    padding: 10px var(--space-md);
    border-radius: 0;
}

.landing-page .contact-form button:hover {
    background: transparent;
    color: var(--d-ink);
}

.landing-page .contact-form button:focus-visible {
    outline: 2px solid var(--d-ink);
    outline-offset: 3px;
}

.landing-page .form-note {
    font-size: var(--font-sm);
    line-height: 1.6;
    color: var(--d-ink-soft);
    margin: var(--space-sm) 0 0;
}

.landing-page .form-error {
    background: transparent;
    border: 1px solid var(--d-ink);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    font-size: var(--font-sm);
    border-radius: 0;
}

.landing-page .form-error p,
.landing-page .form-success p,
.landing-page .form-success strong {
    color: var(--d-ink);
}

.landing-page .form-success {
    background: transparent;
    border: 1px solid #767472;
    border-radius: 0;
    text-align: left;
}

.landing-page .form-success .form-note {
    color: var(--d-ink-soft);
}

/* =========================================
   FOOTER
   ========================================= */

.landing-page .landing-footer {
    background: transparent;
    color: var(--d-ink-soft);
    border-top: 1px solid var(--d-line-strong);
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-2xl);
    font-size: var(--font-sm);
}

.landing-page .landing-footer p {
    font-size: var(--font-sm);
    color: var(--d-ink-soft);
}

.landing-page .landing-footer a,
.landing-page .landing-footer .legal-links a {
    font-size: var(--font-sm);
    color: var(--d-ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.landing-page .landing-footer a:hover,
.landing-page .landing-footer .legal-links a:hover {
    border-bottom-color: var(--d-ink);
}

.landing-page .landing-footer .legal-links {
    gap: var(--space-lg);
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 1000px) {
    /* Staircase collapses to a plain 2-up: headline and form full width,
       then the five tiles flow in order. */
    .landing-page .landing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .landing-page .hero-text,
    .landing-page .grid-cta,
    .landing-page .card-01,
    .landing-page .card-02,
    .landing-page .card-03,
    .landing-page .card-04,
    .landing-page .card-05 {
        grid-area: auto;
    }
    .landing-page .hero-text {
        grid-column: 1 / -1;
    }
    .landing-page .hero-text {
        padding-right: 0;
    }


}

@media (max-width: 640px) {
    .landing-page main {
        padding: 0 var(--space-lg);
    }
    /* minmax(0,...) so a track can go below its min-content width, plus
       hyphenation on the long German compounds. Without both,
       "Barrierefreiheitsstärkungsgesetz" and 40px of card padding set a
       floor of 310px inside a 272px content box, and the page scrolled
       sideways at 320px: WCAG 1.4.10 Reflow. */
    .landing-page .landing-grid {
        grid-template-columns: minmax(0, 1fr);
        padding-bottom: var(--space-2xl);
    }
    .landing-page .hero-text h1 {
        font-size: var(--font-2xl);
    }
    .landing-page .hero-text .value-prop {
        font-size: var(--font-base);
    }
    /* 16px padding leaves 240px of text width at 320, and the longest
       word on the page, Barrierefreiheitsstaerkungsgesetz, needs 234. */
    .landing-page .guide-card,
    .landing-page .grid-cta {
        padding: var(--space-md);
    }
    .landing-page .landing-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
        text-align: left;
        padding: var(--space-lg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-page .guide-card,
    .landing-page .grid-cta,
    .landing-page .contact-form button {
        transition: none;
    }
}


/* ===========================================
   THREE-COLUMN GRID
   Merged from the former landing-3col.css; appended last so its
   overrides keep exactly the cascade order the two files had.
   =========================================== */

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

.landing-3col .hero-text { grid-area: 1 / 1 / 2 / 3; }
.landing-3col .card-01   { grid-area: 1 / 3 / 2 / 4; }
.landing-3col .card-02   { grid-area: 2 / 1 / 3 / 2; }
.landing-3col .card-03   { grid-area: 2 / 2 / 3 / 3; }
.landing-3col .card-04   { grid-area: 2 / 3 / 3 / 4; }
.landing-3col .card-05   { grid-area: 3 / 1 / 4 / 2; }

.landing-3col .grid-cta     { grid-area: 3 / 2 / 4 / 3; }
.landing-3col .grid-partner { grid-area: 3 / 3 / 4 / 4; }

/* PARTNER CELL
   Same filled-dark treatment as the paid-service cell; only the grid
   position differs, so it carries .grid-cta in the markup and this file
   just places it. */

/* HERO COPY
   Previously capped at 700px inside an 832px cell: a correct 66-character
   measure whose right edge aligned with nothing.

   Instead of narrowing the text to fit the measure, scale the text so the
   measure fits the cell. The hero spans two grid columns, 864px. Dropping
   the cell's right padding and raising the type to 25px puts 66 characters
   across the full 864px, so the paragraph now ends exactly where column
   two ends, on the gap before the tiles. */
/* HERO VERTICAL RHYTHM
   Two rules agree on the same number, which is why it is this one:

   - one line of the copy it separates: 25px x 1.5 = 37.5px
   - the 40px padding the cards already use inside themselves

   So 40px above the copy, and 40px below it to the next row: 24px of
   cell padding plus the grid's own 16px gap. The hero now breathes like
   a card does, instead of 24px above and 8px below. */
/* 32px above the copy and 16px + the grid's 16px gap below it: the
   same 32px vertical rhythm the cards now run inside themselves. */
.landing-3col .hero-text {
    padding-right: 0;
    padding-bottom: 16px;
}

.landing-3col .hero-text h1 {
    margin-bottom: 32px;
}

/* Size lives in landing.css (--font-xl, 17px under 640). text-wrap:
   pretty improves the rag where supported; the non-breaking spaces in
   the markup do the load-bearing work. */
.landing-3col .hero-text .value-prop {
    max-width: none;
    text-wrap: pretty;
}

/* BIO PANEL: THREE COLUMNS
   Heading, copy, form, one per column.

   Padding drops from 64px to 40px, matching the cards, to buy the
   middle column back the width it needs; at 64px the copy fell to 39
   characters per line. */
.landing-3col .landing-about {
    /* 16px between columns of prose was far too tight: text in adjacent
       cards is separated by 96px (40 padding + 16 gap + 40 padding), so
       16px inside the panel read as cramped against the grid above.
       Gaps now match the panel's own 40px padding.

       The form column is narrower than the two text columns, which buys
       the prose back the width the wider gaps cost: 46 characters per
       line rather than 43. */
    /* Not one wrapper panel: three cards on exactly the tracks and gap
       the card rows above use, so the row reads as one more grid row. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
    padding: 0;
    background: transparent;
    border: none;
}

/* Each cell is the same material as a guide card. */
.landing-3col .about-card {
    background: var(--d-surface);
    border: 1px solid var(--d-line-strong);
    padding: 32px 40px;
}

.landing-3col .about-card h2 {
    margin: 0 0 var(--space-md);
}

/* Two blocks rather than display:contents, so a column can hold more
   than one paragraph without needing its own grid placement. */

.landing-3col .about-body > p {
    max-width: none;
}

/* FORM LABELS
   Full-width bars stacked directly on their fields, same fill as the
   callouts they replace. No tail: sitting flush on top of the field,
   there is nothing left to point at. */
/* At full width the tiles are wide enough that titles no longer need a
   reserved second line to keep their copy flush. */
.landing-3col .guide-card h2,
.landing-3col .grid-cta h2 {
    min-height: 0;
}

@media (max-width: 1000px) {
    /* Same collapse as the four-column version: headline full width,
       then the tiles in order, with the paid service closing the row. */
    .landing-3col .landing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .landing-3col .hero-text,
    .landing-3col .card-01,
    .landing-3col .card-02,
    .landing-3col .card-03,
    .landing-3col .card-04,
    .landing-3col .card-05,
    .landing-3col .grid-cta,
    .landing-3col .grid-partner {
        grid-area: auto;
    }
    .landing-3col .hero-text {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1000px) {
    /* Panel stacks. The column assignments have to be reset with it:
       leaving grid-column 2 and 3 against a single-column grid creates
       implicit tracks, which squeezed the form to 41px at 390. */
    .landing-3col .landing-about {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .landing-3col .landing-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .landing-3col .landing-about {
        grid-template-columns: minmax(0, 1fr);
    }
    .landing-3col .about-card {
        padding: var(--space-md);
    }
}