:root{
  --science-blue:#0070f3;
  --bg-body:#F2F6FA;
  --bg-card:#FFFFFF;
  --bg-inner:#FAFAFA;
  --border-al:#A9A9A9;
  --radius:14px;
  --gap-card:20px;
  --gap-inner:15px;
  --container:1120px;
  --font-system: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box;}
html, body{height:100%;}
body{
  margin:0;
  font-family:var(--font-system);
  background:var(--bg-body);
  color:#000;
  padding-top: var(--site-header-offset, 0px);
}
a{color:inherit;text-decoration:none;}
a:hover{text-decoration:underline;}
.link-blue{color:var(--science-blue);}
/* Full-bleed header/footer backgrounds; content constrained via .global-container inside */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.site-footer{
  background:#fff;
  border-top:1px solid rgba(0,0,0,.06);
}
.global-container{
  max-width:var(--container);
  margin:0 auto;
  padding: 0 16px;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding: 14px 0;
}
.header-left{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
}
.header-cta{margin-left:auto;}
.brand{
  display:flex; align-items:center;
  gap:12px;
}
.brand img{height:34px; width:auto; display:block;}
.nav{
  display:flex; flex-direction:column; gap:4px;
  align-items:flex-start;
  font-size:12px;
}
.nav-row{
  display:flex;
  column-gap:16px;
  row-gap:4px;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:baseline;
}
.nav a{font-weight:400;}
.nav a.active{font-weight:700;color:var(--science-blue);}

