.clock{font:bold clamp(54px,7vw,110px)/1.2 ui-monospace,monospace;margin:24px 0;letter-spacing:-3px}
/* Seitenmenü: fährt von rechts herein, Suche fix, Liste scrollt */
.menu{position:fixed;top:0;right:0;bottom:0;left:auto;z-index:60;width:min(440px,100vw);height:100dvh;max-height:none;padding:0;margin:0;display:flex;flex-direction:column;background:#fff;color:#151515;color-scheme:light;border:0;border-left:2px solid #151515;box-shadow:-8px 0 0 #f4d332;overflow:hidden;transform:translateX(110%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.9,.3,1),visibility 0s .3s}
.menu.open{display:flex;transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.9,.3,1)}
.nav-back{position:fixed;inset:0;z-index:55;background:#15151577;opacity:0;pointer-events:none;transition:opacity .25s}.nav-back.open{opacity:1;pointer-events:auto}
.nav-top{display:flex;justify-content:space-between;align-items:center;padding:20px 20px 12px;font:800 26px/1.2 "Bricolage Grotesque",Arial,sans-serif;letter-spacing:-.03em}
.nav-top small{font:700 13px Arial,sans-serif;color:#151515;background:#f4d332;border-radius:20px;padding:3px 9px;margin-left:6px;letter-spacing:0;vertical-align:middle}
#nav-close{width:44px;height:44px;border-radius:50%;border:2px solid #151515;background:#fff;font-size:18px;cursor:pointer;transition:transform .2s,background .2s}#nav-close:hover{background:#f4d332;transform:rotate(90deg)}
.nav-search{padding:0 20px 14px;border-bottom:2px solid #151515}
.nav-search input{width:100%;padding:14px 18px;border:2px solid #151515;border-radius:40px;background:#fafafa;color:#151515;font:17px Arial,sans-serif}
.nav-search input:focus{outline:3px solid #f4d332;outline-offset:2px;background:#fff}
.tool-groups{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px 14px 40px;display:block}
.tool-category h2{font:800 12px/1.5 "Bricolage Grotesque",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;margin:22px 6px 8px;color:#6b6b63}
.tool-links{display:flex;flex-direction:column;gap:4px}
.menu .tool-links a{display:flex;align-items:center;gap:12px;margin:0;padding:8px 12px;border:2px solid transparent;border-radius:16px;background:transparent;color:#151515;font:700 17px/1.3 "Bricolage Grotesque",Arial,sans-serif;text-decoration:none;transition:transform .15s,background .15s}
.menu .tool-links a:hover,.menu .tool-links a:focus-visible{background:#fff4b8;transform:translateX(4px) rotate(-.3deg)}
.menu .tool-links a[aria-current=page]{background:#f4d332;border-color:#151515}
.menu .ico{flex:0 0 38px;height:38px;border-radius:12px;background:#f5f5f2;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700}
.menu a[aria-current=page] .ico{background:#fff}
.menu :focus-visible{outline:3px solid #b09300;outline-offset:2px}
#nav-empty{padding:30px 10px;font:italic 18px Fraunces,Georgia,serif;color:#525252}
.menu [hidden]{display:none!important}
/* Keep the animated scene colorful; give its controls a quiet, consistent surface. */
body:has(#home) header{padding:16px 5vw;background:rgba(255,255,255,.55);border-bottom:1px solid rgba(21,21,21,.08);color:#151515;-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)}
body:has(#home) .logo{color:#151515}
#mb{background:#f4d332;color:#151515;border:1px solid #151515;border-radius:10px;padding:11px 20px}
#mb:hover{background:#ffe875}
body:has(#home) .go{background:#f4d332;color:#151515;border:1px solid #151515;border-radius:10px;padding:12px 22px}
body:has(#home) .go:hover{background:#ffe875}
body:has(#home) .chips{gap:8px}
body:has(#home) .chips a{background:#fff;color:#151515;border:1px solid #d5d5d5;border-radius:8px;padding:8px 13px}
body:has(#home) .chips a:hover{background:#fff4b8;border-color:#c8b656}
body:has(#home) .dots button{background:#fff;border-color:#151515}
body:has(#home) .dots button.on{background:#f4d332;border-color:#151515}
@media(max-width:600px){.menu{width:100vw;border-left:0;box-shadow:none}}
@media(prefers-reduced-motion:reduce){.menu,.nav-back,.menu .tool-links a,#nav-close{transition:none}}
.menu .tool-links a{padding:12px 14px}
/* Menü-Button: poppt beim Hover leicht heraus, wie „Alle Tools entdecken“ */
#mb{transition:transform .2s,box-shadow .2s,background .2s}
#mb:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:0 6px 0 #151515}
#mb:active{transform:none;box-shadow:none}
/* Icons */
.ico{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.ico-svg{width:1.2em;height:1.2em;display:block}
.menu .ico .ico-svg{width:22px;height:22px}
.chip-l{display:flex;align-items:center;gap:12px;min-width:0}
.chips .ico .ico-svg{width:22px;height:22px}
.h-ico{display:inline-flex;vertical-align:-.08em;margin-right:.22em}
.h-ico .ico-svg{width:.78em;height:.78em;stroke-width:2.1}
.ico-big .ico-svg{width:44px;height:44px;stroke-width:1.7}
.ico-big{display:block;margin-bottom:14px}
/* Einfahrbare Kategorien im Menü */
.tool-category h2{margin:10px 0 0}
.cat-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:13px 14px;border:2px solid #151515;border-radius:14px;background:#f5f5f2;color:#151515;font:800 13px/1.4 "Bricolage Grotesque",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;text-align:left;cursor:pointer;transition:background .15s,transform .15s}
.cat-toggle:hover{background:#fff4b8;transform:translateX(3px)}
.cat-toggle span{flex:1}
.cat-toggle small{font:700 12px Arial,sans-serif;letter-spacing:0;background:#fff;border:1px solid #151515;border-radius:20px;padding:1px 9px}
.chev{display:inline-block;width:9px;height:9px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg);transition:transform .25s;flex:0 0 auto;margin:0 3px}
.tool-category.open .cat-toggle .chev{transform:rotate(45deg)}
.tool-category.open .cat-toggle{background:#f4d332}
.tool-links-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.tool-category.open .tool-links-wrap{grid-template-rows:1fr}
.tool-links-wrap>.tool-links{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s .3s}
.tool-category.open .tool-links-wrap>.tool-links{visibility:visible;transition:none}
.tool-category.open .tool-links>a:first-child{margin-top:6px}
.menu .tool-links a .nm{min-width:0}
/* Anleitung unter jedem Tool */
.howto{margin-top:28px;border:1px solid #171717;border-radius:18px;background:#fff;overflow:hidden}
.howto summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 26px;font:800 20px/1.3 "Bricolage Grotesque",Arial,sans-serif;cursor:pointer;list-style:none;background:#f4d332}
.howto summary::-webkit-details-marker{display:none}
.howto summary:hover{background:#ffe875}
.howto[open] .chev{transform:rotate(45deg)}
.howto ol{margin:0;padding:26px 30px 28px 56px;font-size:17px;line-height:1.7}
.howto li{padding-left:6px;margin:0 0 10px}
.howto li::marker{font-weight:800}
@media(prefers-reduced-motion:reduce){#mb,#mb:hover,.cat-toggle,.cat-toggle:hover,.tool-links-wrap,.chev{transition:none;transform:none}.tool-category.open .cat-toggle .chev,.howto[open] .chev{transform:rotate(45deg)}}
/* Header: Logo weiter links, Menü-Schrift größer */
header{padding-left:14px!important}
#mb{font-size:21px!important;font-weight:800;line-height:1.1;padding:12px 24px!important;min-height:56px}
body:has(#home) #mb{font-size:clamp(22px,2.3vw,28px)!important;padding:16px 32px!important;min-height:64px}
@media(max-width:780px){#mb{font-size:17px!important;padding:8px 16px!important;min-height:44px}}
@media(max-width:600px){body:has(#home) #mb{font-size:17px!important;padding:10px 16px!important;min-height:46px}}
/* Punkte-Navigation: sehr helles Gelb-Orange statt Weiß */
body:has(#home) .dots button{background:#ffe3a6}
body:has(#home) .dots button:hover{background:#ffd27a}
/* Musik-Symbol unten links, ohne Hintergrund */
#music-toggle{position:fixed;left:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:45;width:46px;height:46px;padding:0;border:0;background:none;color:#151515;cursor:pointer;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 3px rgba(255,255,255,.9));transition:transform .2s,opacity .2s}
#music-toggle svg{width:28px;height:28px}
#music-toggle:hover{transform:scale(1.1)}
#music-toggle[aria-pressed=false]{opacity:.55}
#music-toggle:focus-visible{outline:3px solid #9a7c00;outline-offset:2px;border-radius:50%}
.meter{height:18px;border:2px solid #171717;border-radius:10px;background:#fff;overflow:hidden;margin:6px 0 4px}
.meter span{display:block;height:100%;width:0;background:#e5483c;transition:width .25s,background .25s}

/* Rechtliches: unscheinbare Fußzeile auf jeder Seite */
footer.legal{display:block;position:relative;z-index:3;border:0;background:none;padding:34px 4vw 22px;text-align:center;font-family:inherit;color:#151515}
footer.legal p{margin:0;font-size:10.5px;line-height:1.6;opacity:.6}
footer.legal nav{margin-top:2px}
footer.legal a{font-family:inherit;font-weight:500;font-size:11px;color:#151515;text-decoration:none;margin:0 .7em;padding:6px 0;transition:color .2s}
footer.legal a:hover,footer.legal a:focus-visible{color:#e3a800;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* Impressum und Datenschutz: lesbare Textseiten */
section.page.legal-text{max-width:820px}
.legal-text h1{margin:0 0 6px}
.legal-text .stand{color:#64645e;font-size:15px;margin:0 0 28px}
.legal-text h2{font-size:clamp(22px,2.4vw,30px);line-height:1.15;margin:44px 0 10px}
.legal-text h3{font-size:19px;margin:28px 0 8px}
.legal-text h4{font-size:16px;margin:20px 0 6px}
.legal-text p,.legal-text li{font-size:16px;line-height:1.7;color:#2b2b29;margin:0 0 12px}
.legal-text ul{margin:0 0 14px;padding-left:22px}
.legal-text a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.legal-text a:hover{color:#b88a00}
.legal-text .caps{text-transform:none;font-size:14.5px}
/* Einheitlicher Header auf ALLEN Seiten – identisch zur Startseite */
html body header{min-height:96px;padding:16px 5vw 16px 14px!important;background:rgba(255,255,255,.55);border-bottom:1px solid rgba(21,21,21,.08);color:#151515;-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)}
html body .logo{font-family:"Bricolage Grotesque",Georgia,sans-serif;font-size:38px;font-weight:800;letter-spacing:-.04em;color:#151515;text-decoration:none}
html body .logo::after{content:none}
html body #mb{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(22px,2.3vw,28px)!important;padding:16px 32px!important;min-height:64px;line-height:1.1;border:1px solid #151515;border-radius:14px;background:#f4d332;color:#151515}
html body #mb:hover{background:#ffe875}
@media(max-width:600px){
html body header{min-height:54px;padding:8px 14px!important}
html body .logo{font-family:"DM Sans",system-ui,sans-serif!important;font-weight:700!important;font-size:24px;letter-spacing:-.02em}
html body #mb{font-family:"DM Sans",system-ui,sans-serif!important;font-weight:700!important;font-size:15px!important;padding:10px 16px!important;min-height:38px;border-radius:10px}
}
/* Unterkategorien im Menü */
.menu .tool-sub{margin:14px 6px 2px;padding:0 0 4px;font:800 11px/1.4 "Bricolage Grotesque",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6b6b63;border-bottom:1px solid rgba(21,21,21,.12)}
.menu .tool-links>.tool-sub:first-child{margin-top:10px}
/* Impressum & Datenschutz: Zurück-Link über der Überschrift, breiter Text, wenig Rand */
section.page.legal-text{max-width:1560px;padding-left:56px;padding-right:56px}
.legal-text .back{display:block;margin:0 0 14px}
.legal-text h1{display:block;width:fit-content;max-width:100%;font-size:clamp(24px,7.2vw,64px);white-space:nowrap}
@media(max-width:780px){section.page.legal-text{padding-left:16px;padding-right:16px}}

/* Häufig genutzt (Menü oben) */
.menu .fav-box{margin:6px 0 10px;padding:12px 12px 14px;border-radius:20px;background:linear-gradient(135deg,#fff4b8,#ffe27a);border:2px solid #151515;box-shadow:0 5px 0 #151515}
.menu .fav-box h2{margin:2px 4px 10px;font:800 13px/1.4 "Bricolage Grotesque",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#151515}
.menu .fav-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.menu .fav-grid a{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;background:#fff;border:2px solid #151515;color:#151515;font:800 16px/1.2 "Bricolage Grotesque",Arial,sans-serif;text-decoration:none;position:relative;transition:transform .15s,box-shadow .15s}
.menu .fav-grid a:hover,.menu .fav-grid a:focus-visible{transform:translateY(-2px);box-shadow:0 4px 0 #151515}
.menu .fav-grid a[aria-current=page]{background:#f4d332}
/* Neu!-Schildchen */
.new-tag{display:inline-block;flex:0 0 auto;margin-left:8px;padding:2px 8px;border-radius:8px;background:#ffb81c;color:#151515;font:800 11px/1.4 "Bricolage Grotesque",Arial,sans-serif;letter-spacing:.04em;white-space:nowrap;box-shadow:0 2px 0 rgba(21,21,21,.85);animation:newbob 1.6s ease-in-out infinite}
.new-tag.beta{background:#fff;color:#151515;border:2px solid #151515;box-shadow:0 2px 0 #151515;animation:none;padding:0 6px}
.fav-grid .new-tag{position:absolute;top:-8px;right:-6px;margin:0}
.chips a .new-tag{margin-left:8px}
@keyframes newbob{0%,100%{transform:translateY(-2px) rotate(-3deg)}50%{transform:translateY(2px) rotate(-3deg)}}
@media(prefers-reduced-motion:reduce){.new-tag{animation:none}}

/* Empfohlen: feste Überschrift, immer offen */
.rec-head{cursor:default}
.rec-head:hover{transform:none;background:#f4d332}

/* Empfohlen im Menü: kleine Überschrift ohne Kasten */
.menu .rec-list{margin:6px 0 14px}
.menu .rec-title{margin:0 6px 4px;padding:0 0 5px;font:800 12px/1.4 "Bricolage Grotesque",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#151515;border-bottom:3px solid #ffb81c}
.menu .rec-list .tool-links a{font-weight:800}

/* Mobil: Kopfzeile und Schrift darin größer */
@media(max-width:780px){
html body header{min-height:72px!important;padding:10px 16px!important}
html body .logo{font-size:34px!important}
html body #mb{font-size:19px!important;min-height:50px!important;padding:10px 20px!important}
body:has(#home) header{padding:10px 16px!important}
body:has(#home) #mb{font-size:19px!important;min-height:50px!important;padding:10px 20px!important}
}

/* Mobil: Kopfzeile auf allen Seiten wie auf der Startseite (Größe, Schrift, Transparenz) */
@media(max-width:780px){
html body header{min-height:62px!important;padding:8px 14px!important;background:rgba(255,255,255,.55)!important;border-bottom:1px solid rgba(21,21,21,.08)!important;-webkit-backdrop-filter:blur(16px) saturate(1.5)!important;backdrop-filter:blur(16px) saturate(1.5)!important}
html body .logo{font-family:"Bricolage Grotesque",Georgia,sans-serif!important;font-weight:800!important;font-size:30px!important;letter-spacing:-.04em!important}
html body #mb{font-family:"Bricolage Grotesque",Georgia,sans-serif!important;font-weight:800!important;font-size:20px!important;line-height:1.15!important;min-height:48px!important;padding:10px 20px!important;border-radius:12px!important}
}

/* Favoriten (Herz) */
.heart{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin-left:auto;padding:5px;border:0;border-radius:50%;background:transparent;color:#151515;cursor:pointer;line-height:0}
.heart svg{width:20px;height:20px;transition:transform .15s}
.heart:hover{background:rgba(224,36,94,.14)}
.heart:hover svg{transform:scale(1.15)}
.heart.on{color:#e0245e}
.heart.on svg{fill:#e0245e}
.heart:focus-visible{outline:3px solid #151515;outline-offset:2px}
.tool-links a .new-tag+.heart{margin-left:auto}
.page-heart{margin-left:.35em;vertical-align:.05em;padding:.12em}
.page-heart svg{width:.62em;height:.62em}
.fav-empty{margin:8px 6px 0;font:500 15px/1.4 "DM Sans",Arial,sans-serif;color:#61615c}
@media(prefers-reduced-motion:reduce){.heart svg{transition:none}}

/* Herz neben der Überschrift: gelber Balken nur unter dem Titel, nicht unter dem Herz */
h1.has-hl{background:none;padding:0}h1.has-hl .h-hl{background:linear-gradient(transparent 62%,var(--acc) 62%);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}