/* =========================================================================
   Schwerdtner Immobilien — stil.css
   Palette aus dem realen Firmenhaus: Putz-Ocker, Ziegelrot, Kiefergrün.
   Signatur: Vermessungs-/Grenzband am linken Rand + Standort-Register (Mono).
   ========================================================================= */

/* ---- Tokens --------------------------------------------------------------- */
:root{
  --putz:#ECE3D2;        /* warmer Putz-/Sandgrund */
  --putz-tief:#E3D6BC;   /* etwas tieferer Putz für Bänder */
  --tinte:#222D26;       /* tiefes Kiefergrün — Text & dunkle Abschnitte */
  --tinte-2:#3A473F;     /* weicheres Grün für Sekundärtext */
  --ziegel:#A33B26;      /* Dachziegel-Rot — Hebung auf hellem Grund */
  --ocher:#DBA24C;       /* Fassaden-Ocker — Hebung auf dunklem Grund */
  --kalk:#F6F1E6;        /* helles Papier für Karten / Flächen auf Dunkel */
  --linie:rgba(34,45,38,.18);   /* Haarlinie auf hell */
  --linie-hell:rgba(246,241,230,.20); /* Haarlinie auf dunkel */

  --hebung:var(--ziegel);       /* kippt am Untergrund, nicht am Baustein */

  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --grote:"Bricolage Grotesque",system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --mass:66ch;
  --rand:clamp(1.15rem,5vw,4rem);
  --luft:clamp(3.75rem,9vw,7.5rem);   /* vertikale Sektionsluft */
  --rad:3px;
}

/* Untergrund-Wechsel: Ocker als Hebung, helle Schrift */
.dunkel,.fuss{--hebung:var(--ocher);}
/* Helle Karte in dunklem Abschnitt: Hebung zurück auf Ziegel */
.dunkel .karte,.dunkel .kasten{--hebung:var(--ziegel);}

/* ---- Reset / Basis -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--putz);
  color:var(--tinte);
  font-family:var(--serif);
  font-size:clamp(1rem,.96rem + .28vw,1.15rem);
  line-height:1.66;
  font-optical-sizing:auto;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:anywhere;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
h1,h2,h3,h4,p,figure,dl,dd{margin:0;}
ul{margin:0;}

/* Umbruch-Regeln */
p{text-wrap:pretty;hyphens:auto;}
h1,h2,h3,h4{text-wrap:balance;hyphens:manual;font-family:var(--grote);
  font-weight:800;line-height:1.04;letter-spacing:-.015em;}
.marke,.kennzahl,.wert{hyphens:manual;}

/* ---- Auszeichnung: genau vier Stufen -------------------------------------- */
/* 1 Rubrik (Kicker) */
.rubrik{
  font-family:var(--mono);font-size:.8125rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;color:var(--hebung);
  display:inline-flex;align-items:center;gap:.6em;margin:0 0 1.1rem;
}
.rubrik::before{content:"";width:1.6rem;height:1px;background:currentColor;opacity:.7;}
/* 2 Datenwert */
.wert{font-family:var(--mono);color:var(--hebung);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
/* 3 Betonung im Fließtext — kein Schriftwechsel */
strong,.em{font-weight:600;color:var(--hebung);}
/* 4 Kennzahl — Größe trägt, nicht die Farbe */
.kennzahl{font-family:var(--grote);font-weight:800;color:var(--tinte);
  font-variant-numeric:tabular-nums;line-height:.9;letter-spacing:-.03em;}
.dunkel .kennzahl{color:var(--kalk);}

/* ---- Layout-Bausteine ----------------------------------------------------- */
.wrap{width:100%;max-width:74rem;margin-inline:auto;padding-inline:var(--rand);}
.wrap-eng{max-width:52rem;}
.sektion{padding-block:var(--luft);}
.dunkel{background:var(--tinte);color:#EDE6D8;}
.getont{background:var(--putz-tief);}
.mass{max-width:var(--mass);}

.titel{font-size:clamp(1.85rem,1.3rem + 2.6vw,3.1rem);margin-bottom:1.1rem;}
.lead{font-size:clamp(1.12rem,1.03rem + .5vw,1.4rem);color:var(--tinte-2);
  max-width:52ch;}
.dunkel .lead{color:#CFC7B6;}

/* Signatur: Vermessungs-/Grenzband */
.spur{position:relative;}
.spur > .wrap{position:relative;}
.spur .wrap::before{
  content:"";position:absolute;left:0;top:.4rem;bottom:.4rem;
  width:1px;background:var(--linie);
}
.spur .wrap::after{  /* Katastermarke oben */
  content:"";position:absolute;left:-3px;top:.4rem;width:7px;height:7px;
  border:1px solid var(--hebung);background:var(--putz);border-radius:50%;
}
.dunkel.spur .wrap::before{background:var(--linie-hell);}
.dunkel.spur .wrap::after{background:var(--tinte);}
.spur .wrap{padding-left:clamp(1.15rem,4vw,2.6rem);}
@media (max-width:600px){
  .spur .wrap::before,.spur .wrap::after{display:none;}
  .spur .wrap{padding-left:var(--rand);}
}

/* ---- Kopf / Navigation ---------------------------------------------------- */
.kopf{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--putz) 90%,transparent);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--linie);
}
.kopf-innen{display:flex;align-items:center;gap:1rem;
  padding-block:.85rem;flex-wrap:wrap;}