/* Optional visual consistency: top-level items with submenus show link hover underline too */
.nav .nav-row:first-child > a[href*="pki/index.html"]:hover,
.nav .nav-row:first-child > a[href*="microsoft/index.html"]:hover,
.nav .nav-row:first-child > a[href*="pki/index.html"]:focus-visible,
.nav .nav-row:first-child > a[href*="microsoft/index.html"]:focus-visible{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Anchor offsets for sticky header (z. B. Kontakt aufnehmen -> #kontaktstart) */
#kontaktstart{ scroll-margin-top: 96px; }
main .global-container{
  padding-top: 16px;
  padding-bottom: 80px;
}
.page-flow{
  display:flex;
  flex-direction:column;
}
.block{
  margin-top: 0; /* set via modifiers */
}
/* spacing rules: only top spacing per block so they don't add */
.mt-headline{ margin-top:100px; }
.mt-subhead{ margin-top:80px; }
.mt-text{ margin-top:40px; }

.mt-card{ margin-top:20px; }
.mt-team{ margin-top:20px; }
.mt-partners{ margin-top:20px; }
.mt-inner{ margin-top:10px; }
.mt-pill{ margin-top:15px; }

/* Image cards (Team + Partner) */
.image-card{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.image-card img{
  max-width: 100%;
  height: auto;
  display: block;
}
.person-card img{
  border-radius: 14px;
}
.person-card{
  justify-content: flex-start;


}

.card-caption{
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: rgba(0,0,0,0.75);
  line-height: 1.2;
  margin-top: 2px;
}

/* Caption typography: bold name, regular role */
.card-caption .caption-name{ font-weight: 700; }
.card-caption .caption-role{ font-weight: 500; }

/* Team captions on Kontakt: left aligned within the card */
.mt-team .card-caption{
  text-align: left;
  width: 100%;
  align-self: stretch;
}
.mt-team .card-caption .caption-role{
  color: rgba(0,0,0,0.68);
  margin-top: 4px;
}


.partners-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  align-items: center;
}
.partner-card{
  padding: 18px;
}
.partner-card img{
  max-height: 64px;
  width: auto;
}

/* FAQ: keep consistent card spacing (same scheme as .mt-card) when cards are rendered in a simple vertical list */
#faqList .faq-item + .faq-item{ margin-top: var(--gap-card); }

.h1{
  font-size:32px;
  font-weight:700;
  line-height:1.18;
  margin:0;
}
.h2{
  font-size:24px;
  font-weight:700;
  margin:0;
  line-height:1.22;
}
.p{
  font-size:14px;
  font-weight:400;
  margin:0;
  line-height:1.55;
  color:#5E5E5E;
}
.grid-12{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap: var(--gap-card);
  align-items:stretch;
}
.grid-12 > [class^="col-"]{min-width:0;}
.grid-12 > [class^="col-"] > .card{height:100%;}

.col-12{grid-column: span 12;}
.col-6{grid-column: span 6;}
.col-4{grid-column: span 4;}

@media (max-width: 920px){
  .col-6, .col-4{grid-column: span 12;}
  .nav{align-items:flex-start;}
  .header-inner{flex-direction:column;}
}
.card{
  background:rgba(255,255,255,0.92);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:var(--radius);
  box-shadow: 0 14px 40px rgba(0,0,0,0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding:18px 18px 16px;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.card .card-header{
  display:flex;
  flex-direction:column;
  align-items:flex-start; /* prevent stretching icon-pill */
}
.icon-pill{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px; height:46px; /* 30 + 2*8 padding */
  min-width:46px;
  border:1px solid var(--border-al);
  border-radius:999px;
  background:var(--bg-body);
  padding:0;
  font-size:28px;
  line-height:1;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  margin: 15px 0 8px 0; /* external spacing; right-margin handled in inline rows */
}
.icon-pill.inline{
  margin:0 14px 0 0; /* external space to next element; > padding */
}
.card h3{
  font-size:18px;
  font-weight:700;
  margin:0;
  line-height:1.25;
}
.card .card-body{
  font-size:14px;
  line-height:1.55;
  color:#5E5E5E;
  margin-top: 12px;
}
.card .card-actions{
  margin-top:auto;
  padding-top:16px;
  display:flex;
  justify-content:flex-end;
  gap:12px;
}



.button{
  border-radius:999px;
  padding:10px 14px;
  border:1px solid transparent;
  font-size:13px;
  font-weight:400;
  cursor:pointer;
  display:grid;
  place-items:center;
  white-space:nowrap;
}
.button.primary{
  background:var(--science-blue);
  color:#fff;
}
.button.outline{
  background:#fff;
  border-color:var(--border-al);
  color:#000;
}
.pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.pill{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border-al);
  background:var(--bg-body);
  font-size:13px;
  color:#5E5E5E;
}
.inner-cards-grid{
  display:grid;
  align-items:stretch;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap: var(--gap-inner);
  margin-top: 15px;
}
.inner-card{
  background:rgba(255,255,255,0.88);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:12px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding:14px 14px 12px;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.inner-card h3{
  font-size:17px;
  font-weight:700;
  margin:0;
}

.inner-card .card-header{
  margin-bottom:16px;
}
.inner-card .card-body{
  font-size:13px;
  line-height:1.55;
  color:#5E5E5E;
  margin-top: 0px;
}
/* Ensure consistent typography inside inner-cards even when using .p helper class */
.inner-card .p{
  font-size:13px;
}
.inner-card .card-actions{
  margin-top:auto;
  padding-top:12px;
  display:flex;
  justify-content:flex-end;
  gap:12px;
}

.table-wrap{ overflow-x:auto; }
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--border-al);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  font-size:14px;
  color:#5E5E5E;
}
thead th{
  background:var(--bg-body);
  font-weight:700;
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--border-al);
}
tbody td{
  padding:10px 12px;
  border-bottom:1px solid rgba(169,169,169,.45);
  vertical-align:top;
}
tbody tr:last-child td{border-bottom:none;}
tbody td:first-child{font-weight:700;}
/* lists with explicit markers */
.list-check, .list-steps{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.list-check li, .list-steps li{ display:flex; gap:12px; align-items:flex-start; }
.marker{
  width:25px; height:25px; min-width:25px;
  border-radius:8px;
  background:var(--science-blue);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:14px;
  font-weight:700;
  line-height:1;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* Karriere: aufklappbare Job-Cards */
.job-cards{display:flex; flex-direction:column; gap: var(--gap-inner); margin-top:15px;}
.job-card{border:1px solid #D6D6D6;}
.job-card .card-header{width:100%;}
.job-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  background:transparent;
  border:0;
  padding:0;
  text-align:left;
  font: inherit;
}
.job-toggle .job-title{font-weight:800; font-size:18px; color:#000;}
.job-toggle .job-chevron{font-size:16px; line-height:1;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#5E5E5E; transform:rotate(0deg); transition:transform .15s ease;}
.job-card.is-open .job-toggle .job-chevron{transform:rotate(180deg);}
.job-card .card-body{margin-top:12px;}

details.accordion{
  border:1px solid var(--border-al);
  border-radius:12px;
  background:#fff;
  padding: 10px 12px;
  margin-bottom:20px;
}
details.accordion summary{
  cursor:pointer;
  font-weight:700;
  font-size:14px;
}
details.accordion .accordion-body{
  margin-top:10px;
  font-size:14px;
  line-height:1.55;
  color:#5E5E5E;
}
/* footer */
.footer-inner{
  padding: 18px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  font-size:12px;
}
.footer-links{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}
/* cookie modal */
.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.35);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100;
  padding: 20px;
}
.modal{
  width:min(760px, 100%);
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  padding:16px;
}
.modal-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.modal-title{font-weight:700; font-size:18px; margin:0;}
.modal-close{
  border:1px solid #1d4ed8;
  background:#2563eb;
  color:#fff;
  border-radius:8px;
  width:25px; height:25px;
  min-width:25px;
  display:grid;
  place-items:center;
  padding:0;
  cursor:pointer;
  font-size:18px;
  font-weight:700;
  line-height:1;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  box-shadow:none;
  appearance:none;
  -webkit-appearance:none;
}
.modal-close:focus{outline:none; box-shadow:none;}
.modal-close:focus-visible{outline:2px solid rgba(37,99,235,.28); outline-offset:2px;}
.modal-body{margin-top:12px; font-size:14px; line-height:1.55; color:#5E5E5E;}
.modal-backdrop.open{display:flex;}
/* contact rows */
.contact-row{display:flex; align-items:flex-start; gap:14px;}
.contact-row + .contact-row{ margin-top:10px; }
.contact-label{font-weight:700;}
.contact-label, .contact-value{display:block;}
.contact-value{color:#5E5E5E;}
/* form */
.form{
  border:none;
  background:#fff;
  border-radius:12px;
  padding:14px;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:12px;
}
.field{grid-column: span 12; display:flex; flex-direction:column; gap:6px;}
.field label{font-size:14px; font-weight:700;}
.field input, .field textarea, .field select{
  border:1px solid var(--border-al);
  background:var(--bg-inner);
  border-radius:10px;
  padding:10px 12px;
  font-size:14px;
  font-family:var(--font-system);
  color:#5E5E5E;
}

/* Kontakt page: neutral grey borders for contact form fields */
body.page-kontakt .form .field input, body.page-kontakt .form .field textarea, body.page-kontakt .form .field select{
  border-color:#D6D6D6;
}
.field textarea{min-height:120px; resize:vertical;}
.form .actions{grid-column: span 12; display:flex; justify-content:flex-end; gap:12px;}

details.accordion:last-child{margin-bottom:0;}

.inner-cards-grid > .inner-card{height:100%;}

/* Subtext inside list items (keeps indentation consistent) */
.li-sub{margin-top:0;opacity:.92;}


/* Kontakt page: smaller icon pills (40% reduction) */
body.page-kontakt .icon-pill{
  width:25px; height:25px;
  min-width:25px;
  padding:0;
  font-size:15px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 10px 0 6px 0;
}
body.page-kontakt .icon-pill.inline{
  margin:0 8px 0 0;
}

/* Kontakt page: message form label sizing (specific request) */
body.page-kontakt .form .field label{
  font-size:13px;
}

/* Kontakt page: required-field hint under the message textarea */
body.page-kontakt .pflicht-hinweis{
  font-size:13px;
  line-height:1.4;
  color:#5E5E5E;
}
/* Kontakt page: when the message form is placed inside a card, let the card control spacing */
body.page-kontakt .card .form{
  padding:0;
  background:transparent;
  border-radius:0;
  margin-top:10px;
}

/* Kontakt page: allow 2-column fields inside the grid-form */
body.page-kontakt .form .field.col-6{grid-column: span 6;}
@media (max-width: 920px){
  body.page-kontakt .form .field.col-6{grid-column: span 12;}
}

/* ===== Imported from legacy site: Workshop Builder (Modal) ===== */

#workshopOverlay{
  --rgb-black: 0 0 0;
  --rgb-accent: 0 113 227;
  --rgb-text: 29 29 31;
  --rgb-white: 255 255 255;
  --o-03: .03;
  --o-04: .04;
  --o-08: .08;
  --o-10: .10;
  --o-12: .12;
  --o-16: .16;
  --o-18: .18;
  --o-30: .30;
  --o-48: .48;
  --o-55: .55;
  --o-70: .70;
  --o-72: .72;
  --o-84: .84;
  --o-92: .92;
  --o-94: .94;
  --o-96: .96;

  --text: #1d1d1f;
  --muted: rgb(var(--rgb-text) / var(--o-72));
  --accent: #0071e3;
  --radius: 20px;
  --radius2: 26px;

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
}
#workshopOverlay .card-header{ margin-bottom:14px; }

/* Match body copy color to the rest of the website (do not affect headings or list items) */
#workshopOverlay{ --ws-copy: #5E5E5E; }
#workshopOverlay .workshopSubtitle, #workshopOverlay .card-body, #workshopOverlay .radioCard .muted, #workshopOverlay .moduleDesc, #workshopOverlay .sub .muted, #workshopOverlay .muted, #workshopOverlay .reqNote, #workshopOverlay #workshopStatus{
  color: var(--ws-copy);
}
#workshopOverlay a{ color: var(--accent); text-decoration: none; }
#workshopOverlay a:hover{ text-decoration: underline; }

/* Buttons */
#workshopOverlay .button{
  white-space: nowrap;
  display:grid;
  place-items:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  border-color: rgb(var(--rgb-black) / var(--o-12));
  background: rgb(var(--rgb-white) / var(--o-84));
  color: rgb(var(--rgb-text) / var(--o-92));
  box-shadow: none;
}
#workshopOverlay .button:hover{
  border-color: rgb(var(--rgb-black) / var(--o-18));
  background: rgb(var(--rgb-white) / var(--o-94));
}
#workshopOverlay .button.primary{
  background:var(--accent);
  border-color: transparent;
  color: #fff;
}
#workshopOverlay .button.ghost{
  border-color: rgb(var(--rgb-black) / var(--o-16));
  color: var(--text);
}
#workshopOverlay .button.ghost:hover{ background: rgb(var(--rgb-black) / var(--o-04)); }


