:root{--nav:#0c3859;--yellow:#ffd64a;--text:#14344b;--muted:#536775;--bg:#f2f7f9;--shadow:0 2px 6px #14344b14;--hand:'Segoe Print','Bradley Hand','Comic Sans MS',cursive;--accent:#0069b5}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,'Segoe UI',Arial,sans-serif;font-size:16px;line-height:1.5}main{display:block;min-width:0}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #b87500;outline-offset:4px}img,video{display:block;max-width:100%}h1,h2,h3,p{overflow-wrap:anywhere}h1,h2,h3{line-height:1.25}a:hover{text-decoration:underline;text-underline-offset:4px}
.icon-definitions{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}.site-icon{display:block;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.skip-link{position:fixed;top:-100px;left:12px;background:var(--yellow);color:var(--nav);padding:12px;z-index:100}.skip-link:focus{top:12px}
.topbar{position:relative;inset:auto;background:var(--nav);color:#fff;z-index:20;margin:0}.navwrap{max-width:1500px;min-height:82px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 36px;flex-wrap:nowrap}.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}.brand:hover{text-decoration:none}.brand-mark{display:grid;place-items:center;color:#fff;width:44px;height:44px}.brand-mark .site-icon{width:42px;height:42px;stroke-width:1.3}.brand strong{font-family:var(--hand);font-size:25px;line-height:1.3;display:block;font-weight:600}.brand small{display:block;font-size:12px;color:#e3edf3}.topbar #hauptnavigation{display:flex;align-items:center;gap:4px;flex-wrap:nowrap}.topbar nav a{padding:12px 13px;font-size:14px;font-weight:600;border-radius:4px;white-space:nowrap}.topbar nav a:hover,.topbar nav a.active{background:var(--yellow);color:var(--nav);text-decoration:none}.search-link{display:flex;align-items:center;justify-content:center}.topbar .menu-toggle{display:none;background:transparent;border:1px solid #a8bdcc;border-radius:5px;color:white;padding:8px 10px;align-items:center;gap:7px}
.hero{position:relative;isolation:isolate;background:#e3ebed;height:380px;margin:0;padding:0;overflow:visible}.hero-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}.hero-inner{max-width:1500px;height:100%;margin:auto;position:relative;padding:28px 36px;display:grid;grid-template-columns:34% 46% 20%;grid-template-rows:1fr;align-items:start}.hero-vehicle{grid-column:1;grid-row:1;align-self:end;min-width:0;height:100%;display:flex;align-items:flex-end}.hero-vehicle img{width:100%;max-height:324px;object-fit:contain;object-position:left bottom}.hero-copy{grid-column:2;grid-row:1;text-align:center;padding:0;background:none;border:0;border-radius:0;position:relative;color:var(--nav)}.hero h1{font-family:var(--hand);font-size:clamp(38px,4vw,62px);line-height:1.3;margin:0 0 9px;padding:0;font-weight:700;color:var(--nav)}.eyebrow{font-size:clamp(12px,1.05vw,16px);line-height:1.5;margin:0;font-weight:600}.hero-sub{font-family:var(--hand);font-size:clamp(25px,2.3vw,35px);line-height:1.3;margin:17px 0 0;color:var(--nav)}.hero-note{grid-column:3;grid-row:1;align-self:end;justify-self:end;background:var(--yellow);color:var(--nav);font-family:var(--hand);font-size:20px;line-height:1.4;padding:12px 19px;transform:rotate(-5deg);margin:0 4px 14px 0;box-shadow:0 3px 0 #b98b1926}
.cards{max-width:1500px;margin:0 auto;padding:26px 36px 30px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:15px;align-items:stretch;grid-auto-rows:1fr}.cards .card{background:#fff;color:var(--text);border:1px solid #e2e9ec;border-radius:8px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;position:relative;min-width:0}.card--orange{--accent:#ed7118}.card--blue{--accent:#006cba}.card--green{--accent:#4d8a2b}.card--purple{--accent:#7427aa}.card--teal{--accent:#007e78}.card-media{height:auto;aspect-ratio:1.4;background:#e5edef;flex-shrink:0}.card-media img{width:100%;height:100%;object-fit:cover}.card-icon{align-self:center;display:grid;place-items:center;flex-shrink:0;width:52px;height:52px;margin-top:-26px;background:var(--accent);border:3px solid #fff;border-radius:50%;color:#fff;position:relative;z-index:1}.card-icon .site-icon{width:29px;height:29px;stroke-width:2}.cards .card-body{background:#fff;color:var(--text);padding:0 17px 18px;text-align:center;display:flex;flex-direction:column;flex:1}.card-heading{height:65px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center}.cards .card h2{font-family:var(--hand);font-size:clamp(20px,1.8vw,27px);line-height:1.25;margin:2px 0;color:var(--nav);font-weight:600}.card-subtitle{margin:1px 0 0;font-size:12px;color:var(--text)}.cards .card-description{font-size:13px;line-height:1.55;margin:14px 0 18px;color:#304b5e;flex:1}.card-link{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:6px;padding:9px 10px;background:var(--accent);color:#fff;font-size:12px;font-weight:600;cursor:pointer;min-height:36px}.cards .card-link{margin-top:auto}.card--orange .card-link{background:#c4510c}.card--green .card-link{background:#437923}.card-link:hover{filter:brightness(.91);text-decoration:none}.card-link span{font-size:21px;line-height:1}
.site-footer{background:var(--nav);color:#fff;min-height:90px;padding:20px max(36px,calc((100% - 1428px)/2));display:grid;grid-template-columns:1fr 1.3fr auto auto;align-items:center;gap:32px;font-size:12px}.footer-location{display:flex;align-items:center;gap:10px}.footer-location .site-icon{width:25px;height:30px}.footer-center{font-family:var(--hand);font-size:24px;margin:0;text-align:center;display:flex;align-items:center;gap:20px;white-space:nowrap}.footer-center:before,.footer-center:after{content:'';height:1px;background:#b5c9d0;flex:1;min-width:24px}.weather{display:flex;align-items:center;gap:12px}.weather .site-icon{width:33px;height:33px}.weather small{display:block;font-size:11px}.site-footer nav{display:flex;gap:9px;align-items:center;white-space:nowrap}.site-footer a[aria-current=page]{color:var(--yellow)}
.content-list{max-width:1500px;margin:0 auto;padding:40px 28px 64px}.topic-grid,.article-grid,.latest-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.topic-grid{margin-bottom:30px}.topic,.article-card,.latest-card,.letter{background:white;border:1px solid #e0e8ec;border-radius:10px;box-shadow:var(--shadow);overflow:hidden;min-width:0}.topic{padding:25px;border-top:3px solid var(--yellow);min-height:120px}.topic h2{font-family:var(--hand);font-size:25px;margin:0}.article-card,.latest-card{display:flex;flex-direction:column}.article-card>img,.latest-card>img{width:100%;height:210px;object-fit:cover}.article-body,.latest-card>div{padding:24px;display:flex;flex-direction:column;align-items:flex-start;flex:1}.article-body h2,.latest-card h2{font-size:23px;margin:8px 0 12px}.article-body p,.latest-card p{margin:0 0 22px;white-space:normal;overflow-wrap:anywhere}.article-body .card-link,.latest-card .card-link{margin-top:auto}.article-body time,time{font-size:13px;color:var(--muted)}.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}.photo-grid figure{margin:0;background:#fff;border-radius:9px;overflow:hidden;box-shadow:var(--shadow)}.photo-grid img{width:100%;height:auto}.photo-grid figcaption{padding:16px;font-weight:600}.photo-grid figcaption p{font-weight:400}.letters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.letter{padding:28px}.letter h2{margin:0 0 10px;font-family:var(--hand)}.letter p{white-space:normal;overflow-wrap:anywhere}.single{max-width:1500px;margin:55px auto 80px;padding:0 28px}.single h1{font-family:var(--hand);font-size:clamp(36px,5vw,58px);margin:20px 0 30px}.single-image{
    display:block;
    width:auto;
    max-width:100%;
    height:auto;
    max-height:650px;
    object-fit:contain;
    margin:25px auto;
    border-radius:10px
}.prose{font-size:18px;line-height:1.85;overflow-wrap:anywhere;margin-top:28px}.legal{min-height:260px}.back-link{color:#0060a3}.search-form label{display:block;font-weight:600;margin-bottom:8px}.search-form>div{display:flex;gap:10px}.search-form input{min-width:0;flex:1;border:1px solid #869dab;border-radius:6px;padding:10px;background:white;color:var(--text)}.search-results{padding:0;list-style:none}.search-results li{padding:15px 0;border-bottom:1px solid #cbd9e1}.search-results a{color:#0060a3}video{width:100%;margin-top:18px}


@media(min-width:901px){.topbar .menu-toggle,.js .topbar .menu-toggle{display:none!important}.topbar #hauptnavigation,.js .topbar #hauptnavigation{display:flex!important}}
@media(min-width:901px) and (max-width:1200px){.navwrap{padding:10px 24px;gap:12px;min-height:72px}.brand{gap:6px}.brand strong{font-size:21px}.brand-mark{width:32px}.brand-mark .site-icon{width:32px}.topbar nav a{font-size:12px;padding:10px 8px}.topbar #hauptnavigation{gap:1px}.cards{padding:22px 24px 26px;gap:11px}.cards .card-body{padding:0 11px 14px}.cards .card-description{font-size:12px}.card-link{font-size:11px;padding:8px 6px;gap:5px}.hero-inner{padding:28px 24px;grid-template-columns:30% 50% 20%}.hero-note{font-size:17px;padding:12px}.site-footer{padding:20px 24px;gap:22px;font-size:11px}.footer-center{font-size:20px;gap:10px}}
@media(max-width:900px){.navwrap{padding:12px 20px;min-height:72px;flex-wrap:wrap;gap:12px}.brand{flex:1}.brand strong{font-size:23px}.js .topbar .menu-toggle{display:flex}.topbar #hauptnavigation{width:100%;flex-basis:100%;justify-content:flex-start;flex-wrap:wrap}.js .topbar #hauptnavigation{display:none}.js .topbar #hauptnavigation.is-open{display:flex}.topbar nav a{padding:12px}.hero{height:auto;min-height:380px}.hero-inner{min-height:380px;grid-template-columns:1fr 1fr;grid-template-rows:auto 145px;padding:25px 22px;gap:16px}.hero-copy{grid-column:1/-1;grid-row:1}.hero h1{font-size:44px}.hero-sub{font-size:27px;margin-top:14px}.eyebrow{font-size:13px}.hero-vehicle{grid-column:1;grid-row:2}.hero-vehicle img{max-height:145px}.hero-note{grid-column:2;grid-row:2;font-size:18px;margin:0 5px 8px 0}.cards{grid-template-columns:repeat(3,minmax(0,1fr));padding:22px;gap:16px}.cards .card h2{font-size:24px}.cards .card-description{font-size:14px}.card-heading{height:68px}.site-footer{grid-template-columns:1fr 1fr;padding:24px;gap:22px}.footer-center{grid-column:1/-1;grid-row:1;justify-content:center}.site-footer nav{justify-content:flex-end}.weather{justify-self:end}.article-grid,.latest-grid,.photo-grid,.topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));padding:18px 16px 24px;gap:14px}.cards .card-body{padding:0 12px 16px}.cards .card h2{font-size:23px}.cards .card-description{font-size:13px}.hero h1{font-size:38px}.hero-inner{padding:24px 18px}.hero-note{font-size:16px;padding:12px}.site-footer{font-size:11px;gap:20px}.footer-center{font-size:22px}.article-grid,.latest-grid,.photo-grid,.topic-grid,.letters{grid-template-columns:1fr}}
@media(max-width:400px){.navwrap{padding:10px 14px}.brand{gap:6px}.brand strong{font-size:19px}.brand-mark,.brand-mark .site-icon{width:32px}.menu-toggle span{font-size:13px}.topbar nav a{width:calc(50% - 4px)}.hero h1{font-size:32px}.hero-sub{font-size:25px}.cards{grid-template-columns:1fr;gap:20px}.card-media{aspect-ratio:1.65}.cards .card-body{padding:0 24px 20px}.cards .card-description{font-size:15px}.cards .card h2{font-size:27px}.site-footer{grid-template-columns:1fr;text-align:center}.footer-location,.weather,.site-footer nav{justify-self:center;justify-content:center}.footer-center{white-space:normal}.content-list{padding:28px 18px 45px}.single{padding:0 20px}.search-form>div{flex-wrap:wrap}.search-form input{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* =========================================================
   CAMPING-OPA
   ========================================================= */

.camping-hero{
 position:relative;
 min-height:430px;
 background-image:var(--camping-hero);
 background-size:cover;
 background-position:center;
 color:#fff;
 overflow:hidden
}
.camping-hero-overlay{
 position:absolute;
 inset:0;
 display:flex;
 align-items:flex-end;
 background:linear-gradient(90deg,rgba(5,30,48,.76) 0%,rgba(5,30,48,.28) 55%,rgba(5,30,48,.08) 100%)
}
.camping-hero-copy{
 width:min(1430px,100%);
 margin:0 auto;
 padding:64px 36px 56px
}
.camping-hero .section-kicker{
 color:var(--yellow)
}
.camping-hero h1{
 margin:7px 0 4px;
 font-family:var(--hand);
 font-size:clamp(48px,6vw,82px);
 line-height:1.05;
 color:#fff
}
.camping-hero p{
 margin:0;
 font-family:var(--hand);
 font-size:clamp(23px,2.5vw,36px)
}

.camping-page{
 max-width:1430px;
 margin:0 auto;
 padding:54px 36px 70px
}

.camping-small-title{
 display:block;
 margin-bottom:8px;
 color:#b85b14;
 font-size:12px;
 font-weight:800;
 letter-spacing:.14em;
 text-transform:uppercase
}

.camping-intro{
 display:grid;
 grid-template-columns:1fr 1.15fr;
 gap:54px;
 align-items:center;
 margin-bottom:70px
}
.camping-intro-copy h2,
.camping-section-heading h2,
.camping-daysie-copy h2{
 margin:0;
 font-family:var(--hand);
 color:var(--nav);
 font-size:clamp(34px,4vw,54px);
 font-weight:600
}
.camping-intro-image{
 border-radius:16px;
 overflow:hidden;
 box-shadow:0 12px 35px rgba(12,56,89,.13)
}
.camping-intro-image img{
 width:100%;
 height:360px;
 object-fit:cover
}

.camping-section{
 margin-top:68px
}
.camping-section-heading{
 margin-bottom:26px
}

.camping-topic-grid{
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:18px
}
.camping-topic-card{
 position:relative;
 min-height:180px;
 padding:30px 24px;
 background:#fff;
 border:1px solid #dce6eb;
 border-radius:12px;
 box-shadow:var(--shadow);
 overflow:hidden
}
.camping-topic-card:after{
 content:'';
 position:absolute;
 left:0;
 bottom:0;
 width:100%;
 height:5px;
 background:var(--yellow)
}
.camping-topic-number{
 display:block;
 margin-bottom:28px;
 color:#d79220;
 font-size:13px;
 font-weight:800;
 letter-spacing:.12em
}
.camping-topic-card h3{
 margin:0;
 font-family:var(--hand);
 color:var(--nav);
 font-size:25px;
 font-weight:600
}

.camping-daysie{
 margin-top:76px;
 display:grid;
 grid-template-columns:1.2fr .8fr;
 min-height:380px;
 background:var(--nav);
 border-radius:16px;
 overflow:hidden;
 box-shadow:0 12px 36px rgba(12,56,89,.16)
}
.camping-daysie-image img{
 width:100%;
 height:100%;
 min-height:380px;
 object-fit:cover
}
.camping-daysie-copy{
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:flex-start;
 padding:48px;
 color:#fff
}
.camping-daysie-copy .camping-small-title{
 color:var(--yellow)
}
.camping-daysie-copy h2{
 color:#fff
}
.camping-button{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:13px;
 margin-top:28px;
 padding:12px 18px;
 border-radius:6px;
 background:var(--yellow);
 color:var(--nav);
 font-weight:800
}
.camping-button:hover{
 text-decoration:none;
 filter:brightness(.96)
}

.camping-articles .article-grid{
 margin-top:10px
}

.camping-teasers{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:24px
}
.camping-teaser{
 position:relative;
 min-height:330px;
 border-radius:14px;
 overflow:hidden;
 box-shadow:0 8px 25px rgba(12,56,89,.13)
}
.camping-teaser img{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 object-fit:cover
}
.camping-teaser:after{
 content:'';
 position:absolute;
 inset:0;
 background:linear-gradient(0deg,rgba(5,29,46,.82) 0%,rgba(5,29,46,.18) 70%)
}
.camping-teaser-overlay{
 position:absolute;
 z-index:2;
 left:0;
 right:0;
 bottom:0;
 padding:30px;
 color:#fff
}
.camping-teaser-overlay small{
 display:block;
 margin-bottom:4px;
 color:var(--yellow);
 font-weight:700
}
.camping-teaser-overlay strong{
 display:block;
 font-family:var(--hand);
 font-size:clamp(27px,3vw,40px);
 line-height:1.15
}
.camping-teaser-overlay>span{
 display:block;
 margin-top:12px;
 font-size:13px;
 font-weight:700
}
.camping-teaser:hover{
 text-decoration:none
}

@media(max-width:900px){
 .camping-hero{min-height:360px}
 .camping-hero-copy{padding:50px 24px 40px}
 .camping-page{padding:42px 24px 60px}
 .camping-intro{grid-template-columns:1fr;gap:26px}
 .camping-intro-image img{height:330px}
 .camping-topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .camping-daysie{grid-template-columns:1fr}
 .camping-daysie-image img{min-height:300px;height:300px}
 .camping-daysie-copy{padding:38px}
}

@media(max-width:620px){
 .camping-hero{min-height:310px}
 .camping-hero-copy{padding:38px 18px 34px}
 .camping-page{padding:34px 16px 48px}
 .camping-intro{margin-bottom:48px}
 .camping-intro-image img{height:240px}
 .camping-section{margin-top:48px}
 .camping-topic-grid{grid-template-columns:1fr}
 .camping-topic-card{min-height:140px}
 .camping-topic-number{margin-bottom:18px}
 .camping-daysie{margin-top:52px}
 .camping-daysie-image img{height:240px;min-height:240px}
 .camping-daysie-copy{padding:30px 24px}
 .camping-teasers{grid-template-columns:1fr}
 .camping-teaser{min-height:280px}
}

/* =========================================================
   VIDEO-BEREICH
   ========================================================= */

.video-grid{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:24px;
}

.video-card{
 display:flex;
 flex-direction:column;
 min-width:0;
 overflow:hidden;
 background:#fff;
 border:1px solid #dce6eb;
 border-radius:12px;
 box-shadow:var(--shadow);
}

.video-preview{
 position:relative;
 display:block;
 width:100%;
 aspect-ratio:16/9;
 padding:0;
 border:0;
 overflow:hidden;
 background:#102b3e;
 cursor:pointer;
}

.video-preview img{
 width:100%;
 height:100%;
 object-fit:cover;
 transition:transform .25s ease;
}

.video-preview:hover img{
 transform:scale(1.025);
}

.video-preview-empty{
 position:absolute;
 inset:0;
 background:linear-gradient(135deg,#153b57,#071e2e);
}

.video-play{
 position:absolute;
 left:50%;
 top:50%;
 width:70px;
 height:70px;
 transform:translate(-50%,-50%);
 display:grid;
 place-items:center;
 border-radius:50%;
 background:rgba(255,214,74,.95);
 box-shadow:0 6px 20px rgba(0,0,0,.28);
}

.video-play span{
 display:block;
 width:0;
 height:0;
 margin-left:5px;
 border-top:12px solid transparent;
 border-bottom:12px solid transparent;
 border-left:19px solid var(--nav);
}

.video-card-body{
 display:flex;
 flex-direction:column;
 flex:1;
 padding:20px;
}

.video-card-body h2{
 margin:0 0 10px;
 font-family:var(--hand);
 color:var(--nav);
 font-size:25px;
}

.video-teaser{
 display:-webkit-box;
 -webkit-box-orient:vertical;
 -webkit-line-clamp:3;
 overflow:hidden;
 margin:0 0 20px;
 color:#405868;
 font-size:14px;
 line-height:1.55;
}

.video-card-body .card-link{
 margin-top:auto;
 align-self:flex-start;
}

.video-modal{
 width:min(1100px,94vw);
 max-width:1100px;
 padding:0;
 border:0;
 border-radius:12px;
 background:#071923;
 color:#fff;
 box-shadow:0 25px 80px rgba(0,0,0,.45);
}

.video-modal::backdrop{
 background:rgba(0,0,0,.78);
}

.video-modal-box{
 width:100%;
}

.video-modal-head{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:20px;
 min-height:64px;
 padding:12px 18px;
 background:var(--nav);
}

.video-modal-head h2{
 margin:0;
 font-family:var(--hand);
 font-size:24px;
 color:#fff;
}

.video-modal-close{
 display:grid;
 place-items:center;
 width:42px;
 height:42px;
 flex-shrink:0;
 padding:0;
 border:0;
 border-radius:50%;
 background:var(--yellow);
 color:var(--nav);
 font-size:30px;
 line-height:1;
 cursor:pointer;
}

.video-modal-player{
 width:100%;
 aspect-ratio:16/9;
 background:#000;
}

.video-modal-player iframe,
.video-modal-player video{
 display:none;
 width:100%;
 height:100%;
 border:0;
 background:#000;
}

.video-modal-player iframe.is-active,
.video-modal-player video.is-active{
 display:block;
}

@media(max-width:900px){
 .video-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
 }
}

@media(max-width:620px){
 .video-grid{
  grid-template-columns:1fr;
 }

 .video-play{
  width:58px;
  height:58px;
 }

 .video-modal{
  width:96vw;
 }

 .video-modal-head h2{
  font-size:20px;
 }
}

.video-category-nav{
 display:flex;
 flex-wrap:wrap;
 gap:10px;
 margin:0 0 28px;
}

.video-category-nav a{
 display:inline-flex;
 align-items:center;
 min-height:40px;
 padding:8px 15px;
 border:1px solid #cbd9e1;
 border-radius:999px;
 background:#fff;
 color:var(--nav);
 font-size:14px;
 font-weight:700;
}

.video-category-nav a:hover,
.video-category-nav a.active{
 background:var(--yellow);
 border-color:var(--yellow);
 text-decoration:none;
}

/* Video Detail / SEO */

.breadcrumbs{
 display:flex;
 flex-wrap:wrap;
 gap:8px;
 align-items:center;
 margin:0 0 24px;
 font-size:14px;
}

.video-detail-category,
.video-detail-date{
 margin:8px 0;
}

.video-detail-player{
 position:relative;
 width:100%;
 aspect-ratio:16/9;
 margin:24px 0;
 overflow:hidden;
 border-radius:14px;
 background:#000;
}

.video-detail-player iframe{
 display:block;
 width:100%;
 height:100%;
 border:0;
}

.video-detail-description{
 margin-top:28px;
}

.video-detail-link{
 margin-left:8px;
}

/* Responsive Bildoptimierung */
.hero > picture{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 z-index:-1;
}

.hero > picture .hero-background{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 object-fit:cover;
}

.hero-vehicle picture{
 display:flex;
 width:100%;
 height:100%;
 align-items:flex-end;
}

.hero-vehicle picture img{
 width:100%;
 max-height:324px;
 object-fit:contain;
 object-position:left bottom;
}

.card-media picture{
 display:block;
 width:100%;
 height:100%;
}

.card-media picture img{
 width:100%;
 height:100%;
 object-fit:cover;
}

@media(max-width:900px){
 .hero-vehicle picture img{
  max-height:145px;
 }
}

/* Editor-Inhalte: normale kompakte Absatzabstände */
.prose p {
    margin: 0 0 0.45em;
}

.prose p:last-child {
    margin-bottom: 0;
}

.prose h2,
.prose h3 {
    margin-top: 1.3em;
    margin-bottom: 0.5em;
}

/* Editor-Inhalte sehr kompakt darstellen */
.prose p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.35;
}

.prose p + p {
    margin-top: 0 !important;
}

.prose br {
    line-height: 1.35;
}

/* Impressum / Datenschutz / Editor-Inhalte */
.prose,
.prose p,
.prose li,
.prose span,
.prose strong,
.prose em,
.prose h2,
.prose h3,
.prose h4 {
    color: var(--text) !important;
}

.prose a {
    color: var(--link-color) !important;
    text-decoration: underline;
}

/* =========================================================
   FOTO-GALERIE
   ========================================================= */

.photo-grid {
    width: min(1200px, calc(100% - 48px));
    margin: 40px auto 70px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.photo-grid figure {
    margin: 0;
    min-width: 0;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.photo-grid .js-photo-open {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #e5edef;
}

.photo-grid .js-photo-open img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .2s ease;
}

.photo-grid .js-photo-open:hover img {
    transform: scale(1.025);
}

.photo-grid figcaption {
    padding: 14px 16px;
    margin: 0;
    color: var(--text);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
}

.photo-grid figcaption p {
    margin: 6px 0 0;
    font-weight: 400;
}


/* =========================================================
   FOTO-MODAL
   ========================================================= */

.photo-dialog {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    max-width: 96vw;
    max-height: 96vh;
    margin: auto;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: visible;
}

.photo-dialog::backdrop {
    background: rgba(0, 0, 0, .92);
}

.photo-dialog #photo-modal-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 92vw;
    max-height: 86vh;
    margin: auto;
    object-fit: contain;
    background: #000;
}

.photo-dialog-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #000;
    font-size: 32px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
}

.photo-dialog-title {
    padding: 10px 12px;
    color: #fff;
    text-align: center;
    font-size: 15px;
}


/* Tablet */
@media (max-width: 900px) {

    .photo-grid {
        width: min(760px, calc(100% - 36px));
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        margin-top: 30px;
    }
}


/* Smartphone */
@media (max-width: 560px) {

    .photo-grid {
        width: calc(100% - 28px);
        grid-template-columns: 1fr;
        gap: 18px;
        margin: 24px auto 45px;
    }
}


/* ===== QUILL FRONTEND CONTENT ===== */

.ql-align-center {
    text-align: center;
}

.ql-align-right {
    text-align: right;
}

.ql-align-justify {
    text-align: justify;
}

.ql-align-center img,
.ql-align-right img,
.ql-align-justify img {
    max-width: 100%;
    height: auto;
}



/* ===== QUILL BILDAUSRICHTUNG ===== */

.page-editor-content .ql-align-center img,
.prose .ql-align-center img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
}

.page-editor-content .ql-align-right img,
.prose .ql-align-right img {
    display: block;
    margin-left: auto;
    margin-right: 0;
    max-width: 100%;
    height: auto;
}

.page-editor-content .ql-align-left img,
.prose .ql-align-left img {
    display: block;
    margin-left: 0;
    margin-right: auto;
    max-width: 100%;
    height: auto;
}



/* =========================================================
   DARK LIGHT THEME
   ========================================================= */

:root {
    color-scheme: light;
    --surface: #ffffff;
    --surface-soft: #f2f7f9;
    --surface-muted: #e5edef;
    --border: #e0e8ec;
    --input-bg: #ffffff;
    --link-color: #0060a3;
}

html[data-theme="dark"] {
    color-scheme: dark;

    --nav: #071d2c;
    --yellow: #ffd64a;
    --text: #dbe8ef;
    --muted: #9db0bc;
    --bg: #0d1820;
    --shadow: 0 2px 8px #00000055;

    --surface: #14232d;
    --surface-soft: #0d1820;
    --surface-muted: #20323d;
    --border: #324650;
    --input-bg: #172832;
    --link-color: #71bfff;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #a8bdcc;
    border-radius: 5px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}

.theme-toggle:hover {
    background: var(--yellow);
    border-color: var(--yellow);
    color: #0c3859;
}

.theme-toggle-icon {
    font-size: 19px;
    line-height: 1;
}

html[data-theme="dark"] body {
    background: var(--bg);
    color: var(--text);
}

html[data-theme="dark"] .cards .card,
html[data-theme="dark"] .cards .card-body,
html[data-theme="dark"] .topic,
html[data-theme="dark"] .article-card,
html[data-theme="dark"] .latest-card,
html[data-theme="dark"] .letter,
html[data-theme="dark"] .photo-grid figure {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

html[data-theme="dark"] .cards .card h2,
html[data-theme="dark"] .topic h2,
html[data-theme="dark"] .article-body h2,
html[data-theme="dark"] .latest-card h2,
html[data-theme="dark"] .letter h2,
html[data-theme="dark"] .single h1,
html[data-theme="dark"] .prose h1,
html[data-theme="dark"] .prose h2,
html[data-theme="dark"] .prose h3,
html[data-theme="dark"] .prose h4 {
    color: var(--text);
}

html[data-theme="dark"] .cards .card-description,
html[data-theme="dark"] .card-subtitle,
html[data-theme="dark"] .article-body p,
html[data-theme="dark"] .latest-card p,
html[data-theme="dark"] .prose,
html[data-theme="dark"] .letter,
html[data-theme="dark"] time {
    color: var(--text);
}

html[data-theme="dark"] .prose a,
html[data-theme="dark"] .back-link,
html[data-theme="dark"] .search-results a {
    color: var(--link-color);
}

html[data-theme="dark"] .search-form input,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: var(--input-bg);
    color: var(--text);
    border-color: var(--border);
}

html[data-theme="dark"] .search-results li {
    border-color: var(--border);
}

html[data-theme="dark"] .card-media {
    background: var(--surface-muted);
}

html[data-theme="dark"] .photo-grid figcaption {
    background: var(--surface);
    color: var(--text);
}

html[data-theme="dark"] .breadcrumbs,
html[data-theme="dark"] .video-detail-category {
    color: var(--muted);
}

html[data-theme="dark"] dialog {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

html[data-theme="dark"] .hero-copy,
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .hero-sub,
html[data-theme="dark"] .eyebrow {
    color: var(--nav);
}

@media(max-width:900px) {
    .theme-toggle {
        min-height: 42px;
        padding: 10px 12px;
    }
}


/* =========================================================
   DARK MODE TEXT FIX
   ========================================================= */

html[data-theme="dark"] body,
html[data-theme="dark"] main,
html[data-theme="dark"] .content-list,
html[data-theme="dark"] .single,
html[data-theme="dark"] .prose,
html[data-theme="dark"] .topic,
html[data-theme="dark"] .article-card,
html[data-theme="dark"] .latest-card,
html[data-theme="dark"] .letter,
html[data-theme="dark"] .photo-grid,
html[data-theme="dark"] .photo-grid figcaption,
html[data-theme="dark"] .cards .card,
html[data-theme="dark"] .cards .card-body {
    color: #ffffff;
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] span,
html[data-theme="dark"] strong,
html[data-theme="dark"] em,
html[data-theme="dark"] label,
html[data-theme="dark"] time {
    color: inherit;
}

html[data-theme="dark"] .card-subtitle,
html[data-theme="dark"] .cards .card-description,
html[data-theme="dark"] .article-body p,
html[data-theme="dark"] .latest-card p,
html[data-theme="dark"] .letter p,
html[data-theme="dark"] .photo-grid figcaption p,
html[data-theme="dark"] .video-detail-category,
html[data-theme="dark"] .breadcrumbs {
    color: #dbe8ef;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: #ffffff;
}

html[data-theme="dark"] .prose h1,
html[data-theme="dark"] .prose h2,
html[data-theme="dark"] .prose h3,
html[data-theme="dark"] .prose h4,
html[data-theme="dark"] .topic h2,
html[data-theme="dark"] .article-body h2,
html[data-theme="dark"] .latest-card h2,
html[data-theme="dark"] .letter h2,
html[data-theme="dark"] .cards .card h2 {
    color: #ffffff;
}

/* Hero bleibt absichtlich in seiner eigenen Farbgebung */
html[data-theme="dark"] .hero-copy,
html[data-theme="dark"] .hero-copy h1,
html[data-theme="dark"] .hero-copy p,
html[data-theme="dark"] .hero-copy span,
html[data-theme="dark"] .hero-note {
    color: var(--nav);
}

/* Links müssen im dunklen Hintergrund sichtbar bleiben */
html[data-theme="dark"] .prose a,
html[data-theme="dark"] .back-link,
html[data-theme="dark"] .search-results a,
html[data-theme="dark"] .breadcrumbs a,
html[data-theme="dark"] .video-detail-category a {
    color: #7fc7ff;
}

/* Eingabefelder */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    color: #ffffff;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #a9bac5;
}

/* =========================================================
   CAMPING-OPA – HEADLINE + BILD UNTEREINANDER
   ========================================================= */

.page-editor-content .prose h2 {
    display: block;
    width: 100%;
    clear: both;
    float: none;
    margin-top: 38px;
    margin-bottom: 12px;
}

.page-editor-content .prose p.ql-align-center {
    display: block;
    width: 100%;
    clear: both;
    float: none;
    text-align: center;
    margin: 0 0 22px 0;
}

.page-editor-content .prose p.ql-align-center img {
    display: block;
    float: none !important;
    width: 267px !important;
    height: 150px !important;
    max-width: 100%;
    object-fit: cover;
    margin: 0 auto !important;
}

/* =========================================================
   CAMPING-OPA
   Bild LINKS – Überschrift und Text RECHTS
   ========================================================= */

.camping-opa-section {
    display: grid;
    grid-template-columns: 267px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    width: 100%;
    margin: 0 0 42px 0;
    padding: 0;
}

.camping-opa-section-image {
    display: block !important;
    width: 267px !important;
    height: 150px !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 0 !important;
    float: none !important;
    border-radius: 8px;
}

.camping-opa-section-content {
    min-width: 0;
}

.camping-opa-section-content h2 {
    display: block;
    margin: 0 0 12px 0 !important;
    padding: 0;
}

.camping-opa-section-content p {
    margin-top: 0;
}

@media (max-width: 700px) {
    .camping-opa-section {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .camping-opa-section-image {
        width: 267px !important;
        height: 150px !important;
        max-width: 100%;
    }
}

/* =========================================================
   CAMPING-OPA – BARRIEREFREIE AUSGABE
   ========================================================= */

/* Für Screenreader und Braillezeilen vorhanden,
   für sehende Besucher nicht sichtbar */
.camping-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Bild links, Text rechts */
.camping-opa-section {
    display: grid;
    grid-template-columns: 267px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    width: 100%;
    margin: 0 0 42px 0;
}

/* exakt 16:9 bei 150 px Höhe */
.camping-opa-section-image {
    display: block !important;
    width: 267px !important;
    height: 150px !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 0 !important;
    float: none !important;
    border-radius: 8px;
}

.camping-opa-section-content {
    min-width: 0;
}

.camping-opa-section-content p:first-of-type {
    margin-top: 0;
}

@media (max-width: 700px) {
    .camping-opa-section {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .camping-opa-section-image {
        width: 267px !important;
        height: 150px !important;
        max-width: 100%;
    }
}

/* =========================================================
   DIGITALES FOTOALBUM
   ========================================================= */

.photo-album {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 10px 0 50px;
}

.photo-album-empty {
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
}

.photo-album-empty p {
    margin: 0;
}

.photo-album-category {
    margin: 0 0 60px;
}

.photo-album-cover {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 10px;
    margin: 0 0 24px;
}

.photo-album-category-header {
    margin: 0 0 24px;
}

.photo-album-category-header h2 {
    margin: 0 0 10px;
    color: var(--text);
}

.photo-album-category-text {
    color: var(--text);
    line-height: 1.65;
}

.photo-album-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(260px, 1fr)
    );
    gap: 24px;
}

.photo-album-item {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
}

.photo-album-image-link {
    display: block;
}

.photo-album-item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.photo-album-item figcaption {
    padding: 16px;
    color: var(--text);
}

.photo-album-item figcaption strong {
    display: block;
    margin-bottom: 5px;
    color: inherit;
}

.photo-album-item figcaption time {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 0.9rem;
}

.photo-album-item figcaption p {
    margin: 0;
    color: inherit;
    line-height: 1.5;
}

html[data-theme="dark"] .photo-album-item,
html[data-theme="dark"] .photo-album-empty {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

html[data-theme="dark"] .photo-album-category-header h2,
html[data-theme="dark"] .photo-album-category-text,
html[data-theme="dark"] .photo-album-item figcaption {
    color: #fff;
}

@media (max-width: 700px) {

    .photo-album-grid {
        grid-template-columns: 1fr;
    }

    .photo-album-category {
        margin-bottom: 40px;
    }

}

/* =========================================================
   DIGITALES FOTOALBUM – BILDER-SEITE
   ========================================================= */

.digital-album {
    width: 100%;
    margin: 0 auto;
    padding: 20px 0 50px;
}

.digital-album-intro {
    max-width: 900px;
    margin: 0 auto 45px;
}

.digital-album-intro h2 {
    margin: 0 0 15px;
    color: var(--text);
}

.digital-album-intro p {
    color: var(--text);
    line-height: 1.65;
}

.digital-album-empty {
    max-width: 900px;
    margin: 0 auto;
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
}

.digital-album-empty p {
    margin: 0;
}

.digital-album-category {
    margin: 0 0 60px;
}

.digital-album-category-cover {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 10px;
    margin: 0 0 22px;
}

.digital-album-category-copy {
    margin: 0 0 24px;
}

.digital-album-category-copy h2 {
    margin: 0 0 10px;
    color: var(--text);
}

.digital-album-category-copy p {
    margin: 0;
    color: var(--text);
    line-height: 1.65;
}

.digital-album-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}

.digital-album-photo {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
}

.digital-album-photo > a {
    display: block;
}

.digital-album-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.digital-album-photo figcaption {
    padding: 16px;
    color: var(--text);
}

.digital-album-photo figcaption strong {
    display: block;
    margin: 0 0 5px;
}

.digital-album-photo figcaption time {
    display: block;
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 0.9rem;
}

.digital-album-photo figcaption p {
    margin: 0;
    line-height: 1.5;
    color: inherit;
}

html[data-theme="dark"] .digital-album-intro,
html[data-theme="dark"] .digital-album-category-copy,
html[data-theme="dark"] .digital-album-photo,
html[data-theme="dark"] .digital-album-empty {
    color: #fff;
}

html[data-theme="dark"] .digital-album-intro h2,
html[data-theme="dark"] .digital-album-intro p,
html[data-theme="dark"] .digital-album-category-copy h2,
html[data-theme="dark"] .digital-album-category-copy p {
    color: #fff;
}

@media (max-width: 700px) {

    .digital-album-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   FOTOALBUM FRONTEND – RUBRIKENLAYOUT
   ========================================================= */

.album-frontend-category {
    width: 100%;
    margin: 0 0 48px;
    padding: 0 0 34px;
    border-bottom: 1px solid var(--border);
}

.album-frontend-category-head {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    width: 100%;
    margin-bottom: 24px;
}

.album-frontend-cover {
    width: 250px;
}

.album-frontend-cover img {
    display: block !important;
    width: 250px !important;

    /*
     * Bild immer vollständig anzeigen.
     * Kein Cropping.
     */
    height: auto !important;

    max-width: none !important;
    object-fit: fill !important;

    margin: 0 !important;
    padding: 0;
    float: none !important;

    border-radius: 8px;
}

.album-frontend-category-info {
    min-width: 0;
}

.album-frontend-category-info h2 {
    margin: 0 0 12px;
    padding: 0;
    color: var(--text);
}

.album-frontend-description {
    margin: 0 0 15px;
    color: var(--text);
    line-height: 1.6;
}

.album-frontend-count {
    display: inline-block;
    padding: 6px 11px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface-muted);
    color: var(--text);
    font-weight: 600;
}


/* Fotos innerhalb einer Rubrik */

.digital-album-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(250px, 1fr));
    gap: 22px;
}

.digital-album-photo {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
}

.digital-album-photo > a {
    display: block;
}

.digital-album-photo img {
    display: block;

    /*
     * Auch Albumfotos vollständig darstellen.
     */
    width: 100% !important;
    height: auto !important;

    max-width: 100%;
    object-fit: fill !important;
}

.digital-album-photo figcaption {
    padding: 14px;
    color: var(--text);
}

.digital-album-photo figcaption strong {
    display: block;
    margin-bottom: 5px;
}

.digital-album-photo figcaption time {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
}

.digital-album-photo figcaption p {
    margin: 0;
    color: inherit;
    line-height: 1.5;
}


/* Dark */

html[data-theme="dark"] .album-frontend-category-info h2,
html[data-theme="dark"] .album-frontend-description,
html[data-theme="dark"] .album-frontend-count {
    color: #fff;
}


/* Mobil */

@media (max-width: 650px) {

    .album-frontend-category-head {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .album-frontend-cover,
    .album-frontend-cover img {
        width: 250px !important;
        max-width: 100% !important;
    }

}

/* =========================================================
   FOTOALBUM FRONTEND – RUBRIKENSTARTSEITE
   ========================================================= */

.album-category-list {
    display: grid;
    gap: 22px;
}

.album-category-card {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 26px;
    align-items: start;

    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 10px;

    background: var(--surface);
    color: var(--text);

    text-decoration: none;
}

.album-category-card:hover {
    border-color: var(--link-color);
}

.album-category-card-image {
    display: block !important;

    width: 250px !important;
    height: 160px !important;

    max-width: none !important;

    /*
     * Vollständige Darstellung ohne Cropping.
     * Verzerrung ist ausdrücklich akzeptiert.
     */
    object-fit: fill !important;

    margin: 0 !important;
    float: none !important;

    border-radius: 7px;
}

.album-category-card-copy {
    min-width: 0;
}

.album-category-card-copy h2 {
    margin: 0 0 10px;
    color: var(--text);
}

.album-category-card-copy p {
    margin: 0 0 14px;
    color: var(--text);
    line-height: 1.6;
}

.album-category-card-count {
    display: inline-block;

    padding: 5px 10px;

    border: 1px solid var(--border);
    border-radius: 20px;

    background: var(--surface-muted);
    color: var(--text);

    font-weight: 600;
}


/* =========================================================
   RUBRIKDETAIL
   ========================================================= */

.album-category-detail-head {
    margin-bottom: 26px;
}

.album-back {
    display: inline-block;
    margin-bottom: 14px;
}

.album-category-detail-head h2 {
    margin: 0 0 10px;
}

.album-category-detail-text {
    line-height: 1.6;
}

.album-photo-list {
    display: grid;
    grid-template-columns:
        repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

.album-photo-button {
    display: block;

    width: 100%;
    padding: 0;

    border: 1px solid var(--border);
    border-radius: 8px;

    overflow: hidden;

    background: var(--surface);
    cursor: pointer;
}

.album-photo-button img {
    display: block;

    width: 100% !important;
    height: 180px !important;

    object-fit: fill !important;

    margin: 0 !important;
}


/* =========================================================
   FOTO MODAL
   ========================================================= */

.album-modal[hidden] {
    display: none !important;
}

.album-modal {
    position: fixed;
    inset: 0;

    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;
}

.album-modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, .82);
}

.album-modal-dialog {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, .8fr);

    width: min(1400px, 96vw);
    max-height: 92vh;

    overflow: hidden;

    border-radius: 10px;

    background: var(--surface);
    color: var(--text);

    box-shadow: 0 20px 70px rgba(0,0,0,.5);
}

.album-modal-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 400px;

    background: #000;
}

.album-modal-image-wrap img {
    display: block;

    max-width: 100%;
    max-height: 92vh;

    width: auto;
    height: auto;

    object-fit: contain;
}

.album-modal-copy {
    overflow-y: auto;

    padding: 30px;
}

.album-modal-copy h2 {
    margin: 0 0 10px;
}

.album-modal-date {
    margin-bottom: 18px;
    color: var(--muted);
}

.album-modal-text {
    line-height: 1.65;
    white-space: pre-wrap;
}

.album-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;

    z-index: 3;

    width: 42px;
    height: 42px;

    border: 0;
    border-radius: 50%;

    background: rgba(0,0,0,.7);
    color: #fff;

    font-size: 28px;
    line-height: 1;

    cursor: pointer;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-theme="dark"] .album-category-card,
html[data-theme="dark"] .album-modal-dialog {
    background: var(--surface);
    color: #fff;
}

html[data-theme="dark"] .album-category-card h2,
html[data-theme="dark"] .album-category-card p,
html[data-theme="dark"] .album-category-card-count,
html[data-theme="dark"] .album-modal-copy h2,
html[data-theme="dark"] .album-modal-text {
    color: #fff;
}


/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width: 800px) {

    .album-category-card {
        grid-template-columns: 1fr;
    }

    .album-category-card-image {
        width: 250px !important;
        max-width: 100% !important;
    }

    .album-modal {
        padding: 10px;
    }

    .album-modal-dialog {
        grid-template-columns: 1fr;
        max-height: 96vh;
        overflow-y: auto;
    }

    .album-modal-image-wrap {
        min-height: 0;
    }

    .album-modal-image-wrap img {
        max-height: 60vh;
    }

}

/* =========================================================
   FOTOALBUM – 3 RUBRIKEN NEBENEINANDER
   ========================================================= */

.album-category-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.album-category-card {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    min-width: 0;
}

.album-category-card-image {
    width: 250px !important;
    height: 160px !important;
    max-width: none !important;
    object-fit: fill !important;
}

.album-category-card-copy {
    min-width: 0;
}

@media (max-width: 1250px) {
    .album-category-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .album-category-list {
        grid-template-columns: 1fr;
    }

    .album-category-card {
        grid-template-columns: 1fr;
    }

    .album-category-card-image {
        width: 250px !important;
        max-width: 100% !important;
    }
}

/* =========================================================
   VIDEOS – KARTENLAYOUT KORREKTUR
   ========================================================= */

.video-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
}

/* Vorschaubild */
.video-card img,
.video-card-thumb img,
.video-thumbnail img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 0 !important;
}

/* Karteninhalt */
.video-card-body {
    display: block;
    padding: 18px 20px 20px;
    background: var(--surface) !important;
    color: var(--text) !important;
    min-height: 0 !important;
    height: auto !important;
}

/* Überschrift */
.video-card-body h2,
.video-card-body h3 {
    margin: 0 0 10px;
    color: var(--text) !important;
}

/* Beschreibung */
.video-teaser,
.video-card-body p {
    margin: 0 0 16px;
    color: var(--muted) !important;
    line-height: 1.5;
}

/* Buttons kompakt nebeneinander */
.video-card-actions,
.video-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
}

