/* ========================================================================== SMTracker — Stylesheet -------------------------------------------------------------------------- Aufbau (in dieser Reihenfolge): 1. Grundlagen ......... Farbvariablen, Reset, Grundlayout 2. Kopfleiste ......... Logo, Rang-Anzeige, Anime/Normal-Umschalter, Burger 3. Views .............. Umschaltung der Hauptansichten 4. Hero ............... Vollflächiges Banner-Karussell (Start + Top 10) 5. Knöpfe ............. Buttons und Chips 6. Reihen ............. Horizontale Kachelreihen und Karten 7. Flächen ............ Panels, Statistik-Kacheln, Eingabefelder 8. Fußnavigation ...... Untere Leiste 9. Detailblatt ........ Vollbild-Ansicht eines Titels 10. Touch-Geräte ....... Anpassungen für iPhone/iPad/Android 11. Cookie-Dialog 12. Rechtstexte ....... Impressum / Datenschutz 13. Sterne ............ Eigene Bewertung 14. Große Screens ..... Breakpoints ab 720px / 1100px 15. Startseite ....... Einstiegsseite vor der Anmeldung 16. Anmeldeseite ..... Login / Registrierung im selben Look 17. Rückmelde-Dialog . Fenster für Besucher-Rückmeldungen 18. Admin-Bereich .... Kennzahlen, Diagramme, Tabellen 19. To-do-Liste ...... Aufgaben im Admin-Bereich 20. Fingerbedienung .. Reaktion, Trefferflächen, flüssiges Wischen 21. Sprachumschalter . EN/DE auf Startseite und Anmeldung Farben werden ausschließlich über die Variablen in :root gesetzt — Änderungen dort wirken sich auf die ganze Oberfläche aus. ========================================================================== */ /* ---------- 1. Grundlagen ---------- */ /* Schrift liegt auf dem eigenen Server, NICHT bei Google. Ein Einbinden ueber fonts.googleapis.com wuerde bei jedem Seitenaufruf die IP-Adresse des Besuchers an Google in die USA uebertragen — ohne vorherige Einwilligung ein DSGVO-Verstoss (LG Muenchen I, 20.01.2022, Az. 3 O 17493/20). Inter v20 ist ein Variable Font: eine Datei deckt alle Staerken 100-900 ab. */ @font-face{ font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('../assets/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('../assets/fonts/inter-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root{ --bg:#0B0B10; --bg2:#14151C; --card:#1B1C24; --up:#23252F; --text:#F3F3F5; --dim:#9BA0AE; --orange:#F47521; --green:#4ADE80; /* Nur fuer den einen unwiderruflichen Schritt: Konto loeschen. Bewusst kein zweiter Akzent im Rest der Oberflaeche - sonst verliert Rot seine Bedeutung. */ --red:#E5484D; --line:rgba(255,255,255,.09); --maxw:1200px; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0;background:var(--bg);color:var(--text); font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased} /* overscroll-behavior-y:none verhindert das "Gummiband"/Pull-to-Refresh beim Wischen über den Rand hinaus, damit sich die Seite nicht verschiebt. */ body{min-height:100vh;overflow-x:hidden;overscroll-behavior-y:none} /* Solange das Detailblatt offen ist, bleibt der Hintergrund stehen */ body.noscroll{overflow:hidden} /* Startseite und Anmeldung liegen als Vollbild ueber der App. Solange sie offen sind, darf die Seite dahinter nicht scrollen: die Bildlaufleiste wuerde das Fenster schmaler machen und den mittig gesetzten Inhalt der Overlays um ihre halbe Breite nach links schieben. */ body.overlayopen{overflow:hidden} /* Freiraum am Seitenende: Höhe der Fußleiste (~78px) + 100px Puffer. Muss auf
liegen, nicht auf — mit height:100% am body läge das Polster innerhalb der Fensterhöhe und wäre am Seitenende nicht wirksam. */ main{width:100%;min-height:100vh;padding-bottom:178px} button{font-family:inherit;color:inherit} :focus-visible{outline:2px solid var(--orange);outline-offset:2px} .pad{padding:0 16px;max-width:var(--maxw);margin-left:auto;margin-right:auto} .eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600} /* ---------- 2. Kopfleiste ---------- */ #top{position:fixed;top:0;left:0;right:0;z-index:30; padding:12px 16px calc(12px + env(safe-area-inset-top)); background:rgba(11,11,16,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} /* Bei geöffnetem Burger-Menü die ganze Kopfleiste über alle Ebenen heben. Nötig, weil #top durch position:fixed + z-index einen eigenen Stapelkontext bildet — der z-index des Menüs allein wirkt darin nur intern und käme sonst nicht über Detailblatt (50), Bestenliste (50) oder Cookie-Dialog (120). */ #top.menuopen{z-index:130} /* Drei Spalten statt Flex mit space-between: Die mittlere Spalte (der Modus-Umschalter) liegt damit mittig, weil die beiden 1fr-Spalten den Rest gleichmaessig teilen — und zwar ohne den Umschalter aus dem Fluss zu nehmen. Vorher stand er absolut zentriert; er wusste dadurch nichts davon, wie breit die Gruppe rechts ist, und ueberlappte sie, sobald dort etwas dazukam. Mit der Sprachauswahl war es so weit: 30px Ueberdeckung bei 375px Breite. Im Raster koennen sich Elemente nicht ueberlagern — wird es eng, rueckt die Mitte zur Seite, statt dass sich etwas ueberdeckt. */ #top .barwrap{max-width:var(--maxw);margin:0 auto;position:relative; display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px} #top .barwrap > :first-child{justify-self:start} /* Fuer Texte, die Suchmaschinen und Screenreader brauchen, im Bild aber nichts verloren haben. Bewusst nicht display:none — das wuerde sie auch fuer Screenreader entfernen. Der 1px-Ausschnitt ist die uebliche Loesung. */ .visuallyHidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* Bildmarke und Sprachauswahl stehen zusammen links, mittig zueinander und mit 10px Luft dazwischen. */ .headLeft{display:flex;align-items:center;gap:10px} #top .barwrap > :last-child{justify-self:end} .logo{font-weight:900;font-size:17px;letter-spacing:-.02em;cursor:pointer;background:none;border:0;color:inherit;padding:0;font-family:inherit; display:inline-flex;align-items:center;gap:8px} /* Bildmarke in der Kopfleiste (steht dort allein, ohne Schriftzug). Feste Groesse, damit die Leiste beim Laden nicht springt; border-radius passt zur abgerundeten Kachel im Logo selbst. */ .logo img{width:40px;height:40px;border-radius:9px;display:block;flex:0 0 auto} /* Ohne Schriftzug ist der Knopf nur so gross wie das Bild. Die Trefferflaeche wird deshalb unsichtbar auf 44px erweitert (Mindestmass zum Antippen), ohne das Layout der Kopfleiste zu veraendern. */ #logoBtn{position:relative} #logoBtn::after{content:"";position:absolute;top:50%;left:50%; transform:translate(-50%,-50%);width:44px;height:44px} .logo span{color:var(--orange)} .iconbtn{width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.10); display:grid;place-items:center;cursor:pointer;transition:background-color .15s ease,transform .12s ease} .iconbtn:hover{background:rgba(255,255,255,.18)} .iconbtn:active{transform:scale(.93)} .iconbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} /* ---------- Rang-Anzeige im Header, neben dem Burger-Menü ---------- */ .rankPill{display:none;align-items:center;gap:6px;height:34px;padding:0 12px 0 10px;border-radius:17px; border:0;background:rgba(255,255,255,.10);cursor:pointer;color:var(--text);font-family:inherit; transition:background-color .15s ease} .rankPill:hover{background:rgba(255,255,255,.18)} .rankPill.ready{display:flex} .rankPill .rpemoji{font-size:15px;line-height:1} .rankPill .rpname{font-size:11.5px;font-weight:700;white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis} /* ---------- Anime/Serien-Umschalter im Header ---------- */ .modeSwitch{display:flex;align-items:center;background:rgba(255,255,255,.08);border-radius:20px; padding:3px;gap:2px;flex-shrink:0} .modeBtn{display:flex;align-items:center;border:0;background:none;color:var(--dim);font-family:inherit; font-size:12px;font-weight:700;padding:7px 11px;border-radius:16px;cursor:pointer;white-space:nowrap; transition:background-color .15s ease,color .15s ease} .modeBtn.on{background:#fff;color:#111} /* Beschriftung des Umschalters erst ab 700px. Darunter traegt die Kopfleiste Logo, Umschalter, Rang, Sprache und Menue nebeneinander — mit Text im Umschalter wird die mittlere Spalte so breit, dass die aeusseren Spalten ungleich werden und der Umschalter sichtbar aus der Mitte rutscht. Die Symbole sagen dasselbe, und der aktive Knopf ist ohnehin weiss abgesetzt. */ @media (max-width:700px){ .modeLabel{display:none} .modeBtn{padding:7px 9px;font-size:14px} } /* Handys hochkant. Die Grenze liegt bei 480px und nicht, wie es naheliegen wuerde, bei 430: Ein iPhone 16/17 Pro Max meldet 440px Breite, ein 15 Pro Max 430px, ein iPhone 16 nur 393px. Bei einer Grenze von 430 haette das groesste iPhone als einziges eine andere Kopfleiste bekommen als alle uebrigen -- mit ausgeschriebenem Rang, doppelt so breiter Pille und groesserem Rand. 480px fasst alle Handys hochkant zusammen und bleibt klar unter der schmalsten Tablet-Breite (iPad mini hochkant: 744px). Inhalt: Rang-Text weglassen. Auf schmalen Geraeten (Galaxy S, 360px) wuerde sonst der Burger-Knopf aus dem Bildschirm geschoben, weil Logo+Umschalter+Rang+Burger zusammen breiter waeren als 360px. */ @media (max-width:480px){ .rankPill .rpname{display:none} .rankPill{padding:0 10px} #top{padding-left:12px;padding-right:12px} /* Die Bildmarke bleibt auch hier 35px — ohne Schriftzug ist in der Leiste genug Platz. font-size gilt nur noch fuer den Schriftzug der Anmeldeseite. */ .logo{font-size:16px;gap:6px} } /* Sehr schmale Geräte: Rang-Pille ganz ausblenden, der Rang steht auf der Startseite und in "Gallerie" ohnehin prominent */ @media (max-width:340px){ .rankPill.ready{display:none} } /* ---------- Burger-Dropdown-Menü ---------- */ .burgerMenu{position:absolute;top:calc(100% + 10px);right:0;z-index:90;width:250px; background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.55); padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .15s ease,transform .15s ease,visibility .15s} .burgerMenu.open{opacity:1;visibility:visible;transform:translateY(0)} .burgerItem{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0; color:var(--text);font:inherit;font-size:13.5px;font-weight:600;text-align:left; padding:10px 8px;border-radius:8px;cursor:pointer} .burgerItem:hover{background:var(--up)} .burgerItem svg{flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.9} /* ---------- 3. Views ---------- */ .view{display:none} .view.active{display:block} .viewtop{padding-top:70px} /* ---------- 4. Hero (Crunchyroll/Netflix-Stil: vollflächiges Bild, Text links im Bild) ---------- */ .hero{position:relative;height:74vh;min-height:480px;max-height:760px;overflow:hidden;margin-bottom:6px;background:var(--bg2);transition:height .2s} .hero.compact{height:60vh;min-height:400px;max-height:620px} /* "Top 10"-Karussell ist kein vollflächiger Seiten-Hero, sondern ein normaler Inhaltsblock -> auf der Seite zentrieren statt Kante an Kante zu strecken. */ #top10Wrap{max-width:var(--maxw);margin:0 auto} #top10Wrap .hero{border-radius:16px} /* Handy hochkant: feste 480px Mindesthöhe füllen sonst fast den ganzen Bildschirm */ @media (max-width:600px){ .hero{height:62vh;min-height:360px} .hero.compact{height:56vh;min-height:330px} } /* Quer gehaltenes Handy: sehr wenig Höhe -> Hero deutlich flacher, damit unter dem Banner noch Inhalt sichtbar bleibt */ @media (max-height:520px) and (orientation:landscape){ .hero,.hero.compact{height:70vh;min-height:220px;max-height:340px} .hero h2{font-size:24px} .heroslide .herodesc{-webkit-line-clamp:2} } .bgblur{position:absolute;inset:-6%;background-size:cover;background-position:center;filter:blur(32px) brightness(.42);transform:scale(1.1)} /* pan-y: Senkrechtes Scrollen bleibt Sache des Browsers, waagerechte Gesten bekommen wir. Ohne das wuerde der Browser beim Wischen die Seite bewegen und uns die Bewegung wegnehmen. */ .hero{touch-action:pan-y} .heroslide{position:absolute;inset:0;opacity:0;visibility:hidden; transition:opacity .5s ease,transform .25s ease} /* Waehrend der Finger liegt, folgt das Bild ohne Uebergang — sonst haengt es der Bewegung hinterher und fuehlt sich zaeh an. */ .hero.dragging .heroslide{transition:opacity .5s ease} .heroslide.active{opacity:1;visibility:visible;z-index:1} .heroslide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%} .heroslide .shade{position:absolute;inset:0; background: linear-gradient(90deg,rgba(11,11,16,.95) 0%,rgba(11,11,16,.8) 32%,rgba(11,11,16,.25) 62%,rgba(11,11,16,0) 82%), linear-gradient(180deg,rgba(11,11,16,.15) 0%,rgba(11,11,16,0) 30%,rgba(11,11,16,.9) 88%,var(--bg) 100%)} .heroslide .body{position:absolute;left:0;right:0;bottom:56px;padding:0 16px;max-width:600px;text-align:left} .hero .badges{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:12px} .hero .badges span{font-size:11px;font-weight:700;padding:3px 9px;border:1px solid rgba(255,255,255,.35); border-radius:4px;color:var(--dim);letter-spacing:.02em} .hero h2{margin:0 0 10px;font-size:26px;font-weight:900;line-height:1.05;letter-spacing:-.02em; text-shadow:0 2px 18px rgba(0,0,0,.7)} .hero .herodesc{font-size:13.5px;line-height:1.6;color:var(--text);opacity:.92;margin:0 0 18px; text-shadow:0 1px 8px rgba(0,0,0,.5); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .hero .acts{display:flex;gap:10px;align-items:center} .herobtn2{width:42px;height:42px;flex:0 0 auto;border-radius:6px;border:1.5px solid rgba(255,255,255,.4); background:rgba(255,255,255,.06);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer} .herodots{position:absolute;left:16px;bottom:20px;z-index:5;display:flex;gap:6px} .herodots button{width:22px;height:3px;border-radius:2px;border:0;background:rgba(255,255,255,.32);cursor:pointer;padding:0} .herodots button.on{background:var(--orange)} .heroarrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:38px;height:38px;border-radius:50%; background:rgba(0,0,0,.4);border:0;color:#fff;display:flex;align-items:center;justify-content:center; cursor:pointer;opacity:0;transition:opacity .15s} .hero:hover .heroarrow{opacity:1} .heroarrow.prev{left:14px} .heroarrow.next{right:14px} @media(min-width:860px){ .heroslide .body{max-width:640px;bottom:76px;padding:0 32px} .hero .herodesc{-webkit-line-clamp:3;font-size:15px} } .tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--dim)} .tag.hot{color:var(--orange)} /* ---------- 5. Knöpfe ---------- */ .btn{border:0;border-radius:6px;padding:11px 20px;font-size:14px;font-weight:700;cursor:pointer; background:#fff;color:#111;display:inline-flex;align-items:center;gap:7px;justify-content:center; transition:transform .12s ease,filter .15s ease,opacity .15s ease} .btn:hover:not([disabled]){filter:brightness(1.08)} .btn:active:not([disabled]){transform:scale(.97)} .btn.ghost{background:rgba(255,255,255,.14);color:var(--text)} .btn.orange{background:var(--orange);color:#fff} .btn.line{background:transparent;border:1px solid var(--line);color:var(--text)} .btn.wide{width:100%;padding:13px} .btn[disabled]{opacity:.45;cursor:default} .btn.sm{padding:8px 13px;font-size:12.5px} /* Loeschen-Knopf: umrandet statt gefuellt. Eine grosse rote Flaeche zieht den Blick staerker an als der Knopf, den man eigentlich druecken will, und dieser hier soll gefunden, nicht angeboten werden. */ .btn.danger{background:transparent;border:1px solid rgba(229,72,77,.55);color:var(--red)} .btn.danger:hover:not([disabled]){background:rgba(229,72,77,.12);filter:none} .btn.danger:focus-visible{outline-color:var(--red)} .panel.danger{border-color:rgba(229,72,77,.28)} .panel.danger .eyebrow{color:var(--red)} /* ---------- 6. Reihen ---------- */ .row{margin:22px 0} .rowhead{display:flex;align-items:baseline;justify-content:space-between;padding:0 16px;margin-bottom:10px; max-width:98%;margin-left:auto;margin-right:auto} .rowhead h3{margin:0;font-size:16px;font-weight:800;letter-spacing:-.01em} .rowhead b{font-size:11px;color:var(--dim);font-weight:600;cursor:pointer} /* Kein touch-action hier. Frueher stand pan-x darauf — das erlaubt auf dieser Reihe ausschliesslich waagerechtes Ziehen, und ein senkrechter Wisch, der auf einer Kachel beginnt, wird verworfen. Auf dem Handy blieb man dadurch an den Titeln haengen: Die Seite bewegte sich nicht, solange der Finger ueber der Reihe lag. Ohne die Angabe entscheidet der Browser nach der Richtung der Geste — waagerecht rollt die Reihe, senkrecht die Seite — und das Zoomen mit zwei Fingern bleibt ebenfalls erhalten. Auf das Antippen einer Kachel hat touch-action ohnehin keinen Einfluss. */ .scroller{display:flex;align-items:flex-start;gap:9px;overflow-x:auto;overflow-y:hidden;padding:0 16px 4px; scroll-snap-type:x proximity;scrollbar-width:none; overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch; max-width:98%;margin-left:auto;margin-right:auto} .scroller::-webkit-scrollbar{display:none} .sliderwrap{position:relative;max-width:98%;margin-left:auto;margin-right:auto} .sliderwrap .scroller{max-width:none;margin-left:0;margin-right:0} .slidearrow{position:absolute;top:0;bottom:4px;width:52px;border:0;cursor:pointer;z-index:5;color:#fff; display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;padding:0} .sliderwrap:hover .slidearrow{opacity:1} .slidearrow.prev{left:0;background:linear-gradient(90deg,rgba(11,11,16,.9),rgba(11,11,16,0))} .slidearrow.next{right:0;background:linear-gradient(270deg,rgba(11,11,16,.9),rgba(11,11,16,0))} .slidearrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} @media(max-width:719px){.slidearrow{display:none}} .card{flex:0 0 auto;width:112px;background:none;border:0;padding:0;cursor:pointer;scroll-snap-align:start;text-align:left} .art{position:relative;width:112px;height:160px;border-radius:10px;overflow:hidden;background:var(--card); display:flex;align-items:flex-end;justify-content:center;transition:transform .18s ease,box-shadow .18s ease} .card:hover .art{transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,0,0,.5)} .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .art em{position:relative;font-style:normal;font-weight:900;font-size:15px;line-height:1.1; padding:0 8px 10px;color:rgba(255,255,255,.9);text-align:center;letter-spacing:-.02em} .art .prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.22)} .art .prog i{display:block;height:100%;background:var(--orange)} .art .flag{position:absolute;top:0;right:0;background:var(--orange);color:#fff;font-size:12px;font-weight:800; padding:5px 6px 5px 8px;border-bottom-left-radius:8px;line-height:1;display:flex;align-items:center} .card .ctitle{margin:8px 0 2px;font-size:13px;font-weight:700;color:var(--text);line-height:1.25; min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .card .csub{font-size:11.5px;color:var(--dim);line-height:1.3;min-height:1.3em; display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px 9px;padding:0 16px; max-width:98%;margin-left:auto;margin-right:auto} .grid .card,.grid .art{width:100%} .grid .art{height:0;padding-bottom:143%} /* ---------- 7. Flächen ---------- */ .panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px} .inp{width:100%;background:var(--up);border:1px solid transparent;border-radius:8px;color:var(--text); padding:13px 14px;font-size:16px;font-family:inherit;outline:none;display:block} .inp:focus{border-color:var(--orange)} .inp::placeholder{color:var(--dim)} /* Knopf zum Leeren eines Suchfelds. Chrome zeigt bei type="search" ein eigenes Kreuz — das faellt weg, sonst staenden zwei nebeneinander. Auf dem Handy und in Safari gibt es ohnehin keines, deshalb ein eigener Knopf statt sich auf den Browser zu verlassen. */ .inp::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none} .inpWrap{position:relative} /* Platz fuer das Kreuz freihalten, damit lange Eingaben nicht darunter laufen */ .inpWrap .inp{padding-right:42px} .inpClear{position:absolute;top:50%;right:6px;transform:translateY(-50%); width:30px;height:30px;display:none;align-items:center;justify-content:center; border:0;background:none;padding:0;cursor:pointer;color:var(--dim);border-radius:50%; transition:background-color .12s ease,color .12s ease} .inpClear.on{display:flex} .inpClear:hover{background:rgba(255,255,255,.10);color:var(--text)} .inpClear:focus-visible{outline:2px solid var(--orange);outline-offset:-2px} .inpClear svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round} @media (hover:none) and (pointer:coarse){ /* Fingerbedienung: groessere Trefferflaeche, dafuer mehr Platz im Feld */ .inpClear{width:38px;height:38px;right:4px} .inpWrap .inp{padding-right:48px} } textarea.inp{min-height:130px;resize:vertical;line-height:1.5} .chips{display:flex;gap:8px;overflow-x:auto;padding:0 16px 2px;scrollbar-width:none;margin-bottom:14px; max-width:var(--maxw);margin-left:auto;margin-right:auto} .chips::-webkit-scrollbar{display:none} .chip{flex:0 0 auto;border:1px solid var(--line);background:transparent;border-radius:20px; padding:8px 15px;font-size:13px;font-weight:600;cursor:pointer;color:var(--dim); transition:background-color .15s ease,color .15s ease,border-color .15s ease} .chip:hover{border-color:rgba(255,255,255,.3);color:var(--text)} .chip.on{background:#fff;color:#111;border-color:#fff} .bar{height:4px;background:var(--up);border-radius:4px;overflow:hidden} .bar i{display:block;height:100%;background:var(--orange)} .note{font-size:13px;line-height:1.55;color:var(--dim)} .hint{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.5} /* ---------- 8. Fußnavigation ---------- */ nav{position:fixed;bottom:0;left:0;right:0;z-index:30; background:rgba(11,11,16,.94);backdrop-filter:blur(16px);border-top:1px solid var(--line); padding:7px 0 max(7px,env(safe-area-inset-bottom))} nav .barwrap{max-width:var(--maxw);margin:0 auto;display:flex} nav button{flex:1;background:none;border:0;color:var(--dim);font-size:10px;font-weight:600; padding:4px 0;cursor:pointer;display:grid;gap:3px;justify-items:center} nav button.on{color:#fff} nav svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* ---------- 9. Detailblatt ---------- */ #sheet:empty{display:none} /* overscroll-behavior:contain -> das Scrollen im Detailblatt springt am Ende nicht auf die Seite dahinter über (kein "Durchrutschen") */ .sheet{position:fixed;inset:0;z-index:50;background:var(--bg);overflow-y:auto;padding-bottom:40px; overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .sheet.sheet-enter{animation:sheetIn .28s cubic-bezier(.2,.8,.2,1)} @keyframes sheetIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} .sback{height:64vh;max-height:640px;min-height:400px;position:relative;overflow:hidden;background:var(--bg2)} .sback>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center} .sback .shade{position:absolute;inset:0; background:linear-gradient(180deg,rgba(11,11,16,.15) 0%,rgba(11,11,16,0) 30%,rgba(11,11,16,.95) 88%,var(--bg) 100%)} .sback .sinfo{position:absolute;left:0;right:0;bottom:0;padding:0 16px 20px;max-width:var(--maxw);margin:0 auto} .sback .sinfo h2{font-size:25px;font-weight:900;letter-spacing:-.02em;margin-bottom:6px;text-shadow:0 2px 14px rgba(0,0,0,.6)} .sback .sdesc{font-size:14.5px;line-height:1.6;color:var(--text);opacity:.92;text-shadow:0 1px 8px rgba(0,0,0,.5); display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} @media(min-width:720px){ .sback{height:56vh} .sback .sinfo{padding:0 32px 26px} .sback .sinfo h2{font-size:34px} .sback .sdesc{font-size:15px;-webkit-line-clamp:5;max-width:760px} } .close{position:fixed;top:calc(14px + env(safe-area-inset-top));left:14px;z-index:60;width:34px;height:34px; border-radius:50%;border:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:grid;place-items:center;cursor:pointer} .close svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round} .stepper{display:flex;gap:10px;align-items:center} .stepper button{width:42px;height:42px;border-radius:8px;border:1px solid var(--line);background:var(--up); font-size:19px;font-weight:600;cursor:pointer} .stepper span{font-size:15px;font-weight:700;min-width:64px;text-align:center} /* Breite an die Statistik-Kacheln darüber angleichen (deren Innenkante), statt über die volle Fensterbreite zu laufen */ .verdict{border-radius:12px;padding:12px 14px;display:flex;gap:11px;align-items:center; margin:0 auto;width:calc(100% - 32px);max-width:calc(var(--maxw) - 32px)} .verdict.y{background:rgba(74,222,128,.10);border:1px solid rgba(74,222,128,.4)} .verdict.n{background:rgba(244,117,33,.10);border:1px solid rgba(244,117,33,.45)} .verdict > div:first-child{font-size:19px;line-height:1;flex-shrink:0} .verdict b{font-size:15px;font-weight:800;letter-spacing:-.01em;display:block} .verdict .note{font-size:11.5px;line-height:1.4;margin-top:2px} .spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--orange); border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:7px} @keyframes sp{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){ .spin{animation:none} .sheet.sheet-enter{animation:none} .btn,.card .art,.iconbtn,.chip,.seasonrow{transition:none} .card:hover .art{transform:none} } /* ---------- 10. Touch-Geräte (iPhone/iPad/Samsung) ---------- */ /* Fingerbedienung: Ziele mind. 44px hoch (Apple HIG / Material Design), und kein Hover-Zoom auf Karten, weil Hover dort am Finger "kleben" bleibt. */ @media (hover:none) and (pointer:coarse){ .iconbtn{width:42px;height:42px} .rankPill{height:42px} .modeBtn{padding:11px 12px} .chip{padding:10px 16px} .linkbtn{padding:6px 2px} .card:hover .art{transform:none;box-shadow:none} .close{width:42px;height:42px} .close svg{width:20px;height:20px} .stepper button{width:48px;height:48px} /* Reihen lassen sich wischen -> Pfeile weg. Das Hero-Karussell wechselt nur per Punkt/Pfeil, dort bleiben die Pfeile und werden größer. */ .slidearrow{display:none} .heroarrow{width:44px;height:44px} .herodots button{width:12px;height:12px} } #toast{position:fixed;left:16px;right:16px;bottom:88px;z-index:70;max-width:560px;margin:0 auto; background:var(--up);border:1px solid var(--line);border-radius:9px;padding:12px 14px;font-size:13px;display:none} h1,h2,h3,p{margin:0} .stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px} .stat b{display:block;font-size:26px;font-weight:900;letter-spacing:-.03em;line-height:1.1} .stat span{font-size:11px;color:var(--dim);font-weight:600} .stats2{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px;margin:18px auto; max-width:var(--maxw)} .empty{padding:40px 16px;text-align:center;color:var(--dim);font-size:13px;line-height:1.6} .searchwrap{padding:70px 16px 0;max-width:var(--maxw);margin-left:auto;margin-right:auto} .badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.04em;color:var(--dim); border:1px solid var(--line);border-radius:5px;padding:2px 6px;margin-right:6px} .dloadr{display:flex;align-items:center;justify-content:center;padding:30px 0;color:var(--dim);font-size:13px} .rankrow{display:flex;align-items:center;gap:14px} .rankemoji{font-size:34px;line-height:1} .homeRankBadge{width:100%;max-width:var(--maxw);margin:0 auto;text-align:left;cursor:pointer; transition:border-color .15s} .homeRankBadge:hover{border-color:rgba(255,255,255,.3)} .centersearch{max-width:420px;margin:0 auto;text-align:center} .centersearch .inp{padding:10px 13px;font-size:14px} .ranklist{display:flex;flex-direction:column;gap:8px} .rankitem{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line); border-radius:10px;padding:10px 14px;opacity:.45;transition:opacity .15s,border-color .15s} .rankitem.done{opacity:1} .rankitem.current{opacity:1;border-color:var(--orange);background:linear-gradient(90deg,rgba(255,122,26,.12),transparent)} .rankitem .rkemoji{font-size:20px;width:26px;text-align:center;flex-shrink:0} .rankitem .rkname{font-weight:700;font-size:13.5px;flex:1} .rankitem .rkhours{font-size:11.5px;color:var(--dim);font-weight:600;white-space:nowrap} .rankitem .rkcheck{font-size:13px;color:var(--green);flex-shrink:0;width:16px;text-align:center} .lbrow{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line); border-radius:10px;padding:11px 14px;margin-bottom:8px} .lbrow.you{border-color:var(--orange);background:linear-gradient(90deg,rgba(255,122,26,.12),transparent)} .lbrow .lbplace{font-weight:900;font-size:15px;width:30px;text-align:center;color:var(--dim);flex-shrink:0} .lbrow.top3 .lbplace{color:var(--orange)} .lbrow .lbemoji{font-size:20px;width:26px;text-align:center;flex-shrink:0} .lbrow .lbname{font-weight:700;font-size:13.5px;flex:1;min-width:0} .lbrow .lbmeta{font-size:11.5px;color:var(--dim);font-weight:600} .lbrow .lbhours{font-weight:800;font-size:14px;white-space:nowrap;flex-shrink:0} .statbarrow{display:flex;align-items:center;gap:10px;margin-bottom:11px;font-size:12.5px} .statbarrow:last-child{margin-bottom:0} .statbarrow .sblabel{width:104px;flex-shrink:0;color:var(--dim);font-weight:600;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .statbarrow .sbtrack{flex:1;height:9px;background:var(--up);border-radius:5px;overflow:hidden} .statbarrow .sbtrack i{display:block;height:100%;background:var(--orange);border-radius:5px} .statbarrow .sbval{width:60px;text-align:right;flex-shrink:0;font-weight:700;color:var(--text)} .logtop{display:flex;flex-direction:column;gap:22px;margin-bottom:28px} /* z-index hier (nicht nur am .rankPanel) noetig: position:sticky/relative eroeffnet einen eigenen Stacking-Context, sonst gilt der z-index des Panels nur innerhalb der Sidebar und die spaeter im DOM stehenden Kacheln (#logGrid) malen darueber. */ .logsidebar{width:100%;position:relative;z-index:40} .logcenter{min-width:0} /* Erst ab 1100px: 270px Sidebar + 270px Ausgleichsspalte + Abstände brauchen ~660px, darunter (Tablet hochkant, Handy) bliebe für die Mitte zu wenig übrig — auf dem iPad waren es sonst nur 93px. Bis dahin untereinander statt nebeneinander. */ @media (min-width:1100px){ /* Dritte Spalte bleibt leer -> die mittlere Spalte ist auf der ganzen Seite zentriert statt durch die Sidebar nach rechts verschoben zu wirken. */ .logtop{display:grid;grid-template-columns:270px 1fr 270px;align-items:start;gap:28px} .logsidebar{position:sticky;top:86px} } /* Tablet hochkant: Rang-Box mittig und begrenzt, statt über die volle Breite */ @media (min-width:720px) and (max-width:1099px){ .logsidebar{max-width:420px;margin:0 auto} } .rankToggle{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card); border:1px solid var(--line);border-radius:12px;padding:13px 14px;cursor:pointer;color:inherit; font:inherit;transition:border-color .15s} .rankToggle:hover{border-color:rgba(255,255,255,.3)} .rankChevron{font-size:12px;color:var(--dim);flex-shrink:0;transition:transform .15s} .rankToggle.open .rankChevron{transform:rotate(180deg)} /* Ausklapp-Fenster liegt absolut über dem Inhalt darunter (eigene Ebene, z-index), wächst wie gehabt nach unten, verschiebt aber nichts darunter. */ .rankPanel{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40; background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.55); padding:10px;max-height:0;overflow:hidden;opacity:0;pointer-events:none; transition:max-height .2s ease,opacity .15s ease} .rankPanel.open{max-height:min(70vh,600px);overflow-y:auto;opacity:1;pointer-events:auto; scrollbar-width:none;-ms-overflow-style:none} .rankPanel.open::-webkit-scrollbar{display:none} .comment{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:8px} .comment .txt{color:var(--text);font-size:13px;line-height:1.5} .comment .row2{display:flex;justify-content:space-between;align-items:center;margin-top:6px} .linkbtn{background:none;border:0;color:var(--dim);cursor:pointer;font-size:11.5px;font-weight:600;padding:0} /* ---------- 11. Cookie-Einstellungen ---------- */ #cookieOverlay{display:none;position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.72); backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:16px;overflow-y:auto} #cookieOverlay.open{display:flex} /* Vom Inline-Skript im gesetzt: Dialog ist ab dem ersten Rendern sichtbar */ html.needs-consent #cookieOverlay{display:flex} .cookieBox{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px; width:100%;max-width:480px;margin:auto;box-shadow:0 20px 60px rgba(0,0,0,.6)} .cookieRow{display:flex;gap:11px;align-items:flex-start;background:var(--bg2);border:1px solid var(--line); border-radius:10px;padding:11px 13px;margin-bottom:9px;cursor:pointer} .cookieRow.locked{opacity:.7;cursor:default} .cookieRow input{margin-top:3px;width:17px;height:17px;accent-color:var(--orange);flex-shrink:0;cursor:pointer} .cookieRow.locked input{cursor:default} .cookieRow b{font-size:13.5px;display:block;margin-bottom:2px} .cookieRow .note{font-size:11.5px;line-height:1.45} .cookieRow .note b{display:inline;font-size:inherit;color:var(--text)} .cookieDetails{margin-top:12px;border-top:1px solid var(--line);padding-top:10px} .cookieDetails summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--dim); list-style:none;padding:4px 0} .cookieDetails summary::-webkit-details-marker{display:none} .cookieDetails summary::before{content:"▸ ";color:var(--orange)} .cookieDetails[open] summary::before{content:"▾ "} .cookieDetails table{width:100%;border-collapse:collapse;margin:8px 0;font-size:11.5px} .cookieDetails th,.cookieDetails td{border:1px solid var(--line);padding:6px 8px;text-align:left} .cookieDetails th{color:var(--text);background:var(--bg2)} .cookieDetails .tablewrap{overflow-x:auto} .cookieDetails .note{font-size:11.5px} /* ---------- 12. Rechtstexte (Impressum / Datenschutz) ---------- */ .legaltext{font-size:13.5px;line-height:1.65;color:var(--dim)} .legaltext h4{color:var(--text);font-size:15px;font-weight:800;margin:22px 0 8px} .legaltext h5{color:var(--text);font-size:13.5px;font-weight:700;margin:16px 0 6px} .legaltext p{margin:0 0 10px} .legaltext strong{color:var(--text);font-weight:700} .legaltext ul{margin:0 0 12px;padding-left:20px} .legaltext li{margin-bottom:5px} .legaltext a{color:var(--orange)} .legaltext .lead{color:var(--text)} .legaltext table{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:12px} .legaltext th,.legaltext td{border:1px solid var(--line);padding:8px 9px;text-align:left;vertical-align:top} .legaltext th{color:var(--text);font-weight:700;background:var(--bg2)} .legaltext .tablewrap{overflow-x:auto} .legaltext .todo{background:rgba(244,117,33,.12);border:1px solid rgba(244,117,33,.45); border-radius:10px;padding:12px 14px;margin-bottom:16px;color:var(--text)} /* ---------- 13. Eigene Bewertung (Sterne) ---------- */ .stars{display:inline-flex;align-items:center;gap:2px;line-height:1} .stars.ro span{color:var(--line);font-size:13px} .stars.ro span.on{color:var(--orange)} .starbtn{background:none;border:0;padding:2px 3px;cursor:pointer;font-size:26px;line-height:1; color:var(--line);transition:color .12s ease,transform .12s ease} .starbtn:hover{transform:scale(1.12)} .starbtn.on{color:var(--orange)} /* Beim Überfahren die Sterne bis zum Zeiger vorab einfärben */ #ratingPicker:hover .starbtn{color:var(--orange)} #ratingPicker .starbtn:hover ~ .starbtn{color:var(--line)} .providers{display:flex;gap:9px;flex-wrap:wrap} .provider{display:flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line); border-radius:20px;padding:5px 13px 5px 5px;font-size:12.5px;font-weight:600} .provider img{width:22px;height:22px;border-radius:5px;display:block} .seasonlist{display:flex;flex-direction:column;gap:8px} .seasonrow{display:flex;align-items:center;justify-content:space-between;background:var(--card); border:1px solid var(--line);border-radius:8px;padding:11px 14px;cursor:pointer;text-align:left;width:100%; transition:background-color .15s ease,border-color .15s ease} .seasonrow:hover{border-color:rgba(255,255,255,.3)} .seasonrow.done{border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.08)} .seasonrow .check{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto; display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .15s ease,border-color .15s ease} .seasonrow.done .check{background:var(--green);border-color:var(--green);color:#0B0B10} /* ---------- 14. Größere Screens: Inhalte nutzen mehr Platz ---------- */ @media (min-width:720px){ .pad,.rowhead,.scroller,.grid,.chips,.stats2,.searchwrap{padding-left:32px;padding-right:32px} .card{width:150px} .art{width:150px;height:214px} .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .grid .art{width:auto} .hero h2{font-size:44px} .rowhead h3{font-size:19px} .stat b{font-size:30px} .verdict{margin:0 auto;width:calc(100% - 64px);max-width:calc(var(--maxw) - 64px)} } @media (min-width:1100px){ .card{width:172px} .art{width:172px;height:246px} .grid{grid-template-columns:repeat(auto-fill,minmax(172px,1fr))} .hero h2{font-size:56px} } /* ---------- 15. Startseite (vor der Anmeldung) ---------- */ /* Nachbau von Logo/Startseite.png. Zweispaltig ab 900px (Logo | Registrierkarte), darunter gestapelt. Die Zierelemente sind reines CSS, damit die Seite auf jedem Seitenverhaeltnis sitzt — ein Hintergrundbild wuerde auf Handys beschneiden. */ #landingScreen{position:fixed;inset:0;z-index:100;overflow-y:auto;overflow-x:hidden; background: radial-gradient(120% 90% at 78% 8%, rgba(244,117,33,.10), transparent 55%), radial-gradient(90% 70% at 4% 62%, rgba(244,117,33,.07), transparent 60%), #08080C; -webkit-overflow-scrolling:touch;overscroll-behavior:contain} /* Rahmen fuer die Zierelemente: beschneidet sie am Bildrand. Ohne ihn ragt der gedrehte Schein unten heraus und erzeugt eine Bildlaufleiste. */ .lpDeco{position:absolute;inset:0;overflow:hidden;pointer-events:none} /* Punkteraster oben links */ .lpDots{position:absolute;top:38px;left:38px;width:150px;height:150px;pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.16) 1.6px, transparent 1.6px); background-size:17px 17px; -webkit-mask-image:linear-gradient(150deg,#000 25%,transparent 75%); mask-image:linear-gradient(150deg,#000 25%,transparent 75%)} /* Konzentrische Boegen oben rechts */ .lpArcs{position:absolute;top:-190px;right:-190px;width:520px;height:520px;border-radius:50%; pointer-events:none; border:14px solid rgba(244,117,33,.85); box-shadow: 0 0 0 26px transparent, 0 0 0 40px rgba(244,117,33,.55), 0 0 0 66px transparent, 0 0 0 80px rgba(244,117,33,.30)} /* Weicher oranger Schweif links */ .lpGlow{position:absolute;left:-14%;top:22%;width:56%;height:66%;pointer-events:none; background:radial-gradient(60% 50% at 40% 50%, rgba(244,117,33,.55), rgba(244,117,33,.14) 45%, transparent 72%); filter:blur(48px);transform:rotate(-18deg)} .lpInner{position:relative;min-height:100%;max-width:1180px;margin:0 auto; padding:48px 24px;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:44px} /* Kein Umbruch: sonst rutscht die Karte unter das Logo, statt dass beide Spalten gleichmaessig schmaler werden. Das Stapeln auf schmalen Bildschirmen uebernimmt weiter unten flex-direction:column. */ .lpTop{display:flex;align-items:center;justify-content:center;gap:clamp(24px,5vw,64px); width:100%;flex-wrap:nowrap} /* Beide Spalten gleich breit UND beide vollstaendig gefuellt. Nur so stimmt alles drei zugleich: die Trennlinie liegt auf der Bildmitte, die Luecken zu ihr sind links wie rechts gleich gross, und die sichtbare Flaeche ist mittig. Fuellt das Logo seine Spalte nicht aus, entsteht links eine groessere Luecke und die Anordnung wirkt nach rechts gerutscht. flex:1 1 420px laesst beide Spalten bei schmalen Fenstern gleichmaessig schrumpfen. */ .lpLogoWrap{flex:1 1 420px;max-width:420px;min-width:0;display:flex;justify-content:center} .lpLogo{width:100%;max-width:420px;height:auto;display:block;border-radius:22%; box-shadow:0 0 60px rgba(244,117,33,.45), 0 0 120px rgba(244,117,33,.18)} .lpDivider{width:1px;align-self:stretch;min-height:220px; background:linear-gradient(180deg,transparent,rgba(255,255,255,.22),transparent)} /* Registrierkarte */ .lpCard{flex:1 1 420px;max-width:420px;min-width:0;background:rgba(20,21,28,.92); border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:26px 26px 24px; box-shadow:0 24px 60px rgba(0,0,0,.55)} .lpCardTitle{margin:0 0 18px;text-align:center;font-size:clamp(16px,2.2vw,20px); font-weight:900;letter-spacing:.06em;text-transform:uppercase} .lpLabel{display:block;margin-bottom:7px;font-size:11px;font-weight:800; letter-spacing:.10em;text-transform:uppercase;color:var(--dim)} .lpInput{width:100%;height:46px;margin-bottom:16px;padding:0 14px;border-radius:10px; border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05); color:var(--text);font-family:inherit;font-size:15px; transition:border-color .15s ease, background-color .15s ease} .lpInput::placeholder{color:#6D7280} .lpInput:focus{outline:none;border-color:var(--orange);background:rgba(255,255,255,.08)} .lpError{display:none;margin:-6px 0 12px;color:var(--orange);font-size:13px;line-height:1.4} .lpError.on{display:block} .lpRegister{width:100%;height:46px;border:0;border-radius:10px;cursor:pointer; background:var(--orange);color:#1A0E04;font-family:inherit;font-size:13px;font-weight:900; letter-spacing:.09em;text-transform:uppercase; transition:filter .15s ease, transform .12s ease} .lpRegister:hover{filter:brightness(1.08)} .lpRegister:active{transform:scale(.985)} .lpRegister[disabled]{opacity:.6;cursor:default} /* Haupt-Knopf */ .lpCta{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer; width:min(440px,100%);padding:13px 24px;border:0;border-radius:12px; background:linear-gradient(180deg,#F8863A,#F0640F);color:#fff;font-family:inherit; box-shadow:0 10px 30px rgba(244,117,33,.34); transition:filter .15s ease, transform .12s ease, box-shadow .15s ease} .lpCta:hover{filter:brightness(1.06);box-shadow:0 14px 40px rgba(244,117,33,.46)} .lpCta:active{transform:scale(.99)} .lpCtaMain{font-size:clamp(18px,2.4vw,23px);font-weight:900;letter-spacing:.02em; text-transform:uppercase;line-height:1.1} .lpCtaSub{font-size:10px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;opacity:.92} /* Fusszeile */ .lpFoot{width:100%;display:flex;align-items:center;gap:16px;margin-top:8px} .lpFootIcons{display:flex;gap:12px;flex:0 0 auto;color:rgba(255,255,255,.45)} .lpFootIcons svg{width:22px;height:22px;fill:currentColor} .lpFootLine{flex:1 1 auto;height:1px;background:rgba(255,255,255,.16)} .lpWordmark{flex:0 0 auto;font-size:clamp(19px,3vw,30px);font-weight:900;letter-spacing:-.02em} .lpWordmark span{color:var(--orange)} /* Gestapelt auf schmalen Bildschirmen: Trennlinie weg, Karte volle Breite. Die zweite Bedingung (max-height:520px) faengt Handys quer gehalten ab. Ein iPhone 16/17 Pro Max meldet quer 956px Breite und faellt damit aus der 899er-Grenze -- es haette als einziges iPhone den zweispaltigen Aufbau gezeigt, waehrend jedes andere gestapelt bleibt. Ueber die Hoehe ist das eindeutiger zu treffen als ueber die Breite: quer gehalten hat kein Handy mehr als 440px Hoehe, ein Tablet quer dagegen ueber 700px. 520px ist dieselbe Schwelle, mit der weiter oben schon der Hero flacher gestellt wird. */ @media (max-width:899px), (max-height:520px){ /* Auch gestapelt mittig im Bild. Unbedenklich, weil .lpInner mit min-height arbeitet: ist der Inhalt hoeher als das Fenster, waechst der Block mit, statt oben abgeschnitten zu werden. */ .lpInner{padding:30px 18px;gap:30px} .lpTop{flex-direction:column;gap:26px} /* Gestapelt laeuft die Flex-Achse senkrecht — dort wuerde die feste Spalten- breite aus dem Zweispalter als HOEHE wirken. Deshalb zuruecksetzen. */ .lpLogoWrap{flex:0 0 auto} .lpDivider{display:none} .lpCard{flex:1 1 auto;width:100%;max-width:420px} .lpArcs{width:340px;height:340px;top:-140px;right:-140px;border-width:10px; box-shadow:0 0 0 18px transparent, 0 0 0 28px rgba(244,117,33,.5), 0 0 0 46px transparent, 0 0 0 56px rgba(244,117,33,.26)} .lpDots{width:104px;height:104px;top:22px;left:22px;background-size:15px 15px} } /* Handys: alles eine Stufe kleiner — Logo, Karte, Felder, Knopf und Fussleiste. Sonst wirkt die Startseite auf kleinen Bildschirmen ueberdimensioniert. */ @media (max-width:520px){ .lpInner{padding:24px 16px;gap:22px} .lpTop{gap:20px} .lpLogo{width:clamp(112px,32vw,150px)} .lpCard{padding:20px 18px 18px;border-radius:16px} .lpCardTitle{font-size:15px;margin-bottom:14px} .lpLabel{font-size:10px;margin-bottom:6px} .lpInput{height:42px;font-size:14px;margin-bottom:13px} .lpRegister{height:42px;font-size:12px} .lpCta{padding:11px 18px;border-radius:11px} .lpCtaMain{font-size:19px} .lpCtaSub{font-size:9px} .lpFoot{gap:12px} .lpFootIcons{gap:10px} .lpFootIcons svg{width:18px;height:18px} .lpWordmark{font-size:17px} } /* ---------- 16. Anmeldeseite (im Look der Startseite) ---------- */ /* Gleiche Buehne wie #landingScreen: dunkler Grund mit orangem Schein, dazu die Zierelemente .lpDots/.lpArcs/.lpGlow aus Abschnitt 15. Die Formteile werden hier gezielt ueberschrieben — .panel/.inp/.btn bleiben im Rest der App unberuehrt. */ #authScreen{position:fixed;inset:0;z-index:100;overflow-y:auto;overflow-x:hidden; background: radial-gradient(120% 90% at 78% 8%, rgba(244,117,33,.10), transparent 55%), radial-gradient(90% 70% at 4% 62%, rgba(244,117,33,.07), transparent 60%), #08080C; -webkit-overflow-scrolling:touch;overscroll-behavior:contain} /* Inhalt ueber den Zierelementen, mittig und vertikal ausbalanciert */ .authPad{position:relative;z-index:1;max-width:430px; min-height:100%;padding:40px 20px 36px; display:flex;flex-direction:column;justify-content:center;text-align:center} .authLogo{width:78px;height:78px;margin:0 auto 12px;display:block;border-radius:22%; box-shadow:0 0 34px rgba(244,117,33,.42), 0 0 70px rgba(244,117,33,.16)} .authWordmark{font-size:24px;font-weight:900;letter-spacing:-.02em;margin-bottom:2px} .authWordmark span{color:var(--orange)} #authTitle{font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--dim);margin:0 0 20px} /* Karten wie auf der Startseite */ #authScreen .panel{background:rgba(20,21,28,.92);border:1px solid rgba(255,255,255,.10); border-radius:18px;padding:24px 24px 22px;box-shadow:0 24px 60px rgba(0,0,0,.55); text-align:left;margin:0} #authScreen .eyebrow{font-size:11px;font-weight:800;letter-spacing:.10em; text-transform:uppercase;color:var(--dim)} #authScreen .inp{width:100%;height:46px;padding:0 14px;border-radius:10px; border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05); color:var(--text);font-family:inherit;font-size:15px; transition:border-color .15s ease, background-color .15s ease} #authScreen .inp::placeholder{color:#6D7280} #authScreen .inp:focus{outline:none;border-color:var(--orange);background:rgba(255,255,255,.08)} #authScreen .btn.orange{height:46px;border-radius:10px;background:var(--orange); color:#1A0E04;font-size:13px;font-weight:900;letter-spacing:.09em;text-transform:uppercase; transition:filter .15s ease, transform .12s ease} #authScreen .btn.orange:hover{filter:brightness(1.08)} #authScreen .btn.orange:active{transform:scale(.985)} #authScreen .btn.line{height:46px;border-radius:10px;font-size:13px;font-weight:800} /* Der Block sitzt etwas unterhalb der Mitte — mehr Luft oben als unten. Nur bei ausreichend hohem Fenster, sonst wuerden die unteren Links aus dem Bild rutschen und die Seite muesste gescrollt werden. */ @media (min-height:760px){ .authPad{padding-top:164px} } /* Die Zierelemente wirken neben dem schmalen Formular staerker als auf der breiten Startseite — hier deshalb zurueckgenommen. */ #authScreen .lpArcs{opacity:.55} #authScreen .lpGlow{opacity:.6} #authScreen .lpDots{opacity:.7} @media (max-width:520px){ .authPad{padding:32px 16px 28px} .authLogo{width:66px;height:66px} .authWordmark{font-size:21px} #authScreen .panel{padding:20px 18px 18px} } /* Fusszeile am unteren Bildrand statt direkt unter dem Knopf — wie im Entwurf. Der Innenabstand von .lpInner bleibt dabei oben und unten gleich gross, damit der Block darueber weiterhin mittig im Bild sitzt. Nur bei genug Hoehe, sonst wuerde die absolut gesetzte Leiste den Inhalt ueberdecken. */ @media (min-width:900px) and (min-height:720px){ .lpInner{padding-top:104px;padding-bottom:104px} .lpFoot{position:absolute;left:24px;right:24px;bottom:34px;width:auto;margin-top:0} } /* Auf breiten Bildschirmen steht der Block bewusst 100 px links der Mitte. Umgesetzt ueber zusaetzlichen Innenabstand rechts: das verschiebt nur den Inhalt im Textfluss (Logo, Karte, Knopf). Die Fussleiste ist absolut an .lpInner ausgerichtet und bleibt davon unberuehrt, spannt also weiter ueber die volle Breite. Zum Zurueckstellen auf mittig: --lpVersatz auf 0 setzen. Erst ab 1200 px, darunter waere links kein Platz mehr. */ @media (min-width:1200px) and (min-height:720px){ .lpInner{--lpVersatz:100px; padding-right:calc(24px + var(--lpVersatz) * 2)} } /* ---------- 17. Rueckmelde-Dialog ---------- */ /* Aufbau wie beim Cookie-Dialog: dunkler Grund ueber der Seite, Kasten mittig. Ohne eigene Regeln rutschte der Kasten ans Seitenende und stand links. */ #feedbackOverlay{display:none;position:fixed;inset:0;z-index:125;background:rgba(0,0,0,.72); backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:16px;overflow-y:auto} #feedbackOverlay.open{display:flex} #feedbackOverlay .sheetbox{background:var(--card);border:1px solid var(--line);border-radius:14px; padding:20px;width:100%;max-width:460px;margin:auto;box-shadow:0 20px 60px rgba(0,0,0,.6)} #fbStars{display:flex;gap:6px} #fbStars button{background:none;border:0;cursor:pointer;font-size:26px;line-height:1; color:rgba(255,255,255,.22);padding:0;transition:color .12s ease,transform .12s ease} #fbStars button.on{color:var(--orange)} #fbStars button:active{transform:scale(.9)} /* ---------- 18. Admin-Bereich ---------- */ /* Nutzt die volle Seitenbreite statt der schmalen Lesespalte: hier stehen Tabellen und Diagramme, keine Fliesstexte. Der obere Abstand haelt den Inhalt unter der fest stehenden Kopfleiste — dieselben 70px wie .viewtop in den uebrigen Ansichten, sonst rutschen die Reiter darunter und sind nicht mehr erkennbar. */ .adminPad{max-width:1500px;margin:0 auto;padding:70px 22px 40px} .adminHead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px; flex-wrap:wrap;margin-bottom:16px} /* Kennzahlen: so viele Kacheln nebeneinander wie hineinpassen */ .adminCards{display:grid;gap:12px;margin-bottom:18px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .adminCard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px} .adminCard b{display:block;font-size:30px;line-height:1.1;font-weight:900;margin-bottom:2px} .adminCard span{font-size:12px;color:var(--dim);font-weight:600} .adminCard .sub{display:block;margin-top:8px;font-size:11.5px;color:var(--dim);font-weight:500} /* Zwei Spalten ab 1100px — links das Breite, rechts das Schmale */ .adminGrid{display:grid;gap:14px;grid-template-columns:1fr} @media (min-width:1100px){ .adminGrid.split{grid-template-columns:2fr 1fr} } .adminBox{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px} .adminBox h3{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--dim);margin:0 0 12px} /* Zeitraum-Auswahl ueber dem Diagramm */ .adminRange{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px} .adminRange label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:800; letter-spacing:.08em;text-transform:uppercase;color:var(--dim)} .adminRange input[type=date]{height:38px;padding:0 10px;border-radius:9px;border:1px solid var(--line); background:var(--bg2);color:var(--text);font-family:inherit;font-size:13px;color-scheme:dark} .adminRange .btn{height:38px;padding:0 16px;font-size:12.5px} .adminLegend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--dim);margin-top:10px} .adminLegend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px} /* Tabellen im Adminbereich duerfen breiter atmen */ .adminBox table{width:100%;border-collapse:collapse;font-size:13px} .adminBox th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase; color:var(--dim);font-weight:800;padding:0 10px 8px 0;border-bottom:1px solid var(--line)} .adminBox td{padding:9px 10px 9px 0;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle} .adminBox tr:last-child td{border-bottom:0} /* Breite Tabellen scrollen in ihrem eigenen Kasten. Ohne diese Regel schiebt die Kontentabelle auf schmalen Bildschirmen die ganze Seite zur Seite. */ .adminBox .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .adminBox .tablewrap table{min-width:640px} .adminBox{min-width:0} /* Balken direkt in der Tabellenzeile — zeigt Verhaeltnisse ohne zweites Diagramm */ .adminBar{height:7px;border-radius:4px;background:var(--orange);min-width:3px} .adminBarCell{width:38%;min-width:90px} /* Rueckmeldungen als Karten untereinander, mittig in der Spalte */ .fbCard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px; margin:0 auto 12px;max-width:820px} .fbCard.neu{border-left:3px solid var(--orange)} .fbCard.erledigt{opacity:.72} .fbTop{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px} .fbText{white-space:pre-wrap;line-height:1.55;margin-bottom:12px} .fbActions{display:flex;gap:8px;flex-wrap:wrap} @media (max-width:700px){ /* Auf schmalen Schirmen ist die Kopfleiste hoeher (der Modus-Umschalter braucht dort mehr Platz), deshalb hier mehr Abstand als die 70px oben. */ .adminPad{padding:88px 14px 32px} .adminCard b{font-size:25px} } /* ---------- 19. To-do-Liste im Admin-Bereich ---------- */ .todoAdd{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap} .todoAdd input{flex:1 1 260px;min-width:0;height:42px;padding:0 14px;border-radius:10px; border:1px solid var(--line);background:var(--bg2);color:var(--text); font-family:inherit;font-size:14px} .todoAdd input:focus{outline:none;border-color:var(--orange)} .todoAdd .btn{height:42px;padding:0 20px} .todoItem{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:11px; background:var(--bg2);border:1px solid var(--line);margin-bottom:9px} .todoItem.erledigt{opacity:.55} .todoItem.erledigt .todoText{text-decoration:line-through} /* Grosszuegige Anfassflaeche: das Kaestchen selbst waere auf dem Handy zu klein */ .todoCheck{flex:0 0 auto;width:22px;height:22px;border-radius:6px;border:2px solid var(--line); background:none;cursor:pointer;display:grid;place-items:center;padding:0;margin-top:1px; color:transparent;font-size:14px;font-weight:900;transition:border-color .12s ease,background-color .12s ease} .todoCheck:hover{border-color:var(--orange)} .todoItem.erledigt .todoCheck{background:var(--green);border-color:var(--green);color:#0B1B10} .todoBody{flex:1 1 auto;min-width:0} .todoText{line-height:1.45;word-break:break-word} .todoMeta{margin-top:4px;font-size:11.5px;color:var(--dim)} .todoDel{flex:0 0 auto;background:none;border:0;color:var(--dim);cursor:pointer;font-size:18px; line-height:1;padding:4px 6px;border-radius:6px} .todoDel:hover{color:var(--orange);background:rgba(255,255,255,.06)} /* Herkunft: aus einer Rueckmeldung entstanden */ .todoQuelle{display:inline-block;margin-top:5px;font-size:11px;font-weight:800; letter-spacing:.05em;text-transform:uppercase;color:var(--orange); background:rgba(244,117,33,.12);border-radius:5px;padding:2px 7px} /* Rueckmeldungen nebeneinander statt in einer schmalen Spalte — nutzt die Breite */ .fbGrid{display:grid;gap:12px;grid-template-columns:1fr} @media (min-width:1150px){ .fbGrid{grid-template-columns:1fr 1fr} } /* ---------- 20. Fingerbedienung: Reaktion und flüssiges Wischen ---------- */ /* --- Sofort reagierende Tipps --- Ohne touch-action wartet der Browser nach jedem Tipp rund 300 ms ab, ob ein Doppeltipp zum Hineinzoomen folgt. Genau diese Wartezeit fühlt sich an, als würde die Seite hängen. "manipulation" erlaubt Scrollen und Zwei-Finger-Zoom weiter, schaltet aber den Doppeltipp-Zoom ab — die Reaktion kommt sofort. */ button, a, input, select, textarea, label, .card, .chip, .modeBtn, .burgerItem, .todoCheck, .todoDel, .lpCta, .lpRegister, .rankPill, .iconbtn { touch-action: manipulation; } /* Bedienelemente sollen sich beim Wischen nicht wie Text markieren lassen — sonst bricht eine Wischgeste in eine Textauswahl um und wirkt wie ein Hänger. Inhalte (Titel, Kommentare, Rechtstexte) bleiben markierbar. */ #top, nav, .modeSwitch, .burgerMenu, .chip, .todoCheck, .todoDel, .slidearrow, .heroarrow, .herodots, .lpCta { -webkit-user-select: none; user-select: none; } @media (hover:none) and (pointer:coarse){ /* --- Große genug zum Treffen --- 44px ist das Mindestmaß aus Apples und Googles Richtlinien. Die Chips lagen bei 38px, die Kästchen der To-do-Liste bei 22px. */ .chip{min-height:44px;display:inline-flex;align-items:center;padding:0 16px} /* Eingabefelder und Knoepfe kamen mit ihrem Innenabstand auf 39px. Eine Mindesthoehe statt groesserer Abstaende, damit sich am Aussehen sonst nichts aendert. */ .inp{min-height:46px} .btn{min-height:44px} .adminRange input[type=date]{height:44px} .adminRange .btn{height:44px} .todoAdd input, .todoAdd .btn{height:46px} /* Sichtbar bleibt das Kästchen klein, die Trefferfläche wächst unsichtbar */ .todoCheck{position:relative} .todoCheck::after{content:"";position:absolute;top:50%;left:50%; transform:translate(-50%,-50%);width:44px;height:44px} .todoDel{position:relative;font-size:22px;padding:8px 10px} .todoDel::after{content:"";position:absolute;top:50%;left:50%; transform:translate(-50%,-50%);width:44px;height:44px} /* --- Weniger Rechenarbeit beim Scrollen --- backdrop-filter zwingt den Browser, den Hintergrund hinter der fest stehenden Leiste in JEDEM Bild neu weichzuzeichnen. Auf Telefonen ist das die häufigste Ursache für ruckelndes Scrollen. Deckende Farbe statt Unschärfe sieht bei diesem dunklen Hintergrund praktisch gleich aus. */ #top{backdrop-filter:none;background:#0B0B10} nav{backdrop-filter:none;background:#0B0B10} .heroarrow, .slidearrow{backdrop-filter:none;background:rgba(0,0,0,.72)} /* Große Weichzeichner kosten je Bild viel Füllrate. Auf Telefonen deutlich schwächer — der Bildeindruck bleibt, die Last sinkt spürbar. */ .bgblur{filter:blur(18px) brightness(.42)} .lpGlow{filter:blur(30px)} /* Reihen außerhalb des Sichtfensters gar nicht erst zeichnen. Die Startseite hat ein Dutzend Reihen mit je bis zu 100 Kacheln; ohne das rechnet der Browser beim Scrollen alle mit. contain-intrinsic-size hält dabei die Bildlaufleiste ruhig, sonst springt sie beim Ein- und Ausblenden. */ .row{content-visibility:auto;contain-intrinsic-size:auto 251px} .fbCard{content-visibility:auto;contain-intrinsic-size:auto 220px} /* Eigene Ebene für die waagerechten Kachelreihen: das Wischen läuft dann unabhängig vom Rest der Seite. */ .scroller{will-change:scroll-position} } /* Wer Bewegung reduziert haben möchte, bekommt keine Übergänge aufgedrängt. Nebeneffekt: auf schwachen Geräten fällt spürbar Arbeit weg. */ @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; transition-duration:.01ms !important; transition-delay:0s !important; scroll-behavior:auto !important; } } /* ---------- 21. Sprachauswahl ---------- */ /* Auf Startseite und Anmeldung oben rechts — gegenüber vom Admin-Knopf, damit sich beide nicht ins Gehege kommen. In der Kopfleiste sitzt dieselbe Auswahl in der Reihe neben Rang und Menü (Zusatzklasse .inHeader). Aufgebaut wie das Burger-Menü daneben: gleiche Kartenfarbe, gleicher Rahmen, gleiches Auf- und Zublenden. Ein