/* ============================================================
   PP_Design — Peters + Peters Markenanwendung auf das Dashboard
   ------------------------------------------------------------
   Quelle: PP_Design Design-System (Agenten/PP_Design auf dem Drive).
   Palette: Hafen-Navy, warmes Brass/Gold, Ivory-Papier, Stone-Neutrals.
   Schriften: Cormorant Garamond (Display) + Hanken Grotesk (UI).
   Diese Datei wird NACH styles.css geladen und überschreibt nur
   Variablen + wenige Marken-Akzente. Das Layout bleibt unverändert.

   Hinweis: Farben/Schriften/Logo des Design-Systems sind laut PP_Design
   eine fundierte Rekonstruktion der ppimmo.de-Marke — bei Vorlage der
   offiziellen Assets hier final justieren.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* ---- Marken-Tokens (Auszug aus PP_Design) ---- */
  --pp-navy-900: #0E1A28;
  --pp-navy-800: #16263A;
  --pp-navy-700: #1F3550;
  --pp-brass-600: #A37F46;
  --pp-brass-500: #B68A4E;
  --pp-brass-300: #DBBE8C;
  --pp-ivory:    #F7F4EE;
  --pp-stone-50: #F4F2EF;
  --pp-stone-200:#DEDAD2;
  --pp-stone-500:#7C766B;
  --pp-stone-600:#5A554D;

  --font-display: 'Cormorant Garamond', 'Hoefler Text', Georgia, serif;

  /* ---- Mapping auf die Dashboard-Variablen ---- */
  --color-primary:          var(--pp-navy-800);
  --color-primary-contrast: #FCFAF6;
  --color-accent:           var(--pp-brass-600);

  --color-bg:            var(--pp-ivory);
  --color-surface:       #FFFFFF;
  --color-surface-alt:   var(--pp-stone-50);
  --color-border:        var(--pp-stone-200);

  --color-text:          var(--pp-navy-800);
  --color-text-muted:    var(--pp-stone-600);

  --font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(22,38,58,.06), 0 8px 24px rgba(22,38,58,.06);
  --shadow-hover: 0 12px 32px rgba(22,38,58,.12);

  /* ---- Ampel auf die semantischen Marken-Töne ---- */
  --ampel-gruen-bg:  #E7F0E9;  --ampel-gruen-fg:  #3F7D52;
  --ampel-orange-bg: #F8EFD9;  --ampel-orange-fg: #B8862A;
  --ampel-rot-bg:    #F6E5E4;  --ampel-rot-fg:    #B23A36;
  --flag-bg:         #F6E5E4;  --flag-fg:         #B23A36;
}

/* ---- Marken-Akzente (über die Variablen hinaus) ---- */

/* Brass-Haarlinie unter der Topbar — Markendevice */
.topbar { border-bottom: 2px solid var(--color-accent); }

/* ---- Offizielle Wortmarke PETERS + PETERS ---- */
:root { --pp-logo-orange: #E9A23C; }
.pplogo { display: flex; align-items: center; gap: .42em; }
.pplogo__w {
  font-family: 'Futura', 'Century Gothic', 'Hanken Grotesk', sans-serif;
  font-weight: 600; letter-spacing: .18em; font-size: 1.16rem; color: #FCFAF6;
}
.pplogo__plus {
  display: inline-grid; place-items: center;
  width: 1.05em; height: 1.5em; border-radius: 2px; background: var(--pp-logo-orange);
}
.pplogo__plus span {
  color: #fff; font-weight: 400; font-size: 1.1em; line-height: 1;
  font-family: 'Futura', 'Hanken Grotesk', sans-serif; transform: translateY(-1px);
}
.brand__sep { width: 1px; height: 30px; background: rgba(255,255,255,.18); margin: 0 .25rem; }
.brand__text strong { font-family: var(--font); font-weight: 600; font-size: .98rem; letter-spacing: 0; }
.brand__text small { opacity: .75; }

/* Topbar-Navigation */
.topbar__nav { display: flex; gap: 1.1rem; }
.topbar__nav a { color: rgba(255,255,255,.82); font-size: .86rem; font-weight: 500; }
.topbar__nav a:hover { color: var(--pp-brass-300); text-decoration: none; }

/* Footer-Claim */
.footer__inner em { color: var(--color-accent); font-style: italic; font-family: var(--font-display); }

/* Überschriften in der Display-Serif (Cormorant) */
h1 { font-family: var(--font-display); font-weight: 600; font-size: 1.95rem; letter-spacing: 0; }
.card__nr { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }

/* Statistik-Zahlen elegant in der Serif */
.stat__num { font-family: var(--font-display); font-weight: 600; }

/* Eyebrow-typische Spaltenköpfe mit etwas mehr Laufweite */
.shortlist thead th { letter-spacing: .08em; }

/* Disclaimer im warmen Marken-Ton statt Standard-Gelb */
.disclaimer { background: #F8EFD9; border-bottom-color: #EAD9AE; color: #7A5A12; }
.disclaimer__icon { background: var(--pp-brass-600); }

::selection { background: #EBD9B8; color: var(--pp-navy-900); }