/* =========================================================
   Prime.Sec GmbH - Stylesheet
   Sicherheitsdienst Hamburg. Navy + Silver + Gold.
   Hamburg skyline + crest + hazard motif. Modern, serious, 2026.
   ========================================================= */

:root {
  --navy:      #15264c;
  --navy-2:    #1b2f5c;
  --navy-deep: #0d1830;
  --navy-line: #2b3c63;

  --silver:    #c6cad2;
  --silver-2:  #9aa1b0;
  --silver-dim:#6f7787;

  --gold:      #c9a24e;
  --gold-br:   #e2c277;
  --gold-deep: #957327;

  --cream:     #f5f3ec;
  --paper:     #ffffff;
  --ink:       #15264c;
  --slate:     #515a6e;
  --line:      #e4e1d6;

  --font: "Montserrat", system-ui, sans-serif;
  --display: "Archivo", system-ui, sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);

  --shadow-lg: 0 30px 70px rgba(8,16,36,0.30);
  --shadow-md: 0 16px 44px rgba(8,16,36,0.14);

  --container: 1200px;
  --r: 6px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { font-family: var(--font); background: var(--paper); color: var(--ink); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
a { color: inherit; text-decoration: none; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }

.skip-link { position: absolute; left: 16px; top: -60px; background: var(--gold); color: var(--navy); padding: 10px 16px; border-radius: var(--r); z-index: 200; font-weight: 700; transition: top 160ms var(--ease-out); }
.skip-link:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Crest + skyline fills ---------- */

/* ---------- Hazard stripe (signature) ---------- */
.hazard { height: 7px; background-image: repeating-linear-gradient(135deg, var(--navy) 0, var(--navy) 12px, var(--silver) 12px, var(--silver) 24px); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; font-family: var(--display); font-weight: 700; font-size: 0.84rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 15px 26px; border-radius: var(--r); border: 1.5px solid transparent; cursor: pointer; transition: transform 140ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease; }
.btn:active { transform: scale(0.97); }
.btn-sm { padding: 11px 18px; font-size: 0.76rem; }
.btn-block { width: 100%; }
.btn-gold { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--gold-br), var(--gold)); color: var(--navy); border-color: var(--gold); }
.btn-gold::after { content: ""; position: absolute; top: 0; left: 0; width: 38%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.6), transparent); transform: translateX(-220%) skewX(-18deg); pointer-events: none; }
.btn-arr { display: inline-block; transition: transform 240ms var(--ease-out); }
.btn-outline-silver { background: rgba(255,255,255,0.04); color: #fff; border-color: rgba(198,202,210,0.5); }
.btn-outline-navy { background: transparent; color: var(--navy); border-color: rgba(21,38,76,0.25); }
@media (hover: hover) and (pointer: fine) {
  .btn-gold:hover { box-shadow: 0 10px 30px rgba(201,162,78,0.34); filter: brightness(1.05); }
  .btn-gold:hover::after { transition: transform 720ms var(--ease-out); transform: translateX(440%) skewX(-18deg); }
  .btn:hover .btn-arr { transform: translateX(4px); }
  .btn-outline-silver:hover { background: #fff; color: var(--navy); border-color: #fff; }
  .btn-outline-navy:hover { border-color: var(--gold); color: var(--gold-deep); }
}

/* ---------- Kicker / heads ---------- */
.kicker { display: inline-flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 18px; }
.kicker::before { content: ""; width: 26px; height: 2px; background: var(--gold); }
.kicker-light { color: var(--gold-br); }
.kicker-seal { width: 22px; height: 27px; display: inline-flex; }
.kicker-seal svg { width: 100%; height: 100%; }
.kicker:has(.kicker-seal)::before { display: none; }

.section { padding-block: 92px; position: relative; }
.section-light { background: var(--cream); }
.section-rule { background: var(--paper); }
.section-dark { background: var(--navy); position: relative; overflow: hidden; }
.sec-head { max-width: 720px; margin-bottom: 50px; }
.sec-head h2 { font-size: clamp(2rem, 5.2vw, 3.1rem); }
.sec-lead { margin-top: 16px; color: var(--slate); font-size: 1.08rem; max-width: 60ch; }
.on-dark { color: #fff; }
.on-dark-sub { color: rgba(231,234,240,0.74); }

/* ---------- Utility + header ---------- */
.utility { background: var(--navy-deep); color: var(--silver); font-size: 0.8rem; }
.utility-inner { display: flex; align-items: center; justify-content: space-between; height: 38px; }
.utility-tag { display: none; font-family: var(--display); font-weight: 600; letter-spacing: 0.04em; color: var(--silver-2); }
.utility-phone { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700;
  padding: 12px 0; margin: -12px 0; }
.utility-phone svg { color: var(--gold); }
@media (hover: hover) and (pointer: fine) { .utility-phone:hover { color: var(--gold-br); } }

.site-header { position: sticky; top: 0; z-index: 100; background: rgba(13,24,48,0.9); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--navy-line); transition: box-shadow 300ms ease, background-color 300ms ease; }
.site-header.scrolled { background: rgba(11,20,40,0.96); box-shadow: 0 12px 34px rgba(6,12,28,0.38); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; padding: 7px 0; margin: -7px 0; }
.brand-crest { width: 38px; height: 47px; flex-shrink: 0; }
.brand-words { display: flex; flex-direction: column; line-height: 1; }
.brand-text { font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: 0.04em; color: #fff; }
.brand-dot { color: var(--gold); }
.brand-light { font-weight: 500; color: var(--silver); }
.brand-sub { font-family: var(--display); font-weight: 600; font-size: 0.56rem; letter-spacing: 0.3em; color: var(--silver-2); margin-top: 3px; }

.nav { display: none; gap: 28px; }
.nav a { font-family: var(--display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--silver); position: relative; padding-block: 8px; transition: color 180ms ease; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--gold); transition: width 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: #fff; } .nav a:hover::after { width: 100%; } }
.header-cta { display: none; }

.nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: transparent; border: 1px solid var(--navy-line); border-radius: var(--r); cursor: pointer; }
.nav-toggle-bar { display: block; width: 20px; height: 2px; margin-inline: auto; background: var(--silver); transition: transform 260ms var(--ease-soft), opacity 200ms ease; }
body.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
body.nav-open .nav-toggle-bar:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-nav { position: fixed; inset: 112px 0 0 0; z-index: 90; background: rgba(13,24,48,0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 28px 24px 48px; display: flex; flex-direction: column; gap: 24px; transform: translateY(-10px); opacity: 0; visibility: hidden; transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s linear 240ms; }
body.nav-open .mobile-nav { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.mobile-nav nav { display: flex; flex-direction: column; }
.mobile-nav nav a { font-family: var(--display); font-weight: 700; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.02em; color: #fff; padding: 14px 0; border-bottom: 1px solid var(--navy-line); }
.mobile-nav-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.mobile-nav-actions .btn { width: 100%; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--navy-deep); overflow: hidden; min-height: 84vh; display: flex; align-items: center; }
.hero-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.85) brightness(0.42) contrast(1.08); }
.hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(13,24,48,0.93) 0%, rgba(13,24,48,0.66) 52%, rgba(13,24,48,0.42) 100%), linear-gradient(180deg, rgba(13,24,48,0.3), rgba(13,24,48,0.82)); }
.hero-glow { position: absolute; inset: 0; z-index: 1; background: radial-gradient(720px 400px at 82% 8%, rgba(201,162,78,0.18), transparent 60%); }
.hero-inner { position: relative; z-index: 2; padding-block: 84px; width: 100%; }
.hero-copy { max-width: 720px; }
.hero .kicker { color: var(--gold-br); }
.hero-title { color: #fff; font-size: clamp(1.95rem, 7.4vw, 5rem); font-weight: 900; letter-spacing: -0.035em; hyphens: auto; overflow-wrap: break-word; }
.hero-title .hl { color: var(--gold); }
.hero-post { display: block; font-size: max(1.15rem, 0.36em); font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; margin-top: 0.45rem; color: var(--gold-br); }
.hero-pre { display: block; font-size: max(1.28rem, 0.42em); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 0.3rem; color: rgba(231,234,240,0.9); }
.hero-sub { margin-top: 22px; font-size: clamp(1.05rem, 2.4vw, 1.25rem); color: rgba(231,234,240,0.8); max-width: 54ch; }
.hero-cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; }
.hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 34px; }
.hero-trust li { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--silver); }
.hero-trust svg { width: 16px; height: 16px; fill: none; stroke: var(--gold); }
.hero-hazard { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; }

