:root{
  --gruen-oben:#133426; --gruen-unten:#08140f; --gold:#d6ab45;
  --gold-hell:#e8c877; --creme:#ece7d9; --creme-matt:#b0aa9b;
  --flaeche:rgba(255,255,255,.045); --rand:rgba(214,171,69,.26);
  --breite:52rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; min-height:100vh;
  background:linear-gradient(175deg,var(--gruen-oben),var(--gruen-unten) 60%) fixed;
  color:var(--creme); line-height:1.7;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.wrap{width:100%; max-width:var(--breite); margin:0 auto; padding:1.5rem 1.25rem 4rem}
a{color:var(--gold-hell)}
a:hover{color:var(--gold)}

/* Kopf */
.kopf{border-bottom:1px solid var(--rand); background:rgba(0,0,0,.22)}
.kopf .wrap{display:flex; align-items:center; gap:.9rem; padding:.9rem 1.25rem; flex-wrap:wrap}
.kopf img{width:2.5rem; height:2.5rem; border-radius:24%; border:1px solid var(--rand)}
.kopf .marke{font-weight:700; color:var(--gold); text-decoration:none; font-size:1.15rem; margin-right:auto}
.kopf nav{display:flex; gap:1.1rem; flex-wrap:wrap}
.kopf nav a{text-decoration:none; font-size:.95rem; color:var(--creme)}
.kopf nav a:hover,.kopf nav a[aria-current]{color:var(--gold)}

/* Brotkrumen */
.krumen{font-size:.85rem; color:var(--creme-matt); margin:0 0 1.25rem}
.krumen a{color:var(--creme-matt)}

h1{font-size:clamp(1.6rem,4.5vw,2.3rem); line-height:1.25; color:var(--gold); margin:.25rem 0 .6rem}
h2{font-size:1.25rem; color:var(--gold-hell); margin:2rem 0 .75rem}
.intro{color:var(--creme-matt); margin:0 0 2rem; font-size:1.05rem}

/* Karten / Abschnitte */
.karte{background:var(--flaeche); border:1px solid var(--rand); border-radius:12px;
       padding:1.15rem 1.35rem; margin-bottom:1rem}

/* A–Z Register */
.register{display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 2rem; padding:0; list-style:none}
.register a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.6rem; padding:.5rem .6rem; border-radius:8px; text-decoration:none;
  background:rgba(0,0,0,.25); border:1px solid var(--rand); font-weight:700;
}
.register a small{font-weight:400; color:var(--creme-matt); margin-left:.35rem; font-size:.75em}
.register .leer{opacity:.3; pointer-events:none}

/* Begriffsliste */
.begriff{padding:1.1rem 0; border-bottom:1px solid rgba(255,255,255,.07)}
.begriff:last-child{border-bottom:0}
.begriff h3{margin:0 0 .3rem; font-size:1.15rem; color:var(--gold-hell)}
.begriff h3 a{text-decoration:none; color:inherit}
.begriff p{margin:0}
.begriff .quer{margin-top:.5rem; font-size:.88rem; color:var(--creme-matt)}
.begriff .quer a{margin-right:.65rem}

/* Signale */
.sig-gruppe{margin-bottom:2rem}
.sig-liste{display:grid; gap:.5rem; padding:0; margin:0; list-style:none;
           grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))}
.sig-liste li{background:rgba(0,0,0,.22); border:1px solid rgba(214,171,69,.14);
              border-radius:9px; padding:.6rem .8rem; font-size:.97rem}
.sig-liste .en{display:block; font-size:.8rem; color:var(--creme-matt)}

/* App-Hinweis */
.app-box{background:rgba(214,171,69,.1); border:1px solid var(--rand);
         border-radius:12px; padding:1.25rem 1.35rem; margin:2.5rem 0 1rem}
.app-box h2{margin-top:0}
.btn-reihe{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.9rem}
.btn{flex:1 1 11rem; text-align:center; text-decoration:none; padding:.8rem 1.1rem;
     border-radius:9px; font-weight:700; background:var(--gold); color:#20180a}
.btn:hover{filter:brightness(1.08); color:#20180a}
.btn.sek{background:transparent; color:var(--gold); border:1px solid var(--rand)}

/* Suche */
.suche{display:flex; gap:.5rem; margin-bottom:2rem; flex-wrap:wrap}
.suche input{flex:1 1 14rem; padding:.75rem .9rem; border-radius:9px;
             border:1px solid var(--rand); background:rgba(0,0,0,.3); color:var(--creme); font-size:1rem}
.suche input::placeholder{color:var(--creme-matt)}
.suche button{padding:.75rem 1.4rem; border-radius:9px; border:0; cursor:pointer;
              background:var(--gold); color:#20180a; font-weight:700; font-size:1rem}

.hinweis{font-size:.92rem; color:var(--creme-matt)}
.treffer-zahl{color:var(--creme-matt); font-size:.9rem; margin:-1rem 0 1.5rem}

fuss{display:block}
.fuss{margin-top:3rem; border-top:1px solid rgba(255,255,255,.08); padding-top:1.25rem;
      font-size:.85rem; color:var(--creme-matt); text-align:center}
.fuss a{color:var(--creme-matt)}