/* =========================================================
   PROJECT PAGES (ItemIDs): 101,109,110,111,113
   iOS LIGHT GLASS + Floating Center Tab Button + SVG Icons
   Auto Active Tab per ItemID
   ========================================================= */

:is(body.itemid-101, body.itemid-109, body.itemid-110, body.itemid-111, body.itemid-113){
  --hks-red:  #E73230;
  --hks-gray: #AEBAB1;

  --bg-base: #f4f6f8;
  --glass: rgba(255,255,255,.86);
  --glass2: rgba(255,255,255,.56);
  --stroke: rgba(0,0,0,.08);

  --text: rgba(12,14,18,.92);
  --muted: rgba(12,14,18,.62);

  --radius-xl: 28px;
  --shadow-soft: 0 18px 60px rgba(0,0,0,.12);
  --shadow-card: 0 10px 30px rgba(0,0,0,.10);

  --nav-h: 66px;

  /* Tabbar sizes */
  --tabbar-h: 78px;
  --tabbar-pad: 10px;
  --tabbar-bottom: 14px;

  /* Floating center button */
  --center-size: 62px;
  --center-lift: 18px; /* how much it floats above the bar */
}

/* Background */
:is(body.itemid-101, body.itemid-109, body.itemid-110, body.itemid-111, body.itemid-113){
  background:
    radial-gradient(900px 520px at 16% 8%, rgba(231,50,48,.14), transparent 55%),
    radial-gradient(900px 540px at 86% 12%, rgba(174,186,177,.38), transparent 58%),
    linear-gradient(180deg, #ffffff 0%, var(--bg-base) 55%, #eef1f4 100%) !important;

  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* No blue links */
:is(body.itemid-101, body.itemid-109, body.itemid-110, body.itemid-111, body.itemid-113) a{
  color: inherit !important;
  text-decoration: none !important;
}

/* Remove Cassiopeia brand on these pages */
:is(body.itemid-101, body.itemid-109, body.itemid-110, body.itemid-111, body.itemid-113) header.header .navbar-brand{
  display: none !important;
}

/* Subtle glass header */
:is(body.itemid-101, body.itemid-109, body.itemid-110, body.itemid-111, body.itemid-113) header.header{
  position: sticky !important;
  top: 0;
  z-index: 1000;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  background: rgba(255,255,255,.76) !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;

  min-height: var(--nav-h);
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Hide template footer on these pages */
:is(body.itemid-101, body.itemid-109, body.itemid-110, body.itemid-111, body.itemid-113) footer,
:is(body.itemid-101, body.itemid-109, body.itemid-110, body.itemid-111, body.itemid-113) .container-footer,
:is(body.itemid-101, body.itemid-109, body.itemid-110, body.itemid-111, body.itemid-113) .footer{
  display: none !important;
}

/* Space for tabbar */
:is(body.itemid-101, body.itemid-109, body.itemid-110, body.itemid-111, body.itemid-113) main,
:is(body.itemid-101, body.itemid-109, body.itemid-110, body.itemid-111, body.itemid-113) .container-component,
:is(body.itemid-101, body.itemid-109, body.itemid-110, body.itemid-111, body.itemid-113) .sppb-section{
  padding-bottom: calc(var(--tabbar-h) + var(--center-lift) + 70px) !important;
}

/* ===== Landing styles (only Projekt Home 113) ===== */
body.itemid-113 .projekt-shell{
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 18px calc(var(--tabbar-h) + var(--center-lift) + 70px);
}
body.itemid-113 .projekt-head{
  padding: 16px 16px 10px;
  margin: 4px 0 16px;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-soft);
}
body.itemid-113 .projekt-badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  font-weight: 750;
}
body.itemid-113 .projekt-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  background: var(--hks-red);
  box-shadow: 0 0 0 6px rgba(231,50,48,.14);
}
body.itemid-113 .projekt-title{
  margin: 14px 0 6px;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
body.itemid-113 .projekt-sub{
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}
body.itemid-113 .projekt-tiles{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 14px;
}
body.itemid-113 .tile{
  grid-column: span 12;
  display: block;
  padding: 18px 18px 16px;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--glass), var(--glass2));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
