/* ═══════════════════════════════════════════════════════════════════
   seYu Systems — eigenes Erscheinungsbild der Startseite.
   Wird NACH style.css geladen und ueberschreibt nur Farben, Formen und
   die fotobasierten Abschnitte. Die Rechtsseiten nutzen weiterhin
   ausschliesslich style.css.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --weiss:#fffdfa; --karte:#fff; --flaeche:#f6f1e9; --linie:#e7dfd2;
  --nav:rgba(255,253,250,.88);
  --tinte:#1b1512; --grau:#6b6257;
  --blau:#bf5518; --blau-t:#fbe9dc;
  --gruen:#4f7d4a; --gruen-t:#eaf1e5;
  --teal:#3f6f6a; --teal-t:#e6f0ef;
  --orange:#c9791f; --orange-t:#fdf0da;
  --pink:#a8455a; --pink-t:#f7e8ea;
  --violett:#7a4a35; --violett-t:#f4e7e0;
  --rot:#b13b2c; --rot-t:#fbeae6;
  --r:14px; --r-klein:10px;
  --schatten:0 10px 26px rgba(27,21,18,.08);
  --schatten-hoch:0 20px 50px rgba(27,21,18,.16);
  --serif:Georgia,"Iowan Old Style","Times New Roman","Songti SC","Noto Serif SC",serif;
}

html[data-theme="dark"]{
  --weiss:#141110; --karte:#1d1917; --flaeche:#1a1615; --linie:#332b25;
  --nav:rgba(20,17,15,.88);
  --tinte:#f5eee5; --grau:#c6bcae;
  --blau:#f09454; --blau-t:#3b2417;
  --gruen:#8fbf82; --gruen-t:#23301f;
  --teal:#7cc0b8; --teal-t:#1e2c2b;
  --orange:#e0a05a; --orange-t:#3a2a14;
  --pink:#e293a4; --pink-t:#33202a;
  --violett:#c79380; --violett-t:#33241d;
  --rot:#e08b7c; --rot-t:#3a201c;
  --schatten:0 10px 26px rgba(0,0,0,.35);
  --schatten-hoch:0 20px 50px rgba(0,0,0,.5);
}

h1,h2,h3{font-family:var(--serif);letter-spacing:-.01em;font-weight:700}
h2{font-size:clamp(1.6rem,3.2vw,2.5rem)}
.marke-klein{letter-spacing:.14em}
.nav{border-radius:16px}
header{top:10px}
.knopf{border-radius:12px}
.fliese{border-radius:var(--r)}
.cta{background:linear-gradient(140deg,#1b1512,#2b1d15 58%,#3d2415);border-radius:var(--r)}
footer{background:#141110}
.lead{color:var(--grau)}

/* ── Hero mit Foto ────────────────────────────────────────────────── */
.hero-foto{position:relative;min-height:min(78vh,720px);display:flex;align-items:flex-end;padding:0 0 54px;overflow:hidden;background:#1b1512}
.hero-foto .hf-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero-foto .hf-schleier{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,10,.55) 0%,rgba(20,14,10,.35) 38%,rgba(18,12,9,.88) 100%)}
.hero-foto .wrap{position:relative;z-index:2;width:100%}
.hero-foto h1{color:#fff;font-size:clamp(2.1rem,5.4vw,4rem);text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-foto .lead{color:rgba(255,255,255,.9);max-width:640px;font-size:clamp(1rem,1.7vw,1.2rem)}
.hero-foto .marke-klein{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(6px)}
.hero-foto .knopf-blau{background:#fff;color:#1b1512}
.hero-foto .knopf-blau:hover{background:#f3e9df}
.hero-foto .knopf-leise{background:transparent;border:1px solid rgba(255,255,255,.6);color:#fff}
.hero-foto .knopf-leise:hover{background:rgba(255,255,255,.16);color:#fff}
.hero-foto .punkt{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.2)}
.hero-foto .punkte{margin-top:26px}
.hero-foto .hf-marke{position:absolute;top:26px;right:26px;z-index:2;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.92);border-radius:12px;padding:10px 14px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.hero-foto .hf-marke img{width:34px;height:34px}
.hero-foto .hf-marke b{font-size:.92rem;color:#1b1512}

/* ── Fotokacheln (Hardware) ───────────────────────────────────────── */
.fotokacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fotokachel{background:var(--karte);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden;box-shadow:var(--schatten);display:flex;flex-direction:column}
.fotokachel img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fotokachel .fk-text{padding:16px 18px 18px}
.fotokachel h3{font-size:1.05rem;margin-bottom:6px}
.fotokachel p{font-size:.88rem}

/* ── Zwei Spalten mit Bild ────────────────────────────────────────── */
.zwei{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center}
.fotorahmen{margin:0;position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--schatten-hoch)}
.fotorahmen img{width:100%;aspect-ratio:4/3;object-fit:cover}
.fotorahmen figcaption{position:absolute;left:14px;bottom:14px;background:rgba(20,14,10,.78);color:#fff;border-radius:10px;padding:8px 12px;font-size:.82rem;max-width:80%}

/* ── Ablauf als Liste ─────────────────────────────────────────────── */
.ablauf{list-style:none;margin:26px 0 0;padding:0;counter-reset:schritt}
.ablauf li{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--linie)}
.ablauf li:first-child{border-top:0}
.ablauf .nr{width:44px;height:44px;border-radius:12px;background:var(--blau-t);color:var(--blau);display:grid;place-items:center;font-weight:800;font-size:1.05rem}
.ablauf h3{font-size:1.02rem;margin-bottom:4px}
.ablauf p{font-size:.9rem}

/* ── Warum-Liste (ohne Karten) ────────────────────────────────────── */
.punkte-liste{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.punkt-spalte{border-top:2px solid var(--blau);padding-top:16px}
.punkt-spalte .blase{margin-bottom:12px}
.punkt-spalte h3{font-size:1.02rem;margin-bottom:6px}
.punkt-spalte p{font-size:.9rem}

@media (max-width:1000px){
  .fotokacheln{grid-template-columns:repeat(2,1fr)}
  .zwei,.punkte-liste{grid-template-columns:1fr}
  .hero-foto{min-height:auto;padding:120px 0 44px}
}
@media (max-width:620px){
  .fotokacheln{grid-template-columns:1fr}
  .hero-foto .hf-marke{display:none}
}