/* Startseite V4 (Entwurf 11.10.2026, V4b Content-Erweiterung) – spätere Template-Ergänzung.
   Ziel live: templates/FABRAND2026/css/add/startseite.css, nur auf der Startseite
   laden (general_bottom.css.php, Zweig FILENAME_DEFAULT) – NICHT ins min-Bundle.
   Nur Brand-Tokens (brand-tokens.css), Abstände aus der Leiter 4–128,
   Breakpoints 420/600/768/992/1200. Kein Verlauf, kein Glas, kein Glow.
   Kontraste: --fg/--bg 15,96 · --mut/--bg 6,10 · --bg auf --acc 4,97.
   Die .fa-category-card-Regeln sind 1:1 aus gewerbe.css (#fa-gewerbe) übernommen,
   dort aber auf #fa-gewerbe begrenzt. Langfristig: eine gemeinsame Datei
   category-card.css ohne ID-Scope, dann entfällt der Block unten. */

/* ---------- Rahmen ---------- */
#fa-startseite{display:block;margin:0 0 64px}
#fa-startseite a:focus-visible,#fa-startseite summary:focus-visible{outline:3px solid var(--brand)!important;outline-offset:4px}

/* ---------- Kopf ---------- */
#fa-startseite .fa-startseite__intro{margin:0 0 32px}
#fa-startseite .fa-startseite__lead{max-width:68ch;margin:0 0 24px;font:400 17px/1.6 var(--body);color:var(--mut)}
#fa-startseite .fa-startseite__actions{display:flex;flex-wrap:wrap;gap:12px;margin:0}
#fa-startseite .fa-startseite__actions .btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;margin:0}

/* ---------- Einstieg: 3 große Bildkarten (eine breit, zwei schmal) ---------- */
#fa-startseite .fa-startseite__entry{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:24px;margin:0 0 96px}
#fa-startseite .fa-startseite-entry{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg);overflow:hidden;color:var(--fg);text-decoration:none}
#fa-startseite .fa-startseite-entry:hover{box-shadow:var(--sh-1);text-decoration:none;color:var(--fg)}
#fa-startseite .fa-startseite-entry:hover .fa-startseite-entry__cta{text-decoration:underline}
#fa-startseite .fa-startseite-entry__image{display:block;height:320px;flex:none;background:var(--surf)}
#fa-startseite .fa-startseite-entry__image img{display:block;width:100%;height:100%!important;max-width:none;object-fit:cover;border:0}
#fa-startseite .fa-startseite-entry__body{display:flex;flex-direction:column;flex:1;gap:8px;padding:24px}
#fa-startseite .fa-startseite-entry__title{display:block;font:600 30px/1.2 var(--display);color:var(--fg)}
#fa-startseite .fa-startseite-entry__text{display:block;font:400 15px/1.6 var(--body);color:var(--mut);margin:0 0 16px}
#fa-startseite .fa-startseite-entry__cta{display:flex;justify-content:center;align-items:center;gap:8px;min-height:48px;padding:12px 16px;margin-top:auto;border-radius:var(--r-btn);background:var(--acc);color:var(--bg);font:600 15px/1.5 var(--body);text-align:center}

/* ---------- Themenblöcke ---------- */
/* Alt-Regel für <section> im Theme (graue Fläche, Innenabstand) hier neutralisieren – wie in gewerbe.css/letter-overview.css. */
#fa-startseite section.fa-startseite__block{margin:0 0 96px;padding:0;border:0;box-shadow:none;background:var(--bg)!important;position:static}
#fa-startseite .fa-startseite__head{text-align:center;margin:0 0 32px}
#fa-startseite .fa-startseite__head h2{font:600 36px/1.2 var(--display);color:var(--fg);margin:0 0 8px;text-wrap:balance}
#fa-startseite .fa-startseite__head p{margin:0;font:400 17px/1.6 var(--body);color:var(--mut)}
#fa-startseite .fa-startseite__cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0 0 32px}
#fa-startseite .fa-startseite__text{max-width:68ch;margin:0 auto 32px;text-align:center;font:400 17px/1.6 var(--body);color:var(--fg)}
#fa-startseite .fa-startseite__text a{text-decoration:underline;text-underline-offset:3px}
#fa-startseite .fa-native-product-grid{margin-bottom:0!important}
#fa-startseite .fa-faq{margin-top:0}

/* ---------- Kit-Baustein .fa-category-card (aus gewerbe.css) ---------- */
#fa-startseite .fa-category-card{display:flex;flex-direction:column;min-width:0;padding:0;border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg);overflow:hidden;container-type:inline-size}
#fa-startseite .fa-category-card__image{display:flex;align-items:center;justify-content:center;height:224px;flex:none;padding:16px;background:var(--surf)}
#fa-startseite .fa-category-card__image img{display:block;width:100%;height:100%!important;object-fit:contain;border:0;border-radius:var(--r);filter:none;mix-blend-mode:normal}
#fa-startseite .fa-category-card__body{display:flex;flex-direction:column;flex:1;min-width:0;padding:24px}
#fa-startseite .fa-category-card h3{font:600 36px/1.2 var(--display);color:var(--fg);margin:0 0 12px;hyphens:manual;overflow-wrap:break-word;text-wrap:balance}
#fa-startseite .fa-category-card p{font:400 15px/1.6 var(--body);color:var(--mut);margin:12px 0 24px}
#fa-startseite .fa-category-card__cta{display:flex;justify-content:center;align-items:center;gap:8px;min-height:48px;padding:12px 16px;margin-top:auto;border-radius:var(--r-btn);background:var(--acc);color:var(--bg);font:600 15px/1.5 var(--body);text-align:center;white-space:normal}
#fa-startseite .fa-category-card__cta:hover{background:var(--acc);color:var(--bg);text-decoration:underline}
#fa-startseite .fa-category-card a:focus-visible{outline-offset:-4px!important}

