/* ==========================================================================
   Startseite – Neugestaltung 06.10.2026 nach Martins Vorlage
   („Fachwerte – digitale Werkzeuge für Haus, Handwerk und Technik“):
   Marineblauer Hero mit Foto, Vertrauensleiste, Zahlenkacheln,
   empfohlene Werkzeuge mit Bild, darunter alle Karten mit Kategorie-Chips.
   Original vor dem Umbau: _nicht-hochladen/redesign-2026-10-06/original/
   ========================================================================== */

/* ─── Hero ──────────────────────────────────────────────────────────────── */
.fw-home-hero {
    position: relative;
    isolation: isolate;
    background: var(--fw-navy);
    color: #fff;
    overflow: hidden;
}
.fw-home-hero-bild {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(64%, 980px);
    z-index: -2;
}
.fw-home-hero-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 100% 45%;   /* Martin steht am rechten Bildrand – nie abschneiden */
    display: block;
}
/* Verlauf vom Marineblau ins Foto – der Text links bleibt immer lesbar */
.fw-home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg,
        var(--fw-navy) 0%, var(--fw-navy) 36%,
        color-mix(in srgb, var(--fw-navy) 72%, transparent) 52%,
        color-mix(in srgb, var(--fw-navy) 10%, transparent) 78%,
        transparent 100%);
}
.fw-home-hero-inner {
    max-width: var(--fw-max);
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 5.5rem) var(--fw-pad) clamp(3rem, 6vw, 4.5rem);
}
.fw-home-hero-text { max-width: 640px; }
.fw-home-kicker {
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #c9d6e4;
    margin: 0 0 1.1rem;
}
.fw-home-h1 {
    font-size: clamp(2.3rem, 5.4vw, 4rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.035em;
    margin: 0;
    color: #fff;
}
.fw-home-h1 em { font-style: normal; color: var(--fw-orange-hell); }
.fw-home-lead {
    margin: 1.4rem 0 0;
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    line-height: 1.65;
    color: #dbe4ee;
    max-width: 56ch;
}

/* Suchfeld im Hero (filtert die Karten unten live) */
.fw-home-suche {
    display: flex;
    align-items: center;
    margin-top: 2rem;
    max-width: 560px;
    background: #fff;
    border-radius: 10px;
    padding: .35rem .35rem .35rem 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.fw-home-suche svg { flex: none; color: #5b6b7d; }
.fw-home-suche input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    color: #10202f;
    padding: .7rem .75rem;
}
.fw-home-suche input::placeholder { color: #6b7a8a; }
.fw-home-suche input:focus { outline: none; }
.fw-home-suche:focus-within { outline: 3px solid var(--fw-orange-hell); outline-offset: 2px; }
.fw-home-suche button {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 0;
    border-radius: 7px;
    background: var(--fw-orange);
    color: #fff;
    font: inherit;
    font-weight: 700;
    font-size: .95rem;
    padding: .7rem 1.2rem;
    cursor: pointer;
}
.fw-home-suche button:hover { background: var(--fw-orange-dk); }

.fw-home-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
.fw-home-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 700;
    font-size: .98rem;
    padding: .85rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    border: 2px solid transparent;
    transition: background .15s, border-color .15s, color .15s;
}
.fw-page a.fw-home-btn--orange { background: var(--fw-orange); color: #fff; }
.fw-page a.fw-home-btn--orange:hover { background: var(--fw-orange-dk); }
.fw-page a.fw-home-btn--outline { border-color: rgba(255, 255, 255, .75); color: #fff; }
.fw-page a.fw-home-btn--outline:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.fw-home-btn:focus-visible { outline: 3px solid var(--fw-orange-hell); outline-offset: 3px; }
.fw-home-founder { margin: 1.6rem 0 0; font-size: .85rem; color: #b9c7d6; }
.fw-page .fw-home-founder a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ─── Vertrauensleiste ──────────────────────────────────────────────────── */
.fw-home-vertrauen {
    max-width: var(--fw-max);
    margin: 0 auto;
    padding: 1.6rem var(--fw-pad);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    list-style: none;
}
.fw-home-vertrauen li { display: flex; gap: .85rem; align-items: flex-start; }
.fw-home-vertrauen svg { flex: none; width: 34px; height: 34px; color: var(--fw-navy-text); }
.fw-home-vertrauen b { display: block; font-size: .95rem; font-weight: 700; color: var(--fw-text); }
.fw-home-vertrauen span { display: block; font-size: .84rem; line-height: 1.45; color: var(--fw-text-2); margin-top: .15rem; }

/* ─── Alle Werkzeuge: Kopf mit Kategorie-Chips ──────────────────────────── */
.fw-home-alle { scroll-margin-top: 72px; padding-top: clamp(2.6rem, 5vw, 3.6rem); }
.fw-home-alle .fw-toolbar { margin-bottom: 2.4rem; }
.fw-home-alle .fw-toolbar-inner { justify-content: flex-start; }
.fw-home-alle .fw-toolbar-titel { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; margin-right: .5rem; white-space: nowrap; }
.fw-home-alle .fw-filter { font-size: .86rem; padding: .5rem 1rem; background: var(--fw-bg); }
.fw-home-alle .fw-filter svg { width: 17px; height: 17px; flex: none; color: var(--fw-orange); }
.fw-home-alle .fw-filter[aria-pressed="true"] { background: var(--fw-navy); border-color: var(--fw-navy); color: #fff; }
.fw-home-alle .fw-filter[aria-pressed="true"] svg { color: #fff; }

/* ─── Responsiv ─────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .fw-home-vertrauen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fw-home-hero-bild { width: 100%; opacity: .45; }
    .fw-home-hero::before { background: linear-gradient(180deg, color-mix(in srgb, var(--fw-navy) 70%, transparent), var(--fw-navy) 85%); }
}
@media (max-width: 760px) {
    .fw-home-suche button span { display: none; }
    .fw-home-suche button { padding: .7rem .85rem; }
    .fw-home-actions .fw-home-btn { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 520px) {
    .fw-home-vertrauen { grid-template-columns: 1fr; gap: .8rem; }
}

/* ─── Feinschliff nach Sichtprüfung ─────────────────────────────────────── */
/* Der Browser-Standardrand des body fiel auf Weiß nie auf – am blauen Hero schon */
body.fw-page { margin: 0; }
/* Jede Zeile des Dreiklangs bleibt zusammen */
.fw-home-h1 span { white-space: nowrap; }
.fw-home-h1 { font-size: clamp(2rem, 4.6vw, 3.9rem); }
.fw-home-suche button svg { color: #fff; }
@media (max-width: 800px) {
    .fw-home-alle .fw-toolbar-titel { margin-left: var(--fw-pad); flex: 1 1 100%; }
}
@media (max-width: 400px) {
    .fw-home-h1 span { white-space: normal; }
}
/* Weicher Übergang: das Foto selbst blendet nach links ins Marineblau aus,
   so gibt es auch auf sehr breiten Bildschirmen keine harte Bildkante. */
@media (min-width: 981px) {
    .fw-home-hero-bild {
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%);
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 22%, #000 48%);
    }
    .fw-home-hero::before {
        background: linear-gradient(90deg, var(--fw-navy) 0%, var(--fw-navy) 30%,
            color-mix(in srgb, var(--fw-navy) 55%, transparent) 50%, transparent 70%);
    }
}
.fw-home-alle .fw-filter[hidden] { display: none; }
@media (max-width: 480px) {
    .fw-page .fw-card-top { flex-wrap: wrap; row-gap: .5rem; }
}

/* ─── Planen · Berechnen · Prüfen (06.10.2026, ersetzt die Zahlenkacheln) ─── */
.fw-home-wege {
    max-width: var(--fw-max);
    margin: 0 auto;
    padding: 0 var(--fw-pad);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.fw-home-weg {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--fw-border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--fw-bg);
    box-shadow: 0 2px 10px rgba(16, 42, 67, .06);
}
.fw-home-weg[data-kind="tools"]      { --k: var(--fw-tool);  --k-sf: var(--fw-tool-sf); }
.fw-home-weg[data-kind="rechner"]    { --k: var(--fw-calc);  --k-sf: var(--fw-calc-sf); }
.fw-home-weg[data-kind="protokolle"] { --k: var(--fw-proto); --k-sf: var(--fw-proto-sf); }
.fw-home-weg-bild { display: block; aspect-ratio: 16 / 7; overflow: hidden; background: var(--fw-navy); }
.fw-home-weg-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.fw-home-weg:hover .fw-home-weg-bild img { transform: scale(1.04); }
.fw-home-weg-text { position: relative; display: flex; flex-direction: column; flex: 1; padding: 0 1.4rem 1.3rem; }
.fw-home-weg-ico {
    width: 52px; height: 52px; margin-top: -26px; margin-bottom: .7rem;
    display: grid; place-items: center;
    border-radius: 12px; border: 3px solid var(--fw-bg);
    background: var(--k-sf); color: var(--k);
    box-shadow: 0 4px 12px rgba(16, 42, 67, .15);
}
.fw-home-weg-ico svg { width: 26px; height: 26px; }
.fw-home-weg h2 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.025em; color: var(--fw-text); margin: 0; }
.fw-home-weg p { font-size: .88rem; line-height: 1.5; color: var(--fw-text-2); margin: .3rem 0 .8rem; }
.fw-home-weg ul { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid var(--fw-border); }
.fw-home-weg li { border-bottom: 1px solid var(--fw-border); }
.fw-page .fw-home-weg li a {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .55rem 0; font-size: .92rem; font-weight: 600; color: var(--fw-text); text-decoration: none;
}
.fw-page .fw-home-weg li a::after { content: '→'; color: var(--k); transition: transform .15s; }
.fw-page .fw-home-weg li a:hover { color: var(--k); }
.fw-page .fw-home-weg li a:hover::after { transform: translateX(3px); }
.fw-page a.fw-home-weg-alle {
    margin-top: auto; align-self: flex-start;
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .86rem; font-weight: 700; color: var(--k); text-decoration: none;
    padding: .35rem .8rem; border-radius: 100px; background: var(--k-sf);
}
.fw-page a.fw-home-weg-alle:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
    .fw-home-wege { grid-template-columns: 1fr; }
    .fw-home-weg { flex-direction: row; }
    .fw-home-weg-bild { width: 34%; flex: none; aspect-ratio: auto; }
    .fw-home-weg-ico { margin-top: 1.1rem; }
}
@media (max-width: 560px) {
    .fw-home-weg-bild { display: none; }
    .fw-home-weg-ico { width: 44px; height: 44px; margin-top: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .fw-home-weg-bild img { transition: none; } }

/* ─── Werkzeugkarten im neuen Stil (06.10.2026) ─────────────────────────── */
/* Raster mit 6 Spuren: Karten belegen 2 Spuren (3 je Reihe). Bleibt am Ende
   einer Gruppe eine einzelne Karte übrig, wird sie breit (6 Spuren, Bild links);
   bleiben zwei übrig, teilen sie sich die Reihe (je 3 Spuren). Die Zuordnung
   setzt ein kleines Skript in index.html nach jedem Filtern (data-span). */
.fw-home-alle .fw-grid {
    gap: 1.1rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.fw-home-alle .fw-card { grid-column: span 2; }
.fw-home-alle .fw-card[data-span="3"] { grid-column: span 3; }
.fw-home-alle .fw-card[data-span="6"] { grid-column: span 6; }
@media (max-width: 1000px) {
    .fw-home-alle .fw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fw-home-alle .fw-card,
    .fw-home-alle .fw-card[data-span="3"],
    .fw-home-alle .fw-card[data-span="6"] { grid-column: span 1; }
    .fw-home-alle .fw-card[data-span-schmal="2"] { grid-column: span 2; }
}
@media (max-width: 640px) {
    .fw-home-alle .fw-grid { grid-template-columns: 1fr; }
    .fw-home-alle .fw-card,
    .fw-home-alle .fw-card[data-span],
    .fw-home-alle .fw-card[data-span-schmal] { grid-column: auto; }  /* eine Spalte: nie doppelt breit */
}

.fw-home-alle .fw-card {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: none;
    border: 1px solid var(--fw-border);
    padding: 1.3rem 1.4rem 1.2rem;
    gap: .55rem;
    min-height: 0;
    background: var(--fw-bg);
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.fw-home-alle .fw-card::before { display: none; }
.fw-home-alle .fw-card::after { display: none; }
.fw-home-alle .fw-card:hover,
.fw-home-alle .fw-card:focus-visible {
    background: var(--fw-bg);
    border-color: color-mix(in srgb, var(--k) 45%, var(--fw-border));
    box-shadow: 0 12px 28px rgba(16, 42, 67, .13);
    transform: translateY(-3px);
}
/* Bild oben: in Ruhe das Standbild (ruhig, leicht gedämpft), beim Zeigen voll und bewegt */
.fw-home-alle .fw-card-media {
    margin: -1.3rem -1.4rem .55rem;
    aspect-ratio: 2 / 1;
    opacity: .82;
    filter: saturate(.8);
}
.fw-home-alle .fw-card-media--still img { opacity: 1; }
.fw-home-alle .fw-card:hover .fw-card-media,
.fw-home-alle .fw-card:focus-visible .fw-card-media { opacity: 1; filter: none; }
.fw-home-alle .fw-card-top { align-items: center; }
.fw-home-alle .fw-card-icon {
    width: 40px; height: 40px; padding: 7px; box-sizing: border-box;
    border-radius: 10px; background: var(--k-sf); color: var(--k);
    margin-top: -2.2rem; border: 3px solid var(--fw-bg); position: relative;
    box-shadow: 0 3px 10px rgba(16, 42, 67, .14);
}
.fw-home-alle .fw-card--highlight .fw-card-icon { background: var(--k); color: #fff; }
.fw-home-alle .fw-card-tag { color: var(--fw-text-2); }
.fw-home-alle .fw-card-title { font-size: 1.08rem; font-weight: 700; color: var(--fw-text); }
/* Beschreibung auf zwei Zeilen begrenzt – der volle Text bleibt im Quelltext (Suche, Suchmaschinen) */
.fw-home-alle .fw-card-desc {
    color: var(--fw-text-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fw-home-alle .fw-card-foot { padding-top: .6rem; }
/* Breite Einzelkarte: Bild links, Text rechts */
@media (min-width: 1001px) {
    .fw-home-alle .fw-card[data-span="6"] {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        grid-template-rows: auto auto 1fr auto;
        column-gap: 1.8rem;
        padding: 0 1.6rem 0 0;
    }
    .fw-home-alle .fw-card[data-span="6"] .fw-card-media {
        grid-row: 1 / -1; margin: 0; aspect-ratio: auto; height: 100%; min-height: 200px;
        border-bottom: 0; border-right: 1px solid var(--fw-border);
    }
    .fw-home-alle .fw-card[data-span="6"] .fw-card-top { padding-top: 1.4rem; }
    .fw-home-alle .fw-card[data-span="6"] .fw-card-icon { margin-top: 0; }
    .fw-home-alle .fw-card[data-span="6"] .fw-card-foot { padding-bottom: 1.2rem; }
    .fw-home-alle .fw-card[data-span="6"] .fw-card-desc { -webkit-line-clamp: 3; line-clamp: 3; }
}
/* Abschnittsköpfe passend zu den Kacheln */
.fw-home-alle .fw-section-head h2 { font-size: 1.45rem; font-weight: 800; color: var(--fw-text); }
.fw-home-alle .fw-section-head { border-bottom-width: 1px; border-bottom-color: var(--fw-border); }
.fw-home-alle .fw-section-desc { color: var(--fw-text-2); }

/* ─── Sofort-Treffer unter der Hero-Suche ──────────────────────────────── */
.fw-home-suche { position: relative; }
.fw-home-treffer {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
    list-style: none; margin: 0; padding: .35rem;
    background: var(--fw-bg); color: var(--fw-text);
    border-radius: 10px; border: 1px solid var(--fw-border);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
}
.fw-home-treffer[hidden] { display: none; }
.fw-home-treffer a {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .6rem .75rem; border-radius: 7px; text-decoration: none; color: var(--fw-text);
    font-size: .95rem; font-weight: 600;
}
.fw-home-treffer a span { font-size: .74rem; font-weight: 600; color: var(--fw-text-2); white-space: nowrap; }
.fw-home-treffer a:hover,
.fw-home-treffer a[aria-selected="true"] { background: var(--fw-surface); color: var(--fw-navy-text); }
.fw-home-treffer .fw-home-treffer-leer { padding: .6rem .75rem; font-size: .9rem; color: var(--fw-text-2); }

/* ─── Hero auf Tablet/Handy: Foto als Band über dem Text ───────────────── */
@media (max-width: 980px) {
    .fw-home-hero-bild {
        position: relative; inset: auto; display: block;
        width: 100%; height: clamp(200px, 48vw, 360px); opacity: 1;
        -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
    }
    .fw-home-hero-bild img { object-position: 92% 38%; }
    .fw-home-hero::before { display: none; }
    .fw-home-hero-inner { padding-top: 0; margin-top: -2.2rem; position: relative; }
}

/* Trefferliste der Suche darf aus dem Hero herausragen */
.fw-home-hero { overflow: visible; }
/* Balkonkraftwerk-Live-Ansicht: als festes Bild nur gedämpft (Martin, 22.09.2026: sonst „sehr kindlich“) */
.fw-home-alle .fw-card-media--gedaempft { opacity: .45; filter: saturate(.5); }