.video-card-actions a,
.video-actions a,
.video-card-body .btn,
.video-card-body a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-height: 40px;
    margin: 0 !important;
    padding: 9px 14px;
}

/* Kategorie-Navigation */
.video-category-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.video-category-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 9px 16px;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
}

.video-category-nav a.active,
.video-category-nav a[aria-current="page"] {
    background: var(--yellow);
    color: var(--nav);
    border-color: var(--yellow);
}

/* Dark Mode */
html[data-theme="dark"] .video-card,
html[data-theme="dark"] .video-card-body {
    background: var(--surface) !important;
    color: #fff !important;
}

html[data-theme="dark"] .video-card-body h2,
html[data-theme="dark"] .video-card-body h3 {
    color: #fff !important;
}

html[data-theme="dark"] .video-teaser,
html[data-theme="dark"] .video-card-body p {
    color: #dbe8ef !important;
}

html[data-theme="dark"] .video-category-nav a {
    background: var(--surface);
    color: #fff;
    border-color: var(--border);
}

html[data-theme="dark"] .video-category-nav a.active,
html[data-theme="dark"] .video-category-nav a[aria-current="page"] {
    background: var(--yellow);
    color: var(--nav);
    border-color: var(--yellow);
}

/* =========================================================
   BLOG – PROFESSIONELLES MAGAZINLAYOUT
   ========================================================= */