/* ---------- Trust-Leiste unter dem Hero ----------
   Derzeit NICHT im Markup verwendet (auf Wunsch entfernt).
   Regeln bleiben, damit sich die Leiste mit einem Handgriff zurueckholen laesst. ---------- */
.trustbar { background: var(--navy-deep); border-bottom: 1px solid var(--navy-line); }
.trustbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; padding-block: 15px; }
.trustbar-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 9px 22px; margin: 0; padding: 0; }
.trustbar-list li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--silver); }
.trustbar-list svg { width: 13px; height: 13px; color: var(--gold); flex-shrink: 0; }
.trustbar-list a { color: inherit; border-bottom: 1px solid transparent; transition: color 160ms ease, border-color 160ms ease; }
.trustbar-orte li { color: var(--silver-2); gap: 0; }
.trustbar-orte li + li::before { content: "\00B7"; margin-right: 22px; color: var(--navy-line); }
@media (hover: hover) and (pointer: fine) { .trustbar-list a:hover { color: #fff; border-color: var(--gold); } }
@media (max-width: 768px) {
  .trustbar-inner { justify-content: flex-start; gap: 9px 18px; padding-block: 13px; }
  .trustbar-list { gap: 8px 16px; }
  .trustbar-list li { font-size: 0.7rem; }
  .trustbar-orte li + li::before { margin-right: 16px; }
}

/* Hero-Karte als statisches Bild - laedt keine Drittanbieter nach.
   Die Ebene behaelt das Seitenverhaeltnis des Bildes und waechst ueber den Hero
   hinaus (wie object-fit: cover). Nur so treffen die Prozentwerte der Leuchtpunkte
   bei jeder Fenstergroesse dieselbe Stelle auf der Karte. */
/* Grundzustand: Ebene deckt genau den Hero, das Bild wird beschnitten.
   Sieht ueberall richtig aus, auch ohne JavaScript. main.js rechnet die Ebene
   danach auf die exakte Bildgroesse um, damit die Leuchtpunkte auf ihren
   Koordinaten sitzen. Frueher stand hier aspect-ratio mit min-width/min-height -
   Safari erfuellt davon nur eine Vorgabe, dann klaffte im Hero eine Luecke. */
.hero-map-layer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none; }
.hero-map-img { display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center;
  filter: brightness(0.31) saturate(1.3) contrast(1.04); }

/* Leuchtende Standortpunkte auf der Hero-Karte - Filterwerte und Takt wie zuvor. */
.map-ping { position: absolute; width: 16px; height: 16px; transform: translate(-50%, -50%); }
.mp-dot { position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--gold-br); border: 2px solid #fff2d4; box-shadow: 0 0 0 3px rgba(201,162,78,0.28), 0 0 16px 3px rgba(226,194,119,0.85), 0 2px 6px rgba(0,0,0,0.5); }
.mp-ring { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2.5px solid var(--gold-br); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .mp-ring { animation: mapping 3.4s var(--ease-out) infinite; animation-delay: var(--d, 0s); }
  .mp-dot { animation: mappingdot 3.4s ease infinite; animation-delay: var(--d, 0s); }
  @keyframes mapping { 0% { transform: scale(0.45); opacity: 1; } 70%, 100% { transform: scale(3.4); opacity: 0; } }
  @keyframes mappingdot { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
}
@media (prefers-reduced-motion: reduce) { .mp-dot { opacity: 1; } }
/* Auf schmalen Schirmen zeigt der Ausschnitt genau die dichte Bezirksmitte,
   die Punkte landen dann hinter der Ueberschrift. Dort zuruecknehmen. */
@media (max-width: 700px) { .map-ping { opacity: 0.5; } }

/* ---------- Leistungen ---------- */
.svc-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.svc { --svc-px: 28px; --svc-pt: 32px; position: relative; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: var(--svc-pt) var(--svc-px); transition: transform 340ms var(--ease-out), box-shadow 340ms var(--ease-out), border-color 240ms ease; }
.svc::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; z-index: 2; background: linear-gradient(90deg, var(--gold-deep), var(--gold-br)); transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ease-out); }
/* Platzhalterbild: randlos bis an die Kartenkante (hebt das Padding auf) */
.svc-img { display: block; width: calc(100% + var(--svc-px) * 2); max-width: none; height: auto; margin: calc(var(--svc-pt) * -1) calc(var(--svc-px) * -1) 20px; aspect-ratio: 16 / 10; object-fit: cover; background: var(--cream); }
.svc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.svc-no { font-family: var(--display); font-weight: 800; font-size: 1.4rem; color: var(--line); letter-spacing: -0.02em; transition: color 340ms ease; }
.svc-ico { display: inline-flex; width: 42px; height: 42px; color: var(--navy); transition: transform 420ms var(--ease-out), color 340ms ease; }
.svc-ico svg { width: 100%; height: 100%; }
.svc h3 { font-size: 1.3rem; }
.svc p { margin-top: 10px; color: var(--slate); font-size: 0.98rem; }
@media (hover: hover) and (pointer: fine) {
  .svc:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(201,162,78,0.5); }
  .svc:hover::before { transform: scaleX(1); }
  .svc:hover .svc-ico { color: var(--gold-deep); transform: translateY(-2px); }
  .svc:hover .svc-no { color: var(--gold); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .svc-img { transition: transform 620ms var(--ease-out); }
  .svc:hover .svc-img { transform: scale(1.045); }
}

