/* SIS Immobilien GmbH — Stilblatt
   CI: Weinrot #A52942, Grau #949494 (Logo/Briefbogen), Century Gothic
   → Web: Jost (geometrische Sans, selbst gehostet), Radius 0. */

@font-face{
  font-family:'Jost';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('/assets/fonts/jost-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Jost';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('/assets/fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --papier:#FAF7F3;
  --flaeche:#F3EDE6;
  --tinte:#2B2327;
  --text:#4A4146;
  --grau:#8A8286;
  --linie:#E2DAD3;
  --wein:#A52942;
  --wein-dunkel:#842035;
  --nacht:#2F141E;
  --nacht-text:#EFE3DE;
  --nacht-grau:#B9A6A4;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:'Jost', 'Century Gothic', 'Segoe UI', sans-serif;
  font-weight:400;
  background:var(--papier);
  color:var(--text);
  line-height:1.65;
  font-size:1.0625rem;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{color:var(--tinte);font-weight:500;line-height:1.12;text-wrap:balance}
a{color:var(--wein);text-decoration:none}
a:hover{color:var(--wein-dunkel)}
a:focus-visible,button:focus-visible{outline:2px solid var(--wein);outline-offset:3px}
img{max-width:100%;display:block}
::selection{background:var(--wein);color:#fff}

.wrap{max-width:1140px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}

.sprunglink{
  position:absolute;left:-999px;top:8px;z-index:99;
  background:var(--wein);color:#fff;padding:.6em 1.2em;
}
.sprunglink:focus{left:8px;color:#fff}

/* ---------- Kopf ---------- */
.kopf{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--papier) 92%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linie);
}
.kopf-zeile{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.kopf-logo img{height:36px;width:auto}
.kopf-nav{display:flex;align-items:center;gap:clamp(16px,2.5vw,36px)}
.kopf-nav a{
  color:var(--tinte);font-size:.98rem;letter-spacing:.02em;
  border-bottom:2px solid transparent;padding:2px 0;
}
.kopf-nav a:hover{border-bottom-color:var(--wein);color:var(--tinte)}
.kopf-tel{
  color:var(--wein) !important;font-weight:500;white-space:nowrap;
}
@media (max-width:760px){
  .kopf-nav a:not(.kopf-tel){display:none}
}

/* ---------- Held ---------- */
/* padding:0 hebt die allgemeine Sektions-Polsterung auf — sonst kaeme sie
   zur Polsterung des .wrap hinzu und der Hero waere doppelt so hoch. */
.held{position:relative;overflow:hidden;border-bottom:1px solid var(--linie);padding:0}
.held .wrap{position:relative;padding-top:clamp(36px,5vw,72px);padding-bottom:clamp(32px,4vw,56px)}
/* Der Schwung aus dem Logo liegt als Grafik hinter der rechten Hero-Haelfte.
   Bewusst ueber die BREITE skaliert, nicht ueber die Hoehe: sonst schrumpft
   er mit, sobald der Hero kompakter wird. Er laeuft oben und unten aus dem
   Abschnitt heraus (.held hat overflow:hidden) und wirkt so als Flaeche. */
.schwung{
  /* Ueber left:53% verankert — an der Fensterbreite ausgerichtet statt am
     rechten Rand. Mit right:-x% wandert die Grafik auf breiten Schirmen
     sonst aus der Textspalte heraus und laesst daneben eine Luecke. */
  position:absolute;top:54%;left:53%;width:min(72vw,1060px);height:auto;max-width:none;
  transform:translateY(-50%);pointer-events:none;
}
@media (max-width:860px){
  .schwung{width:150%;left:20%}
}
.etikett{
  display:inline-block;
  font-size:.8rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--wein);
}
.etikett::before{
  content:"";display:inline-block;width:9px;height:9px;background:var(--wein);
  margin-right:.9em;vertical-align:8%;
}
.held h1{
  font-size:clamp(2.5rem,6vw,4.3rem);
  margin:.45em 0 .3em;max-width:13ch;
}
.held-satz{max-width:44ch;font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--text)}
.held-aktionen{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.4em}

.knopf{
  display:inline-block;background:var(--wein);color:#fff;
  padding:.95em 1.8em;font-size:1rem;font-weight:500;letter-spacing:.03em;
  border:1px solid var(--wein);
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.knopf:hover{background:var(--wein-dunkel);border-color:var(--wein-dunkel);color:#fff;transform:translateY(-2px)}
.knopf-leise{
  display:inline-block;background:transparent;color:var(--tinte);
  padding:.95em 1.8em;font-size:1rem;font-weight:500;letter-spacing:.03em;
  border:1px solid var(--tinte);
  transition:border-color .18s ease,color .18s ease,transform .18s ease;
}
.knopf-leise:hover{border-color:var(--wein);color:var(--wein);transform:translateY(-2px)}

/* Stadtband unter dem Held */
.stadtband{border-bottom:1px solid var(--linie);overflow:hidden}
/* 3:1 entspricht exakt dem Zuschnitt der Datei — so wird nie etwas
   weggeschnitten und der Dom steht immer vollstaendig im Bild.
   Schmale Schirme bekommen ein hoeheres Format, sonst wird das Band
   zum Streifen; dort liegt der Dom ueber object-position im Ausschnitt. */
.stadtband img{width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;object-position:center}
@media (max-width:760px){
  .stadtband img{aspect-ratio:16/10;object-position:30% center}
}

/* ---------- Sektionen ---------- */
section{padding:clamp(64px,9vw,120px) 0}
.sektion-kopf{max-width:60ch;margin-bottom:clamp(36px,5vw,64px)}
.sektion-kopf h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:.4em 0 .35em}
.sektion-kopf p{max-width:52ch}

.flaeche{background:var(--flaeche)}

/* Leistungen */
.leistungen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px)}
@media (max-width:860px){.leistungen{grid-template-columns:1fr}}
.leistung{border-top:1px solid var(--linie);padding-top:28px;position:relative}
.leistung::before{
  content:"";position:absolute;top:-1px;left:0;width:56px;height:3px;background:var(--wein);
}
.leistung-nr{
  font-size:.85rem;letter-spacing:.16em;color:var(--grau);font-weight:500;
}
.leistung h3{font-size:1.35rem;margin:.5em 0 .55em}
.leistung p{font-size:1rem}

/* Objekte */
.objekte-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(24px,3vw,40px)}
.objekt{background:var(--papier);border:1px solid var(--linie);display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease}
.objekt:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(43,35,39,.35)}
.objekt-bild{aspect-ratio:4/3;overflow:hidden;background:var(--flaeche)}
.objekt-bild img{width:100%;height:100%;object-fit:cover}
.objekt-bild-leer{width:100%;height:100%;
  background:linear-gradient(135deg,var(--flaeche) 0%,#E9E0D8 100%)}
.objekt-text{padding:24px 24px 28px;display:flex;flex-direction:column;gap:8px;flex:1}
.objekt-text h3{font-size:1.2rem}
.objekt-fakten{font-size:.95rem;color:var(--grau)}
.objekt-preis{font-size:1.3rem;font-weight:500;color:var(--tinte);margin-top:auto}
.pfeillink{font-weight:500;font-size:.98rem}

.objekte-leer{
  border:1px solid var(--linie);background:var(--papier);
  display:grid;grid-template-columns:1fr 1.15fr;align-items:stretch;
}
@media (max-width:760px){.objekte-leer{grid-template-columns:1fr}}
.objekte-leer-bild{overflow:hidden;min-height:260px}
.objekte-leer-bild img{width:100%;height:100%;object-fit:cover}
.objekte-leer-text{padding:clamp(32px,5vw,56px);align-self:center}
.objekte-leer-satz{max-width:46ch;margin:0 0 1.8em;font-size:1.1rem}
.objekte-hinweis{margin-top:2.2em;font-size:.98rem;color:var(--grau)}

.suchen-streifen{
  margin-top:clamp(40px,6vw,64px);border-top:1px solid var(--linie);
  padding-top:28px;display:flex;flex-wrap:wrap;gap:18px 40px;align-items:baseline;
}
.suchen-streifen strong{color:var(--tinte);font-weight:500;font-size:1.1rem}
.suchen-streifen p{max-width:56ch;font-size:1rem}

/* Über uns */
.ueber{display:grid;grid-template-columns:minmax(200px,.9fr) 1.6fr;gap:clamp(32px,6vw,88px);align-items:start}
@media (max-width:860px){.ueber{grid-template-columns:1fr}}
.ueber-bild{overflow:hidden}
.ueber-bild img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:60% center}
.ueber-text p + p{margin-top:1.1em}
.ueber-text .gross{font-size:clamp(1.25rem,2vw,1.5rem);color:var(--tinte);line-height:1.4}

/* Schwester (dunkle Sektion) */
.schwester{background:var(--nacht);color:var(--nacht-text)}
.schwester .etikett{color:#D98A9C}
.schwester .etikett::before{background:#D98A9C}
.schwester h2{color:#fff;font-size:clamp(1.7rem,3vw,2.3rem);max-width:24ch;margin:.4em 0 .5em}
.schwester p{color:var(--nacht-text);max-width:58ch}
.schwester .zeile{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
@media (max-width:860px){.schwester .zeile{grid-template-columns:1fr}}
.schwester a.knopf-leise{border-color:var(--nacht-grau);color:#fff}
.schwester a.knopf-leise:hover{border-color:#fff;color:#fff}
.schwester-seite{justify-self:stretch}
.schwester-bild{overflow:hidden;margin-bottom:24px}
.schwester-bild img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}

/* Kontakt */
.kontakt-raster{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(32px,6vw,80px)}
@media (max-width:860px){.kontakt-raster{grid-template-columns:1fr}}
.kontakt-adresse{font-style:normal;line-height:1.8}
.kontakt-adresse strong{color:var(--tinte);font-weight:500}
.kontakt-gross{display:flex;flex-direction:column;gap:10px}
.kontakt-gross a{
  font-size:clamp(1.1rem,1.5vw,1.3rem);font-weight:500;color:var(--tinte);
  line-height:1.4;width:fit-content;
  border-bottom:2px solid transparent;
}
.kontakt-gross a:hover{color:var(--wein);border-bottom-color:var(--wein)}
.kontakt-gross .leise{font-size:1rem;color:var(--grau);font-weight:400;margin-top:8px}

/* Fuß */
.fuss{border-top:1px solid var(--linie);padding:32px 0 40px;font-size:.92rem;color:var(--grau)}
.fuss-zeile{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between}
.fuss a{color:var(--grau)}
.fuss a:hover{color:var(--wein)}

/* Unterseiten (Impressum/Datenschutz) */
.unterseite{padding:clamp(48px,7vw,88px) 0}
.unterseite .wrap{max-width:820px}
.unterseite h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:1em}
.unterseite h2{font-size:1.3rem;margin:2em 0 .5em}
.unterseite p + p{margin-top:.8em}
.unterseite address{font-style:normal}

/* ---------- Einblenden beim Scrollen ---------- */
.einblenden{opacity:0;transform:translateY(16px);
  transition:opacity .6s ease,transform .6s ease}
.einblenden.sichtbar{opacity:1;transform:none}
.leistungen .leistung:nth-child(2),.objekte-raster .objekt:nth-child(2){transition-delay:.1s}
.leistungen .leistung:nth-child(3),.objekte-raster .objekt:nth-child(3){transition-delay:.2s}
@media (prefers-reduced-motion:reduce){
  .einblenden{opacity:1;transform:none;transition:none}
  .knopf,.knopf-leise,.objekt{transition:none}
}