/* ========================================================================== A1 Seniorenakademie – Webinar-Übersicht (/a1-webinare/) Eigene, seitenspezifische Klassen (bewusst nicht .kategorie-* aus home.css wiederverwendet) – siehe PROJECT.md/PROJECT_A1Sa.md, Lehre zu geteilten Klassennamen: getrennte Klassen bleiben unabhängig änderbar, auch wenn die Optik anfangs identisch ist. Lädt nach home.css + kurs.css; nutzt Variablen aus beiden (identische Werte für --a1-red-4/--a1-dark/--a1-white in beiden Dateien). ========================================================================== */ .webinare-band { background: var(--a1-white); } /* 1440px-Band wie der Webinar-Abschnitt auf a1seniorenakademie.at (dort gemessen) – entspricht dem bereits im Projekt etablierten 1440px-Band (Footer, Hero-Logo). */ .webinare-container { max-width: 1440px; margin: 0 auto; padding: 0 2rem; } .webinare-intro-band { padding: 3rem 0 2rem; } /* kurs.css setzt h1/body auf feste px-Werte (eigene, ältere Vorlage ohne Text-größer-Funktion) – hier explizit rem, sonst reagiert dieser Text nicht auf den "Text größer"-Button (der --scale auf setzt, siehe site-chrome.js; die Skalierungslogik war früher in home.js, ist seit dem Header-Umbau in site-chrome.js ausgelagert, Mechanismus selbst unverändert). */ .webinare-band h1 { font-size: 3rem; text-align: center; } .webinare-intro { font-size: 1.5rem; color: var(--a1-dark-2); } .webinar-kategorie { padding: 2.5rem 0; } .webinar-kategorie.bg-grau { background: var(--a1-light); } .webinar-kategorie.bg-weiss { background: var(--a1-white); } .webinar-kategorie h2 { font-size: 2rem; font-weight: 400; margin-bottom: 1.25rem; } /* CSS Grid statt Flexbox: die Spaltenbreite gilt einheitlich fürs ganze Grid (nicht pro Zeile wie bei Flexbox), dadurch bekommen auch unvollständige letzte Zeilen (z. B. "Wissen vertiefen" mit nur 2 Karten) dieselbe Kartenbreite wie volle Zeilen – UND die Karten dürfen mit vorhandenem Platz mitwachsen. auto-fill statt auto-fit: auto-fit würde bei einer Kategorie mit weniger Karten als Spalten passen (z. B. "Wissen vertiefen" mit nur 2) die leere Spalte entfernen und ihren Platz auf die vorhandenen Karten verteilen – dadurch wären die 2 Karten dort breiter als in den anderen Kategorien. auto-fill lässt die leere Spalte stattdessen (unsichtbar) stehen, Kartenbreite bleibt überall gleich. 370px als Minimum (Testwert, ggf. rücksetzen): ergibt bei 1440px (Band) weiterhin 3 Spalten (~443px/Karte), bei realen Viewport-Breiten wie 832px (iPhone 12 Pro Max quer, per whatismyviewport.com gemessen – Achtung: das ist NICHT die Display-Auflösung/2, Safari/Firefox ziehen für die eigene UI mehr ab als vermutet) 2 Spalten (~372px) statt einer einzelnen, halb-leeren Zeile. */ .webinar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(370px, 100%), 1fr)); gap: 1.5rem; } .webinar-card { display: flex; flex-direction: column; max-width: 800px; background: var(--a1-white); text-decoration: none; color: inherit; box-shadow: 0 2px 3px 1px #E0E0E0; transition: box-shadow 0.15s ease, transform 0.15s ease; } .webinar-card:hover, .webinar-card:focus-visible { box-shadow: 0 10px 24px rgba(0,0,0,0.08); transform: translateY(-2px); } .webinar-card-media { position: relative; } /* Kein object-fit/feste Höhe mehr – das Bild skaliert immer gleichmäßig im Originalverhältnis (800×435, über die width/height-Attribute im -Tag), height:auto verhindert jede Stauchung/Beschneidung. max-width deckelt die Bildbreite auf die Originalgröße (800px), auch falls eine Karte breiter würde. */ .webinar-card-media img { display: block; width: 100%; max-width: 800px; height: auto; } .webinar-badge { position: absolute; top: 0.75rem; left: 0.75rem; background: var(--a1-red-4); color: var(--a1-white); font-size: 1.05rem; font-weight: 600; line-height: 1; padding: 0.4rem 0.7rem; } .webinar-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; border-top: 4px solid var(--a1-red-4); } .webinar-card-body h3 { font-size: 1.5rem; margin-bottom: 0.5rem; } .webinar-card-body p { font-size: 1.2rem; color: var(--a1-dark-2); margin-bottom: 1rem; } .webinar-card-body .btn { align-self: flex-start; margin-top: auto; } /* Erster Kurs ("Basiskurs: Umgang mit Zoom") bewusst hervorgehoben – Einstiegskurs für alle, die noch nie bei einem Webinar waren, wie auf a1seniorenakademie.at. Dunkles Rot statt der Primärfarbe; der Strich bleibt --a1-red-4 wie bei allen anderen Karten (keine eigene Strichfarbe mehr nötig). */ .webinar-card-featured { background: var(--a1-red-6); } .webinar-card-featured .webinar-card-body h3, .webinar-card-featured .webinar-card-body p { color: var(--a1-white); } .webinar-card-featured .webinar-card-body .btn { background: var(--a1-white); color: var(--a1-red-4); } .webinar-card-featured .webinar-card-body .btn:hover, .webinar-card-featured .webinar-card-body .btn:focus-visible { background: var(--a1-red-3); color: var(--a1-white); } @media (max-width: 767px) { .webinare-container { padding: 0 1.25rem; } .webinare-intro-band { padding: 2rem 0 1.5rem; } .webinar-kategorie { padding: 2rem 0; } .webinare-band h1 { font-size: 2rem; } .webinare-intro { font-size: 1.25rem; } }