/* harmssen-harms.de – Markendesign (siehe buchhaltung/branding.py) */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(../fonts/IBMPlexSans-Regular.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(../fonts/IBMPlexSans-Medium.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(../fonts/IBMPlexSans-SemiBold.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(../fonts/IBMPlexMono-Regular.woff2) format("woff2")}
:root{--nordblau:#163A5F;--nordblau-dunkel:#0F2A46;--tuerkis:#1FA89E;--tuerkis-dunkel:#0F7F78;--tinte:#14202B;--stein:#6B7785;--nebel:#F3F5F8;--linie:#DDE3EA;--weiss:#fff;--radius:14px;--max:1120px}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:17px/1.6 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--tinte);background:var(--weiss)}
a{color:var(--tuerkis-dunkel)}img,svg{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
h1,h2,h3{color:var(--nordblau);letter-spacing:-.01em;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(34px,5vw,54px);font-weight:600}h2{font-size:clamp(26px,3.2vw,36px);font-weight:600}h3{font-size:20px;font-weight:600;margin-bottom:.35em}
p{margin:0 0 1em}.lead{font-size:clamp(18px,2vw,21px);color:#3B4A59;max-width:40em}
.eyebrow{display:block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tuerkis-dunkel);font-weight:600;margin-bottom:14px}
.hh{color:var(--tuerkis)}
.btn{display:inline-block;padding:13px 22px;border-radius:10px;font-weight:600;text-decoration:none;border:1.5px solid transparent;transition:transform .12s,background .12s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--tuerkis);color:#fff}.btn-primary:hover{background:var(--tuerkis-dunkel)}
.btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-outline{border-color:var(--nordblau);color:var(--nordblau)}.btn-outline:hover{background:var(--nebel)}
/* Kopf */
header.top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linie)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--nordblau)}
.logo svg{height:36px;width:36px}.logo b{font-weight:600;font-size:18px;line-height:1.1;display:block;letter-spacing:-.2px}.logo small{display:block;font-size:10px;letter-spacing:.2em;color:var(--stein);text-transform:uppercase}
nav.haupt{display:flex;gap:6px;align-items:center}
nav.haupt a{color:var(--tinte);text-decoration:none;font-weight:500;padding:8px 12px;border-radius:8px;font-size:15.5px}nav.haupt a:hover{background:var(--nebel)}
nav.haupt a.cta{background:var(--nordblau);color:#fff;margin-left:6px}nav.haupt a.cta:hover{background:var(--nordblau-dunkel)}
.menu-btn{display:none;background:none;border:1px solid var(--linie);border-radius:8px;padding:8px 10px;font:inherit;color:var(--nordblau)}
/* Hero */
.hero{background:linear-gradient(160deg,var(--nordblau) 0%,var(--nordblau-dunkel) 100%);color:#fff;position:relative;overflow:hidden}
.hero .wrap{padding:96px 24px 88px;position:relative}
.hero h1{color:#fff;max-width:14em}.hero .lead{color:#C9D3DE}
.hero .aktionen{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero .muster{position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:min(46vw,520px);opacity:.10;pointer-events:none}
.hero .fakten{display:flex;gap:28px;flex-wrap:wrap;margin-top:48px;padding-top:28px;border-top:1px solid rgba(255,255,255,.14);color:#C9D3DE;font-size:15px}
.hero .fakten b{display:block;color:#fff;font-size:17px;font-weight:600}
/* Abschnitte */
section{padding:88px 0}section.grau{background:var(--nebel)}
.kopf{max-width:44em;margin-bottom:40px}
.karten{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.karte{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:26px 26px 22px;position:relative}
.karte::before{content:"";position:absolute;left:26px;top:0;width:36px;height:3px;background:var(--tuerkis);border-radius:0 0 3px 3px}
.karte p{color:#3B4A59;font-size:15.5px;margin:0}
.karte .ico{width:40px;height:40px;border-radius:10px;background:var(--nebel);display:grid;place-items:center;margin-bottom:14px;color:var(--nordblau)}
.schritte{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));counter-reset:s}
.schritt{padding:22px 24px;border-left:3px solid var(--tuerkis);background:#fff;border-radius:0 var(--radius) var(--radius) 0}
.schritt .nr{font-family:"IBM Plex Mono",monospace;color:var(--tuerkis-dunkel);font-size:13px;letter-spacing:.1em}
.schritt p{font-size:15.5px;color:#3B4A59;margin:0}
.zwei{display:grid;gap:48px;grid-template-columns:1.1fr .9fr;align-items:start}
.liste{list-style:none;padding:0;margin:0}.liste li{padding:10px 0 10px 30px;position:relative;border-bottom:1px solid var(--linie)}
.liste li::before{content:"";position:absolute;left:0;top:19px;width:16px;height:3px;background:var(--tuerkis);border-radius:2px}
.hinweis{background:#fff;border:1px solid var(--linie);border-radius:var(--radius);padding:22px 24px;font-size:15.5px;color:#3B4A59}
.hinweis b{color:var(--nordblau)}
/* Kontakt */
.kontakt{background:var(--nordblau);color:#fff}
.kontakt h2{color:#fff}.kontakt .lead{color:#C9D3DE}
.kontakt .zwei{grid-template-columns:1fr 1fr}
.kontakt dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 22px;font-size:17px}
.kontakt dt{color:#8FB8E6;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding-top:5px}
.kontakt dd{margin:0}.kontakt dd a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.kontakt dd a:hover{border-color:var(--tuerkis)}
/* Fuß */
footer{padding:36px 0;font-size:14px;color:var(--stein);border-top:1px solid var(--linie)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
footer a{color:var(--stein);text-decoration:none;margin-right:18px}footer a:hover{color:var(--nordblau)}
/* Textseiten */
.text{max-width:46em}.text h1{font-size:clamp(30px,4vw,42px);margin-top:40px}.text h2{font-size:22px;margin-top:2em}.text h3{font-size:18px;margin-top:1.6em}
.text address{font-style:normal;background:var(--nebel);padding:18px 22px;border-radius:12px;border-left:3px solid var(--tuerkis)}
.text p,.text li{font-size:16.5px}
@media (max-width:880px){.zwei,.kontakt .zwei{grid-template-columns:1fr}.hero .muster{display:none}section{padding:64px 0}.hero .wrap{padding:72px 24px 64px}}
@media (max-width:720px){nav.haupt{display:none;position:absolute;left:0;right:0;top:72px;background:#fff;flex-direction:column;align-items:stretch;padding:12px 24px 18px;border-bottom:1px solid var(--linie)}nav.haupt.offen{display:flex}nav.haupt a.cta{margin:8px 0 0}.menu-btn{display:inline-block}}
@media print{header.top,.hero .aktionen,footer a{display:none}}

/* Kontaktformular */
.formular{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:24px;display:grid;gap:14px}
.formular label{display:grid;gap:6px;font-size:13px;color:#C9D3DE;font-weight:500}
.formular input,.formular textarea{font:inherit;font-size:16px;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:9px;padding:11px 12px;width:100%}
.formular input:focus,.formular textarea:focus{outline:2px solid var(--tuerkis);outline-offset:0;border-color:var(--tuerkis)}
.formular textarea{resize:vertical;min-height:120px}
.formular .opt{color:#8FB8E6;font-weight:400}
.formular .klein{font-size:12.5px;color:#C9D3DE;margin:0}.formular .klein a{color:#fff}
.formular .btn{justify-self:start}
.ht{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Symbole der Leistungskarten: zeichnen sich beim Einblenden, bewegen sich beim Überfahren */
.karte .ico{overflow:visible;transition:background .25s,color .25s,transform .25s}
.karte:hover .ico{background:var(--nordblau);color:#fff;transform:translateY(-2px)}
.ic .z{stroke-dasharray:60;stroke-dashoffset:60}
.karte.sichtbar .ic .z{animation:zeichnen .9s cubic-bezier(.4,0,.2,1) forwards}
.karte.sichtbar:nth-child(2) .ic .z{animation-delay:.08s}.karte.sichtbar:nth-child(3) .ic .z{animation-delay:.16s}
.karte.sichtbar:nth-child(4) .ic .z{animation-delay:.24s}.karte.sichtbar:nth-child(5) .ic .z{animation-delay:.32s}.karte.sichtbar:nth-child(6) .ic .z{animation-delay:.4s}
@keyframes zeichnen{to{stroke-dashoffset:0}}
/* Support: Lupe pendelt, Zeiger dreht */
.ic-support .lupe{transform-origin:11px 11px}.karte:hover .ic-support .lupe{animation:pendeln 1.4s ease-in-out infinite}
.ic-support .zeiger{transform-origin:11px 11px}.karte:hover .ic-support .zeiger{animation:drehen 1.4s linear infinite}
@keyframes pendeln{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes drehen{to{transform:rotate(360deg)}}
/* Netzwerk: Signalbalken wachsen nacheinander */
.ic-netz .balken{transform-origin:center 12px;transform:scaleY(1)}
.karte:hover .ic-netz .b1{animation:wachsen 1.2s ease-in-out infinite}.karte:hover .ic-netz .b2{animation:wachsen 1.2s ease-in-out .2s infinite}.karte:hover .ic-netz .b3{animation:wachsen 1.2s ease-in-out .4s infinite}
@keyframes wachsen{0%,100%{transform:scaleY(.4);opacity:.5}50%{transform:scaleY(1);opacity:1}}
/* Server: LEDs blinken (dauerhaft dezent, beim Überfahren schneller) */
.ic-server .led{stroke:var(--tuerkis);stroke-width:2.6;animation:blinken 2.4s ease-in-out infinite}
.ic-server .l2{animation-delay:1.2s}.karte:hover .ic-server .led{animation-duration:.7s}
@keyframes blinken{0%,100%{opacity:.25}50%{opacity:1}}
/* Datensicherung: Pfeil fällt in die Ablage */
.ic-backup .pfeil{transform-origin:12px 12px}.karte:hover .ic-backup .pfeil{animation:fallen 1.1s ease-in-out infinite}
@keyframes fallen{0%{transform:translateY(-3px);opacity:0}30%{opacity:1}70%{transform:translateY(2px);opacity:1}100%{transform:translateY(3px);opacity:0}}
/* Webseiten: Globus dreht sich */
.ic-web .meridian{transform-origin:12px 12px}.karte:hover .ic-web .meridian{animation:globus 2.4s ease-in-out infinite}
@keyframes globus{0%{transform:scaleX(1)}50%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
/* Hosting: Wolke schwebt, Haken zeichnet sich neu */
.ic-hosting .wolke{transform-origin:12px 12px}.karte:hover .ic-hosting .wolke{animation:schweben 2s ease-in-out infinite}
.karte:hover .ic-hosting .haken{animation:zeichnen 1s ease-out infinite}
@keyframes schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.ic .z{stroke-dasharray:none;stroke-dashoffset:0;animation:none!important}.karte *{animation:none!important}.karte:hover .ico{transform:none}}
@media (hover:none){.karte .ico{color:var(--nordblau)}}