@import "fonts.css";
@import "variables.css";

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;text-rendering:optimizeLegibility;scroll-padding-top:5rem;}
body{min-height:100dvh;line-height:1.65;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);transition:background .3s,color .3s;}
img{display:block;max-width:100%;height:auto;}
h1,h2,h3,h4{font-family:var(--font-display);text-wrap:balance;line-height:1.4;font-weight:600;}
p{text-wrap:pretty;}
a{color:var(--color-primary);text-decoration:none;}
a:hover{color:var(--color-primary-hover);}
::selection{background:color-mix(in oklab,var(--color-accent) 30%,transparent);}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:var(--radius-sm);}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit;}
.container{max-width:var(--content-wide);margin-inline:auto;padding-inline:var(--space-6);}
.container-narrow{max-width:var(--content-default);margin-inline:auto;padding-inline:var(--space-6);}

/* HEADER */
header{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--color-bg) 90%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-divider);}
/* Raster: 1) Logo (2 Zeilen hoch)  2) Titel / Navigation  3) CTA */
.nav-wrap{--header-logo-h:3.25rem;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:var(--space-5);row-gap:var(--space-1);align-items:center;padding-block:var(--space-3);}
.logo{grid-column:1;grid-row:1 / span 2;display:flex;align-items:center;align-self:center;}
.logo img{height:100%;width:auto;}
.logo svg{width:34px;height:34px;flex-shrink:0;color:var(--color-primary);}
.site-title{grid-column:2;grid-row:1;justify-self:start;font-family:var(--font-display);font-size:var(--text-base);font-weight:700;color:var(--color-text);line-height:1.2; margin-top: 0.8rem;}
.nav-wrap nav{grid-column:2;grid-row:2;justify-self:start;}
nav ul{display:flex;gap:var(--space-6);list-style:none;}
nav li {line-height: 1.2;}
nav a{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:500;transition:color .18s;}
nav a:hover{color:var(--color-primary);}
.nav-right{grid-column:3;grid-row:1 / span 2;justify-self:end;display:flex;align-items:center;gap:var(--space-3);}
.nav-right .btn{white-space:normal;text-align:center;}
.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;transition:all .2s;}
.btn-primary{background:var(--color-accent);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--color-accent-hover);box-shadow:var(--shadow-md);transform:translateY(-1px);color:#fff;}
.btn-outline{border:1.5px solid var(--color-border);color:var(--color-text);}
.btn-outline:hover{border-color:var(--color-accent);color:var(--color-accent);}
.btn-ghost-white{border:1.5px solid rgba(255,255,255,.5);color:#fff;}
.btn-ghost-white:hover{background:rgba(255,255,255,.12);}

/* MOBILE MENU */
.menu-toggle{display:none;width:36px;height:36px;align-items:center;justify-content:center;border-radius:var(--radius-full);color:var(--color-text);transition:background .18s;flex-shrink:0;}
.menu-toggle:hover{background:var(--color-surface-offset);}
.mobile-nav{display:none;border-top:1px solid var(--color-divider);background:var(--color-bg);max-height:calc(100dvh - 65px);overflow-y:auto;}
.mobile-nav.is-open{display:block;}
.mobile-nav ul{list-style:none;display:flex;flex-direction:column;}
.mobile-nav a{display:block;padding:var(--space-4) var(--space-6);font-size:var(--text-base);color:var(--color-text);font-weight:500;border-bottom:1px solid var(--color-divider);transition:background .18s,color .18s;}
.mobile-nav a:hover{color:var(--color-primary);background:var(--color-surface-offset);}
.mobile-nav-cta{margin:var(--space-5) var(--space-6);justify-content:center;}
body.nav-open{overflow:hidden;}

/* HERO */
.hero{position:relative;min-height:90vh;display:flex;align-items:center;overflow:hidden;}
.hero-bg{position:absolute;inset:0;z-index:0;}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;}
.hero-bg::after {content: ""; background: linear-gradient(160deg,#0b1f3a90 0%,#163b66b0 55%,#0b1f3ad0 100%);  position: absolute;  inset: 0; }
.hero-content{position:relative;z-index:1;max-width:var(--content-default);padding:var(--space-10);}
.hero-eyebrow-wrap {display:flex; justify-content: center }
.hero-eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);color:#e8d9bd;font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:var(--space-5);border:2px solid rgba(232,217,189,.35);padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);}
.hero h1{color:#fff;font-size:var(--text-hero);margin-bottom:var(--space-6);line-height:1.4; }
.hero h1 em{color:var(--color-accent); font-style:normal;}
.hero .lead{color:rgba(240,236,224,.9);font-size:var(--text-lg);max-width:52ch;margin-bottom:var(--space-8);line-height:1.6;}
.hero-actions{display:flex;gap:var(--space-4);flex-wrap:wrap;}

/* WILLKOMMEN BANNER */
.welcome-band{background:var(--color-primary-strong);color:#fff;padding-block:var(--space-10);}
.welcome-band .container{display:grid;grid-template-columns:1fr 2fr;gap:var(--space-10);}
.welcome-band h2{color:#fff;font-size:var(--text-xl);}
.welcome-band p{color:rgba(255,255,255,.85);}

/* SECTIONS */
.section{padding-block:clamp(var(--space-16),8vw,var(--space-24));}
.section-alt{background:var(--color-surface);}
.section-label{color:var(--color-accent);font-size:var(--text-base);letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:var(--space-3);display:block; }
.section-title{font-size:var(--text-xl);margin-bottom:var(--space-6);}
.section-intro{color:var(--color-text-muted);font-size:var(--text-base);max-width:60ch;margin-bottom:var(--space-10);}

/* MISSION GRID */
.mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:start;}
.mission-body p{color:var(--color-text-muted);margin-bottom:var(--space-4);}
.mission-body p:last-child{margin-bottom:0;}
.mission-img{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);}
.mission-img img{aspect-ratio:4/5;object-fit:cover;width:100%;}
.stat-row{display:flex;gap:var(--space-8);margin-top:var(--space-8);padding-top:var(--space-8);border-top:1px solid var(--color-divider);}
.stat .num{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-primary);display:block;line-height:1;}
.stat .lbl{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-top:var(--space-1);}

/* VORSTAND */


/* MEMBERSHIP GRID */
.feature-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:var(--space-10);flex-wrap:wrap;gap:var(--space-4);}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);}
.feature-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm);transition:box-shadow .25s,transform .25s;}
.feature-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.feature-card.featured{grid-column:span 3;background:var(--color-primary-strong);color:#fff;border-color:transparent;}
.feature-card.featured h3{color:#fff;}
.feature-card.featured p{color:rgba(255,255,255,.85);}
.feature-icon{width:26px;height:26px;color:var(--color-primary);margin-bottom:var(--space-4);}
.feature-card.featured .feature-icon{color:#e8d9bd;}
.feature-card h3{font-size:var(--text-base);font-family:var(--font-body);font-weight:700;margin-bottom:var(--space-2);}
.feature-card p{color:var(--color-text-muted);font-size:var(--text-sm);}

/* BEITRAG BOX */
.beitrag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:var(--space-8);}
.beitrag-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm);transition:box-shadow .25s,transform .25s;}
.beitrag-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.beitrag-card .price{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-primary);display:block;margin-bottom:var(--space-2);}
.beitrag-card h4{font-size:var(--text-base);margin-bottom:var(--space-3);}
.beitrag-card p{font-size:var(--text-sm);color:var(--color-text-muted);}
.beitrag-note{margin-top:var(--space-6);padding:var(--space-4); font-size:var(--text-sm);color:var(--color-text-muted);}