.blog-magazine {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 10px 0 55px;
}


/* ---------------------------------------------------------
   Vorhandene Beitragscontainer in Magazinraster verwandeln
   --------------------------------------------------------- */

.blog-magazine .articles,
.blog-magazine .article-list,
.blog-magazine .blog-list,
.blog-magazine .blog-grid,
.blog-magazine .content-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    align-items: stretch;
}


/* ---------------------------------------------------------
   Allgemeine Blogkarten
   --------------------------------------------------------- */

.blog-magazine .article-card,
.blog-magazine .latest-card {
    display: flex;
    flex-direction: column;

    min-width: 0;
    height: 100%;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: var(--surface);
    color: var(--text);

    box-shadow: var(--shadow);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.blog-magazine .article-card:hover,
.blog-magazine .latest-card:hover {
    transform: translateY(-3px);
    border-color: var(--link-color);
}


/* ---------------------------------------------------------
   Vorschaubilder
   --------------------------------------------------------- */

.blog-magazine .article-card img,
.blog-magazine .latest-card img {
    display: block;

    width: 100% !important;
    height: auto !important;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    margin: 0 !important;
}


/* ---------------------------------------------------------
   Karteninhalt
   --------------------------------------------------------- */

.blog-magazine .article-body,
.blog-magazine .article-card-body,
.blog-magazine .latest-card-body,
.blog-magazine .card-body {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding: 24px;

    background: var(--surface);
    color: var(--text);
}


/* ---------------------------------------------------------
   Datum
   --------------------------------------------------------- */

.blog-magazine time,
.blog-magazine .article-date,
.blog-magazine .post-date,
.blog-magazine .blog-date {
    display: block;

    margin: 0 0 10px;

    color: var(--muted);

    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
}


/* ---------------------------------------------------------
   Titel
   --------------------------------------------------------- */

.blog-magazine .article-card h2,
.blog-magazine .article-card h3,
.blog-magazine .latest-card h2,
.blog-magazine .latest-card h3 {
    margin: 0 0 14px;

    color: var(--text);

    font-size: clamp(21px, 1.8vw, 29px);
    line-height: 1.2;
}


/* ---------------------------------------------------------
   Teasertexte
   --------------------------------------------------------- */

.blog-magazine .article-card p,
.blog-magazine .latest-card p,
.blog-magazine .article-teaser,
.blog-magazine .blog-teaser {
    margin: 0 0 18px;

    color: var(--muted);

    line-height: 1.65;
}


/* ---------------------------------------------------------
   Links / Buttons immer unten
   --------------------------------------------------------- */

.blog-magazine .article-card a,
.blog-magazine .latest-card a {
    text-decoration: none;
}

.blog-magazine .article-card .btn,
.blog-magazine .latest-card .btn,
.blog-magazine .article-link,
.blog-magazine .read-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: max-content;

    min-height: 42px;

    margin-top: auto;
    padding: 10px 16px;

    border: 1px solid var(--link-color);
    border-radius: 7px;

    background: transparent;
    color: var(--link-color);

    font-weight: 700;
    text-decoration: none;
}


