/* assets/startseite.css */ /* ============================================================= STARTSEITE · TINO BOTH · PERSÖNLICHE FASSUNG V8 Gemeinsame Gestaltung für die acht neuen Startseiten-Blöcke. Diesen Style zusammen mit Abschnitt 01 einsetzen. Die bisherigen Startseiten-Blöcke inkl. ihrer Styles ersetzen. Menü, Footer, Tracking und Buchungskalender bleiben außerhalb. ============================================================= */ section.anfh-home { --anfh-ink: #15313e; --anfh-copy: #395361; --anfh-muted: #607480; --anfh-teal: #28736e; --anfh-teal-light: #78ddd5; --anfh-coral: #ef8b68; --anfh-primary: #315f81; --anfh-primary-hover: #254b68; --anfh-link: #236f69; --anfh-border: #d9e5e8; --anfh-focus-ring: #236f69; display: block; position: relative; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; margin: 0; padding: clamp(60px, 6.5vw, 88px) 24px; overflow-x: hidden; overflow-x: clip; font-family: inherit; font-size: 17px; line-height: 1.65; color: var(--anfh-copy); background: #fff; text-align: left; scroll-margin-top: 105px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } section.anfh-home *, section.anfh-home *::before, section.anfh-home *::after { box-sizing: border-box; } section.anfh-home > *, section.anfh-home .anfh-wrap > *, section.anfh-home .anfh-grid > * { min-width: 0; } section.anfh-home .anfh-wrap { width: min(100%, 1180px); margin: 0 auto; } section.anfh-home :where(h1, h2, h3, p, a, li, blockquote, summary, figcaption) { font-family: inherit; } section.anfh-home :where(h1, h2, h3, p, figure, blockquote) { margin: 0; } section.anfh-home h1, section.anfh-home h2, section.anfh-home h3 { color: var(--anfh-ink); font-style: normal; font-weight: 750; overflow-wrap: break-word; } section.anfh-home h1 { font-size: clamp(38px, 4.8vw, 65px); line-height: 1.07; letter-spacing: -.042em; text-wrap: balance; } section.anfh-home h2 { font-size: clamp(29px, 3.35vw, 44px); line-height: 1.16; letter-spacing: -.032em; text-wrap: balance; } section.anfh-home h3 { font-size: 21px; line-height: 1.28; letter-spacing: -.015em; } section.anfh-home p { font-size: inherit; font-weight: 400; line-height: inherit; color: inherit; } section.anfh-home a { color: var(--anfh-link); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; overflow-wrap: anywhere; } section.anfh-home a:hover { text-decoration-thickness: 2px; } section.anfh-home :where(a, summary):focus-visible { outline: 3px solid var(--anfh-focus-ring); outline-offset: 5px; border-radius: 5px; } section.anfh-home img { display: block; max-width: 100%; } section.anfh-home .anfh-kicker { margin: 0 0 12px; color: var(--anfh-teal); font-size: 12px; font-weight: 800; line-height: 1.5; letter-spacing: .095em; text-transform: uppercase; } section.anfh-home .anfh-heading { max-width: 770px; margin: 0 0 34px; } section.anfh-home .anfh-heading > p:last-child { margin-top: 17px; } section.anfh-home .anfh-text-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 0; font-size: 16px; font-weight: 700; line-height: 1.45; text-decoration: none; } section.anfh-home .anfh-text-link:hover { text-decoration: underline; } section.anfh-home .anfh-arrow { flex: 0 0 auto; font-size: 1.15em; } section.anfh-home .anfh-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } section.anfh-home .anfh-button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; max-width: 100%; padding: 13px 22px; border: 1px solid transparent; border-radius: 9px; font-size: 16px; font-weight: 750; line-height: 1.35; text-align: center; text-decoration: none; transition: background-color .18s ease, border-color .18s ease; } section.anfh-home .anfh-button--primary { color: #fff; background: var(--anfh-primary); } section.anfh-home .anfh-button--primary:hover { background: var(--anfh-primary-hover); } section.anfh-home .anfh-button--secondary { color: var(--anfh-ink); border-color: #a8c3c7; background: transparent; } section.anfh-home .anfh-button--secondary:hover { background: #edf6f5; } section.anfh-home.anfh-dark { --anfh-ink: #f7fbfc; --anfh-copy: #d3e0e5; --anfh-muted: #b9ccd3; --anfh-teal: #78ddd5; --anfh-link: #90e6df; --anfh-border: rgba(132, 212, 206, .25); --anfh-focus-ring: #90e6df; color: var(--anfh-copy); background: #102731; } section.anfh-home.anfh-dark .anfh-button--secondary { color: #f7fbfc; border-color: rgba(207, 233, 235, .36); background: rgba(255, 255, 255, .025); } section.anfh-home.anfh-dark .anfh-button--secondary:hover { background: rgba(255, 255, 255, .08); border-color: rgba(207, 233, 235, .6); } /* Glasbox: gleiche feine Türkis-Koralle-Lichtkante wie im Symptomkompass. */ section.anfh-home .anfh-glass { position: relative; border: 1px solid rgba(120, 221, 213, .26); border-radius: 20px; background: linear-gradient(120deg, rgba(53, 170, 164, .13), rgba(7, 23, 34, .4) 48%, rgba(239, 139, 104, .1)); box-shadow: 0 24px 54px rgba(0, 0, 0, .16); } section.anfh-home .anfh-glass::before { content: ""; position: absolute; z-index: 1; left: 50%; top: -1px; width: 62%; height: 2px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--anfh-teal-light), var(--anfh-coral), transparent); pointer-events: none; } /* Strukturierter dunkler Hintergrund aus der gelieferten klk-cases-Sektion. Statisches Raster; keine Animation, keine externe Datei, keine Klickbarriere. */ section.anfh-home.anfh-pattern { isolation: isolate; background: radial-gradient(circle at 13% 18%, rgba(58,167,162,.18), transparent 29%), radial-gradient(circle at 89% 82%, rgba(235,139,102,.16), transparent 31%), linear-gradient(145deg, #071523 0%, #0a1b2c 50%, #102839 100%); } section.anfh-home.anfh-pattern::before { content: ""; position: absolute; z-index: 0; inset: 0; opacity: .42; pointer-events: none; background-image: linear-gradient(rgba(153,206,207,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(153,206,207,.045) 1px, transparent 1px); background-size: 62px 62px; -webkit-mask-image: linear-gradient(115deg, transparent 4%, #000 34%, #000 75%, transparent 98%); mask-image: linear-gradient(115deg, transparent 4%, #000 34%, #000 75%, transparent 98%); } section.anfh-home.anfh-pattern > .anfh-wrap { position: relative; z-index: 1; } /* 02 · Persönliche Vorstellung statt einer zweiten Methodenerklärung. */ #anfh-about { background: #f8faf9; } #anfh-about .anfh-about__inner { display: grid; grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr); align-items: center; gap: clamp(35px, 6vw, 84px); } #anfh-about .anfh-about__portrait { max-width: 435px; } #anfh-about .anfh-about__portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 18px; object-fit: cover; object-position: center 31%; background: #e2e9e8; } #anfh-about figcaption { margin-top: 11px; color: var(--anfh-muted); font-size: 14px; } #anfh-about .anfh-about__copy > p:not(.anfh-kicker) { margin-top: 18px; } #anfh-about .anfh-about__credentials { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 23px 0 13px; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--anfh-border); } #anfh-about .anfh-about__credentials li { padding: 0; margin: 0; color: #244c57; font-size: 14px; font-weight: 700; line-height: 1.5; } #anfh-about .anfh-about__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 9px; } #anfh-about .anfh-ambassador__link { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; max-width: 220px; padding: 6px 0; color: #24404b; background: transparent; text-decoration: none; } #anfh-about .anfh-ambassador__logo { width: 190px; height: auto; object-fit: contain; } #anfh-about .anfh-ambassador__pending { font-size: 14px; line-height: 1.45; font-weight: 650; } #anfh-about .anfh-ambassador__link:hover { text-decoration: underline; } /* 03 · Sechs klare Anliegen, keine vorgeschaltete zweite Sortierung. */ #anfh-focus .anfh-focus__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; } #anfh-focus .anfh-focus__item { border-top: 1px solid #bdcfD1; } #anfh-focus .anfh-focus__link { display: flex; min-height: 236px; height: 100%; padding: 26px 0; flex-direction: column; align-items: flex-start; color: var(--anfh-copy); text-decoration: none; } #anfh-focus .anfh-focus__link h3 { margin-bottom: 12px; } #anfh-focus .anfh-focus__link p { font-size: 16px; line-height: 1.65; } #anfh-focus .anfh-focus__more { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 18px; color: var(--anfh-link); font-size: 15px; font-weight: 750; line-height: 1.4; } #anfh-focus .anfh-focus__link:hover h3, #anfh-focus .anfh-focus__link:hover .anfh-focus__more { text-decoration: underline; text-underline-offset: 4px; } #anfh-focus .anfh-focus__bottom { margin-top: 16px; } /* 04 · Ein einziger Ablauf mit einem konkreten Vergleichsbeispiel. */ #anfh-process { /* Hintergrund über .anfh-pattern */ } #anfh-process .anfh-process__inner { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: clamp(36px, 6vw, 76px); align-items: center; } #anfh-process .anfh-process__intro { margin-top: 19px; } #anfh-process .anfh-process__list { margin: 27px 0 0; padding: 0; list-style: none; } #anfh-process .anfh-step { display: grid; grid-template-columns: 37px minmax(0, 1fr); gap: 15px; padding: 20px 0; margin: 0; border-top: 1px solid rgba(185, 222, 223, .2); } #anfh-process .anfh-step__number { color: var(--anfh-teal-light); font-size: 14px; font-weight: 800; line-height: 1.8; } #anfh-process .anfh-step h3 { margin-bottom: 8px; font-size: 20px; } #anfh-process .anfh-step p { font-size: 16px; line-height: 1.65; } #anfh-process .anfh-process__example { padding: 34px; } #anfh-process .anfh-process__example h3 { font-size: 27px; line-height: 1.2; } #anfh-process .anfh-process__example > p:not(.anfh-kicker) { margin-top: 19px; } #anfh-process .anfh-process__comparison { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 26px 0 5px; padding: 19px 0; border-top: 1px solid rgba(185, 222, 223, .22); border-bottom: 1px solid rgba(185, 222, 223, .22); color: #f8fbfc; font-size: 16px; line-height: 1.5; } #anfh-process .anfh-process__comparison strong { display: block; color: var(--anfh-teal-light); font-size: 13px; } #anfh-process .anfh-process__example .anfh-process__takeaway { color: #bdd0d7; font-size: 15px; } #anfh-process .anfh-process__example .anfh-text-link { margin-top: 17px; } /* 05 · Zitate und Bewertungslinks in einem Abschnitt. */ #anfh-reviews { background: #f8faf9; } #anfh-reviews .anfh-testimonials__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } #anfh-reviews .anfh-testimonial { display: flex; flex-direction: column; min-width: 0; padding: 28px; border: 1px solid #dce7e8; border-radius: 15px; background: #fff; } #anfh-reviews .anfh-testimonial__topic { margin-bottom: 18px; color: var(--anfh-teal); font-size: 12px; font-weight: 750; line-height: 1.5; letter-spacing: .045em; text-transform: uppercase; } #anfh-reviews blockquote { color: #2d4b59; font-size: 16px; line-height: 1.75; } #anfh-reviews .anfh-testimonial__source { margin-top: auto; padding-top: 23px; } #anfh-reviews .anfh-testimonial__source strong { display: block; color: var(--anfh-ink); font-size: 15px; } #anfh-reviews .anfh-testimonial__source a { display: inline-block; padding: 8px 0; font-size: 14px; line-height: 1.5; } #anfh-reviews .anfh-reviews__note { margin-top: 21px; color: var(--anfh-muted); font-size: 14px; } #anfh-reviews .anfh-review-links { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 23px; margin-top: 19px; padding-top: 18px; border-top: 1px solid var(--anfh-border); } #anfh-reviews .anfh-review-links > span { font-size: 15px; } #anfh-reviews .anfh-review-links a { font-size: 15px; } /* Kompakte Bewertungsübersicht statt einer zweiten großen Kartenreihe. Sterne sind eigene neutrale Zeichen, keine nachgebauten Plattformlogos. */ #anfh-reviews .anfh-rating-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 29px; padding: 24px 0; border-top: 1px solid #cbdcdd; border-bottom: 1px solid #cbdcdd; } #anfh-reviews .anfh-rating { display: block; min-width: 0; padding: 0 25px; border-left: 1px solid #d7e3e4; text-decoration: none; color: var(--anfh-copy); } #anfh-reviews .anfh-rating:first-child { border-left: 0; padding-left: 0; } #anfh-reviews .anfh-rating__platform { display: block; color: var(--anfh-ink); font-size: 16px; font-weight: 750; } #anfh-reviews .anfh-rating__line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 7px 0; } #anfh-reviews .anfh-rating__score { color: var(--anfh-ink); font-size: 30px; font-weight: 750; line-height: 1.15; letter-spacing: -.035em; } #anfh-reviews .anfh-rating__score small { font-size: 15px; font-weight: 500; letter-spacing: 0; } #anfh-reviews .anfh-stars { position: relative; display: inline-block; color: #b2c4c4; font-family: Arial, sans-serif; font-size: 19px; line-height: 1; letter-spacing: 2px; white-space: nowrap; overflow: hidden; } #anfh-reviews .anfh-stars__fill { position: absolute; left: 0; top: 0; overflow: hidden; color: #267a72; white-space: nowrap; } #anfh-reviews .anfh-rating__count { display: block; color: #526c77; font-size: 14px; } #anfh-reviews .anfh-rating__open { display: block; margin-top: 9px; color: var(--anfh-link); font-size: 13px; font-weight: 650; } #anfh-reviews .anfh-rating:hover .anfh-rating__open { text-decoration: underline; text-underline-offset: 3px; } #anfh-reviews .anfh-rating-maintenance { margin: -15px 0 30px; color: var(--anfh-muted); font-size: 12px; line-height: 1.6; } #anfh-focus .anfh-focus__context { max-width: 770px; margin: 18px 0 0; font-size: 14px; color: var(--anfh-muted); } /* 06 · Fragen vor einer Kontaktaufnahme. Native Details: kein JavaScript. */ #anfh-faq .anfh-wrap { max-width: 920px; } #anfh-faq .anfh-faq__list { border-top: 1px solid var(--anfh-border); } #anfh-faq details { border-bottom: 1px solid var(--anfh-border); } #anfh-faq summary { position: relative; display: block; min-height: 66px; padding: 22px 45px 22px 0; color: var(--anfh-ink); font-size: 17px; font-weight: 700; line-height: 1.45; cursor: pointer; list-style: none; } #anfh-faq summary::-webkit-details-marker { display: none; } #anfh-faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--anfh-teal); font-size: 25px; font-weight: 400; } #anfh-faq details[open] summary::after { content: "−"; } #anfh-faq .anfh-answer { max-width: 810px; padding: 0 35px 24px 0; font-size: 16px; line-height: 1.75; } /* 07 · Persönliche Einladung in der gewünschten Glasbox. */ #anfh-cta { /* Hintergrund über .anfh-pattern */ } #anfh-cta .anfh-cta__box { max-width: 980px; margin: 0 auto; padding: 46px 48px; text-align: center; } #anfh-cta h2 { max-width: 840px; margin: 0 auto; } #anfh-cta .anfh-cta__intro { max-width: 720px; margin: 21px auto 26px; } #anfh-cta .anfh-actions { justify-content: center; } #anfh-cta .anfh-cta__small { margin-top: 17px; color: #c2d4db; font-size: 14px; } #anfh-cta .anfh-cta__mail { margin-top: 18px; color: #c2d4db; font-size: 15px; } #anfh-cta .anfh-cta__mail a { display: inline-block; padding: 5px 0; } /* 08 · Fachliche Angebote kompakt, nach dem Kundenbereich. */ #anfh-workshops { padding: 39px 24px; background: #f4f8f7; } #anfh-workshops .anfh-workshops__inner { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 26px 54px; align-items: center; } #anfh-workshops h2 { font-size: clamp(25px, 2.6vw, 34px); } #anfh-workshops .anfh-workshops__copy > p { font-size: 16px; } #anfh-workshops .anfh-actions { margin-top: 10px; gap: 9px 24px; } /* Breitenwechsel: nur zwei Hero-Layouts, keine schmalen Zwischen-Spalten. */ /* Fallback nur für Browser ohne Container Queries. */ @media (max-width: 1000px) { #anfh-focus .anfh-focus__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #anfh-reviews .anfh-testimonial { padding: 23px; } } @media (max-width: 820px) { #anfh-about .anfh-about__inner { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 30px; } #anfh-about .anfh-about__portrait img { aspect-ratio: 2 / 3; } #anfh-about .anfh-about__bottom { align-items: flex-start; flex-direction: column; gap: 12px; } #anfh-process .anfh-process__inner { grid-template-columns: 1fr; gap: 31px; } #anfh-process .anfh-process__example { max-width: 650px; } #anfh-reviews .anfh-testimonials__grid { grid-template-columns: 1fr; } #anfh-workshops .anfh-workshops__inner { grid-template-columns: 1fr; gap: 19px; } } @media (max-width: 660px) { } @media (max-width: 640px) { section.anfh-home { padding: 53px 20px; font-size: 16px; line-height: 1.7; } section.anfh-home h1 { font-size: clamp(36px, 9vw, 49px); } section.anfh-home h2 { font-size: 29px; } section.anfh-home h3 { font-size: 20px; } section.anfh-home .anfh-kicker { font-size: 11.5px; margin-bottom: 10px; } section.anfh-home .anfh-heading { margin-bottom: 27px; } section.anfh-home .anfh-button { width: 100%; font-size: 16px; } section.anfh-home .anfh-actions { align-items: stretch; flex-direction: column; gap: 11px; } #anfh-about .anfh-about__inner { grid-template-columns: 1fr; gap: 30px; } #anfh-about .anfh-about__copy { order: 1; } #anfh-about .anfh-about__portrait { order: 2; max-width: 360px; width: 100%; margin: 0 auto; } #anfh-about .anfh-about__portrait img { aspect-ratio: 4 / 5; } #anfh-about .anfh-about__credentials { gap: 9px 16px; } #anfh-about .anfh-about__bottom { flex-direction: row; align-items: center; gap: 13px 23px; } #anfh-focus .anfh-focus__grid { grid-template-columns: 1fr; } #anfh-focus .anfh-focus__link { min-height: 0; padding: 24px 0; } #anfh-focus .anfh-focus__more { padding-top: 15px; } #anfh-process .anfh-step { grid-template-columns: 29px minmax(0, 1fr); gap: 12px; } #anfh-process .anfh-process__example { padding: 29px 23px; } #anfh-process .anfh-process__example h3 { font-size: 25px; } #anfh-reviews .anfh-testimonial { padding: 25px 22px; } #anfh-reviews .anfh-rating { padding: 0 13px; } #anfh-reviews .anfh-rating__platform { font-size: 14px; } #anfh-reviews .anfh-rating__line { gap: 7px; } #anfh-reviews .anfh-rating__score { font-size: 27px; } #anfh-reviews .anfh-rating__count { font-size: 13px; } #anfh-reviews .anfh-review-links { gap: 6px 20px; } #anfh-reviews .anfh-review-links > span { flex-basis: 100%; } #anfh-faq summary { padding-top: 20px; padding-bottom: 20px; font-size: 16px; } #anfh-faq .anfh-answer { padding-right: 8px; } #anfh-cta .anfh-cta__box { padding: 35px 22px; } #anfh-cta .anfh-cta__intro { margin-top: 19px; } #anfh-cta .anfh-cta__small { font-size: 13px; } #anfh-workshops { padding: 35px 20px; } #anfh-workshops .anfh-actions { align-items: flex-start; gap: 2px; } } @media (max-width: 520px) { #anfh-reviews .anfh-rating-strip { grid-template-columns: 1fr; padding: 0; } #anfh-reviews .anfh-rating { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 16px; align-items: center; border-left: 0; border-top: 1px solid #d7e3e4; padding: 18px 0; } #anfh-reviews .anfh-rating:first-child { border-top: 0; } #anfh-reviews .anfh-rating__platform { font-size: 15px; } #anfh-reviews .anfh-rating__line { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-end; margin: 0; } #anfh-reviews .anfh-rating__count { grid-column: 1; margin-top: 3px; } #anfh-reviews .anfh-rating__open { grid-column: 1 / -1; margin-top: 7px; } } @media (prefers-reduced-motion: reduce) { section.anfh-home *, section.anfh-home *::before, section.anfh-home *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } @media (forced-colors: active) { section.anfh-home .anfh-glass, section.anfh-home .anfh-button { border-color: ButtonText; } section.anfh-home .anfh-glass::before { background: CanvasText; } section.anfh-home :where(a, summary):focus-visible { outline-color: Highlight; } } /* Menü-Trennlinie aus der gelieferten bestehenden Hero-Vorlage. */ #anfh-hero::after { content:""; position:absolute; z-index:3; top:calc(var(--anfh-menu-overlap) + var(--anfh-x5-offset-compensation)); left:50%; width:min(92%,1440px); height:1px; transform:translateX(-50%); pointer-events:none; background:linear-gradient(90deg,transparent,rgba(103,211,202,.5),transparent); } #anfh-hero { --anfh-menu-overlap:75px; --anfh-x5-offset-compensation:76px; position:relative; isolation:isolate; container:anfhHero / inline-size; box-sizing:border-box; width:100%; min-width:0; margin-top:calc(-1 * var(--anfh-menu-overlap)); padding:calc(var(--anfh-menu-overlap) + var(--anfh-x5-offset-compensation)) 0 0; background:#0d1a27; color:#f4f7f8; font-family:inherit; font-size:17px; line-height:1.65; } #anfh-hero *, #anfh-hero *::before, #anfh-hero *::after {box-sizing:border-box;} #anfh-hero .anfh-hero__stage {position:relative; z-index:2; display:flex; align-items:flex-end; min-height:clamp(500px,calc(100svh - 230px),700px); padding:36px 0 42px;} #anfh-hero .anfh-hero__background {position:absolute; z-index:0; inset:0; display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:54% top;} #anfh-hero .anfh-hero__shade {position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent 32%,rgba(8,20,30,.05) 48%,rgba(8,20,30,.83) 73%,rgba(8,20,30,.94)),linear-gradient(0deg,rgba(8,20,30,.55),transparent 65%);} #anfh-hero .anfh-hero__grid {position:absolute;z-index:1;inset:0;pointer-events:none;opacity:.42;background-image:linear-gradient(rgba(153,206,207,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(153,206,207,.045) 1px,transparent 1px);background-size:62px 62px;mask-image:linear-gradient(115deg,transparent 4%,#000 34%,#000 75%,transparent 98%);} #anfh-hero .anfh-hero__inner {position:relative;z-index:2;width:min(calc(100% - 64px),1660px);min-width:0;margin:0 auto;} #anfh-hero .anfh-hero__copy {width:min(650px,52%);min-width:0;margin-left:auto;text-align:left;} #anfh-hero .anfh-eyebrow {margin:0 0 16px;color:#55c3bc;font-size:13px;font-weight:800;letter-spacing:.055em;text-transform:uppercase;} #anfh-hero h1 {margin:0 0 24px;color:#fff;font-family:inherit;font-size:clamp(40px,4cqi,64px);line-height:1.08;letter-spacing:-.045em;text-wrap:balance;} #anfh-hero .anfh-hero__lead {margin:0;color:#d0dbe1;font-size:18px;line-height:1.68;} #anfh-hero .anfh-hero__lead strong {color:#fff;} #anfh-hero .anfh-hero__contact {display:flex;align-items:center;gap:20px;margin-top:27px;min-width:0;} #anfh-hero .anfh-actions {display:flex;gap:12px;flex-wrap:wrap;min-width:0;flex:1;} #anfh-hero .anfh-button {display:inline-flex;align-items:center;justify-content:center;min-height:50px;max-width:100%;padding:13px 18px;border:1px solid transparent;border-radius:8px;font-size:15px;font-weight:800;line-height:1.35;text-align:center;text-decoration:none;transition:background-color .2s,border-color .2s;} #anfh-hero .anfh-button--primary {color:#fff;background:#3a9d98;} #anfh-hero .anfh-button--primary:hover {background:#48aaa4;} #anfh-hero .anfh-button--secondary {color:#fff;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.28);} #anfh-hero .anfh-button--secondary:hover {background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.52);} #anfh-hero .anfh-ambassador {position:static;flex:0 0 112px;margin:0;padding:0;border:0;} #anfh-hero .anfh-ambassador__link {display:block;width:112px;max-width:100%;padding:0;border-radius:5px;} #anfh-hero .anfh-ambassador__logo {display:block;width:100%;height:auto;} #anfh-hero .anfh-hero__note {margin:11px 0 0;color:#c7d1d7;font-size:14px;} #anfh-hero .anfh-hero__direct {margin:8px 0 0;font-size:14px;} #anfh-hero .anfh-hero__direct a {display:inline-block;padding:6px 0;color:#79d8d0;text-underline-offset:4px;} #anfh-hero a:focus-visible {outline:3px solid #79d8d0;outline-offset:5px;} @media(max-width:660px){#anfh-hero {--anfh-menu-overlap:68px;--anfh-x5-offset-compensation:64px;}} /* STACKED_RULES_START */ @container anfhHero (min-width:1400px) { #anfh-hero .anfh-hero__background {width:min(100%,1300px);-webkit-mask-image:linear-gradient(90deg,#000 72%,transparent 100%);mask-image:linear-gradient(90deg,#000 72%,transparent 100%);} } @container anfhHero (min-width:561px) and (max-width:849px) { #anfh-hero .anfh-hero__contact {gap:12px;} #anfh-hero .anfh-actions {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);} #anfh-hero .anfh-button {padding:12px;font-size:14px;} } @container anfhHero (min-width:561px) and (max-width:660px) { #anfh-hero .anfh-hero__lead {font-size:16px;line-height:1.6;} } @container anfhHero (min-width:850px) and (max-width:1199px) { #anfh-hero .anfh-hero__shade {background:linear-gradient(90deg,transparent 32%,rgba(8,20,30,.05) 48%,rgba(8,20,30,.83) 73%,rgba(8,20,30,.94)),linear-gradient(0deg,rgba(8,20,30,.86),rgba(8,20,30,.12) 55%,transparent 75%);} #anfh-hero .anfh-hero__copy {width:min(650px,70%);} #anfh-hero h1 {font-size:clamp(34px,3.8cqi,46px);} #anfh-hero .anfh-hero__lead {font-size:17px;} #anfh-hero .anfh-eyebrow {font-size:12px;} #anfh-hero .anfh-hero__contact {gap:14px;} #anfh-hero .anfh-button {padding:13px 14px;font-size:14px;} #anfh-hero .anfh-ambassador {flex-basis:96px;} #anfh-hero .anfh-ambassador__link {width:96px;} } @container anfhHero (max-width:849px) { #anfh-hero .anfh-hero__stage {display:block;min-height:0;padding:0 0 46px;} #anfh-hero .anfh-hero__background {position:relative;inset:auto;height:75cqi;object-fit:contain;object-position:center top;} #anfh-hero .anfh-hero__shade {display:none;} #anfh-hero .anfh-hero__inner {width:min(calc(100% - 48px),740px);margin:32px auto 0;} #anfh-hero .anfh-hero__copy {width:100%;margin:0;text-align:center;} #anfh-hero h1 {font-size:clamp(29px,4.8cqi,44px);} #anfh-hero .anfh-actions {justify-content:center;} #anfh-hero .anfh-hero__contact {justify-content:center;} } @container anfhHero (max-width:560px) { #anfh-hero .anfh-hero__background {height:75cqi;} #anfh-hero .anfh-hero__inner {width:calc(100% - 40px);margin-top:28px;} #anfh-hero .anfh-eyebrow {font-size:11.5px;line-height:1.4;margin-bottom:12px;} #anfh-hero h1 {font-size:29px;line-height:1.12;margin-bottom:17px;} #anfh-hero .anfh-hero__lead {font-size:14.8px;line-height:1.58;} #anfh-hero .anfh-hero__copy {display:flex;flex-direction:column;} #anfh-hero .anfh-hero__contact {display:contents;} #anfh-hero .anfh-actions {flex:none;flex-direction:column;margin-top:24px;} #anfh-hero .anfh-button {width:100%;font-size:14.5px;} #anfh-hero .anfh-ambassador {flex:none;align-self:center;width:104px;order:4;margin-top:18px;} #anfh-hero .anfh-ambassador__link {width:104px;} #anfh-hero .anfh-hero__note {font-size:13px;} #anfh-hero .anfh-hero__direct {font-size:13px;} } @container anfhHero (max-width:520px) {#anfh-hero .anfh-button--secondary {display:none;}} @container anfhHero (max-width:420px) {#anfh-hero h1 {font-size:26px;} #anfh-hero .anfh-hero__lead {font-size:14px;}} /* STACKED_RULES_END */ @media(prefers-reduced-motion:reduce){#anfh-hero a {transition:none;}} @supports not (container-type:inline-size) { @media (min-width:1400px) { #anfh-hero .anfh-hero__background {width:min(100%,1300px);-webkit-mask-image:linear-gradient(90deg,#000 72%,transparent 100%);mask-image:linear-gradient(90deg,#000 72%,transparent 100%);} } @media (min-width:561px) and (max-width:849px) { #anfh-hero .anfh-hero__contact {gap:12px;} #anfh-hero .anfh-actions {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);} #anfh-hero .anfh-button {padding:12px;font-size:14px;} } @media (min-width:561px) and (max-width:660px) { #anfh-hero .anfh-hero__lead {font-size:16px;line-height:1.6;} } @media (min-width:850px) and (max-width:1199px) { #anfh-hero .anfh-hero__shade {background:linear-gradient(90deg,transparent 32%,rgba(8,20,30,.05) 48%,rgba(8,20,30,.83) 73%,rgba(8,20,30,.94)),linear-gradient(0deg,rgba(8,20,30,.86),rgba(8,20,30,.12) 55%,transparent 75%);} #anfh-hero .anfh-hero__copy {width:min(650px,70%);} #anfh-hero h1 {font-size:clamp(34px,3.8vw,46px);} #anfh-hero .anfh-hero__lead {font-size:17px;} #anfh-hero .anfh-eyebrow {font-size:12px;} #anfh-hero .anfh-hero__contact {gap:14px;} #anfh-hero .anfh-button {padding:13px 14px;font-size:14px;} #anfh-hero .anfh-ambassador {flex-basis:96px;} #anfh-hero .anfh-ambassador__link {width:96px;} } @media (max-width:849px) { #anfh-hero .anfh-hero__stage {display:block;min-height:0;padding:0 0 46px;} #anfh-hero .anfh-hero__background {position:relative;inset:auto;height:75vw;object-fit:contain;object-position:center top;} #anfh-hero .anfh-hero__shade {display:none;} #anfh-hero .anfh-hero__inner {width:min(calc(100% - 48px),740px);margin:32px auto 0;} #anfh-hero .anfh-hero__copy {width:100%;margin:0;text-align:center;} #anfh-hero h1 {font-size:clamp(29px,4.8vw,44px);} #anfh-hero .anfh-actions {justify-content:center;} #anfh-hero .anfh-hero__contact {justify-content:center;} } @media (max-width:560px) { #anfh-hero .anfh-hero__background {height:75vw;} #anfh-hero .anfh-hero__inner {width:calc(100% - 40px);margin-top:28px;} #anfh-hero .anfh-eyebrow {font-size:11.5px;line-height:1.4;margin-bottom:12px;} #anfh-hero h1 {font-size:29px;line-height:1.12;margin-bottom:17px;} #anfh-hero .anfh-hero__lead {font-size:14.8px;line-height:1.58;} #anfh-hero .anfh-hero__copy {display:flex;flex-direction:column;} #anfh-hero .anfh-hero__contact {display:contents;} #anfh-hero .anfh-actions {flex:none;flex-direction:column;margin-top:24px;} #anfh-hero .anfh-button {width:100%;font-size:14.5px;} #anfh-hero .anfh-ambassador {flex:none;align-self:center;width:104px;order:4;margin-top:18px;} #anfh-hero .anfh-ambassador__link {width:104px;} #anfh-hero .anfh-hero__note {font-size:13px;} #anfh-hero .anfh-hero__direct {font-size:13px;} } @media (max-width:520px) {#anfh-hero .anfh-button--secondary {display:none;}} @media (max-width:420px) {#anfh-hero h1 {font-size:26px;} #anfh-hero .anfh-hero__lead {font-size:14px;}} } /* assets/rahmen.css */ @font-face{font-family:Lato;src:url("../fonts/Lato-Regular.woff") format("woff");font-style:normal;font-weight:400;font-display:swap} :root{color-scheme:light;--site-navy:#0d1a27;--site-mint:#78ddd5;--site-teal:#2f7f78} html{scroll-behavior:smooth;background:#fff}body{margin:0;font-family:Lato,Arial,Helvetica,sans-serif;color:#395361;font-size:17px;line-height:1.65} *{box-sizing:border-box}a{color:#236f69}a:focus-visible,summary:focus-visible{outline:3px solid #78ddd5;outline-offset:5px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .skip-link{position:fixed;top:-100px;left:16px;padding:10px 18px;background:#fff;color:#15313e;z-index:1000}.skip-link:focus{top:12px} .site-header{position:absolute;inset:0 0 auto;height:75px;z-index:100;color:#fff;background:rgba(13,26,39,.25)} .site-header__inner{width:min(100% - 48px,1440px);height:100%;margin:auto;display:flex;gap:24px;align-items:center} .site-brand{display:flex;gap:12px;align-items:center;flex-shrink:0;color:inherit;text-decoration:none;line-height:1.15} .site-brand img{width:42px;height:46px;object-fit:contain}.site-brand strong{display:block;color:#fff;font-size:25px;font-weight:700;letter-spacing:-.03em} .site-brand small{display:block;margin-top:5px;color:#e1eef0;font-size:13px;white-space:nowrap} .desktop-nav{margin-left:auto;display:flex;gap:22px;align-items:center}.desktop-nav a{color:#fff;text-decoration:none;font-size:15px;white-space:nowrap} .desktop-nav a:hover{text-decoration:underline;text-underline-offset:6px} .site-header__cta{display:flex;align-items:center;justify-content:center;min-height:36px;padding:5px 16px;border:2px solid transparent;border-radius:6px;background:var(--site-teal);color:#fff;text-decoration:none;font-size:15px;white-space:nowrap;line-height:1.25} .site-header__cta:hover{background:#fff;color:#1f354d} .mobile-menu{display:none;margin-left:auto}.mobile-menu summary{cursor:pointer;color:#fff;font-size:28px;line-height:1;list-style:none;padding:8px}.mobile-menu summary::-webkit-details-marker{display:none} .mobile-menu nav{position:absolute;top:75px;left:0;right:0;padding:18px 24px;background:#0d1a27;border-top:1px solid #315561;box-shadow:0 12px 24px #0003} .mobile-menu nav a{display:block;color:#fff;padding:10px 8px;text-decoration:none;font-size:17px} main{padding-top:75px;min-width:0}body #anfh-hero{--anfh-menu-overlap:75px;--anfh-x5-offset-compensation:0px} .site-footer{padding:60px 24px 66px;color:#d9e7eb;background:#2c3e50;font-size:15px;line-height:1.65} .site-footer__grid{width:min(100%,1180px);margin:auto;display:grid;grid-template-columns:1.25fr .7fr 1.1fr;gap:64px;align-items:start} .site-footer strong{color:#fff}.site-footer p{margin:20px 0;max-width:430px}.site-footer a{color:#fff;text-decoration:none;overflow-wrap:anywhere} .site-footer nav>a,.site-footer__grid>div:last-child>a{display:block;margin-top:9px}.site-footer a:hover{text-decoration:underline;text-underline-offset:4px} .site-footer__bottom{width:min(100%,1180px);margin:45px auto 0;padding-top:24px;border-top:1px solid #ffffff2e;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px} .site-footer__bottom nav{display:flex;gap:20px;flex-wrap:wrap}.site-footer__bottom nav>a{margin:0} .preview-status{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);width:max-content;z-index:110;padding:8px 16px;border:1px solid #c8d9dc;border-radius:8px;background:rgba(244,249,249,.97);box-shadow:0 3px 20px #0715231a;color:#395361;font-size:12px;line-height:1.5;text-align:center} .preview-page{width:min(100% - 48px,960px);margin:60px auto 100px;min-height:42vh;padding:40px;border:1px solid #d9e5e8;border-radius:18px;background:#f6f9fa} .preview-page h1{margin:0 0 24px;color:#15313e;font-size:clamp(30px,4vw,48px);line-height:1.15}.preview-page p{margin:16px 0}.preview-page__eyebrow{color:#28736e;font-size:13px;font-weight:bold;text-transform:uppercase;letter-spacing:.08em}.preview-page__back{display:inline-block;margin-top:12px;font-weight:bold} body:has(.preview-page) .site-header{background:#0d1a27} @media(max-width:1240px){.desktop-nav{display:none}.mobile-menu{display:block}.site-header__cta{margin-left:auto}.site-header__inner{gap:16px}} @media(max-width:700px){.site-header{height:68px}.site-header__inner{width:calc(100% - 32px);gap:8px}.site-brand{gap:8px}.site-brand img{width:31px;height:37px}.site-brand strong{font-size:21px}.site-brand small{font-size:11px}.site-header__cta{display:none}.mobile-menu nav{top:68px}main{padding-top:68px}body #anfh-hero{--anfh-menu-overlap:68px;--anfh-x5-offset-compensation:0px}.site-footer{padding:44px 24px 72px}.site-footer__grid{grid-template-columns:1fr;gap:30px}.site-footer__bottom{margin-top:32px;gap:16px}.preview-page{padding:24px;margin-top:32px}.preview-status{font-size:11px;padding:7px 12px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} @media print{.preview-status,.mobile-menu,.site-header{display:none}main{padding-top:0}body #anfh-hero{--anfh-menu-overlap:0px}} /* assets/oberflaeche-v2.css */ /* Owned interface additions; the approved homepage stylesheet stays intact. */ a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid #78ddd5;outline-offset:5px} .site-header__inner{gap:24px} .site-brand{gap:12px} .site-brand .site-brand__mark{width:44px;height:46px} .site-brand .site-brand__wordmark{width:210px;height:auto} .desktop-nav{display:flex;gap:21px} .desktop-nav a{position:relative;padding:10px 0;text-decoration:none} .desktop-nav a::after{content:"";position:absolute;left:0;bottom:3px;width:100%;height:2px;background:#78ddd5;transform:scaleX(0);transform-origin:left;transition:transform .2s ease} .desktop-nav a:hover{text-decoration:none} .desktop-nav a:hover::after,.desktop-nav a:focus-visible::after{transform:scaleX(1)} .mobile-menu{display:none} .mobile-menu summary{position:relative;z-index:304;width:48px;height:48px;display:grid;place-items:center;padding:0;border:1px solid #ffffff38;border-radius:12px;background:#ffffff08;touch-action:manipulation} .menu-bars{position:relative;display:block;width:24px;height:18px} .menu-bars i{display:block;position:absolute;left:0;width:24px;height:2px;border-radius:4px;background:currentColor;transition:transform .3s ease,opacity .2s ease} .menu-bars i:nth-child(1){top:0}.menu-bars i:nth-child(2){top:8px}.menu-bars i:nth-child(3){top:16px} .mobile-menu[open] .menu-bars i:nth-child(1){transform:translateY(8px) rotate(45deg)} .mobile-menu[open] .menu-bars i:nth-child(2){opacity:0} .mobile-menu[open] .menu-bars i:nth-child(3){transform:translateY(-8px) rotate(-45deg)} .menu-backdrop{position:fixed;inset:0;z-index:300;background:#07121cd1;touch-action:none} .menu-drawer{position:fixed;inset:0 0 0 auto;z-index:303;width:min(380px,calc(100% - 36px));height:100vh;height:100dvh;padding:32px 28px;display:flex;flex-direction:column;gap:26px;overflow-y:auto;overscroll-behavior:contain;background:linear-gradient(155deg,#183745,#0d1a27 72%);box-shadow:-18px 0 65px #0005;color:#fff} .menu-enhanced .menu-backdrop{opacity:0;transition:opacity .32s ease} .menu-enhanced .menu-drawer{transform:translateX(100%);transition:transform .36s cubic-bezier(.22,.7,.24,1)} .menu-enhanced .mobile-menu[data-state="open"] .menu-backdrop{opacity:1} .menu-enhanced .mobile-menu[data-state="open"] .menu-drawer{transform:translateX(0)} .menu-drawer__top{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding-right:50px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#78ddd5} .menu-close{position:absolute;right:28px;top:32px;width:44px;height:44px;border:1px solid #ffffff38;border-radius:12px;background:#ffffff08;color:#cce9e7;font:30px/1 Lato,Arial,sans-serif;cursor:pointer} .menu-enhanced .mobile-menu[open]>summary{z-index:301} html:not(.menu-enhanced) .menu-close{display:none} .mobile-menu .menu-drawer nav{position:static;padding:0;background:none;border:0;box-shadow:none} .mobile-menu .menu-drawer nav a{padding:13px 0;font-size:22px;border-bottom:1px solid #ffffff15;transition:color .2s ease,padding .2s ease} .mobile-menu .menu-drawer nav a:hover{color:#78ddd5;padding-left:7px} .menu-drawer__contact{margin-top:auto;padding-top:15px} .menu-drawer__contact p{color:#c6dcdf;font-size:14px;margin:0 0 12px} .menu-drawer__contact a{display:block;font-size:15px;color:#fff;text-decoration:none} .menu-drawer__contact .menu-drawer__cta{padding:13px 15px;margin-bottom:14px;border-radius:9px;background:#78ddd5;color:#102d38;display:flex;gap:12px;justify-content:space-between;align-items:center;font-weight:bold} .menu-drawer__signature{font-size:11px;color:#a9c8ce;line-height:1.4} body.menu-is-open .preview-status{visibility:hidden} .site-footer{position:relative;isolation:isolate;overflow:hidden;padding:70px 32px 76px;background:radial-gradient(ellipse at 8% 0%,#234856 0,transparent 60%),#101f2b;color:#d9e7eb} .site-footer::before{content:"";position:absolute;z-index:-1;inset:auto auto -150px -90px;width:400px;height:410px;background:url("../../images/Logo-2026_white.svg") center/contain no-repeat;opacity:.025;transform:rotate(-14deg);pointer-events:none} .site-footer__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.7fr) minmax(0,1.2fr);gap:54px} .site-footer .site-brand .site-brand__mark{width:40px;height:42px} .site-footer .site-brand .site-brand__wordmark{width:200px;height:auto} .site-footer .site-footer__headline{margin:30px 0 16px;font-size:clamp(25px,2.5vw,34px);line-height:1.18;color:#fff;letter-spacing:-.03em} .site-footer__headline span{color:#87dcd5} .site-footer .site-footer__intro{margin:0 0 24px;font-size:14px;color:#bdd0d8;line-height:1.8} .site-icon{display:block;width:22px;height:22px;flex:0 0 22px} .site-social{display:flex;gap:10px;flex-wrap:wrap} .site-social a{display:grid;place-items:center;width:46px;height:46px;margin:0;border:1px solid #ffffff30;border-radius:50%;background:#ffffff06;color:#e5f5f3;transition:background .2s ease,transform .2s ease} .site-social a:hover{background:#78ddd5;color:#0d1a27;transform:translateY(-3px)} .footer-eyebrow{display:block;margin-bottom:16px;color:#91cdc9;font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:bold} .site-footer__nav{padding-top:8px} .site-footer .site-footer__nav a{display:flex;justify-content:space-between;gap:18px;max-width:220px;padding:8px 0;margin:0;border-bottom:1px solid #ffffff16;font-size:15px} .site-footer__nav a span{color:#80beb9} .site-footer__contact{padding:28px;border-radius:18px;background:#e9f4f2;box-shadow:0 10px 35px #0002;color:#173943} .site-footer__contact .footer-eyebrow{color:#316e68} .site-footer__contact h2{margin:0 0 22px;font-size:27px;line-height:1.15;font-weight:400;letter-spacing:-.02em;color:inherit} .site-footer .site-footer__contact .footer-contact-link{display:flex;align-items:center;gap:10px;margin:10px 0;color:inherit;font-size:14px;line-height:1.5} .footer-contact-link span{min-width:0;overflow-wrap:anywhere} .site-footer .site-footer__contact .footer-whatsapp{display:flex;gap:10px;align-items:center;margin:20px 0;padding:13px 14px;border-radius:9px;background:#247468;color:#fff;text-decoration:none;font-size:14px;line-height:1.4} .footer-whatsapp>span:last-child{margin-left:auto} .site-footer .footer-whatsapp:hover{background:#195a50} .site-footer .footer-address{display:flex;gap:10px;margin:16px 0 0;color:inherit;font-size:13px;line-height:1.6} .footer-address .site-icon{margin-top:2px;width:19px;flex-basis:19px} .site-footer__bottom{margin-top:42px;border-color:#ffffff20;color:#aac5ce} .site-footer__bottom a{color:#c6dce2} .site-footer--light{background:#f3f7f5;color:#23434e} .site-footer--light::before{background-image:url("../../images/Logo-2026_colored_wText.svg");opacity:.025;width:800px} .site-footer--light .site-brand img{width:min(100%,275px);height:auto} .site-footer--light .site-footer__headline{color:#153a45} .site-footer--light .site-footer__headline span{color:#29796f} .site-footer--light .site-footer__intro{color:#4c6870} .site-footer--light .footer-eyebrow{color:#327369} .site-footer--light .site-footer__nav a{color:#23434e;border-color:#cddcda} .site-footer--light .site-social a{color:#28574f;background:#fff;border-color:#cfdfda} .site-footer--light .site-social a:hover{background:#d8eeea} .site-footer--light .site-footer__contact{background:#183740;color:#fff;box-shadow:none} .site-footer--light .site-footer__contact .footer-eyebrow{color:#9adfd4} .site-footer--light .site-footer__contact .footer-whatsapp{background:#a7e5d6;color:#173a35} .site-footer--light .site-footer__contact .footer-whatsapp:hover{background:#bff2e6} .site-footer--light .site-footer__bottom{border-color:#cededa;color:#4c6870} .site-footer--light .site-footer__bottom a{color:#315660} .site-footer--compact{padding-top:48px;background:linear-gradient(120deg,#16474b,#101f2b 80%)} .site-footer--compact .site-footer__grid{grid-template-columns:1fr 1fr;gap:26px 60px} .site-footer--compact .site-footer__headline{font-size:28px;margin-top:22px} .site-footer--compact .site-footer__contact{grid-column:2;grid-row:1;border-radius:0;padding:0 0 0 30px;background:transparent;box-shadow:none;border-left:1px solid #ffffff24;color:#e4f0ef} .site-footer--compact .site-footer__contact h2{font-size:25px} .site-footer--compact .site-footer__contact .footer-eyebrow{color:#91cdc9} .site-footer--compact .site-footer__nav{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:12px 30px;padding-top:25px;border-top:1px solid #ffffff20} .site-footer--compact .site-footer__nav .footer-eyebrow{margin:0} .site-footer--compact .site-footer__nav a{border:0;padding:0} .site-footer--compact .site-footer__bottom{margin-top:26px} .footer-comparison__intro,.footer-comparison__label{width:min(100% - 64px,1180px);margin:auto} .footer-comparison__intro{padding:60px 0 46px} .footer-comparison__intro h1{font-size:clamp(32px,4vw,52px);line-height:1.1;letter-spacing:-.025em;color:#173943;margin:0 0 20px} .footer-comparison__intro p{max-width:660px} .footer-comparison__intro nav{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px} .footer-comparison__intro nav a{padding:9px 16px;background:#e8f3f1;border-radius:8px;color:#1f655c;text-decoration:none;font-size:14px} .footer-comparison__label{padding:32px 0 22px} .footer-comparison__label h2{margin:0 0 8px;font-size:25px;line-height:1.2;color:#173943} .footer-comparison__label p{margin:0;font-size:15px} .footer-comparison{scroll-margin-top:24px;margin-bottom:36px} body:has(.footer-comparison__intro) .site-header{background:#0d1a27} .preview-status a{white-space:nowrap;font-weight:bold;margin-left:5px} @media(min-width:1000px) and (max-width:1240px){.desktop-nav{display:flex}.mobile-menu{display:none}.site-header__cta{display:none}.site-header__inner{gap:20px}} @media(min-width:1241px) and (max-width:1320px){.desktop-nav{gap:17px}.site-header__inner{gap:18px}.site-header__cta{font-size:14px;padding-inline:12px}} @media(max-width:999px){.desktop-nav{display:none}.mobile-menu{display:block}.site-header__cta{display:flex;margin-left:auto}.site-header__inner{gap:18px}.site-footer__grid{gap:24px;grid-template-columns:1fr 1fr}.site-footer__nav{grid-column:1;grid-row:2}.site-footer__contact{grid-column:2;grid-row:1/3}.site-footer .site-footer__headline{font-size:28px}} @media(max-width:699px){.site-header__inner{width:calc(100% - 32px);gap:8px}.site-brand .site-brand__mark{width:39px;height:41px}.site-header .site-brand__wordmark{display:none}.site-header__cta{display:none}.mobile-menu{margin-left:auto}.mobile-menu summary{width:44px;height:44px}.menu-drawer{padding:24px;gap:22px}.menu-drawer__top{padding-right:50px}.menu-close{top:18px;right:24px}.site-footer{padding:46px 24px 84px}.site-footer__grid{grid-template-columns:1fr;gap:32px}.site-footer__nav,.site-footer__contact{grid-column:auto;grid-row:auto}.site-footer__nav{grid-row:3}.site-footer__contact{padding:24px}.site-footer .site-brand__wordmark{width:200px}.site-footer .site-footer__headline{font-size:30px;margin-top:24px}.site-footer__bottom{margin-top:30px;gap:16px}.site-footer--compact .site-footer__grid{grid-template-columns:1fr;gap:28px}.site-footer--compact .site-footer__contact{grid-column:auto;grid-row:auto;border-left:0;border-top:1px solid #ffffff24;padding:26px 0 0}.site-footer--compact .site-footer__nav{grid-column:auto;gap:12px 22px}.site-footer--compact .site-footer__nav .footer-eyebrow{width:100%}.footer-comparison__intro,.footer-comparison__label{width:calc(100% - 40px)}.footer-comparison__intro{padding:40px 0 20px}.footer-comparison__intro h1{font-size:34px}.footer-comparison__intro nav{gap:8px}.footer-comparison__intro nav a{font-size:13px;padding:8px 12px}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}.menu-backdrop,.menu-drawer,.menu-bars i,.desktop-nav a::after,.site-social a,.mobile-menu .menu-drawer nav a{transition:none!important}} @media print{.mobile-menu,.preview-status{display:none}.site-footer{background:#fff!important;color:#173943!important}} .footer-comparison__intro .footer-eyebrow{color:#327369} /* assets/feinschliff-v3.css */ /* Ratios from Logo-2026_white_wText.svg: viewBox 1451.07 × 307.85. Separate files retain mobile wordmark hiding; only the graphic is lowered. */ .site-header{height:75px;background:linear-gradient(180deg,rgba(10,23,35,.48),rgba(10,23,35,.22));overflow:visible} .site-header__inner{width:min(calc(100% - 48px),1440px);gap:20px} .site-header .site-brand{--brand-height:70px;gap:calc(var(--brand-height)*.15598)} .site-header .site-brand__mark{width:calc(var(--brand-height)*.972117);height:var(--brand-height);transform:translateY(13px)} .site-header .site-brand__wordmark{width:calc(var(--brand-height)*3.58543);height:calc(var(--brand-height)*.88985)} .site-header__cta{display:flex;margin-left:0;min-height:40px;padding:7px 14px;font-size:14px;flex-shrink:0} .desktop-nav{margin-left:auto;gap:19px;flex-shrink:0} .site-footer .site-brand__complete{width:min(100%,255px);height:auto} main{padding-top:75px} body #anfh-hero{--anfh-menu-overlap:75px} /* Match the wide photo height to its 4:3 composition, including the patient. Keep the original composition at narrower tablet widths. Text remains in the dark right half instead of drifting over the shirt and the patient's leg. */ @media(min-width:700px){ #anfh-hero .anfh-hero__stage{display:flex;align-items:center;min-height:max(560px,calc(min(61.5vw,900px) - var(--anfh-menu-overlap)));padding:48px 0} #anfh-hero .anfh-hero__background{position:absolute;inset:0;display:block;width:min(82%,1200px);height:100%;object-fit:cover;object-position:54% top} #anfh-hero .anfh-hero__shade{display:block;background:linear-gradient(90deg,transparent 20%,rgba(8,20,30,.12) 35%,rgba(8,20,30,.82) 53%,rgba(8,20,30,.97) 73%,#08141e),linear-gradient(0deg,rgba(8,20,30,.5),transparent 70%)} #anfh-hero .anfh-hero__inner{width:min(calc(100% - 64px),1660px);margin:0 auto} #anfh-hero .anfh-hero__copy{position:relative;width:min(650px,52%);margin-left:auto;text-align:left} #anfh-hero .anfh-eyebrow{color:#83dfd5} #anfh-hero h1{font-size:clamp(34px,4vw,60px);line-height:1.1} #anfh-hero .anfh-hero__lead{font-size:18px;line-height:1.65;color:#e1ebee} #anfh-hero .anfh-hero__contact{display:flex;justify-content:flex-start;gap:18px} #anfh-hero .anfh-actions{display:flex;justify-content:flex-start;gap:12px;flex-wrap:wrap} } @media(min-width:700px) and (max-width:1199px){ #anfh-hero .anfh-hero__background{width:82%;object-position:72% top} #anfh-hero .anfh-hero__shade{background:linear-gradient(90deg,transparent 10%,rgba(8,20,30,.05) 27%,rgba(8,20,30,.76) 46%,rgba(8,20,30,.96) 60%,#08141e 86%),linear-gradient(0deg,rgba(8,20,30,.48),transparent 65%)} #anfh-hero .anfh-hero__copy{width:54%} #anfh-hero h1{font-size:clamp(32px,4vw,44px)} #anfh-hero .anfh-hero__lead{font-size:17px;line-height:1.6} #anfh-hero .anfh-eyebrow{font-size:11px;line-height:1.5} #anfh-hero .anfh-hero__contact{display:block} #anfh-hero .anfh-button{font-size:14px;padding:12px 14px} #anfh-hero .anfh-ambassador{position:absolute;right:0;bottom:9px;display:block;width:80px} #anfh-hero .anfh-ambassador__link{width:80px} #anfh-hero .anfh-hero__note,#anfh-hero .anfh-hero__direct{max-width:calc(100% - 100px)} } @media(min-width:1400px){ #anfh-hero .anfh-hero__background{width:min(82%,1200px)} } @media(min-width:1000px) and (max-width:1199px){ .site-header__inner{width:calc(100% - 40px);gap:16px} .site-header .site-brand{--brand-height:58px} .desktop-nav{display:flex;gap:14px} .desktop-nav a{font-size:14px} .site-header__cta{display:flex;font-size:13px;padding:7px 12px} .mobile-menu{display:none} } @media(min-width:1200px) and (max-width:1320px){ .site-header .site-brand{--brand-height:64px} .desktop-nav{gap:17px} .site-header__inner{gap:18px} } @media(min-width:700px) and (max-width:999px){ .site-header .site-brand{--brand-height:64px} .site-header__cta{display:flex;margin-left:auto;font-size:14px} .desktop-nav{display:none} .mobile-menu{display:block;margin-left:0} } @media(min-width:700px) and (max-width:799px){ #anfh-hero .anfh-hero__inner{width:calc(100% - 48px)} #anfh-hero .anfh-hero__lead{font-size:16px} #anfh-hero .anfh-button{font-size:13px;padding:11px 10px} #anfh-hero .anfh-actions{gap:10px} } @media(max-width:699px){ .site-header{height:68px} .site-header__inner{width:calc(100% - 32px);gap:8px} .site-header .site-brand{--brand-height:54px} .site-header .site-brand__mark{transform:translateY(12px)} .site-header .site-brand__wordmark{display:none} .site-header__cta{display:none} .mobile-menu{margin-left:auto} main{padding-top:68px} body #anfh-hero{--anfh-menu-overlap:68px;padding-top:0} } @media print{.site-header{display:none}main{padding-top:0}} /* assets/methode.css */ /* Begrenzt dekorative Ebenen auf ihren Inhaltsabschnitt. So bleibt das mobile Off-Canvas-Menü von Website X5 unangetastet. */ section[id^="anfm-"] { display: block; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; overflow-x: hidden; overflow-x: clip; } section[id^="anfm-"] > * { min-width: 0; max-width: 100%; } #anfm-hero { --anfm-ink: #f4f7f8; --anfm-muted: #c7d1d7; --anfm-teal: #55c3bc; --anfm-teal-deep: #2b918e; --anfm-card: rgba(255, 255, 255, 0.075); --anfm-line: rgba(126, 224, 216, 0.24); --anfm-menu-overlap: 75px; --anfm-x5-offset-compensation: 76px; --anfm-hero-top-gap: 34px; position: relative; isolation: isolate; overflow: hidden; margin-top: calc(var(--anfm-menu-overlap) * -1); padding: calc(var(--anfm-menu-overlap) + var(--anfm-x5-offset-compensation) + var(--anfm-hero-top-gap)) 24px 72px; color: var(--anfm-ink); background: radial-gradient(circle at 82% 36%, rgba(59, 154, 157, 0.22), transparent 34%), linear-gradient(112deg, #0d1a27 0%, #132638 48%, #163e49 100%); } #anfm-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: 0.2; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 82%, transparent); } #anfm-hero::after { content: ""; position: absolute; z-index: 1; top: calc(var(--anfm-menu-overlap) + var(--anfm-x5-offset-compensation)); left: 50%; width: min(92%, 1440px); height: 1px; transform: translateX(-50%); pointer-events: none; background: linear-gradient(90deg, transparent, rgba(103, 211, 202, 0.5), transparent); } #anfm-hero * { box-sizing: border-box; } #anfm-hero .anfm-hero__inner { width: min(100%, 1260px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(390px, .96fr); gap: clamp(38px, 5vw, 78px); align-items: center; } #anfm-hero .anfm-hero__copy { text-align: center; } #anfm-hero .anfm-eyebrow { margin: 0 0 16px; color: var(--anfm-teal); font-size: 0.86rem; font-weight: 800; letter-spacing: 0.055em; text-transform: uppercase; } #anfm-hero h1 { max-width: 760px; margin: 0 auto 22px; color: #fff; font-size: clamp(2.45rem, 4.5vw, 4.55rem); line-height: 1.04; letter-spacing: -0.045em; text-wrap: balance; } #anfm-hero .anfm-hero__lead { max-width: 760px; margin: 0 auto; color: var(--anfm-muted); font-size: clamp(1.04rem, 1.4vw, 1.2rem); line-height: 1.72; } #anfm-hero .anfm-hero__lead + .anfm-hero__lead { margin-top: 20px; } #anfm-hero .anfm-hero__lead strong { color: #fff; } #anfm-hero .anfm-definition { margin: 28px auto 0; padding: 20px 24px; border-left: 4px solid var(--anfm-teal); border-radius: 0 12px 12px 0; color: #dce5e8; background: rgba(255,255,255,.085); line-height: 1.55; } #anfm-hero .anfm-definition strong { color: #79d8d0; } #anfm-hero .anfm-hero__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px; } #anfm-hero .anfm-mini-card { min-height: 132px; padding: 18px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: var(--anfm-card); } #anfm-hero .anfm-mini-card__number { display: block; margin-bottom: 8px; color: #79d8d0; font-size: .78rem; font-weight: 800; letter-spacing: .08em; } #anfm-hero .anfm-mini-card strong { display: block; margin-bottom: 5px; color: #fff; } #anfm-hero .anfm-mini-card p { margin: 0; color: #b9c6cc; font-size: .91rem; line-height: 1.45; } #anfm-hero .anfm-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; } #anfm-hero .anfm-button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border: 1px solid transparent; border-radius: 8px; color: #fff; font-weight: 800; text-decoration: none; transition: transform .2s ease, background-color .2s ease, border-color .2s ease; } #anfm-hero .anfm-button:hover { transform: translateY(-2px); } #anfm-hero .anfm-button--primary { background: #3a9d98; } #anfm-hero .anfm-button--primary:hover { background: #48aaa4; } #anfm-hero .anfm-button--secondary { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.04); } #anfm-hero .anfm-button--secondary:hover { border-color: rgba(255,255,255,.52); background: rgba(255,255,255,.08); } /* Dezenter Seitenhinweis zu allen KI-generierten Szenenbildern */ #anfm-hero .anfm-image-disclaimer { max-width: 760px; margin: 18px auto 0; color: rgba(199,209,215,.72); font-size: 11.5px; line-height: 1.5; text-align: center; } #anfm-hero .anfm-image-disclaimer strong { color: rgba(244,247,248,.88); font-weight: 700; } #anfm-hero .anfm-hero__visual { position: relative; padding-bottom: 74px; } #anfm-hero .anfm-hero__image-frame { padding: 11px; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(255,255,255,.08); box-shadow: 0 28px 68px rgba(0,0,0,.25); } #anfm-hero .anfm-hero__image-frame img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; border-radius: 13px; background: #edf2f4; } #anfm-hero .anfm-principle { position: absolute; right: -18px; bottom: 0; width: min(91%, 510px); padding: 22px 24px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; text-align: center; background: rgba(9, 22, 33, .96); box-shadow: 0 22px 50px rgba(0,0,0,.32); } #anfm-hero .anfm-principle__label { display: block; margin-bottom: 7px; color: #72d2cb; font-size: .75rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; } #anfm-hero .anfm-principle strong { display: block; color: #fff; font-size: 1.08rem; line-height: 1.35; } #anfm-hero .anfm-principle__flow { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 12px; color: #d4dee2; font-size: .86rem; font-weight: 700; } #anfm-hero .anfm-principle__flow b { color: #6fd1ca; } @media (max-width: 980px) { #anfm-hero .anfm-hero__inner { grid-template-columns: 1fr; } #anfm-hero .anfm-hero__visual { width: min(100%, 680px); margin: 0 auto; } } @media (max-width: 660px) { #anfm-hero { --anfm-menu-overlap: 68px; --anfm-x5-offset-compensation: 64px; --anfm-hero-top-gap: 34px; padding-right: 20px; padding-bottom: 54px; padding-left: 20px; } #anfm-hero h1 { font-size: clamp(2.1rem, 11vw, 3.2rem); } #anfm-hero .anfm-hero__steps { grid-template-columns: 1fr; } #anfm-hero .anfm-mini-card { min-height: 0; } #anfm-hero .anfm-actions { align-items: stretch; flex-direction: column; } #anfm-hero .anfm-button { width: 100%; } #anfm-hero .anfm-hero__visual { padding-bottom: 0; } #anfm-hero .anfm-principle { position: relative; right: auto; bottom: auto; width: calc(100% - 20px); margin: -48px auto 0; } #anfm-hero .anfm-image-disclaimer { margin-top: 16px; font-size: 10.5px; line-height: 1.45; } } /* Gemeinsames mobiles Typografiesystem */ @media (max-width: 640px) { section[id^="anfm-"] p, section[id^="anfm-"] li { font-size: 14px !important; line-height: 1.58 !important; } section[id^="anfm-"] h1 { font-size: 29px !important; line-height: 1.12 !important; } section[id^="anfm-"] h2 { font-size: 25px !important; line-height: 1.22 !important; } section[id^="anfm-"] h3 { font-size: 17px !important; line-height: 1.3 !important; } section[id^="anfm-"] h4 { font-size: 16px !important; line-height: 1.3 !important; } section[id^="anfm-"] .anfm-eyebrow, section[id^="anfm-"] .anfm-kicker { font-size: 11.5px !important; line-height: 1.4 !important; } #anfm-hero .anfm-hero__lead { font-size: 14.8px !important; line-height: 1.58 !important; } #anfm-information .anfm-intro, #anfm-approach .anfm-heading > p, #anfm-functions .anfm-heading > p, #anfm-process .anfm-heading > p, #anfm-cases .anfm-heading > p, #anfm-integration .anfm-heading > p, #anfm-training .anfm-training__intro, #anfm-selfcheck .anfm-heading > p, #anfm-cta .anfm-cta__intro, #anfm-origins .anfm-heading > p, #anfm-focus .anfm-heading > p, #anfm-faq .anfm-heading > p { font-size: 14.5px !important; line-height: 1.6 !important; } #anfm-hero .anfm-definition, #anfm-information .anfm-fast, #anfm-approach .anfm-feedback, #anfm-functions .anfm-function-note, #anfm-process .anfm-process__close, #anfm-cases .anfm-case__result, #anfm-training .anfm-training__rule, #anfm-selfcheck .anfm-selfcheck__bottom, #anfm-origins .anfm-origins__summary { font-size: 13.8px !important; line-height: 1.58 !important; } #anfm-hero .anfm-mini-card p, #anfm-information .anfm-info-card p, #anfm-approach .anfm-method-card p, #anfm-functions .anfm-function-card p, #anfm-process .anfm-step p, #anfm-cases .anfm-case p, #anfm-integration .anfm-integration-card p, #anfm-training .anfm-training-card p, #anfm-selfcheck .anfm-check-item p, #anfm-origins .anfm-origin-card p, #anfm-focus .anfm-focus-card p { font-size: 13.8px !important; line-height: 1.55 !important; } #anfm-cases .anfm-cases__note, #anfm-integration .anfm-integration__note, #anfm-cta .anfm-cta__small { font-size: 12.8px !important; line-height: 1.55 !important; } #anfm-faq summary { font-size: 14.5px !important; line-height: 1.45 !important; } #anfm-faq .anfm-answer, #anfm-faq .anfm-answer p, #anfm-faq .anfm-faq__contact { font-size: 13.5px !important; line-height: 1.6 !important; } #anfm-hero .anfm-mini-card__number, #anfm-approach .anfm-method-card__label, #anfm-functions .anfm-function-card__number, #anfm-cases .anfm-case__label, #anfm-integration .anfm-integration-card__number, #anfm-origins .anfm-origin-card__label, #anfm-focus .anfm-focus-card__number { font-size: 11px !important; line-height: 1.35 !important; } section[id^="anfm-"] .anfm-button { font-size: 14.5px !important; line-height: 1.2 !important; } /* überschreibt die globale mobile p-Regel gezielt */ #anfm-hero .anfm-image-disclaimer { font-size: 10.5px !important; line-height: 1.45 !important; } } @media (max-width: 420px) { section[id^="anfm-"] h1 { font-size: 26px !important; } section[id^="anfm-"] h2 { font-size: 23px !important; } #anfm-hero .anfm-hero__lead { font-size: 14px !important; } } #anfm-information { --anfm-navy: #12283a; --anfm-teal: #2b918e; --anfm-soft: #eff7f7; --anfm-text: #36505f; padding: 88px 24px; text-align: left; background: #f7fafb; } #anfm-information * { box-sizing: border-box; } #anfm-information .anfm-info__inner { width: min(100%, 1180px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: clamp(42px, 6vw, 82px); align-items: center; } #anfm-information .anfm-kicker { margin: 0 0 12px; color: var(--anfm-teal); font-size: .82rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } #anfm-information h2 { margin: 0 0 20px; color: var(--anfm-navy); font-size: clamp(2rem, 3.4vw, 3.35rem); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; } #anfm-information .anfm-intro { margin: 0; color: var(--anfm-text); font-size: 1.08rem; line-height: 1.75; } #anfm-information .anfm-info__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; } #anfm-information .anfm-info-card { padding: 20px 17px; border: 1px solid #dce8eb; border-radius: 14px; background: #fff; box-shadow: 0 12px 26px rgba(27, 67, 82, .06); } #anfm-information .anfm-info-card__icon { display: grid; width: 34px; height: 34px; margin-bottom: 13px; place-items: center; border-radius: 50%; color: #fff; background: var(--anfm-teal); font-size: .78rem; font-weight: 900; } #anfm-information .anfm-info-card h3 { margin: 0 0 7px; color: var(--anfm-navy); font-size: 1rem; } #anfm-information .anfm-info-card p { margin: 0; color: #607480; font-size: .9rem; line-height: 1.5; } #anfm-information .anfm-fast { margin-top: 20px; padding: 18px 20px; border-left: 4px solid #55c3bc; border-radius: 0 10px 10px 0; background: var(--anfm-soft); color: #36505f; line-height: 1.58; } #anfm-information .anfm-fast strong { color: var(--anfm-navy); } #anfm-information .anfm-info__image { position: relative; } #anfm-information .anfm-info__image::before { content: ""; position: absolute; inset: -22px 22px 22px -22px; border-radius: 24px; background: linear-gradient(145deg, #dff2f1, #eaf2f6); } #anfm-information .anfm-info__image img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; box-shadow: 0 24px 60px rgba(30, 70, 87, .16); } @media (max-width: 900px) { #anfm-information .anfm-info__inner { grid-template-columns: 1fr; } #anfm-information .anfm-info__image { width: min(100%, 680px); margin: 16px auto 0; } } @media (max-width: 650px) { #anfm-information .anfm-info__image::before { inset: -14px 0 14px 0; } #anfm-information { padding: 64px 20px; } #anfm-information .anfm-info__steps { grid-template-columns: 1fr; } } #anfm-approach { --anfm-navy: #132a3c; --anfm-teal: #2b918e; --anfm-text: #405866; padding: 88px 24px; text-align: left; background: #fff; } #anfm-approach * { box-sizing: border-box; } #anfm-approach .anfm-approach__inner { width: min(100%, 1180px); margin: 0 auto; } #anfm-approach .anfm-heading { max-width: 850px; margin: 0 auto 42px; text-align: center; } #anfm-approach .anfm-kicker { margin: 0 0 12px; color: var(--anfm-teal); font-size: .82rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } #anfm-approach h2 { margin: 0 0 18px; color: var(--anfm-navy); font-size: clamp(2rem, 3.4vw, 3.3rem); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; } #anfm-approach .anfm-heading p { margin: 0; color: var(--anfm-text); font-size: 1.08rem; line-height: 1.72; } #anfm-approach .anfm-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } #anfm-approach .anfm-method-card { position: relative; overflow: hidden; padding: 30px 28px; border: 1px solid #dce7ea; border-radius: 18px; background: #f8fbfc; } #anfm-approach .anfm-method-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, #2b918e, #77d1ca); } #anfm-approach .anfm-method-card__label { color: var(--anfm-teal); font-size: .76rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } #anfm-approach .anfm-method-card h3 { margin: 10px 0 11px; color: var(--anfm-navy); font-size: 1.26rem; line-height: 1.28; } #anfm-approach .anfm-method-card p { margin: 0; color: var(--anfm-text); line-height: 1.63; } #anfm-approach .anfm-method-card--primary { background: linear-gradient(155deg, #142b3d, #173a48); } #anfm-approach .anfm-method-card--primary h3 { color: #fff; } #anfm-approach .anfm-method-card--primary p { color: #d2dde1; } #anfm-approach .anfm-method-card--primary .anfm-method-card__label { color: #75d4cd; } #anfm-approach .anfm-feedback { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; margin-top: 22px; padding: 20px 24px; border-radius: 14px; background: #ecf6f5; color: #36505e; line-height: 1.62; } #anfm-approach .anfm-feedback__mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #fff; background: var(--anfm-teal); font-weight: 900; } #anfm-approach .anfm-feedback p { margin: 0; } #anfm-approach .anfm-feedback strong { color: var(--anfm-navy); } @media (max-width: 880px) { #anfm-approach .anfm-columns { grid-template-columns: 1fr; } } @media (max-width: 650px) { #anfm-approach { padding: 64px 20px; } #anfm-approach .anfm-feedback { grid-template-columns: 1fr; } } #anfm-functions { --anfm-navy: #102536; --anfm-teal: #56c4bd; padding: 88px 24px; text-align: left; color: #eef5f6; background: radial-gradient(circle at 15% 12%, rgba(75, 177, 174, .18), transparent 30%), linear-gradient(135deg, #102333, #173b47); } #anfm-functions * { box-sizing: border-box; } #anfm-functions .anfm-functions__inner { width: min(100%, 1180px); margin: 0 auto; } #anfm-functions .anfm-heading { max-width: 820px; margin: 0 auto 38px; text-align: center; } #anfm-functions .anfm-kicker { margin: 0 0 12px; color: var(--anfm-teal); font-size: .82rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } #anfm-functions h2 { margin: 0 0 18px; color: #fff; font-size: clamp(2rem, 3.4vw, 3.3rem); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; } #anfm-functions .anfm-heading p { margin: 0; color: #c8d5da; font-size: 1.07rem; line-height: 1.7; } #anfm-functions .anfm-function-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } #anfm-functions .anfm-function-card { padding: 24px; border: 1px solid rgba(255,255,255,.11); border-radius: 16px; background: rgba(255,255,255,.065); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } #anfm-functions .anfm-function-card__number { display: inline-block; margin-bottom: 14px; color: #73d5ce; font-size: .76rem; font-weight: 900; letter-spacing: .08em; } #anfm-functions .anfm-function-card h3 { margin: 0 0 8px; color: #fff; font-size: 1.15rem; } #anfm-functions .anfm-function-card p { margin: 0; color: #c5d2d7; line-height: 1.58; } #anfm-functions .anfm-function-note { max-width: 900px; margin: 26px auto 0; padding: 18px 22px; border: 1px solid rgba(99, 212, 203, .24); border-radius: 12px; text-align: center; color: #dce7ea; background: rgba(21, 45, 58, .72); line-height: 1.62; } #anfm-functions .anfm-function-note strong { color: #75d6cf; } @media (max-width: 900px) { #anfm-functions .anfm-function-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { #anfm-functions { padding: 64px 20px; } #anfm-functions .anfm-function-grid { grid-template-columns: 1fr; } } #anfm-process { --anfm-navy: #132a3c; --anfm-teal: #2f9894; --anfm-text: #415967; padding: 90px 24px; text-align: left; background: #f5f9fa; } #anfm-process * { box-sizing: border-box; } #anfm-process .anfm-process__inner { width: min(100%, 1120px); margin: 0 auto; } #anfm-process .anfm-heading { max-width: 820px; margin: 0 auto 44px; text-align: center; } #anfm-process .anfm-kicker { margin: 0 0 12px; color: var(--anfm-teal); font-size: .82rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } #anfm-process h2 { margin: 0 0 18px; color: var(--anfm-navy); font-size: clamp(2rem, 3.4vw, 3.3rem); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; } #anfm-process .anfm-heading p { margin: 0; color: var(--anfm-text); font-size: 1.07rem; line-height: 1.72; } #anfm-process .anfm-timeline { position: relative; display: grid; gap: 14px; } #anfm-process .anfm-timeline::before { content: ""; position: absolute; top: 36px; bottom: 36px; left: 31px; width: 2px; background: linear-gradient(#4db5af, #d4e9e8); } #anfm-process .anfm-step { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; padding: 22px 26px 22px 0; border: 1px solid #dce8eb; border-radius: 16px; background: #fff; box-shadow: 0 10px 28px rgba(25, 66, 82, .055); } #anfm-process .anfm-step__number { position: relative; z-index: 1; display: grid; width: 44px; height: 44px; margin-left: 10px; place-items: center; border: 5px solid #f5f9fa; border-radius: 50%; color: #fff; background: var(--anfm-teal); font-size: .8rem; font-weight: 900; } #anfm-process .anfm-step h3 { margin: 1px 0 7px; color: var(--anfm-navy); font-size: 1.18rem; } #anfm-process .anfm-step p { margin: 0; color: var(--anfm-text); line-height: 1.62; } #anfm-process .anfm-step--integration { border-color: #98d6d2; background: linear-gradient(100deg, #e8f6f5, #fff 70%); } #anfm-process .anfm-step--integration .anfm-step__number { background: #176f6d; } #anfm-process .anfm-step--integration h3 { color: #176f6d; } #anfm-process .anfm-process__close { margin: 26px 0 0 84px; padding: 20px 24px; border-radius: 14px; color: #dce7ea; background: #173142; line-height: 1.62; } #anfm-process .anfm-process__close strong { color: #75d4cd; } @media (max-width: 650px) { #anfm-process { padding: 64px 20px; } #anfm-process .anfm-step { grid-template-columns: 52px 1fr; gap: 12px; padding-right: 18px; } #anfm-process .anfm-timeline::before { left: 25px; } #anfm-process .anfm-step__number { width: 40px; height: 40px; margin-left: 5px; } #anfm-process .anfm-process__close { margin-left: 0; } } #anfm-cases { --anfm-navy: #12283a; --anfm-teal: #2d9692; --anfm-text: #405765; padding: 90px 24px; text-align: left; background: #fff; } #anfm-cases * { box-sizing: border-box; } #anfm-cases .anfm-cases__inner { width: min(100%, 1200px); margin: 0 auto; } #anfm-cases .anfm-heading { max-width: 850px; margin: 0 auto 46px; text-align: center; } #anfm-cases .anfm-kicker { margin: 0 0 12px; color: var(--anfm-teal); font-size: .82rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } #anfm-cases h2 { margin: 0 0 18px; color: var(--anfm-navy); font-size: clamp(2rem, 3.4vw, 3.3rem); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; } #anfm-cases .anfm-heading p { margin: 0; color: var(--anfm-text); font-size: 1.07rem; line-height: 1.72; } #anfm-cases .anfm-case-list { display: grid; gap: 26px; } #anfm-cases .anfm-case { display: grid; grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr); overflow: hidden; border: 1px solid #dbe7ea; border-radius: 20px; background: #f8fbfc; box-shadow: 0 16px 42px rgba(28, 68, 84, .075); } #anfm-cases .anfm-case:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); } #anfm-cases .anfm-case:nth-child(even) .anfm-case__image { order: 2; } #anfm-cases .anfm-case__image { min-height: 100%; background: #e6f0f2; } #anfm-cases .anfm-case__image img { display: block; width: 100%; height: 100%; min-height: 390px; object-fit: cover; } #anfm-cases .anfm-case__content { padding: clamp(28px, 4vw, 48px); } #anfm-cases .anfm-case__label { display: inline-flex; margin-bottom: 14px; padding: 6px 10px; border-radius: 999px; color: #176f6d; background: #dcf0ee; font-size: .75rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; } #anfm-cases .anfm-case h3 { margin: 0 0 14px; color: var(--anfm-navy); font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1.2; } #anfm-cases .anfm-case p { margin: 0; color: var(--anfm-text); line-height: 1.66; } #anfm-cases .anfm-case p + p { margin-top: 13px; } #anfm-cases .anfm-case__flow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } #anfm-cases .anfm-case__flow span { padding: 8px 10px; border: 1px solid #cfe0e4; border-radius: 8px; color: #36515f; background: #fff; font-size: .82rem; font-weight: 700; } #anfm-cases .anfm-case__result { margin-top: 19px; padding: 15px 18px; border-left: 4px solid #4eb8b1; border-radius: 0 10px 10px 0; color: #254855; background: #eaf6f5; line-height: 1.58; } #anfm-cases .anfm-case__result strong { color: #176f6d; } #anfm-cases .anfm-cases__note { max-width: 880px; margin: 26px auto 0; text-align: center; color: #667b86; font-size: .92rem; line-height: 1.6; } @media (max-width: 900px) { #anfm-cases .anfm-case, #anfm-cases .anfm-case:nth-child(even) { grid-template-columns: 1fr; } #anfm-cases .anfm-case:nth-child(even) .anfm-case__image { order: 0; } #anfm-cases .anfm-case__image img { min-height: 280px; aspect-ratio: 16 / 10; } } @media (max-width: 650px) { #anfm-cases { padding: 64px 20px; } #anfm-cases .anfm-case__image img { min-height: 230px; } } #anfm-integration { --anfm-teal: #62cec6; padding: 90px 24px; text-align: left; color: #eef4f6; background: radial-gradient(circle at 83% 12%, rgba(85, 195, 188, .2), transparent 33%), linear-gradient(125deg, #0e1e2c, #173743); } #anfm-integration * { box-sizing: border-box; } #anfm-integration .anfm-integration__inner { width: min(100%, 1120px); margin: 0 auto; } #anfm-integration .anfm-heading { max-width: 870px; margin: 0 auto 38px; text-align: center; } #anfm-integration .anfm-kicker { margin: 0 0 12px; color: var(--anfm-teal); font-size: .82rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } #anfm-integration h2 { margin: 0 0 18px; color: #fff; font-size: clamp(2rem, 3.4vw, 3.3rem); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; } #anfm-integration .anfm-heading p { margin: 0; color: #c8d5da; font-size: 1.07rem; line-height: 1.72; } #anfm-integration .anfm-integration__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } #anfm-integration .anfm-integration-card { padding: clamp(26px, 3vw, 38px); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.065); } #anfm-integration .anfm-integration-card__number { color: #72d8d0; font-size: .77rem; font-weight: 900; letter-spacing: .08em; } #anfm-integration .anfm-integration-card h3 { margin: 10px 0 12px; color: #fff; font-size: 1.45rem; } #anfm-integration .anfm-integration-card p { margin: 0; color: #cbd8dc; line-height: 1.68; } #anfm-integration .anfm-integration-card--accent { border-color: rgba(103, 216, 207, .38); background: rgba(42, 126, 124, .24); } #anfm-integration .anfm-sequence { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 28px; padding: 20px; border-radius: 14px; background: rgba(7,17,25,.36); } #anfm-integration .anfm-sequence span { padding: 9px 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; color: #eef5f6; background: rgba(255,255,255,.05); font-size: .9rem; font-weight: 750; } #anfm-integration .anfm-sequence b { color: #72d8d0; } #anfm-integration .anfm-integration__note { max-width: 830px; margin: 24px auto 0; color: #afc1c8; text-align: center; font-size: .92rem; line-height: 1.6; } @media (max-width: 760px) { #anfm-integration .anfm-integration__grid { grid-template-columns: 1fr; } } @media (max-width: 650px) { #anfm-integration { padding: 64px 20px; } #anfm-integration .anfm-sequence { align-items: stretch; flex-direction: column; text-align: center; } #anfm-integration .anfm-sequence b { transform: rotate(90deg); } } #anfm-training { --anfm-navy: #132a3c; --anfm-teal: #2d9692; --anfm-text: #405765; padding: 90px 24px; text-align: left; background: #f7fafb; } #anfm-training * { box-sizing: border-box; } #anfm-training .anfm-training__inner { width: min(100%, 1200px); margin: 0 auto; display: grid; grid-template-columns: minmax(350px, .88fr) minmax(0, 1.12fr); gap: clamp(42px, 6vw, 78px); align-items: center; } #anfm-training .anfm-training__image { position: relative; } #anfm-training .anfm-training__image::after { content: ""; position: absolute; inset: 22px 0 -22px 22px; z-index: 0; border-radius: 22px; background: #dcefed; } #anfm-training .anfm-training__image img { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; box-shadow: 0 24px 58px rgba(27, 66, 82, .16); } #anfm-training .anfm-kicker { margin: 0 0 12px; color: var(--anfm-teal); font-size: .82rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } #anfm-training h2 { margin: 0 0 18px; color: var(--anfm-navy); font-size: clamp(2rem, 3.4vw, 3.3rem); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; } #anfm-training .anfm-training__intro { margin: 0; color: var(--anfm-text); font-size: 1.06rem; line-height: 1.7; } #anfm-training .anfm-training-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 28px; } #anfm-training .anfm-training-card { padding: 18px; border: 1px solid #dbe7ea; border-radius: 13px; background: #fff; } #anfm-training .anfm-training-card h3 { margin: 0 0 6px; color: var(--anfm-navy); font-size: 1rem; } #anfm-training .anfm-training-card p { margin: 0; color: #5d737e; font-size: .9rem; line-height: 1.52; } #anfm-training .anfm-training__rule { margin-top: 20px; padding: 17px 20px; border-left: 4px solid #4db8b1; border-radius: 0 10px 10px 0; color: #36515f; background: #e7f4f3; line-height: 1.58; } #anfm-training .anfm-training__rule strong { color: #176f6d; } #anfm-training .anfm-training__link { display: inline-flex; margin-top: 22px; padding: 13px 19px; border-radius: 8px; color: #fff; background: #2f9692; font-weight: 800; text-decoration: none; } @media (max-width: 920px) { #anfm-training .anfm-training__inner { grid-template-columns: 1fr; } #anfm-training .anfm-training__image { width: min(100%, 680px); margin: 0 auto; } } @media (max-width: 650px) { #anfm-training { padding: 64px 20px; } #anfm-training .anfm-training-grid { grid-template-columns: 1fr; } #anfm-training .anfm-training__image::after { display: none; } #anfm-training .anfm-training__link { justify-content: center; width: 100%; text-align: center; } } #anfm-boundary { --anfm-navy: #132a3c; --anfm-teal: #2e9692; padding: 78px 24px; text-align: left; background: #fff; } #anfm-boundary * { box-sizing: border-box; } #anfm-boundary .anfm-boundary__inner { width: min(100%, 1080px); margin: 0 auto; display: grid; grid-template-columns: minmax(250px, .65fr) minmax(0, 1.35fr); overflow: hidden; border: 1px solid #d6e5e8; border-radius: 20px; background: #f5f9fa; box-shadow: 0 16px 44px rgba(29, 67, 82, .07); } #anfm-boundary .anfm-boundary__heading { padding: 38px; color: #fff; background: linear-gradient(145deg, #173142, #1d5058); } #anfm-boundary .anfm-kicker { margin: 0 0 12px; color: #75d6cf; font-size: .8rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } #anfm-boundary h2 { margin: 0; color: #fff; font-size: clamp(1.8rem, 3vw, 2.65rem); line-height: 1.12; letter-spacing: -.03em; } #anfm-boundary .anfm-boundary__content { padding: 38px; } #anfm-boundary .anfm-boundary__content > p { margin: 0 0 20px; color: #405866; line-height: 1.68; } #anfm-boundary .anfm-boundary__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } #anfm-boundary .anfm-boundary__list li { position: relative; padding-left: 32px; color: #405866; line-height: 1.57; } #anfm-boundary .anfm-boundary__list li::before { content: "✓"; position: absolute; top: 0; left: 0; display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; color: #fff; background: var(--anfm-teal); font-size: .72rem; font-weight: 900; } #anfm-boundary .anfm-boundary__list strong { color: var(--anfm-navy); } @media (max-width: 760px) { #anfm-boundary .anfm-boundary__inner { grid-template-columns: 1fr; } } @media (max-width: 650px) { #anfm-boundary { padding: 58px 20px; } #anfm-boundary .anfm-boundary__heading, #anfm-boundary .anfm-boundary__content { padding: 28px 24px; } } #anfm-selfcheck { --anfm-navy: #132a3c; --anfm-teal: #2c9591; --anfm-text: #405765; padding: 90px 24px; text-align: left; background: #eef6f6; } #anfm-selfcheck * { box-sizing: border-box; } #anfm-selfcheck .anfm-selfcheck__inner { width: min(100%, 1120px); margin: 0 auto; } #anfm-selfcheck .anfm-heading { max-width: 830px; margin: 0 auto 38px; text-align: center; } #anfm-selfcheck .anfm-kicker { margin: 0 0 12px; color: var(--anfm-teal); font-size: .82rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } #anfm-selfcheck h2 { margin: 0 0 18px; color: var(--anfm-navy); font-size: clamp(2rem, 3.4vw, 3.3rem); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; } #anfm-selfcheck .anfm-heading p { margin: 0; color: var(--anfm-text); font-size: 1.06rem; line-height: 1.7; } #anfm-selfcheck .anfm-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; } #anfm-selfcheck .anfm-check-item { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; padding: 20px; border: 1px solid #d5e5e7; border-radius: 14px; background: #fff; } #anfm-selfcheck .anfm-check-item__mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #fff; background: var(--anfm-teal); font-weight: 900; } #anfm-selfcheck .anfm-check-item p { margin: 1px 0 0; color: var(--anfm-text); line-height: 1.55; } #anfm-selfcheck .anfm-check-item strong { color: var(--anfm-navy); } #anfm-selfcheck .anfm-selfcheck__bottom { max-width: 820px; margin: 28px auto 0; padding: 20px 24px; border-radius: 14px; color: #d9e5e8; text-align: center; background: #173343; line-height: 1.62; } #anfm-selfcheck .anfm-selfcheck__bottom strong { color: #74d4cd; } @media (max-width: 720px) { #anfm-selfcheck .anfm-check-grid { grid-template-columns: 1fr; } } @media (max-width: 650px) { #anfm-selfcheck { padding: 64px 20px; } } #anfm-cta { padding: 82px 24px; color: #fff; background: radial-gradient(circle at 18% 20%, rgba(89, 199, 191, .22), transparent 28%), linear-gradient(120deg, #0d1d2a, #17404a); } #anfm-cta * { box-sizing: border-box; } #anfm-cta .anfm-cta__inner { width: min(100%, 980px); margin: 0 auto; text-align: center; } #anfm-cta .anfm-kicker { margin: 0 0 12px; color: #73d5ce; font-size: .82rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } #anfm-cta h2 { margin: 0 0 18px; color: #fff; font-size: clamp(2rem, 3.6vw, 3.45rem); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; } #anfm-cta .anfm-cta__intro { max-width: 760px; margin: 0 auto; color: #cbd8dc; font-size: 1.08rem; line-height: 1.72; } #anfm-cta .anfm-cta__facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; } #anfm-cta .anfm-cta__facts li { padding: 8px 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: #dce7ea; background: rgba(255,255,255,.055); font-size: .88rem; } #anfm-cta .anfm-cta__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; } #anfm-cta .anfm-button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border: 1px solid transparent; border-radius: 8px; color: #fff; font-weight: 850; text-decoration: none; transition: transform .2s ease, background .2s ease; } #anfm-cta .anfm-button:hover { transform: translateY(-2px); } #anfm-cta .anfm-button--primary { background: #3a9d98; } #anfm-cta .anfm-button--secondary { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.05); } #anfm-cta .anfm-cta__small { margin: 18px 0 0; color: #aebfc6; font-size: .84rem; } @media (max-width: 650px) { #anfm-cta { padding: 64px 20px; } #anfm-cta .anfm-cta__actions { align-items: stretch; flex-direction: column; } #anfm-cta .anfm-button { width: 100%; } } #anfm-origins { --anfm-navy: #132a3c; --anfm-teal: #2c9591; --anfm-text: #405765; padding: 90px 24px; text-align: left; background: #fff; } #anfm-origins * { box-sizing: border-box; } #anfm-origins .anfm-origins__inner { width: min(100%, 1180px); margin: 0 auto; } #anfm-origins .anfm-heading { max-width: 860px; margin: 0 auto 40px; text-align: center; } #anfm-origins .anfm-kicker { margin: 0 0 12px; color: var(--anfm-teal); font-size: .82rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } #anfm-origins h2 { margin: 0 0 18px; color: var(--anfm-navy); font-size: clamp(2rem, 3.4vw, 3.3rem); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; } #anfm-origins .anfm-heading p { margin: 0; color: var(--anfm-text); font-size: 1.06rem; line-height: 1.72; } #anfm-origins .anfm-origin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } #anfm-origins .anfm-origin-card { padding: 28px; border: 1px solid #dbe7ea; border-radius: 17px; background: #f8fbfc; } #anfm-origins .anfm-origin-card__label { color: var(--anfm-teal); font-size: .75rem; font-weight: 850; letter-spacing: .065em; text-transform: uppercase; } #anfm-origins .anfm-origin-card h3 { margin: 9px 0 10px; color: var(--anfm-navy); font-size: 1.28rem; } #anfm-origins .anfm-origin-card p { margin: 0; color: var(--anfm-text); line-height: 1.62; } #anfm-origins .anfm-origin-card a { display: inline-flex; margin-top: 14px; color: #1f7f7b; font-size: .88rem; font-weight: 800; text-underline-offset: 3px; } #anfm-origins .anfm-origin-card--own { color: #d6e3e6; background: linear-gradient(145deg, #142c3d, #1b4650); } #anfm-origins .anfm-origin-card--own h3 { color: #fff; } #anfm-origins .anfm-origin-card--own p { color: #cfdbdf; } #anfm-origins .anfm-origin-card--own .anfm-origin-card__label { color: #75d6cf; } #anfm-origins .anfm-origins__summary { max-width: 900px; margin: 24px auto 0; padding: 19px 23px; border-left: 4px solid #55bdb7; border-radius: 0 12px 12px 0; color: #3d5663; background: #eaf5f4; line-height: 1.63; } #anfm-origins .anfm-origins__summary strong { color: var(--anfm-navy); } @media (max-width: 760px) { #anfm-origins .anfm-origin-grid { grid-template-columns: 1fr; } } @media (max-width: 650px) { #anfm-origins { padding: 64px 20px; } } #anfm-focus { --anfm-navy: #132a3c; --anfm-teal: #2d9692; --anfm-text: #405765; padding: 88px 24px; text-align: left; background: #f5f9fa; } #anfm-focus * { box-sizing: border-box; } #anfm-focus .anfm-focus__inner { width: min(100%, 1180px); margin: 0 auto; } #anfm-focus .anfm-heading { max-width: 810px; margin: 0 auto 38px; text-align: center; } #anfm-focus .anfm-kicker { margin: 0 0 12px; color: var(--anfm-teal); font-size: .82rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } #anfm-focus h2 { margin: 0 0 18px; color: var(--anfm-navy); font-size: clamp(2rem, 3.4vw, 3.3rem); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; } #anfm-focus .anfm-heading p { margin: 0; color: var(--anfm-text); font-size: 1.06rem; line-height: 1.7; } #anfm-focus .anfm-focus-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } #anfm-focus .anfm-focus-card { display: flex; min-height: 190px; padding: 24px; flex-direction: column; border: 1px solid #d9e6e9; border-radius: 16px; color: inherit; background: #fff; text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } #anfm-focus .anfm-focus-card:hover { transform: translateY(-4px); border-color: #91cfcb; box-shadow: 0 15px 34px rgba(26, 69, 84, .1); } #anfm-focus .anfm-focus-card__number { margin-bottom: 15px; color: var(--anfm-teal); font-size: .75rem; font-weight: 900; letter-spacing: .08em; } #anfm-focus .anfm-focus-card h3 { margin: 0 0 8px; color: var(--anfm-navy); font-size: 1.16rem; line-height: 1.3; } #anfm-focus .anfm-focus-card p { margin: 0 0 16px; color: var(--anfm-text); line-height: 1.55; } #anfm-focus .anfm-focus-card__link { margin-top: auto; color: #1f7f7b; font-size: .86rem; font-weight: 850; } @media (max-width: 900px) { #anfm-focus .anfm-focus-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { #anfm-focus { padding: 64px 20px; } #anfm-focus .anfm-focus-grid { grid-template-columns: 1fr; } #anfm-focus .anfm-focus-card { min-height: 0; } } #anfm-faq { --anfm-navy: #132a3c; --anfm-teal: #2d9692; --anfm-text: #405765; padding: 90px 24px; text-align: left; background: #fff; } #anfm-faq * { box-sizing: border-box; } #anfm-faq .anfm-faq__inner { width: min(100%, 980px); margin: 0 auto; } #anfm-faq .anfm-heading { max-width: 760px; margin: 0 auto 36px; text-align: center; } #anfm-faq .anfm-kicker { margin: 0 0 12px; color: var(--anfm-teal); font-size: .82rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } #anfm-faq h2 { margin: 0 0 16px; color: var(--anfm-navy); font-size: clamp(2rem, 3.4vw, 3.3rem); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; } #anfm-faq .anfm-heading p { margin: 0; color: var(--anfm-text); font-size: 1.05rem; line-height: 1.68; } #anfm-faq .anfm-faq-list { display: grid; gap: 11px; } #anfm-faq details { border: 1px solid #dbe7ea; border-radius: 13px; background: #f8fbfc; } #anfm-faq summary { position: relative; padding: 20px 58px 20px 22px; color: var(--anfm-navy); cursor: pointer; font-weight: 800; line-height: 1.42; list-style: none; } #anfm-faq summary::-webkit-details-marker { display: none; } #anfm-faq summary::after { content: "+"; position: absolute; top: 50%; right: 20px; display: grid; width: 28px; height: 28px; transform: translateY(-50%); place-items: center; border-radius: 50%; color: #fff; background: var(--anfm-teal); font-size: 1.15rem; line-height: 1; } #anfm-faq details[open] summary::after { content: "−"; } #anfm-faq .anfm-answer { padding: 0 22px 22px; color: var(--anfm-text); line-height: 1.65; } #anfm-faq .anfm-answer p { margin: 0; } #anfm-faq .anfm-faq__contact { margin-top: 26px; text-align: center; color: #5b717c; } #anfm-faq .anfm-faq__contact a { color: #1f7f7b; font-weight: 850; text-underline-offset: 3px; } @media (max-width: 650px) { #anfm-faq { padding: 64px 20px; } } /* assets/methode-integration-v4.css */ /* Adapt the original page to the owned header without changing its source CSS. */ body.page-method #anfm-hero { --anfm-menu-overlap: 75px; --anfm-x5-offset-compensation: 0px; } body.page-method section[id^="anfm-"] { text-align: center; scroll-margin-top: 24px; } @media (max-width: 699px) { body.page-method #anfm-hero { --anfm-menu-overlap: 68px; } } @media (prefers-reduced-motion: reduce) { body.page-method section[id^="anfm-"] *, body.page-method section[id^="anfm-"] *::before, body.page-method section[id^="anfm-"] *::after { transition: none !important; animation: none !important; } } @media print { body.page-method #anfm-hero { --anfm-menu-overlap: 0px; } } /* assets/feinschliff-v9.css */ /* Only blog pages need the rounded continuation beneath the lowered symbol. */ .site-header{--header-height:75px;--header-surface:#0d202c} .site-header .site-brand{position:relative;isolation:isolate} /* Booking heroes continue through the navigation; keep the white links. */ body.page-booking-live .site-header{background:transparent} /* Match the one-pixel navigation dividers on the other hero sections. */ body.page-content #sk-hero::after{height:1px} .page-blog-index .site-header .site-brand::before,.page-blog-article .site-header .site-brand::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-16px;top:calc(50% + var(--header-height)/2 - 1px);width:calc(var(--brand-height)*.972117 + 32px);height:16px;background:var(--header-surface);border-radius:0 0 16px 16px} /* An illuminated surround gives the contact card room before the dark footer. */ body.page-content #sk-cta{background:linear-gradient(140deg,#f7fafb,#eaf4f2)!important} body.page-content #sk-cta .sk-cta-box{background:radial-gradient(ellipse at 0 0,#20515c,transparent 70%),linear-gradient(120deg,#123744,#0d2633);box-shadow:0 20px 48px #12343f18} /* Old exported blog CSS sets body dark with !important. Own the page surface explicitly; the original article cards keep their approved local styling. */ body.page-blog-index,body.page-blog-article{background:#f5f9fa!important} .page-blog-index .site-header,.page-blog-article .site-header,.page-privacy-settings .site-header,.page-legal .site-header{background:linear-gradient(180deg,#153d47 0%,var(--header-surface) 100%)} .page-blog-article #inhalt{display:flow-root;background:radial-gradient(ellipse at 10% 15%,#edf7f5,transparent 55%),#f5f9fa;padding-bottom:clamp(56px,7vw,88px)} .page-blog-article .blog-hero h1{color:#143240} .page-blog-article .blog-hero .blog-meta{color:#496672} .page-blog-article .blog-back{color:#236f69} .page-blog-article .blog-bottom{margin-bottom:0;padding:28px;border-top:1px solid #cddfe1} .blog-pagination{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin-top:42px} .blog-pagination a,.blog-pagination span{display:flex;align-items:center;justify-content:center;min-width:42px;min-height:44px;padding:8px 13px;border:1px solid #bed5d8;border-radius:9px;text-decoration:none;color:#23545d;background:#fff;font-size:15px} .blog-pagination a:hover{background:#e4f1ef;border-color:#297f78} .blog-pagination [aria-current="page"]{background:#194752;border-color:#194752;color:#fff;font-weight:700} .blog-pagination .pagination-gap{border:0;background:none;min-width:18px;padding:4px} .blog-pagination[hidden]{display:none} .blog-index-heading{scroll-margin-top:24px;outline:none} .blog-count{color:#49636d;margin:22px 0} @media(max-width:699px){.site-header{--header-height:68px}.page-blog-index .site-header .site-brand::before,.page-blog-article .site-header .site-brand::before{left:-12px;width:calc(var(--brand-height)*.972117 + 24px);height:14px;border-radius:0 0 14px 14px}.page-blog-article .blog-bottom{padding:24px 10px}} @media(max-width:420px){.blog-pagination{gap:6px}.blog-pagination a,.blog-pagination span{min-width:36px;padding:7px 10px}} /* assets/scroll-scenes.css */ /* Subtle depth for selected scenes. The source layout and reading flow stay intact. */ .scene-photo-window { display: block; position: relative; overflow: hidden; isolation: isolate; } .scene-photo-window > img { display: block; } /* The training decoration belongs behind the new isolated photo frame. */ #anfm-training .anfm-training__image { isolation: isolate; } #anfm-training .anfm-training__image > .scene-photo-window { z-index: 1; } #anfm-cases .anfm-case__image > .scene-photo-window { height: 100%; } @media (max-width: 900px) { #anfm-cases .anfm-case__image > .scene-photo-window { height: auto; } } html.scroll-scenes .scene-photo-window > img { transform: translate3d(0, clamp(calc(-1 * var(--scene-photo-limit, 100px)), var(--scene-photo-y, 0px), var(--scene-photo-limit, 100px)), 0) scale(var(--scene-photo-scale, 1.1)); transform-origin: center; } html.scroll-scenes .scene-photo-window.scene-is-visible > img { will-change: transform; } /* The homepage picture fills its existing stage on desktop and has its own clipped frame above the copy on phones. This also works on mobile browsers. */ #anfh-hero .scene-home-picture { --scene-photo-scale: 1.045; --scene-photo-limit: 12px; } @media (min-width: 700px) { #anfh-hero .scene-home-picture { position: absolute; inset: 0; z-index: 0; } } @media (max-width: 699px) { #anfh-hero .scene-home-picture { position: relative; width: 100%; --scene-photo-limit: 4px; } } html.scroll-scenes .scene-section { position: relative; isolation: isolate; overflow: hidden; } .scene-ambient { position: absolute; inset: -64px -24px; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 700' fill='none' stroke='%2355bfb7' stroke-width='1.3'%3E%3Cpath d='M-80 580C220 550 180 150 550 200S950 660 1480 260M-100 330C180 410 360 40 710 90S1050 480 1500 120'/%3E%3Ccircle cx='550' cy='200' r='6'/%3E%3Ccircle cx='710' cy='90' r='5'/%3E%3Ccircle cx='1060' cy='462' r='6'/%3E%3C/svg%3E") center / cover no-repeat, radial-gradient(ellipse at 80% 45%, #55bfb718, transparent 60%); opacity: .16; transform: translate3d(0, var(--scene-ambient-y, 0px), 0) scale(1.04); } #anfm-hero .scene-ambient, #anfm-cta .scene-ambient { opacity: .25; } html.scroll-scenes .scene-section.scene-is-visible > .scene-ambient { will-change: transform; } html:not(.scroll-scenes) .scene-ambient { display: none; } @media (prefers-reduced-motion: reduce) { html.scroll-scenes .scene-photo-window > img { transform: none; will-change: auto; } .scene-ambient { display: none !important; } } @media print { html.scroll-scenes .scene-photo-window > img { transform: none; } .scene-ambient { display: none; } } /* assets/methode-story.css */ /* One reading-led scroll story. The original text stays in document order. */ #anfm-process .method-scroll-story { display: block; } #anfm-process .method-story-panel { display: none; } #anfm-process .method-scroll-story.story-is-running { display: grid; grid-template-columns: minmax(0, .37fr) minmax(0, .63fr); align-items: start; gap: 28px; } #anfm-process .story-is-running .method-story-panel { display: block; position: sticky; top: 28px; align-self: start; padding: 28px; overflow: hidden; border: 1px solid #386366; border-radius: 24px; background: radial-gradient(ellipse at 100% 15%, #25595e 0%, transparent 65%), #102736; box-shadow: 0 22px 48px #173c4b1a; color: #fff; text-align: left; z-index: 2; } #anfm-process .method-story-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .2; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 650' fill='none' stroke='%2378ddd5'%3E%3Cpath d='M-80 300C50 410 220 70 460 200M-80 500C50 450 210 690 470 400'/%3E%3C/svg%3E") center / cover; } #anfm-process .method-story-intro, #anfm-process .method-story-diagram, #anfm-process .method-story-readout { position: relative; } #anfm-process .method-story-eyebrow { margin: 0 0 10px; color: #8ad9d2; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 700; } #anfm-process .method-story-title { margin: 0; color: #fff; font-size: clamp(26px, 2.5vw, 34px); font-weight: 800; line-height: 1.12; letter-spacing: -.025em; } #anfm-process .method-story-diagram { display: block; width: min(100%, 300px); height: auto; margin: 22px auto 18px; overflow: visible; transform: scale(var(--story-scale, 1)); transform-origin: center; } .method-story-orbit { fill: none; stroke: #4c777e; stroke-width: 1; } .method-story-trace { fill: none; stroke: #87e0d5; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--story-trace, 100); transform: rotate(-90deg); transform-origin: 160px 160px; } .method-story-link { fill: none; stroke: #51878d; stroke-width: 1; opacity: .5; } .method-story-node .method-story-dot { fill: #24454e; stroke: #87a4a8; stroke-width: 1.5; } .method-story-node text { fill: #bfd8d9; font-size: 10px; font-family: Lato, sans-serif; text-anchor: middle; } .method-story-halo { fill: none; stroke: #8de3d6; stroke-width: 1; opacity: 0; } .method-story-node.story-node-done .method-story-dot, .method-story-node.story-node-current .method-story-dot { fill: #87e0d5; stroke: #87e0d5; } .method-story-node.story-node-current .method-story-halo { opacity: .8; } .method-story-node.story-node-current text { fill: #fff; font-weight: 700; } #anfm-process .method-story-readout { min-height: 78px; } #anfm-process .method-story-number { color: #8ad9d2; font-size: 12px; letter-spacing: .08em; } #anfm-process .method-story-label { margin: 6px 0 0; color: #fff; font-size: 16px; line-height: 1.4; } #anfm-process .method-story-progress { position: relative; height: 2px; margin-top: 22px; background: #4b767b; } .method-story-progress > span { display: block; height: 100%; background: #8de3d6; transform: scaleX(var(--story-progress, 0)); transform-origin: left; } #anfm-process .story-is-running .anfm-step { transition: border-color .22s, box-shadow .22s; } #anfm-process .story-is-running .anfm-step.story-step-current { border-color: #72bfb8; box-shadow: 0 12px 30px #1d6e6810; } @media (max-width: 900px) { #anfm-process .method-scroll-story.story-is-running { display: block; } #anfm-process .story-is-running .method-story-panel { display: grid; grid-template-columns: minmax(0, 1fr) 114px; grid-template-rows: auto 1fr; column-gap: 14px; top: 10px; margin: 0 0 22px; padding: 14px 18px 18px; border-radius: 18px; box-shadow: 0 8px 28px #0b303526; min-height: 150px; } #anfm-process .method-story-eyebrow { font-size: 9px; margin-bottom: 5px; } #anfm-process .method-story-title { font-size: 16px; line-height: 1.24; } #anfm-process .method-story-title br { display: none; } #anfm-process .method-story-diagram { grid-column: 2; grid-row: 1 / 3; width: 114px; margin: 0; align-self: center; } #anfm-process .method-story-readout { min-height: 0; align-self: end; padding-top: 12px; } #anfm-process .method-story-number { font-size: 10px; } #anfm-process .method-story-label { font-size: 12px; margin-top: 2px; } #anfm-process .method-story-progress { position: absolute; left: 18px; right: 18px; bottom: 10px; margin: 0; } } @media (max-width: 380px) { #anfm-process .story-is-running .method-story-panel { grid-template-columns: minmax(0, 1fr) 86px; gap: 8px; padding: 12px 14px 18px; } #anfm-process .method-story-diagram { width: 86px; } #anfm-process .method-story-title { font-size: 14px; } } @media (max-height: 620px) { #anfm-process .story-is-running .method-story-panel { position: relative; top: 0; } } @media (min-width: 901px) and (max-height: 700px) { #anfm-process .story-is-running .method-story-panel { padding: 22px; } #anfm-process .method-story-title { font-size: 26px; } #anfm-process .method-story-diagram { width: 220px; margin-top: 16px; margin-bottom: 12px; } } @media (prefers-reduced-motion: reduce), print { #anfm-process .method-scroll-story.story-is-running { display: block; } #anfm-process .story-is-running .method-story-panel { display: none; } #anfm-process .story-is-running .anfm-step { transition: none; } } /* assets/consent.css */ /* Scoped, native dialog: the website and training app design remain independent. */ .privacy-dialog,.privacy-page,.privacy-media{font-family:Lato,Arial,sans-serif;line-height:1.55} .privacy-dialog *,.privacy-page *,.privacy-media *{box-sizing:border-box} .privacy-dialog [hidden],.privacy-page [hidden],.privacy-media [hidden]{display:none!important} .privacy-is-open{overflow:hidden} .privacy-dialog{color:#173847;background:#f6faf9;border:1px solid #d3e4e6;border-radius:24px;padding:0;width:min(640px,calc(100vw - 48px));max-width:none;max-height:calc(100dvh - 48px);margin:auto 24px 24px;box-shadow:0 24px 90px #031a2850;overflow:auto;overscroll-behavior:contain} .privacy-dialog::backdrop{background:#071d2a69;backdrop-filter:blur(2px)} .privacy-dialog[open]{animation:privacy-arrive .24s ease-out} .privacy-dialog__head{position:relative;padding:25px 28px 22px;color:white;background:radial-gradient(ellipse at 5% 0%,#28757780,transparent 68%),#102b39;border-radius:22px 22px 0 0;overflow:hidden} .privacy-dialog__head::after{content:"";position:absolute;width:270px;height:160px;right:-90px;top:-100px;border:1px solid #a0dcd852;border-radius:50%;box-shadow:0 15px 0 0 #a0dcd81a,0 30px 0 0 #a0dcd811;pointer-events:none} .privacy-dialog__eyebrow{display:block;color:#8edde0;font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;margin:0 0 10px} .privacy-dialog h2{color:white;font-size:clamp(24px,3.3vw,30px);line-height:1.15;margin:0;padding-right:22px;letter-spacing:-.025em} .privacy-dialog h2:focus{outline:none} .privacy-dialog__close{position:absolute;right:14px;top:12px;z-index:1;border:1px solid #b5d6d442;background:transparent;color:white;border-radius:50%;width:32px;height:32px;font:24px/1 Arial;cursor:pointer} .privacy-dialog__body{padding:22px 28px 8px} .privacy-dialog p{font-size:15px;margin:0 0 14px} .privacy-dialog a,.privacy-page a,.privacy-media a{color:#166d76;text-decoration:underline;text-underline-offset:3px} .privacy-dialog__necessary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #d6e3e3;border-bottom:1px solid #d6e3e3;font-size:14px} .privacy-dialog__necessary span:last-child{color:#276857;background:#e0efe9;border-radius:20px;padding:3px 10px;font-size:12px;white-space:nowrap} .privacy-dialog__options{padding-top:4px} .privacy-option{padding:14px 0;border-bottom:1px solid #d6e3e3} .privacy-option label{display:flex;gap:15px;justify-content:space-between;align-items:center;font-weight:700;font-size:16px;cursor:pointer} .privacy-option small{display:block;margin:5px 58px 0 0;font-size:13px;color:#425e68;line-height:1.5} .privacy-option input{appearance:none;flex:none;width:44px;height:25px;border:1px solid #899fa4;border-radius:30px;background:#cbd8da;cursor:pointer;position:relative;margin:0} .privacy-option input::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #092a3940;transition:transform .18s} .privacy-option input:checked{background:#21776e;border-color:#21776e} .privacy-option input:checked::after{transform:translateX(18px)} .privacy-option details{margin-top:7px;font-size:12px;color:#425e68} .privacy-option summary{cursor:pointer;width:fit-content;text-decoration:underline;text-underline-offset:3px} .privacy-option details p{font-size:12px;margin-top:7px;margin-bottom:2px} .privacy-dialog__actions{position:sticky;bottom:0;padding:15px 28px 18px;background:#f6faf9;border-top:1px solid #dce7e6} .privacy-dialog__buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .privacy-btn{font:700 13px/1.3 Lato,Arial,sans-serif;border-radius:9px;min-height:46px;padding:11px 12px;background:#e6f1ef;color:#143d48;border:1px solid #89b5b4;cursor:pointer;text-align:center;text-decoration:none!important;display:inline-flex;align-items:center;justify-content:center} .privacy-btn:hover{background:#d2e7e3;border-color:#286e72} .privacy-btn:focus-visible,.privacy-dialog a:focus-visible,.privacy-dialog input:focus-visible,.privacy-dialog summary:focus-visible,.privacy-dialog__close:focus-visible{outline:3px solid #e5b854;outline-offset:3px} .privacy-dialog__links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:12px} .privacy-dialog .privacy-dialog__preview{font-size:12px;background:#e8f0f2;padding:9px 12px;border-radius:8px;margin-top:12px} .privacy-dialog [data-privacy-status]:empty{display:none} .privacy-dialog [data-privacy-status]{font-size:13px;color:#8b3925;padding-top:10px} .privacy-page{max-width:900px;margin:auto;padding:155px 24px 80px;color:#173847;overflow-wrap:anywhere;hyphens:auto} .privacy-page h1{font-size:clamp(32px,5vw,48px);line-height:1.12;margin:15px 0 22px} .privacy-page__card{background:white;border:1px solid #d5e4e4;border-radius:20px;padding:28px;margin:25px 0;box-shadow:0 15px 50px #143d4808} .privacy-page__card h2{font-size:23px;margin:0 0 12px} .privacy-page__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px} .privacy-page__label{font-size:12px;font-weight:700;letter-spacing:.08em;color:#187782;text-transform:uppercase} .privacy-page__list{padding-left:20px}.privacy-page__list li{margin:10px 0} .privacy-media{margin:20px 0;padding:24px;background:#e9f4f2;border:1px solid #c6dedb;border-radius:18px;color:#173847} .privacy-media__placeholder{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start} .privacy-media__icon{display:grid;place-items:center;background:#123643;color:#91d7d6;border-radius:18px;width:64px;height:64px;font-size:25px} .privacy-media h3{font-size:23px!important;color:#173847!important;margin:0 0 10px!important} .privacy-media p{font-size:14px!important;color:#385863!important;margin:0 0 14px!important} .privacy-media__links{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-size:13px} .privacy-media__player iframe{display:block;width:100%;border:0;border-radius:12px;min-height:352px;background:#102b39} .privacy-media__manage{display:block;font-size:12px;margin-top:12px} @media(max-width:600px){.privacy-dialog{margin:auto 10px 10px;width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:20px}.privacy-dialog__head{padding:22px 20px 20px}.privacy-dialog__body{padding:18px 20px 5px}.privacy-dialog__actions{padding:12px 20px 16px}.privacy-dialog__buttons{grid-template-columns:1fr 1fr}.privacy-dialog__buttons .privacy-btn:last-child{grid-column:1/-1}.privacy-dialog h2{font-size:26px}.privacy-dialog p{font-size:14px}.privacy-option small{margin-right:0}.privacy-media{padding:18px}.privacy-media__placeholder{grid-template-columns:1fr;gap:14px}.privacy-page__card{padding:22px}} @media(prefers-reduced-motion:reduce){.privacy-dialog[open]{animation:none}.privacy-option input::after{transition:none}} @keyframes privacy-arrive{from{opacity:.5;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} /* assets/methode-motion-v18.css */ /* Three independent, reading-led scenes. No extra scroll distance or hidden copy. */ .page-method section[id^="anfm-"]:not(#anfm-hero) { padding-block: clamp(52px, 5.5vw, 76px); } .page-method .method-chapters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; padding: 25px 24px; background: #edf5f5; border-bottom: 1px solid #d5e5e7; } .page-method .method-chapters__label { width: 100%; text-align: center; margin-bottom: 4px; font-size: 11px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: #506f79; } .page-method .method-chapters a { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid #cadfe1; border-radius: 9px; background: #fff; font-size: 14px; color: #264b58; text-decoration: none; } .page-method .method-chapters a span { font-size: 11px; color: #287c75; font-weight: 750; } .page-method .method-chapters a:hover, .page-method .method-chapters a:focus-visible { border-color: #287c75; background: #deefec; } .page-method .method-chapters a:focus-visible { outline: 2px solid #287c75; outline-offset: 3px; } .page-method #anfm-functions .anfm-function-card { position: relative; text-align: left; overflow: hidden; } .page-method #anfm-functions .anfm-function-card--mental { grid-column: 1 / -1; background: linear-gradient(110deg, #34615c44, #5278891a); border-color: #88d4cc55; } .page-method #anfm-functions .anfm-function-card--mental p { max-width: 900px; } .page-method #anfm-functions .anfm-function-card p { font-size: 16px !important; line-height: 1.65 !important; } .page-method.method-motion #anfm-functions .anfm-function-card { transform: translateY(var(--method-card-y, 0px)); transition: border-color .25s, background-color .25s; } .page-method.method-motion #anfm-functions .anfm-function-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; transform: scaleX(var(--method-progress, 0)); transform-origin: left; background: linear-gradient(90deg, #3c9994, #91e2d7); } .page-method.method-motion #anfm-functions .anfm-function-card.is-reading { border-color: #88d4cc80; background-color: #ffffff0a; } .page-method #anfm-cases .anfm-case p { font-size: 16px !important; line-height: 1.72 !important; } .page-method #anfm-cases .anfm-case__content { padding: clamp(24px, 3vw, 38px); text-align: left; } .page-method.method-motion #anfm-cases .anfm-case__flow span { transition: background-color .25s, border-color .25s, color .25s; } .page-method.method-motion #anfm-cases .anfm-case__flow span.is-read { color: #175a56; border-color: #98c8c2; background: #deefeb; } .page-method #anfm-integration .anfm-sequence { position: relative; } .page-method.method-motion #anfm-integration .anfm-sequence::after { content: ""; position: absolute; height: 2px; bottom: -14px; left: 0; right: 0; transform: scaleX(var(--method-progress, 0)); transform-origin: left; background: linear-gradient(90deg, #3d9994, #a8e8de); } .page-method.method-motion #anfm-integration .anfm-sequence > span { transition: background-color .25s, box-shadow .25s; } .page-method.method-motion #anfm-integration .anfm-sequence > span.is-read { background: #78d3c925; box-shadow: inset 0 0 0 1px #91dfd744; } @media(min-width: 901px) and (min-height: 680px) { .page-method.method-motion #anfm-cases .anfm-case { overflow: visible; align-items: start; } .page-method.method-motion #anfm-cases .anfm-case__image { position: sticky; top: 28px; align-self: start; min-height: 0; height: min(560px, calc(100svh - 56px)); border-radius: 20px; overflow: hidden; } .page-method.method-motion #anfm-cases .anfm-case__image .scene-photo-window { height: 100%; } .page-method.method-motion #anfm-cases .anfm-case__image img { height: 100%; min-height: 0; } } @media(max-width: 699px) { .page-method .method-chapters { justify-content: flex-start; padding: 20px; gap: 8px; } .page-method .method-chapters__label { text-align: left; } .page-method .method-chapters a { padding: 10px 12px; font-size: 13px; } .page-method #anfm-functions .anfm-function-card { padding: 22px; } .page-method #anfm-cases .anfm-case__content { padding: 24px; } } @media(prefers-reduced-motion: reduce) { .page-method.method-motion #anfm-functions .anfm-function-card { transform: none; } .page-method.method-motion #anfm-functions .anfm-function-card::after, .page-method.method-motion #anfm-integration .anfm-sequence::after { display: none; } .page-method.method-motion #anfm-cases .anfm-case__image { position: static; } } @media print { .page-method .method-chapters { display: none; } .page-method.method-motion #anfm-cases .anfm-case__image { position: static; } .page-method.method-motion #anfm-functions .anfm-function-card { transform: none; } } /* assets/methode-interactive-v19.css */ /* Native disclosures, visual explanations and stable reading panels. */ .page-method #anfm-process .method-story-label { min-height: 4.2em; } .page-method #anfm-process .method-story-readout { flex-shrink: 0; } .page-method #anfm-process .method-story-measure { min-height: 0 !important; } .page-method #anfm-cases .method-case { display: block; overflow: hidden; border-radius: 22px; background: #f7fafb; } .page-method #anfm-cases .method-case-summary { display: grid; grid-template-columns: minmax(160px, 28%) 1fr; align-items: stretch; list-style: none; cursor: pointer; text-align: left; } .page-method #anfm-cases .method-case-summary::-webkit-details-marker { display: none; } .page-method #anfm-cases .method-case-summary::marker { content: ''; } .page-method #anfm-cases .method-case-summary:focus-visible { outline: 3px solid #3a918a; outline-offset: -5px; border-radius: 22px; } .page-method #anfm-cases .method-case-caption { align-self: center; padding: 26px 32px; } .page-method #anfm-cases .method-case-caption h3 { margin: 0 0 18px; } .page-method #anfm-cases .method-case .anfm-case__image { position: relative; height: 220px; min-height: 0; order: 0; border-radius: 0; overflow: hidden; } .page-method #anfm-cases .method-case .scene-photo-window { height: 100%; } .page-method #anfm-cases .method-case .anfm-case__image img { height: 100%; min-height: 0; aspect-ratio: auto; object-fit: cover; } .page-method #anfm-cases .method-case-hint { display: flex; align-items: center; gap: 14px; color: #24786f; font-size: 14px; font-weight: 750; } .page-method #anfm-cases .method-case-hint i { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #9ec8c3; border-radius: 50%; font-size: 24px; font-style: normal; font-weight: 400; transition: transform .35s; } .page-method #anfm-cases .case-hint-close { display: none; } .page-method #anfm-cases details[open] .case-hint-close { display: inline; } .page-method #anfm-cases details[open] .case-hint-open { display: none; } .page-method #anfm-cases details[open] .method-case-hint i { transform: rotate(45deg); } .page-method #anfm-cases details[open] .method-case-summary { background: #e5f2ef; } .page-method #anfm-cases .method-case-drawer { overflow: hidden; } .page-method #anfm-cases .method-case-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, .7fr); gap: 30px; padding: 28px 32px 34px; border-top: 1px solid #d1e5e3; } .page-method #anfm-cases .method-case .anfm-case__content { padding: 0; } .page-method #anfm-cases .method-case .anfm-case__flow { position: relative; display: flex; flex-direction: column; align-self: start; gap: 10px; margin: 0; padding-left: 24px; text-align: left; } .page-method #anfm-cases .method-case .anfm-case__flow::before { content: ''; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 2px; background: #85bfb7; } .page-method #anfm-cases .method-case .anfm-case__flow span { position: relative; padding: 12px 14px; border-radius: 10px; background: #fff; font-size: 14px; } .page-method #anfm-cases .method-case .anfm-case__flow span::before { content: ''; position: absolute; left: -22px; top: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: #37968b; box-shadow: 0 0 0 4px #e3f2ee; } .page-method .method-signal-scene { position: relative; isolation: isolate; display: grid; min-height: 390px; padding: 20px; overflow: hidden; border-radius: 22px; background: radial-gradient(ellipse at 100% 0, #235d62, transparent 70%), #102936; color: #fff; } .page-method #anfm-information .method-signal-ready { isolation: isolate; overflow: hidden; border-radius: 22px; } .page-method #anfm-information .method-signal-ready::before { display: none; } .page-method #anfm-information .method-signal-ready > img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .16; z-index: 1; box-shadow: none; pointer-events: none; } .page-method .method-signal-scene svg { width: 100%; align-self: center; overflow: visible; } .page-method .method-signal-art { align-self: center; } .page-method .method-signal-scene text { fill: #dbf0ed; font: 13px Lato, sans-serif; text-anchor: middle; } .page-method .method-signal-scene .signal-track { stroke: #49767c; stroke-width: 1.5; fill: none; } .page-method .method-signal-scene .signal-live { stroke: #8ce4d5; stroke-width: 2.5; fill: none; stroke-dasharray: 100; } .page-method .method-signal-scene .signal-in { stroke-dashoffset: calc(100 * (1 - var(--signal-in, 0))); } .page-method .method-signal-scene .signal-out { stroke-dashoffset: calc(100 * (1 - var(--signal-out, 0))); } .page-method .method-signal-scene .signal-particle { fill: #b5f3e5; } .page-method .method-signal-scene .signal-halo { fill: #8de1d115; stroke: #8de1d15c; transform-origin: 260px 150px; transform: scale(var(--signal-halo, 1)); } .page-method .method-signal-legend { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; } .page-method .method-signal-legend span { padding: 7px 9px; border-radius: 7px; font-size: 12px; color: #9cc3c5; } .page-method .method-signal-legend .is-active { background: #7ad4c822; color: #fff; } .page-method .method-signal-scene__title { position: relative; z-index: 2; color: #92d9d1; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; text-align: left; } .page-method.method-rich-motion #anfm-information .anfm-info__image { position: sticky; top: 24px; align-self: start; } .page-method.method-rich-motion #anfm-information .anfm-info__inner { align-items: start; } .page-method.method-rich-motion #anfm-information .anfm-info-card.is-active { border-color: #55a49a; background: #eaf6f2; } .page-method .method-function-glyph { position: absolute; top: 15px; right: 20px; width: 54px; height: 54px; opacity: .24; fill: none; stroke: #94e3d7; stroke-width: 1.5; } .page-method.method-rich-motion #anfm-functions .anfm-function-card { transform: translateX(var(--card-shift, 0px)) rotate(var(--card-turn, 0deg)); transform-origin: center; } .page-method.method-rich-motion #anfm-functions .anfm-function-card.is-active { border-color: #8be0d1; background-color: #7edcca14; } .page-method #anfm-functions .anfm-function-card::after { display: none; } .page-method .method-integration-scene { position: relative; margin: 25px auto; width: min(100%, 720px); } .page-method .method-integration-scene svg { display: block; width: 100%; max-height: 210px; overflow: visible; } .page-method .method-integration-scene text { fill: #d9f1ed; font: 14px Lato, sans-serif; text-anchor: middle; } .page-method .method-integration-scene .integration-path { fill: none; stroke: #6fb6b0; stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: calc(100 * (1 - var(--integration-link, 0))); } .page-method .method-integration-scene .integration-merge { opacity: var(--integration-merge, 0); } .page-method .method-integration-scene .integration-pair-label { opacity: calc(1 - var(--integration-merge, 0)); } .page-method .method-integration-scene.integration-chosen :is(.integration-left, .integration-right) { transition: transform .4s cubic-bezier(.22,.7,.25,1); } .page-method .method-integration-scene.integration-chosen :is(.integration-merge, .integration-pair-label) { transition: opacity .4s; } .page-method:not(.method-rich-motion) .method-integration-scene.integration-chosen * { transition: none; } .page-method #anfm-integration .anfm-sequence::after { display: none; } .page-method #anfm-integration .anfm-sequence button { padding: 10px 13px; border: 1px solid #54858b; border-radius: 8px; color: #deefec; background: #ffffff0a; font: inherit; font-size: 14px; cursor: pointer; } .page-method #anfm-integration .anfm-sequence button[aria-pressed=true] { border-color: #92dfd0; background: #6cceb526; color: #fff; } .page-method #anfm-integration .anfm-sequence button:focus-visible { outline: 2px solid #92dfd0; outline-offset: 4px; } .page-method.method-rich-motion #anfm-origins .anfm-origin-card { transform: translateX(var(--origin-x, 0px)); } .page-method.method-rich-motion #anfm-origins .anfm-origin-card--own { box-shadow: 0 0 0 var(--origin-ring, 0px) #57bfa61a; } @media(max-width: 900px) { .page-method #anfm-cases .method-case-layout { grid-template-columns: 1fr; gap: 24px; } .page-method .method-signal-scene { min-height: 260px; padding: 16px; } .page-method .method-signal-art svg { max-height: 275px; } .page-method .method-signal-scene text { font-size: 15px; } .page-method #anfm-information .method-signal-ready { margin: 24px auto; width: 100%; } .page-method.method-rich-motion #anfm-information .anfm-info__image { top: 8px; z-index: 3; box-shadow: 0 10px 24px #163c4922; } .page-method #anfm-process .method-story-readout { min-height: 78px; } .page-method #anfm-process .method-story-label { min-height: 4.2em; } } @media(max-width: 620px) { .page-method #anfm-cases .method-case-summary { grid-template-columns: 100px minmax(0, 1fr); } .page-method #anfm-cases .method-case .anfm-case__image { height: 100%; min-height: 220px; } .page-method #anfm-cases .method-case-caption { padding: 20px 16px; } .page-method #anfm-cases .method-case-caption h3 { font-size: 17px !important; line-height: 1.3 !important; } .page-method #anfm-cases .method-case-caption .anfm-case__label { font-size: 9px !important; padding: 0; background: none; margin-bottom: 10px; } .page-method #anfm-cases .method-case-hint { font-size: 12px; gap: 8px; } .page-method #anfm-cases .method-case-layout { padding: 24px 20px; } .page-method .method-signal-legend span { font-size: 10px; padding: 5px; } .page-method .method-signal-scene { min-height: 240px; } .page-method #anfm-integration .anfm-sequence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 15px; } .page-method #anfm-integration .anfm-sequence > b { display: none; } .page-method #anfm-integration .anfm-sequence button { padding: 11px 8px; font-size: 12px; } .page-method #anfm-integration .anfm-sequence button:last-child { grid-column: 1 / -1; } } @media(max-width: 900px) and (max-height: 650px) { .page-method.method-rich-motion #anfm-information .anfm-info__image { position: relative; top: 0; } } @media(prefers-reduced-motion: reduce) { .page-method.method-rich-motion #anfm-information .anfm-info__image { position: relative; } .page-method.method-rich-motion #anfm-functions .anfm-function-card, .page-method.method-rich-motion #anfm-origins .anfm-origin-card { transform: none; } .page-method .method-integration-scene.integration-chosen * { transition: none; } .page-method #anfm-cases .method-case-hint i { transition: none; } } @media print { .page-method .method-signal-scene, .page-method .method-integration-scene, .page-method .method-case-hint { display: none; } .page-method #anfm-information .method-signal-ready > img { position: relative; opacity: 1; } .page-method #anfm-cases details:not([open]) > .method-case-drawer { display: block; } .page-method #anfm-cases details::details-content { content-visibility: visible; display: block; } }