/* ==========================================================================
   immocheck.it — Erscheinungsbild
   Hausschrift Open Sans, selbst ausgeliefert (keine Verbindung zu Google,
   damit die Datenschutzerklärung keinen Drittanbieter offenlegen muss).
   ========================================================================== */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/open-sans-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: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/open-sans-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 {
  --ink: #1A1B19; --enzian: #1B4B73; --laerche: #9C6210; --latsche: #2C6349;
  --rost: #8E3B23; --bg: #FFFFFF; --stein: #E9E7E0; --rand: #D6D3C9; --grau: #6B6A64;
  --schrift: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tempo: 280ms;
  --kurve: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font: 400 16px/1.65 var(--schrift);
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; display: flex; flex-direction: column; }

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

.zum-inhalt { position: absolute; left: -9999px; background: var(--ink); color: #fff; padding: 12px 16px; z-index: 100; }
.zum-inhalt:focus { left: 16px; top: 8px; }

/* ── Ladebalken für den Seitenwechsel ──────────────────────────────────── */
.ladebalken {
  position: fixed; inset: 0 auto auto 0; height: 2px; width: 0;
  background: var(--enzian); z-index: 90; opacity: 0;
  transition: width 280ms var(--kurve), opacity 200ms;
}
.ladebalken.laeuft { opacity: 1; }

/* ── Seitenwechsel ─────────────────────────────────────────────────────── */
#view { opacity: 1; transform: none; transition: opacity 200ms var(--kurve), transform 200ms var(--kurve); }
#view.geht  { opacity: 0; transform: translateY(-6px); }
#view.kommt { opacity: 0; transform: translateY(8px); }

/* ── Platzhalterseite ─────────────────────────────────────────────────── */
.mitte { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px 56px; }
.mitte-innen { width: 100%; max-width: 700px; text-align: center; }

.marke { display: block; width: 100%; max-width: 330px; height: auto; margin: 0 auto 40px; }

h1 {
  font-size: clamp(24px, 4vw, 33px); font-weight: 600; line-height: 1.3;
  letter-spacing: -.021em; margin: 0 0 18px; text-wrap: balance;
}
h1 .akzent { color: var(--enzian); }

.vorsatz { color: var(--grau); max-width: 44ch; margin: 0 auto 34px; font-size: 16.5px; }

/* Die vier Säulen — sagt in einer Zeile, worum es geht */
.saeulen {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 0 0 38px;
}
.saeulen li {
  list-style: none; border: 1px solid var(--rand); border-radius: 100px;
  padding: 7px 16px; font-size: 14px; font-weight: 600; color: var(--ink);
  background: var(--bg); transition: border-color 180ms var(--kurve), color 180ms var(--kurve);
}
.saeulen li:hover { border-color: var(--enzian); color: var(--enzian); }

.trenner { width: 44px; height: 2px; background: var(--rand); margin: 0 auto 30px; border: 0; }

.kontakt { color: var(--grau); font-size: 15.5px; }
.kontakt a {
  color: var(--ink); font-weight: 600; text-decoration: none;
  border-bottom: 2px solid var(--enzian); padding-bottom: 2px;
  transition: color 180ms var(--kurve), border-color 180ms var(--kurve);
}
.kontakt a:hover { color: var(--enzian); border-color: var(--ink); }
.kontakt .zeile { margin-top: 10px; display: block; font-size: 17px; }

@media (max-width: 560px) {
  .marke { max-width: 260px; margin-bottom: 32px; }
  .saeulen li { font-size: 13px; padding: 6px 13px; }
}

/* ── Textseiten ────────────────────────────────────────────────────────── */
.papier { max-width: 760px; margin: 0 auto; padding: 56px 24px 72px; width: 100%; }
.papier .marke-klein { display: block; height: 34px; width: auto; margin-bottom: 44px; }
.papier h1 { font-size: clamp(26px, 4vw, 32px); text-align: left; margin-bottom: 8px; }
.papier .stand { color: var(--grau); font-size: 14px; margin-bottom: 36px; }
.papier p, .papier li { color: #2c2d2a; }
.papier ul { padding-left: 20px; margin: 0 0 16px; }
.papier li { margin-bottom: 6px; }
.papier .block {
  border: 1px solid var(--rand); border-radius: 2px; padding: 20px 22px; margin: 0 0 28px;
}
.papier .block p:last-child { margin-bottom: 0; }
.papier dl { margin: 0 0 20px; display: grid; grid-template-columns: 1fr; gap: 2px 20px; }
@media (min-width: 620px) { .papier dl { grid-template-columns: 190px 1fr; } }
.papier dt { color: var(--grau); font-size: 14px; }
.papier dd { margin: 0 0 10px; }
.papier .hinweis {
  border-left: 3px solid var(--laerche); background: #fdfbf7;
  padding: 14px 18px; margin: 28px 0; font-size: 15px; color: #4a4841;
}

/* ── Fußzeile ──────────────────────────────────────────────────────────── */
.fuss { border-top: 1px solid var(--stein); padding: 20px 24px; color: var(--grau); font-size: 14px; }
.fuss-innen { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; }
.fuss nav { display: flex; gap: 20px; }
.fuss a { color: var(--grau); text-decoration: none; }
.fuss a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   Logo-Animation
   Der Rahmen des Sprossenfensters wird gezeichnet, die Sprosse fährt herunter,
   der Flügel klappt auf, dann erscheint die Wortmarke. Reihenfolge und Tempo
   sind bewusst ruhig — das Logo soll sich setzen, nicht auffallen.
   ========================================================================== */
.marke-svg .sig-rahmen  { stroke-dasharray: 108; stroke-dashoffset: 108; animation: zeichnen 440ms var(--kurve) 60ms forwards; }
.marke-svg .sig-sprosse { stroke-dasharray: 27;  stroke-dashoffset: 27;  animation: zeichnen 200ms var(--kurve) 340ms forwards; }
.marke-svg .sig-fluegel { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); animation: aufklappen 260ms var(--kurve) 450ms forwards; }
.marke-svg .wort-immo   { opacity: 0; animation: auftauchen 280ms var(--kurve) 560ms forwards; }
.marke-svg .wort-check  { opacity: 0; animation: auftauchen 280ms var(--kurve) 640ms forwards; }
.marke-svg .feld        { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.82); animation: feld-setzen 280ms var(--kurve) 730ms forwards; }
.marke-svg .feld-text   { opacity: 0; animation: auftauchen 220ms var(--kurve) 810ms forwards; }
.marke-svg .tagline     { opacity: 0; animation: auftauchen 300ms var(--kurve) 860ms forwards; }