/* ---------------------------------------------------------
   Erster vorhandener Beitrag als Aufmacher
   --------------------------------------------------------- */

.blog-magazine .article-card:first-of-type,
.blog-magazine .latest-card:first-of-type {
    grid-column: 1 / -1;
}

.blog-magazine .article-card:first-of-type img,
.blog-magazine .latest-card:first-of-type img {
    aspect-ratio: 21 / 8;
    max-height: 500px;
}

.blog-magazine .article-card:first-of-type h2,
.blog-magazine .latest-card:first-of-type h2 {
    font-size: clamp(30px, 3vw, 46px);
}


/* ---------------------------------------------------------
   Falls bereits ein eigener latest-card-Aufmacher existiert
   --------------------------------------------------------- */

.blog-magazine .latest-card {
    grid-column: 1 / -1;
}


/* =========================================================
   BLOG – EINZELARTIKEL
   ========================================================= */

.blog-article-page {
    width: 100%;
}

.blog-article-page .single,
.blog-article-page article {
    width: 100%;
    max-width: 1100px;

    margin-left: auto;
    margin-right: auto;
}


/* Titelbereich */

.blog-article-page h1 {
    max-width: 950px;

    margin-left: auto;
    margin-right: auto;

    line-height: 1.15;
}


/* Datum */

