


.status-pille{display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:var(--r-pille);
  border:1px solid var(--line-2); background:rgba(201,164,92,.08); color:var(--gold-hell);
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600}
.status-pille i{width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px rgba(201,164,92,.18)}
.status-pille.offen i{background:var(--ok); box-shadow:0 0 0 3px rgba(127,190,149,.2)}
.status-pille.warte i{background:var(--fg-2); box-shadow:0 0 0 3px rgba(255,255,255,.08)}


.wege{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; list-style:none; margin:0; padding:0}
@media (max-width:980px){.wege{grid-template-columns:1fr; max-width:640px}}
.weg-karte{display:flex; flex-direction:column; background:var(--tafel-2); border:1px solid var(--line-n);
  border-radius:var(--r-gross); overflow:hidden; text-decoration:none; color:inherit; min-height:100%}
.weg-karte .bild{position:relative; aspect-ratio:4/3; overflow:hidden; background:#0b0b0a}
.weg-karte .bild img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease, cubic-bezier(.2,.7,.2,1))}
.weg-karte .bild::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,8,7,0) 45%, rgba(8,8,7,.85) 100%)}
.weg-karte .bild .status-pille{position:absolute; left:16px; top:16px; z-index:2; backdrop-filter:blur(8px); background:rgba(8,8,7,.55)}
.weg-karte .text{display:flex; flex-direction:column; gap:10px; padding:22px 24px 26px; flex:1}
.weg-karte h3{font-size:clamp(20px, 2vw, 24px); margin:0}
.weg-karte p{color:var(--fg-2); font-size:15px; line-height:1.65; margin:0}
.weg-karte .textlink{margin-top:auto; padding-top:10px}
@media (hover:hover) and (pointer:fine){
  .weg-karte:hover .bild img{transform:scale(1.04)}
  .weg-karte:hover{border-color:var(--line-2)}
}
.weg-karte:focus-visible{outline:2px solid var(--gold); outline-offset:4px}
.weg-partner{margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; padding:20px 24px;
  border:1px solid var(--line-n); border-radius:var(--r); background:rgba(255,255,255,.02)}
.weg-partner p{margin:0; color:var(--fg-2); font-size:15px; flex:1 1 320px}
.weg-partner p b{color:var(--fg)}


.vorteile{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; list-style:none; margin:0; padding:0}
@media (max-width:760px){.vorteile{grid-template-columns:1fr}}
.vorteil{display:flex; gap:16px; padding:22px 22px 24px; background:var(--tafel-2); border:1px solid var(--line-n); border-radius:var(--r)}
.vorteil .zeichen{flex:0 0 40px; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:rgba(201,164,92,.1); border:1px solid var(--line); color:var(--gold)}
.vorteil .zeichen svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.vorteil h3{font-size:17px; margin:0 0 6px}
.vorteil p{margin:0; color:var(--fg-2); font-size:15px; line-height:1.65}

.saeulen{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; list-style:none; margin:0; padding:0}
@media (max-width:860px){.saeulen{grid-template-columns:repeat(2, minmax(0,1fr))}}
.saeule{position:relative; aspect-ratio:4/5; border-radius:var(--r); overflow:hidden; border:1px solid var(--line-n); background:#0b0b0a}
.saeule img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85}
.saeule::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,8,7,.05) 30%, rgba(8,8,7,.9) 100%)}
.saeule span{position:absolute; left:18px; right:18px; bottom:18px; z-index:2}
.saeule b{display:block; font-size:19px; color:var(--fg)}
.saeule small{display:block; color:var(--fg-2); font-size:13px; margin-top:4px}

.punkte{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.punkte li{display:flex; gap:12px; align-items:flex-start; color:var(--fg-2); font-size:16px; line-height:1.6}
.punkte li::before{content:""; flex:0 0 8px; width:8px; height:8px; margin-top:9px; border-radius:50%; background:var(--gold)}
.punkte li b{color:var(--fg)}

.zwei{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px, 4vw, 56px); align-items:center}
@media (max-width:860px){.zwei{grid-template-columns:1fr}}
.zwei .bild{border-radius:var(--r-gross); overflow:hidden; border:1px solid var(--line-n); aspect-ratio:4/3}
.zwei .bild img{width:100%; height:100%; object-fit:cover}


.hinweis{display:flex; gap:16px; padding:22px 24px; border-radius:var(--r); border:1px solid var(--line);
  background:linear-gradient(135deg, rgba(201,164,92,.1), rgba(201,164,92,.03))}
.hinweis .zeichen{flex:0 0 36px; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:var(--gold); border:1px solid var(--line-2)}
.hinweis .zeichen svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.hinweis p{margin:0; color:var(--fg-2); line-height:1.65}
.hinweis p b{color:var(--fg)}


.ambassadors{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; list-style:none; margin:0; padding:0}
@media (max-width:980px){.ambassadors{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:480px){.ambassadors{grid-template-columns:1fr}}
.ambassador{background:var(--tafel-2); border:1px solid var(--line-n); border-radius:var(--r-gross); overflow:hidden; display:flex; flex-direction:column}
.ambassador .portrait{position:relative; aspect-ratio:4/5; background:#0f0e0c; display:grid; place-items:center; overflow:hidden}
.ambassador .portrait img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ambassador .portrait .monogramm{font-size:clamp(40px, 6vw, 64px); font-weight:600; letter-spacing:.04em; color:var(--gold-tief);
  font-family:inherit; line-height:1; position:relative; z-index:1}
.ambassador .portrait::before{content:""; position:absolute; inset:-40%; background:radial-gradient(circle at 50% 35%, rgba(201,164,92,.22), transparent 55%)}
.ambassador .portrait .siegel{position:absolute; left:14px; top:14px; z-index:2}
.ambassador .text{padding:18px 20px 22px}
.ambassador h3{font-size:18px; margin:0 0 4px}
.ambassador .saeule-tag{display:inline-block; color:var(--gold); font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; margin-bottom:10px}
.ambassador p{margin:0; color:var(--fg-2); font-size:14.5px; line-height:1.6}


.siegel{display:inline-flex; align-items:center; gap:8px; padding:6px 11px 6px 8px; border-radius:var(--r-pille);
  background:rgba(8,8,7,.6); border:1px solid var(--line-2); color:var(--gold-hell); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:600; backdrop-filter:blur(6px)}
.siegel svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}


select.i{appearance:none; -webkit-appearance:none; padding-right:44px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A45C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 16px center; background-size:18px}
select.i option{background:#141310; color:var(--fg)}
select.i:invalid{color:var(--fg-2)}
.segment.fehlt button{border-color:var(--stop)}
.form .feldgruppe + .feldgruppe{margin-top:18px}
.form .reihe + .reihe{margin-top:16px}
.form .einzel{margin-top:16px}
.absenden .neben{max-width:26ch}


.zahlen{display:flex; flex-wrap:wrap; gap:14px 36px; margin-top:26px}
.zahlen div{display:flex; flex-direction:column; gap:4px}
.zahlen b{font-size:clamp(26px, 3vw, 36px); color:var(--gold-hell); font-weight:600; line-height:1}
.zahlen span{color:var(--fg-2); font-size:14px}