@keyframes zeichnen    { to { stroke-dashoffset: 0; } }
@keyframes aufklappen  { to { transform: scaleX(1); } }
@keyframes auftauchen  { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes feld-setzen { to { opacity: 1; transform: scale(1); } }

/* Inhalt darunter folgt dicht auf */
.einblenden { opacity: 0; animation: auftauchen 380ms var(--kurve) forwards; }
.v1 { animation-delay: 900ms; }
.v2 { animation-delay: 990ms; }
.v3 { animation-delay: 1070ms; }
.v4 { animation-delay: 1150ms; }

/* Wer Bewegung reduziert haben will, bekommt sofort das fertige Bild. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marke-svg *, .einblenden, #view {
    animation: none !important; transition: none !important;
    opacity: 1 !important; transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  .ladebalken { display: none; }
}

/* ── Einwilligung ──────────────────────────────────────────────────────── */
.einwilligung {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: #fff; border-top: 1px solid var(--rand);
  box-shadow: 0 -2px 16px rgba(26, 27, 25, .06);
  transform: translateY(100%); transition: transform 320ms var(--kurve);
}
.einwilligung.sichtbar { transform: none; }
.einwilligung-innen {
  max-width: 1120px; margin: 0 auto; padding: 16px 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; justify-content: space-between;
}
.einwilligung p { margin: 0; font-size: 14px; color: var(--grau); max-width: 68ch; line-height: 1.55; }
.einwilligung-knoepfe { display: flex; gap: 10px; flex-shrink: 0; }
.einwilligung button {
  font: 600 14px/1 "Open Sans", system-ui, sans-serif; padding: 11px 20px;
  border-radius: 6px; cursor: pointer; border: 1px solid var(--rand); white-space: nowrap;
}
.einwilligung .knopf-schlicht { background: #fff; color: var(--ink); }
.einwilligung .knopf-schlicht:hover { border-color: var(--ink); }
.einwilligung .knopf-voll { background: var(--ink); color: #fff; border-color: var(--ink); }
.einwilligung .knopf-voll:hover { background: #000; }
@media (max-width: 620px) {
  .einwilligung-innen { padding: 14px 16px; }
  .einwilligung-knoepfe { width: 100%; }
  .einwilligung button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .einwilligung { transition: none; } }

/* ── Fließtext-Abschnitt (SEO und Erklärung) ───────────────────────────── */
.lesetext { border-top: 1px solid var(--stein); background: #FCFBF9; }
.lesetext-innen { max-width: 760px; margin: 0 auto; padding: 56px 24px 64px; }
.lesetext h2 { font-size: clamp(21px, 3vw, 26px); font-weight: 600; letter-spacing: -.02em; margin: 0 0 18px; }
.lesetext h3 { font-size: 17px; font-weight: 600; margin: 34px 0 10px; }
.lesetext p  { margin: 0 0 16px; color: #2c2d2a; }
.lesetext a  { color: var(--enzian); }
.lesetext strong { font-weight: 600; }
.lesetext em { font-style: italic; color: var(--grau); }

.saeulen-liste { margin: 26px 0 8px; }
.saeulen-liste dt {
  font-weight: 600; margin-top: 20px; padding-left: 14px;
  border-left: 3px solid var(--enzian);
}
.saeulen-liste dd { margin: 6px 0 0 17px; color: #4a4b47; }

@media (max-width: 560px) { .lesetext-innen { padding: 40px 16px 48px; } }