/* Theme Name: YaLMS Theme URI: https://example.com/yalms Author: YaLMS Author URI: https://example.com/yalms Description: Frontend-Theme fuer YaLMS (Sportligen-Verwaltung) - dunkles Liga-Dashboard-Design mit Naechstes-Spiel-, Anmeldungs-, Ergebnis- und Account-Kacheln, Liga-Slider, News/Team/Community-Spalten. Version: 0.1.35 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: yalms-theme */ /* Selbst gehostete Schriften (statt Google Fonts extern) - vermeidet die Uebertragung der Besucher-IP an Google-Server beim Seitenaufruf ohne Einwilligung (siehe LG Muenchen, Az. 3 O 17493/20). */ @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-condensed-500.woff2') format('woff2')} @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-condensed-600.woff2') format('woff2')} @font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-condensed-700.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/inter-variable.woff2') format('woff2')} /* Design Tokens - 1:1 aus dem bereitgestellten Frontend-Template uebernommen. */ /* Design Tokens */ :root{--accent:#f2a65a;--accent-rgb:242,166,90;--tint:255,255,255;--on-primary:#0a0b0d;--glow-b:89,103,255;--bar-bg:rgba(7,9,12,.92);--bar-bg-strong:rgba(7,9,12,.97);--footer-bg:rgba(9,11,14,.95)} :root,[data-theme="light"]{--text-xs:.68rem;--text-sm:.76rem;--text-base:.86rem;--text-lg:1rem;--text-xl:1.4rem;--space-1:.2rem;--space-2:.4rem;--space-3:.6rem;--space-4:.8rem;--space-5:1rem;--space-6:1.2rem;--space-8:1.6rem;--space-10:2rem;--space-12:2.4rem;--space-16:3rem;--radius-sm:3px;--radius-md:4px;--radius-lg:4px;--radius-xl:6px;--radius-full:9999px;--font-display:'Barlow Condensed',Impact,sans-serif;--font-body:'Inter',Arial,sans-serif;--content-frame:90%;--color-bg:#0a0b0d;--color-surface:#111317;--color-surface-2:#171a20;--color-border:rgba(255,255,255,.09);--color-divider:rgba(255,255,255,.12);--color-text:#f6f7fb;--color-text-muted:#aeb4c0;--color-primary:var(--accent);--color-primary-soft:rgba(var(--accent-rgb),.15);--color-secondary:#5967ff;--shadow-md:0 16px 36px rgba(0,0,0,.35);--gradient-panel:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));--league-red:#ff4d43;--league-orange:#ff9a24;--league-gold:#ffd84a;--league-green:#57dd68;--league-blue:#45b8ff} [data-theme="dark"]{color-scheme:dark} *,*:before,*:after{box-sizing:border-box} [hidden]{display:none!important} html{scroll-behavior:smooth} body{margin:0;min-height:100vh;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:radial-gradient(circle at top right,rgba(var(--accent-rgb),.15),transparent 20%),radial-gradient(circle at bottom left,rgba(var(--glow-b),.12),transparent 22%),var(--color-bg)} a{color:inherit;text-decoration:none} img{display:block;max-width:100%;height:auto} button{font:inherit} .skip-link{position:absolute;left:-999px} .skip-link:focus{left:10px;top:10px;z-index:100;background:#fff;color:#000;padding:10px;border-radius:var(--radius-md)} .site-shell{display:flex;flex-direction:column;min-height:100vh} /* Rollen-Vorschau (Rechteverwaltung > "Ansicht als Rolle"): gut sichtbare Hinweisleiste ueber dem Header, damit nie unklar ist, dass man gerade simulierte Rechte sieht. Gleiches Markup wie im Backend (admin.css). */ .yalms-preview-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:8px 16px;background:#3a2a00;color:#ffd84a;border-bottom:1px solid rgba(255,216,74,.4);font-size:.8rem;position:relative;z-index:60} .yalms-preview-banner-text{flex:1 1 320px} .yalms-preview-banner-links{display:flex;gap:10px} .yalms-preview-banner-links a{color:#ffd84a;text-decoration:underline} .yalms-preview-stop{margin:0} .yalms-preview-stop button{font:inherit;font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;padding:5px 12px;border-radius:var(--radius-md);border:1px solid rgba(255,216,74,.6);background:rgba(255,216,74,.15);color:#ffd84a;cursor:pointer} .yalms-preview-stop button:hover{background:#ffd84a;color:#141414} .rl-group-nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 16px;padding:8px 12px;border:1px solid var(--color-border,rgba(var(--tint),.14));border-radius:var(--radius-md,10px);background:var(--color-surface-2,rgba(var(--tint),.04))} .rl-group-nav-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-right:6px} .rl-group-nav a{font-size:.85rem;font-weight:600;padding:4px 12px;border-radius:999px;border:1px solid var(--color-border,rgba(var(--tint),.2));color:inherit;text-decoration:none} .rl-group-nav a:hover,.rl-group-nav a.is-active{background:var(--league-orange,#f2a65a);border-color:var(--league-orange,#f2a65a);color:#141414} .rl-comp-box>.rl-group-nav{margin:2px 12px 14px;padding:0;border:0;background:transparent} .rl-group-ligen{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:16px;font-size:.88rem} .yalms-viewas-banner{background:rgba(87,160,255,.16);color:#bcd9ff;border-bottom-color:rgba(87,160,255,.5)} .yalms-viewas-banner .yalms-preview-banner-links a{color:#bcd9ff} .yalms-viewas-banner .yalms-preview-stop button{border-color:rgba(87,160,255,.7);color:#bcd9ff} .yalms-viewas-banner .yalms-preview-stop button:hover{background:#bcd9ff;color:#141414} .yalms-viewas-switch{display:flex;gap:6px;margin:0} .yalms-viewas-switch input{font:inherit;font-size:.78rem;padding:4px 8px;border-radius:6px;border:1px solid rgba(87,160,255,.6);background:rgba(0,0,0,.25);color:inherit;min-width:150px;margin:0} .yalms-viewas-switch button{font:inherit;font-size:.74rem;font-weight:600;padding:4px 10px;border-radius:6px;border:1px solid rgba(87,160,255,.7);background:transparent;color:#bcd9ff;cursor:pointer;margin:0} .yalms-viewas-switch button:hover{background:#bcd9ff;color:#141414} .content-frame{width:min(var(--content-frame),1600px);margin-inline:auto;padding-inline:0} .sticky-header-group{position:sticky;top:0;z-index:50} .site-header{height:150px;backdrop-filter:blur(16px);background-color:var(--bar-bg);border-bottom:1px solid var(--color-border)} .header-inner{height:100%;display:grid;grid-template-columns:1fr minmax(0,160px) 1fr;grid-template-rows:minmax(0,1fr);align-items:stretch;gap:10px} .nav-menu{display:contents} .nav-left{grid-column:1;grid-row:1} .brand{grid-column:2;grid-row:1} .nav-right{grid-column:3;grid-row:1} .nav-side{display:flex;align-items:center;gap:24px} .nav-left{justify-content:flex-end} .nav-right{justify-content:flex-start} .nav-side a{font-size:var(--text-sm);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.03em;padding-bottom:4px;border-bottom:2px solid transparent;white-space:nowrap} .nav-side a.is-active,.nav-side a:hover{color:var(--color-primary);border-color:var(--color-primary)} /* Konto-Dropdown im Header - Desktop-Variante als absolut positioniertes Popup, gleiches Grundmuster wie .search-popup (max-height/opacity-Transition statt display:none, damit sie animiert werden kann). */ .konto-nav{position:relative} .konto-toggle{display:flex;align-items:center;gap:6px;background:transparent;border:none;border-bottom:2px solid transparent;padding:0 0 4px;font-family:inherit;line-height:inherit;color:var(--color-text-muted);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.03em;cursor:pointer;white-space:nowrap} .konto-toggle:hover,.konto-toggle[aria-expanded="true"]{color:var(--color-primary)} .konto-caret{transition:transform .2s ease;flex:none} .konto-toggle[aria-expanded="true"] .konto-caret{transform:rotate(180deg)} .konto-popup{position:absolute;top:100%;right:0;margin-top:12px;min-width:200px;display:flex;flex-direction:column;gap:2px;padding:10px;max-height:0;opacity:0;overflow:hidden;background:var(--color-surface);border:1px solid transparent;border-radius:var(--radius-md);box-shadow:none;transition:max-height .25s ease,opacity .2s ease,border-color .15s ease;z-index:52} .konto-popup.is-open{max-height:320px;opacity:1;border-color:var(--color-border);box-shadow:var(--shadow-md)} .konto-popup .link-button,.konto-popup button.link-button{display:block;width:100%;text-align:left;background:none;border:none;padding:6px 4px;font:inherit;font-size:var(--text-sm);color:var(--color-primary);cursor:pointer;white-space:nowrap} .konto-popup .link-button:hover{text-decoration:underline} .konto-logout-form{margin:0} .konto-popup .konto-sep{width:100%;margin:6px 0;border:none;border-top:1px solid var(--color-border)} .konto-toggle .rl-navbadge{margin-left:0} .brand{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 0} .brand img{flex:1;min-height:0;width:auto} .brand-title{font-family:var(--font-display);font-size:1.1rem;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap} .brand-tagline{font-size:.62rem;line-height:1.3;letter-spacing:.02em;color:var(--color-text-muted);text-align:center;white-space:nowrap} /* Utility-Leiste ueber dem Header: Breadcrumb links, Icons rechts, transparenter BG */ .utility-bar{backdrop-filter:blur(16px);background-color:var(--bar-bg);position:relative;z-index:51} .utility-bar-inner{display:flex;align-items:center;justify-content:space-between;height:38px;gap:16px} .breadcrumb{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--color-text-muted);min-width:0} .breadcrumb a{color:var(--color-text-muted)} .breadcrumb a:hover{color:var(--color-primary)} .breadcrumb-sep{opacity:.5} .breadcrumb-current{color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .utility-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto} .utility-icon-btn{width:32px;height:32px;display:grid;place-items:center;border-radius:9999px;border:1px solid transparent;background:transparent;color:var(--color-text-muted);cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease} .utility-icon-btn img{width:16px;height:16px} .utility-icon-btn:hover{color:var(--color-text);background:rgba(var(--tint),.06)} .utility-icon-btn[aria-expanded="true"]{color:var(--color-primary);background:var(--color-primary-soft);border-color:var(--color-primary)} .search-popup{position:absolute;top:100%;right:max(0px,calc((100% - min(var(--content-frame),1600px)) / 2));width:250px;max-height:0;opacity:0;overflow:hidden;background:var(--color-surface);border:1px solid transparent;border-radius:var(--radius-md);box-shadow:none;transition:max-height .25s ease,opacity .2s ease,border-color .15s ease;z-index:52} .search-popup.is-open{max-height:130px;opacity:1;border-color:var(--color-border);box-shadow:var(--shadow-md)} .search-form{display:flex;flex-direction:column;gap:8px;padding:12px} .search-form input{width:100%;height:36px;padding:0 12px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text);font-size:.82rem} .search-form input::placeholder{color:var(--color-text-muted)} .search-form button{width:100%;height:34px;border-radius:var(--radius-md);border:1px solid transparent;background:var(--color-primary);color:var(--on-primary);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:.72rem;cursor:pointer} .site-main{padding:10px 0} .hero-grid,.content-columns,.league-grid{display:grid;gap:10px;grid-auto-rows:minmax(70px,auto)} .hero-grid{grid-template-columns:repeat(var(--grid-columns,6),minmax(0,1fr));align-items:stretch;margin-bottom:10px} .grid-span-1{grid-column:span 1} .grid-span-2{grid-column:span 2} .grid-span-3{grid-column:span 3} .grid-span-4{grid-column:span 4} .grid-span-5{grid-column:span 5} .grid-span-6{grid-column:span 6} .row-fixed-height{height:300px} /* Reihe "News & Blog / LiveStreams / Mediathek / SocialMedia": SocialMedia hat mit 6 Zeilen (je 55px + Abstand) mehr Inhalt als die Standardhoehe (300px) fasst - Nutzer musste scrollen, um alle Kacheln/Links zu sehen. Alle vier Karten dieser Reihe bekommen deshalb gemeinsam mehr Hoehe (per data-widget-key, robust gegen Drag&Drop-Umsortierung), damit die komplette SocialMedia-Liste ohne Scrollen sichtbar ist. */ .content-frame-card[data-widget-key="news_card"], .content-frame-card[data-widget-key="socialmedia_card"], .content-frame-card[data-widget-key="rundenliga_livestreams"], .content-frame-card[data-widget-key="rundenliga_mediathek"]{height:480px} .panel{background:var(--gradient-panel),var(--color-surface);border:1px solid var(--color-border);border-radius:4px;padding:0;box-shadow:var(--shadow-md);overflow:hidden} .content-frame-card{display:flex;flex-direction:column} .cf-head{display:flex;align-items:center;gap:10px;height:52px;padding:0 10px;background:rgba(var(--tint),.03);border-bottom:1px solid var(--color-border);overflow:hidden} .cf-head img{flex:0 0 auto;max-height:32px;width:auto} .cf-head-text{display:flex;flex-direction:column;gap:2px;min-width:0} .cf-title{font-family:var(--font-display);font-size:1.05rem;line-height:1;text-transform:uppercase;letter-spacing:.03em;margin:0;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cf-subtitle{margin:0;font-size:.72rem;color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cf-body{display:flex;flex-direction:column;gap:10px;padding:10px;flex:1;min-height:0;overflow-y:auto} .cf-foot{display:flex;align-items:center;justify-content:stretch;min-height:50px;padding:10px;border-top:1px solid var(--color-border);background:rgba(var(--tint),.02);margin-top:auto} .cf-foot-action{width:100%;min-height:30px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;border-radius:var(--radius-md);margin:0;font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:.72rem;border:1px solid transparent;background:linear-gradient(180deg,rgba(var(--accent-rgb),.82),rgba(238,38,38,.82));color:#fff;transition:border-color .15s ease} .cf-foot-action:hover{background:linear-gradient(180deg,#f2a65a,#ee2626);border-color:#ee2626} .versus-row,.info-row{display:flex;align-items:center} .compact-versus{margin:0} .versus-row{justify-content:space-between;gap:10px} .team-box{display:grid;justify-items:center;gap:10px;text-align:center} .team-box strong{font-size:.78rem} .team-emblem,.avatar{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;font-family:var(--font-display);font-size:1.4rem;color:#fff;border:1px solid rgba(var(--tint),.18)} .emblem-red,.avatar-red{background:linear-gradient(180deg,#8f1614,#d83129)} .emblem-orange{background:linear-gradient(180deg,#814000,#db7720)} .avatar-blue{background:linear-gradient(180deg,#1b3f7d,#4aa2ff)} .avatar-gold{background:linear-gradient(180deg,#7a5a10,#dfbf4a)} .versus{font-family:var(--font-display);font-size:1.25rem;color:var(--color-primary)} .info-row{gap:10px;flex-wrap:wrap;color:var(--color-text-muted);font-size:var(--text-sm);margin-top:auto} .info-row span{display:inline-flex;align-items:center;gap:4px} .signup-center{display:grid;place-items:center;text-align:center;gap:10px} .signup-center p,.signup-center strong{margin:0;font-size:.78rem} .signup-compact img{width:80px;height:80px} /* Anmeldephase live: Status-Pill, Ring-Diagramm, Warteliste, Voraussetzungen (Widget + Anmeldeseite) */ .reg-status{--reg-ok:#3fb950;--reg-warn:#f2a65a;--reg-full:#ee2626;--reg-ring:110px;display:flex;flex-direction:column;gap:10px;height:100%;min-width:0} .reg-compact{--reg-ring:66px;gap:5px} .reg-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0} .reg-title{font-size:.85rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .reg-pill{flex:none;display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:9999px;border:1px solid currentColor;font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap} .reg-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} .reg-pill-ok{color:var(--reg-ok)} .reg-pill-warn{color:var(--reg-warn)} .reg-pill-full{color:var(--reg-full)} .reg-pill-muted{color:var(--color-text-muted)} .reg-main{display:flex;align-items:center;gap:14px;min-width:0} .reg-ring{position:relative;flex:none;width:var(--reg-ring);height:var(--reg-ring)} .reg-ring svg{display:block;width:100%;height:100%} .reg-ring circle{fill:none;stroke-width:3.6} .reg-ring-track{stroke:var(--color-surface-2)} .reg-ring-fill{stroke:var(--reg-ok);stroke-linecap:butt} .reg-ring-fill.is-warn{stroke:var(--reg-warn)} .reg-ring-fill.is-full{stroke:var(--reg-full)} .reg-ring-fill.is-open{stroke:var(--color-primary)} .reg-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;text-align:center} .reg-ring-center strong{font-family:var(--font-display);font-size:calc(var(--reg-ring) * .2);color:var(--color-text)} .reg-ring-center span{font-size:calc(var(--reg-ring) * .13);color:var(--color-text-muted)} .reg-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px} .reg-note{margin:0;font-size:.76rem;line-height:1.35;color:var(--color-text-muted)} .reg-state-full .reg-note{color:var(--color-text)} .reg-note-me{color:var(--reg-ok)} .reg-meter-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.72rem;margin-bottom:4px;min-width:0} .reg-meter-label{font-weight:700;color:var(--color-text)} .reg-meter-value{color:var(--color-text-muted);white-space:nowrap} .reg-bar{height:8px;border-radius:9999px;background:var(--color-surface-2);border:1px solid var(--color-border);overflow:hidden} .reg-bar-fill{height:100%;border-radius:9999px;background:var(--reg-ok);transition:width .4s ease} .reg-bar-wait.reg-bar-ok{background:var(--reg-ok)} .reg-bar-wait.reg-bar-full{background:var(--reg-full)} .reg-bar-wait.reg-bar-muted{background:var(--color-text-muted)} .reg-tone-ok{color:var(--reg-ok)} .reg-tone-full{color:var(--reg-full)} .reg-tone-muted{color:var(--color-text-muted);font-weight:400} .reg-reqs{display:flex;flex-direction:column;gap:5px;min-width:0} .reg-reqs-title{font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)} .reg-req-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px} .reg-req{display:flex;align-items:baseline;gap:8px;font-size:.78rem;line-height:1.3;color:var(--color-text)} .reg-req-icon{flex:none;display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;font-size:.6rem;font-weight:800;line-height:1;background:var(--color-surface-2);color:var(--color-text-muted);border:1px solid var(--color-border);transform:translateY(2px)} .reg-req-ok .reg-req-icon{background:rgba(63,185,80,.16);color:var(--reg-ok);border-color:var(--reg-ok)} .reg-req-no .reg-req-icon{background:rgba(238,38,38,.16);color:var(--reg-full);border-color:var(--reg-full)} .reg-req-detail{color:var(--color-text-muted)} .reg-compact .reg-req-list{flex-direction:row;flex-wrap:wrap;gap:4px} .reg-compact .reg-req{align-items:center;gap:5px;padding:1px 8px 1px 4px;border-radius:9999px;border:1px solid var(--color-border);background:rgba(var(--tint),.03);font-size:.66rem;white-space:nowrap} .reg-compact .reg-req-icon{width:13px;height:13px;font-size:.5rem;transform:none} .reg-compact .reg-req-no{border-color:var(--reg-full)} .reg-countdown{margin-top:auto;display:flex;flex-direction:column;gap:4px} .reg-countdown-label{font-size:.68rem;color:var(--color-text-muted)} .reg-compact .reg-countdown{gap:3px} .reg-compact .countdown div{flex-direction:row;align-items:baseline;justify-content:center;gap:4px;padding:3px 2px} .reg-compact .countdown span{font-size:.6rem} .reg-countdown .next-match-countdown{margin-top:0} .cf-foot-action.is-disabled{cursor:not-allowed;background:var(--color-surface-2);border-color:var(--color-border);color:var(--color-text-muted)} .cf-foot-action.is-disabled:hover{background:var(--color-surface-2);border-color:var(--color-border)} .reg-page-status{margin:0 0 14px} /* Kalender-Widget (Spieltermine): Monatsraster + naechste Termine */ .cal-widget{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:14px;height:100%;min-width:0} .cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-size:.78rem} .cal-nav a{width:22px;height:22px;display:grid;place-items:center;border-radius:9999px;color:var(--color-text-muted);font-size:1.1rem;line-height:1} .cal-nav a:hover{background:var(--color-primary-soft);color:var(--color-primary)} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center} .cal-wd{font-size:.56rem;font-weight:700;color:var(--color-text-muted);padding-bottom:2px} .cal-day{position:relative;height:22px;display:grid;place-items:center;font-size:.68rem;border-radius:4px;color:var(--color-text);background:rgba(var(--tint),.03)} .cal-day.is-empty{background:transparent} .cal-day.is-today{border:1px solid var(--color-primary);color:var(--color-primary);font-weight:700} .cal-day.has-match{background:var(--color-primary-soft);cursor:default} .cal-dot{position:absolute;bottom:2px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--color-primary)} .cal-next{min-width:0;display:flex;flex-direction:column;gap:6px} .cal-next-title{font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)} .cal-empty{margin:0;font-size:.76rem;color:var(--color-text-muted)} .cal-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px} .cal-list a{display:flex;flex-direction:column;padding:4px 8px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:rgba(var(--tint),.03)} .cal-list a:hover{border-color:var(--color-primary)} .cal-when{font-size:.62rem;color:var(--color-primary);font-weight:700} .cal-who{font-size:.74rem;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media (max-width:820px){.cal-widget{grid-template-columns:1fr}} .countdown{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;align-items:stretch;white-space:nowrap} .next-match-countdown{margin-top:auto;width:100%} .countdown div{text-align:center;background:var(--color-surface-2);border-radius:var(--radius-md);padding:4px 2px;border:1px solid var(--color-border);display:flex;flex-direction:column;justify-content:center;min-width:0} .countdown strong{display:block;font-family:var(--font-display);font-size:clamp(.82rem,1vw,.98rem);line-height:1;color:var(--color-primary)} .countdown span{font-size:clamp(.5rem,.7vw,.62rem);line-height:1.05;color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis} .result-list{list-style:none;display:grid;gap:5px;padding:0;margin:0} .result-list li{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;height:31px;padding:6px 8px;background:rgba(var(--tint),.03);border:1px solid var(--color-border);border-radius:var(--radius-md)} .result-list li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;cursor:default} .result-list li span:first-child{text-align:right} .result-list li span:last-child{text-align:left} .result-list li strong{font-family:var(--font-display);color:var(--color-primary);text-align:center;line-height:1} .compact-results li span,.compact-results li strong{font-size:0.85rem} .compact-results li strong{font-size:1.10rem} .league-slider-area{min-width:0;position:relative;padding:0} .league-slider-controls{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;pointer-events:none;z-index:3;padding:0} .league-arrow{width:36px;height:36px;border:1px solid transparent;border-radius:9999px;background:transparent;color:var(--color-text);display:grid;place-items:center;pointer-events:auto;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,backdrop-filter .15s ease} .league-arrow:hover{border-color:rgba(var(--tint),.14);background:rgba(10,11,13,.45);backdrop-filter:blur(8px);box-shadow:0 8px 18px rgba(0,0,0,.25)} .league-slider-viewport{overflow:hidden;position:relative} .league-slider-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (10px * 5))/6);gap:10px;transition:transform .35s ease;will-change:transform} .slider-card{min-width:0} .league-card{--liga-color:var(--color-primary);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease} .league-card.league-red{--liga-color:#ff4d43} .league-card.league-orange{--liga-color:#ff9a24} .league-card.league-gold{--liga-color:#ffd84a} .league-card.league-green{--liga-color:#57dd68} .league-card.league-blue{--liga-color:#45b8ff} .league-card .cf-title{color:var(--liga-color)} .league-card .cf-subtitle{color:var(--liga-color)} .league-card ul{margin:0;padding-left:1rem;color:var(--color-text)} .league-card .cf-foot-action{width:100%;border-color:var(--liga-color);color:var(--liga-color);background:transparent} .league-card .cf-foot-action:hover{background:color-mix(in srgb,var(--liga-color) 14%,transparent)} .league-card .cf-body{gap:6px} .league-card .cf-divider{margin:4px 0} .league-players{margin:0;font-size:.85rem;color:var(--color-text-muted)} .league-players strong{color:var(--color-text)} .league-top3-list{list-style:none;margin:0;padding:0;display:grid;gap:1px} .league-top3-list li{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--color-text)} .league-top3-list .rank{flex:0 0 auto;width:14px;text-align:right;font-family:var(--font-display);color:var(--liga-color)} .league-card.hover-soft:hover{background:linear-gradient(180deg,rgba(var(--tint),.08),rgba(var(--tint),.03)),var(--color-surface)} .league-card.hover-glow:hover{box-shadow:0 0 0 1px currentColor,0 0 14px color-mix(in srgb,currentColor 55%,transparent),0 12px 28px rgba(0,0,0,.3)} .league-card.hover-lift:hover{transform:translateY(-2px);border-color:currentColor} .hero-grid .league-card{height:215px} .news-panel{grid-column:span 3} .team-panel{grid-column:span 2} .discord-panel{grid-column:span 1} .news-list{list-style:none;display:flex;flex-direction:column;gap:5px;padding:0;margin:0} .news-item{display:flex;align-items:center;gap:10px;padding:4px 8px;height:55px;box-sizing:border-box;overflow:hidden;border-radius:var(--radius-md);background:rgba(var(--tint),.03);border:1px solid var(--color-border);transition:background .15s ease,border-color .15s ease} .news-item:hover{background:rgba(var(--tint),.07);border-color:var(--color-text-muted)} .news-item-icon{border-radius:var(--radius-sm);background:var(--color-surface-2);flex:0 0 auto} .news-text{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0} .news-item-title-row{display:flex;align-items:center;gap:6px;min-width:0} .news-item-title{flex:1;font-size:.8rem;font-weight:600;color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .news-item-excerpt{font-size:.68rem;color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .badge{display:inline-flex;flex:0 0 auto;padding:.1rem .45rem;border-radius:9999px;font-size:.62rem;font-weight:700;text-transform:uppercase} .badge-red{background:var(--color-primary-soft);color:var(--color-primary)} .badge-ok{background:rgba(87,221,104,.15);color:#57dd68} .social-links{list-style:none;display:flex;flex-direction:column;gap:5px;padding:0;margin:0} .social-row-link{display:flex;align-items:center;gap:10px;padding:4px 8px;height:55px;box-sizing:border-box;overflow:hidden;border-radius:var(--radius-md);background:rgba(var(--tint),.03);border:1px solid var(--color-border);transition:background .15s ease,border-color .15s ease} .social-row-link:hover{background:rgba(var(--tint),.07);border-color:var(--color-text-muted)} .social-row-link img{border-radius:7px} .social-icon-col{display:flex;align-items:center;justify-content:center;flex:0 0 auto} .social-text{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0} .social-platform-name{font-size:.8rem;font-weight:600;color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .social-channel{font-size:.68rem;color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .external-badge{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:20px;height:20px;color:var(--color-text-muted)} .external-badge::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);right:0;width:210px;background:#1d2027;color:var(--color-text);font-size:.68rem;font-weight:500;line-height:1.4;padding:8px 10px;border-radius:6px;border:1px solid var(--color-border);box-shadow:0 8px 20px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease;pointer-events:none;z-index:20;text-transform:none;letter-spacing:normal} .social-row-link:hover .external-badge::after,.social-row-link:focus-visible .external-badge::after{opacity:1;visibility:visible;transform:translateY(0)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* CF "Account": eingeloggt (Willkommen/Quick-Info/Menü) vs. ausgeloggt (Login-Formular des UserManagement-AddOns, siehe unten). */ .account-welcome{display:flex;align-items:center;gap:10px} .account-welcome strong{display:block;color:var(--color-text);font-size:.86rem} .account-welcome p{margin:0;font-size:.72rem;color:var(--color-text-muted)} .account-quick-info{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .quick-info-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;background:rgba(var(--tint),.03);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-muted);font-size:.62rem;text-align:center;transition:background .15s ease,color .15s ease} .quick-info-item:hover{background:rgba(var(--tint),.07);color:var(--color-text)} .quick-info-item img{opacity:.85} .cf-divider{border:none;border-top:1px solid var(--color-divider);margin:2px 0} .account-menu{display:flex;flex-direction:column;gap:2px} .account-menu a{padding:6px 4px;font-size:.8rem;color:var(--color-text);border-radius:var(--radius-sm)} .account-menu a:hover{background:rgba(var(--tint),.05);color:var(--color-primary)} /* Eingebettetes UserManagement-Formular (Login/Register/Passwort-vergessen/ Einstellungen aus dem YaLMS-Plugin): eigene helle .frontend-frame-Karte des Plugins wird "entkleidet", da unsere .account-panel bereits die Karten-Optik liefert - Formularfelder werden ans Dark-Theme angepasst. */ .account-body .frontend-frame{background:none;border:none;box-shadow:none;padding:0;max-width:none} .account-body .frontend-frame h2{display:none} .account-body .notice{font-size:.76rem;padding:8px 10px} .account-body .form{display:flex;flex-direction:column;gap:10px} .account-body .form p, .account-body .form label{margin:0} .account-body .login-step{display:flex;flex-direction:column;gap:10px} .account-body .form label{color:var(--color-text-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.02em;font-weight:600} .account-body .form label:not([for]){display:flex;align-items:flex-start;gap:6px;text-transform:none;letter-spacing:normal;font-weight:400;font-size:.76rem;color:var(--color-text)} .account-body .form label:not([for]) input[type="checkbox"]{margin-top:2px;flex:0 0 auto} .account-body .form label:not([for]) a{color:var(--color-primary);text-decoration:underline} .account-body .form input[type="text"], .account-body .form input[type="email"], .account-body .form input[type="password"], .account-body .form input[type="date"], .account-body .form textarea{max-width:none;width:100%;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font:inherit;padding:8px 10px;box-sizing:border-box;resize:vertical;color-scheme:dark} .yalms-pw-wrap{position:relative;display:block} .yalms-pw-wrap input{padding-right:2.2em} .yalms-pw-toggle{position:absolute;top:50%;right:.5em;transform:translateY(-50%);width:auto;height:auto;min-width:0;margin:0;padding:2px;border:none;background:none;cursor:pointer;display:flex;align-items:center;color:var(--color-text-muted);opacity:.75} .yalms-pw-toggle:hover{opacity:1} .account-body .form button[type="submit"], .account-body .form .login-next{width:100%;min-height:34px;border:1px solid transparent;border-radius:var(--radius-md);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:.72rem;background:linear-gradient(180deg,rgba(var(--accent-rgb),.82),rgba(238,38,38,.82));color:#fff;cursor:pointer;transition:border-color .15s ease} .account-body .form button[type="submit"]:hover, .account-body .form .login-next:hover{background:linear-gradient(180deg,#f2a65a,#ee2626);border-color:#ee2626} .account-body .form-links{display:flex;flex-direction:column;gap:6px;font-size:.72rem;color:var(--color-text-muted)} .account-body .form-links a{color:var(--color-primary)} .account-body .form-links--divider{border-top-color:var(--color-divider)} .account-body .link-button{color:var(--color-primary)} .account-body .login-as{color:var(--color-text-muted)} .account-body .settings-language{margin-top:10px;padding-top:10px;border-top:1px solid var(--color-divider);display:flex;align-items:center;gap:10px} .account-body .settings-language label{color:var(--color-text-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.02em;font-weight:600} .account-body .lang-switcher{display:flex;gap:6px} .account-body .lang-switcher a{padding:2px 6px;border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-muted);font-size:.68rem} .account-body .lang-switcher a.active{color:var(--color-primary);border-color:var(--color-primary)} /* Seitenweiter Footer: schmale Leiste mit Emblem+Claim links und Footer-Navigation rechts (aus frontend-dashboard-template.html uebernommen). Lebt in footer.php, daher auf jeder Seite identisch. */ .site-footer{margin-top:auto;border-top:1px solid var(--color-border);background:var(--footer-bg)} .footer-inner{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0} .footer-nav{display:flex;flex-wrap:wrap;gap:10px;color:var(--color-text-muted);font-size:var(--text-sm)} @media (max-width:1180px){ .row-fixed-height{height:auto;min-height:300px} .content-frame-card[data-widget-key="news_card"], .content-frame-card[data-widget-key="socialmedia_card"], .content-frame-card[data-widget-key="rundenliga_livestreams"], .content-frame-card[data-widget-key="rundenliga_mediathek"]{height:auto;min-height:480px} .league-slider-track{grid-auto-columns:calc((100% - (10px * 3))/4)} } /* Mobiles Header-Menu: schlanker Balken statt der Desktop-Logo-Praesenz (die auf schmalen Screens ohne die feste 150px-Kopfzeilen-Hoehe unkontrolliert auf Bild-Originalgroesse aufblaeht) + eigener Burger-Button statt Klick-auf-Logo - ein Logo bleibt ueberall ein "zur Startseite"-Link, das Ueberladen mit einer zweiten Bedeutung (Menue oeffnen) waere fuer Nutzer nicht erwartbar/auffindbar. */ .mobile-nav-toggle{display:none} @media (max-width:820px){ .site-header{height:auto;position:relative} .header-inner{height:auto;padding:8px 16px;display:flex;align-items:center;justify-content:center;gap:10px} .mobile-nav-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:36px;height:36px;padding:0;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;position:absolute;left:16px;top:50%;transform:translateY(-50%)} .mobile-nav-toggle span{display:block;width:18px;height:2px;background:var(--color-text);transition:transform .2s ease,opacity .2s ease} .site-header.mobile-nav-open .mobile-nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)} .site-header.mobile-nav-open .mobile-nav-toggle span:nth-child(2){opacity:0} .site-header.mobile-nav-open .mobile-nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .brand{flex-direction:row;height:auto;padding:4px 0;gap:8px} .brand img{height:28px;min-height:0;width:auto;flex:none} .brand-title{font-size:.86rem} .brand-tagline{display:none} .nav-menu{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--bar-bg-strong);border-bottom:1px solid var(--color-border);max-height:0;overflow:hidden;opacity:0;padding:0 16px;transition:max-height .25s ease,opacity .2s ease;z-index:49} /* EIN Menue-Block: .nav-left (Start/Spielbetrieb/News) und .nav-right (Community/Account) liegen in .nav-menu untereinander - als ein Overlay unter dem Kopf. */ .nav-side{position:static;flex-direction:column;align-items:stretch;gap:0} .nav-side a{padding:12px 0;border-bottom:1px solid var(--color-border);white-space:normal} .nav-right{border-top:none} .site-header.mobile-nav-open .nav-menu{max-height:720px;opacity:1;padding:4px 16px} /* Konto-Dropdown mobil: kein Hover-Flyout (kein Hover auf Touch) - die Kinder erscheinen stattdessen als eingerueckte, flache Liste direkt unter der Konto-Zeile innerhalb desselben gestapelten Mobile-Menues. */ .konto-nav{width:100%} .konto-toggle{width:100%;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--color-border);text-transform:uppercase;letter-spacing:.03em;font-size:var(--text-sm)} .konto-toggle>span:first-child{margin-right:auto} .konto-popup{position:static;margin-top:0;padding:0;max-height:0;opacity:1;border:none;box-shadow:none;background:transparent} .konto-popup.is-open{max-height:400px;padding:4px 0 8px 16px} .konto-popup .link-button,.konto-popup button.link-button{padding:8px 0;font-size:var(--text-base)} .utility-bar-inner{flex-wrap:wrap;height:auto;padding:6px 0;justify-content:center} .hero-grid,.content-columns,.league-grid,.rl-widget-grid{grid-template-columns:1fr} /* Frei per Drag&Drop positionierte Kacheln (SystemConfig-Widgetsystem) bekommen eine INLINE-Positionierung (grid-column:X / span N;grid-row:Y / span M;) vom Server, siehe yalms_widget_grid_attrs() - inline style schlaegt jede Klassen- Regel, auch obige grid-template-columns:1fr aendert daran nichts (das setzt nur die Spaltenzahl des Grids, nicht die Platzierung der einzelnen Kachel). Ohne diesen !important-Reset legt der Browser fuer die weiterhin beanspruchten Alt-Spalten/-Zeilen implizite Zusatzspalten an, und die Kacheln landen mehrspaltig/winzig statt untereinander gestapelt zu sein. */ .hero-grid>*,.content-columns>*,.league-grid>*,.rl-widget-grid>*{grid-column:1 / -1 !important;grid-row:auto !important} .grid-span-1,.grid-span-2,.grid-span-3,.grid-span-4,.grid-span-5,.grid-span-6{grid-column:span 1} .news-panel,.team-panel,.discord-panel{grid-column:span 1} .row-fixed-height{height:auto;min-height:unset} /* Mobil bestimmt der INHALT die Kartenhoehe - weder die feste Desktop-Hoehe (480px) noch die Tablet-Mindesthoehe (siehe @media max-width:1180px oben, dort gleicher Selektor mit min-height:480px) gelten hier. */ .content-frame-card[data-widget-key="news_card"], .content-frame-card[data-widget-key="socialmedia_card"], .content-frame-card[data-widget-key="rundenliga_livestreams"], .content-frame-card[data-widget-key="rundenliga_mediathek"]{height:auto;min-height:0} /* Reihenfolge der Kacheln in der Einspalten-Ansicht: kommt aus dem Backend (Systemkonfiguration > "Reihenfolge mobil", siehe yalms_widget_grid_attrs() -> --m-order); ohne Wert bleibt die Dokument-Reihenfolge. */ .hero-grid>*,.content-columns>*,.league-grid>*,.rl-widget-grid>*{order:var(--m-order,0)} .league-slider-area{grid-column:span 1} .hero-grid .league-card{height:auto;min-height:0} .league-slider-controls{justify-content:center} .league-slider-track{grid-auto-columns:calc((100% - 10px)/2)} /* Titelleisten (.cf-head) aller Content-Frame-Karten sind NUR mobil anklickbar und klappen Inhalt (.cf-body/.cf-foot) ein/aus - siehe scripts.js. Auf dem Desktop bleibt .cf-head rein dekorativ (keine cursor/Pfeil-Optik), damit sich dort nichts am gewohnten Verhalten aendert. */ .cf-head[role="button"]{cursor:pointer} .cf-head[role="button"]::after{content:'';margin-left:auto;flex:0 0 auto;width:8px;height:8px;border-right:2px solid var(--color-text-muted);border-bottom:2px solid var(--color-text-muted);transform:rotate(45deg);transition:transform .2s ease} .content-frame-card.cf-collapsed .cf-head[role="button"]::after{transform:rotate(-45deg)} .content-frame-card.cf-collapsed .cf-body,.content-frame-card.cf-collapsed .cf-foot{display:none} } /* Formular-Seiten (Login/Register/Passwort vergessen/Konto-Einstellungen) - eine zentrierte CF-Karte, siehe template-account-form.php. */ .form-page{display:flex;justify-content:center;padding-block:var(--space-10)} .form-page-card{width:100%;max-width:440px} /* Rechtstexte (Impressum/Datenschutz/AGB) - gleiche Breite wie alle anderen Inhaltsseiten (siehe .content-frame/.rl-page), auf Wunsch des Users 2026-09-15 vereinheitlicht (vorher eigenes, schmaleres max-width). */ .legal-page{padding-block:var(--space-10)} .legal-article{padding:var(--space-8) var(--space-10)} .legal-article-body h1{font-family:var(--font-display);font-size:2rem;text-transform:uppercase;letter-spacing:.02em;margin:0 0 var(--space-6)} .legal-notice{background:var(--color-primary-soft);border:1px solid var(--color-primary);border-radius:var(--radius-md);padding:var(--space-5) var(--space-6);margin-bottom:var(--space-8)} .legal-notice strong{display:block;color:var(--color-primary);text-transform:uppercase;font-size:.78rem;letter-spacing:.04em;margin-bottom:4px} .legal-notice p{margin:0;font-size:.86rem;color:var(--color-text)} .legal-content{color:var(--color-text-muted);font-size:.92rem;line-height:1.7} .legal-content h2{font-family:var(--font-display);font-size:1.35rem;text-transform:uppercase;letter-spacing:.02em;color:var(--color-text);margin:var(--space-8) 0 var(--space-3)} .legal-content h2:first-child{margin-top:0} .legal-content h3{font-size:1rem;font-weight:700;color:var(--color-text);margin:var(--space-6) 0 var(--space-2)} .legal-content p{margin:0 0 var(--space-4)} .legal-content ul,.legal-content ol{margin:0 0 var(--space-4);padding-left:1.3rem;display:grid;gap:4px} .legal-content a{color:var(--color-primary);text-decoration:underline} .legal-content strong{color:var(--color-text)} .legal-content mark{background:var(--color-primary-soft);color:var(--color-primary);padding:1px 4px;border-radius:3px;font-weight:600} @media (max-width:820px){ .legal-article{padding:var(--space-6)} } /* Rundenliga: Spielplan/Termine/Ergebnisse/Tabellen (Spielbetriebs-Modul). Wiederverwendet die bestehenden CF-/panel-Bausteine, ergaenzt nur die fachspezifischen Zeilen-/Status-Komponenten, die es im Theme noch nicht gab. Breite = gleiche wie .content-frame (auf Wunsch des Users 2026-09-15 vereinheitlicht, vorher eigenes max-width:900px). */ .rl-page{padding-block:var(--space-8)} .rl-widget-grid{display:grid;gap:10px;grid-template-columns:repeat(var(--grid-columns,6),minmax(0,1fr));grid-auto-rows:minmax(70px,auto)} /* Mobile-Override erneut hier (nicht nur weiter oben) noetig: diese Regel steht im Stylesheet NACH der @media(max-width:820px)-Stelle bei den Hero-/Spalten-Grids, wuerde deren 1-Spalten-Override sonst per Ladereihenfolge wieder ueberschreiben (gleiche Spezifitaet, spaetere Regel gewinnt) - genau das fuehrte zum mobilen Darstellungsfehler auf den Rundenliga-/News-Seiten (Karten blieben mehrspaltig und liefen ineinander). */ @media (max-width:820px){ .rl-widget-grid{grid-template-columns:1fr} } .rl-page-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-5)} .rl-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-2)} .rl-page-title-row h1{font-family:var(--font-display);font-size:1.8rem;text-transform:uppercase;letter-spacing:.02em;margin:0;line-height:1} .rl-page-title-row .meta{font-size:.8rem;color:var(--color-text-muted);margin-top:6px} .rl-status-pill{display:inline-flex;align-items:center;gap:5px;font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:4px 10px;border-radius:99999px;white-space:nowrap} .rl-status-pill::before{content:'';width:5px;height:5px;border-radius:50%} .rl-status-pill.offen{color:var(--league-blue);background:rgba(69,184,255,.13)} .rl-status-pill.offen::before{background:var(--league-blue)} .rl-status-pill.warten{color:var(--league-gold);background:rgba(255,216,74,.13)} .rl-status-pill.warten::before{background:var(--league-gold)} .rl-status-pill.ok{color:var(--league-green);background:rgba(87,221,104,.13)} .rl-status-pill.ok::before{background:var(--league-green)} .rl-status-pill.attention{color:var(--league-red);background:rgba(255,77,67,.13)} .rl-status-pill.attention::before{background:var(--league-red)} .rl-status-pill.postponed{color:#ff9f43;background:rgba(255,159,67,.15)} .rl-status-pill.postponed::before{background:#ff9f43} .rl-matchday-select{display:flex;align-items:center;gap:10px;padding-bottom:var(--space-4);margin-bottom:var(--space-5);border-bottom:1px solid var(--color-border)} .rl-matchday-select label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted)} .rl-matchday-select select{flex:1;max-width:320px;height:38px;padding:0 12px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text);font:inherit;font-size:.82rem;cursor:pointer} .rl-matchday-select select:hover,.rl-matchday-select select:focus{border-color:var(--color-primary)} .rl-results-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-bottom:var(--space-4);margin-bottom:var(--space-5);border-bottom:1px solid var(--color-border)} .rl-results-controls label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted)} .rl-results-controls select{height:38px;padding:0 12px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text);font:inherit;font-size:.82rem;cursor:pointer} .rl-results-controls select:hover,.rl-results-controls select:focus{border-color:var(--color-primary)} .rl-matchday-block{margin-bottom:var(--space-6)} .rl-matchday-block:last-child{margin-bottom:0} .rl-matchday-label{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:.95rem;text-transform:uppercase;letter-spacing:.03em;color:var(--color-text);margin-bottom:var(--space-3)} .rl-matchday-label .rl-status-pill{margin-left:auto} .rl-fixture-list{display:flex;flex-direction:column;gap:8px} .rl-fixture-row{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto;align-items:center;column-gap:14px;row-gap:6px;padding:12px 16px;border-radius:var(--radius-md);background:rgba(var(--tint),.03);border:1px solid var(--color-border)} .rl-fixture-row:hover{background:rgba(var(--tint),.05)} .rl-fixture-row .p{grid-row:1;display:flex;align-items:center;gap:10px;min-width:0} .rl-fixture-row .p:not(.away){justify-self:start} .rl-fixture-row .p.away{flex-direction:row-reverse;text-align:right;justify-self:end} .rl-fixture-row .name{font-size:.86rem;color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rl-fixture-row .vs{grid-row:1;grid-column:2;justify-self:center;font-family:var(--font-display);color:var(--color-text-muted);font-size:.82rem;text-align:center} .rl-fixture-row .rl-status-pill{grid-row:2;grid-column:2;justify-self:center} .rl-avatar{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-family:var(--font-display);font-size:.85rem;color:#fff;border:1px solid rgba(var(--tint),.18);flex:0 0 auto} .rl-termin-form{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:end;padding:16px;border-radius:var(--radius-md);background:rgba(var(--tint),.03);border:1px solid var(--color-border);margin-bottom:10px} .rl-termin-form label{display:block;font-size:.68rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px} .rl-termin-form input{width:100%;height:38px;padding:0 12px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text);font:inherit;font-size:.82rem} .rl-termin-form input[type=checkbox]{width:16px;height:16px;padding:0;flex-shrink:0;accent-color:var(--color-primary)} .rl-score-inputs{display:flex;align-items:center;gap:12px} .rl-score-box{width:56px;height:48px;border-radius:var(--radius-md);background:var(--color-surface-2);border:1px solid var(--color-border);text-align:center;font-family:var(--font-display);font-size:1.4rem;color:var(--color-text)} .rl-score-vs{font-size:.72rem;color:var(--color-text-muted);text-transform:uppercase} .rl-upload{border:1px dashed var(--color-border);border-radius:var(--radius-md);padding:18px;text-align:center;font-size:.76rem;color:var(--color-text-muted);cursor:pointer} .rl-recent-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:var(--radius-md);background:rgba(var(--tint),.03);border:1px solid var(--color-border);margin-bottom:6px;font-size:.82rem} .rl-standings{width:100%;border-collapse:collapse;font-size:.86rem} .rl-standings th{text-align:left;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);padding:0 12px 10px;font-weight:600} .rl-standings th.num,.rl-standings td.num{text-align:center;font-variant-numeric:tabular-nums} .rl-standings td{padding:11px 12px;border-top:1px solid var(--color-border)} .rl-standings tr.me td{background:var(--color-primary-soft)} .rl-standings .rank{font-family:var(--font-display);color:var(--color-text-muted);font-size:1rem} .rl-standings tr:nth-child(-n+3) .rank{color:var(--color-primary)} .rl-standings .player{display:flex;align-items:center;gap:10px} .rl-standings .pts{font-family:var(--font-display);color:var(--color-text);font-size:1.05rem} .rl-standings td.diff-pos{font-weight:700;color:var(--color-text)} .rl-standings td.diff-neg{font-weight:700;color:var(--color-text-muted)} /* Ergebnis-Anzeige (Legs-Endstand einer Begegnung) - bewusst eigene Klasse statt des generischen .rl-status-pill/.vs-Stils, der fuer reine Status-Label (z.B. "kein Termin") gedacht ist und fuer ein tatsaechliches Ergebnis zu klein/blass wirkt. Wird zusaetzlich zur bestehenden Klasse vergeben, damit Grid-Position (.rl-fixture-row .vs / .rl-status-pill) erhalten bleibt. */ .rl-fixture-row .vs.rl-result-score,.rl-status-pill.rl-result-score{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--color-text);letter-spacing:.02em} .rl-comp-list{display:flex;flex-direction:column;gap:8px} .rl-comp-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:var(--radius-md);background:rgba(var(--tint),.03);border:1px solid var(--color-border)} .rl-comp-row .links{display:flex;gap:8px} .rl-comp-row .links a{font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:var(--color-primary)} /* Wettbewerb (aufklappbar) mit Anzahl Ligen/Staffeln + Teilnehmer im Titel */ .rl-comp-box{margin-bottom:12px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:rgba(var(--tint),.02);overflow:hidden} .rl-comp-box>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:14px 16px;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent} .rl-comp-box>summary::-webkit-details-marker{display:none} .rl-comp-box>summary::before{content:'\25B8';flex:none;color:var(--color-primary);transition:transform .15s ease} .rl-comp-box[open]>summary::before{transform:rotate(90deg)} .rl-comp-box-title{flex:1 1 auto;font-weight:700;font-size:.95rem} .rl-comp-box-meta{font-size:.74rem;color:var(--color-text-muted)} .rl-comp-box>.rl-comp-list{padding:0 12px 12px} /* Oeffentliche Registerkarten (z.B. Aktiv/Archiv bei Wettbewerbs-Listen): linke Gruppe normale Tabs, rechte Gruppe (i.d.R. nur "Archiv") bewusst per margin-left:auto an den rechten Rand gedrueckt - gleiches Prinzip wie das Backend-yb-regtab-System, hier als leichte Variante ohne Admin-CSS/JS. */ .rl-tabs-bar{display:flex;align-items:center;gap:4px;border-bottom:1px solid var(--color-border);margin-bottom:14px;flex-wrap:wrap} .rl-tabs-group{display:flex;gap:4px} .rl-tabs-group.right{margin-left:auto} .rl-tab-item{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;font-size:.74rem;text-transform:uppercase;letter-spacing:.03em;color:var(--color-text-muted);border-bottom:2px solid transparent;cursor:pointer;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit} .rl-tab-item:hover{color:var(--color-text)} .rl-tab-item.active{color:var(--color-primary);border-bottom-color:var(--color-primary)} .rl-tab-item .count{font-size:.68rem;color:var(--color-text-muted)} .rl-tab-pane{display:none} .rl-tab-pane.active{display:block} .rl-stat-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--space-6)} .rl-stat-pill{flex:1 1 140px;padding:12px 14px;border-radius:var(--radius-md);background:rgba(var(--tint),.03);border:1px solid var(--color-border)} .rl-stat-pill-link{display:block;text-decoration:none;color:inherit;transition:border-color .15s ease,background .15s ease} .rl-stat-pill-link:hover{border-color:var(--color-primary);background:rgba(var(--tint),.05)} /* Streaming-Info: kompaktes Icon (Spielplan/Termine-Listen) + volle Badge-Zeile (Meine Spiele). */ .rl-stream-icon{font-size:.82rem;line-height:1;cursor:help} .rl-stream-badge{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.76rem;color:var(--color-text-muted);background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.25);border-radius:var(--radius-md);padding:6px 10px;margin-bottom:12px} .rl-stream-badge .icon{font-size:.9rem} .rl-stream-badge a{color:var(--color-primary)} .rl-page details{margin-bottom:6px} .rl-page details summary{list-style:none} .rl-page details summary::-webkit-details-marker{display:none} .rl-page details summary:before{content:'▸ ';font-size:.7em;} .rl-page details[open] summary:before{content:'▾ ';} .rl-stat-pill .n{display:block;font-family:var(--font-display);font-size:1.3rem;color:var(--color-primary);line-height:1.1} .rl-stat-pill .l{font-size:.68rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em} .rl-nav-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:var(--space-6)} .rl-nav-tile{display:flex;flex-direction:column;gap:4px;padding:18px;border-radius:var(--radius-md);background:var(--gradient-panel),var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-md);transition:border-color .15s ease,transform .15s ease} .rl-nav-tile:hover{border-color:var(--color-primary);transform:translateY(-2px)} .rl-nav-tile .t{font-family:var(--font-display);font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em;color:var(--color-text)} .rl-nav-tile .d{font-size:.76rem;color:var(--color-text-muted)} .rl-mini-block{margin-bottom:var(--space-5)} .rl-mini-block h3{font-family:var(--font-display);font-size:.86rem;text-transform:uppercase;letter-spacing:.03em;color:var(--color-text-muted);margin:0 0 8px} @media (max-width:700px){ .rl-fixture-row .name{max-width:120px} .rl-termin-form{grid-template-columns:1fr} .rl-nav-grid{grid-template-columns:1fr} } /* Externe-Links-Disclaimer (siehe scripts.js): faengt Klicks auf Links zu fremden Domains ab und zeigt erst diesen Hinweis, bevor tatsaechlich weitergeleitet wird - gleiches Grundmuster wie .konto-popup/.search-popup (Overlay-Karte in Theme-Farben), hier aber als echtes Modal mit Backdrop, da es eine Entscheidung erzwingen soll statt nur ein Dropdown zu sein. */ .extlink-backdrop{position:fixed;inset:0;background:rgba(5,6,8,.72);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:200;opacity:0;pointer-events:none;transition:opacity .18s ease} .extlink-backdrop.is-open{opacity:1;pointer-events:auto} .extlink-modal{width:100%;max-width:420px;background:var(--gradient-panel),var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:22px;transform:translateY(8px);transition:transform .18s ease} .extlink-backdrop.is-open .extlink-modal{transform:translateY(0)} .extlink-modal h2{margin:0 0 10px;font-family:var(--font-display);font-size:1rem;text-transform:uppercase;letter-spacing:.03em;color:var(--color-text)} .extlink-modal p{margin:0 0 6px;font-size:var(--text-sm);color:var(--color-text-muted);word-break:break-word} .extlink-modal .extlink-target{color:var(--color-primary);font-weight:700} .extlink-actions{display:flex;gap:10px;margin-top:18px} .extlink-actions button{flex:1;height:38px;border-radius:var(--radius-md);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:.74rem;cursor:pointer;border:1px solid var(--color-border);background:transparent;color:var(--color-text)} .extlink-actions button:hover{border-color:var(--color-primary)} .extlink-actions button.extlink-confirm{border-color:transparent;background:var(--color-primary);color:var(--on-primary)} /* ========================================================================== Liga-Dashboard "Matchcenter" (rundenliga/tmpl/liga-dashboard.php) Zwei Spalten, Kacheln einer Zeile sind IMMER gleich hoch (Grid-Stretch); Begegnungen haben eine FESTE Hoehe (Ergebnis- und Datumszeile sind immer vorhanden), Datum/Uhrzeit stehen nie umgebrochen. Handy: ausklappbare Kacheln. ========================================================================== */ .rl-dash{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:16px;align-items:stretch;margin-bottom:var(--space-6)} .rl-tile{display:flex;flex-direction:column;min-width:0;border-radius:var(--radius-md);background:var(--gradient-panel),var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-md)} .rl-tile-head{margin:0} .rl-tile-toggle{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px;width:100%;margin:0;padding:12px 16px;background:none;border:0;border-bottom:1px solid var(--color-border);color:inherit;font:inherit;text-align:left;cursor:default;pointer-events:none} .rl-tile-toggle .ttl{font-family:var(--font-display);font-size:1.15rem;text-transform:uppercase;letter-spacing:.03em} .rl-tile-toggle .sub{flex:1 1 auto;font-size:.74rem;color:var(--color-text-muted)} .rl-tile-toggle .chev{display:none;color:var(--color-primary);transition:transform .15s ease} .rl-tile-inner{display:flex;flex-direction:column;flex:1 1 auto;min-width:0} .rl-tile-body{flex:1 1 auto;padding:12px 16px} .rl-tile-foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--color-border)} .rl-tile.is-collapsed .rl-tile-inner{display:none} .rl-dhint{margin:0;font-size:.8rem;color:var(--color-text-muted)} .rl-dmuted{font-size:.72rem;color:var(--color-text-muted)} /* ShortCode-Einbettung [ladder ...] (siehe contesttheladder/tmpl/widgets/ladder-compact.php) - max-height statt unbegrenztem Wachstum (z.B. nach "Mehr" aufgeklappter Kurzinfo-Text + Tabellenausschnitt zusammen): .cf-body ist bereits als Flex-Scroll-Container angelegt (siehe generische .cf-body-Regel, flex:1;min-height:0; overflow-y:auto) - die fehlt hier nur die Begrenzung am Artikel selbst, sonst greift overflow nie. */ .ld-embed-card{max-height:480px} .ld-embed-info{font-size:.85rem;margin-top:6px} .ld-embed-info-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--ld-clamp-lines,3);overflow:hidden} .ld-embed-info-text p{margin:0 0 .4em} .ld-embed-info-text p:last-child{margin-bottom:0} .ld-embed-info-text.is-expanded{display:block;-webkit-line-clamp:unset;overflow:visible} .ld-embed-top{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:.85rem} .ld-embed-rank{display:inline-block;min-width:22px;font-weight:700;color:var(--color-text-muted)} .ld-embed-more{background:none;border:none;padding:0;color:var(--color-primary);text-decoration:underline;cursor:pointer;font-size:inherit;font-family:inherit} .ld-embed-dashboard{display:flex;flex-direction:column;gap:14px} .ld-embed-stat-row{display:flex;gap:18px;flex-wrap:wrap} .ld-embed-stat{display:flex;flex-direction:column;gap:2px} .ld-embed-stat b{font-size:1.1rem} .ld-embed-cta{display:flex;flex-direction:column;gap:10px;align-items:flex-start} /* "Uhr/Timer"-Widget (siehe contesttheladder/tmpl/widgets/ladder-timer.php) */ .ld-timer{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0;text-align:center} .ld-timer-ymd{font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums} .ld-timer-hm{font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--color-primary)} .rl-dash-btn{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 14px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:rgba(var(--tint),.03);color:var(--color-text);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;text-decoration:none;transition:border-color .15s ease,color .15s ease} .rl-dash-btn:hover{border-color:var(--color-primary);color:var(--color-primary)} .rl-dash-btn.primary{background:linear-gradient(180deg,#d83129,#8f1614);border-color:transparent;color:#fff} .rl-dash-btn.primary:hover{color:#fff;filter:brightness(1.12)} /* Spieltag-Blaettern */ .rl-dm-nav{display:flex;gap:8px;padding:10px 16px 0} .rl-dm-nav button{flex:none;width:34px;height:34px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text);font-size:1.1rem;cursor:pointer} .rl-dm-nav button:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary)} .rl-dm-nav button:disabled{opacity:.35;cursor:default} .rl-dm-nav select{flex:1 1 auto;min-width:0;height:34px;padding:0 10px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text);font:inherit;font-size:.82rem} .rl-dm-list{padding-top:4px;padding-bottom:0} /* Begegnung: FESTE Hoehe - Ergebnis-Zeile + Datum-Zeile sind immer da */ .rl-dm{display:grid;grid-template-columns:minmax(0,1fr) 216px minmax(0,1fr);gap:10px;align-items:center;height:68px;border-bottom:1px solid var(--color-border)} .rl-dm:last-child{border-bottom:0} .rl-dm .p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600} .rl-dm .p.away{text-align:right} .rl-dm .mid{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-width:0} .rl-dm .sc,.rl-drow .sc{font-family:var(--font-display);font-size:1.25rem;line-height:26px;height:26px;letter-spacing:.04em;white-space:nowrap} .rl-dm .sc.none{color:var(--color-text-muted)} .dt{display:block;font-size:.74rem;line-height:18px;height:18px;white-space:nowrap;color:var(--color-text-muted)} .dt.ok{color:var(--color-text)} .dt.wait{color:var(--league-gold)} .dt.postponed{color:#ff9f43;font-weight:600} /* Zeilen in Termine/Ergebnisse (ebenfalls feste Hoehe) */ .rl-drow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;height:56px;border-bottom:1px solid var(--color-border)} .rl-drow:last-child{border-bottom:0} .rl-drow .l1{display:flex;flex-direction:column;justify-content:center;min-width:0} .rl-drow .vs{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rl-drow .vs em{font-style:normal;color:var(--color-text-muted);padding:0 6px} /* Tabelle */ .rl-dtable-wrap{padding-top:4px} .rl-dtable{width:100%;border-collapse:collapse} .rl-dtable th,.rl-dtable td{padding:7px 8px;text-align:left;font-size:.82rem;border-bottom:1px solid var(--color-border)} .rl-dtable th{font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted)} .rl-dtable .r{text-align:right} .rl-dtable tr.top td:first-child{color:var(--color-primary);font-weight:700} .rl-dtable tbody tr:last-child td{border-bottom:0} .rl-dtable .nm{max-width:0;width:100%;white-space:nowrap} .rl-dtable .nm .t{display:inline-block;max-width:calc(100% - 30px);overflow:hidden;text-overflow:ellipsis;vertical-align:middle} .av{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;margin-right:8px;border-radius:50%;background:linear-gradient(180deg,#1b3f7d,#4aa2ff);font-size:.68rem;font-weight:700;vertical-align:middle} /* Liga-Stand */ .rl-split{display:flex;align-items:center;gap:16px} .rl-ring{--p:0;flex:none;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--color-primary) calc(var(--p)*1%),rgba(var(--tint),.08) 0)} .rl-ring::after{content:attr(data-t);display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--color-surface);font-family:var(--font-display);font-size:1.35rem} .rl-split-txt{min-width:0;font-size:.84rem} .rl-dbar{height:6px;margin:8px 0 4px;max-width:190px;border-radius:9px;background:rgba(var(--tint),.08);overflow:hidden} .rl-dbar i{display:block;height:100%;background:var(--league-green)} .rl-leader{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 12px;border-radius:var(--radius-md);background:linear-gradient(90deg,rgba(var(--accent-rgb),.16),transparent)} .rl-leader b{font-family:var(--font-display);font-size:1.1rem} /* Teilnehmer */ .rl-chips{display:flex;flex-wrap:wrap;gap:8px} .rl-chip{display:inline-flex;align-items:center;max-width:100%;padding:5px 12px 5px 5px;border:1px solid var(--color-border);border-radius:99px;background:var(--color-surface-2);font-size:.82rem} .rl-chip .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Handy: eine Spalte, ausklappbare Kacheln */ @media (max-width:820px){ .rl-dash{grid-template-columns:1fr;gap:12px} .rl-tile-toggle{cursor:pointer;pointer-events:auto;align-items:center;min-height:52px;-webkit-tap-highlight-color:transparent} .rl-tile-toggle .chev{display:block;margin-left:auto} .rl-tile:not(.is-collapsed) .rl-tile-toggle .chev{transform:rotate(180deg)} .rl-tile.is-collapsed .rl-tile-toggle{border-bottom-color:transparent} .rl-dm{grid-template-columns:1fr;grid-template-rows:auto 44px auto;gap:2px;height:104px;text-align:center} .rl-dm .p.away{text-align:center} .rl-dm .mid{height:44px} .rl-split{flex-wrap:wrap} } /* Dashboard: Kacheln mit variabler Laenge ("fit") tragen NICHT zur Zeilenhoehe bei - die kleinere Kachel der Zeile bestimmt die Hoehe, der Inhalt der laengeren scrollt in sich. */ .rl-tile-fit .rl-tile-body{position:relative;flex:1 1 0;min-height:230px;padding:0} .rl-tile-fit .rl-tile-scroll{position:absolute;inset:0;overflow-y:auto;padding:6px 16px 12px;scrollbar-width:thin;scrollbar-color:rgba(var(--tint),.25) transparent} .rl-tile-fit .rl-dm-list .rl-tile-scroll{padding-top:0;padding-bottom:0} @media (max-width:820px){ .rl-tile-fit .rl-tile-body{position:static;flex:none;min-height:0} .rl-tile-fit .rl-tile-scroll{position:static;max-height:520px} } /* Dashboard: Teilnehmer-Chips als Profil-Links */ a.rl-chip{color:inherit;text-decoration:none;transition:border-color .15s ease,color .15s ease} a.rl-chip:hover{border-color:var(--color-primary);color:var(--color-primary)} /* ========================================================================== "Meine Spiele": Kacheln nach Dringlichkeit (rundenliga/tmpl/meine-spiele.php) ========================================================================== */ .rl-navbadge{display:inline-block;min-width:1.5em;margin-left:6px;padding:1px 6px;border-radius:99px;background:var(--league-red);color:#fff;font-size:.68rem;font-weight:700;line-height:1.5;text-align:center;vertical-align:middle} .rl-mg-sum{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 16px} .rl-mg-sum .chip{padding:6px 12px;border:1px solid var(--color-border);border-radius:99px;background:rgba(var(--tint),.03);font-size:.78rem;color:var(--color-text-muted)} .rl-mg-sum .chip b{color:var(--color-text);font-size:.95rem} .rl-mg-sum .chip.alert{border-color:rgba(255,77,67,.5);background:rgba(255,77,67,.12);color:#ffb3ae} .rl-mg-sum .chip.alert b{color:#fff} .rl-mg-sum .chip.ok{border-color:rgba(87,221,104,.4);color:#a8f0b3} .rl-mg-sum .next{margin-left:auto;font-size:.8rem;color:var(--color-text-muted)} .rl-tab-item .count.alert{color:#ff8a82;font-weight:700} .rl-mg-empty{padding:10px 2px;font-size:.85rem;color:var(--color-text-muted)} .rl-mg{--mg-tone:rgba(var(--tint),.25);margin:0 0 10px;border:1px solid var(--color-border);border-left:4px solid var(--mg-tone);border-radius:var(--radius-md);background:var(--gradient-panel),var(--color-surface);box-shadow:var(--shadow-md)} .rl-mg.tone-red{--mg-tone:var(--league-red)} .rl-mg.tone-orange{--mg-tone:var(--league-orange)} .rl-mg.tone-green{--mg-tone:var(--league-green)} .rl-mg.tone-blue{--mg-tone:var(--league-blue)} .rl-mg-head{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;margin:0;padding:12px 14px;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent} .rl-mg-main{display:flex;flex-direction:column;flex:1 1 auto;gap:5px;min-width:0} .rl-mg-title{display:flex;align-items:baseline;gap:.4em;min-width:0;font-size:.92rem;white-space:nowrap} .rl-mg-title .n{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} .rl-mg-title .lig{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--color-text-muted)} .rl-mg-meta{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--color-text-muted)} .rl-mg-dot{flex:none;width:14px;height:14px;border-radius:50%;background:var(--mg-tone)} .rl-mg-badge{flex:none;padding:4px 10px;border-radius:99px;background:color-mix(in srgb,var(--mg-tone) 16%,transparent);color:var(--mg-tone);font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap} .rl-mg.tone-muted .rl-mg-badge{color:var(--color-text-muted)} .rl-mg-chev{flex:none;color:var(--color-primary);transition:transform .15s ease} .rl-mg.is-open .rl-mg-chev{transform:rotate(180deg)} .rl-mg-body{display:none;padding:4px 16px 16px;border-top:1px solid var(--color-border)} .rl-mg.is-open .rl-mg-body{display:block} .rl-mg-note{margin:10px 0;font-size:.8rem;color:var(--color-text-muted)} .rl-mg-note.is-overdue{color:#ffb3ae} @media (max-width:820px){ .rl-mg-head{flex-wrap:wrap;gap:8px 10px} .rl-mg-main{flex:1 1 calc(100% - 36px)} .rl-mg-badge{order:3;margin-left:0} .rl-mg-sum .next{margin-left:0;flex:1 1 100%} } /* Bestaetigungs-Popup (yalmsConfirm in scripts.js): Farbe nach Art/Folge der Aktion */ .rl-cf-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:1;transition:opacity .2s ease} .rl-cf-overlay.is-closing{opacity:0;pointer-events:none} .rl-cf-box{width:100%;max-width:440px;margin:20px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)} .rl-cf-bar{height:6px;background:var(--cf-tone,var(--color-text-muted))} .rl-cf-body{padding:26px 24px 24px} .rl-cf-title{margin:0 0 8px;font-size:1.05rem;color:var(--cf-tone,var(--color-text))} .rl-cf-text{margin:0 0 22px;font-size:.9rem;color:var(--color-text-muted);line-height:1.5;white-space:pre-line} .rl-cf-actions{display:flex;gap:10px} .rl-cf-field{display:block;margin:0 0 12px;text-align:left} .rl-cf-field span{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin-bottom:4px} .rl-cf-field select{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:var(--radius-md);border:1px solid var(--color-border,rgba(var(--tint),.25));background:var(--color-surface-2,rgba(var(--tint),.06));color:var(--color-text);font:inherit} .rl-cf-field input{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:var(--radius-md);border:1px solid var(--color-border,rgba(var(--tint),.25));background:var(--color-surface-2,rgba(var(--tint),.06));color:var(--color-text);font:inherit} .rl-cf-field input:focus{outline:2px solid var(--league-orange,#f2a65a);outline-offset:1px} .rl-cf-error{margin:0 0 12px;font-size:.84rem;color:var(--league-red,#ff4d43)} .rl-cf-btn{flex:1;padding:10px;border:1px solid transparent;border-radius:var(--radius-md);font:inherit;font-weight:600;cursor:pointer} .rl-cf-ok{background:var(--cf-tone,var(--color-primary));color:var(--cf-on,#141414)} .rl-cf-ok:hover{filter:brightness(1.08)} .rl-cf-cancel{background:rgba(var(--tint),.08);border-color:var(--color-border);color:var(--color-text)} .rl-cf-btn:focus-visible{outline:2px solid var(--color-text);outline-offset:2px} .rl-cf-success{--cf-tone:#57dd68;--cf-on:#0d1f10} .rl-cf-info{--cf-tone:#5967ff;--cf-on:#fff} .rl-cf-warning{--cf-tone:#ffd84a;--cf-on:#211b00} .rl-cf-danger{--cf-tone:#ff4d43;--cf-on:#fff} @media (max-width:820px){.rl-cf-box{margin:12px}.rl-cf-actions{flex-direction:column-reverse}.rl-cf-btn{min-height:46px}} /* --------------------------------------------------------------------------- WYSIWYG-Textfeld (Frontend) - Markup aus yalms_wysiwyg_field(), Verhalten siehe scripts.js. Im Design der Seite: dunkle Flaeche, Akzentfarbe beim Fokus, gleiche Rundungen wie Eingabefelder. --------------------------------------------------------------------------- */ .yb-wysiwyg{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);overflow:hidden;transition:border-color .15s ease} .yb-wysiwyg:focus-within{border-color:var(--color-primary)} .yb-wysiwyg-toolbar{display:none;flex-wrap:wrap;align-items:center;gap:2px;padding:6px;background:rgba(var(--tint),.03);border-bottom:1px solid var(--color-border)} .yb-wysiwyg.is-active .yb-wysiwyg-toolbar{display:flex} .yb-wysiwyg-btn{min-width:30px;height:28px;padding:0 7px;border-radius:var(--radius-md);border:1px solid transparent;background:transparent;color:var(--color-text-muted);font:inherit;font-size:.74rem;font-weight:700;line-height:1;cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease} .yb-wysiwyg-btn:hover{color:var(--color-text);background:rgba(var(--accent-rgb),.14);border-color:var(--color-primary)} .yb-wysiwyg-sep{width:1px;align-self:stretch;margin:2px 4px;background:var(--color-border)} .yb-wysiwyg-editor{display:none;min-height:200px;max-height:520px;overflow-y:auto;padding:10px 12px;color:var(--color-text);font:inherit;line-height:1.6;text-transform:none;letter-spacing:normal;font-weight:400} .yb-wysiwyg.is-active .yb-wysiwyg-editor{display:block} .yb-wysiwyg-editor:focus{outline:none} .yb-wysiwyg-editor p{margin:0 0 .8em} .yb-wysiwyg-editor p:last-child{margin-bottom:0} .yb-wysiwyg-editor h3{margin:.6em 0 .4em;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;color:var(--color-primary)} .yb-wysiwyg-editor blockquote{margin:.6em 0;padding:4px 14px;border-left:3px solid var(--color-primary);color:var(--color-text-muted)} .yb-wysiwyg-editor a{color:var(--color-primary);text-decoration:underline} .yb-wysiwyg-editor ul,.yb-wysiwyg-editor ol{padding-left:1.4em;margin:0 0 .8em} .yb-wysiwyg.is-active textarea{display:none} @media (max-width:820px){ .yb-wysiwyg-toolbar{gap:4px;padding:8px} .yb-wysiwyg-btn{min-width:40px;height:38px;font-size:.85rem} .yb-wysiwyg-editor{font-size:16px;min-height:160px;max-height:60vh} } /* --------------------------------------------------------------------------- Spielerprofil: gemeinsame Bausteine der Profil-/Dashboard-Widgets. Die PlayerCard selbst (Sammelkarten-Design) steht weiter unten unter "PlayerCard". .pc-avatar bleibt hier stehen (Basis-Kreis-Avatar), weil der Profil-Editor ihn fuer die Profilbild-Vorschau wiederverwendet (siehe .pe-avatar .pc-avatar). --------------------------------------------------------------------------- */ .pc-avatar{flex:none;width:84px;height:84px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;border:3px solid var(--pc-color,#f2a65a);background:linear-gradient(180deg,#8f1614,#d83129);box-shadow:0 0 0 3px rgba(0,0,0,.35)} .pc-avatar img{width:100%;height:100%;object-fit:cover;display:block} .pc-avatar span{font-family:var(--font-display);font-size:2.4rem;color:#fff;line-height:1} .pf-bio p:last-child{margin-bottom:0} /* Streaming-Kanaele im Profil (unter der Bio): Icon + Plattform + Kanalname - wie die SocialMedia-Zeilen der Startseite (.social-row-link), aber NEBENEINANDER (umbrechend) statt untereinander. */ .pf-streams{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0} .pf-stream{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 8px;border-radius:var(--radius-md);background:rgba(var(--tint),.03);border:1px solid var(--color-border);transition:background .15s ease,border-color .15s ease;max-width:100%} .pf-stream:hover,.pf-stream:focus-visible{background:rgba(var(--tint),.07);border-color:var(--color-text-muted)} .pf-stream img{border-radius:7px;flex:none} .pf-stream-text{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.15} .pf-stream-platform{font-size:.78rem;font-weight:700;color:var(--color-text)} .pf-stream-account{font-size:.7rem;color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* --------------------------------------------------------------------------- PlayerCard: echte "Sammelkarte" im Stil von Pokémon/Magic - Rahmen in Seltenheits-Farbe (richtet sich nach dem besten Tabellenplatz), Artwork-Bereich mit Avatar+Glow, Typen-Leiste (eine Liga = ein "Typ"), Werte-Box im Attacken-Stil, Fuszeile mit Kartennummer. Markup: rundenliga/tmpl/profile/playercard.php. Seltenheits-Farbverlaeufe je Tier (--tc-a/--tc-b = Rahmenverlauf, --tc-glow = Schein). --------------------------------------------------------------------------- */ /* [playercard USERNAME]-Befehl in Rich-Content (Bio/News/Anmeldephasen-Text, siehe yalms_expand_shortcodes()): eigener Block mit sinnvoller Breite statt sich auf die volle Artikelbreite zu strecken wie .tc-wrap es sonst innerhalb einer schmalen Widget-Spalte tun wuerde. */ .tc-embed{display:flex;justify-content:center;margin:16px auto;max-width:280px} .tc-wrap{display:flex;justify-content:center} /* Download-Knopf (siehe scripts.js "PlayerCard als Bild speichern"): sitzt im Kartenkopf (.tc-top) anstelle der frueheren Punkte-Anzeige, dezent, deutlicher bei Hover/Fokus - ist Teil der Seite, nicht der Karte selbst, taucht deshalb nie im heruntergeladenen Bild auf (das wird per Canvas neu gezeichnet, nicht als Screenshot des DOM). z-index ueber .tc-holo (2), damit der Schimmer den Klick nicht abfaengt. */ .tc-dl{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;font-size:.62rem;line-height:1;cursor:pointer;opacity:.7;transition:opacity .15s ease,background .15s ease,transform .15s ease} .tc-card:hover .tc-dl,.tc-dl:focus-visible{opacity:1} .tc-dl:hover{background:var(--color-primary);color:#0a0b0d;transform:scale(1.1)} .tc-dl[disabled]{opacity:.35;cursor:wait} /* Feste Hoehe wie eine echte Sammelkarte. Die Saison-Werte-Zeilen sind jetzt IMMER exakt 6 (Tendenz gehoert dazu, siehe playercard.php), also eine bekannte Groesse - nur die Wettbewerbs-Uebersicht kann bei vielen aktiven Wettbewerben laenger werden, deshalb hat NUR sie einen eigenen Scrollbereich (siehe .tc-leagues), statt dass die ganze Karte waechst oder Inhalt irgendwo unsichtbar abgeschnitten wird. */ .tc-card{position:relative;width:100%;max-width:264px;height:480px;border-radius:16px;isolation:isolate;transition:transform .25s ease,box-shadow .25s ease} .tc-card:hover{transform:translateY(-5px) scale(1.015)} .tc-tier-legendary{--tc-a:#fff2c4;--tc-b:#d8952a;--tc-glow:rgba(255,216,74,.55)} .tc-tier-rare{--tc-a:#dfeeff;--tc-b:#3f7fc9;--tc-glow:rgba(69,184,255,.45)} .tc-tier-common{--tc-a:#e3c7a4;--tc-b:#8a5a2f;--tc-glow:rgba(184,124,63,.35)} .tc-tier-none{--tc-a:#8b93a3;--tc-b:#4a505c;--tc-glow:rgba(150,158,175,.2)} .tc-card:hover{box-shadow:0 18px 34px rgba(0,0,0,.45),0 0 0 1px var(--tc-b),0 0 24px var(--tc-glow)} .tc-frame{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;gap:7px;padding:3px;border-radius:16px;background:linear-gradient(155deg,var(--tc-a),var(--tc-b) 55%,var(--tc-a));box-shadow:0 10px 24px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.25)} .tc-frame:before{content:'';position:absolute;inset:3px;border-radius:13px;background:linear-gradient(175deg,#1a1c22,#0c0d10 60%);z-index:-1} .tc-frame>*{position:relative;z-index:1;margin-inline:9px} .tc-top{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:9px} .tc-name{font-family:var(--font-display);font-size:1.05rem;line-height:1.05;text-transform:uppercase;letter-spacing:.02em;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 rgba(0,0,0,.5);min-width:0;flex:1 1 auto} .tc-art{position:relative;flex:none;height:170px;border-radius:10px;overflow:hidden;background:radial-gradient(120% 140% at 50% 0%,color-mix(in srgb,var(--art-color,#f2a65a) 38%,#15161a),#0c0d10 75%);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center} .tc-art-glow{position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,color-mix(in srgb,var(--art-color,#f2a65a) 55%,transparent),transparent 35%);animation:tc-spin 7s linear infinite;opacity:.55} .tc-avatar{position:relative;width:64px;height:64px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,.6);background:linear-gradient(180deg,#8f1614,#d83129);box-shadow:0 0 0 3px rgba(0,0,0,.4),0 0 16px rgba(0,0,0,.5)} .tc-avatar img{width:100%;height:100%;object-fit:cover;display:block} .tc-avatar span{font-family:var(--font-display);font-size:1.8rem;color:#fff;line-height:1} .tc-rarity-gem{position:absolute;top:5px;right:7px;font-size:.7rem;color:var(--tc-a);text-shadow:0 0 6px var(--tc-glow),0 1px 1px rgba(0,0,0,.6)} .tc-moves{flex:none;display:flex;flex-direction:column;gap:2px;padding:6px 8px;border-radius:8px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08)} .tc-move{display:flex;align-items:center;gap:5px;padding:2px 0;font-size:.68rem} .tc-pip{width:6px;height:6px;border-radius:2px;background:var(--tc-b);flex:none;transform:rotate(45deg)} .tc-move-label{color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tc-move-dots{flex:1;min-width:6px;border-bottom:1px dotted rgba(255,255,255,.18);margin-bottom:3px} .tc-move-value{flex:none;font-family:var(--font-display);font-size:.82rem;color:var(--color-text)} .tc-move-bar{height:3px;margin:0 0 3px 11px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden} .tc-move-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--tc-b),var(--tc-a));border-radius:99px} /* Wettbewerbs-Uebersicht: bei mehreren aktiven Wettbewerben durch Klick auf eine Zeile umschaltbar (kein Dropdown mehr, siehe playercard.php/scripts.js) - deshalb echte