/* ---------- Breakpoints ---------- */
@media(max-width:992px){
 #fa-startseite .fa-startseite__entry{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 #fa-startseite .fa-startseite-entry--wide{grid-column:1/-1}
 #fa-startseite .fa-startseite-entry__image{height:256px}
 #fa-startseite .fa-startseite__cats{gap:16px}
 #fa-startseite .fa-category-card__body{padding:16px}
 #fa-startseite .fa-category-card h3{font-size:30px}
}
@media(max-width:768px){
 #fa-startseite{margin-bottom:48px}
 #fa-startseite .fa-startseite__lead,#fa-startseite .fa-startseite__head p,#fa-startseite .fa-startseite__text{font-size:16px}
 #fa-startseite .fa-startseite__actions .btn{width:100%;justify-content:center;box-sizing:border-box}
 #fa-startseite .fa-startseite__entry{grid-template-columns:minmax(0,1fr);margin-bottom:64px}
 #fa-startseite .fa-startseite-entry__image{height:200px}
 #fa-startseite .fa-startseite-entry__body{padding:16px}
 #fa-startseite .fa-startseite-entry__title{font-size:26px}
 #fa-startseite section.fa-startseite__block{margin-bottom:64px}
 #fa-startseite .fa-startseite__head{margin-bottom:24px}
 #fa-startseite .fa-startseite__head h2{font-size:26px}
 #fa-startseite .fa-startseite__cats{grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:24px}
 #fa-startseite .fa-startseite__text{margin-bottom:24px}
 #fa-startseite .fa-category-card__image{height:200px;padding:12px}
 #fa-startseite .fa-category-card__image img{max-height:176px}
 #fa-startseite .fa-category-card h3{font-size:26px}
 #fa-startseite .fa-category-card p{margin:8px 0 16px}
 #fa-startseite .fa-category-card--landscape .fa-category-card__image{height:auto;padding:12px}
 #fa-startseite .fa-category-card--landscape .fa-category-card__image img{height:auto!important;max-height:280px}
}
@media(max-width:420px){
 #fa-startseite .fa-category-card__body{padding:12px}
 #fa-startseite .fa-category-card__cta,#fa-startseite .fa-startseite-entry__cta{font-size:14px;padding:12px 8px}
}
/* Mobil: Produktreihe als waagerecht wischbare Zeile (wie klebefisch), statt 4 Karten untereinander.
   Spezifität muss product-cards.css (html:has(#fa-product-cards) … !important) schlagen. */
@media(max-width:768px){
 html:has(#fa-product-cards) body .maincontent #fa-startseite .fa-native-product-grid{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:0 0 12px!important;gap:12px!important}
 html:has(#fa-product-cards) body .maincontent #fa-startseite .fa-native-product-grid>.box2{scroll-snap-align:start}
}
@media(prefers-reduced-motion:reduce){#fa-startseite *{transition:none;scroll-behavior:auto}}

/* ---------- V4b: Textbereich „Was ich für dich fertige“ (vor der FAQ) ----------
   Raster aus Textkarten: Desktop 2 Spalten (Karte ca. 560 px, Lesetext < 68ch), ab 992 px einspaltig. */
#fa-startseite section.fa-startseite__more{margin:0 0 96px;padding:0;border:0;box-shadow:none;background:var(--bg)!important;position:static}
#fa-startseite .fa-startseite__topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:0}
#fa-startseite .fa-startseite-topic{min-width:0;padding:32px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg)}
#fa-startseite .fa-startseite-topic h3{font:600 24px/1.3 var(--display);color:var(--fg);margin:0 0 16px;text-wrap:balance}
#fa-startseite .fa-startseite-topic p{max-width:var(--measure);margin:0 0 16px;font:400 17px/1.6 var(--body);color:var(--fg)}
#fa-startseite .fa-startseite-topic p:last-child{margin-bottom:0}
#fa-startseite .fa-startseite-topic a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
#fa-startseite .fa-startseite-topic a:hover{color:var(--fg)}
@media(max-width:992px){
 #fa-startseite .fa-startseite__topics{grid-template-columns:minmax(0,1fr);gap:16px}
 #fa-startseite .fa-startseite-topic{padding:24px}
}
@media(max-width:768px){
 #fa-startseite section.fa-startseite__more{margin-bottom:64px}
 #fa-startseite .fa-startseite-topic{padding:16px}
 #fa-startseite .fa-startseite-topic h3{font-size:20px;margin-bottom:12px}
 #fa-startseite .fa-startseite-topic p{font-size:16px;margin-bottom:12px}
}