/* REM_SIGNATURE_V1 — Kataster/Grundbuch-Signatur.
   Konzept: REM macht aus realen Grundstuecken digitale Anteile. Die Seite traegt
   deshalb eine Vermessungs-Aesthetik — Koordinatengitter, sich zeichnende
   Parzellen-Grenze, Monospace-Vermessungsdaten. Physisch (Grundbuch) trifft
   digital (Token). Zusaetzlich zu style/rem-fx/rem-content geladen. */

:root{
  --mono:'Space Mono',ui-monospace,'SF Mono',Menlo,'DejaVu Sans Mono',monospace;
  --cad:rgba(176,213,40,.55);      /* Kataster-Linie */
  --cad-soft:rgba(176,213,40,.10); /* Gitter */
  /* Marken-Variablen absichern: index.php nutzt --limette/--rand, die Unterseiten
     --accent/--line. rem-signature laedt zuletzt -> definiert beide Namen einheitlich,
     damit die Bausteine (Visitenkarte etc.) ueberall greifen. Werte identisch. */
  --accent:#B0D528; --accent-dark:#8EB01E;
  --line:#26282B; --bg-card:#121315;
  --text-soft:#9BA0A6; --text-light:#6A7076;
}

/* Monospace-Vermessungslabel — die durchgehende Signatur-Typo fuer Daten */
.cad-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cad);font-weight:400;white-space:nowrap}

/* Kohaerenz: Eyebrows/Labels tragen die Mono-Signatur-Typo (Survey-Daten-Sprache).
   Laedt nach style.css -> gewinnt bei gleicher Spezifitaet, kein !important noetig. */
.eyebrow,.marke-oben,.oberzeile,.rem-taglabel,.rem-step-sub,.obj-anzahl,
.ref-anzahl,.pj-status,.pj-quellen-t{font-family:var(--mono)}
.eyebrow{letter-spacing:.14em;text-transform:uppercase;font-size:11.5px}