.blog-article-page time,
.blog-article-page .article-date,
.blog-article-page .post-date {
    display: block;

    max-width: 900px;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 22px;

    color: var(--muted);

    font-weight: 600;
}


/* großes Titelbild */

.blog-article-page article > img,
.blog-article-page .single > img,
.blog-article-page .article-image img,
.blog-article-page .post-image img {
    display: block;

    width: 100%;

    max-width: 1100px;

    margin: 0 auto 34px;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    border-radius: 12px;
}


/* eigentlicher Lesetext */

.blog-article-page .prose,
.blog-article-page .article-body {
    max-width: 900px;

    margin-left: auto;
    margin-right: auto;

    font-size: 1.05rem;
    line-height: 1.75;
}

.blog-article-page .prose p,
.blog-article-page .article-body p {
    margin-bottom: 1.35em;
}

.blog-article-page .prose h2,
.blog-article-page .article-body h2 {
    margin-top: 1.8em;
    margin-bottom: .7em;

    font-size: clamp(25px, 2vw, 33px);
}

.blog-article-page .prose h3,
.blog-article-page .article-body h3 {
    margin-top: 1.6em;
    margin-bottom: .6em;
}


/* Bilder innerhalb eines Artikels */

.blog-article-page .prose img,
.blog-article-page .article-body img {
    display: block;

    max-width: 100%;
    height: auto;

    margin: 28px auto;

    border-radius: 9px;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"] .blog-magazine .article-card,
html[data-theme="dark"] .blog-magazine .latest-card,
html[data-theme="dark"] .blog-magazine .article-body,
html[data-theme="dark"] .blog-magazine .article-card-body,
html[data-theme="dark"] .blog-magazine .latest-card-body,
html[data-theme="dark"] .blog-magazine .card-body {
    background: var(--surface) !important;
    color: #fff !important;
}

html[data-theme="dark"] .blog-magazine .article-card h2,
html[data-theme="dark"] .blog-magazine .article-card h3,
html[data-theme="dark"] .blog-magazine .latest-card h2,
html[data-theme="dark"] .blog-magazine .latest-card h3 {
    color: #fff !important;
}

html[data-theme="dark"] .blog-magazine .article-card p,
html[data-theme="dark"] .blog-magazine .latest-card p,
html[data-theme="dark"] .blog-magazine time {
    color: #dbe8ef !important;
}

html[data-theme="dark"] .blog-article-page,
html[data-theme="dark"] .blog-article-page .prose,
html[data-theme="dark"] .blog-article-page .article-body {
    color: #fff;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .blog-magazine .articles,
    .blog-magazine .article-list,
    .blog-magazine .blog-list,
    .blog-magazine .blog-grid,
    .blog-magazine .content-list {
        grid-template-columns: 1fr;
    }

    .blog-magazine .article-card:first-of-type,
    .blog-magazine .latest-card:first-of-type {
        grid-column: auto;
    }

    .blog-magazine .article-card:first-of-type img,
    .blog-magazine .latest-card:first-of-type img {
        aspect-ratio: 16 / 9;
    }

}

@media (max-width: 600px) {

    .blog-magazine .article-body,
    .blog-magazine .article-card-body,
    .blog-magazine .latest-card-body,
    .blog-magazine .card-body {
        padding: 18px;
    }

    .blog-magazine .article-card:first-of-type h2,
    .blog-magazine .latest-card:first-of-type h2 {
        font-size: 27px;
    }

}

/* =========================================================
   BLOG – MAGAZINLAYOUT
   Nur für area=blog
   ========================================================= */

.blog-magazine-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    align-items: stretch;
    width: 100%;
}


