/* FOTONE.NET-spezifische Ergänzungen zum geteilten Landing-Design-System */

/* Wordmark */
.brand-name .caret {
    color: var(--grad-orange); font-weight: 800;
    font-size: 0.62em; position: relative; top: -0.55em;
    display: inline-block; transform: scaleX(1.5);
    margin: 0 0.12em;
}
.site-footer .caret { font-size: 0.9em; position: relative; top: -0.35em; display: inline-block; transform: scaleX(1.4); }

/* Hero: Headline auf dem Konzept-Foto */
.hero-photo {
    position: relative; overflow: hidden;
    min-height: 100vh; min-height: 100svh;
    display: flex; align-items: center; justify-content: center;
    padding: 7rem 0 4rem; margin-top: -5rem; /* rutscht unter den floatenden Header */
    text-align: center;
}
.hero-photo .hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-photo .hero-bg .hero-bg-img {
    position: absolute; inset: 0; display: block;
    background: url('/assets/images/hero-konzept.jpg') center 35% / cover no-repeat;
    /* AVIF/WebP where supported; browsers without image-set(type()) keep the
       jpg above. Preload in index.php is type-scoped to the SAME avif URL —
       keep both in sync or the preload double-downloads. */
    background-image: image-set(
        url('/assets/images/hero-konzept.avif') type('image/avif'),
        url('/assets/images/hero-konzept.webp') type('image/webp'),
        url('/assets/images/hero-konzept.jpg') type('image/jpeg'));
}
/* Soft parallax: photo drifts at half scroll speed.
   Primary path is a CSS scroll-driven animation — it runs on the compositor,
   so it is smooth on touch too (script-driven scrollY stutters there because
   momentum scrolling delivers scroll events only sporadically). Browsers
   without support fall back to the JS block in index.php, which is limited
   to mouse devices for exactly that reason; old touch browsers get a fixed
   photo instead of a stuttering one. */
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .hero-photo .hero-bg .hero-bg-img {
            /* shorthand first — it resets animation-timeline/-range */
            animation: hero-drift linear both;
            animation-timeline: scroll(root block);
            /* 0..100vh scroll maps to 0..50vh drift = half speed at any
               viewport height; past 100vh the hero is off-screen anyway */
            animation-range: 0 100vh;
        }
    }
}
@keyframes hero-drift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, 50vh, 0); }
}
/* JS fallback path only (see index.php): layer promotion is not paid for on
   devices where the photo never moves; in the CSS path the animation promotes
   its own layer. */
@supports not (animation-timeline: scroll()) {
    @media (hover: hover) and (pointer: fine) {
        .hero-photo .hero-bg .hero-bg-img { will-change: transform; }
    }
}
.hero-photo .hero-bg::before {
    /* Punktmuster wie im Original-Theme (newave .pattern) */
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: url('/assets/images/pattern.png') repeat;
}
.hero-photo .hero-bg::after {
    content: ''; position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(180deg, rgba(29, 36, 48, 0.30), rgba(29, 36, 48, 0.18) 45%, rgba(29, 36, 48, 0.28));
}
.hero-photo h1, .hero-photo .sub, .hero-photo .hero-topics {
    text-shadow: 0 1px 14px rgba(15, 23, 42, 0.45);
}
/* background-clip:text lässt den Schatten DURCH die Buchstaben scheinen — Verlaufstext ohne Schatten */
.hero-photo h1 .rotator, .hero-photo h1 em, .hero-photo h1 .grad { text-shadow: none; }
/* On the photos the dark violet start of the brand gradient sinks into dark
   image areas — both photo sections start the ramp in brighter tints. */