.marke{display:flex;flex-direction:column;text-decoration:none;line-height:1;
  margin-right:auto;min-width:0;}
.marke-name{font-family:var(--grote);font-weight:800;font-size:1.22rem;
  letter-spacing:-.02em;color:var(--tinte);}
.marke-teil{color:var(--ziegel);}
.marke-sub{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinte-2);margin-top:.3rem;}

.nav{display:flex;align-items:center;gap:clamp(.4rem,1.6vw,1.5rem);flex-wrap:wrap;}
.nav a{font-family:var(--grote);font-weight:600;font-size:.98rem;
  text-decoration:none;color:var(--tinte);padding:.4rem .1rem;position:relative;}
.nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:100%;
  bottom:.15rem;height:2px;background:var(--ziegel);transition:right .28s ease;}
.nav a:not(.nav-cta):hover::after,
.nav a[aria-current="page"]::after{right:0;}
.nav a[aria-current="page"]{color:var(--ziegel);}
.nav-cta{background:var(--tinte);color:var(--kalk);border-radius:var(--rad);
  padding:.5rem 1.1rem;}
.nav-cta:hover{background:var(--ziegel);}

/* Mobil-Umschalter (reines CSS, kein JS) */
.nav-schalter{position:absolute;opacity:0;pointer-events:none;}
.nav-knopf{display:none;}
@media (max-width:760px){
  .nav-knopf{display:inline-flex;flex-direction:column;justify-content:center;
    gap:5px;width:44px;height:40px;padding:9px 8px;cursor:pointer;
    border:1px solid var(--linie);border-radius:var(--rad);background:var(--kalk);}
  .nav-strich{height:2px;background:var(--tinte);border-radius:2px;
    transition:transform .25s ease,opacity .2s ease;}
  .nav{display:none;width:100%;flex-direction:column;align-items:flex-start;
    gap:.2rem;padding-block:.6rem 1rem;}
  .nav a{width:100%;padding:.7rem .2rem;border-bottom:1px solid var(--linie);}
  .nav a:not(.nav-cta)::after{display:none;}
  .nav-cta{margin-top:.6rem;width:100%;text-align:center;border-bottom:none;}
  .nav-schalter:checked ~ .nav{display:flex;}
  .nav-schalter:checked ~ .nav-knopf .nav-strich:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-schalter:checked ~ .nav-knopf .nav-strich:nth-child(2){opacity:0;}
  .nav-schalter:checked ~ .nav-knopf .nav-strich:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}

/* ---- Knöpfe --------------------------------------------------------------- */
.knopf{display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--grote);font-weight:700;font-size:1rem;text-decoration:none;
  padding:.8rem 1.4rem;border-radius:var(--rad);border:1px solid transparent;
  cursor:pointer;transition:transform .18s ease,background .2s ease,color .2s ease;}
