:root{
  --si-ink:#0F2E3D;
  --si-ink-soft:#3C5866;
  --si-muted:#4F6472;
  --si-line:#DCE9EF;
  --si-bg-alt:#F3FAFD;
  --si-accent:#98D4EC;
  --si-accent-dark:#1D6E8C;
  --si-accent-tint:#E9F7FC;
  --si-focus:#1D6E8C;
}
a.si-skip-link{position:absolute;left:-999px;top:auto;background:var(--si-ink);color:#fff;padding:12px 20px;border-radius:0 0 8px 0;z-index:100;font-weight:600;}
a.si-skip-link:focus{left:0;top:0;}
.si-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:8px;font-weight:700;font-size:15px;border:1px solid transparent;}
.si-btn-primary{background:var(--si-accent-dark);color:#fff !important;}
.si-btn-secondary{background:transparent;color:var(--si-ink) !important;border:1px solid var(--si-line);}
.si-btn-onaccent{background:#fff;color:var(--si-accent-dark) !important;}
a.si-btn:focus-visible,.si-btn:focus-visible{outline:3px solid var(--si-focus);outline-offset:2px;}

.si-hero{padding:64px 0;background:linear-gradient(180deg,#fff 0%,var(--si-bg-alt) 100%);}
.si-kicker{font-size:13px;font-weight:700;color:var(--si-accent-dark);text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:12px;}
.si-hero h1{font-size:36px;line-height:1.2;margin:0 0 16px;color:var(--si-ink);}
.si-hero-visual{background:var(--si-ink);border-radius:16px;padding:24px;color:#fff;}
.si-hv-title{color:#C4DBE2;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px;}
.si-hv-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:13.5px;list-style:none;}
.si-hv-row:last-child{border-bottom:none;}
.si-hv-status{color:#8DF0B4;font-weight:700;font-size:12.5px;}
.si-trust-strip{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;}
.si-trust-badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--si-accent-dark);background:var(--si-accent-tint);padding:7px 14px;border-radius:999px;}

.si-bento{display:flex;flex-wrap:wrap;gap:18px;}
.si-card{border:1px solid var(--si-line);border-radius:16px;padding:26px 24px;background:#fff;flex:1 1 260px;}
.si-card.big{flex:1 1 420px;}
.si-card .si-tag{font-size:11px;font-weight:700;color:var(--si-accent-dark);text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:10px;}

.si-pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
@media (max-width:700px){.si-pillars{grid-template-columns:1fr;}}
.si-pillar{border:1px solid var(--si-line);border-radius:16px;padding:26px 22px;background:#fff;flex:1 1 260px;}
.si-pillar .si-pillar-num{font-size:12px;font-weight:800;color:var(--si-accent-dark);letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:10px;}

.si-support-band{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;border:1px solid var(--si-line);border-radius:16px;padding:30px 34px;background:#fff;}

.si-cta-band{background:var(--si-accent);border-radius:20px;padding:44px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;}
.si-cta-band h2{color:var(--si-ink);font-size:24px;margin:0 0 8px;}

@media (max-width:768px){
  .si-cta-band, .si-support-band{flex-direction:column;text-align:center;}
}

/* Site-width container fix for full-bleed sections (margins/edge fix) */
.si-bento, .si-pillars, .si-support-band, .si-cta-band {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .si-bento, .si-pillars, .si-support-band, .si-cta-band {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Navigation dropdown: fix low-contrast text (AA) and add depth/definition */
#menu .sub-menu {
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(15,46,61,0.12), 0 2px 6px rgba(15,46,61,0.08);
  border-top: 3px solid var(--si-accent-dark);
}
#menu .sub-menu a {
  color: var(--si-ink-soft) !important;
  font-weight: 600;
}
#menu .sub-menu a:hover,
#menu .sub-menu a:focus {
  background: var(--si-accent-tint) !important;
  color: var(--si-accent-dark) !important;
}

/* Hero-Row an den gemeinsamen Content-Container (1120px, Rand ~140px bei 1400px Viewport) angleichen */
.vc_row.si-hero {
  max-width: 1150px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}
@media (max-width: 1150px) {
  .vc_row.si-hero {
    max-width: 100% !important;
  }
}

/* Footer: durchgängig dunkles Design wie im Mockup (--ink) */
#footer, #footer-bottom {
  background: #0F2E3D;
}
#footer .container, #footer-bottom .container {
  max-width: 1120px;
  padding-left: 32px;
  padding-right: 32px;
}
@media (max-width: 768px) {
  #footer .container, #footer-bottom .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}
#footer {
  color: #B7CBD3;
  padding: 56px 0 28px;
  font-size: 13.5px;
}
#footer .si-footer-logo {
  font-weight: 800;
  font-size: 18px;
  color: #ffffff;
  margin-bottom: 12px;
}
#footer h4 {
  color: #ffffff;
  font-size: 13px;
  margin-bottom: 14px;
  font-weight: 700;
}
#footer a {
  color: #B7CBD3 !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
#footer a:hover,
#footer a:focus {
  border-bottom-color: currentColor;
}
#footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 22px 0;
  color: #8FA7B1;
  font-size: 12.5px;
}
#footer-bottom a {
  color: #8FA7B1 !important;
}
.si-footer-note {
  font-size: 12px;
  color: #8FA7B1;
  max-width: 640px;
}
.si-footer-legal-links {
  text-align: right;
}
@media (max-width: 768px) {
  .si-footer-legal-links { text-align: left; }
}

/* Header CTA-Buttons (Remote-Support / Kontaktieren Sie uns), analog Mockup */
#menu li.si-header-btn {
  margin-left: 10px;
}
#menu li.si-header-btn > a {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.2;
}
#menu li.si-header-btn-secondary > a {
  background: transparent;
  color: var(--si-ink);
  border: 1px solid var(--si-line);
}
#menu li.si-header-btn-secondary > a:hover,
#menu li.si-header-btn-secondary > a:focus {
  background: var(--si-accent-tint);
}
#menu li.si-header-btn-primary > a {
  background: var(--si-accent-dark);
  color: #ffffff !important;
}
#menu li.si-header-btn-primary > a:hover,
#menu li.si-header-btn-primary > a:focus {
  background: var(--si-ink);
}
#menu li.si-header-btn:hover > a,
#menu li.si-header-btn > a:hover {
  border-bottom: none !important;
}

/* Services-Grid */
.si-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.si-service-card{border:1px solid var(--si-line);border-radius:16px;padding:26px 22px;background:#fff;transition:transform .18s ease, box-shadow .18s ease;}
.si-service-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(15,46,61,0.10);}
.si-service-card h3{font-size:16px;margin:0 0 8px;color:var(--si-ink);}
.si-service-card p{font-size:13.5px;color:var(--si-muted);margin:0 0 14px;}
.si-service-link{font-size:13px;font-weight:700;color:var(--si-accent-dark);text-decoration:none;border-bottom:1px solid transparent;}
.si-service-link:hover, .si-service-link:focus{border-bottom-color:currentColor;}
@media (max-width:860px){ .si-services-grid{grid-template-columns:1fr;} }

/* FAQ Akkordion */
.si-faq{max-width:760px;margin:0 auto;}
.si-faq-item{border:1px solid var(--si-line);border-radius:12px;padding:0;margin-bottom:12px;background:#fff;overflow:hidden;}
.si-faq-item summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:700;font-size:15px;color:var(--si-ink);position:relative;}
.si-faq-item summary::-webkit-details-marker{display:none;}
.si-faq-item summary::after{content:"+";position:absolute;right:22px;top:16px;font-size:20px;color:var(--si-accent-dark);transition:transform .2s ease;}
.si-faq-item[open] summary::after{transform:rotate(45deg);}
.si-faq-item summary:focus-visible{outline:2px solid var(--si-accent-dark);outline-offset:-2px;}
.si-faq-item p{margin:0;padding:0 22px 20px;color:var(--si-ink-soft);font-size:14px;}

/* Kontakt-Section */
.si-kontakt-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;max-width:1000px;margin:0 auto;align-items:start;}
.si-kontakt-block{border:1px solid var(--si-line);border-radius:16px;padding:26px 24px;background:#fff;margin-bottom:20px;}
.si-kontakt-block h3{margin:0 0 12px;font-size:18px;}
.si-kontakt-block p{margin:0 0 12px;font-size:14.5px;color:var(--si-ink-soft);line-height:1.7;}
.si-kontakt-block a{color:var(--si-accent-dark);}
.si-kontakt-qr{border:1px solid var(--si-line);border-radius:16px;padding:22px;background:#fff;text-align:center;}
.si-kontakt-qr img{border-radius:8px;max-width:150px;height:auto;}
.si-kontakt-form{border:1px solid var(--si-line);border-radius:16px;padding:28px 26px;background:#fff;}
.si-kontakt-form h3{margin:0 0 16px;font-size:18px;}
@media (max-width:860px){ .si-kontakt-grid{grid-template-columns:1fr;} }

/* Contact Form 7 Styling */
.si-kontakt-form .wpcf7-form p{margin:0 0 14px;}
.si-kontakt-form .wpcf7-form label{display:block;font-size:13.5px;font-weight:600;color:var(--si-ink);margin-bottom:6px;}
.si-kontakt-form .wpcf7-form input[type="text"],
.si-kontakt-form .wpcf7-form input[type="email"],
.si-kontakt-form .wpcf7-form input[type="tel"],
.si-kontakt-form .wpcf7-form textarea{
  width:100%;box-sizing:border-box;padding:11px 14px;border:1px solid var(--si-line);border-radius:8px;
  font-size:14px;font-family:inherit;color:var(--si-ink);background:#fff;
}
.si-kontakt-form .wpcf7-form input:focus,
.si-kontakt-form .wpcf7-form textarea:focus{outline:2px solid var(--si-accent-dark);outline-offset:1px;border-color:var(--si-accent-dark);}
.si-kontakt-form .wpcf7-form textarea{min-height:120px;resize:vertical;}
.si-kontakt-form .wpcf7-acceptance label{display:flex;align-items:flex-start;gap:8px;font-weight:400;font-size:13px;color:var(--si-muted);}
.si-kontakt-form .wpcf7-acceptance input{margin-top:3px;}
.si-kontakt-form .wpcf7-form-control-wrap{display:block;}
.si-kontakt-form input[type="submit"]{
  background:var(--si-accent-dark);color:#fff;border:none;padding:12px 26px;border-radius:8px;font-weight:700;
  font-size:14px;cursor:pointer;transition:background .15s ease;
}
.si-kontakt-form input[type="submit"]:hover{background:var(--si-ink);}
.si-kontakt-form .wpcf7-not-valid-tip{color:#B3261E;font-size:12.5px;margin-top:4px;}
.si-kontakt-form .wpcf7-response-output{border-radius:8px;font-size:13.5px;margin-top:16px;}


/* Scroll-Progress-Leiste */
.si-scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg, var(--si-accent-dark), var(--si-accent, #98d4ec));z-index:9999;transition:width .1s ease-out;}

/* Scroll-Spy aktive Navigation */
#menu li a.si-nav-active{color:var(--si-accent-dark);}
#menu li a.si-nav-active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--si-accent-dark);border-radius:2px;}
#menu li{position:relative;}

/* Scroll-Reveal */
.si-reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease, transform .55s ease;}
.si-reveal.si-revealed{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .si-reveal{opacity:1;transform:none;transition:none;}
}

/* Cookie-Consent-Banner */
.si-cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;max-width:640px;margin:0 auto;background:var(--si-ink,#0F2E3D);color:#fff;border-radius:14px;padding:18px 20px;box-shadow:0 12px 32px rgba(0,0,0,0.25);z-index:9998;display:flex;flex-wrap:wrap;align-items:center;gap:14px;transition:opacity .3s ease, transform .3s ease;}
.si-cookie-banner p{margin:0;font-size:13.5px;line-height:1.6;flex:1 1 320px;color:rgba(255,255,255,0.9);}
.si-cookie-banner a{color:#fff;text-decoration:underline;}
.si-cookie-banner .si-cookie-accept{flex:0 0 auto;background:var(--si-accent-dark);color:#fff;border:none;padding:10px 22px;border-radius:8px;font-weight:700;font-size:13.5px;cursor:pointer;}
.si-cookie-banner .si-cookie-accept:hover{background:#fff;color:var(--si-ink);}
.si-cookie-banner.si-cookie-hide{opacity:0;transform:translateY(12px);pointer-events:none;}
@media (max-width:600px){ .si-cookie-banner{left:10px;right:10px;bottom:10px;padding:16px;} }

/* Gradient-Akzent-Text */
.si-gradient-text{background:linear-gradient(90deg, var(--si-accent-dark), #2f8fbd, var(--si-accent, #98d4ec));-webkit-background-clip:text;background-clip:text;color:transparent;}

/* Blinkender Live-Status-Punkt */
.si-live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2ecc71;margin-right:8px;position:relative;top:-1px;animation:si-pulse 2s infinite;}
@keyframes si-pulse{
  0%{box-shadow:0 0 0 0 rgba(46,204,113,0.6);}
  70%{box-shadow:0 0 0 8px rgba(46,204,113,0);}
  100%{box-shadow:0 0 0 0 rgba(46,204,113,0);}
}

/* Diagonaler Section-Divider */
.si-divider-row{line-height:0;}
.si-diagonal-divider{width:100%;line-height:0;margin:0;}
.si-diagonal-divider svg{width:100%;height:46px;display:block;}

/* Universeller Card-Hover-Lift */
.si-card, .pillar, .si-faq-item, .si-kontakt-block, .si-kontakt-qr, .si-kontakt-form{
  transition:transform .18s ease, box-shadow .18s ease;
}
.si-card:hover, .pillar:hover, .si-faq-item:hover, .si-kontakt-block:hover, .si-kontakt-qr:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(15,46,61,0.10);
}

/* Einheitlicher Seitenhintergrund (behebt weiße Ränder auf breiten Screens) */
html, body { background: var(--si-bg-alt) !important; }

/* Hero an restliches Design angleichen: zentriert, transparenter Hintergrund (folgt Body-Ton), engerer Abstand */
.si-hero{ background: transparent; padding: 56px 0 40px; }

/* Systemstatus-Karte: heller Card-Stil statt dunkles Dashboard-Widget, passend zu .si-card */
.si-hero-visual{ background:#fff; border:1px solid var(--si-line); box-shadow:none; color:var(--si-ink); text-align:left; }
.si-hv-title{ color:var(--si-accent-dark); display:flex; align-items:center; font-weight:700; }
.si-hv-row{ border-bottom:1px solid var(--si-line); color:var(--si-ink-soft); }
.si-hv-row:last-child{ border-bottom:none; }
.si-hv-status{ color:#1a7f4b; }

/* Header deutlicher vom Hero abheben */
#header{ background:#ffffff !important; box-shadow: 0 2px 12px rgba(15,46,61,0.14) !important; }

/* Services-Grid auf gleiche Breite wie restliche Sektionen begrenzen (war ungewollt volle Breite) */
.si-services-grid{ max-width:1120px; margin-left:auto; margin-right:auto; }

/* ==== Mockup-Fidelity-Pass: Hero zurueck auf 2-spaltiges Mockup-Design ==== */

/* Seitenhintergrund zurueck auf weiss (Mockup nutzt nur .alt-Sektionen mit bg-alt, kein globaler Tint) */
html, body{ background:#ffffff !important; }

/* Hero: Gradient-Hintergrund wie im Mockup, Original-Abstaende */
.si-hero{ background:linear-gradient(180deg, #fff 0%, var(--si-bg-alt) 100%) !important; padding:76px 0 56px !important; }
.si-hero .wpb_column{ display:flex; }
.si-hero .wpb_wrapper{ align-self:center; width:100%; }

/* Hero-Visual: dunkle Karte wie im Mockup (kein helles Card-Redesign) */
.si-hero-visual{ background:var(--si-ink) !important; border:none !important; box-shadow:none !important; color:#fff !important; text-align:left; border-radius:16px; padding:26px; position:relative; overflow:hidden; }
.si-hero-visual::before{ content:""; position:absolute; top:-40px; right:-40px; width:180px; height:180px; background:var(--si-accent); opacity:.16; border-radius:50%; }
.si-hv-title{ color:#C4DBE2 !important; display:flex; align-items:center; font-weight:400; text-transform:uppercase; font-size:11.5px; letter-spacing:.06em; }
.si-hv-row{ border-bottom:1px solid rgba(255,255,255,.14) !important; color:#fff; }
.si-hv-row:last-child{ border-bottom:none !important; }
.si-hv-status{ color:#8DF0B4 !important; }

/* Header: Mockup-Rezept (dezent, transluzent + blur + Trennlinie statt starkem Schatten) */
#header{ background:rgba(255,255,255,.96) !important; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border-bottom:1px solid var(--si-line) !important; box-shadow:none !important; }

/* Nav-Links: Farbe/Gewicht wie im Mockup */
#menu > li > a{ color:var(--si-ink-soft) !important; font-weight:600 !important; }

/* Support-/CTA-Band: Abstaende wie im Mockup */
.si-support-band{ gap:32px !important; padding:32px 36px !important; }
.si-cta-band{ padding:52px !important; }
.si-cta-band h2{ font-size:25px !important; }

/* ==== Impressum/Datenschutz: einheitliches Rechts-Seiten-Design ==== */
.si-page-hero{ background:linear-gradient(180deg, #fff 0%, var(--si-bg-alt) 100%); padding:56px 0 40px; border-bottom:1px solid var(--si-line); }
.si-page-hero .si-kicker{ display:block; margin-bottom:14px; }
.si-page-hero h1{ font-size:33px; color:var(--si-ink); margin:0; line-height:1.2; font-weight:800; letter-spacing:-0.01em; }
.si-legal-wrap{ max-width:1120px; margin:0 auto; padding:0 32px; }
.si-legal-content{ max-width:760px; margin:48px auto 80px; font-size:15.5px; color:var(--si-ink-soft); line-height:1.7; }
.si-legal-content h3{ font-size:22px; color:var(--si-ink); margin:36px 0 14px; font-weight:800; }
.si-legal-content h3:first-child{ margin-top:0; }
.si-legal-content h4{ font-size:16px; color:var(--si-ink); margin:24px 0 10px; font-weight:700; }
.si-legal-content p{ margin:0 0 14px; }
.si-legal-content a{ color:var(--si-accent-dark); text-decoration:underline; }
.si-legal-content ul, .si-legal-content ol{ margin:0 0 14px; padding-left:22px; }
.si-legal-content ul li, .si-legal-content ol li{ margin-bottom:6px; }

/* Alten Theme-Seitentitel-Banner auf Impressum/Datenschutz ausblenden (ersetzt durch si-page-hero) */
.page-id-22 #page-header, .page-id-904 #page-header { display:none !important; }

/* Menü-Items vertikal zentrieren (Buttons sind niedriger als Text-Links) */
#menu.sf-menu{ display:flex !important; align-items:center !important; flex-wrap:nowrap !important; }
#menu.sf-menu > li{ float:none !important; }
#menu li.si-header-btn{ display:flex; align-items:center; }

/* ==== Barrierefreiheits-Fixes (Audit 2026-07-13) ==== */
.si-skip-link{
  position:absolute; left:-999px; top:auto; background:var(--si-ink); color:#fff;
  padding:12px 20px; border-radius:0 0 8px 0; z-index:9999; font-weight:600; text-decoration:none;
}
.si-skip-link:focus{ left:0; top:0; }

/* Sichtbaren Tastatur-Fokus erzwingen (Theme setzt sonst outline:0 auf a:focus) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
#menu a:focus-visible,
#header a:focus-visible,
#footer a:focus-visible,
.si-btn:focus-visible {
  outline: 3px solid var(--si-accent-dark) !important;
  outline-offset: 2px !important;
}

/* Touch-Target-Größe Header-Buttons (WCAG 2.5.5, AAA-Verbesserung) */
#menu li.si-header-btn > a{ padding: 13px 20px !important; }
.si-hp-wrap{position:absolute!important;left:-9999px!important;top:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important;}
.si-consent-hint{color:#B3261E;font-size:13px;margin:8px 0 16px;font-weight:600;}
.wpcf7-form-control.wpcf7-acceptance.si-error{outline:2px solid #B3261E;outline-offset:6px;border-radius:6px;}
.si-hero-visual{box-shadow:0 24px 60px -24px rgba(15,46,61,.55);border:1px solid rgba(255,255,255,.07);}
.si-hv-status.si-progress{color:#F5B942;}
.si-progress-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#F5B942;margin-right:6px;position:relative;top:-1px;animation:si-progress-pulse 1.4s infinite;}
@keyframes si-progress-pulse{
  0%{box-shadow:0 0 0 0 rgba(245,185,66,.55);}
  70%{box-shadow:0 0 0 7px rgba(245,185,66,0);}
  100%{box-shadow:0 0 0 0 rgba(245,185,66,0);}
}
.si-hv-timestamp{color:#7A97A3;font-size:11px;margin:14px 0 0;text-align:right;letter-spacing:.02em;}

/* Hero-Feinschliff (2026-07-14): rechte Status-Karte vertikal zum linken Textblock zentrieren, statt oben "abgeschnitten" schweben zu lassen */
@media (min-width: 1151px){
  .si-hero{ display:flex; align-items:center; flex-wrap:wrap; }
}

/* Hero-Feinschliff (2026-07-14, Teil 2): Übergang vom hero-Block zur naechsten Sektion war zu knapp -
   der farbige Hero-Hintergrund "verschluckt" das bottom-padding optisch, direkt am Farbwechsel sass der Kicker fast buendig an. */
.si-hero + .vc_row-fluid{ padding-top:48px; }