/* Gemeinsam-Los – Modern Editorial Design
   Warm, hochwertig, klar und bewusst ohne typische KI-/Template-Optik.
   Farbwelt: tiefes Navy, warmes Off-White/Sand, Coral und dezentes Gold. */

:root{
  --blue-950:#10283f;
  --blue-900:#15324f;
  --blue-800:#1b4569;
  --blue-700:#285f88;
  --blue-500:#5b86a6;
  --blue-100:#edf2f5;
  --coral:#d96b5b;
  --coral-dark:#b95549;
  --coral-soft:#f9ece8;
  --purple:#75658f;
  --gold:#c99b45;
  --gold-soft:#f5ecd8;
  --sand:#f2ece2;
  --sand-2:#f7f3ec;
  --cream:#fffdf9;
  --soft:#f6f2eb;
  --text:#203347;
  --muted:#6e7b86;
  --line:#dedbd4;
  --line-dark:#cfcac1;
  --white:#fff;
  --shadow:0 18px 48px rgba(19,40,63,.09);
  --shadow-sm:0 8px 24px rgba(19,40,63,.055);
  --radius:20px;
  --radius-sm:14px;
}

html{background:var(--cream)}
body{
  background:var(--cream);
  color:var(--text);
  font-family:"Segoe UI",Arial,sans-serif;
  letter-spacing:-.006em;
}
::selection{background:#ead5cf;color:#10283f}
.container{width:min(calc(100% - 52px),1380px)}

/* Header */
.site-header{
  background:rgba(255,253,249,.96);
  border-bottom:1px solid rgba(16,40,63,.09);
  backdrop-filter:blur(18px) saturate(120%);
  box-shadow:0 1px 0 rgba(255,255,255,.7);
}
.header-inner{min-height:82px;gap:30px}
.brand img{width:226px;max-height:50px}
.main-nav{gap:21px}
.main-nav a{
  padding:30px 0 26px;
  border-bottom:2px solid transparent;
  color:#485b6d;
  font-size:.89rem;
  font-weight:680;
  letter-spacing:.002em;
}
.main-nav a:hover,.main-nav a.active{
  color:var(--blue-950);
  border-bottom-color:var(--coral);
}
.header-actions{gap:8px}
.nav-toggle{
  border:1px solid #d6d1c8;
  background:#fff;
  color:var(--blue-950);
  border-radius:10px;
}

/* Buttons */
.btn{
  min-height:44px;
  border-radius:10px;
  padding:12px 18px;
  font-weight:760;
  letter-spacing:.002em;
  transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,border-color .16s ease,color .16s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  color:#fff;
  background:var(--coral);
  box-shadow:0 9px 22px rgba(185,85,73,.18);
}
.btn-primary:hover{background:#cb6052;box-shadow:0 11px 26px rgba(185,85,73,.22)}
.btn-ghost{
  color:var(--blue-900);
  background:#fffdf9;
  border:1px solid #c9c7c1;
  box-shadow:none;
}
.btn-ghost:hover{background:#f5f1ea;border-color:#aea99f}
.btn-danger{border-radius:10px}
.text-link{color:var(--blue-800);font-weight:750;text-decoration-thickness:1px;text-underline-offset:4px}
.mini-action{
  border-radius:8px;
  background:#edf2f5;
  color:#244d6e;
  padding:7px 10px;
}

/* Startseite: neue visuelle Bühne */
.hero{
  position:relative;
  overflow:hidden;
  background:var(--blue-950);
  border-bottom:0;
}
.hero:before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  left:-260px;
  top:-250px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(201,155,69,.13),rgba(201,155,69,0) 70%);
  pointer-events:none;
}
.hero-grid{
  grid-template-columns:.82fr 1.18fr;
  min-height:610px;
  gap:54px;
}
.hero-copy{padding:88px 0;position:relative;z-index:2}
.eyebrow{
  margin-bottom:13px;
  color:#8a7150;
  font-size:.69rem;
  font-weight:820;
  letter-spacing:.17em;
}
.hero .eyebrow{color:#e1bc75}
.hero h1,.page-hero h1,.auth-copy h1{
  color:var(--blue-950);
  font-size:clamp(2.8rem,5vw,5rem);
  line-height:1.01;
  letter-spacing:-.047em;
  font-weight:760;
}
.hero h1{color:#fffdf8;max-width:690px}
.hero h1 span{color:#ef9b8f}
.hero-lead,.page-hero p,.auth-copy>p{
  color:#63717d;
  font-size:1.07rem;
  line-height:1.72;
}
.hero-lead{color:#ccd5dc;max-width:650px}
.hero-actions{margin-top:31px;gap:10px}
.hero .btn-ghost{
  color:#f7f0e6;
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.04);
}
.hero .btn-ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.55)}
.trust-row{
  gap:18px 28px;
  margin-top:31px;
  color:#afbdc8;
  font-size:.81rem;
  font-weight:650;
}
.hero-visual{
  min-height:530px;
  height:530px;
  margin:40px 0;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 28px 70px rgba(2,15,26,.28);
}
.hero-visual img{min-height:530px}
.hero-visual:after{background:linear-gradient(90deg,rgba(16,40,63,.08),transparent 36%)}
.hero-badge{
  right:20px;
  bottom:20px;
  border-radius:12px;
  background:rgba(255,253,249,.95);
  color:var(--blue-950);
  border:1px solid rgba(255,255,255,.7);
  transform:none;
  box-shadow:0 10px 28px rgba(6,25,42,.16);
}
.hero-badge strong{color:var(--coral-dark)}

/* Innenseiten */
.page-hero{
  position:relative;
  overflow:hidden;
  padding:68px 0 54px;
  background:var(--blue-950);
  border-bottom:0;
}
.page-hero:after{
  content:"";
  position:absolute;
  width:430px;
  height:430px;
  right:-130px;
  top:-260px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(217,107,91,.16),rgba(217,107,91,0) 70%);
  pointer-events:none;
}
.page-hero .eyebrow{color:#e1bc75}
.page-hero h1{color:#fffdf8;font-size:clamp(2.45rem,4.6vw,4.45rem);max-width:980px}
.page-hero p{color:#c9d2d9;max-width:850px}
.page-hero .btn-ghost{color:#f8f1e7;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.30)}
.page-hero .btn-ghost:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.46)}
.partner-hero{background:var(--blue-950)}
.section{padding:78px 0}
.section-soft{background:var(--sand-2)}
.section-heading{margin-bottom:35px}
.section-heading h2,.safety-layout h2,.info-panel h2{
  color:var(--blue-950);
  font-weight:760;
  letter-spacing:-.035em;
}
.section-heading p,.section-intro{color:#6d7881}

/* Karten */
.step-card,.event-card,.profile-card,.contact-card,.form-card,.feature-card,.private-message-panel,.private-message-card,.price-card,.toolbar-card,.info-panel,.editor-card,.event-detail-card,.profile-preview-card,.search-card,.premium-gate{
  border-color:var(--line)!important;
  box-shadow:var(--shadow-sm)!important;
}
.step-card,.event-card,.profile-card,.feature-card,.toolbar-card,.info-panel,.editor-card,.event-detail-card,.profile-preview-card,.search-card{
  background:#fff!important;
}
.step-card,.event-card,.profile-card,.feature-card{border-radius:15px}
.event-card:hover,.profile-card:hover{
  transform:translateY(-2px);
  border-color:#cbc7bf!important;
  box-shadow:0 14px 34px rgba(19,40,63,.09)!important;
}

/* So funktioniert's */
.steps-grid{gap:15px}
.step-card{min-height:158px;padding:24px 23px 23px 73px}
.step-no{
  left:19px;
  top:21px;
  width:34px;
  height:34px;
  border-radius:9px;
  background:#345f80;
  font-size:.81rem;
}
.step-no.coral{background:var(--coral)}
.step-no.purple-bg{background:#75658f}
.step-icon{left:22px;bottom:22px;font-size:1rem;opacity:.68}
.step-card h3{font-weight:760;color:var(--blue-950)}
.step-card p{color:#707d88}

/* Events */
.events-grid{gap:20px}
.event-card{overflow:hidden}
.event-card>img,.image-wrap img{height:205px}
.event-category-visual{
  height:205px;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:18px;
  background:linear-gradient(135deg,#e9eff2 0%,#f5e9e5 100%);
  border-bottom:1px solid rgba(16,40,63,.06);
}
.event-category-visual>span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:9px 15px;
  border:1px solid #c8d1d7;
  border-radius:9px;
  background:rgba(255,255,255,.88);
  color:#244d6e;
  font-weight:760;
  text-align:center;
}
.event-category-visual.has-event-image{padding:0;background:#ecebe7}
.event-category-visual.has-event-image img{width:100%;height:100%;object-fit:cover;object-position:center}
.event-content{padding:20px 20px 19px}
.event-type{
  border-radius:6px;
  background:#edf1f3;
  color:#5c6e7c;
  font-size:.66rem;
  letter-spacing:.09em;
  padding:5px 8px;
}
.event-card h3{margin:12px 0 10px;color:var(--blue-950);font-size:1.06rem;font-weight:760}
.event-meta{color:#5f707f}
.event-footer{color:#4f6272;border-top:1px solid #eeeae3;padding-top:13px}
.partner-section{background:#f8f4ed}
.partner-card{border-color:#ded8e3!important}
.partner-badge{border-radius:7px;background:#75658f;box-shadow:none}
.ticket-link{border-radius:9px;background:#f8ebe7;color:#a84c42}

/* Aktivitäten-Toolbar */
.toolbar-card{
  border-radius:14px!important;
  background:#f7f4ee!important;
  padding:20px 22px!important;
}
.event-category-filter select{border-color:#ccc7bd!important;background:#fff!important}
.premium-filter-note{border-color:#ddd5c9!important;background:#fffaf1!important}

/* Preise */
.pricing-section{background:var(--cream)}
.pricing-grid{gap:20px;max-width:1120px}
.price-card{border-radius:18px!important;padding:34px!important;box-shadow:0 12px 34px rgba(19,40,63,.07)!important}
.free-card{background:#fff!important}
.premium-card{
  background:var(--blue-950)!important;
  border-color:#243f58!important;
  color:#eef3f6;
}
.premium-card .plan-label,.premium-card h3,.premium-card .price-options strong{color:#fffdf8!important}
.premium-card>p,.premium-card .payment-note,.premium-card .price-options span{color:#c8d2da!important}
.premium-card .check-list li{color:#edf2f5}
.premium-card .check-list li:before{color:#ef9b8f}
.premium-card .price-options div{border-color:rgba(255,255,255,.14)!important;background:rgba(255,255,255,.06)!important}
.premium-card .btn-primary{background:var(--coral)}
.popular{top:18px;right:18px;border-radius:7px;background:var(--gold);color:#2d2a24;padding:6px 10px}
.plan-label{font-weight:780}
.price-options div{border-radius:10px;background:#fffdf9}
.no-trap{border-radius:12px;background:#f5f1e9;border-color:#ded8ce}
.check-list{gap:10px}
.check-list li:before{color:var(--blue-700)}

/* Profile */
.profile-grid{gap:18px}
.profile-card{padding:20px;border-radius:15px!important}
.member-card-photo,.avatar-placeholder{border-radius:12px!important}
.profile-status{
  border-radius:6px!important;
  background:#edf1f3!important;
  color:#39576d!important;
  padding:4px 7px!important;
}
.demo-profile-badge{border-radius:6px!important}
.public-profile-card,.profile-gallery-card{border-radius:17px!important;box-shadow:0 10px 30px rgba(19,40,63,.07)!important}
.interest-tags span{border-radius:7px!important;background:#f1eee8!important;border-color:#ddd7ce!important;color:#42586a!important}

/* Event Detail / Verwaltung */
.event-detail-card,.editor-card,.profile-preview-card{
  border-radius:16px!important;
  border:1px solid var(--line)!important;
}
.event-detail-card{padding:28px!important}
.editor-card{padding:22px!important}
.event-detail-head{border-bottom:1px solid #ece7df;padding-bottom:14px}
.event-detail-actions{border-top:1px solid #ece7df;padding-top:18px}
.participant-row{border-color:#e5e0d8!important;background:#fffdf9!important}
.participant-mini-action{border-radius:7px!important}
.event-invite-dropdown{border-color:#d8d2c8!important;border-radius:10px!important;background:#fffdf9!important}
.event-invite-dropdown summary{color:var(--blue-900)!important}
.event-invite-option:hover{background:#f6f2eb!important}
.event-invite-option.disabled{background:#f0ede7!important}

/* Formulare / Editor */
.contact-card,.form-card,.private-message-panel,.private-message-card,.search-card,.premium-gate{
  border-radius:16px!important;
  box-shadow:0 9px 28px rgba(19,40,63,.065)!important;
}
.form-card input,.form-card textarea,.form-card select,
.profile-form input,.profile-form textarea,.profile-form select,
.search-card select,.private-message-compose textarea{
  border-radius:9px!important;
  background:#fff!important;
  border-color:#cec9c0!important;
  color:var(--text)!important;
  box-shadow:inset 0 1px 1px rgba(20,35,50,.02)!important;
}
.form-card input:focus,.form-card textarea:focus,.form-card select:focus,
.profile-form input:focus,.profile-form textarea:focus,.profile-form select:focus,
.search-card select:focus,.private-message-compose textarea:focus{
  outline:none!important;
  border-color:#7894aa!important;
  box-shadow:0 0 0 3px rgba(40,95,136,.10)!important;
}
.auth-section{background:var(--sand-2)}
.auth-card{background:#fff!important}
.auth-copy .eyebrow{color:#8a7150}
.profile-field small,.form-hint,.counter-hint{color:#7a858d}
.interest-choice{border-radius:9px!important;border-color:#ddd8cf!important;background:#fffdf9!important}
.photo-upload-box{border-radius:13px!important;border-color:#d6d0c7!important;background:#faf7f1!important}
.notification-choice{border-radius:11px!important;background:#faf7f1!important;border-color:#ded8ce!important}

/* Hinweise */
.external-note,.toolbar-card,.info-panel{border-radius:13px;background:#faf8f3}
.notice{border-radius:10px!important}
.notice-success{border-color:#c7d6d0!important}
.notice-error{border-color:#e4c1ba!important}

/* Nachrichten */
.private-message-panel,.private-message-card{border-radius:16px!important}
.private-message-list-item{border-radius:10px!important;background:#fffdf9!important}
.private-message-list-item.unread{background:#edf2f5!important;border-color:#bdccd6!important}
.private-message-new{border-radius:6px!important;background:#345f80!important}

/* Sicherheit */
.feature-grid{gap:15px}
.feature-card{border-radius:14px;padding:20px 20px 20px 67px}
.feature-icon{border-radius:9px;background:#edf2f5;color:#315d7f}

/* Footer */
.site-footer{
  background:#0d2438;
  color:#e7edf1;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:42px;
}
.footer-brand{color:#fff!important}
.footer-brand span{color:#ef9b8f!important}
.footer-brand-wrap p{color:#aebbc5}
.footer-links a{opacity:.82}
.footer-links a:hover{opacity:1;color:#fff}
.footer-bottom{border-top-color:rgba(255,255,255,.10)!important;color:#9eacb7!important}

/* Kleine Details */
.postal-map-dialog{border-radius:18px}
.postal-map-close{box-shadow:none}
.postal-map-trigger small{border-radius:6px}
.germany-map-badge{border-radius:7px}

@media(max-width:1180px){
  .header-inner{gap:20px}
  .main-nav{gap:16px}
  .main-nav a{font-size:.85rem}
  .hero-grid{gap:34px}
  .hero-copy{padding:72px 0}
  .hero-visual{height:500px;min-height:500px;margin:32px 0}
  .hero-visual img{min-height:500px}
}

@media(max-width:1000px){
  .container{width:min(calc(100% - 38px),1380px)}
  .hero-grid{grid-template-columns:1fr 1fr}
  .hero h1{font-size:clamp(2.65rem,5.4vw,4.3rem)}
}

@media(max-width:900px){
  .site-header{background:#fffdf9}
  .main-nav{background:#fffdf9}
  .main-nav a{padding:13px 0;border-bottom:1px solid #e6e1d9}
  .hero-grid{display:block;min-height:0}
  .hero-copy{padding:58px 0 34px}
  .hero-visual{height:390px;min-height:390px;margin:0 0 36px;border-radius:18px}
  .hero-visual img{min-height:390px}
  .page-hero{padding:56px 0 44px}
}

@media(max-width:620px){
  .container{width:min(calc(100% - 28px),1380px)}
  .section{padding:56px 0}
  .page-hero{padding:48px 0 38px}
  .hero h1,.page-hero h1,.auth-copy h1{letter-spacing:-.038em}
  .hero-visual{height:310px;min-height:310px}
  .hero-visual img{min-height:310px}
  .btn{border-radius:9px}
  .price-card,.form-card,.contact-card{padding:23px!important}
  .event-detail-card,.editor-card{padding:19px!important}
  .event-card>img,.image-wrap img,.event-category-visual{height:185px}
}

/* Helleres Gesamtbild */
.hero{
  background:linear-gradient(118deg,#fff8ef 0%,#f7fafb 58%,#ffffff 100%);
  border-bottom:1px solid #e9e4dc;
}
.hero:before{
  left:-210px;
  top:-230px;
  background:radial-gradient(circle,rgba(201,155,69,.16),rgba(201,155,69,0) 70%);
}
.hero .eyebrow{color:#9b7436}
.hero h1{color:var(--blue-950)}
.hero h1 span{color:var(--coral-dark)}
.hero-lead{color:#5f707d}
.hero .btn-ghost{
  color:var(--blue-900);
  border-color:#c9c7c1;
  background:#fff;
}
.hero .btn-ghost:hover{background:#f5f1ea;border-color:#aea99f}
.trust-row{color:#687987}
.hero-visual{
  border-color:#e3ded6;
  box-shadow:0 20px 48px rgba(19,40,63,.12);
}

.page-hero{
  background:linear-gradient(118deg,#fff8ef 0%,#f4f8fa 100%);
  border-bottom:1px solid #e7e2da;
}
.page-hero:after{background:radial-gradient(circle,rgba(217,107,91,.10),rgba(217,107,91,0) 70%)}
.page-hero .eyebrow{color:#98723c}
.page-hero h1{color:var(--blue-950)}
.page-hero p{color:#657582}
.page-hero .btn-ghost{
  color:var(--blue-900);
  background:#fff;
  border-color:#c9c7c1;
}
.page-hero .btn-ghost:hover{background:#f5f1ea;border-color:#aea99f}
.partner-hero{background:linear-gradient(118deg,#fff8ef 0%,#f4f8fa 100%)}
.section-soft{background:#faf7f2}
.auth-section{background:linear-gradient(118deg,#fff9f2,#f7fafb)}
.toolbar-card{background:#fbf9f5!important}
.site-footer{background:#17354d}

/* Gratis vs. Premium: Premium klar als bessere Wahl */
.pricing-grid{
  grid-template-columns:.88fr 1.12fr;
  align-items:stretch;
  gap:24px;
}
.price-card{height:100%}
.price-card h3{margin-bottom:8px}
.plan-summary{margin:0 0 20px!important;line-height:1.6}
.free-card{
  border:1px solid #dedbd4!important;
  background:#fff!important;
}
.free-card .plan-label{color:#667785}
.free-card h3{font-size:1.45rem}
.free-card .check-list{font-size:.92rem;gap:12px}
.free-card .check-list li:before{color:#6b8498}
.free-card .check-list strong{color:#314b61}
.premium-card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,#fff8f5 0%,#ffffff 58%,#fffaf2 100%)!important;
  border:2px solid #e4a298!important;
  color:var(--text)!important;
  box-shadow:0 18px 44px rgba(185,85,73,.15)!important;
  transform:translateY(-7px);
}
.premium-card:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:5px;
  background:linear-gradient(90deg,var(--coral),#e6b56a);
}
.premium-card .plan-label{color:var(--coral-dark)!important}
.premium-card h3{color:var(--blue-950)!important;font-size:1.7rem}
.premium-card>p,.premium-card .payment-note,.premium-card .price-options span{color:#687783!important}
.premium-card .check-list li{color:var(--text)!important}
.premium-card .check-list li:before{color:var(--coral)!important}
.premium-card .check-list strong{color:var(--blue-950)}
.premium-card .price-options div{
  border-color:#edd6d0!important;
  background:#fff!important;
}
.premium-card .price-options strong{color:var(--blue-950)!important}
.premium-card .btn-primary{background:var(--coral)}
.popular{
  top:18px;
  right:18px;
  border-radius:7px;
  background:var(--coral);
  color:#fff;
  box-shadow:0 6px 16px rgba(185,85,73,.18);
}
.premium-includes{
  display:flex;
  align-items:center;
  gap:8px;
  margin:18px 0 4px;
  padding:12px 14px;
  border:1px solid #efd1ca;
  border-radius:10px;
  background:#fff;
  color:#9f4e44;
  font-weight:800;
  font-size:.91rem;
}
.premium-list{margin-top:18px}
.price-options{margin-top:24px}

@media(max-width:900px){
  .pricing-grid{grid-template-columns:1fr}
  .premium-card{transform:none}
}