/* ============================================================ Gewinnspiel Landingpage – Hauptstylesheet Mobile-first | Farben: Rot #C8102E, Dunkelblau #1A3557 ============================================================ */ /* --- Google Fonts import via preconnect (in HTML) --- Roboto Condensed wird im eingebunden */ :root { --rot: #C8102E; --rot-dunkel: #a00d24; --blau: #1A3557; --blau-dunkel: #122540; --weiss: #ffffff; --grau-hell: #f4f4f4; --grau-border: #d9d9d9; --grau-text: #555555; --erfolg: #1e7e34; --fehler: #C8102E; --schatten: 0 4px 20px rgba(0, 0, 0, 0.15); --radius: 10px; } /* --- Reset & Basis --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif; background: var(--grau-hell); color: #222; line-height: 1.5; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--rot); text-decoration: none; } a:hover { text-decoration: underline; } /* --- Layout-Wrapper --- */ .seite-wrapper { max-width: 900px; margin: 0 auto; background: var(--weiss); box-shadow: var(--schatten); } /* ============================================================ BLAUER STREIFEN + LOGO-BALKEN ============================================================ */ .top-streifen { height: 15px; background: var(--blau); width: 100%; } .logo-balken { background: #D9DADB; padding: 16px 20px; display: flex; align-items: center; justify-content: center; gap: 4%; flex-wrap: nowrap; } .logo-balken img { flex: 1 1 0; min-width: 0; max-width: 28%; height: auto; max-height: 120px; object-fit: contain; display: block; } @media (min-width: 768px) { .logo-balken { padding: 24px 40px; gap: 5%; } .logo-balken img { max-height: 180px; } } /* ============================================================ HERO-SEKTION ============================================================ */ .hero { position: relative; background: #0d1b2a; overflow: hidden; padding: 0; min-height: 280px; display: flex; align-items: stretch; } .hero-hintergrund { position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 30%, rgba(26, 53, 87, 0.6) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(200, 16, 46, 0.15) 0%, transparent 50%), linear-gradient(135deg, #0d1b2a 0%, #1a3557 100%); z-index: 0; } /* Wassertropfen-Textur via CSS */ .hero-hintergrund::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 15% 25%, rgba(255,255,255,0.04) 2px, transparent 2px), radial-gradient(circle at 40% 60%, rgba(255,255,255,0.06) 3px, transparent 3px), radial-gradient(circle at 70% 20%, rgba(255,255,255,0.05) 2px, transparent 2px), radial-gradient(circle at 85% 70%, rgba(255,255,255,0.04) 4px, transparent 4px), radial-gradient(circle at 55% 45%, rgba(255,255,255,0.03) 2px, transparent 2px), radial-gradient(circle at 30% 85%, rgba(255,255,255,0.05) 3px, transparent 3px); z-index: 1; } .hero-inhalt { position: relative; z-index: 2; padding: 30px 20px 30px; width: 100%; } .hero-partner-logos { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .hero-partner-logos img { height: 38px; width: auto; filter: brightness(0) invert(1); opacity: 0.9; } .hero-badge { display: inline-block; background: var(--rot); color: var(--weiss); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 12px; border-radius: 3px; margin-bottom: 14px; } .hero-titel { font-size: clamp(1.8rem, 6vw, 3rem); font-weight: 900; color: var(--weiss); line-height: 1.1; margin-bottom: 10px; text-transform: uppercase; letter-spacing: -0.01em; } .hero-titel span { color: var(--rot); } .hero-subtitel { font-size: clamp(0.9rem, 2.5vw, 1.05rem); color: rgba(255, 255, 255, 0.75); font-weight: 400; letter-spacing: 0.03em; } /* ============================================================ GEWINNSPIEL-INFO-KACHEL ============================================================ */ .info-kachel { background: var(--rot); color: var(--weiss); padding: 22px 20px; display: flex; flex-direction: column; gap: 14px; } .info-kachel-haupttitel { font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 900; text-transform: uppercase; line-height: 1.15; } .info-kachel-haupttitel span { display: block; font-size: clamp(1.6rem, 6vw, 2.4rem); color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.2); } .info-kachel-meta { display: flex; flex-direction: column; gap: 8px; font-size: 0.92rem; border-top: 1px solid rgba(255,255,255,0.3); padding-top: 12px; } .info-kachel-meta strong { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; } /* ============================================================ PREISE-SEKTION ============================================================ */ .preise-sektion { background: var(--blau); padding: 24px 20px; } .preise-titel { color: rgba(255,255,255,0.7); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; text-align: center; } .preise-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } .preis-kachel { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius); padding: 16px; text-align: center; color: var(--weiss); } .preis-kachel-nummer { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; margin-bottom: 4px; } .preis-kachel-name { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; } .preis-kachel-wert { font-size: 1.5rem; font-weight: 900; color: #ffd700; line-height: 1; } /* ============================================================ PARTNER-SEKTION ============================================================ */ .partner-sektion { background: var(--grau-hell); padding: 28px 20px; } .partner-titel { text-align: center; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--grau-text); margin-bottom: 16px; } .partner-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } .partner-kachel { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); overflow: hidden; display: flex; flex-direction: column; } .partner-kachel-header { padding: 14px 18px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .partner-kachel--rot .partner-kachel-header { background: var(--rot); } .partner-kachel--blau .partner-kachel-header { background: var(--blau); } .partner-logo-wrap img { height: 44px; width: auto; filter: brightness(0) invert(1); } .partner-kachel-kategorie { font-size: 0.78rem; font-style: italic; color: rgba(255,255,255,0.8); text-align: right; line-height: 1.3; } .partner-kachel-body { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-grow: 1; } .partner-kachel-slogan { font-size: 1rem; font-weight: 700; color: var(--blau); line-height: 1.3; } .vcf-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--blau); color: var(--weiss); font-size: 0.78rem; font-weight: 700; padding: 8px 14px; border-radius: 6px; white-space: nowrap; text-decoration: none; transition: background 0.2s; border: none; cursor: pointer; } .vcf-btn:hover { background: var(--blau-dunkel); text-decoration: none; color: var(--weiss); } .partner-kachel--rot .partner-kachel-body .vcf-btn { background: var(--rot); } .partner-kachel--rot .partner-kachel-body .vcf-btn:hover { background: var(--rot-dunkel); } /* ============================================================ FORMULAR-SEKTION ============================================================ */ .formular-sektion { padding: 30px 20px; background: var(--weiss); } .formular-sektion-titel { font-size: clamp(1.3rem, 4vw, 1.7rem); font-weight: 900; color: var(--blau); text-transform: uppercase; margin-bottom: 6px; line-height: 1.2; } .formular-sektion-untertitel { font-size: 0.9rem; color: var(--grau-text); margin-bottom: 24px; } /* Fehler-Box */ .fehler-box { background: #fef0f0; border: 2px solid var(--fehler); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px; } .fehler-box ul { list-style: none; display: flex; flex-direction: column; gap: 4px; } .fehler-box ul li::before { content: '⚠ '; } .fehler-box ul li { font-size: 0.9rem; color: var(--fehler); font-weight: 600; } /* Formular-Gruppe */ .form-gruppe { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; } .form-gruppe label { font-size: 0.85rem; font-weight: 700; color: var(--blau); text-transform: uppercase; letter-spacing: 0.05em; } .form-gruppe label .pflicht { color: var(--rot); margin-left: 2px; } .form-gruppe label .optional { font-size: 0.75rem; font-weight: 400; color: var(--grau-text); text-transform: none; margin-left: 4px; } .form-gruppe input[type="text"], .form-gruppe input[type="email"], .form-gruppe input[type="tel"], .form-gruppe select { width: 100%; padding: 12px 14px; border: 2px solid var(--grau-border); border-radius: 7px; font-family: inherit; font-size: 1rem; color: #222; background: var(--weiss); transition: border-color 0.2s, box-shadow 0.2s; -webkit-appearance: none; appearance: none; } .form-gruppe input:focus, .form-gruppe select:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px rgba(26, 53, 87, 0.12); } .form-gruppe select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231A3557' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } /* Zweispaltig auf größeren Screens */ .form-row { display: grid; grid-template-columns: 1fr; gap: 0; } /* Einwilligungs-Kachel */ .einwilligungs-kachel { background: var(--grau-hell); border: 2px solid var(--grau-border); border-radius: var(--radius); padding: 20px; margin: 24px 0; display: flex; flex-direction: column; gap: 14px; } .einwilligungs-kachel-titel { font-size: 0.85rem; font-weight: 900; color: var(--blau); text-transform: uppercase; letter-spacing: 0.08em; padding-bottom: 10px; border-bottom: 2px solid var(--grau-border); } .checkbox-gruppe { display: flex; align-items: flex-start; gap: 12px; } .checkbox-gruppe input[type="checkbox"] { width: 20px; height: 20px; min-width: 20px; margin-top: 2px; accent-color: var(--rot); cursor: pointer; } .checkbox-gruppe label { font-size: 0.88rem; color: #333; cursor: pointer; line-height: 1.5; } .checkbox-gruppe label a { color: var(--rot); font-weight: 600; } .checkbox-gruppe--pflicht label::after { content: ' *'; color: var(--rot); font-weight: 700; } /* Submit-Button */ .submit-btn { width: 100%; padding: 16px 24px; background: var(--rot); color: var(--weiss); border: none; border-radius: var(--radius); font-family: inherit; font-size: 1.1rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: background 0.2s, transform 0.1s; display: flex; align-items: center; justify-content: center; gap: 10px; } .submit-btn:hover { background: var(--rot-dunkel); } .submit-btn:disabled { background: #aaa; opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Pflichtfeld-Markierung: rot bis ausgefüllt/angehakt */ input.pflicht-ausstehend, select.pflicht-ausstehend { border-color: var(--rot) !important; box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.12) !important; } input[type="checkbox"].pflicht-ausstehend { outline: 2px solid var(--rot); outline-offset: 2px; } /* Fehler-Hervorhebung nach Submit-Versuch */ .feld-fehler { border-color: var(--rot) !important; box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.18) !important; } .submit-btn:active { transform: scale(0.99); } .pflicht-hinweis { font-size: 0.78rem; color: var(--grau-text); margin-top: 10px; text-align: center; } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--blau-dunkel); color: rgba(255,255,255,0.7); padding: 24px 20px; font-size: 0.8rem; line-height: 1.6; } .footer-messe { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.1); flex-wrap: wrap; } .footer-messe-logo { font-size: 1.2rem; font-weight: 900; color: var(--weiss); letter-spacing: -0.01em; } .footer-messe-logo span { color: var(--rot); } .footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; } .footer-links a { color: rgba(255,255,255,0.6); font-size: 0.78rem; } .footer-links a:hover { color: var(--weiss); } .footer-hinweise { font-size: 0.75rem; opacity: 0.65; line-height: 1.7; } /* ============================================================ DANKE-SEITE ============================================================ */ .danke-sektion { padding: 40px 20px; text-align: center; background: var(--weiss); } .danke-icon { font-size: 4rem; margin-bottom: 16px; display: block; } .danke-titel { font-size: clamp(1.5rem, 5vw, 2.2rem); font-weight: 900; color: var(--blau); text-transform: uppercase; margin-bottom: 10px; } .danke-text { font-size: 1rem; color: var(--grau-text); max-width: 480px; margin: 0 auto 28px; line-height: 1.7; } .zurueck-btn { display: inline-block; padding: 12px 28px; background: var(--blau); color: var(--weiss); border-radius: var(--radius); font-weight: 700; font-size: 0.95rem; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; } .zurueck-btn:hover { background: var(--blau-dunkel); color: var(--weiss); text-decoration: none; } /* ============================================================ ADMIN-BEREICH ============================================================ */ .admin-wrapper { max-width: 1600px; margin: 0 auto; padding: 0 20px; } .admin-header { background: var(--blau); color: var(--weiss); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .admin-header-titel { font-size: 1.1rem; font-weight: 700; } .admin-nav a { color: rgba(255,255,255,0.8); font-size: 0.88rem; padding: 6px 12px; border-radius: 5px; transition: background 0.2s; text-decoration: none; } .admin-nav a:hover { background: rgba(255,255,255,0.1); color: var(--weiss); } .admin-main { padding: 24px 16px; } .admin-stats { display: flex; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; } .admin-stat-kachel { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); padding: 16px 24px; flex: 1; min-width: 140px; } .admin-stat-wert { font-size: 2rem; font-weight: 900; color: var(--blau); } .admin-stat-label { font-size: 0.8rem; color: var(--grau-text); text-transform: uppercase; letter-spacing: 0.06em; } .admin-tabelle-wrap { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); overflow-x: auto; } .admin-tabelle-kopf { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 2px solid var(--grau-border); gap: 12px; flex-wrap: wrap; } .admin-tabelle-kopf h2 { font-size: 1rem; font-weight: 700; color: var(--blau); } .csv-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--erfolg); color: var(--weiss); padding: 9px 18px; border-radius: 7px; font-size: 0.88rem; font-weight: 700; text-decoration: none; transition: filter 0.2s; } .csv-btn:hover { filter: brightness(0.9); color: var(--weiss); text-decoration: none; } table.admin-tabelle { width: 100%; border-collapse: collapse; font-size: 0.85rem; } table.admin-tabelle th { background: var(--blau); color: var(--weiss); padding: 10px 12px; text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } table.admin-tabelle td { padding: 10px 12px; border-bottom: 1px solid var(--grau-border); color: #333; vertical-align: middle; } table.admin-tabelle tr:nth-child(even) td { background: var(--grau-hell); } table.admin-tabelle tr:hover td { background: #e8eef5; } .badge-ja { background: #d4edda; color: #155724; border-radius: 4px; padding: 2px 8px; font-size: 0.75rem; font-weight: 700; } .badge-nein { background: #f8d7da; color: #721c24; border-radius: 4px; padding: 2px 8px; font-size: 0.75rem; font-weight: 700; } /* Admin Login */ .admin-login-seite { min-height: 100vh; background: var(--blau); display: flex; align-items: center; justify-content: center; padding: 20px; } .admin-login-kachel { background: var(--weiss); border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); padding: 36px 32px; width: 100%; max-width: 400px; } .admin-login-kachel-logo { text-align: center; margin-bottom: 24px; } .admin-login-kachel-logo .logo-text { font-size: 1.4rem; font-weight: 900; color: var(--blau); text-transform: uppercase; } .admin-login-kachel-logo .logo-sub { font-size: 0.78rem; color: var(--grau-text); } .admin-login-titel { font-size: 1.1rem; font-weight: 700; color: var(--blau); margin-bottom: 20px; text-align: center; } .admin-login-fehler { background: #fef0f0; border: 2px solid var(--rot); border-radius: 7px; padding: 10px 14px; color: var(--rot); font-size: 0.88rem; font-weight: 600; margin-bottom: 16px; text-align: center; } /* ============================================================ TEXT-SEITEN (Teilnahmebedingungen, Datenschutz, Impressum) ============================================================ */ .text-sektion { padding: 24px 16px 40px; background: #eef1f5; } /* Zurück-Navigation oben */ .text-nav-zurueck { display: inline-flex; align-items: center; gap: 6px; color: var(--blau); font-size: 0.85rem; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 14px; padding: 6px 4px; transition: color 0.2s; } .text-nav-zurueck:hover { color: var(--rot); text-decoration: none; } /* Seitentitel */ .text-seitentitel { font-size: clamp(1.4rem, 5vw, 2rem); font-weight: 900; color: var(--blau); text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.1; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 3px solid var(--rot); } /* Kachel pro Abschnitt */ .text-kachel { background: var(--weiss); border-radius: var(--radius); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08); margin-bottom: 10px; overflow: hidden; } .text-kachel-kopf { background: var(--blau); color: var(--weiss); padding: 10px 18px; font-size: 0.78rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.3; } .text-kachel-inhalt { padding: 16px 18px; } .text-kachel-inhalt > *:last-child { margin-bottom: 0; } .text-kachel-inhalt p { font-size: 0.92rem; color: #333; line-height: 1.7; margin-bottom: 10px; } .text-kachel-inhalt ul, .text-kachel-inhalt ol { font-size: 0.92rem; color: #333; line-height: 1.7; margin: 0 0 10px 20px; } .text-kachel-inhalt li { margin-bottom: 5px; } .text-kachel-inhalt li:last-child { margin-bottom: 0; } .text-kachel-inhalt strong { color: #111; } .text-kachel-inhalt a { color: var(--rot); word-break: break-all; } /* Unterabschnitt h3 innerhalb einer Kachel */ .text-kachel-inhalt h3 { font-size: 0.78rem; font-weight: 900; color: var(--blau); text-transform: uppercase; letter-spacing: 0.07em; margin: 18px 0 8px; padding: 7px 10px; background: var(--grau-hell); border-left: 3px solid var(--blau); border-radius: 0 5px 5px 0; } .text-kachel-inhalt h3:first-child { margin-top: 0; } /* Unternehmens-Kachel */ .unternehmen-kachel { background: var(--grau-hell); border-left: 4px solid var(--blau); border-radius: 0 8px 8px 0; padding: 12px 16px; margin-bottom: 10px; font-size: 0.9rem; line-height: 1.8; } .unternehmen-kachel:last-child { margin-bottom: 0; } .unternehmen-kachel-name { display: block; font-weight: 900; color: var(--blau); font-size: 0.95rem; margin-bottom: 4px; } .unternehmen-kachel a { color: var(--rot); word-break: break-all; } /* Tabelle in Kachel */ .text-kachel-inhalt table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 4px 0 0; } .text-kachel-inhalt table th { background: var(--blau); color: var(--weiss); padding: 9px 12px; text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; } .text-kachel-inhalt table td { padding: 9px 12px; border-bottom: 1px solid var(--grau-border); color: #333; vertical-align: top; line-height: 1.5; } .text-kachel-inhalt table tr:last-child td { border-bottom: none; } .text-kachel-inhalt table tr:nth-child(even) td { background: var(--grau-hell); } /* Stand-Zeile */ .text-stand-kachel { font-size: 0.8rem; color: var(--grau-text); font-style: italic; text-align: right; padding: 10px 0 0; } /* Zurück-Button unten */ .text-sektion-zurueck { text-align: center; margin-top: 20px; } @media (min-width: 600px) { .text-sektion { padding: 28px 24px 48px; } .text-kachel-inhalt { padding: 20px 24px; } } @media (min-width: 768px) { .text-sektion { padding: 36px 40px 56px; } } /* ============================================================ RESPONSIVE – Tablet ab 600px ============================================================ */ @media (min-width: 600px) { .preise-grid { grid-template-columns: repeat(3, 1fr); } .partner-grid { grid-template-columns: repeat(3, 1fr); } .partner-kachel { flex-direction: column; } .partner-kachel-body { flex-direction: column; align-items: flex-start; gap: 14px; } .form-row { grid-template-columns: 1fr 1fr; gap: 16px; } } /* ============================================================ RESPONSIVE – Desktop ab 768px ============================================================ */ @media (min-width: 768px) { .hero-inhalt { padding: 40px 40px 40px; } .info-kachel { padding: 28px 40px; flex-direction: row; align-items: center; justify-content: space-between; } .info-kachel-meta { border-top: none; border-left: 1px solid rgba(255,255,255,0.3); padding-top: 0; padding-left: 24px; min-width: 220px; } .preise-sektion { padding: 28px 40px; } .partner-sektion { padding: 32px 40px; } .formular-sektion { padding: 40px 40px; } .footer { padding: 28px 40px; } .submit-btn { width: auto; min-width: 280px; } }