#workshopOverlay .card{
  background: rgb(var(--rgb-white) / var(--o-92));
  border: 1px solid rgb(var(--rgb-black) / var(--o-08));
  border-radius: var(--radius2);
  box-shadow: none;
}

#workshopOverlay .grid2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

#workshopOverlay .ctaRow{
  flex-shrink: 0;
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content: flex-end;
}

/* Place the submit CTA like other cards on the site: bottom-right of its surrounding card */
#workshopOverlay .workshopContactCard{ position: relative; }
#workshopOverlay .workshopContactCard #workshopForm{ padding-bottom: 54px; }
#workshopOverlay .workshopContactCard #workshopForm .ctaRow{
  position: absolute;
  right: 16px;
  bottom: 16px;
  margin-top: 0 !important;
  justify-content: flex-end;
}

/* ===============================
   Workshop Builder Modal
   =============================== */
.workshopOverlay{
  position: fixed;
  inset: 0;
  background: rgb(var(--rgb-black) / var(--o-55));
  backdrop-filter: blur(8px);
  display: none;
  align-items: start;
  justify-content: center;
  padding: 14px;
  /* Enable scrolling inside the overlay (body scrolling is disabled while open) */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: 10000;
}
.workshopOverlay.open{ display:flex; }

.workshopModal{
  width: min(1100px, 100%);
  margin-top: 64px;
  border-radius: 24px;
  padding: 14px;
  /* Ensure the modal itself has an opaque background (otherwise only inner cards are framed) */
  background: rgb(var(--rgb-white) / var(--o-92));
  border: 1px solid rgb(var(--rgb-black) / var(--o-12));
  box-shadow: none;
}