.hero-photo h1 em, .hero-photo h1 .grad,
.contact-photo .contact-aside h2 .grad {
    background-image: linear-gradient(92deg, #bfa8f2, #e79fda 35%, #f78f38 70%, var(--grad-amber));
}
.hero-photo .sub { color: #fff; }
@media (max-width: 640px) {
    .hero-photo .sub { line-height: 1.4; }
}
.hero-photo .hero-inner { position: relative; z-index: 1; padding-top: 5rem; }
.hero-photo h1 { color: #fff; }
.hero-topics {
    color: var(--slate-300); font-size: 0.9375rem; letter-spacing: 0.04em;
    text-transform: uppercase; margin-top: 2.5rem;
}

/* Arbeitsweise: 7 Schritte */
.steps {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
    counter-reset: step;
}
.step {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.5rem; box-shadow: var(--shadow-card);
}
.step-num {
    display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.875rem;
}
.step-num .ph { font-size: 1.5rem; }
.step h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.375rem; }
.step p { color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }

/* Leistungen: 4 Karten in 2x2 */
.services-grid { grid-template-columns: repeat(2, 1fr); }

/* rocketEM-Teaser-Band */
.em-band { grid-template-columns: 6fr 5fr; }
.em-teaser {
    display: flex; flex-direction: column; gap: 1.25rem; justify-content: center;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius); padding: 2rem;
}
.em-brand { display: flex; align-items: center; gap: 0.875rem; }
.em-brand img { width: 4.5rem; height: auto; }
.em-brand-name { font-size: 1.75rem; color: #fff; }
.em-brand-name .light { font-weight: 500; }
.em-brand-name .bold { font-weight: 800; }
.em-points { list-style: none; }
.em-points li {
    color: var(--slate-300); padding-left: 1.625rem; position: relative; margin-bottom: 0.625rem;
}
.em-points li::before {
    content: ''; position: absolute; left: 0; top: 0.3em; width: 1rem; height: 1rem;
    border-radius: 50%; background-color: rgba(154, 127, 213, 0.25);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='%23c9b6f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 0.75rem; background-position: center; background-repeat: no-repeat;
}

/* Kontakt-Details */
.contact-details { list-style: none; margin-top: 1.5rem; }
.contact-details li {
    display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem;
    font-size: 1.0625rem; line-height: 1.5;
}
/* Fixed icon column: reserves space before the webfont loads (no FOUT jump) and
   keeps all rows' text aligned regardless of glyph metrics. */
.contact-details .ph {
    color: var(--grad-violet); font-size: 1.25rem; line-height: 1.5;
    flex: 0 0 1.5rem; width: 1.5rem; text-align: center;
}
.contact-details a { color: var(--foreground); text-decoration: none; }
.contact-details a:hover { color: var(--primary); }

/* Kontakt: Sektion auf dem zweiten Konzept-Foto — gleiche Einbindung wie das
   Hero (Foto-Layer, Punktmuster, dunkler Verlauf, sanfter Compositor-Drift).
   Die Formular-Spalte ist bereits eine weiße Karte; nur die linke Spalte
   wechselt auf helle Typo. */
.contact-photo { position: relative; overflow: hidden; }
.contact-photo .contact-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.contact-photo .contact-bg .contact-bg-img {
    /* 45% overscan on both ends covers the +-23% drift (23% of the 190%-tall
       image = ~44% of the section per direction) — cover zooms the 4:3 photo
       accordingly; the flat section leaves plenty of vertical slack */
    position: absolute; inset: -45% 0; display: block;
    background: url('/assets/images/kontakt-konzept.jpg') center / cover no-repeat;
    background-image: image-set(
        url('/assets/images/kontakt-konzept.avif') type('image/avif'),
        url('/assets/images/kontakt-konzept.webp') type('image/webp'),
        url('/assets/images/kontakt-konzept.jpg') type('image/jpeg'));
}
/* Named view-timeline on the section instead of the hero's scroll(): the
   section sits at a language-dependent scroll offset, so we track the
   section's own trip through the viewport and drive the image from it.
   Deliberately NO JS fallback here (unlike the hero): below the fold a
   static photo is fine for browsers without scroll-driven animations. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .contact-photo { view-timeline: --kontakt-view block; }
        .contact-photo .contact-bg .contact-bg-img {
            /* shorthand first — it resets animation-timeline AND -range */
            animation: contact-drift linear both;
            animation-timeline: --kontakt-view;
            /* Finish BEFORE the page end: the section is the last one, and at
               the bottom the timeline only ever reaches ~49% (desktop) / ~67%
               (mobile). Ending at 45% parks the image there, so trackpad/touch
               rubber-band at the page end no longer sways it (was: visible
               wobble when scrolling up/down at the bottom). */
            animation-range: cover 0% cover 45%;
        }
    }
}
/* -23% -> 0 (not +-23%): with the 45%-coverage range the parked end state is
   the centered crop — same resting composition as before, same visible travel
   (the old 50..100% half of the keyframes was unreachable anyway). */
