:root{
--bg:#ffffff; --soft:#f2f2f0; --line:#e5e5e5;
--text:#111; --muted:#666; --shadow:0 10px 30px rgba(0,0,0,.08);
--radius:16px;
}
@font-face {
font-family: 'Dancing Script';
src: url('fonts/allura/dancing-script-v29-latin-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.5;font-size:18px;}
img,video{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:0 14px}
.section{padding:54px 0}
.section--soft{background:var(--soft)}
.section__head{margin-bottom:18px}
.section__head h2{margin:0 0 6px}
.section__head p{margin:0;color:var(--muted)}
.centerText{max-width:780px;margin:0 auto;text-align:center}
.centerText h2{margin:0 0 10px}
.centerText p{margin:0;color:var(--muted)}
.muted{color:var(--muted)}
.webyepRichText ul{
list-style:none;
margin:5px 0;
padding:0;
}
.webyepRichText ul li{
position:relative;
padding-left:28px;
margin:4px 0;
}
.webyepRichText ul li::before{
content:"\2713";
position:absolute;
left:0;
top:.05em;
font-weight:900;
color:#0b4983;
}
/* ===== WebYep Bedien-Buttons schützen ===== */
.WebYepGalleryAddButton,
.WebYepGalleryRemoveButton,
.WebYepGalleryUpButton,
.WebYepGalleryDownButton,
.WebYepGalleryEnabledButton,
.WebYepGalleryEditButton,
.WebYepImageEditButton{
width:18px !important;
height:18px !important;
max-width:18px !important;
object-fit:contain !important;
display:inline-block !important;
}
/* Falls WebYep die Icons innerhalb eines Elements als IMG ausgibt */
.WebYepGalleryAddButton img,
.WebYepGalleryRemoveButton img,
.WebYepGalleryUpButton img,
.WebYepGalleryDownButton img,
.WebYepGalleryEnabledButton img,
.WebYepGalleryEditButton img,
.WebYepImageEditButton img{
width:18px !important;
height:18px !important;
max-width:18px !important;
object-fit:contain !important;
display:inline-block !important;
}
/* Header (Bahamas-ish) */
.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar{max-width:1100px;margin:0 auto;padding:10px 14px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:190px}
.brand img{width:44px;height:44px;object-fit:contain}
.brand__name{font-weight:700;letter-spacing:.2px}
.nav{display:flex;gap:18px;align-items:center;flex:1;justify-content:center}
.nav a{text-decoration:none;font-size:.95rem;padding:8px 10px;border-radius:12px;white-space:nowrap}
.nav a:hover{background:rgba(0,0,0,.05)}
.actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.action--primary{text-decoration:none;padding:9px 14px;border-radius:12px;background:#111;color:#fff;font-weight:600;white-space:nowrap}
.iconbtn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer}
.icon-search{width:18px;height:18px;display:inline-block;background:radial-gradient(circle at 60% 60%,transparent 6px,#111 6px,#111 8px,transparent 8px) no-repeat;position:relative}
.icon-search::after{content:"";position:absolute;width:10px;height:2px;background:#111;right:-5px;bottom:-2px;transform:rotate(45deg);border-radius:2px}
.navtoggle{display:none;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px;cursor:pointer}
.navtoggle span{display:block;width:20px;height:2px;background:#111;margin:4px 0;border-radius:2px}
.mobileNav{border-top:1px solid var(--line);background:#fff}
.mobileNav__inner{display:grid;gap:8px;padding:12px 14px}
.mobileNav a{padding:10px 12px;border-radius:12px;border:1px solid var(--line);text-decoration:none;color:inherit;background:#fff}
.mobileNav a:hover{background:rgba(0,0,0,.04)}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;padding:10px 16px;border-radius:14px;border:1px solid var(--line);background:#fff;font-weight:600}
.btn--primary{background:#111;color:#fff;border-color:#111}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.btn--ghost:hover{background:rgba(255,255,255,.12)}
/* Hero */
.hero{position:relative;min-height:72vh;display:flex;align-items:stretch;overflow:hidden}
.hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.25) 60%,rgba(0,0,0,.15))}
.hero__content{position:relative;padding:78px 14px 70px;color:#fff}
.hero__content h1{font-size:clamp(2rem,4vw,3.2rem);margin:0 0 10px;letter-spacing:.2px}
.hero__content p{margin:0 0 18px;color:rgba(255,255,255,.9);max-width:620px;font-size:1.1rem}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap}
/* Slider */
.slider{position:relative;border-radius:var(--radius);overflow:hidden;background:#000;box-shadow:var(--shadow)}
.slider__viewport{overflow:hidden}
.slider__track{display:flex;transition:transform .45s ease;will-change:transform}
.slide{min-width:100%;position:relative}
.slide img.myclass{
width:100%;
height:520px;
object-fit:cover;
display:block;
}
@media (max-width:980px){
.slide img.myclass{
height:420px;
}
}
@media (max-width:560px){
.slide img.myclass{
height:360px;
}
}
.slide__overlay{position:absolute;left:18px;bottom:18px;max-width:520px;background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:14px 14px 12px}
.slide__k{font-weight:800;letter-spacing:.2px;margin-bottom:6px}
.slide__t{color:rgba(255,255,255,.92);margin-bottom:10px}
.slide__a{display:inline-flex;padding:8px 12px;border-radius:12px;background:#fff;color:#111;text-decoration:none;font-weight:700}
.slider__btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.35);color:#fff;cursor:pointer;z-index:5;font-size:26px;line-height:1}
.slider__btn--prev{left:12px}
.slider__btn--next{right:12px}
.slider__dots{position:absolute;left:50%;transform:translateX(-50%);bottom:12px;display:flex;gap:8px;z-index:6}
.slider__dot{width:10px;height:10px;border-radius:999px;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.18);cursor:pointer}
.slider__dot.is-active{background:#fff}
/* Split */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:start}
.split--reverse{grid-template-columns:.9fr 1.1fr}
.split--reverse .split__media{order:2}
.split__media img{width:100%;height:360px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line);background:#ddd;box-shadow:var(--shadow)}
.split__text h3{margin:0 0 8px;color:#0b4983}
.split__text .muted{margin:0 0 12px}
.checklist{list-style:none;margin:0 0 16px;padding:0}
.checklist li{position:relative;padding-left:28px;margin:10px 0}
.checklist li::before{
content:"\2713";
position:absolute;
left:0;
top:.05em;
font-weight:900;
color:#0b4983;
}
.split__text .btn{
margin-top:8px;
}
/* ========================================
FOOTER
======================================== */
.footer{
background:#0b4983;
color:#fff;
border-top:0;
padding:55px 0 0;
}
/* Oberer Bereich */
.footer__main{
display:grid;
grid-template-columns:minmax(240px, 1fr) 2fr;
gap:70px;
align-items:start;
padding-bottom:45px;
}
/* Deichhausen + Adresse */
.footer__contact{
display:flex;
flex-direction:column;
align-items:flex-start;
}
.footer__mainLogo{
width:150px;
height:auto;
display:block;
margin-bottom:24px;
}
/* WebYep Kontaktfeld */
.footer__address{
color:rgba(255,255,255,.9);
font-size:.95rem;
line-height:1.65;
}
.footer__address p{
margin:0 0 5px;
}
.footer__address a{
color:#fff;
text-decoration:none;
}
.footer__address a:hover{
text-decoration:underline;
}
/* Qualitätssiegel */
.footer__quality{
display:flex;
align-items:center;
justify-content:flex-start;
flex-wrap:wrap;
gap:35px 45px;
padding-top:10px;
}
/* Einzelnes Qualitätssiegel */
.footer__qualityLogo{
display:flex;
align-items:center;
justify-content:center;
min-width:150px;
min-height:110px;
}
.footer__qualityLogo img{
width:auto;
height:auto;
max-width:180px;
max-height:100px;
object-fit:contain;
display:block;
}
/* Unterer Bereich */
.footer__bottom{
border-top:1px solid rgba(255,255,255,.28);
padding:22px 0 26px;
}
/* Links */
.footer__links{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:10px 28px;
}
.footer__links a{
color:rgba(255,255,255,.88);
text-decoration:none;
font-size:1.3rem;
transition:color .2s ease;
}
.footer__links a:hover{
color:#fff;
text-decoration:underline;
}
/* Mobile */
@media (max-width:700px){
.footer{
padding-top:40px;
}
.footer__main{
grid-template-columns:1fr;
gap:35px;
padding-bottom:35px;
}
.footer__quality{
gap:25px;
}
.footer__qualityLogo{
min-width:120px;
}
.footer__qualityLogo img{
max-width:145px;
max-height:85px;
}
.footer__links{
gap:10px 18px;
}
}
/* Responsive */
@media (max-width:980px){
.nav{display:none}
.navtoggle{display:inline-block}
.brand__name{display:none}
.hero__content{padding:66px 14px 60px}
.slide img{height:420px}
.split,.split--reverse{grid-template-columns:1fr}
.split--reverse .split__media{order:0}
.split__media img{height:320px}
}
@media (max-width:560px){
.topbar{gap:10px}
.action--primary{display:none}
.slide img{height:360px}
.slide__overlay{left:12px;right:12px;max-width:none}
}
/* ===== Bahamas-like Header (2 Zeilen) ===== */
.site-header{
position: sticky;
top: 0;
z-index: 1000;
background: #fff;
border-bottom: 1px solid var(--line);
}
.hdr{
display:flex;
align-items:center;
gap:16px;
}
.brand img{
width: 66px;
height: auto;
display:block;
}
.utilnav{
margin-left:auto;
display:flex;
align-items:center;
gap:18px;
flex-wrap:nowrap;
}
.utilnav a{
text-decoration:none;
color: var(--muted);
font-size: 1.0rem;
white-space:nowrap;
}
.utilnav a:hover{ text-decoration: underline; }
.utilbtn{
border:0;
background:transparent;
color: var(--muted);
font-size: 1.0rem;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 8px;
border-radius:10px;
}
.utilbtn:hover{ background: rgba(0,0,0,.05); }
.mainnav{
display:flex;
align-items:center;
gap:18px;
font-size: 2.5rem;
letter-spacing: .2px;
}
.mainnav a{
text-decoration:none;
color:#222;
white-space:nowrap;
}
.mainnav a:hover{ text-decoration: underline; }
.sep{ color:#999; }
.ctaTop{
margin-left:auto;
text-decoration:none;
padding: 16px 24px;
border-radius: 5px;
background:#0b4983;
color:#fff;
font-size: 1.33em;
font-weight:500;
letter-spacing:.8px;
white-space:nowrap;
}
.ctaTop2{
margin-left:auto;
text-decoration:none;
padding: 16px 24px;
border-radius: 5px;
background:#F6710A;
color:#fff;
font-size: 1.33em;
font-weight:500;
letter-spacing:.8px;
white-space:nowrap;
}
.ctaTop3{
margin-left:auto;
text-decoration:none;
padding: 4px 10px;
border-radius: 5px;
background:#0b4983;
color:#fff; !important;
font-size: 1.33em;
font-weight:500;
letter-spacing:.8px;
white-space:nowrap;
}
/* HOVER-EFFEKTE – AB HIER NEU */
.ctaTop,
.ctaTop2{
position:relative;
overflow:hidden;
transition:
transform .25s ease,
box-shadow .25s ease,
filter .25s ease;
}
.ctaTop::before,
.ctaTop2::before{
content:"";
position:absolute;
top:-50%;
left:-80%;
width:45%;
height:200%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.45),
transparent
);
transform:skewX(-20deg);
transition:left .55s ease;
}
.ctaTop:hover,
.ctaTop2:hover{
transform:translateY(-4px) scale(1.04);
filter:brightness(1.12);
}
.ctaTop:hover{
box-shadow:0 8px 22px rgba(11,73,131,.38);
}
.ctaTop2:hover{
box-shadow:0 8px 22px rgba(246,113,10,.38);
}
.ctaTop:hover::before,
.ctaTop2:hover::before{
left:135%;
}
.ctaTop:active,
.ctaTop2:active{
transform:translateY(-1px) scale(.98);
}
/* Hamburger (nutzt dein vorhandenes JS) */
.navtoggle{
display:none;
margin-left:auto;
border:1px solid var(--line);
background:#fff;
border-radius:12px;
padding:10px;
cursor:pointer;
}
.navtoggle span{display:block;width:20px;height:2px;background:#111;margin:4px 0;border-radius:2px}
/* Mobile Nav Container */
.mobileNav{ border-top:1px solid var(--line); background:#fff; }
.mobileNav__inner{ display:grid; gap:10px; padding:12px 0 16px; }
.mobileNav__inner a{
padding:10px 12px;
border-radius:12px;
border:1px solid var(--line);
text-decoration:none;
}
/* Hero nur auf Wrap-Breite */
.hero--contained{
padding: 22px 0 10px;
background: transparent; /* wichtig: keine Vollbreite-Hintergrundfläche */
}
/* 4:3 Format und volle Wrap-Breite */
.heroFrame{
width: 100%;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--line);
box-shadow: var(--shadow);
aspect-ratio: 4 / 3; /* <-- das ist der 4:3 Schlüssel */
min-height: 0; /* <-- killt „stretched“ Effekte */
}
/* Media füllt die 4:3 Box */
.heroMedia{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
h2{
font-size:clamp(2rem, 4vw, 3rem);
line-height:1.15;
color: #0b4983;
}
/* Overlay bleibt gleich
.heroShade{
position:absolute;
inset:0;
background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.18) 65%, rgba(0,0,0,.10));
}*/
/* Text-Positionierung (optional etwas luftiger) */
.heroText{
position:absolute;
inset:0;
z-index:5;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
color:#fff;
text-shadow:
0 2px 5px rgba(0,0,0,.65),
0 4px 14px rgba(0,0,0,.35);
padding:40px 30px;
max-width:none;
}
.heroText h1{
margin:0 0 18px;
font-weight:800;
line-height:1.05;
/* vorher ca. 4.6rem ? jetzt größer */
font-size:clamp(2.8rem, 6vw, 5.2rem);
}
.heroText p{
margin:0 0 24px;
color:rgba(255,255,255,.92);
/* etwas größer */
font-size:2.0rem;
max-width:780px;
}
.heroCtas{
display:flex;
gap:14px;
flex-wrap:wrap;
justify-content:center;
}
.heroCtas{ display:flex; gap:12px; flex-wrap:wrap; }
/* Ghost Button auf hellem Hintergrund (Hero ist dunkel) */
.btn--ghostDark{
background: transparent;
color:#fff;
border-color: rgba(255,255,255,.7);
}
.btn--ghostDark:hover{ background: rgba(255,255,255,.12); }
/* Responsive */
@media (max-width: 980px){
.utilnav{ display:none; } /* Utility raus */
.mainnav{ display:none; } /* Hauptnav raus */
.ctaTop{ display:none; } /* CTA in MobileNav */
.navtoggle{ display:inline-block; }
.hdr--main{ display:none; } /* zweite Zeile weg */
.heroText{ padding: 44px 20px; }
.heroFrame{ min-height: 420px; }
}
@media (max-width: 560px){
.brand img{ width: 54px; }
.heroFrame{ min-height: 360px; }
}
/* HEADER: Logo über 2 Zeilen + rechte Bündigkeit */
.headerGrid{
display:grid;
grid-template-columns: 110px 1fr;
grid-template-rows: auto auto;
column-gap: 18px;
align-items:center;
padding: 8px 0;
}
.brand--span{
grid-row: 1 / span 2; /* Logo über beide Zeilen */
grid-column: 1;
align-self: start;
}
.brand--span img{
width: 92px; /* Bahamas-Feeling */
height: auto;
display:block;
}
.hdrTop{
grid-column: 2;
grid-row: 1;
display:flex;
justify-content:flex-end; /* rechts */
align-items:center;
gap: 12px;
}
.hdrMain{
grid-column: 2;
grid-row: 2;
display: flex;
align-items: center;
gap: 22px;
padding-top: 10px;
border-top: 1px solid var(--line);
}
/* die mainnav soll NICHT mehr "center" */
.mainnav{
display: flex;
align-items: center;
gap: 18px;
font-size: 2.5
rem;
letter-spacing: .6px;
margin-left: auto; /* 🔑 schiebt Navigation nach rechts */
}
.ctaTop{
margin-left: 0; /* CTA sitzt direkt rechts daneben */
}
.sep{ color:#999; }
/* Mobile */
@media (max-width: 980px){
.headerGrid{ grid-template-columns: 1fr auto; grid-template-rows:auto; }
.brand--span{ grid-row:auto; grid-column:1; align-self:center; }
.hdrMain{ display:none; }
.utilnav{ display:none; }
.hdrTop{ justify-content:flex-end; }
.navtoggle{ display:inline-block; }
}
/* === HERO FIX: contained Hero darf nicht vom alten .hero beeinflusst werden === */
.hero.hero--contained{
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
padding: 0;
overflow: hidden;
}
.hero.hero--contained .wrap{
width: 100%; /* wichtig, falls Wrap als flex-item geschrumpft ist */
}
/* 4:3 Box auf voller Wrap-Breite */
.heroFrame{
width: 100%;
aspect-ratio: 16 / 9; /* wirkt moderner als 4:3 */
border-radius: 0;
border: none;
box-shadow: none;
}
.heroMedia{
opacity: 0;
animation: heroFadeZoom 12s ease-out forwards;
}
@media (max-width: 768px){
.hero,
.heroFrame{
height: 45vh !important;
min-height: 45vh !important;
max-height: 45vh !important;
}
.heroMedia{
width:100%;
height:100% !important;
object-fit:cover;
}
}
@keyframes heroFadeZoom{
0% {
opacity: 0;
transform: scale(1);
}
10% {
opacity: 1;
}
100% {
opacity: 1;
transform: scale(1.06);
}
}
.heroText h1{
margin: 0 0 14px;
font-weight: 800;
line-height: 1.05;
/* Mobil ? normal, Desktop ? deutlich größer */
font-size: clamp(2.2rem, 5vw, 4.6rem);
}
@media (min-width: 1200px){
.heroText h1{
font-size: 5.2rem;
}
}
/* Video/Bild füllt die Box */
.heroMedia{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Facebook Icon */
.icon-facebook{
width:18px;
height:18px;
display:inline-block;
background:#111;
mask: url("data:image/svg+xml;utf8,\
") center / contain no-repeat;
-webkit-mask: url("data:image/svg+xml;utf8,\
") center / contain no-repeat;
}
/* Hover */
.utilbtn--facebook:hover .icon-facebook{
background:#0aa5b5; /* gleiche Farbe wie CTA */
}
/* Hero: Cards dürfen unten rausstehen */
.heroFrame{
overflow: visible; /* wichtig, damit Cards raus ragen dürfen */
}
/* Cards-Row unten auf dem Hero */
.heroCards{
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 50%); /* hängt halb über den unteren Rand */
width: min(1040px, calc(100% - 32px)); /* wie Wrap, aber etwas innen */
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
z-index: 5;
pointer-events: auto;
}
/* Card-Design */
.heroCard{
background: #fff;
border-radius: 14px;
border: 1px solid rgba(0,0,0,.06);
/* neuer, sichtbarer Schatten */
box-shadow:
0 12px 30px rgba(0,0,0,.22),
0 4px 10px rgba(0,0,0,.12);
overflow: hidden;
/* Animation Startzustand */
opacity: 0;
transform: translateY(28px);
transition: transform .6s ease, opacity .6s ease;
}
.heroCard img.myclass{
width:100%;
height:auto;
object-fit:cover;
display:block;
}
.heroCard__body{
padding: 14px 14px 12px;
}
.heroCard__body h2,
.heroCard__body h3{
margin: 0 0 6px;
font-size: 1.2rem;
}
.heroCard__body p{
margin: 0 0 10px;
color: var(--muted);
font-size: 1.0
rem;
}
.heroCard__link{
display: inline-flex;
text-decoration: none;
font-weight: 700;
color: #111;
border-bottom: 2px solid rgba(0,0,0,.18);
padding-bottom: 2px;
}
.heroCard__link:hover{
border-bottom-color: rgba(0,0,0,.45);
}
/* Wenn "aktiv": reinfliegen */
.heroCards.is-in .heroCard{
opacity: 1;
transform: translateY(0);
}
.heroCards{
z-index: 99; /* deutlich über der Section */
}
.heroFrame,
.hero--contained,
.hero--contained .wrap{
overflow: visible;
}
/* Stagger */
.heroCards.is-in .heroCard:nth-child(1){ transition-delay: .05s; }
.heroCards.is-in .heroCard:nth-child(2){ transition-delay: .15s; }
.heroCards.is-in .heroCard:nth-child(3){ transition-delay: .25s; }
/* Mehr Abstand zur nächsten Section (weil Cards reinragen) */
.section--afterHero{
padding-top: 40px; /* anpassen nach Geschmack */
position: relative;
z-index: 1;
background: #fff; /* wichtig */
}
/* Mobile: Cards untereinander */
@media (max-width: 900px){
.heroCards{
grid-template-columns: 1fr;
transform: translate(-50%, 40%); /* etwas weniger Überhang */
}
.section--afterHero{
padding-top: 260px; /* weil 3 Cards untereinander */
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
.heroCard{ transition: none; opacity: 1; transform: none; }
}
.heroCardsSection{
margin-top: -90px; /* Cards in den Hero reinziehen */
position: relative;
z-index: 20;
}
.heroCards{
position: static; /* kein absolute */
transform: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
/* Desktop: überlappend */
.heroCardsSection{
margin-top: -90px;
position: relative;
z-index: 20;
}
/* Mobile: nicht überlappen, unter dem Hero, untereinander */
@media (max-width: 900px){
.heroCardsSection{
margin-top: 18px; /* unter das Headerbild */
}
.heroCards{
grid-template-columns: 1fr; /* untereinander */
}
}
@media (max-width: 900px){
.section--afterHero{
padding-top: 40px;
}
}
/* Smooth Scroll (Anchor Links) */
html{
scroll-behavior: smooth;
scroll-padding-top: 110px; /* Sticky Header ausgleichen – ggf. anpassen */
}
/* Global: dezente Übergänge */
a, button, .card, .heroCard{
transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
/* Scroll-Reveal – allgemein */
.reveal{
opacity: 0;
transform: translateY(18px);
transition: opacity .7s ease, transform .7s ease;
will-change: opacity, transform;
}
.reveal.is-in{
opacity: 1;
transform: translateY(0);
}
/* etwas „edler“: leichtes Micro-Zoom */
.reveal{
transform: translateY(18px) scale(.99);
}
.reveal.is-in{
transform: translateY(0) scale(1);
}
/* Stagger für typische Grid-Elemente */
.cards3 > .card.reveal:nth-child(1),
.heroCards .heroCard.reveal:nth-child(1){ transition-delay:.05s; }
.cards3 > .card.reveal:nth-child(2),
.heroCards .heroCard.reveal:nth-child(2){ transition-delay:.15s; }
.cards3 > .card.reveal:nth-child(3),
.heroCards .heroCard.reveal:nth-child(3){ transition-delay:.25s; }
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior: auto; }
.reveal{ opacity: 1; transform: none; transition: none; }
a, button, .card, .heroCard{ transition: none; }
}
/* Promo Modal unten rechts */
.promoModal{
position:fixed;
right:24px;
bottom:24px;
z-index:9998;
width:min(620px, calc(100% - 32px));
opacity:0;
transform:translateY(24px);
pointer-events:none;
transition:opacity .45s ease, transform .45s ease;
}
.promoModal.is-visible{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}
.promoModal__box{
display:grid;
grid-template-columns: 1fr 1fr;
gap:26px;
align-items:center;
background:#fff;
border:1px solid #ddd;
border-radius:6px;
padding:24px;
box-shadow:0 12px 38px rgba(0,0,0,.18);
}
.promoModal__close{
position:absolute;
top:-16px;
left:-16px;
width:34px;
height:34px;
border:0;
border-radius:50%;
background:#444;
color:#fff;
font-size:24px;
line-height:1;
cursor:pointer;
z-index:2;
}
.promoModal__image img{
width:100%;
height:280px;
object-fit:cover;
}
.promoModal__content{
text-align:center;
}
.promoModal__content h2{
margin:0 0 10px;
font-size:1.7rem;
}
.promoModal__content h3{
margin:0 0 18px;
font-size:1.05rem;
line-height:1.25;
}
.promoModal__content p{
margin:0 0 28px;
color:#111;
line-height:1.25;
}
.promoModal__button{
display:block;
width:100%;
padding:13px 16px;
border-radius:4px;
background:#0b4983;
color:#fff;
text-decoration:none;
font-weight:800;
text-transform:uppercase;
letter-spacing:.3px;
}
.promoModal__button{
position:relative;
overflow:hidden;
transition:
transform .25s ease,
box-shadow .25s ease,
filter .25s ease;
}
/* Lichtreflex */
.promoModal__button::before{
content:"";
position:absolute;
top:-50%;
left:-80%;
width:45%;
height:200%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.45),
transparent
);
transform:skewX(-20deg);
transition:left .55s ease;
}
/* Hover */
.promoModal__button:hover{
transform:translateY(-4px) scale(1.02);
filter:brightness(1.12);
box-shadow:
0 8px 22px rgba(11,73,131,.38),
0 0 0 1px rgba(255,255,255,.18);
}
/* Licht fährt über den Button */
.promoModal__button:hover::before{
left:135%;
}
/* Klick */
.promoModal__button:active{
transform:translateY(-1px) scale(.98);
}
@media (max-width:720px){
.promoModal{
left:16px;
right:16px;
bottom:16px;
width:auto;
}
.promoModal__box{
grid-template-columns:1fr;
gap:14px;
padding:18px;
}
.promoModal__image img{
height:180px;
}
}
/* Modal */
.modal{position:fixed;inset:0;display:none;z-index:9999}
.modal.open{display:block}
.modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.7)}
.modal__box{position:relative;width:min(720px, calc(100% - 32px));margin:7vh auto;background:#fff;border-radius:16px;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.35);padding:18px 18px 16px}
.modal__close{position:absolute;top:10px;right:12px;border:0;background:#111;color:#fff;border-radius:999px;width:36px;height:36px;font-size:22px;cursor:pointer}
.modal__title{margin:4px 0 14px}
.modal__hint{margin-top:10px;color:var(--muted);font-size:.95rem}
.filters{display:grid;gap:12px}
.filters__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.filters__row label{display:grid;gap:6px;font-weight:600}
.filters__row span{font-size:.92rem;color:#333}
.filters select{padding:10px 12px;border-radius:12px;border:1px solid var(--line);font:inherit}
.filters__row--checks{grid-template-columns:1fr 1fr}
.chk{display:flex !important;align-items:center;gap:10px;font-weight:600}
.chk input{width:auto}
.filters__actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.filters__all{color:var(--muted);text-decoration:none;border-bottom:1px solid rgba(0,0,0,.2)}
.filters__all:hover{border-bottom-color:rgba(0,0,0,.45)}
/* Gastgeber list */
.hostsHead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.hostsGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hostCard{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.hostCard img{width:100%;height:170px;object-fit:cover}
.hostCard__b{padding:14px}
.hostCard__b h3{margin:0 0 6px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0}
.badge{font-size:.82rem;color:#111;background:#f5f5f5;border:1px solid var(--line);padding:4px 8px;border-radius:999px}
.hostCard__a{display:inline-flex;margin-top:10px;font-weight:800;text-decoration:none;border-bottom:2px solid rgba(0,0,0,.18);padding-bottom:2px}
.hostCard__a:hover{border-bottom-color:rgba(0,0,0,.45)}
/* Gastgeber detail */
.hostDetailTop{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:start}
.hostDetailTop img{width:100%;height:340px;object-fit:cover;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow)}
.hostEquip{margin:0;padding:0;list-style:none}
.hostEquip li{position:relative;padding-left:28px;margin:10px 0}
.hostEquip li::before{content:"?";position:absolute;left:0;top:.05em;font-weight:900;color:#2e9f3e}
.hostGallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.hostGallery img{width:100%;height:120px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.mapBox{margin-top:22px;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.mapBox iframe{width:100%;height:360px;border:0}
.contactBox{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}
.btn--primary{
position:relative;
overflow:hidden;
transition:
transform .25s ease,
box-shadow .25s ease,
filter .25s ease;
}
/* Lichtreflex */
.btn--primary::before{
content:"";
position:absolute;
top:-50%;
left:-80%;
width:45%;
height:200%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.45),
transparent
);
transform:skewX(-20deg);
transition:left .55s ease;
}
.btn--primary:hover{
transform:translateY(-3px) scale(1.03);
filter:brightness(1.12);
box-shadow:
0 8px 22px rgba(11,73,131,.38),
0 0 0 1px rgba(255,255,255,.18);
}
.btn--primary:hover::before{
left:135%;
}
.btn--primary:active{
transform:translateY(-1px) scale(.98);
}
/* ========================================
MOBILE FIX – HEADER + HERO CARDS
======================================== */
@media (max-width: 768px){
/* Header exakt an Smartphone ausrichten */
.site-header .wrap.headerGrid{
width:100%;
max-width:none;
padding:8px 10px;
margin:0;
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
}
/* Logo links */
.brand--span{
grid-column:1;
grid-row:1;
margin:0;
min-width:0;
justify-self:start;
align-self:center;
}
.brand--span img{
width:54px;
height:auto;
display:block;
}
/* rechter Header-Bereich */
.hdrTop{
grid-column:3;
grid-row:1;
display:flex;
align-items:center;
justify-content:flex-end;
margin:0;
padding:0;
}
/* Desktop-Navigation aus */
.hdrMain,
.mainnav,
.utilnav{
display:none !important;
}
/* Hamburger rechts */
.navtoggle{
display:block !important;
margin:0;
padding:10px;
justify-self:end;
position:relative;
z-index:1002;
}
/* ========================================
MOBILE NAV
======================================== */
.mobileNav{
position:relative;
width:100%;
background:#fff;
z-index:1001;
border-top:1px solid var(--line);
}
.mobileNav[hidden]{
display:none !important;
}
.mobileNav:not([hidden]){
display:block !important;
}
.mobileNav .wrap{
width:100%;
max-width:none;
padding:0 10px;
}
.mobileNav__inner{
display:grid;
grid-template-columns:1fr;
gap:7px;
padding:10px 0 14px;
}
.mobileNav__inner a{
width:100%;
display:block;
padding:11px 12px;
margin:0;
}
/* Gastgeber-Button darf im mobilen Menü sichtbar bleiben */
.mobileNav .ctaTop{
display:block !important;
margin:0;
text-align:left;
background:#fff;
color:inherit;
font-size:inherit;
font-weight:inherit;
letter-spacing:normal;
}
.section--teaserIntro{
padding-bottom:10px;
}
.section--teaserIntro + .section{
padding-top:20px;
}
/* ========================================
HERO CARDS
======================================== */
.heroCardsSection{
margin-top:18px;
width:100%;
}
.heroCardsSection .wrap{
width:100%;
max-width:none;
padding-left:10px;
padding-right:10px;
}
.heroCards{
position:static;
left:auto;
bottom:auto;
width:100%;
max-width:520px;
margin-left:auto;
margin-right:auto;
transform:none !important;
display:grid;
grid-template-columns:1fr;
gap:18px;
}
.heroCard{
width:100%;
margin:0 auto;
}
}
/* =========================================================
GASTGEBER – ADMINBEREICH
Ergänzung zur bestehenden template.css
========================================================= */
.adminBody{
background:var(--soft);
}
.adminHeader{
position:sticky;
top:0;
z-index:1000;
background:rgba(255,255,255,.96);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);
}
.adminHeader__inner{
min-height:82px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}
.adminBrand{
display:flex;
align-items:center;
gap:14px;
text-decoration:none;
font-weight:800;
font-size:1.1rem;
}
.adminBrand img{
width:40px !important;
max-width:40px !important;
height:auto !important;
display:block;
flex:0 0 40px;
}
.adminHeader__actions,
.adminHostCard__actions,
.adminFormActions{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.adminPageHead{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:20px;
margin-bottom:24px;
}
.adminPageHead h1{
margin:0 0 4px;
}
.adminPageHead p{
margin:0;
}
.adminCard{
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:var(--shadow);
padding:22px;
}
.adminForm{
display:grid;
gap:20px;
}
.adminCard__head{
margin-bottom:18px;
}
.adminCard__head h2{
margin:0 0 4px;
}
.adminCard__head p{
margin:0;
color:var(--muted);
}
.adminGrid{
display:grid;
gap:16px;
}
.adminGrid--2{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.adminField{
display:grid;
gap:7px;
min-width:0;
}
.adminField--wide{
grid-column:1 / -1;
}
.adminField > span{
font-weight:700;
}
.adminField small,
.adminImageUpload small{
color:var(--muted);
}
.adminField input,
.adminField select,
.adminField textarea,
.adminImageUpload input[type="file"]{
width:100%;
font:inherit;
color:var(--text);
background:#fff;
border:1px solid var(--line);
border-radius:12px;
padding:11px 12px;
outline:none;
}
.adminField textarea{
resize:vertical;
min-height:110px;
}
.adminField input:focus,
.adminField select:focus,
.adminField textarea:focus{
border-color:#0b4983;
box-shadow:0 0 0 3px rgba(11,73,131,.12);
}
.adminImageGrid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:14px;
}
.adminImageUpload{
min-width:0;
display:grid;
gap:10px;
padding:12px;
border:1px solid var(--line);
border-radius:14px;
background:#fafafa;
}
.adminImageUpload__label{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
font-weight:800;
}
.adminImageUpload__label strong{
font-size:.72rem;
padding:4px 7px;
border-radius:999px;
background:#0b4983;
color:#fff;
}
.adminImageUpload img,
.adminImagePlaceholder{
width:100%;
aspect-ratio:4 / 3;
border-radius:10px;
border:1px solid var(--line);
}
.adminImageUpload img{
object-fit:cover;
}
.adminImagePlaceholder{
display:grid;
place-items:center;
color:var(--muted);
background:#f0f0ee;
}
.adminRemoveImage{
display:flex;
align-items:center;
gap:8px;
font-size:.9rem;
}
.featureSelect{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
}
.featureOption{
position:relative;
cursor:pointer;
}
.featureOption > input{
position:absolute;
opacity:0;
pointer-events:none;
}
.featureOption__card{
height:100%;
min-height:116px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
padding:12px 8px;
text-align:center;
background:#fff;
border:1px solid var(--line);
border-radius:14px;
transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease;
}
.featureOption__card img{
width:48px;
height:48px;
object-fit:contain;
}
.featureOption__card span{
font-size:.9rem;
font-weight:650;
}
.featureOption:hover .featureOption__card{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.featureOption > input:checked + .featureOption__card{
border-color:#0b4983;
background:rgba(11,73,131,.07);
box-shadow:0 0 0 2px rgba(11,73,131,.14);
}
.adminFormActions{
justify-content:flex-end;
padding:4px 0 24px;
}
.adminNotice{
margin:0 0 20px;
padding:12px 14px;
border-radius:12px;
border:1px solid var(--line);
background:#fff;
}
.adminNotice--ok{
border-color:#9bc7aa;
background:#f1faf4;
}
.adminNotice--error{
border-color:#d9a3a3;
background:#fff3f3;
}
.adminEmpty{
text-align:center;
padding:50px 22px;
}
.adminEmpty h2{
margin-top:0;
}
.adminHostList{
display:grid;
gap:16px;
}
.adminHostCard{
display:grid;
grid-template-columns:220px 1fr;
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:var(--shadow);
overflow:hidden;
}
.adminHostCard__image{
min-height:190px;
background:#eee;
}
.adminHostCard__image img,
.adminHostCard__image .adminImagePlaceholder{
width:100%;
height:100%;
border:0;
border-radius:0;
object-fit:cover;
}
.adminHostCard__content{
padding:18px;
display:grid;
gap:12px;
}
.adminHostCard__content h2{
margin:5px 0 2px;
}
.adminHostCard__content p{
margin:0;
}
.adminStatus{
display:inline-flex;
width:max-content;
padding:4px 9px;
border-radius:999px;
font-size:.78rem;
font-weight:800;
}
.adminStatus.is-active{
color:#146c43;
background:#eaf7ef;
}
.adminStatus.is-inactive{
color:#666;
background:#eee;
}
.adminHostFacts{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.adminHostFacts span{
padding:5px 9px;
border-radius:999px;
border:1px solid var(--line);
background:#f7f7f5;
font-size:.86rem;
}
.adminHostCard__actions{
margin-top:auto;
}
.adminHostCard__actions form{
margin:0;
}
/* vorhandene Primärbuttons im Deichhausen-Blau */
.adminBody .btn--primary{
background:#0b4983;
border-color:#0b4983;
color:#fff;
}
.adminBody .btn--primary:hover{
filter:brightness(1.08);
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(11,73,131,.25);
}
@media (max-width:900px){
.adminImageGrid,
.featureSelect{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.adminHostCard{
grid-template-columns:170px 1fr;
}
}
@media (max-width:650px){
.adminHeader__inner{
min-height:72px;
}
.adminBrand span{
display:none;
}
@media (max-width:650px){
.adminBrand img{
width:36px !important;
max-width:36px !important;
flex-basis:36px;
}
}
.adminHeader__actions .btn:first-child{
display:none;
}
.adminPageHead{
align-items:flex-start;
flex-direction:column;
}
.adminPageHead > .btn{
width:100%;
}
.adminGrid--2{
grid-template-columns:1fr;
}
.adminField--wide{
grid-column:auto;
}
.adminImageGrid,
.featureSelect{
grid-template-columns:1fr 1fr;
}
.adminHostCard{
grid-template-columns:1fr;
}
.adminHostCard__image{
min-height:220px;
}
.adminFormActions{
position:sticky;
bottom:0;
z-index:20;
background:rgba(242,242,240,.95);
backdrop-filter:blur(8px);
padding:10px 0;
}
.adminFormActions .btn{
flex:1;
}
}
@media (max-width:420px){
.adminImageGrid,
.featureSelect{
grid-template-columns:1fr;
}
.adminCard{
padding:16px;
}
}
/* =========================================================
GASTGEBER – ÖFFENTLICHE ÜBERSICHT & DETAILSEITE
========================================================= */
.hostsPage,
.hostDetailPage{
background:#f7f7f5;
}
.hostsIntro{
max-width:760px;
margin-bottom:28px;
}
.hostsIntro h1,
.hostDetailHead h1{
margin:4px 0 10px;
}
.hostsIntro > p:last-child{
margin:0;
color:var(--muted);
font-size:1.08rem;
}
.hostsEyebrow,
.hostTeaser__type{
margin:0;
color:#0b4983;
font-weight:800;
text-transform:uppercase;
letter-spacing:.07em;
font-size:.78rem;
}
.hostsFilter{
display:grid;
grid-template-columns:1fr 1.4fr auto auto auto;
align-items:end;
gap:12px;
padding:18px;
margin-bottom:18px;
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:var(--shadow);
}
.hostsFilter > label:not(.hostsCheck){
display:grid;
gap:6px;
}
.hostsFilter label > span{
font-weight:700;
}
.hostsFilter select{
min-height:44px;
font:inherit;
padding:8px 11px;
border:1px solid var(--line);
border-radius:10px;
background:#fff;
}
.hostsCheck{
min-height:44px;
display:flex;
align-items:center;
gap:8px;
padding:0 5px;
white-space:nowrap;
}
.hostsCheck input{
width:18px;
height:18px;
}
.hostsFilter__actions{
display:flex;
align-items:center;
gap:10px;
}
.hostsFilter__actions a{
font-size:.86rem;
}
.hostsResultHead{
margin:18px 0 12px;
color:var(--muted);
}
.hostsList{
display:grid;
gap:20px;
}
.hostTeaser{
display:grid;
grid-template-columns:minmax(280px, 38%) 1fr;
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:var(--shadow);
overflow:hidden;
}
.hostTeaser__image{
min-height:310px;
background:#ececea;
overflow:hidden;
}
.hostTeaser__image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .35s ease;
}
.hostTeaser:hover .hostTeaser__image img{
transform:scale(1.025);
}
.hostTeaser__placeholder{
width:100%;
height:100%;
min-height:310px;
display:grid;
place-items:center;
color:var(--muted);
}
.hostTeaser__content{
padding:24px;
display:flex;
flex-direction:column;
}
.hostTeaser__title{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:20px;
}
.hostTeaser__title h2{
margin:4px 0 0;
}
.hostTeaser__title h2 a{
color:inherit;
text-decoration:none;
}
.hostDtv{
flex:0 0 auto;
padding:7px 10px;
border-radius:999px;
background:#f1f6fb;
color:#0b4983;
font-size:.82rem;
font-weight:800;
}
.hostDtv--large{
font-size:.95rem;
padding:9px 13px;
}
.hostFacts{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:14px 0;
}
.hostFacts span{
padding:5px 9px;
border:1px solid var(--line);
border-radius:999px;
background:#f8f8f6;
font-size:.86rem;
}
.hostTeaser__text{
margin:0 0 18px;
color:var(--muted);
line-height:1.6;
}
.hostFeaturesMini{
display:flex;
flex-wrap:wrap;
gap:10px 14px;
margin-bottom:18px;
}
.hostFeaturesMini > span{
display:flex;
align-items:center;
gap:5px;
}
.hostFeaturesMini img{
width:28px;
height:28px;
object-fit:contain;
}
.hostFeaturesMini small{
color:var(--muted);
font-size:.75rem;
}
.hostTeaser__bottom{
margin-top:auto;
}
.hostsEmpty{
padding:48px 24px;
text-align:center;
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius);
}
.hostsEmpty h2{
margin-top:0;
}
.hostBack{
display:inline-block;
margin-bottom:18px;
color:var(--muted);
text-decoration:none;
}
.hostBack:hover{
text-decoration:underline;
}
.hostDetailHead{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:20px;
margin-bottom:20px;
}
.hostSlider{
position:relative;
margin-bottom:20px;
border-radius:var(--radius);
overflow:hidden;
box-shadow:var(--shadow);
background:#ddd;
}
.hostSlider__viewport{
overflow:hidden;
}
.hostSlider__track{
display:flex;
transition:transform .4s ease;
}
.hostSlider__slide{
flex:0 0 100%;
margin:0;
position:relative;
}
.hostSlider__slide img{
width:100%;
aspect-ratio:16 / 8.5;
min-height:340px;
max-height:680px;
object-fit:cover;
display:block;
}
.hostSlider__slide figcaption{
position:absolute;
left:16px;
bottom:16px;
padding:7px 10px;
border-radius:8px;
background:rgba(0,0,0,.58);
color:#fff;
font-size:.86rem;
}
.hostSlider__btn{
position:absolute;
top:50%;
transform:translateY(-50%);
width:44px;
height:44px;
border:0;
border-radius:50%;
background:rgba(255,255,255,.9);
box-shadow:0 4px 16px rgba(0,0,0,.18);
font-size:30px;
line-height:1;
cursor:pointer;
}
.hostSlider__btn--prev{ left:14px; }
.hostSlider__btn--next{ right:14px; }
.hostSlider__dots{
position:absolute;
left:50%;
bottom:14px;
transform:translateX(-50%);
display:flex;
gap:7px;
}
.hostSlider__dots button{
width:10px;
height:10px;
padding:0;
border:1px solid rgba(0,0,0,.25);
border-radius:50%;
background:#fff;
opacity:.65;
cursor:pointer;
}
.hostSlider__dots button.is-active{
opacity:1;
transform:scale(1.25);
}
.hostDetailCard{
margin-bottom:20px;
padding:24px;
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:var(--shadow);
}
.hostDetailCard h2{
margin-top:0;
}
.hostFeatures{
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));
gap:12px;
}
.hostFeature{
min-width:0;
display:flex;
flex-direction:column;
align-items:center;
gap:7px;
padding:10px 6px;
text-align:center;
}
.hostFeature img{
width:48px;
height:48px;
object-fit:contain;
}
.hostFeature span{
font-size:.82rem;
}
.hostDetailFacts{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
margin-bottom:20px;
}
.hostDetailFacts > div{
padding:20px;
text-align:center;
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius);
}
.hostDetailFacts strong{
display:block;
margin-bottom:4px;
font-size:1.35rem;
}
.hostDetailFacts span{
color:var(--muted);
}
.hostLead{
font-size:1.15rem;
line-height:1.7;
}
.hostLead p{
margin:0;
}
.hostLongText{
line-height:1.75;
}
.hostDetailColumns{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}
.hostContactLinks{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:8px;
}
.hostBooking{
background:#eef5fb;
}
.hostMap{
width:100%;
height:420px;
border-radius:12px;
overflow:hidden;
background:#eee;
}
.hostMap__loading{
width:100%;
height:100%;
display:grid;
place-items:center;
color:var(--muted);
}
.hostMap.is-error{
height:0;
}
.hostMap__fallback{
margin-bottom:0;
}
@media (max-width:980px){
.hostsFilter{
grid-template-columns:1fr 1fr;
}
.hostsFilter__actions{
grid-column:1 / -1;
}
.hostFeatures{
grid-template-columns:repeat(4,minmax(0,1fr));
}
}
@media (max-width:760px){
.hostTeaser{
grid-template-columns:1fr;
}
.hostTeaser__image{
min-height:260px;
}
.hostTeaser__title,
.hostDetailHead{
flex-direction:column;
}
.hostFeaturesMini small{
display:none;
}
.hostDetailFacts{
grid-template-columns:1fr 1fr;
}
.hostDetailColumns{
grid-template-columns:1fr;
}
.hostFeatures{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.hostSlider__slide img{
aspect-ratio:4 / 3;
min-height:0;
}
}
@media (max-width:520px){
.hostsFilter{
grid-template-columns:1fr;
}
.hostsFilter__actions{
grid-column:auto;
align-items:flex-start;
flex-direction:column;
}
.hostTeaser__content{
padding:18px;
}
.hostFeatures{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.hostDetailFacts{
grid-template-columns:1fr 1fr;
}
.hostMap{
height:320px;
}
}
/* ===== KORREKTUR V2: Vorschau klar zweispaltig ===== */
.hostTeaser{
grid-template-columns:minmax(300px, 42%) minmax(0, 58%);
align-items:stretch;
}
.hostTeaser__image{
min-height:280px;
}
.hostTeaser__content{
min-width:0;
justify-content:flex-start;
}
/* kleine Ausstattungsicons: kompakt in EINER Reihe, Umbruch nur bei Bedarf */
.hostFeaturesMini{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:7px;
margin:2px 0 16px;
}
.hostFeaturesMini > span{
width:24px;
height:24px;
display:grid;
place-items:center;
flex:0 0 24px;
padding:0;
border:0;
background:transparent;
}
.hostFeaturesMini img{
width:20px;
height:20px;
max-width:20px;
object-fit:contain;
display:block;
}
/* ===== KORREKTUR V2: robuster Bildslider ===== */
.hostSlider__viewport{
overflow-x:hidden;
scroll-behavior:smooth;
}
.hostSlider__track{
display:flex;
width:100%;
transition:none;
transform:none !important;
}
.hostSlider__slide{
flex:0 0 100%;
width:100%;
min-width:100%;
}
.hostSlider__btn{
z-index:5;
display:grid;
place-items:center;
}
.hostSlider__dots{
z-index:5;
}
@media (max-width:760px){
.hostTeaser{
grid-template-columns:1fr;
}
.hostTeaser__image{
min-height:240px;
max-height:340px;
}
}
/* ===== V3: Typografie Detailseite ===== */
/* Unterkunftsname in Vorschau */
.hostTeaser__title h2{
font-size:1.25rem;
line-height:1.2;
margin:4px 0 0;
}
/* Unterkunftsname auf Detailseite: H1 + Deichhausen-Blau */
.hostDetailHead h1{
color:#0b4983;
font-size:1.7rem;
line-height:1.15;
margin:4px 0 6px;
}
.hostLandlord{
margin:0;
color:var(--muted);
font-size:1rem;
}
/* Fließtexte unterhalb des Kurztexts auf dieselbe Größe bringen */
.hostDetailCard p,
.hostLongText,
.hostContactLinks a,
.hostBooking p,
.hostMap__fallback{
font-size:1.15rem;
line-height:1.7;
}
.hostDetailCard .muted{
font-size:1.15rem;
line-height:1.7;
}
/* =========================================================
GASTGEBER – ÖFFENTLICHE ÜBERSICHT & DETAILSEITE
========================================================= */
.hostsPage,
.hostDetailPage{
background:#f7f7f5;
}
.hostsIntro{
max-width:760px;
margin-bottom:28px;
}
.hostsIntro h1,
.hostDetailHead h1{
margin:4px 0 10px;
}
.hostsIntro > p:last-child{
margin:0;
color:var(--muted);
font-size:1.08rem;
}
.hostsEyebrow,
.hostTeaser__type{
margin:0;
color:#0b4983;
font-weight:800;
text-transform:uppercase;
letter-spacing:.07em;
font-size:.78rem;
}
.hostsFilter{
display:grid;
grid-template-columns:1fr 1.4fr auto auto auto;
align-items:end;
gap:12px;
padding:18px;
margin-bottom:18px;
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:var(--shadow);
}
.hostsFilter > label:not(.hostsCheck){
display:grid;
gap:6px;
}
.hostsFilter label > span{
font-weight:700;
}
.hostsFilter select{
min-height:44px;
font:inherit;
padding:8px 11px;
border:1px solid var(--line);
border-radius:10px;
background:#fff;
}
.hostsCheck{
min-height:44px;
display:flex;
align-items:center;
gap:8px;
padding:0 5px;
white-space:nowrap;
}
.hostsCheck input{
width:18px;
height:18px;
}
.hostsFilter__actions{
display:flex;
align-items:center;
gap:10px;
}
.hostsFilter__actions a{
font-size:.86rem;
}
.hostsResultHead{
margin:18px 0 12px;
color:var(--muted);
}
.hostsList{
display:grid;
gap:20px;
}
.hostTeaser{
display:grid;
grid-template-columns:minmax(280px, 38%) 1fr;
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:var(--shadow);
overflow:hidden;
}
.hostTeaser__image{
min-height:310px;
background:#ececea;
overflow:hidden;
}
.hostTeaser__image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .35s ease;
}
.hostTeaser:hover .hostTeaser__image img{
transform:scale(1.025);
}
.hostTeaser__placeholder{
width:100%;
height:100%;
min-height:310px;
display:grid;
place-items:center;
color:var(--muted);
}
.hostTeaser__content{
padding:24px;
display:flex;
flex-direction:column;
}
.hostTeaser__title{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:20px;
}
.hostTeaser__title h2{
margin:4px 0 0;
}
.hostTeaser__title h2 a{
color:inherit;
text-decoration:none;
}
.hostDtv{
flex:0 0 auto;
padding:7px 10px;
border-radius:999px;
background:#f1f6fb;
color:#0b4983;
font-size:.82rem;
font-weight:800;
}
.hostDtv--large{
font-size:.95rem;
padding:9px 13px;
}
.hostFacts{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:14px 0;
}
.hostFacts span{
padding:5px 9px;
border:1px solid var(--line);
border-radius:999px;
background:#f8f8f6;
font-size:.86rem;
}
.hostTeaser__text{
margin:0 0 18px;
color:var(--muted);
line-height:1.6;
}
.hostFeaturesMini{
display:flex;
flex-wrap:wrap;
gap:10px 14px;
margin-bottom:18px;
}
.hostFeaturesMini > span{
display:flex;
align-items:center;
gap:5px;
}
.hostFeaturesMini img{
width:28px;
height:28px;
object-fit:contain;
}
.hostFeaturesMini small{
color:var(--muted);
font-size:.75rem;
}
.hostTeaser__bottom{
margin-top:auto;
}
.hostsEmpty{
padding:48px 24px;
text-align:center;
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius);
}
.hostsEmpty h2{
margin-top:0;
}
.hostBack{
display:inline-block;
margin-bottom:18px;
color:var(--muted);
text-decoration:none;
}
.hostBack:hover{
text-decoration:underline;
}
.hostDetailHead{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:20px;
margin-bottom:20px;
}
.hostSlider{
position:relative;
margin-bottom:20px;
border-radius:var(--radius);
overflow:hidden;
box-shadow:var(--shadow);
background:#ddd;
}
.hostSlider__viewport{
overflow:hidden;
}
.hostSlider__track{
display:flex;
transition:transform .4s ease;
}
.hostSlider__slide{
flex:0 0 100%;
margin:0;
position:relative;
}
.hostSlider__slide img{
width:100%;
aspect-ratio:16 / 8.5;
min-height:340px;
max-height:680px;
object-fit:cover;
display:block;
}
.hostSlider__slide figcaption{
position:absolute;
left:16px;
bottom:16px;
padding:7px 10px;
border-radius:8px;
background:rgba(0,0,0,.58);
color:#fff;
font-size:.86rem;
}
.hostSlider__btn{
position:absolute;
top:50%;
transform:translateY(-50%);
width:44px;
height:44px;
border:0;
border-radius:50%;
background:rgba(255,255,255,.9);
box-shadow:0 4px 16px rgba(0,0,0,.18);
font-size:30px;
line-height:1;
cursor:pointer;
}
.hostSlider__btn--prev{ left:14px; }
.hostSlider__btn--next{ right:14px; }
.hostSlider__dots{
position:absolute;
left:50%;
bottom:14px;
transform:translateX(-50%);
display:flex;
gap:7px;
}
.hostSlider__dots button{
width:10px;
height:10px;
padding:0;
border:1px solid rgba(0,0,0,.25);
border-radius:50%;
background:#fff;
opacity:.65;
cursor:pointer;
}
.hostSlider__dots button.is-active{
opacity:1;
transform:scale(1.25);
}
.hostDetailCard{
margin-bottom:20px;
padding:24px;
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:var(--shadow);
}
.hostDetailCard h2{
margin-top:0;
}
.hostFeatures{
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));
gap:12px;
}
.hostFeature{
min-width:0;
display:flex;
flex-direction:column;
align-items:center;
gap:7px;
padding:10px 6px;
text-align:center;
}
.hostFeature img{
width:48px;
height:48px;
object-fit:contain;
}
.hostFeature span{
font-size:.82rem;
}
.hostDetailFacts{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;
margin-bottom:20px;
}
.hostDetailFacts > div{
padding:20px;
text-align:center;
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius);
}
.hostDetailFacts strong{
display:block;
margin-bottom:4px;
font-size:1.35rem;
}
.hostDetailFacts span{
color:var(--muted);
}
.hostLead{
font-size:1.15rem;
line-height:1.7;
}
.hostLead p{
margin:0;
}
.hostLongText{
line-height:1.75;
}
.hostDetailColumns{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}
.hostContactLinks{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:8px;
}
.hostBooking{
background:#eef5fb;
}
.hostMap{
width:100%;
height:420px;
border-radius:12px;
overflow:hidden;
background:#eee;
}
.hostMap__loading{
width:100%;
height:100%;
display:grid;
place-items:center;
color:var(--muted);
}
.hostMap.is-error{
height:0;
}
.hostMap__fallback{
margin-bottom:0;
}
@media (max-width:980px){
.hostsFilter{
grid-template-columns:1fr 1fr;
}
.hostsFilter__actions{
grid-column:1 / -1;
}
.hostFeatures{
grid-template-columns:repeat(4,minmax(0,1fr));
}
}
@media (max-width:760px){
.hostTeaser{
grid-template-columns:1fr;
}
.hostTeaser__image{
min-height:260px;
}
.hostTeaser__title,
.hostDetailHead{
flex-direction:column;
}
.hostFeaturesMini small{
display:none;
}
.hostDetailFacts{
grid-template-columns:1fr 1fr;
}
.hostDetailColumns{
grid-template-columns:1fr;
}
.hostFeatures{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.hostSlider__slide img{
aspect-ratio:4 / 3;
min-height:0;
}
}
@media (max-width:520px){
.hostsFilter{
grid-template-columns:1fr;
}
.hostsFilter__actions{
grid-column:auto;
align-items:flex-start;
flex-direction:column;
}
.hostTeaser__content{
padding:18px;
}
.hostFeatures{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.hostDetailFacts{
grid-template-columns:1fr 1fr;
}
.hostMap{
height:320px;
}
}
/* ===== KORREKTUR V2: Vorschau klar zweispaltig ===== */
.hostTeaser{
grid-template-columns:minmax(300px, 42%) minmax(0, 58%);
align-items:stretch;
}
.hostTeaser__image{
min-height:280px;
}
.hostTeaser__content{
min-width:0;
justify-content:flex-start;
}
/* kleine Ausstattungsicons: kompakt in EINER Reihe, Umbruch nur bei Bedarf */
.hostFeaturesMini{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:7px;
margin:2px 0 16px;
}
.hostFeaturesMini > span{
width:44px;
height:44px;
display:grid;
place-items:center;
flex:0 0 44px;
padding:0;
border:0;
background:transparent;
}
.hostFeaturesMini img{
width:40px;
height:40px;
max-width:40px;
object-fit:contain;
display:block;
}
/* ===== KORREKTUR V2: robuster Bildslider ===== */
.hostSlider__viewport{
overflow-x:hidden;
scroll-behavior:smooth;
}
.hostSlider__track{
display:flex;
width:100%;
transition:none;
transform:none !important;
}
.hostSlider__slide{
flex:0 0 100%;
width:100%;
min-width:100%;
}
.hostSlider__btn{
z-index:5;
display:grid;
place-items:center;
}
.hostSlider__dots{
z-index:5;
}
@media (max-width:760px){
.hostTeaser{
grid-template-columns:1fr;
}
.hostTeaser__image{
min-height:240px;
max-height:340px;
}
}
/* ===== V3: Typografie Detailseite ===== */
/* Unterkunftsname in Vorschau */
.hostTeaser__title h2{
font-size:1.25rem;
line-height:1.2;
margin:4px 0 0;
}
/* Unterkunftsname auf Detailseite: H1 + Deichhausen-Blau */
.hostDetailHead h1{
color:#0b4983;
font-size:2.7rem;
line-height:1.15;
margin:4px 0 6px;
}
.hostLandlord{
margin:0;
color:var(--muted);
font-size:1rem;
}
/* Fließtexte unterhalb des Kurztexts auf dieselbe Größe bringen */
.hostDetailCard p,
.hostLongText,
.hostContactLinks a,
.hostBooking p,
.hostMap__fallback{
font-size:1.15rem;
line-height:1.7;
}
.hostDetailCard .muted{
font-size:1.15rem;
line-height:1.7;
}
/* ===== V7: stabile OpenStreetMap-Einbettung ohne Leaflet ===== */
.hostMap{
width:100%;
height:420px;
border-radius:12px;
overflow:hidden;
background:#eee;
}
.hostMap__frame{
display:block;
width:100%;
height:100%;
border:0;
}
.hostMap__open{
margin:10px 0 0;
}
.hostMap__open a,
.hostMap__fallback a{
color:#0b4983;
font-weight:700;
}
@media (max-width:650px){
.hostMap{
height:320px;
}
}
/* ===== V8: Admin-Anmeldung ===== */
.adminLoginCard{
max-width:560px;
margin:40px auto;
}
.adminLoginBrand{
display:flex;
align-items:center;
gap:16px;
margin-bottom:24px;
}
.adminLoginBrand img{
width:52px !important;
max-width:52px !important;
height:auto;
}
.adminLoginBrand h1{
margin:0;
}
.adminLoginBrand p{
margin:4px 0 0;
}
.adminLoginBack{
margin:20px 0 0;
}
.adminLogoutForm{
margin:0;
display:inline-flex;
}
.filters__row--checks{
display:flex;
flex-direction:row;
align-items:center;
gap:24px;
flex-wrap:wrap;
}
.filters__row--checks .chk{
display:flex;
flex-direction:row;
align-items:center;
gap:7px;
white-space:nowrap;
}
/* ========================================
Gastgeber – weitere Filter
======================================== */
.hostsMoreFilters{
width:100%;
grid-column:1 / -1;
margin-top:8px;
}
.hostsMoreFilters summary{
list-style:none;
cursor:pointer;
text-align:center;
color:#0b4983;
font-weight:700;
padding:10px 15px;
user-select:none;
}
.hostsMoreFilters summary::-webkit-details-marker{
display:none;
}
.hostsMoreFilters summary:hover{
text-decoration:underline;
}
.hostsMoreFilters__less{
display:none;
}
.hostsMoreFilters[open] .hostsMoreFilters__more{
display:none;
}
.hostsMoreFilters[open] .hostsMoreFilters__less{
display:inline;
}
/* aufgeklappter Bereich */
.hostsMoreFilters__content{
margin-top:12px;
padding:22px;
border-top:1px solid #e5e5e5;
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:18px 28px;
}
/* Selectfelder */
.hostsMoreFilters__select{
display:flex;
flex-direction:column;
gap:6px;
}
.hostsMoreFilters__select > span{
font-weight:600;
}
.hostsMoreFilters__select select{
width:100%;
}
/* Checkboxen */
.hostsMoreFilters__content .hostsCheck{
display:flex;
align-items:center;
gap:8px;
}
/* Tablet */
@media (max-width:850px){
.hostsMoreFilters__content{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
}
/* Smartphone */
@media (max-width:600px){
.hostsMoreFilters__content{
grid-template-columns:1fr;
padding:18px 4px;
gap:16px;
}
}
/* ========================================
FOOTER – Öffnungszeiten rechts
======================================== */
.footer__right{
display:flex;
flex-direction:column;
align-items:flex-start;
}
.footer__hours{
width:100%;
margin-bottom:22px;
}
.footer__hours p{
margin:0 0 5px;
}
/* Logos bleiben darunter */
.footer__right .footer__quality{
padding-top:0;
}
/* Mobile */
@media (max-width:700px){
.footer__hours{
margin-bottom:18px;
}
}
/* ========================================
WEBYEP – Kopfbild im Hero editierbar
======================================== */
.heroShade{
pointer-events:none;
}
.heroText{
pointer-events:none;
}
.heroText h1,
.heroText p{
pointer-events:auto;
}
/* ========================================
UNTERSEITE – KOPFBILD FINAL
======================================== */
#content .hero.hero--contained{
width:100vw;
padding:0;
}
#content .hero.hero--contained .wrap{
width:100%;
max-width:none;
padding:0;
}
/* feste Hero-Höhe statt 16:9 */
#content .heroFrame{
position:relative;
width:100%;
height:1000px;
min-height:0;
aspect-ratio:auto;
overflow:hidden;
}
/* WebYep-Bildmodul füllt den Hero */
#content .heroWebYepImage{
position:absolute;
inset:0;
width:100%;
height:100%;
overflow:visible;
/* KEIN z-index hier! */
}
/* eigentliches Bild */
#content .heroWebYepImage .heroMedia{
position:absolute;
inset:0;
width:100% !important;
height:100% !important;
object-fit:cover;
object-position:center top;
animation:none !important;
transform:none !important;
opacity:1 !important;
z-index:1;
}
/* Overlay darf WebYep nicht blockieren */
#content .heroShade{
position:absolute;
inset:0;
z-index:2;
pointer-events:none;
}
/* Text darüber */
#content .heroText{
position:absolute;
inset:0;
z-index:3;
pointer-events:none;
}
#content .heroText h1,
#content .heroText p{
pointer-events:auto;
}
/* Tablet */
@media (max-width:980px){
#content .heroFrame{
height:500px !important;
min-height:0 !important;
max-height:none !important;
}
}
/* Smartphone */
@media (max-width:600px){
#content .heroFrame{
height:400px !important;
min-height:0 !important;
max-height:none !important;
}
}
/* ========================================
WEBYEP – Bild bearbeiten Button im Hero
======================================== */
#content .heroWebYepImage .WebYepImageEditButton{
position:absolute !important;
top:20px !important;
left:20px !important;
width:36px !important;
height:36px !important;
max-width:none !important;
z-index:100 !important;
display:flex !important;
align-items:center;
justify-content:center;
background:#fff !important;
border:2px solid #0b4983 !important;
border-radius:4px;
box-shadow:0 2px 8px rgba(0,0,0,.3);
opacity:1 !important;
visibility:visible !important;
}
/* eigenes sichtbares Bearbeiten-Symbol */
#content .heroWebYepImage .WebYepImageEditButton::after{
content:" ";
display:block;
font-size:24px;
line-height:1;
font-weight:bold;
color:#0b4983;
}
/* ========================================
CARDS – Allura Headlines
======================================== */
.heroCard__body h3{
font-family:'Dancing Script', cursive;
font-weight:400;
font-size:2.0rem;
line-height:1.05;
color:#0b4983;
margin-bottom:12px;
text-align: center;
}
/* ========================================
FAQ – ACCORDION
======================================== */
.faqSection{
background:#f2f2f0;
}
.faqSection__head{
text-align:center;
margin-bottom:30px;
}
.faqAccordion{
width:min(900px, 100%);
margin:0 auto;
}
.faqItem{
background:#fff;
border:1px solid var(--line);
border-radius:8px;
margin-bottom:12px;
overflow:hidden;
box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.faqQuestion{
width:100%;
border:0;
background:#fff;
padding:20px 24px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
text-align:left;
cursor:pointer;
color:#0b4983;
transition:
background-color .25s ease,
color .25s ease;
}
.faqQuestion:hover{
background:#f7f8f9;
}
.faqQuestion__title{
flex:1;
font-size:1.25rem;
line-height:1.3;
font-weight:700;
}
/* Plus / Minus */
.faqQuestion__icon{
position:relative;
flex:0 0 24px;
width:24px;
height:24px;
}
.faqQuestion__icon::before,
.faqQuestion__icon::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:18px;
height:2px;
background:#0b4983;
border-radius:2px;
transform:translate(-50%, -50%);
transition:transform .3s ease;
}
.faqQuestion__icon::after{
transform:translate(-50%, -50%) rotate(90deg);
}
/* geöffnet */
.faqItem.is-open .faqQuestion{
background:#fff;
}
.faqItem.is-open .faqQuestion__icon::after{
transform:translate(-50%, -50%) rotate(0deg);
}
/* Inhalt */
.faqAnswer{
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows .35s ease;
}
.faqAnswer__inner{
overflow:hidden;
padding-left:24px;
padding-right:70px;
color:var(--muted);
line-height:1.65;
}
.faqItem.is-open .faqAnswer{
grid-template-rows:1fr;
}
.faqItem.is-open .faqAnswer__inner{
padding-bottom:24px;
}
/* WebYep Richtext */
.faqAnswer__inner p:first-child{
margin-top:0;
}
.faqAnswer__inner p:last-child{
margin-bottom:0;
}
/* Smartphone */
@media (max-width:600px){
.faqQuestion{
padding:17px 18px;
gap:14px;
}
.faqQuestion__title{
font-size:1.1rem;
}
.faqAnswer__inner{
padding-left:18px;
padding-right:18px;
}
.faqItem.is-open .faqAnswer__inner{
padding-bottom:18px;
}
}
.WebYepGalleryImage {
border: 8px solid #ffffff;
border-radius: 10px
margin-left:0px;
margin-top:0px;
}
/* ========================================
SERVICE NAVIGATION – WEBYEP
Desktop + Mobile
======================================== */
/* ----------------------------------------
DESKTOP
---------------------------------------- */
.serviceMenu{
display:flex;
align-items:center;
}
.serviceMenu ul.WebYepMenu{
list-style:none;
margin:0;
padding:0;
}
.serviceMenu > ul.WebYepMenu{
display:flex;
align-items:center;
gap:22px;
}
.serviceMenu > ul.WebYepMenu > li{
position:relative;
margin:0;
padding:0;
}
.serviceMenu > ul.WebYepMenu > li > a{
display:block;
text-decoration:none;
white-space:nowrap;
}
.serviceMenu
> ul.WebYepMenu
> li.WebYepMenuTitle
> ul.WebYepMenu{
position:absolute;
top:100%;
left:0;
min-width:230px;
margin:0;
padding:8px 0;
background:#fff;
border:1px solid var(--line);
box-shadow:0 8px 24px rgba(0,0,0,.12);
opacity:0;
visibility:hidden;
transform:translateY(8px);
transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
z-index:1000;
}
.serviceMenu
> ul.WebYepMenu
> li.WebYepMenuTitle:hover
> ul.WebYepMenu,
.serviceMenu
> ul.WebYepMenu
> li.WebYepMenuTitle:focus-within
> ul.WebYepMenu{
opacity:1;
visibility:visible;
transform:translateY(0);
}
.serviceMenu
> ul.WebYepMenu
> li.WebYepMenuTitle
> ul.WebYepMenu a{
display:block;
padding:9px 16px;
color:var(--text);
white-space:nowrap;
text-decoration:none;
}
.serviceMenu
> ul.WebYepMenu
> li.WebYepMenuTitle
> ul.WebYepMenu a:hover{
background:#f2f2f0;
color:#0b4983;
}
.serviceMenu > .WebYepMenuEditButton{
flex:0 0 auto;
}
/* ----------------------------------------
MOBILE SERVICE NAVIGATION
---------------------------------------- */
.mobileServiceNav{
width:100%;
margin-top:24px;
padding-top:20px;
border-top:1px solid var(--line);
}
.mobileServiceNav__title{
margin-bottom:8px;
font-size:.85rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:.08em;
color:#0b4983;
}
.mobileServiceNav > .WebYepMenuEditButton{
display:inline-block;
width:auto;
margin:0 0 8px;
padding:0;
border:0;
background:transparent;
}
.mobileServiceNav > ul.WebYepMenu{
display:block;
width:100%;
margin:0;
padding:0;
list-style:none;
}
.mobileServiceNav > ul.WebYepMenu > li{
display:block;
width:100%;
margin:0;
padding:0;
border-bottom:1px solid var(--line);
}
.mobileServiceNav > ul.WebYepMenu > li > a{
position:relative;
display:block;
width:100%;
padding:14px 36px 14px 0;
border:0;
border-radius:0;
background:transparent;
color:var(--text);
font-size:1rem;
font-weight:600;
line-height:1.3;
text-decoration:none;
}
.mobileServiceNav
> ul.WebYepMenu
> li.WebYepMenuTitle
> a{
color:#0b4983;
}
.mobileServiceNav
> ul.WebYepMenu
> li.WebYepMenuTitle
> a::after{
content:"+";
position:absolute;
right:4px;
top:50%;
transform:translateY(-50%);
font-size:1.4rem;
font-weight:400;
line-height:1;
color:#0b4983;
}
.mobileServiceNav
> ul.WebYepMenu
> li.WebYepMenuTitleExpanded
> a::after{
content:"–";
}
.mobileServiceNav ul.WebYepMenu ul.WebYepMenu{
position:static;
width:100%;
min-width:0;
margin:0;
padding:0 0 10px 16px;
background:transparent;
border:0;
border-left:2px solid #0b4983;
box-shadow:none;
list-style:none;
opacity:1;
visibility:visible;
transform:none;
}
.mobileServiceNav ul.WebYepMenu ul.WebYepMenu li{
margin:0;
padding:0;
border:0;
}
.mobileServiceNav ul.WebYepMenu ul.WebYepMenu a{
display:block;
width:100%;
padding:9px 10px;
border:0;
border-radius:0;
background:transparent;
color:var(--muted);
font-size:.95rem;
font-weight:400;
line-height:1.35;
text-decoration:none;
}
.mobileServiceNav ul.WebYepMenu ul.WebYepMenu a:hover{
background:transparent;
color:#0b4983;
}
@media (max-width:980px){
.mobileMainNav{
display:grid;
grid-template-columns:1fr;
gap:7px;
}
.mobileServiceNav{
display:block;
}
}
@media (min-width:981px){
.mobileServiceNav{
display:none;
}
}
/* =========================================================
STARTSEITE – HERO CTA LINKS KLICKBAR
WICHTIG: nach allen Hero-Regeln stehen lassen
========================================================= */
#home .heroShade{
pointer-events:none !important;
}
#home .heroText{
pointer-events:none !important;
}
#home .heroText h1,
#home .heroText p,
#home .heroCtas,
#home .heroCtas a{
pointer-events:auto !important;
}
#home .heroCtas{
position:relative;
z-index:50;
}
#home .heroCtas a{
position:relative;
z-index:51;
}
/* =========================================================
VERANSTALTUNGSKALENDER
========================================================= */
.eventCalendarSection{
padding:80px 0 100px;
background:#fff;
}
.eventCalendarSection .wrap{
width:min(1380px, calc(100% - 48px));
max-width:1380px;
margin:0 auto;
}
.eventCalendarSection__head{
margin:0 0 38px;
text-align:left;
}
.eventCalendarSection__head h2{
margin:0;
color:#0b4983;
font-size:clamp(2rem, 3.2vw, 3rem);
line-height:1.08;
}
.eventList{
display:flex;
flex-direction:column;
gap:24px;
width:100%;
}
.eventCard{
display:grid;
grid-template-columns:280px minmax(0, 1fr) 320px;
width:100%;
min-height:210px;
overflow:hidden;
background:#fff;
border:1px solid #e1e5e8;
border-radius:8px;
box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.eventCard__media{
position:relative;
min-height:210px;
overflow:hidden;
background:#eef2f5;
}
.eventCard__media img{
display:block;
width:100%;
height:100%;
min-height:210px;
object-fit:cover;
object-position:center;
}
.eventCard__placeholder{
width:100%;
height:100%;
min-height:210px;
background:linear-gradient(
135deg,
rgba(11,73,131,.10),
rgba(11,73,131,.02)
);
}
.eventCard__main{
min-width:0;
padding:28px 32px 26px;
}
.eventCard__main h3{
margin:0 0 14px;
color:#0b4983;
font-family:inherit;
font-size:1.55rem;
font-weight:700;
line-height:1.2;
text-align:left;
}
.eventCard__date{
margin:0 0 16px;
color:#222;
font-size:1.02rem;
font-weight:700;
line-height:1.35;
}
.eventCard__main p{
margin:0;
max-width:760px;
color:#555;
font-size:1.2rem;
line-height:1.55;
}
.eventCard__facts{
display:flex;
flex-direction:column;
justify-content:center;
gap:13px;
min-width:0;
margin:24px 0;
padding:4px 28px;
border-left:1px solid #d8dde1;
}
.eventFact{
display:grid;
grid-template-columns:22px minmax(0,1fr);
align-items:start;
gap:10px;
min-width:0;
color:#333;
font-size:.98rem;
line-height:1.4;
}
.eventFact > span:last-child{
overflow-wrap:anywhere;
}
.eventFact__icon{
display:block;
width:20px;
height:20px;
color:#0b4983;
}
.eventFact__icon svg{
display:block;
width:20px;
height:20px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}
.eventCalendar__status{
margin:0;
padding:28px;
border:1px solid #e1e5e8;
border-radius:8px;
background:#fff;
color:#555;
text-align:center;
box-shadow:0 4px 16px rgba(0,0,0,.06);
}
/* TABLET */
@media (max-width:1100px){
.eventCard{
grid-template-columns:240px minmax(0,1fr);
}
.eventCard__media{
grid-row:1 / span 2;
}
.eventCard__facts{
grid-column:2;
margin:0 28px 24px;
padding:20px 0 0;
border-left:0;
border-top:1px solid #d8dde1;
}
}
/* SMARTPHONE */
@media (max-width:720px){
.eventCalendarSection{
padding:56px 0 72px;
}
.eventCalendarSection .wrap{
width:min(100% - 28px, 1380px);
}
.eventCalendarSection__head{
margin-bottom:24px;
}
.eventList{
gap:18px;
}
.eventCard{
display:block;
min-height:0;
}
.eventCard__media{
min-height:0;
aspect-ratio:16 / 9;
}
.eventCard__media img,
.eventCard__placeholder{
min-height:0;
height:100%;
}
.eventCard__main{
padding:22px 20px 18px;
}
.eventCard__main h3{
margin-bottom:11px;
font-size:1.3rem;
}
.eventCard__date{
margin-bottom:13px;
}
.eventCard__facts{
margin:0 20px 22px;
padding:18px 0 0;
}
}
.eventCard__shortText{
font-size:calc(1em + 4px);
}
/* =========================================================
DER BÜRGERMEISTER INFORMIERT
========================================================= */
#content .hero--mayor .heroFrame{
height:520px;
}
.mayorNewsSection{
padding:40px 0 70px;
}
.mayorNewsItem{
padding:0 0 50px;
margin:0 0 50px;
border-bottom:1px solid rgba(11,73,131,.22);
}
.mayorNewsGrid{
display:grid;
grid-template-columns:minmax(0, 2.3fr) minmax(240px, .7fr);
gap:55px;
align-items:start;
}
.mayorNewsTitle{
margin:0 0 22px;
color:#0b4983;
}
.mayorNewsText{
margin-bottom:32px;
}
.mayorNewsGallery{
margin-top:28px;
}
.mayorNewsDownloads{
padding-left:28px;
border-left:1px solid rgba(11,73,131,.18);
}
.mayorNewsDownloads h3{
margin:0 0 22px;
color:#0b4983;
}
.mayorNewsAttachment{
margin-bottom:18px;
}
@media (max-width:980px){
#content .hero--mayor .heroFrame{
height:360px;
}
.mayorNewsSection{
padding:45px 0;
}
.mayorNewsGrid{
grid-template-columns:1fr;
gap:30px;
}
.mayorNewsDownloads{
padding-left:0;
padding-top:25px;
border-left:0;
border-top:1px solid rgba(11,73,131,.18);
}
}
/* Bürgermeister-Seite: Hero nicht auf 72vh strecken */
#content .hero.hero--mayor{
min-height:0 !important;
height:auto !important;
display:block;
}
#content .hero.hero--mayor .heroFrame{
height:520px;
}
/* =========================================================
DORFGEMEINSCHAFT
========================================================= */
#content .hero.hero--village{
min-height:0 !important;
height:auto !important;
display:block;
}
#content .hero--village .heroFrame{
height:520px;
}
.villageSection{
padding:35px 0 70px;
}
.villageItem{
padding:0 0 48px;
margin:0 0 48px;
border-bottom:1px solid rgba(11,73,131,.22);
}
.villageGrid{
display:grid;
grid-template-columns:minmax(220px,.8fr) minmax(0,2fr) minmax(210px,.7fr);
gap:40px;
align-items:start;
}
.villageImage img{
display:block;
width:100%;
height:auto;
}
.villageTitle{
margin:0 0 20px;
color:#0b4983;
font-size:1.7rem;
line-height:1.2;
}
.villageText{
margin:0;
}
.villageSide{
background:#f2f3f4;
padding:24px;
}
.villageSide > *:first-child{
margin-top:0;
}
.villageSide > *:last-child{
margin-bottom:0;
}
@media (max-width:980px){
#content .hero--village .heroFrame{
height:360px;
}
.villageSection{
padding:30px 0 55px;
}
.villageGrid{
grid-template-columns:1fr;
gap:28px;
}
.villageSide{
padding:22px;
}
}
/* =========================================================
VERANSTALTUNGEN – eigene destination.one Ausgabe
ans Ende der bestehenden template.css anhängen
========================================================= */
.eventCalendarSection__head p{margin:8px 0 0;color:var(--muted);font-size:1.1rem;}
.bdhEvents{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%;}
.bdhEventTile{min-width:0;background:#fff;border:1px solid #d8dde1;box-shadow:0 3px 12px rgba(0,0,0,.06);overflow:hidden;}
.bdhEventTile__link{display:block;height:100%;color:inherit;text-decoration:none;}
.bdhEventTile__media{aspect-ratio:16/9;overflow:hidden;background:#eef2f5;}
.bdhEventTile__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease;}
.bdhEventTile__placeholder,.bdhEventDetail__placeholder{width:100%;height:100%;min-height:180px;background:linear-gradient(135deg,rgba(11,73,131,.12),rgba(11,73,131,.03));display:flex;align-items:center;justify-content:center;color:#667;}
.bdhEventTile__body{padding:18px 16px 20px;}
.bdhEventTile__body h3{margin:0 0 18px;color:#0b4983;font-family:inherit;font-size:1.2rem;line-height:1.25;text-align:left;}
.bdhEventTile__location,.bdhEventTile__date{display:grid;grid-template-columns:20px 1fr;gap:7px;margin:7px 0 0;font-size:.98rem;line-height:1.4;}
.bdhEventTile__date{font-weight:700;}
.bdhEventTile:hover img{transform:scale(1.025);}
.bdhEvents__status{padding:28px;border:1px solid #d8dde1;background:#fff;text-align:center;}
.bdhEventDetailSection{padding-top:48px;}
.bdhEventBack{margin:0 0 28px;}
.bdhEventBack a{display:inline-flex;align-items:center;padding:10px 15px;border:1px solid #0b4983;border-radius:5px;color:#0b4983;font-weight:700;text-decoration:none;}
.bdhEventDetail__head{margin-bottom:26px;}
.bdhEventDetail__head h1{margin:0 0 10px;color:#0b4983;font-size:clamp(2rem,4vw,3.3rem);line-height:1.08;}
.bdhEventDetail__head p{margin:0;font-size:1.15rem;font-weight:700;}
.bdhEventDetail__top{display:grid;grid-template-columns:1.35fr .9fr;gap:12px;margin-bottom:34px;}
.bdhEventDetail__image,.bdhEventDetail__map{height:420px;overflow:hidden;background:#eef2f5;}
.bdhEventDetail__image img,.bdhEventDetail__map iframe{display:block;width:100%;height:100%;border:0;object-fit:cover;}
.bdhEventDetail__bottom{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr);gap:34px;align-items:start;}
.bdhEventDetail__description h2,.bdhEventDetail__organizer h2{margin:0 0 18px;color:#0b4983;font-size:1.55rem;}
.bdhEventDetail__text{font-size:1.125rem;line-height:1.7;margin-bottom:28px;}
.bdhEventDetail__fact{padding:15px 0;margin:0;border-top:1px solid #d8dde1;font-size:1.05rem;line-height:1.5;}
.bdhEventDetail__organizer{padding:24px;background:rgba(11,73,131,.05);border:1px solid #d8dde1;}
.bdhEventDetail__organizer address{font-style:normal;font-size:1.05rem;line-height:1.65;}
.bdhEventDetail__contactButtons{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.bdhEventDetail__contactButtons a{padding:10px 13px;border:1px solid #0b4983;color:#0b4983;text-decoration:none;background:#fff;}
@media(max-width:900px){.bdhEvents{grid-template-columns:repeat(2,minmax(0,1fr));}.bdhEventDetail__top,.bdhEventDetail__bottom{grid-template-columns:1fr;}.bdhEventDetail__image,.bdhEventDetail__map{height:360px;}}
@media(max-width:600px){.bdhEvents{grid-template-columns:1fr;gap:16px;}.bdhEventTile__body{padding:16px 14px 18px;}.bdhEventDetailSection{padding-top:26px;}.bdhEventDetail__image,.bdhEventDetail__map{height:280px;}.bdhEventDetail__bottom{gap:22px;}.bdhEventDetail__organizer{padding:18px;}}
/* =========================================================
KONTAKTSEITE – an das ENDE von template.css anhängen
========================================================= */
.contactSection{padding-top:70px;padding-bottom:90px}
.contactWrap{max-width:980px}
.contactIntro{max-width:760px;margin:0 auto 34px;text-align:center}
.contactIntro h2{margin:0 0 12px;color:#0b4983;font-size:clamp(2rem,4vw,3rem);line-height:1.1}
.contactIntro p{margin:0;color:var(--muted);font-size:1.08rem;line-height:1.65}
.contactForm{position:relative;padding:clamp(24px,4vw,48px);background:#fff;border:1px solid rgba(11,73,131,.13);border-radius:20px;box-shadow:0 16px 45px rgba(20,46,70,.09)}
.contactForm__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px}
.contactField{display:flex;flex-direction:column;gap:8px;min-width:0}
.contactField--wide,.contactField--full{grid-column:1/-1}
.contactField--plz{grid-column:span 1}
.contactField label{font-weight:700;color:#163b5c;font-size:.96rem}
.contactField label span,.contactConsent label>span{color:#0b4983}
.contactField input,.contactField textarea{width:100%;box-sizing:border-box;border:1px solid #cbd5df;border-radius:10px;background:#fff;color:#243746;font:inherit;font-size:1rem;padding:14px 15px;outline:none;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.contactField input{min-height:52px}
.contactField textarea{min-height:190px;resize:vertical;line-height:1.55}
.contactField input:focus,.contactField textarea:focus{border-color:#0b4983;box-shadow:0 0 0 4px rgba(11,73,131,.1)}
.contactConsent{display:grid;grid-template-columns:22px 1fr;gap:12px;margin-top:28px;padding:20px;border-radius:12px;background:rgba(11,73,131,.05)}
.contactConsent input{width:20px;height:20px;margin:3px 0 0;accent-color:#0b4983}
.contactConsent label{font-size:.94rem;line-height:1.6;color:#43576a}
.contactConsent a{color:#0b4983;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.contactForm__actions{display:flex;justify-content:flex-end;margin-top:28px}
.contactSubmit{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:54px;padding:14px 24px;border:0;border-radius:10px;background:#0b4983;color:#fff;font:inherit;font-size:1rem;font-weight:800;letter-spacing:.01em;cursor:pointer;box-shadow:0 8px 22px rgba(11,73,131,.2);transition:transform .2s ease,filter .2s ease,box-shadow .2s ease}
.contactSubmit:hover{transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 12px 28px rgba(11,73,131,.25)}
.contactSubmit:focus-visible{outline:3px solid rgba(11,73,131,.28);outline-offset:3px}
.contactNotice{margin:0 0 24px;padding:17px 20px;border-radius:12px;line-height:1.55}
.contactNotice--success{background:#eef8f0;border:1px solid #b9dcc0;color:#24552e}
.contactNotice--error{background:#fff2f1;border:1px solid #efc1bd;color:#7c2922}
.contactNotice ul{margin:8px 0 0;padding-left:20px}
.contactForm__honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
@media (max-width:700px){
.contactSection{padding-top:36px;padding-bottom:60px}
.contactForm{padding:22px 18px;border-radius:14px}
.contactForm__grid{grid-template-columns:1fr;gap:18px}
.contactField--wide,.contactField--full,.contactField--plz,.contactField--ort{grid-column:auto}
.contactConsent{padding:16px 14px}
.contactForm__actions{justify-content:stretch}
.contactSubmit{width:100%}
}
/* =========================================================
STARTSEITE – HERO DESKTOP
Headlineblock 100px über den Cards + Video ohne Zoom
========================================================= */
/* Video komplett ruhig – kein Zoom, keine CSS-Bewegung */
#home .heroMedia{
animation:none !important;
transform:none !important;
opacity:1 !important;
}
/* Nur Desktop */
@media (min-width:901px){
#home .heroText{
justify-content:flex-end !important;
/*
Cards ragen 90px in den Hero.
Der komplette Text-/Buttonblock endet 100px
oberhalb der Cards.
*/
padding:40px 30px 190px !important;
}
}
/* =========================================================
VORLESEFUNKTION
========================================================= */
.pageReader{
position:fixed;
right:22px;
top:22px;
bottom:auto;
z-index:9997;
display:flex;
align-items:center;
background:#fff;
border:1px solid rgba(0,0,0,.12);
border-radius:8px;
box-shadow:0 8px 28px rgba(0,0,0,.18);
overflow:hidden;
}
.pageReader button{
appearance:none;
border:0;
background:#0b4983;
color:#fff;
min-height:48px;
padding:10px 16px;
font:inherit;
font-size:15px;
font-weight:600;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
}
.pageReader button:hover{
background:#083966;
}
.pageReader button:focus-visible{
outline:3px solid #F6710A;
outline-offset:-3px;
}
.pageReader__controls{
display:flex;
}
.pageReader__controls[hidden],
.pageReader__start[hidden]{
display:none !important;
}
.pageReader__pause{
border-right:1px solid rgba(255,255,255,.3) !important;
}
/* Smartphone */
@media (max-width:600px){
@media (max-width:600px){
.pageReader{
right:12px;
top:12px;
bottom:auto;
}
}
.pageReader button{
min-height:46px;
padding:9px 12px;
font-size:14px;
}
.pageReader__label{
display:none;
}
}
/* Barrierefreiheit: Links im Fließtext eindeutig erkennbar */
main p a,
main li a{
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
main p a:hover,
main p a:focus-visible,
main li a:hover,
main li a:focus-visible{
text-decoration-thickness: 2px;
}
/* Barrierefreiheit: Links innerhalb von Fließtext */
main p a[href],
main li a[href],
main a[href^="mailto:"]{
text-decoration-line: underline !important;
text-decoration-style: solid !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 3px !important;
}
main p a[href]:hover,
main p a[href]:focus-visible,
main li a[href]:hover,
main li a[href]:focus-visible,
main a[href^="mailto:"]:hover,
main a[href^="mailto:"]:focus-visible{
text-decoration-thickness: 3px !important;
}
/* =========================================================
BARRIEREFREIHEIT / TYPOGRAFIE – 01.10.2026
Fliesstexte schwarz + Introtext auf einheitliche Textgroesse
========================================================= */
/* Graue Fliesstexte auf Schwarz vereinheitlichen */
:root{
--muted:#111;
}
/* Absicherung gegen explizit gesetzte Grautoene in Inhaltsbereichen */
.section__head p,
.centerText p,
.muted,
.split__text .muted,
.heroCard__body p,
.modal__hint,
.filters__all,
.adminCard__head p,
.adminField small,
.adminImageUpload small,
.adminImagePlaceholder{
color:#111;
}
/* Intro direkt unter den drei Cards: gleiche Groesse wie normaler Fliesstext */
.section--teaserIntro .centerText p,
.section--teaserIntro p{
font-size:1rem;
line-height:1.65;
color:#111;
}
/* ========================================
MOBILE – Vorlesefunktion links neben Hamburger
======================================== */
@media (max-width:768px){
.pageReader{
position:fixed !important;
top:14px !important;
right:68px !important;
bottom:auto !important;
left:auto !important;
z-index:1003 !important;
}
}
/* =========================================================
STARTSEITE - NUR SMARTPHONE
Hero-Inhalt unten, Subheadline kleiner, CTAs nebeneinander
========================================================= */
@media (max-width:600px){
#home .heroText{
justify-content:flex-end !important;
align-items:center !important;
padding:20px 12px !important;
}
/* Headline 4px größer */
#home .heroText h1{
font-size:calc(clamp(2.2rem, 5vw, 4.6rem) + 5px) !important;
}
/* Subheadline 2px größer */
#home .heroText p{
font-size:calc(1rem + 4px) !important;
line-height:1.3 !important;
margin:0 0 12px !important;
max-width:94% !important;
}
#home .heroCtas{
display:flex !important;
flex-direction:row !important;
flex-wrap:nowrap !important;
justify-content:center !important;
align-items:center !important;
gap:8px !important;
width:100% !important;
margin:0 !important;
}
/* Buttons etwas größer */
#home .heroCtas .ctaTop,
#home .heroCtas .ctaTop2{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
box-sizing:border-box !important;
width:175px !important;
min-width:0 !important;
min-height:48px !important;
margin:0 !important;
padding:14px 20px !important;
font-size:15px !important;
line-height:1.15 !important;
white-space:nowrap !important;
}
}