/* ═══════════════════════════════════════════════════════
   STARTSEITE — Linie A „Vollbild-Foto“ (Lars, 23.10.2026, Zweig website-eigen-2)
   Gilt mit <body class="seite-foto"> (Startseite, /handwerk) und auf Unterseiten mit
   <body data-linie="foto"> (dort bleibt die Body-Klasse unverändert, Tests prüfen sie). Fotos randlos und groß, Text direkt im Bild,
   keine Kärtchen, keine App auf Fotos. Die echte App steht in ruhigen Abschnitten
   auf hellem Grund zwischen den Fotos. Fotos: img/FOTOS.md.
   ═══════════════════════════════════════════════════════ */

.seite-foto, [data-linie="foto"] {
  --fa-hell: #f4f6f8;
  --fa-tinte: #1e2a3a;
  --fa-leise: #566273;
  --fa-schatten: 0 30px 60px -32px rgba(27, 38, 53, .45), 0 0 0 1px rgba(27, 38, 53, .07);
  --fa-verlauf: linear-gradient(0deg, rgba(14, 20, 30, .8) 0%, rgba(14, 20, 30, .38) 42%, rgba(14, 20, 30, 0) 72%);
}

/* Überschriften: groß und ruhig */
.seite-foto .start-h2, .fa-h2 {
  font-family: 'Archivo', 'Inter', sans-serif; font-weight: 700;
  font-size: clamp(32px, 4.2vw, 56px); line-height: 1.02; letter-spacing: -0.03em;
  color: var(--fa-tinte); text-wrap: balance; margin: 0;
}
.seite-foto .start-abschnitt { padding: 112px 0; }
.seite-foto .btn--lg { border-radius: 12px; padding: 16px 28px; font-size: 16px; }
.seite-foto .start-hero-knoepfe, .fa-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.fa-link { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.fa-link-hell { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(255, 255, 255, .55); }
.fa-link-hell:hover { text-decoration-color: #fff; }
.fa-knopf-hell { background: #fff; color: var(--fa-tinte); }
.fa-knopf-hell:hover { background: #eef2f6; }
.fa-leise { color: var(--fa-leise); }

/* ── Kopf: Foto randlos, Überschrift unten links im Bild ── */
.fa-kopf {
  position: relative; margin-top: 64px; height: calc(100vh - 64px); height: calc(100svh - 64px);
  min-height: 560px; max-height: 900px; overflow: hidden; display: flex; align-items: flex-end;
}
.fa-kopf-foto, .fa-foto-voll > img, .fa-foto-halb > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.fa-kopf-foto { object-position: 55% 35%; }
.fa-kopf::after, .fa-foto-voll::after, .fa-foto-halb::after {
  content: ""; position: absolute; inset: 0; background: var(--fa-verlauf); pointer-events: none;
}
.fa-kopf-text, .fa-foto-voll-text { position: relative; z-index: 1; width: 100%; padding-bottom: 72px; color: #fff; }
.fa-kopf-text h1 {
  font-family: 'Archivo', 'Inter', sans-serif; font-weight: 700; color: #fff;
  font-size: clamp(42px, 6.4vw, 96px); line-height: .98; letter-spacing: -0.035em;
  max-width: 11.5em; margin: 0; text-wrap: balance;
}
.fa-kopf-text p { font-size: 20px; color: rgba(255, 255, 255, .88); margin: 22px 0 30px; }

/* ── Die App: ruhig, groß, scharf auf hellem Grund ── */
.fa-app { padding: 120px 0; background: #fff; }
.fa-app-kopf { max-width: 760px; }
.fa-app-kopf p { margin-top: 18px; font-size: 20px; color: var(--fa-leise); }
.seite-foto .start-apps.fa-apps {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px 56px; margin-top: 64px;
}
.seite-foto .fa-apps .start-app {
  display: flex; flex-direction: column; gap: 28px;
  background: none; border-radius: 0; padding: 0;
}
.fa-app-rechner { grid-column: 1 / -1; }
.seite-foto .fa-apps .start-app--terminal { grid-column: auto; display: flex; }
.fa-screen { width: 100%; height: auto; border-radius: 12px; box-shadow: var(--fa-schatten); background: #fff; }
.fa-app-handy { align-items: flex-start; }
.fa-handy-rahmen, .fa-handy {
  width: min(300px, 70%); height: auto; aspect-ratio: 1170 / 1980; object-fit: cover; object-position: top;
  border-radius: 34px; border: 8px solid #10161f; box-shadow: var(--fa-schatten); background: #fff;
}
.fa-app-tablet .fa-screen { margin-top: auto; }
.fa-app-unter { max-width: 52ch; }
.fa-app-rechner .fa-app-unter { max-width: 64ch; }
.fa-app-unter h3 { font-family: 'Archivo', 'Inter', sans-serif; font-size: 26px; line-height: 1.1; color: var(--fa-tinte); margin: 0; }
.fa-app-unter p { margin: 10px 0 14px; font-size: 17px; color: var(--fa-leise); }
.fa-app-unter p a { color: var(--primary); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

/* ── Foto-Paar: eine Hälfte Foto mit Text im Bild, die andere hell ── */
.fa-foto-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 640px; background: var(--fa-hell); }
.fa-foto-paar--rechts .fa-foto-halb { order: 2; }
.fa-foto-halb { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: 420px; }
.fa-foto-halb > img { object-position: 50% 40%; }
.fa-foto-text { position: relative; z-index: 1; padding: 0 56px 56px; color: #fff; }
.fa-foto-text h2 {
  font-family: 'Archivo', 'Inter', sans-serif; font-weight: 700; color: #fff;
  font-size: clamp(32px, 3.8vw, 54px); line-height: 1.02; letter-spacing: -0.03em; margin: 0; max-width: 12em; text-wrap: balance;
}
.fa-zeit { font-size: 17px; font-weight: 600; color: rgba(255, 255, 255, .85); margin: 0 0 10px; }
.fa-halb-text { display: flex; flex-direction: column; justify-content: center; gap: 0; padding: 80px 64px; max-width: 620px; }
.fa-halb-text > p:first-child { font-size: 20px; color: var(--fa-tinte); margin: 0; }
.fa-halb-text h3 { font-family: 'Archivo', 'Inter', sans-serif; font-size: 26px; color: var(--fa-tinte); margin: 44px 0 8px; }
.fa-halb-text .fa-leise { margin: 0; }
.fa-laden { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 36px; margin-top: 22px; }
.fa-laden .app-qr { margin: 0; }
.fa-schluss .fa-halb-text > p:first-child { margin-bottom: 28px; }

/* ── Foto randlos mit Text im Bild (Für wen) ── */
.fa-foto-voll {
  position: relative; overflow: hidden; display: flex; align-items: flex-end;
  height: 78vh; min-height: 520px; max-height: 760px;
}
.fa-foto-voll > img { object-position: 50% 55%; }
.fa-foto-voll-text h2 {
  font-family: 'Archivo', 'Inter', sans-serif; font-weight: 700; color: #fff;
  font-size: clamp(34px, 4.8vw, 68px); line-height: 1; letter-spacing: -0.035em; margin: 0 0 22px; max-width: 13em; text-wrap: balance;
}

/* ── Bestehende Abschnitte ohne Kärtchen: Fläche über die ganze Breite ── */
.seite-foto .start-demo, .seite-foto .start-standorte {
  background: none; border-radius: 0; padding: 0; gap: 40px 72px;
}
.seite-foto #standorte { background: var(--fa-hell); }
.seite-foto .feature-badge {
  background: none; padding: 0; border-radius: 0; color: var(--primary); font-size: 15px; font-weight: 600;
}
.seite-foto .start-standorte .feature-badge { display: block; margin-bottom: 10px; }
.seite-foto .start-apps-satz { font-size: 19px; }
.seite-foto .start-demo-rechner img, .seite-foto .start-standorte-bild img { box-shadow: var(--fa-schatten); border-radius: 12px; }
.seite-foto .start-sia .sia-window { box-shadow: var(--fa-schatten); }
.seite-foto #sprachen { padding-top: 120px; }
.seite-foto #preise { padding-top: 64px; }

/* ── Wer dahinter steckt (Platzhalter bis Lars' Ja) ── */
.fa-wir { padding: 112px 0; border-top: 1px solid #e3e8ee; }
.fa-wir-innen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 72px; align-items: center; }
.fa-wir-foto {
  aspect-ratio: 4 / 5; max-width: 420px; width: 100%; border: 2px dashed #b9c3cf; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  color: var(--fa-leise); font-weight: 600; background: var(--fa-hell);
}
.fa-wir-foto small { font-weight: 400; font-size: 14px; margin-top: 6px; }
.fa-wir-satz { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; color: var(--fa-tinte); margin: 22px 0 18px; max-width: 30ch; }

/* ── Tablet und Handy ── */
@media (max-width: 900px) {
  .seite-foto .start-abschnitt, .fa-app, .fa-wir { padding: 80px 0; }
  .seite-foto .start-apps.fa-apps { grid-template-columns: minmax(0, 1fr); gap: 64px; margin-top: 44px; }
  .fa-foto-paar { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .fa-foto-paar--rechts .fa-foto-halb { order: 0; }
  .fa-foto-halb { min-height: 460px; }
  .fa-halb-text { padding: 56px 24px 64px; max-width: none; }
  .fa-wir-innen { grid-template-columns: minmax(0, 1fr); }
  .fa-wir-foto { max-width: 280px; }
}
@media (max-width: 600px) {
  .fa-kopf-text, .fa-foto-voll-text { padding-bottom: 40px; }
  .fa-kopf-text p { font-size: 17px; margin: 14px 0 22px; }
  .fa-app-kopf p, .fa-halb-text > p:first-child { font-size: 18px; }
  .fa-foto-text { padding: 0 24px 32px; }
  .fa-foto-halb { min-height: 400px; }
  .fa-foto-voll { height: 72vh; min-height: 460px; }
  .fa-handy { width: min(260px, 72%); }
}

/* Sprachen bleibt die blaue Karte (Lars, 14.10.2026): Überschrift hell und etwas kleiner als die übrigen */
.seite-foto .start-sprachen .start-h2 { color: var(--bg); font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; }
.fa-app-rechner picture { display: block; }
/* Handy: Knöpfe im Kopf über dem „Fragen?“-Knopf unten rechts */
@media (max-width: 600px) { .fa-kopf-text { padding-bottom: 92px; } }

/* ═══ Gemeinsam für Startseite, /handwerk und Unterseiten (23.10.2026) ═══ */
:is(.seite-foto, [data-linie="foto"]) .btn--rund { border-radius: 12px; }
:is(.seite-foto, [data-linie="foto"]) .feature-badge,
:is(.seite-foto, [data-linie="foto"]) .hw-badge-neu {
  background: none; border: 0; padding: 0; border-radius: 0; color: var(--primary); font-size: 15px; font-weight: 600;
}
.seite-foto .start-app, .seite-foto .start-laden-karte, .seite-foto .hw-standort { background: none; border-radius: 0; padding: 0; }
.seite-foto .start-app-bild:not(.shot--phone) img, .seite-foto .start-demo-bild img { box-shadow: var(--fa-schatten); }
.seite-foto #apps, .seite-foto #lohn, .seite-foto #umzug, .seite-foto #hilfe { background: var(--fa-hell); }

/* Drei kurze Absätze neben einem Foto (/handwerk) */
.fa-drei { gap: 30px; }
.fa-drei h3 { margin: 0 0 6px; font-size: 22px; }
.fa-drei p { margin: 0; font-size: 17px; color: var(--fa-leise); }

/* Drei Fotos randlos nebeneinander, Text im Bild (/handwerk „Für wen“) */
.fa-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 44px 0 36px; }
.fa-trio article { position: relative; overflow: hidden; min-height: 520px; display: flex; align-items: flex-end; }
.fa-trio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fa-trio article::after { content: ""; position: absolute; inset: 0; background: var(--fa-verlauf); }
.fa-trio article > div { position: relative; z-index: 1; padding: 0 32px 36px; color: #fff; }
.fa-trio h3 { font-family: 'Archivo', 'Inter', sans-serif; font-size: 28px; line-height: 1.05; color: #fff; margin: 0 0 8px; }
.fa-trio p { margin: 0; color: rgba(255, 255, 255, .88); font-size: 16px; max-width: 34ch; }

/* ═══ Unterseiten (body[data-linie="foto"]) ═══ */
/* Kopf: kein blaues Band, große Überschrift auf Weiß */
[data-linie="foto"] .seitenkopf,
[data-linie="foto"].kopf-band .seitenkopf { background: #fff; border-radius: 0; padding-top: 56px; padding-bottom: 64px; }
[data-linie="foto"]:not(.kopf-band) .seitenkopf { padding-left: 0; padding-right: 0; }
[data-linie="foto"] .seitenkopf h1 {
  font-family: 'Archivo', 'Inter', sans-serif; font-weight: 700; color: var(--fa-tinte);
  font-size: clamp(40px, 5.2vw, 76px); line-height: 1; letter-spacing: -0.035em; max-width: 14em; text-wrap: balance;
}
[data-linie="foto"] .seitenkopf-satz { color: var(--fa-leise); font-size: 20px; margin-top: 20px; }
[data-linie="foto"] .seitenkopf-satz a { color: var(--primary); }
[data-linie="foto"] .brotkrumen li, [data-linie="foto"] .brotkrumen li + li::before { color: var(--fa-leise); }
[data-linie="foto"] .brotkrumen a { color: var(--primary); }
[data-linie="foto"] .brotkrumen [aria-current="page"] { color: var(--fa-tinte); }
[data-linie="foto"] .seitenkopf :focus-visible { outline-color: var(--primary); }
[data-linie="foto"] .seitenkopf .btn--primary { background: var(--primary); color: #fff; }
[data-linie="foto"] .seitenkopf .btn--secondary { background: #fff; color: var(--fa-tinte); border-color: var(--border-strong); }
[data-linie="foto"] .seitenkopf .sia-marke img { filter: none; }
[data-linie="foto"] .seitenkopf .btn--lg, [data-linie="foto"] .cta-final .btn--lg { border-radius: 12px; padding: 16px 28px; font-size: 16px; }

/* Abschnitte: keine Kärtchen, ruhig auf Weiß, getrennt durch eine feine Linie */
[data-linie="foto"] .feature { padding: 0 24px; }
[data-linie="foto"] .feature-card { background: none; border: 0; border-radius: 0; padding: 88px 0; gap: 72px; }
[data-linie="foto"] .feature + .feature .feature-card { border-top: 1px solid #e3e8ee; }
[data-linie="foto"] .feature-text h2, [data-linie="foto"] .ftabs-text h2 {
  font-family: 'Archivo', 'Inter', sans-serif; font-size: clamp(28px, 3vw, 40px); line-height: 1.05; letter-spacing: -0.03em; color: var(--fa-tinte);
}
[data-linie="foto"] .feature-text p { font-size: 17px; }
[data-linie="foto"] .ftabs-inner { background: none; border: 0; border-radius: 0; }
[data-linie="foto"] .worker-showcase { background: var(--fa-hell); }
[data-linie="foto"] .worker-header h2 { color: var(--fa-tinte); font-family: 'Archivo', 'Inter', sans-serif; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.03em; }
[data-linie="foto"] .worker-header p { color: var(--fa-leise); }
[data-linie="foto"] .worker-header a { color: var(--primary); }
[data-linie="foto"] .worker-phone img { box-shadow: var(--fa-schatten); }
[data-linie="foto"] .worker-phones .worker-phone figcaption { color: var(--fa-leise); }

/* Schluss: Foto randlos, Text unten links im Bild (statt dunklem Band) */
[data-linie="foto"] .cta-final {
  --fa-schluss-foto: url(../img/foto-team-theke-1800.webp);
  position: relative; display: flex; align-items: flex-end; min-height: 560px; padding: 0; text-align: left;
  background: #1e2a3a var(--fa-schluss-foto) 50% 35% / cover no-repeat;
}
[data-linie="foto"] .cta-final::before { content: ""; position: absolute; inset: 0; background: var(--fa-verlauf); }
[data-linie="foto"] .cta-final-inner { position: relative; z-index: 1; width: 100%; max-width: 1232px; margin: 0 auto; padding: 0 24px 72px; }
[data-linie="foto"] .cta-final h2 {
  font-family: 'Archivo', 'Inter', sans-serif; font-size: clamp(34px, 4.6vw, 64px); line-height: 1; letter-spacing: -0.035em; max-width: 13em; margin: 0 0 16px;
}
[data-linie="foto"] .cta-final p { color: rgba(255, 255, 255, .88); font-size: 19px; max-width: 46ch; margin: 0 0 28px; }
[data-linie="foto"] .cta-final .schluss-knoepfe { justify-content: flex-start; }

@media (max-width: 900px) {
  .fa-trio { grid-template-columns: minmax(0, 1fr); }
  .fa-trio article { min-height: 380px; }
  [data-linie="foto"] .feature-card { padding: 56px 0; gap: 36px; }
  [data-linie="foto"] .cta-final { --fa-schluss-foto: url(../img/foto-team-theke-1200.webp); min-height: 480px; }
}
@media (max-width: 600px) {
  [data-linie="foto"] .seitenkopf { padding-top: 32px; padding-bottom: 40px; }
  [data-linie="foto"] .seitenkopf-satz { font-size: 18px; }
  [data-linie="foto"] .cta-final-inner { padding-bottom: 40px; }
  .fa-trio article > div { padding: 0 24px 28px; }
}

/* Hinweise und Hover, die für das blaue Band gedacht waren, auf Weiß zurücksetzen */
[data-linie="foto"].kopf-band .seitenkopf-demo { color: var(--fa-leise); }
[data-linie="foto"].kopf-band .seitenkopf-demo a { color: var(--primary); }
[data-linie="foto"] .seitenkopf .app-laden a:focus-visible { outline-color: var(--primary); }
[data-linie="foto"].kopf-band .seitenkopf .btn--primary:hover { background-color: var(--primary-deep); color: #fff; }
[data-linie="foto"].kopf-band .seitenkopf .btn--secondary:hover,
[data-linie="foto"].kopf-band .seitenkopf .btn--secondary:focus-visible {
  background-color: #fff; color: var(--primary); border-color: var(--hover-rand); box-shadow: inset 0 0 0 1px var(--hover-rand);
}
.seite-foto .start-app:hover { transform: none; box-shadow: none; }

/* Preise: Tarife und Rechner behalten ihren Rahmen, Zusatzmodule und Homepage-Service ohne Kärtchen */
[data-linie="foto"] .zusatz-eintrag { background: none; border-radius: 0; padding: 22px 0 0; border-top: 1px solid #e3e8ee; }
[data-linie="foto"] .homepage { background: none; border-radius: 0; padding: 0; }
[data-linie="foto"] .homepage-foto { border-radius: 12px; }
[data-linie="foto"] .zusatz-eintrag:hover, [data-linie="foto"] .homepage:hover { transform: none; box-shadow: none; }