/* =================================== BMP – Page-Specific Styles =================================== */ /* ── Hero (Homepage: Atmospheric & Editorial) ── */ .hero { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; background-color: var(--color-primary); } .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__overlay { position: absolute; inset: 0; background: radial-gradient(circle at 10% 10%, rgba(201, 162, 39, 0.1) 0%, transparent 40%), radial-gradient(circle at 90% 90%, rgba(111, 182, 233, 0.1) 0%, transparent 40%), radial-gradient(circle at 50% 50%, #0A192F 0%, #020617 100%); } /* Subtle Grain Texture Overlay */ .hero::after { content: ''; position: absolute; inset: 0; opacity: 0.03; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3%3Cfilter id='noiseFilter'%3%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3%3C/filter%3%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3%3C/svg%3"); } .hero__content { position: relative; z-index: 1; padding-top: var(--nav-height); max-width: 900px; } .hero__badge { margin-bottom: var(--space-xl); display: inline-block; } .hero__title { color: var(--color-white); line-height: var(--lh-tight); margin-bottom: var(--space-xl); text-wrap: balance; } .hero__subtitle { font-size: var(--fs-body-lg); color: rgba(255, 255, 255, 0.7); max-width: 600px; line-height: var(--lh-relaxed); margin-bottom: var(--space-2xl); } /* ── Split Layouts (Editorial Grid) ── */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5xl); align-items: center; } .split__content .overline { color: var(--color-accent); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.2em; font-size: var(--fs-xs); margin-bottom: var(--space-md); display: block; } .split__visual { position: relative; padding: var(--space-xl); } .split__image-stack { position: relative; height: 500px; border-left: 1px solid var(--color-accent); } .split__image-card { position: absolute; background: var(--color-secondary); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: var(--shadow-xl); } .split__image-card--1 { top: 10%; left: 10%; width: 80%; height: 70%; z-index: 1; } .split__image-card--2 { bottom: 5%; right: 0; width: 50%; height: 40%; z-index: 2; border-color: var(--color-accent); } /* ── Feature Grid Refinement ── */ .feature-box { text-align: left; padding: var(--space-xl); border: 1px solid rgba(255, 255, 255, 0.05); transition: all var(--transition-base); } .feature-box:hover { background: rgba(255, 255, 255, 0.02); border-color: var(--color-accent); } /* ── Steps ── */ .step__number { font-family: var(--font-display); font-size: var(--fs-h1); color: var(--color-accent-soft); line-height: 1; margin-bottom: var(--space-sm); } .criteria-card { padding: var(--space-3xl); text-align: left; background: var(--color-white); border: 1px solid var(--color-gray-light); } .criteria-card:hover { box-shadow: var(--shadow-xl); border-color: var(--color-accent); } .criteria-card__icon { font-size: 2rem; color: var(--color-accent); margin-bottom: var(--space-lg); } .criteria-card__title { font-family: var(--font-display); font-size: var(--fs-h4); color: var(--color-dark); margin-bottom: var(--space-sm); } .criteria-card__text { font-size: var(--fs-small); color: var(--color-gray-dark); line-height: var(--lh-relaxed); } /* ── Application Form ── */ .form-card { background: var(--color-white); border-radius: var(--radius-xl); padding: var(--space-3xl); box-shadow: var(--shadow-xl); border: 1px solid var(--color-gray-light); max-width: 800px; margin: 0 auto; } .form-card__header { text-align: center; margin-bottom: var(--space-2xl); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); } @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } } /* ── Preistraeger History Table ── */ .history-table { width: 100%; border-collapse: collapse; background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .history-table th { background: var(--color-primary); color: var(--color-white); padding: var(--space-md) var(--space-lg); text-align: left; font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; } .history-table td { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-gray-light); font-size: var(--fs-body); color: var(--color-dark-soft); } .history-table tr:last-child td { border-bottom: none; } .history-table tr:hover td { background: var(--color-gray-lighter); } /* ── Jury Page ── */ .jury-intro { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-3xl); align-items: center; } .jury-intro__visual { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); border-radius: var(--radius-xl); padding: var(--space-3xl); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--color-white); text-align: center; min-height: 250px; } .jury-intro__visual span { font-size: 4rem; margin-bottom: var(--space-md); } @media (max-width: 768px) { .jury-intro { grid-template-columns: 1fr; } } /* ── Presse / Blog Grid ── */ .blog-card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); transition: all var(--transition-base); border: 1px solid var(--color-gray-light); } .blog-card:hover { box-shadow: var(--shadow-xl); transform: translateY(-4px); border-color: var(--color-primary); } .blog-card__image { height: 200px; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); display: flex; align-items: center; justify-content: center; font-size: 3rem; } .blog-card__body { padding: var(--space-xl); } .blog-card__category { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-xs); } .blog-card__title { font-family: var(--font-display); font-size: var(--fs-h4); color: var(--color-dark); margin-bottom: var(--space-sm); line-height: var(--lh-tight); } .blog-card__excerpt { font-size: var(--fs-small); color: var(--color-gray-dark); line-height: var(--lh-relaxed); margin-bottom: var(--space-md); } .blog-card__meta { font-size: var(--fs-xs); color: var(--color-gray-dark); display: flex; gap: var(--space-md); } /* ── Kontakt Page ── */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); } .contact-info { display: flex; flex-direction: column; gap: var(--space-xl); } .contact-item { display: flex; gap: var(--space-md); padding: var(--space-lg); background: var(--color-white); border-radius: var(--radius-lg); border: 1px solid var(--color-gray-light); transition: all var(--transition-base); } .contact-item:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); } .contact-item__icon { width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(11, 77, 162, 0.08); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; } .contact-item__title { font-weight: var(--fw-semibold); color: var(--color-dark); margin-bottom: var(--space-2xs); } .contact-item__text { font-size: var(--fs-small); color: var(--color-gray-dark); margin-bottom: 0; } @media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } } /* ── Datenschutz Page ── */ .legal-content { max-width: 800px; margin: 0 auto; } .legal-content h2 { margin-top: var(--space-3xl); margin-bottom: var(--space-md); color: var(--color-primary); font-size: var(--fs-h3); } .legal-content h3 { margin-top: var(--space-2xl); margin-bottom: var(--space-sm); } .legal-content p { margin-bottom: var(--space-md); color: var(--color-gray-dark); line-height: var(--lh-relaxed); } .legal-content ul { margin-bottom: var(--space-md); padding-left: var(--space-xl); } .legal-content ul li { list-style: disc; color: var(--color-gray-dark); margin-bottom: var(--space-xs); line-height: var(--lh-relaxed); } /* ── Fristen Banner ── */ .deadline-banner { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); color: var(--color-dark); border-radius: var(--radius-xl); padding: var(--space-2xl) var(--space-3xl); display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); flex-wrap: wrap; } .deadline-banner__content h3 { color: var(--color-dark); margin-bottom: var(--space-xs); } .deadline-banner__content p { color: rgba(16, 24, 40, 0.7); margin-bottom: 0; } .deadline-banner .btn { flex-shrink: 0; } @media (max-width: 640px) { .deadline-banner { flex-direction: column; text-align: center; padding: var(--space-xl); } } /* ── Sponsor Grid ── */ .sponsor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-lg); } .sponsor-card { background: var(--color-white); border: 1px solid var(--color-gray-light); border-radius: var(--radius-lg); padding: var(--space-xl); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 120px; transition: all var(--transition-base); } .sponsor-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); transform: translateY(-2px); } .sponsor-card__icon { font-size: 2rem; margin-bottom: var(--space-sm); } .sponsor-card__name { font-weight: var(--fw-semibold); font-size: var(--fs-small); color: var(--color-dark); }