/* ==========================================================================
   Systemhaus IT – style.css
   Design: technisch-vertrauenswürdig. Tiefes Nachtblau + Signal-Bernstein,
   klare Geometrie, großzügige Typo. Bewusst kein generisches Lila-auf-Weiß.
   ========================================================================== */

:root{
  --c-ink:#0b1b2b;          /* Nachtblau, Text & dunkle Flächen */
  --c-ink-2:#13283d;
  --c-deep:#102a43;
  --c-amber:#f5a524;        /* Signalfarbe */
  --c-amber-dk:#d98b0c;
  --c-paper:#fbfaf7;        /* warmes Off-White */
  --c-paper-2:#f1efe9;
  --c-line:#dcd8cf;
  --c-muted:#3f4c57;        /* AAA-fest auf Paper (8.44:1) */
  --c-link:#0a3a5c;         /* AAA-fester Link/Akzenttext auf Hell (11.35:1) */
  --c-white:#ffffff;
  --c-focus:#0a3a5c;        /* Fokusring */
  --maxw:1180px;
  --r:14px;
  --shadow:0 10px 40px -12px rgba(11,27,43,.25);
  --shadow-sm:0 4px 18px -8px rgba(11,27,43,.22);
  --ff-display:"Fraunces",Georgia,"Times New Roman",serif;
  --ff-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
}

/* Fonts: lokal/Fallback-tolerant. Auf Wunsch self-hosten für 100/100. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff-body);
  color:var(--c-ink);
  background:var(--c-paper);
  line-height:1.65;
  font-size:18px;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--ff-display);line-height:1.12;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5vw,3.6rem)}
h2{font-size:clamp(1.5rem,3vw,2.3rem)}
h3{font-size:1.25rem}
a{color:var(--c-link);text-decoration:none}
a:hover{color:var(--c-ink)}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--c-focus);outline-offset:2px;border-radius:3px}
img{max-width:100%;height:auto}

.container{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
.container-narrow{max-width:780px}
.section{padding:clamp(3rem,7vw,5.5rem) 0}
.section-alt{background:var(--c-paper-2)}
.section-title{margin-bottom:.4em}
.section-sub{color:var(--c-muted);max-width:60ch;margin-bottom:2rem}
.muted{color:var(--c-muted)}
.sr-only,.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--c-amber);color:var(--c-ink);padding:.6rem 1rem;z-index:1000}
.skip-link:focus{left:0}

/* --- Buttons --- */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.5rem;border-radius:999px;
  font-weight:600;font-size:1rem;border:2px solid transparent;cursor:pointer;transition:.18s ease;line-height:1}