.knopf-voll{background:var(--ziegel);color:#fff;}
.knopf-voll:hover{background:#8d3120;transform:translateY(-2px);}
.knopf-linie{border-color:currentColor;color:inherit;background:transparent;}
.knopf-linie:hover{background:rgba(34,45,38,.06);transform:translateY(-2px);}
.dunkel .knopf-linie:hover{background:rgba(246,241,230,.10);}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:.8rem;}

/* ---- Hero ----------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;background:var(--tinte);isolation:isolate;}
.hero-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:72% 40%;z-index:-2;}
.hero-schleier{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(24,32,27,.94) 0%,rgba(24,32,27,.80) 42%,rgba(24,32,27,.34) 78%,rgba(24,32,27,.18) 100%),
    linear-gradient(0deg,rgba(24,32,27,.55),rgba(24,32,27,0) 45%);}
.hero .wrap{position:relative;padding-block:clamp(4.5rem,13vh,8.5rem);}
.hero-inhalt{max-width:40rem;color:#F3EDE0;}
.hero h1{font-size:clamp(2.35rem,1.5rem + 4.2vw,4.4rem);color:#fff;
  margin-bottom:1.4rem;}
.hero .lead{color:#E6DFCF;}
.hero .rubrik{color:var(--ocher);}
.hero .knopf-reihe{margin-top:2rem;}
.hero .knopf-linie{color:#F3EDE0;}

/* Datum-Block im Hero */
.datum{display:flex;align-items:baseline;gap:.8rem;margin-top:2.4rem;
  padding-top:1.5rem;border-top:1px solid var(--linie-hell);}
.datum .kennzahl{font-size:clamp(2.6rem,2rem + 3vw,4rem);color:#fff;}
.datum-label{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ocher);max-width:12ch;line-height:1.35;}

/* ---- Kennzahlen-Register (Kennzahl links, Text rechts) -------------------- */
/* Eine gemeinsame Spalte für alle Zeilen via display:contents */
.fakten{display:grid;grid-template-columns:max-content 1fr;
  column-gap:clamp(1.1rem,3vw,2.2rem);row-gap:0;margin:0;}
.fakten .zeile{display:contents;}
.fakten .k{font-family:var(--grote);font-weight:800;font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem);
  color:var(--hebung);font-variant-numeric:tabular-nums;line-height:1;
  padding-block:1.3rem;border-top:1px solid var(--linie);align-self:start;
  text-align:right;letter-spacing:-.02em;}
.fakten .t{padding-block:1.3rem;border-top:1px solid var(--linie);
  align-self:start;color:var(--tinte-2);}
.fakten .t b{display:block;font-family:var(--grote);font-weight:700;
  color:var(--tinte);font-size:1.02rem;margin-bottom:.15rem;}
.dunkel .fakten .k,.dunkel .fakten .t{border-color:var(--linie-hell);}
.dunkel .fakten .t{color:#CFC7B6;}
.dunkel .fakten .t b{color:#EDE6D8;}
/* erste Zeile ohne Polster/Linie oben, damit beide Spalten auf gleicher Höhe starten */
.fakten .zeile:first-child .k,
.fakten .zeile:first-child .t{border-top:0;padding-top:0;}

/* ---- Leistungs-Karten ----------------------------------------------------- */
.raster{display:grid;gap:1.15rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));}
.karte{background:var(--kalk);border:1px solid var(--linie);border-radius:var(--rad);
  padding:clamp(1.4rem,3vw,2rem);min-width:0;display:flex;flex-direction:column;
  gap:.7rem;transition:transform .2s ease,box-shadow .25s ease;}
.karte:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(34,45,38,.12);}
.karte h3{font-size:1.28rem;}
.karte p{color:var(--tinte-2);font-size:.98rem;line-height:1.55;}
.karte .marker{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--hebung);}
.karte-verweis{margin-top:auto;font-family:var(--grote);font-weight:700;
  font-size:.95rem;color:var(--ziegel);text-decoration:none;
  display:inline-flex;gap:.4em;align-items:center;}
.karte-verweis:hover{gap:.7em;}

/* ---- Standort-Register (Signatur-Inhalt) ---------------------------------- */
.orte{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem;}
.ort{font-family:var(--mono);font-size:.86rem;letter-spacing:.02em;
  border:1px solid var(--linie-hell);border-radius:999px;padding:.35rem .95rem;
  color:#E6DFCF;display:inline-flex;align-items:center;gap:.5em;}
.ort::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--ocher);flex:0 0 auto;}

/* ---- Zwei-Spalten-Block (Bild + Text) ------------------------------------- */
.duo{display:grid;gap:clamp(1.8rem,5vw,3.6rem);align-items:start;
  grid-template-columns:1fr;}
@media (min-width:860px){.duo{grid-template-columns:1.05fr .95fr;}
  .duo.bild-rechts .duo-medium{order:2;}}
