/* SFS Immobilien, Website. Grundlage Layoutentwurf v3 vom 15.10.2026 */
@font-face{font-family:'Archivo';font-weight:400;font-display:swap;src:url(fonts/archivo-400.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:500;font-display:swap;src:url(fonts/archivo-500.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:600;font-display:swap;src:url(fonts/archivo-600.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:700;font-display:swap;src:url(fonts/archivo-700.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-weight:400;font-display:swap;src:url(fonts/sourceserif-400Regular.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-weight:400;font-style:italic;font-display:swap;src:url(fonts/sourceserif-400Regular_Italic.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-weight:600;font-display:swap;src:url(fonts/sourceserif-600SemiBold.woff2) format('woff2')}

  :root{
    --tinte:#000000; --papier:#FFFFFF; --kalk:#ECEDEE; --stein:#6E7378; --fuge:#C9CCCF;
    --patina:#45635A; --ziegel:#8A3B2A; --messing:#A78A4E; --schiefer:#2F3A4A;
    --display:'Archivo',Helvetica,Arial,sans-serif; --lese:'Source Serif 4',Georgia,serif;
    --rand:clamp(20px,5vw,72px);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--lese);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
  h1,h2,h3,.nav a,.knopf,.marke,.etikett,dl,.zahl-label{font-family:var(--display)}
  h1,h2,h3{margin:0;font-weight:600;letter-spacing:-0.01em;line-height:1.06}
  p{margin:0 0 1.1em}
  a{color:inherit}
  :focus-visible{outline:2px solid var(--patina);outline-offset:3px}
  .huelle{max-width:1240px;margin:0 auto;padding:0 var(--rand)}
  .ph{background:#FFF4D6;padding:0 3px}

  /* Kopf */
  header{position:sticky;top:0;z-index:20;background:var(--papier);border-bottom:1px solid var(--fuge)}
  .kopf{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:16px;padding-bottom:16px}
  .marke{display:flex;align-items:flex-end;gap:10px;text-decoration:none}
  .marke svg{height:30px;width:auto;display:block}
    .nav{display:flex;gap:28px;align-items:center}
  .nav a{font-size:14px;font-weight:500;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
  .nav a:hover,.nav a:focus-visible{border-bottom-color:var(--patina)}
  .nav .kontaktlink,.nav a[aria-current]{border-bottom:2px solid var(--patina)}
  .menu{display:none}

  /* Auftakt */
  .auftakt{padding-top:clamp(52px,8vw,108px);padding-bottom:clamp(48px,7vw,96px)}
  .auftakt-satz{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,5vw,72px);align-items:end}
  .auftakt h1{font-size:clamp(38px,6.2vw,82px);font-weight:700;letter-spacing:-0.022em}
  .auftakt h1 span{display:block}
  .auftakt-text{font-size:18px;max-width:40ch}
  .knoepfe{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
  .knopf{display:inline-block;background:var(--tinte);color:var(--papier);border:1px solid var(--tinte);padding:13px 22px;font-size:14.5px;font-weight:600;text-decoration:none;cursor:pointer}
  .knopf.hell{background:var(--papier);color:var(--tinte)}
  .knopf:hover{background:var(--schiefer);border-color:var(--schiefer);color:var(--papier)}

  /* Abschnitte */
  section{padding:clamp(60px,8vw,120px) 0}
  .fugenmarke{display:flex;gap:6px;margin-bottom:24px}
  .fugenmarke i{display:block;width:16px;height:5px;background:var(--patina)}
  .zwei{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(28px,5vw,80px)}
  h2.gross{font-size:clamp(27px,3.6vw,44px);max-width:22ch}
  .lauftext{max-width:62ch}
  .lauftext p:last-child{margin-bottom:0}
  .lauftext a{color:var(--patina);text-underline-offset:3px}
  .etikett{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:1.4px;color:var(--stein)}

  /* Projekte */
  .projekte{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);margin-top:40px}
  .projekt{border:1px solid var(--fuge);background:var(--papier);display:flex;flex-direction:column}
  .bild{aspect-ratio:4/3;background:var(--kalk);display:flex;align-items:flex-end;justify-content:space-between;padding:12px;gap:8px}
  .bild span{font-family:var(--display);font-size:11.5px;color:var(--stein);background:var(--papier);padding:3px 7px}
  .bild .status{background:var(--tinte);color:var(--papier)}
  .projekt-text{padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
  .projekt h3{font-size:21px}
  .projekt p{font-size:15.5px;margin:0}
  .projekt dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:4px 0 0;font-size:13.5px}
  .projekt dt{color:var(--stein)} .projekt dd{margin:0}
  .projekt .mehr{margin-top:auto;padding-top:10px;font-family:var(--display);font-size:14px;font-weight:600;color:var(--patina);text-decoration:none}
  .projekt.leer{border-style:dashed;background:transparent}
  .projekt.leer .bild{background:transparent;border-bottom:1px dashed var(--fuge)}

  /* Kaufen */
  .kaufen{background:var(--kalk)}
  .schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,24px);margin-top:36px;counter-reset:s}
  .schritt{background:var(--papier);padding:24px 22px 26px;border-top:3px solid var(--tinte)}
  .schritt h3{font-size:19px;margin:10px 0 8px}
  .schritt p{font-size:15.5px;margin:0}

  /* Gruppe */
  .gruppe{background:var(--tinte);color:var(--papier)}
  .gruppe h2,.gruppe h3{color:var(--papier)}
  .gruppe .fugenmarke i{background:var(--messing)}
  .gruppe .lauftext{color:#D9DBDD}
  .gruppe .etikett{color:var(--messing)}
  .diagramm{width:100%;height:auto;margin-top:36px}
  .koepfe{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px;border-top:1px solid #33383C;padding-top:30px}
  .kopfkarte h3{font-size:17px;margin-top:6px}
  .kopfkarte p{font-family:var(--display);font-size:13.5px;color:#9AA0A5;margin:4px 0 0}

  /* Grundstück */
  .zitat{border-top:1px solid var(--fuge);border-bottom:1px solid var(--fuge);padding:clamp(30px,4vw,52px) 0;margin-top:clamp(36px,5vw,64px)}
  .zitat blockquote{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(22px,3vw,32px);line-height:1.24;max-width:28ch}

  /* Kontakt */
  .kontakt{border-top:1px solid var(--fuge)}
  .kontaktraster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:start;margin-top:36px}
  .adresse{font-family:var(--display);font-size:16px;line-height:1.85}
  .adresse strong{font-weight:600}
  .feld{display:block;margin-bottom:18px}
  .feld span{display:block;font-family:var(--display);font-size:13px;color:var(--stein);margin-bottom:7px}
  .feld input,.feld textarea,.feld select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--fuge);font-family:var(--lese);font-size:16.5px;padding:9px 0;color:var(--tinte)}
  .feld input:focus,.feld textarea:focus,.feld select:focus{border-bottom-color:var(--patina);outline:none}
  .feld textarea{resize:vertical;min-height:88px}

  /* Fuß */
  footer{background:var(--tinte);color:#9AA0A5;padding:44px 0 52px}
  .fuss{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:28px}
  .fuss svg{height:52px;width:auto;color:var(--papier)}
  .fuss h4{font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--messing);margin:0 0 10px}
  .fuss a,.fuss p{display:block;font-family:var(--display);font-size:13.5px;color:#9AA0A5;text-decoration:none;margin:0 0 6px}
  .fuss a:hover{color:var(--papier)}
  .fussclaim{font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:2.6px;text-transform:uppercase;color:var(--messing);margin-top:14px}
  .fussnotiz{font-family:var(--display);font-size:12.5px;color:#6E7378;margin-top:30px;border-top:1px solid #2A2E31;padding-top:18px}

  @media (max-width:900px){
    .marke svg{height:auto;width:min(62vw,240px)}
    .auftakt-satz,.zwei,.kontaktraster{grid-template-columns:1fr}
    .projekte,.schritte{grid-template-columns:1fr}
    .koepfe{grid-template-columns:1fr 1fr}
    .fuss{grid-template-columns:1fr 1fr}
    .nav{display:none}
    .menu{display:block;font-family:var(--display);font-size:14px;font-weight:500;background:none;border:1px solid var(--tinte);padding:9px 14px;cursor:pointer}
  }

/* ---------- Ergänzungen für die umgesetzte Website ---------- */
.sprung{position:absolute;left:-9999px;top:0;background:var(--tinte);color:var(--papier);padding:10px 14px;font-family:var(--display);z-index:50}
.sprung:focus{left:12px;top:12px}
.testleiste{background:var(--messing);color:var(--tinte);font-family:var(--display);font-size:13px;font-weight:500;text-align:center;padding:7px 16px}
section.ohne-oben{padding-top:0}
section.eng{padding-top:clamp(40px,5vw,72px)}
.hinweis{grid-column:1/-1;font-family:var(--display);background:var(--kalk);padding:18px 20px;margin:0}

/* Projektkarten mit echten Bildern */
.projekte .bild{position:relative;overflow:hidden;text-decoration:none}
.projekte .bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.projekte .bild .status{position:relative;margin-left:auto}
.projekte .bild .status.aus{background:var(--stein)}
.projekt h3 a{text-decoration:none}
.projekt h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.schritte{list-style:none;padding:0}
.schritt a{color:var(--patina)}
.diagramm-rahmen{overflow-x:auto}
.diagramm-rahmen .diagramm{min-width:640px}

/* Kontakt */
.formular .knopf{margin-top:6px}
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.klein{font-size:14px;color:var(--stein)}
.klein a{color:var(--patina)}
.meldung{font-family:var(--display);font-size:15px;padding:14px 16px;margin-bottom:22px}
.meldung.ok{background:#E3ECE8;border-left:3px solid var(--patina)}
.meldung.fehler{background:#F3E4E0;border-left:3px solid var(--ziegel)}
.adresse a{text-decoration:none}
.adresse a:hover{text-decoration:underline}

/* Projektseite */
.projektkopf{padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(24px,3vw,40px)}
.pfad{font-family:var(--display);font-size:13px;color:var(--stein);margin-bottom:clamp(24px,4vw,44px)}
.pfad a{text-decoration:none}
.pfad a:hover{text-decoration:underline}
.projektkopf-raster{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,5vw,72px);align-items:end}
.projektkopf h1{font-size:clamp(36px,5.6vw,72px);font-weight:700;letter-spacing:-0.022em;margin:10px 0 16px}
.einleitung{font-size:19px;max-width:44ch;margin:0}
.eckdaten{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:15px;border-top:3px solid var(--tinte);padding-top:16px}
.eckdaten dt{color:var(--stein)}
.eckdaten dd{margin:0;font-weight:500}
.titelbild{margin:0;aspect-ratio:21/9;background:var(--kalk);overflow:hidden}
.titelbild img{width:100%;height:100%;object-fit:cover;display:block}

.wohnungen{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,26px);margin-top:40px}
.wohnung{background:var(--papier);display:flex;flex-direction:column}
.wohnung-bilder{position:relative;aspect-ratio:3/2;background:var(--fuge);overflow:hidden}
.wohnung-bilder .erstes{display:block;width:100%;height:100%}
.wohnung-bilder img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.wohnung-bilder .erstes:hover img{transform:scale(1.02)}
@media (prefers-reduced-motion:reduce){.wohnung-bilder img{transition:none}}
.wohnung-bilder .status,.bildzahl{position:absolute;bottom:12px;font-family:var(--display);font-size:12px;font-weight:600;padding:4px 9px}
.wohnung-bilder .status{left:12px;background:var(--patina);color:var(--papier)}
.wohnung-bilder .status.reserviert{background:var(--messing);color:var(--tinte)}
.bildzahl{right:12px;background:var(--papier);color:var(--tinte);pointer-events:none}
.wohnung-text{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.wohnung h3{font-size:23px}
.lage{font-family:var(--display);font-size:14.5px;color:var(--stein);margin:0}
.wohnung dl,.fakten{display:grid;grid-template-columns:auto 1fr;gap:5px 16px;margin:6px 0 4px;font-family:var(--display);font-size:14px}
.wohnung dt,.fakten dt{color:var(--stein)}
.wohnung dd,.fakten dd{margin:0}
.preis{font-weight:600;font-size:17px}
details{font-size:15.5px;border-top:1px solid var(--fuge);padding-top:10px}
summary{font-family:var(--display);font-size:14px;font-weight:600;cursor:pointer;color:var(--patina)}
details p{margin:10px 0 0}
.wohnung .knopf{align-self:flex-start;margin-top:auto}
.wohnung details+.knopf,.wohnung dl+.knopf{margin-top:12px}

.haus{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(20px,4vw,56px);margin-top:clamp(40px,5vw,72px);padding-top:clamp(28px,4vw,48px);border-top:1px solid var(--fuge)}
.haus-bild{margin:0;aspect-ratio:4/3;background:var(--kalk);overflow:hidden;align-self:start}
.haus-bild img{width:100%;height:100%;object-fit:cover;display:block}
.haus-text h3{font-size:clamp(22px,2.4vw,28px);margin:8px 0 6px}
.haus-beschreibung{font-size:16px;margin-top:12px}
.merkmale{list-style:none;padding:0;margin:14px 0;display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;font-family:var(--display);font-size:14.5px}
.merkmale li{padding-left:18px;position:relative}
.merkmale li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:4px;background:var(--patina)}
.einheiten{width:100%;border-collapse:collapse;margin-top:20px;font-family:var(--display);font-size:14px}
.einheiten caption{text-align:left;padding-bottom:8px}
.einheiten th{text-align:left;font-weight:600;color:var(--stein);font-size:12.5px;border-bottom:1px solid var(--tinte);padding:6px 10px 6px 0}
.einheiten td{border-bottom:1px solid var(--fuge);padding:8px 10px 8px 0;vertical-align:top}
.punkt{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;background:var(--fuge);vertical-align:1px}
.punkt.frei{background:var(--patina)}
.punkt.reserviert{background:var(--messing)}
.punkt.verkauft{background:var(--stein)}

.abschluss .knopf.invers{background:var(--papier);color:var(--tinte);border-color:var(--papier)}
.abschluss .knopf.rahmen{background:transparent;color:var(--papier);border-color:var(--papier)}
.abschluss .knopf:hover{background:var(--messing);border-color:var(--messing);color:var(--tinte)}
.abschluss h2.gross{max-width:18ch}

/* Rechtstexte */
.rechtstext h1.gross{font-size:clamp(30px,4vw,48px);margin-bottom:28px}
.rechtstext h2{font-size:20px;margin:34px 0 10px}
.rechtstext .lauftext{max-width:70ch}

/* Bildergalerie */
.galerie{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:100;display:flex;align-items:center;justify-content:center}
.galerie[hidden]{display:none}
.galerie img{max-width:92vw;max-height:84vh;object-fit:contain;display:block}
.galerie button{position:absolute;background:none;border:1px solid #fff;color:#fff;font-family:var(--display);font-size:15px;padding:10px 16px;cursor:pointer}
.galerie button:hover{background:#fff;color:#000}
.galerie .zu{top:18px;right:18px}
.galerie .zurueck{left:18px;top:50%;transform:translateY(-50%)}
.galerie .vor{right:18px;top:50%;transform:translateY(-50%)}
.galerie .zaehler{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#ccc;font-family:var(--display);font-size:13px}

@media (max-width:900px){
  .projektkopf-raster,.haus{grid-template-columns:1fr}
  .wohnungen{grid-template-columns:1fr}
  .titelbild{aspect-ratio:4/3}
  .merkmale{grid-template-columns:1fr}
  .nav.offen{display:flex;flex-direction:column;align-items:flex-start;position:absolute;left:0;right:0;top:100%;background:var(--papier);padding:12px var(--rand) 20px;border-bottom:1px solid var(--fuge);gap:8px}
  header{position:sticky}
  .kopf{position:relative}
  .galerie .zurueck,.galerie .vor{top:auto;bottom:50px;transform:none}
}

/* Hinweis Musterwohnung */
.karte-hinweis{font-family:var(--display);font-size:13.5px;font-weight:600;margin:2px 0 0}
.karte-hinweis a{color:var(--tinte);text-decoration:none;border-left:3px solid var(--messing);padding-left:8px}
.karte-hinweis a:hover{text-decoration:underline}
.hinweisbox{margin-top:22px;background:var(--kalk);border-left:3px solid var(--messing);padding:14px 16px;font-size:16px;max-width:52ch}
.hinweisbox strong{font-family:var(--display);display:block;margin-bottom:4px}
.hinweisbox a{font-family:var(--display);font-weight:600;color:var(--patina)}