/* ==========================================================================
   Tiefennavigation — Drei Türen + „Ihr Weg" (Regelwerk Kapitel 15)
   „Die Komplexität gehört in das Beziehungsmodell, nicht auf die Oberfläche."
   Statische Datei (nonce-CSP-sicher). Drei-Türen sind statisch im HTML
   (SEO + ohne JS); tiefennav.js ergänzt Wegspur, Besucht-Markierung, Serendipität.
   ========================================================================== */
#tiefennav { max-width: 960px; margin: 3.2rem auto 0; padding: 2.2rem 1.5rem 0; border-top: 1px solid var(--rule-light, #e4e0d8); }
.tn-q { font-family: var(--f-serif); font-size: clamp(1.15rem, 2.4vw, 1.4rem); font-weight: 400; color: var(--navy, #1A2E4A); margin: 0 0 1.3rem; text-align: center; }
.tn-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.tn-door { display: flex; flex-direction: column; gap: 0.3rem; text-decoration: none; background: #fff; border: 1px solid var(--rule-light, #e4e0d8); border-left: 3px solid var(--navy-accent, #2a4a72); border-radius: 7px; padding: 1rem 1.15rem; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.tn-door:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(26,46,74,0.11); border-left-color: var(--navy, #1A2E4A); }
.tn-door:focus-visible { outline: 2px solid var(--navy-accent, #2a4a72); outline-offset: 2px; }
.tn-door.tn-apply { border-left-color: var(--gold, #c9a76a); }
.tn-rel { font-family: var(--f-sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--navy-accent, #2a4a72); }
.tn-door.tn-apply .tn-rel { color: #a9822f; }
.tn-title { font-family: var(--f-serif); font-size: 1.05rem; line-height: 1.25; color: var(--navy, #1A2E4A); }
.tn-gloss { font-family: var(--f-sans); font-size: 0.82rem; line-height: 1.45; color: var(--ink-soft, #4a443d); }
.tn-door.tn-visited { opacity: 0.6; }
.tn-door.tn-visited .tn-rel::after { content: " · schon besucht"; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-muted, #8a8478); }

/* Ihr Weg — schwebender Drawer (nur mit JS, global, additiv) */
.tn-weg-fab { position: fixed; left: 1rem; bottom: 1rem; z-index: 60; display: inline-flex; align-items: center; gap: 0.4rem; background: var(--navy, #1A2E4A); color: #fff; border: none; border-radius: 22px; padding: 0.5rem 0.95rem; font-family: var(--f-sans); font-size: 0.82rem; cursor: pointer; box-shadow: 0 6px 18px rgba(26,46,74,0.28); transition: background .14s ease; }
.tn-weg-fab:hover, .tn-weg-fab.open { background: var(--navy-accent, #2a4a72); }
.tn-weg-fab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tn-weg-count { background: rgba(255,255,255,0.22); border-radius: 10px; padding: 0.05rem 0.45rem; font-size: 0.72rem; font-weight: 600; }
.tn-weg-panel { position: fixed; left: 1rem; bottom: 3.7rem; z-index: 61; width: min(320px, calc(100vw - 2rem)); background: #fff; border: 1px solid var(--rule-light, #e4e0d8); border-radius: 10px; box-shadow: 0 12px 34px rgba(26,46,74,0.22); padding: 1rem 1.15rem 1.15rem; font-family: var(--f-sans); }
.tn-weg-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.tn-weg-panel-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--navy-accent, #2a4a72); }
.tn-weg-panel-close { background: none; border: none; font-size: 1.35rem; line-height: 1; color: var(--ink-muted, #8a8478); cursor: pointer; padding: 0 0.2rem; }
.tn-weg-resume { margin: 0 0 0.7rem; font-size: 0.82rem; color: var(--ink-soft, #4a443d); }
.tn-weg-resume a { color: var(--navy, #1A2E4A); text-decoration: none; border-bottom: 1px solid var(--rule, #cfc8bd); }
.tn-weg-list { list-style: none; margin: 0 0 0.9rem; padding: 0; }
.tn-weg-list li { font-size: 0.85rem; line-height: 1.55; padding: 0.14rem 0 0.14rem 1rem; position: relative; }
.tn-weg-list li::before { content: ""; position: absolute; left: 0.15rem; top: 0.72rem; width: 5px; height: 5px; border-radius: 50%; background: var(--rule, #cfc8bd); }
.tn-weg-list li.tn-weg-here::before { background: var(--navy-accent, #2a4a72); }
.tn-weg-list a { color: var(--navy, #1A2E4A); text-decoration: none; border-bottom: 1px solid var(--rule, #cfc8bd); }
.tn-weg-list a:hover { border-bottom-color: var(--navy, #1A2E4A); }
.tn-weg-badge { color: var(--ink-muted, #8a8478); font-size: 0.72rem; }
.tn-weg-clear { background: none; border: none; color: var(--ink-muted, #8a8478); cursor: pointer; font-family: inherit; font-size: 0.78rem; text-decoration: underline; padding: 0; }
.tn-weg-actions { display: flex; gap: 0.9rem; align-items: center; }
.tn-weg-intro { margin: 0 0 0.85rem; font-size: 0.82rem; line-height: 1.55; color: var(--ink-soft, #4a443d); }
.tn-weg-activate { display: inline-block; background: var(--navy, #1A2E4A); color: #fff; border: none; border-radius: 7px; padding: 0.5rem 0.9rem; font-family: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.tn-weg-activate:hover { background: var(--navy-accent, #2a4a72); }
@media (prefers-reduced-motion: reduce) { .tn-weg-fab { transition: none; } }

/* Überrasch mich */
.tn-surprise { margin: 1.1rem 0 0; text-align: center; }
.tn-surprise button { background: none; border: 1px solid var(--rule, #cfc8bd); border-radius: 22px; padding: 0.42rem 1.15rem; font-family: var(--f-sans); font-size: 0.82rem; color: var(--navy, #1A2E4A); cursor: pointer; transition: background .14s ease, border-color .14s ease; }
.tn-surprise button:hover { background: var(--cream, #f5ecd9); border-color: var(--navy-accent, #2a4a72); }

@media (prefers-reduced-motion: reduce) { .tn-door { transition: none; } .tn-door:hover { transform: none; } }