/* excire.com — base styles / reset */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-base);   /* Maven Pro, per live site */
    font-size: var(--fs-base);       /* 20px */
    line-height: var(--lh-base);     /* 1.5 */
    color: var(--color-text);        /* #333 */
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;   /* matches live */
    overflow-wrap: break-word;       /* long words (e.g. compound German nouns) break instead of causing h-scroll */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    margin: 0 0 var(--space-3);
    color: var(--color-text);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: 3.5rem; }   /* kit */
h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: 2.5rem; }  /* kit */

/* Kit responsive heading sizes (from live post-7 kit css) */
@media (max-width: 1024px) {
    h1 { font-size: 52px; }
    h2 { font-size: 38px; line-height: 1.2em; }
    h3 { font-size: 24px; line-height: 1.2em; }
}
@media (max-width: 767px) {
    h1 { font-size: 42px; }
}

p { margin: 0 0 var(--space-3); }

a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }

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

/* Internal links in body copy should stand out (SEO sheet: sollte).
   Buttons inside prose keep the button styling — no link weight/underline. */
.prose a:not(.btn) { text-decoration: underline; font-weight: var(--fw-medium); }

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* Global button — blue gradient, rounded, uppercase (Roboto). */
.btn {
    display: inline-block;
    font-family: var(--font-button);   /* Roboto */
    font-size: 20px;                   /* uniform button text size site-wide */
    line-height: 1.3;
    text-transform: uppercase;
    text-align: center;
    padding: 15px 30px;
    border: 0;                         /* reset the UA <button> outset border */
    border-radius: 0;                  /* buttons are rectangular (like live) */
    cursor: pointer;
    background: var(--btn-grad, linear-gradient(135deg, #1B67E6 0%, #00ACFF 100%));
    color: var(--color-white);
    transition: background .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--btn-grad-hover, linear-gradient(135deg, #00ACFF 0%, #1B67E6 100%)); color: var(--color-white); }

/* Dark button variant — the "excire business" header CTA (measured: #000) */
.btn--dark { background: var(--color-black); }
.btn--dark:hover { background: #222; color: var(--color-white); }

/* Ghost/outline button variant */
.btn--ghost {
    background: transparent;
    color: currentColor;
    box-shadow: inset 0 0 0 1px currentColor;
}
.btn--ghost:hover { background: var(--color-primary); color: var(--color-white); box-shadow: none; }

/* Accessibility: skip link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-primary);
    color: #fff;
    padding: 10px 16px;
    z-index: 1000;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Unified section rhythm — one rule for ALL pages (no per-page spacing).
   Sections adjoin; background changes delineate them. Compact strips use
   .section--compact. */
section > .container { padding-block: var(--section-y); }
.section--compact > .container { padding-block: var(--section-y-sm); }

/* Grey section background — global so it applies on every template (FAQ etc.) */
.section--grey { background: #ebebeb; }

/* FAQ accordion — one canonical style for EVERY page (product, content, office,
   blog). Kept here in base.css so all templates share the exact same look. */
.faq__list { max-width: 900px; margin: var(--space-5) auto 0; border-top: 1px solid #d5d8dc; }
.faq__item { border-bottom: 1px solid #d5d8dc; }
.faq__q { cursor: pointer; padding: 20px 44px 20px 0; font-family: var(--font-base);
    font-weight: 700; font-size: 18px; color: var(--color-text); list-style: none; position: relative; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: ""; position: absolute; right: 8px; top: 50%;
    width: 9px; height: 9px; border-right: 2px solid #333; border-bottom: 2px solid #333;
    transform: translateY(-70%) rotate(45deg); transition: transform .15s ease; }
.faq__item[open] .faq__q::after { transform: translateY(-30%) rotate(225deg); }
.faq__a { padding: 0 0 22px; line-height: 1.65; }
.faq__a > :last-child { margin-bottom: 0; }
.faq__a ul { margin: 10px 0; padding-left: 22px; }
.faq__a table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.faq__a td, .faq__a th { border: 1px solid var(--color-border); padding: 8px 12px; text-align: left; }

/* Contact-form honeypot (hidden from users) + submit status banner */
.hp { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; margin: 0 !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; }
.form-status { padding: 16px 20px; margin: 0; text-align: center; font-weight: var(--fw-medium); color: #fff; }
.form-status--ok { background: #1e874b; }
.form-status--err { background: #c0392b; }