.workshopTop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.workshopH{ margin:0; font-size:18px; font-weight:900; }
.workshopSubtitle{ color: rgb(var(--rgb-text) / var(--o-72)); font-size: 12px; margin-top: 3px; }
.workshopBody{ margin-top: 12px; }

.radioGrid{ display:grid; gap: 10px; }
@media(min-width: 860px){ .radioGrid{ grid-template-columns: 1fr 1fr; } }

.radioCard{
  display:flex; gap:10px; align-items:flex-start;
  padding: 12px; border-radius: 18px;
  border: 1px solid rgb(var(--rgb-white) / var(--o-10));
  background: rgb(var(--rgb-white) / var(--o-03));
  cursor: pointer;
}
.radioCard input{ margin-top: 3px; }
.radioCard .muted{ color: rgb(var(--rgb-text) / var(--o-70)); font-size: 12px; margin-top: 4px; line-height: 1.5; }

/* Workshop-Optionen als inner-cards (Radio auswählbar, aber im inner-card Look) */
#workshopOverlay .inner-card.radioCard{
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 14px 14px 12px;
  background: var(--bg-inner);
  border: 1px solid #D6D6D6;
}
#workshopOverlay .inner-card.radioCard:hover{ filter: brightness(0.99); }
#workshopOverlay .inner-card.radioCard input{ margin-top: 3px !important; }
#workshopOverlay .inner-card.radioCard > div{ min-width: 0; }
#workshopOverlay .inner-card.radioCard .card-body{ margin-top: 6px; }

