/* =========================================================================
   Immobilienstudio Blasig – Design-System
   Tokens, Reset, Typografie, Layout-Primitives, Buttons, Formulare
   ========================================================================= */

/* --- Tokens ------------------------------------------------------------ */
:root {
  /* Flaechen – warmes Bone/Stone statt kaltem Grau */
  --bone:        #faf9f7;
  --bone-deep:   #f2f0ec;
  --surface:     #ffffff;
  --stone-100:   #e9e6e1;
  --stone-200:   #d8d4cd;
  --stone-300:   #b9b4ab;
  --stone-500:   #7d786f;
  --stone-600:   #5f5b54;

  /* Schrift – kein reines Schwarz */
  --ink:         #16181c;
  --ink-soft:    #3d4148;
  --ink-muted:   #6b6f77;

  /* Ein einziger Akzent: das entsaettigte Blasig-Blau aus dem Logo */
  --accent:      #1e3a6e;
  --accent-deep: #152a51;
  --accent-soft: #edf1f8;
  --accent-line: #c9d4e8;

  /* Status */
  --status-neu:      #0f6d43;
  --status-neu-bg:   #e4f2ea;
  --status-res:      #8a5a10;
  --status-res-bg:   #fbf0dd;
  --status-weg:      #6b6f77;
  --status-weg-bg:   #eeece9;

  /* Radien & Schatten – Schatten in den Hintergrundton getoent */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --shadow-sm: 0 1px 2px rgba(30, 28, 24, .05);
  --shadow-md: 0 10px 30px -18px rgba(30, 28, 24, .28);
  --shadow-lg: 0 28px 60px -32px rgba(30, 28, 24, .34);

  /* Raster */
  --wrap: 1360px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  /* Bewegung */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: .18s var(--ease);
  --t-base: .32s var(--ease);
  --t-slow: .6s var(--ease);

  /* Ueberblendung der Galerie. Symmetrische Kurve – sie startet und endet
     langsam, das liest sich weicher als die schnelle Standardkurve.
     Die Dauer liest js/objekt.js aus dieser Variable aus, damit CSS und
     Timer nicht auseinanderlaufen koennen. Wert in Millisekunden angeben. */
  --gallery-fade: 900ms;
  --ease-blend: cubic-bezier(0.42, 0, 0.35, 1);

  /* Hoehen */
  --header-h: 76px;
}

@media (max-width: 767px) {
  :root { --header-h: 62px; }
}

/* --- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Muss vor allen Komponenten stehen: sonst ueberstimmt ein display-Wert
   im Komponenten-CSS das hidden-Attribut und das Element bleibt sichtbar. */
[hidden] { display: none !important; }

html {
  /* Scrollbar aus dem Layout nehmen – sonst wird die fixe Nav rechts
     abgeschnitten (siehe web-design-mastery §1). */
  scrollbar-width: thin;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}
html::-webkit-scrollbar { width: 0; background: transparent; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bone);
  color: var(--ink);
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, dl, dd { margin: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--accent); color: #fff; }

.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-link {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--accent); color: #fff;
  padding: .7rem 1.4rem; border-radius: 0 0 var(--r-md) var(--r-md);
  transition: transform var(--t-fast);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --- Typografie -------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  letter-spacing: -.015em;
  text-wrap: balance;
}

h1, h2, .display {
  font-family: 'Instrument Serif', Georgia, serif;
  line-height: 1.04;
  letter-spacing: -.02em;
}

h1, .h1 { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem); }
h2, .h2 { font-size: clamp(1.9rem, 1.35rem + 2.3vw, 3.2rem); }

h3, .h3 {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.12rem, 1.02rem + .4vw, 1.4rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
}

h4, .h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem; font-weight: 600; line-height: 1.4;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.06rem, 1rem + .35vw, 1.28rem);
  line-height: 1.62;
  color: var(--ink-soft);
}

.prose { max-width: 65ch; color: var(--ink-soft); }
.prose p + p { margin-top: 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--accent-line);
  transition: text-decoration-color var(--t-fast);
}
.prose a:hover { text-decoration-color: var(--accent); }
.prose ul { margin: 0 0 1.1em; }
.prose ul li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: .45rem;
}
.prose ul li::before {
  content: '';
  position: absolute; left: .1rem; top: .72em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-line);
}

