/* ============================================================================
   EasyCompany — theme stylesheet
   ----------------------------------------------------------------------------
   Deliberately self-contained: no Bootstrap, no jQuery, no icon kit, no Google
   Fonts, no CDN of any kind. The previous site pulled scripts from four foreign
   origins (cdnjs, kit.fontawesome.com -> ka-p.fontawesome.com, Google reCAPTCHA,
   gmaps.js) and ended up rated "Malware" by FortiGuard, which blocked the domain
   on every FortiGate. Every byte this page needs is served from our own origin.
   Keep it that way: adding a CDN link here re-opens exactly that hole.
   ========================================================================== */

/* Quicksand (SIL OFL 1.1), self-hosted variable font, weights 300-700. */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/quicksand-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/quicksand-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #21282f;
  --ink-soft: #4a545e;
  --ink-faint: #7b8590;
  --paper: #ffffff;
  --paper-soft: #f7f7f7;
  --paper-edge: #ececec;
  --line: #e2e2e2;

  --plum: #501946;
  --blue: #2a2674;
  --teal: #005067;
  --green: #136735;

  /* Measured from the live circles on the old easycompany.ch, not guessed:
     ESYS rgb(42,38,116) · ESTUD rgb(0,80,103) · ECIT rgb(80,25,70) · EA rgb(19,103,53). */
  --brand-systems: #2a2674;
  --brand-code: #501946;
  --brand-studios: #005067;
  --brand-academy: #136735;
  --brand-expert: #eb6608;

  /* Atlas OS has its own brand and keeps it: the A-mark gradient on near-black,
     wordmark in fog. Do not recolour it to the EasyCompany palette. */
  --atlas-ink: #0B0D12;
  --atlas-amber: #FFC24A;
  --atlas-fog: #F2EFE9;

  --font: 'Quicksand', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --max: 1160px;
  --radius: 6px;
  --shadow: 0 2px 18px rgba(33, 40, 47, 0.07);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--plum); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 24px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: var(--radius);
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------- header -- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding: 14px 24px;
  display: flex; align-items: center; gap: 24px;
}

.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img { height: 34px; width: auto; }

.site-nav { margin-left: auto; }
.nav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 28px;
}
.nav-list a {
  color: var(--ink); font-weight: 600; font-size: 0.975rem;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav-list a:hover, .nav-list a:focus-visible { text-decoration: none; border-bottom-color: var(--plum); }

.nav-toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 10px;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle__bar { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
.nav-toggle__bar + .nav-toggle__bar { margin-top: 5px; }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .site-nav.is-open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 18px; }
  .nav-list a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav-list li:last-child a { border-bottom: 0; }
}

/* ------------------------------------------------------------------ hero -- */

.hero { position: relative; background: var(--ink); }
.hero__media { position: relative; height: clamp(320px, 52vh, 560px); overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(33,40,47,0) 45%, rgba(33,40,47,0.55) 100%);
}

.hero__intro { background: var(--paper); text-align: center; padding: clamp(48px, 7vw, 84px) 0 clamp(36px, 5vw, 56px); }
.hero__title {
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  font-weight: 300; margin-bottom: 0.15em; color: var(--ink);
}
.hero__title strong { font-weight: 700; }
.hero__claim {
  font-size: clamp(1.15rem, 2.6vw, 1.85rem);
  font-weight: 600; color: var(--plum); margin: 0 0 0.9em;
}
.hero__lead {
  max-width: 62ch; margin-inline: auto;
  color: var(--ink-soft); font-size: clamp(1rem, 1.5vw, 1.125rem);
}

/* --------------------------------------------------------------- section -- */

.section { padding: clamp(44px, 6vw, 76px) 0; }
.section--soft { background: var(--paper-soft); }
.section__head { text-align: center; max-width: 60ch; margin: 0 auto clamp(28px, 4vw, 48px); }
.section__head h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.section__head p { color: var(--ink-soft); margin: 0; }

/* ---------------------------------------------------------------- brands -- */