/* Radio headings in Workshop configurator */
#workshopOverlay .inner-card.radioCard h3{ font-size: 13px; margin: 0; }

.workshopEstimate{
  display:flex; align-items:center; justify-content:space-between; gap: 10px;
}

/* Increase spacing after the "Zeitschätzung" label */
/* Match estimate copy to the same typography as the inner-card body copy ("Kombinieren …") */
#workshopOverlay .estimateCopy{ color: var(--ws-copy); font-size: 13px; line-height: 1.55; }
#workshopOverlay .estimateCopy .reqNoteInline{ font-size: 13px; }
.estimatePill{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgb(var(--rgb-white) / var(--o-12));
  background: rgb(var(--rgb-white) / var(--o-04));
  font-weight: 900;
}

/* Workshop module list spacing */
#workshopOverlay #workshopModules{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#workshopOverlay #workshopModules .module{
  margin-bottom: 0;
}

/* Module Tree */
.module{
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgb(var(--rgb-white) / var(--o-10));
  background: rgb(var(--rgb-white) / var(--o-03));
  margin-bottom: 10px;
}
.moduleHead{
  display:flex; gap:10px; align-items:flex-start;
}
.moduleHead input{ margin-top: 3px; }
.moduleDesc{
  color: rgb(var(--rgb-text) / var(--o-72));
  font-size: 12px;
  margin-top: 3px;
  line-height: 1.55;
}
.sub{
  margin-top: 10px;
  padding-left: 28px;
  display: grid;
  gap: 8px;
}
.sub label{
  display:flex; gap:10px; align-items:flex-start;
}
#workshopOverlay .sub b{ font-size: 13px; }
.sub .muted{ font-size: 12px; color: rgb(var(--rgb-text) / var(--o-70)); margin-top:2px; line-height:1.5; }

.isDisabled{
  opacity: .55;
  filter: grayscale(.2);
}
.isDisabled input{ cursor:not-allowed; }

/* Form (scoped to Workshop overlay so it doesn't affect the main site forms) */
/* Workshop: keep the same vertical rhythm as the Kontakt form (spacing comes from the grid gap) */
#workshopOverlay .form .field{ margin-bottom: 0; }
#workshopOverlay .form label{ display:block; font-weight: 800; margin-bottom: 6px; font-size: 12px; }

/* Workshop: consent rows should match the Kontakt form spacing/typography */
#workshopOverlay #workshopForm .field.consent > label{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin:0;
  font-weight:400;
  font-size:13px;
  line-height:1.4;
  color: var(--ws-copy);
}
#workshopOverlay #workshopForm .field.consent > label input{
  margin-top:2px !important;
}
#workshopOverlay #workshopForm .field.consent > label a{
  color: var(--science-blue);
}


/* ===============================
   Workshop Builder Input Sizing
   =============================== */