/* ---------------------------------------------------------
   Karten
   --------------------------------------------------------- */

.blog-magazine-grid .article-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: var(--surface);
    color: var(--text);

    box-shadow: var(--shadow);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.blog-magazine-grid .article-card:hover {
    transform: translateY(-3px);
    border-color: var(--link-color);
}


/* ---------------------------------------------------------
   Erstes Element = großer Aufmacher
   --------------------------------------------------------- */

.blog-magazine-grid .article-card:first-child {
    grid-column: 1 / -1;
}

.blog-magazine-grid .article-card:first-child .article-body {
    padding: 30px 34px 32px;
}

.blog-magazine-grid .article-card:first-child h2 {
    font-size: clamp(30px, 3vw, 46px);
    line-height: 1.15;
}


/* ---------------------------------------------------------
   Bilder
   --------------------------------------------------------- */

.blog-magazine-grid .article-card > a:first-child {
    display: block;
    overflow: hidden;
}

.blog-magazine-grid .article-card > a:first-child img,
.blog-magazine-grid .article-card img {
    display: block;

    width: 100% !important;
    height: auto !important;

    aspect-ratio: 16 / 9;
    object-fit: cover;

    margin: 0 !important;
}

.blog-magazine-grid .article-card:first-child > a:first-child img,
.blog-magazine-grid .article-card:first-child img {
    aspect-ratio: 21 / 8;
    max-height: 500px;
}


/* ---------------------------------------------------------
   Karteninhalt
   --------------------------------------------------------- */

.blog-magazine-grid .article-body {
    display: flex;
    flex: 1;
    flex-direction: column;

    padding: 24px;

    background: var(--surface) !important;
    color: var(--text) !important;
}


/* Datum */

.blog-magazine-grid .article-body time {
    display: block;

    margin: 0 0 10px;

    color: var(--muted);

    font-size: 14px;
    font-weight: 600;
    letter-spacing: .025em;
}


/* Titel */

.blog-magazine-grid .article-body h2 {
    margin: 0 0 14px;

    color: var(--text) !important;

    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.2;
}


/* Teaser */

.blog-magazine-grid .article-body p {
    margin: 0 0 22px;

    color: var(--muted) !important;

    font-size: 1rem;
    line-height: 1.65;
}


/* Beitrag lesen */

.blog-magazine-grid .card-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    width: max-content;

    margin-top: auto;
    padding: 9px 14px;

    border: 1px solid var(--link-color);
    border-radius: 7px;

    color: var(--link-color) !important;
    background: transparent;

    font-weight: 700;
    text-decoration: none;

    transition:
        background .15s ease,
        color .15s ease;
}

.blog-magazine-grid .card-link:hover {
    background: var(--link-color);
    color: #fff !important;
}


/* ---------------------------------------------------------
   Dark Mode
   --------------------------------------------------------- */

html[data-theme="dark"] .blog-magazine-grid .article-card,
html[data-theme="dark"] .blog-magazine-grid .article-body {
    background: var(--surface) !important;
    color: #fff !important;
    border-color: var(--border);
}

html[data-theme="dark"] .blog-magazine-grid .article-body h2 {
    color: #fff !important;
}

html[data-theme="dark"] .blog-magazine-grid .article-body p {
    color: #dbe8ef !important;
}

html[data-theme="dark"] .blog-magazine-grid .article-body time {
    color: #9db0bc !important;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .blog-magazine-grid {
        grid-template-columns: 1fr;
    }

    .blog-magazine-grid .article-card:first-child {
        grid-column: auto;
    }

    .blog-magazine-grid .article-card:first-child > a:first-child img,
    .blog-magazine-grid .article-card:first-child img {
        aspect-ratio: 16 / 9;
    }

}

@media (max-width: 600px) {

    .blog-magazine-grid .article-body,
    .blog-magazine-grid .article-card:first-child .article-body {
        padding: 20px;
    }

    .blog-magazine-grid .article-card:first-child h2 {
        font-size: 28px;
    }

}

/* =========================================================
   BLOG – RUBRIKEN
   ========================================================= */

.blog-category-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    width: 100%;

    margin: 0 0 30px;
}

.blog-category-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 42px;

    padding: 9px 16px;

    border: 1px solid var(--border);
    border-radius: 999px;

    background: var(--surface);
    color: var(--text);

    font-weight: 700;
    text-decoration: none;

    transition:
        border-color .15s ease,
        background .15s ease,
        color .15s ease;
}

.blog-category-nav a:hover {
    border-color: var(--link-color);
}

.blog-category-nav a.active {
    background: var(--link-color);
    border-color: var(--link-color);
    color: #fff;
}

.blog-category-nav a span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 25px;
    height: 25px;

    padding: 0 7px;

    border-radius: 999px;

    background: rgba(127,127,127,.15);

    font-size: 12px;
}

.blog-category-nav a.active span {
    background: rgba(255,255,255,.2);
}

html[data-theme="dark"]
.blog-category-nav a {
    background: var(--surface);
    color: #fff;
    border-color: var(--border);
}

html[data-theme="dark"]
.blog-category-nav a.active {
    background: var(--link-color);
    color: #fff;
    border-color: var(--link-color);
}

@media (max-width: 600px) {

    .blog-category-nav {
        gap: 8px;
    }

    .blog-category-nav a {
        min-height: 39px;
        padding: 8px 13px;
        font-size: 14px;
    }

}

/* BLOG – RUBRIK AUF ARTIKELSEITE */

.blog-article-category {
    max-width: 900px;
    margin: 0 auto 20px;
}

.blog-article-category a {
    display: inline-flex;
    align-items: center;

    padding: 7px 13px;

    border: 1px solid var(--border);
    border-radius: 999px;

    background: var(--surface);
    color: var(--link-color);

    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.blog-article-category a:hover {
    border-color: var(--link-color);
}

html[data-theme="dark"] .blog-article-category a {
    background: var(--surface);
    color: #fff;
    border-color: var(--border);
}


/* =========================================================
   LESERBRIEF EINREICHEN
   ========================================================= */

.letter-submit-section {
    width: min(920px, 100%);
    margin: 45px auto;
    padding: 28px;

    border: 1px solid var(--border);
    border-radius: 14px;

    background: var(--surface);
    color: var(--text);

    box-shadow: var(--shadow);
}

.letter-submit-heading {
    margin-bottom: 24px;
}

.letter-submit-heading h2 {
    margin: 0 0 9px;

    font-size: clamp(26px, 3vw, 36px);
}

.letter-submit-heading p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.letter-submit-form label {
    display: block;
    margin: 18px 0 7px;

    font-weight: 750;
}

.letter-submit-form input,
.letter-submit-form textarea {
    display: block;
    width: 100%;

    padding: 12px 13px;

    border: 1px solid var(--border);
    border-radius: 8px;

    background: var(--surface);
    color: var(--text);

    font: inherit;
}

.letter-submit-form textarea {
    min-height: 230px;
    resize: vertical;
    line-height: 1.6;
}

.letter-submit-form small {
    display: block;
    margin-top: 6px;

    color: var(--muted);
    line-height: 1.45;
}

.letter-submit-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.letter-submit-row label {
    margin-top: 0;
}

.letter-submit-actions {
    margin-top: 22px;
}

.letter-submit-success {
    margin-bottom: 22px;
    padding: 15px 17px;

    border-radius: 9px;

    background: #e8f7ed;
    color: #185c2c;

    font-weight: 700;
}

.letter-submit-errors {
    margin-bottom: 22px;
    padding: 15px 17px;

    border-radius: 9px;

    background: #fdecec;
    color: #812626;
}

.letter-submit-errors ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

html[data-theme="dark"]
.letter-submit-section {
    background: var(--surface);
    color: #fff;
}

html[data-theme="dark"]
.letter-submit-form input,

html[data-theme="dark"]
.letter-submit-form textarea {
    background: var(--surface);
    color: #fff;
    border-color: var(--border);
}

@media (max-width: 700px) {

    .letter-submit-section {
        padding: 20px;
    }

    .letter-submit-row {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   BLOG – KOMPAKTERE DARSTELLUNG
   ========================================================= */

.blog-magazine-grid {
    gap: 22px;
}


/* Erster Beitrag weniger dominant */

.blog-magazine-grid .article-card:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(320px, 42%) minmax(0, 1fr);
    align-items: stretch;
}

.blog-magazine-grid .article-card:first-child > a:first-child {
    height: 100%;
}

.blog-magazine-grid .article-card:first-child > a:first-child img,
.blog-magazine-grid .article-card:first-child img {
    width: 100% !important;
    height: 100% !important;
    min-height: 260px;
    max-height: 340px;
    aspect-ratio: auto;
    object-fit: cover;
}

.blog-magazine-grid .article-card:first-child .article-body {
    padding: 24px 28px;
}

.blog-magazine-grid .article-card:first-child h2 {
    font-size: clamp(26px, 2.4vw, 36px);
    margin-bottom: 12px;
}


/* Normale Beiträge ebenfalls etwas ruhiger */

.blog-magazine-grid .article-card .article-body {
    padding: 20px;
}

.blog-magazine-grid .article-card h2 {
    font-size: clamp(20px, 1.7vw, 26px);
}

.blog-magazine-grid .article-card p {
    line-height: 1.55;
    margin-bottom: 16px;
}

.blog-magazine-grid .article-card > a:first-child img {
    aspect-ratio: 16 / 9;
}


/* Tablet */

@media (max-width: 1000px) {

    .blog-magazine-grid .article-card:first-child {
        grid-template-columns: 1fr;
    }

    .blog-magazine-grid .article-card:first-child > a:first-child img,
    .blog-magazine-grid .article-card:first-child img {
        height: auto !important;
        min-height: 0;
        max-height: none;
        aspect-ratio: 16 / 9;
    }

}


/* Mobil */

@media (max-width: 600px) {

    .blog-magazine-grid {
        gap: 18px;
    }

    .blog-magazine-grid .article-card:first-child .article-body,
    .blog-magazine-grid .article-card .article-body {
        padding: 18px;
    }

    .blog-magazine-grid .article-card:first-child h2 {
        font-size: 25px;
    }

}

/* =========================================================
   BLOG – 2 BEITRÄGE PRO REIHE
   ========================================================= */

.blog-magazine-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}


/* Erster Beitrag NICHT mehr als Aufmacher */

.blog-magazine-grid .article-card:first-child {
    grid-column: auto !important;
    display: flex !important;
    flex-direction: column;
}

.blog-magazine-grid .article-card:first-child > a:first-child {
    height: auto !important;
}

.blog-magazine-grid .article-card:first-child > a:first-child img,
.blog-magazine-grid .article-card:first-child img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
}