@keyframes contact-drift {
    from { transform: translate3d(0, -23%, 0); }
    to { transform: translate3d(0, 0, 0); }
}
/* Stacked layout: the narrow cover strip would show only the gray whiteboard
   center — pin the crop to the colorful sticky-note wall (right photo third) */
@media (max-width: 960px) {
    .contact-photo .contact-bg .contact-bg-img { background-position: 83% center; }
}
.contact-photo .contact-bg::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: url('/assets/images/pattern.png') repeat;
}
.contact-photo .contact-bg::after {
    /* identical to the hero overlay */
    content: ''; position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(180deg, rgba(29, 36, 48, 0.30), rgba(29, 36, 48, 0.18) 45%, rgba(29, 36, 48, 0.28));
}
.contact-photo .contact-grid { position: relative; z-index: 1; }
.contact-photo .contact-aside h2,
.contact-photo .contact-aside p,
.contact-photo .contact-details li {
    text-shadow: 0 1px 14px rgba(15, 23, 42, 0.45);
}
.contact-photo .contact-aside h2 { color: #fff; }
.contact-photo .contact-aside p { color: #fff; }
.contact-photo .contact-details li { color: #fff; }
.contact-photo .contact-details .ph { color: #fff; }
.contact-photo .contact-details a { color: #fff; }
.contact-photo .contact-details a:hover { color: #fff; text-decoration: underline; }

/* Rechtsseiten */
.legal-page { padding-top: 3rem; }
.legal-page h1 { font-size: clamp(2rem, 3.5vw, 2.75rem); font-weight: 800; margin-bottom: 1.5rem; letter-spacing: -0.02em; }
.legal-page h2 { font-size: 1.375rem; font-weight: 700; margin: 2rem 0 0.75rem; }
.legal-page h3 { font-size: 1.125rem; font-weight: 700; margin: 1.5rem 0 0.5rem; }
.legal-page p, .legal-page li { color: var(--slate-700); line-height: 1.65; margin-bottom: 0.75rem; }
.legal-page ul { padding-left: 1.25rem; margin-bottom: 1rem; }
.legal-page a { color: var(--primary); }
.legal-content { max-width: 50rem; }

/* Responsive */
@media (max-width: 960px) {
    .steps { grid-template-columns: repeat(2, 1fr); }
    .services-grid { grid-template-columns: 1fr; }
    .em-band { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .steps { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .hero-topics { font-size: 0.75rem; }
}

/* Gestapelte Kontakt-Spalte: min-content darf die Spalte nicht sprengen */
@media (max-width: 960px) {
    .contact-grid { grid-template-columns: minmax(0, 1fr); }
    .contact-aside, .contact-form { min-width: 0; }
}



/* rocketEM-Störer: CTA + Preis-Link */
.em-ctas { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.em-price-link { color: var(--slate-300); text-decoration: underline; text-underline-offset: 3px; }
.em-price-link:hover { color: #fff; }
.em-price-link .ph { font-size: 0.85em; }

/* Kundenstimmen als Unterpunkt des E-Mail-Marketing-Service */
#e-mail-marketing { padding-bottom: 1rem; }
.quotes-section { padding-top: 1.5rem; }
.quotes-h3 { font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 800; letter-spacing: -0.01em; }
/* Beats .section-head p (landing.css) — the 1.375rem sub is too big under the smaller quotes-h3 */
.section-head p.quotes-sub { font-size: 1.125rem; margin-top: 0.5rem; }

.brand img.brand-logo { display: block; height: 3.125rem; width: auto; }

/* Frost-Streifen erst beim Scrollen einblenden — auf dem Hero-Foto wäre er ein heller Balken */
.header-inner::before { opacity: 0; transition: opacity 0.25s; }
.site-header.scrolled .header-inner::before { opacity: 1; }

/* Auf dem Foto-Hero: Outline-Hover mit weißem statt dunklem Text */
.hero-photo .btn-outline-violet:hover { color: #fff; }

/* Agentur-Sektion ist nur Kopf ohne Inhalt — Leerlauf darunter einsparen */
#agentur { padding-bottom: 3rem; }
#agentur .section-head { margin-bottom: 0; }
#agentur .section-head p { margin-bottom: 0; }

/* exali-Siegel im Impressum */
.exali-seal { margin-top: 2.5rem; }
.legal-page h5 { font-size: 1rem; font-weight: 700; margin: 1.5rem 0 0.5rem; }