/* Neuordnung (inc/ordnung.php). Nur neue Bausteine; Farben, Schriften und Bauchbinden aus younost.css. */

/* Kopf: Fragefeld (großer Bildschirm) und Menüknopf (Handy) */
header nav a,header .live,header .marke{white-space:nowrap}
.knopf svg{vertical-align:-3px;margin-right:6px}
.kopf-frage{flex:0 1 230px;min-width:150px;display:flex;align-items:center;gap:6px;background:#030c20;border:2px solid var(--blau-hell);border-radius:999px;padding:4px 4px 4px 14px;margin:0 14px}
.kopf-frage input{flex:1;min-width:0;background:none;border:0;color:var(--text);font:15px var(--schrift);outline:none}
.kopf-frage input::placeholder{color:var(--text-2)}
.kopf-frage button{background:var(--licht);color:var(--nacht);border:0;border-radius:999px;padding:7px 12px;font:700 14px var(--schrift);cursor:pointer}
.menue-knopf{display:none;background:none;border:2px solid var(--licht);color:var(--licht);border-radius:8px;padding:6px 10px;font:700 13px var(--schrift);letter-spacing:.05em;white-space:nowrap;cursor:pointer;margin-left:auto}
@media(max-width:1300px){.kopf-frage{display:none}}

/* Handy-Menü: eigene Ebene außerhalb des Kopfes (der Kopf hat backdrop-filter und schneidet feste Ebenen ab) */
.handy-menue{display:none;flex-direction:column;position:fixed;left:0;right:0;top:72px;bottom:0;background:var(--nacht);padding:18px 16px 90px;gap:10px;z-index:70;overflow:auto}
.handy-menue a{display:block;background:var(--verlauf);box-shadow:0 -2px 0 var(--licht);padding:12px 16px;font-size:22px;text-transform:uppercase;letter-spacing:.03em;color:#fff;text-decoration:none}
body.menue-offen .handy-menue{display:flex}

/* Untere Leiste am Handy */
.unterleiste{display:none}
@media(max-width:900px){
  .menue-knopf{display:inline-block}
  body.mit-leiste{padding-bottom:64px}
  .unterleiste{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--blau-dunkel);border-top:2px solid var(--licht);padding-bottom:env(safe-area-inset-bottom)}
  .unterleiste a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 7px;font-size:12px;color:var(--licht);text-decoration:none}
}

/* Bot: Beispielfragen */
.beispiele{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.beispiele button{border:1px solid var(--blau-hell);background:rgba(6,75,164,.25);border-radius:999px;padding:6px 12px;font:14px var(--schrift);color:var(--licht);cursor:pointer}
.beispiele button:hover{background:var(--blau-hell)}

/* Themenleiste */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;scroll-margin-top:90px}
.filter a{border:1px solid var(--text-2);border-radius:999px;padding:6px 12px;font-size:14px;color:var(--text);text-decoration:none}
.filter a.an,.filter a:hover{background:var(--licht);color:var(--nacht);border-color:var(--licht);font-weight:700}

/* Abspieler */
.player{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;background:#030c20;border:1px solid var(--blau-hell);border-radius:10px;padding:12px 16px;margin:16px 0 4px}
.player b{font-size:15px}
.player span{font-size:13px;color:var(--text-2)}
.player audio{width:100%;height:36px}

/* Hören und lesen */
.hoeren{background:#03091a;scroll-margin-top:80px}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:900px){.zwei{grid-template-columns:1fr}}
.plaketten{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0}
.pl{display:inline-flex;align-items:center;height:46px;text-decoration:none}
.pl img{height:46px;width:auto;display:block}
.pl-text{display:flex;flex-direction:column;justify-content:center;height:46px;box-sizing:border-box;padding:0 14px;background:#000;color:#fff;border:1px solid #a6a6a6;border-radius:9px;font-size:11px;line-height:1.15}
.pl-text b{font-size:15px}
.pl-rss{flex-direction:row;align-items:center;gap:8px}
.pl-rss span{display:flex;flex-direction:column}
#frag,#ueber,#dran,#neu{scroll-margin-top:80px}