/* HCM EDV – hcmedv.de, Entwurf Oktober 2026
 * Layout: ruhige Scrollseite, eine Spalte mit max. 1080px; Einstieg mit Einstufungskarte A–E,
 * dann drei Rollen, Fundament als Kundenfragen (getöntes Band), Praxis-Schwerpunkt, Kontakt.
 * Farben aus dem Logo (Marineblau + drei Balken), Systemschrift wie auf service.hcmedv.de
 * (keine fremden Schriften, Skripte oder Cookies).
 */
:root {
  --bg: #f5f7fb;
  --flaeche: #ffffff;
  --band: #eef2fa;
  --text: #18213a;
  --leise: #5b6480;
  --linie: #dfe4ef;
  --marke: #273583;
  --marke-mitte: #3f6fc4;
  --marke-hell: #a9b9e3;
  --knopf: #273583;
  --knopf-text: #ffffff;
  --a: #1f7a4d; --b: #4f8a2b; --c: #a86f12; --d: #c0541c; --e: #b42318;
  --schrift: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --logo-grund: #ffffff;
  --breite: 1080px;
  --rund: 12px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #10151e; --flaeche: #171e2a; --band: #1b2331; --text: #e7ebf2; --leise: #9aa3b6; --linie: #29324a;
    --marke: #bccaf3; --marke-mitte: #5b8be0; --marke-hell: #4a5a8a; --knopf: #6b96e6; --knopf-text: #0b1120;
    --a: #5fd39a; --b: #9ccf6a; --c: #e8b453; --d: #f08a55; --e: #f47a6f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #10151e; --flaeche: #171e2a; --band: #1b2331; --text: #e7ebf2; --leise: #9aa3b6; --linie: #29324a;
  --marke: #bccaf3; --marke-mitte: #5b8be0; --marke-hell: #4a5a8a; --knopf: #6b96e6; --knopf-text: #0b1120;
  --a: #5fd39a; --b: #9ccf6a; --c: #e8b453; --d: #f08a55; --e: #f47a6f;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 var(--schrift); }
h1, h2, h3 { margin: 0; text-wrap: balance; line-height: 1.2; }
p { margin: 0; }
a { color: var(--marke-mitte); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--marke-mitte); outline-offset: 3px; border-radius: 6px; }

.rahmen {
  max-width: var(--breite); margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.leise { color: var(--leise); }

/* Marke: die drei Balken aus dem Logo als kleines Zeichen vor Überschriften-Zeilen */
.zeile {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--leise);
}
.zeile::before {
  content: ""; width: 34px; height: 9px; flex: none;
  background:
    linear-gradient(var(--marke-hell), var(--marke-hell)) 0 0 / 9px 9px no-repeat,
    linear-gradient(var(--marke-mitte), var(--marke-mitte)) 12px 0 / 9px 9px no-repeat,
    linear-gradient(var(--marke), var(--marke)) 24px 0 / 9px 9px no-repeat;
  transform: skewX(-20deg);
}

/* Kopf */
.kopf {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: color-mix(in srgb, var(--flaeche) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--linie);
}
.kopf .rahmen { display: flex; align-items: center; gap: 28px; padding-block: 14px; }
/* viewBox randlos (14 14 504 97), damit das Logo genau dort steht wie das PNG auf service.hcmedv.de */
.logo { display: block; width: 167px; height: auto; flex: none; }
.logo .schrift { fill: var(--marke); }
.logo .b1 { fill: var(--marke-hell); } .logo .b2 { fill: var(--marke-mitte); } .logo .b3 { fill: var(--marke); }
.menue { display: flex; gap: 2px; margin-left: auto; }
.menue a { color: var(--text); text-decoration: none; font-size: .95rem; padding: 6px 12px; border-radius: 8px; }
.menue a:hover { background: var(--band); }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer;
  color: var(--knopf-text); background: var(--knopf); border: 1px solid var(--knopf);
  border-radius: 10px; padding: 12px 20px;
}
.knopf:hover { filter: brightness(1.12); }
.knopf.leicht { color: var(--marke); background: transparent; border-color: var(--linie); padding: 8px 14px; font-size: .92rem; }
.knopf.leicht:hover { border-color: var(--marke-mitte); filter: none; }

/* Einstieg */
.einstieg .rahmen {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 56px; align-items: center; padding-block: 72px 64px;
}
.einstieg h1 { font-size: clamp(2rem, 4.2vw, 3rem); letter-spacing: -.02em; color: var(--marke); margin-top: 16px; }
.einstieg .lead { font-size: 1.15rem; margin-top: 20px; max-width: 32em; }
.einstieg .grenze { margin-top: 14px; color: var(--leise); max-width: 32em; }
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 30px; }
.tel { font-weight: 600; color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; }

