/*
  Portal2 Layout (Makerworld-like)
  - Scoped via body.scl-portal2
  - IMPORTANT: Portal2 lives *under* the Global-Nav. We do NOT hide the
    global header/footer here and we do NOT disable the breakout helper,
    otherwise the header gets "clamped" by block-theme constrained wrappers.
*/

/* Safety: prevent accidental horizontal scrollbars without breaking breakout */
body.scl-portal2 { overflow-x: clip; }

/* FIX609: Portal2 full width (no left overhang)
   The previous centering via relative left:50% + translateX(-50%) can visually
   "hang" outside the viewport when the breakout element still participates
   in normal flow under constrained wrappers.
   Use the classic full-bleed margin trick, but with dvw to avoid scrollbar drift.
*/
body.scl-portal2 .scl-breakout{
  position: relative !important;
  left: auto !important;
  transform: none !important;
  width: 100dvw !important;
  max-width: 100dvw !important;
  margin-left: calc(50% - 50dvw) !important;
  margin-right: calc(50% - 50dvw) !important;
}

/* --- Supportframe as main menu (Portal2) --- */
body.scl-portal2 .scl-sf{
  position: relative;
  right: auto;
  bottom: auto;
  z-index: 99999;
}

/* Keep the dropdown overlaying, not pushing the header layout */
body.scl-portal2 .scl-sf__card{
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
}

/* When collapsed, show only the round toggle in the header */
body.scl-portal2 .scl-sf.is-collapsed{
  width: 48px;
  height: 48px;
}
body.scl-portal2 .scl-sf.is-collapsed .scl-sf__card{display:none;}
/* Topbar-mounted supportframe: keep the round toggle visible even when the panel is open. */
body.scl-portal2 .scl-sf .scl-sf__toggle{display:flex;}


