/* 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/blog-source.css */ /* ========================================================= 1. BLOG – GRUNDLAYOUT ========================================================= */ #imContent { align-self: start; padding: 150px 0 300px 0; margin-top: -75px !important; } /* ========================================================= 2. BLOGÜBERSICHT – DUNKLER SEITENHINTERGRUND ========================================================= */ #imContent { background: radial-gradient( circle at 10% 18%, rgba(57, 170, 166, .27), transparent 31% ), radial-gradient( circle at 90% 82%, rgba(239, 140, 104, .14), transparent 30% ), linear-gradient( 137deg, #061621 0%, #103544 55%, #081722 100% ) !important; } /* X5-eigene Hintergrundebene deaktivieren */ #imContentGraphics { background: transparent !important; } /* Blogstrukturen transparent lassen */ #imBlogPage, #imBlogContent { background: transparent !important; } /* dunkle Grundfarbe für Restflächen */ html, body, #imPageExtContainer, #imPageIntContainer, #imPage { background-color: #071824 !important; } /* ========================================================= 3. EINZELARTIKEL – HELLE LESEFLÄCHE Nur Artikel bekommen diesen Hintergrund. Header und Footer bleiben dunkel. ========================================================= */ html.tb-blog-article-url #imContent { background: radial-gradient( circle at 8% 14%, rgba(57, 170, 166, .055), transparent 30% ), radial-gradient( circle at 92% 84%, rgba(239, 140, 104, .04), transparent 31% ), linear-gradient( 145deg, #ffffff 0%, #f7fbfa 55%, #fffdfb 100% ) !important; } /* Artikelcontainer selbst transparent */ html.tb-blog-article-url #imBlogPage, html.tb-blog-article-url #imBlogContent { background: transparent !important; } /* sichere Grundfarbe für normalen Artikeltext */ html.tb-blog-article-url #imBlogContent { color: #223139; } /* ========================================================= 4. BLOG-HEADER ========================================================= */ #imHeader { position: relative !important; background: radial-gradient( ellipse at 8% 15%, rgba(57, 170, 166, .32) 0%, rgba(57, 170, 166, .12) 22%, transparent 42% ), radial-gradient( ellipse at 88% 80%, rgba(239, 140, 104, .14) 0%, transparent 34% ), linear-gradient( 110deg, #061621 0%, #0b2936 32%, #103544 55%, #0a2733 74%, #081722 100% ) !important; z-index: 3000 !important; } /* X5-Header-Hintergrund deaktivieren */ #imHeaderBg { background: transparent !important; } /* Menü, Logo und Button oberhalb der Linie */ #imHeaderObjects { position: relative !important; z-index: 2 !important; } /* feine Akzentlinie unter Navigation */ #imHeader::after { content: ""; position: absolute; z-index: 1; left: 50%; bottom: 0; width: min(92%, 1440px); height: 1px; transform: translateX(-50%); pointer-events: none; background: linear-gradient( 90deg, transparent 0%, rgba(85, 195, 188, .22) 10%, rgba(85, 195, 188, .62) 35%, rgba(124, 221, 215, .72) 50%, rgba(85, 195, 188, .62) 65%, rgba(85, 195, 188, .22) 90%, transparent 100% ); } /* ========================================================= 5. SEO-EINLEITUNG – NUR BLOGÜBERSICHT ========================================================= */ .blog-intro-seo { display: block; width: 100%; max-width: 900px; margin: 0 auto 40px auto; padding: 0 20px; text-align: center; box-sizing: border-box; clear: both; } .blog-intro-seo h1 { margin: 0 0 16px 0; color: #ffffff !important; font-size: 34px; line-height: 1.15; } .blog-intro-seo p { max-width: 820px; margin: 0 auto; color: rgba(239, 248, 249, .88) !important; font-size: 18px; line-height: 1.55; } /* ========================================================= 6. BLOGKARTEN – BESCHREIBUNG ========================================================= */ #imBlogContent .blog-cardlayout-wrapper .im-cc-BlogPostCard .im-cc-BlogPostCardDescription, #imBlogContent .blog-cardlayout-wrapper .im-cc-BlogPostCard .im-cc-BlogPostCardDescription * { font-size: 12px !important; line-height: 1.35 !important; } /* ========================================================= 7. EINZELARTIKEL – COVER ========================================================= */ #imBlogPage.imBlogArticle #imBlogPostCover { display: block !important; width: auto !important; max-width: 640px !important; height: auto !important; max-height: none !important; object-fit: contain !important; margin: 0 auto 28px auto !important; } /* ========================================================= 8. SIDEBAR – CTA ========================================================= */ .blog-sidebar-cta strong { display: block; margin-bottom: 8px; font-size: 16px; } .blog-sidebar-cta p { margin: 0 0 12px 0; } .blog-sidebar-cta a { display: inline-block; padding: 10px 14px; border-radius: 999px; background: #0b3558; color: #ffffff !important; text-decoration: none !important; font-weight: 600; } /* ========================================================= 9. SIDEBAR – KATEGORIEN ALS TAGS ========================================================= */ #imBlogSidebar a[href*="category"], #imBlogSidebar a[href*="cat="] { display: inline-block !important; margin: 0 4px 7px 0 !important; padding: 5px 8px !important; border: 1px solid #0b3558 !important; border-radius: 999px !important; background: #ffffff !important; color: #0b3558 !important; text-decoration: none !important; font-size: 12px !important; line-height: 1.2 !important; } #imBlogSidebar a[href*="category"]:hover, #imBlogSidebar a[href*="cat="]:hover { background: #0b3558 !important; color: #ffffff !important; } /* ========================================================= 10. PAGINATION ========================================================= */ .tb-blog-pagination, .tb-blog-pagination span { color: rgba(239, 248, 249, .78) !important; } .tb-blog-pagination a { color: #ffffff !important; text-decoration: none !important; transition: color .18s ease; } .tb-blog-pagination a:hover { color: #7cddd7 !important; } /* Fallback für X5-Pagination */ #imBlogContent a[href*="start="] { color: #ffffff !important; text-decoration: none !important; } #imBlogContent a[href*="start="]:hover { color: #7cddd7 !important; } /* ========================================================= 11. FOOTER – HINTERGRUND ========================================================= */ #imFooterBg { background: #04121b !important; } #imFooter { position: relative !important; background: radial-gradient( circle at 14% 22%, rgba(57, 170, 166, .15), transparent 31% ), radial-gradient( circle at 86% 78%, rgba(239, 140, 104, .08), transparent 30% ), linear-gradient( 135deg, #04121b 0%, #071824 48%, #0a2631 100% ) !important; border-top: 1px solid rgba(124, 221, 215, .24) !important; } /* ========================================================= 12. FOOTER – ABSTAND NACH OBEN ========================================================= */ #imFooterObjects > .template-object-wrapper:not(#imFooter_imTextObject_02_wrapper) { transform: translateY(24px); } /* ========================================================= 13. FOOTER – TEXTFARBEN ========================================================= */ #imFooter, #imFooter .text-inner, #imFooter .text-inner div, #imFooter .text-inner span, #imFooter .text-inner i { color: rgba(225, 239, 241, .76) !important; } /* Überschriften */ #imFooter .text-inner b, #imFooter .text-inner b span, #imFooter .text-inner strong, #imFooter .text-inner strong span { color: #ffffff !important; } /* Links */ #imFooter a, #imFooter a span, #imFooter .imCssLink { color: rgba(216, 239, 239, .84) !important; text-decoration: none !important; } #imFooter a:hover, #imFooter a:hover span, #imFooter .imCssLink:hover { color: #7cddd7 !important; } /* Social Icons */ #imFooter .social-icon svg path, #imFooter .social-icon svg circle { fill: rgba(124, 221, 215, .75) !important; } #imFooter .social-icon a:hover svg path, #imFooter .social-icon a:hover svg circle { fill: #ffffff !important; } /* Copyright */ #imFooter_imTextObject_02, #imFooter_imTextObject_02 span, #imFooter_imTextObject_02 div { color: rgba(216, 232, 234, .58) !important; } /* ========================================================= 14. RESPONSIVE – SIDEBAR Der Umbruch erfolgt erst unter 900 px. Das war die funktionierende Variante. ========================================================= */ @media (max-width: 900px) { #imBlogPage { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #imBlogContent { display: block !important; float: none !important; clear: both !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #imBlogSidebar { display: block !important; float: none !important; clear: both !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 42px auto 0 auto !important; padding: 0 16px !important; box-sizing: border-box !important; } #imBlogSidebar > * { width: 100% !important; max-width: 560px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } .blog-sidebar-cta { padding: 18px !important; text-align: center !important; } .blog-sidebar-cta a { display: block !important; width: auto !important; max-width: 320px !important; margin: 0 auto !important; } } /* ========================================================= 15. RESPONSIVE – BLOGKARTEN Erst unter 760 px auf eine Spalte. ========================================================= */ @media (max-width: 760px) { #imBlogContent .blog-cardlayout-wrapper { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding-left: 14px !important; padding-right: 14px !important; box-sizing: border-box !important; } #imBlogContent .blog-cardlayout-wrapper .im-cc-BlogPostCard { display: block !important; width: calc(100% - 28px) !important; max-width: 620px !important; min-width: 0 !important; margin: 0 auto 28px auto !important; box-sizing: border-box !important; } #imBlogContent .blog-cardlayout-wrapper .im-cc-BlogPostCard img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; } } /* ========================================================= 16. RESPONSIVE – INTRO ========================================================= */ @media (max-width: 768px) { .blog-intro-seo { margin: 0 auto 30px auto; padding: 0 18px; } .blog-intro-seo h1 { font-size: 28px; line-height: 1.15; } .blog-intro-seo p { font-size: 16px; line-height: 1.55; } } /* ========================================================= 17. KLEINE SMARTPHONES ========================================================= */ @media (max-width: 480px) { .blog-intro-seo { padding-left: 16px; padding-right: 16px; } .blog-intro-seo h1 { font-size: 26px; line-height: 1.15; } .blog-intro-seo p { font-size: 15px; line-height: 1.55; } #imBlogContent .blog-cardlayout-wrapper { padding-left: 8px !important; padding-right: 8px !important; } #imBlogContent .blog-cardlayout-wrapper .im-cc-BlogPostCard { width: calc(100% - 8px) !important; margin-left: auto !important; margin-right: auto !important; } } html.tb-blog-article-url #imHeader.tb-logo-tab-ready { background-size: var(--tb-logo-background-size) !important; } html.tb-blog-article-url #imHeader_imObjectImage_15_wrapper { overflow: visible !important; } html.tb-blog-article-url #imHeader.tb-logo-tab-ready #imHeader_imObjectImage_15_wrapper::before { content: ""; position: absolute; top: var(--tb-logo-tab-top); left: -10px; right: -10px; bottom: -14px; z-index: 0; border-radius: 0 0 22px 22px; background-image: var(--tb-logo-background-image); background-size: var(--tb-logo-background-size); background-position: var(--tb-logo-background-position); background-repeat: no-repeat; pointer-events: none; } /* ========================================================= ALLGEMEINE WEBSITE-ANPASSUNGEN ========================================================= */ #imContent { margin-top: -75px !important; } #imHeader { z-index: 3000 !important; } /* ========================================================= HERVORGEHOBENE TEXTE ========================================================= */ .highlighted { position: relative; display: inline-block; font-family: Georgia, serif; font-size: 28pt; color: #000000; } .highlighted::before { content: ""; position: absolute; left: -2px; right: -2px; bottom: 0; height: 50%; background-color: rgba(50, 118, 114, 0.3); z-index: -1; } /* ========================================================= H1 INNERHALB BESTEHENDER HERO-BEREICHE ========================================================= */ .hero-h1 { margin: 0; padding: 0; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; } /* Health Coach Tino · Blogdesign 2 · 08.09.2026 Ersetzt den bisherigen tb-blog-Style vollständig. Website-Farben: Navy #0d1a27, Petrol #3a9d98, Mint #55c3bc. Bestehende Klassennamen bleiben kompatibel. */ body .tb-blog-lead, body .tb-blog-info, body .tb-blog-h2, body .tb-blog-h2-test, body .tb-blog-subline, body .tb-blog-text, body .tb-blog-card, body .tb-blog-card-title, body .tb-blog-info-title { --tb-navy: #0d1a27; --tb-heading: #102938; --tb-text: #284352; --tb-petrol: #3a9d98; --tb-mint: #55c3bc; --tb-link: #1c6d69; --tb-muted: #526873; --tb-line: #dbe6ea; box-sizing: border-box !important; font-family: inherit !important; letter-spacing: 0 !important; overflow-wrap: anywhere !important; } /* Grundschrift: Website-X5-Schrift erben (aktuell Lato). */ body .tb-blog-lead, body .tb-blog-info, body .tb-blog-text, body .tb-blog-card { display: block !important; color: var(--tb-text) !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.65 !important; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; } body .tb-blog-lead *, body .tb-blog-info *, body .tb-blog-text *, body .tb-blog-card *, body .tb-blog-subline * { color: inherit !important; font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; } /* Einstieg: die dunkle Farbwelt der Website als kompakter Akzent. */ body .tb-blog-lead { margin: 0 0 20px !important; padding: 24px 26px !important; border: 1px solid #203d49 !important; border-left: 5px solid var(--tb-mint) !important; border-radius: 16px !important; background: linear-gradient(120deg, #0d1a27 0%, #153440 100%) !important; color: #f4f7f8 !important; font-size: 19px !important; line-height: 1.6 !important; box-shadow: 0 8px 24px rgba(13,26,39,.08) !important; } /* Kurz erklärt: helle Mintfläche. */ body .tb-blog-info { margin: 18px 0 22px !important; padding: 20px 22px !important; border: 1px solid #cce5e1 !important; border-left: 5px solid var(--tb-petrol) !important; border-radius: 12px !important; background: #edf8f6 !important; } body .tb-blog-info-title { display: block !important; margin: 0 0 8px !important; color: var(--tb-heading) !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.3 !important; } body .tb-blog-h2, body .tb-blog-h2-test { display: block !important; margin: 28px 0 10px !important; padding: 2px 0 2px 13px !important; border-left: 4px solid var(--tb-petrol) !important; color: var(--tb-heading) !important; font-size: 27px !important; font-weight: 700 !important; line-height: 1.3 !important; scroll-margin-top: 100px !important; } body .tb-blog-h2 *, body .tb-blog-h2-test * { color: inherit !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; } body .tb-blog-subline { display: block !important; margin: -1px 0 16px !important; padding: 0 !important; color: var(--tb-muted) !important; font-size: 16px !important; font-style: italic !important; font-weight: 400 !important; line-height: 1.55 !important; } body .tb-blog-text { margin: 0 0 12px !important; padding: 0 !important; } body .tb-blog-card { margin: 10px 0 !important; padding: 18px 20px !important; border: 1px solid var(--tb-line) !important; border-radius: 12px !important; background: #ffffff !important; box-shadow: 0 3px 12px rgba(13,26,39,.035) !important; } body .tb-blog-card-title { display: block !important; margin: 0 0 7px !important; color: var(--tb-heading) !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.35 !important; } /* Alte Namen absichtlich beibehalten: kein Artikelumbau erforderlich. */ body .tb-blog-card-blue { border-top: 4px solid var(--tb-petrol) !important; background: #edf8f6 !important; } body .tb-blog-card-orange { border-top: 4px solid #284352 !important; background: #f7fafb !important; } /* Links bleiben auch innerhalb der Vererbungsregeln erkennbar. */ body :is(.tb-blog-text,.tb-blog-card,.tb-blog-info,.tb-blog-subline) a { color: var(--tb-link) !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px !important; } body :is(.tb-blog-text,.tb-blog-card,.tb-blog-info,.tb-blog-subline) a:hover { color: var(--tb-heading) !important; text-decoration-thickness: 2px !important; } body .tb-blog-lead a { color: #8ae0d7 !important; text-decoration: underline !important; text-underline-offset: 3px !important; } body .tb-blog-lead a:hover { color: #ffffff !important; } body :is(.tb-blog-lead,.tb-blog-text,.tb-blog-card,.tb-blog-info,.tb-blog-subline) a:focus-visible { outline: 2px solid currentColor !important; outline-offset: 4px !important; border-radius: 2px !important; } @media only screen and (max-width: 768px) { body .tb-blog-lead { margin-bottom:16px !important; padding:19px 20px !important; font-size:17px !important; border-radius:12px !important; } body .tb-blog-info { margin:16px 0 20px !important; padding:17px 18px !important; border-left-width:4px !important; } body .tb-blog-info-title { font-size:20px !important; margin-bottom:6px !important; } body .tb-blog-h2, body .tb-blog-h2-test { margin:24px 0 8px !important; padding-left:10px !important; font-size:23px !important; } body .tb-blog-subline { margin-bottom:13px !important; font-size:15px !important; } body .tb-blog-text { margin-bottom:10px !important; } body .tb-blog-card { margin:8px 0 !important; padding:16px 18px !important; } body .tb-blog-card-title { font-size:18px !important; } } @media only screen and (max-width: 480px) { body .tb-blog-lead { margin-bottom:14px !important; padding:17px 18px !important; font-size:16px !important; } body .tb-blog-info { margin:14px 0 18px !important; padding:15px 16px !important; } body .tb-blog-info-title { font-size:19px !important; } body .tb-blog-h2, body .tb-blog-h2-test { margin:22px 0 7px !important; font-size:21px !important; } body .tb-blog-subline { margin-bottom:12px !important; font-size:15px !important; } body .tb-blog-card { padding:15px 16px !important; } body .tb-blog-card-title { font-size:17px !important; } } /* assets/blog-v8.css */ .page-blog-index,.page-blog-article{background:#f5f9fa;color:#284755} .page-blog-index .site-header,.page-blog-article .site-header{background:#0d202c} .blog-index-hero,.blog-hero__inner{max-width:1100px;margin:auto;padding:70px 28px 50px} .blog-index-hero h1,.blog-hero h1{font-size:clamp(36px,5.8vw,64px);line-height:1.1;letter-spacing:-.035em;color:#143240;margin:20px 0 28px;text-wrap:balance} .blog-hero h1{font-size:clamp(32px,4.7vw,58px)} .blog-hero h1,.blog-card h2{overflow-wrap:anywhere;hyphens:auto} .blog-index-hero>p:last-child{max-width:700px;font-size:20px} .blog-eyebrow{font-size:12px;font-weight:700;color:#23827f;letter-spacing:.08em;text-transform:uppercase} .blog-index{max-width:1280px;margin:auto;padding:0 28px 90px} .blog-filters{display:none;grid-template-columns:1fr 1fr;gap:16px 24px;padding:24px;background:#e5f0f1;border-radius:18px} .blog-ready .blog-filters{display:grid}.blog-filters label{font-size:14px;font-weight:700;display:grid;gap:6px;min-width:0} .blog-filters input,.blog-filters select{width:100%;min-width:0;font:inherit;padding:12px 14px;color:#163541;border:1px solid #a6c8cb;border-radius:9px;background:#fff;min-height:46px} .blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:start}.blog-card{border-radius:18px;background:#fff;box-shadow:0 10px 30px #1d465110;overflow:hidden;border:1px solid #dde9eb;transition:box-shadow .25s,transform .25s} .blog-card[hidden]{display:none}.blog-card>a{display:block;color:inherit;text-decoration:none}.blog-card img{display:block;width:100%;aspect-ratio:1.6;object-fit:cover;height:auto;transition:transform .45s} .blog-card__copy{position:relative;margin:-20px 14px 0;padding:22px 15px 26px;background:#fff;border-radius:14px 14px 0 0}.blog-card h2{font-size:23px;line-height:1.25;color:#163541;margin:12px 0 16px}.blog-card p{font-size:15px}.blog-card .blog-eyebrow{font-size:11px}.blog-meta{color:#57707a;font-size:13px!important}.blog-card__read{display:block;padding-top:12px;color:#287f7a;font-weight:700;font-size:14px} .blog-card:hover{box-shadow:0 18px 38px #153e5020;transform:translateY(-3px)}.blog-card:hover img{transform:scale(1.025)} .blog-back{display:inline-block;font-weight:700;text-decoration:none} .blog-cover{width:min(100% - 56px,1100px);margin:0 auto;overflow:hidden;border-radius:24px;background:#e2ecee;max-height:580px}.blog-cover img{display:block;width:100%;height:auto;max-height:580px;object-fit:contain} .blog-reading{position:relative;width:min(100% - 56px,900px);margin:-30px auto 0;padding:clamp(24px,5vw,66px);border:1px solid #e1eaec;border-radius:22px;background:#fff;box-shadow:0 20px 60px #214c5510} body #imBlogPost.blog-body{width:100%;margin:0;padding:0;font-family:Lato,Arial,sans-serif;color:#284755;font-size:17px;line-height:1.75;overflow-wrap:break-word;text-align:left} body #imBlogPost.blog-body img{max-width:100%;height:auto}body #imBlogPost.blog-body h2,body #imBlogPost.blog-body h3{line-height:1.3;color:#143b48} .blog-gallery{display:grid;gap:20px;margin:32px 0}.blog-sources{border-top:1px solid #dce8e9;margin-top:40px;padding-top:24px}.blog-sources a{overflow-wrap:anywhere} .blog-bottom{max-width:900px;margin:32px auto 80px;padding:0 28px;display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap}.blog-bottom a{font-weight:700}.reading-progress{position:fixed;inset:0 0 auto;height:3px;z-index:110;background:#59c9bd;transform:scaleX(var(--read-progress,0));transform-origin:left;pointer-events:none} @media(max-width:1000px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){.blog-grid{grid-template-columns:1fr;gap:24px}.blog-filters{grid-template-columns:1fr;padding:18px}.blog-index-hero,.blog-hero__inner{padding:44px 20px 30px}.blog-index{padding:0 18px 60px}.blog-reading{width:calc(100% - 28px);padding:24px 20px;margin-top:-16px;border-radius:18px}.blog-cover{width:calc(100% - 28px);border-radius:18px}.blog-card__copy{margin-top:-16px}.blog-bottom{padding:0 20px}.blog-index-hero>p:last-child{font-size:18px}} @media(prefers-reduced-motion:reduce){.blog-card,.blog-card img{transition:none}.blog-card:hover,.blog-card:hover img{transform:none}} /* 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/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)}}