/* NEWS */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);}
.news-card{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border);background:var(--color-surface-2);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:box-shadow .25s,transform .25s;}
.news-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.news-card img{aspect-ratio:16/10;object-fit:cover;width:100%;}
.news-body{padding:var(--space-5);flex:1;}
.news-tag{font-size:var(--text-xs);color:var(--color-accent-hover);font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:var(--space-2);display:block;}
.news-card h3{font-size:var(--text-base);font-family:var(--font-body);font-weight:700;margin-bottom:var(--space-2);}
.news-card p{color:var(--color-text-muted);font-size:var(--text-sm);}

/* KARTEN: surface-2 ist heller als die Grundfarbe, daher hellere Text- und Linkfarben (Kontrast ≥ 4,5:1) */
.feature-card,.beitrag-card,.news-card{--color-text-muted:var(--color-text-muted-card);}
.feature-card a,.beitrag-card a,.news-card a{color:var(--color-primary-hover);}
.feature-card a:hover,.beitrag-card a:hover,.news-card a:hover{color:var(--color-text);}

/* PARTNER */
.partner-strip{background:var(--color-bg);padding-block:var(--space-10);}
.partner-strip .plabel{font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted); max-width: 100%; text-align:center;margin-bottom:var(--space-6);}
.partner-list{display:grid;grid-template-columns:1fr;gap:var(--space-12);}
@media(min-width:768px){.partner-list{grid-template-columns:repeat(2,1fr);}}
@media(min-width:992px){.partner-list{grid-template-columns:repeat(3,1fr);}}
.partner-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);min-width:0;text-align:center;}
.partner-item svg{width:36px;height:36px;color:var(--color-primary);}
.partner-item strong{font-family:var(--font-display);font-size:var(--text-base);color:var(--color-text);}
.partner-item span{font-size:var(--text-xs);color:var(--color-text-muted);}