/* Fallback for older browsers that don't support dvw */
@supports not (width: 100dvw){
  body.scl-portal2 .scl-breakout{
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}

/* Also neutralize potential theme wrappers that sometimes carry margins/transforms */
body.scl-portal2 main.scl-shell,
body.scl-portal2 article.scl-shell-article{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

body.scl-portal2 .scl-portal__container.scl-portal-content{
  /* FULL WIDTH: Portal2 is a shell-app with its own left sidebar.
     Never clamp via the portal shell max-width, otherwise the right area
     looks narrow on large desktops. */
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* WordPress block themes can inject body side paddings via global styles.
   Portal2 must be full-bleed. */
body.scl-portal2{
  padding-left: 0 !important;
  padding-right: 0 !important;
}







body.scl-portal2 .scl-portal-main {
  padding: 0 !important;
}

body.scl-portal2 .scl-p2 {
  min-height: 100vh;
  display: grid;
  /* Portal2 no longer uses a desktop sidebar. Supportframe is the only navigation. */
  grid-template-columns: 1fr;
  gap: 0;
}

/* -------------------------------------------------------------------------- */
/* FIX657: Portal2 spacing rhythm (de-"gequetscht")
   Problem: the V3 portal2 surface looked visually compressed because most
   grids used tight fixed gaps and sections had low vertical spacing.
   Solution: introduce a consistent spacing rhythm via CSS variables and
   apply it to the main Portal2 grids/sections.
*/
body.scl-portal2{
  --scl-p2-gap: clamp(10px, 1.2vw, 16px);
  --scl-p2-gap-sm: clamp(12px, 1.1vw, 18px);
  /* FIX663: a touch more vertical air between big sections */
  --scl-p2-section-gap: clamp(18px, 2.2vw, 34px);
  /* Larger, responsive gap for wide 2-column areas (e.g. News + right rail).
     The default gap is intentionally tight for dense card grids, but looks
     cramped between major columns on desktop.
  */
  --scl-p2-gap-lg: clamp(18px, 2.2vw, 38px);
}

/* Backward-compat: if older markup still outputs these, keep them hidden. */
body.scl-portal2 .scl-p2-sidebar{display:none !important;}
body.scl-portal2 .scl-p2-mobilebar{display:none !important;}


/*
  iOS/Safari robustness
  -------------------
  The Portal2 template is rendered inside a "breakout" wrapper.
  Earlier versions used a 100vw centering trick, which can misbehave on iOS
  (visual viewport != layout viewport). Result: content appears shifted and
  tiles "stick out" on the right.

  For Portal2, prefer a straight 100% width flow layout.
*/
/*
  IMPORTANT:
  Do NOT override the desktop breakout.
  We only neutralize the 100vw centering trick on iOS *mobile* viewports,
  where Safari can report vw against the layout viewport and cause drift.
*/
@supports (-webkit-touch-callout: none){
  @media (max-width: 960px){
    body.scl-portal2 .scl-breakout{
      width:100% !important;
      max-width:100% !important;
      left:0 !important;
      right:auto !important;
      margin-left:0 !important;
      margin-right:0 !important;
    }
  }
}

/* Offcanvas scroll lock (prevents iOS rubber-band + weird horizontal drift) */
html.scl-p2-oc-lock,
body.scl-portal2.scl-p2-oc-lock{
  overflow:hidden !important;
}

/* Sidebar */
body.scl-portal2 .scl-p2-sidebar {
  position: sticky;
  /* If the Global-Nav is sticky/fixed, Portal2 must not slide underneath it. */
  top: var(--scl-p2-sticky-top, 0px);
  height: calc(100vh - var(--scl-p2-sticky-top, 0px));
  padding: 16px;
  border-right: 1px solid var(--scl-border, rgba(0,0,0,.12));
  background: var(--scl-card-bg, rgba(255,255,255,.92));
  overflow: auto;
}

body.scl-portal2 .scl-p2-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 14px;
  font-weight: 900;
  letter-spacing: -0.2px;
}

body.scl-portal2 .scl-p2-brand-badge {
  font-size: 12px;
  font-weight: 700;
  opacity: .75;
  border: 1px solid var(--scl-border, rgba(0,0,0,.12));
  border-radius: 999px;
  padding: 4px 10px;
}

body.scl-portal2 .scl-p2-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
}

body.scl-portal2 .scl-p2-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  color: var(--scl-text, #111);
  text-decoration: none;
}

body.scl-portal2 .scl-p2-nav a:hover {
  background: rgba(0,0,0,.06);
  text-decoration: none;
}

body.scl-portal2 .scl-p2-nav a[aria-current="page"] {
  background: rgba(0,0,0,.08);
  border: 1px solid var(--scl-border, rgba(0,0,0,.12));
}

body.scl-portal2 .scl-p2-sep {
  height: 1px;
  background: var(--scl-border, rgba(0,0,0,.12));
  margin: 12px 6px;
}

body.scl-portal2 .scl-p2-social {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
}

body.scl-portal2 .scl-p2-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 1px solid var(--scl-border, rgba(0,0,0,.12));
  background: rgba(0,0,0,.04);
  color: var(--scl-text, #111);
  text-decoration: none;
}

body.scl-portal2 .scl-p2-icon:hover {
  background: rgba(0,0,0,.08);
  text-decoration: none;
}

body.scl-portal2 .scl-p2-legal {
  margin-top: 10px;
  padding: 8px 10px;
  opacity: .85;
  font-size: 13px;
}

/* Main */
body.scl-portal2 .scl-p2-main {
  /* FIX663: breathing room on desktop, still compact on mobile */
  padding: clamp(12px, 2.2vw, 22px) clamp(14px, 3vw, 32px) 28px;
  min-width: 0; /* prevent grid child overflow (iOS Safari) */
}

body.scl-portal2 .scl-p2-topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

/* Supportframe + Brand (left cluster) */
body.scl-portal2 .scl-p2-topbar-left{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
body.scl-portal2 .scl-p2-brandlink{font-weight:900;letter-spacing:.2px;text-decoration:none;color:var(--scl-text);padding:6px 2px;line-height:1;}
body.scl-portal2 .scl-p2-brandlink:hover{text-decoration:underline;}

body.scl-portal2 .scl-p2-search {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--scl-card-bg, rgba(255,255,255,.92));
  border: 1px solid var(--scl-border, rgba(0,0,0,.12));
  border-radius: 14px;
  padding: 10px 12px;
}

body.scl-portal2 .scl-p2-search input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--scl-text, #111);
  outline: none;
  font: inherit;
}