/* Einstufung A–E */
.stand {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund);
  padding: 24px; box-shadow: 0 18px 40px -28px rgb(20 30 70 / .35);
}
.stand .auszug { font-size: .78rem; color: var(--leise); letter-spacing: .02em; margin-bottom: 6px; }
.stand h2 { font-size: 1.05rem; }
.stand .unter { font-size: .9rem; color: var(--leise); margin-top: 4px; }
/* Spaltenköpfe und Linien machen aus der Aufzählung eine Bewertung; sortiert nach Dringlichkeit */
.stand .spalten {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px;
  margin-top: 16px; padding-bottom: 6px; font-size: .74rem; color: var(--leise);
}
.stand ul { list-style: none; margin: 0; padding: 0; display: grid; }
.stand li {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding-block: 9px; border-top: 1px solid var(--linie);
}
.stand .wann.dringend { color: var(--e); font-weight: 600; }
.stand .weitere .stufe { background: transparent; border: 1px dashed var(--linie); color: var(--leise); }
.stufe {
  width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center;
  font-weight: 700; font-size: .95rem; color: var(--flaeche);
}
.s-a { background: var(--a); } .s-b { background: var(--b); } .s-c { background: var(--c); }
.s-d { background: var(--d); } .s-e { background: var(--e); }
.stand .was { font-weight: 600; font-size: .95rem; }
.stand .was small { display: block; font-weight: 400; color: var(--leise); font-size: .85rem; line-height: 1.4; }
.stand .wann { font-size: .82rem; color: var(--leise); white-space: nowrap; }
.skala {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linie);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; font-size: .74rem; color: var(--leise); line-height: 1.3;
}
.skala span { display: grid; gap: 4px; }
.skala b { height: 4px; border-radius: 2px; }

/* Abschnitte */
.abschnitt { padding-block: 80px; border-top: 1px solid var(--linie); }
.abschnitt.band { background: var(--band); border-top: 0; }
.kopfzeile { max-width: 40em; margin-bottom: 40px; }
.kopfzeile h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); letter-spacing: -.01em; color: var(--marke); margin-top: 12px; }
.kopfzeile p { margin-top: 12px; color: var(--leise); font-size: 1.05rem; }

/* Rollen */
.rollen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; gap: 12px 24px; }
.rolle { display: grid; grid-row: span 4; grid-template-rows: subgrid; min-width: 0; }
.bild { background: var(--band); border-radius: var(--rund); padding: 18px 22px; margin-bottom: 8px; }

