/* ==========================================================================
HARPSTEDTER BÜRGERSCHÜTZEN – TEMPLATE CSS
Mobile First · Design Tokens · Keine Duplikate
========================================================================== */
/* ==========================================================================
1. DESIGN TOKENS
========================================================================== */
:root {
/* Harpstedter Farbpalette */
--h-blue: #0A2342;
--h-blue-light: #173f70;
--h-gold: #C5A059;
--h-gold-light: #DFBE7B;
--h-silver: #E0E6ED;
--h-white: #FFFFFF;
--h-bg: #F8F9FA;
--h-text: #2C3E50;
--h-text-light: #6C7A89;
/* Rott Farben */
--rott-1: #c0392b;
--rott-2: #d35400;
--rott-3: #2980b9;
--rott-4: #27ae60;
/* Typografie */
--font-heading: 'Playfair Display', serif;
--font-body: 'Source Sans 3', sans-serif;
/* Spacing (fluid) */
--space-xs: clamp(8px, 1vw, 12px);
--space-sm: clamp(16px, 2vw, 24px);
--space-md: clamp(24px, 3vw, 40px);
--space-lg: clamp(40px, 5vw, 80px);
--space-xl: clamp(60px, 7vw, 120px);
/* Layout */
--container-max: 1280px;
--container-px: 20px;
/* Header */
--header-h: 70px;
/* Hero Höhen */
--hero-h: clamp(420px, 65vh, 780px);
--hero-sub-h: clamp(160px, 28vh, 380px);
--map-h: clamp(380px, 55vh, 700px);
/* Typografie Sizes (fluid) */
--text-h1: clamp(2rem, 5vw, 4.5rem);
--text-h2: clamp(1.6rem, 3vw, 2.8rem);
--text-h3: clamp(1.2rem, 2vw, 1.8rem);
--text-body: clamp(1rem, 1.1vw, 1.15rem);
}
/* ==========================================================================
2. RESET & BASE
========================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
background-color: var(--h-bg);
color: var(--h-text);
line-height: 1.6;
font-size: var(--text-body);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.2; }
img { max-width: 100%; height: auto; display: block; }
/* ==========================================================================
3. UTILITIES
========================================================================== */
.container {
max-width: var(--container-max);
margin: 0 auto;
padding-left: var(--container-px);
padding-right: var(--container-px);
}
.section { padding: var(--space-lg) 0; }
.section-header { text-align: center; margin-bottom: var(--space-lg); }
.section-header h2 { color: var(--h-blue); font-size: var(--text-h2); margin-bottom: 15px; }
.section-divider { width: 80px; height: 3px; background-color: var(--h-gold); margin: 0 auto; }
.bg-gray { background-color: var(--h-bg); border-top: 1px solid var(--h-silver); border-bottom: 1px solid var(--h-silver); }
/* ==========================================================================
4. BUTTONS
========================================================================== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px 28px; font-weight: 700; border-radius: 4px;
text-transform: uppercase; letter-spacing: 1px; font-size: 0.85rem;
cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent;
}
.btn-primary { background-color: var(--h-gold); color: var(--h-blue); }
.btn-primary:hover { background-color: var(--h-gold-light); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(197, 160, 89, 0.4); }
.btn-outline { border-color: var(--h-gold); color: var(--h-gold); background: transparent; }
.btn-outline:hover { background-color: var(--h-gold); color: var(--h-blue); }
.btn-outline-white { border-color: var(--h-white); color: var(--h-white); background: transparent; }
.btn-outline-white:hover { background-color: var(--h-white); color: var(--h-blue); }
/* ==========================================================================
5. TOPBAR (Live Ticker & Wetter/Rottfinder)
========================================================================== */
.topbar {
background-color: var(--h-blue); color: var(--h-white);
font-size: 0.85rem; padding: 10px 0; border-bottom: 2px solid var(--h-gold);
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.ticker-wrapper { display: flex; align-items: center; gap: 15px; flex-grow: 1; }
.live-badge {
background-color: #e74c3c; color: white; padding: 3px 10px; border-radius: 20px;
font-weight: 700; font-size: 0.7rem; letter-spacing: 1px; text-transform: uppercase;
display: flex; align-items: center; gap: 6px; box-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
}
.live-badge .dot { width: 6px; height: 6px; background: white; border-radius: 50%; animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } }
.ticker-text { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 600px; }
.top-tools { display: flex; gap: 20px; }
.top-tools a { color: var(--h-gold-light); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.top-tools a:hover { color: var(--h-white); }
/* ==========================================================================
6. HEADER & NAVIGATION (Mobile First)
========================================================================== */
.header {
background-color: var(--h-white); box-shadow: 0 4px 20px rgba(0,0,0,0.06);
position: sticky; top: 0; z-index: 1000; transition: all 0.3s ease;
}
.header .container { display: flex; justify-content: space-between; align-items: center; height: var(--header-h); }
.logo { display: flex; align-items: center; gap: 15px; }
.logo-crest { width: 55px; height: 65px; display: flex; justify-content: center; align-items: center; }
.logo-text { display: flex; flex-direction: column; }
.logo-text span:first-child { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--h-blue); line-height: 1.1; }
.logo-text span:last-child { font-size: 0.8rem; color: var(--h-gold); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
/* Desktop Nav – hidden on mobile */
.main-nav { display: none; }
/* Mobile Burger Icon – shown on mobile */
.mobile-menu-btn { display: block; font-size: 1.5rem; color: var(--h-blue); cursor: pointer; background: none; border: none; }
/* ==========================================================================
7. HOMEPAGE HERO
========================================================================== */
.hero {
position: relative;
background-image: url('../Fahne1.jpg');
background-size: cover; background-position: center 30%;
color: var(--h-white);
padding-top: 20px;
padding-bottom: 40px;
}
.hero::before, .h-component-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,35,66,0.95) 0%, rgba(10,35,66,0.7) 45%, rgba(10,35,66,0.2) 100%); z-index: 1; pointer-events: none; }
.hero::after, .h-component-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 5px; background: linear-gradient(to right, var(--h-gold), var(--h-gold-light)); z-index: 2; pointer-events: none; }
.hero-content { position: relative; z-index: 2; align-items: center; padding-top: 0; justify-content: space-evenly; }
.hero-left { flex: 1 1 400px; text-align: center; }
.hero-right { flex: 0 1 650px; display: flex; flex-wrap: nowrap; justify-content: center; gap: 10px; }
.hero h1 { font-size: var(--text-h1); font-weight: 800; margin-bottom: 20px; text-shadow: 2px 4px 10px rgba(0,0,0,0.3); text-align: center; margin-left: auto; margin-right: auto; }
.hero p { font-size: clamp(1.1rem, 2vw, 1.25rem); font-weight: 300; margin-bottom: 30px; text-shadow: 1px 2px 5px rgba(0,0,0,0.5); line-height: 1.5; }
/* Countdown Box */
.hero-countdown { display: flex; gap: 15px; margin-bottom: var(--space-md); flex-wrap: wrap; }
.countdown-mini { justify-content: center !important; }
.cd-box {
background: rgba(10, 35, 66, 0.7); border: 1px solid rgba(197, 160, 89, 0.4);
backdrop-filter: blur(10px); padding: 15px 20px; border-radius: 6px;
text-align: center; min-width: 90px; box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.cd-num { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 700; color: var(--h-gold); line-height: 1; margin-bottom: 5px; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); font-variant-numeric: tabular-nums; }
.cd-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; color: var(--h-white); font-weight: 600; opacity: 0.9; }
/* Hero King Cards - Glassmorphism Design */
.hero-king-card {
min-width: 0; flex: 0 0 calc(50% - 5px); max-width: calc(50% - 5px);
margin: 0;
word-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; overflow: visible; /* visible to allow hover shadows and tags to pop */
/* Glassmorphism */
background: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2) !important;
box-shadow: 0 15px 35px rgba(0,0,0,0.4) !important;
border-radius: 12px !important;
transition: all 0.4s ease !important;
display: flex !important; flex-direction: column !important;
}
.hero-king-card:hover {
transform: scale(1.02) !important;
box-shadow: 0 25px 50px rgba(0,0,0,0.6), 0 0 30px rgba(197, 160, 89, 0.2) !important;
border-color: rgba(197, 160, 89, 0.5) !important;
}
.hero-king-card:hover .king-cta {
opacity: 1 !important;
transform: translateY(0) !important;
}
.hero-king-card .king-img {
height: 220px;
border-radius: 12px 12px 0 0;
position: relative;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.hero-king-card .king-body { padding: 35px 10px 20px 10px; background: transparent; display: flex; flex-direction: column; align-items: center; flex: 1; }
.hero-king-card .king-body h3 { font-size: 1.4rem; word-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; color: var(--h-white) !important; text-shadow: 1px 2px 4px rgba(0,0,0,0.6); margin-bottom: 15px; font-family: var(--font-heading); }
.hero-king-card .rott-neon-badge {
position: absolute;
top: -15px; /* Halfway over the boundary */
left: 50%;
transform: translateX(-50%);
background: var(--h-blue);
border: 1px solid currentColor;
padding: 4px 12px;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
box-shadow: none;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 6px;
z-index: 5;
}
.hero-king-card .rott-neon-badge i { filter: none; }
.hero-king-card .king-subtitle {
display: flex; flex-direction: column; align-items: center; gap: 4px;
margin-top: auto; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 15px; width: 80%;
}
.hero-king-card .king-label {
font-size: 0.65rem; text-transform: uppercase; letter-spacing: 2px;
color: rgba(255, 255, 255, 0.6); font-weight: 600; text-shadow: none; text-align: center;
}
.hero-king-card .king-year {
font-size: 1.6rem; font-family: var(--font-heading); color: var(--h-gold);
font-weight: 700; line-height: 1; text-shadow: 1px 2px 5px rgba(0,0,0,0.5);
}
/* ==========================================================================
8. QUICK FACTS (Stats Bar)
========================================================================== */
/* Facts-Bar: IMMER deckend – schlägt auch altes Markup class="facts hp-lazy" */
.facts,
.facts.hp-lazy,
.facts.hp-lazy.is-visible {
background: transparent;
padding: 0;
position: relative;
z-index: 10;
margin-top: 30px;
margin-bottom: var(--space-lg);
opacity: 1 !important;
filter: none !important;
transform: none !important;
will-change: auto !important;
}
.facts .container,
.facts.hp-lazy .container {
background: #ffffff !important;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
padding: 25px 20px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
text-align: center;
border: 1px solid var(--h-silver);
isolation: isolate;
opacity: 1 !important;
filter: none !important;
}
/* Erstes Modul nach Facts (Willkommen/Hauptbeitrag): ebenfalls immer deckend */
.hp-lazy-stack > .main-content {
opacity: 1 !important;
filter: none !important;
transform: none !important;
will-change: auto !important;
}
.fact-item i { font-size: 2.5rem; color: var(--h-gold); margin-bottom: 15px; }
.fact-item h3 { font-size: 2rem; color: var(--h-blue); font-family: var(--font-body); margin-bottom: 5px; }
.fact-item p { font-size: 0.9rem; color: var(--h-blue); opacity: 0.8; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
/* ==========================================================================
9. WELCOME SECTION
========================================================================== */
.welcome-section { padding: var(--space-md) 0 var(--space-lg); background: var(--h-bg); }
.welcome-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); align-items: center; }
.welcome-text h2 { color: var(--h-blue); font-size: var(--text-h2); margin-bottom: 20px; }
.welcome-text p { color: var(--h-text-light); font-size: 1.1rem; margin-bottom: 20px; line-height: 1.8; }
.welcome-features { display: grid; grid-template-columns: 1fr; gap: 25px; margin-top: 35px; }
.feature-box { display: flex; gap: 15px; align-items: flex-start; }
.feature-icon { color: var(--h-gold); font-size: 1.8rem; }
.feature-box h4 { font-family: var(--font-body); color: var(--h-blue); margin-bottom: 5px; font-size: 1.1rem; }
.feature-box p { font-size: 0.9rem; line-height: 1.4; color: var(--h-text-light); margin-bottom: 0; }
.welcome-image { position: relative; }
/* Kein fester Crop-Rahmen — nur Darstellung; picture erbt Radius/Shadow */
.welcome-image picture,
.welcome-image img { border-radius: 8px; box-shadow: 0 20px 40px rgba(10,35,66,0.15); display: block; max-width: 100%; height: auto; }
.welcome-image::before { content: ''; position: absolute; top: -15px; left: -15px; width: 100px; height: 100px; border-top: 4px solid var(--h-gold); border-left: 4px solid var(--h-gold); border-radius: 8px 0 0 0; }
.welcome-image::after { content: ''; position: absolute; bottom: -15px; right: -15px; width: 100px; height: 100px; border-bottom: 4px solid var(--h-gold); border-right: 4px solid var(--h-gold); border-radius: 0 0 8px 0; }
/* ==========================================================================
10. KING CARDS (Majestäten)
========================================================================== */
.kings-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.king-card { background: var(--h-white); border-radius: 8px; overflow: hidden; box-shadow: 0 15px 40px rgba(10,35,66,0.08); transition: transform 0.3s; border: 1px solid var(--h-silver); }
.king-card:hover { transform: translateY(-10px); }
.king-img { height: 280px; background-size: cover; background-position: center top; position: relative; }
.king-badge {
position: absolute; top: 20px; left: -10px;
background: var(--h-gold); color: var(--h-blue); padding: 8px 20px;
border-radius: 0 4px 4px 0; font-family: var(--font-heading);
font-weight: 700; font-size: 1.1rem; letter-spacing: 1px;
box-shadow: 2px 4px 10px rgba(0,0,0,0.3); z-index: 10; border: none; backdrop-filter: none;
}
.king-badge::after { content: ''; position: absolute; bottom: -10px; left: 0; border-top: 10px solid #b59b4c; border-left: 10px solid transparent; }
.king-body { padding: 20px; text-align: center; position: relative; padding-top: 50px; }
.king-body h3 { font-size: 1.5rem; color: var(--h-blue); margin-bottom: 5px; margin-top: 0; }
.king-body p { color: var(--h-text-light); }
.rott-tag {
position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 6px 18px; border-radius: 30px; font-size: 0.85rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 1px; white-space: nowrap;
border: 3px solid var(--h-white); color: var(--h-white); box-shadow: 0 4px 15px rgba(0,0,0,0.15); z-index: 5;
}
.tag-r3 { background: rgba(41, 128, 185, 0.1); color: var(--rott-3); border: 1px solid rgba(41, 128, 185, 0.3); }
.tag-r4 { background: rgba(39, 174, 96, 0.1); color: var(--rott-4); border: 1px solid rgba(39, 174, 96, 0.3); }
/* ==========================================================================
11. COMMUNITY (Rotts & Akteure)
========================================================================== */
.community-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
.rotts-grid { display: grid; grid-template-columns: 1fr; gap: 15px; }
.rott-card { background: var(--h-white); border: 1px solid var(--h-silver); border-radius: 8px; padding: 25px 20px; text-align: center; transition: all 0.3s ease; position: relative; overflow: hidden; }
.rott-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; }
.rc-1::before { background: var(--rott-1); } .rc-2::before { background: var(--rott-2); }
.rc-3::before { background: var(--rott-3); } .rc-4::before { background: var(--rott-4); }
.rott-card .num { font-family: var(--font-heading); font-size: 2.5rem; line-height: 1; margin-bottom: 10px; color: var(--h-blue); }
.rc-1 .num { color: var(--rott-1); } .rc-2 .num { color: var(--rott-2); }
.rc-3 .num { color: var(--rott-3); } .rc-4 .num { color: var(--rott-4); }
.rott-card h4 { font-size: 1.1rem; color: var(--h-text); margin-bottom: 5px; font-family: var(--font-body); }
.rott-card p { font-size: 0.85rem; color: var(--h-text-light); font-style: italic; }
/* Akteure */
.akteure-box { background: var(--h-white); border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); border: 1px solid var(--h-silver); padding: var(--space-sm); }
.akteure-box h3 { color: var(--h-blue); margin-bottom: 25px; font-size: var(--text-h3); }
.akteur-list { display: flex; flex-direction: column; gap: 20px; }
.akteur-item { display: flex; gap: 15px; }
.akteur-icon { width: 50px; height: 50px; border-radius: 50%; background: var(--h-bg); color: var(--h-gold); display: flex; justify-content: center; align-items: center; font-size: 1.2rem; flex-shrink: 0; border: 1px solid var(--h-silver); }
.akteur-text h4 { font-size: 1.1rem; color: var(--h-blue); margin-bottom: 5px; font-family: var(--font-body); }
.akteur-text p { font-size: 0.9rem; color: var(--h-text-light); }
/* ==========================================================================
12. NEWS & EVENTS
========================================================================== */
.news-events-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.news-wrapper { display: flex; flex-direction: column; gap: 25px; }
.news-card { display: flex; flex-direction: column; background: var(--h-white); border: 1px solid var(--h-silver); border-radius: 8px; overflow: hidden; transition: box-shadow 0.3s; }
.news-card:hover { box-shadow: 0 10px 25px rgba(10,35,66,0.1); }
/* Phase 2.4 / residual: News-Bild als ![]()
/ — absolute Fill schlägt
globales img{max-width:100%;height:auto} und HTML width/height-Attribute */
.news-img {
flex: 0 0 auto;
position: relative;
min-height: 200px;
height: 200px;
overflow: hidden;
background-color: var(--h-silver);
width: 100%;
}
.news-img picture,
.news-img img,
.news-img .news-img-el {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none; /* sonst global max-width:100% + intrinsisches Ratio */
max-height: none;
min-height: 0;
object-fit: cover;
object-position: center;
display: block;
}
.news-body { padding: var(--space-sm); display: flex; flex-direction: column; flex: 1; }
.news-meta { font-size: 0.8rem; color: var(--h-gold); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 10px; }
.news-body h3 { font-size: 1.3rem; margin-bottom: 15px; line-height: 1.4; color: var(--h-blue); }
.news-body p { font-size: 0.95rem; color: var(--h-text-light); line-height: 1.6; margin-bottom: 20px; }
.read-more { margin-top: auto; color: var(--h-blue); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; transition: color 0.3s; }
.read-more:hover { color: var(--h-gold); }
/* Events Widget */
.events-widget { background: var(--h-blue); color: var(--h-white); border-radius: 8px; padding: var(--space-sm); position: relative; overflow: hidden; box-shadow: 0 15px 35px rgba(10,35,66,0.2); }
.events-widget::before { content: ''; position: absolute; top: -50px; right: -50px; width: 150px; height: 150px; border-radius: 50%; border: 20px solid rgba(255,255,255,0.05); }
.events-widget h3 { color: var(--h-gold); font-size: var(--text-h3); margin-bottom: var(--space-sm); position: relative; z-index: 2; }
.event-list { display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 2; }
.event-row { display: flex; gap: 15px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 20px; }
.event-row:last-child { border-bottom: none; padding-bottom: 0; }
.e-date { text-align: center; min-width: 55px; }
.e-day { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; line-height: 1; color: var(--h-white); }
.e-month { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--h-gold); font-weight: 600; }
.e-info h4 { font-family: var(--font-body); font-size: 1.1rem; margin-bottom: 5px; color: var(--h-white); }
.e-info p { font-size: 0.85rem; color: rgba(255,255,255,0.7); display: flex; align-items: center; gap: 5px; }
/* Weather Widget (Sidebar) */
.weather-widget { margin-top: var(--space-sm); background: rgba(0,0,0,0.2); border-radius: 6px; padding: 15px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; border: 1px solid rgba(255,255,255,0.1); }
.w-icon { font-size: 2rem; color: var(--h-gold); }
.w-temp { font-size: 1.5rem; font-weight: 700; font-family: var(--font-heading); }
.w-desc { font-size: 0.8rem; color: rgba(255,255,255,0.7); text-transform: uppercase; }
/* ==========================================================================
13. GALERIE
========================================================================== */
.gal-split { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; }
.gal-50 { position: relative; overflow: hidden; border-radius: 8px; height: 250px; display: block; box-shadow: 0 10px 30px rgba(10,35,66,0.15); }
/* Absolute Fill: schlägt global img{max-width:100%;height:auto} + picture-Collapse */
.gal-50 picture,
.gal-50 img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
display: block;
object-fit: cover;
transition: transform 0.6s ease;
}
.gal-50:hover img { transform: scale(1.05); }
.gal-50-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,35,66,0.9) 0%, rgba(10,35,66,0.3) 50%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-sm); transition: background 0.3s; }
.gal-50:hover .gal-50-overlay { background: linear-gradient(to top, rgba(10,35,66,0.95) 0%, rgba(10,35,66,0.4) 60%, transparent 100%); }
.gal-50-overlay h3 { color: var(--h-gold); font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 5px; font-family: var(--font-heading); font-style: italic; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); }
.gal-50-overlay span { color: var(--h-white); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); }
.gal-timeline { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; background: var(--h-white); padding: var(--space-sm); border-radius: 8px; border: 1px solid var(--h-silver); box-shadow: 0 5px 15px rgba(0,0,0,0.02); }
.gal-timeline-label { padding: 8px; font-weight: 600; color: var(--h-text-light); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; }
.gal-year { padding: 10px 20px; background: var(--h-bg); color: var(--h-blue); font-weight: 700; border-radius: 4px; text-decoration: none; transition: all 0.3s ease; }
.gal-year:hover { background: var(--h-blue); color: var(--h-gold); }
.gal-year-archiv { background: var(--h-gold); color: var(--h-blue); }
.gal-year-archiv:hover { background: var(--h-blue); color: var(--h-gold); }
/* --- Neues "Museums"-Design (Das Historische Archiv) & Hero --- */
.albums-hero-bg {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-size: cover;
background-position: center;
filter: blur(15px) brightness(0.4);
transform: scale(1.1); /* Um Ränder beim Blur zu vermeiden */
z-index: 1;
}
.h-component-hero.albums-hero {
position: relative;
overflow: hidden;
padding-top: 100px;
padding-bottom: 120px; /* Extra Platz für den Overlap */
margin-top: 0;
}
.albums-hero-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
}
.albums-hero-cards {
display: flex;
flex-wrap: wrap;
gap: 40px;
justify-content: center;
width: 100%;
margin-top: 40px;
}
.hero-album-card {
position: relative;
overflow: hidden;
border: 1px solid var(--h-gold);
border-radius: 6px;
display: flex;
flex-direction: column;
text-decoration: none;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
transition: all 0.5s ease;
width: 100%;
max-width: 500px;
aspect-ratio: 4/3;
background: #000;
}
.hero-album-card picture,
.hero-album-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
display: block;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.8s ease;
}
.hero-album-card:hover {
box-shadow: 0 25px 60px rgba(212, 175, 55, 0.4);
border-color: #f0c960;
transform: translateY(-5px);
}
.hero-album-card:hover img {
transform: scale(1.05);
}
.hero-album-overlay {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 80px 30px 30px;
background: linear-gradient(to top, rgba(17, 41, 70, 0.95) 0%, rgba(17, 41, 70, 0.5) 60%, transparent 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
pointer-events: none;
}
.hero-album-title {
font-family: var(--font-heading);
color: var(--h-gold);
font-size: 2.2rem;
line-height: 1.1;
margin: 0 0 10px 0;
text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
transition: color 0.3s ease;
}
.hero-album-card:hover .hero-album-title {
color: #fff;
}
.album-badge-featured {
position: absolute;
top: 20px;
left: 20px;
border: 1px solid var(--h-gold);
color: var(--h-gold);
padding: 6px 15px;
text-transform: uppercase;
font-size: 0.75rem;
font-weight: bold;
letter-spacing: 2px;
backdrop-filter: blur(10px);
background: rgba(17, 41, 70, 0.6);
border-radius: 30px;
z-index: 2;
}
#museum-gallery-wrapper {
background: linear-gradient(135deg, var(--h-blue) 0%, #112946 100%);
padding: 60px 30px;
border-radius: 12px;
box-shadow: 0 -20px 50px rgba(0,0,0,0.4), inset 0 0 50px rgba(0,0,0,0.3);
margin-bottom: 40px;
position: relative;
z-index: 10;
margin-top: -60px; /* Overlap effect */
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
align-items: stretch;
}
.museum-album {
position: relative;
overflow: hidden;
border: 1px solid rgba(212, 175, 55, 0.5); /* etwas dezenter für reguläre */
border-radius: 4px;
display: flex;
flex-direction: column;
text-decoration: none;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
transition: all 0.5s ease;
aspect-ratio: 4/3;
background: #000;
}
.museum-album picture,
.museum-album img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
display: block;
object-fit: cover;
transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.8s ease;
filter: brightness(0.85);
}
.museum-album:hover {
box-shadow: 0 15px 40px rgba(212, 175, 55, 0.3);
border-color: var(--h-gold);
transform: translateY(-5px);
}
.museum-album:hover img {
transform: scale(1.05);
filter: brightness(1);
}
.album-overlay {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 60px 20px 20px;
background: linear-gradient(to top, rgba(17, 41, 70, 0.95) 0%, rgba(17, 41, 70, 0.6) 50%, transparent 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
pointer-events: none;
}
.album-title {
font-family: var(--font-heading);
color: var(--h-gold);
font-size: 1.4rem;
line-height: 1.2;
margin: 0 0 5px 0;
text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
transition: color 0.3s ease;
}
.museum-album:hover .album-title {
color: #fff;
}
.album-meta {
color: rgba(255,255,255,0.7);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 600;
}
.no-cover-icon {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #0a1626;
color: rgba(255,255,255,0.2);
font-size: 4rem;
}
/* ==========================================================================
14. FOOTER
========================================================================== */
.footer { background-color: var(--h-blue); color: var(--h-silver); padding: var(--space-lg) 0 30px; border-top: 6px solid var(--h-gold); position: relative; overflow: hidden; }
.footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.05; pointer-events: none; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-bottom: var(--space-lg); position: relative; z-index: 2; }
.footer-brand .logo-crest { margin-bottom: 20px; background: transparent; border-color: rgba(255,255,255,0.2); }
.footer-brand p { font-size: 0.95rem; line-height: 1.7; opacity: 0.8; margin-bottom: 20px; }
.footer-social { display: flex; gap: 15px; }
.footer-social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; justify-content: center; align-items: center; color: var(--h-white); transition: background 0.3s, color 0.3s; }
.footer-social a:hover { background: var(--h-gold); color: var(--h-blue); }
.footer h4 { color: var(--h-white); font-size: 1.2rem; margin-bottom: 25px; font-family: var(--font-body); position: relative; padding-bottom: 10px; }
.footer h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 30px; height: 2px; background: var(--h-gold); }
.footer ul { list-style: none; }
.footer li { margin-bottom: 12px; }
.footer a { font-size: 0.95rem; opacity: 0.8; }
.footer a:hover { color: var(--h-gold); opacity: 1; padding-left: 5px; }
.footer-bottom { text-align: center; padding-top: 25px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.85rem; position: relative; z-index: 2; opacity: 0.7; }
/* ==========================================================================
15. JOOMLA OVERRIDES
========================================================================== */
.moduletable h3 { color: var(--h-blue); font-size: var(--text-h3); margin-bottom: 25px; font-family: var(--font-heading); }
/* Main content area — component gets full width, wraps its own containers */
.main-content { min-height: 50vh; }
/* Default page article padding (for standard Joomla articles like Impressum) */
.component-wrapper { padding: var(--space-md) 0; }
/* Sidebar Layout */
.main-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
/* View body container */
.view-body { padding: var(--space-lg) var(--container-px); max-width: var(--container-max); margin: 0 auto; }
/* Unified Component Hero (h-component-hero) */
.h-component-hero {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
min-height: var(--hero-sub-h);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: var(--h-blue);
background-size: cover;
background-position: center;
margin-bottom: var(--space-lg);
}
.h-component-hero--no-margin {
margin-bottom: 0;
}
.h-component-hero-content {
position: relative;
z-index: 2;
padding: var(--space-lg) var(--container-px);
max-width: var(--container-max);
width: 100%;
color: var(--h-white);
}
.h-hero-eyebrow {
font-size: 1.1rem;
color: var(--h-gold);
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 700;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.h-hero-eyebrow::before, .h-hero-eyebrow::after {
content: '';
height: 2px;
width: 30px;
background-color: var(--h-gold);
}
.h-component-hero-content h1 {
font-size: clamp(2rem, 4vw, 3.5rem);
color: var(--h-white);
margin-bottom: 0;
text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
font-weight: 800;
line-height: 1.2;
}
/* ==========================================================================
18. ROTT DETAIL PAGE
========================================================================== */
.page-wrap { padding: var(--space-md) 0 var(--space-lg); }
.layout-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
.tabs-header { display: flex; gap: 10px; border-bottom: 2px solid var(--h-silver); margin-bottom: 30px; overflow-x: auto; padding-bottom: 1px; }
.tab-btn { background: none; border: none; font-size: 1.1rem; font-family: var(--font-heading); color: var(--h-text-light); padding: 10px 20px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; font-weight: 600; white-space: nowrap; transition: all 0.3s; }
.tab-btn:hover { color: var(--h-blue); }
.tab-btn.active { color: var(--h-blue); border-bottom-color: var(--h-gold); }
.tab-pane { display: none; animation: fadeIn 0.4s; }
.tab-pane.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.person-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; margin-top: 30px; }
.person-card { background: var(--h-bg); border: 1px solid var(--h-silver); padding: 20px; text-align: center; border-radius: 8px; }
.person-card i { font-size: 2rem; color: var(--h-gold); margin-bottom: 15px; }
.person-card h4 { color: var(--h-blue); font-size: 1.1rem; margin-bottom: 5px; }
.person-card span { font-size: 0.85rem; color: var(--h-text-light); text-transform: uppercase; font-weight: 700; letter-spacing: 1px; }
.fact-list { list-style: none; padding: 0; margin: 0; }
.fact-list li { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px dashed var(--h-silver); }
.fact-list li:last-child { border-bottom: none; }
.fact-list li span { color: var(--h-text-light); }
.fact-list li strong { color: var(--h-blue); }
.sidebar-widget { background: var(--h-white); border: 1px solid var(--h-silver); border-radius: 8px; padding: var(--space-sm); margin-bottom: var(--space-sm); box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
.sidebar-widget h3 { font-size: 1.4rem; color: var(--h-blue); margin-bottom: 20px; border-bottom: 2px solid var(--h-gold); padding-bottom: 10px; display: inline-block; }
/* ==========================================================================
19. CALENDAR WIDGET
========================================================================== */
.cal-day {
aspect-ratio: 1;
display: flex; align-items: center; justify-content: center;
cursor: pointer; border-radius: 50%;
font-size: 0.95rem; transition: all 0.2s; margin: 2px;
}
.cal-day:hover:not(.empty) { background: var(--h-silver); }
.cal-day.empty { cursor: default; color: var(--h-text-light); opacity: 0.4; }
.cal-day.today { font-weight: bold; border: 2px solid var(--h-gold); }
.cal-day.has-event { background: var(--h-bg); color: var(--h-blue); font-weight: bold; position: relative; }
.cal-day.has-event::after { content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--h-gold); }
.cal-day.selected { background: var(--h-blue) !important; color: var(--h-white) !important; }
.cal-day.selected::after { background: var(--h-white); }
/* ==========================================================================
20. MAP VIEW (Addresses)
========================================================================== */
.rott-map-container {
position: relative;
width: 100%;
margin-top: calc(-1 * var(--space-sm));
margin-bottom: var(--space-md);
z-index: 1;
height: calc(100vh - var(--header-h) - 280px);
min-height: 300px;
max-height: 700px;
border-radius: 20px;
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.rott-result-overlay {
display: none;
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
background: var(--h-white);
padding: 25px 30px;
border-radius: 20px;
box-shadow: 0 15px 40px rgba(0,0,0,0.3);
text-align: center;
z-index: 1000;
width: 90%;
max-width: 450px;
}
/* ==========================================================================
===== RESPONSIVE BREAKPOINTS (min-width only, Mobile First) =====
========================================================================== */
/* ── sm: 576px+ (Large Phone) ── */
@media (min-width: 576px) {
.rotts-grid { grid-template-columns: 1fr 1fr; }
.welcome-features { grid-template-columns: 1fr 1fr; }
.facts .container { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding: 25px 40px; }
}
/* ── md: 768px+ (Tablet) ── */
@media (min-width: 768px) {
:root { --container-px: 30px; }
.gal-split { grid-template-columns: 1fr 1fr; }
.gal-50 { height: 350px; }
.footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.calendar-grid-wrapper { grid-template-columns: 2fr 3fr !important; }
.weather-widget { grid-column: 1 / -1; }
.king-img { height: 350px; }
.rf-map-wrap { min-height: 350px; }
}
/* ── lg: 1024px+ (Desktop) ── */
@media (min-width: 1024px) {
:root {
--container-px: 40px;
--header-h: 90px;
}
.calendar-grid-wrapper { grid-template-columns: 3fr 4fr 3fr !important; }
.weather-widget { grid-column: auto; }
/* Navigation visible */
.main-nav { display: block; height: 100%; }
.main-nav > ul { display: flex; list-style: none; gap: 30px; height: 100%; margin: 0; }
.main-nav > ul > li { height: 100%; display: flex; align-items: center; position: relative; }
.main-nav > ul > li > a {
font-weight: 600; color: var(--h-blue); font-size: 0.95rem;
text-transform: uppercase; letter-spacing: 0.5px; position: relative; padding: 10px 0;
}
.main-nav > ul > li > a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--h-gold); transition: width 0.3s; }
.main-nav > ul > li:hover > a::after,
.main-nav > ul > li > a.active::after { width: 100%; }
.main-nav > ul > li:hover > a { color: var(--h-gold); }
/* Mega Dropdown */
.has-dropdown .dropdown {
position: absolute; top: var(--header-h); left: 50%; transform: translateX(-50%) translateY(15px);
background: var(--h-white); min-width: 260px;
box-shadow: 0 15px 35px rgba(10, 35, 66, 0.1); border-radius: 0 0 8px 8px; border-top: 3px solid var(--h-gold);
opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
padding: 15px 0; display: flex; flex-direction: column;
}
.has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.dropdown li { list-style: none; }
.dropdown a { padding: 10px 25px; display: block; font-size: 0.95rem; font-weight: 500; color: var(--h-text); border-left: 3px solid transparent; }
.dropdown a:hover { background: var(--h-bg); color: var(--h-blue); border-left-color: var(--h-gold); padding-left: 30px; font-weight: 600; }
.hero-content { flex-direction: row; align-items: stretch; }
.facts { margin-top: -50px; }
/* Burger hidden */
.mobile-menu-btn { display: none; }
/* Moved hero layout to 1280px to prevent awkward wrapping on 1024px-1279px */
/* Grids become multi-column */
.welcome-grid { grid-template-columns: 1fr 1fr; }
.kings-grid { grid-template-columns: 1fr 1fr; }
.community-grid { grid-template-columns: 1.2fr 0.8fr; }
.news-events-grid { grid-template-columns: 2fr 1fr; }
.layout-grid { grid-template-columns: 1fr 340px; }
.main-grid.has-sidebar { grid-template-columns: 1fr 300px; }
/* News cards go horizontal — Bildspalte streckt auf volle Kartenhöhe */
.news-card {
flex-direction: row;
min-height: 200px;
align-items: stretch;
}
.news-card .news-img {
flex: 0 0 38%;
width: 38%;
max-width: 320px;
height: auto; /* mit align-items:stretch = 100% Kartenhöhe */
min-height: 200px;
align-self: stretch;
}
}
/* ── xl: 1280px+ (Desktop HD) ── */
@media (min-width: 1280px) {
.rotts-grid { grid-template-columns: repeat(4, 1fr); gap: 30px; }
.person-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
/* Hero layout: side-by-side with perfect spacing for laptop+ */
.hero { padding-top: 20px; padding-bottom: 70px; background-attachment: fixed; }
.hero-content { justify-content: space-between; }
.facts { margin-top: -50px; }
.hero-left { text-align: left; flex: 0 1 45%; }
.hero h1 { text-align: left; margin-left: 0; }
.hero-right { flex: 0 1 50%; justify-content: flex-end; flex-wrap: wrap; gap: 20px; }
.hero-king-card { flex: 1 1 250px; min-width: 250px; max-width: 320px; }
.hero-king-card .king-img { height: 260px; min-height: auto; }
.hero-king-card .king-badge { font-size: 1rem; padding: 8px 20px; }
.hero-king-card .king-body { padding: 20px; padding-top: 35px; flex: 1; display: flex; flex-direction: column; align-items: center; }
}
/* ==========================================================================
21. PREMIUM ROTTS (Concept B)
========================================================================== */
.rott-card:hover {
transform: translateY(4px) !important;
box-shadow: 0 5px 15px rgba(10,35,66,0.15) !important;
}
.rott-card:hover .rott-top-bar {
height: 100% !important;
opacity: 0.03 !important;
}
.rott-card:hover .rott-medallion {
transform: scale(1.1) !important;
box-shadow: 0 10px 25px rgba(197, 160, 89, 0.4), inset 0 0 0 2px var(--h-white) !important;
}
.rott-card:hover .rott-cta {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* ── xxl: 1920px+ (Wide / 4K) ── */
@media (min-width: 1920px) {
:root {
--container-max: 1400px;
--container-px: 60px;
}
}
/* Weather Daily Phases Grid (Wetter.com Style) */
.daily-phases-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
text-align: center;
}
.phase-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 10px 5px;
border-radius: 8px;
background: rgba(0,0,0,0.01);
}
.phase-col.past {
opacity: 0.4;
}
.phase-col .p-name {
font-weight: 700;
font-size: 0.85rem;
color: var(--h-text-light);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.phase-col .p-icon {
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.phase-col .p-temp {
font-size: 1.2rem;
font-weight: 700;
color: var(--h-blue);
}
.phase-col .p-rain {
font-size: 0.85rem;
color: #3498db;
font-weight: 600;
}
.phase-col .p-wind {
font-size: 0.8rem;
color: var(--h-text-light);
}
@media (max-width: 480px) {
.daily-phases-grid {
gap: 5px;
}
.phase-col {
padding: 8px 2px;
gap: 6px;
}
.phase-col .p-name {
font-size: 0.75rem;
letter-spacing: 0;
}
.phase-col .p-temp {
font-size: 1.1rem;
}
.phase-col .p-rain, .phase-col .p-wind {
font-size: 0.75rem;
}
}
/* 24h Hourly Slider */
.hourly-slider {
display: flex;
overflow-x: auto;
gap: 10px;
padding-bottom: 15px; /* Space for scrollbar */
scrollbar-width: thin;
scrollbar-color: rgba(0,0,0,0.2) transparent;
}
.hourly-slider::-webkit-scrollbar {
height: 6px;
}
.hourly-slider::-webkit-scrollbar-track {
background: rgba(0,0,0,0.05);
border-radius: 4px;
}
.hourly-slider::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.2);
border-radius: 4px;
}
.hourly-item {
display: flex;
flex-direction: column;
align-items: center;
flex: 0 0 75px; /* Fixed width per item so it scrolls */
background: rgba(0,0,0,0.02);
border-radius: 8px;
padding: 12px 5px;
text-align: center;
}
.hourly-item .h-time {
font-size: 0.95rem;
margin-bottom: 2px;
}
.hourly-item .h-date {
font-size: 0.75rem;
color: var(--h-text-light);
opacity: 0.8;
margin-bottom: 8px;
}
.hourly-item .h-icon {
color: var(--h-gold);
font-size: 1.6rem;
margin: 5px 0;
}
.hourly-item .h-temp {
font-size: 1.1rem;
font-weight: 700;
color: var(--h-blue);
margin-top: 5px;
margin-bottom: 10px;
}
.hourly-item .h-metrics {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
}
.hourly-item .h-metrics > div {
font-size: 0.75rem;
line-height: 1.1;
}
.hourly-item .h-rain { color: #3498db; font-weight: 600; }
.hourly-item .h-wind { color: var(--h-text-light); }
.hourly-item .h-uv { color: #9b59b6; font-weight: 600; }
.hourly-item .h-empty { min-height: 12px; }
/* Event Weather Badge */
.event-weather-badge {
background: var(--h-gold);
color: var(--h-blue);
padding: 2px 8px;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 700;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* ==========================================================================
LEGAL CONTENT (Impressum & Datenschutz)
========================================================================== */
.legal-content {
background: var(--h-white);
padding: var(--space-md) var(--space-lg);
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
max-width: 900px;
margin: 0 auto;
}
.legal-content h1 {
color: var(--h-blue);
font-size: var(--text-h2);
margin-bottom: var(--space-sm);
border-bottom: 2px solid var(--h-gold);
padding-bottom: 10px;
}
.legal-content h2 {
color: var(--h-blue);
font-size: var(--text-h3);
margin-top: var(--space-md);
margin-bottom: 15px;
font-family: var(--font-heading);
}
.legal-content h3 {
color: var(--h-text);
font-size: 1.2rem;
margin-top: var(--space-sm);
margin-bottom: 10px;
}
.legal-content p {
margin-bottom: 15px;
color: var(--h-text);
line-height: 1.7;
}
.legal-content ul {
margin-bottom: 15px;
padding-left: 20px;
color: var(--h-text);
}
.legal-content li {
margin-bottom: 8px;
}
.legal-content a {
color: var(--h-gold);
text-decoration: underline;
text-decoration-color: transparent;
transition: text-decoration-color 0.3s ease;
}
.legal-content a:hover {
text-decoration-color: var(--h-gold);
}
/* ==========================================================================
CONTACT / VORSTAND (Article Layout)
========================================================================== */
.contact-wrap { margin-top: var(--space-md); }
.contact-wrap .lead { font-size: 1.1rem; opacity: 0.9; margin-bottom: var(--space-lg); }
.contact-wrap h2 { color: var(--h-blue); margin-bottom: var(--space-md); border-bottom: 2px solid var(--h-gold); padding-bottom: 10px; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); }
.contact-card { background: var(--h-white); border-radius: 8px; padding: var(--space-md); box-shadow: 0 4px 15px rgba(0,0,0,0.05); border-top: 4px solid var(--h-blue); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.contact-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.contact-card h3 { font-size: 1.25rem; color: var(--h-blue); margin-bottom: 5px; }
.contact-card .role { font-weight: 600; color: var(--h-gold); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; display: block; }
.contact-card p { font-size: 0.95rem; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.contact-card span[class*="fa-"] { color: var(--h-gold); width: 20px; text-align: center; }
/* ==========================================================================
FORMS & COM_CONTACT
========================================================================== */
.form-control, .form-select { width: 100%; padding: 12px 15px; border: 1px solid var(--h-silver); border-radius: 6px; background-color: #f9f9fc; font-size: 1rem; font-family: var(--font-body); transition: border-color 0.3s, box-shadow 0.3s; margin-bottom: 20px; }
.form-control:focus, .form-select:focus { outline: none; border-color: var(--h-gold); box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.2); background-color: var(--h-white); }
.form-label { display: block; font-weight: 600; color: var(--h-blue); margin-bottom: 8px; }
textarea.form-control { min-height: 150px; resize: vertical; }
.btn-primary { background-color: var(--h-blue); color: var(--h-white); border: none; padding: 12px 30px; border-radius: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: background-color 0.3s, transform 0.2s; }
.btn-primary:hover { background-color: var(--h-gold); color: var(--h-blue); transform: translateY(-2px); }
.contact-info-block { background: var(--h-white); padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border-top: 4px solid var(--h-gold); height: 100%; }
.contact-info-block h3 { color: var(--h-blue); margin-bottom: 20px; border-bottom: 1px solid var(--h-silver); padding-bottom: 10px; }
.contact-info-block p { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.contact-info-block i { color: var(--h-gold); font-size: 1.2rem; width: 25px; text-align: center; }
.contact-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 768px) { .contact-grid-2 { grid-template-columns: 1fr; } }
/* ==========================================================================
DOCUMENT VIEWER (Schuetzenordnung)
========================================================================== */
.doc-viewer-wrap { max-width: 900px; margin: 0 auto; }
.doc-header { text-align: center; margin-bottom: 40px; }
.doc-header h2 { color: var(--h-blue); font-family: var(--font-heading); font-size: 2.2rem; border-bottom: 2px solid var(--h-gold); display: inline-block; padding-bottom: 10px; margin-bottom: 15px; }
.doc-header .lead { font-size: 1.1rem; color: var(--h-text); margin-bottom: 25px; }
.btn-outline { display: inline-block; padding: 10px 25px; border: 2px solid var(--h-blue); color: var(--h-blue); border-radius: 6px; font-weight: 600; text-transform: uppercase; text-decoration: none; transition: all 0.3s; }
.btn-outline:hover { background: var(--h-blue); color: var(--h-white); border-color: var(--h-blue); }
.doc-pages { display: flex; flex-direction: column; gap: 40px; }
.doc-page { background: var(--h-white); padding: 15px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 1px solid var(--h-silver); }
.doc-page img { width: 100%; height: auto; display: block; border-radius: 4px; }
/* ==========================================================================
SCHIESSORDNUNG (Rules) - Blaues Breakout mit hellem Kasten
========================================================================== */
.rules-breakout { width: 100vw; position: relative; left: 50%; right: 50%; margin-top: -40px; margin-left: -50vw; margin-right: -50vw; margin-bottom: calc(-1 * var(--space-lg)); background: var(--h-blue); padding: 80px 20px; }
.rules-wrap { max-width: 900px; margin: 0 auto; position: relative; padding: 60px; background: var(--h-white); border: 2px solid var(--h-gold); box-shadow: 0 25px 50px rgba(0,0,0,0.3); border-radius: 4px; }
.rules-wrap > * { position: relative; z-index: 1; }
.rules-section { margin-bottom: 50px; position: relative; overflow: hidden; }
.rules-section::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: 400px; background: url('../images/Wappen.svg') center center no-repeat; background-size: contain; opacity: 0.04; pointer-events: none; z-index: 0; }
.rules-section h3 { color: var(--h-blue); font-family: var(--font-heading); font-size: 2rem; margin-bottom: 30px; text-align: center; text-transform: uppercase; letter-spacing: 2px; }
.rules-section h3::after { content: ""; display: block; width: 60px; height: 3px; background: var(--h-gold); margin: 15px auto 0; }
.stand-list { display: flex; flex-direction: column; gap: 0; border-top: 2px solid var(--h-blue); border-bottom: 2px solid var(--h-blue); }
.stand-item { display: grid; grid-template-columns: 180px 1fr; gap: 30px; padding: 25px 0; border-bottom: 1px solid var(--h-silver); }
.stand-item:last-child { border-bottom: none; }
.stand-badge { font-family: var(--font-heading); font-size: 1.2rem; font-style: italic; color: var(--h-gold); font-weight: 600; padding-top: 2px; }
.stand-item h4 { font-family: var(--font-heading); font-size: 1.3rem; color: var(--h-blue); margin-bottom: 15px; line-height: 1.4; }
.stand-item p { font-size: 1rem; color: var(--h-text); margin-bottom: 10px; line-height: 1.6; }
.stand-item ul { padding-left: 20px; margin-bottom: 15px; font-size: 1rem; color: var(--h-text); }
.stand-item li { margin-bottom: 8px; }
.rules-footer { margin-top: 50px; padding: 30px; background-color: var(--h-blue); border-radius: 8px; box-shadow: 0 10px 30px rgba(10, 35, 66, 0.15); text-align: left; }
.rules-footer p { margin-bottom: 15px; color: var(--h-silver); font-size: 1rem; line-height: 1.7; }
.rules-footer strong { color: var(--h-gold); }
.rules-footer p:last-child { color: var(--h-gold) !important; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; margin-top: 25px; }
@media (max-width: 768px) {
.rules-breakout { padding: 40px 15px; }
.rules-wrap { padding: 30px 20px; border-width: 1px; box-shadow: none; }
.stand-item { grid-template-columns: 1fr; gap: 10px; padding: 20px 0; }
.stand-badge { font-size: 1.1rem; border-bottom: 1px solid var(--h-gold-light); padding-bottom: 5px; display: inline-block; }
}
/* --- SCHIESSORDNUNG: NON-DESTRUCTIVE MOBILE ACCORDION --- */
.stand-item h4 {
hyphens: auto;
-webkit-hyphens: auto;
word-break: break-word;
overflow-wrap: anywhere;
}
@media (max-width: 991px) {
.stand-item > div > ul,
.stand-item > div > p {
display: none;
animation: fadeIn 0.3s ease-in-out;
}
.stand-item {
cursor: pointer;
position: relative;
-webkit-tap-highlight-color: transparent;
}
.stand-item > div > h4::after {
content: '▼';
float: right;
color: var(--h-gold);
transition: transform 0.3s ease;
font-size: 0.8em;
margin-left: 10px;
}
.stand-item.is-open > div > ul,
.stand-item.is-open > div > p {
display: block;
}
.stand-item.is-open > div > h4::after {
transform: rotate(180deg);
}
}
/* --- SCHIESSORDNUNG: HYPHENATION & WORD BREAK --- */
@media (max-width: 991px) {
.rules-breakout h2,
.rules-breakout h3,
.rules-breakout h4,
.rules-breakout p,
.rules-breakout li {
/* Enable native browser hyphenation for long German words only on mobile */
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
/* Fallback: force break if word is still too long for container */
word-break: break-word;
}
}
/* --- SCHIESSORDNUNG: GROUP NOTES --- */
.stand-group-note-full {
padding: 15px 0 25px 0;
border-bottom: 1px solid var(--h-silver);
}
/* --- SCHIESSORDNUNG: INDENTED GROUP NOTES --- */
.stand-group-note-indented {
padding: 0 0 25px 210px; /* 180px col + 30px gap */
border-bottom: 1px solid var(--h-silver);
}
@media (max-width: 768px) {
.stand-group-note-indented {
padding: 0 0 25px 0;
}
}
/* --- SCHIESSORDNUNG: NOTE BOXES --- */
.stand-group-note-full p,
.stand-group-note-indented p {
background-color: var(--h-bg);
border-left: 4px solid var(--h-gold);
padding: 15px 20px;
border-radius: 0 4px 4px 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}
/* ==========================================================================
EDITOR-SAFE CTAs & CROSSLINKS (Rule 34)
========================================================================== */
/* 1. Inline Action-Link (.link-chip) */
a.link-chip {
display: inline-flex;
align-items: center;
padding: 2px 12px;
border-radius: 20px;
background-color: rgba(197, 160, 89, 0.15);
color: var(--h-blue);
font-weight: 600;
font-size: 0.9em;
text-decoration: none;
transition: all 0.2s ease;
border: 1px solid rgba(197, 160, 89, 0.3);
white-space: nowrap;
margin: 0 4px;
}
a.link-chip:hover {
background-color: var(--h-gold);
color: var(--h-blue);
transform: translateY(-1px);
}
/* 2. Weiterlesen Card (.crosslink-card) */
blockquote.crosslink-card {
display: block;
background: var(--h-bg);
border-left: 4px solid var(--h-gold);
border-radius: 4px;
padding: 20px 25px;
margin: 30px 0;
font-style: normal;
color: var(--h-text);
box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
blockquote.crosslink-card strong {
color: var(--h-blue);
display: block;
font-size: 1.15em;
margin-bottom: 5px;
}
blockquote.crosslink-card a.btn-primary,
blockquote.crosslink-card a.btn-outline {
display: inline-block;
margin-top: 15px;
}
/* 3. Massive Bottom CTA (.btn-massive) */
a.btn-massive {
display: block;
width: 100%;
text-align: center;
background: var(--h-gold);
color: var(--h-blue);
font-family: var(--font-heading);
font-size: 1.3rem;
font-weight: 600;
padding: 20px;
border-radius: 8px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 10px 20px rgba(197, 160, 89, 0.2);
transition: all 0.3s ease;
margin: 40px 0;
border: 2px solid transparent;
}
a.btn-massive:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(197, 160, 89, 0.4);
background: var(--h-blue);
color: var(--h-gold);
border-color: var(--h-gold);
}
hr.cta-divider {
border: none;
height: 2px;
background: linear-gradient(to right, transparent, var(--h-silver), transparent);
margin: 40px 0;
}
/* ==========================================================================
DOCUMENT VIEWER (Schuetzenordnung)
========================================================================== */
.doc-viewer-wrap { max-width: 900px; margin: 0 auto; }
.doc-header { text-align: center; margin-bottom: 40px; }
.doc-header h2 { color: var(--h-blue); font-family: var(--font-heading); font-size: 2.2rem; border-bottom: 2px solid var(--h-gold); display: inline-block; padding-bottom: 10px; margin-bottom: 15px; }
.doc-header .lead { font-size: 1.1rem; color: var(--h-text); margin-bottom: 25px; }
.btn-outline { display: inline-block; padding: 10px 25px; border: 2px solid var(--h-blue); color: var(--h-blue); border-radius: 6px; font-weight: 600; text-transform: uppercase; text-decoration: none; transition: all 0.3s; }
.btn-outline:hover { background: var(--h-blue); color: var(--h-white); border-color: var(--h-blue); }
.doc-pages { display: flex; flex-direction: column; gap: 40px; }
.doc-page { background: var(--h-white); padding: 15px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 1px solid var(--h-silver); }
.doc-page img { width: 100%; height: auto; display: block; border-radius: 4px; }
/* ==========================================================================
MERGED FROM COM_SCHIEBENSCHEETEN FRONTEND.CSS
========================================================================== */
/* From weather */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
/* From trophytimeline */
:root {
--h-blue: #0A2342;
--h-blue-light: #173f70;
--h-gold: #C5A059;
--h-gold-light: #DFBE7B;
--h-silver: #E0E6ED;
--h-white: #FFFFFF;
--h-bg: #F8F9FA;
--h-text: #2C3E50;
--h-text-light: #6C7A89;
--font-heading: 'Playfair Display', serif;
--font-body: 'Source Sans 3', sans-serif;
--rott-1: #c0392b; /* I. Rott - Rot */
--rott-2: #d35400; /* II. Rott - Orange */
--rott-3: #2980b9; /* III. Rott - Blau */
--rott-4: #27ae60; /* IV. Rott - Grün */
}
.timeline-wrap {
font-family: var(--font-body);
background-color: var(--h-bg);
color: var(--h-text);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
padding-bottom: 50px;
}
/* Header */
.tl-header {
background-color: var(--h-white);
padding: 40px 20px;
text-align: center;
border-bottom: 3px solid var(--h-gold);
position: relative;
z-index: 10;
box-shadow: 0 4px 20px rgba(10,35,66,0.05);
}
.back-link {
display: inline-block;
margin-bottom: 20px;
color: var(--h-gold);
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
transition: color 0.3s;
text-decoration: none;
}
.back-link:hover { color: var(--h-blue); }
.tl-header h1 {
color: var(--h-blue);
font-size: 3rem;
margin-bottom: 15px;
font-weight: 700;
font-style: italic;
font-family: var(--font-heading);
}
.tl-header p {
font-size: 1.1rem;
color: var(--h-text-light);
max-width: 600px;
margin: 0 auto;
}
/* Timeline Container */
.timeline-container {
position: relative;
max-width: 1000px;
margin: 60px auto;
padding: 20px;
}
.timeline-container::after {
content: '';
position: absolute;
width: 4px;
background-color: var(--h-gold);
top: 0;
bottom: 0;
left: 50%;
margin-left: -2px;
border-radius: 2px;
}
/* Timeline Item */
.timeline-item {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.timeline-item.visible {
opacity: 1;
transform: translateY(0);
}
.timeline-item.left { left: 0; text-align: right; }
.timeline-item.right { left: 50%; text-align: left; }
/* The circles on the timeline */
.timeline-item::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
right: -10px;
background-color: var(--h-white);
border: 4px solid var(--h-gold);
top: 45px;
border-radius: 50%;
z-index: 1;
}
.timeline-item.right::after { left: -10px; }
/* Content Box */
.content {
padding: 30px;
background-color: var(--h-white);
position: relative;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(10,35,66,0.05);
transition: transform 0.3s, box-shadow 0.3s;
z-index: 2;
}
.timeline-item.right .content { border-left: 4px solid var(--h-gold); }
.timeline-item.left .content { border-right: 4px solid var(--h-gold); }
.timeline-item.right .rott-1 { border-left-color: var(--rott-1); }
.timeline-item.right .rott-2 { border-left-color: var(--rott-2); }
.timeline-item.right .rott-3 { border-left-color: var(--rott-3); }
.timeline-item.right .rott-4 { border-left-color: var(--rott-4); }
.timeline-item.left .rott-1 { border-right-color: var(--rott-1); }
.timeline-item.left .rott-2 { border-right-color: var(--rott-2); }
.timeline-item.left .rott-3 { border-right-color: var(--rott-3); }
.timeline-item.left .rott-4 { border-right-color: var(--rott-4); }
.timeline-item:hover .content {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(10,35,66,0.1);
}
.year-badge {
position: absolute;
top: -15px;
background-color: var(--h-blue);
color: var(--h-gold);
padding: 6px 15px;
border-radius: 20px;
font-weight: bold;
font-size: 1.1rem;
font-family: var(--font-body);
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.timeline-item.left .year-badge { right: 30px; }
.timeline-item.right .year-badge { left: 30px; }
.king-name {
font-size: 1.8rem;
margin-top: 10px;
font-family: var(--font-heading);
color: var(--h-blue);
}
.king-title {
color: var(--h-text-light);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
}
.rott-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px;
border-radius: 20px;
font-weight: 600;
font-size: 0.9rem;
margin-top: 10px;
}
.timeline-item.left .rott-badge { margin-left: auto; }
.badge-r1 { background: rgba(192, 57, 43, 0.1); color: var(--rott-1); }
.badge-r2 { background: rgba(211, 84, 0, 0.1); color: var(--rott-2); }
.badge-r3 { background: rgba(41, 128, 185, 0.1); color: var(--rott-3); }
.badge-r4 { background: rgba(39, 174, 96, 0.1); color: var(--rott-4); }
.team-list {
margin-top: 10px;
font-size: 0.95rem;
color: var(--h-text);
}
/* Connectors */
.connector {
position: absolute;
top: 55px;
width: 40px;
height: 2px;
background-color: var(--h-silver);
z-index: 1;
}
.timeline-item.left .connector { right: 0; }
.timeline-item.right .connector { left: 0; }
@media screen and (max-width: 900px) {
.timeline-container::after { left: 31px; }
.timeline-item { width: 100%; padding-left: 70px; padding-right: 25px; }
.timeline-item.left, .timeline-item.right { left: 0; text-align: left; }
.timeline-item.left .content { border-right-width: 1px; border-right-color: var(--h-silver); border-left: 4px solid var(--h-gold); }
.timeline-item.left .rott-1 { border-left-color: var(--rott-1); }
.timeline-item.left .rott-2 { border-left-color: var(--rott-2); }
.timeline-item.left .rott-3 { border-left-color: var(--rott-3); }
.timeline-item.left .rott-4 { border-left-color: var(--rott-4); }
.timeline-item.left::after, .timeline-item.right::after { left: 21px; }
.timeline-item.left .year-badge, .timeline-item.right .year-badge { left: 30px; right: auto; }
.timeline-item.left .connector, .timeline-item.right .connector { left: 31px; width: 40px; }
.timeline-item.left .rott-badge { margin-left: 0; }
}
/* From trophyroom */
/* Harpstedter Farbpalette */
:root {
--h-blue: #0A2342;
--h-blue-light: #173f70;
--h-gold: #C5A059;
--h-gold-light: #DFBE7B;
--h-silver: #E0E6ED;
--h-white: #FFFFFF;
--h-bg: #F8F9FA;
--h-text: #2C3E50;
--h-text-light: #6C7A89;
--font-heading: 'Playfair Display', serif;
--font-body: 'Source Sans 3', sans-serif;
}
.trophy-wrap {
font-family: var(--font-body);
background-color: var(--h-bg);
color: var(--h-text);
padding-bottom: 50px;
}
.trophy-header {
text-align: center;
padding: 4rem 2rem 2rem;
}
.trophy-header h1 {
font-family: var(--font-heading);
font-size: 3.5rem;
margin: 0;
color: var(--h-blue);
font-style: italic;
font-weight: 700;
}
.trophy-header p {
color: var(--h-text-light);
font-size: 1.1rem;
max-width: 600px;
margin: 1rem auto;
}
/* The Trophy Room Grid */
.trophy-room {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
padding: 2rem;
max-width: 1400px;
margin: 0 auto;
}
/* Display Case Card (Light Theme) */
.display-case {
position: relative;
width: 260px;
height: 400px;
background: var(--h-white);
border: 1px solid var(--h-silver);
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
box-shadow: 0 10px 30px rgba(10, 35, 66, 0.05);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding-bottom: 2rem;
text-decoration: none;
}
.display-case::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 10px;
background: linear-gradient(to right, var(--h-gold), var(--h-gold-light));
pointer-events: none;
z-index: 1;
}
.display-case:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(10, 35, 66, 0.15);
border-color: var(--h-gold-light);
}
/* Glass Reflection Effect */
.display-case::after {
content: '';
position: absolute;
top: 0; left: -100%; width: 50%; height: 100%;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
transform: skewX(-25deg);
transition: left 0.7s ease;
pointer-events: none;
}
.display-case:hover::after {
left: 200%;
}
/* The Trophy Image */
.trophy-img {
width: 140px;
height: auto;
max-height: 220px;
object-fit: contain;
margin-bottom: auto;
margin-top: 40px;
filter: drop-shadow(0 15px 15px rgba(0,0,0,0.1));
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: 2;
}
.display-case:hover .trophy-img {
transform: scale(1.1) translateY(-5px);
}
/* Pedestal Base */
.pedestal {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 60px;
background: linear-gradient(to bottom, #ECEFF1, #CFD8DC);
border-top: 1px solid #B0BEC5;
z-index: 1;
}
.pedestal::before {
content: '';
position: absolute;
top: 0; left: 10%; right: 10%;
height: 10px;
background: rgba(0,0,0,0.05);
border-radius: 50%;
filter: blur(5px);
}
/* Trophy Info */
.trophy-info {
text-align: center;
z-index: 2;
padding: 0 20px;
margin-bottom: 20px;
}
.trophy-title {
font-family: var(--font-heading);
font-size: 1.3rem;
color: var(--h-blue);
margin: 0 0 5px 0;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.trophy-desc {
font-size: 0.9rem;
color: var(--h-text-light);
margin: 0;
opacity: 0;
transform: translateY(10px);
transition: all 0.3s ease;
}
.display-case:hover .trophy-desc {
opacity: 1;
transform: translateY(0);
}
/* From koenigskette */
:root {
--h-blue: #0A2342;
--h-gold: #C5A059;
--h-silver: #E0E6ED;
--h-bg: #F8F9FA;
--h-text: #2C3E50;
}
.koenigskette-breakout {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-bottom: calc(-1 * var(--space-lg, 80px));
background: var(--h-bg);
display: flex;
flex-direction: column;
overflow-x: hidden;
}
/* Hero Section (Dark) */
.kk-hero {
/* Removed in favor of global .h-component-hero */
}
.current-king-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 1rem;
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
gap: 1.5rem;
backdrop-filter: blur(10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.3);
transition: transform 0.3s ease;
position: relative;
overflow: hidden;
text-align: center;
max-width: 900px;
margin: 0 auto;
}
.plaque-wrapper {
display: flex;
gap: 8px;
width: 100%;
justify-content: center;
}
@media (min-width: 768px) {
.current-king-card { flex-direction: row; text-align: left; padding: 3rem; gap: 2rem; }
.plaque-wrapper { gap: 15px; }
}
.current-king-card:hover { transform: scale(1.02); border-color: rgba(197, 160, 89, 0.5); }
.plaque-placeholder {
position: relative;
width: calc(50% - 4px);
max-width: 180px;
aspect-ratio: 3 / 4;
flex-shrink: 0;
background: rgba(255,255,255,0.1);
border: 2px solid var(--h-gold);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
overflow: hidden;
cursor: pointer;
transition: transform 0.3s ease;
}
@media (min-width: 768px) {
.plaque-placeholder { width: calc(50% - 7.5px); }
}
.plaque-placeholder:hover { transform: scale(1.05); }
/* Absolute Fill gegen global img + picture-Collapse */
.plaque-placeholder picture,
.plaque-placeholder img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
display: block;
object-fit: cover;
object-position: center top;
}
.king-details { position: relative; z-index: 2; }
.king-details h2 {
font-family: var(--font-heading);
font-size: clamp(2.2rem, 4vw, 3.8rem);
color: var(--h-gold);
margin: 0.5rem 0 1rem 0;
text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.king-subtitle-top {
font-family: var(--font-body);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 6px;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 5px;
display: block;
}
.king-subtitle-bottom {
font-family: var(--font-heading);
font-size: 1.8rem;
color: var(--h-gold);
margin-bottom: 1.5rem;
display: block;
font-style: italic;
}
.king-watermark-year {
position: absolute;
font-family: var(--font-heading);
font-weight: 700;
color: rgba(255, 255, 255, 0.03);
pointer-events: none;
line-height: 1;
z-index: 0;
font-size: 120px;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
@media (min-width: 768px) {
.king-watermark-year { font-size: 180px; bottom: -20px; right: 10px; left: auto; transform: none; }
}
/* History Section */
.history-section {
padding: 0 1rem 4rem 1rem;
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
.controls {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
margin: 0 auto 4rem auto;
max-width: 600px;
position: relative;
z-index: 10;
}
@media (min-width: 768px) { .controls { flex-direction: row; } }
.search-box {
background: #fff;
border: 2px solid var(--h-silver);
border-radius: 30px;
padding: 1rem 1.5rem;
color: var(--h-text);
width: 100%;
font-family: var(--font-body);
font-size: 1rem;
outline: none;
transition: border-color 0.3s;
box-shadow: 0 10px 25px rgba(10,35,66,0.1);
}
.search-box:focus { border-color: var(--h-gold); }
.century-block { margin-bottom: 5rem; }
.century-title {
font-size: 2rem;
color: var(--h-blue);
text-align: center;
margin-bottom: 3rem;
position: relative;
font-family: var(--font-heading);
}
.century-title span {
background: var(--h-bg);
padding: 0 1.5rem;
position: relative;
z-index: 1;
display: inline-block;
border: 1px solid var(--h-silver);
border-radius: 30px;
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--h-gold);
font-family: var(--font-body);
font-weight: 700;
}
.century-title::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: var(--h-silver);
z-index: 0;
}
/* Unified CSS Grid Layout */
.names-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 768px) { .names-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .names-grid { grid-template-columns: repeat(3, 1fr); } }
.king-row {
display: flex;
align-items: center;
padding: 15px 20px;
background: #fff;
border-left: 4px solid var(--h-silver);
border-radius: 8px;
transition: all 0.3s;
box-shadow: 0 5px 15px rgba(0,0,0,0.03);
min-height: 130px;
border: 1px solid var(--h-silver);
position: relative;
overflow: hidden;
}
.king-row:hover {
border-color: var(--h-gold) !important;
border-left-color: var(--h-gold) !important;
background: #fdfbf7;
transform: scale(1.03);
box-shadow: 0 12px 25px rgba(10,35,66,0.08);
}
.king-row.has-thumb {
padding-right: 15px;
cursor: pointer;
}
.row-text {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding-right: 15px;
z-index: 1;
}
.year-ribbon {
position: absolute;
top: 0;
right: 105px;
background-color: var(--h-blue);
color: #fff;
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 700;
padding: 6px 12px 14px 12px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%);
z-index: 5;
transition: all 0.3s ease;
}
.king-row:hover .year-ribbon {
padding-top: 12px;
background-color: var(--h-gold);
color: #fff;
}
.row-nm {
font-family: var(--font-heading);
color: var(--h-blue);
font-size: 1.4rem;
font-weight: 800;
line-height: 1.1;
margin-top: 0;
height: 2.2em;
display: flex;
align-items: center;
}
.rott-wrapper {
order: -1;
height: 22px;
margin-bottom: 12px;
display: flex;
align-items: center;
transform: translateY(-8px);
}
.row-rott {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 2px 6px;
border: 1px solid currentColor;
border-radius: 4px;
}
.row-thumb {
width: 75px;
height: 100px;
border-radius: 6px;
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
border: 2px solid #fff;
position: relative;
z-index: 2;
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s, border-color 0.4s;
}
.king-row.has-thumb:hover .row-thumb {
transform: scale(1.15) rotate(2deg);
box-shadow: 0 8px 20px rgba(0,0,0,0.25);
border-color: var(--h-gold);
z-index: 2;
}
/* Absolute Fill (KK Thumbs) — .row-thumb bereits position:relative */
.row-thumb picture,
.row-thumb img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
display: block;
object-fit: cover;
object-position: center top;
}
/* LIGHTBOX */
.lightbox-bg {
position: fixed; inset: 0;
background: rgba(10, 35, 66, 0.9); backdrop-filter: blur(10px);
z-index: 999; pointer-events: none;
transition: opacity 0.4s ease; opacity: 0;
}
.lightbox-bg.active { opacity: 1; pointer-events: all; }
.lightbox-close {
position: fixed; top: 30px; right: 40px; background: transparent; border: none;
color: var(--h-gold); cursor: pointer; z-index: 1002; opacity: 0; pointer-events: none;
transition: opacity 0.4s 0.2s, transform 0.3s;
}
.lightbox-close svg { width: 40px; height: 40px; }
.lightbox-bg.active ~ .lightbox-close { opacity: 1; pointer-events: all; }
.lightbox-close:hover { transform: scale(1.1); }
.fly-card {
position: fixed; z-index: 1001; pointer-events: none;
border-radius: 8px; overflow: visible;
transition: top 0.5s cubic-bezier(0.4, 0, 0.2, 1), left 0.5s cubic-bezier(0.4, 0, 0.2, 1),
width 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
opacity: 0; perspective: 1200px;
}
.fly-card.visible { opacity: 1; pointer-events: all; }
.fly-card-inner {
width: 100%; height: 100%; position: relative;
transform-style: preserve-3d;
transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
.fly-card.flipped .fly-card-inner { transform: rotateY(180deg); }
.fly-card-front, .fly-card-back {
position: absolute; width: 100%; height: 100%;
backface-visibility: hidden; -webkit-backface-visibility: hidden;
border-radius: 8px; overflow: hidden;
border: 4px solid var(--h-gold); background: #fff;
box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}
.fly-card-back { transform: rotateY(180deg); }
.fly-card-front picture,
.fly-card-front img,
.fly-card-back picture,
.fly-card-back img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
display: block;
object-fit: cover;
}
.lightbox-info {
position: fixed; text-align: center; z-index: 1001; opacity: 0; pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
transform: translateY(20px) translateX(-50%);
background: #fff; border-radius: 12px; padding: 1.5rem 3rem;
box-shadow: 0 15px 35px rgba(0,0,0,0.3); border-top: 4px solid var(--h-gold);
display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 320px;
bottom: 40px; left: 50%;
}
.lightbox-bg.active ~ .lightbox-info { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: all; transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s; }
.lb-yr { font-family: var(--font-heading); color: var(--h-gold); font-size: 2.2rem; font-weight: 700; line-height: 1; margin: 0 0 4px 0; }
.lb-nm { font-family: var(--font-body); color: var(--h-blue); font-size: 1.5rem; font-weight: 600; line-height: 1.2; margin: 0; }
.lightbox-hint { font-size: 0.85rem; color: var(--h-text-light); margin-top: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.lightbox-hint svg { width: 14px; height: 14px; vertical-align: middle; margin-right: 4px; color: var(--h-gold); }
/* From ehrentafel */
:root {
--bg-color: var(--h-blue);
--gold: var(--h-gold);
--gold-light: #DFBE7B;
--text-light: #e2e8f0;
--glass-bg: rgba(255, 255, 255, 0.03);
--glass-border: rgba(197, 160, 89, 0.2);
}
.ehrentafel-breakout {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-bottom: calc(-1 * var(--space-lg, 80px));
background: var(--h-bg);
display: flex;
flex-direction: column;
overflow-x: hidden;
}
.ehrentafel-hero {
/* Removed in favor of global .h-component-hero */
}
.hero-subtitle {
color: var(--gold);
font-family: var(--font-body);
font-size: 1.1rem;
letter-spacing: 4px;
text-transform: uppercase;
margin-bottom: 0.5rem;
font-weight: 600;
}
.hero-title {
font-family: var(--font-heading);
font-size: clamp(2rem, 5vw, 4rem);
color: #fff;
margin: 0 0 3rem 0;
text-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.current-king-card {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 2rem;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 2rem;
backdrop-filter: blur(10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.3);
transition: transform 0.3s ease;
position: relative;
overflow: hidden;
text-align: center;
max-width: 900px;
margin: 0 auto;
}
@media (min-width: 768px) {
.current-king-card { flex-direction: row; text-align: left; padding: 3rem; }
}
.current-king-card:hover { transform: scale(1.02); border-color: rgba(197, 160, 89, 0.5); }
.portrait-placeholder {
position: relative;
width: 200px;
height: 266px;
flex-shrink: 0;
background: linear-gradient(135deg, #173f70, #0A2342);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.4), 0 10px 25px rgba(0,0,0,0.5);
overflow: hidden;
}
@media (min-width: 768px) {
.portrait-placeholder { width: 260px; height: 346px; }
}
/* Absolute Fill gegen global img + picture-Collapse */
.portrait-placeholder picture,
.portrait-placeholder img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
display: block;
object-fit: cover;
object-position: center top;
}
.portrait-placeholder svg { width: 60px; height: 60px; color: var(--gold); opacity: 0.5; position: relative; z-index: 1; }
.king-details { position: relative; z-index: 2; }
.king-details h2 {
font-family: var(--font-heading);
font-size: clamp(2.2rem, 4vw, 3.8rem);
color: var(--gold);
margin: 0.5rem 0 1rem 0;
text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.king-subtitle-top {
font-family: var(--font-body);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 6px;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 5px;
display: block;
}
.king-subtitle-bottom {
font-family: var(--font-heading);
font-size: 1.8rem;
color: var(--gold);
margin-bottom: 1.5rem;
display: block;
font-style: italic;
}
.king-watermark-year {
position: absolute;
font-family: var(--font-heading);
font-weight: 700;
color: rgba(255, 255, 255, 0.03);
pointer-events: none;
line-height: 1;
z-index: 0;
font-size: 120px;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
@media (min-width: 768px) {
.king-watermark-year { font-size: 180px; bottom: -20px; right: 10px; left: auto; transform: none; }
}
.rott-neon-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 12px;
border: 1px solid currentColor;
border-radius: 4px;
font-size: 0.9rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
background: transparent;
box-shadow: none;
}
/* History Section */
.history-section {
padding: 0 1rem 4rem 1rem;
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
.controls {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
margin: 0 auto 4rem auto;
max-width: 600px;
position: relative;
z-index: 10;
}
@media (min-width: 768px) { .controls { flex-direction: row; } }
.search-box {
background: #fff;
border: 2px solid var(--h-silver);
border-radius: 30px;
padding: 1rem 1.5rem;
color: var(--h-text);
width: 100%;
font-family: var(--font-body);
font-size: 1rem;
outline: none;
transition: border-color 0.3s;
box-shadow: 0 10px 25px rgba(10,35,66,0.1);
}
.search-box:focus { border-color: var(--gold); }
.century-block { margin-bottom: 5rem; }
.century-title {
font-size: 2rem;
color: var(--h-blue);
text-align: center;
margin-bottom: 3rem;
position: relative;
font-family: var(--font-heading);
}
.century-title span {
background: var(--h-bg);
padding: 0 1.5rem;
position: relative;
z-index: 1;
display: inline-block;
border: 1px solid var(--h-silver);
border-radius: 30px;
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--gold);
font-family: var(--font-body);
font-weight: 700;
}
.century-title::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: var(--h-silver);
z-index: 0;
}
/* Unified CSS Grid Layout (3 Columns, Big Rows) */
.names-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 768px) { .names-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .names-grid { grid-template-columns: repeat(3, 1fr); } }
/* Unified Row Mode */
.king-row {
display: flex;
align-items: center;
padding: 15px 20px;
background: #fff;
border-left: 4px solid var(--h-silver);
border-radius: 8px;
transition: all 0.3s;
box-shadow: 0 5px 15px rgba(0,0,0,0.03);
min-height: 130px; /* Match height of portrait cards */
border: 1px solid var(--h-silver); /* Gray border around entire card */
position: relative;
overflow: hidden;
}
.king-row:hover {
border-color: var(--gold) !important;
border-left-color: var(--gold) !important;
background: #fdfbf7;
transform: scale(1.03);
box-shadow: 0 12px 25px rgba(10,35,66,0.08);
}
.king-row.has-thumb {
padding-right: 15px;
cursor: pointer;
}
.row-text {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding-right: 15px;
z-index: 1;
}
.year-ribbon {
position: absolute;
top: 0;
right: 105px;
background-color: var(--h-blue); /* Normal state: Dark Blue */
color: #fff; /* White text */
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 700;
padding: 6px 12px 14px 12px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%);
z-index: 5;
transition: all 0.3s ease;
}
.king-row:hover .year-ribbon {
padding-top: 12px;
background-color: var(--gold); /* Hover state: Gold */
color: #fff;
}
.row-nm {
font-family: var(--font-heading);
color: var(--h-blue);
font-size: 1.4rem;
font-weight: 800;
line-height: 1.1;
margin-top: 0;
height: 2.2em; /* Ensure 2 lines */
display: flex;
align-items: center;
}
.rott-wrapper {
order: -1;
height: 22px;
margin-bottom: 12px;
display: flex;
align-items: center;
transform: translateY(-8px); /* Push badge further up */
}
.row-rott {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 2px 6px;
border: 1px solid currentColor;
border-radius: 4px;
}
.row-thumb {
width: 75px;
height: 100px;
border-radius: 6px;
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
border: 2px solid #fff;
position: relative;
z-index: 2;
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s, border-color 0.4s;
}
.king-row.has-thumb:hover .row-thumb {
transform: scale(1.15) rotate(2deg);
box-shadow: 0 8px 20px rgba(0,0,0,0.25);
border-color: var(--gold);
z-index: 2;
}
/* Absolute Fill (Ehrentafel Thumbs) — .row-thumb bereits position:relative */
.row-thumb picture,
.row-thumb img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
display: block;
object-fit: cover;
object-position: center top;
}
/* Lightbox Styles */
.lightbox-bg {
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
background: rgba(10, 35, 66, 0.9); backdrop-filter: blur(10px);
z-index: 9998; opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}
.lightbox-bg.active { opacity: 1; pointer-events: auto; }
.lightbox-close {
position: fixed; top: 30px; right: 40px; background: transparent; border: none;
color: var(--gold); cursor: pointer; z-index: 10000; opacity: 0; pointer-events: none;
transition: opacity 0.4s ease, transform 0.3s;
}
.lightbox-close svg { width: 40px; height: 40px; }
.lightbox-bg.active ~ .lightbox-close { opacity: 1; pointer-events: auto; }
.lightbox-close:hover { transform: scale(1.1); }
.fly-portrait {
position: fixed; z-index: 9999; pointer-events: none; opacity: 0;
border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,0.4);
border: 3px solid var(--gold); object-fit: cover; background: #fff;
}
.fly-portrait.visible {
opacity: 1;
transition: top 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
left 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lightbox-info {
position: fixed; text-align: center; z-index: 10000; opacity: 0; pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
transform: translateY(20px) translateX(-50%);
background: #fff; border-radius: 12px; padding: 1.5rem 3rem;
box-shadow: 0 15px 35px rgba(0,0,0,0.3); border-top: 4px solid var(--gold);
display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 300px;
}
.lightbox-bg.active ~ .lightbox-info { opacity: 1; transform: translateY(0) translateX(-50%); transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s; }
.lb-yr { font-family: var(--font-heading); color: var(--gold); font-size: 2.2rem; font-weight: 700; line-height: 1; margin: 0 0 4px 0; }
.lb-nm { font-family: var(--font-body); color: var(--h-blue); font-size: 1.5rem; font-weight: 600; line-height: 1.2; margin: 0; }
.lb-rott-badge {
display: inline-flex; align-items: center;
background: transparent; padding: 3px 10px; border-radius: 4px;
font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
margin: 8px 0 0 0; border: 1px solid currentColor;
}
/* From album */
/* Premium Grid Design (CSS/Schatten) */
.schiebenscheeten-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
.schiebenscheeten-grid .grid-item {
display: block;
position: relative;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 4 / 3; /* Uniform ratio for grid */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
background: #f8f9fa; /* Placeholder color while loading */
}
.schiebenscheeten-grid .grid-item:hover {
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}
.schiebenscheeten-grid .grid-item picture,
.schiebenscheeten-grid .grid-item img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
display: block;
object-fit: cover;
transition: transform 0.5s ease;
}
.schiebenscheeten-grid .grid-item:hover img {
transform: scale(1.05);
}
.grid-item-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.3s ease;
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding: 1rem;
}
.schiebenscheeten-grid .grid-item:hover .grid-item-overlay {
opacity: 1;
}
.icon-expand {
color: white;
font-size: 1.5rem;
font-weight: bold;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
/* PhotoSwipe custom caption style */
.pswp__custom-caption {
background: rgba(0, 0, 0, 0.75);
font-size: 16px;
color: #fff;
width: 100%;
padding: 10px 20px;
border-radius: 4px;
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
text-align: center;
max-width: 90%;
backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 0.3s;
}
.pswp__custom-caption a {
color: #fff;
text-decoration: underline;
}
/* From albums */
.gallery-album-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}
/* From addresses */
/* Split Layout für Rottfinder */
.rf-split {
display: flex;
flex-direction: column;
margin-bottom: var(--space-md);
}
.rf-panel {
display: none;
background: var(--h-white);
padding: 30px;
border-bottom: 1px solid var(--h-silver);
animation: rfSlideIn 0.4s ease;
}
.rf-panel.active { display: block; }
.rf-map-wrap {
position: relative;
width: 100%;
height: calc(100vh - var(--header-h) - 280px);
min-height: 300px;
max-height: 700px;
}
.rf-map-wrap #rott-map {
width: 100%;
height: 100%;
z-index: 1;
}
/* Panel Inhalte */
.rf-panel-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid var(--h-silver);
}
.rf-panel-icon {
width: 55px;
height: 55px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--h-white);
flex-shrink: 0;
}
.rf-panel-header h3 {
font-family: var(--font-heading);
font-size: 1.5rem;
color: var(--h-blue);
margin: 0;
line-height: 1.2;
}
.rf-panel-header small {
display: block;
font-size: 0.85rem;
color: var(--h-text-light);
font-family: var(--font-body);
font-weight: 400;
margin-top: 3px;
}
.rf-detail-grid {
display: flex;
flex-direction: column;
gap: 15px;
}
.rf-detail-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 15px;
background: var(--h-bg);
border-radius: 8px;
border-left: 4px solid var(--h-gold);
}
.rf-detail-item i {
color: var(--h-gold);
font-size: 1.1rem;
margin-top: 2px;
flex-shrink: 0;
width: 20px;
text-align: center;
}
.rf-detail-item .rf-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--h-text-light);
font-weight: 700;
margin-bottom: 2px;
}
.rf-detail-item .rf-value {
font-size: 1rem;
color: var(--h-blue);
font-weight: 600;
}
.rf-close-btn {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 20px;
padding: 8px 16px;
background: none;
border: 1px solid var(--h-silver);
border-radius: 6px;
color: var(--h-text-light);
cursor: pointer;
font-size: 0.85rem;
font-family: var(--font-body);
transition: all 0.2s;
}
.rf-close-btn:hover { border-color: var(--h-blue); color: var(--h-blue); }
@keyframes rfSlideIn {
from { opacity: 0; transform: translateY(-15px); }
to { opacity: 1; transform: translateY(0); }
}
/* Desktop: Side-by-side */
@media (min-width: 1024px) {
.rf-split {
flex-direction: row;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.rf-panel {
flex: 0 0 340px;
max-width: 340px;
border-bottom: none;
border-right: 1px solid var(--h-silver);
overflow-y: auto;
max-height: calc(100vh - var(--header-h) - 280px);
}
.rf-map-wrap {
flex: 1;
border-radius: 0;
}
@keyframes rfSlideIn {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
}
/* Mobile Feinschliff */
@media (max-width: 1023px) {
.rf-split {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
margin-left: 10px;
margin-right: 10px;
}
.rf-panel { padding: 20px; }
.rf-panel-header h3 { font-size: 1.3rem; }
.rf-detail-item { padding: 10px 12px; }
}
}
/* ==========================================================================
20. H-CARD & H-GRID (BEM Components)
========================================================================== */
.h-grid-cards {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
@media (min-width: 768px) {
.h-grid-cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
.h-grid-cards { grid-template-columns: 1fr 1fr 1fr; }
}
.h-card {
background: var(--h-white);
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
border: 1px solid var(--h-silver);
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.h-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
border-color: var(--h-gold);
}
.h-card.is-primary {
border-top: 3px solid var(--h-gold);
}
.h-card__header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 12px;
}
.h-card__icon {
font-size: 1.5rem;
color: var(--h-blue);
background: var(--h-bg);
border: 1px solid var(--h-silver);
border-radius: 4px;
padding: 12px;
min-width: 50px;
text-align: center;
transition: all 0.3s ease;
}
.h-card:hover .h-card__icon {
background: var(--h-gold);
color: var(--h-white);
border-color: var(--h-gold);
}
.h-card__content {
flex: 1;
}
.h-card__title {
font-size: 1.2rem;
color: var(--h-text);
font-weight: 700;
margin-bottom: 5px;
font-family: var(--font-heading);
}
.h-card__subtitle {
font-size: 0.95rem;
color: var(--h-text-light);
line-height: 1.4;
}
.h-card__footer {
margin-top: 15px;
padding-top: 12px;
border-top: 1px dashed var(--h-silver);
font-size: 0.85rem;
color: var(--h-text-light);
text-align: right;
display: flex;
justify-content: flex-end;
}
/* ==========================================================================
21. GHOST BADGES (BEM Modifiers)
========================================================================== */
.h-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
white-space: nowrap;
border: 1px solid var(--h-silver);
background: transparent;
color: var(--h-text-light);
}
.h-badge--success { border-color: #27ae60; color: #27ae60; }
.h-badge--warning { border-color: #f39c12; color: #f39c12; }
.h-badge--danger { border-color: #e74c3c; color: #e74c3c; }
.h-badge--info { border-color: var(--h-blue); color: var(--h-blue); }
/* ==========================================================================
22. DATES & WEATHER WIDGETS
========================================================================== */
.dates-container { max-width: 1200px; margin: 0 auto; }
.calendar-grid-wrapper { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); align-items: start; }
@media (min-width: 1024px) {
.calendar-grid-wrapper { grid-template-columns: 3fr 5fr 3fr; }
}
/* Sticky nur Desktop: auf Mobile klebt der Kalender und Folge-Module scrollen drüber */
.calendar-visual-widget {
position: relative;
top: auto;
padding: 0;
overflow: hidden;
border-top: 4px solid var(--h-gold);
z-index: auto;
}
@media (min-width: 1024px) {
.calendar-visual-widget {
position: sticky;
top: 120px;
z-index: 1;
}
}
.cal-header { background: var(--h-blue); color: var(--h-white); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
.cal-nav-btn { background: none; border: none; color: var(--h-white); cursor: pointer; font-size: 1.2rem; }
#cal-month-year { margin: 0; font-family: var(--font-heading); font-size: 1.3rem; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 0.8rem; font-weight: 700; color: var(--h-text-light); padding: 15px 10px 5px; border-bottom: 1px solid var(--h-silver); }
#cal-days { display: grid; grid-template-columns: repeat(7, 1fr); padding: 10px; }
.dates-list-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
#event-list-title { margin: 0; color: var(--h-blue); font-family: var(--font-heading); }
.dates-tabs { display: flex; gap: 15px; margin-bottom: var(--space-md); border-bottom: 2px solid var(--h-silver); padding-bottom: 10px; }
.dates-tab-btn { background: none; border: none; font-size: 1.2rem; font-weight: 600; color: var(--h-text-light); cursor: pointer; padding: 10px 20px; border-bottom: 3px solid transparent; margin-bottom: -12px; transition: color 0.3s; }
.dates-tab-btn.active { color: var(--h-blue); border-bottom-color: var(--h-gold); }
.weather-widget { padding: 0; overflow: hidden; border-top: 4px solid var(--h-gold); display: flex; flex-direction: column; height: 100%; }
.weather-header { background: var(--h-blue); color: var(--h-white); padding: 15px 20px; }
.weather-title { margin: 0; font-family: var(--font-heading); font-size: 1.3rem; }
.weather-current { padding: 30px 20px; text-align: center; border-bottom: 1px solid var(--h-silver); flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
.weather-icon { font-size: 4rem; color: var(--h-gold); margin-bottom: 15px; }
.weather-temp { font-size: 2.5rem; font-family: var(--font-heading); font-weight: 700; color: var(--h-blue); line-height: 1; margin-bottom: 5px; }
.weather-desc { font-size: 1.1rem; color: var(--h-text-light); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.weather-forecast { padding: 20px; background: var(--h-bg); }
.weather-forecast-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--h-silver); }
.weather-forecast-item span:first-child { font-weight: 600; color: var(--h-text); min-width: 60px; }
.weather-forecast-item i { color: var(--h-gold); font-size: 1.2rem; }
.weather-forecast-item span:last-child { font-weight: 700; color: var(--h-blue); }
.weather-forecast-item span:last-child span { color: var(--h-text-light); font-weight: 400; font-size: 0.9em; }
.weather-footer { padding: 20px; text-align: center; border-top: 1px solid var(--h-silver); margin-top: auto; }
.btn-full { display: inline-block; width: 100%; }
/* ==========================================================================
23. WEATHER VIEW SPECIFICS
========================================================================== */
.h-component-hero--compact {
background-color: var(--h-blue);
background-image: linear-gradient(135deg, var(--h-blue) 0%, var(--h-blue-light) 100%);
color: var(--h-white);
padding: var(--space-lg) 0 var(--space-md) 0;
text-align: center;
position: relative;
border-bottom: 4px solid var(--h-gold);
}
.h-component-hero--compact .h-hero-eyebrow {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--h-gold);
margin-bottom: 10px;
}
.h-component-hero--compact h1 {
font-size: var(--text-h2);
margin-bottom: 15px;
color: var(--h-white);
}
.h-component-hero--compact p {
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
.weather-hero-live { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.weather-hero-main { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 25px; }
.weather-hero-icon { font-size: 6rem; color: var(--h-gold); filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3)); }
.weather-hero-temp { font-family: var(--font-heading); font-size: 6rem; font-weight: 700; line-height: 1; text-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.weather-hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; max-width: 600px; }
.weather-hero-updated { margin-top: 15px; font-size: 0.85rem; color: rgba(255,255,255,0.6); }
.weather-hero-chips .h-badge {
background: rgba(255, 255, 255, 0.15);
color: var(--h-white);
border-color: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(4px);
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
padding: 6px 12px;
white-space: normal;
text-align: center;
}
@media (max-width: 768px) {
.h-component-hero-content h1 {
font-size: 2.5rem;
}
.weather-hero-main {
flex-direction: column;
gap: 10px;
}
.weather-hero-icon {
font-size: 4rem;
}
.weather-hero-temp {
font-size: 4rem;
}
.weather-hero-chips {
gap: 8px;
}
.weather-hero-chips .h-badge {
font-size: 0.75rem;
padding: 5px 10px;
}
}
.weather-alerts { margin-top: var(--space-md); margin-bottom: var(--space-md); }
.weather-alert-card { background: #e74c3c; color: white; border-radius: 8px; box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4); margin-bottom: 10px; overflow: hidden; border: none; }
.weather-alert-header { padding: 15px 20px; display: flex; align-items: center; gap: 15px; font-weight: 500; color: white; text-decoration: none; }
.weather-alert-header i { font-size: 1.8rem; color: #f1c40f; }
.weather-alert-content { flex: 1; }
.weather-alert-content strong { display: block; font-size: 1.1rem; font-family: var(--font-heading); }
.weather-alert-content div { font-size: 0.9rem; opacity: 0.9; }
.weather-alert-content span { float: right; font-size: 0.8rem; text-decoration: underline; }
.weather-alert-details { padding: 15px 20px; background: rgba(0,0,0,0.1); font-size: 0.95rem; line-height: 1.5; border-top: 1px solid rgba(255,255,255,0.2); }
.weather-facts-grid { margin-bottom: var(--space-lg); margin-top: var(--space-md); }
.weather-fact { text-align: center; display: flex; flex-direction: column; justify-content: center; height: 100%; border-bottom: 4px solid var(--h-gold); }
.weather-fact:nth-child(2) { border-bottom-color: #e67e22; }
.weather-fact:nth-child(3) { border-bottom-color: #3498db; }
.weather-fact:nth-child(4) { border-bottom-color: #9b59b6; }
.weather-fact i { font-size: 2.5rem; color: var(--h-gold); margin-bottom: 15px; }
.weather-fact:nth-child(2) i { color: #e67e22; }
.weather-fact:nth-child(3) i { color: #3498db; }
.weather-fact:nth-child(4) i { color: #9b59b6; }
.weather-fact h4 { margin: 0; font-size: 1rem; color: var(--h-text-light); }
.weather-fact div { font-size: 1.8rem; font-family: var(--font-heading); font-weight: 700; color: var(--h-blue); margin-top: auto; padding-top: 10px; }
.weather-hourly-card { margin: 40px auto; max-width: 1000px; padding: 0 !important; overflow: hidden; border-radius: 12px; }
.weather-hourly-card .h-card__content { padding: 30px; }
.hourly-tabs-nav { display: flex; gap: 10px; margin-bottom: 20px; justify-content: center; flex-wrap: wrap; }
.hourly-tab-btn { background: transparent; color: var(--h-blue); border: 2px solid var(--h-gold); padding: 8px 20px; border-radius: 20px; font-weight: 700; cursor: pointer; transition: all 0.3s; font-family: var(--font-heading); }
.hourly-tab-btn.active { background: var(--h-gold); color: var(--h-white); }
.weather-days-title { font-family: var(--font-heading); font-size: var(--text-h2); color: var(--h-blue); margin-bottom: 30px; text-align: center; }
.weather-days-grid { display: flex; flex-direction: column; gap: 30px; max-width: 800px; margin: 0 auto; }
.weather-day-card { border-radius: 12px; overflow: hidden; }
.weather-day-date { display: flex; flex-direction: column; }
.weather-day-date div:first-child { font-size: 1.5rem; font-weight: 700; font-family: var(--font-heading); line-height: 1.2; }
.weather-day-date div:last-child { font-size: 1rem; opacity: 0.8; font-weight: 400; }
.weather-day-summary { display: flex; align-items: center; justify-content: flex-end; gap: clamp(15px, 5vw, 80px); flex: 1; }
.weather-day-metrics { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px; }
.uv-metric { font-size: 0.85rem; color: #9b59b6; font-weight: 700; text-transform: uppercase; }
.rain-metric { font-size: 0.85rem; color: #3498db; font-weight: 700; }
.weather-day-summary > i { color: var(--h-gold); font-size: 2.5rem; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3)); }
.weather-day-temps { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.weather-day-temps span:first-child { font-size: 2rem; font-weight: 700; font-family: var(--font-heading); }
.weather-day-temps span:last-child { font-size: 1.1rem; opacity: 0.7; font-weight: 400; }
.bg-blue { background: var(--h-blue); color: var(--h-white); }
.weather-day-card .h-card__header {
margin: -20px -20px 20px -20px;
padding: 15px 20px;
border-radius: 12px 12px 0 0;
justify-content: space-between;
}
/* ==========================================================================
22. GLOBAL UTILITY CLASSES (STRICT NO-INLINE-STYLES)
========================================================================== */
.h-flex { display: flex; }
.h-flex-wrap { flex-wrap: wrap; }
.h-flex-column { flex-direction: column; }
.h-flex-1 { flex: 1; }
.h-flex-2 { flex: 2; }
.h-items-center { align-items: center; }
.h-items-baseline { align-items: baseline; }
.h-justify-center { justify-content: center; }
.h-justify-between { justify-content: space-between; }
.h-justify-end { justify-content: flex-end; }
.h-gap-xs { gap: 5px; }
.h-gap-sm { gap: 10px; }
.h-gap-md { gap: 15px; }
.h-gap-lg { gap: 20px; }
.h-gap-xl { gap: 30px; }
.h-grid { display: grid; }
.h-grid-2 { grid-template-columns: repeat(2, 1fr); }
.h-grid-cards-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.h-grid-cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.h-grid-cards-lg { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.h-grid-cards-xl { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.h-m-0 { margin: 0; }
.h-mt-sm { margin-top: 10px; }
.h-mt-xl { margin-top: 40px; }
.h-mb-xs { margin-bottom: 5px; }
.h-mb-sm { margin-bottom: 10px; }
.h-mb-md { margin-bottom: 20px; }
.h-mb-lg { margin-bottom: 30px; }
.h-mb-xl { margin-bottom: 60px; }
.h-p-0 { padding: 0; }
.h-p-sm { padding: 10px; }
.h-p-md { padding: 15px; }
.h-p-lg { padding: 20px; }
.h-px-md { padding-left: 15px; padding-right: 15px; }
.h-px-lg { padding-left: 20px; padding-right: 20px; }
.h-py-sm { padding-top: 10px; padding-bottom: 10px; }
.h-py-lg { padding-top: 20px; padding-bottom: 20px; }
.h-pb-sm { padding-bottom: 10px; }
.h-pb-lg { padding-bottom: var(--space-lg); }
.h-mr-sm { margin-right: 8px; }
.h-text-center { text-align: center; }
.h-text-right { text-align: right; }
.h-text-left { text-align: left; }
.h-text-uppercase { text-transform: uppercase; }
.h-text-light { color: var(--h-text-light) !important; }
.h-text-blue { color: var(--h-blue) !important; }
.h-text-gold { color: var(--h-gold) !important; }
.h-text-silver { color: var(--h-silver) !important; }
.h-text-white { color: var(--h-white) !important; }
.h-text-danger { color: #dc3545 !important; }
.h-font-normal { font-weight: normal; }
.h-font-bold { font-weight: bold; }
.h-font-xs { font-size: 0.75rem; }
.h-font-sm { font-size: 0.85rem; }
.h-font-md { font-size: 1rem; }
.h-font-lg { font-size: 1.1rem; }
.h-font-xl { font-size: 1.25rem; }
.h-font-xxl { font-size: 1.5rem; }
.h-font-xxxl { font-size: 2.5rem; }
.h-font-xxxxl { font-size: 3rem; }
.h-font-heading { font-family: var(--font-heading); }
.h-line-height-1 { line-height: 1; }
.h-letter-spacing-1 { letter-spacing: 1px; }
.h-w-100 { width: 100%; }
.h-w-auto { width: auto; }
.h-min-w-280 { min-width: 280px; }
.h-min-w-300 { min-width: 300px; }
.h-min-w-600 { min-width: 600px; }
.h-max-w-1000 { max-width: 1000px; margin-left: auto; margin-right: auto; }
.h-bg-silver { background: var(--h-silver); }
.h-bg-white { background: var(--h-white); }
.h-bg-blue { background: var(--h-blue); }
.h-bg-gold { background: var(--h-gold); }
.h-bg-danger { background: #dc3545; }
.h-bg-light { background: rgba(0,0,0,0.05); }
.h-border-bottom { border-bottom: 1px solid var(--h-silver); }
.h-border-bottom-2 { border-bottom: 2px solid var(--h-silver); }
.h-border-top { border-top: 1px solid var(--h-silver); }
.h-border-top-dashed { border-top: 1px dashed var(--h-silver); }
.h-border-top-gold { border-top: 3px solid var(--h-gold); }
.h-border-silver { border: 1px solid var(--h-silver); }
.h-radius-md { border-radius: 4px; }
.h-overflow-hidden { overflow: hidden; }
.h-overflow-auto { overflow-x: auto; }
.h-block { display: block; }
.h-inline-block { display: inline-block; }
.h-hidden { display: none !important; }
.h-opacity-80 { opacity: 0.8; }
.h-relative { position: relative; z-index: 10; }
.h-input { padding: 8px; border: 1px solid var(--h-silver); border-radius: 4px; font-weight: normal; }
.h-select { padding: 8px; border: 1px solid var(--h-silver); border-radius: 4px; font-weight: normal; }
.h-table { width: 100%; border-collapse: collapse; }
.h-table th { padding: 15px; background: var(--h-bg); border-bottom: 2px solid var(--h-silver); text-align: left; }
.h-table td { padding: 15px; border-bottom: 1px solid var(--h-silver); vertical-align: middle; }
/* 23. Rotts & States */
.h-bg-warning-light { background: #fff3cd !important; }
.h-border-left-warning { border-left: 4px solid #ffc107 !important; }
.h-bg-success-light { background: #e8f5e9 !important; }
.h-border-left-success { border-left: 4px solid #27ae60 !important; }
.h-border-left-silver { border-left: 4px solid var(--h-silver) !important; }
.h-shot-circle { display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; border: 1px solid var(--h-silver); font-weight: 700; }
.h-w-70 { width: 70px !important; }
.h-border-left-transparent { border-left: 4px solid transparent !important; }
.h-opacity-60 { opacity: 0.6 !important; }
.h-contents { display: contents !important; }
.h-w-60 { width: 60px !important; }
.h-py-xxs { padding-top: 2px !important; padding-bottom: 2px !important; }
.h-ml-auto { margin-left: auto !important; }
.h-overflow-x-auto { overflow-x: auto !important; }
.h-border-2-gold { border: 2px solid var(--h-gold) !important; }
.h-border-2-transparent { border: 2px solid transparent !important; }
.h-flex-shrink-0 { flex-shrink: 0 !important; }
.h-min-w-200 { min-width: 200px !important; }
.h-bg-success { background: #27ae60 !important; }
.h-border-bottom-2-gold { border-bottom: 2px solid var(--h-gold) !important; }
.h-min-w-120 { min-width: 120px !important; }
.h-border-top-3-gold { border-top: 3px solid var(--h-gold) !important; }
.h-border-bottom-2-silver { border-bottom: 2px solid var(--h-silver) !important; }
.h-items-baseline { align-items: baseline !important; }
.h-border-collapse { border-collapse: collapse !important; }
.h-text-left { text-align: left !important; }
.h-px-xs { padding-left: 6px !important; padding-right: 6px !important; }
.h-ml-sm { margin-left: 10px !important; }
.h-text-warning-dark { color: #856404 !important; }
.h-cursor-pointer { cursor: pointer !important; }
.h-bg-warning-alpha { background: rgba(255,193,7,0.2) !important; }
.h-p-0 { padding: 0 !important; }
.h-min-w-800 { min-width: 800px !important; }
.h-mt-xl { margin-top: 3rem !important; }
.h-z-10 { z-index: 10 !important; }
.h-mt-0 { margin-top: 0 !important; }
.h-pt-xl { padding-top: 3rem !important; }
.h-radius-lg { border-radius: 12px !important; }
.h-border-top-none { border-top: none !important; }
.h-shadow-lg { box-shadow: 0 -10px 40px rgba(0,0,0,0.25) !important; }
.h-p-xl { padding: 1.5rem 2.5rem !important; }
.h-font-medium { font-weight: 500 !important; }
.h-tracking-wide { letter-spacing: 1px !important; }
.h-border-current { border: 1px solid currentColor !important; }
.h-radius-pill { border-radius: 20px !important; }
.h-inline-flex { display: inline-flex !important; }
.h-py-xs { padding-top: 4px !important; padding-bottom: 4px !important; }
.h-cursor-default { cursor: default !important; }
.h-pointer-events-none { pointer-events: none !important; }
.h-text-shadow-lg { text-shadow: 2px 2px 10px rgba(0,0,0,0.5) !important; }
.h-mr-xs { margin-right: 5px !important; }
.h-mb-xs { margin-bottom: 5px !important; }
.h-text-white-90 { color: rgba(255,255,255,0.9) !important; }
.h-font-xxxl { font-size: 2.5rem !important; }
.h-bg-gold-light { background: #fffdf5 !important; }
.h-border-2-gold { border: 2px solid var(--h-gold) !important; }
.h-grid { display: grid !important; }
.h-grid-cols-2 { grid-template-columns: 1fr 1fr !important; }
.h-text-right { text-align: right !important; }
.h-mt-xs { margin-top: 4px !important; }
.h-font-md { font-size: 1.1rem !important; }
.h-max-w-600 { max-width: 600px !important; }
.h-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.h-max-w-500 { max-width: 500px !important; }
.h-normal-case { text-transform: none !important; }
.h-tracking-normal { letter-spacing: normal !important; }
.h-font-light { font-weight: 300 !important; }
.h-mr-sm { margin-right: 8px !important; }
.h-max-w-800 { max-width: 800px !important; }
.h-p-clamp { padding: clamp(20px, 5vw, 40px) !important; }
.h-shadow-soft { box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important; }
.h-mt-negative { margin-top: -50px !important; }
.h-z-2 { z-index: 2 !important; }
.h-bg-gray-light { background: #f9f9f9 !important; }
.h-border-left-4-gold { border-left: 4px solid var(--h-gold) !important; }
.h-text-gray-dark { color: #333 !important; }
.h-line-height-lg { line-height: 1.8 !important; }
.h-border-bottom-2-gray { border-bottom: 2px solid #eee !important; }
.h-h-400 { height: 400px !important; }
.h-overflow-hidden { overflow: hidden !important; }
.h-z-1 { z-index: 1 !important; }
.h-border-top-1-gray { border-top: 1px solid #eee !important; }
.h-bg-blue { background: var(--h-blue) !important; }
.h-text-decoration-none { text-decoration: none !important; }
.h-grid-auto-fill-300 { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; gap: 30px !important; }
.h-text-inherit { color: inherit !important; }
.h-ml-xs { margin-left: 5px !important; }
.h-table-responsive { overflow-x: auto !important; }
.h-table { width: 100% !important; border-collapse: collapse !important; }
.h-table-striped tbody tr:nth-child(even) { background-color: #f9f9f9; }
.h-border-bottom-1-silver { border-bottom: 1px solid var(--h-silver) !important; }
.h-text-left { text-align: left !important; }
.h-font-4xl { font-size: 3rem !important; }
.h-mb-40 { margin-bottom: 40px !important; }
.h-grid-1 { display: grid !important; grid-template-columns: 1fr !important; gap: 30px !important; }
.h-card-horizontal { display: flex !important; flex-direction: row !important; background: var(--h-white) !important; border: 1px solid var(--h-silver) !important; border-radius: 8px !important; overflow: hidden !important; box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important; min-height: 250px !important; }
.h-card-horizontal-img { flex: 0 0 40% !important; background-size: cover !important; background-position: center !important; }
.h-card-horizontal-body { padding: 30px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; flex: 1 !important; }
.h-font-xs { font-size: 0.85rem !important; }
.h-font-xxl { font-size: 1.6rem !important; }
.h-font-base { font-size: 1rem !important; }
.h-line-height-base { line-height: 1.6 !important; }
.h-font-semibold { font-weight: 600 !important; }
.h-mt-auto { margin-top: auto !important; }
.h-font-2xs { font-size: 0.7em !important; }
.h-ml-2xs { margin-left: 3px !important; }
.h-justify-between { justify-content: space-between !important; }
.h-items-end { align-items: flex-end !important; }
.h-mb-30 { margin-bottom: 30px !important; }
.h-font-3xl { font-size: 2.2rem !important; }
.h-shadow-lg { box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important; }
.h-w-100 { width: 100% !important; }
.h-h-auto { height: auto !important; }
.h-text-base { color: var(--h-text) !important; }
.h-mb-md { margin-bottom: 20px !important; }
.h-block { display: block !important; }
.h-font-md { font-size: 1.1rem !important; }
.h-line-height-lg { line-height: 1.8 !important; }
.officer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; margin-top: 2rem; }
.officer-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 15px; padding: 2rem; text-align: center; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; align-items: center; }
.officer-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.15); background: rgba(255, 255, 255, 0.15); }
.officer-avatar {
position: relative;
width: 120px;
height: 120px;
border-radius: 50%;
margin-bottom: 1.5rem;
border: 3px solid rgba(255, 255, 255, 0.3);
background-color: rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
justify-content: center;
color: var(--h-gold, #c5a059);
overflow: hidden;
flex-shrink: 0;
}
.officer-avatar picture,
.officer-avatar img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: cover;
display: block;
border-radius: 50%;
}
.officer-avatar svg { width: 50px; height: 50px; position: relative; z-index: 1; }
.officer-name { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-color, #333); }
.officer-rank { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: var(--h-gold, #c5a059); margin-bottom: 1rem; font-weight: 600; }
.officer-city { font-size: 0.85rem; color: #666; margin-top: auto; }
.dark-mode .officer-name { color: #fff; }
.dark-mode .officer-city { color: #ccc; }
.h-mr-1 { margin-right: 4px !important; }
.h-align-text-bottom { vertical-align: text-bottom !important; }
.h-border-1-silver { border: 1px solid var(--h-silver) !important; }
.h-flex-1 { flex: 1 !important; }
.h-gap-sm { gap: 10px !important; }
/* ==========================================================================
HOMEPAGE LAZY LOADING (Viewport-Reveal + deferred backgrounds)
========================================================================== */
.hp-lazy-stack {
width: 100%;
/* Kein stacking-Chaos: Sektionen bleiben im normalen Fluss */
isolation: auto;
}
/*
* Startzustand: skaliert + weich.
* data-hp-dir steuert die Richtung (runter- vs. hochscrollen).
* Wichtig: nach is-visible KEIN transform behalten (sticky/stacking-Bug).
*/
.hp-lazy {
opacity: 0;
transform: translate3d(0, 64px, 0) scale(0.94);
filter: blur(6px);
transition:
opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
filter 0.75s ease;
will-change: opacity, transform, filter;
position: relative;
z-index: 0;
}
/* Runterscrollen: kommt von unten */
.hp-lazy[data-hp-dir="down"] {
transform: translate3d(0, 64px, 0) scale(0.94);
}
/* Hochscrollen: kommt von oben */
.hp-lazy[data-hp-dir="up"] {
transform: translate3d(0, -64px, 0) scale(0.94);
}
.hp-lazy.is-visible {
opacity: 1;
transform: none !important;
filter: none;
will-change: auto;
z-index: 0;
}
/* Stagger: nacheinander spürbarer */
.hp-lazy.is-visible[data-hp-stagger="1"] { transition-delay: 0.05s; }
.hp-lazy.is-visible[data-hp-stagger="2"] { transition-delay: 0.12s; }
.hp-lazy.is-visible[data-hp-stagger="3"] { transition-delay: 0.2s; }
.hp-lazy.is-visible[data-hp-stagger="4"] { transition-delay: 0.28s; }
.hp-lazy.is-visible[data-hp-stagger="5"] { transition-delay: 0.36s; }
.hp-lazy.is-visible[data-hp-stagger="6"] { transition-delay: 0.44s; }
.hp-lazy-bg {
background-color: var(--h-silver);
background-size: cover;
background-position: center;
transition: opacity 0.55s ease, filter 0.55s ease;
filter: blur(8px);
}
.hp-lazy-bg:not(.is-loaded) {
opacity: 0.35;
}
.hp-lazy-bg.is-loaded {
opacity: 1;
filter: none;
}
@media (prefers-reduced-motion: reduce) {
.hp-lazy {
opacity: 1;
transform: none;
filter: none;
transition: none;
}
.hp-lazy-bg {
filter: none;
opacity: 1;
}
}
/* ==========================================================================
FRONTEND LOGIN (Offiziers-Login, view=login)
========================================================================== */
.ss-login {
position: relative;
min-height: calc(100vh - var(--header-h, 80px) - 120px);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 1rem 3rem;
overflow: hidden;
}
.ss-login__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-color: var(--h-blue);
transform: scale(1.04);
}
.ss-login__scrim {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(10, 35, 66, 0.92) 0%, rgba(10, 35, 66, 0.75) 50%, rgba(10, 35, 66, 0.88) 100%);
}
.ss-login__shell {
position: relative;
z-index: 2;
width: 100%;
max-width: 440px;
}
.ss-login__card {
background: rgba(255, 255, 255, 0.97);
border: 1px solid rgba(197, 160, 89, 0.45);
border-radius: 16px;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
padding: 2rem 1.5rem;
}
@media (min-width: 768px) {
.ss-login__card { padding: 2.5rem 2.25rem; }
}
.ss-login__brand { text-align: center; margin-bottom: 1.75rem; }
.ss-login__eyebrow {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--h-gold);
margin-bottom: 0.5rem;
}
.ss-login__title {
font-family: var(--font-heading);
font-size: clamp(1.8rem, 4vw, 2.4rem);
color: var(--h-blue);
margin: 0 0 0.5rem 0;
line-height: 1.15;
}
.ss-login__lead {
margin: 0;
color: var(--h-text-light);
font-size: 0.95rem;
line-height: 1.5;
}
.ss-login__form { display: flex; flex-direction: column; gap: 1rem; }
.ss-login__field { display: flex; flex-direction: column; gap: 0.4rem; }
.ss-login__label {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--h-blue);
}
.ss-login__input {
width: 100%;
padding: 0.85rem 1rem;
border: 1px solid var(--h-silver);
border-radius: 8px;
font-size: 1rem;
color: var(--h-blue);
background: #fff;
transition: border-color 0.2s, box-shadow 0.2s;
}
.ss-login__input:focus {
outline: none;
border-color: var(--h-gold);
box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.25);
}
.ss-login__remember {
display: flex;
align-items: center;
gap: 0.55rem;
font-size: 0.9rem;
color: var(--h-text-light);
cursor: pointer;
user-select: none;
}
.ss-login__checkbox { width: 1.05rem; height: 1.05rem; accent-color: var(--h-gold); }
.ss-login__submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
width: 100%;
margin-top: 0.35rem;
padding: 0.95rem 1.25rem;
border: none;
border-radius: 8px;
background: var(--h-gold);
color: var(--h-blue);
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.06em;
cursor: pointer;
transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.ss-login__submit:hover {
background: var(--h-gold-light);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(197, 160, 89, 0.35);
}
.ss-login__footer {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--h-silver);
display: flex;
flex-direction: column;
gap: 0.65rem;
align-items: center;
text-align: center;
}
.ss-login__link {
color: var(--h-blue);
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
}
.ss-login__link:hover { color: var(--h-gold); }
.ss-login__link--muted {
color: var(--h-text-light);
font-weight: 500;
font-size: 0.85rem;
}
.footer-login-link {
color: var(--h-gold-light) !important;
font-weight: 600;
}
.footer-login-link i { margin-right: 5px; }