/* ==========================================================================
   Nickl Immobilien — nickl-immobilien.de
   Stylesheet, abgeleitet aus dem Design-Handoff (High-Fidelity).
   Farb- und Typo-Tokens exakt nach farben.css / README des Handoffs.
   ========================================================================== */

/* --- Schriften (self-hosted, kein Google-Fonts-CDN → kein DSGVO-Thema) ---- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;          /* Variable Font, deckt 400/500/600/700 ab */
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-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: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-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;
}

/* --- Design-Tokens ------------------------------------------------------- */
:root {
  --nickl-blau: #16324F;        /* Primär: Hero-/Footer-Grund, Headlines */
  --nickl-messing: #B08D4A;     /* Akzent: Eyebrows, Hover, Unterstriche */
  --nickl-creme: #F2EFE8;       /* helle Flächen, Text auf Blau */
  --nickl-papier: #F7F5F1;      /* Body-Hintergrund */
  --nickl-linie: #E3DFD6;
  --nickl-linie-feld: #D8D3C8;
  --nickl-anthrazit: #23252A;   /* Text */
  --nickl-grau-warm: #5C5850;   /* Fließtext */
  --nickl-grau: #8A857C;        /* Nebeninfo */
  --nickl-foto-grund: #E7E2D8;
  /* Töne auf dunklem Grund */
  --nickl-blau-text: #C9D4DF;
  --nickl-hellblau: #9DB2C6;
  --nickl-blau-border: #46617C;
  --nickl-blau-linie: #2A4A6B;
  --nickl-blau-flaeche: #1D3D5E;

  --breite: 1040px;
  --rand: 24px;
}

/* --- Grundgerüst --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--nickl-papier);
  font-family: Archivo, Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: var(--nickl-anthrazit);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--nickl-blau); text-decoration: none; }
a:hover { color: var(--nickl-messing); }

::selection { background: var(--nickl-blau); color: var(--nickl-creme); }

img, svg { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--nickl-messing);
  outline-offset: 3px;
}

.inhalt {
  max-width: var(--breite);
  margin: 0 auto;
  padding-left: var(--rand);
  padding-right: var(--rand);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-Link */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--nickl-blau);
  color: var(--nickl-creme);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
}
.skip:focus { left: 0; color: var(--nickl-creme); }

/* --- Wortmarke ----------------------------------------------------------- */
.marke { display: flex; align-items: center; gap: 14px; }
.marke__text { display: flex; flex-direction: column; }
.marke__name {
  font-size: 17px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--nickl-blau);
}
.marke__zusatz {
  font-size: 9px; font-weight: 500; letter-spacing: 0.32em;
  color: var(--nickl-grau);
}