/* Illustrationen: Linien in Markenfarben, Flächen aus den Theme-Tokens */
.ill { display: block; width: 100%; height: auto; }
/* Untereinander (Tablet/Handy) würden die Rollen-Bilder sonst auf volle Breite wachsen */
.bild .ill { max-width: 320px; margin-inline: auto; }
.ill .l { fill: none; stroke: var(--marke-mitte); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ill .lh { fill: none; stroke: var(--marke-hell); stroke-width: 2; stroke-dasharray: 5 5; stroke-linecap: round; }
.ill .zone { fill: none; stroke: var(--marke-hell); stroke-width: 2; stroke-dasharray: 6 5; }
.ill .f { fill: var(--flaeche); stroke: var(--marke-mitte); stroke-width: 2; }
.ill .m { fill: var(--marke); } .ill .mm { fill: var(--marke-mitte); } .ill .h { fill: var(--marke-hell); }
.ill .w { fill: none; stroke: var(--flaeche); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ill text { font-family: var(--schrift); font-size: 13px; font-weight: 600; fill: var(--text); text-anchor: middle; }
.ill text.sub { font-size: 10.5px; font-weight: 400; fill: var(--leise); }
.ill text.inv { fill: var(--flaeche); }
.rolle h3 { font-size: 1.25rem; }
.rolle > p { margin-bottom: 8px; }
.alltag {
  align-self: start; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund);
  padding: 16px 18px; font-size: .95rem;
}
.alltag .zeile { font-size: .7rem; margin-bottom: 6px; display: flex; }
.alltag .zeile::before { width: 26px; height: 7px; background-size: 7px 7px; background-position: 0 0, 9px 0, 18px 0; }

/* Fundament */
.fragen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.frage { padding-block: 20px; border-top: 1px solid var(--linie); min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.ico { width: 44px; height: 44px; border-radius: 11px; background: var(--flaeche); border: 1px solid var(--linie); display: grid; place-items: center; }
.ico svg { width: 24px; height: 24px; fill: none; stroke: var(--marke-mitte); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.frage h3 { font-size: 1.08rem; }
.frage p { margin-top: 6px; color: var(--leise); }

/* Praxis */
.praxis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.punkte li { padding-left: 22px; position: relative; }
.punkte li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 10px;
  background: var(--marke-mitte); transform: skewX(-20deg);
}
.punkte strong { display: block; }
.punkte span { color: var(--leise); }
.firmen {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 24px;
}
.firmen h3 { font-size: 1.1rem; margin-bottom: 8px; }
.firmen.breit { margin-top: 40px; }
.netz-rahmen { margin: 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 20px; min-width: 0; }
.netz-scroll { overflow-x: auto; }
.netz { min-width: 0; }
/* Handy: hochkant angeordnete Fassung statt Scrollbalken (sechs Kästen nebeneinander wären unlesbar) */
.netz-schmal { display: none; }
@media (max-width: 560px) { .netz-breit { display: none; } .netz-schmal { display: block; } }
.netz-rahmen figcaption { margin-top: 12px; font-size: .9rem; color: var(--leise); }
.firmen p + p { margin-top: 10px; }

/* Kunden und Netzwerk – Logos liegen als JPG auf Weiß, deshalb bewusst weiße Kacheln in beiden Themes */
.logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.logos li {
  width: 190px; aspect-ratio: 16 / 9; background: var(--logo-grund); border: 1px solid var(--linie);
  border-radius: 10px; overflow: hidden; position: relative;
}
/* Logos sind auf ihren Inhalt zugeschnitten (…-zugeschnitten.png) und werden eingepasst */
.logos img { position: absolute; inset: 18px 22px; width: calc(100% - 44px); height: calc(100% - 36px); object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; }
.logos li:hover img { filter: none; opacity: 1; }.logos + .netzwerk { margin-top: 48px; }
.netzwerk { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: center;
  background: var(--band); border-radius: var(--rund); padding: 24px 28px;
}
.netzwerk-logo { display: block; background: var(--logo-grund); border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; aspect-ratio: 2 / 1; }
.netzwerk-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.netzwerk h3 { font-size: 1.15rem; margin-bottom: 8px; color: var(--marke); }
.netzwerk p + p { margin-top: 10px; }

/* Kontakt */
.kontakt { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.kontakt .kopfzeile { margin-bottom: 24px; }
.wege { display: grid; gap: 10px; }
.weg {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px;
  color: var(--text); text-decoration: none; min-width: 0;
}
a.weg:hover { border-color: var(--marke-mitte); }
.weg svg { flex: none; width: 22px; height: 22px; stroke: var(--marke-mitte); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.weg small { display: block; color: var(--leise); font-size: .8rem; }
.weg strong { font-weight: 600; overflow-wrap: anywhere; }
.zeiten { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-top: 8px; }
.zeiten td { padding: 8px 0; border-bottom: 1px solid var(--linie); }
.zeiten td:last-child { text-align: right; }
.schon-kunde { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--linie); }
.schon-kunde p { color: var(--leise); font-size: .95rem; margin-bottom: 10px; }
/* Fernwartung abgesetzt: getönter Grund, damit sie neben der Service-Seite sofort auffällt */
.weg.fern { background: var(--band); border-color: var(--marke-hell); }

/* Fuß – wie service.hcmedv.de */
.fuss { border-top: 1px solid var(--linie); padding-block: 24px; text-align: center; font-size: .85rem; color: var(--leise); }
.fuss a { color: inherit; }

/* Impressum und Datenschutz: eine schmale Textspalte */
.recht { max-width: 760px; padding-block: 56px 72px; }
.recht h1 { font-size: clamp(1.7rem, 3.4vw, 2.2rem); color: var(--marke); margin: 12px 0 28px; }
.recht h2 { font-size: 1.15rem; margin: 36px 0 10px; }
.recht h3 { font-size: 1rem; margin: 20px 0 6px; }
.recht p, .recht ul { margin: 0 0 12px; }
.recht ul { padding-left: 1.2em; }
.recht .vorweg { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 18px 22px; }
.recht .stand-datum { margin-top: 40px; font-size: .85rem; color: var(--leise); }

@media (max-width: 900px) {
  .einstieg .rahmen, .praxis, .kontakt { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .rollen { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 40px; }
  .rolle { grid-row: auto; grid-template-rows: none; gap: 12px; }
  .fragen { grid-template-columns: minmax(0, 1fr); }
  .menue { display: none; }
  .netzwerk { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px; }
  .netzwerk-logo { max-width: 220px; }
  .logos li { width: calc(50% - 6px); max-width: 170px; }
  .kopf .knopf.leicht { margin-left: auto; }
  .einstieg .rahmen { padding-block: 48px; }
  .abschnitt { padding-block: 56px; }
}
@media (max-width: 420px) {
  body { font-size: 16px; }
  .logo { width: 138px; }
  .stand { padding: 18px; }
  .stand .wann { display: none; }
  .skala { font-size: .68rem; }
}