/* Trunsch Health IT – Website. Farben und Schriften aus dem Design-System "Trunsch Health IT". */

:root{--petrol:#0E7C86;--night:#0F171B;--night-ink:#E4EDF1;--night-accent:#49B8C2;--night-muted:#93A5AE;
  --paper:#F6F9FA;--ink:#16232A;--muted:#5B6C75;--line:#D9E2E6;--chip:#EDF3F5}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif;font-size:17px;line-height:1.55}
h1,h2,h3,.display{font-family:"Archivo","Segoe UI",system-ui,sans-serif}
a{color:var(--petrol)}a:hover{color:var(--ink)}
.wrap{max-width:1120px;margin:0 auto;padding:32px}
.eyebrow{font-family:"Archivo",sans-serif;font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--petrol);margin-bottom:8px}

.kopf{background:var(--night);color:var(--night-ink)}
.kopf .leiste{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.marke{display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--night-ink)}
.marke:hover{color:var(--night-ink)}
.marke b{display:block;font-family:"Archivo",sans-serif;font-weight:700;font-size:24px;line-height:1}
.marke span span{display:block;font-family:"Archivo",sans-serif;font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--night-accent);margin-top:4px}
.nav{display:flex;flex-wrap:wrap;gap:32px;font-family:"Archivo",sans-serif;font-weight:600;font-size:15px}
.nav a,.linkknopf{color:var(--night-ink);text-decoration:none;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.nav a:hover,.linkknopf:hover{color:var(--night-accent)}
.held{padding-top:16px;padding-bottom:64px}
.held .eyebrow{color:var(--night-accent);font-size:13px;letter-spacing:.22em;margin-bottom:16px}
.held h1{margin:0;font-weight:700;font-size:clamp(32px,5vw,48px);line-height:1.1;letter-spacing:-.01em;max-width:820px}
.held p{margin:16px 0 0;font-size:19px;max-width:720px}

.produkt{padding-top:64px;scroll-margin-top:16px}
.produkt .titel{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.produkt h2{margin:0;font-weight:700;font-size:0;line-height:1.15}
.produkt h2 span{font-size:32px}
.zwei{color:var(--petrol)}
.produkt .intro{margin:0 0 32px;max-width:760px}
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.karte{background:var(--chip);border:1px solid var(--line);border-radius:8px;padding:16px 16px 32px}
.karte h3{margin:0 0 8px;font-weight:650;font-size:18px}
.karte p{margin:0;font-size:15px;color:var(--muted)}
.weitere{padding-top:64px;scroll-margin-top:16px}
.weitere-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.weiteres{background:#fff;border:1px solid var(--line);border-radius:8px;padding:24px;scroll-margin-top:16px}
.weiteres h3{margin:0 0 8px;font-weight:700;font-size:0;line-height:1.15}
.weiteres h3 span{font-size:24px}
.weiteres p{margin:0;font-size:15px;color:var(--muted)}
.weiteres ul{margin:16px 0 0;padding-left:20px;font-size:15px}
.weiteres li + li{margin-top:4px}
.weiteres .technik{margin-top:16px;font-size:13px}
.technik{margin:16px 0 0;font-family:"IBM Plex Mono",Consolas,monospace;font-size:13px;color:var(--muted)}

.kontakt{background:#fff;border:1px solid var(--line);border-radius:8px;padding:32px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px}
.kontakt .kontakt-text{flex:1 1 420px}
.kontakt h2{margin:0 0 8px;font-weight:700;font-size:26px;line-height:1.2}
.kontakt p{margin:0;color:var(--muted)}
.kontakt .person{display:flex;flex-direction:column;gap:4px}
.kontakt .person b{font-family:"Archivo",sans-serif;font-weight:600;font-size:18px}
.abstand-unten{padding-bottom:64px}

.text{max-width:820px;margin:0 auto;padding:64px 32px}
.text h2{margin:0 0 16px;font-weight:700;font-size:28px;line-height:1.2}
.text h3{margin:32px 0 8px;font-weight:650;font-size:18px}
.text p{margin:0}
.text ul{margin:0;padding-left:24px}
.text section + section{margin-top:64px;padding-top:64px;border-top:1px solid var(--line)}

.fuss{background:var(--night);color:var(--night-muted);font-size:14px}
.fuss .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.fuss nav{display:flex;gap:32px}
.fuss a,.fuss .linkknopf{color:var(--night-ink);text-decoration:underline}

dialog{border:0;border-radius:8px;padding:32px;max-width:560px;width:calc(100% - 32px);color:var(--ink)}
dialog::backdrop{background:rgba(15,23,27,.6)}
dialog .kopfzeile{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
dialog h2{margin:0;font-weight:700;font-size:26px;line-height:1.2}
dialog h3{margin:16px 0 8px;font-weight:650;font-size:16px}
dialog p{margin:0;font-size:16px}
.schliessen{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--chip);border:1px solid var(--line);border-radius:6px;color:var(--ink);cursor:pointer}
:focus-visible{outline:2px solid var(--night-accent);outline-offset:2px}
@media(max-width:640px){.nav{gap:8px 24px}.wrap{padding:24px 20px}.held{padding-bottom:40px}.produkt{padding-top:40px}.kontakt{padding:24px}}