/* --- Header (sticky) ----------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 10;
  background: var(--nickl-papier);
  border-bottom: 1px solid var(--nickl-linie);
}
.kopf .inhalt {
  padding-top: 18px; padding-bottom: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav {
  display: flex; gap: 28px;
  font-size: 14px; font-weight: 500; letter-spacing: 0.04em;
}
.nav a { color: var(--nickl-anthrazit); }
.nav a:hover, .nav a:focus-visible { color: var(--nickl-messing); }

@media (max-width: 620px) {
  .kopf .inhalt { flex-direction: column; align-items: flex-start; gap: 14px; }
  .nav { gap: 20px; flex-wrap: wrap; font-size: 13px; }
}

/* --- Hero ---------------------------------------------------------------- */
.hero { background: var(--nickl-blau); color: var(--nickl-creme); }
.hero .inhalt {
  padding-top: 110px; padding-bottom: 120px;
  display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center;
}
.hero__text { display: flex; flex-direction: column; gap: 28px; }
.hero h1 {
  margin: 0;
  font-size: clamp(38px, 5.5vw, 60px);
  font-weight: 700; line-height: 1.08; letter-spacing: 0.01em;
  text-wrap: balance;
}
.hero p {
  margin: 0; max-width: 560px;
  font-size: 18px; line-height: 1.65;
  color: var(--nickl-blau-text);
  text-wrap: pretty;
}
.hero__aktionen { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.hero__zeichen { opacity: 0.95; flex: none; }

.knopf {
  padding: 14px 28px;
  font-size: 15px; font-weight: 600; letter-spacing: 0.04em;
  display: inline-block;
}
.knopf--primaer { background: var(--nickl-creme); color: var(--nickl-blau); }
.knopf--primaer:hover, .knopf--primaer:focus-visible {
  background: var(--nickl-messing); color: var(--nickl-creme);
}
.knopf--sekundaer {
  border: 1px solid var(--nickl-blau-border); color: var(--nickl-creme);
}
.knopf--sekundaer:hover, .knopf--sekundaer:focus-visible {
  border-color: var(--nickl-messing); color: var(--nickl-messing);
}

@media (max-width: 820px) {
  .hero .inhalt {
    grid-template-columns: 1fr;
    padding-top: 72px; padding-bottom: 80px;
  }
  .hero__zeichen { width: 120px; height: 120px; }
}

/* --- Sektionen ----------------------------------------------------------- */
.sektion { scroll-margin-top: 90px; }
.sektion .inhalt { padding-top: 96px; padding-bottom: 96px; }
@media (max-width: 820px) {
  .sektion .inhalt { padding-top: 64px; padding-bottom: 64px; }
}

.eyebrow {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.3em;
  color: var(--nickl-messing);
}
.sektion h2 {
  margin: 0;
  font-size: 34px; font-weight: 700; letter-spacing: 0.01em;
  color: var(--nickl-blau);
}
@media (max-width: 620px) {
  .sektion h2 { font-size: 27px; }
}

/* --- Mieter-Service ------------------------------------------------------ */
.mieter h2 { margin-bottom: 48px; }
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
}
.karte {
  border-top: 3px solid var(--nickl-blau);
  padding-top: 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.karte h3 {
  margin: 0;
  font-size: 19px; font-weight: 600;
  color: var(--nickl-blau);
}
.karte p {
  margin: 0;
  font-size: 15px; line-height: 1.7;
  color: var(--nickl-grau-warm);
  text-wrap: pretty;
}
.link-messing { font-weight: 600; border-bottom: 1px solid var(--nickl-messing); }

/* --- Vermietung ---------------------------------------------------------- */
.vermietung { background: var(--nickl-creme); }
.vermietung h2 { margin-bottom: 20px; }
.angebote {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.angebot {
  display: flex; flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--nickl-linie);
  color: var(--nickl-anthrazit);
  transition: border-color 120ms linear, box-shadow 120ms linear;
}
.angebot:hover, .angebot:focus-visible {
  border-color: var(--nickl-messing);
  box-shadow: 0 4px 16px rgba(22, 50, 79, 0.10);
  color: var(--nickl-anthrazit);
}
.angebot__bild {
  position: relative; display: block;
  aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--nickl-foto-grund);
}
.angebot__foto {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.angebot__badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--nickl-blau); color: var(--nickl-creme);
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  padding: 5px 10px;
}
.angebot__text {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 16px 18px;
}
.angebot__titel {
  font-size: 16px; font-weight: 600; line-height: 1.35;
  color: var(--nickl-blau);
}
.angebot__adresse { font-size: 13px; color: var(--nickl-grau); }
.angebot__daten {
  display: flex; gap: 14px; margin-top: 4px;
  font-size: 13px; color: var(--nickl-grau-warm);
}
.angebot__miete { font-weight: 600; color: var(--nickl-anthrazit); }
.hinweis-klein {
  margin: 28px 0 0;
  font-size: 13px; color: var(--nickl-grau);
}

/* --- Kontakt ------------------------------------------------------------- */
.kontakt .inhalt {
  display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px;
}
@media (max-width: 820px) {
  .kontakt .inhalt { grid-template-columns: 1fr; gap: 40px; }
}
.kontakt__spalte { display: flex; flex-direction: column; gap: 28px; }
.adresse {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 15px; line-height: 1.7; color: var(--nickl-grau-warm);
}
.adresse strong { font-weight: 600; color: var(--nickl-blau); }
.mail-link {
  font-size: 15px; font-weight: 600;
  border-bottom: 1px solid var(--nickl-messing);
  align-self: flex-start;
}

