/* Kopf aller Seiten, eine Quelle (Bahn kopf_termin Teil 2, 08.10.2026). Startseite: landing/seite.css und thema.css,
   hier dieselben Werte. Die Zeile .lp-nav-in steht in nav.lp-nav (about, Recht) und in header.kopf (Modellseiten). */
/* Kopf wie die Startseite: Marke links (Signet 56, Wortmarke 34), rechts vier Glasknoepfe 52 hoch, die Unterzeile
   ploppt beim Zeigen auf. Werte aus landing/seite.css und landing/thema.css (body.kopf-hell); die Flaeche der Knoepfe
   steht nur in css/glas.css, auf Weiss ohne glas-invers: Erstes Gespraech deckend dunkel, die anderen Glas */
nav.lp-nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:opacity .3s;
  background:linear-gradient(180deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.34) 55%,rgba(255,255,255,0) 100%)}
/* Weg am Schluss und am Fuss wie auf der Startseite (lp-amfuss, Skript unten): der Schluss traegt die Knoepfe selbst */
body.amfuss nav.lp-nav,body.lp-amfuss nav.lp-nav{opacity:0;pointer-events:none}
.lp-nav-in{max-width:1400px;margin:0 auto;padding:20px 34px 30px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.lp-marke{display:flex;align-items:center;gap:15px;color:var(--tinte,#000000)}
.lp-marke svg{width:56px;height:56px;flex:none}
.lp-wort{display:flex;flex-direction:column;gap:4px;line-height:1;white-space:nowrap}
.lp-wn{font-family:'Playfair Display',serif;font-size:34px;font-weight:500;letter-spacing:.02em}
.lp-wu{font-size:15px;font-weight:500;letter-spacing:.03em;color:#4A4A4A}
.lp-knoepfe{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap;justify-content:center}
.lp-knoepfe .glas{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:1.1;
  white-space:nowrap;box-sizing:border-box;font-weight:600;transition:transform .14s ease}
.lp-knoepfe .glas small{font-size:.64em;font-weight:500;opacity:.78;margin-top:5px}
.lp-knoepfe .glas:not(.sek) small{opacity:.62}
.lp-nav-in .lp-knoepfe .glas{position:relative;font-size:17px;height:52px;padding:0 24px}
.lp-nav-in .lp-knoepfe .glas small{position:absolute;left:50%;top:calc(100% + 7px);transform:translate(-50%,-4px);margin:0;font-size:13px;
  color:var(--tinte,#000000);opacity:0;pointer-events:none;padding:3px 9px;border-radius:999px;border:1px solid transparent;line-height:1.25}
.lp-nav-in .lp-knoepfe .glas:hover small,.lp-nav-in .lp-knoepfe .glas:focus-visible small{opacity:1;transform:translate(-50%,0)}
/* Kontrast im Knopf selbst beim Zeigen, Fokus und Druecken, wie auf der Startseite */
@media (hover:hover){
  body .lp-knoepfe .glas.sek:hover,body .lp-nav-in .lp-knoepfe .glas.sek:hover small{background:#0A0A0A;color:#FFFFFF;border-color:#FFFFFF;box-shadow:none;opacity:1}
  body .lp-knoepfe .glas:not(.sek):hover,body .lp-nav-in .lp-knoepfe .glas:not(.sek):hover small{background:#FFFFFF;color:#0A0A0A;border-color:#0A0A0A;box-shadow:none;opacity:1}
}
body .lp-knoepfe .glas.sek:focus-visible,body .lp-nav-in .lp-knoepfe .glas.sek:focus-visible small,
body .lp-knoepfe .glas.sek:active,body .lp-nav-in .lp-knoepfe .glas.sek:active small{background:#0A0A0A;color:#FFFFFF;border-color:#FFFFFF;box-shadow:none;opacity:1}
body .lp-knoepfe .glas:not(.sek):focus-visible,body .lp-nav-in .lp-knoepfe .glas:not(.sek):focus-visible small,
body .lp-knoepfe .glas:not(.sek):active,body .lp-nav-in .lp-knoepfe .glas:not(.sek):active small{background:#FFFFFF;color:#0A0A0A;border-color:#0A0A0A;box-shadow:none;opacity:1}
@media (max-width:1100px){
  .lp-nav-in{flex-wrap:wrap;padding:14px 20px;gap:12px}
  .lp-marke svg{width:40px;height:40px}
  .lp-wn{font-size:24px} .lp-wu{font-size:11.5px}
  .lp-nav-in .lp-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .lp-nav-in .lp-knoepfe .glas{justify-content:center;padding:0 10px;height:40px;font-size:14px}
  .lp-nav-in .lp-knoepfe .glas small{display:none}
}
/* Handy quer: der Kopf in einer Zeile, sonst bliebe unter ihm kaum Platz fuer die Info */
@media (max-width:1100px) and (max-height:520px){
  .lp-nav-in{flex-wrap:nowrap;padding:8px 20px}
  .lp-marke{gap:10px}
  .lp-marke svg{width:34px;height:34px}
  .lp-wn{font-size:20px} .lp-wu{font-size:11px}
  .lp-nav-in .lp-knoepfe{display:flex;flex-wrap:nowrap;width:auto;gap:6px}
  .lp-nav-in .lp-knoepfe .glas{height:34px;padding:0 12px;font-size:13px}
}
/* Fuss hell wie auf der Startseite (landing/thema.css), Aufbau aus css/fuss.css, eine Quelle fuer alle
   Unterseiten mit footer.footer (vorher inline in about.html) */
body .footer{background:#F4F4F4;color:rgba(0,0,0,.713);border-top:1px solid rgba(0,0,0,.103);position:relative;z-index:2}
body .footer-lockup,body .footer-lockup .nav-wordmark-name{color:#000000}
body .footer-lockup .nav-wordmark-sub{color:rgba(0,0,0,.74)}
body .footer-social-link{color:rgba(0,0,0,.828)}
body .footer-col-title{color:rgba(0,0,0,.483)}
body .footer-links a{color:rgba(0,0,0,.759)}
body .footer-risk p{color:rgba(0,0,0,.437)}
body .footer-divider,body .footer-bottom{border-top:1px solid rgba(0,0,0,.103)}
body .footer-legal{color:rgba(0,0,0,.46)}
body .footer-legal a{color:rgba(0,0,0,.632)}
body .footer-social-link:hover,body .footer-links a:hover,body .footer-legal a:hover{color:#000000}
/* Modellseiten: der Kopf weicht am Fuss wie nav.lp-nav (Skript in der Seite) */
body.lp-amfuss header.kopf.lp-nav{opacity:0;pointer-events:none;transition:opacity .3s}