body.scl-portal2 .scl-p2-btn {
  border: 1px solid var(--scl-border, rgba(0,0,0,.12));
  background: var(--scl-card-bg, rgba(255,255,255,.92));
  color: var(--scl-text, #111);
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.scl-portal2 .scl-p2-btn-t {
  display: inline;
}

body.scl-portal2 .scl-p2-btn:hover {
  background: rgba(0,0,0,.06);
  text-decoration: none;
}

body.scl-portal2 .scl-p2-wrap {
  position: relative;
  min-width: 0;
  /* FIX663: center Portal2 content on wide screens (modern, less "gequetscht") */
  max-width: var(--scl-p2-max, 1360px);
  margin-left: auto;
  margin-right: auto;
}

/* World popover (placeholder) */
body.scl-portal2 .scl-p2-worldpop {
  display: none;
  position: absolute;
  top: 56px;
  right: 0;
  width: min(340px, 92vw);
  border: 1px solid var(--scl-border, rgba(0,0,0,.12));
  background: var(--scl-card-bg, rgba(255,255,255,.92));
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  z-index: 60;
}

body.scl-portal2 .scl-p2-worldpop.is-open {
  display: block;
}

body.scl-portal2 .scl-p2-worldpop-h {
  font-weight: 900;
  margin-bottom: 8px;
}

body.scl-portal2 .scl-p2-worldpop-i {
  width: 100%;
  text-align: left;
  margin: 6px 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--scl-border, rgba(0,0,0,.12));
  background: rgba(0,0,0,.04);
  cursor: pointer;
}

body.scl-portal2 .scl-p2-worldpop-i:hover {
  background: rgba(0,0,0,.08);
}

/* Categories bar */
body.scl-portal2 .scl-p2-cats {
  display: flex;
  gap: 10px;
  overflow: auto;
  padding: 10px 2px 18px;
  margin-bottom: 10px;
}

body.scl-portal2 .scl-p2-cat {
  white-space: nowrap;
  border: 1px solid var(--scl-border, rgba(0,0,0,.12));
  background: rgba(0,0,0,.04);
  color: var(--scl-text, #111);
  border-radius: 999px;
  padding: 8px 12px;
  text-decoration: none;
  font-size: 13px;
  opacity: .92;
}

body.scl-portal2 .scl-p2-cat:hover {
  background: rgba(0,0,0,.08);
  text-decoration: none;
}

/* Grid: News + 4 stats */
body.scl-portal2 .scl-p2-grid-top {
  display: grid;
  /* FIX661: prevent an overly narrow right rail on desktop while keeping the News area dominant */
  grid-template-columns: minmax(520px, 1.8fr) minmax(360px, 1fr);
  column-gap: clamp(16px, 2.2vw, 32px);
  row-gap: var(--scl-p2-gap);
  margin-bottom: var(--scl-p2-section-gap);
}

/* FIX667: calmer, more "app-like" balance on wide screens.
   - Keep News clearly dominant
   - Give the right rail enough room to breathe (no cramped cards)
   - Increase column gap slightly on wide desktops (reduces the "gequetscht" look)
   Scoped to portal2 only; landingpages unaffected. */
@media (min-width: 1280px) {
  body.scl-portal2 .scl-p2-grid-top {
    grid-template-columns: minmax(600px, 2fr) minmax(380px, .95fr);
    column-gap: clamp(22px, 2.6vw, 44px);
  }
}

@media (min-width: 1600px) {
  body.scl-portal2 .scl-p2-grid-top {
    grid-template-columns: minmax(640px, 2.2fr) minmax(400px, .9fr);
    column-gap: clamp(26px, 2.8vw, 52px);
  }
}

body.scl-portal2 .scl-p2-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--scl-p2-gap);
}

body.scl-portal2 .scl-p2-card {
  border: 1px solid var(--scl-border, rgba(0,0,0,.12));
  background: var(--scl-card-bg, rgba(255,255,255,.92));
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
  box-sizing: border-box;
  min-width: 0;
}

body.scl-portal2 .scl-p2-card h2,
body.scl-portal2 .scl-p2-card h3 {
  margin: 0 0 10px 0;
}

body.scl-portal2 .scl-p2-muted {
  opacity: .8;
  font-size: 13px;
}

/* Sections */
body.scl-portal2 .scl-p2-section {
  margin-top: var(--scl-p2-section-gap);
}

body.scl-portal2 .scl-p2-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 10px 0;
}