.workshopModal input[type="checkbox"], .workshopModal input[type="radio"]{
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  padding: 0 !important;
  margin: 2px 0 0 0 !important;
  border-radius: 4px;
  border: 1px solid rgb(var(--rgb-black) / var(--o-18));
  background: rgb(var(--rgb-white) / var(--o-96));
  accent-color: var(--accent);
}
.workshopModal input[type="radio"]{ border-radius: 999px; }
.workshopModal .radioCard input{ margin-top: 3px !important; }
.workshopModal .moduleHead input{ margin-top: 3px !important; }
.workshopModal .sub input{ margin-top: 3px !important; }

/* Workshop UI fine-tuning */
#workshopOverlay .workshopEstimate .muted{
  font-size: 14px;
}

#workshopOverlay .workshopSubtitle{
  margin-top: 8px;
  margin-bottom: 18px;
}

#workshopOverlay #workshopForm .grid2{
  margin-bottom: 0;
  /* The workshop form uses the global 12-col grid; ensure the two-column wrapper spans full width */
  grid-column: span 12;
}
#workshopOverlay #workshopForm .grid2 .field{
  margin-bottom: 0;
  grid-column: auto; /* prevent global 12-col span from forcing full-width inside 2-col grid */
}
#workshopOverlay #workshopForm label{
  margin-bottom: 8px;
}

#workshopOverlay .module .sub{
  margin-bottom: 8px;
}

#workshopOverlay .module.isDisabled.keepColor{
  opacity: 1 !important;
  filter: none !important;
}

/* Workshop form: make fields clearly visible on the (light) modal surface */
#workshopOverlay .form input:not([type="checkbox"]):not([type="radio"]), #workshopOverlay .form textarea{
  border: 1px solid rgb(var(--rgb-black) / var(--o-18));
  background: rgb(var(--rgb-white) / var(--o-96));
  color: rgb(var(--rgb-black) / var(--o-92));
}

#workshopOverlay .form input:focus, #workshopOverlay .form textarea:focus{
  border-color: rgb(var(--rgb-black) / var(--o-30));
}

#workshopOverlay #workshopForm .reqNote{
  grid-column: span 12;
}

/* Required-field note */
#workshopOverlay .reqNote{
  display:block;
  margin-top: 0;
  margin-bottom: 0;
  /* Match Kontakt-Seite: Schriftgröße/Farbe/Zeilenabstand */
  font-size: 13px;
  line-height: 1.4;
  color: var(--ws-copy);
}

/* Consent text inherits from the label for consistent line-height */
#workshopOverlay .form input::placeholder, #workshopOverlay .form textarea::placeholder{
  color: rgb(var(--rgb-black) / var(--o-48));
}







/* ===============================
   Workshop Overlay – Mobile Layout
   =============================== */
@media (max-width: 720px){
  /* Module + Kontaktformular untereinander */
  #workshopOverlay .grid2{
    grid-template-columns: 1fr;
  }
}

/* ===============================
   Glossar
   =============================== */
/* Glossar-Liste: Cards untereinander und volle Breite */
#glossaryList{
  display:flex;
  flex-direction:column;
  /* Abstand wie im restlichen Site-Card-Schema */
  gap: var(--gap-card);
  margin-top: 15px;
}
#glossaryList > .card{
  width:100%;
}
.pill.is-active{
  background:var(--science-blue);
  border-color:var(--science-blue);
  color:#fff;
}
.glossary-letter{
  display:flex;
  justify-content:flex-start;
}
.glossary-letter .pill{
  background:var(--bg-inner);
}
.glossary-index{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* Glossar: Suche & Filter Layout */
.glossary-filterbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-top: 18px;
}
.glossary-filtergroup{min-width:0; flex:1 1 auto;}
.glossary-filtergroup--az{flex:0 0 360px;}
.glossary-filterbar-title{
  font-weight:700;
  margin:0 0 10px 0;
}
@media (max-width: 920px){
  .glossary-filterbar{flex-direction:column;}
  .glossary-filtergroup--az{flex:1 1 auto;}
}

