on */ .criteria-tip-floating { position:fixed; z-index:9999; background:#1c1c2e; color:white; font-family:"Nunito Sans",sans-serif; font-weight:400; font-size:.7rem; line-height:1.45; padding:.45rem .65rem; border-radius:6px; width:210px; max-width:calc(100vw - 24px); white-space:normal; pointer-events:none; box-shadow:0 4px 16px rgba(0,0,0,.18); opacity:0; transition:opacity .15s; } .criteria-tip-floating.is-visible { opacity:1; } .criteria-tip-floating::before { content:""; position:absolute; border:5px solid transparent; } .criteria-tip-floating[data-side="right"]::before { top:50%; left:-10px; transform:translateY(-50%); border-right-color:#1c1c2e; } .criteria-tip-floating[data-side="left"]::before { top:50%; right:-10px; transform:translateY(-50%); border-left-color:#1c1c2e; } .criteria-tip-floating[data-side="bottom"]::before { left:50%; top:-10px; transform:translateX(-50%); border-bottom-color:#1c1c2e; } .criteria-tip-floating[data-side="top"]::before { left:50%; bottom:-10px; transform:translateX(-50%); border-top-color:#1c1c2e; } /* ---- BROKER / PLATFORM VIEWPORT ---- */ .brokers-viewport { flex:1; overflow:hidden; min-width:0; } .brokers-track { display:flex; transition:transform .42s cubic-bezier(.4,0,.2,1); will-change:transform; } /* ---- BROKER / PLATFORM COLUMN ---- */ .broker-col { flex-shrink:0; border-right:1px solid var(--clr-border); } .broker-col:last-child { border-right:none; } .broker-col__head { height:var(--header-height); padding:1.1rem 1rem; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; min-height:110px; } .broker-col__head::after { content:""; position:absolute; bottom:-30px; right:-20px; width:90px; height:90px; border-radius:50%; background:rgba(255,255,255,.06); pointer-events:none; } .broker-avatar { width:42px; height:42px; background:rgba(255,255,255,.18); border:1.5px solid rgba(255,255,255,.25); border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:"Sora",sans-serif; font-weight:700; font-size:.85rem; color:white; letter-spacing:-.02em; flex-shrink:0; } .broker-col__name { font-family:"Sora",sans-serif; font-size:.88rem; font-weight:700; color:white; line-height:1.3; } .broker-col__depot { font-size:.7rem; color:rgba(255,255,255,.55); margin-top:.1rem; } .broker-row { min-height:var(--row-height); border-bottom:1px solid var(--clr-border); display:flex; align-items:center; justify-content:center; padding:6px .75rem; font-size:.82rem; color:var(--clr-text); text-align:center; line-height:1.35; } .broker-row:last-child { border-bottom:none; } .broker-row.alt { background:var(--clr-row-alt); } .broker-row--cta { padding:.5rem .75rem; } .broker-cta { display:inline-flex; align-items:center; gap:.3rem; background:var(--clr-accent); color:white; font-size:.75rem; font-weight:700; padding:.45rem .85rem; border-radius:100px; transition:all .2s; white-space:nowrap; } .broker-cta:hover { background:#e5571f; transform:translateY(-1px); box-shadow:0 4px 12px rgba(255,107,53,.35); } /* ============================================================ BADGES ============================================================ */ .badge { display:inline-flex; align-items:center; gap:.25rem; padding:.22rem .55rem; border-radius:100px; font-size:.73rem; font-weight:700; white-space:nowrap; } .badge--green { background:#d1f5ea; color:#0d7a5c; } .badge--red { background:#ffe5e5; color:#c0392b; } .badge--gray { background:var(--clr-border); color:var(--clr-muted); } .badge--amber { background:#fff3d1; color:#9a6a00; } /* ============================================================ GRADE / TEST SCORE ============================================================ */ .grade-cell { display:flex; flex-direction:column; align-items:center; gap:4px; padding:4px 0; } .grade-stars { display:flex; gap:1px; font-size:1rem; line-height:1; color:#d1d5db; } .grade-stars .s-full { color:inherit; } .grade-stars .s-empty { color:#d1d5db; } .grade-stars .s-part { position:relative; color:#d1d5db; overflow:hidden; display:inline-block; } .grade-stars .s-part::after { content:"★"; position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; width:var(--fill,50%); } .grade--good .s-part::after { color:#16a57c; } .grade--ok .s-part::after { color:#f59e0b; } .grade--poor .s-part::after { color:#e55757; } .grade--good { color:#16a57c; } .grade--ok { color:#f59e0b; } .grade--poor { color:#e55757; } .grade-score { font-family:"Sora",sans-serif; font-size:.74rem; font-weight:700; color:var(--clr-text); } /* ============================================================ FLAG / ICON / FEATURE CHIPS ============================================================ */ .flag-chips { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; padding:4px 2px; } .flag-chip { font-size:1.25rem; line-height:1; cursor:default; } .icon-chips { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:center; padding:4px 2px; } .icon-chip { font-size:1.1rem; line-height:1; cursor:default; } .feature-chips { display:flex; flex-wrap:wrap; gap:3px; justify-content:center; align-items:center; padding:4px 4px; max-width:100%; } .feature-chip { display:inline-flex; align-items:center; font-size:.62rem; line-height:1; font-weight:600; padding:.2rem .4rem; border-radius:5px; cursor:default; white-space:nowrap; } .feature-chip--on { background:#d1f5ea; color:#0d7a5c; } .feature-chip--off { background:var(--clr-border); color:var(--clr-muted); opacity:.7; } /* ============================================================ DRIP CELL (broker: automatic reinvestment) ============================================================ */ .drip-cell { display:flex; align-items:center; gap:5px; justify-content:center; } .info-chip { flex-shrink:0; width:15px; height:15px; border-radius:50%; background:var(--clr-primary-tint); border:1px solid var(--clr-primary-light); display:inline-flex; align-items:center; justify-content:center; font-size:.58rem; font-style:normal; color:var(--clr-primary-dark); cursor:help; } /* ============================================================ DEPOT BANK CELL (broker only) ============================================================ */ .custodian-cell { display:flex; flex-direction:column; align-items:center; gap:3px; justify-content:center; padding:4px 4px; } .custodian-row { display:flex; align-items:center; gap:4px; justify-content:center; } .custodian-name { font-size:.73rem; color:var(--clr-text); text-align:center; line-height:1.3; } /* ============================================================ FREE-TEXT CELL (special features) ============================================================ */ .cell-text { font-size:.72rem; line-height:1.4; color:var(--clr-muted); text-align:center; padding:6px 4px; width:100%; } .cell-text--neutral { color:var(--clr-border); } .special-pos { display:inline-block; color:#0d7a5c; background:#d1f5ea; border-radius:6px; padding:.1rem .35rem; font-weight:600; font-size:.71rem; line-height:1.5; } .special-neg { display:inline-block; color:#c0392b; background:#ffe5e5; border-radius:6px; padding:.1rem .35rem; font-weight:600; font-size:.71rem; line-height:1.5; } /* ============================================================ COUNTRY RATING BADGE (broker only) ============================================================ */ .rating-badge { display:inline-flex; align-items:center; justify-content:center; font-size:.58rem; font-weight:700; line-height:1; padding:.15rem .3rem; border-radius:4px; flex-shrink:0; cursor:default; white-space:nowrap; } .rating-badge--aaa { background:#d1f5ea; color:#0d7a5c; } .rating-badge--aa { background:#e0f5e0; color:#2e7d2e; } .rating-badge--aplus { background:#fff3d1; color:#9a6a00; } .rating-badge--a { background:#ffeedd; color:#a05000; } /* ============================================================ TRADING VENUES FLAG CHIPS (broker only) ============================================================ */ .venue-chips { display:flex; flex-wrap:wrap; gap:4px; justify-content:center; padding:4px 2px; } .venue-chip { display:inline-flex; align-items:center; gap:3px; background:var(--clr-row-alt); border:1px solid var(--clr-border); border-radius:12px; padding:2px 7px; font-size:.72rem; line-height:1.4; cursor:default; } .venue-chip b { font-weight:600; } .venue-unknown { background:#fff8ec; border-color:#f0d07a; color:#7a5c00; } .venue-chip.venue-zero { opacity:.45; } /* ============================================================ AWARD BADGE (best broker / best platform) ============================================================ */ .broker-award { font-size:.65rem; font-weight:700; letter-spacing:.02em; padding:3px 8px; border-radius:20px; display:inline-block; margin-bottom:6px; text-align:center; } .broker-award--gold { background:#fff3c4; color:#7a5200; border:1px solid #f0c040; } .broker-award--silver { background:#e8f0ff; color:#1a3a8a; border:1px solid #93b4ff; } .broker-award--bronze { background:#e8f5ec; color:#1a5c2e; border:1px solid #6dcb8e; } /* ============================================================ SCROLL FADE HINT (table overflow) ============================================================ */ .comparison-fade-right { position:relative; } .comparison-fade-right::after { content:""; position:absolute; top:0; right:0; width:40px; height:100%; background:linear-gradient(to right,transparent,var(--clr-fade)); pointer-events:none; border-radius:0 var(--radius) var(--radius) 0; transition:opacity .3s; } .comparison-fade-right.at-end::after { opacity:0; } /* ============================================================ INLINE DISCLAIMER (below comparison table) ============================================================ */ .disclaimer--inline { background: var(--clr-accent-light); border: 1px solid rgba(229, 87, 31, .22); border-left: 3px solid var(--clr-accent); border-radius: var(--radius-sm); padding: .65rem 1rem; margin-top: 1.25rem; font-size: .78rem; color: var(--clr-disclaimer-text); line-height: 1.5; } .disclaimer--inline .disclaimer__inner { max-width: none; margin: 0; } .disclaimer--inline .disclaimer__inner--affiliate { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid rgba(229, 87, 31, .2); } /* ============================================================ PDF LINK ROW (below comparison) ============================================================ */ .pdf-link-row { display: flex; justify-content: flex-end; margin-top: .75rem; } .pdf-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; color: var(--clr-muted); text-decoration: none; padding: .3rem .5rem; border-radius: var(--radius-xs); transition: color .2s, background .2s; } .pdf-link:hover { color: var(--clr-primary-dark); background: var(--clr-primary-tint); } .pdf-link__icon { font-size: .85rem; line-height: 1; } /* ============================================================ CELL WITH NOTE (cell + inline ℹ icon) ============================================================ */ .cell-with-note { display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; } /* ============================================================ CSS INSTANT TOOLTIPS – data-tip on chips (upward) ============================================================ */ [data-tip]:not(.criteria-tip) { position:relative; } [data-tip]:not(.criteria-tip)::before { content:""; position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:#1c1c2e; opacity:0; pointer-events:none; transition:opacity .15s; z-index:401; } [data-tip]:not(.criteria-tip)::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 13px); left:50%; transform:translateX(-50%); background:#1c1c2e; color:white; font-family:"Nunito Sans",sans-serif; font-weight:400; font-size:.68rem; line-height:1.45; padding:.4rem .6rem; border-radius:6px; min-width:120px; max-width:230px; white-space:normal; text-align:center; opacity:0; pointer-events:none; transition:opacity .15s; z-index:400; } [data-tip]:not(.criteria-tip):hover::before, [data-tip]:not(.criteria-tip):hover::after { opacity:1; } /* ============================================================ FEATURE / INFO GRID ("Worauf solltest du achten?") ============================================================ */ .features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.25rem; } .feature-card { background:var(--clr-card); border:1px solid var(--clr-border); border-radius:var(--radius); padding:1.75rem; transition:all .3s; } .feature-card:hover { border-color:var(--clr-primary-light); box-shadow:var(--shadow-lg); transform:translateY(-2px); } .feature-card__icon { width:48px; height:48px; background:var(--clr-primary-tint); border:1px solid var(--clr-primary-light); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.35rem; margin-bottom:1rem; } .feature-card h3 { font-family:"Sora",sans-serif; font-size:.98rem; font-weight:700; margin-bottom:.45rem; } .feature-card p { font-size:.85rem; color:var(--clr-muted); line-height:1.65; } /* ============================================================ MOBILE TABLE ADJUSTMENTS ============================================================ */ @media(max-width:768px){ :root{ --criteria-width: 138px; --row-height: 52px; --header-height: 140px; } .criteria-row{ font-size:.7rem; padding:5px .75rem; } .criteria-col__head{ padding:.75rem; } .broker-col__head { min-height: 140px; } } @media(max-width:480px){ :root{ --criteria-width: 108px; --row-height: 50px; --header-height: 148px; } .criteria-row{ font-size:.65rem; padding:5px .55rem; gap:.2rem; } .criteria-row__icon{ display:none; } .criteria-tip{ display:none; } .broker-row{ font-size:.74rem; padding:5px .5rem; } .broker-col__name{ font-size:.78rem; } .broker-col__head { min-height: 148px; } } /* ============================================================ NAV DOTS: MOBILE COMPACT – hide dot row, show text counter ============================================================ */ .carousel-compact-counter { display: none; font-size: .8rem; font-weight: 600; color: var(--clr-muted); min-width: 52px; text-align: center; } @media (max-width: 600px) { .nav-dots { display: none !important; } .carousel-compact-counter { display: block; } } /* ============================================================ MOBILE TAP TOOLTIP – reveal info-chip tooltip on tap ============================================================ */ @media (hover: none), (pointer: coarse) { .cell-with-note.tip-open .info-chip::before, .cell-with-note.tip-open .info-chip::after, .venue-chip.tip-open::before, .venue-chip.tip-open::after { opacity: 1 !important; } .broker-row { cursor: pointer; } } /* ============================================================ DARK MODE – status colours (palette flips in base.css) ------------------------------------------------------------ The pastel status pills get translucent backgrounds + light text so they read on dark surfaces instead of glaring. ============================================================ */ :root[data-theme="dark"] .badge--green { background:rgba(22,165,124,.20); color:#5fe0b4; } :root[data-theme="dark"] .badge--red { background:rgba(229,87,87,.22); color:#ff9d9d; } :root[data-theme="dark"] .badge--amber { background:rgba(245,158,11,.20); color:#f3c460; } :root[data-theme="dark"] .feature-chip--on { background:rgba(22,165,124,.20); color:#5fe0b4; } :root[data-theme="dark"] .special-pos { background:rgba(22,165,124,.20); color:#5fe0b4; } :root[data-theme="dark"] .special-neg { background:rgba(229,87,87,.22); color:#ff9d9d; } :root[data-theme="dark"] .grade-stars .s-empty, :root[data-theme="dark"] .grade-stars .s-part { color:#3b424d; } :root[data-theme="dark"] .cell-text--neutral { color:#525a66; } :root[data-theme="dark"] .venue-unknown { background:rgba(240,208,122,.12); border-color:rgba(240,208,122,.38); color:#e3c163; } :root[data-theme="dark"] .rating-badge--aaa { background:rgba(22,165,124,.20); color:#5fe0b4; } :root[data-theme="dark"] .rating-badge--aa { background:rgba(86,200,86,.18); color:#88d488; } :root[data-theme="dark"] .rating-badge--aplus { background:rgba(245,158,11,.20); color:#f3c460; } :root[data-theme="dark"] .rating-badge--a { background:rgba(214,150,80,.20); color:#e0a868; } :root[data-theme="dark"] .broker-award--gold { background:rgba(240,192,64,.15); color:#efce63; border-color:rgba(240,192,64,.42); } :root[data-theme="dark"] .broker-award--silver { background:rgba(147,180,255,.15); color:#abc4ff; border-color:rgba(147,180,255,.42); } :root[data-theme="dark"] .broker-award--bronze { background:rgba(109,203,142,.15); color:#84d29e; border-color:rgba(109,203,142,.42); }