/* ---------- Einsatzgebiet Hamburg ---------- */
.hamburg { padding-block: 92px; }
.hamburg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(620px 360px at 88% 115%, rgba(201,162,78,0.13), transparent 60%); pointer-events: none; }
.hamburg-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
.hamburg-text h2 { font-size: clamp(1.9rem, 5vw, 2.9rem); }
.hh-stats { display: flex; flex-wrap: wrap; gap: 30px 40px; margin-top: 34px; }
.hh-stats strong { display: block; font-family: var(--display); font-weight: 900; font-size: 2.4rem; color: var(--gold); line-height: 1; letter-spacing: -0.03em; }
.hh-stats .stat-fact { font-size: 1.7rem; letter-spacing: -0.01em; }
.hh-stats span { display: block; margin-top: 6px; font-size: 0.84rem; color: var(--silver-2); text-transform: uppercase; letter-spacing: 0.06em; }
.districts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.districts li { font-family: var(--display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.03em; color: var(--silver); border: 1px solid var(--navy-line); border-radius: 999px; padding: 9px 16px; transition: border-color 200ms ease, color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .districts li:hover { border-color: var(--gold); color: var(--gold-br); } }

/* ---------- Warum wir ---------- */
.warum { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
.warum-text h2 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
.why-list { list-style: none; margin: 30px 0; border-top: 1px solid var(--line); }
.why-list li { display: grid; gap: 4px; padding: 18px 0 18px 26px; border-bottom: 1px solid var(--line); position: relative; }
.why-list li::before { content: ""; position: absolute; left: 0; top: 22px; width: 10px; height: 10px; background: var(--gold); transform: rotate(45deg); }
.why-list strong { font-family: var(--display); font-weight: 700; font-size: 1.06rem; color: var(--ink); }
.why-list span { color: var(--slate); font-size: 0.96rem; }
.warum-media { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.warum-media img { width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; filter: grayscale(0.45) contrast(1.04); }
.warum-seal { position: absolute; right: 16px; bottom: 16px; width: 64px; height: 80px; filter: drop-shadow(0 6px 16px rgba(0,0,0,0.4)); }
.warum-seal svg { width: 100%; height: 100%; }

/* ---------- Ablauf ---------- */
.proc { list-style: none; display: grid; grid-template-columns: 1fr; border-top: 2px solid var(--gold); }
.proc-step { padding: 30px 0; border-bottom: 1px solid var(--line); }
.proc-num { font-family: var(--display); font-weight: 900; font-size: 2rem; color: var(--gold-deep); letter-spacing: -0.02em; }
.proc-step h3 { font-size: 1.32rem; margin: 12px 0 8px; }
.proc-step p { color: var(--slate); max-width: 42ch; }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 860px; }
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; font-family: var(--display); font-weight: 700; font-size: 1.12rem; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex-shrink: 0; width: 22px; height: 22px; background: linear-gradient(180deg, var(--gold-br), var(--gold)); -webkit-mask: no-repeat center / 14px 2px linear-gradient(#000,#000), no-repeat center / 2px 14px linear-gradient(#000,#000); mask: no-repeat center / 14px 2px linear-gradient(#000,#000), no-repeat center / 2px 14px linear-gradient(#000,#000); border-radius: 4px; transition: transform 260ms var(--ease-out); }
.faq-item[open] summary::after { transform: rotate(135deg); }
.faq-a { padding: 0 0 24px; overflow: hidden; transition: max-height 340ms var(--ease-out); }
.faq-a p { color: var(--slate); max-width: 70ch; }

/* ---------- Karriere CTA ---------- */
.karriere-cta { background: var(--navy); position: relative; overflow: hidden; }
.karriere-cta::after { content: ""; position: absolute; inset: 0; background: radial-gradient(520px 280px at 88% 0%, rgba(201,162,78,0.16), transparent 62%); pointer-events: none; }
.karriere-cta-inner { position: relative; z-index: 1; padding-block: 64px; display: grid; gap: 28px; }
.karriere-cta h2 { font-size: clamp(2rem, 5.4vw, 3rem); }
.karriere-cta p { margin-top: 14px; max-width: 46ch; }
.karriere-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Kontakt ---------- */
.kontakt { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: start; }
.kontakt-info h2 { font-size: clamp(1.8rem, 4.6vw, 2.7rem); }
.kontakt-list { list-style: none; margin-top: 30px; border-top: 1px solid var(--line); }
.kontakt-list li { display: grid; grid-template-columns: 120px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.k-key { font-family: var(--display); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--silver-dim); }
.k-val { display: flex; flex-direction: column; gap: 4px; font-size: 1.05rem; }
.k-val a { transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .k-val a:hover { color: var(--gold-deep); } }

.kontakt-form { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); padding: 28px; display: grid; gap: 18px; box-shadow: var(--shadow-md); border-top: 3px solid var(--gold); }
.field { display: grid; gap: 8px; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 18px; }
.field label { font-family: var(--display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); }
.field .opt { color: var(--silver-dim); font-weight: 500; text-transform: none; letter-spacing: 0; }
.field input, .field textarea, .field select { font-family: var(--font); font-size: 1rem; color: var(--ink); background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 15px; width: 100%; transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease; }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; background: #fff; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,78,0.18); }
.field input:user-invalid, .field textarea:user-invalid, .field select:user-invalid { border-color: #b3402f; }
/* Auswahlfeld, Einwilligung, Honeypot, Hinweis */
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--slate) 50%), linear-gradient(135deg, var(--slate) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.field-check { display: flex; align-items: flex-start; gap: 11px; font-size: 0.9rem; color: var(--slate); line-height: 1.5; cursor: pointer; }
.field-check input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--gold-deep); cursor: pointer; }
.field-check a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.field-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-hint { font-size: 0.86rem; color: var(--silver-dim); line-height: 1.5; }
.form-hint a { color: var(--gold-deep); font-weight: 600; }
.form-note { font-size: 0.9rem; color: var(--slate); min-height: 1.2em; }
.form-note.is-success { color: #1c7a4d; font-weight: 600; }
.form-note.is-error { color: #b3402f; font-weight: 600; }

/* ---------- Abschluss-CTA auf Leistungsseiten ---------- */
.page-cta { position: relative; background: var(--navy); color: #fff; }
.page-cta-inner { padding-block: 64px; text-align: center; }
.page-cta h2 { color: #fff; font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
.page-cta p { margin: 14px auto 0; max-width: 56ch; color: rgba(231,234,240,0.78); }
.page-cta-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-deep); color: var(--silver); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 34px; padding-block: 50px 40px; }
.footer-brand .brand--footer { display: inline-flex; align-items: center; gap: 12px; }
.footer-brand p { margin-top: 16px; max-width: 38ch; font-size: 0.95rem; color: var(--silver-2); }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h4 { font-family: var(--display); color: var(--gold); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; }
.footer-col a, .footer-muted { color: var(--silver-2); font-size: 0.95rem; transition: color 160ms ease; }
.footer-col a { padding: 5px 0; }
.footer-legal a { padding: 8px 0; }
@media (hover: hover) and (pointer: fine) { .footer-col a:hover { color: #fff; } }
.footer-bottom { border-top: 1px solid var(--navy-line); padding-block: 22px; display: flex; flex-direction: column; gap: 14px; font-size: 0.82rem; color: var(--silver-dim); }
.footer-legal { display: flex; gap: 22px; }
@media (hover: hover) and (pointer: fine) { .footer-legal a:hover { color: var(--gold-br); } }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); filter: blur(5px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), filter 700ms var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none; }
  .btn:active { transform: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* =========================================================
   KARRIERE-SEITE (Job-Board)
   ========================================================= */
.page-hero { background: var(--navy); position: relative; overflow: hidden; }
/* Leistungsfoto als Hintergrund, Navy-Schleier darüber hält den Text lesbar */
/* Bildausschnitt nach oben versetzt, sonst schneidet der flache Hero die Köpfe ab.
   Pro Seite über --hero-focus feinjustierbar. */
.page-hero-img { position: absolute; inset: 0; z-index: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: center var(--hero-focus, 14%); }
/* Etwas mehr Höhe, damit der flache Hero weniger vom Bild wegschneidet */
.page-hero { min-height: clamp(360px, 34vw, 520px); display: flex; align-items: center; }
.page-hero > .container { width: 100%; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(14,27,56,0.72), rgba(14,27,56,0.88)), linear-gradient(90deg, rgba(14,27,56,0.55), rgba(14,27,56,0.2)); }
.page-hero-inner { position: relative; z-index: 1; padding-block: 70px 84px; text-align: center; }
.page-hero .kicker { justify-content: center; }
.page-hero h1 { color: #fff; font-size: clamp(2.4rem, 6vw, 3.6rem); }
.page-hero p { margin: 16px auto 0; max-width: 56ch; color: rgba(231,234,240,0.78); }
.jobsearch { background: var(--cream); border-bottom: 1px solid var(--line); }
.jobsearch-form { display: grid; grid-template-columns: 1fr; gap: 12px; padding-block: 24px; }
.jobsearch .jf { display: flex; flex-direction: column; gap: 6px; }
.jobsearch label { font-family: var(--display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--silver-dim); }
.jobsearch input, .jobsearch select { font-family: var(--font); font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.jobsearch input:focus, .jobsearch select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,78,0.18); }
.jobs { padding-block: 70px 90px; }
.jobs-count { font-family: var(--display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-bottom: 20px; }
.job-list { list-style: none; border-top: 1px solid var(--line); }
.job { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 26px 14px; border-bottom: 1px solid var(--line); align-items: center; transition: background-color 220ms var(--ease-out), padding-left 220ms var(--ease-out); position: relative; }
.job::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform 240ms var(--ease-out); }
.job-main h3 { font-size: 1.32rem; }
.job-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; }
.job-tag { font-family: var(--display); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy); background: rgba(201,162,78,0.18); border: 1px solid rgba(201,162,78,0.4); border-radius: 999px; padding: 4px 12px; }
.job-tag.loc { background: transparent; color: var(--slate); border-color: var(--line); }
.job-apply { justify-self: start; }
@media (hover: hover) and (pointer: fine) { .job:hover { background: var(--cream); padding-left: 20px; } .job:hover::before { transform: scaleY(1); } }
.jobs-empty { text-align: center; padding: 60px 20px; border: 1px dashed var(--line); border-radius: var(--r); background: var(--cream); }
.jobs-empty svg, .jobs-empty img { display: block; width: 64px; height: auto; margin: 0 auto 18px; opacity: 0.7; }
.jobs-empty h3 { font-size: 1.4rem; margin-bottom: 10px; }
.jobs-empty p { color: var(--slate); max-width: 46ch; margin: 0 auto 22px; }
.jobs-hidden { display: none; }
.follow { background: var(--navy); }
.follow-inner { padding-block: 40px; display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; }
.follow h4 { color: #fff; font-size: 1.1rem; letter-spacing: 0.04em; }
.follow-links { display: flex; gap: 14px; }
.follow-links a { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--r); border: 1px solid var(--navy-line); color: var(--silver); transition: all 200ms ease; }
.follow-links svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .follow-links a:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (min-width: 560px) {
  .utility-tag { display: inline; }
  .field-row { grid-template-columns: 1fr 1fr; }
  .jobsearch-form { grid-template-columns: 2fr 2fr auto auto; align-items: end; }
  .job { grid-template-columns: 1fr auto; }
  .job-apply { justify-self: end; }
}
@media (min-width: 768px) {
  .section { padding-block: 108px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .proc { grid-template-columns: repeat(3, 1fr); }
  .proc-step { padding: 36px 28px 36px 0; border-bottom: none; border-right: 1px solid var(--line); }
  .proc-step:last-child { border-right: none; }
  .proc-step:not(:first-child) { padding-left: 28px; }
  .karriere-cta-inner { grid-template-columns: 1.5fr 1fr; align-items: center; justify-items: end; padding-block: 76px; }
  .karriere-cta-actions { justify-content: flex-end; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 30px; padding-top: 56px; }
  .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
  .follow-inner { flex-direction: row; justify-content: space-between; }
  .hamburg-inner { grid-template-columns: 1.1fr 0.9fr; gap: 56px; }
}
@media (min-width: 960px) {
  .nav { display: flex; }
  .header-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none; }
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
  .warum { grid-template-columns: 1.1fr 0.9fr; gap: 60px; }
  .kontakt { grid-template-columns: 1fr 1fr; gap: 64px; }
}
@media (min-width: 1100px) { .container { padding-inline: 24px; } }