body.scl-portal2 .scl-p2-section-head h2 {
  font-size: 18px;
  margin: 0;
}

body.scl-portal2 .scl-p2-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--scl-p2-gap-sm);
}

/* Mobile: burger + offcanvas */
body.scl-portal2 .scl-p2-mobilebar {
  display: none;
}

body.scl-portal2 .scl-p2-offcanvas {
  display: none;
}

@media (max-width: 1060px) {
  body.scl-portal2 .scl-p2 {
    grid-template-columns: 1fr;
  }
  body.scl-portal2 .scl-p2-sidebar {
    display: none;
  }
  body.scl-portal2 .scl-p2-main {
    padding: 10px 10px 20px;
  }
  /* Narrow: topbar becomes two rows (menu+brand+buttons, then search) */
  body.scl-portal2 .scl-p2-topbar-left{order:1;}
  body.scl-portal2 [data-scl-p2-world]{order:2;}
  body.scl-portal2 a.scl-p2-btn[aria-label="Konto"],
  body.scl-portal2 a.scl-p2-mobileacct{order:3;}
  body.scl-portal2 .scl-p2-search{order:4;flex:1 1 100%;min-width:0;}
  body.scl-portal2 .scl-p2-search input{width:100%;}

  /* Categories: horizontal scroll on narrow screens */
  body.scl-portal2 .scl-p2-cats{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:4px;}
  body.scl-portal2 .scl-p2-cat{flex:0 0 auto;white-space:nowrap;}
  body.scl-portal2 .scl-p2-grid-top {
    grid-template-columns: 1fr;
  }
  body.scl-portal2 .scl-p2-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Offcanvas is disabled (no burger navigation). */
  body.scl-portal2 .scl-p2-offcanvas { display:none !important; }
  body.scl-portal2 .scl-p2-offcanvas[aria-hidden="true"] {
    opacity: 0;
  }
  body.scl-portal2 .scl-p2-offcanvas .scl-p2-oc-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    transition: opacity .18s ease;
  }
  body.scl-portal2 .scl-p2-offcanvas .scl-p2-oc-panel {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: min(340px, 90vw);
    background: var(--scl-card-bg, rgba(255,255,255,.92));
    border-right: 1px solid var(--scl-border, rgba(0,0,0,.12));
    transform: translateX(-102%);
    transition: transform .18s ease;
    padding: 12px;
    overflow: auto;
  }

  body.scl-portal2 .scl-p2-offcanvas.is-open {
    pointer-events: auto;
  }
  body.scl-portal2 .scl-p2-offcanvas.is-open .scl-p2-oc-backdrop {
    opacity: 1;
  }
  body.scl-portal2 .scl-p2-offcanvas.is-open .scl-p2-oc-panel {
    transform: translateX(0);
  }

  /* Scroll lock while offcanvas is open */
  html.scl-p2-oc-lock,
  body.scl-portal2.scl-p2-oc-lock {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
  }
}

@media (max-width: 640px) {
  /*
    Mobile topbar layout:
    Keep search prominent (full row), but keep the action buttons compact.
    iOS Safari otherwise tends to lay out the grid in a way that produces
    full-width "white bars" under the search.
  */
  body.scl-portal2 .scl-p2-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  body.scl-portal2 .scl-p2-search { flex: 1 1 100%; min-width: 0; }
  body.scl-portal2 .scl-p2-btn, body.scl-portal2 .scl-p2-btn:visited {
    width: auto;
    justify-content: center;
    padding: 9px 10px;
    flex: 0 0 auto;
  }
  body.scl-portal2 .scl-p2-btn-t {
    display: none;
  }
  body.scl-portal2 .scl-p2-row {
    grid-template-columns: 1fr;
  }
  body.scl-portal2 .scl-p2-stats {
    grid-template-columns: 1fr;
  }
}

