/* * wiprax.css – Shared Stylesheet * Wiprax GmbH | wiprax.de * Farbkonzept: Blau-primär (Stand 2026, angeglichen an lp.wiprax.de / Ablefy) * Hinweis: Orange (#FF9900) wird nur noch selten als Akzent genutzt. * Die Token-Namen --c-orange* bleiben aus Kompatibilitätsgründen erhalten, * tragen jetzt aber die primären Blauwerte. */ /* ============================================================ SCHRIFT: MONTSERRAT, SELBST GEHOSTET (28.08.2026) Vorher wurden Inter + Montserrat von fonts.googleapis.com geladen. Das ist der dynamische Google-Fonts-Abruf, den das LG Muenchen I am 20.01.2022 (Az. 3 O 17493/20) als DSGVO-Verstoss gewertet hat, weil dabei die IP-Adresse des Besuchers an Google uebertragen wird. Jetzt liegen die Dateien im Projekt - es geht KEINE Anfrage mehr an Google. Montserrat ist bei Google inzwischen eine VARIABLE FONT: zwei Dateien (latin + latin-ext) decken alle Gewichte 400-800 ab. Deshalb "font-weight: 400 800" im @font-face - der Browser interpoliert daraus jeden Schnitt. Lizenz: SIL Open Font License 1.1, Volltext in assets/fonts/OFL.txt. font-display:swap -> Text ist sofort lesbar, kein unsichtbarer Zeitraum beim Laden. ============================================================ */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/montserrat-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/montserrat-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ CSS CUSTOM PROPERTIES (Brand Tokens) ============================================================ */ :root { /* Primärfarbe Blau (CTAs, Links, Akzente) */ --c-orange: #1E84D7; /* Primär-Blau (gefüllte Buttons) */ --c-orange-sub: #D3EAFD; /* dezenter Blau-Hintergrund (Icon-Chips, Callouts) */ --c-orange-pre: #1670BD; /* Hover / dunkleres Blau */ /* Blau (weitere Abstufungen) */ --c-blue: #2196F3; /* helles Blau (Outline-Buttons, sekundäre Links) */ --c-blue-sec: #1E84D7; /* Sekundär-Blau */ --c-blue-bg: #D3EAFD; /* Blau-Hintergrund */ /* Akzent-Orange – nur sparsam einsetzen (z. B. Kontakt-Chip) */ --c-accent-orange: #FF9900; --c-accent-orange-sub: #FFE0B3; --c-accent-orange-pre: #FFB000; /* Text */ --c-text: #252525; --c-text-sec: #888888; /* UI */ --c-border: #e6e6e6; --c-box-bg: #FAFAFA; --c-white: #FFFFFF; --c-black: #000000; /* Erfolg / Garantie (ehem. Grün – jetzt Wiprax-Blau, Grün ist keine Markenfarbe) */ --c-green: #1E84D7; --c-green-bg: #D3EAFD; --c-green-border:#1E84D7; } /* ============================================================ BASE RESETS & TYPOGRAPHY ============================================================ */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: 'Montserrat', system-ui, -apple-system, sans-serif; color: var(--c-text); background-color: var(--c-white); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ============================================================ SCHRIFTSCHNITTE (ergaenzt 28.08.2026) Das Markup benutzt site-weit font-500/600/700/800 (1124 Stellen in 22 Dateien). Das sind KEINE Tailwind-Klassen - Tailwind heisst font-medium/semibold/bold/extrabold - sie erzeugten also kein CSS. Zusammen mit dem Tailwind-Preflight, der h1..h6 { font-weight: inherit } setzt, rendete JEDES fett gemeinte Element in normaler Staerke. Diese vier Zeilen machen die vorhandenen Klassen wirksam, ohne eine einzige HTML-Datei anzufassen. Loeschen = vollstaendiger Rueckbau. Siehe UEBERGABE Abschnitt 29. ============================================================ */ .font-500 { font-weight: 500; } .font-600 { font-weight: 600; } .font-700 { font-weight: 700; } .font-800 { font-weight: 800; } /* Buttons, Badges, Nav-CTAs etc. mit .font-heading bleiben Montserrat (wie Referenz) */ .font-heading { font-family: 'Montserrat', system-ui, -apple-system, sans-serif; } /* Überschriften: seit 28.08.2026 ebenfalls MONTSERRAT. Vorher stand hier Inter (angeglichen an lp.wiprax.de / Ablefy, siehe UEBERGABE Abschnitt 2). Inter wurde auf Kundenwunsch entfernt; die Regel MUSS mit weg, sonst fielen die Überschriften auf system-ui zurück statt auf Montserrat. Die Selektoren bleiben stehen, damit die Schrift an einer Stelle steuerbar ist. */ h1, h2, h3, h4, h5, h1.font-heading, h2.font-heading, h3.font-heading, h4.font-heading, h5.font-heading { font-family: 'Montserrat', system-ui, -apple-system, sans-serif; } /* ============================================================ SCROLL REVEAL ============================================================ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.55s ease, transform 0.55s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* ============================================================ CARD HOVER EFFECT ============================================================ */ .card-hover { transition: box-shadow 0.25s ease, transform 0.25s ease; } .card-hover:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10); transform: translateY(-4px); } /* ============================================================ NAVBAR ============================================================ */ #navbar { transition: box-shadow 0.3s ease; } #navbar.scrolled { box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08); } /* Active nav link */ #navbar a.nav-link.active { color: var(--c-orange); } /* ============================================================ MOBILE MENU ============================================================ */ #mobile-menu { transform: translateX(100%); opacity: 0; pointer-events: none; transition: transform 0.3s ease, opacity 0.3s ease; } #mobile-menu.open { transform: translateX(0); opacity: 1; pointer-events: auto; } /* ============================================================ FAQ ACCORDION ============================================================ */ .faq-content { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .faq-content.open { max-height: 800px; } .faq-chevron { transition: transform 0.3s ease; flex-shrink: 0; } .faq-chevron.open { transform: rotate(180deg); } .faq-trigger { cursor: pointer; width: 100%; text-align: left; background: none; border: none; padding: 0; } /* ============================================================ WAVE SECTION DIVIDERS ============================================================ */ .wave-bottom { display: block; width: 100%; overflow: hidden; line-height: 0; margin-top: -1px; } .wave-bottom svg { display: block; width: 100%; } /* ============================================================ TEXT GRADIENT (Orange) ============================================================ */ .text-orange-gradient { background: linear-gradient(90deg, var(--c-orange), var(--c-orange-pre)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================================ BUTTON BASE STYLES ============================================================ */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background-color: var(--c-orange); color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1rem; padding: 0.875rem 2rem; border-radius: 0.625rem; border: none; cursor: pointer; text-decoration: none; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 14px rgba(30, 132, 215, 0.30); } .btn-primary:hover { background-color: var(--c-orange-pre); transform: scale(1.02); box-shadow: 0 6px 20px rgba(30, 132, 215, 0.40); } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background-color: transparent; color: var(--c-orange); font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1rem; padding: 0.875rem 2rem; border-radius: 0.625rem; border: 2px solid var(--c-orange); cursor: pointer; text-decoration: none; transition: background-color 0.2s ease, transform 0.2s ease; } .btn-ghost:hover { background-color: var(--c-orange-sub); transform: scale(1.01); } /* ============================================================ SECTION ALTERNATION HELPER ============================================================ */ .section-white { background-color: var(--c-white); } .section-fafafa { background-color: var(--c-box-bg); } .section-blue { background-color: var(--c-blue-bg); } .section-orange { background-color: var(--c-orange); } .section-dark { background-color: #252525; } /* ============================================================ TESTIMONIAL CARD ============================================================ */ .testimonial-card { background: var(--c-white); border-left: 4px solid var(--c-orange); border-radius: 0.75rem; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } /* ============================================================ PRICE DISPLAY ============================================================ */ .price-old { color: var(--c-text-sec); text-decoration: line-through; font-size: 0.95rem; } .price-new { color: var(--c-orange); font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 2rem; line-height: 1; } /* ============================================================ BADGE / PILL ============================================================ */ .badge-orange { display: inline-block; background-color: var(--c-orange); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 0.2rem 0.65rem; border-radius: 9999px; } .badge-blue { display: inline-block; background-color: var(--c-blue-bg); color: var(--c-blue); font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.65rem; border-radius: 9999px; } .badge-green { display: inline-block; background-color: var(--c-green-bg); color: #1670BD; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.65rem; border-radius: 9999px; } /* ============================================================ CURRICULUM / ACCORDION TABS ============================================================ */ .curriculum-header { background: var(--c-box-bg); padding: 1rem 1.25rem; cursor: pointer; transition: background 0.2s; } .curriculum-header.active, .curriculum-header:hover { background: var(--c-orange-sub); color: var(--c-orange); } /* ============================================================ FOOTER LINK STYLES ============================================================ */ .footer-link { color: #9ca3af; text-decoration: none; font-size: 0.875rem; transition: color 0.2s ease; } .footer-link:hover { color: var(--c-orange); } /* ============================================================ UTILITY: visually hidden (accessibility) ============================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ SPAM-SCHUTZ E-MAIL Die Adresse steht NICHT als Text im HTML, sondern wird aus CSS-Pseudo-Elementen zusammengesetzt. Verwendung: (inline im Fliesstext)

(eigenstaendig) Das Element muss LEER bleiben. Nicht markier- und nicht kopierbar. Achtung: Screenreader geben Pseudo-Element-Inhalte nicht zuverlaessig aus – nicht dort einsetzen, wo die Adresse rechtlich zwingend zugaenglich sein muss (Impressum, Widerrufsbelehrung). ============================================================ */ .email-mask { -webkit-user-select: none; user-select: none; cursor: default; } .email-mask::before { content: "info"; } .email-mask::after { content: "\0040 wiprax\002E de"; } /* ============================================================ MOBILE / TABLET (bis 1023 px) Lange deutsche Komposita ("IHK-Pruefungsvorbereitungskurse", "Finanzanlagenvermittlungsverordnung") sind auf schmalen Displays breiter als ihre Spalte und erzeugten horizontales Scrollen der ganzen Seite. hyphens:auto trennt sauber nach deutschen Regeln (setzt lang="de" im voraus – steht auf allen Seiten), overflow-wrap ist die Reissleine fuer Woerter ohne Trennstelle. Ab 1024 px bewusst AUS, damit Desktop-Ueberschriften ungetrennt bleiben. ============================================================ */ @media (max-width: 1023px) { /* Beide Eigenschaften vererben sich – einmal auf body genuegt und erfasst auch Text in
/ (z. B. Kennzahlen-Kacheln). Bewusst "anywhere" und NICHT "break-word": nur "anywhere" senkt auch die Min-Content-Breite. Das ist noetig, weil Flex- und Grid-Kinder (min-width:auto) sich sonst weigern, unter die Breite ihres laengsten Wortes zu schrumpfen, und die ganze Seite aufschieben. Ueber "min-width:0" waere das auch zu loesen, aber das quetscht die Icon-Spalten der Hinweisboxen zusammen. Getrennt wird bevorzugt an den Silbenstellen von hyphens:auto; "anywhere" greift nur, wenn es keine gibt. */ body { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; } } /* ============================================================ TOUCH-ZIELE (nur Zeigegeraete ohne feinen Cursor) Footer-Links waren 17 px hoch bei 11 px Abstand; der Hamburger 40 x 40 px. Beides unter der 44-px-Empfehlung fuer Fingerbedienung. Nur ueber (pointer: coarse), damit sich das Desktop-Layout und die Footer-Zeilenabstaende mit Maus nicht veraendern. ============================================================ */ @media (pointer: coarse) { .footer-link { display: inline-block; padding-top: 0.375rem; padding-bottom: 0.375rem; } #hamburger { min-width: 44px; min-height: 44px; } } /* ============================================================ STICKY KAUF-LEISTE (nur mobil, ergaenzt 28.08.2026) Auf dem Handy scrollt die Kaufmoeglichkeit aus dem Bild. Die Leiste blendet sich ein, sobald der Hero den Sichtbereich verlaesst; das uebernimmt initStickyCta() in wiprax.js ueber die Klasse .is-visible. Der VERBORGENE Zustand steht bewusst hier im CSS und nicht im JS: Ohne JavaScript bleibt die Leiste unten weg, statt ueber dem Inhalt zu liegen. visibility wird mitgeschaltet, damit die Links im verborgenen Zustand nicht per Tabulator erreichbar sind - ein allein per transform verschobenes Element bleibt sonst fokussierbar. Die Leiste selbst traegt im HTML "md:hidden" und existiert am Desktop also gar nicht. ============================================================ */ #sticky-cta-bar { transform: translateY(100%); visibility: hidden; transition: transform 0.25s ease, visibility 0.25s ease; } #sticky-cta-bar.is-visible { transform: translateY(0); visibility: visible; } @media (prefers-reduced-motion: reduce) { #sticky-cta-bar { transition: none; } } /* ============================================================ PRINT STYLES ============================================================ */ @media print { #navbar, #mobile-menu, .btn-primary, .btn-ghost, footer { display: none !important; } body { color: #000; background: #fff; } }