/* Startseite – RM Architektur (monochrom, auf kds-base-Tokens). */
.home-sec__head{ max-width:760px; margin-bottom:clamp(28px,4vh,48px); }
.home-sec__head h2{ font-size:clamp(2.1rem,1.4rem + 2.6vw,3.4rem); line-height:1.08; margin:.1em 0 0; }
.home-sec__more{ margin-top:clamp(34px,5vh,54px); }
/* ---------- 1 · Hero ---------- */
.home-hero{
position:relative; overflow:hidden;
background:var(--ink); color:#fff;
/* Das Hero-Bild ist 1920×1080 (16:9). Der Hero übernimmt exakt dieses
Verhältnis – so wird das Haus nirgends beschnitten. Die Mindesthöhe
greift nur auf sehr breiten, flachen Bildschirmen. */
aspect-ratio:16 / 9;
min-height:560px;
display:flex; align-items:flex-end;
}
.home-hero__bg{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; will-change:transform; }
.home-hero__inner{ position:relative; z-index:1; padding-block:0 clamp(56px,11vh,120px); max-width:60rem; }
.home-hero .eyebrow{ color:rgba(255,255,255,.8); }
.home-hero .eyebrow::before{ background:rgba(255,255,255,.55); }
.home-hero__title{
font-family:var(--font-display); color:#fff; font-weight:400;
font-size:clamp(2.5rem,1.6rem + 4.4vw,5rem); line-height:1.02; letter-spacing:-.015em;
margin:.3em 0 0; max-width:18ch; text-wrap:balance;
}
.home-hero__sub{ margin:26px 0 38px; max-width:52ch; color:rgba(255,255,255,.88); font-size:clamp(1.05rem,1rem + .35vw,1.25rem); line-height:1.62; }
.home-hero__actions{ display:flex; align-items:center; gap:clamp(16px,3vw,30px); flex-wrap:wrap; }
.home-hero__link{ color:#fff; font-size:.95rem; letter-spacing:.02em; border-bottom:1px solid rgba(255,255,255,.5); padding-bottom:3px; transition:border-color .2s ease; }
.home-hero__link:hover{ border-bottom-color:#fff; }
@media (max-width:640px){ .home-hero__title{ line-height:1.06; } }
/* ---------- 2 · Haltung / Credo ---------- */
.home-credo__inner{ max-width:900px; text-align:center; margin-inline:auto; }
.home-credo .eyebrow{ justify-content:center; }
.home-credo__text{
font-family:var(--font-display); font-weight:400; color:var(--ink);
font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem); line-height:1.32; letter-spacing:-.005em;
margin:0; border:0; padding:0;
}
.home-credo__by{ margin-top:28px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
/* ---------- 3 · Projekte ---------- */
.home-projects{ background:var(--tint); }
/* ---------- 4 · Leistungen ---------- */
.home-services__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
@media(max-width:760px){ .home-services__grid{ grid-template-columns:1fr; } }
.home-service{ background:var(--bg); padding:clamp(28px,4vw,46px); }
.home-service h3{ font-size:1.65rem; margin:0 0 .5em; }
.home-service p{ margin:0; color:var(--text); line-height:1.7; max-width:34ch; }
.home-services__note{ margin-top:30px; color:var(--muted); font-size:15px; max-width:70ch; }
/* ---------- 5 · Büro ---------- */
.home-studio__grid.has-portrait{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,72px); align-items:center; }
@media(max-width:820px){ .home-studio__grid.has-portrait{ grid-template-columns:1fr; } }
.home-studio__photo img{ width:100%; height:auto; display:block; background:var(--tint); }
.home-studio__text{ max-width:60ch; }
.home-studio__text h2{ font-size:clamp(2.1rem,1.4rem + 2.6vw,3.4rem); margin:.1em 0 .6em; }
.home-studio__text p{ color:var(--text); line-height:1.75; margin:0 0 1.8em; }
/* ---------- 6 · Kontakt-CTA ---------- */
.home-cta{ background:var(--ink); color:#fff; text-align:center; padding-block:clamp(72px,12vh,140px); }
.home-cta__inner{ max-width:720px; margin-inline:auto; }
.home-cta h2{ color:#fff; font-size:clamp(2.3rem,1.5rem + 3vw,3.9rem); line-height:1.1; margin:0; }
.home-cta p{ color:rgba(255,255,255,.78); margin:20px 0 36px; font-size:1.3rem; }
/* ---------- Schwarz-Interlude ---------- */
.home-interlude{ background:var(--ink); color:#fff; padding-block:clamp(90px,18vh,200px); }
.home-interlude__inner{ max-width:1000px; }
.home-interlude__text{
font-family:var(--font-display); font-weight:400; color:#fff; margin:0; max-width:20ch;
font-size:clamp(2rem,1.3rem + 3.4vw,4.2rem); line-height:1.12; letter-spacing:-.01em;
}
/* ---------- 5b · FAQ (Häufige Fragen) ---------- */
.home-faq__list{ max-width:820px; border-top:1px solid var(--line); }
.home-faq__item{ border-bottom:1px solid var(--line); }
.home-faq__q{ cursor:pointer; list-style:none; position:relative; padding:clamp(20px,3vh,30px) 46px clamp(20px,3vh,30px) 0; font-family:var(--font-display); font-weight:400; font-size:clamp(1.15rem,1rem + .6vw,1.5rem); line-height:1.3; color:var(--ink); transition:color .2s ease; }
.home-faq__q::-webkit-details-marker{ display:none; }
.home-faq__q::after{ content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-family:var(--font); font-size:1.6rem; line-height:1; color:var(--muted); transition:transform .2s ease; }
.home-faq__item[open] .home-faq__q::after{ content:"–"; }
.home-faq__q:hover{ color:var(--accent); }
.home-faq__a{ padding:0 46px clamp(22px,3vh,32px) 0; max-width:70ch; }
.home-faq__a p{ margin:0; color:var(--text); line-height:1.72; }
/* =====================================================================
ELEGANZ-PASS · Art Direction
Ziel: Rhythmus atmen lassen, Hierarchie schärfen, Ruhe erzeugen.
Reihenfolge der Blicke: Hero → Credo (Statement) → Arbeiten → Rest.
===================================================================== */
/* --- 1 · Rhythmus: Sektionen nach Gewicht statt im Gleichtakt --------- */
.home-credo { padding-block:var(--sec-xl); } /* der emotionale Höhepunkt: viel Luft */
.home-projects{ padding-block:var(--sec-lg); } /* die Arbeit: großzügig */
.home-services{ padding-block:var(--sec); }
.home-studio { padding-block:var(--sec-lg); }
.home-faq { padding-block:var(--sec-sm); } /* funktional: kompakt */
/* --- 2 · Hierarchie: eine klare Rangfolge der Stimmen ----------------- */
/* Das Credo ist der größte Satz der Seite – größer als jede Überschrift. */
.home-credo__text{
font-size:clamp(2.3rem,1.4rem + 3.4vw,4.4rem);
line-height:1.14;
letter-spacing:-.018em;
max-width:19ch;
text-wrap:balance;
}
/* Sektions-Überschriften treten bewusst hinter das Credo zurück. */
.home-sec__head{ margin-bottom:clamp(34px,3.4vw,60px); }
.home-sec__head h2{
font-size:clamp(1.85rem,1.25rem + 1.9vw,2.8rem);
line-height:1.1;
letter-spacing:-.012em;
}
/* Das Interlude spricht laut, aber leiser als das Credo. */
.home-interlude__text{ font-size:clamp(1.8rem,1.2rem + 2.2vw,3.1rem); line-height:1.22; }
/* Die FAQ ist Service, kein Statement – deutlich zurückgenommen. */
.home-faq .home-sec__head h2{ font-size:clamp(1.5rem,1.15rem + 1.1vw,2.05rem); }
.home-faq__q{ font-size:clamp(1.05rem,.98rem + .38vw,1.28rem); }
/* Der Schluss-CTA darf wieder groß sein – er ist die letzte Geste. */
.home-cta h2{ font-size:clamp(2.1rem,1.4rem + 2.6vw,3.5rem); }
.home-cta p { font-size:1.15rem; }
/* --- 3 · Feinheiten, die Ruhe erzeugen -------------------------------- */
.home-hero__title{ text-wrap:balance; }
.home-services__note{ font-size:.95rem; }
/* Hochformat/Handy: 16:9 wäre nur ~220px hoch – dort bewusst füllen
und den Ausschnitt nach oben schieben, damit das Dach sichtbar bleibt. */
@media (max-width:820px){
.home-hero{ aspect-ratio:auto; min-height:82svh; }
.home-hero__bg{ background-position:center 28%; }
}
/* --- Credo: ein Statement, kein Absatz in Großschrift ----------------- */
.home-credo__inner{ max-width:820px; }
.home-credo__text{
font-size:clamp(2.1rem,1.3rem + 3vw,3.9rem);
line-height:1.1;
max-width:16ch;
margin-inline:auto;
text-wrap:balance;
}
.home-credo__lead{
margin:clamp(26px,3vw,40px) auto 0;
max-width:56ch;
font-size:1.05rem;
line-height:1.75;
color:var(--text);
}
.home-credo__by{ margin-top:clamp(26px,3vw,38px); }
/* ---------- 4b · Ablauf ---------- */
.home-ablauf{ padding-block:var(--sec); }
.home-ablauf__lead{ margin:22px 0 0; max-width:58ch; color:var(--text); font-size:1.05rem; line-height:1.75; }
.home-ablauf__list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); max-width:900px; counter-reset:none; }
.home-ablauf__step{
display:grid; grid-template-columns:72px 1fr; gap:clamp(14px,2.4vw,36px);
align-items:start; padding:clamp(22px,2.6vw,34px) 0; border-bottom:1px solid var(--line);
}
@media(max-width:640px){ .home-ablauf__step{ grid-template-columns:52px 1fr; gap:16px; } }
.home-ablauf__no{
font-family:var(--font-display); font-weight:400; font-size:clamp(1.05rem,.95rem + .45vw,1.45rem);
line-height:1; color:var(--ink); opacity:.3; letter-spacing:.04em; padding-top:.5em;
font-variant-numeric:lining-nums tabular-nums;
}
.home-ablauf__body h3{ margin:0 0 .45em; font-family:var(--font-display); font-weight:400; font-size:clamp(1.25rem,1.05rem + .7vw,1.7rem); line-height:1.2; }
.home-ablauf__body p{ margin:0; max-width:60ch; color:var(--text); line-height:1.72; }
.home-ablauf__note{ margin:clamp(26px,3vw,38px) 0 0; color:var(--muted); font-size:.95rem; max-width:70ch; }
/* Ablauf als dunkler Moment: ersetzt das gestrichene Interlude –
gleicher Rhythmus-Effekt, aber mit Inhalt statt wiederholtem Slogan. */
.home-ablauf{ background:var(--ink); color:#fff; }
.home-ablauf .eyebrow{ color:rgba(255,255,255,.72); }
.home-ablauf .eyebrow::before{ background:rgba(255,255,255,.5); }
.home-ablauf .home-sec__head h2{ color:#fff; }
.home-ablauf__lead{ color:rgba(255,255,255,.8); }
.home-ablauf__list{ border-top-color:rgba(255,255,255,.16); }
.home-ablauf__step{ border-bottom-color:rgba(255,255,255,.16); }
.home-ablauf__no{ color:#fff; opacity:.42; }
.home-ablauf__body h3{ color:#fff; }
.home-ablauf__body p{ color:rgba(255,255,255,.78); }
.home-ablauf__note{ color:rgba(255,255,255,.5); }
/* ---- Statement-Headlines bewusst 2-zeilig (harter Umbruch per
) ----
Auf schmalen Screens den
ausblenden -> natürlicher Umbruch. */
.home-credo__text{ max-width:none; font-size:clamp(1.9rem,1.2rem + 2.2vw,3.1rem); text-wrap:normal; }
.home-cta h2{ text-wrap:normal; }
@media (max-width:600px){
.home-credo__text br, .home-cta h2 br{ display:none; }
}
/* CTA-Fix (siehe pages.css): Schrift passt garantiert in 2 Zeilen. */
.home-cta__inner{ max-width:800px; }
.home-cta h2{ font-size:clamp(1.85rem,1.2rem + 1.9vw,2.7rem); line-height:1.16; }
/* Studio-Porträt (Startseite): füllt den Hochformat-Slot sauber. */
.home-studio__photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }