:root { --ink:#202329; --muted:#60656d; --line:#e3e5eb; --accent:#743fc0; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; min-height:100vh; color:var(--ink); background:linear-gradient(125deg,#f0e7fc 0%,#f8f5ff 42%,#eef3ff 76%,#fff 100%); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; line-height:1.6; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
:focus-visible { outline:3px solid #e4b949; outline-offset:4px; }
img { display:block; max-width:100%; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:60px; line-height:1.1; margin-bottom:18px; }
h2 { font-size:38px; line-height:1.15; margin-bottom:16px; }
h3 { font-size:19px; line-height:1.35; margin-bottom:12px; }
.site-header { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px max(24px,calc((100% - 1140px)/2)); background:rgba(255,255,255,.88); backdrop-filter:blur(20px); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.brand-mark { display:grid; place-items:center; width:46px; height:46px; flex-shrink:0; border-radius:12px; color:#fff; background:#783fba; box-shadow:0 3px 10px #783fba26; font-size:18px; font-weight:700; }
.brand strong { font-size:18px; }
.brand small { display:block; font-size:12px; color:var(--muted); }
.main-nav { display:flex; gap:24px; font-size:14px; }
.main-nav a:hover { color:var(--accent); }
.nav-toggle { display:none; width:42px; height:42px; border:1px solid var(--line); background:#fff; border-radius:5px; }
.nav-toggle span { display:block; width:18px; height:2px; background:var(--ink); margin:4px auto; }
.hero { position:relative; background:transparent; overflow:hidden; }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.13; }
.hero-overlay { position:absolute; inset:0; background:rgba(255,255,255,.35); }
.hero-content { position:relative; max-width:1188px; padding:88px 24px 40px; margin:auto; text-align:center; }
.eyebrow { color:var(--accent); font-size:13px; font-weight:600; margin-bottom:12px; }
.hero-copy { max-width:620px; margin:0 auto 24px; color:#454950; font-size:18px; }
.hero-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 24px; border:1px solid transparent; border-radius:14px; font-size:15px; font-weight:600; line-height:1.4; min-height:48px; text-align:center; transition:background 160ms ease,box-shadow 160ms ease,border-color 160ms ease; touch-action:manipulation; }
.primary { background:linear-gradient(180deg,#814bd0,#6932b3); color:#fff; border-color:#713abd; box-shadow:inset 0 1px 0 #ffffff26,0 3px 8px #54228e20; }
.primary:hover { background:linear-gradient(180deg,#7540c2,#5e2a9f); box-shadow:inset 0 1px 0 #ffffff26,0 5px 12px #54228e30; }
.secondary { background:#ffffffdc; color:#4d2c76; border-color:#bca9d2; box-shadow:0 2px 5px #30204008; }
.secondary:hover { background:#f0e7fb; border-color:#9472bd; }
.button:active:not(:disabled) { box-shadow:inset 0 2px 5px #0002; }
.button:focus-visible,.nav-toggle:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.button:disabled { box-shadow:none; opacity:.6; cursor:wait; }
.hero-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:32px 0 0; padding-top:24px; border-top:1px solid #dcdfe8; }
.hero-metrics dt { font-size:20px; font-weight:700; color:var(--accent); }
.hero-metrics dd { margin:5px 0 0; font-size:13px; color:var(--muted); }
.trust-strip { display:flex; flex-wrap:wrap; justify-content:center; gap:12px 34px; padding:16px 24px; background:transparent; color:#555b63; font-size:13px; border-top:1px solid var(--line); }
.section { max-width:1188px; margin:0 auto; padding:80px 24px; }
.intro { display:grid; grid-template-columns:1fr 1fr; gap:64px; color:var(--ink); padding-bottom:12px; }
.intro .eyebrow,.section-heading > .eyebrow,.row-heading .eyebrow { color:var(--accent); }
.section-heading { color:var(--ink); margin-bottom:32px; }
.service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.service-card,.reference-card { padding:40px; border:1px solid #ececf0; border-radius:28px; background:#fff; box-shadow:0 4px 20px #1d1d1f06; min-width:0; transition:box-shadow 180ms ease; }
.service-card:hover,.reference-card:hover { box-shadow:0 12px 32px #29223c20; }
.service-card p,.reference-card p { color:var(--muted); font-size:15px; margin-bottom:0; }
.service-icon { display:inline-block; color:var(--accent); font-weight:700; font-size:13px; margin-bottom:18px; }
.section-copy { max-width:720px; color:var(--muted); font-size:14px; }
.filter-group { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.filter { background:#fff; color:#343a40; border:1px solid #fff; border-radius:6px; padding:10px 18px; min-height:44px; font-size:14px; }
.filter.active { background:#343a40; color:#fff; border-color:#343a40; }
.filter:hover { border-color:#343a40; }
.reference-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.reference-card { border-top:3px solid #d9c9ed; }
.reference-card.is-hidden { display:none; }
.reference-card .reference-sector { margin-bottom:12px; color:var(--accent); font-size:13px; font-weight:600; }
.reference-card ul { padding-left:18px; margin:18px 0 0; font-size:14px; color:#444b54; }
.reference-card li { margin-top:5px; }
.reference-card li::marker { color:#299b51; }
.timeline { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; list-style:none; padding:0; margin:0; color:var(--ink); }
.timeline li { border-top:1px solid #d2d2d7; padding-top:20px; min-width:0; }
.timeline span { display:block; font-size:14px; margin-bottom:16px; }
.timeline p { font-size:15px; }
.contact { max-width:none; background:transparent; }
.contact-panel { max-width:1140px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:72px; }
.contact p { color:var(--muted); }
address { display:grid; gap:8px; font-style:normal; margin-top:24px; font-size:15px; }
address a { color:var(--accent); font-weight:600; }
.contact-form { display:grid; gap:16px; }
.contact-form label { display:grid; gap:6px; font-size:14px; font-weight:600; }
.contact-form input,.contact-form textarea { width:100%; min-width:0; padding:11px 12px; border:1px solid #ccd0d9; border-radius:5px; background:#fafbfc; }
.contact-form textarea { resize:vertical; }
.contact-form input,.contact-form textarea { border-radius:10px; }
.contact-form .button { justify-self:start; }
.form-note { font-size:12px; margin:0; }
.site-footer { display:flex; justify-content:space-between; gap:24px; padding:24px max(24px,calc((100% - 1140px)/2)); color:var(--muted); font-size:13px; }
.site-footer p { margin:0; }
.site-footer div { display:flex; gap:24px; }
@media(max-width:920px) {
.nav-toggle { display:block; }
.main-nav { display:none; position:absolute; top:100%; left:0; right:0; background:#fff; padding:16px 24px; border-bottom:1px solid var(--line); }
.main-nav.open { display:flex; flex-direction:column; gap:0; }
.main-nav a { padding:12px 0; }
.service-grid,.timeline { grid-template-columns:repeat(2,minmax(0,1fr)); }
.contact-panel { gap:32px; }
}
@media(max-width:600px) {
h1 { font-size:34px; } h2 { font-size:25px; }
.site-header { padding:12px 18px; }
.hero-content { padding:32px 20px; }
.hero-copy { font-size:16px; }
.hero-metrics { gap:12px; margin-top:24px; padding-top:18px; }
.hero-metrics dt { font-size:15px; }
.hero-metrics dd { font-size:11px; overflow-wrap:anywhere; }
.trust-strip { gap:8px 18px; }
.section { padding:32px 20px; }
.intro,.contact-panel,.service-grid,.reference-grid { grid-template-columns:1fr; gap:18px; }
.service-card,.reference-card { padding:24px; border-radius:20px; }
.hero-metrics { grid-template-columns:1fr; text-align:left; gap:14px; }
.hero-metrics div { display:grid; grid-template-columns:110px 1fr; gap:12px; align-items:baseline; }
.hero-metrics dd { font-size:13px; margin:0; overflow-wrap:normal; }
.hero-actions .button { flex:1 1 180px; }
.filter-group { gap:8px; }
.filter { padding:10px 14px; }
.contact-form .button { width:100%; }
.timeline { grid-template-columns:1fr; }
.brand strong { font-size:17px; }
.site-footer { flex-direction:column; padding:24px 20px; gap:12px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .service-card,.reference-card { transition:none; } }
.form-trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
button:disabled { opacity:.65; cursor:wait; }
.audience-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.audience-link h3 { display:flex; justify-content:space-between; gap:16px; }
.audience-link h3 span { color:var(--accent); }
.business-area { background:transparent; }
.business-area .virtualization { padding-top:24px; }
.theme-toggle { position:relative; isolation:isolate; flex-shrink:0; width:88px; height:44px; padding:3px; border:1px solid #dcd6e8; border-radius:24px; background:#eeeaf4; color:#71677f; display:grid; grid-template-columns:1fr 1fr; align-items:center; box-shadow:inset 0 1px 3px #30204008; touch-action:manipulation; }
.theme-thumb { position:absolute; z-index:0; left:3px; top:3px; width:38px; height:36px; border-radius:20px; background:#fff; box-shadow:0 2px 6px #38244420; transition:transform 180ms ease,background 180ms ease; }
.theme-symbol { position:relative; z-index:1; display:grid; place-items:center; line-height:1; font-family:Arial,sans-serif; font-size:24px; }
.theme-sun { color:#743fc0; }
.theme-moon { font-size:27px; }
.theme-toggle:hover { border-color:#9c7ac7; }
.theme-toggle:focus-visible { outline:3px solid #9e75d6; outline-offset:4px; }
[data-theme="dark"] .theme-toggle { background:#25222e; border-color:#51465f; color:#a49aad; }
[data-theme="dark"] .theme-thumb { transform:translateX(42px); background:#7543b3; box-shadow:0 2px 8px #0004; }
[data-theme="dark"] .theme-sun { color:#a49aad; }
[data-theme="dark"] .theme-moon { color:#fff; }
@media(prefers-reduced-motion:reduce) { .theme-thumb { transition:none; } }
@media(max-width:380px) { .site-header { padding-left:12px; padding-right:12px; gap:8px; } .site-header .brand small { display:none; } .site-header .brand-logo { width:32px; height:32px; } .site-header .brand strong { font-size:13px; } }
:root { color-scheme:light; }
:root[data-theme="dark"] { color-scheme:dark; --ink:#f5f5f7; --muted:#b4b4bf; --line:#3b3b43; --accent:#c3a0ff; }
[data-theme="dark"] body { background:linear-gradient(125deg,#30213f 0%,#231e30 42%,#1e2739 76%,#1c1c1e 100%); }
[data-theme="dark"] .site-header { background:rgba(28,28,30,.92); }
[data-theme="dark"] .hero,[data-theme="dark"] .contact { background:transparent; }
[data-theme="dark"] .hero-copy { color:#c5c5ce; }
[data-theme="dark"] .hero-metrics { border-color:var(--line); }
[data-theme="dark"] .trust-strip { background:transparent; color:var(--muted); }
[data-theme="dark"] .service-card,[data-theme="dark"] .reference-card { background:#262629; border-color:#39393f; box-shadow:0 8px 24px #0002; }
[data-theme="dark"] .expertise-main { background:#101820; }
[data-theme="dark"] .business-area { background:transparent; }
[data-theme="dark"] .main-nav,[data-theme="dark"] .nav-toggle { background:#1c1c1e; color:var(--ink); }
[data-theme="dark"] .secondary { background:#302a3b; color:#f0e5ff; border-color:#78638f; box-shadow:inset 0 1px 0 #ffffff0a; }
[data-theme="dark"] .secondary:hover { background:#40324f; border-color:#ac8ccd; }
[data-theme="dark"] .primary { background:linear-gradient(180deg,#d2b5ff,#b78aee); color:#251338; border-color:#d7beff; box-shadow:inset 0 1px 0 #ffffff40,0 3px 10px #0003; }
[data-theme="dark"] .primary:hover { background:linear-gradient(180deg,#dfcaff,#c6a0f5); box-shadow:inset 0 1px 0 #ffffff50,0 5px 14px #0004; }
[data-theme="dark"] .filter { background:#302a3b; color:#f0e5ff; border-color:#78638f; }
[data-theme="dark"] .filter.active { background:#c3a0ff; color:#251338; border-color:#c3a0ff; }
.nav-toggle { border-radius:12px; }
@media(prefers-reduced-motion:reduce) { .button { transition:none; } }
[data-theme="dark"] .contact-form input,[data-theme="dark"] .contact-form textarea { background:#262629; color:var(--ink); border-color:#48484f; }
[data-theme="dark"] .timeline li { border-color:var(--line); }
[data-theme="dark"] .reference-card .reference-sector { color:var(--accent); }
[data-theme="dark"] .reference-card ul { color:var(--muted); }
[data-theme="dark"] .legal-notice { background:#3a3021; color:#f3d49d; }
@media(max-width:920px) { .nav-toggle { margin-left:auto; } .site-header { gap:12px; } }
@media(max-width:600px) { .audience-grid { grid-template-columns:1fr; } .brand small { font-size:11px; } .brand { gap:8px; } .brand-logo { width:40px; height:40px; } .brand strong { font-size:15px; } }
.private-contact { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:28px; }
.private-contact p { max-width:600px; margin:0; color:var(--muted); }
.private-contact .button { flex-shrink:0; }
@media(max-width:600px) { .private-contact { align-items:stretch; flex-direction:column; } }
.legal-page { max-width:860px; min-height:75vh; overflow-wrap:anywhere; }
.legal-page section { padding:28px 0; border-bottom:1px solid var(--line); }
.legal-page h2 { font-size:24px; }
.legal-page a { color:var(--accent); text-decoration:underline; }
.legal-notice { padding:18px 22px; background:#fff4d9; color:#604714; border-radius:12px; }
.brand-logo { width:48px; height:48px; object-fit:contain; border-radius:10px; }
.hero-subtitle { font-size:28px; font-weight:600; line-height:1.2; margin-bottom:18px; }
.hero-metrics { margin-top:56px; }
.service-card h3 { font-size:25px; }
.service-card p { font-size:16px; line-height:1.7; }
.expertise-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:24px; }
.expertise-main { grid-row:span 2; background:#101820; color:#fff; display:flex; flex-direction:column; justify-content:center; }
.expertise-main h3 { font-size:36px; }
.expertise-main p { color:#c6c9ce; }
.expertise-main .service-icon { color:#c1a1f1; }
.tech-list { margin:30px 0 0; padding:0; list-style:none; }
.tech-list li { border-top:1px solid #ffffff20; padding:12px 0; font-size:15px; color:#e4e4e9; }
@media(max-width:600px) {
  .hero-content { padding:48px 20px 40px; }
  .hero-subtitle { font-size:23px; }
  .hero-metrics { display:none; }
  .section { padding:48px 20px; }
  .expertise-grid { grid-template-columns:1fr; gap:18px; }
  .expertise-main { grid-row:auto; }
  .expertise-main h3 { font-size:30px; }
  .service-card h3 { font-size:23px; }
}
/* Wendekarten */
.flip-card { display:grid; transform-style:preserve-3d; transition:transform 600ms cubic-bezier(.2,.7,.2,1),box-shadow 180ms ease; }
.flip-card.flip-ready { cursor:pointer; }
.flip-face { grid-area:1 / 1; min-width:0; display:flex; flex-direction:column; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.flip-back { transform:rotateY(180deg); }
.flip-card.is-flipped { transform:perspective(1400px) rotateY(180deg); }
.flip-card:not(.is-flipped) { transform:perspective(1400px) rotateY(0deg); }
.expertise-main.flip-card .flip-face { justify-content:center; }
.flip-button { align-self:flex-start; display:inline-flex; align-items:center; gap:6px; margin-top:20px; padding:8px 0; border:0; background:none; color:var(--accent); font-size:14px; font-weight:600; }
.flip-button span { font-size:17px; line-height:1; }
.flip-button:hover { text-decoration:underline; }
.flip-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; margin-top:auto; padding-top:20px; }
.flip-actions .flip-button { margin-top:0; }
.flip-back p { white-space:normal; }
.expertise-main .flip-button { color:#c1a1f1; }
@media(prefers-reduced-motion:reduce) { .flip-card { transition:none; } }
/* Hinweisbalken für angemeldete Admins */
.admin-bar { position:relative; z-index:30; display:flex; flex-wrap:wrap; justify-content:center; gap:4px 18px; padding:8px 16px; background:#2b1a44; color:#f1e8ff; font-size:13px; text-align:center; }
.admin-bar a { color:#fff; font-weight:600; text-decoration:underline; }
/* Wartungsseite */
.maintenance { max-width:620px; min-height:100vh; margin:auto; padding:48px 24px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.maintenance .brand-logo { width:72px; height:72px; margin-bottom:28px; }
.maintenance h1 { font-size:44px; }
.maintenance p { color:var(--muted); font-size:18px; }
.maintenance a { color:var(--accent); font-weight:600; }
@media(max-width:600px) { .maintenance h1 { font-size:30px; } }

/* Präzise, skalierbare Theme-Icons */
.theme-symbol svg { display:block; width:21px; height:21px; }
.theme-sun { color:#d88b00; }
.theme-moon { color:#51407f; }
[data-theme="dark"] .theme-moon { color:#fff; }

/* Sprachumschalter: ergänzend, ohne bestehende Layoutregeln zu ersetzen */
.itb-language-switch{display:inline-flex;align-items:center;gap:.3rem;margin-inline:.55rem;font-size:.83rem;font-weight:700;white-space:nowrap}.itb-language-switch button{background:transparent;border:0;color:inherit;opacity:.55;cursor:pointer;font:inherit;padding:.35rem .25rem}.itb-language-switch button[aria-pressed="true"]{opacity:1;text-decoration:underline;text-underline-offset:4px}.itb-language-switch button:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}

/* Mobile header: brand/menu in row one; theme and language centered side by side in row two. */
@media (max-width: 600px) {
  .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 12px;
    align-items: center;
    justify-content: stretch;
  }
  .site-header .brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
  }
  .site-header .brand > span { min-width: 0; }
  .site-header .brand strong { display: block; overflow: hidden; text-overflow: ellipsis; }
  .site-header .nav-toggle {
    grid-column: 2;
    grid-row: 1;
    margin-left: 0;
    justify-self: end;
    flex-shrink: 0;
  }
  .site-header .theme-toggle {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
    margin: 0;
  }
  .site-header .itb-language-switch {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin: 0;
  }
  .site-header .main-nav { grid-column: 1 / -1; }
  .site-header { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-header .brand { grid-column: 1 / -1; padding-right: 56px; }
  .site-header .nav-toggle { grid-column: 2; grid-row: 1; }
}

/* Language switch: same segmented-pill appearance as the existing theme toggle. */
.itb-language-switch {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 88px;
  height: 44px;
  padding: 3px;
  gap: 0;
  margin-inline: .55rem;
  border: 1px solid #dcd6e8;
  border-radius: 24px;
  background: #eeeaf4;
  box-shadow: inset 0 1px 3px #30204008;
  white-space: nowrap;
  flex-shrink: 0;
}
.itb-language-switch::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 3px;
  left: 3px;
  width: calc((100% - 6px) / 2);
  height: calc(100% - 6px);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 2px 6px #38244420;
  transform: translateX(0);
  transition: transform 180ms ease, background 180ms ease;
}
.itb-language-switch:has(button[data-lang="en"][aria-pressed="true"])::before {
  transform: translateX(100%);
}
.itb-language-switch button {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: #71677f;
  opacity: 1;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.itb-language-switch button[aria-pressed="true"] {
  color: #743fc0;
  opacity: 1;
  text-decoration: none;
}
.itb-language-switch > span[aria-hidden="true"] { display: none; }
.itb-language-switch button:focus-visible { outline: 2px solid #9e75d6; outline-offset: -3px; }
[data-theme="dark"] .itb-language-switch { background: #25222e; border-color: #51465f; }
[data-theme="dark"] .itb-language-switch::before { background: #7543b3; box-shadow: 0 2px 8px #0004; }
[data-theme="dark"] .itb-language-switch button { color: #a49aad; }
[data-theme="dark"] .itb-language-switch button[aria-pressed="true"] { color: #fff; }
@media (max-width: 600px) {
  .site-header .itb-language-switch { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .itb-language-switch::before { transition: none; }
}