body.itemid-113 .tile:hover{
  transform: translateY(-3px);
  border-color: rgba(0,0,0,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.62));
}
body.itemid-113 .tile:active{ transform: translateY(-1px) scale(.995); }
body.itemid-113 .tile-top{
  display:flex;
  justify-content: space-between;
  align-items:center;
  margin-bottom: 10px;
}
body.itemid-113 .tile-chip{
  display:inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .25px;
  background: rgba(174,186,177,.55);
  color: rgba(0,0,0,.80);
}
body.itemid-113 .tile h2{ margin: 0 0 6px; font-size: 22px; }
body.itemid-113 .tile p{ margin: 0 0 12px; color: var(--muted); line-height: 1.45; }
body.itemid-113 .tile-cta{ font-weight: 900; color: rgba(0,0,0,.78); }
body.itemid-113 .tile--primary{ border-color: rgba(231,50,48,.22); }
body.itemid-113 .tile--primary .tile-chip{ background: rgba(231,50,48,.92); color:#fff; }

@media (min-width: 768px){
  body.itemid-113 .tile{ grid-column: span 6; }
}

/* Tile icon pill (SVG) */
body.itemid-113 .tile-icon{
  width: 38px;
  height: 38px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
}
body.itemid-113 .tile-icon .ico{
  width: 18px;
  height: 18px;
  stroke: rgba(0,0,0,.72);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===========================
   iOS TAB BAR + FLOATING CENTER
   =========================== */
:is(body.itemid-101, body.itemid-109, body.itemid-110, body.itemid-111, body.itemid-113) .ios-tabbar.ios-tabbar--center{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--tabbar-bottom);

  width: min(820px, calc(100% - 24px));
  height: var(--tabbar-h);
  z-index: 1200;

  display: grid;
  grid-template-columns: 1fr 1fr auto 1fr 1fr;
  align-items: center;
  gap: 6px;

  padding: var(--tabbar-pad);
  border-radius: 26px;

  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.18);

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

/* Regular tabs */
:is(body.itemid-101, body.itemid-109, body.itemid-110, body.itemid-111, body.itemid-113) .ios-tabbar .tab{
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 6px;

  border-radius: 18px;
  color: rgba(0,0,0,.72);
  font-weight: 850;

  border: 1px solid transparent;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
  min-height: calc(var(--tabbar-h) - (var(--tabbar-pad) * 2));
}

/* Hover/press */
:is(body.itemid-101, body.itemid-109, body.itemid-110, body.itemid-111, body.itemid-113) .ios-tabbar .tab:hover{
  background: rgba(0,0,0,.04);
  transform: translateY(-1px);
}
:is(body.itemid-101, body.itemid-109, body.itemid-110, body.itemid-111, body.itemid-113) .ios-tabbar .tab:active{
  transform: translateY(0px) scale(.99);
}

/* Icon box */
:is(body.itemid-101, body.itemid-109, body.itemid-110, body.itemid-111, body.itemid-113) .ios-tabbar .tab-ico{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
}
:is(body.itemid-101, body.itemid-109, body.itemid-110, body.itemid-111, body.itemid-113) .ios-tabbar .tab-txt{
  font-size: 12px;
  letter-spacing: .1px;
}

/* SVG style */
:is(body.itemid-101, body.itemid-109, body.itemid-110, body.itemid-111, body.itemid-113) .ios-tabbar .ico{
  width: 18px;
  height: 18px;
  stroke: rgba(0,0,0,.72);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===== Floating center button ===== */
:is(body.itemid-101, body.itemid-109, body.itemid-110, body.itemid-111, body.itemid-113) .ios-tabbar .tab--center{
  position: relative;
  min-height: calc(var(--tabbar-h) - (var(--tabbar-pad) * 2));
  background: transparent !important;
  border: none !important;
  transform: none !important;
}

:is(body.itemid-101, body.itemid-109, body.itemid-110, body.itemid-111, body.itemid-113) .ios-tabbar .tab-ico--center{
  width: var(--center-size);
  height: var(--center-size);
  border-radius: 22px;

  background: linear-gradient(180deg, rgba(231,50,48,.96), rgba(231,50,48,.86));
  border: 1px solid rgba(231,50,48,.28);
  box-shadow: 0 14px 40px rgba(231,50,48,.22), 0 18px 60px rgba(0,0,0,.18);

  transform: translateY(calc(-1 * var(--center-lift)));
}

:is(body.itemid-101, body.itemid-109, body.itemid-110, body.itemid-111, body.itemid-113) .ios-tabbar .ico--center{
  width: 22px;
  height: 22px;
  stroke: rgba(255,255,255,.95);
  stroke-width: 2.1;
}

:is(body.itemid-101, body.itemid-109, body.itemid-110, body.itemid-111, body.itemid-113) .ios-tabbar .tab-txt--center{
  margin-top: calc(-1 * (var(--center-lift) - 6px));
  font-size: 12px;
  font-weight: 900;
  color: rgba(0,0,0,.82);
}

/* Center hover effect */
:is(body.itemid-101, body.itemid-109, body.itemid-110, body.itemid-111, body.itemid-113) .ios-tabbar .tab--center:hover .tab-ico--center{
  filter: brightness(1.03);
}
:is(body.itemid-101, body.itemid-109, body.itemid-110, body.itemid-111, body.itemid-113) .ios-tabbar .tab--center:active .tab-ico--center{
  transform: translateY(calc(-1 * var(--center-lift))) scale(.98);
}

/* ===== AUTO ACTIVE TAB per ItemID ===== */
/* NOTE: passe /projekt-home an, falls deine Projekt-URL anders ist */
body.itemid-111 .ios-tabbar a[href="/individual"],
body.itemid-101 .ios-tabbar a[href="/talentakademie"],
body.itemid-109 .ios-tabbar a[href="/dolcefumo"],
body.itemid-110 .ios-tabbar a[href="/piadaevino"]{
  background: rgba(231,50,48,.10);
  border-color: rgba(231,50,48,.18);
  color: rgba(0,0,0,.92);
}
body.itemid-111 .ios-tabbar a[href="/individual"] .tab-ico,
body.itemid-101 .ios-tabbar a[href="/talentakademie"] .tab-ico,
body.itemid-109 .ios-tabbar a[href="/dolcefumo"] .tab-ico,
body.itemid-110 .ios-tabbar a[href="/piadaevino"] .tab-ico{
  background: rgba(231,50,48,.12);
  border-color: rgba(231,50,48,.18);
}
body.itemid-111 .ios-tabbar a[href="/individual"] .ico,
body.itemid-101 .ios-tabbar a[href="/talentakademie"] .ico,
body.itemid-109 .ios-tabbar a[href="/dolcefumo"] .ico,
body.itemid-110 .ios-tabbar a[href="/piadaevino"] .ico{
  stroke: rgba(0,0,0,.88);
}

/* Center active on Projekt Home */
body.itemid-113 .ios-tabbar a[href="/projekt-home"] .tab-ico--center{
  box-shadow: 0 16px 46px rgba(231,50,48,.26), 0 20px 70px rgba(0,0,0,.18);
}
/* Projekt Home: Seitentitel/Überschrift oben links ausblenden */
body.itemid-113 .page-header,
body.itemid-113 .page-header h1,
body.itemid-113 .page-header .page-title,
body.itemid-113 h1.page-title,
body.itemid-113 .page-title{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Falls Cassiopeia den Titel als <h1> im Main ausgibt */
body.itemid-113 main h1:first-of-type{
  display: none !important;
}