/* Kleines Versalien-Label ueber Abschnitten und Datengruppen */
.eyebrow {
  display: flex; align-items: center; gap: .6rem;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: ''; flex: 0 0 22px; height: 1px; background: currentColor;
}
.eyebrow--plain::before { display: none; }

.muted { color: var(--ink-muted); }

/* Zahlen immer tabellarisch – sonst springen Preise in Listen */
.num, .spec__value, .kpi__value, .price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --- Layout ------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 900px; }
/* Breiter als der Textrahmen – fuer Inhalte, die vom Platz profitieren,
   allen voran die Objektgalerie. */
@media (min-width: 1280px) { .wrap--wide { max-width: 1560px; } }

.section { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--bone { background: var(--bone-deep); }
.section--ink { background: var(--ink); color: var(--bone); }
.section--ink .eyebrow { color: #9db3d8; }
.section--ink .prose { color: #c3c6cb; }

.section__head { max-width: 62ch; margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem); }

.rule { height: 1px; background: var(--stone-100); border: 0; margin: 0; }

/* --- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  font-size: .95rem; font-weight: 600; line-height: 1.3;
  text-align: center;
  /* Lange deutsche CTAs muessen umbrechen duerfen (§4) */
  white-space: normal;
  max-width: 100%;
  border: 1px solid transparent;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-deep); }

.btn--ghost {
  background: transparent; color: var(--ink);
  border-color: var(--stone-200);
}
.btn--ghost:hover { border-color: var(--ink); background: rgba(255,255,255,.6); }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--bone-deep); }

.btn--sm { min-height: 40px; padding: .5rem 1.05rem; font-size: .875rem; }

.btn .ico { flex: 0 0 auto; }

/* Textlink mit wanderndem Pfeil */
.arrow-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .95rem;
  color: var(--accent);
}
.arrow-link .ico { transition: transform var(--t-fast); }
.arrow-link:hover .ico { transform: translateX(4px); }

/* --- Icons ------------------------------------------------------------- */
/* Ein einziger Sprite, Farbe via currentColor, Groesse skaliert mit dem Text */
.ico {
  display: inline-block;
  width: 1.15em; height: 1.15em;
  flex: 0 0 auto;
  vertical-align: -.19em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--lg { width: 1.5em; height: 1.5em; }

/* --- Formulare --------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: .45rem; }
.field__label { font-size: .875rem; font-weight: 600; color: var(--ink); }
.field__hint  { font-size: .8rem; color: var(--ink-muted); }
.field__error {
  font-size: .8rem; color: #a3261f; font-weight: 500;
  display: none;
}
.field.is-invalid .field__error { display: block; }
.field.is-invalid .form-input { border-color: #a3261f; }

.form-input {
  width: 100%;
  min-height: 48px;
  padding: .7rem .95rem;
  background: var(--surface);
  border: 1px solid var(--stone-200);
  border-radius: var(--r-md);
  color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-input::placeholder { color: var(--stone-300); }
.form-input:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea.form-input { min-height: 140px; resize: vertical; }

select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6f77' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 1.15em;
  padding-right: 2.6rem;
}
select.form-input optgroup {
  background: var(--surface);
  color: var(--accent);
  font-weight: 600; font-style: normal;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .78rem;
}
select.form-input optgroup option {
  color: var(--ink); font-weight: 400; text-transform: none;
}

.checkbox {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: .875rem; line-height: 1.5; color: var(--ink-soft);
  cursor: pointer;
}
.checkbox input {
  flex: 0 0 auto;
  width: 20px; height: 20px; margin: .12rem 0 0;
  accent-color: var(--accent);
}

/* Honeypot – fuer Menschen unsichtbar, fuer Bots verlockend */
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* --- Reveal-Animation -------------------------------------------------- */
/* Nur transform + opacity, ausgeloest per IntersectionObserver */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-slow), transform var(--t-slow);
  transition-delay: calc(var(--index, 0) * 70ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}