/* CTA */
.cta-section{position:relative;overflow:hidden;text-align:center;padding-block:var(--space-20);}
.cta-bg{position:absolute;inset:0;}
.cta-bg img{width:100%;height:100%;object-fit:cover;}
.cta-bg::after{content:"";position:absolute;inset:0;background:rgba(28,58,75,.75);}
.cta-content{position:relative;z-index:1;}
.cta-section h2{color:#fff;font-size:var(--text-2xl);margin-bottom:var(--space-4);}
.cta-section p{color:rgba(255,255,255,.85);margin-inline:auto;margin-bottom:var(--space-8);max-width:55ch;}
.cta-actions{display:flex;justify-content:center;gap:var(--space-4);flex-wrap:wrap;}

/* FOOTER */
footer{ padding-block:var(--space-16) var(--space-8);}
/* Beliebig viele Spalten, höchstens drei nebeneinander – weitere brechen in die nächste Zeile um */
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-10);margin-bottom:var(--space-12);}
.footer-col h4{color:#fff;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-4);font-family:var(--font-body);font-weight:700;}
.footer-col p,.footer-col a{color:#9aadb2;font-size:var(--text-sm);display:block;margin-bottom:var(--space-2);line-height:1.5;}
.footer-col a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:var(--space-6);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-4);font-size:var(--text-xs);color:#8a9ea2;}
.footer-bottom a{color:#8a9ea2;}
.footer-bottom a:hover{color:#fff;}
/* Platz rechts, damit der Nach-oben-Button die Footer-Links nicht verdeckt */
.footer-bottom{padding-right:calc(3rem + var(--space-4));}

/* NACH-OBEN-BUTTON (sichtbar erst nach dem Scrollen, siehe nav.js) */
.to-top{position:fixed;right:var(--space-6);bottom:var(--space-6);z-index:40;width:3rem;height:3rem;padding:0;justify-content:center;background:color-mix(in oklab,var(--color-bg) 75%,transparent);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transform:translateY(var(--space-2));}
.to-top.is-visible{opacity:1;visibility:visible;transform:none;}
.to-top:hover{color:#fff;border-color:#fff;}

/* RECHTSTEXTE (Impressum, Datenschutz) */
.legal{color:var(--color-text-muted);max-width:70ch;}
.legal h2{font-size:var(--text-lg);color:var(--color-text);margin-top:var(--space-10);margin-bottom:var(--space-3);}
.legal h3{font-size:var(--text-base);font-family:var(--font-body);font-weight:500;color:var(--color-text);margin-top:var(--space-6);margin-bottom:var(--space-2);}
.legal > *:first-child{margin-top:0;}
.legal p{font-size:var(--text-sm);margin-bottom:var(--space-4);}
.legal ul,.legal ol{font-size:var(--text-sm);margin:0 0 var(--space-4) var(--space-6);}
.legal ul{list-style:disc;}
.legal ol{list-style:decimal;}
.legal li{margin-bottom:var(--space-1);}
.legal a{color:var(--color-primary);text-decoration:underline;text-underline-offset:.2em;overflow-wrap:anywhere;}
.legal a:hover{color:var(--color-accent);}
.legal strong{color:var(--color-text);}

@media(max-width:1200px){
  .feature-grid{grid-template-columns:repeat(2,1fr);}
  .feature-card.featured{grid-column:span 2;}
}
@media(max-width:768px){
  .nav-wrap{--header-logo-h:2.5rem;grid-template-rows:auto;}
  .nav-wrap nav,.nav-right .btn{display:none;}
  .logo,.nav-right{grid-row:1;}
  .menu-toggle{display:flex;}
  .mission-grid{grid-template-columns:1fr;}
  .mission-img{order:-1;}
  .news-grid{grid-template-columns:1fr;}
  .beitrag-grid{grid-template-columns:1fr;}
  .welcome-band .container{grid-template-columns:1fr;}
  .partner-list{gap:var(--space-8);}
}
@media(max-width:560px){
  .feature-grid{grid-template-columns:1fr;}
  .feature-card.featured{grid-column:span 1;}
  .stat-row{flex-wrap:wrap;gap:var(--space-6);}
  .hero-actions{flex-direction:column;}
  .footer-grid{grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}}

/* FORMS */
fieldset {border:none; }
legend {margin-top: 1.4rem; margin-bottom: 1rem;}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);}
.form-row-plz{display:grid;grid-template-columns:120px 1fr;gap:var(--space-5);}
.form-group{display:flex;flex-direction:column;gap:var(--space-1); margin-bottom: 1.5rem; min-width:0;}
.form-group label{font-size:var(--text-sm); color:var(--color-text-muted);}
.form-group input,.form-group select,.form-group textarea{
  width:100%;
  min-width:0;
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--color-formelement-border);
  border-radius:var(--radius-md);
  background:var(--color-surface-2);
  color:var(--color-text);
  font-size:var(--text-sm);
  font-family:var(--font-body);
  transition:border-color .18s,box-shadow .18s;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--color-primary) 15%,transparent);
  outline:none;
}
.form-group textarea{resize:vertical;min-height:120px;}
.form-consent{display:flex;gap:var(--space-3);align-items:flex-start;}
.form-consent input{flex-shrink:0;}
.form-consent label{font-size:var(--text-sm);color:var(--color-text-muted);cursor:pointer;font-weight:400; }
input[type="checkbox"]{
  appearance:none;
  display:inline-grid;
  place-content:center;
  width:1.5rem;
  height:1.5rem;
  margin:0;
  padding:0;
  background:var(--color-formelement-bg);
  border:2px solid var(--color-primary);
  border-radius:var(--radius-md);
  cursor:pointer;
}
input[type="checkbox"]::before{
  content:"";
  width:.875rem;
  height:.875rem;
  background:var(--color-bg);
  border-radius:calc(var(--radius-md) - 5px);
  transform:scale(0);
  transition:transform .12s;
}
input[type="checkbox"]:checked::before{transform:scale(1);}
input[type="checkbox"]:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;}

.form-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-success{margin-top:var(--space-5);background:color-mix(in oklab,#437a22 15%,var(--color-surface));border:1px solid #437a22;border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);color:#a9d68c;}
.form-error{margin-top:var(--space-5);background:color-mix(in oklab,#a5352c 15%,var(--color-surface));border:1px solid #a5352c;border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);color:#f0a49b;}
.form-success,.form-error{scroll-margin-top:60px;}
.kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:start;}

@media(max-width:640px){
  .form-row-2,.form-row-plz,.kontakt-grid{grid-template-columns:1fr!important;}
}