/* ========================================================================= LinguaMentor — Design System Deep Teal #0B6E64 · Sand #F7F4EF · Gold #C88A12 · Ink #0C1F26 Alle Abstände/Ränder als logische Eigenschaften -> funktioniert in RTL. ========================================================================= */ :root { --brand: #0B6E64; --brand-deep: #06413B; --brand-hover: #095B53; --brand-tint: #E7F3F0; --brand-tint-2: #D3E9E4; --accent: #C88A12; --accent-deep: #8A5D06; --accent-tint: #FBF1DC; --ink: #0C1F26; --ink-2: #24424C; --ink-soft: #536C76; --ink-faint: #8296A0; --bg: #FFFFFF; --sand: #F8F5F0; --sand-2: #F1ECE3; --line: #E5E1D8; --line-strong: #D3CDC0; --white: #FFFFFF; --radius-s: 10px; --radius: 16px; --radius-l: 24px; --radius-xl: 32px; --shadow-s: 0 1px 2px rgba(12, 31, 38, .06); --shadow-m: 0 6px 24px -8px rgba(12, 31, 38, .14); --shadow-l: 0 28px 60px -28px rgba(6, 65, 59, .38); --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-head: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --wrap: 1180px; --gap: clamp(20px, 3vw, 32px); --section-y: clamp(64px, 8vw, 116px); } /* Arabisch: eigene Schriftfamilien, etwas größere Grundschrift */ html[lang="ar"] { --font-body: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif; --font-head: "Cairo", "IBM Plex Sans Arabic", "Noto Kufi Arabic", "Geeza Pro", sans-serif; } /* ---------------------------------------------------------------- Reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: var(--ink-2); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Kein overflow am body: sonst wird er zu einem eigenen Scroll-Container und window.scrollTo / Ankersprünge greifen nicht mehr. Das seitliche Überstehen der Deko-Kreise klemmt bereits das ab. */ } html[lang="ar"] body { font-size: 18px; line-height: 1.9; } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-hover); } button { font: inherit; cursor: pointer; } ul, ol { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.15; margin: 0; letter-spacing: -.02em; font-weight: 800; } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 { letter-spacing: 0; line-height: 1.4; } h1 { font-size: clamp(34px, 5.2vw, 60px); } h2 { font-size: clamp(28px, 3.6vw, 44px); } h3 { font-size: clamp(19px, 1.6vw, 23px); font-weight: 700; } p { margin: 0; } ::selection { background: var(--brand-tint-2); color: var(--brand-deep); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ------------------------------------------------------------- Layout */ .wrap { width: min(100% - 2 * var(--gap), var(--wrap)); margin-inline: auto; } .section { padding-block: var(--section-y); } .section--sand { background: var(--sand); } .section--tint { background: linear-gradient(180deg, var(--brand-tint) 0%, #F3FAF8 100%); } .section--dark { background: var(--ink); color: #C9D8DD; } .section--dark h2, .section--dark h3 { color: var(--white); } /* Skip-Link: unsichtbar, aber ohne Offscreen-Positionierung. Ein inset-inline-start:-9999px würde in der arabischen RTL-Fassung 10.000 px Überbreite erzeugen und die Seite unbenutzbar machen. */ .skip, .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip:focus { position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 999; width: auto; height: auto; margin: 0; padding: 12px 20px; clip-path: none; background: var(--ink); color: #fff; border-radius: 0 0 var(--radius-s) 0; } /* --------------------------------------------------------- Typography */ .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin-bottom: 18px; } html[lang="ar"] .eyebrow { letter-spacing: 0; text-transform: none; font-size: 15px; } .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); border-radius: 2px; flex: none; } .section--dark .eyebrow { color: #7FCFC2; } .lead { font-size: clamp(17px, 1.35vw, 20px); color: var(--ink-soft); max-width: 62ch; } .section--dark .lead { color: #A9C0C7; } .head { max-width: 760px; margin-bottom: clamp(36px, 4vw, 56px); } .head .lead { margin-top: 18px; } .head--center { margin-inline: auto; text-align: center; } .head--center .lead { margin-inline: auto; } .head--center .eyebrow { justify-content: center; } /* ------------------------------------------------------------ Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border-radius: 999px; border: 1.5px solid transparent; font-family: var(--font-head); font-weight: 700; font-size: 16px; line-height: 1; text-align: center; transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease; white-space: nowrap; } .btn svg { width: 18px; height: 18px; flex: none; } html[dir="rtl"] .btn .arrow { transform: scaleX(-1); } .btn--primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-m); } .btn--primary:hover { background: var(--brand-hover); color: #fff; transform: translateY(-2px); } .btn--accent { background: var(--accent); color: #241703; } .btn--accent:hover { background: #B87C0C; color: #241703; transform: translateY(-2px); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn--ghost:hover { border-color: var(--brand); color: var(--brand); background: #fff; } .btn--light { background: #fff; color: var(--brand-deep); } .btn--light:hover { background: #fff; color: var(--brand-deep); transform: translateY(-2px); } .btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); } .btn--outline-light:hover { color: #fff; border-color: #fff; background: rgba(255,255,255,.08); } .btn--wa { background: #25D366; color: #06301A; } .btn--wa:hover { background: #1FBA5A; color: #06301A; transform: translateY(-2px); } .btn--sm { padding: 11px 18px; font-size: 14.5px; } .btn--block { width: 100%; } .btns { display: flex; flex-wrap: wrap; gap: 14px; } /* ------------------------------------------------------------- Header */ .header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; } .header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 4px 20px -12px rgba(12,31,38,.25); } .header__bar { display: flex; align-items: center; gap: 18px; min-height: 76px; } .logo { display: inline-flex; align-items: center; gap: 11px; flex: none; } .logo__mark { width: 38px; height: 38px; flex: none; } .logo__text { font-family: var(--font-head); font-weight: 800; font-size: 21px; color: var(--ink); letter-spacing: -.03em; line-height: 1; } .logo__text i { font-style: normal; color: var(--brand); } html[lang="ar"] .logo__text { letter-spacing: 0; } .nav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; } .nav a { padding: 9px 13px; border-radius: 999px; color: var(--ink-2); font-size: 15.5px; font-weight: 600; white-space: nowrap; transition: background .16s ease, color .16s ease; } .nav a:hover { background: var(--sand-2); color: var(--ink); } .header__actions { display: flex; align-items: center; gap: 12px; flex: none; } /* Sprachumschalter */ .lang { position: relative; } .lang__btn { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1.5px solid var(--line-strong); border-radius: 999px; padding: 9px 14px; font-size: 14.5px; font-weight: 700; color: var(--ink-2); font-family: var(--font-head); } .lang__btn:hover { border-color: var(--brand); color: var(--brand); } .lang__btn svg { width: 15px; height: 15px; } .lang__menu { position: absolute; inset-inline-end: 0; top: calc(100% + 10px); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-m); padding: 7px; min-width: 190px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: translateY(0); } .lang__menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; border-radius: var(--radius-s); color: var(--ink-2); font-weight: 600; font-size: 15px; } .lang__menu a:hover { background: var(--sand); color: var(--ink); } .lang__menu a[aria-current="true"] { color: var(--brand); background: var(--brand-tint); } .lang__menu span { font-size: 12.5px; color: var(--ink-faint); font-weight: 700; letter-spacing: .06em; } .burger { display: none; background: transparent; border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 10px; } .burger svg { width: 20px; height: 20px; stroke: var(--ink); } /* Mobile-Navigation */ .mnav { display: none; border-top: 1px solid var(--line); background: #fff; padding: 14px var(--gap) 22px; } .mnav.is-open { display: block; } .mnav a { display: block; padding: 13px 4px; font-size: 17px; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--sand-2); } .mnav .btn { margin-top: 16px; } /* --------------------------------------------------------------- Hero */ .hero { position: relative; overflow: hidden; background: var(--bg); } .hero::before { content: ""; position: absolute; inset-block-start: -320px; inset-inline-end: -220px; width: 780px; height: 780px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(11,110,100,.13), rgba(11,110,100,0) 66%); pointer-events: none; } .hero::after { content: ""; position: absolute; inset-block-end: -260px; inset-inline-start: -180px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(200,138,18,.12), rgba(200,138,18,0) 66%); pointer-events: none; } .hero__inner { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 5vw, 68px); align-items: center; padding-block: clamp(56px, 7vw, 96px) clamp(56px, 7vw, 92px); } .hero h1 { margin-bottom: 22px; } .hero h1 em { font-style: normal; color: var(--brand); } .hero .lead { margin-bottom: 30px; } .hero .btns { margin-bottom: 32px; } .chips { display: flex; flex-wrap: wrap; gap: 9px; } .chip { display: inline-flex; align-items: center; gap: 8px; background: var(--sand); border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); } .chip svg { width: 15px; height: 15px; color: var(--brand); flex: none; } /* Hero-Karte */ .hero__card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-l); padding: clamp(24px, 2.6vw, 34px); position: relative; } .hero__card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 34px; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--brand), var(--accent)); } .hero__card h3 { margin-bottom: 4px; } .hero__card .muted { font-size: 14.5px; color: var(--ink-faint); } .factlist { margin-top: 22px; display: grid; gap: 2px; } .fact { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px dashed var(--line); } .fact:last-child { border-bottom: 0; } .fact dt { font-size: 15px; color: var(--ink-soft); } .fact dd { margin: 0; font-family: var(--font-head); font-weight: 800; color: var(--ink); font-size: 17px; text-align: end; } .fact dd small { display: block; font-weight: 600; font-size: 12.5px; color: var(--ink-faint); letter-spacing: 0; } .hero__card .btn { margin-top: 22px; } .hero__note { margin-top: 14px; font-size: 13.5px; color: var(--ink-faint); text-align: center; } /* Hero-Karte: alle drei Kurse im Überblick, jede Zeile führt zur Buchung */ .minicourses { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; } .minicourse { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--sand); transition: border-color .15s ease, background .15s ease, transform .15s ease; } .minicourse:hover { border-color: var(--brand); background: var(--brand-tint); transform: translateY(-1px); } .minicourse__txt { flex: 1; min-width: 0; display: grid; gap: 1px; } .minicourse__txt strong { font-size: 15px; color: var(--ink); line-height: 1.25; } .minicourse__txt small { font-size: 12.5px; color: var(--ink-soft); line-height: 1.35; } .minicourse__price { font-family: var(--font-head); font-weight: 800; font-size: 16px; color: var(--brand); white-space: nowrap; } .minicourse__go { display: flex; color: var(--accent); flex: none; } .minicourse__go svg { width: 16px; height: 16px; } html[dir="rtl"] .minicourse__go svg { transform: scaleX(-1); } /* ------------------------------------------------- Hero mit Foto */ /* Das Bild liegt HINTER dem Text. Damit die Schrift in allen drei Sprachen lesbar bleibt, liegt ein Verlauf darüber, der auf der Textseite fast deckend ist und zur Bildseite hin aufklart — in RTL spiegelverkehrt. */ .hero--photo { background: var(--ink); } .hero--photo::before, .hero--photo::after { display: none; } .hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; display: block; } .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(6, 22, 27, .96) 0%, rgba(6, 22, 27, .90) 30%, rgba(6, 22, 27, .58) 56%, rgba(6, 22, 27, .24) 78%, rgba(6, 22, 27, .18) 100%); } html[dir="rtl"] .hero__bg::after { background: linear-gradient(to left, rgba(6, 22, 27, .96) 0%, rgba(6, 22, 27, .90) 30%, rgba(6, 22, 27, .58) 56%, rgba(6, 22, 27, .24) 78%, rgba(6, 22, 27, .18) 100%); } .hero--photo .hero__inner { position: relative; z-index: 1; } .hero--photo h1 { color: #fff; } .hero--photo h1 em { color: #7FCFC2; } .hero--photo .eyebrow { color: #7FCFC2; } .hero--photo .lead { color: rgba(255, 255, 255, .88); } .hero--photo .chip { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .24); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .hero--photo .chip svg { color: #7FCFC2; } .hero--photo .btn--primary { background: var(--accent); color: #241703; box-shadow: 0 12px 34px -12px rgba(0,0,0,.6); } .hero--photo .btn--primary:hover { background: #DD9A18; color: #241703; } .hero--photo .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .45); } .hero--photo .btn--ghost:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .10); } .hero--photo .hero__card { box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .65); } .hero--photo .hero__note { color: var(--ink-faint); } /* Einspaltig läuft der Text über die volle Breite — dann muss der Verlauf von oben nach unten laufen und das Foto zur Textur zurücktreten. */ @media (max-width: 1000px) { .hero__bg::after, html[dir="rtl"] .hero__bg::after { background: linear-gradient(to bottom, rgba(6, 22, 27, .93) 0%, rgba(6, 22, 27, .88) 40%, rgba(6, 22, 27, .70) 100%); } .hero__bg img { object-position: 62% 38%; } /* Chips bekommen dann eigenen Kontrast, weil das Foto unten durchkommt. */ .hero--photo .chip { background: rgba(6, 22, 27, .55); border-color: rgba(255, 255, 255, .3); } } /* ------------------------------------------------------------ Logobar */ .marquee { border-block: 1px solid var(--line); background: var(--sand); } .marquee__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 34px; padding-block: 22px; } .marquee span { font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 10px; } .marquee span svg { width: 17px; height: 17px; color: var(--brand); flex: none; } /* --------------------------------------------------------------- Grid */ .grid { display: grid; gap: clamp(18px, 2vw, 26px); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } /* -------------------------------------------------------------- Cards */ .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(24px, 2.4vw, 32px); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; display: flex; flex-direction: column; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--line-strong); } .card h3 { margin-bottom: 10px; } .card p { color: var(--ink-soft); font-size: 16px; } .icon { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); margin-bottom: 20px; flex: none; } .icon svg { width: 25px; height: 25px; } .icon--accent { background: var(--accent-tint); color: var(--accent-deep); } .ticks { margin-top: 18px; display: grid; gap: 10px; } .ticks li { display: flex; gap: 11px; font-size: 15.5px; color: var(--ink-2); align-items: flex-start; } .ticks li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: var(--brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B6E64' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat; } .section--dark .ticks li { color: #C9D8DD; } /* Problem-Sektion */ .split { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(32px, 5vw, 70px); align-items: center; } .stack { display: grid; gap: 18px; } .line-item { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; } .line-item__no { font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--brand); background: var(--brand-tint); width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; } .line-item h3 { font-size: 18px; margin-bottom: 5px; } .line-item p { font-size: 15.5px; color: var(--ink-soft); } /* Kurskarten */ .course { position: relative; } .course--featured { border-color: var(--brand); box-shadow: var(--shadow-m); } .course__tag { position: absolute; inset-block-start: -13px; inset-inline-start: 28px; background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; } html[lang="ar"] .course__tag { text-transform: none; letter-spacing: 0; } .course__level { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); background: var(--accent-tint); padding: 5px 11px; border-radius: 7px; margin-bottom: 16px; } html[lang="ar"] .course__level { text-transform: none; letter-spacing: 0; } .course .ticks { flex: 1; } .course__price { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .course__price b { font-family: var(--font-head); font-size: 30px; color: var(--ink); line-height: 1; font-weight: 800; } .course__price span { font-size: 14px; color: var(--ink-faint); display: block; margin-top: 6px; } .course .btn { margin-top: 20px; } /* Schritte */ .steps { counter-reset: s; display: grid; gap: clamp(18px, 2vw, 24px); grid-template-columns: repeat(4, 1fr); } .step { position: relative; padding-top: 30px; } .step::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-family: var(--font-head); font-weight: 800; font-size: 14px; letter-spacing: .1em; color: var(--accent); position: absolute; inset-block-start: 0; inset-inline-start: 0; } .step::after { content: ""; position: absolute; inset-block-start: 22px; inset-inline-start: 0; right: 0; left: 0; height: 1px; background: var(--line); } .step h3 { font-size: 18.5px; margin-bottom: 8px; } .step p { font-size: 15.5px; color: var(--ink-soft); } .section--dark .step p { color: #A9C0C7; } .section--dark .step::after { background: rgba(255,255,255,.16); } /* Team */ .person { text-align: start; } .person__avatar { width: 74px; height: 74px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(140deg, var(--brand), var(--brand-deep)); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 25px; letter-spacing: -.02em; margin-bottom: 20px; } .person--accent .person__avatar { background: linear-gradient(140deg, var(--accent), var(--accent-deep)); } .person h3 { margin-bottom: 3px; } .person__role { font-size: 14.5px; font-weight: 700; color: var(--brand); margin-bottom: 14px; } .person--accent .person__role { color: var(--accent-deep); } .person p { font-size: 15.5px; } .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .tags li { font-size: 13px; font-weight: 600; color: var(--ink-soft); background: var(--sand); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; } /* Bildband */ .shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.4vw, 30px); } .shot { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; } .shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--sand-2); } .shot figcaption { padding: 22px clamp(20px, 2vw, 26px) 26px; } .shot figcaption strong { display: block; font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--ink); margin-bottom: 7px; } .shot figcaption span { font-size: 15.5px; color: var(--ink-soft); } .shots__note { margin-top: 22px; text-align: center; font-size: 13.5px; color: var(--ink-faint); } /* FAQ */ .faq { max-width: 860px; margin-inline: auto; display: grid; gap: 12px; } .faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 24px; transition: border-color .2s ease, box-shadow .2s ease; } .faq details[open] { border-color: var(--brand); box-shadow: var(--shadow-s); } .faq summary { list-style: none; cursor: pointer; padding: 20px 0; font-family: var(--font-head); font-weight: 700; font-size: 17.5px; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 18px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--sand-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C1F26' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); background-size: 12px; background-position: center; background-repeat: no-repeat; transition: transform .2s ease; } .faq details[open] summary::after { transform: rotate(45deg); } .faq .answer { padding-bottom: 22px; color: var(--ink-soft); font-size: 16px; max-width: 68ch; } .faq .answer p + p { margin-top: 12px; } /* CTA-Band */ .cta-band { background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 58%, #0E8377 100%); color: #fff; border-radius: var(--radius-xl); padding: clamp(34px, 4.6vw, 62px); display: grid; grid-template-columns: 1.25fr .75fr; gap: 34px; align-items: center; position: relative; overflow: hidden; } .cta-band::after { content: ""; position: absolute; inset-block-start: -110px; inset-inline-end: -110px; width: 380px; height: 380px; border-radius: 50%; background: rgba(255,255,255,.07); } .cta-band h2 { color: #fff; margin-bottom: 14px; } .cta-band p { color: rgba(255,255,255,.86); font-size: 17.5px; max-width: 54ch; } .cta-band .btns { position: relative; justify-content: flex-end; } html[dir="rtl"] .cta-band .btns { justify-content: flex-start; } /* -------------------------------------------------------------- Form */ .contact-grid { display: grid; grid-template-columns: 1fr .78fr; gap: clamp(28px, 4vw, 56px); align-items: start; } .form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(26px, 3vw, 40px); box-shadow: var(--shadow-m); } .field { margin-bottom: 18px; } .field label { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 8px; } .field .req { color: #B4451F; } .field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--sand); border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 15px; transition: border-color .16s ease, background .16s ease; } .field textarea { min-height: 118px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); background: #fff; } .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23536C76' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 17px; background-position: right 15px center; padding-inline-end: 44px; } html[dir="rtl"] .field select { background-position: left 15px center; padding-inline-end: 15px; padding-inline-start: 44px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .cert-msg { background: var(--brand-tint); border-inline-start: 3px solid var(--brand); border-radius: 0 var(--radius-s) var(--radius-s) 0; padding: 13px 17px; margin: -4px 0 18px; font-size: 15px; line-height: 1.65; color: var(--brand-deep); } .cert-msg.is-warn { background: var(--accent-tint); border-inline-start-color: var(--accent); color: var(--accent-deep); } .consent { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0; } .consent input { width: 19px; height: 19px; margin-top: 3px; flex: none; accent-color: var(--brand); } .consent label { font-size: 14px; color: var(--ink-soft); font-weight: 500; line-height: 1.6; } .form-note { margin-top: 16px; font-size: 13.5px; color: var(--ink-faint); text-align: center; } .form-status { display: none; margin-top: 18px; padding: 14px 18px; border-radius: 12px; font-size: 15px; background: var(--brand-tint); color: var(--brand-deep); border: 1px solid var(--brand-tint-2); } .form-status.is-visible { display: block; } .form-status.is-error { background: #FDECE7; color: #8B2F10; border-color: #F6D2C6; } .contact-side { display: grid; gap: 16px; } .contact-item { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; } .contact-item .icon { width: 44px; height: 44px; margin-bottom: 0; border-radius: 13px; } .contact-item .icon svg { width: 21px; height: 21px; } .contact-item strong { display: block; font-family: var(--font-head); font-size: 16.5px; color: var(--ink); margin-bottom: 4px; } .contact-item p, .contact-item a { font-size: 15.5px; color: var(--ink-soft); } .contact-item a { font-weight: 600; color: var(--brand); } /* ------------------------------------------------------------- Footer */ /* Unten viel Luft, damit der schwebende WhatsApp-Knopf die letzte Zeile (Sprachumschalter) nicht verdeckt – er sitzt fix in der Ecke des Fensters. */ .footer { background: var(--ink); color: #93A9B1; padding-block: clamp(52px, 6vw, 76px) 96px; } .footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; } .footer .logo__text { color: #fff; } .footer .logo__text i { color: #7FCFC2; } .footer__about { margin-top: 18px; font-size: 15px; max-width: 34ch; } .footer h4 { color: #fff; font-size: 15px; margin-bottom: 16px; letter-spacing: .02em; } .footer ul { display: grid; gap: 11px; } .footer a { color: #93A9B1; font-size: 15px; } .footer a:hover { color: #fff; } .footer__bottom { margin-top: 46px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: space-between; font-size: 14px; } .footer__langs { display: flex; gap: 8px; } .footer__langs a { border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 5px 13px; font-size: 13.5px; font-weight: 600; } .footer__langs a[aria-current="true"] { background: rgba(255,255,255,.12); color: #fff; } /* Floating WhatsApp */ .fab { position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px -8px rgba(37,211,102,.6); transition: transform .2s ease; } .fab:hover { transform: scale(1.07); color: #fff; } .fab svg { width: 29px; height: 29px; } /* ---------------------------------------------------- Buchungsstrecke */ .bk { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 96px); } .bk__wrap { max-width: 720px; margin-inline: auto; } .bk h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 16px; } .bk h2 { font-size: clamp(20px, 2vw, 24px); margin: 36px 0 14px; } .bk-picks { display: grid; gap: 12px; } .bk-pick { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 16px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 18px 22px; transition: border-color .15s ease, transform .15s ease; } .bk-pick:hover { border-color: var(--brand); transform: translateY(-2px); } .bk-pick__lvl { grid-column: 1 / -1; font-size: 12.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-deep); } html[lang="ar"] .bk-pick__lvl { text-transform: none; letter-spacing: 0; } .bk-pick strong { font-family: var(--font-head); font-size: 18px; color: var(--ink); } .bk-pick__p { font-family: var(--font-head); font-weight: 800; font-size: 20px; color: var(--brand); } .bk-sum { margin: 0 0 8px; display: grid; gap: 0; } .bk-sum > div { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px dashed var(--line); } .bk-sum dt { color: var(--ink-soft); font-size: 15.5px; } .bk-sum dd { margin: 0; font-weight: 600; color: var(--ink); text-align: end; } .bk-sum__total { border-bottom: 0 !important; padding-top: 16px !important; } .bk-sum__total dt { font-weight: 700; color: var(--ink); font-size: 17px; } .bk-sum__total dd { font-family: var(--font-head); font-weight: 800; font-size: 26px; color: var(--brand); } .bk-vat { font-size: 13.5px; color: var(--ink-faint); margin-bottom: 26px; } .bk-level { margin-bottom: 6px; } .bk-hint { font-size: 13.5px; color: var(--ink-faint); margin-top: 7px; } .bk-pay { margin-top: 22px; font-size: 17px; padding-block: 18px; } .bk-pay.is-off { opacity: .45; pointer-events: none; } .bk-pay span { font-weight: 600; opacity: .85; } .bk-note { margin-top: 12px; font-size: 13.5px; color: var(--ink-faint); text-align: center; } .bk-note.is-warn { color: var(--accent-deep); background: var(--accent-tint); border-radius: var(--radius-s); padding: 12px 16px; font-size: 15px; } .bk-back { margin-top: 20px; text-align: center; font-size: 15px; } .bk-help { margin-top: 40px; background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 24px 28px; } .bk-help h3 { font-size: 18px; margin-bottom: 6px; } .bk-help p { font-size: 15.5px; color: var(--ink-soft); margin-bottom: 16px; } /* --------------------------------------------------------- Rechtstext */ .legal { padding-block: clamp(48px, 6vw, 84px); } .legal__inner { max-width: 780px; margin-inline: auto; } .legal h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 28px; } .legal h2 { font-size: clamp(21px, 2vw, 26px); margin: 40px 0 14px; } .legal h3 { font-size: 18px; margin: 26px 0 10px; } .legal p, .legal li { font-size: 16.5px; color: var(--ink-2); } .legal p + p { margin-top: 14px; } .legal ul { list-style: disc; padding-inline-start: 24px; margin: 12px 0; display: grid; gap: 8px; } .legal address { font-style: normal; margin-top: 12px; line-height: 1.9; } .legal .todo { background: var(--accent-tint); border: 1px dashed var(--accent); border-radius: 10px; padding: 3px 9px; font-size: 14.5px; font-weight: 700; color: var(--accent-deep); } .legal__back { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 26px; font-size: 15px; white-space: nowrap; } /* Pfeil zeigt zurück, also gegen die Leserichtung */ .legal__back svg { width: 18px; height: 18px; flex: none; transform: scaleX(-1); } html[dir="rtl"] .legal__back svg { transform: none; } /* ------------------------------------------------------- Sprachweiche */ .picker { min-height: 100vh; display: grid; place-items: center; background: var(--sand); padding: var(--gap); } .picker__box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-l); padding: clamp(30px, 5vw, 54px); max-width: 520px; width: 100%; text-align: center; } .picker .logo { justify-content: center; margin-bottom: 26px; } .picker h1 { font-size: 26px; margin-bottom: 10px; } .picker p { color: var(--ink-soft); font-size: 16px; margin-bottom: 28px; } .picker__links { display: grid; gap: 12px; } .picker__links a { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1.5px solid var(--line); border-radius: 14px; padding: 16px 20px; font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--ink); transition: border-color .16s ease, background .16s ease; } .picker__links a:hover { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-deep); } .picker__links small { font-size: 13px; color: var(--ink-faint); font-weight: 600; letter-spacing: .06em; } /* ------------------------------------------------------------ Reveals */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* ---------------------------------------------------------- Responsiv */ @media (max-width: 1080px) { .footer__top { grid-template-columns: 1fr 1fr; gap: 34px; } .steps { grid-template-columns: repeat(2, 1fr); } } /* Kopfzeile klappt früher zusammen als das Seitenlayout: sechs Navigationspunkte plus Sprachumschalter plus CTA passen unterhalb von 1080px nicht mehr in eine Zeile — am engsten wird es in der englischen Fassung („Who it's for", „How it works"). Der CTA wandert dann ins Burger-Menü. */ @media (max-width: 1080px) { .nav { display: none; } .burger { display: inline-grid; place-items: center; } .header__bar { min-height: 68px; } .header__actions .btn { display: none; } } /* Das Seitenlayout selbst bleibt bis 1000px zweispaltig. Knapp darunter wird die englische Hero-Karte neben dem Text zu breit. */ @media (max-width: 1000px) { .hero__inner { grid-template-columns: 1fr; } .hero__card { max-width: 520px; } .split { grid-template-columns: 1fr; } .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } .contact-grid { grid-template-columns: 1fr; } .cta-band { grid-template-columns: 1fr; } .cta-band .btns { justify-content: flex-start; } html[dir="rtl"] .cta-band .btns { justify-content: flex-start; } } @media (max-width: 860px) { .shots { grid-template-columns: 1fr; } } @media (max-width: 680px) { body { font-size: 16.5px; } .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } .footer__top { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } .btn { width: 100%; } .btns { flex-direction: column; align-items: stretch; } .lang__btn { padding: 9px 11px; } .marquee__inner { justify-content: flex-start; gap: 14px 22px; } .marquee span { font-size: 13px; } } /* Sehr schmale Geräte: Kopfzeile passt sonst nicht mehr nebeneinander (Logo + Sprachumschalter + Menüknopf überschreiten die Zeilenbreite). */ @media (max-width: 400px) { .header__bar { gap: 10px; } .logo__mark { width: 32px; height: 32px; } .logo__text { font-size: 17.5px; } .lang__btn { padding: 9px 10px; gap: 4px; } .lang__btn > span { display: none; } .burger { padding: 9px; } } /* ------------------------------------------------------------- Print */ @media print { .header, .fab, .mnav, .cta-band, .btn { display: none !important; } body { font-size: 12pt; } .section { padding-block: 18pt; } }