US2.1: Datenstruktur, Komponenten-Aufbau, Styling, Testing

2026-09-24 16:33:09 +00:00 · 2026-09-24 16:33:09 +00:00 · 5851668bd8
parent c4ccd8340f
commit 5851668bd8
1 changed files with 123 additions and 0 deletions
--- a/src/styles/packages.css
+++ b/src/styles/packages.css
@ -0,0 +1,123 @@
+:root {
+    --bg-dark: #0d0d1a;
+    --bg-card: #1a1a2e;
+    --accent-teal: #10b981;
+    --text-white: #ffffff;
+    --text-lightgray: #f8fafc;
+    --text-muted: #94a3b8;
+
+    --font-display: "Playfair Display", serif;
+    --font-body: "Inter", system-ui, sans-serif;
+}
+
+.packages-section {
+    background-color: var(--bg-dark);
+    padding: 4rem 2rem;
+    font-family: var(--font-body);
+    color: var(--text-lightgray);
+}
+
+.packages-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.package-card {
+    background-color: var(--bg-card);
+    border-radius: 12px;
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.package-type-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.package-type {
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+}
+
+.package-highlight {
+    background-color: rgba(16, 185, 129, 0.1);
+    color: var(--accent-teal);
+    font-size: 0.7rem;
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.package-title {
+    font-family: var(--font-display);
+    font-size: 1.75rem;
+    color: var(--text-white);
+    margin-bottom: 1rem;
+    line-height: 1.2;
+}
+
+.package-desc {
+    color: var(--text-lightgray);
+    font-size: 0.95rem;
+    line-height: 1.5;
+    margin-bottom: 2rem;
+}
+
+.package-details-box {
+    background-color: rgba(255, 255, 255, 0.03);
+    border-radius: 8px;
+    padding: 1.5rem;
+    margin-bottom: 2rem;
+    flex-grow: 1; /* Schiebt den Button immer ganz nach unten */
+}
+
+.detail-item {
+    margin-bottom: 1.25rem;
+}
+
+.detail-item:last-child {
+    margin-bottom: 0;
+}
+
+.detail-title {
+    color: var(--text-white);
+    font-weight: 600;
+    font-size: 0.9rem;
+    margin-bottom: 0.5rem;
+}
+
+.detail-text {
+    color: var(--text-muted);
+    font-size: 0.85rem;
+    line-height: 1.5;
+}
+
+.package-btn {
+    display: block;
+    text-align: center;
+    background-color: transparent;
+    color: var(--text-white);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 1rem;
+    border-radius: 8px;
+    text-decoration: none;
+    font-weight: 500;
+    transition: all 0.2s ease;
+}
+
+.package-btn:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+    border-color: var(--accent-teal);
+    color: var(--accent-teal);
+}