MrBlake
71df09a261
Runtime-Daten aus Git entfernen, WebP-Konvertierung ergänzen, Installation und Updates dokumentieren sowie den Repository-Link im Footer hinzufügen.
214 lines
7.2 KiB
CSS
214 lines
7.2 KiB
CSS
/* assets/styles.css — KulTour Conversion Theme */
|
||
|
||
/* ===== Farbwelt (Logo-Blau + Akzent-Gelb) ===== */
|
||
:root{
|
||
--brand:#1789ca;
|
||
--brand-700:#116da3;
|
||
--accent:#f3c546;
|
||
--accent-700:#e0b233;
|
||
--ink:#0e2230;
|
||
--muted:#6b7b88;
|
||
--bg:#ffffff;
|
||
--soft:#f6f8fb;
|
||
--soft-2:#eef5fb;
|
||
}
|
||
|
||
/* ===== Basis ===== */
|
||
html{scroll-behavior:smooth}
|
||
body{color:var(--ink); background:var(--bg)}
|
||
a{color:var(--brand)}
|
||
a:hover{color:var(--brand-700)}
|
||
.navbar{backdrop-filter:saturate(120%) blur(6px)}
|
||
.navbar .nav-link{font-weight:500}
|
||
.navbar .nav-link.active{color:var(--brand)!important}
|
||
.brand-logo{display:flex;align-items:center;gap:.5rem;font-weight:800;}
|
||
.brand-logo img{height:34px;width:auto}
|
||
|
||
/* zarte farbige Top-Border unter Navbar */
|
||
.navbar.border-bottom{box-shadow:0 2px 0 0 rgba(23,137,202,.15)}
|
||
|
||
/* ===== Hero (Foto + Farbe) ===== */
|
||
.hero{
|
||
position:relative; min-height:68vh; display:flex; align-items:center;
|
||
color:#fff; background-size:cover; background-position:center; background-repeat:no-repeat;
|
||
}
|
||
.hero::before{
|
||
content:""; position:absolute; inset:0;
|
||
background:
|
||
linear-gradient( to bottom right, rgba(23,137,202,.65), rgba(243,197,70,.45) ),
|
||
linear-gradient( to bottom, rgba(0,0,0,.25), rgba(0,0,0,.55) );
|
||
}
|
||
.hero .container{position:relative; z-index:2}
|
||
.hero h1{font-weight:850; line-height:1.04; letter-spacing:.2px; text-shadow:0 2px 16px rgba(0,0,0,.25)}
|
||
.hero .lead{font-size:1.18rem}
|
||
|
||
/* ===== Buttons ===== */
|
||
.btn-brand{
|
||
--bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand);
|
||
--bs-btn-hover-bg:var(--brand-700); --bs-btn-hover-border-color:var(--brand-700);
|
||
--bs-btn-color:#fff;
|
||
}
|
||
.btn-accent{
|
||
--bs-btn-bg:var(--accent); --bs-btn-border-color:var(--accent);
|
||
--bs-btn-hover-bg:var(--accent-700); --bs-btn-hover-border-color:var(--accent-700);
|
||
--bs-btn-color:#1a1a1a; font-weight:700;
|
||
}
|
||
.btn-outline-brand{
|
||
--bs-btn-color:#fff; --bs-btn-border-color:rgba(255,255,255,.7);
|
||
--bs-btn-hover-color:#fff; --bs-btn-hover-bg:rgba(255,255,255,.12);
|
||
--bs-btn-hover-border-color:#fff;
|
||
}
|
||
|
||
/* ===== Sektionen & Akzente ===== */
|
||
.section-soft{background:var(--soft)}
|
||
.section-soft-2{background:var(--soft-2)}
|
||
.section-title{font-weight:800}
|
||
.section-kicker{color:var(--brand); font-weight:700; letter-spacing:.08em; text-transform:uppercase}
|
||
|
||
/* schmale Akzentlinie */
|
||
.akzent-line{height:4px; width:64px; background:linear-gradient(90deg,var(--accent),var(--brand)); border-radius:8px}
|
||
|
||
/* ===== Karten (Events) ===== */
|
||
.card{
|
||
border:1px solid #e9edf3; border-radius:1rem; transition:transform .2s ease, box-shadow .2s ease;
|
||
background:linear-gradient(180deg,#fff, #fff), radial-gradient(1200px 300px at 0% -10%, rgba(23,137,202,.06), transparent 60%);
|
||
background-clip:padding-box, border-box;
|
||
}
|
||
.card:hover{transform:translateY(-2px); box-shadow:0 12px 34px rgba(0,0,0,.08)}
|
||
.card .top-ribbon{
|
||
position:absolute; top:12px; left:12px; background:var(--brand); color:#fff; font-weight:700;
|
||
padding:.28rem .55rem; border-radius:.5rem; font-size:.8rem; box-shadow:0 6px 14px rgba(23,137,202,.25);
|
||
}
|
||
.card-img-top{object-fit:cover; max-height:230px; border-top-left-radius:1rem; border-top-right-radius:1rem}
|
||
|
||
/* Badges */
|
||
.badge.text-bg-primary{background-color:var(--brand)!important}
|
||
.badge-accent{background:var(--accent); color:#1a1a1a; font-weight:700}
|
||
|
||
/* ===== CTA-Band ===== */
|
||
.cta-band{
|
||
background:
|
||
radial-gradient(1000px 300px at 0% 0%, rgba(23,137,202,.12), transparent 60%),
|
||
linear-gradient(90deg, rgba(23,137,202,.08), rgba(243,197,70,.14));
|
||
border:1px solid rgba(23,137,202,.18); border-radius:1.25rem;
|
||
}
|
||
|
||
/* ===== Feature-Icons ===== */
|
||
.feature{
|
||
display:flex; gap:.9rem; align-items:flex-start;
|
||
padding:1rem 1.1rem; border-radius:.9rem; background:#fff; border:1px solid #e9edf3;
|
||
}
|
||
.feature .icon{
|
||
width:42px; height:42px; display:grid; place-items:center; border-radius:.7rem;
|
||
background:linear-gradient(135deg, var(--brand), var(--accent));
|
||
color:#fff; font-size:1.2rem; box-shadow:0 10px 20px rgba(23,137,202,.25);
|
||
}
|
||
|
||
/* ===== Partnerband ===== */
|
||
.partner-band{
|
||
display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap; opacity:.9
|
||
}
|
||
.partner-band img{height:34px; filter:grayscale(40%); transition:filter .2s}
|
||
.partner-band img:hover{filter:none}
|
||
|
||
/* ===== Footer ===== */
|
||
footer{background:#fff}
|
||
footer a{text-decoration:none}
|
||
footer .separator{opacity:.25}
|
||
footer .footer-gitea{
|
||
display:inline-flex; align-items:center; justify-content:center;
|
||
width:1.5rem; height:1.5rem; border-radius:.35rem; opacity:.78;
|
||
transition:opacity .15s ease, transform .15s ease, background-color .15s ease;
|
||
}
|
||
footer .footer-gitea:hover{opacity:1; transform:translateY(-1px); background:#f1f5f0}
|
||
footer .footer-gitea:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
|
||
footer .footer-gitea img{display:block; width:1.125rem; height:1.125rem}
|
||
|
||
/* Container: keine fixe Höhe mehr, nur Polster */
|
||
.coop-logo{
|
||
display:inline-flex; align-items:center; justify-content:center;
|
||
padding:.35rem .55rem; border-radius:.75rem;
|
||
transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
|
||
filter:grayscale(40%) contrast(1.05) brightness(1.02) opacity(.9);
|
||
background:#fff; border:1px solid #e9edf3;
|
||
line-height:0; /* verhindert vertikale Zentrier-Zitterei */
|
||
}
|
||
/* Bild: nur max-height begrenzen, Breite automatisch -> keine Verzerrung */
|
||
.coop-logo img{
|
||
display:block;
|
||
max-height:40px; /* einheitliche optische Höhe */
|
||
height:auto; /* Ratio bleibt erhalten */
|
||
width:auto; /* Ratio bleibt erhalten */
|
||
}
|
||
.coop-logo:hover{
|
||
filter:none; transform:translateY(-1px);
|
||
box-shadow:0 10px 24px rgba(23,137,202,.15);
|
||
}
|
||
|
||
/* ===== Modals: Mobile korrekt einpassen ===== */
|
||
.modal-content{ max-height: 100vh; }
|
||
|
||
/* Standard: auf Desktop/Tablets */
|
||
.modal-img {
|
||
width: auto;
|
||
max-width: 100%;
|
||
height: auto;
|
||
max-height: 90vh; /* nie höher als Viewport */
|
||
object-fit: contain;
|
||
display: block;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.modal-body{
|
||
overflow: auto; /* falls Text länger ist */
|
||
}
|
||
|
||
/* Phones: Header (~56px) + Footer-Reserve (~56px) + Innenabstand (~16px*2) abziehen */
|
||
@media (max-width: 576px) {
|
||
.modal-body {
|
||
max-height: 75vh;
|
||
overflow-y: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
}
|
||
|
||
/* Beschreibung auf Karten & im Modal */
|
||
.poster-desc{
|
||
text-align: center;
|
||
margin: .75rem auto 0;
|
||
color:#344654;
|
||
max-width: 46ch;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
/* Abstände zwischen erlaubten HTML-Elementen harmonisieren */
|
||
.poster-desc p{ margin: .5rem 0; }
|
||
.poster-desc ul, .poster-desc ol{
|
||
display: inline-block; /* zentriert wirken lassen */
|
||
text-align: left; /* Lesbarkeit bei Listen */
|
||
margin: .5rem auto; padding-left: 1.2rem;
|
||
}
|
||
.poster-desc li{ margin: .15rem 0; }
|
||
|
||
/* Karten-Beschreibung visuell kürzen, ohne HTML zu zerstören */
|
||
.poster-desc{
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 6; /* Anzahl Zeilen auf Karten */
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Im Modal die Klammerung aufheben – volle Beschreibung */
|
||
.modal .poster-desc{
|
||
display: block;
|
||
-webkit-line-clamp: initial;
|
||
-webkit-box-orient: initial;
|
||
overflow: visible;
|
||
max-width: 60ch; /* im Modal etwas breiter, aber zentriert */
|
||
margin: 0 auto 0;
|
||
}
|
||
|
||
.poster-desc h3, .poster-desc h4, .poster-desc h5{
|
||
text-align:center; margin:.6rem 0 .35rem; line-height:1.25;
|
||
}
|