.glossary-index a{
  display:grid;
  place-items:center;
  min-width:32px;
  height:32px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid var(--border-al);
  background:var(--bg-inner);
  color:#5E5E5E;
  font-size:13px;
  text-decoration:none;
}
.glossary-index a:hover{
  border-color:var(--science-blue);
  color:#000;
}
.glossary-item .card-header{
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.glossary-item .card-header h3{
  flex:1;
  min-width:220px;
}
.glossary-item .card-header .pills{
  justify-content:flex-end;
  gap:8px;
}
.glossary-empty{
  padding:14px;
  border:1px dashed var(--border-al);
  border-radius:12px;
  color:#5E5E5E;
}



/* FAQ – Filter/Suche/Pills */
.faq-item .card-header{
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.faq-item .card-header h3{
  flex:1;
  min-width:220px;
}
.faq-item .card-header .pills{
  justify-content:flex-end;
  gap:8px;
}
.faq-empty{
  padding:14px;
  border:1px dashed var(--border-al);
  border-radius:12px;
  color:#5E5E5E;
}

/* Glossar – Verweise */
.glossary-refs{
  margin-top: 18px;
}
.glossary-refs-title{
  font-weight: 700;
  font-size: 13px;
  color: #5E5E5E;
  margin: 0 0 12px 0;
}
.glossary-refs .pills{ margin-top: 10px; }

.glossary-refs a.pill{
  color: var(--science-blue);
  font-size: 13px;
}

.glossary-refs a.pill:hover{
  text-decoration: none;
  border-color: var(--science-blue);
}


/* Projektphasen (Cards) */

.phase-row-card{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap: var(--gap-inner);
  padding:0;
}
.phase-row-media{
  width:120px;
  min-width:120px;
  height:120px;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
}
.phase-row-media img{
  width:120px;
  height:120px;
  object-fit:contain;
  display:block;
}

.phase-row-content{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.phase-row-content h3{
  margin-top:0;
}
@media (max-width: 720px){
  .phase-row-card{
    flex-direction:column;
    align-items:stretch;
  }
  .phase-row-media{
    width:100%;
    min-width:0;
    justify-content:flex-start;
  }
}

/* Text-wrapped logo (IT Security Made in Germany) */
.flow-wrap::after{ content:""; display:block; clear:both; }
.wrap-logo{
  float: right;
  width: auto;
  max-width: 40%;
  min-height: 160px;
  max-height: 160px;
  height: 160px;
  margin: 2px 0 12px 16px;
  border-radius: 14px;
}






/* Text-wrapped image (Home 480) */
.wrap-image-home480{
  float: left;
  width: 480px;
  max-width: 100%;
  height: auto;
  margin: 2px 24px 12px 0;
  border-radius: var(--radius);
}

@media (max-width: 720px){
  .wrap-image-home480{
    float: none;
    display: block;
    margin: 0 0 14px 0;
    width: 100%;
    max-width: 480px;
  }
}


@media (max-width: 720px){
  .nav-row{row-gap:2px;}
}

/* Karriere: Team-Bild im Introtext */
.career-team-img{
  float:left;
  height:320px;
  width:auto;
  min-height:320px;
  margin:2px 24px 12px 0;
  border-radius:var(--radius);
}



@media (max-width: 720px){
  .career-team-img{
    float:none;
    display:block;
    width:100%;
    max-width:none;
    height:auto;
    min-height:0;
    margin:0 0 14px 0;
  }
}


/* Language switcher */
.lang-switch{display:inline-flex;align-items:center;gap:.35rem;font-size:12px;line-height:1;white-space:nowrap;margin-left:auto}
.lang-switch a{color:inherit;text-decoration:none;opacity:1;font-weight:400}
.lang-switch a.active{font-weight:700;color:var(--science-blue)}
.lang-switch .sep{opacity:.45}
.header-cta{margin-left:0}
.header-inner{gap:.75rem}
@media (max-width: 980px){.header-inner{align-items:flex-start}.lang-switch{margin:.35rem 0 .2rem 0;font-size:12px}}


/* Mobile burger navigation (v5) */
.burger-toggle{ display:none; }
.mobile-menu-panel{ display:none; }

@media (max-width: 980px){
  .header-inner{ align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; flex-direction:row !important; }
  .header-left{ flex:1 1 auto; min-width:0; width:auto; display:flex; align-items:center; justify-content:flex-start; }
  .brand{ margin:0; }
  .header-left > .nav{ display:none !important; }
  .header-inner > .lang-switch,
  .header-inner > .header-cta{ display:none !important; }

  .burger-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    margin-left:auto;
    margin-top:2px;
    border:1px solid rgba(0,0,0,.12);
    border-radius:12px;
    background:#fff;
    cursor:pointer;
    flex:0 0 auto;
  }
  .burger-toggle .burger-lines,
  .burger-toggle .burger-lines::before,
  .burger-toggle .burger-lines::after{
    content:"";
    display:block;
    width:20px;
    height:2px;
    background:#111;
    border-radius:2px;
    transition:transform .2s ease, opacity .2s ease;
    position:relative;
  }
  .burger-toggle .burger-lines::before{ position:absolute; top:-6px; left:0; }
  .burger-toggle .burger-lines::after{ position:absolute; top:6px; left:0; }
  .burger-toggle[aria-expanded="true"] .burger-lines{ background:transparent; }
  .burger-toggle[aria-expanded="true"] .burger-lines::before{ transform:translateY(6px) rotate(45deg); }
  .burger-toggle[aria-expanded="true"] .burger-lines::after{ transform:translateY(-6px) rotate(-45deg); }

  .mobile-menu-panel{
    display:none;
    width:100%;
    margin-top:8px;
    padding:8px 0 0;
    flex:1 0 100%;
    order:3;
  }
  .site-header.mobile-menu-open .mobile-menu-panel{ display:block; }

  .mobile-menu-panel{ text-align:left; }
  .mobile-menu-list > li,
  .mobile-accordion,
  .mobile-lang-accordion{ text-align:left; }
  .mobile-submenu a,
  .mobile-lang-list a{ text-align:left; }
  .mobile-menu-panel .button{ display:inline-flex; }

  .mobile-menu-list,
  .mobile-submenu,
  .mobile-lang-list{ list-style:none; margin:0; padding:0; }

  .mobile-menu-item,
  .mobile-menu-link,
  .mobile-accordion summary{
    font-size:12px;
    line-height:1.35;
    font-weight:500;
    color:#111;
    text-decoration:none;
  }

  .mobile-menu-link,
  .mobile-accordion summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-align:left;
    width:100%;
    padding:10px 0;
    border:0;
    background:transparent;
    cursor:pointer;
  }

  .mobile-menu-link.active,
  .mobile-accordion > summary.active,
  .mobile-submenu a.active,
  .mobile-lang-list a.active{ color:var(--brand-blue, #176BEF); font-weight:700; }

  .mobile-menu-list > li,
  .mobile-accordion,
  .mobile-lang-accordion{
    border-top:1px solid rgba(0,0,0,.06);
  }
  .mobile-menu-list > li:first-child{ border-top:0; }

  .mobile-accordion summary,
  .mobile-lang-accordion summary{ list-style:none; }
  .mobile-accordion summary::-webkit-details-marker,
  .mobile-lang-accordion summary::-webkit-details-marker{ display:none; }

  .mobile-accordion summary::after,
  .mobile-lang-accordion summary::after{
    content:"▾";
    font-size:12px;
    line-height:1;
    color:#111;
    margin-left:8px;
    transition:transform .15s ease;
  }
  .mobile-accordion[open] summary::after,
  .mobile-lang-accordion[open] summary::after{ transform:rotate(180deg); }

  .mobile-submenu,
  .mobile-lang-list{ padding:0 0 6px; }
  .mobile-submenu a,
  .mobile-lang-list a{
    display:block;
    padding:8px 0;
    font-size:12px;
    line-height:1.35;
    color:#111;
    text-decoration:none;
  }

  .mobile-menu-panel .lang-switch{ display:none; }
  .mobile-menu-panel .button.header-cta,
  .mobile-menu-panel .button.primary{
    margin-top:10px;
    width:fit-content;
    max-width:none;
    display:flex;
  }

  .mobile-submenu,
  .mobile-lang-list,
  .mobile-submenu a,
  .mobile-lang-list a{ text-align:left; }
  .mobile-menu-panel .button.header-cta,
  .mobile-menu-panel .button.primary{ margin-left:auto; display:flex; }
}