/** * Einsteiger-Seite Styles * Pfad: css/pages/einsteiger.css * * WICHTIG: Diese Datei wird NACH main.css geladen! */ /* ========================================== HERO SECTION ========================================== */ /* Struktur (Breite, Höhe, Flex, Position) kommt von der gemeinsamen .hero-Klasse in css/components/hero.css - hier nur das Seiten-spezifische Hintergrundbild + der zugehörige Verlauf. */ .hero--einsteiger { background-image: var(--hero-gradient), url('../../images/einsteiger/einsteiger-hero.jpg'); } /* Fallback wenn kein Bild vorhanden */ /* .hero--einsteiger::before entfernt: identisch mit der gemeinsamen .hero::before-Regel (var(--gradient-hero)) aus hero.css - die greift automatisch, da das Element bereits die Klasse "hero" trägt. */ /* .hero h1 / .hero__subtitle liegen zentral in components/hero.css. */ /* @keyframes fadeInUp liegt zentral in base.css. */ /* ========================================== CONTENT ========================================== */ /* Wrapper nutzt jetzt .container (base.css) statt eigener Klasse. */ /* ========================================== INTRO SECTION ========================================== Basis-Styling (Box, h2, p) jetzt zentral in css/components/sections.css als .intro-section / .intro-section--boxed. Hier nur noch die Einsteiger-exklusiven Sonderregeln für die Absätze. */ /* Ab hier NUR Einsteiger-Seite (gescoped über die Body-Klasse ".page-einsteiger") - ".intro-section" wird global über main.css geladen (@import 'pages/einsteiger.css') und auf mehreren Seiten verwendet (z.B. Startseite), ohne dieses Scoping würden diese Regeln fälschlich überall gelten. */ .page-einsteiger .intro-section p { text-align: justify; font-style: italic; /* Sprachgerechte Silbentrennung gegen ungleichmäßige Wortabstände im Blocksatz - nutzt automatisch die Trennregeln der jeweils aktiven Sprache über das dynamisch gesetzte lang-Attribut auf (LanguageManager). text-wrap: balance statt pretty - pretty führte auf mehreren Android-Geräten (Opera, Chromium-Engine) zu einem Rendering-Bug: Teile des Textes verschwanden, an ihrer Stelle blieb leerer Raum. balance ist die ältere, deutlich breiter ausgereifte Eigenschaft mit demselben Grundziel (gleichmäßigere Zeilenlängen), wird von Browsern ohne Unterstützung sauber ignoriert statt fehlerhaft angewendet. */ hyphens: auto; text-wrap: balance; } /* Großer, dekorativer erster Buchstabe des ERSTEN Intro-Absatzes. Bewusst OHNE float: sitzt inline auf der Grundlinie der ersten Zeile, direkt an den folgenden Buchstaben - kein Umfließen über mehrere Zeilen. */ .page-einsteiger .intro-section p:first-of-type::first-letter { font-family: 'DM Serif Display', serif; font-size: 3.2rem; color: var(--color-gray-200);/*var(--color-primary);*/ line-height: 1; } /* Zusätzlicher, frei einstellbarer Abstand VOR diesem Absatz (aktuell zwischen Text 2 und Text 3 genutzt) - Wert hier anpassen. Selektor bewusst mit ".intro-section p" kombiniert (höhere Spezifität), da die obige ".page-einsteiger .intro-section p"-Regel sonst ihr "text-align: justify"/"font-style: italic" durchsetzen würde. */ .page-einsteiger .intro-section p.intro-text--abstand-vorher { margin-top: 3.0rem;/*2rem;*/ text-align: center; font-style: normal; } /* ========================================== IMAGE SHOWCASE ========================================== */ .image-showcase { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin: 4rem 0; } .showcase-item { position: relative; border-radius: 12px; overflow: hidden; height: 300px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); transition: transform 0.3s, box-shadow 0.3s; } .showcase-item:hover { transform: var(--transform-lift-md); box-shadow: 0 8px 25px rgba(221, 191, 95, 0.3); } .showcase-item img { width: 100%; height: 100%; object-fit: cover; } .showcase-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.9)); /* Fluid statt starrer 2rem/1.5rem/1rem - komplett ohne Mobile- Anpassung. Identische Formel wie .workshop-card-overlay (shows-workshops.css) - dieselben Ausgangswerte, bewusst separat gepflegt statt zusammengeführt. Desktop-Maxima unverändert. */ padding: clamp(var(--spacing-md), 6vw, var(--spacing-lg)) clamp(var(--spacing-sm), 4vw, var(--spacing-md)) clamp(var(--spacing-xs), 4vw, var(--spacing-sm)); color: white; } .showcase-overlay h3 { color: var(--color-primary); font-size: var(--font-size-2xl); margin-bottom: 0.5rem; } .showcase-overlay p { font-size: var(--font-size-sm); color: #e0e0e0; line-height: 1.5; } /* ========================================== BENEFITS SECTION ========================================== */ .benefits-section { margin: 3rem 0; } /* Eigenständige, goldene Akzent-Überschrift außerhalb von Komponenten- Kontexten (z.B. zwischen zwei Sections) - bewusst entkoppelt vom .benefits-section-Titel, auch wenn die Optik zufällig ähnlich ist. */ .intro-lead-section h2 { font-size: var(--font-size-6xl); color: var(--color-primary); text-align: center; margin-bottom: 2rem; letter-spacing: var(--letter-spacing-wider); } /* ========================================== BENEFITS GRID ========================================== */ /* ========================================== KURSE SECTION ========================================== */ .kurse-section { margin: 0rem 0rem;/*var(--spacing-3xl) 0;*/ padding: 0 0;/*var(--spacing-xl) 0;*/ } .kurse-section h2 { font-size: var(--font-size-6xl); color: var(--color-primary); margin-bottom: var(--spacing-xl); text-align: center; } /* Anfänger-Kurse nutzen jetzt renderTerminKarte() (event-card-Design, inkl. Overlay) mit Kursart-Filter 'anfaenger' - siehe includes/termin-card.php. Layout: .scroll-carousel/.scroll-carousel__track (Karussell, >2 Termine) bzw. .termine-grid (Nebeneinander, <=2 Termine), beide global aus homepage.css / practicamos-juntos.css. Keine eigenen Card-Styles mehr nötig - daher wurden .kurse-tage-grid/.kurs-day/.kurs-info/.kurs-detail an dieser Stelle entfernt. */ /* Anfänger-Terminkarte (renderAnfaengerTerminKarte) hat 4 Abschnitte (Datum, Kursblock, Adresse, Divider) statt der 6 der vollen Terminkarte (kein Typ, Titel, Link-Block). Ursprünglich war hier Subgrid komplett deaktiviert (display: block) - das führte aber dazu, dass jede Karte sich unabhängig von den Nachbarkarten aufbaute: Bricht z.B. ein langer Kursname ("Einsteiger & Wiedereinsteiger") in einer Karte auf 2 Zeilen um, verschob das Adresse + Trennlinie NUR in dieser einen Karte nach unten - Trennlinien lagen dadurch kartenübergreifend nicht mehr auf einer Höhe (weder im Karussell noch im 2er-Grid). Lösung: Subgrid mit dem korrekten Span von 4 (statt 6) - dadurch teilen sich alle Karten im selben Grid-Container (.scroll-carousel__track bzw. .termine-grid) dieselben 4 Zeilen-Tracks; jede Zeile wird automatisch so hoch wie der höchste Inhalt an dieser Stelle über ALLE Karten hinweg - exakt derselbe, bereits bewährte Mechanismus wie bei der vollen Terminkarte (siehe .event-card in termine.css), nur mit angepasstem Span, damit kein unnötiger Leerraum für die fehlenden 2 Abschnitte reserviert wird. */ .page-einsteiger .event-card { display: grid; grid-template-rows: subgrid; grid-row: span 4; } /* .termine-grid hat (anders als .scroll-carousel__track im Karussell-Fall) von Haus aus kein Padding - dadurch rutschten die Karten ohne Karussell näher an die Tabs heran. Gleicher oberer Abstand wie im Karussell (.scroll-carousel__track padding: 1rem ...) für konstanten Abstand Tabs -> Karten. grid-auto-flow: column sorgt (wie bei .scroll-carousel__track) dafür, dass die Karten zuverlässig NEBENEINANDER in dieselben Zeilen einsortiert werden (Grid-Default wäre row-flow). align-items: start verhindert, dass Karten unterschiedlicher Eigenhöhe im Grid gestreckt werden. row-gap: 0 behebt den eigentlichen Leerraum-Bug: .termine-grid setzt via Kurzschreibweise "gap: var(--spacing-xl)" (practicamos-juntos.css) sowohl column-gap (gewünscht - Abstand zwischen den Karten) als auch row-gap (NICHT gewünscht). Seit .event-card per Subgrid (siehe oben) die 4 Zeilen-Tracks des Elternteils TEILT, wird dieser row-gap automatisch ZWISCHEN JEDER der 4 Kartenzeilen eingefügt (Datum/Kursblock/Adresse/ Divider) - genau der unnötige Leerraum, der zuvor beobachtet wurde. Bestätigt per DevTools-Grid-Overlay. Das Karussell hatte dieses Problem bereits gelöst (siehe row-gap: 0 in scroll-carousel.css) - hier fehlte das Gegenstück, da .termine-grid ursprünglich nur für Block-Karten ohne Subgrid gedacht war. column-gap bleibt bewusst unverändert (weiterhin var(--spacing-xl) aus der globalen Basisregel) - nur der vertikale Spalt INNERHALB jeder Karte soll verschwinden, der horizontale Abstand zwischen den Karten bleibt. Bewusst nur für die Einsteiger-Seite gescoped (.page-einsteiger), NICHT in der globalen .termine-grid-Regel (practicamos-juntos.css) geändert - .termine-grid wird auch auf anderen Seiten (z.B. PracticaMOS) genutzt, dort aber ohne Subgrid-Karten; ein globaler Eingriff hätte dort ungeprüfte Nebenwirkungen riskiert. */ .page-einsteiger .termine-grid { padding-top: 1rem; grid-auto-flow: column; align-items: start; row-gap: 0; } .kurse-intro-text { color: #fff; font-size: var(--font-size-2xl);/*var(--font-size-4xl); /*1.05rem;*/ margin: var(--spacing-sm) 0 var(--spacing-sm);/*-2rem 0 3rem;/*-0.5rem 0 1.5rem;*/ text-align: center; } /* Goldene Trennlinie unterhalb der Adresse - identisch zur goldenen Linie oberhalb des Kursblocks (.event-time-highlight background-image). */ .anfaenger-karte-divider { margin-top: 0.75rem; height: 1px; background-image: linear-gradient( to right, transparent 0%, var(--color-primary) 15%, var(--color-primary) 85%, transparent 100% ); } .page-einsteiger .event-location { margin-top: 0; padding-top: 0.5rem; padding-bottom: 0.5rem; color: var(--color-text-secondary); font-size: var(--font-size-base); line-height: 1.4; letter-spacing: var(--letter-spacing-base); display: flex; align-items: flex-start; gap: 0.4rem; background-image: linear-gradient( to right, transparent 0%, var(--color-primary) 15%, var(--color-primary) 85%, transparent 100% ); background-size: 100% 1px; background-repeat: no-repeat; background-position: top; } .page-einsteiger .event-location-icon { flex-shrink: 0; margin-top: 3px; } .page-einsteiger .event-location a { color: var(--color-white); text-decoration: none; transition: color 0.3s; } .page-einsteiger .event-location a:hover { color: var(--color-primary); text-decoration: underline; } /* ========================================== KURSE-AKTION (Erstbesuch-Rabatt unterhalb der Kurse) ========================================== */ /* Goldene Gradient-Trennlinie — identisch zu den Terminkarten */ .kurse-aktion-divider { height: 1px; background: linear-gradient( to right, transparent 0%, var(--color-primary) 15%, var(--color-primary) 85%, transparent 100% ); margin: 1.75rem auto; /* Fluid statt starrer "calc(100% - 120px)": Der bisherige Fixwert basierte auf dem Desktop-Padding des Karussells darüber (.scroll-carousel "padding: 0 60px", gilt aber erst ab 768px) und war ohne eigene Mobile-Anpassung 1:1 auf schmale Screens übernommen worden - dort deutlich zu breit (führte zu übergroßem Rand zum Bildschirmrand). clamp() nähert sich dem gleichen Desktop-Endwert (120px Gesamtabzug) stufenlos an, lässt auf Mobile aber nur einen kleinen Rand übrig statt einem festen Sprung an 600px. */ max-width: calc(100% - clamp(2rem, 10vw, 120px)); } .kurse-aktion { display: flex; align-items: center; /* Fixes 2rem-Gap wich auf sehr schmalen Screens zusammen mit den reduzierten Außenrändern zu wenig Platz für Prozent + Text nebeneinander - fluid wie der Rest des Blocks. */ gap: clamp(1rem, 4vw, 2rem); max-width: calc(100% - clamp(2rem, 10vw, 120px)); margin: 0 auto; /* Zusätzliche Einrückung gegenüber der Trennlinie darüber (dieselbe Formel wie deren max-width) - hier die Werte erhöhen/verringern, um den Inhalt weiter einzurücken bzw. näher an die Linienbreite zu bringen. Fluid statt fixem "0 3rem": auf Mobile bewusst deutlich schmaler, damit der Rand zum Bildschirmrand nicht unnötig groß wird, während der Desktop-Endwert (3rem) unverändert bleibt. */ padding-inline: clamp(0.5rem, 4vw, 3rem); } /* 25% — exakt wie card-price__price auf der Preise-Seite */ .kurse-aktion__pct { text-align: center; flex-shrink: 0; min-width: 90px; font-size: var(--font-size-6xl-alt); color: var(--color-white); font-weight: var(--font-weight-normal); line-height: 1; } .kurse-aktion__suffix { display: block; font-size: var(--font-size-base); color: var(--color-primary); letter-spacing: var(--letter-spacing-wide); margin-top: 0.15rem; font-weight: var(--font-weight-normal); } /* Dezente vertikale Trennlinie zwischen % und Text - bleibt jetzt auch auf Mobile sichtbar, da .kurse-aktion dort nicht mehr umbricht (kein "flex-wrap: wrap" mehr) und die Zwei-Spalten-Anordnung folglich auf allen Breiten erhalten bleibt. */ .kurse-aktion__vsep { width: 1px; height: 50px; background: linear-gradient( to bottom, transparent, rgba(221, 191, 95, 0.35), transparent ); flex-shrink: 0; } .kurse-aktion__desc { flex: 1; color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: 1.6; letter-spacing: var(--letter-spacing-base); /* Blocksatz mit sprachgerechter Silbentrennung, konsistent mit .intro-section p und .highlight-box p - siehe dort für Details. text-wrap: balance statt pretty (Rendering-Bug auf mehreren Android-Geräten via Opera behoben, siehe .intro-section p oben). */ text-align: left;/*justify;*/ hyphens: auto; text-wrap: balance; } /* Frühere @media (max-width: 600px)-Sonderregel entfernt: erzwang "flex-wrap: wrap" (Umbruch auf 1 Spalte) und versteckte .kurse-aktion__vsep. Beides war eine Kompensation für den vormals viel zu breiten Außenrand (siehe Kommentare oben) - mit den jetzt fluiden, auf Mobile schmalen max-width/padding-Werten bleibt für die Zwei-Spalten-Anordnung (% | Trennlinie | Text) auf allen Breiten genug Platz, ein Umbruch ist nicht mehr nötig. */ /* ========================================== PRE-CTA AKTION (Erstbesuch-Rabatt vor CTA) ========================================== */ .pre-cta-aktion { background: var(--gradient-dark); border: var(--border-width-medium) solid var(--border-color-default); border-radius: var(--border-radius-md); padding: 2.5rem 2rem; box-shadow: var(--shadow-glow-white); position: relative; overflow: hidden; margin-bottom: 2.5rem; transition: box-shadow var(--transition-base); } /* Badge — identisch zu card-price__badge--small */ .pre-cta-aktion__badge { position: absolute; top: 0; right: 0; width: 110px; height: 110px; overflow: hidden; pointer-events: none; } .pre-cta-aktion__badge::after { content: attr(data-badge); position: absolute; top: 22px; right: -32px; width: 140px; background: var(--color-primary); color: var(--color-black); font-size: 0.68rem; font-weight: var(--font-weight-bold); letter-spacing: 1.2px; text-align: center; padding: 4px 0; transform: rotate(45deg); white-space: nowrap; } /* Horizontales 3-Spalten-Layout: % | vsep | text */ .pre-cta-aktion__inner { display: grid; grid-template-columns: 140px 1px 1fr; gap: 0 2.5rem; align-items: center; } /* 25% — identisch zu card-price__price + price-suffix */ .pre-cta-aktion__pct { text-align: center; } /* "25%" als eigener Block — klar getrennt vom Suffix */ .pre-cta-aktion__pct-value { display: block; font-size: var(--font-size-6xl-alt); color: var(--color-white); font-weight: var(--font-weight-normal); line-height: 1; } .pre-cta-aktion__suffix { display: block; font-size: var(--font-size-2xl-alt);/*1.1rem;*/ color: var(--color-primary); letter-spacing: var(--letter-spacing-wide); margin-top: 0.01rem;/*0.5rem;*/ font-weight: var(--font-weight-normal); } /* Vertikale Trennlinie */ .pre-cta-aktion__vsep { background: linear-gradient( to bottom, transparent, rgba(221, 191, 95, 0.3), transparent ); min-height: 100px; } /* Rechter Inhaltsbereich */ .pre-cta-aktion__title { font-size: var(--font-size-2xl-alt); color: var(--color-primary); letter-spacing: var(--letter-spacing-wide); margin-bottom: 0.6rem; font-weight: var(--font-weight-normal); } .pre-cta-aktion__desc { color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: 1.6; letter-spacing: var(--letter-spacing-base); margin-bottom: 1rem; } /* Features — identisch zu card-price__features */ .pre-cta-aktion__features { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border-color-default); padding-top: 0.75rem; } .pre-cta-aktion__features li { padding: 0.4rem 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); letter-spacing: var(--letter-spacing-base); border-bottom: 1px solid var(--color-gray-500); text-align: left; } .pre-cta-aktion__features li:last-child { border-bottom: none; } .pre-cta-aktion__features li::before { content: "✓ "; color: var(--color-primary); font-weight: var(--font-weight-bold); } @media (max-width: 600px) { .pre-cta-aktion__inner { grid-template-columns: 1fr; gap: 1.5rem 0; } .pre-cta-aktion__vsep { display: none; } } /* ========================================== CTA SECTION ========================================== */ /* .cta-section liegt zentral in components/sections.css. */ /* .cta-buttons / .cta-button liegen zentral in components/buttons.css. */ /* ========================================== RESPONSIVE ========================================== */ @media (max-width: 768px) { /* Höhen-Anpassung sowie h1/.hero__subtitle-Verkleinerung kommen bereits von der gemeinsamen .hero-Regel (components/hero.css). */ .image-showcase { grid-template-columns: 1fr; } /* .cta-buttons Responsive-Regel liegt zentral in components/buttons.css. */ /* Frühere feste Stufen hier (768px: "calc(100% - 100px)", 480px: "calc(100% - 80px)") entfernt: .kurse-aktion-divider/.kurse-aktion nutzen jetzt bereits eine fluide clamp()-Formel in ihrer Basisregel (siehe Abschnitt "KURSE-AKTION" weiter oben), die sich stufenlos an die Bildschirmbreite anpasst - feste Breakpoint-Overrides hier würden diese Fluid-Logik an genau diesen Stellen wieder aushebeln und erneut harte Sprünge einführen. */ }