17. und 18.Juli 2025
lass wachsen....
to be announced *** to be announced *** to be announced *** to be announced *** to be announced *** to be announced *** to be announced ** to be announced *** to be announced *** to be announced *** to be announced *** to be announced *** to be announced ***
/* =========================
OPEN AIR OTTENSHEIM 2026
New Look (violet + acid green)
Paste into Cargo: Site CSS / CSS Editor
========================= */
:root{
--violet:#63329B;
--green:#B4D06A;
--dark:#27292D;
--paper:#F6F4FB;
--white:#ffffff;
--radius:24px;
--radius2:18px;
--shadow: 0 14px 40px rgba(39,41,45,.10);
--line: 1px solid rgba(39,41,45,.10);
--max: 980px;
}
/* Basic page reset */
html{ scroll-behavior:smooth; }
body{
margin:0 !important;
color:var(--dark);
background:
radial-gradient(900px 600px at 12% 10%, rgba(180,208,106,.22), transparent 60%),
radial-gradient(900px 650px at 88% 18%, rgba(99,50,155,.20), transparent 62%),
linear-gradient(180deg, var(--paper), #fff 70%);
font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
font-weight: 520;
letter-spacing: .1px;
}
/* Make the whole content feel like a centered “page” */
body > *{
max-width: var(--max);
margin-left: auto;
margin-right: auto;
padding-left: 18px;
padding-right: 18px;
}
/* Headings: bigger + cleaner */
h1,h2,h3{
margin: 0.6em 0 0.35em;
letter-spacing: -0.6px;
}
h1{
font-size: clamp(28px, 5vw, 54px);
line-height: 1.02;
font-weight: 900;
}
h2{
font-size: clamp(18px, 3vw, 28px);
line-height: 1.15;
font-weight: 850;
}
b,strong{ font-weight: 900; }
/* Links */
a{
color: inherit;
text-decoration: none;
}
a:hover{ text-decoration: underline; }
/* Smooth “section” feeling without you having to add wrappers */
hr{
border:0;
border-top: var(--line);
margin: 28px 0;
}
/* ---------- Modern “badge” style for small lines like “hier wird noch gebaut” ---------- */
p, div, br { font-size: 18px; line-height: 1.55; }
/* Use a friendly pill look for small standalone text lines */
body{
/* nothing here, but keeps intent grouped */
}
/* ---------- Marquee modernisation ----------
Your HTML uses:
...
We'll keep it, but style it like a “ticker”.
*/
.marquee{
position: relative;
border-radius: 999px;
padding: 12px 16px;
background: rgba(255,255,255,.70);
border: 1px solid rgba(39,41,45,.10);
box-shadow: 0 10px 26px rgba(39,41,45,.06);
overflow: hidden;
margin: 14px 0;
}
/* Make marquee text look like a festival ticker */
.marquee h1, .marquee h2, .marquee b, .marquee strong{
margin: 0;
font-weight: 950;
letter-spacing: .6px;
text-transform: uppercase;
}
/* Slight neon accent on “***” lines */
.marquee{
background:
linear-gradient(135deg, rgba(99,50,155,.12), rgba(180,208,106,.14)),
rgba(255,255,255,.55);
}
/* ---------- Images inside marquees (Cargo {image xx}) ----------
Cargo outputs actual ![]()
tags. We'll style all images nicely.
*/
img{
max-width: 100%;
height: auto;
display: block;
border-radius: var(--radius2);
}
/* Make images feel like “photo cards” */
.image-link img, .marquee img, img{
border: 1px solid rgba(39,41,45,.10);
box-shadow: var(--shadow);
}
/* If some images are too tall, you can force a consistent crop */
.marquee img{
width: 100%;
max-height: 520px;
object-fit: cover;
}
/* ---------- Make day headings (Freitag/Samstag) stand out ---------- */
h1 b{
/* subtle outline vibe */
text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
/* ---------- “Blob” highlight behind big day titles ----------
Works without changing HTML: wraps the next heading with background.
*/
h1:has(b){
position: relative;
}
h1:has(b)::before{
content:"";
position:absolute;
left:-10px; top: 50%;
transform: translateY(-50%);
width: 120px; height: 54px;
background: rgba(180,208,106,.28);
border-radius: 999px;
filter: blur(0.2px);
z-index: -1;
}
/* ---------- Align grid content a bit cleaner ----------
Your HTML uses: grid-row / grid-col attributes (Cargo grid).
*/
[grid-row]{
margin: 14px 0;
}
[grid-col]{
padding-top: 6px;
padding-bottom: 6px;
}
/* ---------- Right aligned “Einlass …” blocks: make them a clean card ---------- */
div[style*="text-align: right"]{
background: rgba(255,255,255,.62);
border: 1px solid rgba(39,41,45,.10);
border-radius: var(--radius);
padding: 14px 16px;
box-shadow: 0 10px 26px rgba(39,41,45,.06);
}
/* ---------- Bottom joke line: keep it, but make it subtle ---------- */
body :is(p,div):last-child{
opacity: .9;
}
/* ---------- Mobile tweaks ---------- */
@media (max-width: 820px){
body > *{
padding-left: 14px;
padding-right: 14px;
}
.marquee{
padding: 10px 12px;
border-radius: 18px;
}
div[style*="text-align: right"]{
border-radius: 18px;
}
.marquee img{
max-height: 420px;
}
}
