/* =========================================================
   HEINRICH MARKETING – ZENTRALES BRANDING (eine Quelle)
   Jede Kundenseite lädt nur diese Datei. Änderung hier = überall.
   ========================================================= */
@font-face{font-family:'Haidan';src:url('fonts/Heidan-Stamp.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Cutive Mono';src:url('fonts/CutiveMono-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Avenir Next';font-weight:400;src:url('fonts/AvenirNext-Regular.woff2') format('woff2'),url('fonts/AvenirNext-Regular.woff') format('woff');font-display:swap}

:root{
  --navy:#375075; --navy-deep:#2c405d; --gold:#E7BA80;
  --ink:#16181d; --mut:#5b6472; --line:#c9d3e0;
  --head:'Haidan',Georgia,serif;
  --body:'Avenir Next',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Cutive Mono','Courier New',monospace;
}
*{box-sizing:border-box}
html{background:#eef3f9 url('img/paper.jpg') center/cover fixed}
body{margin:0;font-family:var(--body);color:var(--ink);line-height:1.55;font-size:15px}
.hm-site{max-width:1080px;margin:0 auto;padding:0 22px}

/* Kopf: Kunde links, Logo rechts oben */
.hm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  padding:26px 0 18px;border-bottom:2px solid var(--navy);margin-bottom:24px;flex-wrap:wrap}
.hm-head .who h1{font-family:var(--head);font-weight:400;color:var(--navy);font-size:34px;line-height:1.05;margin:0 0 4px;letter-spacing:.4px}
.hm-head .who .url{font-size:13px;color:var(--mut)}
.hm-head .who .url a{color:var(--navy);text-decoration:none}
.hm-head .who .stamp{font-family:var(--mono);font-size:11px;color:var(--mut);margin-top:6px}
.hm-head .logo img{height:46px;width:auto}

/* Abschnitts-Label (Cutive Mono) */
.hm-h2{font-family:var(--mono);text-transform:uppercase;letter-spacing:2px;font-size:12px;
  color:var(--navy);font-weight:400;margin:30px 0 12px;display:flex;align-items:center;gap:10px}
.hm-h2 .live{color:#1c9d6b} .hm-h2 .ph{color:#b9770a}

/* KPI-Karten – immer weiß */
.hm-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.hm-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:0 6px 18px rgba(44,64,93,.05)}
.hm-card .k{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut)}
.hm-card .v{font-size:26px;font-weight:400;color:var(--ink);margin-top:3px;font-family:var(--head);letter-spacing:.3px}
.hm-card .s{font-size:11.5px;color:var(--mut);margin-top:1px}

/* Panel + Tabelle */
.hm-panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
table.hm-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:14px}
.hm-table th,.hm-table td{text-align:left;padding:9px 13px;border-bottom:1px solid #eef2f4}
.hm-table th{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut);background:#fafbfc;font-weight:400}
.hm-table td.pos{font-weight:600;color:var(--navy)}
.up{color:#1c9d6b}.down{color:#d2483f}.flat{color:#9aa7ad}

/* Liste (Ziele/Maßnahmen) */
.hm-list{list-style:none;margin:0;padding:0}
.hm-list li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid #eef2f4;font-size:14px}
.hm-list li:last-child{border-bottom:0}
.hm-list .ico{color:var(--gold)}
.hm-num{width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;font-size:11px;
  display:flex;align-items:center;justify-content:center;flex:none}

.hm-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:600}
.hm-badge.green{background:#e7f7ef;color:#1c9d6b}.hm-badge.red{background:#fdeceb;color:#c0392b}.hm-badge.amber{background:#fff4e0;color:#b9770a}

.hm-rule{height:2px;width:80px;background:var(--gold);border:0;margin:24px 0}
.hm-note{font-size:12px;color:var(--mut);margin-top:8px}

/* Fußzeile: Bergpanorama im Fluss am Seitenende */
.hm-foot{margin-top:34px;width:100%;height:130px;background:url('img/panorama.png') bottom center/cover no-repeat}
.hm-foot-cap{text-align:center;font-family:var(--mono);font-size:11px;color:var(--mut);letter-spacing:1px;padding:8px 0 18px}

@media(max-width:640px){.hm-head .who h1{font-size:27px}}