.brands {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(28px, 4vw, 44px);
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}

.brand-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 34px 26px 30px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.brand-card:hover, .brand-card:focus-within {
  transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--paper-edge);
}

.brand-card__mark {
  width: 118px; height: 118px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 22px;
  background: var(--mark, var(--ink));
}
.brand-card__mark img { width: 62px; height: auto; }
.brand-card__mark span {
  color: #fff; font-weight: 700; font-size: 1.5rem; letter-spacing: 0.02em;
}

/* The Expert stores use a wide wordmark rather than the hare, so it needs more
   of the circle's width than a 62px glyph does. */
.brand-card__mark--wordmark img { width: 82px; }

.brand-card__name { font-size: 1.3rem; font-weight: 300; margin-bottom: 0.35em; color: var(--ink); }
.brand-card__name strong { font-weight: 700; }
.brand-card__text { color: var(--ink-soft); font-size: 0.975rem; margin-bottom: 1.4em; flex: 1 1 auto; }

.btn {
  display: inline-block; cursor: pointer;
  font-family: var(--font); font-weight: 600; font-size: 0.95rem; line-height: 1.3;
  padding: 11px 22px; border-radius: var(--radius);
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.btn:hover, .btn:focus-visible { background: var(--ink); color: #fff; text-decoration: none; }
.btn--primary { background: var(--plum); border-color: var(--plum); color: #fff; }
.btn--primary:hover, .btn--primary:focus-visible { background: #3d1335; border-color: #3d1335; color: #fff; }


/* --------------------------------------------------------------- contact -- */

.contact-grid {
  display: grid; gap: clamp(26px, 4vw, 46px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.contact-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 28px 26px;
}
.contact-card h3 { font-size: 1.1rem; margin-bottom: 0.5em; }
.contact-card p { color: var(--ink-soft); font-size: 0.975rem; }
.contact-card a { font-weight: 600; }

/* ------------------------------------------------------------ legal page -- */

.prose { max-width: 74ch; margin-inline: auto; }
.prose h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin-top: 1.9em; }
.prose h3 { font-size: 1.08rem; margin-top: 1.5em; }
.prose ul { padding-left: 1.25em; color: var(--ink-soft); }
.prose li { margin-bottom: 0.4em; }
.prose dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 22px; margin: 0 0 1.6em; }
.prose dt { font-weight: 700; }
.prose dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 560px) {
  .prose dl { grid-template-columns: 1fr; gap: 2px; }
  .prose dd { margin-bottom: 10px; }
}

.page-head { background: var(--paper-soft); padding: clamp(40px, 6vw, 68px) 0 clamp(28px, 4vw, 44px); text-align: center; }
.page-head h1 { font-size: clamp(1.9rem, 4.4vw, 2.8rem); margin-bottom: 0.2em; }
.page-head p { color: var(--ink-soft); margin: 0; }

/* ----------------------------------------------------------- legal strip -- */

/* A <nav>, not a <footer>: EasyWeb 2.0 strips theme <footer> elements and
   renders its own #ewSiteFooter. A theme footer here would either vanish or
   hide the platform bar the visitor needs to withdraw cookie consent. */
.site-legal { background: var(--ink); color: #fff; padding: 26px 0; font-size: 0.925rem; }
.site-legal__inner {
  width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px;
}
.site-legal a { color: #fff; opacity: 0.85; }
.site-legal a:hover, .site-legal a:focus-visible { opacity: 1; }
.site-legal__sep { flex: 1 1 auto; }

@media (max-width: 700px) {
  .site-legal__inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .site-legal__sep { display: none; }
}

/* ============================================================================
   Consent UI support
   ----------------------------------------------------------------------------
   The platform injects its own cookie banner and two dialogs, and that markup
   is written against Bootstrap 5 (`modal fade`, `btn`, `d-flex`, `container`,
   spacing utilities). This site ships no Bootstrap on purpose, so without the
   rules below `.modal.fade` is never hidden and the whole settings dialog
   renders inline at the bottom of every page.

   This is not "a bit of Bootstrap". It is the exact subset the consent markup
   references, ~90 lines, served from our own origin. Do not replace it by
   enabling the managed Bootstrap asset: that re-introduces a CDN origin, which
   is the thing this site exists to avoid.
   ========================================================================== */

.container,
.container-fluid { width: 100%; margin-inline: auto; padding-inline: 16px; }
.container { max-width: var(--max); }

.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }
.gap-2 { gap: 0.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.mt-2 { margin-top: 0.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-0 { margin-bottom: 0; }
.small { font-size: 0.875rem; }
.fs-6 { font-size: 1rem; }

.btn-sm { padding: 6px 14px; font-size: 0.85rem; }
.btn-outline-secondary { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-outline-secondary:hover { background: var(--paper-soft); color: var(--ink); }

/* Modal. `.fade` alone must hide it — that is the rule whose absence leaks the
   dialog onto the page. `.show` is added by the shim in main.js. */
.modal {
  display: none;
  position: fixed; inset: 0; z-index: 1055;
  overflow-y: auto;
  background: rgba(33, 40, 47, 0.55);
}
.modal.show { display: block; }

.modal-dialog {
  width: calc(100% - 32px); max-width: 520px;
  margin: 32px auto;
}
.modal-dialog.modal-lg { max-width: 780px; }
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 64px); }
.modal-dialog-scrollable .modal-content { max-height: calc(100vh - 64px); overflow: hidden; }
.modal-dialog-scrollable .modal-body { overflow-y: auto; }

.modal-content {
  width: 100%;
  background: var(--paper); color: var(--ink);
  border-radius: 12px; box-shadow: 0 12px 48px rgba(33, 40, 47, 0.28);
  display: flex; flex-direction: column;
}
.modal-header,
.modal-footer {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px;
}
.modal-header { border-bottom: 1px solid var(--line); justify-content: space-between; }
.modal-footer { border-top: 1px solid var(--line); justify-content: flex-end; flex-wrap: wrap; }
.modal-title { margin: 0; font-size: 1.05rem; font-weight: 700; }
.modal-body { padding: 18px 20px; }

.btn-close {
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: var(--radius);
  background: transparent; cursor: pointer;
  font-size: 0; line-height: 0;
}
.btn-close::before {
  content: '\00d7'; font-size: 1.6rem; line-height: 1; color: var(--ink-soft);
}
.btn-close:hover { background: var(--paper-soft); }

/* The banner itself. The platform also injects an inline theme block that
   colours these buttons; these rules only give them shape and placement. */
.ew-consent-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1050; }
.ew-consent-footer-links { text-align: center; padding-block: 10px; }
.ew-consent-footer-links a { color: var(--ink-soft); }

.ew-consent-toggle-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.ew-consent-toggle-row + .ew-consent-toggle-row { border-top: 1px solid var(--line); }
.ew-consent-toggle-label { flex: 1 1 auto; }
.ew-consent-detail-group { border-top: 1px solid var(--line); padding-block: 8px; }
.ew-consent-detail-summary { cursor: pointer; font-weight: 600; }

/* ------------------------------------------------------------- Atlas OS -- */
/* Atlas OS is a product with its own identity, not an EasyCompany sub-brand
   recoloured. Its card therefore carries the Atlas palette: the A-mark's
   gradient on #0B0D12, amber call to action. Leave it alone when the
   EasyCompany palette changes. */

.brand-card__mark--atlas img { width: 46px; }

.brand-card--atlas {
  border-color: var(--atlas-ink);
  box-shadow: 0 2px 22px rgba(11, 13, 18, 0.14);
}
.brand-card--atlas .brand-card__name { color: var(--atlas-ink); }

.brand-card__flag {
  display: inline-block; margin-bottom: 14px;
  background: var(--atlas-amber); color: var(--atlas-ink);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px;
}

.btn--atlas {
  background: var(--atlas-ink); border-color: var(--atlas-ink); color: var(--atlas-fog);
}
.btn--atlas:hover, .btn--atlas:focus-visible {
  background: var(--atlas-amber); border-color: var(--atlas-amber); color: var(--atlas-ink);
}

/* The consent bar's button group carries Bootstrap's `flex-shrink-0` and does
   not wrap, so its four buttons overflow a phone viewport by ~120px and
   "Alle akzeptieren" ends up off-screen — the visitor cannot accept. The outer
   row already wraps; this lets the group wrap and shrink with it. */
@media (max-width: 560px) {
  .ew-consent-bar .ew-consent-actions {
    flex-wrap: wrap;
    flex-shrink: 1;
    width: 100%;
    justify-content: flex-start;
  }
  .ew-consent-bar .ew-consent-actions .btn { flex: 1 1 auto; }
  .ew-consent-bar .container-fluid { padding-inline: 12px; }
}
/* ew-site-design */
:root {
  --ew-color-primary: #501946;
  --ew-color-secondary: #2a2674;
  --ew-color-accent: #136735;
  --ew-nav-bg: #ffffff;
  --ew-nav-text: #21282f;
  --ew-link-color: #501946;
  --ew-link-hover: #2a2674;
  --ew-heading-color: #21282f;
  --ew-footer-bg: #21282f;
  --ew-footer-text: #ffffff;
  --ew-footer-link: #ffffff;
}
.text-ew-primary{color:var(--ew-color-primary)!important}.bg-ew-primary{background-color:var(--ew-color-primary)!important}.border-ew-primary{border-color:var(--ew-color-primary)!important}.text-ew-secondary{color:var(--ew-color-secondary)!important}.bg-ew-secondary{background-color:var(--ew-color-secondary)!important}.border-ew-secondary{border-color:var(--ew-color-secondary)!important}.text-ew-accent{color:var(--ew-color-accent)!important}.bg-ew-accent{background-color:var(--ew-color-accent)!important}.border-ew-accent{border-color:var(--ew-color-accent)!important}.ew-btn, a.btn.ew-btn, button.btn.ew-btn{display:inline-block;box-sizing:border-box;cursor:pointer;vertical-align:middle;line-height:1.5;text-align:center;background-image:none!important;box-shadow:none!important;background-color:#501946;color:#ffffff;border-radius:6px;padding:0.7rem 1.35rem;font-weight:600;font-size:0.95rem;text-transform:none;font-family:'Quicksand, \'Segoe UI\', system-ui, sans-serif',sans-serif;border:none;text-decoration:none;}.ew-btn:hover,a.btn.ew-btn:hover,button.btn.ew-btn:hover,.ew-btn:focus,a.btn.ew-btn:focus,button.btn.ew-btn:focus{filter:brightness(0.92);}hr{border-top:solid 0.25px #501946;opacity:.25;}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{color:#21282f;font-weight:700!important;text-transform:none;letter-spacing:-0.01em;font-family:'Quicksand, \'Segoe UI\', system-ui, sans-serif',sans-serif!important;}#ewSiteFooter{background-color:var(--ew-footer-bg);color:var(--ew-footer-text);}#ewSiteFooter a,#ewSiteFooter .nav-link{color:var(--ew-footer-link);}#ewSiteFooter .ew-footer-bottom{border-top:1px solid color-mix(in srgb, var(--ew-footer-text) 18%, transparent);}#ewSiteFooter .ew-footer-nav{gap:.25rem 1rem;flex-wrap:wrap;}
#ewMainNav { background-color: var(--ew-nav-bg) !important; }
#ewMainNav .navbar-brand,#ewMainNav .nav-link { color: var(--ew-nav-text) !important; }
#ewMainNav .navbar-toggler { border-color: color-mix(in srgb, var(--ew-nav-text) 35%, transparent); }
/* /ew-site-design */

/* ew-page-styles:impressum */
/* /ew-page-styles:impressum */

/* ew-page-styles:home */
/* /ew-page-styles:home */

/* ew-page-styles:datenschutz */
/* /ew-page-styles:datenschutz */