/* News list + small stat links */
body.scl-portal2 .scl-p2-newslist{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
body.scl-portal2 .scl-p2-newslist li a{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;text-decoration:none}
body.scl-portal2 .scl-p2-newslist .t{font-weight:900;line-height:1.15}
body.scl-portal2 .scl-p2-newslist .d{opacity:.65;font-size:12px;white-space:nowrap}
body.scl-portal2 .scl-p2-statlink{font-weight:900;text-decoration:none}
body.scl-portal2 .scl-p2-statlink:hover{text-decoration:underline}

/* FIX617: burger hardening (clickability + stacking)
   - ensure mobile header is always above decorative overlays
   - ensure burger is clickable on iOS (pointer-events)
*/
body.scl-portal2 .scl-p2-mobilebar{position:sticky;top:0;z-index:99999;pointer-events:auto;}
body.scl-portal2 .scl-p2-burger{position:relative;z-index:100000;pointer-events:auto;touch-action:manipulation;}
body.scl-portal2 .scl-p2-offcanvas{z-index:99998;}
/* When open, lock scroll still allows overlay to cover full viewport */
html.scl-p2-oc-open,body.scl-p2-oc-open{overflow:hidden;}


/* FIX639v2: Portal2 header media (driven by Tools → SCL Portal → Header) */
body.scl-portal2 .scl-p2-header{
  width:100%;
  border-radius:18px;
  overflow:hidden;
  margin-top:12px;
  margin-bottom:10px;
  background:rgba(0,0,0,.06);
  position:relative;
}
body.scl-portal2 .scl-p2-header::after{
  content:'';
  display:block;
  /* base height scaled; 220px at 100% */
  padding-top:calc((220px * var(--scl-p2-hscale,100)) / 100);
}
body.scl-portal2 .scl-p2-header-img,body.scl-portal2 .scl-p2-header-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% var(--scl-p2-hpos-desktop,0%);
}
@media (max-width:1060px){
  .scl-p2-header::after{
    padding-top:calc((170px * var(--scl-p2-hscale,100)) / 100);
  }
  .scl-p2-header-img,body.scl-portal2 .scl-p2-header-video{
    object-position:50% var(--scl-p2-hpos-mobile,0%);
  }
}

/* ==============================
   Portal2 V3 (Hero + modern overview)
   ============================== */

