/* ---------- Base / Tokens ---------- */
:root{
  --bg-main-rgb: 11, 15, 20;      /* #0B0F14 */
  --bg-surface-rgb: 18, 24, 38;   /* #121826 */
  --bg-surface2-rgb: 26, 34, 51;  /* #1A2233 */

  --text-main-rgb: 230, 234, 242; /* #E6EAF2 */
  --text-muted-rgb: 167, 176, 192;/* #A7B0C0 */
  --text-subtle-rgb: 124, 135, 153;

  --accent-rgb: 122, 167, 255;
  --mint-rgb: 139, 255, 203;
  --amber-rgb: 255, 212, 121;

  --max: 1120px;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;

  --shadow-1: 0 18px 60px rgba(0,0,0,.45);
  --shadow-2: 0 10px 30px rgba(0,0,0,.35);

  --glass-blur: 26px;
  --glass-sat: 180%;

  
  --fade-size: 32px;
  --fade-offset: 20px;
  --fade-left: 0;
  --fade-right: 0;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  min-height: 100vh;
  color: rgb(var(--text-main-rgb));
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background:
    radial-gradient(900px 520px at 18% 10%, rgba(var(--accent-rgb), .35), transparent 60%),
    radial-gradient(900px 520px at 80% 18%, rgba(var(--mint-rgb), .22), transparent 60%),
    radial-gradient(900px 520px at 45% 90%, rgba(var(--amber-rgb), .12), transparent 60%),
    linear-gradient(180deg, #0B0F14, #0E1320);
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; }

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 18px;
}

.muted{ color: rgba(var(--text-muted-rgb), 1); }

.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;
}

/* ---------- Glass System (futuristic glossy) ---------- */
.glass{
  position: relative;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255, .14),
      rgba(255,255,255, .05)
    );

  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));

  border: 1px solid rgba(255,255,255, .18);
  border-radius: var(--r-lg);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255, .40),
    0 18px 50px rgba(0,0,0,.45);
}

/* shiny highlight */
.glass::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.55),
      rgba(255,255,255,.10) 30%,
      transparent 62%
    );
  opacity: .80;
  mix-blend-mode: screen;
}

/* subtle inner sheen line */
.glass::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(1200px 180px at 50% 0%,
      rgba(255,255,255,.22),
      transparent 55%);
  opacity: .55;
}

/* Tint helpers (optional) */
.tint--blue{ --tint: var(--accent-rgb); }
.tint--mint{ --tint: var(--mint-rgb); }
.tint--amber{ --tint: var(--amber-rgb); }

.glass--tile{
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.13),
      rgba(255,255,255,.04)
    );
}
.glass--tile::before{
  opacity: .75;
}
.glass--tile{
  border-radius: var(--r-md);
}

/* Apply colored tint (only when --tint set) */
.tint--blue.glass,
.tint--mint.glass,
.tint--amber.glass{
  background:
    linear-gradient(180deg,
      rgba(var(--tint), .18),
      rgba(var(--tint), .05)
    );
}

/* Buttons glass */
.glass--btn{
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 10px 26px rgba(0,0,0,.30);
}

/* Menus */
.glass--menu{
  border-radius: 16px;
}

/* Cards */
.glass--card{
  border-radius: var(--r-lg);
}

/* Topbar tuned */
.glass--topbar{
  border-radius: 999px;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.12),
      rgba(255,255,255,.035)
    );
  border: 1px solid rgba(255,255,255,.16);
}

/* Hero card tuned */
.glass--hero{
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.03)
    );
}

/* Pills */
.glass--pill{
  border-radius: 999px;
  padding: 10px 14px;
}

/* ---------- Topbar ---------- */
.topbar{
  position: sticky;
  top: 14px;
  z-index: 1000;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;

  margin: 14px auto 0;
  max-width: calc(var(--max) + 36px);
  padding: 14px 16px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .2px;
}
.brand__dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(var(--mint-rgb), 1);
  box-shadow: 0 0 0 5px rgba(var(--mint-rgb), .18);
}
.brand__name{ font-size: 18px; }

.topbar__right{
  display:flex;
  align-items:center;
  gap: 12px;
}

.status{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
}
.status__dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(var(--mint-rgb), 1);
  box-shadow: 0 0 0 5px rgba(var(--mint-rgb), .16);
}
.status__text{ color: rgba(var(--text-main-rgb), 1); font-weight: 700; font-size: 13px; }
.status__sep{ opacity: .55; }
.status__time{ color: rgba(var(--text-muted-rgb), 1); font-variant-numeric: tabular-nums; font-size: 13px; }

.links{ display:flex; align-items:center; gap: 10px; }

/* Dropdown */
.dropdown{ position: relative; }

.btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  color: rgb(var(--text-main-rgb));
  cursor: pointer;
  background: transparent;
}
.btn .chev{ opacity: .85; }

.dropdown-menu{
  position:absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 210px;
  padding: 10px;
  margin: 0;
  list-style: none;
}

.dropdown-menu li a{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(var(--text-main-rgb), 1);
  text-decoration: none;
  border: 1px solid transparent;
}
.dropdown-menu li a:hover{
  background: rgba(var(--accent-rgb), .12);
  border-color: rgba(var(--accent-rgb), .18);
  text-decoration: none;
}

/* ---------- Hero ---------- */
.hero{
  padding: 28px 0 10px;
}
.hero__card{
  margin-top: 18px;
  padding: 22px;
}
.hero__kicker{
  margin: 0 0 6px;
  color: rgba(var(--text-muted-rgb), 1);
  font-size: 13px;
  letter-spacing: .35px;
  text-transform: uppercase;
}
.hero__title{
  margin: 0 0 10px;
  font-size: clamp(22px, 3.5vw, 38px);
  letter-spacing: -0.6px;
}
.hero__subtitle{
  margin: 0;
  color: rgba(var(--text-muted-rgb), 1);
  line-height: 1.55;
  max-width: 70ch;
}
.hero__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  font-weight: 800;
  font-size: 14px;
  color: rgba(var(--text-main-rgb), 1);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.14);
}
.pill:hover{
  text-decoration: none;
  border-color: rgba(255,255,255,.22);
}