.blog-magazine-grid .article-card:first-child .article-body {
    padding: 20px !important;
}

.blog-magazine-grid .article-card:first-child h2 {
    font-size: clamp(20px, 1.7vw, 26px) !important;
    line-height: 1.2;
}


/* Alle Karten einheitlich */

.blog-magazine-grid .article-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-magazine-grid .article-card .article-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px;
}

.blog-magazine-grid .article-card > a:first-child img {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
}

.blog-magazine-grid .article-card h2 {
    font-size: clamp(20px, 1.7vw, 26px);
}

.blog-magazine-grid .card-link {
    margin-top: auto;
}


/* Mobil: 1 Beitrag pro Reihe */

@media (max-width: 800px) {

    .blog-magazine-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   BLOG – PAGINATION
   ========================================================= */

.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 12px;

    width: 100%;

    margin: 34px 0 10px;
}

.blog-pagination-pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 8px;
}

.blog-pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 42px;
    height: 42px;

    padding: 0 13px;

    border: 1px solid var(--border);
    border-radius: 8px;

    background: var(--surface);
    color: var(--text);

    font-weight: 700;
    text-decoration: none;
}

.blog-pagination a:hover {
    border-color: var(--link-color);
    color: var(--link-color);
}

.blog-pagination a.active {
    background: var(--link-color);
    border-color: var(--link-color);
    color: #fff;
}

.blog-pagination-prev,
.blog-pagination-next {
    width: auto !important;
}

html[data-theme="dark"]
.blog-pagination a {
    background: var(--surface);
    color: #fff;
    border-color: var(--border);
}

html[data-theme="dark"]
.blog-pagination a.active {
    background: var(--link-color);
    color: #fff;
    border-color: var(--link-color);
}

@media (max-width: 600px) {

    .blog-pagination {
        gap: 8px;
    }

    .blog-pagination a {
        min-width: 38px;
        height: 38px;
        padding: 0 10px;
    }

}

/* =========================================================
   BLOG – KEINE BEITRÄGE
   ========================================================= */

.blog-empty-notice {
    width: 100%;
    padding: 34px 28px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: var(--surface);
    color: var(--text);

    text-align: center;
}

.blog-empty-notice h2 {
    margin: 0 0 10px;

    font-size: 26px;
}

.blog-empty-notice p {
    margin: 0;

    color: var(--muted);
    line-height: 1.6;
}


/* =========================================================
   NÄCHSTE AUSFAHRT
   ========================================================= */

.upcoming-trip {
    width: min(1180px, calc(100% - 36px));
    margin: 34px auto;
}

.upcoming-trip-inner {
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    padding: 26px 32px;

    border: 1px solid var(--border);
    border-radius: 16px;

    background:
        linear-gradient(
            120deg,
            var(--nav) 0%,
            #0a5d91 100%
        );

    color: #fff;

    box-shadow:
        0 12px 34px rgba(0,0,0,.14);
}

.upcoming-trip-inner::after {
    content: "";

    position: absolute;
    top: -80px;
    right: -60px;

    width: 230px;
    height: 230px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.07);
}

.upcoming-trip-label {
    position: relative;
    z-index: 1;

    font-size: clamp(22px, 3vw, 34px);
    font-weight: 850;
    line-height: 1.1;
}

.upcoming-trip-content {
    position: relative;
    z-index: 1;

    text-align: right;
}

.upcoming-trip-date {
    font-size: clamp(19px, 2.2vw, 28px);
    font-weight: 800;
}

.upcoming-trip-countdown {
    display: inline-flex;

    margin-top: 8px;
    padding: 6px 12px;

    border-radius: 999px;

    background: var(--yellow);
    color: var(--nav);

    font-size: 14px;
    font-weight: 850;
}

@media (max-width: 700px) {

    .upcoming-trip-inner {
        flex-direction: column;
        align-items: flex-start;

        padding: 22px;
    }

    .upcoming-trip-content {
        text-align: left;
    }

}

/* =========================================================
   NÄCHSTE AUSFAHRT – DESIGN 2
   ========================================================= */

.upcoming-trip {
    width: min(1180px, calc(100% - 36px));
    margin: 42px auto;
}

.upcoming-trip-card {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(300px, .7fr);

    gap: 45px;
    align-items: center;

    overflow: hidden;

    min-height: 230px;

    padding: 38px 42px;

    border-radius: 20px;

    background:
        linear-gradient(
            125deg,
            #073d68 0%,
            #09699e 62%,
            #0e7eb5 100%
        );

    color: #fff;

    box-shadow:
        0 20px 45px rgba(5, 48, 78, .22);
}


/* dekorative Straßenlinien */

.upcoming-trip-decoration {
    position: absolute;

    right: -80px;
    bottom: -85px;

    width: 430px;
    height: 230px;

    transform: rotate(-10deg);

    opacity: .16;

    pointer-events: none;
}

.upcoming-trip-decoration span {
    position: absolute;

    display: block;

    width: 100%;
    height: 3px;

    border-radius: 999px;

    background: #fff;
}

.upcoming-trip-decoration span:nth-child(1) {
    top: 30px;
}

.upcoming-trip-decoration span:nth-child(2) {
    top: 95px;
    width: 85%;
}

.upcoming-trip-decoration span:nth-child(3) {
    top: 160px;
    width: 68%;
}


/* linker Bereich */

.upcoming-trip-main {
    position: relative;
    z-index: 2;
}

