:root{
  --page-bg:#f6f8fc;
  --card-bg:#ffffff;
  --text:#1b2430;
  --muted:#5b6472;
  --brand:#1155cc;
  --brand-soft:#e7f0ff;
  --border:#dbe2ef;
  --danger:#b3261e;
  --danger-soft:#fde8e7;
  --info:#16467a;
  --info-soft:#eaf3ff;
}

*{
  box-sizing:border-box;
}

html, body{
  min-height:100%;
}

body{
  margin:0;
  padding:20px 12px 32px;
  font-family:Inter, "Segoe UI", Roboto, Calibri, Arial, sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  background:linear-gradient(180deg, #f9fbff 0%, var(--page-bg) 100%);
}

h1{
  font-size:clamp(1.5rem, 2.8vw, 2.1rem);
  line-height:1.25;
  margin:0 0 0.6rem;
  color:#0f2a52;
}

h2{
  font-size:clamp(1.15rem, 2.2vw, 1.5rem);
  line-height:1.35;
  margin:1.2rem 0 0.5rem;
  color:#174d86;
}

h3{
  font-size:1.05rem;
}

p{
  margin:0 0 1rem;
}

a{
  color:var(--brand);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:3px solid #ffbf47;
  outline-offset:2px;
}

a img{
  border:none;
}

img{
  max-width:100%;
  height:auto;
}

div.website{
  max-width:1180px;
  margin:0 auto;
}

div.logoRow{
  display:flex;
  justify-content:flex-end;
  margin-bottom:10px;
}

div.logoRow img{
  margin:0;
  max-height:80px;
  width:auto;
}

.skipLink{
  position:absolute;
  left:12px;
  top:-48px;
  z-index:9999;
  padding:8px 12px;
  border-radius:8px;
  background:#0f2a52;
  color:#fff;
  font-weight:600;
}

.skipLink:focus{
  top:8px;
}

.mobileNavToggle{
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  margin:12px 0 0;
  width:46px;
  height:46px;
  padding:0;
  border:1px solid #b9c8df;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
}

.mobileNavToggle span{
  display:block;
  width:20px;
  height:2px;
  background:#1b4f93;
  border-radius:10px;
}

div.header{
  position:relative;
  width:100%;
  min-height:220px;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(10, 30, 60, 0.2);
  background:#0f2a52 url("https://mt-itsolutions.de/src/images/ohneHand.png") center/cover no-repeat;
}

#headFlow{
  width:100%;
  display:block;
  object-fit:cover;
  min-height:220px;
}

.layoutRow{
  display:flex;
  gap:20px;
  justify-content:space-between;
  align-items:flex-start;
  margin-top:16px;
}

div.content{
  flex:1 1 auto;
  min-width:0;
  padding:22px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card-bg);
  box-shadow:0 8px 24px rgba(17, 36, 64, 0.08);
  opacity:1;
}

div.content img{
  border-radius:12px;
  box-shadow:0 8px 22px rgba(17, 36, 64, 0.18);
}

div.nav{
  flex:0 0 380px;
  width:380px;
  min-width:380px;
  margin-left:auto;
  align-self:flex-start;
  position:sticky;
  top:18px;
  max-height:calc(100vh - 36px);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  padding:18px 16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card-bg);
  box-shadow:0 8px 24px rgba(17, 36, 64, 0.08);
}

div.nav ul{
  margin:0;
  padding:0;
  list-style:none !important;
}

div.nav ul li{
  margin:0 0 0.55rem;
  padding-left:0;
  list-style:none !important;
  color:inherit;
  font-size:0.98rem;
}

div.nav ul li::marker{
  content:"";
}

div.nav ul li a{
  display:block;
  white-space:normal;
  word-break:normal;
  overflow-wrap:anywhere;
  color:#1b4f93;
  font-size:1rem;
  font-weight:600;
  padding:0.1rem 0.35rem;
  border-radius:8px;
}

div.nav ul li a.activeNavItem{
  color:#0b3f84;
  background:#e9f2ff;
  font-weight:800 !important;
  text-decoration:underline;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=password],
textarea{
  width:100%;
  max-width:520px;
  padding:0.65rem 0.75rem;
  border:1px solid #c8d3e2;
  border-radius:10px;
  background:#fff;
  font-size:1rem;
  transition:border-color 120ms ease, box-shadow 120ms ease;
}

textarea{
  min-height:120px;
  resize:vertical;
}

input:focus,
textarea:focus{
  border-color:#6ea8ff;
  box-shadow:0 0 0 3px rgba(17, 85, 204, 0.16);
  outline:none;
}

.red{
  color:var(--danger);
}

.error{
  background-color:var(--danger-soft);
  border:1px solid #f0b2ae;
  border-radius:10px;
  min-height:25px;
  padding:10px 12px;
}

.info{
  background-color:var(--info-soft);
  border:1px solid #b6d4ff;
  border-radius:10px;
  min-height:25px;
  padding:10px 12px;
}

#messageArea{
  border-top:2px solid var(--border);
  border-bottom:2px solid var(--border);
  width:100%;
  opacity:1;
}

.errorTextBox{
  background-color:#fff4f4;
}

.errorTextBoxResolved{
  background-color:#ffffff;
}

.sendButton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 1rem;
  border:1px solid #0f4eb9;
  border-radius:10px;
  box-shadow:0 3px 10px rgba(13, 50, 120, 0.2);
  color:#fff;
  background:linear-gradient(180deg, #2b72e4 0%, #1155cc 100%);
  cursor:pointer;
}

.sendButton:hover{
  box-shadow:0 5px 14px rgba(13, 50, 120, 0.25);
  background:linear-gradient(180deg, #3b82f6 0%, #2364d8 100%);
}

div#linkList{
  display:flex;
  flex-wrap:wrap;
  gap:0.35rem 0.85rem;
  margin:0;
  padding:16px 18px 10px;
  border:1px solid #c7d7ee;
  border-top:4px solid #6f98d4;
  border-radius:14px;
  background:linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
  font-size:0.9rem;
  box-shadow:0 14px 30px rgba(17, 36, 64, 0.12);
}

#linkList a.activeFooterItem{
  font-weight:700;
  color:#0b3f84;
  text-decoration:underline;
}

#siteFooter{
  margin-top:46px;
  padding-top:16px;
  border-top:5px solid #2b6bc8;
  background:rgba(235, 243, 255, 0.65);
  border-radius:10px;
}

#userInfoBox{
  color:var(--muted);
  font-size:0.85rem;
  text-align:center;
  margin:0 0 12px;
  padding-top:8px;
  border-top:1px dashed #c7d7ee;
}

div#jsErrorBox{
  background-color:#fff7d7;
  border:1px solid #f0dc8e;
  border-radius:8px;
  min-height:25px;
  padding:6px 10px;
  text-align:center;
  margin:0 auto 12px;
  max-width:1180px;
}

@media (max-width: 980px){
  body{
    padding:14px 10px 24px;
  }

  .layoutRow{
    flex-direction:column;
  }

  div.nav{
    display:none;
    width:100%;
    flex-basis:auto;
    order:-1;
    margin-top:0;
  }

  .mobile-nav-open div.nav{
    display:block;
  }

  .mobileNavToggle{
    display:inline-flex;
  }

  div.logoRow{
    justify-content:center;
  }

  div.logoRow img{
    max-height:68px;
  }

  div.content{
    padding:16px;
  }

  div#linkList{
    display:none;
  }
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}