body.scl-portal2 .scl-p2-hero{padding:clamp(14px,2.2vw,22px) var(--scl-nav-pad,clamp(14px,2.2vw,28px));}
body.scl-portal2 .scl-p2-hero__inner{max-width:980px;margin:0 auto;text-align:center;padding:clamp(14px,2.2vw,26px);border:1px solid var(--scl-border,rgba(0,0,0,.12));border-radius:22px;background:color-mix(in srgb,var(--scl-card-bg,#fff) 78%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 12px 34px rgba(0,0,0,.18);}
body.scl-portal2 .scl-p2-hero__kicker{font-size:12px;letter-spacing:.6px;text-transform:uppercase;opacity:.78;margin-bottom:10px;}
body.scl-portal2 .scl-p2-hero__title{margin:0 0 10px;font-size:clamp(26px,3.2vw,44px);line-height:1.05;letter-spacing:-.6px;}
body.scl-portal2 .scl-p2-hero__sub{margin:0 auto;max-width:62ch;font-size:clamp(14px,1.15vw,17px);opacity:.86;}
body.scl-portal2 .scl-p2-hero__ctas{margin-top:16px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

body.scl-portal2 .scl-p2-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--scl-btn-border,rgba(0,0,0,.18));background:color-mix(in srgb,var(--scl-btn-bg,rgba(255,255,255,.65)) 92%, transparent);color:var(--scl-btn-text,var(--scl-text,#111));text-decoration:none;font-weight:900;font-size:13px;letter-spacing:.15px;}
body.scl-portal2 .scl-p2-cta:hover{background:color-mix(in srgb,var(--scl-btn-bg,rgba(255,255,255,.65)) 98%, transparent);}
body.scl-portal2 .scl-p2-cta--primary{border-color:color-mix(in srgb,var(--scl-link,#0b57d0) 55%, var(--scl-btn-border,rgba(0,0,0,.18)));background:color-mix(in srgb,var(--scl-link,#0b57d0) 20%, var(--scl-btn-bg,rgba(255,255,255,.65)));}

/* Cats: links (not buttons) */
body.scl-portal2 .scl-p2-cats{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;padding:12px var(--scl-nav-pad,clamp(14px,2.2vw,28px));}

/* Section head: centered (used for "Start") */
body.scl-portal2 .scl-p2-section-head--center{flex-direction:column;align-items:center;text-align:center;gap:6px;}

/* Start cards: keep 3 columns on desktop for a calmer grid
   NOTE: Must beat .scl-p2-row--cards specificity. */
@media (min-width:900px){
  body.scl-portal2 .scl-p2-row--mods{grid-template-columns:repeat(3,minmax(0,1fr));}
}
body.scl-portal2 .scl-p2-cat{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--scl-border,rgba(0,0,0,.12));background:color-mix(in srgb,var(--scl-card-bg,#fff) 72%, transparent);color:var(--scl-text,#111);text-decoration:none;font-weight:800;font-size:12px;letter-spacing:.1px;}
body.scl-portal2 .scl-p2-cat:hover{background:color-mix(in srgb,var(--scl-card-bg,#fff) 84%, transparent);}

/* Rows */
body.scl-portal2 .scl-p2-row--cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--scl-p2-gap);}
@media (max-width:620px){.scl-p2-row--cards{grid-template-columns:1fr;}}

body.scl-portal2 .scl-p2-card--big{min-height:92px;display:flex;flex-direction:column;gap:6px;justify-content:center;padding:20px;}
body.scl-portal2 .scl-p2-card--big strong{font-size:15px;letter-spacing:.1px;}

body.scl-portal2 .scl-p2-card__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}

body.scl-portal2 .scl-p2-footnote{margin:var(--scl-p2-section-gap) var(--scl-nav-pad,clamp(14px,2.2vw,28px)) 24px;padding:10px 12px;border-radius:14px;border:1px dashed color-mix(in srgb,var(--scl-border,rgba(0,0,0,.12)) 80%, transparent);background:color-mix(in srgb,var(--scl-card-bg,#fff) 62%, transparent);font-size:12px;opacity:.86;}

/* ==============================
   Portal2: Anzeigetafel (Tabs + Panel)
   ============================== */
body.scl-portal2 .scl-p2-board{padding:18px;min-height:320px;}
body.scl-portal2 .scl-p2-board__head{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
body.scl-portal2 .scl-p2-board__title{margin:0;font-size:22px;letter-spacing:-.2px;}

body.scl-portal2 .scl-p2-board__tabs{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px;}
body.scl-portal2 .scl-p2-tab{appearance:none;border:1px solid var(--scl-border,rgba(0,0,0,.12));background:color-mix(in srgb,var(--scl-card-bg,#fff) 68%, transparent);color:var(--scl-text,#111);border-radius:999px;height:34px;padding:0 12px;font-weight:900;font-size:12px;letter-spacing:.12px;cursor:pointer;user-select:none;}
body.scl-portal2 .scl-p2-tab:hover{background:color-mix(in srgb,var(--scl-card-bg,#fff) 82%, transparent);}
body.scl-portal2 .scl-p2-tab.is-active{border-color:color-mix(in srgb,var(--scl-link,#0b57d0) 45%, var(--scl-border,rgba(0,0,0,.12)));background:color-mix(in srgb,var(--scl-link,#0b57d0) 18%, var(--scl-card-bg,#fff));}

body.scl-portal2 .scl-p2-board__panel{margin-top:6px;}
body.scl-portal2 .scl-p2-panel{animation:sclP2Fade .18s ease-out;}
body.scl-portal2 .scl-p2-panel__head{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;}
body.scl-portal2 .scl-p2-panel__title{font-weight:1000;font-size:14px;letter-spacing:.2px;text-transform:uppercase;opacity:.9;}

body.scl-portal2 .scl-p2-optgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px;}
@media (max-width:720px){body.scl-portal2 .scl-p2-optgrid{grid-template-columns:1fr;}}

body.scl-portal2 .scl-p2-opt{display:flex;flex-direction:column;gap:6px;padding:14px 14px;border-radius:16px;border:1px solid var(--scl-border,rgba(0,0,0,.12));background:color-mix(in srgb,var(--scl-card-bg,#fff) 70%, transparent);text-decoration:none;color:inherit;}
body.scl-portal2 .scl-p2-opt:hover{background:color-mix(in srgb,var(--scl-card-bg,#fff) 84%, transparent);}
body.scl-portal2 .scl-p2-opt strong{font-size:14px;letter-spacing:.1px;}
body.scl-portal2 .scl-p2-opt--disabled{opacity:.72;pointer-events:none;}

body.scl-portal2 .scl-p2-statsgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:10px;}
@media (max-width:860px){body.scl-portal2 .scl-p2-statsgrid{grid-template-columns:1fr;}}
body.scl-portal2 .scl-p2-metric{padding:14px;border-radius:16px;border:1px solid var(--scl-border,rgba(0,0,0,.12));background:color-mix(in srgb,var(--scl-card-bg,#fff) 70%, transparent);}
body.scl-portal2 .scl-p2-metric .k{font-weight:1000;font-size:12px;letter-spacing:.25px;text-transform:uppercase;opacity:.75;}
body.scl-portal2 .scl-p2-metric .v{font-weight:1100;font-size:28px;letter-spacing:-.6px;margin-top:4px;}

@keyframes sclP2Fade{from{opacity:.0;transform:translateY(2px);}to{opacity:1;transform:translateY(0);}}


/* FIX669: Portal2 Anzeigetafel Solo Layout (no quick cards, no cats, no quickstart) */
.scl-p2-grid-top.scl-p2-grid-top--solo{grid-template-columns:1fr;}
.scl-p2-grid-top.scl-p2-grid-top--solo > .scl-p2-board{grid-column:1 / -1;}

/* FIX670: Portal2 header-media empty placeholder collapse + sane media sizing */
body.scl-portal2 .scl-header-media.is-empty{
  display:none !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:transparent !important;
}
body.scl-portal2 .scl-header-media{
  background:transparent;
  overflow:hidden;
}
body.scl-portal2 .scl-header-media__img,
body.scl-portal2 .scl-header-media__video{
  max-height:52vh;
}
@media (max-width:782px){
  body.scl-portal2 .scl-header-media__img,
  body.scl-portal2 .scl-header-media__video{max-height:44vh;}
}

/* FIX671: Emergency visibility hardening
   Symptom: Portal2 page renders header/background but main stays empty/blank.
   Cause (likely): some theme/plugin CSS collapses/hides the main wrappers.
   Approach: force essential wrappers visible and provide an empty-state hint.
*/
body.scl-portal2 .scl-shell,
body.scl-portal2 .scl-shell-article,
body.scl-portal2 .scl-portal__container,
body.scl-portal2 .scl-portal-content,
body.scl-portal2 .scl-page-content{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* Ensure the content area cannot collapse to 0 height */
body.scl-portal2 .scl-portal__container,
body.scl-portal2 .scl-page-content{
  min-height: 40vh;
}

/* Empty-state fallback: if the shortcode outputs nothing, show a hint */
body.scl-portal2 .scl-page-content:empty::before{
  content:"Portal2: keine Inhalte gerendert (Shortcode liefert leer).";
  display:block;
  margin:18px auto;
  max-width: 920px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.14);
  background:rgba(255,255,255,.78);
  color:#111;
  font: 700 14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* FIX670R dashboard */
.scl-portal-dashboard{display:flex;flex-direction:column;gap:32px;margin-top:40px;}
.scl-dashboard-block{padding:24px;border-radius:12px;background:var(--scl-surface,#f5f5f5);}

/* FIX673: Portal2 should show ONLY the Anzeigetafel area (single column, full width) */
body.scl-portal2 .scl-p2-only{
  max-width: min(1200px, calc(100vw - 32px));
  /* stand-alone card block: keep distance to the fixed header */
  margin: 18px auto 0; /* FIX675: visible gap below header */
  padding: 32px 0 40px;
  position: relative;
  z-index: 1;
}

/* Some themes apply tight/negative spacing on the content container. Enforce a minimum top gap. */
body.scl-portal2 .scl-shell-article,
body.scl-portal2 .scl-portal-content,
body.scl-portal2 .scl-page-content{
  padding-top: 12px !important;
}
body.scl-portal2 .scl-p2-grid-top.scl-p2-grid-single{
  grid-template-columns: 1fr !important;
}

/* FIX674: Portal2 background must cover the full viewport height
   (the theme can clamp background containers to content height) */
body.scl-portal2,
body.scl-portal2 .scl-shell,
body.scl-portal2 .scl-shell-article,
body.scl-portal2 .scl-portal__container,
body.scl-portal2 .scl-portal-content,
body.scl-portal2 .scl-page-content{
  min-height: 100vh;
}

/* Ensure the white frame has round corners even if theme styles interfere */
body.scl-portal2 .scl-p2-board{
  border-radius: 22px;
  overflow: hidden;
}