.upcoming-trip-kicker {
    display: inline-flex;

    margin-bottom: 10px;
    padding: 6px 11px;

    border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px;

    background: rgba(255,255,255,.10);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.upcoming-trip-main h2 {
    margin: 0 0 14px;

    color: #fff;

    font-size: clamp(31px, 4vw, 50px);
    line-height: 1.05;
}

.upcoming-trip-text {
    max-width: 680px;

    color: rgba(255,255,255,.92);

    font-size: 17px;
    line-height: 1.65;
}


/* rechter Datumsbereich */

.upcoming-trip-info {
    position: relative;
    z-index: 2;

    padding: 25px;

    border: 1px solid rgba(255,255,255,.22);
    border-radius: 16px;

    background: rgba(255,255,255,.10);

    backdrop-filter: blur(8px);
}

.upcoming-trip-date-label {
    margin-bottom: 7px;

    color: rgba(255,255,255,.7);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.upcoming-trip-date {
    color: #fff;

    font-size: clamp(21px, 2.3vw, 29px);
    font-weight: 850;
    line-height: 1.25;
}

.upcoming-trip-countdown {
    display: inline-flex;

    margin-top: 15px;
    padding: 8px 14px;

    border-radius: 999px;

    background: var(--yellow);
    color: var(--nav);

    font-size: 14px;
    font-weight: 850;

    box-shadow:
        0 6px 18px rgba(0,0,0,.12);
}


/* Dark Mode */

html[data-theme="dark"] .upcoming-trip-card {
    box-shadow:
        0 20px 45px rgba(0,0,0,.32);
}


/* Responsive */

@media (max-width: 850px) {

    .upcoming-trip-card {
        grid-template-columns: 1fr;
        gap: 25px;

        padding: 30px;
    }

    .upcoming-trip-info {
        max-width: 500px;
    }

}

@media (max-width: 550px) {

    .upcoming-trip {
        width: min(100% - 24px, 1180px);
        margin: 28px auto;
    }

    .upcoming-trip-card {
        padding: 24px 20px;
        border-radius: 15px;
    }

    .upcoming-trip-main h2 {
        font-size: 32px;
    }

    .upcoming-trip-text {
        font-size: 16px;
    }

}

/* Nächste Ausfahrt – Datum nicht fett */
.upcoming-trip-date {
    font-weight: 400 !important;
}

/* Nächste Ausfahrt – Tag und Datum getrennt */

.upcoming-trip-weekday {
    margin-bottom: 4px;

    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.upcoming-trip-calendar-date {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.25;
}


.upcoming-trip-date {
    font-weight: 400 !important;
}

/* Nächste Ausfahrt – Termin immer in EINER Zeile */

.upcoming-trip-date {
    display: block;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    font-weight: 400 !important;
    line-height: 1.2;
}

.upcoming-trip-info {
    min-width: max-content;
}

@media (max-width: 850px) {

    .upcoming-trip-info {
        width: fit-content;
        max-width: 100%;
    }

    .upcoming-trip-date {
        font-size: clamp(18px, 4vw, 24px);
    }

}

/* =========================================================
   NÄCHSTE AUSFAHRT – ÜBER ALLEN RUBRIKEN
   ========================================================= */

.upcoming-trip {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 0 28px !important;

    min-width: 0 !important;
}


/* volle Breite nutzen */

.upcoming-trip-card {
    width: 100% !important;
    min-width: 0 !important;

    grid-template-columns:
        minmax(0, 1fr)
        auto !important;

    min-height: 0 !important;

    padding: 30px 36px !important;
}


/* linker Text darf normal laufen */

.upcoming-trip-main {
    min-width: 0 !important;
}

.upcoming-trip-main h2 {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}


/* Terminbox bleibt kompakt rechts */

.upcoming-trip-info {
    width: auto !important;
    min-width: 290px !important;
    max-width: none !important;
}


/* Wochentag + Datum IMMER eine Zeile */

.upcoming-trip-date {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;

    font-weight: 400 !important;
}


/* Mobil */

@media (max-width: 850px) {

    .upcoming-trip-card {
        grid-template-columns: 1fr !important;
    }

    .upcoming-trip-info {
        width: fit-content !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

}

/* Nächste Ausfahrt – Abstand zu den Rubriken reduzieren */

.upcoming-trip {
    margin-bottom: 10px !important;
}

/* Falls das Grid selbst zusätzlichen oberen Abstand erzeugt */
.upcoming-trip + * {
    margin-top: 0 !important;
}

/* =========================================================
   NÄCHSTE AUSFAHRT – ABSTAND ZU RUBRIKEN
   ========================================================= */

/* Das Grid, in dem Ausfahrt + Rubriken liegen */
main *:has(> .upcoming-trip) {
    row-gap: 10px !important;
}

/* Eigene Außenabstände der Ausfahrtsbox neutralisieren */
.upcoming-trip {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* =========================================================
   STARTSEITE – AUSFAHRT DIREKT ÜBER DEN RUBRIKEN
   ========================================================= */

/* Container mit Ausfahrt + Rubriken nicht vertikal auseinanderziehen */
main *:has(> .upcoming-trip) {
    align-content: start !important;
    align-items: start !important;

    grid-auto-rows: auto !important;
    row-gap: 14px !important;

    min-height: 0 !important;
    height: auto !important;
}


/* Ausfahrtsmodul ohne zusätzliche Außenabstände */
.upcoming-trip {
    grid-column: 1 / -1 !important;

    margin: 0 0 14px 0 !important;
    padding: 0 !important;

    align-self: start !important;
}


/* Nachfolgende Rubriken nicht nach unten drücken */
.upcoming-trip ~ * {
    margin-top: 0 !important;
    align-self: start !important;
}


/* =========================================================
   STARTSEITE – RUBRIKTITEL IMMER EINZEILIG
   ========================================================= */

/* Titel der Rubrikkarten */
.home-section-card h2,
.home-section-card h3,
.section-card h2,
.section-card h3,
.home-card h2,
.home-card h3 {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;

    font-size: clamp(18px, 1.8vw, 30px) !important;
    line-height: 1.15 !important;

    text-align: center;
}

/* Falls die Titel eigene Klassen besitzen */
.section-title,
.home-section-title,
.card-title {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;

    font-size: clamp(18px, 1.8vw, 30px) !important;
    line-height: 1.15 !important;
}

/* Karten dürfen den Titel nicht künstlich quetschen */
.home-section-card,
.section-card,
.home-card {
    min-width: 0;
}

/* Bei kleineren Desktopbreiten etwas kleinere Schrift */
@media (max-width: 1350px) {

    .home-section-card h2,
    .home-section-card h3,
    .section-card h2,
    .section-card h3,
    .home-card h2,
    .home-card h3,
    .section-title,
    .home-section-title,
    .card-title {
        font-size: clamp(17px, 1.55vw, 25px) !important;
    }

}

/* =========================================================
   STARTSEITE – RUBRIKNAMEN IMMER EINE ZEILE
   ========================================================= */

.cards .card-heading {
    width: 100%;
    height: 65px;
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: visible;
}

.cards .card h2 {
    display: block;

    width: 100%;

    margin: 2px 0 !important;

    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;

    text-align: center;

    font-size: clamp(18px, 1.45vw, 24px) !important;
    line-height: 1.1 !important;
}


/* 901–1200 px: Karten werden schmaler */
@media (min-width: 901px) and (max-width: 1200px) {

    .cards .card h2 {
        font-size: 19px !important;
    }

}


/* Tablet: 3 Karten pro Reihe, wieder mehr Platz */
@media (max-width: 900px) {

    .cards .card h2 {
        font-size: 23px !important;
    }

}


/* Smartphone: 2 Karten pro Reihe */
@media (max-width: 620px) {

    .cards .card h2 {
        font-size: 19px !important;
    }

}


/* Sehr schmal: 1 Karte pro Reihe */
@media (max-width: 400px) {

    .cards .card h2 {
        font-size: 25px !important;
    }

}

/* =========================================================
   FOOTER – DEZENTER LICHT-/GLANZLAUF
   ========================================================= */



/* ===== FOOTER FINAL ===== */





.site-footer {
    width:100%;
    display:block;
    padding:55px 0 40px;
    box-sizing:border-box;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border-top:1px solid rgba(255,255,255,0.06);
}

.footer-card {
    width:100%;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:40px;
    padding:0 40px;
    box-sizing:border-box;
}

.footer-brand,
.footer-navigation,
.footer-info,
.footer-design {
    width:100%;
    min-width:0;
    min-height:260px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    gap:16px;
    padding:34px 28px;
    box-sizing:border-box;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.035));
    border:1px solid rgba(255,255,255,0.08);
    border-radius:24px;
    box-shadow:
        0 18px 40px rgba(0,0,0,0.20),
        inset 0 1px 0 rgba(255,255,255,0.05);
    backdrop-filter:blur(8px);
}

.footer-brand h3,
.footer-navigation h4,
.footer-info h4,
.footer-design h4 {
    margin:0;
    color:#ffffff;
    font-weight:800;
    letter-spacing:0.02em;
}

.footer-brand h3 {
    white-space:nowrap;
    font-size:2.2rem;
    line-height:1.1;
    text-shadow:0 3px 16px rgba(0,0,0,0.28);
}

.footer-navigation h4,
.footer-info h4,
.footer-design h4 {
    font-size:1.35rem;
    margin-bottom:6px;
}

.footer-brand p,
.footer-design p,
.footer-info p {
    margin:0;
    line-height:1.75;
    color:rgba(255,255,255,0.92);
}

.footer-navigation a {
    display:block;
    min-width:170px;
    margin:0;
    padding:10px 16px;
    border-radius:14px;
    color:#ffffff;
    text-decoration:none;
    font-weight:600;
    background:rgba(255,255,255,0.035);
    border:1px solid rgba(255,255,255,0.05);
    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease;
}

.footer-navigation a:hover {
    transform:translateY(-2px);
    background:rgba(255,255,255,0.08);
    border-color:rgba(255,255,255,0.14);
}

.footer-info p,
.footer-info .weather {
    width:100%;
    max-width:260px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    padding:12px 14px;
    margin:0;
    border-radius:16px;
    background:rgba(255,255,255,0.035);
    border:1px solid rgba(255,255,255,0.05);
    text-decoration:none;
    color:#ffffff;
}

.footer-info .weather small {
    display:block;
    margin-top:2px;
    color:rgba(255,255,255,0.78);
    font-size:0.92rem;
}

.footer-info .site-icon {
    width:24px;
    height:24px;
    flex:0 0 24px;
}

.footer-design strong {
    display:block;
    white-space:nowrap;
    font-size:1.9rem;
    font-weight:900;
    letter-spacing:0.02em;
    color:#ffffff;
    text-shadow:0 3px 14px rgba(0,0,0,0.25);
}

.footer-design p:last-child {
    font-size:1.05rem;
    font-weight:600;
    color:rgba(255,255,255,0.86);
}

@media(max-width:1200px){
    .footer-card {
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:700px){
    .footer-card {
        grid-template-columns:1fr;
        padding:0 20px;
    }

    .footer-brand h3 {
        white-space:normal;
        font-size:1.9rem;
    }

    .footer-design strong {
        white-space:normal;
        font-size:1.6rem;
    }

    .footer-navigation a,
    .footer-info p,
    .footer-info .weather {
        max-width:none;
        width:100%;
    }
}



/* ===== SOCIAL FLOATING BUTTONS ===== */

.social-floating {

    position:fixed;

    right:20px;

    top:50%;

    transform:translateY(-50%);

    display:flex;

    flex-direction:column;

    gap:12px;

    z-index:9999;

}


.social-floating-link {

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,0.08);

    border:1px solid rgba(255,255,255,0.15);

    backdrop-filter:blur(8px);

    color:#fff;

    text-decoration:none;

    transition:
        transform .2s ease,
        background .2s ease;

}


.social-floating-link:hover {

    transform:translateX(-6px);

    background:rgba(255,255,255,0.18);

}


.social-floating-link svg {

    width:24px;

    height:24px;

}


.social-floating-link span {

    display:none;

}


@media(max-width:700px){

.social-floating {

    right:10px;

}

.social-floating-link {

    width:44px;

    height:44px;

}

}




/* ===== SOCIAL BRAND COLORS ===== */

.social-floating-link.social-discord {

    background:#5865F2;
    border-color:#5865F2;

}


.social-floating-link.social-facebook {

    background:#1877F2;
    border-color:#1877F2;

}


.social-floating-link.social-youtube {

    background:#FF0000;
    border-color:#FF0000;

}


.social-floating-link.social-instagram {

    background:
    linear-gradient(
        135deg,
        #f9ce34,
        #ee2a7b,
        #6228d7
    );

    border-color:transparent;

}


.social-floating-link:hover {

    filter:brightness(1.15);

}




.footer-legal {

    width:100%;

    margin-top:45px;

    padding-top:25px;

    text-align:center;

    font-size:1.15rem;

    font-weight:600;

    letter-spacing:0.03em;

    color:rgba(255,255,255,0.85);

    border-top:1px solid rgba(255,255,255,0.15);

}


.footer-legal p {

    margin:12px 0;

}


.footer-legal p:first-child {

    font-size:1.35rem;

    font-weight:800;

    color:#ffffff;

}


.footer-legal a {

    color:#ffffff;

    text-decoration:none;

    padding:0 8px;

}


.footer-legal a:hover {

    text-decoration:underline;

}




/* ===== LEGAL PAGES ===== */

.legal-page {

    max-width:900px;
    margin:50px auto;
    padding:40px;

    box-sizing:border-box;

    text-align:center;

    background:rgba(255,255,255,0.04);

    border-radius:22px;

    border:1px solid rgba(255,255,255,0.08);

}


.legal-page h1,
.legal-page h2 {

    text-align:center;

}


.legal-page p {

    text-align:center;

    line-height:1.8;

}