/** * Homepage Specific Styles - FINAL COMPLETE * Juliana y Fadi Tango Website * * 100% SYSTEMATISCH aus style.css migriert * Zeilen 278-758 aus Original * ALLE Styles vorhanden - Visuell identisch! */ /* ==================== CONTAINER OVERRIDES ==================== */ /* Zeilen 316-327 aus style.css */ /* .container liegt zentral in base.css. */ /* Flip Cards Container - Sonderbreite entfernt, nutzt jetzt die normale .container-Breite wie der Rest der Seite. */ /* ==================== HERO IMAGE ==================== */ /* Zeilen 278-315 aus style.css */ /* Struktur (Breite, Höhe, Flex, Position, Farbe) kommt von der gemeinsamen .hero-Klasse in css/components/hero.css - hier nur das Seiten-spezifische Hintergrundbild + der zugehörige Verlauf (jetzt vereinheitlicht auf den mehrheitlich genutzten Wert 0.5/0.7, statt vorher 0.3/0.3). */ .hero--startseite { background-image: var(--hero-gradient), url('../../images/startseite/tango-couple.jpg'); } /* .hero__content-Positionierung (früher: eigene margin-top-Kaskade 16rem/10rem/6rem) wurde entfernt - läuft jetzt über die zentrale, fluide margin-top-Regel in components/hero.css (.hero__content), wie auf allen anderen Seiten auch (gleiches Vorgehen wie zuvor bei .hero__content--about in ueber-uns.css). */ /* .hero-content p entfernt: deckungsgleich mit der gemeinsamen .hero__subtitle-Klasse aus hero.css, die jetzt stattdessen genutzt wird. */ /* ==================== EVENTS SECTION ==================== */ /* Zeilen 328-385 aus style.css */ .events-section { padding: 0; } .events-section h2 { font-size: var(--font-size-6xl); color: var(--color-primary); text-align: center; margin-bottom: 2rem; letter-spacing: 2px; } /* Scroll-Karussell-Styling: siehe css/components/scroll-carousel.css (seitenübergreifend genutzt, u.a. auch bei Einsteiger und Shows/Workshops - Klassen heißen dort .scroll-carousel/__track). */ /* ==================== FLIP CARDS SECTION ==================== */ /* Zeilen 629-758 aus style.css */ .flip-cards-section { padding: 0; } .flip-cards { display: grid; grid-template-columns: repeat(3, minmax(300px, 1fr)); /* Fluid statt 3-stufiger Kaskade (2rem Basis / 1.5rem ≤1400px / 1rem ≤1280px, floor bei 1rem darunter) - siehe Fluid-Design-Audit Kategorie A. Formel nähert die alten Stufen linear an. Grenzwerte referenzieren die Projekt-Spacing-Skala. */ gap: clamp(var(--spacing-sm), 13vw - 9.5rem, var(--spacing-lg)); justify-items: center; align-items: center; max-width: 100%; } .flip-card { width: 100%; max-width: 420px; height: 300px; perspective: 1000px; cursor: pointer; } .flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s, box-shadow 0.3s; transform-style: preserve-3d; border-radius: 12px; box-shadow: var(--shadow-glow-white); } /* Hover-Vorschau: NICHT über @media (hover:hover)/(pointer:fine) gelöst, da Hybrid-Geräte (z.B. Convertibles mit Touchscreen + angeschlossener Maus) den Browser oft fälschlich glauben lassen, "kein echtes Hover" verfügbar zu sein (Touchscreen wird als primäres Zeigegerät gewertet). Stattdessen erkennt script.js per echter Mausbewegung, ob eine Maus benutzt wird, und setzt dafür die Klasse "has-mouse" auf . */ .has-mouse .flip-card:hover .flip-card-inner { transform: rotateY(180deg); box-shadow: var(--shadow-glow-white-strong); } /* Klick/Tap: dreht die Karte um und hält sie umgedreht, bis erneut geklickt wird - auf JEDEM Gerät (Maus UND Touch). Wird per JS (script.js) durch Toggle der Klasse "is-flipped" gesteuert. */ .flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); box-shadow: var(--shadow-glow-white-strong); } .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; /* Fluid statt starrem 2rem - komplett ohne Mobile-Anpassung. Gleiche Formel wie .card-benefit (identischer Wert). Desktop-Maximum unverändert. */ padding: clamp(var(--spacing-sm), 4vw, var(--spacing-lg)); border: var(--border-width-medium) solid var(--border-color-default); } .flip-card-front { background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); } .flip-card-back { background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%); transform: rotateY(180deg); } .flip-card-front h3 { /* Fluid statt 3-stufiger Kaskade (1.8rem Basis / 1.7rem ≤1280px / 1.5rem ≤1100px, floor bei 1.5rem darunter). Grenzwerte referenzieren die Projekt-Font-Size-Skala. */ font-size: clamp(var(--font-size-3xl), 2.7vw - 0.3rem, var(--font-size-4xl)); color: var(--color-primary); margin-bottom: 1rem; text-align: center; } .flip-card-front p { font-size: var(--font-size-lg); color: #999; text-align: center; line-height: 1.6; } .flip-card-back p { /* Fluid statt 3-stufiger Kaskade (1.1rem Basis / 1.05rem ≤1280px / 1rem ≤1100px, floor bei 1rem darunter). margin-bottom bleibt fix, ändert sich in der alten Kaskade nur einmalig bei ≤1100px auf denselben Wert wie hier - keine Skalierung nötig. Grenzwerte referenzieren die Projekt-Font-Size-Skala. */ font-size: clamp(var(--font-size-base), 0.9vw + 0.39rem, var(--font-size-lg)); color: #e0e0e0; text-align: center; margin-bottom: 1rem; line-height: 1.6; } .flip-card-back > a { display: inline-block; /* Kompromisswert (vorher: 0.75rem/2rem Basis, ≤1100px auf 0.6rem/1.5rem reduziert) - Differenz war klein, bewusst KEIN clamp() (gleiche Begründung wie beim Language-Switcher), stattdessen einheitlich die bisherige Mobile-Stufe übernommen. */ padding: 0.6rem 1.5rem; font-size: var(--font-size-sm); background: var(--color-primary); color: #000; text-decoration: none; border-radius: 30px; transition: all 0.3s; font-weight: 600; } .flip-card-back > a:hover { background: #fff; transform: translateY(-2px); } /* ==================== CONTACT LINKS (KONTAKT FLIP CARD) ==================== */ /* Zeilen 722-758 aus style.css */ .contact-links { display: flex; flex-direction: column; gap: 1rem; width: 100%; } .contact-links a { display: flex; align-items: center; gap: 0.8rem; /* Kompromisswert (vorher 3 Stufen: 0.8rem/1.5rem Basis, 0.6rem/1.2rem ≤1100px, 0.7rem/1rem ≤480px - letztere Stufe war nicht gleichmäßig fallend, siehe Fluid-Design-Audit. Bewusst KEIN clamp() wegen der kleinen, unregelmäßigen Differenz - stattdessen einheitlich die mittlere (≤1100px-)Stufe übernommen, gleiche Begründung wie beim Language-Switcher. */ padding: 0.6rem 1.2rem; background: var(--gradient-dark); color: #fff; text-decoration: none; border-radius: 6px; border: var(--border-width-medium) solid var(--border-color-default); box-shadow: var(--shadow-glow-white); transition: box-shadow 0.3s, color 0.3s, transform 0.3s, font-size 0.3s; font-size: var(--font-size-sm); } .contact-links a:hover { color: var(--color-primary); box-shadow: 0px 0px 25px rgba(255, 255, 255, 0.5); transform: translateY(-2px); font-size: var(--font-size-md); } .contact-links a svg { /* Kompromisswert (vorher 20px Basis, ≤1100px auf 18px reduziert) - gleiche Begründung wie oben bei .contact-links a. */ width: 18px; height: 18px; flex-shrink: 0; stroke: #fff; fill: none; transition: stroke 0.3s, transform 0.3s; } .contact-links a:hover svg { stroke: var(--color-primary); transform: scale(1.2); } /* Testimonial-Styling liegt zentral in components/testimonials.css. */ /* ==================== RESPONSIVE ==================== */ /* Zeilen 778-1045 aus style.css - Alle Homepage-relevanten Breakpoints */ @media (max-width: 1400px) { .flip-card { max-width: 380px; } } @media (max-width: 1280px) { .flip-card { max-width: 350px; } } @media (max-width: 1100px) { .flip-cards { grid-template-columns: repeat(3, minmax(280px, 1fr)); } .flip-card { max-width: 320px; height: 280px; } } @media (max-width: 1024px) { .flip-cards { grid-template-columns: repeat(2, 1fr); } .flip-card { max-width: 420px; height: 300px; } /* Bei 3 Karten in einem 2-Spalten-Grid würde die 3. Karte sonst linksbündig in einer neuen Zeile landen (Grid-Standardverhalten). Spannt stattdessen über beide Spalten und zentriert sich darin. Keine zusätzliche Eingrenzung auf den 2-Spalten-Bereich nötig: bei ≤768px (siehe Block unten) ist das Grid einspaltig, dort wirkt grid-column:1/-1 auf nur einer Spalte neutral/unschädlich. */ .flip-card:nth-child(3) { grid-column: 1 / -1; justify-self: center; } } @media (max-width: 768px) { /* Höhen-Anpassung kommt bereits von der gemeinsamen .hero-Regel */ /* .hero__content--startseite-Regel entfernt (siehe Hinweis oben in der HERO IMAGE-Sektion) - keine Ersatzregel nötig. */ .flip-cards { grid-template-columns: 1fr; } .flip-card { max-width: 100%; } } @media (max-width: 480px) { /* Höhen-Anpassung kommt bereits von der gemeinsamen .hero-Regel */ /* .hero__content--startseite- und .hero--startseite .hero__subtitle- Regeln entfernt (siehe Hinweis oben in der HERO IMAGE-Sektion) - Positionierung sowie Subtitle-Schriftgröße laufen jetzt über die zentralen, gemeinsamen Regeln in components/hero.css. */ .flip-card { height: 280px; } }