/*! brunanie Website · © 2026 Brunanie (Bruno Kempe). Alle Rechte vorbehalten. Gebaut für brunanie. Kopieren, Weitergabe und Nachbau sind nicht erlaubt. */
:root{--schrift: "Helvetica Neue", Helvetica, Arial, sans-serif;--tisch: #17130f;--nav-oben: #b3c0d1;--nav-unten: #6d83a1;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--tisch);font:15px/1.3 var(--schrift);color:#fff;-webkit-font-smoothing:antialiased;overflow:hidden}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.tisch{min-height:100%;display:grid;place-items:center;padding:24px;background:radial-gradient(120% 90% at 50% 40%,#3a2c20,#17130f 70%),var(--tisch)}.handy{position:relative;width:392px;padding:92px 16px 108px;border-radius:58px;background:linear-gradient(180deg,#2b2b2e,#0d0d0f 18%,#050506 80%,#1c1c1f);box-shadow:0 0 0 3px #b9bcc1,0 0 0 5px #6f7378,0 40px 80px #000000b3,inset 0 0 0 2px #000}.handy-oben{position:absolute;top:44px;left:50%;translate:-50% 0;display:flex;align-items:center;gap:18px}.lautsprecher{width:62px;height:8px;border-radius:4px;background:linear-gradient(#000,#222);box-shadow:inset 0 1px 2px #000,0 1px #ffffff1f}.kamera{position:absolute;left:-34px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#4a5a7a,#050505 60%)}.home-knopf{position:absolute;bottom:30px;left:50%;translate:-50% 0;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#1d1d20,#050506 70%);box-shadow:inset 0 2px 3px #ffffff1f,inset 0 -2px 4px #000,0 0 0 1px #2a2a2c}.home-knopf span{display:block;width:18px;height:18px;margin:auto;border:2px solid #8b8c90;border-radius:5px}.bildschirm{position:relative;width:360px;height:540px;overflow:hidden;background:#000;box-shadow:0 0 0 2px #000}@media (max-width: 600px){.tisch{display:block;padding:0;background:#000}.handy{width:100%;padding:0;border-radius:0;background:none;box-shadow:none}.handy-oben,.home-knopf{display:none}.bildschirm{width:100%;height:100dvh;box-shadow:none}}.statusleiste{position:absolute;z-index:30;inset:0 0 auto;height:20px;display:flex;align-items:center;justify-content:space-between;padding:0 6px;background:linear-gradient(#000000d9,#0009);font:700 12px/1 var(--schrift);text-shadow:0 -1px 0 #000}.netz{display:flex;align-items:flex-end;gap:1.5px}.netz i{width:3px;background:#fff;border-radius:.5px}.netz i:nth-child(1){height:4px}.netz i:nth-child(2){height:6px}.netz i:nth-child(3){height:8px}.netz i:nth-child(4){height:10px}.netz i:nth-child(5){height:12px;margin-right:4px}.akku{display:flex;align-items:center;gap:4px}.akku b{width:22px;height:10px;border:1px solid #fff;border-radius:2px;background:linear-gradient(90deg,#fff 92%,transparent 0) 1px 1px / calc(100% - 2px) calc(100% - 2px) no-repeat;position:relative}.akku b:after{content:"";position:absolute;right:-3px;top:2px;width:2px;height:4px;background:#fff;border-radius:0 1px 1px 0}.home{position:absolute;inset:0;padding:32px 0 0;display:flex;flex-direction:column;background:radial-gradient(90% 60% at 50% 28%,rgb(255 210 120 / .22),transparent 70%),radial-gradient(70% 50% at 80% 90%,rgb(120 160 255 / .18),transparent 70%),linear-gradient(160deg,#1b1f2c,#07080c 70%)}.home:before{content:"Brunanie";position:absolute;inset:38% 0 auto;text-align:center;font:800 64px/1 var(--schrift);letter-spacing:-.04em;color:#ffffff0d;pointer-events:none}.raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);row-gap:18px;justify-items:center}.app{position:relative;display:grid;justify-items:center;gap:5px;width:74px;text-align:center;-webkit-tap-highlight-color:transparent}.name{max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 11px/1.1 var(--schrift);text-shadow:0 1px 2px #000,0 0 1px #000}.symbol{position:relative;display:grid;place-items:center;width:57px;height:57px;border-radius:12px;overflow:hidden;box-shadow:0 2px 4px #000000a6,inset 0 0 0 1px #ffffff14}.symbol:after{content:"";position:absolute;left:-12%;right:-12%;top:-50%;height:100%;border-radius:0 0 50% 50%/0 0 26% 26%;background:linear-gradient(#ffffff9e,#ffffff1f);pointer-events:none}.symbol svg{position:relative;width:40px;height:40px;fill:#fff;filter:drop-shadow(0 -1px 0 rgb(0 0 0 / .35))}.symbol .aus{fill:currentColor}.symbol .aus-strich{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.s-youtube{background:linear-gradient(#ff5b4d,#c4120a 55%,#8f0b05);color:#c4120a}.s-twitch{background:linear-gradient(#a879ff,#6b2fd6 55%,#4b1a9f)}.s-twitch path:first-child{fill:#fff}.s-twitch .aus-strich{stroke:#6b2fd6;stroke-width:3}.s-tiktok{background:linear-gradient(#3a3a3a,#111 55%,#000)}.s-tiktok svg{filter:drop-shadow(-1.5px -1px 0 #25f4ee) drop-shadow(1.5px 1px 0 #fe2c55)}.s-insta{background:linear-gradient(160deg,#f9d77e,#f07a3c 35%,#d6266d 65%,#7b2fbf)}.s-web{background:linear-gradient(#6fd0ff,#1f86d6 55%,#0f5aa6)}.s-anfrage{background:linear-gradient(#93f07a,#3fbf2a 55%,#24871a)}.s-recht{background:linear-gradient(#e9ecef,#a9b0b8 55%,#7c848d)}.s-recht .aus-strich{stroke:#3d434a}.badge{position:absolute;top:-7px;right:2px;min-width:24px;height:24px;padding:0 6px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(#ff6b5f,#d0140a);border:2px solid #fff;box-shadow:0 2px 3px #0009;font:700 13px/1 var(--schrift)}.app:active .symbol{filter:brightness(.6)}.app.wackeln .symbol{animation:wackeln .12s ease-in-out 4 alternate}@keyframes wackeln{0%{rotate:-6deg}to{rotate:6deg}}.punkte{display:flex;justify-content:center;gap:8px;padding:10px 0}.punkte button{width:7px;height:7px;padding:0;border-radius:50%;background:#ffffff59}.punkte button.an{background:#fff}.punkte button:after{content:"";display:block;margin:-8px;width:23px;height:23px}.dock{position:relative;display:flex;justify-content:center;gap:22px;padding:12px 0 max(10px,env(safe-area-inset-bottom));margin:0}.dock:before{content:"";position:absolute;inset:22px 0 0;z-index:0;background:linear-gradient(#ffffff61,#ffffff1f 12%,#ffffff0f 60%,#ffffff29);border-top:1px solid rgb(255 255 255 / .7);clip-path:polygon(6% 0,94% 0,100% 100%,0 100%)}.dock .app{z-index:1}.dock .symbol{-webkit-box-reflect:below 2px linear-gradient(transparent 58%,rgb(255 255 255 / .28))}.appfenster{position:absolute;inset:20px 0 0;z-index:20;display:flex;flex-direction:column;color:#000;transform-origin:var(--ursprung, 50% 50%);animation:app-auf .32s cubic-bezier(.2,.8,.2,1);background:repeating-linear-gradient(90deg,#c5ccd4 0 5px,#cbd2d8 5px 9px)}@keyframes app-auf{0%{scale:.08;opacity:0}to{scale:1;opacity:1}}.leiste{position:relative;height:44px;flex:none;display:grid;place-items:center;border-bottom:1px solid #2d3642;background:linear-gradient(var(--nav-oben),#8a9cb5 50%,#7d90ab 50%,var(--nav-unten))}.leiste h2{margin:0;font:700 20px/1 var(--schrift);color:#fff;text-shadow:0 -1px 0 #4a5566}.zurueck{position:absolute;left:14px;top:7px;height:30px;padding:0 10px 0 14px;font:700 12px/30px var(--schrift);color:#fff;text-shadow:0 -1px 0 #3b4656;background:linear-gradient(#93a5bd,#5a7090 50%,#4c6283 50%,#566c8c);border-radius:5px;clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%);box-shadow:inset 0 1px #ffffff59}.inhalt{flex:1;overflow-y:auto;padding:4px 10px 24px;-webkit-overflow-scrolling:touch}.gruppe-titel{margin:18px 10px 6px;font:700 17px/1.2 var(--schrift);color:#4c566c;text-shadow:0 1px 0 #fff}.gruppe-fuss{margin:8px 12px 0;font:15px/1.35 var(--schrift);color:#4c566c;text-align:center;text-shadow:0 1px 0 #fff}.gruppe{list-style:none;margin:0;padding:0;background:#fff;border:1px solid #a9abae;border-radius:10px;overflow:hidden}.gruppe li+li{border-top:1px solid #e0e0e0}.gruppe a{display:flex;align-items:center;gap:10px;padding:9px 30px 9px 10px;position:relative}.gruppe a:after{content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;border:solid #8e8e93;border-width:3px 3px 0 0;rotate:45deg;translate:0 -50%}.gruppe a:active{background:linear-gradient(#058cf5,#015fe6);color:#fff}.gruppe img{width:58px;height:58px;border-radius:8px;object-fit:cover;flex:none;background:#ddd}.gruppe b{display:block;font:700 17px/1.2 var(--schrift)}.gruppe small{display:block;font:14px/1.25 var(--schrift);color:#7f7f84}.gruppe.text li{padding:11px 12px;font:16px/1.35 var(--schrift)}.sperre{position:absolute;inset:0;z-index:25;display:flex;flex-direction:column;justify-content:space-between;padding-top:20px;background:radial-gradient(80% 60% at 50% 45%,#2a3550,#06070b 75%)}.sperre-oben,.sperre-unten{position:relative;z-index:1;background:linear-gradient(#28282cc7,#000000b8);border-block:1px solid rgb(255 255 255 / .18);transition:translate .45s cubic-bezier(.5,0,.7,.4),opacity .45s}.sperre-oben{padding:8px 0 12px;text-align:center}.gross-uhr{margin:0;font:200 64px/1.05 var(--schrift);letter-spacing:-.02em}.datum{margin:2px 0 0;font:600 15px/1 var(--schrift);color:#e6e6e6}.sperre-bild{flex:1;display:grid;place-items:center}.wortmarke{font:800 54px/1 var(--schrift);letter-spacing:-.04em;color:#fff;text-shadow:0 1px 0 #ccc,0 2px 0 #bbb,0 3px 0 #999,0 4px 0 #888,0 10px 18px rgb(0 0 0 / .6)}.sperre-unten{padding:18px 20px max(14px,env(safe-area-inset-bottom))}.schieber{position:relative;height:48px;border-radius:10px;background:linear-gradient(#0b0b0c,#26262a);box-shadow:inset 0 2px 4px #000,0 1px #fff3;display:grid;place-items:center;touch-action:none}.schieber-text{padding-left:54px;font:400 20px/1 var(--schrift);color:transparent;user-select:none;background:linear-gradient(100deg,#6f6f72 40%,#fff,#6f6f72 60%) 0 0 / 300% 100%;-webkit-background-clip:text;background-clip:text;animation:schimmer 2.6s linear infinite}@keyframes schimmer{0%{background-position:100% 0}to{background-position:-50% 0}}.knauf{position:absolute;left:4px;top:4px;width:64px;height:40px;border-radius:8px;display:grid;place-items:center;z-index:1;background:linear-gradient(#fdfdfd,#d9d9db 50%,#c7c7ca 50%,#e3e3e5);box-shadow:0 1px 2px #000,inset 0 -1px #00000026;touch-action:none}.knauf svg{width:26px;height:26px;fill:none;stroke:#8b8c90;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}.sperre.weg{pointer-events:none;background:transparent;transition:background .45s}.sperre.weg .sperre-oben{translate:0 -110%;opacity:0}.sperre.weg .sperre-unten{translate:0 110%;opacity:0}.sperre.weg .sperre-bild{opacity:0;transition:opacity .3s}.home.anflug .raster li,.home.anflug .dock .app{animation:anflug .5s cubic-bezier(.2,.8,.2,1) both}@keyframes anflug{0%{scale:1.6;opacity:0}}@media (prefers-reduced-motion: reduce){.schieber-text{animation:none;color:#bbb}.appfenster,.ordner-tuch,.home.anflug .raster li,.home.anflug .dock .app{animation:none}.sperre-oben,.sperre-unten{transition:none}}.taste{position:absolute;background:linear-gradient(90deg,#8d9196,#e6e8ea 45%,#9a9ea3);box-shadow:0 1px 2px #0009}.taste-laut1,.taste-laut2{left:-7px;width:7px;height:30px;border-radius:7px 0 0 7px/50% 0 0 50%}.taste-laut1{top:170px}.taste-laut2{top:214px}.taste-schalter{right:-6px;top:112px;width:6px;height:24px;border-radius:0 3px 3px 0;background:linear-gradient(90deg,#9a9ea3,#e6e8ea 55%,#8d9196)}.taste-schalter:after{content:"";position:absolute;left:1px;top:7px;width:3px;height:10px;border-radius:1px;background:#d0402f}.taste-an{top:-6px;right:70px;width:46px;height:6px;border-radius:3px 3px 0 0;background:linear-gradient(#e6e8ea,#8d9196)}@media (max-width: 600px){.taste{display:none}}.ordner-reihe{margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);justify-items:center}.ordner-reihe .app{grid-column:4}.s-ordner{background:#00000059;box-shadow:inset 0 1px 3px #000c,0 1px #fff3;display:grid;grid-template-columns:repeat(3,12px);gap:3px;align-content:center;justify-content:center}.s-ordner:after{display:none}.s-ordner{grid-template-columns:repeat(3,13px)}.s-ordner i{position:relative;overflow:hidden;width:13px;height:13px;border-radius:3px;box-shadow:none!important}.s-ordner i:before{content:"";position:absolute;inset:0;background-position:center;background-size:9px 9px;background-repeat:no-repeat}.ordner{position:absolute;inset:20px 0 0;z-index:15;background:#00000080;animation:dunkel .2s ease-out}.ordner-tuch{position:absolute;left:0;right:0;bottom:var(--unten, 150px);padding:14px 10px 18px;background:repeating-linear-gradient(0deg,rgb(255 255 255 / .03) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgb(0 0 0 / .08) 0 1px,transparent 1px 3px),#4b4d52;box-shadow:inset 0 8px 10px -6px #000,inset 0 -8px 10px -6px #000,0 0 0 1px #0006;animation:aufklappen .28s ease-out}.ordner-tuch:after{content:"";position:absolute;bottom:-12px;left:var(--spitze, 85%);translate:-50% 0;border:12px solid transparent;border-bottom:0;border-top-color:#4b4d52}.ordner h2{margin:0 0 14px 8px;font:700 18px/1 var(--schrift);color:#e8e8ea;text-shadow:0 -1px 0 #000}@keyframes aufklappen{0%{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes dunkel{0%{background:#0000}}.mini-app{position:relative;width:32px;height:32px;border-radius:7px;overflow:hidden;box-shadow:0 1px 2px #000000b3}.mini-app:before{content:"";position:absolute;inset:0;background:center / 20px 20px no-repeat}.mini-app:after{content:"";position:absolute;left:-12%;right:-12%;top:-50%;height:100%;border-radius:0 0 50% 50%/0 0 26% 26%;background:linear-gradient(#fff9,#ffffff1a)}.m-yt{background:linear-gradient(#ff5b4d,#c4120a 55%,#8f0b05)}.m-yt:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='5' y='10' width='30' height='20' rx='6' fill='%23fff'/%3E%3Cpath d='M17 14.5v11l9.5-5.5z' fill='%23c4120a'/%3E%3C/svg%3E")}.m-ig{background:linear-gradient(160deg,#f9d77e,#f07a3c 35%,#d6266d 65%,#7b2fbf)}.m-ig:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23fff' stroke-width='3'%3E%3Crect x='8' y='8' width='24' height='24' rx='7'/%3E%3Ccircle cx='20' cy='20' r='5.5'/%3E%3C/svg%3E")}.m-tt{background:linear-gradient(#3a3a3a,#111 55%,#000)}.m-tt:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M23 7c0 4.5 3 7.5 8 8v5c-3 0-5.6-1-8-2.6V26a9 9 0 1 1-9-9v5.2a3.9 3.9 0 1 0 3.9 3.8V7z' fill='%23fff'/%3E%3C/svg%3E")}@keyframes blase{0%{scale:.6;opacity:0}}.foot-credit{position:fixed;right:18px;bottom:14px;z-index:40;display:flex;gap:14px}.credit-ig{font:11px/1 var(--schrift);color:#ffffff59}.impressum-link{font:11px/1 var(--schrift);color:#ffffff8c;text-decoration:underline}.impressum-link:hover{color:#fff}@media (max-width: 600px){.foot-credit{display:none}}.seiten{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}.seiten::-webkit-scrollbar{display:none}.seite{flex:0 0 100%;scroll-snap-align:start;display:flex;flex-direction:column;padding:0 10px}.ordner .raster{grid-template-columns:repeat(3,1fr)}.bald{position:absolute;top:-6px;right:2px;padding:3px 6px;border-radius:9px;background:linear-gradient(#8e8e93,#5d5d62);border:1.5px solid #fff;font:700 10px/1 var(--schrift);box-shadow:0 1px 2px #0009}.app:has(.bald) .symbol{filter:grayscale(.7) brightness(.75)}.s-notiz{background:linear-gradient(#fff7b0,#f3d54a 55%,#d9b528)}.s-notiz .aus-strich{stroke:#6b4a1a}.leiste-leder{background:linear-gradient(#a3794d,#7a5430 50%,#6b4826 50%,#5c3d20);border-bottom:1px solid #2b1a0b;box-shadow:inset 0 -3px 0 -1px #ffffff1f}.leiste-leder h2{text-shadow:0 -1px 0 #2b1a0b}.leiste-leder .zurueck{background:linear-gradient(#9b7148,#6a4826 50%,#5b3c1e 50%,#644322);text-shadow:0 -1px 0 #2b1a0b}.notizblock{padding:8px 18px 24px 34px;color:#3b2a12;font:20px/28px Marker Felt,Noteworthy,Comic Sans MS,cursive;background:linear-gradient(90deg,transparent 26px,rgb(200 120 90 / .5) 26px 27px,transparent 27px),repeating-linear-gradient(#fdf5b0 0 27px,#e2c96e 27px 28px)}.notizblock p{margin:0}.notiz-datum{text-align:right;font-size:14px;color:#7a6235}.sperre-unten{display:grid;gap:10px}.sperre-impressum{justify-self:center;font:11px/1 var(--schrift);color:#ffffff80;text-decoration:underline}