/* ==========================================================================
   PokerFirma 2026 — native styling for Shortcodes Ultimate (SU 7.8.x)
   SU's own CSS is not printed on pf2026 templates (see bootstrap.php); SU's JS stays.
   Based on su-native.css from the handoff; tables / pros-cons / tab hover follow
   "Templates v5" (decision 2026-09-30). Pros/cons are detected from the icons editors
   already use: check-circle = pros, remove = cons (no content changes needed).
   ========================================================================== */

.pf26 .su-u-clearfix::after{content:"";display:table;clear:both}
.pf26 .su-u-trim>:first-child{margin-top:0}
.pf26 .su-u-trim>:last-child{margin-bottom:0}

/* ---------- su_tabs ---------- */
.pf26 .su-tabs{margin:32px 0;padding:0;background:none;border-radius:0}
.pf26 .su-tabs-nav{display:flex;gap:4px;overflow-x:auto;border-bottom:3px solid var(--pf-green);scrollbar-width:thin}
.pf26 .su-tabs-nav span{flex:none;display:block;padding:12px 18px;margin:0;border:0;border-radius:0;font:700 15px/1.2 var(--pf-head);background:var(--pf-grey);color:var(--pf-ink);cursor:pointer;white-space:nowrap}
.pf26 .su-tabs-nav span:hover{box-shadow:inset 0 -3px 0 var(--pf-mint)}
.pf26 .su-tabs-nav span:focus-visible{outline:2px solid var(--pf-green);outline-offset:2px}
.pf26 .su-tabs-nav span.su-tabs-current,.pf26 .su-tabs:not(:has(.su-tabs-current)) .su-tabs-nav span:first-child{background:var(--pf-green);color:#fff!important}
.pf26 .su-tabs-nav span:not(.su-tabs-current){color:var(--pf-ink)!important}
.pf26 .su-tabs-nav span.su-tabs-disabled{opacity:.5;cursor:default}
.pf26 .su-tabs-nav span :is(strong,b,em,i,a){font-weight:inherit;color:inherit!important}
.pf26 .su-tabs-panes{padding:0;background:none}
.pf26 .su-tabs-pane{display:none;padding:24px;background:var(--pf-grey);font-size:16px;line-height:1.65;color:var(--pf-text)}
.pf26 .su-tabs-pane.su-tabs-pane-open{display:block}
.pf26 .su-tabs-pane>*+*{margin-top:12px}
.pf26 .su-tabs-pane :is(h2,h3,h4){margin:0 0 8px;font:700 20px/1.3 var(--pf-head);color:var(--pf-ink)}
/* before SU JS has run (WP Rocket delays JS): show first pane, mark first tab */
.pf26 .su-tabs:not(:has(.su-tabs-current)) .su-tabs-pane:first-child{display:block}
.pf26 .su-tabs:not(:has(.su-tabs-current)) .su-tabs-nav span:first-child{background:var(--pf-green);color:#fff}
/* vertical tabs → horizontal on this design */
.pf26 .su-tabs-vertical .su-tabs-nav,.pf26 .su-tabs-vertical .su-tabs-panes{float:none;width:auto}
.pf26 .su-tabs-vertical .su-tabs-nav span{border:0}
@media (max-width:899px){
  /* su-tabs-mobile-stack: SU stacks tabs on phones; keep the scrolling nav instead */
  .pf26 .su-tabs-mobile-stack .su-tabs-nav{display:flex}
}

/* ---------- su_accordion / su_spoiler ---------- */
.pf26 .su-accordion{margin:32px 0;border-top:3px solid var(--pf-ink)}
.pf26 .su-spoiler{margin:0;border:0;border-bottom:1px solid var(--pf-grey-hover);border-radius:0;background:none;box-shadow:none}
.pf26 .su-accordion>.su-spoiler:first-child,.pf26 .su-spoiler+.su-spoiler{border-top:0}
.pf26 .su-spoiler:not(.su-accordion .su-spoiler){border-top:3px solid var(--pf-ink);margin:32px 0}
.pf26 .su-spoiler:not(.su-accordion .su-spoiler)+.su-spoiler:not(.su-accordion .su-spoiler){border-top:0;margin-top:-32px}
.pf26 .su-spoiler-title{position:relative;display:block;padding:18px 44px 18px 0;margin:0;border:0;border-radius:0;background:none;font:700 18px/1.3 var(--pf-head);color:var(--pf-ink);cursor:pointer}
.pf26 .su-spoiler-title:hover{color:var(--pf-green)}
.pf26 .su-spoiler-title:focus-visible{outline:2px solid var(--pf-green);outline-offset:2px}
.pf26 .su-spoiler-icon{position:absolute;right:0;left:auto;top:50%;width:28px;height:28px;margin-top:-14px;background:var(--pf-green);font-size:0;line-height:0}
.pf26 .su-spoiler-icon::before{content:"−";display:grid;place-items:center;width:100%;height:100%;color:#fff;font:400 18px/1 var(--pf-body)}
.pf26 .su-spoiler-closed .su-spoiler-icon{background:var(--pf-grey)}
.pf26 .su-spoiler-closed .su-spoiler-icon::before{content:"+";color:var(--pf-ink)}
.pf26 .su-spoiler-content{padding:0 44px 20px 0;margin:0;border:0;background:none;font-size:16px;line-height:1.65;color:var(--pf-text)}
.pf26 .su-spoiler-content>*+*{margin-top:12px}
.pf26 .su-spoiler-content :is(h2,h3,h4){font:700 18px/1.3 var(--pf-head);color:var(--pf-ink)}
.pf26 .su-spoiler-closed>.su-spoiler-content{display:none}

/* ---------- FAQ plugin (faq-content-webnow: .man_faq_sec) — same look as su_accordion ---------- */
.pf26 .man_faq_sec{margin:32px 0;padding:0;border:0;border-top:3px solid var(--pf-ink);background:none}
.pf26 .man_faq_sec .ms_faq{margin:0;padding:0;border:0;border-bottom:1px solid var(--pf-grey-hover);border-radius:0;background:none;box-shadow:none}
.pf26 .man_faq_sec .accordionButton,.pf26 .man_faq_sec .accordionButton.over,.pf26 .man_faq_sec .accordionButton.on{position:relative;display:block;margin:0;padding:18px 44px 18px 0;border:0;background:none!important;cursor:pointer}
.pf26 .man_faq_sec .accordionButton :is(h2,h3,h4,h5,h6){margin:0!important;padding:0;font:700 18px/1.3 var(--pf-head)!important;color:var(--pf-ink)!important;background:none;border:0}
.pf26 .man_faq_sec .accordionButton:hover :is(h2,h3,h4,h5,h6){color:var(--pf-green)!important}
.pf26 .man_faq_sec .accordionButton:focus-visible{outline:2px solid var(--pf-green);outline-offset:2px}
.pf26 .man_faq_sec .accordionButton::before{content:none}
.pf26 .man_faq_sec .accordionButton::after{content:"+";position:absolute;right:0;top:50%;width:28px;height:28px;margin-top:-14px;display:grid;place-items:center;background:var(--pf-grey);color:var(--pf-ink);font:400 18px/1 var(--pf-body)}
.pf26 .man_faq_sec .accordionButton.on::after{content:"−";background:var(--pf-green);color:#fff}
.pf26 .man_faq_sec .accordionContent{margin:0;padding:0 44px 20px 0;border:0;background:none;font-size:16px;line-height:1.65;color:var(--pf-text)}
.pf26 .man_faq_sec .accordionContent p{margin:0!important;font-size:16px;line-height:1.65;color:var(--pf-text)}
.pf26 .man_faq_sec .ms_faq>div{display:block;margin:0;padding:0;border:0;border-radius:0;background:none!important;box-shadow:none}
/* inside a grey note: white +/− boxes stay visible */
.pf26 .su-note .man_faq_sec .accordionButton:not(.on)::after{background:#fff}
.pf26 .man_faq_sec .accordionContent>*+*{margin-top:12px}

/* content that follows the FAQ items inside the plugin container (e.g. "Quellen") */
.pf26 .man_faq_sec>:not(.ms_faq):not(script){margin-top:0}
.pf26 .man_faq_sec>.ms_faq+:not(.ms_faq):not(script),.pf26 .man_faq_sec>:is(h2,h3,h4){margin-top:48px}
.pf26 .man_faq_sec>:is(h2,h3,h4)+*{margin-top:14px}
.pf26 .man_faq_sec>:is(ul,ol,p)+*{margin-top:14px}
.pf26 .man_faq_sec>h2{font:800 var(--pf26-fs-h2)/1.15 var(--pf-head);letter-spacing:-.015em;color:var(--pf-ink)}
.pf26 .man_faq_sec>h3{font:800 var(--pf26-fs-h3)/1.25 var(--pf-head);color:var(--pf-ink)}

/* ---------- hand-built "Wussten Sie schon?" boxes (.info-box-container, inline styles) → quote design ---------- */
.pf26 .info-box-container{position:relative!important;margin:36px 0 0!important;padding:28px 32px 28px 96px!important;border:0!important;border-radius:0!important;background:var(--pf-green)!important;box-shadow:none!important;color:#fff!important;font-family:var(--pf-body)!important}
.pf26 .info-box-container::before{content:"„";position:absolute;left:32px;top:24px;font:800 64px/.8 var(--pf-head);color:var(--pf-amber)}
.pf26 .info-box-container>:is(h2,h3,h4){margin:0 0 10px!important;padding:0!important;font:900 12px/1.2 var(--pf-body)!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--pf-mint)!important}
.pf26 .info-box-container>div[style*="position: absolute"]{display:none!important}
.pf26 .info-box-container>p{margin:0!important;padding:0!important;text-align:left!important;font:500 20px/1.45 var(--pf-head)!important;color:#fff!important}
.pf26 .info-box-container>p+p{margin-top:12px!important}
.pf26 .info-box-container a{color:var(--pf-mint)!important}
@media (max-width:899px){.pf26 .info-box-container{padding:72px 20px 22px!important}.pf26 .info-box-container::before{left:20px;top:20px}}

/* ---------- su_box / su_quote ---------- */
.pf26 .su-box{margin:32px 0;border:0!important;border-radius:0!important;background:var(--pf-green)!important;color:#fff;box-shadow:none}
.pf26 .su-box-title{padding:28px 32px 0!important;background:none!important;color:var(--pf-mint)!important;font:900 12px/1.2 var(--pf-body);letter-spacing:.08em;text-transform:uppercase;border-radius:0!important}
.pf26 .su-box-content{padding:10px 32px 28px!important;color:#fff!important;background:none!important;border-radius:0!important}
.pf26 .su-box .su-box-content,.pf26 .su-box .su-box-content :is(p,li){color:#fff!important}
.pf26 .su-box .su-quote{margin:0;padding:0 0 0 56px}
.pf26 .su-quote{position:relative;margin:36px 0 0;padding:0 0 0 56px;border:0;background:none;font:500 20px/1.45 var(--pf-head);font-style:normal}
.pf26 .su-quote::before{content:"„";position:absolute;left:0;top:-6px;font:800 64px/.8 var(--pf-head);color:var(--pf-amber)}
.pf26 .su-quote-inner{padding:0;margin:0;background:none}
.pf26 .su-quote-inner::before,.pf26 .su-quote-inner::after{content:none;display:none}
.pf26 .su-quote-cite{display:block;margin-top:12px;font:400 15px/1.4 var(--pf-body);color:inherit;opacity:.8}
.pf26 .su-quote:not(.su-box .su-quote) .su-quote-inner{color:var(--pf-green);font-weight:700;font-size:var(--pf26-fs-quote);line-height:1.3;letter-spacing:-.01em}

/* ---------- su_note (used widely on money pages; not in the handoff) ---------- */
.pf26 .su-note{margin:32px 0;border:0!important;border-radius:0!important;background:none!important}
.pf26 .su-note .su-note-inner{padding:28px!important;border:0!important;border-radius:0!important;background:var(--pf-grey)!important;color:var(--pf-text)!important}
/* vertical rhythm inside notes: 14px between blocks, 32px above a heading, 8px below it */
.pf26 .su-note-inner>*{margin:0}
.pf26 .su-note-inner>*+*{margin-top:14px}
.pf26 .su-note-inner>:is(h2,h3,h4,h5){margin:32px 0 0;font:800 20px/1.3 var(--pf-head);color:var(--pf-ink)!important}
.pf26 .su-note-inner>:is(h2,h3,h4,h5):first-child{margin-top:0}
.pf26 .su-note-inner>:is(h2,h3,h4,h5)+*{margin-top:8px}
.pf26 .su-note-inner>h2{font-size:22px}
/* ---------- su_row / su_column ---------- */
.pf26 .su-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:32px 0}
.pf26 .su-row::before,.pf26 .su-row::after{display:none;content:none}
.pf26 .su-row:has(>.su-column-size-1-3){grid-template-columns:repeat(3,minmax(0,1fr))}
.pf26 .su-row:has(>.su-column-size-1-4){grid-template-columns:repeat(4,minmax(0,1fr))}
.pf26 .su-row:has(>.su-column-size-2-3){grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.pf26 .su-row:has(>.su-column-size-1-1){grid-template-columns:minmax(0,1fr)}
.pf26 .su-column{float:none!important;width:auto!important;margin:0!important;min-width:0}
.pf26 .su-column-inner{padding:0;margin:0}
.pf26 .su-column-inner>*+*{margin-top:12px}
.pf26 .su-column-centered{text-align:inherit}
/* plain comparison columns (e.g. Casino Apps vs. Mobile Webseite) */
.pf26 .su-column:not(:has(.sui-check-circle,.sui-remove)) .su-column-inner{padding-top:14px;border-top:3px solid var(--pf-ink)}
.pf26 .su-column:not(:has(.sui-check-circle,.sui-remove)) .su-column-inner :is(h3,h4,h5){font:700 19px/1.3 var(--pf-head);color:var(--pf-ink)}

/* ---------- Pros / cons (su_row > su_column > h4 + su_list) ---------- */
.pf26 .su-row:has(.sui-check-circle):has(.sui-remove){gap:2px}
.pf26 .su-column:has(.sui-check-circle) .su-column-inner,
.pf26 .su-column:has(.sui-remove) .su-column-inner{height:100%;padding:24px}
.pf26 .su-column:has(.sui-check-circle) .su-column-inner{background:var(--pf-green);color:#fff}
.pf26 .su-column:has(.sui-remove) .su-column-inner{background:var(--pf-grey)}
.pf26 .su-column:has(.sui-check-circle) :is(h3,h4,h5){margin:0 0 10px;font:800 var(--pf26-fs-h4)/1.25 var(--pf-head);color:#fff}
.pf26 .su-column:has(.sui-remove) :is(h3,h4,h5){margin:0 0 10px;font:800 var(--pf26-fs-h4)/1.25 var(--pf-head);color:var(--pf-ink)}

/* pros/cons inside a (grey) note: cons panel turns white so it stays visible */
.pf26 .su-note .su-column:has(.sui-remove) .su-column-inner{background:#fff}

/* ---------- su_list ---------- */
.pf26 .su-list{margin:0!important;padding:0}
.pf26 .su-list ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.pf26 .su-list li{position:relative;margin:0;padding-left:20px;font-size:16px;line-height:1.6;color:inherit;list-style:none}
.pf26 .su-list li>i.sui,.pf26 .su-list li>img{display:none}
.pf26 .su-list li::before{content:"";position:absolute;left:4px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--pf-green)}
/* pros / cons keep their + and – markers */
.pf26 .su-list:has(.sui-check-circle) li::before,.pf26 .su-list:has(.sui-remove) li::before{left:0;top:0;width:auto;height:auto;border-radius:0;background:none;font:900 16px/1.6 var(--pf-body)}
.pf26 .su-list:has(.sui-check-circle) li::before{content:"+";color:var(--pf-green)}
.pf26 .su-column:has(.sui-check-circle) .su-list li::before{color:var(--pf-mint)}
.pf26 .su-list:has(.sui-remove) li::before{content:"–";color:#000}
.pf26 .su-column:has(.sui-check-circle) .su-list li{color:#fff}
.pf26 .su-list li+li{margin-top:0}

/* ---------- su_table (+ plain tables inside it) ---------- */
.pf26 .su-table{margin:32px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;background:none}
.pf26 .su-table table{width:100%;min-width:560px;border-collapse:collapse;border:0;margin:0;font-size:15px;line-height:1.5;color:var(--pf-ink);table-layout:auto}
.pf26 .su-table th{padding:12px 14px;background:#000!important;color:#fff!important;text-align:left;font:900 12px/1.3 var(--pf-body);letter-spacing:.06em;text-transform:uppercase;border:0!important;vertical-align:bottom}
.pf26 .su-table th :is(b,strong){font-weight:inherit;color:inherit}
.pf26 .su-table td{padding:14px;border:0!important;vertical-align:top;background:#fff!important;color:var(--pf-text)}
.pf26 .su-table tr:nth-child(odd) td,.pf26 .su-table-alternate tr:nth-child(odd) td{background:var(--pf-grey)!important}
.pf26 .su-table td:first-child{font-weight:700;color:var(--pf-ink)}
/* rank columns: a first cell that is just a number gets the rank style */
.pf26 .su-table td:first-child:is(:empty,:not(:has(*))){font:800 18px/1.4 var(--pf-head);color:var(--pf-green)}
.pf26 .su-table td a{color:var(--pf-green);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--pf-mint);text-underline-offset:3px}

/* tables pasted into [su_table] without <th>: first row is the header; inline row heights neutralised */
.pf26 .su-table :is(table,tr,td,th){height:auto!important}
.pf26 .su-table table:not(:has(th)) tr:first-child td{background:#000!important;color:#fff!important;padding:12px 14px;font:900 12px/1.3 var(--pf-body)!important;letter-spacing:.06em;text-transform:uppercase;vertical-align:bottom}
.pf26 .su-table table:not(:has(th)) tr:first-child td :is(b,strong){color:inherit!important;font-weight:inherit}
.pf26 .su-table table:not(:has(th)) tr:nth-child(odd):not(:first-child) td{background:#fff!important}
.pf26 .su-table table:not(:has(th)) tr:nth-child(even) td{background:var(--pf-grey)!important}

/* ---------- Mobile ---------- */
@media (max-width:767px){
  .pf26 .su-row,.pf26 .su-row:has(>.su-column){grid-template-columns:minmax(0,1fr)}
  .pf26 .su-box-title{padding:22px 20px 0!important}
  .pf26 .su-box-content{padding:10px 20px 22px!important}
}