.btn-primary{background:var(--c-amber);color:var(--c-ink)}
.btn-primary:hover{background:var(--c-amber-dk);color:var(--c-ink);transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:var(--c-line);color:var(--c-ink)}
.btn-ghost:hover{border-color:var(--c-ink);color:var(--c-ink)}
.btn-light{background:var(--c-white);color:var(--c-ink)}
.btn-light:hover{background:var(--c-paper-2);color:var(--c-ink)}
.btn-outline-light{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn-outline-light:hover{border-color:#fff;color:#fff}
.btn-block{display:flex;width:100%;justify-content:center}

/* --- Header --- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(251,250,247,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--c-line)}
.header-inner{display:flex;align-items:center;gap:1.5rem;padding-top:.8rem;padding-bottom:.8rem}
.logo{display:flex;align-items:center;gap:.6rem;font-family:var(--ff-display);font-weight:600;font-size:1.2rem;color:var(--c-ink)}
.logo-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;
  background:var(--c-ink);color:var(--c-amber);font-weight:700;font-family:var(--ff-body)}
.main-nav{margin-left:auto}
.main-nav ul{display:flex;gap:1.4rem;list-style:none;align-items:center}
.main-nav a{color:var(--c-ink);font-weight:600;font-size:1rem}
.main-nav a:hover{color:var(--c-link)}
.nav-cta{background:var(--c-ink);color:#fff!important;padding:.5rem 1rem;border-radius:999px}
.nav-cta:hover{background:var(--c-ink-2)}
.header-phone{display:flex;flex-direction:column;line-height:1.1;text-align:right}
.header-phone-label{font-size:.75rem;color:var(--c-muted)}
.header-phone-num{font-weight:700;font-size:1.05rem;color:var(--c-ink)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:.4rem}
.nav-toggle span:not(.sr-only){width:26px;height:3px;background:var(--c-ink);border-radius:2px}

/* --- Hero --- */
.hero{background:radial-gradient(120% 120% at 80% -10%,var(--c-ink-2),var(--c-ink) 60%);color:#fff;
  position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;opacity:.07;
  background-image:linear-gradient(var(--c-amber) 1px,transparent 1px),linear-gradient(90deg,var(--c-amber) 1px,transparent 1px);
  background-size:42px 42px;mask-image:radial-gradient(70% 70% at 70% 0%,#000,transparent)}
.hero-inner{position:relative;display:grid;grid-template-columns:1.5fr 1fr;gap:3rem;align-items:center;
  padding:clamp(3rem,7vw,5.5rem) 0}
.hero-eyebrow{color:var(--c-amber);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.82rem}
.hero-title{color:#fff;margin:.4rem 0}
.hero-lead{color:#cdd9e5;font-size:1.15rem;max-width:54ch;margin-bottom:1.8rem}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.hero-trust{list-style:none;display:flex;flex-wrap:wrap;gap:1.2rem;color:#aab9c7;font-size:.92rem}
.hero-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);
  padding:1.8rem}
.hero-card h2{color:#fff;font-size:1.4rem;margin-bottom:.5rem}
.hero-card p{color:#cdd9e5;margin-bottom:1.1rem}
.hero-card-alt{font-size:.9rem;margin-top:.9rem;text-align:center}
.hero-card-alt a{color:#ffd27a}

/* --- Page hero (Unterseiten) --- */
.page-hero{background:var(--c-ink);color:#fff;padding:clamp(2.4rem,6vw,4rem) 0}
.page-hero h1{color:#fff}
.page-lead{color:#cdd9e5;max-width:60ch;margin:.8rem 0 1.4rem;font-size:1.12rem}
.breadcrumb{color:#9fb0c0;font-size:.88rem;margin-bottom:1rem}
.breadcrumb a{color:#cdd9e5}

/* --- Grids & Cards --- */
.grid{display:grid;gap:1.4rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r);padding:1.6rem;
  box-shadow:var(--shadow-sm);transition:.2s ease}
.card h2,.card h3{margin-bottom:.4rem}
.service-card{display:block;color:var(--c-ink)}
.service-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--c-amber)}
.service-card p{color:var(--c-muted);margin-bottom:.8rem}
.card-link{color:var(--c-link);font-weight:700}
.benefit h3{color:var(--c-deep)}
.benefit p{color:var(--c-muted)}
.location-card address{font-style:normal;color:var(--c-muted);margin:.6rem 0 1rem;line-height:1.7}
.nap-card address{font-style:normal;line-height:1.8;margin-bottom:1rem}
.nap-card h3{margin:1rem 0 .4rem}

/* --- Chips --- */
.chips{display:flex;flex-wrap:wrap;gap:.7rem}
.chip{background:var(--c-white);border:1px solid var(--c-line);border-radius:999px;padding:.5rem 1.1rem;
  font-weight:600;color:var(--c-ink);font-size:.95rem;transition:.16s}
.chip:hover{border-color:var(--c-amber);color:var(--c-ink)}
.chip--static{cursor:default;background:var(--c-paper-2)}

/* --- Reviews --- */
.review{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r);padding:1.6rem;box-shadow:var(--shadow-sm)}
.stars{color:var(--c-amber);letter-spacing:2px;margin-bottom:.6rem}
.review blockquote{font-size:1.02rem;margin-bottom:1rem}
.review figcaption{color:var(--c-muted);font-size:.9rem;font-weight:600}

/* --- Prose --- */
.prose h2{margin:1.8rem 0 .6rem}
.prose p{margin-bottom:1rem;max-width:70ch}
.check-list{list-style:none;display:grid;gap:.6rem;margin:1rem 0}
.check-list li{padding-left:1.8rem;position:relative}
.check-list li::before{content:"✓";position:absolute;left:0;color:var(--c-link);font-weight:700}

/* --- CTA band --- */
.cta-band{background:linear-gradient(100deg,var(--c-ink),var(--c-deep));color:#fff}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cta-title{color:#fff}
.cta-text{color:#cdd9e5;max-width:48ch;margin-top:.4rem}
.cta-actions{display:flex;gap:1rem;flex-wrap:wrap}

/* --- FAQ --- */
.faq-list{max-width:820px;margin:1.5rem auto 0;display:grid;gap:.8rem}
.faq-item{background:var(--c-white);border:1px solid var(--c-line);border-radius:12px;overflow:hidden}
.faq-item summary{cursor:pointer;padding:1.1rem 1.3rem;font-weight:600;font-size:1.05rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--c-link);font-size:1.5rem;font-weight:700}
.faq-item[open] summary::after{content:"–";color:var(--c-link)}
.faq-answer{padding:0 1.3rem 1.2rem;color:var(--c-muted)}

/* --- Forms --- */
.forms-grid{align-items:start}
.form-card{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r);padding:1.6rem;box-shadow:var(--shadow-sm)}
.form-title{font-size:1.3rem;margin-bottom:1rem}
.form-row{margin-bottom:1rem;display:flex;flex-direction:column;gap:.35rem}
.form-row label{font-weight:600;font-size:.95rem}
.form input,.form textarea{width:100%;padding:.7rem .85rem;border:1.5px solid var(--c-line);border-radius:10px;
  font:inherit;font-size:1rem;background:var(--c-paper)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--c-amber);box-shadow:0 0 0 3px rgba(245,165,36,.18)}
.form-consent label{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-size:.9rem;color:var(--c-muted)}
.form-consent input{width:auto;margin-top:.25rem}
.form-note{font-size:.8rem;color:var(--c-muted);margin-top:.7rem}
.form-msg{padding:.8rem 1rem;border-radius:10px;margin-bottom:1rem;font-weight:600;font-size:.95rem}
.form-msg--ok{background:#e7f6ec;color:#1a7f43}
.form-msg--err{background:#fbe9e9;color:#b3261e}

/* --- Footer --- */
.site-footer{background:var(--c-ink);color:#c3cfdb;padding-top:3rem;font-size:.95rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1.2fr;gap:2rem;padding-bottom:2.5rem}
.logo--footer{color:#fff;margin-bottom:.8rem}
.footer-desc{margin-bottom:.6rem}
.footer-legal{color:#8aa0b3;font-size:.85rem}
.footer-h{color:#fff;font-family:var(--ff-body);font-size:1rem;font-weight:700;margin-bottom:.8rem;letter-spacing:.02em}
.footer-h--mt{margin-top:1.4rem}
.footer-links{list-style:none;display:grid;gap:.5rem}
.footer-links a{color:#c3cfdb}
.footer-links a:hover{color:var(--c-amber)}
.footer-address{font-style:normal;line-height:1.7;margin-bottom:1.1rem}
.footer-address strong{color:#fff}
.footer-address a{color:var(--c-amber)}
.footer-hours{list-style:none;display:grid;gap:.25rem}
.footer-hours li{display:flex;justify-content:space-between;gap:1rem;max-width:240px}
.footer-bar{border-top:1px solid rgba(255,255,255,.1);padding:1.2rem 0}
.footer-bar-inner{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:#8aa0b3}
.footer-bar a{color:#c3cfdb;margin-left:1.2rem}

/* --- Floating contact --- */
.floating-contact{position:fixed;right:1rem;bottom:1rem;z-index:90;display:flex;flex-direction:column;gap:.6rem}
.fc-btn{display:flex;align-items:center;gap:.5rem;background:var(--c-ink);color:#fff;padding:.7rem 1rem;
  border-radius:999px;box-shadow:var(--shadow);font-weight:600;font-size:.95rem}
.fc-call{background:var(--c-amber);color:var(--c-ink)}
.fc-btn:hover{transform:translateY(-2px);color:inherit}

/* --- Cookie banner --- */
.cookie-banner{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:120;background:var(--c-white);
  border:1px solid var(--c-line);border-radius:var(--r);box-shadow:var(--shadow);max-width:560px}
.cookie-inner{padding:1.2rem 1.4rem}
.cookie-inner p{font-size:.92rem;color:var(--c-muted);margin-bottom:1rem}
.cookie-actions{display:flex;gap:.7rem;flex-wrap:wrap}

/* --- Responsive --- */
@media(max-width:980px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .hero-inner{grid-template-columns:1fr}
}
@media(max-width:760px){
  body{font-size:17px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .header-phone{display:none}
  .nav-toggle{display:flex;margin-left:auto}
  .main-nav ul{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;
    background:var(--c-paper);border-bottom:1px solid var(--c-line);padding:1rem;gap:.4rem;display:none}
  .main-nav ul.open{display:flex}
  .main-nav{margin-left:0}
  .cta-inner{flex-direction:column;align-items:flex-start}
  .fc-label{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

/* ==========================================================================
   WCAG AAA – umschaltbarer Lesemodus (<html class="aaa">)
   Erhöht Lesbarkeit gem. AAA (1.4.8): Zeilenhöhe ≥1.5, Absatzabstand,
   keine Blocksatz-Justierung, breitere Wort-/Zeichenabstände, Fokus stark.
   ========================================================================== */
html.aaa body{line-height:1.75;letter-spacing:.012em;word-spacing:.05em}
html.aaa p,html.aaa li{max-width:66ch}
html.aaa .prose p{margin-bottom:1.4rem}
html.aaa *{text-align:left!important}            /* kein Blocksatz */
html.aaa .hero-lead,html.aaa .page-lead{color:#e6eef5} /* noch klarer auf Dunkel */
html.aaa a{text-decoration:underline;text-underline-offset:3px} /* Links nicht nur per Farbe */
html.aaa a:focus-visible,html.aaa button:focus-visible{outline-width:4px}
html.aaa .card,html.aaa .review,html.aaa .form-card{border-width:2px}
html.aaa .btn{border-width:2px}
/* Skip-Link in AAA dauerhaft fokussierbar sichtbar */
html.aaa .skip-link:focus{box-shadow:0 0 0 4px var(--c-focus)}

/* --- Footer-Präferenzen (Toggles) --- */
.footer-prefs{display:flex;gap:.6rem;flex-wrap:wrap}
.pref-btn{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);color:#e6eef5;border-radius:999px;padding:.4rem .9rem;
  font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:.18s}
.pref-btn:hover{background:rgba(255,255,255,.16);color:#fff}
.pref-btn[aria-pressed="true"]{background:var(--c-amber);color:var(--c-ink);border-color:var(--c-amber)}
@media(max-width:760px){.footer-bar-inner{flex-direction:column;align-items:flex-start;gap:.8rem}}