.formular { display: flex; flex-direction: column; gap: 18px; }
.feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 520px) {
  .feldpaar { grid-template-columns: 1fr; }
}
.feld {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--nickl-grau-warm);
}
.feld input, .feld textarea {
  font-family: Archivo, Arial, Helvetica, sans-serif;
  font-size: 15px; font-weight: 400; letter-spacing: normal;
  padding: 12px 14px;
  border: 1px solid var(--nickl-linie-feld);
  background: #FFFFFF;
  color: var(--nickl-anthrazit);
  border-radius: 0;
}
.feld input:focus, .feld textarea:focus {
  outline: 2px solid var(--nickl-blau);
  outline-offset: -1px;
}
.feld textarea { resize: vertical; }
.formular button {
  align-self: flex-start;
  background: var(--nickl-blau); color: var(--nickl-creme);
  border: none; border-radius: 0;
  padding: 14px 32px;
  font-family: Archivo, Arial, Helvetica, sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: 0.04em;
  cursor: pointer;
}
.formular button:hover:not(:disabled) { background: var(--nickl-messing); }
.formular button:disabled { opacity: 0.55; cursor: default; }
.datenschutz-hinweis {
  margin: 0;
  font-size: 12px; line-height: 1.6; color: var(--nickl-grau);
}
.meldung {
  background: var(--nickl-creme);
  border-left: 3px solid var(--nickl-messing);
  padding: 18px 22px;
  font-size: 15px; font-weight: 500; color: var(--nickl-blau);
}
.meldung--fehler { border-left-color: #A3402E; }
/* Honeypot — für Menschen unsichtbar, für Bots ein Feld zum Ausfüllen */
.falle {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

/* --- Footer / Impressum -------------------------------------------------- */
.fuss { background: var(--nickl-blau); color: var(--nickl-blau-text); }
.fuss .inhalt {
  padding-top: 72px; padding-bottom: 56px;
  display: flex; flex-direction: column; gap: 40px;
}
.fuss a { color: var(--nickl-blau-text); border-bottom: 1px solid var(--nickl-blau-linie); }
.fuss a:hover { color: var(--nickl-messing); border-bottom-color: var(--nickl-messing); }
.fuss .marke__name { font-size: 15px; color: var(--nickl-creme); }
.fuss .marke__zusatz { font-size: 8px; color: var(--nickl-hellblau); }

.impressum { scroll-margin-top: 90px; }
.impressum h2 {
  margin: 0 0 24px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.3em;
  color: var(--nickl-hellblau);
}
.impressum__vorspann {
  margin: 0 0 28px;
  font-size: 13px; line-height: 1.7; max-width: 720px;
}
.impressum__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  font-size: 13px; line-height: 1.7;
}
.impressum__spalte { display: flex; flex-direction: column; gap: 16px; }
.impressum__ueberschrift {
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em;
  color: var(--nickl-hellblau);
}
.gesellschaft { display: flex; flex-direction: column; gap: 4px; }
.gesellschaft__name { font-weight: 600; color: var(--nickl-creme); }
.gesellschaft__name .reg { font-weight: 400; color: var(--nickl-blau-text); }
.fuss__leiste {
  border-top: 1px solid var(--nickl-blau-linie);
  padding-top: 24px;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-size: 12px; color: var(--nickl-hellblau);
}

/* --- Unterseiten (Datenschutz) ------------------------------------------ */
.textseite .inhalt { padding-top: 72px; padding-bottom: 96px; max-width: 760px; }
.textseite h1 {
  margin: 0 0 32px;
  font-size: clamp(30px, 4vw, 40px); font-weight: 700; line-height: 1.15;
  color: var(--nickl-blau);
}
.textseite h2 {
  margin: 40px 0 12px;
  font-size: 20px; font-weight: 600; color: var(--nickl-blau);
}
.textseite p, .textseite li {
  font-size: 15px; line-height: 1.75; color: var(--nickl-grau-warm);
}
.textseite ul { padding-left: 20px; }
.textseite a { border-bottom: 1px solid var(--nickl-messing); }
.hinweis-box {
  background: var(--nickl-creme);
  border-left: 3px solid var(--nickl-messing);
  padding: 18px 22px;
  font-size: 14px; line-height: 1.7; color: var(--nickl-blau);
}

/* --- Druck --------------------------------------------------------------- */
@media print {
  .kopf, .hero__aktionen, .formular { display: none; }
  body { background: #FFFFFF; }
  .fuss { background: #FFFFFF; color: #23252A; }
  .fuss .gesellschaft__name, .fuss .marke__name { color: #16324F; }
}