/** * Termine/Events Component - COMPLETE * Juliana y Fadi Tango Website * * ALLE Event-Card Styles aus style.css (Zeilen 386-628) * 100% identisch zum Original - SYSTEMATISCH migriert */ /* ==================== EVENT CARDS (BASE) ==================== */ .event-card { /* Die Karte ist ein SUBGRID ihres Containers: Sie übernimmt dessen 6 Zeilen-Tracks (ein Track je Abschnitt: Typ, Titel, Datum, Zeit, Ort, Link). Dadurch wird jede Abschnitts-Zeile so hoch wie die höchste Karte an dieser Stelle -> alle Karten und Trennlinien liegen auf einer Höhe, unabhängig von Zeilenumbrüchen. Fällt eine Karte NICHT in ein Grid (Fallback), verhält sich das grid wie ein normales Grid und stapelt die Abschnitte wie zuvor. Die Breite bestimmt die Rasterspalte des Containers (min(--event-card-width, 100%)). */ display: grid; grid-template-rows: subgrid; grid-row: span 6; align-content: start; max-width: 100%; background: var(--gradient-dark); border: var(--border-width-medium) solid var(--border-color-default); border-radius: var(--border-radius-md); padding: 2rem; color: #fff; position: relative; overflow: hidden; box-shadow: var(--shadow-glow-white); transition: var(--transition-base); } .event-card:hover { /* Kein Aufleuchten beim Hover – identischer Schatten wie im Ruhezustand */ box-shadow: var(--shadow-glow-white); } /* ==================== AUSFALL STYLING ==================== */ .event-card.ausfall { position: relative; /* Karte selbst voll deckend, kein Graufilter mehr. */ opacity: 1; } /* Nur die Inhalts-Abschnitte abdunkeln (0.5), NICHT den Ausfall-Banner. Wichtig: opacity direkt auf .event-card.ausfall würde auch den Banner halbtransparent machen (opacity wirkt auf den GESAMTEN Teilbaum – ein Kind kann nicht deckender sein als sein Elternteil). Daher dimmen wir gezielt die Kinder AUSSER dem Banner; der Banner bleibt so bei opacity 1. */ .event-card.ausfall > *:not(.ausfall-banner) { opacity: 0.5; } .ausfall-banner { position: absolute; top: 50%; left: 50%; /* Diagonaler Band quer über die gesamte Karte (Ort + Inhalte). Breite > Karte, an den Rändern durch overflow:hidden beschnitten. */ width: 150%; transform: translate(-50%, -50%) rotate(-18deg); background: #FF5F1F;/*#EA4335;*//*rgba(221, 191, 95, 0.96);*/ color: #000;/*#000;*/ padding: 0.9rem 1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.15rem; text-align: center; z-index: 10; box-shadow: 0 4px 20px rgba(0,0,0,0.6); } .ausfall-banner__grund { font-weight: bold; font-size: var(--font-size-3xl);/*1.2rem;*/ letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; /* Enge Zeilenbox, damit Großbuchstaben mittig sitzen und der Abstand oben/unten allein vom symmetrischen Banner-Padding bestimmt wird. */ line-height: 1; } .ausfall-banner__hinweis { font-size: var(--font-size-sm); font-weight: 600; letter-spacing: 0.5px; line-height: 1.2; } /* ==================== EVENT TYPE LABELS ==================== */ /* ==================== EVENT TYPE LABEL ==================== */ .event-type { display: inline-block; background: var(--color-primary); color: var(--color-black); padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--border-radius-sm); font-size: var(--font-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.75rem; /* Als direktes Grid-Element (Subgrid-Karte) würde der Span sonst auf die volle Spaltenbreite gestreckt. start = Inhaltsbreite, linksbündig. */ justify-self: start; } /* Alle Termintypen nutzen einheitlich den Standard-Label-Stil (.event-type oben). PRÁCTICA hatte früher eine abweichende Outline – bewusst entfernt, damit jeder Typ identisch aussieht. Eine eigene Regel ist daher nicht mehr nötig (erbt von .event-type). */ /* ==================== EVENT CARD TITLE ==================== */ .event-card h3 { font-size: var(--font-size-4xl); /* Standard: Weiß — gold-title Klasse schaltet auf Gold um */ color: var(--color-white); margin-bottom: var(--spacing-md); letter-spacing: var(--letter-spacing-base); } .event-card h3.large-title { font-size: var(--font-size-5xl); font-weight: 700; } .event-card h3.gold-title { color: var(--color-primary); } /* ==================== EVENT DATE ==================== */ .event-date { font-size: var(--font-size-lg); color: var(--color-text-primary); /* 9px = gleicher Abstand wie zwischen "Jeden Montag" und Datum */ margin-bottom: 9px; line-height: 1.5; letter-spacing: var(--letter-spacing-base); } .event-date.gold-text { color: var(--color-primary); } .event-weekday { font-size: var(--font-size-base); /* Grauton wie Testimonials-Autorbeschreibung (#999); opacity 1 für exakten Ton */ opacity: 1; /* Explizite Farbe damit datum_gold auf dem Parent-

nicht auf den Wochentag-Text vererbt wird */ color: #999; } .event-weekday.gold-text { color: var(--color-primary); opacity: 1; } .event-next-date { font-size: var(--font-size-2xl); font-weight: 700; display: inline-block; margin-top: 0.3rem; } /* ==================== EVENT TIME / KURSE ==================== */ .event-time-highlight { margin: 0.5rem 0 0 0; padding: 0.5rem 0 0.5rem 0; border: none; border-radius: 0; 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; border-bottom: 1px solid var(--border-color-default); /* * Grid-Lösung für gleichmäßige Slot-Höhen: * * - grid-auto-rows: auto erzeugt pro tatsächlich gerendertem Slot * (echter Kurs ODER Platzhalter) genau eine Row - die Anzahl der * Rows wird also komplett von der aufrufenden PHP-Seite gesteuert * (z.B. renderTerminKarte() mit fixen 3 Slots, oder * renderAnfaengerTerminKarte() mit dynamischer Slot-Zahl). * - Jede Row passt sich der Höhe des höchsten Elements an, * also funktioniert das universell auf allen Bildschirmgrößen * und auch wenn Kursname auf Mobile umbricht. */ display: grid; grid-auto-rows: auto; /* Zwei geteilte Spalten: Info-Icon | Kursname (dehnbar). Über subgrid richtet sich das Info-Icon zeilenübergreifend an genau derselben Spalte aus. Die Uhrzeit ist bewusst KEINE dritte Spalte mehr - sie steht immer auf einer eigenen Zeile unter dem Kursnamen (siehe .event-time-slot .time-text), unabhängig von der Bildschirmbreite. Vorherige 3-Spalten-Version (Icon | Kursname | Uhrzeit nebeneinander) führte zu einer nicht zuverlässig vorhersehbaren Verhandlung zwischen zwei schrumpfenden Spalten - deshalb bewusst aufgegeben. */ grid-template-columns: auto 1fr; } .event-time { color: var(--color-text-secondary); font-size: var(--font-size-base); line-height: 1.8; margin: 0; } .event-time-slot { /* Slot übernimmt die 4 Spalten des Blocks (subgrid) und spannt über die volle Breite. Dadurch liegen Info-Icon, Uhr-Icon und Uhrzeit in ALLEN Zeilen in exakt derselben Spalte. */ display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; column-gap: 0.5rem; padding: 0.5rem 0; /* Immer 1px Unterkante (transparent), damit ALLE Zeilen – auch die letzte ohne sichtbare Linie – exakt gleich hoch sind (box-sizing: border-box). Andernfalls sitzt die Uhr der letzten Zeile 1px tiefer. */ border-bottom: 1px solid transparent; } .event-time-slot:not(:last-child) { border-bottom-color: var(--color-gray-500); } /* Sichtbares Feedback, dass die Zeile klickbar ist - Desktop (Hover) UND Touch (Tap/:active) sowie Tastatur (:focus-visible), da .event-time-slot auch role="button" tabindex="0" hat. Läuft zentral hier, gilt automatisch für alle Terminkarten-Typen. */ /* Interaktions-Styling (Hover/Fokus/Klick-Feedback) für .event-time-slot--clickable liegt zentral in kurs-overlay.css. */ /* * Platzhalter-Slot: unsichtbar, belegt aber die Grid-Row. * Keine min-height nötig — die Row-Höhe bestimmt das Grid * anhand des höchsten echten Slots in dieser Row. */ .event-time-slot--placeholder { visibility: hidden; pointer-events: none; } /* Höhe (inkl. 1px Unterkante) beibehalten, aber nie sichtbare Linie - auch wenn der Platzhalter nicht das letzte Element ist (kann bei mehreren nötigen Platzhaltern vorkommen, siehe :not(:last-child) oben). Gleiche Spezifität wie die Konkurrenz-Regel + spätere Position im Stylesheet gewinnt ganz regulär, ganz ohne !important. */ .event-time-slot--placeholder:not(:last-child), .event-time-slot--placeholder { border-bottom-color: transparent; } .event-time-slot .time-text { color: var(--color-text-primary); /*color: var(--color-text-secondary);*/ font-size: var(--font-size-base); letter-spacing: var(--letter-spacing-base); /* Feste Zeilenhöhe, identisch zu .course – Zeilenhöhe unabhängig vom Text */ line-height: 1.5rem; /* Eigene Zeile, IMMER (unabhängig von der Bildschirmbreite) - kein Umbruch-Mechanismus mehr nötig, da die Uhrzeit nicht mehr mit dem Kursnamen um denselben Platz konkurriert (siehe .event-card: Grid wurde von 3 auf 2 Spalten vereinfacht). Bleibt dadurch garantiert einzeilig. */ grid-column: 2 / -1; white-space: nowrap; } .event-time-slot .course { font-weight: 600; color: var(--color-white); font-size: var(--font-size-md); letter-spacing: var(--letter-spacing-base); text-align: left; /* Spalte 1 (1fr) übernimmt die Breite; min-width:0 erlaubt Umbruch/Ellipsis statt die Spalte zu sprengen */ min-width: 0; /* Erzwingt Umbruch auch bei einzelnen, langen zusammengesetzten Wörtern ohne Leerzeichen (im Deutschen häufig) - Sicherheitsnetz gegen Überlauf über die Kartenbreite hinaus. Seit die Uhrzeit auf einer eigenen Zeile steht (siehe .time-text), betrifft das nur noch extrem lange Einzelwörter relativ zur vollen Kartenbreite, nicht mehr ein Zusammenspiel mit einer benachbarten Uhrzeit-Spalte. */ overflow-wrap: break-word; /* Feste Zeilenhöhe (identisch zur Uhrzeit-Zelle) – macht die Zeilenhöhe unabhängig von den konkreten Zeichen/Fallback-Fonts des Kursnamens */ line-height: 1.5rem; } /* ==================== EVENT LOCATION ==================== */ .event-location { margin: 0; padding-top: 0.75rem; padding-bottom: 0.75rem; 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; } .event-location-icon { flex-shrink: 0; margin-top: 3px; } /* SVG-Pin-Variante vergrößern (nicht die Nadel-Emoji-Variante). Farbe zentral hier statt im SVG-Markup hardcodiert (siehe termin-card.php/ tango-unterricht-practicamos-juntos.php: dort stroke/fill="currentColor", erbt automatisch von dieser color-Eigenschaft). */ .event-location-icon--pin { width: 1.35em; height: 1.35em; color: var(--color-pin-red); } .event-location a { color: var(--color-white); text-decoration: none; transition: color 0.3s; } .event-location a:hover { color: var(--color-primary); text-decoration: underline; } /* .event-level wurde entfernt: Das zugehörige "Niveau"-Feld wird laut termin-card.php bewusst nicht mehr ausgegeben, die CSS-Regel war daher nie aktiv wirksam. */ /* Leere (immer ausgegebene) Abschnitte belegen keinen Eigenplatz – ihre Rasterzeile bleibt aber erhalten und wird von anderen Karten auf die passende Höhe gebracht (Subgrid-Ausrichtung). */ .event-location.is-empty { margin: 0; padding: 0; min-height: 0; } /* Ehemaliger .event-card.highlight-Block entfernt: Das highlight- Datenbankfeld steuert seit jeher nur die Titelgröße (large-title), nie die Kartenklasse selbst - dieser komplette Regelblock war daher nie aktiv wirksam. Die tatsächlich genutzten Gold-Umschalter (Titel/ Datum/Wochentag) laufen unabhängig davon über .gold-title/.gold-text weiter oben in dieser Datei. */ /* ==================== EVENT LINK (externe/interne Links auf Terminkarten) ==================== */ /* Goldene Gradient-Trennlinie vor dem Link */ .event-link-divider { height: 1px; /* Gleiche Farbe wie event-location-Trennlinie */ background: linear-gradient( to right, transparent 0%, var(--color-primary) 15%, var(--color-primary) 85%, transparent 100% ); margin-top: 0; margin-bottom: 0.75rem; } /* Link-Zeile */ .event-link { display: flex; align-items: center; gap: 0.5rem; /* Grauton wie Testimonials-Autorbeschreibung; Hover bleibt gold (siehe unten) */ color: #999; text-decoration: none; font-size: var(--font-size-sm); letter-spacing: var(--letter-spacing-base); padding: 0.25rem 0; transition: color 0.25s; } /* Farbe zentral über Variable statt im SVG-Attribut hardcodiert (siehe termin-card.php: dort stroke="currentColor", erbt von hier). Bewusst unabhängig von .event-link's eigener (grauer) Textfarbe - das Icon bleibt dadurch immer gold, auch wenn der Linktext beim Hover golden wird. */ .event-link svg { flex-shrink: 0; transition: transform 0.25s; color: var(--color-primary); } .event-link:hover { color: var(--color-primary); } .event-link:hover svg { transform: translateX(3px); } /* Extern: ↗-Symbol rechts */ .event-link--extern::after { content: "↗"; font-size: var(--font-size-sm); margin-left: auto; opacity: 0.6; transition: opacity 0.25s; } .event-link--extern:hover::after { opacity: 1; } /* ==================== RESPONSIVE ==================== */ @media (max-width: 768px) { .event-card { /* War fest 2rem/32px, keine Mobile-Reduktion vorhanden (siehe Mobile-Audit). Auf schmalen Karten (~300px) nahm das Padding unverhältnismäßig viel Platz ein. */ padding: 1.25rem; } .ausfall-banner__grund { /* War fest 1.5rem + white-space:nowrap - bei langen Ausfallgründen auf schmalen Karten Overflow-Risiko (Text wird durch overflow:hidden auf .event-card abgeschnitten). Kleinere Schrift reduziert das Risiko, behebt es aber nicht vollständig bei sehr langen Texten - ggf. bei Bedarf separat nachschärfen. */ font-size: var(--font-size-xl); } }