/* hugener.info - Logo und Violett #382a74 der Hugener Informatik GmbH
   nur HTML/CSS, keine externen Schriften oder Dienste */
:root {
  --bg:#fbfaf7; --flaeche:#ffffff; --hell:#f1efe9; --text:#17212b; --muted:#5a6470; --linie:#e3e0d8;
  --tief:#382a74; --akzent:#382a74; --akzent-text:#ffffff;
  --av1:#382a74; --av2:#5b4b9e; --av3:#6d3a7a; --av4:#2f4a6b; --av5:#4a4f57;
  --radius:14px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#12171d; --flaeche:#19212a; --hell:#161d25; --text:#e8ebef; --muted:#a3adb8; --linie:#2a333e;
  --tief:#b9aef0; --akzent:#a99be6; --akzent-text:#12171d;
  --av1:#5a4aa6; --av2:#7464b8; --av3:#8a5598; --av4:#456a94; --av5:#666b74;
} }
:root[data-theme="dark"] { --bg:#12171d; --flaeche:#19212a; --hell:#161d25; --text:#e8ebef; --muted:#a3adb8; --linie:#2a333e; --tief:#b9aef0; --akzent:#a99be6; --akzent-text:#12171d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
a { color:var(--tief); }
.rahmen { max-width:1080px; margin:0 auto; padding:0 16px; }
@media (min-width:720px) { .rahmen { padding:0 32px; } }

.kopf { position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--linie); }
.kopf-innen { display:flex; align-items:center; justify-content:space-between; height:60px; gap:16px; }
.marke { font-weight:750; font-size:1.15rem; letter-spacing:-0.01em; text-decoration:none; color:var(--text); }
.marke { display:inline-flex; align-items:center; gap:14px; }
.marke img { display:block; height:36px; width:auto; }
.marke .domain { font-size:1rem; color:var(--muted); font-weight:600; border-left:1px solid var(--linie); padding-left:14px; }
.marke .domain span { color:var(--tief); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marke img { background:#fff; border-radius:8px; padding:3px 8px; } }
:root[data-theme="dark"] .marke img { background:#fff; border-radius:8px; padding:3px 8px; }
nav { display:flex; gap:18px; }
nav a { text-decoration:none; color:var(--muted); font-size:0.95rem; }
nav a:hover { color:var(--text); }

.held { padding:56px 0 40px; }
.held-innen { display:grid; gap:32px; align-items:center; }
@media (min-width:860px) { .held-innen { grid-template-columns:1.1fr 0.9fr; padding-top:24px; } }
.dachzeile { text-transform:uppercase; letter-spacing:0.12em; font-size:0.8rem; color:var(--muted); margin:0 0 12px; }
h1 { font-size:clamp(2.1rem, 5vw, 3.4rem); line-height:1.08; letter-spacing:-0.025em; margin:0 0 18px; color:var(--tief); }
.lead { font-size:1.15rem; color:var(--muted); margin:0 0 24px; max-width:36em; }
.lead strong { color:var(--text); }
.schmal { max-width:34em; }
.knopf { display:inline-block; background:var(--akzent); color:var(--akzent-text); text-decoration:none; font-weight:650; padding:12px 20px; border-radius:999px; }
.knopf:hover { filter:brightness(1.05); }
.bild { width:100%; height:auto; max-width:460px; justify-self:center; }

.abschnitt { padding:56px 0; }
.hell { background:var(--hell); }
h2 { font-size:1.35rem; line-height:1.3; margin:0 0 14px; }
h2.gross { font-size:clamp(1.6rem, 3.4vw, 2.2rem); letter-spacing:-0.02em; color:var(--tief); }
.hinweisbox { background:var(--flaeche); border:1px solid var(--linie); border-left:5px solid var(--tief); border-radius:var(--radius); padding:28px; max-width:820px; }
.punkte { padding-left:20px; margin:12px 0 0; }
.punkte li { margin:6px 0; }

.raster { display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); margin-top:28px; }
.raster.drei { grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }
.karte { background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius); padding:20px; }
.karte h3 { margin:14px 0 2px; font-size:1.1rem; }
.karte p { margin:0; color:var(--muted); font-size:0.95rem; }
.avatar { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; color:#fff; font-weight:700; font-size:1.25rem; }
.a1 { background:var(--av1); } .a2 { background:var(--av2); } .a3 { background:var(--av3); } .a4 { background:var(--av4); } .a5 { background:var(--av5); }
.firma { display:flex; flex-direction:column; gap:4px; background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius); padding:22px; text-decoration:none; color:var(--text); transition:border-color .15s; }
.firma:hover { border-color:var(--akzent); }
.firma span { color:var(--muted); font-size:0.95rem; }

.klein { color:var(--muted); font-size:0.92rem; max-width:44em; }
table { width:100%; max-width:820px; border-collapse:collapse; margin-top:12px; font-size:0.95rem; }
th, td { text-align:left; padding:9px 0; border-bottom:1px solid var(--linie); vertical-align:top; }
th { width:38%; font-weight:500; color:var(--muted); padding-right:16px; }
td { word-break:break-word; font-variant-numeric:tabular-nums; }

.fuss { border-top:1px solid var(--linie); padding:28px 0 40px; color:var(--muted); font-size:0.9rem; }

@media (max-width:560px) { nav { display:none; } .marke img { height:30px; } }