/* excire.com — Excire Foto Office Edition landing page (redesign 2026-07) */

.office-section-title {
    font-size: clamp(30px, 3.6vw, 48px);
    line-height: 1.17;
    text-align: left;
    margin: 0 0 var(--space-5);
}
.office-section-title--center { text-align: center; }
.office-section-title--light { color: #fff; }

/* ---- Buttons ---- */
.office-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.office-btns--center { justify-content: center; margin-top: var(--space-6); }
.office-btn { display: inline-flex; align-items: baseline; gap: 7px; font-size: 20px; padding: 14px 28px; letter-spacing: 0.04em; }
.office-btn__suffix { font-size: .85em; font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .95; }
.office-btn__suffix s { opacity: .85; }
.office-btn--ghost {
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}
.office-btn--ghost:hover { background: rgba(255, 255, 255, .22); }
/* Text-link style buttons (used next to a solid CTA in the pricing/final rows) */
.office-btn.office-btn--link {
    background: none; box-shadow: none; color: var(--color-link);
    padding: 15px 8px; text-decoration: underline; text-underline-offset: 3px;
}
.office-btn.office-btn--link:hover { opacity: .8; }
.office-btns--cta { align-items: center; gap: 10px 22px; margin-top: var(--space-5); }
.office-micro { text-align: center; font-size: 14px; color: var(--color-text-muted); margin: var(--space-4) 0 0; }
.office-micro--light { color: rgba(255,255,255,.8); }

/* ---- Hero ---- */
.office-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    color: #fff;
    padding-top: 70px;
}
.office-hero::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(10,12,14,.82) 0%, rgba(10,12,14,.45) 60%, rgba(10,12,14,.2) 100%);
}
.office-hero .office-hero__inner { position: relative; padding-block: 15px 200px; }
.office-hero__copy { max-width: 100%; }
.office-hero__title { color: #fff; font-size: clamp(42px, 5vw, 62px); line-height: 1.02; margin: 0 0 20px; }
.office-hero__subtitle { font-size: clamp(28px, 3.6vw, 48px); line-height: 1.17; margin: 0 0 32px; font-weight: 400; }
/* keep the three hero CTAs on one row */
.office-hero .office-btns { flex-wrap: nowrap; gap: 14px; }
.office-hero .office-btn { white-space: nowrap; }
.office-hero__bullets { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.office-hero__bullets li { position: relative; padding-left: 22px; font-weight: 500; }
.office-hero__bullets li::before { content: "\203A"; position: absolute; left: 0; color: #fff; font-weight: 700; }
/* Team screenshot centred, straddling the hero's bottom edge (half in the dark
   hero, half over the white intro below). */
.office-hero__media { position: relative; z-index: 2; margin-top: -180px; display: flex; justify-content: center; }
/* Transparent overlay screenshot — no backing, the dark hero shows through. */
.office-hero__media img { max-width: 760px; width: 100%; height: auto; }

/* ---- Intro (weiß) ---- */
.office-intro { padding-block: 70px var(--space-8); }
.office-intro .office-section-title { text-align: center; max-width: 1080px; margin-inline: auto; }
/* Neuerungen heading is smaller (an h3 on live) */
.office-news .office-section-title { font-size: clamp(26px, 2.7vw, 34px); }
.office-intro__cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: start; }
.office-intro__text p { margin: 0 0 var(--space-4); line-height: 1.7; }
.office-checklist { list-style: disc; margin: var(--space-3) 0 0; padding-left: 1.2em; color: #000; }
.office-checklist li { margin-bottom: 10px; line-height: 1.5; }

/* ---- Features (hellgrau): alternating image/text rows + 2x2 text boxes ---- */
.office-features { padding-block: 0; background: #f8f8f8; }
.office-features > .container { padding-block: var(--space-7) 32px; }
.office-features .office-section-title--center { margin-bottom: 40px; }
.office-frow {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
    margin-bottom: 32px;
}
.office-frow--reverse .office-frow__media { order: 2; }
.office-frow__media { position: relative; }
.office-frow__media img { width: 100%; height: auto; display: block; border-radius: 4px; }
.office-frow__badge {
    position: absolute; top: -12px; left: -12px; z-index: 1;
    background: #e2231a; color: #fff; font-weight: 700; font-size: 13px;
    width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.office-frow__title { font-size: 26px; margin: 0 0 14px; }
.office-frow__text { line-height: 1.65; font-size: 18px; margin: 0; color: var(--color-text); }
/* 2x2 text boxes below the feature rows */
.office-fboxes { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 32px; border-top: 1px solid #e0e0e0; border-left: 1px solid #e0e0e0; }
.office-fbox { padding: 26px 30px; background: #fff; border-right: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; }
.office-fbox h3 { font-size: 20px; margin: 0 0 10px; }
.office-fbox p { margin: 0; line-height: 1.6; color: var(--color-text); }

/* ---- Neuerungen (hellgrau, weiße Boxen) ---- */
.office-news { padding-block: 0; background: #f8f8f8; }
.office-news > .container { padding-block: 32px var(--space-7); }
.office-news__intro { text-align: center; max-width: 70ch; margin: 0 auto var(--space-6); line-height: 1.6; }
/* Boxes styled exactly like the feature boxes, three per row */
.office-news__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid #e0e0e0; border-left: 1px solid #e0e0e0; }
.office-news__box { padding: 30px 32px; background: #fff; border-right: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; }
.office-news__box h3 { font-size: 20px; margin: 0 0 10px; }
.office-news__box p { margin: 0; line-height: 1.6; color: var(--color-text); }

/* ---- Kundenreferenzen (slider) ---- */
.office-refs { padding-block: var(--space-8); background: #ebebeb; }
/* Peek carousel: active card centred, neighbours peek faded under the arrows */
.office-slider { position: relative; max-width: 1040px; margin-inline: auto; }
.office-slider__viewport { overflow: hidden; }
.office-slider__track { display: flex; gap: 28px; transition: transform .4s ease; }
.office-slider__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 44px; height: 44px; border: 0; cursor: pointer;
    background: #222; color: #fff; font-size: 24px; line-height: 1; border-radius: 3px;
}
.office-slider__nav--prev { left: 8px; }
.office-slider__nav--next { right: 8px; }
.office-slider__nav:hover { background: #000; }
.office-ref {
    flex: 0 0 78%; box-sizing: border-box; background: #fff; box-shadow: 0 0 12px rgba(0,0,0,.1);
    padding: 40px 48px; margin: 6px 0; display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: center;
    opacity: .28; transition: opacity .4s ease;
}
.office-ref.is-active { opacity: 1; }
.office-ref__logo { display: flex; align-items: center; justify-content: center; }
.office-ref__logo img { max-width: 100%; max-height: 150px; width: auto; height: auto; }
.office-ref__lead { margin: 0 0 10px; }
.office-ref blockquote { margin: 0 0 12px; line-height: 1.6; }
.office-ref figcaption { margin-bottom: 10px; color: var(--color-text); }
.office-ref__link { font-weight: 700; color: var(--color-link); }

/* ---- Schnell startklar (Türkis-Band) ---- */
.office-startklar { padding-block: var(--space-8); background: #daeef1; }
.office-startklar__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.office-startklar__media img { width: 100%; height: auto; border-radius: 4px; box-shadow: none; }
.office-startklar__copy p { line-height: 1.7; font-size: 18px; }

/* ---- DAM-Vergleich (dunkel) ---- */
.office-dam { padding-block: var(--space-8); background: #0c0f18; color: #fff; }
.office-dam__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 900px; margin-inline: auto; }
.office-dam__col { border-radius: 6px; padding: 32px; }
.office-dam__col--muted { background: #1a1e2b; }
/* Excire column: dark box with a teal frame (per live) */
.office-dam__col--excire { background: #0c111d; box-shadow: inset 0 0 0 2px #4fa69e; }
.office-dam__col--muted { background: #100d19; }
.office-dam__col h3 { font-size: 20px; margin: 0 0 20px; }
.office-dam__col--muted h3 { color: #fff; }
.office-dam__col--excire h3 { color: #4fa69e; }
.office-dam__col dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.office-dam__col dt { font-size: 14px; text-transform: none; letter-spacing: 0; opacity: .7; margin-top: 6px; }
.office-dam__col dd { margin: 0 0 6px; font-size: 21px; font-weight: 700; line-height: 1.25; }
.office-dam__col--muted dd { opacity: .9; }

/* ---- Transparente Preise ---- */
.office-pricing { padding-block: var(--space-8); background: #daeef1; }
.office-pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: 1000px; margin-inline: auto; align-items: stretch; }
.office-price { position: relative; background: #fff; border-radius: 4px; padding: 40px 32px; box-shadow: 0 0 10px rgba(0,0,0,.06); }
.office-price--featured { background: #b8dfe2; box-shadow: none; }
.office-price__badge {
    position: absolute; top: 0; left: 24px; transform: translateY(-50%);
    background: #16b5a0; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; padding: 6px 14px; border-radius: 2px;
}
.office-price__name { font-size: 17px; color: var(--color-text-muted); margin-bottom: 16px; }
.office-price--featured .office-price__name { color: #0f7a6c; }
.office-price__amount { font-size: 40px; font-weight: 700; color: var(--color-black); line-height: 1; }
.office-price__suffix { font-size: 16px; font-weight: 400; color: var(--color-text-muted); margin-left: 4px; }
.office-pricing__note { text-align: center; margin: var(--space-5) 0 0; font-size: 15px; color: var(--color-text-muted); }

/* ---- FAQ ---- */
/* FAQ uses the canonical accordion in base.css (shared by every page). */

/* ---- Final CTA ---- */
.office-final { padding-block: var(--space-8); background: linear-gradient(135deg, #1B67E6, #00ACFF); color: #fff; text-align: center; }
.office-final__title { color: #fff; font-size: clamp(26px, 3vw, 36px); margin: 0 0 12px; }
.office-final__subtitle { font-size: 19px; max-width: 62ch; margin: 0 auto; line-height: 1.5; }
.office-final__subtitle--2 { margin-top: 10px; opacity: .92; }
.office-final .office-btn--solid { background: #fff; color: var(--color-primary); }
.office-final .office-btn.office-btn--link { color: #fff; }
.office-final .office-btn--ghost { box-shadow: inset 0 0 0 1px #fff; }

/* Tall title band: matches the subpage title-image height (703px), content
   vertically centred. Used by the footer pages so their heros line up with the
   product/API/tutorial subpages. */
.office-hero--tall { min-height: 703px; display: flex; align-items: center; padding-top: 0; }
.office-hero--tall .office-hero__inner { width: 100%; }
@media (max-width: 900px) { .office-hero--tall { min-height: 0; } }

/* Footer/legal hero: modest title size (matches live; long EULA title fits) */
.office-hero--legal .office-hero__inner { padding-block: 90px; }
.office-hero--legal .office-hero__title { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.18; margin: 0; }

/* ---- Trial / Testversion page ---- */
.office-hero--plain .office-hero__inner { padding-block: 64px 64px; }
.office-hero__eyebrow { text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: #fff; opacity: .85; margin: 0 0 12px; font-size: 15px; }
/* Hero claims under the trial headline ("30 Tage kostenlos testen" …).
   Scoped to --plain: die Office-Landingpage nutzt dieselbe Klasse mit
   eigenem Chevron-Stil (oben in dieser Datei). */
.office-hero--plain .office-hero__bullets { margin: 18px 0 0; flex-direction: row; flex-wrap: wrap; gap: 10px 28px; }
.office-hero--plain .office-hero__bullets li { padding-left: 26px; color: #fff; font-size: 18px; line-height: 1.4; font-weight: 400; }
.office-hero--plain .office-hero__bullets li::before {   /* check mark */
    content: ""; position: absolute; left: 4px; top: .3em;
    width: 6px; height: 12px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}
/* Intro band between hero and the trial package */
.trial-intro { padding-block: var(--space-7) 0; }
.trial-intro__inner { max-width: 980px; }
.trial-intro__inner p { line-height: 1.6; margin: 0; }
.trial { padding-block: var(--space-8); }
.trial__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
/* Testpaket als Shop-Produktbox: shop.css bringt das Layout mit, aber sein
   negativer Versatz (Karten ragen in den Shop-Hero) darf hier nicht greifen. */
.trial.shop { margin-top: 0; }
/* Produktbild in voller Spaltenbreite wie bei den Shop-Boxen (shop.css:
   .shop__product--full .shop__product-media img { max-width: 100% }) — kein
   eigener Deckel hier, sonst faellt die Box aus dem Shop-Raster. */
.trial.shop .trial__intro { margin: 0 0 var(--space-3); line-height: 1.6; }
.trial__intro { line-height: 1.6; margin: 0 0 var(--space-4); }
.trial__contact-line { margin: var(--space-4) 0 0; font-size: 18px; }
.trial__contact-line a { color: var(--color-link); font-weight: 700; }
.trial__form-wrap { background: var(--color-bg-alt, #f7f7f7); padding: 36px; border-radius: 4px; }
.trial__form-title { font-size: 22px; line-height: 1.3; margin: 0 0 22px; }
.trial .office-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.office-form__field--full { grid-column: 1 / -1; }
.trial .office-form button[type="submit"] { justify-self: start; }

/* ---- Newsletter ---- */
.newsletter { padding-block: var(--space-8); }
.newsletter__inner { max-width: 640px; margin-inline: auto; }
.newsletter__form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin-top: var(--space-5); }
.newsletter__consent { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; font-size: 14px; line-height: 1.5; }
.newsletter__consent input { margin-top: 4px; flex: 0 0 auto; }
.newsletter__consent a { color: var(--color-link); }
/* Submit button — like live: 310px wide, left-aligned, normal weight, low height */
.newsletter__submit { grid-column: 1 / -1; justify-self: start; width: 310px; max-width: 100%;
    font-weight: 400; padding: 9px 24px; justify-content: center; text-align: center; }
.newsletter__ssl { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-text-muted); margin: var(--space-4) 0 0; }
.newsletter__ssl-icon { flex: 0 0 auto; color: #000; }

/* ---- Kontakt-Popup ---- */
.office-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.office-modal[hidden] { display: none; }
.office-modal__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); }
.office-modal__dialog { position: relative; z-index: 1; background: #fff; width: 100%; max-width: 760px; margin: auto; padding: 44px 48px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.office-modal__close { position: absolute; top: 14px; right: 18px; background: none; border: 0; font-size: 32px; line-height: 1; color: #888; cursor: pointer; padding: 4px 8px; }
.office-modal__close:hover { color: #222; }
.office-modal__title { font-size: 26px; margin: 0 0 10px; }
.office-modal__subtitle { margin: 0 0 var(--space-5); line-height: 1.5; color: var(--color-text); }

.office-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.office-form__field { display: block; margin-bottom: 18px; }
.office-form__field > span { display: block; font-size: 14px; margin-bottom: 6px; }
.office-form__field input, .office-form__field textarea {
    width: 100%; padding: 11px 12px; border: 1px solid #b9c0c7; border-radius: 2px;
    font-family: inherit; font-size: 16px;
}
.office-form__field input:focus, .office-form__field textarea:focus { outline: 2px solid var(--color-primary); border-color: var(--color-primary); }
.office-form__hint { display: block; font-size: 12px; color: var(--color-text-muted); line-height: 1.4; margin-top: 5px; }
.office-form__hint a { color: var(--color-link); }
.office-form__consent { font-size: 12px; color: var(--color-text-muted); line-height: 1.5; margin: 4px 0 20px; }
.office-form__consent a { color: var(--color-link); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .office-news__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
    .office-intro__cols { grid-template-columns: 1fr; gap: 32px; }
    .office-startklar__inner { grid-template-columns: 1fr; }
    .office-fboxes { grid-template-columns: 1fr; }
    .office-ref { grid-template-columns: 1fr; gap: 20px; padding: 28px 24px; }
    .office-ref__logo { justify-content: flex-start; }
    .office-dam__grid { grid-template-columns: 1fr; }
    .trial__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .office-pricing__grid { grid-template-columns: 1fr; max-width: 440px; }
    .office-hero .office-hero__inner { padding-block: 20px 140px; }
    .office-hero__media { margin-top: -120px; }
    .office-hero .office-btns { flex-wrap: wrap; }
    .office-intro { padding-block: 56px var(--space-7); }
}
@media (max-width: 480px) {
    /* Feature rows stay image-beside-text until phone width; only stack on phones. */
    .office-frow, .office-frow--reverse { grid-template-columns: 1fr; gap: 24px; }
    .office-frow--reverse .office-frow__media { order: 0; }
}
@media (max-width: 560px) {
    .office-news__grid { grid-template-columns: 1fr; }
    .office-slider__nav { width: 36px; height: 36px; }
    .office-form__row { grid-template-columns: 1fr; gap: 0; }
    .trial .office-form { grid-template-columns: 1fr; }
    .newsletter__form { grid-template-columns: 1fr; }
    .trial__form-wrap { padding: 24px 20px; }
    .office-modal__dialog { padding: 40px 20px 24px; }
    .office-hero__bullets,
    .office-hero--plain .office-hero__bullets { flex-direction: column; gap: 8px; }
    /* CTA buttons stack full-width so the long "Jetzt kaufen ab 399 €" fits */
    .office-btns .office-btn, .office-btns .btn { width: 100%; justify-content: center; }
}

/* Intro "Mehrwert" product-video link + lightbox (design consistent with product pages) */
.office-intro__videolink { text-align: center; margin: var(--space-4) 0 0; }
.office-intro__videolink .video-link { font-weight: 400; }
.video-link { display: inline-flex; align-items: center; gap: 8px; color: var(--color-primary); font-weight: var(--fw-medium); text-decoration: none; }
.video-link:hover { color: var(--color-primary-hover); text-decoration: underline; }
.video-link__icon { flex: 0 0 auto; }
.video-link__icon circle { fill: var(--color-primary); }
.video-link__icon path { fill: #fff; }
.video-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: 20px; }
.video-modal[hidden] { display: none; }
.video-modal__frame { position: relative; width: min(980px, 100%); aspect-ratio: 16 / 9; }
.video-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-modal__close { position: absolute; top: 12px; right: 22px; background: none; border: 0; color: #fff; font-size: 44px; line-height: 1; cursor: pointer; padding: 0; }