.duo > *{min-width:0;}
.duo-medium figure{margin:0;}
.bild{width:100%;border-radius:var(--rad);border:1px solid var(--linie);}
.bild-crop{aspect-ratio:4/3;object-fit:cover;object-position:50% 20%;}
.bild-cap{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--tinte-2);margin-top:.6rem;text-transform:uppercase;}
.rahmen{position:relative;}
/* Katester-Eckwinkel um Bilder */
.rahmen::before,.rahmen::after{content:"";position:absolute;width:18px;height:18px;
  border:2px solid var(--ziegel);pointer-events:none;}
.rahmen::before{left:-6px;top:-6px;border-right:0;border-bottom:0;}
.rahmen::after{right:-6px;bottom:-6px;border-left:0;border-top:0;}

/* ---- Prosa-Fluss (Über uns, Impressum) ------------------------------------ */
.prosa{max-width:var(--mass);}
.prosa > * + *{margin-top:1.15rem;}
.prosa h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2rem);margin-top:2.6rem;}
.prosa h3{font-size:1.2rem;margin-top:1.8rem;}
.prosa a{color:var(--ziegel);text-underline-offset:3px;}
.prosa ul{padding-left:1.1rem;}
.prosa li{margin-top:.4rem;}

/* ---- Kontakt -------------------------------------------------------------- */
.kontakt-gitter{display:grid;gap:clamp(1.8rem,5vw,3.4rem);align-items:start;
  grid-template-columns:1fr;}
@media (min-width:820px){.kontakt-gitter{grid-template-columns:1fr 1fr;}}
.kontakt-gitter > *{min-width:0;}
.info-liste{list-style:none;padding:0;margin:1.4rem 0 0;}
.info-liste li{display:grid;grid-template-columns:max-content 1fr;gap:.4rem 1.1rem;
  padding-block:1rem;border-top:1px solid var(--linie);align-items:baseline;}
.dunkel .info-liste li{border-color:var(--linie-hell);}
.info-liste li:first-child{border-top:0;padding-top:0;}
.info-k{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--hebung);}
.info-v{font-family:var(--serif);}
.info-v a{text-decoration:none;color:inherit;border-bottom:1px solid var(--hebung);}

/* Formular */
form.anfrage{background:var(--kalk);border:1px solid var(--linie);
  border-radius:var(--rad);padding:clamp(1.4rem,4vw,2.2rem);}
.feld{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1.1rem;}
.feld label{font-family:var(--grote);font-weight:600;font-size:.95rem;}
.feld input,.feld textarea{font:inherit;font-size:1rem;color:var(--tinte);
  background:var(--putz);border:1px solid var(--linie);border-radius:var(--rad);
  padding:.7rem .85rem;width:100%;min-width:0;}
.feld textarea{min-height:8rem;resize:vertical;}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--ziegel);
  box-shadow:0 0 0 3px rgba(163,59,38,.16);}
.hinweis{font-size:.82rem;color:var(--tinte-2);margin-top:.4rem;}

/* ---- Fuß ------------------------------------------------------------------ */
.fuss{background:var(--tinte);color:#D9D2C3;padding-block:clamp(3rem,6vw,4.5rem) 2rem;}
.fuss-gitter{display:grid;gap:2rem clamp(1.5rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));}
.fuss h4{font-family:var(--mono);font-weight:500;font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ocher);
  margin-bottom:1rem;}
.fuss a{color:#D9D2C3;text-decoration:none;}
.fuss a:hover{color:#fff;}
.fuss-marke{font-family:var(--grote);font-weight:800;font-size:1.35rem;color:#fff;
  letter-spacing:-.02em;}
.fuss-liste{list-style:none;padding:0;display:flex;flex-direction:column;gap:.5rem;}
.fuss-klein{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--linie-hell);
  display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-size:.82rem;color:#A9A395;}
.fuss-klein a{border-bottom:1px solid var(--linie-hell);}

/* ---- Fokus / Zugänglichkeit ---------------------------------------------- */
:focus-visible{outline:3px solid var(--ziegel);outline-offset:3px;border-radius:2px;}
.dunkel :focus-visible,.hero :focus-visible,.fuss :focus-visible{outline-color:var(--ocher);}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip{position:absolute;left:.5rem;top:-3rem;z-index:100;background:var(--tinte);
  color:#fff;padding:.6rem 1rem;border-radius:var(--rad);transition:top .2s ease;}
.skip:focus{top:.5rem;}

/* ---- Reduced Motion: alles im Endzustand ---------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;
    animation-iteration-count:1!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important;}
}