/* ---------- Main / Sections ---------- */
.main{
  padding: 8px 0 34px;
}

.section{
  padding: 18px 0 6px;
}

.welcome{
  padding: 18px;
  border-radius: var(--r-lg);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
}
.welcome__head h2{
  margin: 0 0 6px;
  font-size: 20px;
}
.welcome__head p{
  margin: 0;
  color: rgba(var(--text-muted-rgb), 1);
  line-height: 1.5;
}
.welcome__meta{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.badge{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.10);
  color: rgba(var(--text-muted-rgb), 1);
  font-size: 12px;
}

/* Netflix-like rail */
.rail{
  margin-top: 12px;
}
.rail__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 8px 2px 8px;
}
.rail__title{
  margin: 0;
  font-size: 14px;
  color: rgba(var(--text-muted-rgb), 1);
  letter-spacing: .3px;
  text-transform: uppercase;
}
.rail__controls{
  display:flex;
  gap: 8px;
}
.rail__btn{
  width: 42px;
  height: 38px;
  display:grid;
  place-items:center;
  border: 0;
  cursor:pointer;
  color: rgba(var(--text-main-rgb), 1);
}

/* Scroller */
.scroller{

  display:flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 20px 0px;
  /*scroll-snap-type: x mandatory;*/
  -webkit-overflow-scrolling: touch;
  
  /* wichtig für Mask-Fade */
  position: relative;

  /* verhindert Zeilenumbruch */
  white-space: nowrap;
  
  --fade-left-w:  calc(var(--fade-size) * var(--fade-left));
  --fade-right-w: calc(var(--fade-size) * var(--fade-right));

  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black var(--fade-left-w),
    black calc(100% - var(--fade-right-w)),
    transparent 100%
  );

  mask-image: linear-gradient(
    to right,
    transparent 0,
    black var(--fade-left-w),
    black calc(100% - var(--fade-right-w)),
    transparent 100%
  );

  transition:
    --fade-left 1s ease,
    --fade-right 1s ease;
}
.scroller::-webkit-scrollbar{ height: 10px; }
.scroller::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.16);
  border-radius: 999px;
}
.scroller::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
  border-radius: 999px;
}
/* nur rechts ausblenden */
.scroller.mask-right {
  -webkit-mask-image: linear-gradient(
    to right,
    black 0,
    black calc(100% - var(--fade-size)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    black 0,
    black calc(100% - var(--fade-size)),
    transparent 100%
  );
}
/* nur links ausblenden */
.scroller.mask-left {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black var(--fade-size),
    black 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black var(--fade-size),
    black 100%
  );
}
/* links + rechts ausblenden */
.scroller.mask-both {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black var(--fade-size),
    black calc(100% - var(--fade-size)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black var(--fade-size),
    black calc(100% - var(--fade-size)),
    transparent 100%
  );
}

/* Tiles */
.tile{
  flex: 0 0 auto;
  width: min(320px, 78vw);
  min-height: 170px;
  padding: 16px;
  scroll-snap-align: start;
  border-radius: var(--r-md);
  position: relative;
  overflow:hidden;
}

.tile__glow{
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(220px 220px at 25% 25%, rgba(var(--accent-rgb), .25), transparent 60%),
    radial-gradient(260px 260px at 85% 10%, rgba(var(--mint-rgb), .18), transparent 60%);
  filter: blur(10px);
  opacity: .9;
  pointer-events:none;
}

.tile__body{
  position: relative;
  z-index: 2;
}

.tile h4{
  margin: 0 0 6px;
  font-size: 16px;
}
.tile p{
  margin: 0 0 12px;
  color: rgba(var(--text-muted-rgb), 1);
  line-height: 1.45;
}

.tile__tags{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tag{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.10);
  color: rgba(var(--text-muted-rgb), 1);
}

/* Contact copy button */
.copy{
  font: inherit;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.12);
  color: rgba(var(--text-main-rgb), 1);
  cursor:pointer;
}
.copy:hover{
  border-color: rgba(255,255,255,.22);
}

.link{ color: rgba(var(--text-main-rgb), 1); }

/* ---------- Footer ---------- */
.footer{
  margin-top: 26px;
  padding: 26px 0 18px;
  border-top: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(1000px 300px at 20% 0%, rgba(var(--accent-rgb), .14), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.20));
  backdrop-filter: blur(10px);
}

.footer__grid{
  display:grid;
  gap: 16px;
  grid-template-columns: 1.3fr 1fr 1fr;
  padding-top: 12px;
}
@media (max-width: 900px){
  .footer__grid{ grid-template-columns: 1fr; }
  .topbar{ top: 10px; }
  .status{ display:none; }
}

.footer__col h3, .footer__col h4{
  margin: 0 0 10px;
}
.footer__col p{
  margin: 0;
  line-height: 1.55;
}

.footer__list{
  margin: 0;
  padding-left: 16px;
  color: rgba(var(--text-muted-rgb), 1);
}
.footer__list li{ margin: 8px 0; }
.footer__list a{ color: rgba(var(--text-main-rgb), 1); }

.footer__bottom{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(var(--text-subtle-rgb), 1);
  font-size: 14px;
}

/* ---------- Better “glass pop” on hover ---------- */
.glass:hover{
  border-color: rgba(255,255,255,.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.50),
    0 22px 65px rgba(0,0,0,.55);
}