/* =========================================================
   SIGNATUR-MODULE: Revierkarte · Referenzen · Zertifikate · Team · Notruf
   ========================================================= */

/* ---- Interaktive Hamburg-Revierkarte ---- */
.revier { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; }
.revier-map { position: relative; background: rgba(255,255,255,0.02); border: 1px solid var(--navy-line); border-radius: var(--r); padding: 12px; }
.rv-water { fill: #27395f; }
.rv-river-line { stroke: rgba(198,202,210,0.22); stroke-width: 1.4; }
.rv-hit { fill: transparent; cursor: pointer; }
.rv-marker { cursor: pointer; }
.rv-marker:focus { outline: none; }
.rv-dot { fill: var(--gold); transition: fill 200ms ease; }
.rv-label { fill: var(--silver); font-family: var(--display); font-weight: 700; font-size: 12.5px; text-anchor: middle; opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.rv-marker:hover .rv-dot, .rv-marker:focus-visible .rv-dot, .rv-marker.is-active .rv-dot { fill: var(--gold-br); }
.rv-marker.is-active .rv-dot { stroke: rgba(201,162,78,0.35); stroke-width: 8; paint-order: stroke; }
.rv-marker:hover .rv-label, .rv-marker:focus-visible .rv-label, .rv-marker.is-active .rv-label { opacity: 1; }
.rv-marker:focus-visible .rv-dot { stroke: #fff; stroke-width: 2.5; }

.revier-panel { background: var(--navy-2); border: 1px solid var(--navy-line); border-top: 3px solid var(--gold); border-radius: var(--r); padding: 28px; }
.rv-eyebrow { font-family: var(--display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-br); }
.revier-panel h3 { color: #fff; font-size: 1.6rem; margin: 8px 0 12px; }
.revier-panel p { color: rgba(231,234,240,0.74); font-size: 1rem; }
.rv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 22px; }
.rv-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; font-size: 0.82rem; color: var(--silver); }
.rv-pulse { width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61,220,132,0.5); }
.revier-stats { margin-top: 24px; border-top: 1px solid var(--navy-line); padding-top: 20px; }

/* ---- Standorte ---- */
.standorte { list-style: none; margin: 42px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
.standort { min-width: 0; background: rgba(255,255,255,0.03); border: 1px solid var(--navy-line); border-radius: var(--r); padding: 24px 22px; transition: border-color 220ms ease, transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .standort:hover { border-color: rgba(201,162,78,0.5); transform: translateY(-3px); } }
.standort h3 { font-family: var(--display); font-weight: 700; font-size: 1.08rem; color: #fff; margin-bottom: 10px; }
.standort p { color: var(--silver-2); font-size: 0.94rem; line-height: 1.6; }
.standort-adr { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--navy-line); font-size: 0.88rem; }
.standort-adr a { color: var(--gold-br); text-decoration: none; }
.standort-adr a:hover { text-decoration: underline; }

/* ---- Referenzen ---- */
@media (hover: hover) and (pointer: fine) { .logo-tile:hover { color: var(--gold-deep); border-color: var(--gold); } }
/* Trustpilot-Style Kundenstimmen */
#referenzen .sec-head { margin-bottom: 26px; }
.tp-stars { display: inline-flex; gap: 4px; }
.tp-star { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: #00b67a; border-radius: 3px; }
.tp-star svg { width: 19px; height: 19px; fill: #fff; }
.tp-stars-sm .tp-star { width: 25px; height: 25px; border-radius: 2px; }
.tp-stars-sm .tp-star svg { width: 16px; height: 16px; }

.tp-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 28px; }
.tp-summary .tp-star { width: 22px; height: 22px; border-radius: 2px; }
.tp-summary .tp-star svg { width: 14px; height: 14px; }
.tp-summary p { margin: 0; color: var(--ink); font-size: 0.95rem; }
.tp-summary strong { font-family: var(--display); font-weight: 800; }
.tp-count { color: var(--slate); }

.reviews-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.review { display: flex; flex-direction: column; gap: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 22px; transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; }
@media (hover: hover) and (pointer: fine) { .review:hover { border-color: var(--silver); box-shadow: 0 14px 32px -22px rgba(21,38,76,.4); transform: translateY(-2px); } }
.review-verified { display: inline-flex; align-items: center; gap: 6px; color: var(--slate); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; }
.review-verified::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #00b67a; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.3l-4.6-4.6 1.4-1.42 3.2 3.2 7.7-7.7 1.4 1.42z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.3l-4.6-4.6 1.4-1.42 3.2 3.2 7.7-7.7 1.4 1.42z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat; }
.review h3 { font-family: var(--display); font-weight: 700; font-size: 1.08rem; color: var(--ink); margin: 2px 0 0; }
.review p { color: var(--slate); font-size: 0.96rem; line-height: 1.6; margin: 0; }
.review footer { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.review-name { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.review-date { color: var(--silver-dim); font-size: 0.84rem; }

/* ---- Zertifikate ---- */
.certs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cert { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; background: rgba(255,255,255,0.03); border: 1px solid var(--navy-line); border-radius: var(--r); padding: 26px 18px; overflow-wrap: anywhere; hyphens: auto; transition: border-color 220ms ease, transform 300ms var(--ease-out); }
.cert-ico { width: 38px; height: 38px; color: var(--gold); }
.cert-ico svg { width: 100%; height: 100%; }
.cert strong { font-family: var(--display); color: #fff; font-size: 1.05rem; }
.cert span { color: var(--silver-2); font-size: 0.84rem; }
.cert em { font-style: normal; color: var(--gold-br); }
@media (hover: hover) and (pointer: fine) { .cert:hover { border-color: rgba(201,162,78,0.5); transform: translateY(-3px); } }

/* ---- Team ---- */

/* ---- Schwebender Notruf-Button ---- */
.notruf-fab { position: fixed; right: 20px; bottom: 20px; z-index: 120; display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(180deg, var(--gold-br), var(--gold)); color: var(--navy); font-family: var(--display); font-weight: 700; font-size: 0.84rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 15px 20px; border-radius: 999px; box-shadow: 0 14px 36px rgba(8,16,36,0.4); transition: transform 180ms var(--ease-out), box-shadow 220ms ease; }
.notruf-fab.is-hidden { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; transition: opacity 240ms ease, transform 240ms ease, visibility 240ms; }
.notruf-fab svg { width: 18px; height: 18px; position: relative; }
.notruf-ring { position: absolute; inset: 0; border-radius: 999px; border: 2px solid var(--gold); opacity: 0; pointer-events: none; }
.notruf-fab:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .notruf-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(201,162,78,0.34); } }
@media (prefers-reduced-motion: no-preference) {
  .rv-pulse { animation: rvpulse 2.4s var(--ease-out) infinite; }
  .notruf-ring { animation: fabring 2.6s var(--ease-out) infinite; }
  @keyframes rvpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(61,220,132,0.5);} 50% { box-shadow: 0 0 0 6px rgba(61,220,132,0);} }
  @keyframes fabring { 0% { opacity:0.7; transform: scale(1);} 70%,100% { opacity:0; transform: scale(1.5);} }
}

@media (min-width: 560px) {
  .certs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .standorte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .reviews-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .revier { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .certs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .notruf-label { display: none; }
  .notruf-fab { padding: 15px; }
}

/* =========================================================
   HERO-HINTERGRUND: dezente Hamburg-Linienkarte mit Live-Pings
   ========================================================= */
.hero-map svg { width: min(125%, 1040px); height: 112%; transform: translateX(8%); }
.ping-dot { fill: var(--gold-br); }
.ping-ring { fill: none; stroke: var(--gold-br); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .ping-ring { animation: heroping 3.6s var(--ease-out) infinite; animation-delay: var(--d, 0s); }
  .ping-dot { animation: heropingdot 3.6s ease infinite; animation-delay: var(--d, 0s); }
  @keyframes heroping { 0% { transform: scale(0.5); opacity: 0.7; } 70%, 100% { transform: scale(3.6); opacity: 0; } }
  @keyframes heropingdot { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) { .ping-dot { opacity: 0.7; } }

/* dezenterer Scrim, damit die Karte durchscheint, Text aber lesbar bleibt */
.hero-scrim { background: linear-gradient(90deg, rgba(13,24,48,0.94) 0%, rgba(13,24,48,0.62) 46%, rgba(13,24,48,0.22) 100%), linear-gradient(180deg, rgba(13,24,48,0.25), rgba(13,24,48,0.55)); }

/* =========================================================
   SCROLL-ANIMATION-VARIANTEN
   ========================================================= */
.reveal.from-left { transform: translateX(-32px); }
.reveal.from-right { transform: translateX(32px); }
.reveal.zoom { transform: scale(0.95); }
.reveal.from-left.is-visible, .reveal.from-right.is-visible, .reveal.zoom.is-visible { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal.from-left, .reveal.from-right, .reveal.zoom { transform: none !important; }
}

/* ---- Hero-Karte: Dark-Mode-Map-Look (Straßen + Wasser) ---- */
.hm-land { fill: rgba(150,180,230,0.025); }
.hm-water { fill: #243f6e; opacity: 0.55; }
.hm-roads { mix-blend-mode: screen; }
.hm-road { fill: none; stroke: rgba(201,162,78,0.10); stroke-width: 1; stroke-linecap: round; }
.hm-road-major { stroke: rgba(201,162,78,0.20); stroke-width: 1.6; }
.hm-road-ring { stroke: rgba(198,202,210,0.10); stroke-width: 1.2; }

/* Hero-Karte etwas präsenter (aber weiter Background) */
.hm-road { stroke: rgba(201,162,78,0.14); }
.hm-road-major { stroke: rgba(201,162,78,0.28); stroke-width: 1.8; }
.hm-road-ring { stroke: rgba(198,202,210,0.16); }
.hm-water { fill: #2a4a80; opacity: 0.6; }

/* =========================================================
   HERO: statische Kartengrafik
   ========================================================= */

/* Lesbarkeit: Text links dunkler, Karte rechts sichtbar */
.hero-scrim { background:
  linear-gradient(90deg, rgba(11,20,40,0.97) 0%, rgba(11,20,40,0.84) 40%, rgba(11,20,40,0.5) 100%),
  linear-gradient(180deg, rgba(11,20,40,0.34), rgba(11,20,40,0.66)); }

/* Karte deutlich sichtbarer: Tiles aufhellen, Scrim nur links hinter dem Text */
.hero-scrim { background:
  linear-gradient(90deg, rgba(10,18,36,0.95) 0%, rgba(10,18,36,0.72) 30%, rgba(10,18,36,0.32) 58%, rgba(10,18,36,0.08) 100%),
  linear-gradient(180deg, rgba(10,18,36,0.15), rgba(10,18,36,0.45)); }

/* Revierkarte: weiches Leuchten innerhalb der Kontur */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hhglow { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
}

/* Hero: blauer Schleier statt schwarz (überwiegend ~10%, links etwas mehr für Lesbarkeit) */
.hero-scrim { background:
  linear-gradient(90deg, rgba(23,49,108,0.50) 0%, rgba(23,49,108,0.20) 48%, rgba(23,49,108,0.10) 100%); }

/* Echtes Marken-Logo (Header/Footer) */
.brand-logo { display: block; height: 38px; width: auto; }
.brand--footer .brand-logo { height: 34px; }
@media (max-width: 480px) { .brand-logo { height: 30px; } }

/* Hero-Schleier auf Mobil gleichmäßiger (Text über voller Breite lesbar) */
@media (max-width: 768px) {
  .hero-scrim { background:
    linear-gradient(180deg, rgba(20,42,96,0.5) 0%, rgba(20,42,96,0.34) 55%, rgba(13,24,48,0.6) 100%); }
}

/* Echtes Wappen: Kicker-Siegel, Foto-Siegel, großes Footer-Emblem */
.kicker-seal img { width: 100%; height: 100%; object-fit: contain; }
.warum-seal { width: 92px; height: 92px; }
.warum-seal img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(0,0,0,0.45)); }
.site-footer { position: relative; overflow: hidden; }
.footer-grid, .footer-bottom { position: relative; z-index: 1; }
.hero-crest { display: block; width: 110px; height: auto; margin: 0 auto 22px; }
.footer-emblem { position: absolute; right: -55px; top: 50%; transform: translateY(-50%); width: 350px; height: auto; opacity: 0.09; pointer-events: none; z-index: 0; }
@media (max-width: 768px) { .footer-emblem { width: 240px; right: -80px; opacity: 0.07; } }

/* Einsatzgebiet: statische Kartengrafik */
#revierMap { width: 100%; border-radius: var(--r); }

/* Marker liegen prozentual auf dem Kartenbild */
.revier-karte { width: 100%; height: auto; display: block; border-radius: 4px; }
.rv-pin { position: absolute; transform: translate(-50%, -50%); z-index: 2; width: 44px; height: 44px;
  display: grid; place-items: center; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; }
.rv-pin-label { position: absolute; bottom: calc(50% + 11px); left: 50%; transform: translateX(-50%);
  font-family: var(--display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.04em;
  color: #fff; background: var(--navy); border: 1px solid var(--gold); border-radius: 4px; padding: 3px 9px;
  white-space: nowrap; box-shadow: 0 6px 16px rgba(0,0,0,0.35); transition: background-color 180ms ease, border-color 180ms ease; }
.rv-pin:focus-visible { outline: 2px solid var(--gold-br); outline-offset: 4px; border-radius: 6px; }
.rv-pin.is-active .rv-pin-label { background: var(--gold-deep); border-color: var(--gold-br); }
.rv-pin-dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--gold-br); border: 2px solid var(--navy); box-shadow: 0 0 9px rgba(226,194,119,0.85); transition: transform 180ms var(--ease-out), background-color 180ms ease; }
.rv-pin:hover .rv-pin-dot { transform: scale(1.25); }
.rv-pin.is-active .rv-pin-dot { background: #ffd884; transform: scale(1.3); box-shadow: 0 0 14px rgba(226,194,119,1); }

/* Revierkarte: Hell-Modus mit kleinem weißem Rahmen */
.revier-map { max-width: 440px; margin-inline: auto; padding: 6px; background: #ffffff; border: 1px solid rgba(255,255,255,0.25); border-radius: 8px; box-shadow: 0 16px 44px rgba(0,0,0,0.28); }
#revierMap { border-radius: 4px; }

/* Leistungs-Detailseiten */
.svc-detail { max-width: 840px; }
.svc-detail .lead-p { color: var(--slate); font-size: 1.12rem; line-height: 1.7; max-width: 74ch; }
.svc-detail h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin: 30px 0 14px; }
.svc-checklist { list-style: none; display: grid; gap: 12px; margin: 0 0 30px; max-width: 74ch; }
.svc-checklist li { position: relative; padding-left: 30px; color: var(--ink); font-size: 1.02rem; }
.svc-checklist li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; background: var(--gold); transform: rotate(45deg); }
.svc-close { color: var(--slate); font-size: 1.08rem; max-width: 74ch; margin-bottom: 26px; }
.svc-close strong { color: var(--ink); }
.svc-detail-actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* Service-Karten als Links */
a.svc { display: block; color: inherit; text-decoration: none; }

.svc-more { display: inline-block; margin-top: 16px; font-family: var(--display); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gold-deep); transition: color 180ms ease, transform 180ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { a.svc:hover .svc-more { color: var(--gold-deep); transform: translateX(3px); } }

/* Nav-Dropdown "Leistungen" */
.nav-drop { position: relative; display: inline-flex; align-items: center; }
.nav-caret { font-size: 0.66em; margin-left: 2px; transition: transform 200ms var(--ease-out); }
.nav-drop:hover .nav-caret, .nav-drop:focus-within .nav-caret { transform: rotate(180deg); }
.nav-drop-menu { position: absolute; top: 100%; left: -12px; min-width: 232px; background: var(--navy-2); border: 1px solid var(--navy-line); border-radius: var(--r); padding: 8px; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 200ms ease, transform 200ms var(--ease-out), visibility 0s linear 200ms; z-index: 120; }
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 200ms ease, transform 200ms var(--ease-out); }
.nav-drop-menu a { padding: 10px 14px; border-radius: 4px; font-family: var(--font); font-weight: 600; font-size: 0.92rem; letter-spacing: 0; text-transform: none; color: var(--silver); }
.nav-drop-menu a::after { display: none; }
@media (hover: hover) and (pointer: fine) { .nav-drop-menu a:hover { background: rgba(201,162,78,0.16); color: #fff; } }

/* Mobile: eingerückte Leistungs-Unterpunkte */
.mobile-nav nav a.mob-sub { font-size: 1rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--silver); padding: 10px 0 10px 22px; }
.mobile-nav nav a.mob-sub::before { content: "-"; margin-right: 8px; color: var(--gold); }