/* --- Basis & Variablen --- */ /* Importiere Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap'); /* CSS Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Basis-Spacer & Goldener Schnitt (optional) */ :root { --base-spacing: 20px; --spacing-large: 32px; /* ca. 20px * 1.618 */ /* Website-Farbschema (Hintergrundfarbe etc.) */ --bg-color: #fdfdfd; --text-color: #333; --primary-color: #333; --secondary-color: #ff2d55; --accent-color: #333; --shadow-light: rgba(0, 0, 0, 0.1); --shadow-dark: rgba(0, 0, 0, 0.3); /* Container-Breite (Boutique-Ansatz) */ --container-width: 960px; } /* Dark Mode Overrides – werden aktiv, wenn die Klasse .dark-mode am (oder ) angehängt ist */ .dark-mode { --bg-color: #121212; --text-color: #e0e0e0; --primary-color: #0a84ff; /* Hier können Sie auch andere Werte wählen */ --secondary-color: #ff453a; --accent-color: #ff9f0a; --shadow-light: rgba(0, 0, 0, 0.7); --shadow-dark: rgba(0, 0, 0, 0.9); } /* Dark Mode (Systempräferenz) */ /* @media (prefers-color-scheme: dark) { :root { --bg-color: #121212; --text-color: #e0e0e0; --primary-color: #0a84ff; --secondary-color: #ff453a; --accent-color: #ff9f0a; --shadow-light: rgba(0, 0, 0, 0.7); --shadow-dark: rgba(0, 0, 0, 0.9); } } */ /* Basis-Stile */ body { font-family: 'Poppins', sans-serif; line-height: 1.6; background-color: var(--bg-color); color: var(--text-color); } /* Container für zentrierte Inhalte mit 20px Rand */ .container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--base-spacing); } /* --- Header --- */ header { padding: calc(var(--base-spacing) * 1.5) 0; /* ca. 30px oben/unten */ text-align: center; position: sticky; top: 0; z-index: 1000; background-color: var(--bg-color); /* Starke, eigene Hintergrundfarbe, identisch mit der Website */ border-bottom: 1px solid var(--shadow-dark); } h1 { font-size: 4rem !important; font-weight: 900 !important; letter-spacing: -0.5rem; } h2, h3, h4, h5, h6 { font-weight: 100 !important; } /* --- Footer --- */ footer { padding: var(--base-spacing); text-align: center; font-size: 0.9rem; position: sticky; bottom: 0; background-color: var(--bg-color); /* Gleiche, starke Hintergrundfarbe */ border-top: 1px solid var(--shadow-dark); } /* --- Main Content & Video-Posts --- */ main { padding: calc(var(--base-spacing) * 1.5) 0; } /* Video Post Card – Boutique-Look */ .post, .tiktok-group { background-color: #fff; border-radius: 8px; margin: 0 auto var(--spacing-large); box-shadow: 0 4px 6px var(--shadow-light); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; max-width: 100%; } @media (prefers-color-scheme: dark) { .post, .tiktok-group { background-color: #1e1e1e; } } .post:hover, .tiktok-group:hover { transform: translateY(-4px); box-shadow: 0 6px 10px var(--shadow-dark); } /* Video Container */ .video-container { position: relative; width: 100%; overflow: hidden; } .video-container iframe, .video-container blockquote { width: 100% !important; border: none; display: block; border-radius: 1rem !important; } /* YouTube iframe – Beibehaltung des Seitenverhältnisses (16:9) */ .youtube iframe { height: 500px; } @media (max-width: 600px) { .youtube iframe { height: 300px; } } /* TikTok spezifisch – Feste Breite, zentriert */ .video-container.tiktok { max-width: 350px; margin: 0 auto; } /* TikTok Group: Responsive Layout */ .tiktok-group { display: flex; flex-direction: column; align-items: center; padding: var(--base-spacing); } @media (min-width: 768px) { .tiktok-group { flex-direction: row; justify-content: space-between; } } /* Hashtag-Stile – Elegant und dezent */ .hashtags { font-size: 0.9rem; color: var(--accent-color); text-align: center; padding: 10px 125px 30px 125px; } /* Spotify Release Embed */ .spotify-release { /* Limit width to embed size and center the section */ max-width: 300px; margin: 0 auto var(--spacing-large); text-align: center; } .spotify-release iframe { border-radius: 8px; box-shadow: 0 4px 6px var(--shadow-light); /* Make iframe responsive within its container */ width: 100%; height: auto; } /* Release Tabs for streaming platforms */ .release-tabs { max-width: 300px; margin: 0 auto var(--spacing-large); } .release-tabs .tab-buttons { display: flex; justify-content: center; margin-bottom: var(--base-spacing); } .release-tabs .tab-button { background: none; border: 1px solid var(--primary-color); color: var(--primary-color); padding: 8px 16px; cursor: pointer; margin: 0 4px; border-radius: 4px 4px 0 0; transition: background-color 0.3s; } .release-tabs .tab-button.active { background-color: var(--primary-color); color: #fff; } /* Hide all tab contents by default */ .release-tabs .tab-content { display: none !important; background-color: #fff; padding: var(--base-spacing); border: 1px solid var(--shadow-dark); border-top: none; border-radius: 0 0 8px 8px; } .release-tabs .tab-content.active { display: block !important; } .release-tabs iframe { width: 100%; height: 380px; border-radius: 8px; box-shadow: 0 4px 6px var(--shadow-light); } /* --- Admin-Bereich (unverändert, Boutique-Anmutung beibehalten) --- */ .admin-container { max-width: 800px; margin: var(--spacing-large) auto; padding: var(--spacing-large); background-color: #fff; border-radius: 8px; box-shadow: 0 4px 6px var(--shadow-light); } @media (prefers-color-scheme: dark) { .admin-container { background-color: #1e1e1e; } } .admin-container h1, .admin-container h2 { text-align: center; margin-bottom: var(--base-spacing); } .admin-container form { margin-bottom: var(--spacing-large); } .admin-container input[type="text"], .admin-container input[type="password"] { width: 100%; padding: var(--base-spacing); margin-bottom: var(--base-spacing); border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; } .admin-container button { padding: var(--base-spacing) calc(var(--base-spacing) * 1.5); background-color: var(--primary-color); border: none; color: #fff; font-size: 1rem; cursor: pointer; border-radius: 4px; transition: background-color 0.3s ease; } .admin-container button:hover { background-color: var(--secondary-color); } .admin-container table { width: 100%; border-collapse: collapse; margin-top: var(--base-spacing); } .admin-container table th, .admin-container table td { border: 1px solid #ddd; padding: var(--base-spacing); text-align: center; } .admin-container table th { background-color: var(--primary-color); color: #fff; } .admin-login { max-width: 400px; margin: 100px auto; padding: var(--spacing-large); border-radius: 8px; background-color: #fff; box-shadow: 0 4px 6px var(--shadow-light); } @media (prefers-color-scheme: dark) { .admin-login { background-color: #1e1e1e; } } .error { color: var(--secondary-color); font-weight: bold; text-align: center; margin-bottom: var(--base-spacing); } .pagination { text-align: center; margin: 1rem 0; } .pagination a, .pagination span { display: inline-block; margin: 0 5px; padding: 8px 12px; width: 40px; color: var(--primary-color); text-decoration: none; border: 1px solid var(--primary-color); border-radius: 4px; } .pagination span.current { background-color: var(--primary-color); color: #fff; }