/* Subseiten-Kopf: dezentes Kataster-Gitter als Signatur-Echo */
.page-header{position:relative}
.page-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(var(--cad-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--cad-soft) 1px,transparent 1px);
  background-size:74px 74px;opacity:.6;
  -webkit-mask-image:radial-gradient(120% 130% at 82% 20%,#000,transparent 68%);
          mask-image:radial-gradient(120% 130% at 82% 20%,#000,transparent 68%)}
.page-header .cad-coord{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cad);display:block;margin-bottom:14px}

/* ---------- Hero-Katasterlayer ---------- */
.titel .schleier{z-index:1}
.cad-grid{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background-image:
    linear-gradient(var(--cad-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--cad-soft) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 34%,#000 72%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0%,transparent 34%,#000 72%,#000 100%);
  animation:cad-fade 1.4s ease .25s forwards}
@keyframes cad-fade{to{opacity:1}}

/* Sich zeichnende Parzelle ueber dem Gebaeude (rechte Bildhaelfte) */
.cad-plot{position:absolute;top:0;right:0;bottom:0;width:56%;z-index:2;
  pointer-events:none;overflow:visible}
.cad-plot polygon{fill:rgba(176,213,40,.04);stroke:var(--cad);stroke-width:1.4;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;animation:cad-draw 2.1s cubic-bezier(.7,0,.3,1) .5s forwards}
@keyframes cad-draw{to{stroke-dashoffset:0}}
.cad-plot .node{fill:#0A0B0C;stroke:var(--cad);stroke-width:1.4;vector-effect:non-scaling-stroke;
  opacity:0;animation:cad-node .4s ease forwards}
.cad-plot .node:nth-of-type(1){animation-delay:1.6s}
.cad-plot .node:nth-of-type(2){animation-delay:1.9s}
.cad-plot .node:nth-of-type(3){animation-delay:2.2s}
.cad-plot .node:nth-of-type(4){animation-delay:2.5s}
.cad-plot .node:nth-of-type(5){animation-delay:2.8s}
@keyframes cad-node{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
.cad-plot text{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  fill:var(--cad);text-transform:uppercase;opacity:0;animation:cad-fade .6s ease 2.4s forwards}

/* Koordinaten-Ecken */
.cad-corner{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;
  opacity:0;animation:cad-fade .8s ease 1.1s forwards}
.cad-corner::before{content:"";width:9px;height:9px;border:1px solid var(--cad)}
.cad-corner.tl{top:104px;left:28px}
.cad-corner.tr{top:104px;right:28px}
.cad-corner.tr::before{order:2}
.cad-corner.br{bottom:96px;right:28px}
.cad-corner.br::before{order:2}
@media(max-width:1000px){.cad-corner.tr,.cad-corner.br{display:none}
  .cad-plot{width:70%;opacity:.5}}

/* Daten-Ticker (Boersenband) am unteren Rand */
.cad-ticker{position:absolute;left:0;right:0;bottom:0;z-index:3;height:38px;
  display:flex;align-items:center;overflow:hidden;
  border-top:1px solid var(--rand,#26282B);background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);opacity:0;animation:cad-fade 1s ease 1.5s forwards}
.cad-ticker .run{display:inline-flex;gap:0;white-space:nowrap;
  animation:cad-scroll 42s linear infinite;will-change:transform}
.cad-ticker .run span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--matt,#9BA0A6);padding:0 26px;
  display:inline-flex;align-items:center;gap:26px}
.cad-ticker .run span b{color:var(--cad)}
.cad-ticker .run span::after{content:"◆";color:rgba(176,213,40,.4);font-size:8px}
@keyframes cad-scroll{to{transform:translateX(-50%)}}

/* Scroll-Indikator ueber das Ticker-Band heben */
.titel .fx-cue{bottom:58px}
@media(max-width:1000px){.titel .fx-cue{bottom:54px}}

/* Mono-Kicker ueber der Headline */
.cad-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--matt,#9BA0A6);margin-bottom:22px;
  display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;
  opacity:0;animation:fx-rise 1s cubic-bezier(.16,.84,.44,1) .12s forwards}
.cad-kicker b{color:var(--cad);font-weight:400}
.cad-kicker .ln{width:30px;height:1px;background:var(--cad)}

/* ---------- Kataster-Datenblatt (fuellt Zwei-Spalter sinnvoll) ---------- */
.cad-sheet{margin-top:40px;border-top:1px solid var(--line);max-width:400px}
.cad-sheet div{display:flex;justify-content:space-between;gap:16px;padding:14px 2px;
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;letter-spacing:.02em;
  transition:border-color .25s}
.cad-sheet div:hover{border-bottom-color:var(--accent)}
.cad-sheet span{color:var(--text-light);text-transform:uppercase;letter-spacing:.12em}
.cad-sheet b{color:var(--accent);font-weight:400}

/* ---------- CTA-Sektionen: Kataster-Gitter + zentrierter Kicker ---------- */
.abschluss,.contact-cta{position:relative;overflow:hidden}
.abschluss::before,.contact-cta::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--cad-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--cad-soft) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(78% 92% at 50% 42%,#000,transparent 70%);
          mask-image:radial-gradient(78% 92% at 50% 42%,#000,transparent 70%)}
.abschluss>*,.contact-cta>*{position:relative;z-index:1}
.cad-kicker.mitte{justify-content:center}

/* ---------- Signatur-Visitenkarte ("Amtskarte") ---------- */
.rem-vcards{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:52px}
@media(max-width:900px){.rem-vcards{grid-template-columns:1fr}}

.rem-vcard{position:relative;display:grid;grid-template-columns:.82fr 1.18fr;
  background:linear-gradient(180deg,#131417,#0d0e10);border:1px solid var(--line);
  border-radius:6px;overflow:hidden;min-height:334px}
/* Sicherheits-Guilloché ganz dezent */
.rem-vcard>.vc-guill{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6;
  background:repeating-linear-gradient(115deg,transparent 0 13px,rgba(176,213,40,.022) 13px 14px)}
/* Registermarken */
.rem-vcard .reg{position:absolute;width:14px;height:14px;z-index:4;pointer-events:none;
  border-color:var(--cad);border-style:solid;transition:width .3s,height .3s,border-color .3s}
.rem-vcard .reg.a{top:13px;left:13px;border-width:1px 0 0 1px}
.rem-vcard .reg.b{top:13px;right:13px;border-width:1px 1px 0 0}
.rem-vcard .reg.c{bottom:13px;left:13px;border-width:0 0 1px 1px}
.rem-vcard .reg.d{bottom:13px;right:13px;border-width:0 1px 1px 0}
.rem-vcard:hover .reg{width:20px;height:20px;border-color:var(--accent)}

/* Foto */
.rem-vcard .vc-foto{position:relative;overflow:hidden;background:#0f1113}
.rem-vcard .vc-foto img{width:100%;height:100%;object-fit:cover;object-position:top center;
  filter:grayscale(.5) saturate(.92) contrast(1.02) brightness(.98);transition:filter .55s,transform .6s}
.rem-vcard:hover .vc-foto img{filter:grayscale(0) saturate(1.05) contrast(1.02);transform:scale(1.045)}
.rem-vcard .vc-foto::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(176,213,40,.12),rgba(10,11,12,.42));
  mix-blend-mode:multiply;opacity:.6;transition:opacity .55s}
.rem-vcard:hover .vc-foto::after{opacity:0}
.rem-vcard .vc-foto .scan{content:"";position:absolute;left:0;right:0;height:36%;top:-42%;z-index:2;
  pointer-events:none;background:linear-gradient(180deg,transparent,rgba(176,213,40,.22),transparent);opacity:0}
.rem-vcard:hover .vc-foto .scan{animation:vc-scan 1.1s ease forwards}
@keyframes vc-scan{0%{top:-42%;opacity:1}100%{top:112%;opacity:0}}

/* Textseite */
.rem-vcard .vc-body{position:relative;z-index:3;padding:24px 26px 24px;display:flex;flex-direction:column}
.rem-vcard .vc-kopf{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-light);display:flex;justify-content:space-between;gap:10px;
  padding-bottom:15px;border-bottom:1px solid var(--line)}
.rem-vcard .vc-kopf b{color:var(--cad);font-weight:400}
.rem-vcard .vc-rolle{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:22px 0 7px}
.rem-vcard .vc-name{font-size:26px;font-weight:500;letter-spacing:-.6px;color:#fff;line-height:1.04}
.rem-vcard .vc-adr{font-family:var(--mono);font-size:11px;color:var(--text-soft);margin-top:14px;line-height:1.75}
.rem-vcard .vc-akt{display:flex;gap:9px;margin-top:auto;padding-top:22px;flex-wrap:wrap}
.rem-vcard .vc-akt a{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-family:var(--mono);
  letter-spacing:.03em;padding:9px 12px;border:1px solid var(--line);border-radius:3px;color:#D3D7DB;
  background:rgba(255,255,255,.015);transition:border-color .22s,color .22s,background .22s,transform .22s}
.rem-vcard .vc-akt a svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6}
.rem-vcard .vc-akt a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.rem-vcard .vc-akt a.stark{background:var(--accent);color:#0A0B0C;border-color:var(--accent)}
.rem-vcard .vc-akt a.stark:hover{background:var(--accent-dark);color:#0A0B0C;
  box-shadow:0 8px 22px -8px rgba(176,213,40,.55)}

@media(max-width:560px){
  .rem-vcard{grid-template-columns:1fr}
  .rem-vcard .vc-foto{aspect-ratio:4/3}
}

@media(prefers-reduced-motion:reduce){
  .cad-grid,.cad-plot polygon,.cad-plot .node,.cad-plot text,.cad-corner,
  .cad-ticker,.cad-kicker{animation:none!important;opacity:1!important;stroke-dashoffset:0!important}
  .cad-ticker .run{animation:none!important}
  .rem-vcard .vc-foto .scan{animation:none!important}
}